@privacyscrubber/sdk 2.0.2

package/ui-modals.js

@@ -0,0 +1,819 @@
+/**
+ * PrivacyScrubber UI Modal Orchestrator
+ * Handles smooth animations and state management for all site-wide modals.
+ */
+
+const activeModals = [];
+
+/**
+ * Hydrates a lazy-loaded modal by extracting its template content into the DOM.
+ * @param {HTMLElement|string} modal - Modal element or ID
+ * @returns {HTMLElement} The modal element
+ */
+export const hydrateLazyModal = (modal) => {
+    const m = typeof modal === 'string' ? document.getElementById(modal) : modal;
+    if (!m) return null;
+    
+    const template = m.querySelector('template[data-lazy-modal]');
+    if (template) {
+        m.appendChild(template.content.cloneNode(true));
+        template.remove();
+    }
+    return m;
+};
+
+/**
+ * Opens a modal with scale and fade animations.
+ * @param {HTMLElement|string} modal - Modal element or ID
+ * @param {HTMLElement|string} content - Content element or ID
+ */
+export const openModal = (modal, content) => {
+    const m = hydrateLazyModal(modal);
+    const c = typeof content === 'string' ? document.getElementById(content) : content;
+    
+    if (!m || !c) return;
+    
+    const trigger = document.activeElement;
+    
+    // Add to active stack
+    if (!activeModals.find(item => item.modal === m)) {
+        activeModals.push({ modal: m, content: c, trigger: trigger });
+    }
+    
+    // 1. Ensure the modal is in the flex layout
+    m.classList.remove('hidden');
+    m.classList.add('flex');
+    
+    // Force reflow
+    void m.offsetWidth;
+    
+    // 2. Trigger transitions
+    m.classList.add('opacity-100');
+    m.classList.remove('opacity-0', 'pointer-events-none');
+    
+    c.classList.remove('scale-95', 'opacity-0', 'translate-y-4');
+    c.classList.add('scale-100', 'opacity-100', 'translate-y-0');
+    
+    document.body.style.overflow = 'hidden';
+
+    // 3. Auto-focus logic for inputs (great for desktop usability)
+    const firstInput = c.querySelector('input[type="text"], input[type="password"], input[type="email"], textarea');
+    if (firstInput) {
+        setTimeout(() => firstInput.focus(), 150); // delay ensures it's visible before focus
+    }
+};
+
+/**
+ * Closes a modal with scale and fade animations.
+ * @param {HTMLElement|string} modal - Modal element or ID
+ * @param {HTMLElement|string} content - Content element or ID
+ */
+export const closeModal = (modal, content) => {
+    const m = typeof modal === 'string' ? document.getElementById(modal) : modal;
+    const c = typeof content === 'string' ? document.getElementById(content) : content;
+    
+    if (!m || !c) return;
+    
+    // Remove from active stack
+    let triggerToRestore = null;
+    const index = activeModals.findIndex(item => item.modal === m);
+    if (index !== -1) {
+        triggerToRestore = activeModals[index].trigger;
+        activeModals.splice(index, 1);
+    }
+    
+    // 1. Trigger transitions
+    c.classList.add('scale-95', 'opacity-0', 'translate-y-4');
+    c.classList.remove('scale-100', 'opacity-100', 'translate-y-0');
+    
+    m.classList.remove('opacity-100');
+    m.classList.add('opacity-0', 'pointer-events-none');
+    
+    // 2. Clean up after animation
+    setTimeout(() => {
+        m.classList.add('hidden');
+        m.classList.remove('flex');
+        if (activeModals.length === 0) {
+            document.body.style.overflow = '';
+        }
+        if (triggerToRestore && typeof triggerToRestore.focus === 'function') {
+            triggerToRestore.focus();
+        }
+    }, 300);
+};
+
+/**
+ * Opens the native Teams Activation/Pilot modal.
+ */
+export const openTeamsModal = () => {
+    const modal = document.getElementById('teamModal');
+    const content = document.getElementById('teamModalContent');
+    if (modal && content) {
+        openModal(modal, content);
+    }
+};
+
+/**
+ * Closes the native Teams Activation/Pilot modal.
+ */
+export const closeTeamsModal = () => {
+    const modal = document.getElementById('teamModal');
+    const content = document.getElementById('teamModalContent');
+    if (modal && content) {
+        closeModal(modal, content);
+    }
+};
+
+// Global hooks for non-module compatibility
+if (typeof window !== 'undefined') {
+    window.openModal = openModal;
+    window.closeModal = closeModal;
+    window.openTeamsModal = openTeamsModal;
+    window.closeTeamsModal = closeTeamsModal;
+    window.closeTeamModal = closeTeamsModal; // Alias to match older HTML usage
+    window.openTeamModal = openTeamsModal; // Alias to match older HTML usage
+
+    /**
+     * Session Handoff (Team) Modals
+     */
+    window.openSessionHandoffModal = function(e) {
+        if (e && e.preventDefault) e.preventDefault();
+        if (typeof window.openTeamModal === 'function') {
+            window.openTeamModal(true, 'teams');
+            return;
+        }
+        if (typeof window.showProRecoveryModal === 'function') {
+            window.showProRecoveryModal('teams');
+            return;
+        }
+        const m = document.getElementById('teamModal');
+        const c = document.getElementById('teamModalContent');
+        if (m && c) {
+            openModal(m, c);
+            if (typeof window.switchTeamTab === 'function') {
+                window.switchTeamTab('teams');
+            }
+        }
+    };
+
+    window.closeSessionHandoffModal = function() {
+        if (typeof window.closeTeamModal === 'function') {
+            window.closeTeamModal();
+        } else {
+            const e = document.getElementById("teamModal");
+            const t = document.getElementById("teamModalContent");
+            if (e && t) {
+                closeModal(e, t);
+            }
+        }
+    };
+    window.closeTeamRecoveryModal = function () {
+        const e = document.getElementById("teamRecoveryModal");
+        const t = document.getElementById("teamRecoveryModalContent") || e.children[0];
+        if (e) closeModal(e, t);
+    };
+
+    // Global Escape Key Listener
+    window.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && activeModals.length > 0) {
+            e.preventDefault();
+            const lastModal = activeModals[activeModals.length - 1];
+            closeModal(lastModal.modal, lastModal.content);
+        }
+    });
+
+    /**
+     * Switches between Monthly and Lifetime PRO tiers in the modal.
+     */
+    window.setProTier = (tier) => {
+        const priceDisplay = document.getElementById('pro-price-display');
+        const descDisplay = document.getElementById('pro-desc-display');
+        const monthlyBtn = document.getElementById('btn-pro-monthly');
+        const lifetimeBtn = document.getElementById('btn-pro-lifetime');
+        const subContainer = document.getElementById('paypal-pro-btn-container');
+        const captureContainer = document.getElementById('paypal-lifetime-btn-container');
+
+        if (!priceDisplay) return;
+
+        if (tier === 'lifetime') {
+            const lifetimePrice = window.PII_CONFIG?.pricing?.PRO_LIFETIME || 110;
+            priceDisplay.innerHTML = `$${lifetimePrice}<span class="text-xs font-medium text-slate-500 uppercase ml-2">Lifetime</span>`;
+            descDisplay.innerText = "One-time payment for permanent PRO access. No recurring fees, ever.";
+            
+            monthlyBtn.classList.remove('bg-neon-green', 'text-dark-900');
+            monthlyBtn.classList.add('text-slate-500', 'hover:text-white');
+            
+            lifetimeBtn.classList.add('bg-neon-green', 'text-dark-900');
+            lifetimeBtn.classList.remove('text-slate-500', 'hover:text-white');
+            
+            subContainer.classList.add('hidden');
+            captureContainer.classList.remove('hidden');
+            
+            // Trigger PayPal button initialization for lifetime if not already done
+            if (typeof window.initLifetimePayPal === 'function') {
+                window.initLifetimePayPal();
+            }
+        } else {
+            const monthlyPrice = window.PII_CONFIG?.pricing?.PRO_MONTHLY || 15;
+            priceDisplay.innerHTML = `$${monthlyPrice}<span class="text-lg font-medium text-slate-500">/mo</span>`;
+            descDisplay.innerText = "Professional grade PII scrubbing for high-volume AI power users.";
+            
+            lifetimeBtn.classList.remove('bg-neon-green', 'text-dark-900');
+            lifetimeBtn.classList.add('text-slate-500', 'hover:text-white');
+            
+            monthlyBtn.classList.add('bg-neon-green', 'text-dark-900');
+            monthlyBtn.classList.remove('text-slate-500', 'hover:text-white');
+            
+            captureContainer.classList.add('hidden');
+            subContainer.classList.remove('hidden');
+        }
+    };
+}
+
+
+window.psSetQuickTemplate = function(el) {
+    var lbl = document.getElementById('teamNewRuleLabel');
+    var inp = document.getElementById('teamNewRuleInput');
+    if (lbl && inp) {
+        lbl.value = el.dataset.label || '';
+        inp.value = el.dataset.pattern || '';
+        inp.dispatchEvent(new Event('input'));
+    }
+};
+
+window.downloadSessionFile = async function() {
+    let tokenMap = {};
+    if (window.piiWorkerManager) {
+        try {
+            const res = await window.piiWorkerManager.send("EXPORT_SESSION");
+            tokenMap = res.plaintextMap || res.tokenMap || {};
+        } catch(e) {}
+    }
+    if (!tokenMap || Object.keys(tokenMap).length === 0) {
+        const raw = sessionStorage.getItem(`sessionTokenMap_${window.tabId || 1}`);
+        if (raw) tokenMap = JSON.parse(raw);
+    }
+    const count = Object.keys(tokenMap).length;
+    if (count === 0) {
+        if (typeof window.showStatus === 'function') window.showStatus("No active session tokens in RAM to save.", "info", 3000);
+        return;
+    }
+    const payload = {
+        pssession: true,
+        version: "1.7.0",
+        timestamp: new Date().toISOString(),
+        tokenMap: tokenMap,
+        count: count
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `privacyscrubber-session-${new Date().toISOString().slice(0,10)}.pssession`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(url), 5000);
+    if (typeof window.showStatus === "function") {
+        window.showStatus(`Session saved! (${count} tokens stored in .pssession file)`, "success", 4000);
+    }
+    window.closeSessionSaveModal();
+};
+
+window.importSessionFileFromInput = function(input) {
+    if (!input || !input.files || !input.files[0]) return;
+    const file = input.files[0];
+    const reader = new FileReader();
+    reader.onload = async function(e) {
+        try {
+            const data = JSON.parse(e.target.result);
+            const map = data.tokenMap || data.plaintextMap || data.tm;
+            if (map && typeof map === 'object') {
+                if (window.piiWorkerManager) {
+                    await window.piiWorkerManager.send("IMPORT_SESSION", { tokenMap: map });
+                }
+                const count = Object.keys(map).length;
+                const entCount = document.getElementById("entityCount");
+                if (entCount) entCount.textContent = `${count} items protected`;
+                if (typeof window.showStatus === "function") {
+                    window.showStatus(`Session restored! (${count} tokens loaded from file)`, "success", 4000);
+                }
+                window.closeSessionSaveModal();
+            } else {
+                throw new Error("Invalid format");
+            }
+        } catch(err) {
+            if (typeof window.showStatus === "function") {
+                window.showStatus("Invalid session file format. Upload a valid .pssession file.", "warning", 4000);
+            }
+        }
+        input.value = '';
+    };
+    reader.readAsText(file);
+};
+
+window.openSessionSaveModal = function() {
+    const modal = document.getElementById('sessionSaveModal');
+    if (!modal) return;
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    setTimeout(() => {
+        modal.classList.remove('opacity-0');
+        if (modal.children[0]) {
+            modal.children[0].classList.remove('scale-95');
+            modal.children[0].classList.add('scale-100');
+        }
+    }, 10);
+};
+
+window.closeSessionSaveModal = function() {
+    const modal = document.getElementById('sessionSaveModal');
+    if (!modal) return;
+    modal.classList.add('opacity-0');
+    if (modal.children[0]) {
+        modal.children[0].classList.remove('scale-100');
+        modal.children[0].classList.add('scale-95');
+    }
+    setTimeout(() => {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }, 200);
+};
+
+window.closeAuditModal = function() {
+    const modal = document.getElementById('devSecOpsAuditModal');
+    if (!modal) return;
+    modal.classList.add('opacity-0');
+    if (modal.children[0]) {
+        modal.children[0].classList.remove('scale-100');
+        modal.children[0].classList.add('scale-95');
+    }
+    setTimeout(() => {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }, 200);
+};
+
+let currentDocZoom = 1;
+let isDocPanning = false;
+let startPanX = 0, startPanY = 0;
+let scrollPanLeft = 0, scrollPanTop = 0;
+
+window.setPdfRedactionStyle = function(style) {
+    window.pdfRedactionStyle = style;
+    const isTok = style === 'tokenized';
+    
+    // Main UI toggle
+    const btnTok = document.getElementById('btnStyleTokenized');
+    const btnBlk = document.getElementById('btnStyleBlackout');
+    if (btnTok && btnBlk) {
+        if (isTok) {
+            btnTok.className = 'px-2 py-0.5 rounded-md font-bold transition-all bg-neon-blue/20 text-neon-blue border border-neon-blue/30 cursor-pointer shadow-sm';
+            btnBlk.className = 'px-2 py-0.5 rounded-md font-bold transition-all text-slate-400 hover:text-white border border-transparent cursor-pointer';
+        } else {
+            btnBlk.className = 'px-2 py-0.5 rounded-md font-bold transition-all bg-neon-blue/20 text-neon-blue border border-neon-blue/30 cursor-pointer shadow-sm';
+            btnTok.className = 'px-2 py-0.5 rounded-md font-bold transition-all text-slate-400 hover:text-white border border-transparent cursor-pointer';
+        }
+    }
+
+    // Modal UI toggle
+    const mBtnTok = document.getElementById('modalBtnStyleTokenized');
+    const mBtnBlk = document.getElementById('modalBtnStyleBlackout');
+    if (mBtnTok && mBtnBlk) {
+        if (isTok) {
+            mBtnTok.className = 'px-2 py-0.5 rounded-md font-bold transition-all bg-neon-blue/20 text-neon-blue border border-neon-blue/30 cursor-pointer shadow-sm';
+            mBtnBlk.className = 'px-2 py-0.5 rounded-md font-bold transition-all text-slate-400 hover:text-white border border-transparent cursor-pointer';
+        } else {
+            mBtnBlk.className = 'px-2 py-0.5 rounded-md font-bold transition-all bg-neon-blue/20 text-neon-blue border border-neon-blue/30 cursor-pointer shadow-sm';
+            mBtnTok.className = 'px-2 py-0.5 rounded-md font-bold transition-all text-slate-400 hover:text-white border border-transparent cursor-pointer';
+        }
+    }
+
+    // Re-render previews
+    const docSnippet = document.getElementById('docModeLiveSnippet');
+    if (docSnippet && window._lastPDFBuffer && typeof window.renderPdfLivePreview === 'function') {
+        window.renderPdfLivePreview(window._lastPDFBuffer, docSnippet, style);
+    }
+    if (document.getElementById('imageZoomModal')?.classList.contains('flex')) {
+        window.renderPdfZoomInspection?.();
+    }
+};
+
+window.renderPdfZoomInspection = async function() {
+    if (!window._lastPDFBuffer) return false;
+    const modal = document.getElementById('imageZoomModal');
+    const img = document.getElementById('imageZoomImg');
+    const overlay = document.getElementById('imageZoomBadgeOverlay');
+    const styleGroup = document.getElementById('modalPdfStyleToggleGroup');
+    if (!modal || !img) return false;
+
+    if (styleGroup) {
+        styleGroup.classList.remove('hidden');
+        styleGroup.classList.add('flex');
+    }
+
+    try {
+        if (typeof loadPdfJs === 'function') await loadPdfJs();
+        const pdfjsDoc = await pdfjsLib.getDocument({ data: window._lastPDFBuffer.slice(0) }).promise;
+        const page = await pdfjsDoc.getPage(1);
+
+        const viewport = page.getViewport({ scale: 2.0 });
+        const canvas = document.createElement('canvas');
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        const ctx = canvas.getContext('2d');
+        await page.render({ canvasContext: ctx, viewport }).promise;
+
+        // Fetch active token map
+        let tokenMap = (window.AppState && window.AppState.sessionMap && Object.keys(window.AppState.sessionMap).length > 0)
+          ? window.AppState.sessionMap
+          : {};
+
+        if (!tokenMap || Object.keys(tokenMap).length === 0) {
+          if (window.piiWorkerManager) {
+            try {
+              const sessionData = await window.piiWorkerManager.send('EXPORT_SESSION');
+              tokenMap = sessionData?.plaintextMap || sessionData || {};
+            } catch (_) {}
+          }
+        }
+        if (!tokenMap || Object.keys(tokenMap).length === 0) {
+          const tabId = window._tabId || 'default';
+          try {
+            const raw = sessionStorage.getItem(`sessionTokenMap_${tabId}`);
+            if (raw) tokenMap = JSON.parse(raw);
+          } catch (_) {}
+        }
+
+        const piiEntries = Object.entries(tokenMap)
+          .filter(([k, v]) => typeof v === 'string' && v.trim().length >= 2)
+          .sort((a, b) => b[1].length - a[1].length);
+
+        const textContent = await page.getTextContent();
+        const lines = {};
+        const tolerance = 4;
+
+        textContent.items.forEach((item) => {
+          const [a, , , d, tx, ty] = item.transform;
+          const fontSz = Math.abs(d) || Math.abs(a) || 10;
+          const y = Math.round(ty);
+          let foundY = null;
+          for (let existingY in lines) {
+            if (Math.abs(y - existingY) <= tolerance) {
+              foundY = existingY;
+              break;
+            }
+          }
+          if (!foundY) {
+            lines[y] = [];
+            foundY = y;
+          }
+          lines[foundY].push({
+            str: item.str,
+            x: tx,
+            y: ty,
+            w: item.width || fontSz * item.str.length * 0.55,
+            h: fontSz * 1.15,
+            fontSz
+          });
+        });
+
+        const sortedY = Object.keys(lines).map(Number).sort((a, b) => b - a);
+
+        const badges = [];
+        const addBadge = (x, y, w, h, tokenKey, piiVal) => {
+          const pt1 = viewport.convertToViewportPoint(x, y + h * 0.85);
+          const pt2 = viewport.convertToViewportPoint(x + Math.max(w, 4), y - h * 0.15);
+          const cX = Math.min(pt1[0], pt2[0]);
+          const cY = Math.min(pt1[1], pt2[1]);
+          const cW = Math.max(Math.abs(pt1[0] - pt2[0]), 42);
+          const cH = Math.abs(pt1[1] - pt2[1]);
+          badges.push({ x: cX, y: cY, w: cW, h: cH, tokenKey, piiVal });
+        };
+
+        for (const [tokenKey, piiVal] of piiEntries) {
+          for (const y of sortedY) {
+            const lineItems = lines[y].sort((a, b) => a.x - b.x);
+
+            // Strategy A: full PII within single text item
+            let matchedInLine = false;
+            for (const item of lineItems) {
+              if (!item.str) continue;
+              const hits = window.findPIIWordBoundary ? window.findPIIWordBoundary(item.str, piiVal) : [];
+              for (const idx of hits) {
+                const geom = window.calcSubStringGeometry ? window.calcSubStringGeometry(item.str, idx, piiVal.length, item.w) : { prefixX: 0, targetW: item.w };
+                addBadge(item.x + geom.prefixX, item.y, geom.targetW, item.h, tokenKey, piiVal);
+                matchedInLine = true;
+              }
+            }
+
+            // Strategy B: PII spans 2-20 consecutive items on the SAME line
+            if (!matchedInLine && lineItems.length > 1) {
+              for (let i = 0; i < lineItems.length; i++) {
+                let concat = '';
+                let span = [];
+                for (let j = i; j < lineItems.length; j++) {
+                  if (span.length > 0) {
+                    const prev = span[span.length - 1];
+                    const gap = lineItems[j].x - (prev.x + prev.w);
+                    const spaceThreshold = Math.max(3.5, prev.fontSz * 0.22);
+                    if (gap >= spaceThreshold) concat += ' ';
+                  }
+                  concat += lineItems[j].str;
+                  span.push(lineItems[j]);
+                  if (span.length < 2) continue;
+
+                  const wbHits = window.findPIIWordBoundary ? window.findPIIWordBoundary(concat, piiVal) : [];
+                  if (wbHits.length === 0) continue;
+                  const matchIdx = wbHits[0];
+                  const matchEnd = matchIdx + piiVal.length;
+                  let charCursor = 0;
+                  let barX = null, barEndX = null;
+
+                  for (let si_idx = 0; si_idx < span.length; si_idx++) {
+                    const si = span[si_idx];
+                    if (si_idx > 0) {
+                      const prevSi = span[si_idx - 1];
+                      const gapPx = si.x - (prevSi.x + prevSi.w);
+                      const spaceThresh = Math.max(3.5, prevSi.fontSz * 0.22);
+                      if (gapPx >= spaceThresh) charCursor += 1;
+                    }
+                    const siLen = si.str.length;
+                    const siStart = charCursor;
+                    const siEnd = charCursor + siLen;
+
+                    const overlapStart = Math.max(siStart, matchIdx);
+                    const overlapEnd = Math.min(siEnd, matchEnd);
+                    if (overlapStart < overlapEnd) {
+                      const localStart = overlapStart - siStart;
+                      const localLen = overlapEnd - overlapStart;
+                      const geom = window.calcSubStringGeometry ? window.calcSubStringGeometry(si.str, localStart, localLen, si.w || 0) : { prefixX: 0, targetW: si.w };
+                      const xStart = si.x + geom.prefixX;
+                      const xEnd = xStart + geom.targetW;
+                      if (barX === null || xStart < barX) barX = xStart;
+                      if (barEndX === null || xEnd > barEndX) barEndX = xEnd;
+                    }
+                    charCursor = siEnd;
+                  }
+
+                  if (barX !== null && barEndX !== null && barEndX > barX) {
+                    addBadge(barX, span[0].y, barEndX - barX, span[0].h, tokenKey, piiVal);
+                    i = j;
+                    break;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        const style = window.pdfRedactionStyle || 'tokenized';
+
+        // Draw base image onto canvas
+        for (const b of badges) {
+          if (style === 'tokenized') {
+            const entityType = window.getEntityTypeFromToken ? window.getEntityTypeFromToken(b.tokenKey) : 'DEFAULT';
+            const colorScheme = (window.ENTITY_PDF_COLORS && window.ENTITY_PDF_COLORS[entityType])
+              ? window.ENTITY_PDF_COLORS[entityType]
+              : { hexBg: '#facc15', hexBorder: '#ca8a04', hexText: '#000000' };
+
+            ctx.fillStyle = colorScheme.hexBg;
+            ctx.strokeStyle = colorScheme.hexBorder;
+            ctx.lineWidth = 1.5;
+            if (typeof ctx.roundRect === 'function') {
+              ctx.beginPath();
+              ctx.roundRect(b.x - 1, b.y - 1, b.w + 2, b.h + 2, 3);
+              ctx.fill();
+              ctx.stroke();
+            } else {
+              ctx.fillRect(b.x - 1, b.y - 1, b.w + 2, b.h + 2);
+              ctx.strokeRect(b.x - 1, b.y - 1, b.w + 2, b.h + 2);
+            }
+
+            ctx.fillStyle = colorScheme.hexText;
+            const fontSz = Math.min(Math.max(b.h * 0.65, 10), 16);
+            ctx.font = `bold ${Math.round(fontSz)}px monospace`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(b.tokenKey, b.x + b.w / 2, b.y + b.h / 2);
+          } else {
+            ctx.fillStyle = '#000000';
+            ctx.fillRect(b.x, b.y, b.w, b.h);
+          }
+        }
+
+        const dataUrl = canvas.toDataURL('image/png');
+        img.src = dataUrl;
+
+        // Build interactive overlay for clicking false positives
+        if (overlay) {
+          overlay.innerHTML = '';
+          const cW = canvas.width;
+          const cH = canvas.height;
+          const escapeHTML = window.escapeHTML || (str => (str || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
+
+          badges.forEach((b) => {
+            const entityType = window.getEntityTypeFromToken ? window.getEntityTypeFromToken(b.tokenKey) : 'DEFAULT';
+            const colorScheme = (window.ENTITY_PDF_COLORS && window.ENTITY_PDF_COLORS[entityType])
+              ? window.ENTITY_PDF_COLORS[entityType]
+              : { hexBg: '#facc15', hexBorder: '#ca8a04', hexText: '#000000' };
+
+            const leftPct = (b.x / cW) * 100;
+            const topPct = (b.y / cH) * 100;
+            const widthPct = (b.w / cW) * 100;
+            const heightPct = (b.h / cH) * 100;
+
+            const badgeEl = document.createElement('div');
+            badgeEl.className = 'absolute cursor-pointer flex items-center justify-center font-mono font-bold select-none transition-all duration-150 hover:scale-110 hover:ring-2 hover:ring-white z-20 group/badge shadow-md active:scale-95';
+            badgeEl.style.left = `${leftPct}%`;
+            badgeEl.style.top = `${topPct}%`;
+            badgeEl.style.width = `${widthPct}%`;
+            badgeEl.style.height = `${heightPct}%`;
+            badgeEl.style.backgroundColor = style === 'tokenized' ? colorScheme.hexBg : 'rgba(0,0,0,0.95)';
+            badgeEl.style.color = style === 'tokenized' ? colorScheme.hexText : '#ffffff';
+            badgeEl.style.border = `1.5px solid ${style === 'tokenized' ? colorScheme.hexBorder : '#ffffff'}`;
+            badgeEl.style.borderRadius = '3px';
+            badgeEl.dataset.token = b.tokenKey;
+            badgeEl.title = `Click to remove false positive: ${b.piiVal}`;
+
+            badgeEl.innerHTML = `
+              <span class="truncate px-0.5 text-[10px] sm:text-xs pointer-events-none">${style === 'tokenized' ? b.tokenKey : '⬛'}</span>
+              <span class="hidden group-hover/badge:flex absolute -top-8 left-1/2 -translate-x-1/2 bg-dark-950 border border-white/20 text-white text-[10px] px-2 py-0.5 rounded shadow-xl whitespace-nowrap pointer-events-none z-30 font-sans">
+                Unmask "${escapeHTML(b.piiVal.slice(0, 24))}"
+              </span>
+            `;
+
+            badgeEl.onclick = async (e) => {
+              e.stopPropagation();
+              // Immediate cleanup in AppState and session
+              if (window.AppState && window.AppState.sessionMap) {
+                delete window.AppState.sessionMap[b.tokenKey];
+                delete window.AppState.sessionMap[`[${b.tokenKey}]`];
+              }
+              if (window.ignoreToken) {
+                await window.ignoreToken(b.tokenKey);
+              }
+              if (window.showStatus) {
+                window.showStatus(`Revealed false positive: ${b.piiVal}`, 'success', 3500);
+              }
+              // Re-render both modal and live snippet
+              await window.renderPdfZoomInspection();
+              const docSnippet = document.getElementById('docModeLiveSnippet');
+              if (docSnippet && window._lastPDFBuffer && typeof window.renderPdfLivePreview === 'function') {
+                window.renderPdfLivePreview(window._lastPDFBuffer, docSnippet, window.pdfRedactionStyle || 'tokenized');
+              }
+            };
+
+            overlay.appendChild(badgeEl);
+          });
+        }
+        return true;
+    } catch (err) {
+        console.warn('[renderPdfZoomInspection] error:', err);
+        return false;
+    }
+};
+
+window.openPdfInspectionModal = async function() {
+    const modal = document.getElementById('imageZoomModal');
+    if (!modal) return;
+    const ok = await window.renderPdfZoomInspection();
+    if (ok) {
+        window.openImageZoomModal(document.getElementById('imageZoomImg')?.src || '');
+    }
+};
+
+window.openImageZoomModal = function(imageUrl) {
+    const modal = document.getElementById('imageZoomModal');
+    const img = document.getElementById('imageZoomImg');
+    const wrapper = document.getElementById('imageZoomWrapper');
+    const content = document.getElementById('imageZoomContent');
+    const viewport = document.getElementById('imageZoomViewport');
+    const zoomText = document.getElementById('zoomLevelText');
+    const downloadBtn = document.getElementById('modalDownloadImageBtn');
+    if (!modal || !img) return;
+
+    if (imageUrl && !window._lastPDFBuffer) {
+        img.src = imageUrl;
+        const overlay = document.getElementById('imageZoomBadgeOverlay');
+        if (overlay) overlay.innerHTML = '';
+        const styleGroup = document.getElementById('modalPdfStyleToggleGroup');
+        if (styleGroup) { styleGroup.classList.add('hidden'); styleGroup.classList.remove('flex'); }
+    }
+    
+    currentDocZoom = 1;
+    if (wrapper) wrapper.style.transform = `scale(${currentDocZoom})`;
+    else img.style.transform = `scale(${currentDocZoom})`;
+    if (zoomText) zoomText.textContent = '100%';
+
+    if (downloadBtn) {
+        downloadBtn.onclick = () => {
+            const isProUser = window.isPro || (window.AppState && window.AppState.isPro) || localStorage.getItem('isPro') === 'true' || !!localStorage.getItem('ps_pro_sub') || !!localStorage.getItem('ps_pro_key') || !!localStorage.getItem('ps_team_key');
+            if (isProUser) {
+                const link = document.createElement("a");
+                link.download = `redacted_document_${Date.now()}.png`;
+                link.href = img.src || imageUrl;
+                link.click();
+            } else if (typeof window.openProModalAction === "function") {
+                window.openProModalAction();
+            }
+        };
+    }
+
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    setTimeout(() => {
+        modal.classList.remove('opacity-0', 'pointer-events-none');
+        if (content) {
+            content.classList.remove('scale-95');
+            content.classList.add('scale-100');
+        }
+    }, 10);
+    document.body.style.overflow = 'hidden';
+
+    // Set up interactive zoom & pan once
+    if (!modal._hasZoomListeners) {
+        modal._hasZoomListeners = true;
+        
+        const updateZoom = (newZoom) => {
+            currentDocZoom = Math.min(Math.max(newZoom, 0.5), 3.5);
+            const targetEl = document.getElementById('imageZoomWrapper') || img;
+            targetEl.style.transform = `scale(${currentDocZoom})`;
+            if (zoomText) zoomText.textContent = `${Math.round(currentDocZoom * 100)}%`;
+        };
+
+        const zoomInBtn = document.getElementById('zoomInBtn');
+        const zoomOutBtn = document.getElementById('zoomOutBtn');
+        const zoomResetBtn = document.getElementById('zoomResetBtn');
+
+        if (zoomInBtn) zoomInBtn.onclick = () => updateZoom(currentDocZoom + 0.25);
+        if (zoomOutBtn) zoomOutBtn.onclick = () => updateZoom(currentDocZoom - 0.25);
+        if (zoomResetBtn) zoomResetBtn.onclick = () => updateZoom(1);
+
+        // Wire modal style toggles
+        const mBtnTok = document.getElementById('modalBtnStyleTokenized');
+        const mBtnBlk = document.getElementById('modalBtnStyleBlackout');
+        if (mBtnTok) mBtnTok.onclick = () => window.setPdfRedactionStyle('tokenized');
+        if (mBtnBlk) mBtnBlk.onclick = () => window.setPdfRedactionStyle('blackout');
+
+        // Wire main style toggles
+        const btnTok = document.getElementById('btnStyleTokenized');
+        const btnBlk = document.getElementById('btnStyleBlackout');
+        if (btnTok) btnTok.onclick = () => window.setPdfRedactionStyle('tokenized');
+        if (btnBlk) btnBlk.onclick = () => window.setPdfRedactionStyle('blackout');
+
+        if (viewport) {
+            viewport.addEventListener('wheel', (e) => {
+                if (modal.classList.contains('flex')) {
+                    e.preventDefault();
+                    const delta = e.deltaY < 0 ? 0.15 : -0.15;
+                    updateZoom(currentDocZoom + delta);
+                }
+            }, { passive: false });
+
+            viewport.addEventListener('mousedown', (e) => {
+                if (e.target.tagName === 'BUTTON' || e.target.closest('#imageZoomBadgeOverlay')) return;
+                isDocPanning = true;
+                startPanX = e.pageX - viewport.offsetLeft;
+                startPanY = e.pageY - viewport.offsetTop;
+                scrollPanLeft = viewport.scrollLeft;
+                scrollPanTop = viewport.scrollTop;
+            });
+
+            viewport.addEventListener('mouseleave', () => { isDocPanning = false; });
+            viewport.addEventListener('mouseup', () => { isDocPanning = false; });
+            viewport.addEventListener('mousemove', (e) => {
+                if (!isDocPanning) return;
+                e.preventDefault();
+                const x = e.pageX - viewport.offsetLeft;
+                const y = e.pageY - viewport.offsetTop;
+                const walkX = (x - startPanX) * 1.5;
+                const walkY = (y - startPanY) * 1.5;
+                viewport.scrollLeft = scrollPanLeft - walkX;
+                viewport.scrollTop = scrollPanTop - walkY;
+            });
+        }
+
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+                window.closeImageZoomModal();
+            }
+        });
+    }
+};
+
+window.closeImageZoomModal = function() {
+    const modal = document.getElementById('imageZoomModal');
+    const content = document.getElementById('imageZoomContent');
+    if (!modal) return;
+    modal.classList.add('opacity-0', 'pointer-events-none');
+    if (content) {
+        content.classList.remove('scale-100');
+        content.classList.add('scale-95');
+    }
+    setTimeout(() => {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+        document.body.style.overflow = '';
+    }, 200);
+};