Update app_enhanced.py

app_enhanced.py

@@ -332,37 +332,39 @@ INDEX_HTML = '''
     
     .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 2px solid #000; padding: 10px; }
     
-    /* === ADJUSTABLE LAYOUTS === */
+    /* === LAYOUTS === */
     .comic-grid { width: 100%; height: 100%; position: relative; background: #000; display:grid; gap: 10px; }
     
-    /* Layout: Rows (Horizontal Split) - Default */
     .comic-grid.layout-rows { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
-    
-    /* Layout: Columns (Vertical Split) */
     .comic-grid.layout-cols { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: 1fr; }
-    
-    /* Layout: Grid (2x2) */
     .comic-grid.layout-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
     
-    /* Layout: Slanted (Designer) */
-    .comic-grid.layout-slanted { display: block; }
-    .comic-grid.layout-slanted .panel { position: absolute; width:100%; left:0; }
-    /* Top Panel */
-    .comic-grid.layout-slanted .panel:nth-child(1) { top: 0; height: 55%; clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%); z-index:2; }
-    /* Bottom Panel */
-    .comic-grid.layout-slanted .panel:nth-child(2) { top: 45%; height: 55%; clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%); z-index:1; }
-    /* Hide extra panels in slanted mode */
-    .comic-grid.layout-slanted .panel:nth-child(n+3) { display: none; }
+    /* === CUSTOM SLANT LAYOUT === */
+    .comic-grid.layout-custom-slant { display: block; position: relative; }
+    .comic-grid.layout-custom-slant .panel { position: absolute; width: 100%; border: none; background: transparent; }
+    /* Panel 1 (Top) */
+    .comic-grid.layout-custom-slant .panel:nth-child(1) { top: 0; height: 100%; z-index:2; clip-path: polygon(0 0, 100% 0, 100% var(--split-r, 55%), 0 var(--split-l, 45%)); }
+    /* Panel 2 (Bottom) */
+    .comic-grid.layout-custom-slant .panel:nth-child(2) { top: 0; height: 100%; z-index:1; clip-path: polygon(0 var(--split-l, 45%), 100% var(--split-r, 55%), 100% 100%, 0 100%); }
+    .comic-grid.layout-custom-slant .panel:nth-child(n+3) { display: none; }
+    
+    /* Split Handles */
+    .split-handle {
+        position: absolute; width: 20px; height: 20px; background: #2196F3; border: 2px solid white; border-radius: 50%;
+        cursor: ns-resize; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.3); display: none;
+    }
+    .layout-custom-slant .split-handle { display: block; }
+    .split-handle.left { left: -10px; top: var(--split-l, 45%); }
+    .split-handle.right { right: -10px; top: var(--split-r, 55%); }
     
     
     .panel { overflow: hidden; background: #eee; cursor: pointer; border: 2px solid #000; position: relative; }
-    .layout-slanted .panel { border: none; background: transparent; }
+    .layout-custom-slant .panel { border: none; }
     .panel.selected { z-index: 20; border-color: #2196F3; }
     
-    /* Image fitting */
     .panel img { 
         width: 100%; height: 100%; 
-        object-fit: contain; /* Default: Show entire image (no cut) */
+        object-fit: contain; 
         transition: transform 0.1s ease-out; 
         transform-origin: center center; 
         pointer-events: auto; 
@@ -393,19 +395,15 @@ INDEX_HTML = '''
     .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
     .speech-bubble textarea { position: absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:1px solid #4CAF50; background:rgba(255,255,255,0.95); text-align:center; padding:8px; z-index:102; resize:none; font: inherit; white-space: pre-wrap; }
     
-    /* SPEECH BUBBLE CSS (Tails) */
     .speech-bubble.speech {
         --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em;
-        background: var(--bubble-fill-color, #4ECDC4);
-        color: var(--bubble-text-color, #fff);
-        padding: 0;
+        background: var(--bubble-fill-color, #4ECDC4); color: var(--bubble-text-color, #fff); padding: 0;
         border-radius: var(--r) var(--r) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) / var(--r);
     }
     .speech-bubble.speech:before {
         content: ""; position: absolute; width: var(--b); height: var(--h);
         background: inherit; border-bottom-left-radius: 100%; pointer-events: none; z-index: 1;
-        -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
-        mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
+        -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%); mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
     }
     
     .speech-bubble.speech.tail-bottom:before { top: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
@@ -415,7 +413,6 @@ INDEX_HTML = '''
     .speech-bubble.speech.tail-right { border-radius: var(--r); }
     .speech-bubble.speech.tail-right:before { left: 100%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
     
-    /* Thought/Reaction Styles */
     .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
     .speech-bubble.thought::before { display:none; } 
     .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
@@ -498,7 +495,7 @@ INDEX_HTML = '''
                 <option value="layout-rows">Rows (Horizontal)</option>
                 <option value="layout-cols">Cols (Vertical)</option>
                 <option value="layout-grid">Grid (2x2)</option>
-                <option value="layout-slanted">Slanted (Designer)</option>
+                <option value="layout-custom-slant">Custom Slant (Drag Points)</option>
             </select>
         </div>
         
@@ -589,10 +586,11 @@ INDEX_HTML = '''
     let currentSaveCode = null;
     let isProcessing = false;
     let interval, selectedBubble = null, selectedPanel = null;
-    let isDragging = false, isResizing = false, isPanning = false;
+    let isDragging = false, isResizing = false, isPanning = false, isDraggingSplit = false;
     let startX, startY, initX, initY, panStartX, panStartY, panStartTx, panStartTy;
     let resizeHandle, originalWidth, originalHeight, originalMouseX, originalMouseY;
     let currentlyEditing = null;
+    let selectedSplitHandle = null;
     
     // UNDO SYSTEM
     let historyStack = [];
@@ -673,12 +671,15 @@ INDEX_HTML = '''
         const pages = [];
         document.querySelectorAll('.comic-page').forEach(p => {
             const grid = p.querySelector('.comic-grid');
-            // Extract layout class
             let layout = 'layout-rows';
             if(grid.classList.contains('layout-cols')) layout = 'layout-cols';
             if(grid.classList.contains('layout-grid')) layout = 'layout-grid';
-            if(grid.classList.contains('layout-slanted')) layout = 'layout-slanted';
+            if(grid.classList.contains('layout-custom-slant')) layout = 'layout-custom-slant';
             
+            // Layout Split Pos
+            const splitL = grid.style.getPropertyValue('--split-l') || '45%';
+            const splitR = grid.style.getPropertyValue('--split-r') || '55%';
+
             const panels = [];
             grid.querySelectorAll('.panel').forEach(pan => {
                 const img = pan.querySelector('img');
@@ -702,7 +703,7 @@ INDEX_HTML = '''
                     bubbles: bubbles 
                 });
             });
-            pages.push({ layout: layout, panels: panels });
+            pages.push({ layout: layout, splitL: splitL, splitR: splitR, panels: panels });
         });
         return pages;
     }
@@ -722,8 +723,18 @@ INDEX_HTML = '''
             const div = document.createElement('div'); div.className = 'comic-page';
             const grid = document.createElement('div'); 
             
-            // Restore Layout
             grid.className = 'comic-grid ' + (page.layout || 'layout-rows');
+            if(page.layout === 'layout-custom-slant') {
+                grid.style.setProperty('--split-l', page.splitL || '45%');
+                grid.style.setProperty('--split-r', page.splitR || '55%');
+                
+                // Add handles
+                const hL = document.createElement('div'); hL.className = 'split-handle left';
+                hL.onmousedown = (e) => startSplitDrag(e, hL, grid, 'left');
+                const hR = document.createElement('div'); hR.className = 'split-handle right';
+                hR.onmousedown = (e) => startSplitDrag(e, hR, grid, 'right');
+                grid.appendChild(hL); grid.appendChild(hR);
+            }
             
             page.panels.forEach((pan) => {
                 const pDiv = document.createElement('div'); pDiv.className = 'panel';
@@ -735,12 +746,7 @@ INDEX_HTML = '''
                 if(pan.fit === 'cover') img.classList.add('fit-cover');
                 
                 updateImageTransform(img);
-                
-                // === EVENTS FOR PANNING AND ZOOMING ===
-                img.onmousedown = (e) => {
-                    selectPanel(pDiv); // Auto select
-                    startPan(e, img);
-                };
+                img.onmousedown = (e) => { selectPanel(pDiv); startPan(e, img); };
                 img.onwheel = (e) => handleWheelZoom(e, img);
                 
                 pDiv.appendChild(img);
@@ -748,328 +754,130 @@ INDEX_HTML = '''
                 grid.appendChild(pDiv);
             });
             div.appendChild(grid); pageWrapper.appendChild(div); con.appendChild(pageWrapper);
-            
-            // Sync layout dropdown if this is the first page
             if(pageIdx === 0) document.getElementById('layout-select').value = (page.layout || 'layout-rows');
         });
-        selectedBubble = null;
-        selectedPanel = null;
-        document.getElementById('bubble-type-select').disabled = true;
-        document.getElementById('font-select').disabled = true;
+        selectedBubble = null; selectedPanel = null;
     }
     
-    async function upload() {
-        const f = document.getElementById('file-upload').files[0];
-        const pCount = document.getElementById('page-count').value;
-        const panelCount = document.getElementById('panels-per-page').value;
-        if(!f) return alert("Select a video");
-        sid = genUUID(); localStorage.setItem('comic_sid', sid); currentSaveCode = null;
-        document.querySelector('.upload-box').style.display='none'; 
-        document.getElementById('loading-view').style.display='flex';
-        const fd = new FormData(); fd.append('file', f); fd.append('target_pages', pCount); fd.append('panels_per_page', panelCount);
-        const r = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
-        if(r.ok) interval = setInterval(checkStatus, 2000);
-        else { alert("Upload failed"); location.reload(); }
+    // === SPLIT DRAGGING LOGIC ===
+    function startSplitDrag(e, handle, grid, side) {
+        e.preventDefault(); e.stopPropagation();
+        isDraggingSplit = true;
+        selectedSplitHandle = { handle, grid, side };
     }
     
-    async function checkStatus() {
-        try {
-            const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
-            document.getElementById('status-text').innerText = d.message;
-            if(d.progress >= 100) { clearInterval(interval); document.getElementById('upload-container').style.display='none'; document.getElementById('editor-container').style.display='block'; loadNewComic(); }
-            else if (d.progress < 0) { clearInterval(interval); document.getElementById('status-text').textContent = "Error: " + d.message; document.querySelector('.loader').style.display = 'none'; }
-        } catch(e) {}
-    }
+    document.addEventListener('mousemove', (e) => { 
+        if(isDragging && selectedBubble) { selectedBubble.style.left = (initX + e.clientX - startX) + 'px'; selectedBubble.style.top = (initY + e.clientY - startY) + 'px'; } 
+        if(isResizing && selectedBubble) { resizeBubble(e); } 
+        if(isPanning && selectedPanel) { panImage(e); }
+        
+        if(isDraggingSplit && selectedSplitHandle) {
+            const rect = selectedSplitHandle.grid.getBoundingClientRect();
+            let y = e.clientY - rect.top;
+            let percent = (y / rect.height) * 100;
+            if(percent < 10) percent = 10;
+            if(percent > 90) percent = 90;
+            
+            if(selectedSplitHandle.side === 'left') {
+                selectedSplitHandle.grid.style.setProperty('--split-l', percent + '%');
+            } else {
+                selectedSplitHandle.grid.style.setProperty('--split-r', percent + '%');
+            }
+        }
+    });
     
-    function loadNewComic() {
-        fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => {
-            const cleanData = data.map((p, pi) => ({
-                layout: 'layout-rows', // Default layout
-                panels: p.panels.map((pan, j) => ({
-                    src: `/frames/${pan.image}?sid=${sid}`,
-                    fit: 'contain', // Default no cut
-                    bubbles: (p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) ? [{ 
-                        text: p.bubbles[j].dialog, 
-                        // Backend now sends -1, -1 for center. 
-                        // If coordinates are valid, append 'px', else use defaults.
-                        left: (p.bubbles[j].bubble_offset_x > 0 ? p.bubbles[j].bubble_offset_x + 'px' : '50%'), 
-                        top: (p.bubbles[j].bubble_offset_y > 0 ? p.bubbles[j].bubble_offset_y + 'px' : '50%'), 
-                        type: (p.bubbles[j].type || 'speech'),
-                        classes: `speech-bubble ${p.bubbles[j].type || 'speech'} tail-bottom`,
-                        transform: (p.bubbles[j].bubble_offset_x > 0 ? 'none' : 'translate(-50%, -50%)')
-                    }] : []
-                }))
-            }));
-            renderFromState(cleanData); saveDraft(true);
-        });
-    }
+    document.addEventListener('mouseup', () => { 
+        if(isDragging || isResizing || isPanning || isDraggingSplit) {
+            saveDraft(true);
+        }
+        isDragging = false; isResizing = false; isPanning = false; isDraggingSplit = false; selectedSplitHandle = null;
+    });
+
+    // ... (Existing Functions for Bubbles, Upload, etc. same as before) ...
     
     function createBubbleHTML(data) {
         const b = document.createElement('div');
         const type = data.type || 'speech';
         b.className = data.classes || `speech-bubble ${type} tail-bottom`;
         if (type === 'thought' && !b.className.includes('pos-')) b.className += ' pos-bl'; 
-        
         b.dataset.type = type;
         b.style.left = data.left; b.style.top = data.top;
         if(data.transform) b.style.transform = data.transform;
-
         if(data.width) b.style.width = data.width; if(data.height) b.style.height = data.height;
         if(data.font) b.style.fontFamily = data.font;
         if(data.colors) { b.style.setProperty('--bubble-fill-color', data.colors.fill || '#4ECDC4'); b.style.setProperty('--bubble-text-color', data.colors.text || '#ffffff'); }
         if(data.tailPos) b.style.setProperty('--tail-pos', data.tailPos);
-        
         const textSpan = document.createElement('span'); textSpan.className = 'bubble-text'; textSpan.textContent = data.text || ''; b.appendChild(textSpan);
-        
         if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; b.appendChild(d); } }
-        
         ['nw', 'ne', 'sw', 'se'].forEach(dir => { const handle = document.createElement('div'); handle.className = `resize-handle ${dir}`; handle.onmousedown = (e) => startResize(e, dir); b.appendChild(handle); });
-        
         b.onmousedown = (e) => { 
             if(e.target.classList.contains('resize-handle')) return; 
             e.stopPropagation(); selectBubble(b); 
-            isDragging = true; 
-            startX = e.clientX; startY = e.clientY; 
-            initX = b.offsetLeft; initY = b.offsetTop; 
-            
-            // If we drag, remove centering transform to prevent jump
-            if(b.style.transform.includes('translate')) {
-                b.style.transform = 'none';
-                // Recalculate position to be exact pixels instead of %
-                b.style.left = (b.offsetLeft - b.offsetWidth/2) + 'px';
-                b.style.top = (b.offsetTop - b.offsetHeight/2) + 'px';
-                initX = parseInt(b.style.left);
-                initY = parseInt(b.style.top);
-            }
+            isDragging = true; startX = e.clientX; startY = e.clientY; initX = b.offsetLeft; initY = b.offsetTop; 
+            if(b.style.transform.includes('translate')) { b.style.transform = 'none'; b.style.left = (b.offsetLeft - b.offsetWidth/2) + 'px'; b.style.top = (b.offsetTop - b.offsetHeight/2) + 'px'; initX = parseInt(b.style.left); initY = parseInt(b.style.top); }
         };
         b.onclick = (e) => { e.stopPropagation(); };
         b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
         return b;
     }
-    
     function editBubbleText(bubble) {
         if (currentlyEditing) return; currentlyEditing = bubble;
         const textSpan = bubble.querySelector('.bubble-text'); const textarea = document.createElement('textarea');
         textarea.value = textSpan.textContent; bubble.appendChild(textarea); textSpan.style.display = 'none'; textarea.focus();
-        const finishEditing = () => { 
-            textSpan.textContent = textarea.value; textarea.remove(); textSpan.style.display = ''; currentlyEditing = null; 
-            saveDraft(true); 
-        };
+        const finishEditing = () => { textSpan.textContent = textarea.value; textarea.remove(); textSpan.style.display = ''; currentlyEditing = null; saveDraft(true); };
         textarea.addEventListener('blur', finishEditing, { once: true });
         textarea.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); textarea.blur(); } });
     }
