P44 OCR Viewer — Move original OCR toggle to left panel, replace raster with plain text Scope: p44-ocr-viewer.js, p44-ocr-viewer.css, p44-ocr-viewer.html. Remove horizontal split pane entirely, replace with left panel toggle. PART 1 — HTML (p44-ocr-viewer.html) Remove the split button from the right panel header: html Add a toggle button to the left panel header, immediately after the zoom controls and before the page nav: html Remove these elements from #text-panel-body entirely: html
Add a new OCR text overlay div inside #image-panel-body, immediately after the pdf-container div: html PART 2 — CSS (p44-ocr-viewer.css) Remove all rules for: #split-pane #split-pane-header #split-ocr-wrap #split-line-numbers #split-ocr-output #split-divider #text-panel-body.split-active .split-active Add at the end of the file: css/* ── OCR overlay panel (replaces raster in left panel) ───────── */ #ocr-overlay-panel { display: none; position: absolute; inset: 0; overflow-y: auto; background: var(--surface); padding: 20px 24px; font-size: 13px; line-height: 1.8; color: var(--text); font-family: 'Georgia', 'Times New Roman', serif; white-space: pre-wrap; word-break: break-word; z-index: 10; } Also ensure #image-panel-body has position: relative — add it to the existing rule if not already present: css#image-panel-body { position: relative; } PART 3 — JS (p44-ocr-viewer.js) 3a — Remove all split pane code Remove these DOM refs: javascriptconst btnSplit = document.getElementById('btn-split'); const splitPane = document.getElementById('split-pane'); const splitDivider = document.getElementById('split-divider'); const splitOcrOutput = document.getElementById('split-ocr-output'); const splitLineNums = document.getElementById('split-line-numbers'); Remove state.splitMode and state.splitRatio from the state object. Remove these functions entirely: buildSplitLineNumbers() updateSplitLineNumbers() applySplitRatio() resetSplitSizing() startSplitResize() showSplitPane() hideSplitPane() toggleSplit() getWrapMeasureEl() buildWrappedLineNumbers() parseLineHeightPx() Remove these event listeners: javascriptbtnSplit.addEventListener('click', toggleSplit); splitDivider.addEventListener('mousedown', startSplitResize); Remove from the resize event listener the split mode block: javascriptif (state.splitMode) { applySplitRatio(state.splitRatio || 0.5); const pageNum = state.currentPage; const corr = state.corrections && state.corrections[pageNum]; const originalText = (corr && corr.original) || state.ocrPages[pageNum] || ''; updateSplitLineNumbers(originalText); } Remove from goToPage(): javascriptif (state.splitMode) showSplitPane(n); Remove from showOCRPage(): javascriptif (state.splitMode) showSplitPane(pageNum); Remove from applyRole() all references to btnSplit, state.splitMode, hideSplitPane(). 3b — New DOM refs Add: javascriptconst btnOcrToggle = document.getElementById('btn-ocr-toggle'); const ocrOverlayPanel = document.getElementById('ocr-overlay-panel'); Add to state object: javascriptocrOverlay: false, 3c — showOCROverlay(pageNum) Add this new function: javascriptfunction showOCROverlay(pageNum) { const corr = state.corrections && state.corrections[pageNum]; const originalText = (corr && corr.original) || state.ocrPages[pageNum] || ''; ocrOverlayPanel.innerHTML = '' + escH(originalText) + ''; ocrOverlayPanel.style.display = 'block'; pdfContainer.style.display = 'none'; imagePlaceholder.style.display = 'none'; } 3d — hideOCROverlay() Add this new function: javascriptfunction hideOCROverlay() { ocrOverlayPanel.style.display = 'none'; if (state.mode === 'pdf') { pdfContainer.style.display = 'inline-block'; } else { imagePlaceholder.style.display = 'flex'; } } 3e — toggleOCROverlay() Add this new function: javascriptfunction toggleOCROverlay() { state.ocrOverlay = !state.ocrOverlay; btnOcrToggle.classList.toggle('active', state.ocrOverlay); if (state.ocrOverlay) { showOCROverlay(state.currentPage); } else { hideOCROverlay(); } } Add event listener: javascriptbtnOcrToggle.addEventListener('click', toggleOCROverlay); 3f — goToPage() Add after if (state.editMode) exitEditMode();: javascript if (state.ocrOverlay) showOCROverlay(n); 3g — showOCRPage() Add after updateCorrectionIndicator(pageNum): javascript if (state.ocrOverlay) showOCROverlay(pageNum); 3h — applyRole() In the pass2 branch add: javascript btnOcrToggle.style.display = 'inline-block'; In the pass1 branch add: javascript btnOcrToggle.style.display = 'none'; state.ocrOverlay = false; hideOCROverlay(); VERIFICATION CHECKLIST: Pass 1 role: OCR toggle button not visible in left panel header Pass 2 role: OCR toggle button visible in left panel header Clicking OCR toggle: raster scan disappears, plain text original OCR fills the left panel, button highlights active Clicking OCR toggle again: plain text disappears, raster scan returns Navigating to a new page while OCR overlay is on: overlay updates to new page's original OCR, stays visible Switching from Pass 2 to Pass 1 while overlay is on: overlay closes, scan returns No horizontal split pane anywhere in the UI Editor (right panel) unchanged — line numbers, textarea, all flags working as before