Upload folder using huggingface_hub

.build_counter

@@ -1 +1 @@
-20
+21

public/scripts/LiveSync.js

@@ -210,9 +210,15 @@ export class LiveSyncClient {
                     if (typeof event.data === 'string') {
                         const msg = JSON.parse(event.data);
                         this._handleYjsMessage(msg);
+                    } else if (event.data instanceof Blob) {
+                        // Binary message - could be Yjs update
+                        // Ignore for now as we use JSON-based sync
                     }
                 } catch (err) {
-                    console.error('[Yjs] Message parse error:', err);
+                    // Only log actual parse errors, not empty objects
+                    if (event.data && event.data.length > 2) {
+                        console.warn('[Yjs] Message parse error:', err.message);
+                    }
                 }
             };
 
@@ -401,7 +407,11 @@ export class LiveSyncClient {
                 color: msg.color,
                 size: msg.size
             });
-            console.log(`[Yjs] Received presence from ${msg.clientId}: page ${msg.pageIdx}`);
+            // Throttle presence logging to reduce console spam
+            if (!this._lastPresenceLogTime || Date.now() - this._lastPresenceLogTime > 2000) {
+                console.log(`[Yjs] Presence from ${msg.clientId}: page ${msg.pageIdx}`);
+                this._lastPresenceLogTime = Date.now();
+            }
 
             // Follow mode: Navigate to the same page as the other user
             // (Skip if this is an echo of our own change or if we recently changed pages)

public/scripts/UI.js