-    
-    document.addEventListener('mousemove', (e) => { 
-        if(isDragging && selectedBubble) { selectedBubble.style.left = (initX + e.clientX - startX) + 'px'; selectedBubble.style.top = (initY + e.clientY - startY) + 'px'; } 
-        if(isResizing && selectedBubble) { resizeBubble(e); } 
-        if(isPanning && selectedPanel) { panImage(e); }
-    });
-    
-    document.addEventListener('mouseup', () => { 
-        if(isDragging || isResizing || isPanning) {
-            saveDraft(true);
-        }
-        isDragging = false; isResizing = false; isPanning = false; 
-    });
-    
     function startResize(e, dir) { e.preventDefault(); e.stopPropagation(); isResizing = true; resizeHandle = dir; const rect = selectedBubble.getBoundingClientRect(); originalWidth = rect.width; originalHeight = rect.height; originalMouseX = e.clientX; originalMouseY = e.clientY; }
     function resizeBubble(e) { if (!isResizing || !selectedBubble) return; const dx = e.clientX - originalMouseX; const dy = e.clientY - originalMouseY; if(resizeHandle.includes('e')) selectedBubble.style.width = (originalWidth + dx)+'px'; if(resizeHandle.includes('s')) selectedBubble.style.height = (originalHeight + dy)+'px'; }
