nodebb-plugin-pdf-secure 1.2.4 → 1.2.5

package/static/viewer.html

@@ -1330,813 +1330,823 @@
     </div>
 
     <script>
-        pdfjsLib.GlobalWorkerOptions.workerSrc = '';
-
-        // State
-        let pdfDoc = null;
-        let pdfViewer = null;
-        let annotationMode = false;
-        let currentTool = null; // null, 'pen', 'highlight', 'eraser'
-        let currentColor = '#e81224';
-        let currentWidth = 2;
-        let isDrawing = false;
-        let currentPath = null;
-        let currentDrawingPage = null;
-
-        // Annotation persistence - stores SVG innerHTML per page
-        const annotationsStore = new Map();
-
-        // Store base dimensions (scale=1.0) for each page - ensures consistent coordinates
-        const pageBaseDimensions = new Map();
-
-        // Current SVG reference for drawing
-        let currentSvg = null;
-
-        // Elements
-        const container = document.getElementById('viewerContainer');
-        const uploadOverlay = document.getElementById('uploadOverlay');
-        const fileInput = document.getElementById('fileInput');
-        const sidebar = document.getElementById('sidebar');
-        const thumbnailContainer = document.getElementById('thumbnailContainer');
-
-        // Initialize PDFViewer
-        const eventBus = new pdfjsViewer.EventBus();
-        const linkService = new pdfjsViewer.PDFLinkService({ eventBus });
-
-        pdfViewer = new pdfjsViewer.PDFViewer({
-            container: container,
-            eventBus: eventBus,
-            linkService: linkService,
-            removePageBorders: true,
-            textLayerMode: 2
-        });
-        linkService.setViewer(pdfViewer);
-
-        // File Handling
-        document.getElementById('dropzone').onclick = () => fileInput.click();
-
-        fileInput.onchange = async (e) => {
-            const file = e.target.files[0];
-            if (file) await loadPDF(file);
-        };
-
-        uploadOverlay.ondragover = (e) => e.preventDefault();
-        uploadOverlay.ondrop = async (e) => {
-            e.preventDefault();
-            const file = e.dataTransfer.files[0];
-            if (file?.type === 'application/pdf') await loadPDF(file);
-        };
-
-        async function loadPDF(file) {
-            uploadOverlay.classList.add('hidden');
-
-            const data = await file.arrayBuffer();
-            pdfDoc = await pdfjsLib.getDocument({ data }).promise;
-
-            pdfViewer.setDocument(pdfDoc);
-            linkService.setDocument(pdfDoc);
-
-            ['zoomIn', 'zoomOut', 'pageInput', 'rotateLeft', 'rotateRight'].forEach(id => {
-                document.getElementById(id).disabled = false;
+        // IIFE to prevent global access to pdfDoc, pdfViewer
+        (function () {
+            'use strict';
+
+            pdfjsLib.GlobalWorkerOptions.workerSrc = '';
+
+            // State - now private, not accessible from console
+            let pdfDoc = null;
+            let pdfViewer = null;
+            let annotationMode = false;
+            let currentTool = null; // null, 'pen', 'highlight', 'eraser'
+            let currentColor = '#e81224';
+            let currentWidth = 2;
+            let isDrawing = false;
+            let currentPath = null;
+            let currentDrawingPage = null;
+
+            // Annotation persistence - stores SVG innerHTML per page
+            const annotationsStore = new Map();
+
+            // Store base dimensions (scale=1.0) for each page - ensures consistent coordinates
+            const pageBaseDimensions = new Map();
+
+            // Current SVG reference for drawing
+            let currentSvg = null;
+
+            // Elements
+            const container = document.getElementById('viewerContainer');
+            const uploadOverlay = document.getElementById('uploadOverlay');
+            const fileInput = document.getElementById('fileInput');
+            const sidebar = document.getElementById('sidebar');
+            const thumbnailContainer = document.getElementById('thumbnailContainer');
+
+            // Initialize PDFViewer
+            const eventBus = new pdfjsViewer.EventBus();
+            const linkService = new pdfjsViewer.PDFLinkService({ eventBus });
+
+            pdfViewer = new pdfjsViewer.PDFViewer({
+                container: container,
+                eventBus: eventBus,
+                linkService: linkService,
+                removePageBorders: true,
+                textLayerMode: 2
+            });
+            linkService.setViewer(pdfViewer);
+
+            // Track first page render for queue system
+            let firstPageRendered = false;
+            eventBus.on('pagerendered', function (evt) {
+                if (!firstPageRendered && evt.pageNumber === 1) {
+                    firstPageRendered = true;
+                    // Notify parent that PDF is fully rendered (for queue system)
+                    if (window.parent && window.parent !== window) {
+                        const config = window.PDF_SECURE_CONFIG || {};
+                        window.parent.postMessage({ type: 'pdf-secure-ready', filename: config.filename }, '*');
+                        console.log('[PDF-Secure] First page rendered, notifying parent');
+                    }
+                }
             });
 
-            // Generate thumbnails
-            generateThumbnails();
-        }
+            // File Handling
+            document.getElementById('dropzone').onclick = () => fileInput.click();
 
-        // Load PDF from ArrayBuffer (for secure nonce-based loading)
-        async function loadPDFFromBuffer(arrayBuffer) {
-            uploadOverlay.classList.add('hidden');
+            fileInput.onchange = async (e) => {
+                const file = e.target.files[0];
+                if (file) await loadPDF(file);
+            };
 
-            pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+            uploadOverlay.ondragover = (e) => e.preventDefault();
+            uploadOverlay.ondrop = async (e) => {
+                e.preventDefault();
+                const file = e.dataTransfer.files[0];
+                if (file?.type === 'application/pdf') await loadPDF(file);
+            };
 
-            pdfViewer.setDocument(pdfDoc);
-            linkService.setDocument(pdfDoc);
+            async function loadPDF(file) {
+                uploadOverlay.classList.add('hidden');
 
-            ['zoomIn', 'zoomOut', 'pageInput', 'rotateLeft', 'rotateRight'].forEach(id => {
-                document.getElementById(id).disabled = false;
-            });
+                const data = await file.arrayBuffer();
+                pdfDoc = await pdfjsLib.getDocument({ data }).promise;
 
-            generateThumbnails();
-        }
+                pdfViewer.setDocument(pdfDoc);
+                linkService.setDocument(pdfDoc);
 
-        // Partial XOR decoder - must match backend encoding
-        function partialXorDecode(encodedData, keyBase64) {
-            const key = Uint8Array.from(atob(keyBase64), c => c.charCodeAt(0));
-            const data = new Uint8Array(encodedData);
-            const keyLen = key.length;
+                ['zoomIn', 'zoomOut', 'pageInput', 'rotateLeft', 'rotateRight'].forEach(id => {
+                    document.getElementById(id).disabled = false;
+                });
 
-            // Decrypt first 10KB fully
-            const fullDecryptLen = Math.min(10240, data.length);
-            for (let i = 0; i < fullDecryptLen; i++) {
-                data[i] = data[i] ^ key[i % keyLen];
+                // Thumbnails will be generated on-demand when sidebar opens
             }
 
-            // Decrypt every 50th byte after that
-            for (let i = fullDecryptLen; i < data.length; i += 50) {
-                data[i] = data[i] ^ key[i % keyLen];
+            // Load PDF from ArrayBuffer (for secure nonce-based loading)
+            async function loadPDFFromBuffer(arrayBuffer) {
+                uploadOverlay.classList.add('hidden');
+
+                pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+
+                pdfViewer.setDocument(pdfDoc);
+                linkService.setDocument(pdfDoc);
+
+                ['zoomIn', 'zoomOut', 'pageInput', 'rotateLeft', 'rotateRight'].forEach(id => {
+                    document.getElementById(id).disabled = false;
+                });
+
+                // Thumbnails will be generated on-demand when sidebar opens
             }
 
-            return data.buffer;
-        }
+            // Partial XOR decoder - must match backend encoding
+            function partialXorDecode(encodedData, keyBase64) {
+                const key = Uint8Array.from(atob(keyBase64), c => c.charCodeAt(0));
+                const data = new Uint8Array(encodedData);
+                const keyLen = key.length;
+
+                // Decrypt first 10KB fully
+                const fullDecryptLen = Math.min(10240, data.length);
+                for (let i = 0; i < fullDecryptLen; i++) {
+                    data[i] = data[i] ^ key[i % keyLen];
+                }
+
+                // Decrypt every 50th byte after that
+                for (let i = fullDecryptLen; i < data.length; i += 50) {
+                    data[i] = data[i] ^ key[i % keyLen];
+                }
 
-        // Auto-load PDF if config is present (injected by NodeBB plugin)
-        async function autoLoadSecurePDF() {
-            if (!window.PDF_SECURE_CONFIG || !window.PDF_SECURE_CONFIG.filename) {
-                console.log('[PDF-Secure] No config found, showing file picker');
-                return;
+                return data.buffer;
             }
 
-            const config = window.PDF_SECURE_CONFIG;
-            console.log('[PDF-Secure] Auto-loading:', config.filename);
+            // Auto-load PDF if config is present (injected by NodeBB plugin)
+            async function autoLoadSecurePDF() {
+                if (!window.PDF_SECURE_CONFIG || !window.PDF_SECURE_CONFIG.filename) {
+                    console.log('[PDF-Secure] No config found, showing file picker');
+                    return;
+                }
+
+                const config = window.PDF_SECURE_CONFIG;
+                console.log('[PDF-Secure] Auto-loading:', config.filename);
 
-            // Show loading state
-            const dropzone = document.getElementById('dropzone');
-            if (dropzone) {
-                dropzone.innerHTML = `
+                // Show loading state
+                const dropzone = document.getElementById('dropzone');
+                if (dropzone) {
+                    dropzone.innerHTML = `
                     <svg viewBox="0 0 24 24" class="spin">
                         <path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" />
                     </svg>
                     <h2>PDF Yükleniyor...</h2>
                     <p>${config.filename}</p>
                 `;
-            }
+                }
 
-            try {
-                // Step 1: Get nonce
-                const nonceUrl = config.relativePath + '/api/v3/plugins/pdf-secure/nonce?file=' + encodeURIComponent(config.filename);
-                const nonceRes = await fetch(nonceUrl, {
-                    credentials: 'same-origin',
-                    headers: { 'x-csrf-token': config.csrfToken }
-                });
+                try {
+                    // Nonce and key are embedded in HTML config (not fetched from API)
+                    // This improves security - key is ONLY in HTML source, not in any network response
+                    const nonce = config.nonce;
+                    const xorKey = config.dk;
 
-                if (!nonceRes.ok) {
-                    throw new Error(nonceRes.status === 401 ? 'Giriş yapmanız gerekiyor' : 'Nonce alınamadı');
-                }
+                    // Fetch encrypted PDF binary
+                    const pdfUrl = config.relativePath + '/api/v3/plugins/pdf-secure/pdf-data?nonce=' + encodeURIComponent(nonce);
+                    const pdfRes = await fetch(pdfUrl, { credentials: 'same-origin' });
 
-                const nonceData = await nonceRes.json();
-                const nonce = nonceData.response.nonce;
+                    if (!pdfRes.ok) {
+                        throw new Error('PDF yüklenemedi (' + pdfRes.status + ')');
+                    }
 
-                // Step 2: Fetch encrypted PDF binary
-                const pdfUrl = config.relativePath + '/api/v3/plugins/pdf-secure/pdf-data?nonce=' + encodeURIComponent(nonce);
-                const pdfRes = await fetch(pdfUrl, { credentials: 'same-origin' });
+                    const encodedBuffer = await pdfRes.arrayBuffer();
 
-                if (!pdfRes.ok) {
-                    throw new Error('PDF yüklenemedi (' + pdfRes.status + ')');
-                }
+                    console.log('[PDF-Secure] Encrypted data received:', encodedBuffer.byteLength, 'bytes');
 
-                // Get XOR key from header
-                const xorKey = pdfRes.headers.get('X-PDF-Key');
-                const encodedBuffer = await pdfRes.arrayBuffer();
+                    // Step 3: Decode XOR encrypted data
+                    let pdfBuffer;
+                    if (xorKey) {
+                        console.log('[PDF-Secure] Decoding XOR encrypted data...');
+                        pdfBuffer = partialXorDecode(encodedBuffer, xorKey);
+                    } else {
+                        // Fallback for backward compatibility
+                        pdfBuffer = encodedBuffer;
+                    }
 
-                console.log('[PDF-Secure] Encrypted data received:', encodedBuffer.byteLength, 'bytes');
+                    console.log('[PDF-Secure] PDF decoded successfully');
 
-                // Step 3: Decode XOR encrypted data
-                let pdfBuffer;
-                if (xorKey) {
-                    console.log('[PDF-Secure] Decoding XOR encrypted data...');
-                    pdfBuffer = partialXorDecode(encodedBuffer, xorKey);
-                } else {
-                    // Fallback for backward compatibility
-                    pdfBuffer = encodedBuffer;
-                }
+                    // Step 4: Load into viewer
+                    await loadPDFFromBuffer(pdfBuffer);
 
-                console.log('[PDF-Secure] PDF decoded successfully');
+                    // Step 5: Moved to pagerendered event for proper timing
 
-                // Step 4: Load into viewer
-                await loadPDFFromBuffer(pdfBuffer);
+                    // Step 6: Security - clear references to prevent extraction
+                    pdfBuffer = null;
 
-                // Step 5: Notify parent that PDF is fully loaded (for queue system)
-                if (window.parent && window.parent !== window) {
-                    window.parent.postMessage({ type: 'pdf-secure-ready', filename: config.filename }, '*');
-                }
+                    // Security: Delete config containing sensitive data (nonce, key)
+                    delete window.PDF_SECURE_CONFIG;
 
-                // Step 6: Security - clear references to prevent extraction
-                pdfBuffer = null;
+                    // Security: Block dangerous PDF.js methods
+                    if (pdfDoc) {
+                        pdfDoc.getData = function () {
+                            console.warn('[Security] getData() is blocked');
+                            return Promise.reject(new Error('Access denied'));
+                        };
+                        pdfDoc.saveDocument = function () {
+                            console.warn('[Security] saveDocument() is blocked');
+                            return Promise.reject(new Error('Access denied'));
+                        };
+                    }
 
-                console.log('[PDF-Secure] PDF fully loaded and ready');
+                    console.log('[PDF-Secure] PDF fully loaded and ready');
 
-            } catch (err) {
-                console.error('[PDF-Secure] Auto-load error:', err);
-                if (dropzone) {
-                    dropzone.innerHTML = `
+                } catch (err) {
+                    console.error('[PDF-Secure] Auto-load error:', err);
+                    if (dropzone) {
+                        dropzone.innerHTML = `
                         <svg viewBox="0 0 24 24" style="fill: #e81224;">
                             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                         </svg>
                         <h2>Hata</h2>
                         <p>${err.message}</p>
                     `;
+                    }
                 }
             }
-        }
 
-        // Run auto-load on page ready
-        autoLoadSecurePDF();
+            // Run auto-load on page ready
+            autoLoadSecurePDF();
 
-        // Generate Thumbnails
-        async function generateThumbnails() {
-            thumbnailContainer.innerHTML = '';
+            // Generate Thumbnails (deferred - only when sidebar opens)
+            let thumbnailsGenerated = false;
+            async function generateThumbnails() {
+                if (thumbnailsGenerated) return;
+                thumbnailsGenerated = true;
+                thumbnailContainer.innerHTML = '';
 
-            for (let i = 1; i <= pdfDoc.numPages; i++) {
-                const page = await pdfDoc.getPage(i);
-                const viewport = page.getViewport({ scale: 0.2 });
+                for (let i = 1; i <= pdfDoc.numPages; i++) {
+                    const page = await pdfDoc.getPage(i);
+                    const viewport = page.getViewport({ scale: 0.2 });
 
-                const canvas = document.createElement('canvas');
-                canvas.width = viewport.width;
-                canvas.height = viewport.height;
+                    const canvas = document.createElement('canvas');
+                    canvas.width = viewport.width;
+                    canvas.height = viewport.height;
 
-                await page.render({
-                    canvasContext: canvas.getContext('2d'),
-                    viewport: viewport
-                }).promise;
+                    await page.render({
+                        canvasContext: canvas.getContext('2d'),
+                        viewport: viewport
+                    }).promise;
 
-                const thumb = document.createElement('div');
-                thumb.className = 'thumbnail' + (i === 1 ? ' active' : '');
-                thumb.dataset.page = i;
-                thumb.innerHTML = `<div class="thumbnailNum">${i}</div>`;
-                thumb.insertBefore(canvas, thumb.firstChild);
+                    const thumb = document.createElement('div');
+                    thumb.className = 'thumbnail' + (i === 1 ? ' active' : '');
+                    thumb.dataset.page = i;
+                    thumb.innerHTML = `<div class="thumbnailNum">${i}</div>`;
+                    thumb.insertBefore(canvas, thumb.firstChild);
 
-                thumb.onclick = () => {
-                    pdfViewer.currentPageNumber = i;
-                    document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
-                    thumb.classList.add('active');
-                };
+                    thumb.onclick = () => {
+                        pdfViewer.currentPageNumber = i;
+                        document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
+                        thumb.classList.add('active');
+                    };
 
-                thumbnailContainer.appendChild(thumb);
+                    thumbnailContainer.appendChild(thumb);
+                }
             }
-        }
 
-        // Events
-        eventBus.on('pagesinit', () => {
-            pdfViewer.currentScaleValue = 'page-width';
-            document.getElementById('pageCount').textContent = `/ ${pdfViewer.pagesCount}`;
-        });
+            // Events
+            eventBus.on('pagesinit', () => {
+                pdfViewer.currentScaleValue = 'page-width';
+                document.getElementById('pageCount').textContent = `/ ${pdfViewer.pagesCount}`;
+            });
+
+            eventBus.on('pagechanging', (evt) => {
+                document.getElementById('pageInput').value = evt.pageNumber;
+                // Update active thumbnail
+                document.querySelectorAll('.thumbnail').forEach(t => {
+                    t.classList.toggle('active', parseInt(t.dataset.page) === evt.pageNumber);
+                });
+            });
 
-        eventBus.on('pagechanging', (evt) => {
-            document.getElementById('pageInput').value = evt.pageNumber;
-            // Update active thumbnail
-            document.querySelectorAll('.thumbnail').forEach(t => {
-                t.classList.toggle('active', parseInt(t.dataset.page) === evt.pageNumber);
+            eventBus.on('pagerendered', (evt) => {
+                if (annotationMode) injectAnnotationLayer(evt.pageNumber);
             });
-        });
 
-        eventBus.on('pagerendered', (evt) => {
-            if (annotationMode) injectAnnotationLayer(evt.pageNumber);
-        });
+            // Page Navigation
+            document.getElementById('pageInput').onchange = (e) => {
+                const num = parseInt(e.target.value);
+                if (num >= 1 && num <= pdfViewer.pagesCount) {
+                    pdfViewer.currentPageNumber = num;
+                }
+            };
+
+            // Zoom
+            document.getElementById('zoomIn').onclick = () => pdfViewer.currentScale += 0.25;
+            document.getElementById('zoomOut').onclick = () => pdfViewer.currentScale -= 0.25;
 
-        // Page Navigation
-        document.getElementById('pageInput').onchange = (e) => {
-            const num = parseInt(e.target.value);
-            if (num >= 1 && num <= pdfViewer.pagesCount) {
-                pdfViewer.currentPageNumber = num;
-            }
-        };
-
-        // Zoom
-        document.getElementById('zoomIn').onclick = () => pdfViewer.currentScale += 0.25;
-        document.getElementById('zoomOut').onclick = () => pdfViewer.currentScale -= 0.25;
-
-        // Sepia Reading Mode
-        let sepiaMode = false;
-        document.getElementById('sepiaBtn').onclick = () => {
-            sepiaMode = !sepiaMode;
-            document.getElementById('viewer').classList.toggle('sepia', sepiaMode);
-            container.classList.toggle('sepia', sepiaMode);
-            document.getElementById('sepiaBtn').classList.toggle('active', sepiaMode);
-        };
-
-        // Page Rotation
-        const pageRotations = new Map(); // Store rotation per page
-
-        function rotatePage(delta) {
-            const pageNum = pdfViewer.currentPageNumber;
-            const currentRotation = pageRotations.get(pageNum) || 0;
-            const newRotation = (currentRotation + delta + 360) % 360;
-            pageRotations.set(pageNum, newRotation);
-
-            // Apply rotation only to the canvas (not the whole page div)
-            const pageView = pdfViewer.getPageView(pageNum - 1);
-            if (pageView?.div) {
-                const canvas = pageView.div.querySelector('canvas');
-                const textLayer = pageView.div.querySelector('.textLayer');
-                const annotationLayer = pageView.div.querySelector('.annotationLayer');
-
-                if (canvas) {
-                    canvas.style.transform = `rotate(${newRotation}deg)`;
-                    canvas.style.transformOrigin = 'center center';
-                }
-                if (textLayer) {
-                    textLayer.style.transform = `rotate(${newRotation}deg)`;
-                    textLayer.style.transformOrigin = 'center center';
-                }
-                if (annotationLayer) {
-                    annotationLayer.style.transform = `rotate(${newRotation}deg)`;
-                    annotationLayer.style.transformOrigin = 'center center';
-                }
-
-                // Also rotate text highlight container
-                const textHighlightContainer = pageView.div.querySelector('.textHighlightContainer');
-                if (textHighlightContainer) {
-                    textHighlightContainer.style.transform = `rotate(${newRotation}deg)`;
-                    textHighlightContainer.style.transformOrigin = 'center center';
+            // Sidebar toggle (deferred thumbnail generation)
+            const sidebarEl = document.getElementById('sidebar');
+            const sidebarBtnEl = document.getElementById('sidebarBtn');
+            const closeSidebarBtn = document.getElementById('closeSidebar');
+
+            sidebarBtnEl.onclick = () => {
+                const isOpening = !sidebarEl.classList.contains('open');
+                sidebarEl.classList.toggle('open');
+                sidebarBtnEl.classList.toggle('active');
+
+                // Generate thumbnails on first open (deferred loading)
+                if (isOpening && pdfDoc) {
+                    generateThumbnails();
                 }
-            }
-        }
+            };
+
+            closeSidebarBtn.onclick = () => {
+                sidebarEl.classList.remove('open');
+                sidebarBtnEl.classList.remove('active');
+            };
+
+            // Sepia Reading Mode
+            let sepiaMode = false;
+            document.getElementById('sepiaBtn').onclick = () => {
+                sepiaMode = !sepiaMode;
+                document.getElementById('viewer').classList.toggle('sepia', sepiaMode);
+                container.classList.toggle('sepia', sepiaMode);
+                document.getElementById('sepiaBtn').classList.toggle('active', sepiaMode);
+            };
+
+            // Page Rotation
+            const pageRotations = new Map(); // Store rotation per page
+
+            function rotatePage(delta) {
+                const pageNum = pdfViewer.currentPageNumber;
+                const currentRotation = pageRotations.get(pageNum) || 0;
+                const newRotation = (currentRotation + delta + 360) % 360;
+                pageRotations.set(pageNum, newRotation);
+
+                // Apply rotation only to the canvas (not the whole page div)
+                const pageView = pdfViewer.getPageView(pageNum - 1);
+                if (pageView?.div) {
+                    const canvas = pageView.div.querySelector('canvas');
+                    const textLayer = pageView.div.querySelector('.textLayer');
+                    const annotationLayer = pageView.div.querySelector('.annotationLayer');
+
+                    if (canvas) {
+                        canvas.style.transform = `rotate(${newRotation}deg)`;
+                        canvas.style.transformOrigin = 'center center';
+                    }
+                    if (textLayer) {
+                        textLayer.style.transform = `rotate(${newRotation}deg)`;
+                        textLayer.style.transformOrigin = 'center center';
+                    }
+                    if (annotationLayer) {
+                        annotationLayer.style.transform = `rotate(${newRotation}deg)`;
+                        annotationLayer.style.transformOrigin = 'center center';
+                    }
 
-        document.getElementById('rotateLeft').onclick = () => rotatePage(-90);
-        document.getElementById('rotateRight').onclick = () => rotatePage(90);
-
-        // Sidebar Toggle
-        document.getElementById('sidebarBtn').onclick = () => {
-            sidebar.classList.toggle('open');
-            container.classList.toggle('withSidebar', sidebar.classList.contains('open'));
-            document.getElementById('sidebarBtn').classList.toggle('active', sidebar.classList.contains('open'));
-        };
-
-        document.getElementById('closeSidebar').onclick = () => {
-            sidebar.classList.remove('open');
-            container.classList.remove('withSidebar');
-            document.getElementById('sidebarBtn').classList.remove('active');
-        };
-
-
-        // Tool settings - separate for each tool
-        let highlightColor = '#fff100';
-        let highlightWidth = 4;
-        let drawColor = '#e81224';
-        let drawWidth = 2;
-        let shapeColor = '#e81224';
-        let shapeWidth = 2;
-        let currentShape = 'rectangle'; // rectangle, circle, line, arrow
-
-        // Dropdown Panel Logic
-        const highlightDropdown = document.getElementById('highlightDropdown');
-        const drawDropdown = document.getElementById('drawDropdown');
-        const shapesDropdown = document.getElementById('shapesDropdown');
-        const highlightWrapper = document.getElementById('highlightWrapper');
-        const drawWrapper = document.getElementById('drawWrapper');
-        const shapesWrapper = document.getElementById('shapesWrapper');
-
-        function closeAllDropdowns() {
-            highlightDropdown.classList.remove('visible');
-            drawDropdown.classList.remove('visible');
-            shapesDropdown.classList.remove('visible');
-        }
-
-        function toggleDropdown(dropdown, e) {
-            e.stopPropagation();
-            const isVisible = dropdown.classList.contains('visible');
-            closeAllDropdowns();
-            if (!isVisible) {
-                dropdown.classList.add('visible');
+                    // Also rotate text highlight container
+                    const textHighlightContainer = pageView.div.querySelector('.textHighlightContainer');
+                    if (textHighlightContainer) {
+                        textHighlightContainer.style.transform = `rotate(${newRotation}deg)`;
+                        textHighlightContainer.style.transformOrigin = 'center center';
+                    }
+                }
             }
-        }
 
-        // Arrow buttons toggle dropdowns
-        document.getElementById('highlightArrow').onclick = (e) => toggleDropdown(highlightDropdown, e);
-        document.getElementById('drawArrow').onclick = (e) => toggleDropdown(drawDropdown, e);
-        document.getElementById('shapesArrow').onclick = (e) => toggleDropdown(shapesDropdown, e);
+            document.getElementById('rotateLeft').onclick = () => rotatePage(-90);
+            document.getElementById('rotateRight').onclick = () => rotatePage(90);
+
+            // Sidebar Toggle
+            document.getElementById('sidebarBtn').onclick = () => {
+                sidebar.classList.toggle('open');
+                container.classList.toggle('withSidebar', sidebar.classList.contains('open'));
+                document.getElementById('sidebarBtn').classList.toggle('active', sidebar.classList.contains('open'));
+            };
+
+            document.getElementById('closeSidebar').onclick = () => {
+                sidebar.classList.remove('open');
+                container.classList.remove('withSidebar');
+                document.getElementById('sidebarBtn').classList.remove('active');
+            };
+
+
+            // Tool settings - separate for each tool
+            let highlightColor = '#fff100';
+            let highlightWidth = 4;
+            let drawColor = '#e81224';
+            let drawWidth = 2;
+            let shapeColor = '#e81224';
+            let shapeWidth = 2;
+            let currentShape = 'rectangle'; // rectangle, circle, line, arrow
+
+            // Dropdown Panel Logic
+            const highlightDropdown = document.getElementById('highlightDropdown');
+            const drawDropdown = document.getElementById('drawDropdown');
+            const shapesDropdown = document.getElementById('shapesDropdown');
+            const highlightWrapper = document.getElementById('highlightWrapper');
+            const drawWrapper = document.getElementById('drawWrapper');
+            const shapesWrapper = document.getElementById('shapesWrapper');
 
-        // Close dropdowns when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('.toolDropdown') && !e.target.closest('.dropdownArrow')) {
+            function closeAllDropdowns() {
+                highlightDropdown.classList.remove('visible');
+                drawDropdown.classList.remove('visible');
+                shapesDropdown.classList.remove('visible');
+            }
+
+            function toggleDropdown(dropdown, e) {
+                e.stopPropagation();
+                const isVisible = dropdown.classList.contains('visible');
                 closeAllDropdowns();
+                if (!isVisible) {
+                    dropdown.classList.add('visible');
+                }
             }
-        });
-
-        // Prevent dropdown from closing when clicking inside
-        highlightDropdown.onclick = (e) => e.stopPropagation();
-        drawDropdown.onclick = (e) => e.stopPropagation();
-        shapesDropdown.onclick = (e) => e.stopPropagation();
-
-        // Drawing Tools - Toggle Behavior
-        async function setTool(tool) {
-            // If same tool clicked again, deactivate
-            if (currentTool === tool) {
-                currentTool = null;
-                annotationMode = false;
-                document.querySelectorAll('.annotationLayer').forEach(el => el.classList.remove('active'));
-            } else {
-                currentTool = tool;
-                annotationMode = true;
-
-                // Set color and width based on tool
-                if (tool === 'highlight') {
-                    currentColor = highlightColor;
-                    currentWidth = highlightWidth;
-                } else if (tool === 'pen') {
-                    currentColor = drawColor;
-                    currentWidth = drawWidth;
-                } else if (tool === 'shape') {
-                    currentColor = shapeColor;
-                    currentWidth = shapeWidth;
-                }
-
-                // BUGFIX: Save current annotation state BEFORE re-injecting layers
-                // This prevents deleted content from being restored when switching tools
-                for (let i = 0; i < pdfViewer.pagesCount; i++) {
-                    const pageView = pdfViewer.getPageView(i);
-                    const svg = pageView?.div?.querySelector('.annotationLayer');
-                    if (svg) {
-                        const pageNum = i + 1;
-                        if (svg.innerHTML.trim()) {
-                            annotationsStore.set(pageNum, svg.innerHTML);
-                        } else {
-                            // Clear from store if empty (all content deleted)
-                            annotationsStore.delete(pageNum);
+
+            // Arrow buttons toggle dropdowns
+            document.getElementById('highlightArrow').onclick = (e) => toggleDropdown(highlightDropdown, e);
+            document.getElementById('drawArrow').onclick = (e) => toggleDropdown(drawDropdown, e);
+            document.getElementById('shapesArrow').onclick = (e) => toggleDropdown(shapesDropdown, e);
+
+            // Close dropdowns when clicking outside
+            document.addEventListener('click', (e) => {
+                if (!e.target.closest('.toolDropdown') && !e.target.closest('.dropdownArrow')) {
+                    closeAllDropdowns();
+                }
+            });
+
+            // Prevent dropdown from closing when clicking inside
+            highlightDropdown.onclick = (e) => e.stopPropagation();
+            drawDropdown.onclick = (e) => e.stopPropagation();
+            shapesDropdown.onclick = (e) => e.stopPropagation();
+
+            // Drawing Tools - Toggle Behavior
+            async function setTool(tool) {
+                // If same tool clicked again, deactivate
+                if (currentTool === tool) {
+                    currentTool = null;
+                    annotationMode = false;
+                    document.querySelectorAll('.annotationLayer').forEach(el => el.classList.remove('active'));
+                } else {
+                    currentTool = tool;
+                    annotationMode = true;
+
+                    // Set color and width based on tool
+                    if (tool === 'highlight') {
+                        currentColor = highlightColor;
+                        currentWidth = highlightWidth;
+                    } else if (tool === 'pen') {
+                        currentColor = drawColor;
+                        currentWidth = drawWidth;
+                    } else if (tool === 'shape') {
+                        currentColor = shapeColor;
+                        currentWidth = shapeWidth;
+                    }
+
+                    // BUGFIX: Save current annotation state BEFORE re-injecting layers
+                    // This prevents deleted content from being restored when switching tools
+                    for (let i = 0; i < pdfViewer.pagesCount; i++) {
+                        const pageView = pdfViewer.getPageView(i);
+                        const svg = pageView?.div?.querySelector('.annotationLayer');
+                        if (svg) {
+                            const pageNum = i + 1;
+                            if (svg.innerHTML.trim()) {
+                                annotationsStore.set(pageNum, svg.innerHTML);
+                            } else {
+                                // Clear from store if empty (all content deleted)
+                                annotationsStore.delete(pageNum);
+                            }
                         }
                     }
-                }
 
-                // Inject annotation layers (await all)
-                const promises = [];
-                for (let i = 0; i < pdfViewer.pagesCount; i++) {
-                    const pageView = pdfViewer.getPageView(i);
-                    if (pageView?.div) {
-                        promises.push(injectAnnotationLayer(i + 1));
+                    // Inject annotation layers (await all)
+                    const promises = [];
+                    for (let i = 0; i < pdfViewer.pagesCount; i++) {
+                        const pageView = pdfViewer.getPageView(i);
+                        if (pageView?.div) {
+                            promises.push(injectAnnotationLayer(i + 1));
+                        }
                     }
+                    await Promise.all(promises);
                 }
-                await Promise.all(promises);
-            }
 
-            // Update button states
-            highlightWrapper.classList.toggle('active', currentTool === 'highlight');
-            drawWrapper.classList.toggle('active', currentTool === 'pen');
-            shapesWrapper.classList.toggle('active', currentTool === 'shape');
-            document.getElementById('eraserBtn').classList.toggle('active', currentTool === 'eraser');
-            document.getElementById('textBtn').classList.toggle('active', currentTool === 'text');
-            document.getElementById('selectBtn').classList.toggle('active', currentTool === 'select');
-
-            // Toggle select-mode class on annotation layers
-            document.querySelectorAll('.annotationLayer').forEach(layer => {
-                layer.classList.toggle('select-mode', currentTool === 'select');
-            });
+                // Update button states
+                highlightWrapper.classList.toggle('active', currentTool === 'highlight');
+                drawWrapper.classList.toggle('active', currentTool === 'pen');
+                shapesWrapper.classList.toggle('active', currentTool === 'shape');
+                document.getElementById('eraserBtn').classList.toggle('active', currentTool === 'eraser');
+                document.getElementById('textBtn').classList.toggle('active', currentTool === 'text');
+                document.getElementById('selectBtn').classList.toggle('active', currentTool === 'select');
+
+                // Toggle select-mode class on annotation layers
+                document.querySelectorAll('.annotationLayer').forEach(layer => {
+                    layer.classList.toggle('select-mode', currentTool === 'select');
+                });
 
-            // Clear selection when switching tools
-            if (currentTool !== 'select') {
-                clearAnnotationSelection();
+                // Clear selection when switching tools
+                if (currentTool !== 'select') {
+                    clearAnnotationSelection();
+                }
             }
-        }
 
-        document.getElementById('drawBtn').onclick = () => setTool('pen');
-        document.getElementById('highlightBtn').onclick = () => setTool('highlight');
-        document.getElementById('shapesBtn').onclick = () => setTool('shape');
-        document.getElementById('eraserBtn').onclick = () => setTool('eraser');
-        document.getElementById('textBtn').onclick = () => setTool('text');
-        document.getElementById('selectBtn').onclick = () => setTool('select');
+            document.getElementById('drawBtn').onclick = () => setTool('pen');
+            document.getElementById('highlightBtn').onclick = () => setTool('highlight');
+            document.getElementById('shapesBtn').onclick = () => setTool('shape');
+            document.getElementById('eraserBtn').onclick = () => setTool('eraser');
+            document.getElementById('textBtn').onclick = () => setTool('text');
+            document.getElementById('selectBtn').onclick = () => setTool('select');
 
-        // Highlighter Colors
-        document.querySelectorAll('#highlightColors .colorDot').forEach(dot => {
-            dot.onclick = (e) => {
-                e.stopPropagation();
-                document.querySelectorAll('#highlightColors .colorDot').forEach(d => d.classList.remove('active'));
-                dot.classList.add('active');
-                highlightColor = dot.dataset.color;
-                if (currentTool === 'highlight') currentColor = highlightColor;
-                // Update preview
-                document.getElementById('highlightWave').setAttribute('stroke', highlightColor);
+            // Highlighter Colors
+            document.querySelectorAll('#highlightColors .colorDot').forEach(dot => {
+                dot.onclick = (e) => {
+                    e.stopPropagation();
+                    document.querySelectorAll('#highlightColors .colorDot').forEach(d => d.classList.remove('active'));
+                    dot.classList.add('active');
+                    highlightColor = dot.dataset.color;
+                    if (currentTool === 'highlight') currentColor = highlightColor;
+                    // Update preview
+                    document.getElementById('highlightWave').setAttribute('stroke', highlightColor);
+                };
+            });
+
+            // Pen Colors
+            document.querySelectorAll('#drawColors .colorDot').forEach(dot => {
+                dot.onclick = (e) => {
+                    e.stopPropagation();
+                    document.querySelectorAll('#drawColors .colorDot').forEach(d => d.classList.remove('active'));
+                    dot.classList.add('active');
+                    drawColor = dot.dataset.color;
+                    if (currentTool === 'pen') currentColor = drawColor;
+                    // Update preview
+                    document.getElementById('drawWave').setAttribute('stroke', drawColor);
+                };
+            });
+
+            // Highlighter Thickness Slider
+            document.getElementById('highlightThickness').oninput = (e) => {
+                highlightWidth = parseInt(e.target.value);
+                if (currentTool === 'highlight') currentWidth = highlightWidth;
+                // Update preview - highlighter uses width * 2 for display
+                document.getElementById('highlightWave').setAttribute('stroke-width', highlightWidth * 2);
             };
-        });
 
-        // Pen Colors
-        document.querySelectorAll('#drawColors .colorDot').forEach(dot => {
-            dot.onclick = (e) => {
-                e.stopPropagation();
-                document.querySelectorAll('#drawColors .colorDot').forEach(d => d.classList.remove('active'));
-                dot.classList.add('active');
-                drawColor = dot.dataset.color;
-                if (currentTool === 'pen') currentColor = drawColor;
+            // Pen Thickness Slider
+            document.getElementById('drawThickness').oninput = (e) => {
+                drawWidth = parseInt(e.target.value);
+                if (currentTool === 'pen') currentWidth = drawWidth;
                 // Update preview
-                document.getElementById('drawWave').setAttribute('stroke', drawColor);
-            };
-        });
-
-        // Highlighter Thickness Slider
-        document.getElementById('highlightThickness').oninput = (e) => {
-            highlightWidth = parseInt(e.target.value);
-            if (currentTool === 'highlight') currentWidth = highlightWidth;
-            // Update preview - highlighter uses width * 2 for display
-            document.getElementById('highlightWave').setAttribute('stroke-width', highlightWidth * 2);
-        };
-
-        // Pen Thickness Slider
-        document.getElementById('drawThickness').oninput = (e) => {
-            drawWidth = parseInt(e.target.value);
-            if (currentTool === 'pen') currentWidth = drawWidth;
-            // Update preview
-            document.getElementById('drawWave').setAttribute('stroke-width', drawWidth);
-        };
-
-        // Shape Selection
-        document.querySelectorAll('.shapeBtn').forEach(btn => {
-            btn.onclick = (e) => {
-                e.stopPropagation();
-                document.querySelectorAll('.shapeBtn').forEach(b => b.classList.remove('active'));
-                btn.classList.add('active');
-                currentShape = btn.dataset.shape;
+                document.getElementById('drawWave').setAttribute('stroke-width', drawWidth);
             };
-        });
 
-        // Shape Colors
-        document.querySelectorAll('#shapeColors .colorDot').forEach(dot => {
-            dot.onclick = (e) => {
-                e.stopPropagation();
-                document.querySelectorAll('#shapeColors .colorDot').forEach(d => d.classList.remove('active'));
-                dot.classList.add('active');
-                shapeColor = dot.dataset.color;
-                if (currentTool === 'shape') currentColor = shapeColor;
-            };
-        });
-
-        // Shape Thickness Slider
-        document.getElementById('shapeThickness').oninput = (e) => {
-            shapeWidth = parseInt(e.target.value);
-            if (currentTool === 'shape') currentWidth = shapeWidth;
-        };
-
-        // Annotation Layer with Persistence
-        async function injectAnnotationLayer(pageNum) {
-            const pageView = pdfViewer.getPageView(pageNum - 1);
-            if (!pageView?.div) return;
-
-            // Remove old SVG if exists (may have stale reference)
-            const oldSvg = pageView.div.querySelector('.annotationLayer');
-            if (oldSvg) oldSvg.remove();
-
-            // Get or calculate base dimensions (scale=1.0) - FIXED reference
-            let baseDims = pageBaseDimensions.get(pageNum);
-            if (!baseDims) {
-                const page = await pdfDoc.getPage(pageNum);
-                const baseViewport = page.getViewport({ scale: 1.0 });
-                baseDims = { width: baseViewport.width, height: baseViewport.height };
-                pageBaseDimensions.set(pageNum, baseDims);
-            }
+            // Shape Selection
+            document.querySelectorAll('.shapeBtn').forEach(btn => {
+                btn.onclick = (e) => {
+                    e.stopPropagation();
+                    document.querySelectorAll('.shapeBtn').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    currentShape = btn.dataset.shape;
+                };
+            });
 
-            // Create fresh SVG with FIXED viewBox (always scale=1.0 dimensions)
-            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            svg.setAttribute('class', 'annotationLayer');
-            svg.setAttribute('viewBox', `0 0 ${baseDims.width} ${baseDims.height}`);
-            svg.setAttribute('preserveAspectRatio', 'none');
-            svg.style.width = '100%';
-            svg.style.height = '100%';
-            svg.dataset.page = pageNum;
-            svg.dataset.viewboxWidth = baseDims.width;
-            svg.dataset.viewboxHeight = baseDims.height;
-            svg.dataset.viewboxHeight = baseDims.height;
-            pageView.div.appendChild(svg);
+            // Shape Colors
+            document.querySelectorAll('#shapeColors .colorDot').forEach(dot => {
+                dot.onclick = (e) => {
+                    e.stopPropagation();
+                    document.querySelectorAll('#shapeColors .colorDot').forEach(d => d.classList.remove('active'));
+                    dot.classList.add('active');
+                    shapeColor = dot.dataset.color;
+                    if (currentTool === 'shape') currentColor = shapeColor;
+                };
+            });
 
+            // Shape Thickness Slider
+            document.getElementById('shapeThickness').oninput = (e) => {
+                shapeWidth = parseInt(e.target.value);
+                if (currentTool === 'shape') currentWidth = shapeWidth;
+            };
 
+            // Annotation Layer with Persistence
+            async function injectAnnotationLayer(pageNum) {
+                const pageView = pdfViewer.getPageView(pageNum - 1);
+                if (!pageView?.div) return;
+
+                // Remove old SVG if exists (may have stale reference)
+                const oldSvg = pageView.div.querySelector('.annotationLayer');
+                if (oldSvg) oldSvg.remove();
+
+                // Get or calculate base dimensions (scale=1.0) - FIXED reference
+                let baseDims = pageBaseDimensions.get(pageNum);
+                if (!baseDims) {
+                    const page = await pdfDoc.getPage(pageNum);
+                    const baseViewport = page.getViewport({ scale: 1.0 });
+                    baseDims = { width: baseViewport.width, height: baseViewport.height };
+                    pageBaseDimensions.set(pageNum, baseDims);
+                }
 
-            // Restore saved annotations for this page
-            if (annotationsStore.has(pageNum)) {
-                svg.innerHTML = annotationsStore.get(pageNum);
-            }
+                // Create fresh SVG with FIXED viewBox (always scale=1.0 dimensions)
+                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                svg.setAttribute('class', 'annotationLayer');
+                svg.setAttribute('viewBox', `0 0 ${baseDims.width} ${baseDims.height}`);
+                svg.setAttribute('preserveAspectRatio', 'none');
+                svg.style.width = '100%';
+                svg.style.height = '100%';
+                svg.dataset.page = pageNum;
+                svg.dataset.viewboxWidth = baseDims.width;
+                svg.dataset.viewboxHeight = baseDims.height;
+                svg.dataset.viewboxHeight = baseDims.height;
+                pageView.div.appendChild(svg);
 
-            svg.addEventListener('mousedown', (e) => startDraw(e, pageNum));
-            svg.addEventListener('mousemove', draw);
-            svg.addEventListener('mouseup', () => stopDraw(pageNum));
-            svg.addEventListener('mouseleave', () => stopDraw(pageNum));
 
-            // Touch support for tablets
-            svg.addEventListener('touchstart', (e) => {
-                // Prevent default to avoid scroll while drawing/selecting
-                if (currentTool) e.preventDefault();
-                startDraw(e, pageNum);
-            }, { passive: false });
-            svg.addEventListener('touchmove', (e) => {
-                if (currentTool) e.preventDefault();
-                draw(e);
-            }, { passive: false });
-            svg.addEventListener('touchend', () => stopDraw(pageNum));
-            svg.addEventListener('touchcancel', () => stopDraw(pageNum));
 
-            svg.classList.toggle('active', annotationMode);
-        }
+                // Restore saved annotations for this page
+                if (annotationsStore.has(pageNum)) {
+                    svg.innerHTML = annotationsStore.get(pageNum);
+                }
 
-        // Save annotations for a page
-        function saveAnnotations(pageNum) {
-            const pageView = pdfViewer.getPageView(pageNum - 1);
-            const svg = pageView?.div?.querySelector('.annotationLayer');
-            if (svg && svg.innerHTML.trim()) {
-                annotationsStore.set(pageNum, svg.innerHTML);
+                svg.addEventListener('mousedown', (e) => startDraw(e, pageNum));
+                svg.addEventListener('mousemove', draw);
+                svg.addEventListener('mouseup', () => stopDraw(pageNum));
+                svg.addEventListener('mouseleave', () => stopDraw(pageNum));
+
+                // Touch support for tablets
+                svg.addEventListener('touchstart', (e) => {
+                    // Prevent default to avoid scroll while drawing/selecting
+                    if (currentTool) e.preventDefault();
+                    startDraw(e, pageNum);
+                }, { passive: false });
+                svg.addEventListener('touchmove', (e) => {
+                    if (currentTool) e.preventDefault();
+                    draw(e);
+                }, { passive: false });
+                svg.addEventListener('touchend', () => stopDraw(pageNum));
+                svg.addEventListener('touchcancel', () => stopDraw(pageNum));
+
+                svg.classList.toggle('active', annotationMode);
+            }
+
+            // Save annotations for a page
+            function saveAnnotations(pageNum) {
+                const pageView = pdfViewer.getPageView(pageNum - 1);
+                const svg = pageView?.div?.querySelector('.annotationLayer');
+                if (svg && svg.innerHTML.trim()) {
+                    annotationsStore.set(pageNum, svg.innerHTML);
+                }
             }
-        }
 
-        function startDraw(e, pageNum) {
-            if (!annotationMode || !currentTool) return;
+            function startDraw(e, pageNum) {
+                if (!annotationMode || !currentTool) return;
 
-            e.preventDefault(); // Prevent text selection
+                e.preventDefault(); // Prevent text selection
 
-            const svg = e.currentTarget;
-            if (!svg || !svg.dataset.viewboxWidth) return; // Defensive check
+                const svg = e.currentTarget;
+                if (!svg || !svg.dataset.viewboxWidth) return; // Defensive check
 
-            // Handle select tool separately
-            if (currentTool === 'select') {
-                if (handleSelectMouseDown(e, svg, pageNum)) {
-                    return; // Select tool handled the event
+                // Handle select tool separately
+                if (currentTool === 'select') {
+                    if (handleSelectMouseDown(e, svg, pageNum)) {
+                        return; // Select tool handled the event
+                    }
                 }
-            }
 
-            isDrawing = true;
-            currentDrawingPage = pageNum;
-            currentSvg = svg; // Store reference
+                isDrawing = true;
+                currentDrawingPage = pageNum;
+                currentSvg = svg; // Store reference
 
-            const rect = svg.getBoundingClientRect();
+                const rect = svg.getBoundingClientRect();
+
+                // Convert screen coords to viewBox coords
+                const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
+                const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
+                const scaleX = viewBoxWidth / rect.width;
+                const scaleY = viewBoxHeight / rect.height;
 
-            // Convert screen coords to viewBox coords
-            const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-            const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-            const scaleX = viewBoxWidth / rect.width;
-            const scaleY = viewBoxHeight / rect.height;
+                // Get coordinates from mouse or touch event
+                const coords = getEventCoords(e);
+                const x = (coords.clientX - rect.left) * scaleX;
+                const y = (coords.clientY - rect.top) * scaleY;
 
-            // Get coordinates from mouse or touch event
-            const coords = getEventCoords(e);
-            const x = (coords.clientX - rect.left) * scaleX;
-            const y = (coords.clientY - rect.top) * scaleY;
-
-            if (currentTool === 'eraser') {
-                eraseAt(svg, x, y, scaleX);
-                saveAnnotations(pageNum);
-                return;
-            }
+                if (currentTool === 'eraser') {
+                    eraseAt(svg, x, y, scaleX);
+                    saveAnnotations(pageNum);
+                    return;
+                }
 
-            // Text tool - create/edit/drag text
-            if (currentTool === 'text') {
-                // Check if clicked on existing text element
-                const elementsUnderClick = document.elementsFromPoint(e.clientX, e.clientY);
-                const existingText = elementsUnderClick.find(el => el.tagName === 'text' && el.closest('.annotationLayer'));
+                // Text tool - create/edit/drag text
+                if (currentTool === 'text') {
+                    // Check if clicked on existing text element
+                    const elementsUnderClick = document.elementsFromPoint(e.clientX, e.clientY);
+                    const existingText = elementsUnderClick.find(el => el.tagName === 'text' && el.closest('.annotationLayer'));
 
-                if (existingText) {
-                    // Start dragging (double-click will edit via separate handler)
-                    startTextDrag(e, existingText, svg, scaleX, scaleY, pageNum);
-                } else {
-                    // Create new text
-                    showTextEditor(e.clientX, e.clientY, svg, x, y, scaleX, pageNum);
+                    if (existingText) {
+                        // Start dragging (double-click will edit via separate handler)
+                        startTextDrag(e, existingText, svg, scaleX, scaleY, pageNum);
+                    } else {
+                        // Create new text
+                        showTextEditor(e.clientX, e.clientY, svg, x, y, scaleX, pageNum);
+                    }
+                    return;
                 }
-                return;
-            }
 
-            // Shape tool - create shapes
-            if (currentTool === 'shape') {
-                isDrawing = true;
-                // Store start position for shape drawing
-                svg.dataset.shapeStartX = x;
-                svg.dataset.shapeStartY = y;
-                svg.dataset.shapeScaleX = scaleX;
-                svg.dataset.shapeScaleY = scaleY;
-
-                let shapeEl;
-                if (currentShape === 'rectangle') {
-                    shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-                    shapeEl.setAttribute('x', x);
-                    shapeEl.setAttribute('y', y);
-                    shapeEl.setAttribute('width', 0);
-                    shapeEl.setAttribute('height', 0);
-                } else if (currentShape === 'circle') {
-                    shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
-                    shapeEl.setAttribute('cx', x);
-                    shapeEl.setAttribute('cy', y);
-                    shapeEl.setAttribute('rx', 0);
-                    shapeEl.setAttribute('ry', 0);
-                } else if (currentShape === 'line' || currentShape === 'arrow') {
-                    shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                    shapeEl.setAttribute('x1', x);
-                    shapeEl.setAttribute('y1', y);
-                    shapeEl.setAttribute('x2', x);
-                    shapeEl.setAttribute('y2', y);
-                }
-
-                shapeEl.setAttribute('stroke', currentColor);
-                shapeEl.setAttribute('stroke-width', currentWidth * scaleX);
-                shapeEl.setAttribute('fill', 'none');
-                shapeEl.classList.add('current-shape');
-                svg.appendChild(shapeEl);
-                return;
-            }
+                // Shape tool - create shapes
+                if (currentTool === 'shape') {
+                    isDrawing = true;
+                    // Store start position for shape drawing
+                    svg.dataset.shapeStartX = x;
+                    svg.dataset.shapeStartY = y;
+                    svg.dataset.shapeScaleX = scaleX;
+                    svg.dataset.shapeScaleY = scaleY;
+
+                    let shapeEl;
+                    if (currentShape === 'rectangle') {
+                        shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+                        shapeEl.setAttribute('x', x);
+                        shapeEl.setAttribute('y', y);
+                        shapeEl.setAttribute('width', 0);
+                        shapeEl.setAttribute('height', 0);
+                    } else if (currentShape === 'circle') {
+                        shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
+                        shapeEl.setAttribute('cx', x);
+                        shapeEl.setAttribute('cy', y);
+                        shapeEl.setAttribute('rx', 0);
+                        shapeEl.setAttribute('ry', 0);
+                    } else if (currentShape === 'line' || currentShape === 'arrow') {
+                        shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+                        shapeEl.setAttribute('x1', x);
+                        shapeEl.setAttribute('y1', y);
+                        shapeEl.setAttribute('x2', x);
+                        shapeEl.setAttribute('y2', y);
+                    }
 
-            currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            currentPath.setAttribute('stroke', currentColor);
-            currentPath.setAttribute('fill', 'none');
-
-            if (currentTool === 'highlight') {
-                // Highlighter uses stroke size * 5 for thicker strokes
-                currentPath.setAttribute('stroke-width', String(currentWidth * 5 * scaleX));
-                currentPath.setAttribute('stroke-opacity', '0.35');
-            } else {
-                currentPath.setAttribute('stroke-width', String(currentWidth * scaleX));
-                currentPath.setAttribute('stroke-opacity', '1');
-            }
+                    shapeEl.setAttribute('stroke', currentColor);
+                    shapeEl.setAttribute('stroke-width', currentWidth * scaleX);
+                    shapeEl.setAttribute('fill', 'none');
+                    shapeEl.classList.add('current-shape');
+                    svg.appendChild(shapeEl);
+                    return;
+                }
 
-            currentPath.setAttribute('d', `M${x.toFixed(2)},${y.toFixed(2)}`);
-            svg.appendChild(currentPath);
-        }
+                currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                currentPath.setAttribute('stroke', currentColor);
+                currentPath.setAttribute('fill', 'none');
 
-        function draw(e) {
-            if (!isDrawing || !currentSvg) return;
+                if (currentTool === 'highlight') {
+                    // Highlighter uses stroke size * 5 for thicker strokes
+                    currentPath.setAttribute('stroke-width', String(currentWidth * 5 * scaleX));
+                    currentPath.setAttribute('stroke-opacity', '0.35');
+                } else {
+                    currentPath.setAttribute('stroke-width', String(currentWidth * scaleX));
+                    currentPath.setAttribute('stroke-opacity', '1');
+                }
 
-            e.preventDefault(); // Prevent text selection
+                currentPath.setAttribute('d', `M${x.toFixed(2)},${y.toFixed(2)}`);
+                svg.appendChild(currentPath);
+            }
 
-            const svg = currentSvg; // Use stored reference
-            if (!svg || !svg.dataset.viewboxWidth) return;
+            function draw(e) {
+                if (!isDrawing || !currentSvg) return;
 
-            const rect = svg.getBoundingClientRect();
+                e.preventDefault(); // Prevent text selection
 
-            // Convert screen coords to viewBox coords
-            const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-            const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-            const scaleX = viewBoxWidth / rect.width;
-            const scaleY = viewBoxHeight / rect.height;
+                const svg = currentSvg; // Use stored reference
+                if (!svg || !svg.dataset.viewboxWidth) return;
 
-            // Get coordinates from mouse or touch event
-            const coords = getEventCoords(e);
-            const x = (coords.clientX - rect.left) * scaleX;
-            const y = (coords.clientY - rect.top) * scaleY;
+                const rect = svg.getBoundingClientRect();
 
-            if (currentTool === 'eraser') {
-                eraseAt(svg, x, y, scaleX);
-                return;
-            }
+                // Convert screen coords to viewBox coords
+                const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
+                const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
+                const scaleX = viewBoxWidth / rect.width;
+                const scaleY = viewBoxHeight / rect.height;
 
-            // Shape tool - update shape size
-            if (currentTool === 'shape') {
-                const shapeEl = svg.querySelector('.current-shape');
-                if (!shapeEl) return;
-
-                const startX = parseFloat(svg.dataset.shapeStartX);
-                const startY = parseFloat(svg.dataset.shapeStartY);
-
-                if (currentShape === 'rectangle') {
-                    const width = Math.abs(x - startX);
-                    const height = Math.abs(y - startY);
-                    shapeEl.setAttribute('x', Math.min(x, startX));
-                    shapeEl.setAttribute('y', Math.min(y, startY));
-                    shapeEl.setAttribute('width', width);
-                    shapeEl.setAttribute('height', height);
-                } else if (currentShape === 'circle') {
-                    const rx = Math.abs(x - startX) / 2;
-                    const ry = Math.abs(y - startY) / 2;
-                    shapeEl.setAttribute('cx', (startX + x) / 2);
-                    shapeEl.setAttribute('cy', (startY + y) / 2);
-                    shapeEl.setAttribute('rx', rx);
-                    shapeEl.setAttribute('ry', ry);
-                } else if (currentShape === 'line' || currentShape === 'arrow' || currentShape === 'callout') {
-                    shapeEl.setAttribute('x2', x);
-                    shapeEl.setAttribute('y2', y);
-                }
-                return;
-            }
+                // Get coordinates from mouse or touch event
+                const coords = getEventCoords(e);
+                const x = (coords.clientX - rect.left) * scaleX;
+                const y = (coords.clientY - rect.top) * scaleY;
 
-            if (currentPath) {
-                currentPath.setAttribute('d', currentPath.getAttribute('d') + ` L${x.toFixed(2)},${y.toFixed(2)}`);
-            }
-        }
+                if (currentTool === 'eraser') {
+                    eraseAt(svg, x, y, scaleX);
+                    return;
+                }
 
-        function stopDraw(pageNum) {
-            // Handle arrow marker
-            if (currentTool === 'shape' && currentShape === 'arrow' && currentSvg) {
-                const shapeEl = currentSvg.querySelector('.current-shape');
-                if (shapeEl && shapeEl.tagName === 'line') {
-                    // Create arrow head as a group
-                    const x1 = parseFloat(shapeEl.getAttribute('x1'));
-                    const y1 = parseFloat(shapeEl.getAttribute('y1'));
-                    const x2 = parseFloat(shapeEl.getAttribute('x2'));
-                    const y2 = parseFloat(shapeEl.getAttribute('y2'));
-
-                    // Calculate arrow head
-                    const angle = Math.atan2(y2 - y1, x2 - x1);
-                    const headLength = 15 * parseFloat(currentSvg.dataset.shapeScaleX || 1);
-
-                    const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                    const p1x = x2 - headLength * Math.cos(angle - Math.PI / 6);
-                    const p1y = y2 - headLength * Math.sin(angle - Math.PI / 6);
-                    const p2x = x2 - headLength * Math.cos(angle + Math.PI / 6);
-                    const p2y = y2 - headLength * Math.sin(angle + Math.PI / 6);
-
-                    arrowHead.setAttribute('d', `M${x2},${y2} L${p1x},${p1y} M${x2},${y2} L${p2x},${p2y}`);
-                    arrowHead.setAttribute('stroke', shapeEl.getAttribute('stroke'));
-                    arrowHead.setAttribute('stroke-width', shapeEl.getAttribute('stroke-width'));
-                    arrowHead.setAttribute('fill', 'none');
-                    currentSvg.appendChild(arrowHead);
+                // Shape tool - update shape size
+                if (currentTool === 'shape') {
+                    const shapeEl = svg.querySelector('.current-shape');
+                    if (!shapeEl) return;
+
+                    const startX = parseFloat(svg.dataset.shapeStartX);
+                    const startY = parseFloat(svg.dataset.shapeStartY);
+
+                    if (currentShape === 'rectangle') {
+                        const width = Math.abs(x - startX);
+                        const height = Math.abs(y - startY);
+                        shapeEl.setAttribute('x', Math.min(x, startX));
+                        shapeEl.setAttribute('y', Math.min(y, startY));
+                        shapeEl.setAttribute('width', width);
+                        shapeEl.setAttribute('height', height);
+                    } else if (currentShape === 'circle') {
+                        const rx = Math.abs(x - startX) / 2;
+                        const ry = Math.abs(y - startY) / 2;
+                        shapeEl.setAttribute('cx', (startX + x) / 2);
+                        shapeEl.setAttribute('cy', (startY + y) / 2);
+                        shapeEl.setAttribute('rx', rx);
+                        shapeEl.setAttribute('ry', ry);
+                    } else if (currentShape === 'line' || currentShape === 'arrow' || currentShape === 'callout') {
+                        shapeEl.setAttribute('x2', x);
+                        shapeEl.setAttribute('y2', y);
+                    }
+                    return;
+                }
+
+                if (currentPath) {
+                    currentPath.setAttribute('d', currentPath.getAttribute('d') + ` L${x.toFixed(2)},${y.toFixed(2)}`);
                 }
             }
 
-            // Handle callout - arrow with text at the start, pointing to end
-            // UX: Click where you want text box, drag to point at something
-            if (currentTool === 'shape' && currentShape === 'callout' && currentSvg) {
-                const shapeEl = currentSvg.querySelector('.current-shape');
-                if (shapeEl && shapeEl.tagName === 'line') {
-                    const x1 = parseFloat(shapeEl.getAttribute('x1')); // Start - where text box goes
-                    const y1 = parseFloat(shapeEl.getAttribute('y1'));
-                    const x2 = parseFloat(shapeEl.getAttribute('x2')); // End - where arrow points
-                    const y2 = parseFloat(shapeEl.getAttribute('y2'));
-
-                    // Only create callout if line has been drawn (not just a click)
-                    if (Math.abs(x2 - x1) > 5 || Math.abs(y2 - y1) > 5) {
-                        const scaleX = parseFloat(currentSvg.dataset.shapeScaleX || 1);
-
-                        // Arrow head points TO the end (x2,y2) - where user wants to point at
+            function stopDraw(pageNum) {
+                // Handle arrow marker
+                if (currentTool === 'shape' && currentShape === 'arrow' && currentSvg) {
+                    const shapeEl = currentSvg.querySelector('.current-shape');
+                    if (shapeEl && shapeEl.tagName === 'line') {
+                        // Create arrow head as a group
+                        const x1 = parseFloat(shapeEl.getAttribute('x1'));
+                        const y1 = parseFloat(shapeEl.getAttribute('y1'));
+                        const x2 = parseFloat(shapeEl.getAttribute('x2'));
+                        const y2 = parseFloat(shapeEl.getAttribute('y2'));
+
+                        // Calculate arrow head
                         const angle = Math.atan2(y2 - y1, x2 - x1);
-                        const headLength = 12 * scaleX;
+                        const headLength = 15 * parseFloat(currentSvg.dataset.shapeScaleX || 1);
 
                         const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                         const p1x = x2 - headLength * Math.cos(angle - Math.PI / 6);
@@ -2148,382 +2158,414 @@
                         arrowHead.setAttribute('stroke', shapeEl.getAttribute('stroke'));
                         arrowHead.setAttribute('stroke-width', shapeEl.getAttribute('stroke-width'));
                         arrowHead.setAttribute('fill', 'none');
-                        arrowHead.classList.add('callout-arrow');
                         currentSvg.appendChild(arrowHead);
+                    }
+                }
 
-                        // Store references for text editor
-                        const svg = currentSvg;
-                        const currentPageNum = currentDrawingPage;
-                        const arrowColor = shapeEl.getAttribute('stroke');
-
-                        // Calculate screen position for text editor at START of arrow (x1,y1)
-                        // This is where the user clicked first - where they want the text
-                        const rect = svg.getBoundingClientRect();
-                        const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                        const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                        const screenX = rect.left + (x1 / viewBoxWidth) * rect.width;
-                        const screenY = rect.top + (y1 / viewBoxHeight) * rect.height;
-
-                        // Remove the current-shape class before showing editor
-                        shapeEl.classList.remove('current-shape');
-
-                        // Save first, then open text editor
-                        saveAnnotations(currentPageNum);
-
-                        // Open text editor at the START of the arrow (where user clicked)
-                        setTimeout(() => {
-                            showTextEditor(screenX, screenY, svg, x1, y1, scaleX, currentPageNum, null, arrowColor);
-                        }, 50);
-
-                        // Reset state
-                        isDrawing = false;
-                        currentPath = null;
-                        currentSvg = null;
-                        currentDrawingPage = null;
-                        return; // Exit early, text editor will handle the rest
+                // Handle callout - arrow with text at the start, pointing to end
+                // UX: Click where you want text box, drag to point at something
+                if (currentTool === 'shape' && currentShape === 'callout' && currentSvg) {
+                    const shapeEl = currentSvg.querySelector('.current-shape');
+                    if (shapeEl && shapeEl.tagName === 'line') {
+                        const x1 = parseFloat(shapeEl.getAttribute('x1')); // Start - where text box goes
+                        const y1 = parseFloat(shapeEl.getAttribute('y1'));
+                        const x2 = parseFloat(shapeEl.getAttribute('x2')); // End - where arrow points
+                        const y2 = parseFloat(shapeEl.getAttribute('y2'));
+
+                        // Only create callout if line has been drawn (not just a click)
+                        if (Math.abs(x2 - x1) > 5 || Math.abs(y2 - y1) > 5) {
+                            const scaleX = parseFloat(currentSvg.dataset.shapeScaleX || 1);
+
+                            // Arrow head points TO the end (x2,y2) - where user wants to point at
+                            const angle = Math.atan2(y2 - y1, x2 - x1);
+                            const headLength = 12 * scaleX;
+
+                            const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                            const p1x = x2 - headLength * Math.cos(angle - Math.PI / 6);
+                            const p1y = y2 - headLength * Math.sin(angle - Math.PI / 6);
+                            const p2x = x2 - headLength * Math.cos(angle + Math.PI / 6);
+                            const p2y = y2 - headLength * Math.sin(angle + Math.PI / 6);
+
+                            arrowHead.setAttribute('d', `M${x2},${y2} L${p1x},${p1y} M${x2},${y2} L${p2x},${p2y}`);
+                            arrowHead.setAttribute('stroke', shapeEl.getAttribute('stroke'));
+                            arrowHead.setAttribute('stroke-width', shapeEl.getAttribute('stroke-width'));
+                            arrowHead.setAttribute('fill', 'none');
+                            arrowHead.classList.add('callout-arrow');
+                            currentSvg.appendChild(arrowHead);
+
+                            // Store references for text editor
+                            const svg = currentSvg;
+                            const currentPageNum = currentDrawingPage;
+                            const arrowColor = shapeEl.getAttribute('stroke');
+
+                            // Calculate screen position for text editor at START of arrow (x1,y1)
+                            // This is where the user clicked first - where they want the text
+                            const rect = svg.getBoundingClientRect();
+                            const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
+                            const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
+                            const screenX = rect.left + (x1 / viewBoxWidth) * rect.width;
+                            const screenY = rect.top + (y1 / viewBoxHeight) * rect.height;
+
+                            // Remove the current-shape class before showing editor
+                            shapeEl.classList.remove('current-shape');
+
+                            // Save first, then open text editor
+                            saveAnnotations(currentPageNum);
+
+                            // Open text editor at the START of the arrow (where user clicked)
+                            setTimeout(() => {
+                                showTextEditor(screenX, screenY, svg, x1, y1, scaleX, currentPageNum, null, arrowColor);
+                            }, 50);
+
+                            // Reset state
+                            isDrawing = false;
+                            currentPath = null;
+                            currentSvg = null;
+                            currentDrawingPage = null;
+                            return; // Exit early, text editor will handle the rest
+                        }
                     }
                 }
-            }
 
-            // Remove the current-shape class
-            if (currentSvg) {
-                const shapeEl = currentSvg.querySelector('.current-shape');
-                if (shapeEl) shapeEl.classList.remove('current-shape');
-            }
+                // Remove the current-shape class
+                if (currentSvg) {
+                    const shapeEl = currentSvg.querySelector('.current-shape');
+                    if (shapeEl) shapeEl.classList.remove('current-shape');
+                }
 
-            if (isDrawing && currentDrawingPage) {
-                saveAnnotations(currentDrawingPage);
+                if (isDrawing && currentDrawingPage) {
+                    saveAnnotations(currentDrawingPage);
+                }
+                isDrawing = false;
+                currentPath = null;
+                currentSvg = null;
+                currentDrawingPage = null;
             }
-            isDrawing = false;
-            currentPath = null;
-            currentSvg = null;
-            currentDrawingPage = null;
-        }
 
-        // Text Drag-and-Drop
-        let draggedText = null;
-        let dragStartX = 0;
-        let dragStartY = 0;
-        let textOriginalX = 0;
-        let textOriginalY = 0;
-        let hasDragged = false;
+            // Text Drag-and-Drop
+            let draggedText = null;
+            let dragStartX = 0;
+            let dragStartY = 0;
+            let textOriginalX = 0;
+            let textOriginalY = 0;
+            let hasDragged = false;
 
-        function startTextDrag(e, textEl, svg, scaleX, scaleY, pageNum) {
-            e.preventDefault();
-            e.stopPropagation();
+            function startTextDrag(e, textEl, svg, scaleX, scaleY, pageNum) {
+                e.preventDefault();
+                e.stopPropagation();
 
-            draggedText = textEl;
-            textEl.classList.add('dragging');
-            hasDragged = false;
+                draggedText = textEl;
+                textEl.classList.add('dragging');
+                hasDragged = false;
+
+                const rect = svg.getBoundingClientRect();
+                dragStartX = e.clientX;
+                dragStartY = e.clientY;
+                textOriginalX = parseFloat(textEl.getAttribute('x'));
+                textOriginalY = parseFloat(textEl.getAttribute('y'));
 
-            const rect = svg.getBoundingClientRect();
-            dragStartX = e.clientX;
-            dragStartY = e.clientY;
-            textOriginalX = parseFloat(textEl.getAttribute('x'));
-            textOriginalY = parseFloat(textEl.getAttribute('y'));
+                function onMouseMove(ev) {
+                    const dx = (ev.clientX - dragStartX) * scaleX;
+                    const dy = (ev.clientY - dragStartY) * scaleY;
 
-            function onMouseMove(ev) {
-                const dx = (ev.clientX - dragStartX) * scaleX;
-                const dy = (ev.clientY - dragStartY) * scaleY;
+                    if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
+                        hasDragged = true;
+                    }
 
-                if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
-                    hasDragged = true;
+                    textEl.setAttribute('x', (textOriginalX + dx).toFixed(2));
+                    textEl.setAttribute('y', (textOriginalY + dy).toFixed(2));
                 }
 
-                textEl.setAttribute('x', (textOriginalX + dx).toFixed(2));
-                textEl.setAttribute('y', (textOriginalY + dy).toFixed(2));
-            }
+                function onMouseUp(ev) {
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                    textEl.classList.remove('dragging');
 
-            function onMouseUp(ev) {
-                document.removeEventListener('mousemove', onMouseMove);
-                document.removeEventListener('mouseup', onMouseUp);
-                textEl.classList.remove('dragging');
+                    if (hasDragged) {
+                        // Moved - save position
+                        saveAnnotations(pageNum);
+                    } else {
+                        // Not moved - short click = edit
+                        const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
+                        const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
+                        const svgX = parseFloat(textEl.getAttribute('x'));
+                        const svgY = parseFloat(textEl.getAttribute('y'));
+                        // Note: showTextEditor needs scaleX for font scaling logic, which we still have from arguments
+                        showTextEditor(ev.clientX, ev.clientY, svg, svgX, svgY, scaleX, pageNum, textEl);
+                    }
 
-                if (hasDragged) {
-                    // Moved - save position
-                    saveAnnotations(pageNum);
-                } else {
-                    // Not moved - short click = edit
-                    const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                    const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                    const svgX = parseFloat(textEl.getAttribute('x'));
-                    const svgY = parseFloat(textEl.getAttribute('y'));
-                    // Note: showTextEditor needs scaleX for font scaling logic, which we still have from arguments
-                    showTextEditor(ev.clientX, ev.clientY, svg, svgX, svgY, scaleX, pageNum, textEl);
+                    draggedText = null;
                 }
 
-                draggedText = null;
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
             }
 
-            document.addEventListener('mousemove', onMouseMove);
-            document.addEventListener('mouseup', onMouseUp);
-        }
+            // Inline Text Editor
+            let textFontSize = 14;
 
-        // Inline Text Editor
-        let textFontSize = 14;
+            function showTextEditor(screenX, screenY, svg, svgX, svgY, scale, pageNum, existingTextEl = null, overrideColor = null) {
+                // Remove existing editor if any
+                const existingOverlay = document.querySelector('.textEditorOverlay');
+                if (existingOverlay) existingOverlay.remove();
 
-        function showTextEditor(screenX, screenY, svg, svgX, svgY, scale, pageNum, existingTextEl = null, overrideColor = null) {
-            // Remove existing editor if any
-            const existingOverlay = document.querySelector('.textEditorOverlay');
-            if (existingOverlay) existingOverlay.remove();
+                // Use override color (for callout) or current color
+                const textColor = overrideColor || currentColor;
 
-            // Use override color (for callout) or current color
-            const textColor = overrideColor || currentColor;
+                // If editing existing text, get its properties
+                let editingText = null;
+                if (existingTextEl && typeof existingTextEl === 'object' && existingTextEl.textContent !== undefined) {
+                    editingText = existingTextEl.textContent;
+                    textFontSize = parseFloat(existingTextEl.getAttribute('font-size')) / scale || 14;
+                }
 
-            // If editing existing text, get its properties
-            let editingText = null;
-            if (existingTextEl && typeof existingTextEl === 'object' && existingTextEl.textContent !== undefined) {
-                editingText = existingTextEl.textContent;
-                textFontSize = parseFloat(existingTextEl.getAttribute('font-size')) / scale || 14;
-            }
+                // Create overlay
+                const overlay = document.createElement('div');
+                overlay.className = 'textEditorOverlay';
+
+                // Create editor box
+                const box = document.createElement('div');
+                box.className = 'textEditorBox';
+                box.style.left = screenX + 'px';
+                box.style.top = screenY + 'px';
+
+                // Input area
+                const input = document.createElement('div');
+                input.className = 'textEditorInput';
+                input.contentEditable = true;
+                input.style.color = textColor;
+                input.style.fontSize = textFontSize + 'px';
+                if (editingText) {
+                    input.textContent = editingText;
+                }
 
-            // Create overlay
-            const overlay = document.createElement('div');
-            overlay.className = 'textEditorOverlay';
-
-            // Create editor box
-            const box = document.createElement('div');
-            box.className = 'textEditorBox';
-            box.style.left = screenX + 'px';
-            box.style.top = screenY + 'px';
-
-            // Input area
-            const input = document.createElement('div');
-            input.className = 'textEditorInput';
-            input.contentEditable = true;
-            input.style.color = textColor;
-            input.style.fontSize = textFontSize + 'px';
-            if (editingText) {
-                input.textContent = editingText;
-            }
+                // Toolbar
+                const toolbar = document.createElement('div');
+                toolbar.className = 'textEditorToolbar';
 
-            // Toolbar
-            const toolbar = document.createElement('div');
-            toolbar.className = 'textEditorToolbar';
+                // Color indicator
+                const colorDot = document.createElement('div');
+                colorDot.className = 'textEditorColorDot active';
+                colorDot.style.background = textColor;
 
-            // Color indicator
-            const colorDot = document.createElement('div');
-            colorDot.className = 'textEditorColorDot active';
-            colorDot.style.background = textColor;
+                // Font size decrease
+                const decreaseBtn = document.createElement('button');
+                decreaseBtn.className = 'textEditorBtn';
+                decreaseBtn.innerHTML = 'A<sup>-</sup>';
+                decreaseBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    if (textFontSize > 10) {
+                        textFontSize -= 2;
+                        input.style.fontSize = textFontSize + 'px';
+                    }
+                };
 
-            // Font size decrease
-            const decreaseBtn = document.createElement('button');
-            decreaseBtn.className = 'textEditorBtn';
-            decreaseBtn.innerHTML = 'A<sup>-</sup>';
-            decreaseBtn.onclick = (e) => {
-                e.stopPropagation();
-                if (textFontSize > 10) {
-                    textFontSize -= 2;
-                    input.style.fontSize = textFontSize + 'px';
-                }
-            };
+                // Font size increase
+                const increaseBtn = document.createElement('button');
+                increaseBtn.className = 'textEditorBtn';
+                increaseBtn.innerHTML = 'A<sup>+</sup>';
+                increaseBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    if (textFontSize < 32) {
+                        textFontSize += 2;
+                        input.style.fontSize = textFontSize + 'px';
+                    }
+                };
 
-            // Font size increase
-            const increaseBtn = document.createElement('button');
-            increaseBtn.className = 'textEditorBtn';
-            increaseBtn.innerHTML = 'A<sup>+</sup>';
-            increaseBtn.onclick = (e) => {
-                e.stopPropagation();
-                if (textFontSize < 32) {
-                    textFontSize += 2;
-                    input.style.fontSize = textFontSize + 'px';
-                }
-            };
+                // Delete button - also deletes existing element if editing
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'textEditorBtn delete';
+                deleteBtn.innerHTML = '🗑️';
+                deleteBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    if (existingTextEl) {
+                        existingTextEl.remove();
+                        saveAnnotations(pageNum);
+                    }
+                    overlay.remove();
+                };
 
-            // Delete button - also deletes existing element if editing
-            const deleteBtn = document.createElement('button');
-            deleteBtn.className = 'textEditorBtn delete';
-            deleteBtn.innerHTML = '🗑️';
-            deleteBtn.onclick = (e) => {
-                e.stopPropagation();
-                if (existingTextEl) {
-                    existingTextEl.remove();
-                    saveAnnotations(pageNum);
+                toolbar.appendChild(colorDot);
+                toolbar.appendChild(decreaseBtn);
+                toolbar.appendChild(increaseBtn);
+                toolbar.appendChild(deleteBtn);
+
+                box.appendChild(input);
+                box.appendChild(toolbar);
+                overlay.appendChild(box);
+                document.body.appendChild(overlay);
+
+                // Focus input and select all if editing
+                setTimeout(() => {
+                    input.focus();
+                    if (editingText) {
+                        const range = document.createRange();
+                        range.selectNodeContents(input);
+                        const sel = window.getSelection();
+                        sel.removeAllRanges();
+                        sel.addRange(range);
+                    }
+                }, 50);
+
+                // Confirm on click outside or Enter
+                function confirmText() {
+                    const text = input.textContent.trim();
+                    if (text) {
+                        if (existingTextEl) {
+                            // Update existing text element
+                            existingTextEl.textContent = text;
+                            existingTextEl.setAttribute('fill', textColor);
+                            existingTextEl.setAttribute('font-size', String(textFontSize * scale));
+                        } else {
+                            // Create new text element
+                            const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                            textEl.setAttribute('x', svgX.toFixed(2));
+                            textEl.setAttribute('y', svgY.toFixed(2));
+                            textEl.setAttribute('fill', textColor);
+                            textEl.setAttribute('font-size', String(textFontSize * scale));
+                            textEl.setAttribute('font-family', 'Segoe UI, Arial, sans-serif');
+                            textEl.textContent = text;
+                            svg.appendChild(textEl);
+                        }
+                        saveAnnotations(pageNum);
+                    } else if (existingTextEl) {
+                        // Empty text = delete existing
+                        existingTextEl.remove();
+                        saveAnnotations(pageNum);
+                    }
+                    overlay.remove();
                 }
-                overlay.remove();
-            };
 
-            toolbar.appendChild(colorDot);
-            toolbar.appendChild(decreaseBtn);
-            toolbar.appendChild(increaseBtn);
-            toolbar.appendChild(deleteBtn);
-
-            box.appendChild(input);
-            box.appendChild(toolbar);
-            overlay.appendChild(box);
-            document.body.appendChild(overlay);
+                overlay.addEventListener('click', (e) => {
+                    if (e.target === overlay) confirmText();
+                });
 
-            // Focus input and select all if editing
-            setTimeout(() => {
-                input.focus();
-                if (editingText) {
-                    const range = document.createRange();
-                    range.selectNodeContents(input);
-                    const sel = window.getSelection();
-                    sel.removeAllRanges();
-                    sel.addRange(range);
-                }
-            }, 50);
-
-            // Confirm on click outside or Enter
-            function confirmText() {
-                const text = input.textContent.trim();
-                if (text) {
-                    if (existingTextEl) {
-                        // Update existing text element
-                        existingTextEl.textContent = text;
-                        existingTextEl.setAttribute('fill', textColor);
-                        existingTextEl.setAttribute('font-size', String(textFontSize * scale));
-                    } else {
-                        // Create new text element
-                        const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                        textEl.setAttribute('x', svgX.toFixed(2));
-                        textEl.setAttribute('y', svgY.toFixed(2));
-                        textEl.setAttribute('fill', textColor);
-                        textEl.setAttribute('font-size', String(textFontSize * scale));
-                        textEl.setAttribute('font-family', 'Segoe UI, Arial, sans-serif');
-                        textEl.textContent = text;
-                        svg.appendChild(textEl);
+                input.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        confirmText();
                     }
-                    saveAnnotations(pageNum);
-                } else if (existingTextEl) {
-                    // Empty text = delete existing
-                    existingTextEl.remove();
-                    saveAnnotations(pageNum);
-                }
-                overlay.remove();
+                    if (e.key === 'Escape') {
+                        overlay.remove();
+                    }
+                });
             }
 
-            overlay.addEventListener('click', (e) => {
-                if (e.target === overlay) confirmText();
-            });
+            function eraseAt(svg, x, y, scale = 1) {
+                const hitRadius = 15 * scale; // Scale hit radius with viewBox
+                // Erase paths, text, and shape elements (rect, ellipse, line)
+                svg.querySelectorAll('path, text, rect, ellipse, line').forEach(el => {
+                    const bbox = el.getBBox();
+                    if (x >= bbox.x - hitRadius && x <= bbox.x + bbox.width + hitRadius &&
+                        y >= bbox.y - hitRadius && y <= bbox.y + bbox.height + hitRadius) {
+                        el.remove();
+                    }
+                });
 
-            input.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    confirmText();
-                }
-                if (e.key === 'Escape') {
-                    overlay.remove();
+                // Also erase text highlights (in separate container)
+                const pageDiv = svg.closest('.page');
+                if (pageDiv) {
+                    const highlightContainer = pageDiv.querySelector('.textHighlightContainer');
+                    if (highlightContainer) {
+                        const pageRect = pageDiv.getBoundingClientRect();
+                        const svgRect = svg.getBoundingClientRect();
+                        // Convert viewBox coords to screen coords, then to percentages
+                        const screenX = (x / scale) + svgRect.left - pageRect.left;
+                        const screenY = (y / scale) + svgRect.top - pageRect.top;
+                        const screenXPercent = (screenX / pageRect.width) * 100;
+                        const screenYPercent = (screenY / pageRect.height) * 100;
+
+                        highlightContainer.querySelectorAll('.textHighlight').forEach(el => {
+                            const left = parseFloat(el.style.left); // Already in %
+                            const top = parseFloat(el.style.top);
+                            const width = parseFloat(el.style.width);
+                            const height = parseFloat(el.style.height);
+
+                            if (screenXPercent >= left - 2 && screenXPercent <= left + width + 2 &&
+                                screenYPercent >= top - 2 && screenYPercent <= top + height + 2) {
+                                el.remove();
+                                // Save changes
+                                const pageNum = parseInt(pageDiv.dataset.pageNumber);
+                                saveTextHighlights(pageNum, pageDiv);
+                            }
+                        });
+                    }
                 }
-            });
-        }
+            }
 
-        function eraseAt(svg, x, y, scale = 1) {
-            const hitRadius = 15 * scale; // Scale hit radius with viewBox
-            // Erase paths, text, and shape elements (rect, ellipse, line)
-            svg.querySelectorAll('path, text, rect, ellipse, line').forEach(el => {
-                const bbox = el.getBBox();
-                if (x >= bbox.x - hitRadius && x <= bbox.x + bbox.width + hitRadius &&
-                    y >= bbox.y - hitRadius && y <= bbox.y + bbox.height + hitRadius) {
-                    el.remove();
-                }
-            });
+            // ==========================================
+            // TEXT SELECTION HIGHLIGHTING (Adobe/Edge style)
+            // ==========================================
+            let highlightPopup = null;
 
-            // Also erase text highlights (in separate container)
-            const pageDiv = svg.closest('.page');
-            if (pageDiv) {
-                const highlightContainer = pageDiv.querySelector('.textHighlightContainer');
-                if (highlightContainer) {
-                    const pageRect = pageDiv.getBoundingClientRect();
-                    const svgRect = svg.getBoundingClientRect();
-                    // Convert viewBox coords to screen coords, then to percentages
-                    const screenX = (x / scale) + svgRect.left - pageRect.left;
-                    const screenY = (y / scale) + svgRect.top - pageRect.top;
-                    const screenXPercent = (screenX / pageRect.width) * 100;
-                    const screenYPercent = (screenY / pageRect.height) * 100;
-
-                    highlightContainer.querySelectorAll('.textHighlight').forEach(el => {
-                        const left = parseFloat(el.style.left); // Already in %
-                        const top = parseFloat(el.style.top);
-                        const width = parseFloat(el.style.width);
-                        const height = parseFloat(el.style.height);
-
-                        if (screenXPercent >= left - 2 && screenXPercent <= left + width + 2 &&
-                            screenYPercent >= top - 2 && screenYPercent <= top + height + 2) {
-                            el.remove();
-                            // Save changes
-                            const pageNum = parseInt(pageDiv.dataset.pageNumber);
-                            saveTextHighlights(pageNum, pageDiv);
-                        }
-                    });
+            function removeHighlightPopup() {
+                if (highlightPopup) {
+                    highlightPopup.remove();
+                    highlightPopup = null;
                 }
             }
-        }
 
-        // ==========================================
-        // TEXT SELECTION HIGHLIGHTING (Adobe/Edge style)
-        // ==========================================
-        let highlightPopup = null;
+            function getSelectionRects() {
+                const selection = window.getSelection();
+                if (!selection || selection.isCollapsed || !selection.rangeCount) return null;
 
-        function removeHighlightPopup() {
-            if (highlightPopup) {
-                highlightPopup.remove();
-                highlightPopup = null;
-            }
-        }
+                const range = selection.getRangeAt(0);
+                const rects = range.getClientRects();
+                if (rects.length === 0) return null;
 
-        function getSelectionRects() {
-            const selection = window.getSelection();
-            if (!selection || selection.isCollapsed || !selection.rangeCount) return null;
+                // Find which page the selection is in
+                const startNode = range.startContainer.parentElement;
+                const textLayer = startNode?.closest('.textLayer');
+                if (!textLayer) return null;
 
-            const range = selection.getRangeAt(0);
-            const rects = range.getClientRects();
-            if (rects.length === 0) return null;
+                const pageDiv = textLayer.closest('.page');
+                if (!pageDiv) return null;
 
-            // Find which page the selection is in
-            const startNode = range.startContainer.parentElement;
-            const textLayer = startNode?.closest('.textLayer');
-            if (!textLayer) return null;
+                const pageNum = parseInt(pageDiv.dataset.pageNumber);
+                const pageRect = pageDiv.getBoundingClientRect();
 
-            const pageDiv = textLayer.closest('.page');
-            if (!pageDiv) return null;
-
-            const pageNum = parseInt(pageDiv.dataset.pageNumber);
-            const pageRect = pageDiv.getBoundingClientRect();
+                // Convert rects to page-relative coordinates
+                const relativeRects = [];
+                for (let i = 0; i < rects.length; i++) {
+                    const rect = rects[i];
+                    relativeRects.push({
+                        x: rect.left - pageRect.left,
+                        y: rect.top - pageRect.top,
+                        width: rect.width,
+                        height: rect.height
+                    });
+                }
 
-            // Convert rects to page-relative coordinates
-            const relativeRects = [];
-            for (let i = 0; i < rects.length; i++) {
-                const rect = rects[i];
-                relativeRects.push({
-                    x: rect.left - pageRect.left,
-                    y: rect.top - pageRect.top,
-                    width: rect.width,
-                    height: rect.height
-                });
+                return { pageNum, pageDiv, relativeRects, lastRect: rects[rects.length - 1] };
             }
 
-            return { pageNum, pageDiv, relativeRects, lastRect: rects[rects.length - 1] };
-        }
-
-        function createTextHighlights(pageDiv, rects, color) {
-            // Find or create highlight container
-            let highlightContainer = pageDiv.querySelector('.textHighlightContainer');
-            if (!highlightContainer) {
-                highlightContainer = document.createElement('div');
-                highlightContainer.className = 'textHighlightContainer';
-                highlightContainer.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
-                pageDiv.insertBefore(highlightContainer, pageDiv.firstChild);
-            }
+            function createTextHighlights(pageDiv, rects, color) {
+                // Find or create highlight container
+                let highlightContainer = pageDiv.querySelector('.textHighlightContainer');
+                if (!highlightContainer) {
+                    highlightContainer = document.createElement('div');
+                    highlightContainer.className = 'textHighlightContainer';
+                    highlightContainer.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
+                    pageDiv.insertBefore(highlightContainer, pageDiv.firstChild);
+                }
 
-            // Get page dimensions for percentage calculation
-            const pageRect = pageDiv.getBoundingClientRect();
-            const pageWidth = pageRect.width;
-            const pageHeight = pageRect.height;
+                // Get page dimensions for percentage calculation
+                const pageRect = pageDiv.getBoundingClientRect();
+                const pageWidth = pageRect.width;
+                const pageHeight = pageRect.height;
 
-            // Add highlight rectangles with percentage positioning
-            rects.forEach(rect => {
-                const div = document.createElement('div');
-                div.className = 'textHighlight';
+                // Add highlight rectangles with percentage positioning
+                rects.forEach(rect => {
+                    const div = document.createElement('div');
+                    div.className = 'textHighlight';
 
-                // Convert to percentages for zoom-independent positioning
-                const leftPercent = (rect.x / pageWidth) * 100;
-                const topPercent = (rect.y / pageHeight) * 100;
-                const widthPercent = (rect.width / pageWidth) * 100;
-                const heightPercent = (rect.height / pageHeight) * 100;
+                    // Convert to percentages for zoom-independent positioning
+                    const leftPercent = (rect.x / pageWidth) * 100;
+                    const topPercent = (rect.y / pageHeight) * 100;
+                    const widthPercent = (rect.width / pageWidth) * 100;
+                    const heightPercent = (rect.height / pageHeight) * 100;
 
-                div.style.cssText = `
+                    div.style.cssText = `
                     left: ${leftPercent}%;
                     top: ${topPercent}%;
                     width: ${widthPercent}%;
@@ -2531,107 +2573,107 @@
                     background: ${color};
                     opacity: 0.35;
                 `;
-                highlightContainer.appendChild(div);
-            });
+                    highlightContainer.appendChild(div);
+                });
 
-            // Save to annotations store
-            const pageNum = parseInt(pageDiv.dataset.pageNumber);
-            saveTextHighlights(pageNum, pageDiv);
-        }
+                // Save to annotations store
+                const pageNum = parseInt(pageDiv.dataset.pageNumber);
+                saveTextHighlights(pageNum, pageDiv);
+            }
 
-        function saveTextHighlights(pageNum, pageDiv) {
-            const container = pageDiv.querySelector('.textHighlightContainer');
-            if (container) {
-                const key = `textHighlight_${pageNum}`;
-                localStorage.setItem(key, container.innerHTML);
+            function saveTextHighlights(pageNum, pageDiv) {
+                const container = pageDiv.querySelector('.textHighlightContainer');
+                if (container) {
+                    const key = `textHighlight_${pageNum}`;
+                    localStorage.setItem(key, container.innerHTML);
+                }
             }
-        }
 
-        function loadTextHighlights(pageNum, pageDiv) {
-            const key = `textHighlight_${pageNum}`;
-            const saved = localStorage.getItem(key);
-            if (saved) {
-                let container = pageDiv.querySelector('.textHighlightContainer');
-                if (!container) {
-                    container = document.createElement('div');
-                    container.className = 'textHighlightContainer';
-                    container.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
-                    pageDiv.insertBefore(container, pageDiv.firstChild);
+            function loadTextHighlights(pageNum, pageDiv) {
+                const key = `textHighlight_${pageNum}`;
+                const saved = localStorage.getItem(key);
+                if (saved) {
+                    let container = pageDiv.querySelector('.textHighlightContainer');
+                    if (!container) {
+                        container = document.createElement('div');
+                        container.className = 'textHighlightContainer';
+                        container.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
+                        pageDiv.insertBefore(container, pageDiv.firstChild);
+                    }
+                    container.innerHTML = saved;
                 }
-                container.innerHTML = saved;
             }
-        }
 
-        function showHighlightPopup(x, y, pageDiv, rects) {
-            removeHighlightPopup();
+            function showHighlightPopup(x, y, pageDiv, rects) {
+                removeHighlightPopup();
 
-            highlightPopup = document.createElement('div');
-            highlightPopup.className = 'highlightPopup';
-            highlightPopup.style.left = x + 'px';
-            highlightPopup.style.top = (y + 10) + 'px';
+                highlightPopup = document.createElement('div');
+                highlightPopup.className = 'highlightPopup';
+                highlightPopup.style.left = x + 'px';
+                highlightPopup.style.top = (y + 10) + 'px';
+
+                const colors = ['#fff100', '#16c60c', '#00b7c3', '#0078d4', '#886ce4', '#e81224'];
+                colors.forEach(color => {
+                    const btn = document.createElement('button');
+                    btn.style.background = color;
+                    btn.title = 'Vurgula';
+                    btn.onclick = (e) => {
+                        e.stopPropagation();
+                        createTextHighlights(pageDiv, rects, color);
+                        window.getSelection().removeAllRanges();
+                        removeHighlightPopup();
+                    };
+                    highlightPopup.appendChild(btn);
+                });
 
-            const colors = ['#fff100', '#16c60c', '#00b7c3', '#0078d4', '#886ce4', '#e81224'];
-            colors.forEach(color => {
-                const btn = document.createElement('button');
-                btn.style.background = color;
-                btn.title = 'Vurgula';
-                btn.onclick = (e) => {
-                    e.stopPropagation();
-                    createTextHighlights(pageDiv, rects, color);
-                    window.getSelection().removeAllRanges();
-                    removeHighlightPopup();
-                };
-                highlightPopup.appendChild(btn);
-            });
+                document.body.appendChild(highlightPopup);
+            }
 
-            document.body.appendChild(highlightPopup);
-        }
+            // Listen for text selection
+            document.addEventListener('mouseup', (e) => {
+                // Small delay to let selection finalize
+                setTimeout(() => {
+                    const selData = getSelectionRects();
+                    if (selData && selData.relativeRects.length > 0) {
+                        const lastRect = selData.lastRect;
+                        showHighlightPopup(lastRect.right, lastRect.bottom, selData.pageDiv, selData.relativeRects);
+                    } else {
+                        removeHighlightPopup();
+                    }
+                }, 10);
+            });
 
-        // Listen for text selection
-        document.addEventListener('mouseup', (e) => {
-            // Small delay to let selection finalize
-            setTimeout(() => {
-                const selData = getSelectionRects();
-                if (selData && selData.relativeRects.length > 0) {
-                    const lastRect = selData.lastRect;
-                    showHighlightPopup(lastRect.right, lastRect.bottom, selData.pageDiv, selData.relativeRects);
-                } else {
+            // Remove popup on click elsewhere
+            document.addEventListener('mousedown', (e) => {
+                if (highlightPopup && !highlightPopup.contains(e.target)) {
                     removeHighlightPopup();
                 }
-            }, 10);
-        });
+            });
 
-        // Remove popup on click elsewhere
-        document.addEventListener('mousedown', (e) => {
-            if (highlightPopup && !highlightPopup.contains(e.target)) {
-                removeHighlightPopup();
-            }
-        });
+            // Load text highlights when pages render
+            eventBus.on('pagerendered', (evt) => {
+                const pageDiv = pdfViewer.getPageView(evt.pageNumber - 1)?.div;
+                if (pageDiv) {
+                    loadTextHighlights(evt.pageNumber, pageDiv);
+                }
+            });
 
-        // Load text highlights when pages render
-        eventBus.on('pagerendered', (evt) => {
-            const pageDiv = pdfViewer.getPageView(evt.pageNumber - 1)?.div;
-            if (pageDiv) {
-                loadTextHighlights(evt.pageNumber, pageDiv);
-            }
-        });
-
-        // ==========================================
-        // SELECT/MOVE TOOL (Fixed + Touch Support)
-        // ==========================================
-        let selectedAnnotation = null;
-        let selectedSvg = null;
-        let selectedPageNum = null;
-        let copiedAnnotation = null;
-        let copiedPageNum = null;
-        let isDraggingAnnotation = false;
-        let annotationDragStartX = 0;
-        let annotationDragStartY = 0;
-
-        // Create selection toolbar for touch devices
-        const selectionToolbar = document.createElement('div');
-        selectionToolbar.className = 'selection-toolbar';
-        selectionToolbar.innerHTML = `
+            // ==========================================
+            // SELECT/MOVE TOOL (Fixed + Touch Support)
+            // ==========================================
+            let selectedAnnotation = null;
+            let selectedSvg = null;
+            let selectedPageNum = null;
+            let copiedAnnotation = null;
+            let copiedPageNum = null;
+            let isDraggingAnnotation = false;
+            let annotationDragStartX = 0;
+            let annotationDragStartY = 0;
+
+            // Create selection toolbar for touch devices
+            const selectionToolbar = document.createElement('div');
+            selectionToolbar.className = 'selection-toolbar';
+            selectionToolbar.innerHTML = `
             <button data-action="copy" title="Kopyala (Ctrl+C)">
                 <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
                 <span>Kopyala</span>
@@ -2645,355 +2687,355 @@
                 <span>Sil</span>
             </button>
         `;
-        document.body.appendChild(selectionToolbar);
-
-        // Selection toolbar event handlers
-        selectionToolbar.addEventListener('click', (e) => {
-            const btn = e.target.closest('button');
-            if (!btn) return;
-
-            const action = btn.dataset.action;
-            if (action === 'copy') {
-                copySelectedAnnotation();
-                showToast('Kopyalandı!');
-            } else if (action === 'duplicate') {
-                copySelectedAnnotation();
-                pasteAnnotation();
-                showToast('Çoğaltıldı!');
-            } else if (action === 'delete') {
-                deleteSelectedAnnotation();
-                showToast('Silindi!');
-            }
-        });
+            document.body.appendChild(selectionToolbar);
+
+            // Selection toolbar event handlers
+            selectionToolbar.addEventListener('click', (e) => {
+                const btn = e.target.closest('button');
+                if (!btn) return;
+
+                const action = btn.dataset.action;
+                if (action === 'copy') {
+                    copySelectedAnnotation();
+                    showToast('Kopyalandı!');
+                } else if (action === 'duplicate') {
+                    copySelectedAnnotation();
+                    pasteAnnotation();
+                    showToast('Çoğaltıldı!');
+                } else if (action === 'delete') {
+                    deleteSelectedAnnotation();
+                    showToast('Silindi!');
+                }
+            });
 
-        function showToast(message) {
-            const existingToast = document.querySelector('.toast-notification');
-            if (existingToast) existingToast.remove();
+            function showToast(message) {
+                const existingToast = document.querySelector('.toast-notification');
+                if (existingToast) existingToast.remove();
 
-            const toast = document.createElement('div');
-            toast.className = 'toast-notification';
-            toast.textContent = message;
-            document.body.appendChild(toast);
-            setTimeout(() => toast.remove(), 2000);
-        }
+                const toast = document.createElement('div');
+                toast.className = 'toast-notification';
+                toast.textContent = message;
+                document.body.appendChild(toast);
+                setTimeout(() => toast.remove(), 2000);
+            }
 
-        function updateSelectionToolbar() {
-            if (selectedAnnotation && currentTool === 'select') {
-                selectionToolbar.classList.add('visible');
-            } else {
-                selectionToolbar.classList.remove('visible');
+            function updateSelectionToolbar() {
+                if (selectedAnnotation && currentTool === 'select') {
+                    selectionToolbar.classList.add('visible');
+                } else {
+                    selectionToolbar.classList.remove('visible');
+                }
             }
-        }
 
-        function clearAnnotationSelection() {
-            if (selectedAnnotation) {
-                selectedAnnotation.classList.remove('annotation-selected', 'annotation-dragging', 'just-selected');
+            function clearAnnotationSelection() {
+                if (selectedAnnotation) {
+                    selectedAnnotation.classList.remove('annotation-selected', 'annotation-dragging', 'just-selected');
+                }
+                selectedAnnotation = null;
+                selectedSvg = null;
+                selectedPageNum = null;
+                isDraggingAnnotation = false;
+                updateSelectionToolbar();
             }
-            selectedAnnotation = null;
-            selectedSvg = null;
-            selectedPageNum = null;
-            isDraggingAnnotation = false;
-            updateSelectionToolbar();
-        }
 
-        function selectAnnotation(element, svg, pageNum) {
-            clearAnnotationSelection();
-            selectedAnnotation = element;
-            selectedSvg = svg;
-            selectedPageNum = pageNum;
-            element.classList.add('annotation-selected', 'just-selected');
+            function selectAnnotation(element, svg, pageNum) {
+                clearAnnotationSelection();
+                selectedAnnotation = element;
+                selectedSvg = svg;
+                selectedPageNum = pageNum;
+                element.classList.add('annotation-selected', 'just-selected');
 
-            // Remove pulse animation after it completes
-            setTimeout(() => {
-                element.classList.remove('just-selected');
-            }, 600);
+                // Remove pulse animation after it completes
+                setTimeout(() => {
+                    element.classList.remove('just-selected');
+                }, 600);
 
-            updateSelectionToolbar();
-        }
+                updateSelectionToolbar();
+            }
 
-        function deleteSelectedAnnotation() {
-            if (selectedAnnotation && selectedSvg) {
-                selectedAnnotation.remove();
-                saveAnnotations(selectedPageNum);
-                clearAnnotationSelection();
+            function deleteSelectedAnnotation() {
+                if (selectedAnnotation && selectedSvg) {
+                    selectedAnnotation.remove();
+                    saveAnnotations(selectedPageNum);
+                    clearAnnotationSelection();
+                }
             }
-        }
 
-        function copySelectedAnnotation() {
-            if (selectedAnnotation) {
-                copiedAnnotation = selectedAnnotation.cloneNode(true);
-                copiedAnnotation.classList.remove('annotation-selected', 'annotation-dragging', 'just-selected');
-                copiedPageNum = selectedPageNum;
+            function copySelectedAnnotation() {
+                if (selectedAnnotation) {
+                    copiedAnnotation = selectedAnnotation.cloneNode(true);
+                    copiedAnnotation.classList.remove('annotation-selected', 'annotation-dragging', 'just-selected');
+                    copiedPageNum = selectedPageNum;
+                }
             }
-        }
 
-        function pasteAnnotation() {
-            if (!copiedAnnotation || !pdfViewer) return;
+            function pasteAnnotation() {
+                if (!copiedAnnotation || !pdfViewer) return;
 
-            // Paste to current page
-            const currentPage = pdfViewer.currentPageNumber;
-            const pageView = pdfViewer.getPageView(currentPage - 1);
-            const svg = pageView?.div?.querySelector('.annotationLayer');
+                // Paste to current page
+                const currentPage = pdfViewer.currentPageNumber;
+                const pageView = pdfViewer.getPageView(currentPage - 1);
+                const svg = pageView?.div?.querySelector('.annotationLayer');
 
-            if (svg) {
-                const cloned = copiedAnnotation.cloneNode(true);
-                const offset = 30; // Offset amount for pasted elements
+                if (svg) {
+                    const cloned = copiedAnnotation.cloneNode(true);
+                    const offset = 30; // Offset amount for pasted elements
 
-                // Offset pasted element slightly
-                if (cloned.tagName === 'path') {
-                    // For paths, add/update transform translate
-                    const currentTransform = cloned.getAttribute('transform') || '';
-                    const match = currentTransform.match(/translate\(([^,]+),([^)]+)\)/);
-                    let tx = offset, ty = offset;
-                    if (match) {
-                        tx = parseFloat(match[1]) + offset;
-                        ty = parseFloat(match[2]) + offset;
+                    // Offset pasted element slightly
+                    if (cloned.tagName === 'path') {
+                        // For paths, add/update transform translate
+                        const currentTransform = cloned.getAttribute('transform') || '';
+                        const match = currentTransform.match(/translate\(([^,]+),([^)]+)\)/);
+                        let tx = offset, ty = offset;
+                        if (match) {
+                            tx = parseFloat(match[1]) + offset;
+                            ty = parseFloat(match[2]) + offset;
+                        }
+                        cloned.setAttribute('transform', `translate(${tx}, ${ty})`);
+                    } else if (cloned.tagName === 'rect') {
+                        cloned.setAttribute('x', parseFloat(cloned.getAttribute('x')) + offset);
+                        cloned.setAttribute('y', parseFloat(cloned.getAttribute('y')) + offset);
+                    } else if (cloned.tagName === 'ellipse') {
+                        cloned.setAttribute('cx', parseFloat(cloned.getAttribute('cx')) + offset);
+                        cloned.setAttribute('cy', parseFloat(cloned.getAttribute('cy')) + offset);
+                    } else if (cloned.tagName === 'line') {
+                        cloned.setAttribute('x1', parseFloat(cloned.getAttribute('x1')) + offset);
+                        cloned.setAttribute('y1', parseFloat(cloned.getAttribute('y1')) + offset);
+                        cloned.setAttribute('x2', parseFloat(cloned.getAttribute('x2')) + offset);
+                        cloned.setAttribute('y2', parseFloat(cloned.getAttribute('y2')) + offset);
+                    } else if (cloned.tagName === 'text') {
+                        cloned.setAttribute('x', parseFloat(cloned.getAttribute('x')) + offset);
+                        cloned.setAttribute('y', parseFloat(cloned.getAttribute('y')) + offset);
                     }
-                    cloned.setAttribute('transform', `translate(${tx}, ${ty})`);
-                } else if (cloned.tagName === 'rect') {
-                    cloned.setAttribute('x', parseFloat(cloned.getAttribute('x')) + offset);
-                    cloned.setAttribute('y', parseFloat(cloned.getAttribute('y')) + offset);
-                } else if (cloned.tagName === 'ellipse') {
-                    cloned.setAttribute('cx', parseFloat(cloned.getAttribute('cx')) + offset);
-                    cloned.setAttribute('cy', parseFloat(cloned.getAttribute('cy')) + offset);
-                } else if (cloned.tagName === 'line') {
-                    cloned.setAttribute('x1', parseFloat(cloned.getAttribute('x1')) + offset);
-                    cloned.setAttribute('y1', parseFloat(cloned.getAttribute('y1')) + offset);
-                    cloned.setAttribute('x2', parseFloat(cloned.getAttribute('x2')) + offset);
-                    cloned.setAttribute('y2', parseFloat(cloned.getAttribute('y2')) + offset);
-                } else if (cloned.tagName === 'text') {
-                    cloned.setAttribute('x', parseFloat(cloned.getAttribute('x')) + offset);
-                    cloned.setAttribute('y', parseFloat(cloned.getAttribute('y')) + offset);
-                }
-
-                svg.appendChild(cloned);
-                saveAnnotations(currentPage);
-                selectAnnotation(cloned, svg, currentPage);
-            }
-        }
 
-        // Get coordinates from mouse or touch event
-        function getEventCoords(e) {
-            if (e.touches && e.touches.length > 0) {
-                return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+                    svg.appendChild(cloned);
+                    saveAnnotations(currentPage);
+                    selectAnnotation(cloned, svg, currentPage);
+                }
             }
-            if (e.changedTouches && e.changedTouches.length > 0) {
-                return { clientX: e.changedTouches[0].clientX, clientY: e.changedTouches[0].clientY };
+
+            // Get coordinates from mouse or touch event
+            function getEventCoords(e) {
+                if (e.touches && e.touches.length > 0) {
+                    return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+                }
+                if (e.changedTouches && e.changedTouches.length > 0) {
+                    return { clientX: e.changedTouches[0].clientX, clientY: e.changedTouches[0].clientY };
+                }
+                return { clientX: e.clientX, clientY: e.clientY };
             }
-            return { clientX: e.clientX, clientY: e.clientY };
-        }
 
-        // Handle select tool events (both mouse and touch)
-        function handleSelectPointerDown(e, svg, pageNum) {
-            if (currentTool !== 'select') return false;
+            // Handle select tool events (both mouse and touch)
+            function handleSelectPointerDown(e, svg, pageNum) {
+                if (currentTool !== 'select') return false;
 
-            const coords = getEventCoords(e);
-            const target = e.target;
+                const coords = getEventCoords(e);
+                const target = e.target;
 
-            if (target === svg || target.tagName === 'svg') {
-                // Clicked on empty area - deselect
-                clearAnnotationSelection();
-                return true;
-            }
+                if (target === svg || target.tagName === 'svg') {
+                    // Clicked on empty area - deselect
+                    clearAnnotationSelection();
+                    return true;
+                }
 
-            // Check if clicked on an annotation element
-            if (target.closest('.annotationLayer') && target !== svg) {
-                e.preventDefault();
-                e.stopPropagation();
+                // Check if clicked on an annotation element
+                if (target.closest('.annotationLayer') && target !== svg) {
+                    e.preventDefault();
+                    e.stopPropagation();
 
-                selectAnnotation(target, svg, pageNum);
+                    selectAnnotation(target, svg, pageNum);
 
-                // Start drag
-                const rect = svg.getBoundingClientRect();
-                const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                const scaleX = viewBoxWidth / rect.width;
-                const scaleY = viewBoxHeight / rect.height;
+                    // Start drag
+                    const rect = svg.getBoundingClientRect();
+                    const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
+                    const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
+                    const scaleX = viewBoxWidth / rect.width;
+                    const scaleY = viewBoxHeight / rect.height;
 
-                isDraggingAnnotation = true;
-                annotationDragStartX = coords.clientX;
-                annotationDragStartY = coords.clientY;
+                    isDraggingAnnotation = true;
+                    annotationDragStartX = coords.clientX;
+                    annotationDragStartY = coords.clientY;
 
-                target.classList.add('annotation-dragging');
+                    target.classList.add('annotation-dragging');
 
-                function onMove(ev) {
-                    if (!isDraggingAnnotation) return;
-                    ev.preventDefault();
+                    function onMove(ev) {
+                        if (!isDraggingAnnotation) return;
+                        ev.preventDefault();
 
-                    const moveCoords = getEventCoords(ev);
-                    const dx = (moveCoords.clientX - annotationDragStartX) * scaleX;
-                    const dy = (moveCoords.clientY - annotationDragStartY) * scaleY;
+                        const moveCoords = getEventCoords(ev);
+                        const dx = (moveCoords.clientX - annotationDragStartX) * scaleX;
+                        const dy = (moveCoords.clientY - annotationDragStartY) * scaleY;
 
-                    // Move the element
-                    moveAnnotation(target, dx, dy);
+                        // Move the element
+                        moveAnnotation(target, dx, dy);
 
-                    // Update start position for next move (CRITICAL FIX)
-                    annotationDragStartX = moveCoords.clientX;
-                    annotationDragStartY = moveCoords.clientY;
-                }
+                        // Update start position for next move (CRITICAL FIX)
+                        annotationDragStartX = moveCoords.clientX;
+                        annotationDragStartY = moveCoords.clientY;
+                    }
 
-                function onEnd(ev) {
-                    document.removeEventListener('mousemove', onMove);
-                    document.removeEventListener('mouseup', onEnd);
-                    document.removeEventListener('touchmove', onMove);
-                    document.removeEventListener('touchend', onEnd);
-                    document.removeEventListener('touchcancel', onEnd);
+                    function onEnd(ev) {
+                        document.removeEventListener('mousemove', onMove);
+                        document.removeEventListener('mouseup', onEnd);
+                        document.removeEventListener('touchmove', onMove);
+                        document.removeEventListener('touchend', onEnd);
+                        document.removeEventListener('touchcancel', onEnd);
 
-                    target.classList.remove('annotation-dragging');
-                    isDraggingAnnotation = false;
-                    saveAnnotations(pageNum);
+                        target.classList.remove('annotation-dragging');
+                        isDraggingAnnotation = false;
+                        saveAnnotations(pageNum);
+                    }
+
+                    document.addEventListener('mousemove', onMove, { passive: false });
+                    document.addEventListener('mouseup', onEnd);
+                    document.addEventListener('touchmove', onMove, { passive: false });
+                    document.addEventListener('touchend', onEnd);
+                    document.addEventListener('touchcancel', onEnd);
+
+                    return true;
                 }
 
-                document.addEventListener('mousemove', onMove, { passive: false });
-                document.addEventListener('mouseup', onEnd);
-                document.addEventListener('touchmove', onMove, { passive: false });
-                document.addEventListener('touchend', onEnd);
-                document.addEventListener('touchcancel', onEnd);
+                return false;
+            }
 
-                return true;
+            // moveAnnotation - applies delta movement to an annotation element
+            function moveAnnotation(element, dx, dy) {
+                if (element.tagName === 'path') {
+                    // Transform path using translate
+                    const currentTransform = element.getAttribute('transform') || '';
+                    const match = currentTransform.match(/translate\(([^,]+),\s*([^)]+)\)/);
+                    let tx = 0, ty = 0;
+                    if (match) {
+                        tx = parseFloat(match[1]);
+                        ty = parseFloat(match[2]);
+                    }
+                    element.setAttribute('transform', `translate(${tx + dx}, ${ty + dy})`);
+                } else if (element.tagName === 'rect') {
+                    element.setAttribute('x', parseFloat(element.getAttribute('x')) + dx);
+                    element.setAttribute('y', parseFloat(element.getAttribute('y')) + dy);
+                } else if (element.tagName === 'ellipse') {
+                    element.setAttribute('cx', parseFloat(element.getAttribute('cx')) + dx);
+                    element.setAttribute('cy', parseFloat(element.getAttribute('cy')) + dy);
+                } else if (element.tagName === 'line') {
+                    element.setAttribute('x1', parseFloat(element.getAttribute('x1')) + dx);
+                    element.setAttribute('y1', parseFloat(element.getAttribute('y1')) + dy);
+                    element.setAttribute('x2', parseFloat(element.getAttribute('x2')) + dx);
+                    element.setAttribute('y2', parseFloat(element.getAttribute('y2')) + dy);
+                } else if (element.tagName === 'text') {
+                    element.setAttribute('x', parseFloat(element.getAttribute('x')) + dx);
+                    element.setAttribute('y', parseFloat(element.getAttribute('y')) + dy);
+                }
             }
 
-            return false;
-        }
-
-        // moveAnnotation - applies delta movement to an annotation element
-        function moveAnnotation(element, dx, dy) {
-            if (element.tagName === 'path') {
-                // Transform path using translate
-                const currentTransform = element.getAttribute('transform') || '';
-                const match = currentTransform.match(/translate\(([^,]+),\s*([^)]+)\)/);
-                let tx = 0, ty = 0;
-                if (match) {
-                    tx = parseFloat(match[1]);
-                    ty = parseFloat(match[2]);
-                }
-                element.setAttribute('transform', `translate(${tx + dx}, ${ty + dy})`);
-            } else if (element.tagName === 'rect') {
-                element.setAttribute('x', parseFloat(element.getAttribute('x')) + dx);
-                element.setAttribute('y', parseFloat(element.getAttribute('y')) + dy);
-            } else if (element.tagName === 'ellipse') {
-                element.setAttribute('cx', parseFloat(element.getAttribute('cx')) + dx);
-                element.setAttribute('cy', parseFloat(element.getAttribute('cy')) + dy);
-            } else if (element.tagName === 'line') {
-                element.setAttribute('x1', parseFloat(element.getAttribute('x1')) + dx);
-                element.setAttribute('y1', parseFloat(element.getAttribute('y1')) + dy);
-                element.setAttribute('x2', parseFloat(element.getAttribute('x2')) + dx);
-                element.setAttribute('y2', parseFloat(element.getAttribute('y2')) + dy);
-            } else if (element.tagName === 'text') {
-                element.setAttribute('x', parseFloat(element.getAttribute('x')) + dx);
-                element.setAttribute('y', parseFloat(element.getAttribute('y')) + dy);
+            // Legacy function for backwards compatibility (used elsewhere)
+            function handleSelectMouseDown(e, svg, pageNum) {
+                return handleSelectPointerDown(e, svg, pageNum);
             }
-        }
 
-        // Legacy function for backwards compatibility (used elsewhere)
-        function handleSelectMouseDown(e, svg, pageNum) {
-            return handleSelectPointerDown(e, svg, pageNum);
-        }
+            // ==========================================
+            // KEYBOARD SHORTCUTS
+            // ==========================================
+            document.addEventListener('keydown', (e) => {
+                // Ignore if typing in input
+                if (e.target.tagName === 'INPUT' || e.target.contentEditable === 'true') return;
 
-        // ==========================================
-        // KEYBOARD SHORTCUTS
-        // ==========================================
-        document.addEventListener('keydown', (e) => {
-            // Ignore if typing in input
-            if (e.target.tagName === 'INPUT' || e.target.contentEditable === 'true') return;
+                const key = e.key.toLowerCase();
 
-            const key = e.key.toLowerCase();
+                // Tool shortcuts
+                if (key === 'h') { setTool('highlight'); e.preventDefault(); }
+                if (key === 'p') { setTool('pen'); e.preventDefault(); }
+                if (key === 'e') { setTool('eraser'); e.preventDefault(); }
+                if (key === 't') { setTool('text'); e.preventDefault(); }
+                if (key === 'r') { setTool('shape'); e.preventDefault(); }
+                if (key === 'v') { setTool('select'); e.preventDefault(); }
 
-            // Tool shortcuts
-            if (key === 'h') { setTool('highlight'); e.preventDefault(); }
-            if (key === 'p') { setTool('pen'); e.preventDefault(); }
-            if (key === 'e') { setTool('eraser'); e.preventDefault(); }
-            if (key === 't') { setTool('text'); e.preventDefault(); }
-            if (key === 'r') { setTool('shape'); e.preventDefault(); }
-            if (key === 'v') { setTool('select'); e.preventDefault(); }
+                // Delete selected annotation
+                if ((key === 'delete' || key === 'backspace') && selectedAnnotation) {
+                    deleteSelectedAnnotation();
+                    e.preventDefault();
+                }
 
-            // Delete selected annotation
-            if ((key === 'delete' || key === 'backspace') && selectedAnnotation) {
-                deleteSelectedAnnotation();
-                e.preventDefault();
-            }
+                // Copy/Paste annotations
+                if ((e.ctrlKey || e.metaKey) && key === 'c' && selectedAnnotation) {
+                    copySelectedAnnotation();
+                    e.preventDefault();
+                }
+                if ((e.ctrlKey || e.metaKey) && key === 'v' && copiedAnnotation) {
+                    pasteAnnotation();
+                    e.preventDefault();
+                }
 
-            // Copy/Paste annotations
-            if ((e.ctrlKey || e.metaKey) && key === 'c' && selectedAnnotation) {
-                copySelectedAnnotation();
-                e.preventDefault();
-            }
-            if ((e.ctrlKey || e.metaKey) && key === 'v' && copiedAnnotation) {
-                pasteAnnotation();
-                e.preventDefault();
-            }
+                // Navigation
+                if (key === 's') {
+                    document.getElementById('sidebarBtn').click();
+                    e.preventDefault();
+                }
 
-            // Navigation
-            if (key === 's') {
-                document.getElementById('sidebarBtn').click();
-                e.preventDefault();
-            }
+                // Arrow key navigation
+                if (key === 'arrowleft' || key === 'arrowup') {
+                    if (pdfViewer && pdfViewer.currentPageNumber > 1) {
+                        pdfViewer.currentPageNumber--;
+                    }
+                    e.preventDefault();
+                }
+                if (key === 'arrowright' || key === 'arrowdown') {
+                    if (pdfViewer && pdfViewer.currentPageNumber < pdfViewer.pagesCount) {
+                        pdfViewer.currentPageNumber++;
+                    }
+                    e.preventDefault();
+                }
 
-            // Arrow key navigation
-            if (key === 'arrowleft' || key === 'arrowup') {
-                if (pdfViewer && pdfViewer.currentPageNumber > 1) {
-                    pdfViewer.currentPageNumber--;
+                // Home/End
+                if (key === 'home') {
+                    if (pdfViewer) pdfViewer.currentPageNumber = 1;
+                    e.preventDefault();
                 }
-                e.preventDefault();
-            }
-            if (key === 'arrowright' || key === 'arrowdown') {
-                if (pdfViewer && pdfViewer.currentPageNumber < pdfViewer.pagesCount) {
-                    pdfViewer.currentPageNumber++;
+                if (key === 'end') {
+                    if (pdfViewer) pdfViewer.currentPageNumber = pdfViewer.pagesCount;
+                    e.preventDefault();
                 }
-                e.preventDefault();
-            }
 
-            // Home/End
-            if (key === 'home') {
-                if (pdfViewer) pdfViewer.currentPageNumber = 1;
-                e.preventDefault();
-            }
-            if (key === 'end') {
-                if (pdfViewer) pdfViewer.currentPageNumber = pdfViewer.pagesCount;
-                e.preventDefault();
-            }
+                // Zoom shortcuts - prevent browser zoom
+                if ((e.ctrlKey || e.metaKey) && (key === '=' || key === '+' || e.code === 'Equal')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    pdfViewer.currentScale += 0.25;
+                    return;
+                }
+                if ((e.ctrlKey || e.metaKey) && (key === '-' || e.code === 'Minus')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    pdfViewer.currentScale -= 0.25;
+                    return;
+                }
+                if ((e.ctrlKey || e.metaKey) && (key === '0' || e.code === 'Digit0')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    pdfViewer.currentScaleValue = 'page-width';
+                    return;
+                }
 
-            // Zoom shortcuts - prevent browser zoom
-            if ((e.ctrlKey || e.metaKey) && (key === '=' || key === '+' || e.code === 'Equal')) {
-                e.preventDefault();
-                e.stopPropagation();
-                pdfViewer.currentScale += 0.25;
-                return;
-            }
-            if ((e.ctrlKey || e.metaKey) && (key === '-' || e.code === 'Minus')) {
-                e.preventDefault();
-                e.stopPropagation();
-                pdfViewer.currentScale -= 0.25;
-                return;
-            }
-            if ((e.ctrlKey || e.metaKey) && (key === '0' || e.code === 'Digit0')) {
-                e.preventDefault();
-                e.stopPropagation();
-                pdfViewer.currentScaleValue = 'page-width';
-                return;
-            }
+                // Escape to deselect tool
+                if (key === 'escape') {
+                    if (currentTool) {
+                        setTool(currentTool); // Toggle off
+                    }
+                    closeAllDropdowns();
+                }
 
-            // Escape to deselect tool
-            if (key === 'escape') {
-                if (currentTool) {
-                    setTool(currentTool); // Toggle off
+                // Sepia mode
+                if (key === 'm') {
+                    document.getElementById('sepiaBtn').click();
+                    e.preventDefault();
                 }
-                closeAllDropdowns();
-            }
+            });
 
-            // Sepia mode
-            if (key === 'm') {
-                document.getElementById('sepiaBtn').click();
-                e.preventDefault();
-            }
-        });
-
-        // ==========================================
-        // CONTEXT MENU (Right-click)
-        // ==========================================
-        const contextMenu = document.createElement('div');
-        contextMenu.className = 'contextMenu';
-        contextMenu.innerHTML = `
+            // ==========================================
+            // CONTEXT MENU (Right-click)
+            // ==========================================
+            const contextMenu = document.createElement('div');
+            contextMenu.className = 'contextMenu';
+            contextMenu.innerHTML = `
             <div class="contextMenuItem" data-action="highlight">
                 <svg viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zM5 16h14l-3-10H8l-3 10z"/></svg>
                 Vurgula
@@ -3027,185 +3069,188 @@
                 <span class="shortcutHint">M</span>
             </div>
         `;
-        document.body.appendChild(contextMenu);
-
-        // Show context menu on right-click in viewer
-        container.addEventListener('contextmenu', (e) => {
-            e.preventDefault();
-            contextMenu.style.left = e.clientX + 'px';
-            contextMenu.style.top = e.clientY + 'px';
-            contextMenu.classList.add('visible');
-        });
-
-        // Hide context menu on click
-        document.addEventListener('click', () => {
-            contextMenu.classList.remove('visible');
-        });
-
-        // Context menu actions
-        contextMenu.addEventListener('click', (e) => {
-            const item = e.target.closest('.contextMenuItem');
-            if (!item) return;
-
-            const action = item.dataset.action;
-            switch (action) {
-                case 'highlight': setTool('highlight'); break;
-                case 'pen': setTool('pen'); break;
-                case 'text': setTool('text'); break;
-                case 'zoomIn': pdfViewer.currentScale += 0.25; break;
-                case 'zoomOut': pdfViewer.currentScale -= 0.25; break;
-                case 'sepia': document.getElementById('sepiaBtn').click(); break;
-            }
-            contextMenu.classList.remove('visible');
-        });
-
-        // ==========================================
-        // ERGONOMIC FEATURES
-        // ==========================================
-
-        // Double-click on page for fullscreen
-        let lastClickTime = 0;
-        container.addEventListener('click', (e) => {
-            const now = Date.now();
-            if (now - lastClickTime < 300) {
-                // Double click detected
-                if (document.fullscreenElement) {
-                    document.exitFullscreen();
-                } else {
-                    container.requestFullscreen().catch(() => { });
-                }
-            }
-            lastClickTime = now;
-        });
+            document.body.appendChild(contextMenu);
 
-        // Mouse wheel zoom with Ctrl
-        container.addEventListener('wheel', (e) => {
-            if (e.ctrlKey) {
+            // Show context menu on right-click in viewer
+            container.addEventListener('contextmenu', (e) => {
                 e.preventDefault();
-                if (e.deltaY < 0) {
-                    pdfViewer.currentScale += 0.1;
-                } else {
-                    pdfViewer.currentScale -= 0.1;
-                }
-            }
-        }, { passive: false });
-
-        console.log('PDF Viewer Ready');
-        console.log('Keyboard Shortcuts: H=Highlight, P=Pen, E=Eraser, T=Text, R=Shapes, S=Sidebar, M=ReadingMode, Arrows=Navigate');
-
-        // ==========================================
-        // SECURITY FEATURES
-        // ==========================================
+                contextMenu.style.left = e.clientX + 'px';
+                contextMenu.style.top = e.clientY + 'px';
+                contextMenu.classList.add('visible');
+            });
 
-        (function initSecurityFeatures() {
-            console.log('[Security] Initializing protection features...');
+            // Hide context menu on click
+            document.addEventListener('click', () => {
+                contextMenu.classList.remove('visible');
+            });
 
-            // 1. Block dangerous keyboard shortcuts
-            document.addEventListener('keydown', function (e) {
-                // Ctrl+S (Save)
-                if (e.ctrlKey && e.key === 's') {
-                    e.preventDefault();
-                    console.log('[Security] Ctrl+S blocked');
-                    return false;
+            // Context menu actions
+            contextMenu.addEventListener('click', (e) => {
+                const item = e.target.closest('.contextMenuItem');
+                if (!item) return;
+
+                const action = item.dataset.action;
+                switch (action) {
+                    case 'highlight': setTool('highlight'); break;
+                    case 'pen': setTool('pen'); break;
+                    case 'text': setTool('text'); break;
+                    case 'zoomIn': pdfViewer.currentScale += 0.25; break;
+                    case 'zoomOut': pdfViewer.currentScale -= 0.25; break;
+                    case 'sepia': document.getElementById('sepiaBtn').click(); break;
                 }
-                // Ctrl+P (Print)
-                if (e.ctrlKey && e.key === 'p') {
-                    e.preventDefault();
-                    console.log('[Security] Ctrl+P blocked');
-                    return false;
-                }
-                // Ctrl+Shift+S (Save As)
-                if (e.ctrlKey && e.shiftKey && e.key === 'S') {
-                    e.preventDefault();
-                    return false;
+                contextMenu.classList.remove('visible');
+            });
+
+            // ==========================================
+            // ERGONOMIC FEATURES
+            // ==========================================
+
+            // Double-click on page for fullscreen
+            let lastClickTime = 0;
+            container.addEventListener('click', (e) => {
+                const now = Date.now();
+                if (now - lastClickTime < 300) {
+                    // Double click detected
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen();
+                    } else {
+                        container.requestFullscreen().catch(() => { });
+                    }
                 }
-                // F12 (DevTools)
-                if (e.key === 'F12') {
+                lastClickTime = now;
+            });
+
+            // Mouse wheel zoom with Ctrl
+            container.addEventListener('wheel', (e) => {
+                if (e.ctrlKey) {
                     e.preventDefault();
-                    console.log('[Security] F12 blocked');
-                    return false;
+                    if (e.deltaY < 0) {
+                        pdfViewer.currentScale += 0.1;
+                    } else {
+                        pdfViewer.currentScale -= 0.1;
+                    }
                 }
-                // Ctrl+Shift+I (DevTools)
-                if (e.ctrlKey && e.shiftKey && e.key === 'I') {
+            }, { passive: false });
+
+            console.log('PDF Viewer Ready');
+            console.log('Keyboard Shortcuts: H=Highlight, P=Pen, E=Eraser, T=Text, R=Shapes, S=Sidebar, M=ReadingMode, Arrows=Navigate');
+
+            // ==========================================
+            // SECURITY FEATURES
+            // ==========================================
+
+            (function initSecurityFeatures() {
+                console.log('[Security] Initializing protection features...');
+
+                // 1. Block dangerous keyboard shortcuts
+                document.addEventListener('keydown', function (e) {
+                    // Ctrl+S (Save)
+                    if (e.ctrlKey && e.key === 's') {
+                        e.preventDefault();
+                        console.log('[Security] Ctrl+S blocked');
+                        return false;
+                    }
+                    // Ctrl+P (Print)
+                    if (e.ctrlKey && e.key === 'p') {
+                        e.preventDefault();
+                        console.log('[Security] Ctrl+P blocked');
+                        return false;
+                    }
+                    // Ctrl+Shift+S (Save As)
+                    if (e.ctrlKey && e.shiftKey && e.key === 'S') {
+                        e.preventDefault();
+                        return false;
+                    }
+                    // F12 (DevTools)
+                    if (e.key === 'F12') {
+                        e.preventDefault();
+                        console.log('[Security] F12 blocked');
+                        return false;
+                    }
+                    // Ctrl+Shift+I (DevTools)
+                    if (e.ctrlKey && e.shiftKey && e.key === 'I') {
+                        e.preventDefault();
+                        return false;
+                    }
+                    // Ctrl+Shift+J (Console)
+                    if (e.ctrlKey && e.shiftKey && e.key === 'J') {
+                        e.preventDefault();
+                        return false;
+                    }
+                    // Ctrl+U (View Source)
+                    if (e.ctrlKey && e.key === 'u') {
+                        e.preventDefault();
+                        return false;
+                    }
+                    // Ctrl+Shift+C (Inspect Element)
+                    if (e.ctrlKey && e.shiftKey && e.key === 'C') {
+                        e.preventDefault();
+                        return false;
+                    }
+                }, true);
+
+                // 2. Block context menu (right-click) - EVERYWHERE
+                document.addEventListener('contextmenu', function (e) {
                     e.preventDefault();
+                    e.stopPropagation();
                     return false;
-                }
-                // Ctrl+Shift+J (Console)
-                if (e.ctrlKey && e.shiftKey && e.key === 'J') {
+                }, true);
+
+                // 3. Block copy/cut/paste
+                document.addEventListener('copy', function (e) {
                     e.preventDefault();
+                    console.log('[Security] Copy blocked');
                     return false;
-                }
-                // Ctrl+U (View Source)
-                if (e.ctrlKey && e.key === 'u') {
+                }, true);
+
+                document.addEventListener('cut', function (e) {
                     e.preventDefault();
                     return false;
-                }
-                // Ctrl+Shift+C (Inspect Element)
-                if (e.ctrlKey && e.shiftKey && e.key === 'C') {
+                }, true);
+
+                // 4. Block drag events (prevent dragging content out)
+                document.addEventListener('dragstart', function (e) {
                     e.preventDefault();
                     return false;
-                }
-            }, true);
-
-            // 2. Block context menu (right-click) - EVERYWHERE
-            document.addEventListener('contextmenu', function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-                return false;
-            }, true);
+                }, true);
 
-            // 3. Block copy/cut/paste
-            document.addEventListener('copy', function (e) {
-                e.preventDefault();
-                console.log('[Security] Copy blocked');
-                return false;
-            }, true);
-
-            document.addEventListener('cut', function (e) {
-                e.preventDefault();
-                return false;
-            }, true);
-
-            // 4. Block drag events (prevent dragging content out)
-            document.addEventListener('dragstart', function (e) {
-                e.preventDefault();
-                return false;
-            }, true);
+                // 5. Block Print via window.print override
+                window.print = function () {
+                    console.log('[Security] Print function blocked');
+                    alert('Yazdırma bu belgede engellenmiştir.');
+                    return false;
+                };
 
-            // 5. Block Print via window.print override
-            window.print = function () {
-                console.log('[Security] Print function blocked');
-                alert('Yazdırma bu belgede engellenmiştir.');
-                return false;
-            };
+                // 6. Disable beforeprint event
+                window.addEventListener('beforeprint', function (e) {
+                    e.preventDefault();
+                    document.body.style.display = 'none';
+                });
 
-            // 6. Disable beforeprint event
-            window.addEventListener('beforeprint', function (e) {
-                e.preventDefault();
-                document.body.style.display = 'none';
-            });
+                window.addEventListener('afterprint', function () {
+                    document.body.style.display = '';
+                });
 
-            window.addEventListener('afterprint', function () {
-                document.body.style.display = '';
-            });
+                // 7. Block screenshot keyboard shortcuts
+                document.addEventListener('keyup', function (e) {
+                    // PrintScreen key
+                    if (e.key === 'PrintScreen') {
+                        navigator.clipboard.writeText('');
+                        console.log('[Security] PrintScreen clipboard cleared');
+                    }
+                }, true);
 
-            // 7. Block screenshot keyboard shortcuts
-            document.addEventListener('keyup', function (e) {
-                // PrintScreen key
-                if (e.key === 'PrintScreen') {
-                    navigator.clipboard.writeText('');
-                    console.log('[Security] PrintScreen clipboard cleared');
-                }
-            }, true);
+                // 8. Visibility change detection (tab switching for screenshots)
+                document.addEventListener('visibilitychange', function () {
+                    if (document.hidden) {
+                        console.log('[Security] Tab hidden');
+                    }
+                });
 
-            // 8. Visibility change detection (tab switching for screenshots)
-            document.addEventListener('visibilitychange', function () {
-                if (document.hidden) {
-                    console.log('[Security] Tab hidden');
-                }
-            });
+                console.log('[Security] All protection features initialized');
+            })();
 
-            console.log('[Security] All protection features initialized');
+            // End of main IIFE - pdfDoc, pdfViewer not accessible from console
         })();
     </script>
 </body>