@@ -1,8 +1,41 @@
 export const UI = {
+    // Mini loading indicator for quick operations (non-blocking)
+    showMiniLoader: (text = 'Loading...') => {
+        let mini = document.getElementById('miniLoader');
+        if (!mini) {
+            mini = document.createElement('div');
+            mini.id = 'miniLoader';
+            mini.style.cssText = 'position:fixed;top:10px;right:10px;background:rgba(0,0,0,0.8);color:white;padding:8px 16px;border-radius:6px;font-size:13px;z-index:9999;display:flex;align-items:center;gap:8px;';
+            mini.innerHTML = '<span class="spinner" style="width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite;"></span><span id="miniLoaderText"></span>';
+            // Add spinner animation if not exists
+            if (!document.getElementById('miniLoaderStyle')) {
+                const style = document.createElement('style');
+                style.id = 'miniLoaderStyle';
+                style.textContent = '@keyframes spin{to{transform:rotate(360deg)}}';
+                document.head.appendChild(style);
+            }
+            document.body.appendChild(mini);
+        }
+        const textEl = mini.querySelector('#miniLoaderText');
+        if (textEl) textEl.textContent = text;
+        mini.style.display = 'flex';
+    },
+
+    hideMiniLoader: () => {
+        const mini = document.getElementById('miniLoader');
+        if (mini) mini.style.display = 'none';
+    },
+
     showDashboard: () => {
         const db = document.getElementById('dashboardModal');
         if (db) db.style.display='flex';
-        if (window.App && window.App.loadSessionList) window.App.loadSessionList();
+        // Show loading indicator while loading sessions
+        UI.showMiniLoader('Loading projects...');
+        if (window.App && window.App.loadSessionList) {
+            window.App.loadSessionList().finally(() => UI.hideMiniLoader());
+        } else {
+            UI.hideMiniLoader();
+        }
     },
     hideDashboard: () => {
         const db = document.getElementById('dashboardModal');
@@ -11,7 +44,17 @@ export const UI = {
     showExportModal: () => {
         const em = document.getElementById('exportModal');
         if (em) em.style.display='flex';
-        if (window.App && window.App.renderDlGrid) window.App.renderDlGrid();
+        // Show loading indicator while preparing export grid
+        UI.showMiniLoader('Loading pages...');
+        if (window.App && window.App.renderDlGrid) {
+            try {
+                window.App.renderDlGrid();
+            } finally {
+                UI.hideMiniLoader();
+            }
+        } else {
+            UI.hideMiniLoader();
+        }
 
         // Load persisted export preferences
         try {
@@ -117,10 +160,21 @@ export const UI = {
             if (msgEl) msgEl.innerText = message;
             modal.style.display = 'flex';
 
+            // Keyboard handler for accessibility
+            const keyHandler = (e) => {
+                if (e.key === 'Escape') {
+                    cancelBtn.click();
+                } else if (e.key === 'Enter') {
+                    okBtn.click();
+                }
+            };
+            document.addEventListener('keydown', keyHandler);
+
             const cleanup = () => {
                 modal.style.display = 'none';
                 okBtn.onclick = null;
                 cancelBtn.onclick = null;
+                document.removeEventListener('keydown', keyHandler);
             };
 
             okBtn.onclick = () => {
@@ -133,6 +187,9 @@ export const UI = {
                 if (onCancel) onCancel();
                 resolve(false);
             };
+
+            // Focus confirm button for keyboard access
+            okBtn.focus();
         });
     },
     showAlert: (title, message) => {
@@ -162,10 +219,22 @@ export const UI = {
             if (msgEl) msgEl.innerText = message;
             modal.style.display = 'flex';
 
+            // Keyboard handler for accessibility
+            const keyHandler = (e) => {
+                if (e.key === 'Escape' || e.key === 'Enter') {
+                    okBtn.click();
+                }
+            };
+            document.addEventListener('keydown', keyHandler);
+
             okBtn.onclick = () => {
                 modal.style.display = 'none';
+                document.removeEventListener('keydown', keyHandler);
                 resolve();
             };
+
+            // Focus OK button for keyboard access
+            okBtn.focus();
         });
     },
     showPrompt: (title, placeholder, defaultValue = '') => {

public/scripts/modules/ColorRmExport.js

@@ -28,7 +28,12 @@ export const ColorRmExport = {
                 this.state.dlSelection.sort((a,b)=>a-b);
                 el.className = `thumb-item ${this.state.dlSelection.includes(i)?'selected':''}`;
             };
-            const im = new Image(); im.src = URL.createObjectURL(img.blob);
+            const im = new Image();
+            const blobUrl = URL.createObjectURL(img.blob);
+            im.src = blobUrl;
+            // Revoke blob URL after image loads to prevent memory leak
+            im.onload = () => URL.revokeObjectURL(blobUrl);
+            im.onerror = () => URL.revokeObjectURL(blobUrl);
             el.appendChild(im);
             const sp = document.createElement('span'); sp.innerText = i+1; el.appendChild(sp);
             g.appendChild(el);

public/scripts/modules/ColorRmInput.js

@@ -375,14 +375,32 @@ export const ColorRmInput = {
         let isDragging = false; let startX, startY, initLeft, initTop;
         const handle = this.getElement('pickerDragHandle');
         if(handle) {
+            // Store event handlers for cleanup
+            const onMouseMove = (e) => { if(!isDragging) return; el.style.left = (initLeft + (e.clientX - startX)) + 'px'; el.style.top = (initTop + (e.clientY - startY)) + 'px'; };
+            const onMouseUp = () => isDragging = false;
+
             handle.onmousedown = (e) => { isDragging = true; startX = e.clientX; startY = e.clientY; const r = el.getBoundingClientRect(); initLeft = r.left; initTop = r.top; };
-            // Use document instead of window to be more contained
-            // Each instance's isDragging flag prevents cross-instance interference
-            document.addEventListener('mousemove', (e) => { if(!isDragging) return; el.style.left = (initLeft + (e.clientX - startX)) + 'px'; el.style.top = (initTop + (e.clientY - startY)) + 'px'; });
-            document.addEventListener('mouseup', () => isDragging = false);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+
+            // Store cleanup function for later
+            this._draggableCleanup = () => {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            };
         }
     },
 
+    // Cleanup event listeners (call when destroying app instance)
+    cleanup() {
+        if (this._draggableCleanup) this._draggableCleanup();
+        if (this._pointerMoveCleanup) this._pointerMoveCleanup();
+        if (this._pointerUpCleanup) this._pointerUpCleanup();
+        if (this._resizeCleanup) this._resizeCleanup();
+        if (this._spenEngineCleanup) this._spenEngineCleanup();
+        console.log('[ColorRmInput] Event listeners cleaned up');
+    },
+
     setupShortcuts() {
         const target = this.container || document;
 
@@ -1335,10 +1353,12 @@ export const ColorRmInput = {
         };
 
         window.addEventListener('pointermove', onPointerMove, { passive: true });
+        // Store cleanup function
+        this._pointerMoveCleanup = () => window.removeEventListener('pointermove', onPointerMove);
 
         // Only main app listens to window resize for cursor re-rendering
         if (this.config.isMain) {
-            window.addEventListener('resize', () => {
+            const onResize = () => {
                 if (this.liveSync && this.liveSync.renderCursors) this.liveSync.renderCursors();
 
                 // Update infinite canvas dimensions on resize
@@ -1355,7 +1375,9 @@ export const ColorRmInput = {
                         this.render();
                     }
                 }
-            });
+            };
+            window.addEventListener('resize', onResize);
+            this._resizeCleanup = () => window.removeEventListener('resize', onResize);
         }
         const vp = this.getElement('viewport');
         if(vp) vp.addEventListener('scroll', () => this.liveSync && this.liveSync.renderCursors && this.liveSync.renderCursors(), { passive: true });

public/scripts/modules/ColorRmRenderer.js

@@ -1036,28 +1036,63 @@ export const ColorRmRenderer = {
         return { minX, minY, maxX, maxY, w: maxX - minX, h: maxY - minY };
     },
 
-    // Image cache for loaded images
+    // Image cache for loaded images with size limit to prevent memory leaks
     _imageCache: new Map(),
+    _imageCacheOrder: [], // LRU tracking
+    _imageCacheMaxSize: 50, // Maximum cached images
+
+    // Manage image cache with LRU eviction
+    _addToImageCache(key, img) {
+        // Remove oldest entries if at limit
+        while (this._imageCache.size >= this._imageCacheMaxSize && this._imageCacheOrder.length > 0) {
+            const oldestKey = this._imageCacheOrder.shift();
+            this._imageCache.delete(oldestKey);
+        }
+        this._imageCache.set(key, img);
+        this._imageCacheOrder.push(key);
+    },
+
+    _touchImageCache(key) {
+        const idx = this._imageCacheOrder.indexOf(key);
+        if (idx > -1) {
+            this._imageCacheOrder.splice(idx, 1);
+            this._imageCacheOrder.push(key);
+        }
+    },
+
+    // Clear image cache (call when switching pages or low memory)
+    clearImageCache() {
+        this._imageCache.clear();
+        this._imageCacheOrder = [];
+    },
 
     // Helper to render images (v2 feature)
     _renderImage(ctx, st) {
         const cacheKey = st.src;
         let img = this._imageCache.get(cacheKey);
 
+        if (img) {
+            this._touchImageCache(cacheKey); // Update LRU
+        }
+
         if (!img) {
             // Load image asynchronously
             img = new Image();
             img.onload = () => {
-                this._imageCache.set(cacheKey, img);
+                this._addToImageCache(cacheKey, img);
                 img._loaded = true;
                 // Trigger re-render
                 this.invalidateCache();
             };
             img.onerror = () => {
                 console.warn('Failed to load image:', st.src?.substring(0, 50));
+                // Show error to user for important images
+                if (this.ui && this.ui.showToast) {
+                    this.ui.showToast('Failed to load image');
+                }
             };
             img.src = st.src;
-            this._imageCache.set(cacheKey, img);
+            this._addToImageCache(cacheKey, img);
             return; // Don't render until loaded
         }
 

public/scripts/modules/ColorRmSession.js

@@ -1744,9 +1744,11 @@ export const ColorRmSession = {
                             for (let j = 0; j < BATCH_SIZE && (i + j) <= pdf.numPages; j++) {
                                 const pNum = i + j;
                                 batch.push(pdf.getPage(pNum).then(async page => {
+                                    // 3x DPI (216 DPI) for high-quality rasterization
+                                    const PDF_RENDER_SCALE = 3.0;
                                     const v = page.getViewport({
-                                        scale: 1.5
-                                    }); // Increased scale for higher quality
+                                        scale: PDF_RENDER_SCALE
+                                    });
                                     const cvs = document.createElement('canvas');
                                     cvs.width = v.width;
                                     cvs.height = v.height;
@@ -1754,7 +1756,8 @@ export const ColorRmSession = {
                                         canvasContext: cvs.getContext('2d'),
                                         viewport: v
                                     }).promise;
-                                    const b = await new Promise(r => cvs.toBlob(r, 'image/jpeg', 0.9)); // Higher quality JPEG
+                                    // High quality JPEG (0.92) for good compression with minimal artifacts
+                                    const b = await new Promise(r => cvs.toBlob(r, 'image/jpeg', 0.92));
                                     const pageIdx = idx + j;
                                     const pageId = this._generatePageId('pdf', pNum - 1); // PDF pages are 1-indexed, we want 0-indexed
                                     const pageObj = {
@@ -1766,8 +1769,14 @@ export const ColorRmSession = {
                                         history: []
                                     };
                                     await this.dbPut('pages', pageObj);
-                                    // NOTE: PDF pages are NOT uploaded individually - base PDF is uploaded once
-                                    // and clients render pages from it. Only user-added pages go to R2.
+
+                                    // Upload rasterized PDF page to R2 for multi-user sync
+                                    try {
+                                        await this._uploadPageBlob(pageId, b);
+                                    } catch (uploadErr) {
+                                        console.warn(`[PDF Import] Failed to upload page ${pageId} to R2:`, uploadErr);
+                                    }
+
                                     return pageObj;
                                 }));
                             }

public/scripts/modules/ColorRmStorage.js

@@ -1,9 +1,54 @@
+import { fetchWithTimeout, TIMEOUT } from './NetworkUtils.js';
+
 export const ColorRmStorage = {
-    async dbPut(s, v) { return new Promise(r=>{const t=this.db.transaction(s,'readwrite'); t.objectStore(s).put(v); t.oncomplete=()=>r()}); },
+    async dbPut(s, v) {
+        return new Promise((resolve, reject) => {
+            try {
+                const t = this.db.transaction(s, 'readwrite');
+                t.objectStore(s).put(v);
+                t.oncomplete = () => resolve();
+                t.onerror = (e) => {
+                    console.error(`[dbPut] Error saving to ${s}:`, e.target.error);
+                    reject(e.target.error);
+                };
+            } catch (e) {
+                console.error(`[dbPut] Transaction error:`, e);
+                reject(e);
+            }
+        });
+    },
 
-    async dbGet(s, k) { return new Promise(r=>{const q=this.db.transaction(s,'readonly').objectStore(s).get(k);q.onsuccess=()=>r(q.result)}); },
+    async dbGet(s, k) {
+        return new Promise((resolve, reject) => {
+            try {
+                const q = this.db.transaction(s, 'readonly').objectStore(s).get(k);
+                q.onsuccess = () => resolve(q.result);
+                q.onerror = (e) => {
+                    console.error(`[dbGet] Error reading from ${s}:`, e.target.error);
+                    resolve(null); // Return null on error to avoid breaking flows
+                };
+            } catch (e) {
+                console.error(`[dbGet] Transaction error:`, e);
+                resolve(null);
+            }
+        });
+    },
 
-    async dbGetAll(s) { return new Promise(r=>{const q=this.db.transaction(s,'readonly').objectStore(s).getAll();q.onsuccess=()=>r(q.result||[]);q.onerror=()=>r([])}); },
+    async dbGetAll(s) {
+        return new Promise((resolve) => {
+            try {
+                const q = this.db.transaction(s, 'readonly').objectStore(s).getAll();
+                q.onsuccess = () => resolve(q.result || []);
+                q.onerror = (e) => {
+                    console.error(`[dbGetAll] Error reading all from ${s}:`, e.target.error);
+                    resolve([]);
+                };
+            } catch (e) {
+                console.error(`[dbGetAll] Transaction error:`, e);
+                resolve([]);
+            }
+        });
+    },
 
     async saveSessionState() {
         if(!this.state.sessionId || (this.liveSync && this.liveSync.isInitializing) || this.isUploading) return;
@@ -159,14 +204,18 @@ export const ColorRmStorage = {
                 const modsUrl = window.Config?.apiUrl(`/api/color_rm/modifications/${this.state.sessionId}/${page.pageId}`)
                     || `/api/color_rm/modifications/${this.state.sessionId}/${page.pageId}`;
 
-                await fetch(modsUrl, {
+                const response = await fetchWithTimeout(modsUrl, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
                         modifications: m,
                         timestamp: Date.now()
                     })
-                });
+                }, TIMEOUT.MEDIUM);
+
+                if (!response.ok) {
+                    throw new Error(`Upload failed: ${response.status}`);
+                }
 
                 // Only sync deltas via Liveblocks (usually small)
                 // Also notify that modifications are in R2
@@ -213,11 +262,15 @@ export const ColorRmStorage = {
                 const historyUrl = window.Config?.apiUrl(`/api/color_rm/history/${this.state.sessionId}/${pageId}`)
                     || `/api/color_rm/history/${this.state.sessionId}/${pageId}`;
 
-                await fetch(historyUrl, {
+                const response = await fetchWithTimeout(historyUrl, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(currentPage.history)
-                });
+                }, TIMEOUT.LONG);
+
+                if (!response.ok) {
+                    throw new Error(`Upload failed: ${response.status}`);
+                }
 
                 // Mark page as having base history in R2
                 currentPage.hasBaseHistory = true;

public/scripts/modules/NetworkUtils.js

@@ -0,0 +1,159 @@
+/**
+ * Network Utilities - Shared helpers for network operations
+ * Provides timeout-enabled fetch and consistent error handling
+ */
+
+/**
+ * Fetch with timeout - wraps fetch with AbortController timeout
+ * @param {string} url - The URL to fetch
+ * @param {object} options - Fetch options
+ * @param {number} timeoutMs - Timeout in milliseconds (default: 30000)
+ * @returns {Promise<Response>}
+ */
+export async function fetchWithTimeout(url, options = {}, timeoutMs = 30000) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+    try {
+        const response = await fetch(url, {
+            ...options,
+            signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        return response;
+    } catch (error) {
+        clearTimeout(timeoutId);
+        if (error.name === 'AbortError') {
+            throw new Error(`Request timeout after ${timeoutMs}ms: ${url}`);
+        }
+        throw error;
+    }
+}
+
+/**
+ * Fetch with retry - retries failed requests with exponential backoff
+ * @param {string} url - The URL to fetch
+ * @param {object} options - Fetch options
+ * @param {number} maxRetries - Max retry attempts (default: 3)
+ * @param {number} baseDelayMs - Base delay between retries (default: 1000)
+ * @param {number} timeoutMs - Timeout per request (default: 30000)
+ * @param {function} onRetry - Optional callback(attempt, error) called before each retry
+ * @returns {Promise<Response>}
+ */
+export async function fetchWithRetry(url, options = {}, maxRetries = 3, baseDelayMs = 1000, timeoutMs = 30000, onRetry = null) {
+    let lastError;
+
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        try {
+            return await fetchWithTimeout(url, options, timeoutMs);
+        } catch (error) {
+            lastError = error;
+
+            if (attempt < maxRetries) {
+                const delay = baseDelayMs * Math.pow(2, attempt);
+                if (onRetry) {
+                    onRetry(attempt + 1, error);
+                }
+                await new Promise(r => setTimeout(r, delay));
+            }
+        }
+    }
+
+    throw lastError;
+}
+
+/**
+ * Upload with progress - performs upload with progress callback
+ * Uses XMLHttpRequest for progress events
+ * @param {string} url - The URL to upload to
+ * @param {FormData|Blob|string} data - The data to upload
+ * @param {object} options - Options including headers, method, timeout
+ * @param {function} onProgress - Progress callback(percent, loaded, total)
+ * @returns {Promise<{status: number, response: any}>}
+ */
+export function uploadWithProgress(url, data, options = {}, onProgress = null) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        const method = options.method || 'POST';
+        const timeout = options.timeout || 120000; // 2 minute default for uploads
+
+        xhr.open(method, url);
+
+        // Set headers
+        if (options.headers) {
+            for (const [key, value] of Object.entries(options.headers)) {
+                xhr.setRequestHeader(key, value);
+            }
+        }
+
+        // Set timeout
+        xhr.timeout = timeout;
+
+        // Progress handler
+        if (onProgress && xhr.upload) {
+            xhr.upload.onprogress = (e) => {
+                if (e.lengthComputable) {
+                    const percent = (e.loaded / e.total) * 100;
+                    onProgress(percent, e.loaded, e.total);
+                }
+            };
+        }
+
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                try {
+                    const response = xhr.responseText ? JSON.parse(xhr.responseText) : null;
+                    resolve({ status: xhr.status, response });
+                } catch {
+                    resolve({ status: xhr.status, response: xhr.responseText });
+                }
+            } else {
+                reject(new Error(`Upload failed with status ${xhr.status}: ${xhr.statusText}`));
+            }
+        };
+
+        xhr.onerror = () => reject(new Error('Network error during upload'));
+        xhr.ontimeout = () => reject(new Error(`Upload timeout after ${timeout}ms`));
+        xhr.onabort = () => reject(new Error('Upload aborted'));
+
+        xhr.send(data);
+    });
+}
+
+/**
+ * Safe JSON fetch - fetches and parses JSON with error handling
+ * @param {string} url - The URL to fetch
+ * @param {object} options - Fetch options
+ * @param {number} timeoutMs - Timeout in milliseconds
+ * @returns {Promise<{ok: boolean, data: any, error: string|null}>}
+ */
+export async function safeJsonFetch(url, options = {}, timeoutMs = 30000) {
+    try {
+        const response = await fetchWithTimeout(url, options, timeoutMs);
+
+        if (!response.ok) {
+            return {
+                ok: false,
+                data: null,
+                error: `HTTP ${response.status}: ${response.statusText}`
+            };
+        }
+
+        const data = await response.json();
+        return { ok: true, data, error: null };
+    } catch (error) {
+        return {
+            ok: false,
+            data: null,
+            error: error.message || 'Unknown network error'
+        };
+    }
+}
+
+// Default timeout constants
+export const TIMEOUT = {
+    SHORT: 10000,   // 10 seconds - for metadata/small requests
+    MEDIUM: 30000,  // 30 seconds - default
+    LONG: 60000,    // 60 seconds - for large operations
+    UPLOAD: 120000  // 2 minutes - for file uploads
+};