-    
     function selectBubble(el) { 
-        if(selectedBubble) selectedBubble.classList.remove('selected'); 
-        if(selectedPanel) { selectedPanel.classList.remove('selected'); selectedPanel = null; } 
+        if(selectedBubble) selectedBubble.classList.remove('selected'); if(selectedPanel) { selectedPanel.classList.remove('selected'); selectedPanel = null; } 
         selectedBubble = el; el.classList.add('selected'); 
-        document.getElementById('bubble-type-select').disabled = false;
-        document.getElementById('font-select').disabled = false;
-        document.getElementById('bubble-text-color').disabled = false;
-        document.getElementById('bubble-fill-color').disabled = false;
-        document.getElementById('tail-controls').style.display = 'block';
-        document.getElementById('bubble-type-select').value = el.dataset.type || 'speech';
+        document.getElementById('bubble-type-select').disabled = false; document.getElementById('font-select').disabled = false; document.getElementById('bubble-text-color').disabled = false; document.getElementById('bubble-fill-color').disabled = false; document.getElementById('tail-controls').style.display = 'block'; document.getElementById('bubble-type-select').value = el.dataset.type || 'speech';
     }
-    
     function selectPanel(el) { 
-        if(selectedPanel) selectedPanel.classList.remove('selected'); 
-        if(selectedBubble) { selectedBubble.classList.remove('selected'); selectedBubble = null; } 
+        if(selectedPanel) selectedPanel.classList.remove('selected'); if(selectedBubble) { selectedBubble.classList.remove('selected'); selectedBubble = null; } 
         selectedPanel = el; el.classList.add('selected'); 
-        document.getElementById('zoom-slider').disabled = false;
-        const img = el.querySelector('img');
-        document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
-        document.getElementById('bubble-type-select').disabled = true;
-        document.getElementById('font-select').disabled = true;
-        document.getElementById('tail-controls').style.display = 'none';
-        
-        // Update Fit Button Text
+        document.getElementById('zoom-slider').disabled = false; const img = el.querySelector('img'); document.getElementById('zoom-slider').value = img.dataset.zoom || 100; document.getElementById('bubble-type-select').disabled = true; document.getElementById('font-select').disabled = true; document.getElementById('tail-controls').style.display = 'none';
         document.getElementById('fit-btn').innerText = img.classList.contains('fit-cover') ? "Fit: Cover" : "Fit: Contain";
     }
