scitex 2.7.3__py3-none-any.whl → 2.10.0__py3-none-any.whl

scitex/fig/editor/flask_editor/templates/_scripts.py

@@ -1,7 +1,24 @@
 #!/usr/bin/env python3
 # -*- coding: utf-8 -*-
 # File: ./src/scitex/vis/editor/flask_editor/templates/scripts.py
-"""JavaScript for the Flask editor UI."""
+"""JavaScript for the Flask editor UI.
+
+DEPRECATED: This inline JavaScript module is kept for fallback compatibility only.
+The JavaScript has been modularized into static/js/ directory:
+- static/js/main.js (main entry point)
+- static/js/core/ (state, api, utils)
+- static/js/canvas/ (canvas, dragging, resize, selection)
+- static/js/editor/ (preview, overlay, bbox, element-drag)
+- static/js/alignment/ (basic, axis, distribute)
+- static/js/shortcuts/ (keyboard, context-menu)
+- static/js/ui/ (controls, download, help, theme)
+
+To use static files (recommended):
+    Set USE_STATIC_FILES = True in templates/__init__.py
+
+To use this inline version (fallback):
+    Set USE_STATIC_FILES = False in templates/__init__.py
+"""
 
 JS_SCRIPTS = """
 let overrides = {{ overrides|safe }};
@@ -41,6 +58,56 @@ function isDarkMode() {
     return document.documentElement.getAttribute('data-theme') === 'dark';
 }
 
+// Calculate actual rendered image dimensions when using object-fit: contain
+// Returns: {renderedWidth, renderedHeight, offsetX, offsetY, containerWidth, containerHeight}
+function getObjectFitContainDimensions(img) {
+    const containerWidth = img.offsetWidth;
+    const containerHeight = img.offsetHeight;
+    const naturalWidth = img.naturalWidth;
+    const naturalHeight = img.naturalHeight;
+
+    // Handle edge cases
+    if (!naturalWidth || !naturalHeight || !containerWidth || !containerHeight) {
+        return {
+            renderedWidth: containerWidth,
+            renderedHeight: containerHeight,
+            offsetX: 0,
+            offsetY: 0,
+            containerWidth,
+            containerHeight
+        };
+    }
+
+    // Calculate scale factor for object-fit: contain
+    const containerRatio = containerWidth / containerHeight;
+    const imageRatio = naturalWidth / naturalHeight;
+
+    let renderedWidth, renderedHeight, offsetX, offsetY;
+
+    if (imageRatio > containerRatio) {
+        // Image is wider than container - fit to width, letterbox top/bottom
+        renderedWidth = containerWidth;
+        renderedHeight = containerWidth / imageRatio;
+        offsetX = 0;
+        offsetY = (containerHeight - renderedHeight) / 2;
+    } else {
+        // Image is taller than container - fit to height, letterbox left/right
+        renderedHeight = containerHeight;
+        renderedWidth = containerHeight * imageRatio;
+        offsetX = (containerWidth - renderedWidth) / 2;
+        offsetY = 0;
+    }
+
+    return {
+        renderedWidth,
+        renderedHeight,
+        offsetX,
+        offsetY,
+        containerWidth,
+        containerHeight
+    };
+}
+
 // Hitmap-based element detection
 let hitmapCanvas = null;
 let hitmapCtx = null;
@@ -1353,6 +1420,8 @@ function toggleTheme() {
     html.setAttribute('data-theme', next);
     document.getElementById('theme-icon').innerHTML = next === 'dark' ? '☾' : '☼';
     localStorage.setItem('scitex-editor-theme', next);
+    // Re-render single panel preview with dark/light mode colors (if visible)
+    updatePreview(true);
 }
 
 // Collapsible sections
@@ -1632,14 +1701,22 @@ document.addEventListener('DOMContentLoaded', () => {
 // =============================================================================
 // Loading Helpers
 // =============================================================================
-function showLoading() {
-    const overlay = document.getElementById('loading-overlay');
-    if (overlay) overlay.style.display = 'flex';
+function showLoading(message = 'Loading...') {
+    const globalOverlay = document.getElementById('global-loading-overlay');
+    const localOverlay = document.getElementById('loading-overlay');
+    if (globalOverlay) {
+        globalOverlay.style.display = 'flex';
+        const loadingText = globalOverlay.querySelector('.loading-text');
+        if (loadingText) loadingText.textContent = message;
+    }
+    if (localOverlay) localOverlay.style.display = 'flex';
 }
 
 function hideLoading() {
-    const overlay = document.getElementById('loading-overlay');
-    if (overlay) overlay.style.display = 'none';
+    const globalOverlay = document.getElementById('global-loading-overlay');
+    const localOverlay = document.getElementById('loading-overlay');
+    if (globalOverlay) globalOverlay.style.display = 'none';
+    if (localOverlay) localOverlay.style.display = 'none';
 }
 
 // Update form controls from overrides (used when switching panels)
@@ -1793,8 +1870,12 @@ async function loadPanelGrid() {
 
     console.log('Loading panel canvas for', panelData.panels.length, 'panels');
 
-    // Show panel header
-    document.getElementById('preview-header').style.display = 'flex';
+    // Hide single-panel preview completely for multi-panel bundles (unified canvas only)
+    document.getElementById('preview-header').style.display = 'none';
+    const previewWrapper = document.querySelector('.preview-wrapper');
+    if (previewWrapper) {
+        previewWrapper.style.display = 'none';
+    }
 
     // Fetch all panel images with bboxes
     try {
@@ -1809,12 +1890,29 @@ async function loadPanelGrid() {
         const canvasEl = document.getElementById('panel-canvas');
         canvasEl.innerHTML = '';
 
-        // Calculate layout - arrange panels in a grid-like canvas
-        const numPanels = data.panels.length;
-        const cols = Math.ceil(Math.sqrt(numPanels));
-        const baseWidth = 220;
-        const baseHeight = 180;
-        const padding = 15;
+        // Use figz layout to position panels as unified canvas (matching export)
+        const hasLayout = data.layout && Object.keys(data.layout).length > 0;
+
+        // Calculate scale factor: convert mm to pixels
+        // Find total figure dimensions from layout
+        let maxX = 0, maxY = 0;
+        if (hasLayout) {
+            Object.values(data.layout).forEach(l => {
+                const right = (l.position?.x_mm || 0) + (l.size?.width_mm || 80);
+                const bottom = (l.position?.y_mm || 0) + (l.size?.height_mm || 50);
+                maxX = Math.max(maxX, right);
+                maxY = Math.max(maxY, bottom);
+            });
+        }
+
+        // Scale to fit canvas (max width ~700px for good display)
+        const canvasMaxWidth = 700;
+        const scale = hasLayout && maxX > 0 ? canvasMaxWidth / maxX : 3;  // ~3px per mm fallback
+        canvasScale = scale;  // Store globally for drag conversions
+
+        // Reset layout tracking
+        panelLayoutMm = {};
+        layoutModified = false;
 
         data.panels.forEach((panel, idx) => {
             // Store bboxes and imgSize in cache for interactive hover/click
@@ -1828,18 +1926,42 @@ async function loadPanelGrid() {
                 console.warn(`Panel ${panel.name}: missing bboxes or img_size`, {bboxes: !!panel.bboxes, img_size: !!panel.img_size});
             }
 
-            // Calculate position
-            const col = idx % cols;
-            const row = Math.floor(idx / cols);
-            if (!panelPositions[panel.name]) {
-                panelPositions[panel.name] = {
+            // Use figz layout for positioning (unified canvas like export)
+            let pos, posMm;
+            if (panel.layout && panel.layout.position && panel.layout.size) {
+                const x_mm = panel.layout.position.x_mm || 0;
+                const y_mm = panel.layout.position.y_mm || 0;
+                const width_mm = panel.layout.size.width_mm || 80;
+                const height_mm = panel.layout.size.height_mm || 50;
+                pos = {
+                    x: x_mm * scale,
+                    y: y_mm * scale,
+                    width: width_mm * scale,
+                    height: height_mm * scale,
+                };
+                posMm = { x_mm, y_mm, width_mm, height_mm };
+            } else {
+                // Fallback grid layout if no figz layout
+                const cols = Math.ceil(Math.sqrt(data.panels.length));
+                const baseWidth = 220, baseHeight = 180, padding = 15;
+                const col = idx % cols;
+                const row = Math.floor(idx / cols);
+                pos = {
                     x: padding + col * (baseWidth + padding),
                     y: padding + row * (baseHeight + padding),
                     width: baseWidth,
                     height: baseHeight,
                 };
+                // Convert to mm for fallback
+                posMm = {
+                    x_mm: pos.x / scale,
+                    y_mm: pos.y / scale,
+                    width_mm: pos.width / scale,
+                    height_mm: pos.height / scale,
+                };
             }
-            const pos = panelPositions[panel.name];
+            panelPositions[panel.name] = pos;
+            panelLayoutMm[panel.name] = posMm;
 
             const item = document.createElement('div');
             item.className = 'panel-canvas-item' + (idx === currentPanelIndex ? ' active' : '');
@@ -1852,43 +1974,44 @@ async function loadPanelGrid() {
 
             if (panel.image) {
                 item.innerHTML = `
-                    <span class="panel-canvas-label">Panel ${panel.name}</span>
+                    <span class="panel-canvas-label">${panel.name}</span>
+                    <span class="panel-position-indicator" id="pos-${panel.name}"></span>
+                    <div class="panel-drag-handle" title="Drag to move panel">⋮⋮</div>
                     <div class="panel-card-container">
                         <img src="data:image/png;base64,${panel.image}" alt="Panel ${panel.name}">
                         <svg class="panel-card-overlay" id="panel-overlay-${idx}"></svg>
                     </div>
-                    <div class="panel-canvas-resize"></div>
                 `;
             } else {
                 item.innerHTML = `
-                    <span class="panel-canvas-label">Panel ${panel.name}</span>
+                    <span class="panel-canvas-label">${panel.name}</span>
+                    <span class="panel-position-indicator" id="pos-${panel.name}"></span>
+                    <div class="panel-drag-handle" title="Drag to move panel">⋮⋮</div>
                     <div style="padding: 20px; color: var(--text-muted);">No preview</div>
                 `;
             }
 
-            // Add interactive event handlers
+            // Add interactive event handlers (hover, click for element selection)
             initCanvasItemInteraction(item, idx, panel.name);
 
+            // Add drag handler for panel repositioning
+            initPanelDrag(item, panel.name);
+
             canvasEl.appendChild(item);
         });
 
-        // Update canvas height to fit all panels
-        const maxY = Math.max(...Object.values(panelPositions).map(p => p.y + p.height)) + padding;
-        canvasEl.style.minHeight = Math.max(400, maxY) + 'px';
+        // Update canvas size to fit all panels (unified canvas)
+        const canvasHeight = Math.max(...Object.values(panelPositions).map(p => p.y + p.height)) + 10;
+        const canvasWidth = Math.max(...Object.values(panelPositions).map(p => p.x + p.width)) + 10;
+        canvasEl.style.minHeight = Math.max(400, canvasHeight) + 'px';
+        canvasEl.style.minWidth = canvasWidth + 'px';
 
         // Update panel indicator
         updatePanelIndicator();
 
-        // Show canvas for multi-panel figures
-        if (data.panels.length > 1) {
-            showingPanelGrid = true;
-            document.getElementById('panel-grid-section').style.display = 'block';
-            // Hide single-panel preview for multi-panel bundles
-            const previewWrapper = document.querySelector('.preview-wrapper');
-            if (previewWrapper) {
-                previewWrapper.style.display = 'none';
-            }
-        }
+        // Show unified canvas for multi-panel figures
+        showingPanelGrid = true;
+        document.getElementById('panel-grid-section').style.display = 'block';
     } catch (e) {
         console.error('Error loading panels:', e);
     }
@@ -1911,25 +2034,43 @@ function initCanvasItemInteraction(item, panelIdx, panelName) {
         overlay.style.height = img.offsetHeight + 'px';
     });
 
-    // Mousemove for hover detection
+    // Mousemove for hover detection (accounting for object-fit:contain letterboxing)
     container.addEventListener('mousemove', (e) => {
         const panelCache = panelBboxesCache[panelName];
         if (!panelCache) return;
 
         const rect = img.getBoundingClientRect();
+        const dims = getObjectFitContainDimensions(img);
+
+        // Mouse position relative to container
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
 
-        const scaleX = panelCache.imgSize.width / rect.width;
-        const scaleY = panelCache.imgSize.height / rect.height;
-        const imgX = x * scaleX;
-        const imgY = y * scaleY;
+        // Adjust for letterbox offset to get position relative to actual rendered image
+        const imgRelX = x - dims.offsetX;
+        const imgRelY = y - dims.offsetY;
+
+        // Check if click is within rendered image bounds
+        if (imgRelX < 0 || imgRelY < 0 || imgRelX > dims.renderedWidth || imgRelY > dims.renderedHeight) {
+            // Outside rendered image area (in letterbox region)
+            if (panelHoveredElement !== null) {
+                panelHoveredElement = null;
+                updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, null, null, img);
+            }
+            return;
+        }
+
+        // Scale to original image coordinates
+        const scaleX = panelCache.imgSize.width / dims.renderedWidth;
+        const scaleY = panelCache.imgSize.height / dims.renderedHeight;
+        const imgX = imgRelX * scaleX;
+        const imgY = imgRelY * scaleY;
 
         const element = findElementInPanelAt(imgX, imgY, panelCache.bboxes);
         if (element !== panelHoveredElement || activePanelCard !== item) {
             panelHoveredElement = element;
             activePanelCard = item;
-            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, panelHoveredElement, null);
+            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, panelHoveredElement, null, img);
         }
     });
 
@@ -1937,11 +2078,22 @@ function initCanvasItemInteraction(item, panelIdx, panelName) {
     container.addEventListener('mouseleave', () => {
         panelHoveredElement = null;
         if (activePanelCard === item) {
-            updatePanelOverlay(overlay, {}, {width: 0, height: 0}, 0, 0, null, null);
+            updatePanelOverlay(overlay, {}, {width: 0, height: 0}, 0, 0, null, null, null);
         }
     });
 
-    // Click to select element
+    // Mousedown to start element drag (ONLY for legends and panel letters)
+    container.addEventListener('mousedown', (e) => {
+        const panelCache = panelBboxesCache[panelName];
+        if (!panelCache || !panelHoveredElement) return;
+
+        // Only allow dragging of legends and panel letters (scientific rigor)
+        if (isDraggableElement(panelHoveredElement, panelCache.bboxes)) {
+            startElementDrag(e, panelHoveredElement, panelName, img, panelCache.bboxes);
+        }
+    });
+
+    // Click to select element (accounting for object-fit:contain letterboxing)
     container.addEventListener('click', (e) => {
         e.stopPropagation();
 
@@ -1951,16 +2103,30 @@ function initCanvasItemInteraction(item, panelIdx, panelName) {
 
         if (panelCache && img) {
             const rect = img.getBoundingClientRect();
+            const dims = getObjectFitContainDimensions(img);
+
+            // Mouse position relative to container
             const x = e.clientX - rect.left;
             const y = e.clientY - rect.top;
 
-            const scaleX = panelCache.imgSize.width / rect.width;
-            const scaleY = panelCache.imgSize.height / rect.height;
-            const imgX = x * scaleX;
-            const imgY = y * scaleY;
+            // Adjust for letterbox offset
+            const imgRelX = x - dims.offsetX;
+            const imgRelY = y - dims.offsetY;
 
-            clickedElement = findElementInPanelAt(imgX, imgY, panelCache.bboxes);
-            console.log(`Click at (${imgX.toFixed(0)}, ${imgY.toFixed(0)}) -> element: ${clickedElement}`);
+            // Check if click is within rendered image bounds
+            if (imgRelX >= 0 && imgRelY >= 0 && imgRelX <= dims.renderedWidth && imgRelY <= dims.renderedHeight) {
+                // Scale to original image coordinates
+                const scaleX = panelCache.imgSize.width / dims.renderedWidth;
+                const scaleY = panelCache.imgSize.height / dims.renderedHeight;
+                const imgX = imgRelX * scaleX;
+                const imgY = imgRelY * scaleY;
+
+                clickedElement = findElementInPanelAt(imgX, imgY, panelCache.bboxes);
+                console.log(`Click at (${imgX.toFixed(0)}, ${imgY.toFixed(0)}) -> element: ${clickedElement}`);
+            } else {
+                clickedElement = null;
+                console.log('Click outside rendered image bounds (in letterbox area)');
+            }
         }
 
         if (clickedElement) {
@@ -2017,26 +2183,44 @@ function initPanelCardInteraction(card, panelIdx, panelName) {
         overlay.style.height = img.offsetHeight + 'px';
     });
 
-    // Mousemove for hover detection
+    // Mousemove for hover detection (accounting for object-fit:contain letterboxing)
     container.addEventListener('mousemove', (e) => {
         const panelCache = panelBboxesCache[panelName];
         if (!panelCache) return;
 
         const rect = img.getBoundingClientRect();
+        const dims = getObjectFitContainDimensions(img);
+
+        // Mouse position relative to container
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
 
-        const scaleX = panelCache.imgSize.width / rect.width;
-        const scaleY = panelCache.imgSize.height / rect.height;
-        const imgX = x * scaleX;
-        const imgY = y * scaleY;
+        // Adjust for letterbox offset to get position relative to actual rendered image
+        const imgRelX = x - dims.offsetX;
+        const imgRelY = y - dims.offsetY;
+
+        // Check if mouse is within rendered image bounds
+        if (imgRelX < 0 || imgRelY < 0 || imgRelX > dims.renderedWidth || imgRelY > dims.renderedHeight) {
+            // Outside rendered image area (in letterbox region)
+            if (panelHoveredElement !== null) {
+                panelHoveredElement = null;
+                updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, null, null, img);
+            }
+            return;
+        }
+
+        // Scale to original image coordinates
+        const scaleX = panelCache.imgSize.width / dims.renderedWidth;
+        const scaleY = panelCache.imgSize.height / dims.renderedHeight;
+        const imgX = imgRelX * scaleX;
+        const imgY = imgRelY * scaleY;
 
         // Find element at cursor using panel's bboxes
         const element = findElementInPanelAt(imgX, imgY, panelCache.bboxes);
         if (element !== panelHoveredElement || activePanelCard !== card) {
             panelHoveredElement = element;
             activePanelCard = card;
-            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, panelHoveredElement, null);
+            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, panelHoveredElement, null, img);
         }
     });
 
@@ -2044,7 +2228,7 @@ function initPanelCardInteraction(card, panelIdx, panelName) {
     container.addEventListener('mouseleave', () => {
         panelHoveredElement = null;
         if (activePanelCard === card) {
-            updatePanelOverlay(overlay, {}, {width: 0, height: 0}, 0, 0, null, null);
+            updatePanelOverlay(overlay, {}, {width: 0, height: 0}, 0, 0, null, null, null);
         }
     });
 
@@ -2175,29 +2359,55 @@ function redrawAllPanelOverlays() {
         const rect = img.getBoundingClientRect();
         console.log(`Redraw panel ${panelName}: rect=${rect.width}x${rect.height}, bboxes=${Object.keys(panelCache.bboxes).length}`);
         if (rect.width > 0 && rect.height > 0) {
-            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, null, null);
+            updatePanelOverlay(overlay, panelCache.bboxes, panelCache.imgSize, rect.width, rect.height, null, null, img);
         }
     });
 }
 
 // Update SVG overlay for a panel card
-function updatePanelOverlay(overlay, bboxes, imgSizePanel, displayWidth, displayHeight, hovered, selected) {
-    if (!overlay || displayWidth === 0 || displayHeight === 0 || !imgSizePanel || imgSizePanel.width === 0) {
+// img: the img element (to calculate object-fit:contain dimensions)
+// OR pass null with displayWidth/displayHeight for backward compatibility
+function updatePanelOverlay(overlay, bboxes, imgSizePanel, displayWidth, displayHeight, hovered, selected, img) {
+    if (!overlay || !imgSizePanel || imgSizePanel.width === 0) {
         if (overlay) overlay.innerHTML = '';
         return;
     }
 
-    overlay.setAttribute('width', displayWidth);
-    overlay.setAttribute('height', displayHeight);
+    // Calculate actual rendered dimensions accounting for object-fit: contain
+    let renderedWidth, renderedHeight, offsetX, offsetY;
+    if (img) {
+        const dims = getObjectFitContainDimensions(img);
+        renderedWidth = dims.renderedWidth;
+        renderedHeight = dims.renderedHeight;
+        offsetX = dims.offsetX;
+        offsetY = dims.offsetY;
+        // Use container dimensions for the overlay size
+        overlay.setAttribute('width', dims.containerWidth);
+        overlay.setAttribute('height', dims.containerHeight);
+        overlay.style.width = dims.containerWidth + 'px';
+        overlay.style.height = dims.containerHeight + 'px';
+    } else {
+        // Fallback for backward compatibility
+        if (displayWidth === 0 || displayHeight === 0) {
+            if (overlay) overlay.innerHTML = '';
+            return;
+        }
+        renderedWidth = displayWidth;
+        renderedHeight = displayHeight;
+        offsetX = 0;
+        offsetY = 0;
+        overlay.setAttribute('width', displayWidth);
+        overlay.setAttribute('height', displayHeight);
+    }
 
-    const scaleX = displayWidth / imgSizePanel.width;
-    const scaleY = displayHeight / imgSizePanel.height;
+    const scaleX = renderedWidth / imgSizePanel.width;
+    const scaleY = renderedHeight / imgSizePanel.height;
 
     let svg = '';
 
-    // Debug mode: draw all bboxes
+    // Debug mode: draw all bboxes (with offset for object-fit:contain letterboxing)
     if (panelDebugMode && bboxes) {
-        svg += drawPanelDebugBboxes(bboxes, scaleX, scaleY);
+        svg += drawPanelDebugBboxes(bboxes, scaleX, scaleY, offsetX, offsetY);
     }
 
     function drawPanelElement(elementName, type) {
@@ -2207,35 +2417,35 @@ function updatePanelOverlay(overlay, bboxes, imgSizePanel, displayWidth, display
         const elementType = bbox.element_type || '';
         const hasPoints = bbox.points && bbox.points.length > 0;
 
-        // Lines - draw as path
+        // Lines - draw as path (with offset)
         if ((elementType === 'line' || elementName.includes('trace_')) && hasPoints) {
             if (bbox.points.length < 2) return '';
             const points = bbox.points.filter(pt => Array.isArray(pt) && pt.length >= 2);
             if (points.length < 2) return '';
 
-            let pathD = `M ${points[0][0] * scaleX} ${points[0][1] * scaleY}`;
+            let pathD = `M ${points[0][0] * scaleX + offsetX} ${points[0][1] * scaleY + offsetY}`;
             for (let i = 1; i < points.length; i++) {
-                pathD += ` L ${points[i][0] * scaleX} ${points[i][1] * scaleY}`;
+                pathD += ` L ${points[i][0] * scaleX + offsetX} ${points[i][1] * scaleY + offsetY}`;
             }
 
             const className = type === 'hover' ? 'hover-path' : 'selected-path';
             return `<path class="${className}" d="${pathD}"/>`;
         }
-        // Scatter - draw as circles
+        // Scatter - draw as circles (with offset)
         else if (elementType === 'scatter' && hasPoints) {
             const className = type === 'hover' ? 'hover-scatter' : 'selected-scatter';
             let result = '';
             for (const pt of bbox.points) {
                 if (!Array.isArray(pt) || pt.length < 2) continue;
-                result += `<circle class="${className}" cx="${pt[0] * scaleX}" cy="${pt[1] * scaleY}" r="3"/>`;
+                result += `<circle class="${className}" cx="${pt[0] * scaleX + offsetX}" cy="${pt[1] * scaleY + offsetY}" r="3"/>`;
             }
             return result;
         }
-        // Default - draw bbox rectangle
+        // Default - draw bbox rectangle (with offset)
         else {
             const rectClass = type === 'hover' ? 'hover-rect' : 'selected-rect';
-            const x = bbox.x0 * scaleX - 1;
-            const y = bbox.y0 * scaleY - 1;
+            const x = bbox.x0 * scaleX + offsetX - 1;
+            const y = bbox.y0 * scaleY + offsetY - 1;
             const w = (bbox.x1 - bbox.x0) * scaleX + 2;
             const h = (bbox.y1 - bbox.y0) * scaleY + 2;
             return `<rect class="${rectClass}" x="${x}" y="${y}" width="${w}" height="${h}" rx="2"/>`;
@@ -2253,10 +2463,13 @@ function updatePanelOverlay(overlay, bboxes, imgSizePanel, displayWidth, display
     overlay.innerHTML = svg;
 }
 
-// Draw all bboxes for a panel in debug mode
-function drawPanelDebugBboxes(bboxes, scaleX, scaleY) {
+// Draw all bboxes for a panel in debug mode (with offset for object-fit:contain)
+function drawPanelDebugBboxes(bboxes, scaleX, scaleY, offsetX, offsetY) {
     let svg = '';
     let count = 0;
+    // Default offset to 0 if not provided
+    offsetX = offsetX || 0;
+    offsetY = offsetY || 0;
 
     for (const [name, bbox] of Object.entries(bboxes)) {
         if (name === '_meta') continue;
@@ -2276,9 +2489,9 @@ function drawPanelDebugBboxes(bboxes, scaleX, scaleY) {
             rectClass = 'debug-rect-trace';
         }
 
-        // Draw bbox rectangle
-        const x = bbox.x0 * scaleX;
-        const y = bbox.y0 * scaleY;
+        // Draw bbox rectangle (with offset for object-fit:contain letterboxing)
+        const x = bbox.x0 * scaleX + offsetX;
+        const y = bbox.y0 * scaleY + offsetY;
         const w = (bbox.x1 - bbox.x0) * scaleX;
         const h = (bbox.y1 - bbox.y0) * scaleY;
 
@@ -2288,13 +2501,13 @@ function drawPanelDebugBboxes(bboxes, scaleX, scaleY) {
         const shortName = name.length > 10 ? name.substring(0, 8) + '..' : name;
         svg += `<text class="debug-label" x="${x + 1}" y="${y + 8}" style="font-size: 6px;">${shortName}</text>`;
 
-        // Draw path points if available
+        // Draw path points if available (with offset)
         if (hasPoints && bbox.points.length > 1) {
-            let pathD = `M ${bbox.points[0][0] * scaleX} ${bbox.points[0][1] * scaleY}`;
+            let pathD = `M ${bbox.points[0][0] * scaleX + offsetX} ${bbox.points[0][1] * scaleY + offsetY}`;
             for (let i = 1; i < bbox.points.length; i++) {
                 const pt = bbox.points[i];
                 if (pt && pt.length >= 2) {
-                    pathD += ` L ${pt[0] * scaleX} ${pt[1] * scaleY}`;
+                    pathD += ` L ${pt[0] * scaleX + offsetX} ${pt[1] * scaleY + offsetY}`;
                 }
             }
             svg += `<path class="debug-path" d="${pathD}"/>`;
@@ -2353,11 +2566,7 @@ async function loadPanelForEditing(panelIdx, panelName, elementToSelect) {
         // Scroll to section and show properties
         scrollToSection(selectedElement);
 
-        // Show single-panel preview when element selected
-        const previewWrapper = document.querySelector('.preview-wrapper');
-        if (previewWrapper) {
-            previewWrapper.style.display = 'block';
-        }
+        // Keep unified canvas view only - don't show single-panel preview
 
         // Update panel path display in right panel header
         const panelPathEl = document.getElementById('panel-path-display');
@@ -2377,14 +2586,8 @@ async function loadPanelForEditing(panelIdx, panelName, elementToSelect) {
 function togglePanelGrid() {
     showingPanelGrid = !showingPanelGrid;
     const gridSection = document.getElementById('panel-grid-section');
-    const showBtn = document.getElementById('show-grid-btn');
-
-    if (showingPanelGrid) {
-        gridSection.style.display = 'block';
-        showBtn.textContent = 'Hide All';
-    } else {
-        gridSection.style.display = 'none';
-        showBtn.textContent = 'Show All';
+    if (gridSection) {
+        gridSection.style.display = showingPanelGrid ? 'block' : 'none';
     }
 }
 
@@ -2471,21 +2674,24 @@ function updatePanelIndicator() {
     const current = currentPanelIndex + 1;
     const panelName = panelData.panels[currentPanelIndex];
 
-    document.getElementById('panel-indicator').textContent = `${current} / ${total}`;
-    document.getElementById('current-panel-name').textContent = `Panel ${panelName.replace('.pltz.d', '')}`;
+    // Update indicator text (if elements exist)
+    const indicatorEl = document.getElementById('panel-indicator');
+    if (indicatorEl) indicatorEl.textContent = `${current} / ${total}`;
 
-    // Update prev/next button states
-    document.getElementById('prev-panel-btn').disabled = currentPanelIndex === 0;
-    document.getElementById('next-panel-btn').disabled = currentPanelIndex === total - 1;
+    const nameEl = document.getElementById('current-panel-name');
+    if (nameEl) nameEl.textContent = `Panel ${panelName.replace('.pltz.d', '')}`;
 }
 
 // =============================================================================
 // Canvas Mode (Draggable Panel Layout)
 // =============================================================================
 let canvasMode = 'grid';  // 'grid' or 'canvas'
-let panelPositions = {};  // Store panel positions {name: {x, y, width, height}}
+let panelPositions = {};  // Store panel positions {name: {x, y, width, height}} in pixels
+let panelLayoutMm = {};   // Store panel positions in mm for saving {name: {x_mm, y_mm, width_mm, height_mm}}
+let canvasScale = 3;      // Scale factor: pixels per mm (updated in loadPanelGrid)
 let draggedPanel = null;
 let dragOffset = {x: 0, y: 0};
+let layoutModified = false;  // Track if layout has been modified
 
 function setCanvasMode(mode) {
     canvasMode = mode;
@@ -2586,43 +2792,608 @@ async function renderPanelCanvas() {
     }
 }
 
-function startDrag(e, item, name) {
+// Check if an element is interactive (should not initiate drag)
+function isInteractiveElement(target) {
+    // SVG paths with hover-path class are interactive elements
+    if (target.classList && target.classList.contains('hover-path')) return true;
+    if (target.classList && target.classList.contains('hit-path')) return true;
+
+    // Check parent elements for hover-path (click might be on child)
+    let el = target;
+    while (el && el !== document.body) {
+        if (el.tagName === 'path' || el.tagName === 'PATH') {
+            // Path elements in SVG overlay are interactive
+            const svg = el.closest('svg');
+            if (svg && svg.classList.contains('panel-card-overlay')) {
+                return true;
+            }
+        }
+        el = el.parentElement;
+    }
+    return false;
+}
+
+// =============================================================================
+// Element Dragging (Legends, Panel Letters)
+// =============================================================================
+let elementDragState = null;  // {element, panelName, startPos, elementType, axId}
+
+// Snap positions for draggable elements (normalized axes coordinates 0-1)
+const SNAP_POSITIONS = {
+    'upper left':    {x: 0.02, y: 0.98},
+    'upper center':  {x: 0.50, y: 0.98},
+    'upper right':   {x: 0.98, y: 0.98},
+    'center left':   {x: 0.02, y: 0.50},
+    'center':        {x: 0.50, y: 0.50},
+    'center right':  {x: 0.98, y: 0.50},
+    'lower left':    {x: 0.02, y: 0.02},
+    'lower center':  {x: 0.50, y: 0.02},
+    'lower right':   {x: 0.98, y: 0.02},
+};
+
+// Check if an element is draggable
+// ONLY panel letters and legends are draggable to maintain scientific rigor
+// Data elements (lines, scatter, bars, etc.) must NOT be movable
+function isDraggableElement(elementName, bboxes) {
+    if (!elementName || !bboxes) return false;
+
+    // Whitelist: ONLY these element types are draggable
+    const DRAGGABLE_TYPES = ['legend', 'panel_letter'];
+
+    // Check by element_type in bbox info
+    const info = bboxes[elementName];
+    if (info && DRAGGABLE_TYPES.includes(info.element_type)) {
+        return true;
+    }
+
+    // Check by naming convention (strict match)
+    if (elementName.match(/_legend$/)) return true;
+    if (elementName.match(/_panel_letter_[A-Z]$/)) return true;
+
+    // Everything else is NOT draggable (data integrity)
+    return false;
+}
+
+// Start element drag (for legends and panel letters)
+function startElementDrag(e, elementName, panelName, img, bboxes) {
+    const info = bboxes[elementName] || {};
+    const elementType = info.element_type || (elementName.includes('legend') ? 'legend' : 'panel_letter');
+
+    // Extract ax_id from element name (e.g., "ax_00_legend" -> "ax_00")
+    const axId = elementName.split('_').slice(0, 2).join('_');
+
+    // Get axes bbox for constraining drag
+    const axesBbox = bboxes[`${axId}_panel`] || null;
+
+    elementDragState = {
+        element: elementName,
+        panelName: panelName,
+        elementType: elementType,
+        axId: axId,
+        axesBbox: axesBbox,
+        bboxes: bboxes,
+        img: img,
+        startMouseX: e.clientX,
+        startMouseY: e.clientY,
+        startBbox: {...info},
+    };
+
+    // Show snap guide overlay
+    showSnapGuides(img, axesBbox, bboxes);
+
+    document.addEventListener('mousemove', onElementDrag);
+    document.addEventListener('mouseup', stopElementDrag);
+
     e.preventDefault();
-    draggedPanel = {item, name};
-    dragOffset.x = e.clientX - item.offsetLeft;
-    dragOffset.y = e.clientY - item.offsetTop;
-    item.classList.add('dragging');
+    e.stopPropagation();
+}
+
+// Handle element drag movement
+function onElementDrag(e) {
+    if (!elementDragState) return;
+
+    const {img, bboxes, element, axId, axesBbox, startBbox, startMouseX, startMouseY} = elementDragState;
+    if (!img) return;
+
+    const rect = img.getBoundingClientRect();
+    const dims = getObjectFitContainDimensions(img);
+
+    // Calculate delta in image coordinates
+    const deltaX = e.clientX - startMouseX;
+    const deltaY = e.clientY - startMouseY;
+
+    // Convert to image pixel coordinates
+    const scaleX = dims.renderedWidth / rect.width;
+    const scaleY = dims.renderedHeight / rect.height;
+    const imgDeltaX = deltaX * scaleX * (bboxes._meta?.imgSize?.width || 1) / dims.renderedWidth;
+    const imgDeltaY = deltaY * scaleY * (bboxes._meta?.imgSize?.height || 1) / dims.renderedHeight;
+
+    // Update bbox position (for visual feedback)
+    if (bboxes[element]) {
+        const newX0 = startBbox.x0 + imgDeltaX;
+        const newY0 = startBbox.y0 + imgDeltaY;
+        bboxes[element].x0 = newX0;
+        bboxes[element].y0 = newY0;
+        bboxes[element].x1 = newX0 + (startBbox.x1 - startBbox.x0);
+        bboxes[element].y1 = newY0 + (startBbox.y1 - startBbox.y0);
+    }
 
-    document.addEventListener('mousemove', onDrag);
-    document.addEventListener('mouseup', stopDrag);
+    // Calculate normalized axes position (0-1)
+    if (axesBbox) {
+        const axesWidth = axesBbox.x1 - axesBbox.x0;
+        const axesHeight = axesBbox.y1 - axesBbox.y0;
+        const elemCenterX = (bboxes[element].x0 + bboxes[element].x1) / 2;
+        const elemCenterY = (bboxes[element].y0 + bboxes[element].y1) / 2;
+        const normX = (elemCenterX - axesBbox.x0) / axesWidth;
+        const normY = 1 - (elemCenterY - axesBbox.y0) / axesHeight;  // Flip Y
+
+        // Update snap guide highlighting
+        updateSnapHighlight(normX, normY);
+
+        // Show position indicator
+        showElementPositionIndicator(element, normX, normY);
+    }
+
+    // Redraw overlay
+    const overlay = img.parentElement?.querySelector('svg.panel-card-overlay');
+    if (overlay) {
+        const panelCache = panelBboxesCache[elementDragState.panelName];
+        if (panelCache) {
+            updatePanelOverlay(overlay, bboxes, panelCache.imgSize, rect.width, rect.height, element, element, img);
+        }
+    }
 }
 
-function onDrag(e) {
-    if (!draggedPanel) return;
+// Stop element drag and save position
+function stopElementDrag() {
+    if (!elementDragState) return;
+
+    const {element, panelName, elementType, axId, bboxes, axesBbox} = elementDragState;
+
+    // Calculate final normalized position
+    let finalPosition = null;
+    let snapName = null;
+
+    if (axesBbox && bboxes[element]) {
+        const axesWidth = axesBbox.x1 - axesBbox.x0;
+        const axesHeight = axesBbox.y1 - axesBbox.y0;
+        const elemCenterX = (bboxes[element].x0 + bboxes[element].x1) / 2;
+        const elemCenterY = (bboxes[element].y0 + bboxes[element].y1) / 2;
+        const normX = (elemCenterX - axesBbox.x0) / axesWidth;
+        const normY = 1 - (elemCenterY - axesBbox.y0) / axesHeight;
+
+        // Check for snap to named position
+        snapName = findNearestSnapPosition(normX, normY);
+        finalPosition = snapName ? SNAP_POSITIONS[snapName] : {x: normX, y: normY};
+    }
+
+    // Hide snap guides
+    hideSnapGuides();
+    hideElementPositionIndicator();
+
+    // Save position to server
+    if (finalPosition) {
+        saveElementPosition(element, panelName, elementType, finalPosition, snapName);
+    }
+
+    document.removeEventListener('mousemove', onElementDrag);
+    document.removeEventListener('mouseup', stopElementDrag);
+    elementDragState = null;
+}
+
+// Find nearest snap position if within threshold
+function findNearestSnapPosition(normX, normY, threshold = 0.08) {
+    let nearest = null;
+    let minDist = Infinity;
+
+    for (const [name, pos] of Object.entries(SNAP_POSITIONS)) {
+        const dist = Math.sqrt(Math.pow(normX - pos.x, 2) + Math.pow(normY - pos.y, 2));
+        if (dist < threshold && dist < minDist) {
+            minDist = dist;
+            nearest = name;
+        }
+    }
+    return nearest;
+}
+
+// Show snap guide overlay on axes
+function showSnapGuides(img, axesBbox, bboxes) {
+    if (!img || !axesBbox) return;
+
+    const container = img.parentElement;
+    if (!container) return;
+
+    // Remove existing guides
+    container.querySelectorAll('.snap-guide').forEach(el => el.remove());
+
+    const rect = img.getBoundingClientRect();
+    const dims = getObjectFitContainDimensions(img);
+    const imgSize = bboxes._meta?.imgSize || {width: dims.renderedWidth, height: dims.renderedHeight};
+
+    // Scale factors
+    const scaleX = dims.renderedWidth / imgSize.width;
+    const scaleY = dims.renderedHeight / imgSize.height;
+
+    // Create snap points
+    for (const [name, pos] of Object.entries(SNAP_POSITIONS)) {
+        const axesWidth = axesBbox.x1 - axesBbox.x0;
+        const axesHeight = axesBbox.y1 - axesBbox.y0;
+
+        // Calculate pixel position
+        const imgX = axesBbox.x0 + pos.x * axesWidth;
+        const imgY = axesBbox.y0 + (1 - pos.y) * axesHeight;
+
+        const displayX = dims.offsetX + imgX * scaleX;
+        const displayY = dims.offsetY + imgY * scaleY;
+
+        const guide = document.createElement('div');
+        guide.className = 'snap-guide';
+        guide.dataset.snapName = name;
+        guide.style.cssText = `
+            position: absolute;
+            left: ${displayX - 6}px;
+            top: ${displayY - 6}px;
+            width: 12px;
+            height: 12px;
+            border: 2px dashed rgba(100, 149, 237, 0.6);
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 50;
+            transition: all 0.15s ease;
+        `;
+        container.appendChild(guide);
+    }
+}
+
+// Highlight snap position when near
+function updateSnapHighlight(normX, normY) {
+    const threshold = 0.08;
+    document.querySelectorAll('.snap-guide').forEach(guide => {
+        const name = guide.dataset.snapName;
+        const pos = SNAP_POSITIONS[name];
+        const dist = Math.sqrt(Math.pow(normX - pos.x, 2) + Math.pow(normY - pos.y, 2));
+        if (dist < threshold) {
+            guide.style.borderColor = 'rgba(76, 175, 80, 0.9)';
+            guide.style.backgroundColor = 'rgba(76, 175, 80, 0.3)';
+            guide.style.transform = 'scale(1.5)';
+        } else {
+            guide.style.borderColor = 'rgba(100, 149, 237, 0.6)';
+            guide.style.backgroundColor = 'transparent';
+            guide.style.transform = 'scale(1)';
+        }
+    });
+}
+
+// Hide snap guides
+function hideSnapGuides() {
+    document.querySelectorAll('.snap-guide').forEach(el => el.remove());
+}
+
+// Show position indicator while dragging element
+function showElementPositionIndicator(element, normX, normY) {
+    let indicator = document.getElementById('element-pos-indicator');
+    if (!indicator) {
+        indicator = document.createElement('div');
+        indicator.id = 'element-pos-indicator';
+        indicator.style.cssText = `
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            color: #4fc3f7;
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 12px;
+            z-index: 1000;
+        `;
+        document.body.appendChild(indicator);
+    }
+    const snapName = findNearestSnapPosition(normX, normY);
+    if (snapName) {
+        indicator.innerHTML = `Position: <b>${snapName}</b>`;
+        indicator.style.color = '#4caf50';
+    } else {
+        indicator.innerHTML = `Position: (${normX.toFixed(2)}, ${normY.toFixed(2)})`;
+        indicator.style.color = '#4fc3f7';
+    }
+    indicator.style.display = 'block';
+}
+
+// Hide position indicator
+function hideElementPositionIndicator() {
+    const indicator = document.getElementById('element-pos-indicator');
+    if (indicator) indicator.style.display = 'none';
+}
+
+// Save element position to server
+async function saveElementPosition(element, panelName, elementType, position, snapName) {
+    try {
+        const response = await fetch('/save_element_position', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                element: element,
+                panel: panelName,
+                element_type: elementType,
+                position: position,
+                snap_name: snapName,
+            }),
+        });
+        const data = await response.json();
+        if (data.success) {
+            setStatus(`Saved ${elementType} position: ${snapName || `(${position.x.toFixed(2)}, ${position.y.toFixed(2)})`}`, false);
+        } else {
+            setStatus(`Failed to save position: ${data.error}`, true);
+        }
+    } catch (err) {
+        console.error('Error saving element position:', err);
+        setStatus('Error saving position', true);
+    }
+}
+
+// Initialize drag handler for a panel item
+function initPanelDrag(item, panelName) {
+    const dragHandle = item.querySelector('.panel-drag-handle');
+
+    // Drag from handle (always works)
+    if (dragHandle) {
+        dragHandle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            startPanelDrag(e, item, panelName);
+        });
+    }
+
+    // Also allow dragging from panel label
+    const label = item.querySelector('.panel-canvas-label');
+    if (label) {
+        label.style.cursor = 'move';
+        label.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            startPanelDrag(e, item, panelName);
+        });
+    }
+
+    // Allow dragging from anywhere on the panel (except interactive elements)
+    // This enables intuitive drag behavior while preserving element selection
+    item.addEventListener('mousedown', (e) => {
+        // Skip if clicking on interactive elements (legends, text paths, etc.)
+        if (isInteractiveElement(e.target)) return;
+
+        // Skip if clicking on drag handle or label (already handled above)
+        if (e.target.closest('.panel-drag-handle')) return;
+        if (e.target.closest('.panel-canvas-label')) return;
+        if (e.target.closest('.panel-position-indicator')) return;
+
+        // Start drag from anywhere else on the panel
+        e.preventDefault();
+        startPanelDrag(e, item, panelName);
+    });
+
+    // Set cursor to indicate draggability
+    item.style.cursor = 'grab';
+}
+
+function startPanelDrag(e, item, name) {
+    e.preventDefault();
+
+    // Handle selection based on Ctrl key
+    const isCtrlPressed = e.ctrlKey || e.metaKey;
+    const wasAlreadySelected = item.classList.contains('active');
+
+    if (isCtrlPressed) {
+        // Ctrl+Click: toggle this panel's selection
+        item.classList.toggle('active');
+    } else if (!wasAlreadySelected) {
+        // Regular click on unselected panel: select only this one
+        deselectAllPanels();
+        item.classList.add('active');
+    }
+    // If clicking on already-selected panel without Ctrl:
+    // Don't change selection yet - could be start of multi-panel drag
+    // Selection will be finalized in stopPanelDrag based on hasMoved
+
+    // Collect all selected panels for group dragging
+    const selectedPanels = Array.from(document.querySelectorAll('.panel-canvas-item.active'));
+    if (selectedPanels.length === 0) {
+        // If somehow nothing selected, select the clicked item
+        item.classList.add('active');
+        selectedPanels.push(item);
+    }
+
+    // Store drag state for all selected panels
+    draggedPanel = {
+        item,
+        name,
+        hasMoved: false,  // Track if actual drag occurred
+        wasAlreadySelected,  // Track initial selection state for click handling
+        isCtrlPressed,  // Track if Ctrl was pressed
+        selectedPanels: selectedPanels.map(p => ({
+            item: p,
+            name: p.dataset.panelName,
+            startLeft: parseFloat(p.style.left) || 0,
+            startTop: parseFloat(p.style.top) || 0
+        }))
+    };
+    dragOffset.x = e.clientX;
+    dragOffset.y = e.clientY;
+
+    selectedPanels.forEach(p => {
+        p.classList.add('dragging');
+        p.style.cursor = 'grabbing';
+    });
+
+    // Show position indicator for primary panel
+    updatePositionIndicator(name, item.offsetLeft, item.offsetTop);
+
+    document.addEventListener('mousemove', onPanelDrag);
+    document.addEventListener('mouseup', stopPanelDrag);
+}
+
+function onPanelDrag(e) {
+    if (!draggedPanel || !draggedPanel.selectedPanels) return;
     const canvasEl = document.getElementById('panel-canvas');
-    const rect = canvasEl.getBoundingClientRect();
 
-    let newX = e.clientX - dragOffset.x;
-    let newY = e.clientY - dragOffset.y;
+    // Calculate delta from drag start
+    let deltaX = e.clientX - dragOffset.x;
+    let deltaY = e.clientY - dragOffset.y;
 
-    // Constrain to canvas bounds
-    newX = Math.max(0, Math.min(newX, canvasEl.offsetWidth - draggedPanel.item.offsetWidth));
-    newY = Math.max(0, newY);
+    // Mark as moved if we've actually dragged (threshold: 3px)
+    if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
+        draggedPanel.hasMoved = true;
+    }
+
+    // Snap to grid (optional: 5mm grid)
+    const gridSnap = 5 * canvasScale;  // 5mm in pixels
+    if (e.shiftKey) {
+        deltaX = Math.round(deltaX / gridSnap) * gridSnap;
+        deltaY = Math.round(deltaY / gridSnap) * gridSnap;
+    }
+
+    // Move all selected panels by the same delta
+    for (const panelInfo of draggedPanel.selectedPanels) {
+        let newX = panelInfo.startLeft + deltaX;
+        let newY = panelInfo.startTop + deltaY;
+
+        // Constrain to canvas bounds (allow slight negative for edge alignment)
+        newX = Math.max(-5, Math.min(newX, canvasEl.offsetWidth - panelInfo.item.offsetWidth + 5));
+        newY = Math.max(-5, newY);
+
+        panelInfo.item.style.left = newX + 'px';
+        panelInfo.item.style.top = newY + 'px';
+
+        // Update pixel positions
+        if (panelPositions[panelInfo.name]) {
+            panelPositions[panelInfo.name].x = newX;
+            panelPositions[panelInfo.name].y = newY;
+        }
 
-    draggedPanel.item.style.left = newX + 'px';
-    draggedPanel.item.style.top = newY + 'px';
+        // Update mm positions
+        if (panelLayoutMm[panelInfo.name]) {
+            panelLayoutMm[panelInfo.name].x_mm = newX / canvasScale;
+            panelLayoutMm[panelInfo.name].y_mm = newY / canvasScale;
+        }
+    }
 
-    panelPositions[draggedPanel.name].x = newX;
-    panelPositions[draggedPanel.name].y = newY;
+    // Show position indicator for primary panel
+    const primaryNewX = draggedPanel.selectedPanels[0].startLeft + deltaX;
+    const primaryNewY = draggedPanel.selectedPanels[0].startTop + deltaY;
+    updatePositionIndicator(draggedPanel.name, primaryNewX, primaryNewY);
+
+    // Mark layout as modified
+    layoutModified = true;
 }
 
-function stopDrag() {
+function stopPanelDrag() {
     if (draggedPanel) {
-        draggedPanel.item.classList.remove('dragging');
+        // Handle click (no movement) on already-selected panel without Ctrl:
+        // Finalize selection to only the clicked panel
+        if (!draggedPanel.hasMoved && draggedPanel.wasAlreadySelected && !draggedPanel.isCtrlPressed) {
+            // This was a simple click on an already-selected panel
+            // Deselect all others, keep only the clicked panel selected
+            deselectAllPanels();
+            draggedPanel.item.classList.add('active');
+        }
+
+        // Reset cursor for all selected panels
+        if (draggedPanel.selectedPanels) {
+            draggedPanel.selectedPanels.forEach(p => {
+                p.item.classList.remove('dragging');
+                p.item.style.cursor = 'grab';
+            });
+        } else {
+            draggedPanel.item.classList.remove('dragging');
+            draggedPanel.item.style.cursor = 'grab';
+        }
+
+        // Update canvas size if panel moved outside
+        updateCanvasSize();
+
+        // Hide position indicator after a delay
+        const name = draggedPanel.name;
+        setTimeout(() => {
+            const indicator = document.getElementById(`pos-${name}`);
+            if (indicator) indicator.style.opacity = '0';
+        }, 1500);
+
+        // Auto-save layout
+        if (layoutModified) {
+            autoSaveLayout();
+        }
+
         draggedPanel = null;
     }
-    document.removeEventListener('mousemove', onDrag);
-    document.removeEventListener('mouseup', stopDrag);
+    document.removeEventListener('mousemove', onPanelDrag);
+    document.removeEventListener('mouseup', stopPanelDrag);
+}
+
+// Update position indicator showing mm coordinates
+function updatePositionIndicator(panelName, x, y) {
+    const indicator = document.getElementById(`pos-${panelName}`);
+    if (!indicator) return;
+
+    const x_mm = (x / canvasScale).toFixed(1);
+    const y_mm = (y / canvasScale).toFixed(1);
+    indicator.textContent = `${x_mm}, ${y_mm} mm`;
+    indicator.style.opacity = '1';
+}
+
+// Update canvas size to fit all panels after drag
+function updateCanvasSize() {
+    const canvasEl = document.getElementById('panel-canvas');
+    if (!canvasEl) return;
+
+    const maxY = Math.max(...Object.values(panelPositions).map(p => p.y + p.height)) + 20;
+    const maxX = Math.max(...Object.values(panelPositions).map(p => p.x + p.width)) + 20;
+    canvasEl.style.minHeight = Math.max(400, maxY) + 'px';
+    canvasEl.style.minWidth = Math.max(700, maxX) + 'px';
+}
+
+// Auto-save layout to server
+async function autoSaveLayout() {
+    if (!layoutModified) return;
+
+    try {
+        const resp = await fetch('/save_layout', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ layout: panelLayoutMm })
+        });
+        const data = await resp.json();
+
+        if (data.success) {
+            layoutModified = false;
+            setStatus('Layout saved', false);
+            console.log('Layout auto-saved:', panelLayoutMm);
+        } else {
+            console.error('Layout save failed:', data.error);
+            setStatus('Layout save failed: ' + data.error, true);
+        }
+    } catch (e) {
+        console.error('Error saving layout:', e);
+        setStatus('Error saving layout', true);
+    }
+}
+
+// Manual save layout button handler
+function saveLayoutManually() {
+    layoutModified = true;  // Force save
+    autoSaveLayout();
+}
+
+// Legacy drag functions (kept for backward compatibility with canvas mode)
+function startDrag(e, item, name) {
+    startPanelDrag(e, item, name);
+}
+
+function onDrag(e) {
+    onPanelDrag(e);
+}
+
+function stopDrag() {
+    stopPanelDrag();
 }
 
 let resizingPanel = null;
@@ -2905,6 +3676,18 @@ async function saveManual() {
         const data = await resp.json();
         if (data.status === 'saved') {
             setStatus('Saved: ' + data.path.split('/').pop(), false);
+
+            // Also export to bundle (png and svg)
+            try {
+                await fetch('/export', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({formats: ['png', 'svg']})
+                });
+                setStatus('Saved and exported to bundle', false);
+            } catch (exportErr) {
+                console.warn('Export failed:', exportErr);
+            }
         } else {
             setStatus('Error: ' + data.message, true);
         }
@@ -2919,6 +3702,47 @@ function resetOverrides() {
     }
 }
 
+// Download menu toggle
+function toggleDownloadMenu() {
+    const menu = document.getElementById('download-menu');
+    if (menu.style.display === 'none') {
+        menu.style.display = 'block';
+        // Close when clicking outside
+        setTimeout(() => {
+            document.addEventListener('click', closeDownloadMenuOnClickOutside);
+        }, 10);
+    } else {
+        menu.style.display = 'none';
+    }
+}
+
+function closeDownloadMenuOnClickOutside(e) {
+    const menu = document.getElementById('download-menu');
+    const btn = document.getElementById('download-btn');
+    if (!menu.contains(e.target) && !btn.contains(e.target)) {
+        menu.style.display = 'none';
+        document.removeEventListener('click', closeDownloadMenuOnClickOutside);
+    }
+}
+
+// Export figure to bundle and trigger download
+async function exportAndDownload(format) {
+    setStatus(`Exporting ${format.toUpperCase()}...`, false);
+    try {
+        // First export to bundle
+        await fetch('/export', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({formats: [format]})
+        });
+        // Then trigger download
+        window.location.href = `/download/${format}`;
+        setStatus(`Downloaded ${format.toUpperCase()}`, false);
+    } catch (e) {
+        setStatus('Export error: ' + e.message, true);
+    }
+}
+
 function addAnnotation() {
     const text = document.getElementById('annot-text').value;
     if (!text) return;
@@ -3057,14 +3881,24 @@ function renderGroupStats(group) {
 
 function setStatus(msg, isError = false) {
     const el = document.getElementById('status');
-    const loadingOverlay = document.getElementById('loading-overlay');
+    const globalOverlay = document.getElementById('global-loading-overlay');
+    const localOverlay = document.getElementById('loading-overlay');
 
     // Show/hide spinner for loading states
     if (msg === 'Updating...' || msg === 'Loading preview...') {
-        loadingOverlay.style.display = 'flex';
+        // Show global overlay (visible for both single and multi-panel views)
+        if (globalOverlay) {
+            globalOverlay.style.display = 'flex';
+            const loadingText = globalOverlay.querySelector('.loading-text');
+            if (loadingText) loadingText.textContent = msg;
+        }
+        // Also show local overlay if visible
+        if (localOverlay) localOverlay.style.display = 'flex';
         el.textContent = '';  // Clear status text during loading
     } else {
-        loadingOverlay.style.display = 'none';
+        // Hide both overlays
+        if (globalOverlay) globalOverlay.style.display = 'none';
+        if (localOverlay) localOverlay.style.display = 'none';
         el.textContent = msg;
     }
     el.classList.toggle('error', isError);
@@ -3106,11 +3940,974 @@ document.querySelectorAll('input[type="color"]').forEach(el => {
     });
 });
 
-// Ctrl+S keyboard shortcut to save
+// =============================================================================
+// Keyboard Shortcuts (matching SciTeX Cloud vis app)
+// =============================================================================
+let shortcutMode = null;  // For multi-key shortcuts like Alt+A → L
+
 document.addEventListener('keydown', (e) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+    const key = e.key.toLowerCase();
+    const isCtrl = e.ctrlKey || e.metaKey;
+    const isShift = e.shiftKey;
+    const isAlt = e.altKey;
+
+    // Don't capture shortcuts when typing in inputs
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
+        return;
+    }
+
+    // =========================================================================
+    // Multi-key shortcut mode (Alt+A → alignment, Alt+Shift+A → axis alignment)
+    // =========================================================================
+    if (shortcutMode === 'align') {
         e.preventDefault();
-        saveManual();
+        handleAlignShortcut(key, isShift);
+        shortcutMode = null;
+        return;
+    }
+
+    if (shortcutMode === 'alignByAxis') {
+        e.preventDefault();
+        handleAlignByAxisShortcut(key);
+        shortcutMode = null;
+        return;
+    }
+
+    // =========================================================================
+    // Basic Operations
+    // =========================================================================
+
+    // Ctrl+S: Save
+    if (isCtrl && key === 's') {
+        e.preventDefault();
+        saveManual();
+        return;
+    }
+
+    // Ctrl+Z: Undo
+    if (isCtrl && !isShift && key === 'z') {
+        e.preventDefault();
+        undoLastChange();
+        return;
+    }
+
+    // Ctrl+Y or Ctrl+Shift+Z: Redo
+    if ((isCtrl && key === 'y') || (isCtrl && isShift && key === 'z')) {
+        e.preventDefault();
+        redoLastChange();
+        return;
+    }
+
+    // Delete: Remove selected element override
+    if (key === 'delete' || key === 'backspace') {
+        if (selectedElement && !isCtrl) {
+            e.preventDefault();
+            deleteSelectedOverride();
+            return;
+        }
+    }
+
+    // =========================================================================
+    // Panel/Element Movement (Arrow keys)
+    // =========================================================================
+
+    // Arrow keys: Move selected panel by 1mm (or 5mm with Shift)
+    if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(key)) {
+        e.preventDefault();
+        const amount = isShift ? 5 : 1;  // 5mm or 1mm
+        moveSelectedPanel(key.replace('arrow', ''), amount);
+        return;
+    }
+
+    // =========================================================================
+    // View Controls
+    // =========================================================================
+
+    // + or =: Zoom in
+    if ((key === '+' || key === '=') && !isCtrl) {
+        e.preventDefault();
+        zoomCanvas(1.1);
+        return;
+    }
+
+    // -: Zoom out
+    if (key === '-' && !isCtrl) {
+        e.preventDefault();
+        zoomCanvas(0.9);
+        return;
+    }
+
+    // 0: Fit to window
+    if (key === '0' && !isCtrl) {
+        e.preventDefault();
+        fitCanvasToWindow();
+        return;
+    }
+
+    // Ctrl++ : Increase canvas size
+    if (isCtrl && (key === '+' || key === '=')) {
+        e.preventDefault();
+        resizeCanvas(1.1);
+        return;
+    }
+
+    // Ctrl+- : Decrease canvas size
+    if (isCtrl && key === '-') {
+        e.preventDefault();
+        resizeCanvas(0.9);
+        return;
+    }
+
+    // =========================================================================
+    // Alignment Modes (Alt+A → basic, Alt+Shift+A → by axis)
+    // =========================================================================
+    if (isAlt && isShift && key === 'a') {
+        // Alt+Shift+A: Align by Axis (scientific alignment based on plot axes)
+        e.preventDefault();
+        shortcutMode = 'alignByAxis';
+        setStatus('Align by Axis: L=Y-Axis(left) R=Right T=Top B=X-Axis(bottom) C=Center-H M=Center-V S=Stack', false);
+        setTimeout(() => {
+            if (shortcutMode === 'alignByAxis') {
+                shortcutMode = null;
+                setStatus('Ready', false);
+            }
+        }, 3000);
+        return;
+    }
+    if (isAlt && !isShift && key === 'a') {
+        // Alt+A: Basic alignment (by bounding box)
+        e.preventDefault();
+        shortcutMode = 'align';
+        setStatus('Alignment mode: L=Left R=Right T=Top B=Bottom C=Center H=DistH V=DistV', false);
+        setTimeout(() => {
+            if (shortcutMode === 'align') {
+                shortcutMode = null;
+                setStatus('Ready', false);
+            }
+        }, 3000);
+        return;
+    }
+
+    // =========================================================================
+    // Arrange (Alt+F, Alt+B)
+    // =========================================================================
+    if (isAlt && key === 'f') {
+        e.preventDefault();
+        bringPanelToFront();
+        return;
+    }
+    if (isAlt && key === 'b') {
+        e.preventDefault();
+        sendPanelToBack();
+        return;
+    }
+
+    // =========================================================================
+    // Escape: Deselect/Cancel mode
+    // =========================================================================
+    if (key === 'escape') {
+        e.preventDefault();
+        shortcutMode = null;
+        deselectAllPanels();
+        setStatus('Ready', false);
+        return;
+    }
+
+    // =========================================================================
+    // G: Toggle grid visibility
+    // =========================================================================
+    if (key === 'g' && !isCtrl && !isAlt) {
+        e.preventDefault();
+        toggleGridVisibility();
+        return;
+    }
+
+    // =========================================================================
+    // Ctrl+A: Select all panels
+    // =========================================================================
+    if (isCtrl && key === 'a') {
+        e.preventDefault();
+        selectAllPanels();
+        return;
+    }
+
+    // =========================================================================
+    // Help (? or F1)
+    // =========================================================================
+    if (key === '?' || key === 'f1') {
+        e.preventDefault();
+        showShortcutHelp();
+        return;
+    }
+});
+
+// Handle alignment sub-shortcuts (basic bounding box alignment)
+function handleAlignShortcut(key, isShift) {
+    const panels = document.querySelectorAll('.panel-canvas-item');
+    if (panels.length < 2) {
+        setStatus('Need multiple panels for alignment', true);
+        return;
+    }
+
+    switch(key) {
+        case 'l': alignPanels('left'); break;
+        case 'r': alignPanels('right'); break;
+        case 't': alignPanels('top'); break;
+        case 'b': alignPanels('bottom'); break;
+        case 'c': alignPanels('center-h'); break;
+        case 'm': alignPanels('center-v'); break;
+        case 'h': distributePanels('horizontal'); break;
+        case 'v': distributePanels('vertical'); break;
+        default:
+            setStatus('Unknown alignment key: ' + key, true);
+    }
+}
+
+// Handle axis-based alignment sub-shortcuts (scientific plot alignment)
+function handleAlignByAxisShortcut(key) {
+    const panels = document.querySelectorAll('.panel-canvas-item');
+    if (panels.length < 2) {
+        setStatus('Need multiple panels for axis alignment', true);
+        return;
+    }
+
+    const dirNames = {
+        'l': 'Y-axis (left edge)',
+        'r': 'Right edge',
+        't': 'Top edge',
+        'b': 'X-axis (bottom edge)',
+        'c': 'Center horizontal',
+        'm': 'Center vertical',
+        's': 'Stacked vertically'
+    };
+
+    switch(key) {
+        case 'l': alignPanelsByAxis('left'); break;      // Y-axis left
+        case 'r': alignPanelsByAxis('right'); break;     // Right edge
+        case 't': alignPanelsByAxis('top'); break;       // Top edge
+        case 'b': alignPanelsByAxis('bottom'); break;    // X-axis bottom
+        case 'c': alignPanelsByAxis('center-h'); break;  // Horizontal center
+        case 'm': alignPanelsByAxis('center-v'); break;  // Vertical center
+        case 's': stackPanelsVertically(); break;        // Stack with Y-axis alignment
+        default:
+            setStatus('Unknown axis key: ' + key + '. Use L/R/T/B/C/M/S', true);
+            return;
+    }
+    if (dirNames[key]) {
+        setStatus(`Aligned by axis: ${dirNames[key]}`, false);
+    }
+}
+
+// Get axes bounding box from panel's cached bboxes
+// Returns {x0, y0, x1, y1} in image pixels, or null if not found
+function getAxesBboxForPanel(panelName) {
+    const cache = panelBboxesCache[panelName];
+    if (!cache || !cache.bboxes) return null;
+
+    // Look for ax_00_panel, ax_01_panel, etc.
+    const bboxes = cache.bboxes;
+    for (const key of Object.keys(bboxes)) {
+        if (key.endsWith('_panel') && key.startsWith('ax_')) {
+            const bbox = bboxes[key];
+            if (bbox && bbox.x0 !== undefined) {
+                return {
+                    x0: bbox.x0,
+                    y0: bbox.y0,
+                    x1: bbox.x1,
+                    y1: bbox.y1,
+                    key: key
+                };
+            }
+        }
+    }
+
+    // Fallback: check _meta.axes_bbox_px for single-axes plots
+    if (bboxes._meta && bboxes._meta.axes_bbox_px) {
+        const axBbox = bboxes._meta.axes_bbox_px;
+        return {
+            x0: axBbox.x0 || axBbox.x,
+            y0: axBbox.y0 || axBbox.y,
+            x1: axBbox.x1 || (axBbox.x + axBbox.width),
+            y1: axBbox.y1 || (axBbox.y + axBbox.height),
+            key: '_meta.axes_bbox_px'
+        };
+    }
+
+    return null;
+}
+
+// Calculate panel offset to align by axis edge
+// Returns the axis edge position in canvas pixels relative to panel's top-left
+function getAxisEdgeOffset(panel, axesBbox, edge, imgSize) {
+    if (!axesBbox || !imgSize) return 0;
+
+    // Scale factor from image pixels to displayed panel pixels
+    const panelEl = panel;
+    const displayWidth = panelEl.offsetWidth;
+    const displayHeight = panelEl.offsetHeight;
+    const scaleX = displayWidth / imgSize.width;
+    const scaleY = displayHeight / imgSize.height;
+
+    switch(edge) {
+        case 'left':
+            // Y-axis left edge
+            return axesBbox.x0 * scaleX;
+        case 'right':
+            // Right edge of axes
+            return axesBbox.x1 * scaleX;
+        case 'top':
+            // Top edge of axes
+            return axesBbox.y0 * scaleY;
+        case 'bottom':
+            // X-axis bottom edge
+            return axesBbox.y1 * scaleY;
+        case 'center-h':
+            // Horizontal center of axes
+            return ((axesBbox.x0 + axesBbox.x1) / 2) * scaleX;
+        case 'center-v':
+            // Vertical center of axes
+            return ((axesBbox.y0 + axesBbox.y1) / 2) * scaleY;
+        default:
+            return 0;
+    }
+}
+
+// Align panels by axis edges (scientific alignment for plots)
+function alignPanelsByAxis(edge) {
+    const panels = Array.from(document.querySelectorAll('.panel-canvas-item'));
+    if (panels.length < 2) {
+        setStatus('Need multiple panels for axis alignment', true);
+        return;
+    }
+
+    // Collect panel info with axes bboxes
+    const panelInfos = [];
+    for (const panel of panels) {
+        const panelName = panel.dataset.panelName;
+        const cache = panelBboxesCache[panelName];
+        const axesBbox = getAxesBboxForPanel(panelName);
+        const imgSize = cache ? cache.imgSize : null;
+
+        if (!axesBbox || !imgSize) {
+            console.warn(`Panel ${panelName} has no axes bbox data`);
+            continue;
+        }
+
+        panelInfos.push({
+            el: panel,
+            name: panelName,
+            left: parseFloat(panel.style.left) || 0,
+            top: parseFloat(panel.style.top) || 0,
+            width: panel.offsetWidth,
+            height: panel.offsetHeight,
+            axesBbox: axesBbox,
+            imgSize: imgSize,
+            axisOffset: getAxisEdgeOffset(panel, axesBbox, edge, imgSize)
+        });
+    }
+
+    if (panelInfos.length < 2) {
+        setStatus('Need at least 2 panels with axis data for alignment', true);
+        return;
+    }
+
+    // Calculate target position - use the first panel's axis position as reference
+    const isHorizontal = ['left', 'right', 'center-h'].includes(edge);
+
+    if (isHorizontal) {
+        // Align horizontally (match X positions of axis edges)
+        // Target = first panel's axis X position in canvas coords
+        const refPanel = panelInfos[0];
+        const targetAxisX = refPanel.left + refPanel.axisOffset;
+
+        for (const info of panelInfos) {
+            const newLeft = targetAxisX - info.axisOffset;
+            info.el.style.left = newLeft + 'px';
+        }
+    } else {
+        // Align vertically (match Y positions of axis edges)
+        // Target = first panel's axis Y position in canvas coords
+        const refPanel = panelInfos[0];
+        const targetAxisY = refPanel.top + refPanel.axisOffset;
+
+        for (const info of panelInfos) {
+            const newTop = targetAxisY - info.axisOffset;
+            info.el.style.top = newTop + 'px';
+        }
+    }
+
+    // Update layout data
+    updatePanelLayoutFromDOM();
+    console.log(`Aligned ${panelInfos.length} panels by axis: ${edge}`);
+}
+
+// Stack panels vertically with Y-axis alignment
+function stackPanelsVertically() {
+    const panels = Array.from(document.querySelectorAll('.panel-canvas-item'));
+    if (panels.length < 2) {
+        setStatus('Need multiple panels for stacking', true);
+        return;
+    }
+
+    // Collect panel info with axes bboxes
+    const panelInfos = [];
+    for (const panel of panels) {
+        const panelName = panel.dataset.panelName;
+        const cache = panelBboxesCache[panelName];
+        const axesBbox = getAxesBboxForPanel(panelName);
+        const imgSize = cache ? cache.imgSize : null;
+
+        if (!axesBbox || !imgSize) {
+            console.warn(`Panel ${panelName} has no axes bbox data`);
+            continue;
+        }
+
+        panelInfos.push({
+            el: panel,
+            name: panelName,
+            left: parseFloat(panel.style.left) || 0,
+            top: parseFloat(panel.style.top) || 0,
+            width: panel.offsetWidth,
+            height: panel.offsetHeight,
+            axesBbox: axesBbox,
+            imgSize: imgSize,
+            yAxisOffset: getAxisEdgeOffset(panel, axesBbox, 'left', imgSize)
+        });
+    }
+
+    if (panelInfos.length < 2) {
+        setStatus('Need at least 2 panels with axis data for stacking', true);
+        return;
+    }
+
+    // Sort by current vertical position
+    panelInfos.sort((a, b) => a.top - b.top);
+
+    // Use first panel as reference for Y-axis alignment
+    const refPanel = panelInfos[0];
+    const targetAxisX = refPanel.left + refPanel.yAxisOffset;
+
+    // Stack panels vertically with small gap, aligned by Y-axis
+    const gap = 10; // pixels gap between panels
+    let currentY = refPanel.top;
+
+    for (let i = 0; i < panelInfos.length; i++) {
+        const info = panelInfos[i];
+
+        // Align Y-axis (left edge of axes)
+        const newLeft = targetAxisX - info.yAxisOffset;
+        info.el.style.left = newLeft + 'px';
+
+        // Stack vertically
+        info.el.style.top = currentY + 'px';
+        currentY += info.height + gap;
+    }
+
+    // Update layout data
+    updatePanelLayoutFromDOM();
+    setStatus(`Stacked ${panelInfos.length} panels with Y-axis alignment`, false);
+}
+
+// Move selected panel(s) by delta in mm
+function moveSelectedPanel(direction, amountMm) {
+    const selectedPanels = document.querySelectorAll('.panel-canvas-item.active');
+    if (selectedPanels.length === 0) {
+        setStatus('No panel selected', true);
+        return;
+    }
+
+    const deltaX = direction === 'left' ? -amountMm : (direction === 'right' ? amountMm : 0);
+    const deltaY = direction === 'up' ? -amountMm : (direction === 'down' ? amountMm : 0);
+
+    selectedPanels.forEach(panel => {
+        const panelName = panel.dataset.panelName;
+
+        // Update position in pixels (canvasScale = px/mm)
+        const currentLeft = parseFloat(panel.style.left) || 0;
+        const currentTop = parseFloat(panel.style.top) || 0;
+
+        panel.style.left = (currentLeft + deltaX * canvasScale) + 'px';
+        panel.style.top = (currentTop + deltaY * canvasScale) + 'px';
+
+        // Update layout data
+        if (panelLayoutMm[panelName]) {
+            panelLayoutMm[panelName].x_mm += deltaX;
+            panelLayoutMm[panelName].y_mm += deltaY;
+            layoutModified = true;
+        }
+    });
+
+    const count = selectedPanels.length;
+    const panelText = count === 1 ? selectedPanels[0].dataset.panelName : `${count} panels`;
+    setStatus(`Moved ${panelText} by ${amountMm}mm ${direction}`, false);
+}
+
+// Zoom canvas view
+let canvasZoom = 1.0;
+function zoomCanvas(factor) {
+    canvasZoom *= factor;
+    canvasZoom = Math.max(0.25, Math.min(4, canvasZoom));  // Limit 25%-400%
+    const canvas = document.getElementById('panel-canvas');
+    if (canvas) {
+        canvas.style.transform = `scale(${canvasZoom})`;
+        canvas.style.transformOrigin = 'top left';
+    }
+    setStatus(`Zoom: ${Math.round(canvasZoom * 100)}%`, false);
+}
+
+// Fit canvas to window
+function fitCanvasToWindow() {
+    canvasZoom = 1.0;
+    const canvas = document.getElementById('panel-canvas');
+    if (canvas) {
+        canvas.style.transform = 'scale(1)';
+    }
+    setStatus('Fit to window', false);
+}
+
+// Resize canvas (actual size, not view)
+function resizeCanvas(factor) {
+    const canvas = document.getElementById('panel-canvas');
+    if (!canvas) return;
+    const currentWidth = canvas.offsetWidth;
+    const currentHeight = canvas.offsetHeight;
+    canvas.style.width = (currentWidth * factor) + 'px';
+    canvas.style.minHeight = (currentHeight * factor) + 'px';
+    setStatus(`Canvas: ${Math.round(currentWidth * factor)}x${Math.round(currentHeight * factor)}px`, false);
+}
+
+// Align panels
+function alignPanels(mode) {
+    const panels = Array.from(document.querySelectorAll('.panel-canvas-item'));
+    if (panels.length < 2) return;
+
+    // Get bounds
+    const bounds = panels.map(p => ({
+        el: p,
+        left: parseFloat(p.style.left) || 0,
+        top: parseFloat(p.style.top) || 0,
+        width: p.offsetWidth,
+        height: p.offsetHeight
+    }));
+
+    let targetValue;
+    switch(mode) {
+        case 'left':
+            targetValue = Math.min(...bounds.map(b => b.left));
+            bounds.forEach(b => { b.el.style.left = targetValue + 'px'; });
+            break;
+        case 'right':
+            targetValue = Math.max(...bounds.map(b => b.left + b.width));
+            bounds.forEach(b => { b.el.style.left = (targetValue - b.width) + 'px'; });
+            break;
+        case 'top':
+            targetValue = Math.min(...bounds.map(b => b.top));
+            bounds.forEach(b => { b.el.style.top = targetValue + 'px'; });
+            break;
+        case 'bottom':
+            targetValue = Math.max(...bounds.map(b => b.top + b.height));
+            bounds.forEach(b => { b.el.style.top = (targetValue - b.height) + 'px'; });
+            break;
+        case 'center-h':
+            targetValue = bounds.reduce((sum, b) => sum + b.left + b.width/2, 0) / bounds.length;
+            bounds.forEach(b => { b.el.style.left = (targetValue - b.width/2) + 'px'; });
+            break;
+        case 'center-v':
+            targetValue = bounds.reduce((sum, b) => sum + b.top + b.height/2, 0) / bounds.length;
+            bounds.forEach(b => { b.el.style.top = (targetValue - b.height/2) + 'px'; });
+            break;
+    }
+
+    // Update layout data
+    updatePanelLayoutFromDOM();
+    setStatus(`Aligned panels: ${mode}`, false);
+}
+
+// Distribute panels evenly
+function distributePanels(direction) {
+    const panels = Array.from(document.querySelectorAll('.panel-canvas-item'));
+    if (panels.length < 3) {
+        setStatus('Need at least 3 panels to distribute', true);
+        return;
+    }
+
+    const bounds = panels.map(p => ({
+        el: p,
+        left: parseFloat(p.style.left) || 0,
+        top: parseFloat(p.style.top) || 0,
+        width: p.offsetWidth,
+        height: p.offsetHeight
+    }));
+
+    if (direction === 'horizontal') {
+        bounds.sort((a, b) => a.left - b.left);
+        const totalWidth = bounds.reduce((sum, b) => sum + b.width, 0);
+        const start = bounds[0].left;
+        const end = bounds[bounds.length - 1].left + bounds[bounds.length - 1].width;
+        const gap = (end - start - totalWidth) / (bounds.length - 1);
+
+        let currentX = start;
+        bounds.forEach(b => {
+            b.el.style.left = currentX + 'px';
+            currentX += b.width + gap;
+        });
+    } else {
+        bounds.sort((a, b) => a.top - b.top);
+        const totalHeight = bounds.reduce((sum, b) => sum + b.height, 0);
+        const start = bounds[0].top;
+        const end = bounds[bounds.length - 1].top + bounds[bounds.length - 1].height;
+        const gap = (end - start - totalHeight) / (bounds.length - 1);
+
+        let currentY = start;
+        bounds.forEach(b => {
+            b.el.style.top = currentY + 'px';
+            currentY += b.height + gap;
+        });
+    }
+
+    updatePanelLayoutFromDOM();
+    setStatus(`Distributed panels: ${direction}`, false);
+}
+
+// Update layout data from DOM positions
+function updatePanelLayoutFromDOM() {
+    document.querySelectorAll('.panel-canvas-item').forEach(panel => {
+        const name = panel.dataset.panelName;
+        if (panelLayoutMm[name]) {
+            panelLayoutMm[name].x_mm = parseFloat(panel.style.left) / canvasScale;
+            panelLayoutMm[name].y_mm = parseFloat(panel.style.top) / canvasScale;
+        }
+    });
+    layoutModified = true;
+    autoSaveLayout();
+}
+
+// Bring selected panel(s) to front
+function bringPanelToFront() {
+    const selectedPanels = document.querySelectorAll('.panel-canvas-item.active');
+    if (selectedPanels.length === 0) return;
+    const maxZ = Math.max(...Array.from(document.querySelectorAll('.panel-canvas-item')).map(p => parseInt(p.style.zIndex) || 0));
+    selectedPanels.forEach((panel, i) => {
+        panel.style.zIndex = maxZ + 1 + i;
+    });
+    setStatus(`Brought ${selectedPanels.length > 1 ? selectedPanels.length + ' panels' : 'panel'} to front`, false);
+}
+
+// Send selected panel(s) to back
+function sendPanelToBack() {
+    const selectedPanels = document.querySelectorAll('.panel-canvas-item.active');
+    if (selectedPanels.length === 0) return;
+    const minZ = Math.min(...Array.from(document.querySelectorAll('.panel-canvas-item')).map(p => parseInt(p.style.zIndex) || 0));
+    selectedPanels.forEach((panel, i) => {
+        panel.style.zIndex = minZ - selectedPanels.length + i;
+    });
+    setStatus(`Sent ${selectedPanels.length > 1 ? selectedPanels.length + ' panels' : 'panel'} to back`, false);
+}
+
+// Deselect all panels
+function deselectAllPanels() {
+    document.querySelectorAll('.panel-canvas-item.active').forEach(p => {
+        p.classList.remove('active');
+    });
+    // Also clear element selection in single-panel view
+    if (typeof selectedElement !== 'undefined') {
+        selectedElement = null;
+    }
+}
+
+// Select all panels
+function selectAllPanels() {
+    const panels = document.querySelectorAll('.panel-canvas-item');
+    panels.forEach(p => p.classList.add('active'));
+    setStatus(`Selected ${panels.length} panels`, false);
+}
+
+// Toggle grid visibility
+let gridVisible = true;
+function toggleGridVisibility() {
+    gridVisible = !gridVisible;
+    const gridElements = document.querySelectorAll('.canvas-grid, .grid-lines, .ruler-marks');
+    gridElements.forEach(el => {
+        el.style.opacity = gridVisible ? '1' : '0';
+    });
+    // Also toggle the canvas background grid if using CSS grid
+    const canvasContainer = document.querySelector('.panel-canvas, #canvas-container');
+    if (canvasContainer) {
+        if (gridVisible) {
+            canvasContainer.classList.remove('hide-grid');
+        } else {
+            canvasContainer.classList.add('hide-grid');
+        }
+    }
+    setStatus(gridVisible ? 'Grid visible' : 'Grid hidden', false);
+}
+
+// Undo/Redo stacks
+let undoStack = [];
+let redoStack = [];
+
+function undoLastChange() {
+    if (undoStack.length === 0) {
+        setStatus('Nothing to undo', true);
+        return;
+    }
+    const state = undoStack.pop();
+    redoStack.push(JSON.stringify(overrides));
+    overrides = JSON.parse(state);
+    updatePreview();
+    setStatus('Undo', false);
+}
+
+function redoLastChange() {
+    if (redoStack.length === 0) {
+        setStatus('Nothing to redo', true);
+        return;
+    }
+    const state = redoStack.pop();
+    undoStack.push(JSON.stringify(overrides));
+    overrides = JSON.parse(state);
+    updatePreview();
+    setStatus('Redo', false);
+}
+
+// Save state for undo before changes
+function saveUndoState() {
+    undoStack.push(JSON.stringify(overrides));
+    if (undoStack.length > 50) undoStack.shift();  // Limit stack size
+    redoStack = [];  // Clear redo on new change
+}
+
+// Delete selected element override
+function deleteSelectedOverride() {
+    if (!selectedElement) return;
+    saveUndoState();
+    if (overrides.element_overrides && overrides.element_overrides[selectedElement]) {
+        delete overrides.element_overrides[selectedElement];
+        updatePreview();
+        setStatus(`Deleted override for ${selectedElement}`, false);
+    }
+}
+
+// Show keyboard shortcuts help
+function showShortcutHelp() {
+    const helpHtml = `
+    <div id="shortcut-modal" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 10000; display: flex; align-items: center; justify-content: center;" onclick="this.remove()">
+        <div style="background: var(--bg-secondary); padding: 24px; border-radius: 8px; max-width: 700px; max-height: 80vh; overflow-y: auto; color: var(--text-primary);" onclick="event.stopPropagation()">
+            <h2 style="margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">⌨️ Keyboard Shortcuts</h2>
+
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                <div>
+                    <h4 style="color: var(--accent-primary);">Basic</h4>
+                    <div><kbd>Ctrl+S</kbd> Save</div>
+                    <div><kbd>Ctrl+Z</kbd> Undo</div>
+                    <div><kbd>Ctrl+Y</kbd> Redo</div>
+                    <div><kbd>Del</kbd> Delete override</div>
+                    <div><kbd>Esc</kbd> Deselect / Cancel</div>
+                    <div><kbd>Ctrl+A</kbd> Select all panels</div>
+
+                    <h4 style="color: var(--accent-primary); margin-top: 16px;">Selection</h4>
+                    <div><kbd>Click</kbd> Select panel</div>
+                    <div><kbd>Ctrl+Click</kbd> Multi-select</div>
+                    <div><kbd>Right-Click</kbd> Context menu</div>
+
+                    <h4 style="color: var(--accent-primary); margin-top: 16px;">Movement</h4>
+                    <div><kbd>↑↓←→</kbd> Move panel 1mm</div>
+                    <div><kbd>Shift+↑↓←→</kbd> Move panel 5mm</div>
+                </div>
+
+                <div>
+                    <h4 style="color: var(--accent-primary);">View</h4>
+                    <div><kbd>+</kbd> Zoom in</div>
+                    <div><kbd>-</kbd> Zoom out</div>
+                    <div><kbd>0</kbd> Fit to window</div>
+                    <div><kbd>G</kbd> Toggle grid</div>
+                    <div><kbd>Ctrl++</kbd> Increase canvas</div>
+                    <div><kbd>Ctrl+-</kbd> Decrease canvas</div>
+
+                    <h4 style="color: var(--accent-primary); margin-top: 16px;">Arrange</h4>
+                    <div><kbd>Alt+F</kbd> Bring to front</div>
+                    <div><kbd>Alt+B</kbd> Send to back</div>
+                </div>
+            </div>
+
+            <h4 style="color: var(--accent-primary); margin-top: 16px;">Alignment (Alt+A → ...)</h4>
+            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
+                <div><kbd>L</kbd> Left</div>
+                <div><kbd>R</kbd> Right</div>
+                <div><kbd>T</kbd> Top</div>
+                <div><kbd>B</kbd> Bottom</div>
+                <div><kbd>C</kbd> Center H</div>
+                <div><kbd>M</kbd> Center V</div>
+                <div><kbd>H</kbd> Distribute H</div>
+                <div><kbd>V</kbd> Distribute V</div>
+            </div>
+
+            <h4 style="color: var(--accent-primary); margin-top: 16px;">Axis Alignment (Alt+Shift+A → ...)</h4>
+            <p style="font-size: 0.85em; color: var(--text-muted); margin-top: 4px;">Aligns panels by plot axis edges, not bounding boxes</p>
+            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
+                <div><kbd>L</kbd> Y-axis (left)</div>
+                <div><kbd>R</kbd> Right edge</div>
+                <div><kbd>T</kbd> Top edge</div>
+                <div><kbd>B</kbd> X-axis (bottom)</div>
+                <div><kbd>C</kbd> Axes center H</div>
+                <div><kbd>M</kbd> Axes center V</div>
+                <div><kbd>S</kbd> Stack vertically</div>
+            </div>
+
+            <div style="margin-top: 20px; text-align: center; color: var(--text-muted);">
+                Press <kbd>?</kbd> or <kbd>F1</kbd> anytime to show this help
+            </div>
+        </div>
+    </div>`;
+    document.body.insertAdjacentHTML('beforeend', helpHtml);
+}
+
+// Add kbd styling
+const kbdStyle = document.createElement('style');
+kbdStyle.textContent = `
+    kbd {
+        background: var(--bg-tertiary, #333);
+        border: 1px solid var(--border-color, #555);
+        border-radius: 3px;
+        padding: 2px 6px;
+        font-family: monospace;
+        font-size: 0.85em;
+        margin-right: 8px;
+    }
+`;
+document.head.appendChild(kbdStyle);
+
+// =============================================================================
+// Right-Click Context Menu
+// =============================================================================
+let contextMenu = null;
+
+function showContextMenu(e, panelName) {
+    e.preventDefault();
+    hideContextMenu();
+
+    const selectedCount = document.querySelectorAll('.panel-canvas-item.active').length;
+    const hasSelection = selectedCount > 0;
+
+    const menu = document.createElement('div');
+    menu.id = 'canvas-context-menu';
+    menu.className = 'context-menu';
+    menu.innerHTML = `
+        <div class="context-menu-item" onclick="selectAllPanels(); hideContextMenu();">
+            <span class="context-menu-icon">⬚</span> Select All <span class="context-menu-shortcut">Ctrl+A</span>
+        </div>
+        <div class="context-menu-item ${!hasSelection ? 'disabled' : ''}" onclick="${hasSelection ? 'deselectAllPanels(); hideContextMenu();' : ''}">
+            <span class="context-menu-icon">○</span> Deselect All <span class="context-menu-shortcut">Esc</span>
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item ${!hasSelection ? 'disabled' : ''}" onclick="${hasSelection ? 'bringPanelToFront(); hideContextMenu();' : ''}">
+            <span class="context-menu-icon">↑</span> Bring to Front <span class="context-menu-shortcut">Alt+F</span>
+        </div>
+        <div class="context-menu-item ${!hasSelection ? 'disabled' : ''}" onclick="${hasSelection ? 'sendPanelToBack(); hideContextMenu();' : ''}">
+            <span class="context-menu-icon">↓</span> Send to Back <span class="context-menu-shortcut">Alt+B</span>
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-submenu">
+            <div class="context-menu-item">
+                <span class="context-menu-icon">≡</span> Align <span class="context-menu-arrow">▶</span>
+            </div>
+            <div class="context-submenu">
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('left'); hideContextMenu();" : ''}">Left</div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('right'); hideContextMenu();" : ''}">Right</div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('top'); hideContextMenu();" : ''}">Top</div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('bottom'); hideContextMenu();" : ''}">Bottom</div>
+                <div class="context-menu-divider"></div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('center-h'); hideContextMenu();" : ''}">Center H</div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanels('center-v'); hideContextMenu();" : ''}">Center V</div>
+            </div>
+        </div>
+        <div class="context-menu-submenu">
+            <div class="context-menu-item">
+                <span class="context-menu-icon">⊞</span> Align by Axis <span class="context-menu-arrow">▶</span>
+            </div>
+            <div class="context-submenu">
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanelsByAxis('left'); hideContextMenu();" : ''}">Y-Axis (Left)</div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "alignPanelsByAxis('bottom'); hideContextMenu();" : ''}">X-Axis (Bottom)</div>
+                <div class="context-menu-divider"></div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "stackPanelsVertically(); hideContextMenu();" : ''}">Stack Vertically</div>
+            </div>
+        </div>
+        <div class="context-menu-submenu">
+            <div class="context-menu-item">
+                <span class="context-menu-icon">⇔</span> Distribute <span class="context-menu-arrow">▶</span>
+            </div>
+            <div class="context-submenu">
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "distributePanels('horizontal'); hideContextMenu();" : ''}">Horizontal</div>
+                <div class="context-menu-item ${selectedCount < 2 ? 'disabled' : ''}" onclick="${selectedCount >= 2 ? "distributePanels('vertical'); hideContextMenu();" : ''}">Vertical</div>
+            </div>
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" onclick="toggleGridVisibility(); hideContextMenu();">
+            <span class="context-menu-icon">⊞</span> Toggle Grid <span class="context-menu-shortcut">G</span>
+        </div>
+        <div class="context-menu-divider"></div>
+        <div class="context-menu-item" onclick="showShortcutHelp(); hideContextMenu();">
+            <span class="context-menu-icon">⌨</span> Keyboard Shortcuts <span class="context-menu-shortcut">?</span>
+        </div>
+    `;
+
+    // Position menu at cursor
+    menu.style.left = e.clientX + 'px';
+    menu.style.top = e.clientY + 'px';
+
+    document.body.appendChild(menu);
+    contextMenu = menu;
+
+    // Adjust position if menu goes off screen
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+        menu.style.left = (window.innerWidth - rect.width - 5) + 'px';
+    }
+    if (rect.bottom > window.innerHeight) {
+        menu.style.top = (window.innerHeight - rect.height - 5) + 'px';
+    }
+}
+
+function hideContextMenu() {
+    if (contextMenu) {
+        contextMenu.remove();
+        contextMenu = null;
+    }
+}
+
+// Close context menu on click outside
+document.addEventListener('click', (e) => {
+    if (contextMenu && !contextMenu.contains(e.target)) {
+        hideContextMenu();
+    }
+});
+
+// Close context menu on Escape
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && contextMenu) {
+        hideContextMenu();
+    }
+});
+
+// Attach context menu to canvas
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('panel-canvas');
+    if (canvas) {
+        canvas.addEventListener('contextmenu', (e) => {
+            // Check if right-click is on a panel
+            const panel = e.target.closest('.panel-canvas-item');
+            const panelName = panel ? panel.dataset.panelName : null;
+
+            // If clicking on a panel that's not selected, select it
+            if (panel && !panel.classList.contains('active')) {
+                if (!e.ctrlKey && !e.metaKey) {
+                    deselectAllPanels();
+                }
+                panel.classList.add('active');
+            }
+
+            showContextMenu(e, panelName);
+        });
     }
 });