Upload folder using huggingface_hub

Dockerfile

@@ -3,8 +3,8 @@ FROM node:20
 # Create app directory
 WORKDIR /app
 
-# Install dependencies for HF CLI
-RUN apt-get update && apt-get install -y curl python3-venv && rm -rf /var/lib/apt/lists/*
+# Install dependencies for HF CLI and pdf2svg
+RUN apt-get update && apt-get install -y curl python3-venv pdf2svg && rm -rf /var/lib/apt/lists/*
 
 # Install HF CLI
 RUN curl -LsSf https://hf.co/cli/install.sh | bash

public/color_rm.html

@@ -1384,13 +1384,30 @@
 
                         <!-- Import Tab -->
                         <div id="pageModalImport" class="page-modal-content" style="display:none;">
-                            <div style="border:2px dashed var(--border); border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:all 0.2s;" onclick="document.getElementById('addImagePageInput').click();" onmouseover="this.style.borderColor='#8b5cf6'; this.style.background='rgba(139,92,246,0.05)';" onmouseout="this.style.borderColor='var(--border)'; this.style.background='transparent';">
-                                <i class="bi bi-cloud-upload" style="font-size:3rem; color:#8b5cf6; display:block; margin-bottom:15px;"></i>
-                                <div style="font-weight:600; color:white; margin-bottom:5px;">Click to upload image</div>
+                            <!-- Image Import -->
+                            <div style="border:2px dashed var(--border); border-radius:12px; padding:30px 20px; text-align:center; cursor:pointer; transition:all 0.2s; margin-bottom:15px;" onclick="document.getElementById('addImagePageInput').click();" onmouseover="this.style.borderColor='#8b5cf6'; this.style.background='rgba(139,92,246,0.05)';" onmouseout="this.style.borderColor='var(--border)'; this.style.background='transparent';">
+                                <i class="bi bi-image" style="font-size:2rem; color:#8b5cf6; display:block; margin-bottom:10px;"></i>
+                                <div style="font-weight:600; color:white; margin-bottom:5px;">Import Image</div>
                                 <div style="font-size:0.8rem; color:#888;">PNG, JPG, WebP supported</div>
                             </div>
-                            <p style="text-align:center; font-size:0.8rem; color:#666; margin-top:15px;">
-                                <i class="bi bi-info-circle"></i> Image will be added as a new page
+
+                            <!-- SVG Import -->
+                            <div style="border:2px dashed var(--border); border-radius:12px; padding:30px 20px; text-align:center; cursor:pointer; transition:all 0.2s; margin-bottom:15px;" onclick="window.App.importSvgAsInfiniteCanvas();" onmouseover="this.style.borderColor='#10b981'; this.style.background='rgba(16,185,129,0.05)';" onmouseout="this.style.borderColor='var(--border)'; this.style.background='transparent';">
+                                <i class="bi bi-filetype-svg" style="font-size:2rem; color:#10b981; display:block; margin-bottom:10px;"></i>
+                                <div style="font-weight:600; color:white; margin-bottom:5px;">Import SVG</div>
+                                <div style="font-size:0.8rem; color:#888;">Vector graphics as editable elements</div>
+                            </div>
+
+                            <!-- PDF Import (Experimental) -->
+                            <div style="border:2px dashed var(--border); border-radius:12px; padding:30px 20px; text-align:center; cursor:pointer; transition:all 0.2s; position:relative;" onclick="window.App.importPdf();" onmouseover="this.style.borderColor='#ff6b6b'; this.style.background='rgba(255,107,107,0.05)';" onmouseout="this.style.borderColor='var(--border)'; this.style.background='transparent';">
+                                <span style="position:absolute; top:8px; right:8px; background:#ff6b6b; color:white; font-size:0.6rem; padding:2px 6px; border-radius:4px; font-weight:600;">EXPERIMENTAL</span>
+                                <i class="bi bi-file-pdf" style="font-size:2rem; color:#ff6b6b; display:block; margin-bottom:10px;"></i>
+                                <div style="font-weight:600; color:white; margin-bottom:5px;">Import PDF</div>
+                                <div style="font-size:0.8rem; color:#888;">Convert PDF pages to SVG (server-side)</div>
+                            </div>
+
+                            <p style="text-align:center; font-size:0.75rem; color:#666; margin-top:15px;">
+                                <i class="bi bi-info-circle"></i> Files will be added as new pages
                             </p>
                         </div>
 

public/scripts/modules/ColorRmRenderer.js

@@ -964,8 +964,11 @@ export const ColorRmRenderer = {
     },
 
     // Helper to render masked images (v2 feature)
+    // Uses 2x supersampling for higher quality output
     _renderMaskedImage(ctx, st, contentImg) {
-        const maskCacheKey = st.mask.src;
+        // Clean up mask src - remove newlines that may be in base64 data
+        const cleanMaskSrc = st.mask.src.replace(/\s/g, '');
+        const maskCacheKey = cleanMaskSrc;
         let maskImg = this._imageCache.get(maskCacheKey);
 
         if (!maskImg) {
@@ -975,7 +978,7 @@ export const ColorRmRenderer = {
                 maskImg._loaded = true;
                 this.invalidateCache();
             };
-            maskImg.src = st.mask.src;
+            maskImg.src = cleanMaskSrc;
             this._imageCache.set(maskCacheKey, maskImg);
             return;
         }
@@ -985,28 +988,37 @@ export const ColorRmRenderer = {
         const w = Math.max(1, Math.round(st.w));
         const h = Math.max(1, Math.round(st.h));
 
-        // Create offscreen canvas for the content
+        // Use 2x supersampling for higher quality
+        const scale = 2;
+        const scaledW = w * scale;
+        const scaledH = h * scale;
+
+        // Create offscreen canvas for the content at higher resolution
         const contentCanvas = document.createElement('canvas');
-        contentCanvas.width = w;
-        contentCanvas.height = h;
+        contentCanvas.width = scaledW;
+        contentCanvas.height = scaledH;
         const contentCtx = contentCanvas.getContext('2d');
+        contentCtx.imageSmoothingEnabled = true;
+        contentCtx.imageSmoothingQuality = 'high';
 
-        // Draw content image
-        contentCtx.drawImage(contentImg, 0, 0, w, h);
+        // Draw content image at higher resolution
+        contentCtx.drawImage(contentImg, 0, 0, scaledW, scaledH);
 
-        // Create offscreen canvas for the mask (luminance to alpha conversion)
+        // Create offscreen canvas for the mask at higher resolution
         const maskCanvas = document.createElement('canvas');
-        maskCanvas.width = w;
-        maskCanvas.height = h;
+        maskCanvas.width = scaledW;
+        maskCanvas.height = scaledH;
         const maskCtx = maskCanvas.getContext('2d');
+        maskCtx.imageSmoothingEnabled = true;
+        maskCtx.imageSmoothingQuality = 'high';
 
-        // Draw mask image
-        maskCtx.drawImage(maskImg, 0, 0, w, h);
+        // Draw mask image at higher resolution
+        maskCtx.drawImage(maskImg, 0, 0, scaledW, scaledH);
 
         // Convert mask luminance to alpha
         // In SVG luminance masks: white = visible (alpha 1), black = hidden (alpha 0)
-        const maskData = maskCtx.getImageData(0, 0, w, h);
-        const contentData = contentCtx.getImageData(0, 0, w, h);
+        const maskData = maskCtx.getImageData(0, 0, scaledW, scaledH);
+        const contentData = contentCtx.getImageData(0, 0, scaledW, scaledH);
 
         for (let i = 0; i < maskData.data.length; i += 4) {
             // Calculate luminance from mask RGB
@@ -1026,8 +1038,10 @@ export const ColorRmRenderer = {
         // Put the masked content back
         contentCtx.putImageData(contentData, 0, 0);
 
-        // Draw result to main canvas
-        ctx.drawImage(contentCanvas, st.x, st.y);
+        // Draw result to main canvas, scaling down for final output
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(contentCanvas, st.x, st.y, w, h);
     },
 
     // Helper to render text with SVG data (v2 feature)

public/scripts/modules/ColorRmSession.js

@@ -62,6 +62,7 @@ export const ColorRmSession = {
     /**
      * Rasterize a masked image using luminance mask
      * Applies SVG-style luminance masking where white=visible, black=hidden
+     * Uses 2x supersampling for higher quality output
      */
     async _rasterizeMaskedImage(ctx, item, contentImg) {
         return new Promise((resolve) => {
@@ -72,28 +73,37 @@ export const ColorRmSession = {
                 const w = Math.max(1, Math.round(item.w || contentImg.width));
                 const h = Math.max(1, Math.round(item.h || contentImg.height));
 
-                // Create offscreen canvas for the content
+                // Use 2x supersampling for higher quality
+                const scale = 2;
+                const scaledW = w * scale;
+                const scaledH = h * scale;
+
+                // Create offscreen canvas for the content at higher resolution
                 const contentCanvas = document.createElement('canvas');
-                contentCanvas.width = w;
-                contentCanvas.height = h;
+                contentCanvas.width = scaledW;
+                contentCanvas.height = scaledH;
                 const contentCtx = contentCanvas.getContext('2d');
+                contentCtx.imageSmoothingEnabled = true;
+                contentCtx.imageSmoothingQuality = 'high';
 
-                // Draw content image
-                contentCtx.drawImage(contentImg, 0, 0, w, h);
+                // Draw content image at higher resolution
+                contentCtx.drawImage(contentImg, 0, 0, scaledW, scaledH);
 
-                // Create offscreen canvas for the mask
+                // Create offscreen canvas for the mask at higher resolution
                 const maskCanvas = document.createElement('canvas');
-                maskCanvas.width = w;
-                maskCanvas.height = h;
+                maskCanvas.width = scaledW;
+                maskCanvas.height = scaledH;
                 const maskCtx = maskCanvas.getContext('2d');
+                maskCtx.imageSmoothingEnabled = true;
+                maskCtx.imageSmoothingQuality = 'high';
 
-                // Draw mask image
-                maskCtx.drawImage(maskImg, 0, 0, w, h);
+                // Draw mask image at higher resolution
+                maskCtx.drawImage(maskImg, 0, 0, scaledW, scaledH);
 
                 // Convert mask luminance to alpha
                 // In SVG luminance masks: white = visible (alpha 1), black = hidden (alpha 0)
-                const maskData = maskCtx.getImageData(0, 0, w, h);
-                const contentData = contentCtx.getImageData(0, 0, w, h);
+                const maskData = maskCtx.getImageData(0, 0, scaledW, scaledH);
+                const contentData = contentCtx.getImageData(0, 0, scaledW, scaledH);
 
                 for (let i = 0; i < maskData.data.length; i += 4) {
                     // Calculate luminance from mask RGB
@@ -112,17 +122,21 @@ export const ColorRmSession = {
                 // Put the masked content back
                 contentCtx.putImageData(contentData, 0, 0);
 
-                // Draw result to main canvas
-                ctx.drawImage(contentCanvas, x, y);
+                // Draw result to main canvas, scaling down for final output
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                ctx.drawImage(contentCanvas, x, y, w, h);
                 resolve();
             };
-            maskImg.onerror = () => {
+            maskImg.onerror = (e) => {
                 // Fallback: draw without mask
-                console.warn('Failed to load mask image, drawing without mask:', item.id);
+                console.warn('Failed to load mask image, drawing without mask:', item.id, e);
                 ctx.drawImage(contentImg, item.x || 0, item.y || 0, item.w || contentImg.width, item.h || contentImg.height);
                 resolve();
             };
-            maskImg.src = item.mask.src;
+            // Clean up mask src - remove newlines that may be in base64 data
+            const cleanMaskSrc = item.mask.src.replace(/\s/g, '');
+            maskImg.src = cleanMaskSrc;
         });
     },
 
@@ -226,7 +240,14 @@ export const ColorRmSession = {
                 await this.dbPut('pages', pageObj);
                 this.state.images.push(pageObj);
 
-                // Sync to LiveSync
+                // CRITICAL: Upload the page blob to R2 so other users can fetch it
+                const uploadSuccess = await this._uploadPageBlob(pageObj.pageId, pageObj.blob);
+
+                // Sync page structure to R2 and Liveblocks
+                await this._syncPageStructureToServer();
+                this._syncPageStructureToLive();
+
+                // Sync history to LiveSync (for deltas)
                 if (this.liveSync && !this.liveSync.isInitializing && toSync.length > 0) {
                     this.liveSync.setHistory(newPageIndex, toSync);
                 }
@@ -235,7 +256,8 @@ export const ColorRmSession = {
                 await this.loadPage(newPageIndex, false);
                 if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
 
-                this.ui.showToast(`SVG imported as infinite canvas (${toSync.length} editable items)`);
+                const syncStatus = uploadSuccess ? '✓ Synced' : '⚠ Local only';
+                this.ui.showToast(`SVG imported as infinite canvas (${toSync.length} editable items) ${syncStatus}`);
                 console.log(`SVG imported as infinite: ${toRasterize.length} rasterized, ${toSync.length} synced`);
             } catch (e) {
                 console.error('SVG infinite import error:', e);
@@ -314,6 +336,260 @@ export const ColorRmSession = {
         });
     },
 
+    // =============================================
+    // PDF IMPORT (Experimental)
+    // =============================================
+
+    /**
+     * Import PDF file - opens file picker and initiates server-side conversion
+     * This is an experimental feature that converts PDF pages to SVG
+     */
+    async importPdf() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.pdf,application/pdf';
+
+        input.onchange = async (e) => {
+            const file = e.target.files?.[0];
+            if (!file) return;
+
+            this.ui.toggleLoader(true, 'Uploading PDF...');
+
+            try {
+                // Upload PDF to server
+                const formData = new FormData();
+                formData.append('file', file);
+
+                const uploadUrl = window.Config?.apiUrl(`/api/color_rm/pdf/${this.state.sessionId}`)
+                    || `/api/color_rm/pdf/${this.state.sessionId}`;
+
+                const response = await fetch(uploadUrl, {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    throw new Error('Upload failed');
+                }
+
+                const result = await response.json();
+
+                // Show conversion status dialog
+                this._showPdfConversionDialog(result.jobId, file.name);
+
+            } catch (e) {
+                console.error('PDF upload error:', e);
+                this.ui.showToast(`PDF upload failed: ${e.message}`);
+            } finally {
+                this.ui.toggleLoader(false);
+            }
+        };
+
+        input.click();
+    },
+
+    /**
+     * Shows PDF conversion status dialog with polling
+     * @param {string} jobId - The conversion job ID
+     * @param {string} fileName - Original file name
+     */
+    _showPdfConversionDialog(jobId, fileName) {
+        const modal = document.createElement('div');
+        modal.className = 'overlay';
+        modal.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:300; display:flex; align-items:center; justify-content:center;';
+
+        modal.innerHTML = `
+            <div class="card" style="max-width:450px; width:90%; background:var(--bg-panel); border:1px solid var(--border); padding:20px;">
+                <h3 style="margin:0 0 15px; color:white; font-size:1.1rem;">
+                    <i class="bi bi-file-pdf" style="color:#ff6b6b;"></i> PDF Import (Experimental)
+                </h3>
+                <p style="color:#aaa; margin:0 0 15px; font-size:0.9rem;">${fileName}</p>
+
+                <div id="pdfStatus" style="padding:15px; background:var(--bg-dark); border-radius:8px; margin-bottom:15px;">
+                    <div style="display:flex; align-items:center; gap:10px; color:#888;">
+                        <div class="spinner" style="width:20px; height:20px; border:2px solid #333; border-top-color:#4dabf7; border-radius:50%; animation:spin 1s linear infinite;"></div>
+                        <span>Processing PDF...</span>
+                    </div>
+                    <div id="pdfProgress" style="margin-top:10px; font-size:0.85rem; color:#666;"></div>
+                </div>
+
+                <div id="pdfPages" style="max-height:200px; overflow-y:auto; display:none;">
+                    <!-- Page list will be populated here -->
+                </div>
+
+                <div style="display:flex; gap:10px; margin-top:15px;">
+                    <button id="pdfImportAll" class="btn btn-primary" style="flex:1; display:none;">Import All Pages</button>
+                    <button id="pdfClose" class="btn btn-secondary" style="flex:1;">Cancel</button>
+                </div>
+
+                <p style="font-size:0.75rem; color:#666; margin:15px 0 0; text-align:center;">
+                    ⚠️ Experimental: PDF conversion quality may vary
+                </p>
+            </div>
+            <style>
+                @keyframes spin { to { transform: rotate(360deg); } }
+            </style>
+        `;
+
+        document.body.appendChild(modal);
+
+        let pollInterval = null;
+        let jobData = null;
+
+        const pollStatus = async () => {
+            try {
+                const statusUrl = window.Config?.apiUrl(`/api/color_rm/pdf/${this.state.sessionId}/job/${jobId}`)
+                    || `/api/color_rm/pdf/${this.state.sessionId}/job/${jobId}`;
+
+                const response = await fetch(statusUrl);
+                if (!response.ok) throw new Error('Status check failed');
+
+                jobData = await response.json();
+                const statusEl = modal.querySelector('#pdfStatus');
+                const progressEl = modal.querySelector('#pdfProgress');
+                const pagesEl = modal.querySelector('#pdfPages');
+                const importAllBtn = modal.querySelector('#pdfImportAll');
+
+                if (jobData.status === 'processing') {
+                    progressEl.textContent = `Processing page ${jobData.processedPages} of ${jobData.pageCount || '?'}...`;
+                } else if (jobData.status === 'completed') {
+                    clearInterval(pollInterval);
+
+                    statusEl.innerHTML = `
+                        <div style="color:#51cf66; display:flex; align-items:center; gap:10px;">
+                            <i class="bi bi-check-circle-fill"></i>
+                            <span>Conversion complete!</span>
+                        </div>
+                    `;
+
+                    if (jobData.availablePages && jobData.availablePages.length > 0) {
+                        pagesEl.style.display = 'block';
+                        pagesEl.innerHTML = jobData.availablePages.map(pageNum => `
+                            <div class="pdf-page-item" data-page="${pageNum}" style="padding:10px; border:1px solid var(--border); margin-bottom:5px; border-radius:4px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;">
+                                <span>Page ${pageNum}</span>
+                                <button class="btn btn-sm pdf-import-page" data-page="${pageNum}">Import</button>
+                            </div>
+                        `).join('');
+
+                        importAllBtn.style.display = 'block';
+
+                        // Add click handlers for individual page imports
+                        pagesEl.querySelectorAll('.pdf-import-page').forEach(btn => {
+                            btn.onclick = (e) => {
+                                e.stopPropagation();
+                                this._importPdfPage(jobId, parseInt(btn.dataset.page));
+                            };
+                        });
+                    }
+                } else if (jobData.status === 'failed') {
+                    clearInterval(pollInterval);
+                    statusEl.innerHTML = `
+                        <div style="color:#ff6b6b; display:flex; align-items:center; gap:10px;">
+                            <i class="bi bi-exclamation-triangle-fill"></i>
+                            <span>Conversion failed: ${jobData.error || 'Unknown error'}</span>
+                        </div>
+                    `;
+                } else if (jobData.status === 'pending') {
+                    progressEl.textContent = 'Waiting in queue...';
+                }
+
+            } catch (e) {
+                console.error('Status poll error:', e);
+            }
+        };
+
+        // Start polling
+        pollInterval = setInterval(pollStatus, 2000);
+        pollStatus(); // Initial check
+
+        // Import all pages button
+        modal.querySelector('#pdfImportAll').onclick = async () => {
+            if (jobData?.availablePages) {
+                for (const pageNum of jobData.availablePages) {
+                    await this._importPdfPage(jobId, pageNum);
+                }
+                document.body.removeChild(modal);
+            }
+        };
+
+        // Close button
+        modal.querySelector('#pdfClose').onclick = () => {
+            clearInterval(pollInterval);
+            document.body.removeChild(modal);
+        };
+
+        // Close on backdrop click
+        modal.onclick = (e) => {
+            if (e.target === modal) {
+                clearInterval(pollInterval);
+                document.body.removeChild(modal);
+            }
+        };
+    },
+
+    /**
+     * Import a single PDF page as SVG
+     * @param {string} jobId - The conversion job ID
+     * @param {number} pageNum - Page number to import
+     */
+    async _importPdfPage(jobId, pageNum) {
+        this.ui.toggleLoader(true, `Importing page ${pageNum}...`);
+
+        try {
+            const pageUrl = window.Config?.apiUrl(`/api/color_rm/pdf/${this.state.sessionId}/job/${jobId}/page/${pageNum}`)
+                || `/api/color_rm/pdf/${this.state.sessionId}/job/${jobId}/page/${pageNum}`;
+
+            const response = await fetch(pageUrl);
+            if (!response.ok) throw new Error('Failed to download page');
+
+            const svgContent = await response.text();
+
+            // Create a File-like object for the SVG importer
+            const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
+            const svgFile = new File([svgBlob], `pdf_page_${pageNum}.svg`, { type: 'image/svg+xml' });
+
+            // Show import options
+            const options = await this._showSvgImportOptions(`PDF Page ${pageNum}`);
+            if (options.cancelled) {
+                this.ui.toggleLoader(false);
+                return;
+            }
+
+            // Import using existing SVG import logic
+            const newPageIndex = this.state.images.length;
+            const { pageObj, toSync } = await this.importSvgAsPage(svgFile, newPageIndex, options);
+
+            await this.dbPut('pages', pageObj);
+            this.state.images.push(pageObj);
+
+            // CRITICAL: Upload the page blob to R2 so other users can fetch it
+            const uploadSuccess = await this._uploadPageBlob(pageObj.pageId, pageObj.blob);
+
+            // Sync page structure to R2 and Liveblocks
+            await this._syncPageStructureToServer();
+            this._syncPageStructureToLive();
+
+            if (this.liveSync && !this.liveSync.isInitializing && toSync.length > 0) {
+                this.liveSync.setHistory(newPageIndex, toSync);
+            }
+
+            // Navigate to the new page
+            this.state.idx = newPageIndex;
+            await this.loadImage();
+
+            if (this.state.activeSideTab === 'pages') this.renderPageSidebar();
+
+            const syncStatus = uploadSuccess ? '✓ Synced' : '⚠ Local only';
+            this.ui.showToast(`Imported PDF page ${pageNum} ${syncStatus}`);
+
+        } catch (e) {
+            console.error('PDF page import error:', e);
+            this.ui.showToast(`Import failed: ${e.message}`);
+        } finally {
+            this.ui.toggleLoader(false);
+        }
+    },
+
     // =============================================
     // REFACTORED HELPERS (Phase 1 - Core Helpers)
     // =============================================
@@ -1363,6 +1639,16 @@ export const ColorRmSession = {
                             }
                         }
 
+                        // CRITICAL: Upload the page blob to R2 so other users can fetch it
+                        const uploadSuccess = await this._uploadPageBlob(pageObj.pageId, pageObj.blob);
+                        if (!uploadSuccess) {
+                            console.warn('[SVG Import] Failed to upload page blob to R2');
+                        }
+
+                        // Sync page structure to R2 and Liveblocks
+                        await this._syncPageStructureToServer();
+                        this._syncPageStructureToLive();
+
                         // Notify Liveblocks that this page has base history (metadata only, no data)
                         if (this.liveSync && !this.liveSync.isInitializing) {
                             this.liveSync.updatePageMetadata(idx, { hasBaseHistory: true, baseHistoryCount: toSync.length });
@@ -1373,7 +1659,8 @@ export const ColorRmSession = {
                         idx++;
 
                         const modeText = importOptions.asInfinite ? 'as infinite canvas ∞' : '';
-                        this.ui.showToast(`SVG imported ${modeText} (${toSync.length} editable items)`);
+                        const syncStatus = uploadSuccess ? '✓ Synced' : '⚠ Local only';
+                        this.ui.showToast(`SVG imported ${modeText} (${toSync.length} editable items) ${syncStatus}`);
                         console.log(`SVG imported: ${toRasterize.length} items rasterized, ${toSync.length} items stored in R2, infinite=${importOptions.asInfinite}`);
                     } catch (e) {
                         console.error('SVG import error:', e);

worker/pdfToSvg.ts

@@ -0,0 +1,295 @@
+/**
+ * PDF to SVG Conversion Handler (Experimental)
+ *
+ * This module handles server-side PDF to SVG conversion using external services
+ * or libraries. Due to Cloudflare Workers limitations, we use a queue-based
+ * approach for processing.
+ *
+ * Flow:
+ * 1. Client uploads PDF
+ * 2. Server stores PDF in R2 and creates a job
+ * 3. Job processes PDF pages to SVG (via external service or scheduled task)
+ * 4. Client polls for job status and downloads results
+ */
+
+interface PdfJob {
+    id: string;
+    roomId: string;
+    status: 'pending' | 'processing' | 'completed' | 'failed';
+    pageCount: number;
+    processedPages: number;
+    error?: string;
+    createdAt: number;
+    updatedAt: number;
+}
+
+interface Env {
+    TLDRAW_BUCKET: R2Bucket;
+}
+
+/**
+ * Upload a PDF file and create a conversion job
+ */
+export async function handlePdfUpload(request: Request, env: Env): Promise<Response> {
+    try {
+        const url = new URL(request.url);
+        const roomId = url.pathname.split('/')[4]; // /api/color_rm/pdf/:roomId
+
+        if (!roomId) {
+            return new Response(JSON.stringify({ error: 'Room ID required' }), {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        const formData = await request.formData();
+        const file = formData.get('file') as File;
+
+        if (!file) {
+            return new Response(JSON.stringify({ error: 'No file provided' }), {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        // Generate job ID
+        const jobId = `pdf_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+        // Store PDF in R2
+        const pdfKey = `pdf_jobs/${roomId}/${jobId}/source.pdf`;
+        await env.TLDRAW_BUCKET.put(pdfKey, file);
+
+        // Create job metadata
+        const job: PdfJob = {
+            id: jobId,
+            roomId,
+            status: 'pending',
+            pageCount: 0,
+            processedPages: 0,
+            createdAt: Date.now(),
+            updatedAt: Date.now()
+        };
+
+        // Store job metadata
+        const jobKey = `pdf_jobs/${roomId}/${jobId}/job.json`;
+        await env.TLDRAW_BUCKET.put(jobKey, JSON.stringify(job));
+
+        // Note: Actual PDF processing would be triggered here
+        // Options:
+        // 1. Use a Queue (Cloudflare Queues) to process async
+        // 2. Call an external PDF-to-SVG service API
+        // 3. Use a scheduled worker with pdf.js or similar
+
+        // For now, we return the job ID for the client to poll
+        return new Response(JSON.stringify({
+            jobId,
+            status: 'pending',
+            message: 'PDF uploaded. Processing will begin shortly.',
+            pollUrl: `/api/color_rm/pdf/${roomId}/job/${jobId}`
+        }), {
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+    } catch (e) {
+        console.error('PDF upload error:', e);
+        return new Response(JSON.stringify({ error: 'Upload failed' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+}
+
+/**
+ * Get job status
+ */
+export async function handlePdfJobStatus(request: Request, env: Env): Promise<Response> {
+    try {
+        const url = new URL(request.url);
+        const parts = url.pathname.split('/');
+        const roomId = parts[4];
+        const jobId = parts[6];
+
+        if (!roomId || !jobId) {
+            return new Response(JSON.stringify({ error: 'Room ID and Job ID required' }), {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        const jobKey = `pdf_jobs/${roomId}/${jobId}/job.json`;
+        const jobObj = await env.TLDRAW_BUCKET.get(jobKey);
+
+        if (!jobObj) {
+            return new Response(JSON.stringify({ error: 'Job not found' }), {
+                status: 404,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        const job = JSON.parse(await jobObj.text()) as PdfJob;
+
+        // List available SVG pages
+        const svgPrefix = `pdf_jobs/${roomId}/${jobId}/pages/`;
+        const listed = await env.TLDRAW_BUCKET.list({ prefix: svgPrefix });
+        const pages = listed.objects
+            .filter(obj => obj.key.endsWith('.svg'))
+            .map(obj => {
+                const pageNum = obj.key.match(/page_(\d+)\.svg/)?.[1];
+                return pageNum ? parseInt(pageNum) : null;
+            })
+            .filter(n => n !== null)
+            .sort((a, b) => (a as number) - (b as number));
+
+        return new Response(JSON.stringify({
+            ...job,
+            availablePages: pages,
+            downloadUrls: pages.map(p => `/api/color_rm/pdf/${roomId}/job/${jobId}/page/${p}`)
+        }), {
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+    } catch (e) {
+        console.error('Job status error:', e);
+        return new Response(JSON.stringify({ error: 'Status check failed' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+}
+
+/**
+ * Download a converted SVG page
+ */
+export async function handlePdfPageDownload(request: Request, env: Env): Promise<Response> {
+    try {
+        const url = new URL(request.url);
+        const parts = url.pathname.split('/');
+        const roomId = parts[4];
+        const jobId = parts[6];
+        const pageNum = parts[8];
+
+        if (!roomId || !jobId || !pageNum) {
+            return new Response(JSON.stringify({ error: 'Room ID, Job ID, and page number required' }), {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        const svgKey = `pdf_jobs/${roomId}/${jobId}/pages/page_${pageNum}.svg`;
+        const svgObj = await env.TLDRAW_BUCKET.get(svgKey);
+
+        if (!svgObj) {
+            return new Response(JSON.stringify({ error: 'Page not found' }), {
+                status: 404,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        return new Response(await svgObj.text(), {
+            headers: {
+                'Content-Type': 'image/svg+xml',
+                'Cache-Control': 'public, max-age=31536000'
+            }
+        });
+
+    } catch (e) {
+        console.error('Page download error:', e);
+        return new Response(JSON.stringify({ error: 'Download failed' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+}
+
+/**
+ * Process a PDF job (called by scheduled worker or queue handler)
+ * This is a placeholder - actual implementation depends on PDF library choice
+ *
+ * Options for PDF processing:
+ * 1. pdf.js (Mozilla) - Can render to canvas, need to convert to SVG
+ * 2. pdf2svg via external service (like AWS Lambda with pdf2svg binary)
+ * 3. CloudConvert API or similar commercial service
+ * 4. Self-hosted conversion service
+ */
+export async function processPdfJob(env: Env, roomId: string, jobId: string): Promise<void> {
+    const jobKey = `pdf_jobs/${roomId}/${jobId}/job.json`;
+
+    try {
+        // Update status to processing
+        const jobObj = await env.TLDRAW_BUCKET.get(jobKey);
+        if (!jobObj) return;
+
+        const job = JSON.parse(await jobObj.text()) as PdfJob;
+        job.status = 'processing';
+        job.updatedAt = Date.now();
+        await env.TLDRAW_BUCKET.put(jobKey, JSON.stringify(job));
+
+        // Get the PDF file
+        const pdfKey = `pdf_jobs/${roomId}/${jobId}/source.pdf`;
+        const pdfObj = await env.TLDRAW_BUCKET.get(pdfKey);
+        if (!pdfObj) {
+            throw new Error('PDF file not found');
+        }
+
+        // TODO: Implement actual PDF to SVG conversion
+        // This would typically involve:
+        // 1. Loading PDF with pdf.js or similar
+        // 2. Rendering each page
+        // 3. Converting to SVG format
+        // 4. Storing each page as SVG in R2
+
+        // For now, mark as completed (placeholder)
+        job.status = 'completed';
+        job.updatedAt = Date.now();
+        await env.TLDRAW_BUCKET.put(jobKey, JSON.stringify(job));
+
+    } catch (e) {
+        // Update job with error
+        const jobObj = await env.TLDRAW_BUCKET.get(jobKey);
+        if (jobObj) {
+            const job = JSON.parse(await jobObj.text()) as PdfJob;
+            job.status = 'failed';
+            job.error = e instanceof Error ? e.message : 'Unknown error';
+            job.updatedAt = Date.now();
+            await env.TLDRAW_BUCKET.put(jobKey, JSON.stringify(job));
+        }
+    }
+}
+
+/**
+ * Delete a PDF job and all associated files
+ */
+export async function handlePdfJobDelete(request: Request, env: Env): Promise<Response> {
+    try {
+        const url = new URL(request.url);
+        const parts = url.pathname.split('/');
+        const roomId = parts[4];
+        const jobId = parts[6];
+
+        if (!roomId || !jobId) {
+            return new Response(JSON.stringify({ error: 'Room ID and Job ID required' }), {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        // List and delete all files for this job
+        const prefix = `pdf_jobs/${roomId}/${jobId}/`;
+        const listed = await env.TLDRAW_BUCKET.list({ prefix });
+
+        for (const obj of listed.objects) {
+            await env.TLDRAW_BUCKET.delete(obj.key);
+        }
+
+        return new Response(JSON.stringify({ success: true }), {
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+    } catch (e) {
+        console.error('Job delete error:', e);
+        return new Response(JSON.stringify({ error: 'Delete failed' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+}

worker/worker.ts

@@ -2,6 +2,7 @@ import { handleUnfurlRequest } from 'cloudflare-workers-unfurl'
 import { AutoRouter, error, IRequest } from 'itty-router'
 import { handleAssetDownload, handleAssetUpload } from './assetUploads'
 import { handleColorRmDownload, handleColorRmUpload, handleColorRmDelete, handleColorRmPageUpload, handleColorRmPageDownload, handleColorRmPageDelete, handleGetPageStructure, handleSetPageStructure, handleListPages, handleColorRmHistoryUpload, handleColorRmHistoryDownload, handleColorRmHistoryDelete, handleColorRmModificationsUpload, handleColorRmModificationsDownload, handleColorRmModificationsDelete } from './colorRmAssets'
+import { handlePdfUpload, handlePdfJobStatus, handlePdfPageDownload, handlePdfJobDelete } from './pdfToSvg'
 import { Liveblocks } from '@liveblocks/node'
 
 // make sure our sync durable object is made available to cloudflare
@@ -357,6 +358,16 @@ const router = AutoRouter<IRequest, [env: Env, ctx: ExecutionContext]>({
 	.get('/api/color_rm/modifications/:roomId/:pageId', handleColorRmModificationsDownload)
 	.delete('/api/color_rm/modifications/:roomId/:pageId', handleColorRmModificationsDelete)
 
+	// --- PDF to SVG Conversion (Experimental) ---
+	// Upload PDF and create conversion job
+	.post('/api/color_rm/pdf/:roomId', handlePdfUpload)
+	// Get job status
+	.get('/api/color_rm/pdf/:roomId/job/:jobId', handlePdfJobStatus)
+	// Download converted SVG page
+	.get('/api/color_rm/pdf/:roomId/job/:jobId/page/:pageNum', handlePdfPageDownload)
+	// Delete job and all files
+	.delete('/api/color_rm/pdf/:roomId/job/:jobId', handlePdfJobDelete)
+
     // --- Color RM Registry Routes ---
 
     // Clear all projects from registry (for debugging/maintenance)