-    
-    function addBubble() { 
-        if(!selectedPanel) return alert("Select a panel first"); 
-        // Force center placement
-        const b = createBubbleHTML({ text: "Text", left: "50%", top: "50%", type: 'speech', classes: "speech-bubble speech tail-bottom", transform: "translate(-50%, -50%)" }); 
-        selectedPanel.appendChild(b); selectBubble(b); saveDraft(true); 
-    }
-    
-    function deleteBubble() { 
-        if(!selectedBubble) return alert("Select a bubble"); 
-        selectedBubble.remove(); selectedBubble=null; saveDraft(true); 
-    }
-    
-    function changeBubbleType(type) {
-        if(!selectedBubble) return;
-        selectedBubble.dataset.type = type;
-        selectedBubble.className = 'speech-bubble ' + type + ' selected';
-        
-        if(type === 'thought') selectedBubble.classList.add('pos-bl');
-        else selectedBubble.classList.add('tail-bottom'); 
-        
-        selectedBubble.querySelectorAll('.thought-dot').forEach(d=>d.remove());
-        if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; selectedBubble.appendChild(d); } }
-        saveDraft(true);
-    }
-    
+    function addBubble() { if(!selectedPanel) return alert("Select a panel first"); const b = createBubbleHTML({ text: "Text", left: "50%", top: "50%", type: 'speech', classes: "speech-bubble speech tail-bottom", transform: "translate(-50%, -50%)" }); selectedPanel.appendChild(b); selectBubble(b); saveDraft(true); }
+    function deleteBubble() { if(!selectedBubble) return alert("Select a bubble"); selectedBubble.remove(); selectedBubble=null; saveDraft(true); }
+    function changeBubbleType(type) { if(!selectedBubble) return; selectedBubble.dataset.type = type; selectedBubble.className = 'speech-bubble ' + type + ' selected'; if(type === 'thought') selectedBubble.classList.add('pos-bl'); else selectedBubble.classList.add('tail-bottom'); selectedBubble.querySelectorAll('.thought-dot').forEach(d=>d.remove()); if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; selectedBubble.appendChild(d); } } saveDraft(true); }
     function changeFont(font) { if(!selectedBubble) return; selectedBubble.style.fontFamily = font; saveDraft(true); }
-    
-    function rotateTail() {
-        if(!selectedBubble) return;
-        const type = selectedBubble.dataset.type;
-        
-        if(type === 'speech') {
-            const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left'];
-            let current = 0;
-            positions.forEach((pos, i) => { if(selectedBubble.classList.contains(pos)) current = i; });
-            selectedBubble.classList.remove(positions[current]);
-            selectedBubble.classList.add(positions[(current + 1) % 4]);
-        } 
-        else if (type === 'thought') {
-            const positions = ['pos-bl', 'pos-br', 'pos-tr', 'pos-tl'];
-            let current = 0;
-            positions.forEach((pos, i) => { if(selectedBubble.classList.contains(pos)) current = i; });
-            selectedBubble.classList.remove(positions[current]);
-            selectedBubble.classList.add(positions[(current + 1) % 4]);
-        }
-        saveDraft(true);
-    }
-    
+    function rotateTail() { if(!selectedBubble) return; const type = selectedBubble.dataset.type; if(type === 'speech') { const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left']; let current = 0; positions.forEach((pos, i) => { if(selectedBubble.classList.contains(pos)) current = i; }); selectedBubble.classList.remove(positions[current]); selectedBubble.classList.add(positions[(current + 1) % 4]); } else if (type === 'thought') { const positions = ['pos-bl', 'pos-br', 'pos-tr', 'pos-tl']; let current = 0; positions.forEach((pos, i) => { if(selectedBubble.classList.contains(pos)) current = i; }); selectedBubble.classList.remove(positions[current]); selectedBubble.classList.add(positions[(current + 1) % 4]); } saveDraft(true); }
     function slideTail(v) { if(selectedBubble) { selectedBubble.style.setProperty('--tail-pos', v+'%'); saveDraft(true); } }
-    
     document.getElementById('bubble-text-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveDraft(true); } });
     document.getElementById('bubble-fill-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-fill-color', e.target.value); saveDraft(true); } });
-    
     function handleZoom(el) { if(!selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.zoom = el.value; updateImageTransform(img); }
     document.getElementById('zoom-slider').addEventListener('change', () => saveDraft(true));
-    
-    // === NEW LOGIC: WHEEL ZOOM ON IMAGE ===
-    function handleWheelZoom(e, img) {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        if(!selectedPanel) selectPanel(img.closest('.panel'));
-
-        let scale = parseFloat(img.dataset.zoom) || 100;
-        const delta = -Math.sign(e.deltaY) * 10; // Zoom sensitivity
-        
-        scale += delta;
-        if(scale < 10) scale = 10;
-        if(scale > 500) scale = 500;
-        
-        img.dataset.zoom = scale;
-        document.getElementById('zoom-slider').value = scale;
-        updateImageTransform(img);
-    }
-    
-    // === NEW LOGIC: UNRESTRICTED PANNING ===
-    function startPan(e, img) { 
-        e.preventDefault(); 
-        isPanning = true; 
-        selectedPanel = img.closest('.panel'); 
-        panStartX = e.clientX; 
-        panStartY = e.clientY; 
-        panStartTx = parseFloat(img.dataset.translateX) || 0; 
-        panStartTy = parseFloat(img.dataset.translateY) || 0; 
-        img.classList.add('panning'); 
-    }
-    
-    function panImage(e) { 
-        if(!isPanning || !selectedPanel) return; 
-        const img = selectedPanel.querySelector('img'); 
-        // 1:1 Movement
-        const dx = e.clientX - panStartX;
-        const dy = e.clientY - panStartY;
-        
-        img.dataset.translateX = panStartTx + dx; 
-        img.dataset.translateY = panStartTy + dy; 
-        updateImageTransform(img); 
-    }
-    
+    function handleWheelZoom(e, img) { e.preventDefault(); e.stopPropagation(); if(!selectedPanel) selectPanel(img.closest('.panel')); let scale = parseFloat(img.dataset.zoom) || 100; const delta = -Math.sign(e.deltaY) * 10; scale += delta; if(scale < 10) scale = 10; if(scale > 500) scale = 500; img.dataset.zoom = scale; document.getElementById('zoom-slider').value = scale; updateImageTransform(img); }
+    function startPan(e, img) { e.preventDefault(); isPanning = true; selectedPanel = img.closest('.panel'); panStartX = e.clientX; panStartY = e.clientY; panStartTx = parseFloat(img.dataset.translateX) || 0; panStartTy = parseFloat(img.dataset.translateY) || 0; img.classList.add('panning'); }
+    function panImage(e) { if(!isPanning || !selectedPanel) return; const img = selectedPanel.querySelector('img'); const dx = e.clientX - panStartX; const dy = e.clientY - panStartY; img.dataset.translateX = panStartTx + dx; img.dataset.translateY = panStartTy + dy; updateImageTransform(img); }
     function updateImageTransform(img) { const z = (img.dataset.zoom || 100) / 100; const x = img.dataset.translateX || 0; const y = img.dataset.translateY || 0; img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${z})`; img.classList.toggle('pannable', true); }
     function resetPanelTransform() { if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); img.dataset.zoom = 100; img.dataset.translateX = 0; img.dataset.translateY = 0; document.getElementById('zoom-slider').value = 100; updateImageTransform(img); saveDraft(true); }
-    
-    // === LAYOUT & FIT FUNCTIONS ===
-    function changeLayout(newLayout) {
-        // Apply layout to all pages for consistency
-        document.querySelectorAll('.comic-grid').forEach(g => {
-            g.className = 'comic-grid ' + newLayout;
-        });
-        saveDraft(true);
-    }
-    
-    function toggleFitMode() {
-        if(!selectedPanel) return alert("Select a panel");
-        const img = selectedPanel.querySelector('img');
-        if(img.classList.contains('fit-cover')) {
-            img.classList.remove('fit-cover'); // Switch to Contain
-            document.getElementById('fit-btn').innerText = "Fit: Contain";
-        } else {
-            img.classList.add('fit-cover'); // Switch to Cover
-            document.getElementById('fit-btn').innerText = "Fit: Cover";
-        }
-        saveDraft(true);
-    }
-
+    function changeLayout(newLayout) { document.querySelectorAll('.comic-grid').forEach(g => { g.className = 'comic-grid ' + newLayout; if(newLayout === 'layout-custom-slant' && !g.querySelector('.split-handle')) { const hL = document.createElement('div'); hL.className = 'split-handle left'; hL.onmousedown = (e) => startSplitDrag(e, hL, g, 'left'); const hR = document.createElement('div'); hR.className = 'split-handle right'; hR.onmousedown = (e) => startSplitDrag(e, hR, g, 'right'); g.appendChild(hL); g.appendChild(hR); } }); saveDraft(true); }
+    function toggleFitMode() { if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); if(img.classList.contains('fit-cover')) { img.classList.remove('fit-cover'); document.getElementById('fit-btn').innerText = "Fit: Contain"; } else { img.classList.add('fit-cover'); document.getElementById('fit-btn').innerText = "Fit: Cover"; } saveDraft(true); }
     function replacePanelImage() { if(!selectedPanel) return alert("Select a panel"); const inp = document.getElementById('image-uploader'); inp.onchange = async (e) => { const fd = new FormData(); fd.append('image', e.target.files[0]); const img = selectedPanel.querySelector('img'); const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd}); const d = await r.json(); if(d.success) { img.src = `/frames/${d.new_filename}?sid=${sid}`; saveDraft(true); } inp.value = ''; }; inp.click(); }
     async function adjustFrame(dir) { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; setProcessing(true); img.style.opacity = '0.5'; try { const r = await fetch(`/regenerate_frame?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, direction:dir}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
     async function gotoTimestamp() { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); let v = document.getElementById('timestamp-input').value.trim(); if(!v) return; if(v.includes(':')) { let p = v.split(':'); v = parseInt(p[0]) * 60 + parseFloat(p[1]); } else { v = parseFloat(v); } if(isNaN(v)) return alert("Invalid time"); const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; setProcessing(true); img.style.opacity = '0.5'; try { const r = await fetch(`/goto_timestamp?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, timestamp:v}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; document.getElementById('timestamp-input').value = ''; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
     
-    async function exportComic() { 
-        const pgs = document.querySelectorAll('.comic-page'); 
-        if(pgs.length === 0) return alert("No pages found"); 
-        
-        // Remove selection highlights
-        if(selectedBubble) selectedBubble.classList.remove('selected');
-        if(selectedPanel) selectedPanel.classList.remove('selected');
-        alert(`Exporting ${pgs.length} page(s)...`); 
-        
-        // --- 0% ERROR FIX ---
-        // 1. Lock specific pixel dimensions + 1px buffer to prevent word wrapping
-        const bubbles = document.querySelectorAll('.speech-bubble'); 
-        bubbles.forEach(b => { 
-            const rect = b.getBoundingClientRect(); 
-            // Add slight buffer (1px) to width to handle sub-pixel rendering differences
-            // This prevents "just fitting" words from wrapping in the export
-            b.style.width = (rect.width + 1) + 'px'; 
-            b.style.height = rect.height + 'px'; 
-            b.style.display = 'flex';
-            b.style.alignItems = 'center';
-            b.style.justifyContent = 'center';
-        }); 
-        
-        for(let i = 0; i < pgs.length; i++) { 
-            try { 
-                const u = await htmlToImage.toPng(pgs[i], { 
-                    pixelRatio: 2, // High quality
-                    style: { transform: 'none' } 
-                }); 
-                const a = document.createElement('a'); 
-                a.href = u; 
-                a.download = `Comic-Page-${i+1}.png`; 
-                a.click(); 
-            } catch(err) { 
-                console.error(err); 
-                alert(`Failed to export page ${i+1}`); 
-            } 
-        } 
+    async function upload() {
+        const f = document.getElementById('file-upload').files[0];
+        const pCount = document.getElementById('page-count').value;
+        const panelCount = document.getElementById('panels-per-page').value;
+        if(!f) return alert("Select a video");
+        sid = genUUID(); localStorage.setItem('comic_sid', sid); currentSaveCode = null;
+        document.querySelector('.upload-box').style.display='none'; 
+        document.getElementById('loading-view').style.display='flex';
+        const fd = new FormData(); fd.append('file', f); fd.append('target_pages', pCount); fd.append('panels_per_page', panelCount);
+        const r = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
+        if(r.ok) interval = setInterval(checkStatus, 2000);
+        else { alert("Upload failed"); location.reload(); }
     }
-    
+    async function checkStatus() { try { const r = await fetch(`/status?sid=${sid}`); const d = await r.json(); document.getElementById('status-text').innerText = d.message; if(d.progress >= 100) { clearInterval(interval); document.getElementById('upload-container').style.display='none'; document.getElementById('editor-container').style.display='block'; loadNewComic(); } else if (d.progress < 0) { clearInterval(interval); document.getElementById('status-text').textContent = "Error: " + d.message; document.querySelector('.loader').style.display = 'none'; } } catch(e) {} }
+    function loadNewComic() { fetch(`/output/pages.json?sid=${sid}`).then(r=>r.json()).then(data => { const cleanData = data.map((p, pi) => ({ layout: 'layout-rows', panels: p.panels.map((pan, j) => ({ src: `/frames/${pan.image}?sid=${sid}`, fit: 'contain', bubbles: (p.bubbles && p.bubbles[j] && p.bubbles[j].dialog) ? [{ text: p.bubbles[j].dialog, left: (p.bubbles[j].bubble_offset_x > 0 ? p.bubbles[j].bubble_offset_x + 'px' : '50%'), top: (p.bubbles[j].bubble_offset_y > 0 ? p.bubbles[j].bubble_offset_y + 'px' : '50%'), type: (p.bubbles[j].type || 'speech'), classes: `speech-bubble ${p.bubbles[j].type || 'speech'} tail-bottom`, transform: (p.bubbles[j].bubble_offset_x > 0 ? 'none' : 'translate(-50%, -50%)') }] : [] })) })); renderFromState(cleanData); saveDraft(true); }); }
+    async function exportComic() { const pgs = document.querySelectorAll('.comic-page'); if(pgs.length === 0) return alert("No pages found"); if(selectedBubble) selectedBubble.classList.remove('selected'); if(selectedPanel) selectedPanel.classList.remove('selected'); document.querySelectorAll('.split-handle').forEach(h => h.style.display = 'none'); alert(`Exporting ${pgs.length} page(s)...`); const bubbles = document.querySelectorAll('.speech-bubble'); bubbles.forEach(b => { const rect = b.getBoundingClientRect(); b.style.width = (rect.width + 1) + 'px'; b.style.height = rect.height + 'px'; b.style.display = 'flex'; b.style.alignItems = 'center'; b.style.justifyContent = 'center'; }); for(let i = 0; i < pgs.length; i++) { try { const u = await htmlToImage.toPng(pgs[i], { pixelRatio: 2, style: { transform: 'none' } }); const a = document.createElement('a'); a.href = u; a.download = `Comic-Page-${i+1}.png`; a.click(); } catch(err) { console.error(err); alert(`Failed to export page ${i+1}`); } } document.querySelectorAll('.split-handle').forEach(h => h.style.display = ''); }
     function goBackToUpload() { if(confirm('Go home? Unsaved changes will be lost.')) { document.getElementById('editor-container').style.display = 'none'; document.getElementById('upload-container').style.display = 'flex'; document.getElementById('loading-view').style.display = 'none'; } }
 </script>
 </body> </html> '''