Update edit.html

edit.html

@@ -5,203 +5,278 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>PDFix Advanced PDF Editor</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@pdf-lib/fontkit@1.1.1/dist/fontkit.umd.min.js"></script>
 <style>
-:root{--bg:#f4f7fb;--panel:#fff;--ink:#172033;--muted:#667085;--line:#e4e9f1;--blue:#2864e8;--blue2:#1747b8;--soft:#edf3ff;--red:#c93434;--shadow:0 8px 26px rgba(22,34,61,.08)}
+:root{--bg:#f4f7fb;--ink:#172033;--muted:#667085;--line:#e4e9f1;--blue:#2864e8;--soft:#edf3ff;--red:#c93434}
 *{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}
-button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 12px;font-weight:600}button:hover{border-color:#9ab5f7;background:#f8faff}button.primary{background:var(--blue);color:white;border-color:var(--blue)}button.primary:hover{background:var(--blue2)}button.danger{color:var(--red)}button:disabled{opacity:.45;cursor:not-allowed}
-header{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:12px;position:sticky;top:0;z-index:5}
-.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:850;letter-spacing:-.5px}.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2864e8,#7c4dff);display:grid;place-items:center;color:#fff;font-weight:900}.brand small{display:block;font-size:10px;letter-spacing:1.8px;color:var(--muted);font-weight:700;margin-top:2px}
-.header-actions{display:flex;gap:8px;align-items:center}.header-actions input{display:none}
-.app{display:grid;grid-template-columns:235px minmax(300px,1fr) 270px;min-height:calc(100vh - 64px)}
-.sidebar,.properties{background:#fff;min-height:calc(100vh - 64px);padding:18px;border-right:1px solid var(--line)}.properties{border-right:0;border-left:1px solid var(--line)}
-.panel-title{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin:3px 0 14px}
-.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool{padding:11px 7px;min-height:68px;text-align:center;font-size:12px;line-height:1.3}.tool .ico{display:block;font-size:20px;margin-bottom:5px}.tool.active{background:var(--soft);border-color:#aac1ff;color:var(--blue)}
-.sep{height:1px;background:var(--line);margin:18px 0}.field{margin:12px 0}.field label{display:block;font-size:12px;font-weight:700;color:#475467;margin-bottom:6px}.field input:not([type=color]):not([type=checkbox]),.field select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px;background:white;color:var(--ink)}.field input[type=color]{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:white;padding:3px}.field input[type=range]{width:100%}.hint{font-size:11px;line-height:1.5;color:var(--muted)}
-.workspace{min-width:0;display:flex;flex-direction:column}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}.toolbar .spacer{flex:1}.toolbar button{padding:8px 10px;font-size:12px}.status{font-size:12px;color:var(--muted);padding:9px 16px;border-bottom:1px solid var(--line);background:#fbfcfe}
-.canvas-area{flex:1;overflow:auto;padding:30px 18px 70px;display:flex;align-items:flex-start;justify-content:center;position:relative}.welcome{max-width:540px;width:100%;margin:7vh auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px 30px;box-shadow:var(--shadow)}.welcome .big{font-size:52px}.welcome h1{font-size:26px;margin:14px 0 8px}.welcome p{color:var(--muted);line-height:1.6}.upload-label{display:inline-block;margin-top:12px}
-.page-wrap{position:relative;background:#fff;box-shadow:0 8px 30px rgba(22,34,61,.15);line-height:0;max-width:100%;user-select:none}.page-wrap canvas{display:block;max-width:100%;height:auto}.overlay{position:absolute;inset:0;overflow:hidden;touch-action:none}.item{position:absolute;cursor:move;line-height:normal;user-select:none;white-space:pre-wrap}.item.selected{outline:1px dashed var(--blue);outline-offset:2px}.item.text{min-width:25px;min-height:1em}.item.image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.item.shape{border:2px solid;pointer-events:auto}.item.highlight{opacity:.42}.item.signature{font-family:cursive}
-.thumb-list{display:flex;flex-direction:column;gap:10px;max-height:40vh;overflow:auto}.thumb{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:9px;border:1px solid var(--line);padding:8px;border-radius:9px;cursor:pointer;font-size:12px}.thumb.active{border-color:var(--blue);background:var(--soft)}.thumb canvas{width:50px;height:auto;border:1px solid #e8ebf0}.thumb button{padding:3px 6px;font-size:11px}
-.page-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.page-actions button{font-size:11px;padding:8px 4px}
-.empty-prop{padding:15px;border-radius:10px;background:#f7f9fc;color:var(--muted);font-size:12px;line-height:1.5}
-.footer-note{font-size:10px;color:var(--muted);line-height:1.5;margin-top:16px}
-#fileInput,#imageInput{display:none}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#172033;color:white;padding:12px 16px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);z-index:20;display:none;max-width:90vw}
-@media(max-width:1050px){.app{grid-template-columns:200px minmax(250px,1fr)}.properties{grid-column:1/-1;min-height:auto;border-left:0;border-top:1px solid var(--line)}.properties .prop-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.properties .panel-title{grid-column:1/-1}}
-@media(max-width:700px){header{padding:0 12px}.brand{font-size:17px}.header-actions button{padding:8px;font-size:11px}.app{display:flex;flex-direction:column}.sidebar,.properties{min-height:auto;border-right:0;border-left:0;border-bottom:1px solid var(--line)}.tool-grid{grid-template-columns:repeat(4,1fr)}.tool{font-size:10px;padding:8px 3px}.tool .ico{font-size:17px}.thumb-list{flex-direction:row;max-height:none;overflow-x:auto}.thumb{min-width:145px}.properties .prop-layout{grid-template-columns:1fr 1fr}.canvas-area{padding:18px 8px 40px}.toolbar{padding:9px;gap:5px}.toolbar button{padding:7px;font-size:11px}}
+button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:8px 12px;font-weight:600}button:hover{border-color:#9ab5f7}button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}button.danger{color:var(--red)}button:disabled{opacity:.45;cursor:not-allowed}
+header{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:5}
+.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800}.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2864e8,#7c4dff);display:grid;place-items:center;color:#fff}
+.hb{display:flex;gap:8px}
+.app{display:grid;grid-template-columns:200px minmax(300px,1fr) 240px;min-height:calc(100vh - 60px)}
+.side{background:#fff;padding:16px;border-right:1px solid var(--line)}.props{background:#fff;padding:16px;border-left:1px solid var(--line)}
+.pt{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin:2px 0 12px}
+.tg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool{padding:10px 4px;text-align:center;font-size:12px;line-height:1.3}.tool i{display:block;font-style:normal;font-size:19px;margin-bottom:3px}.tool.active{background:var(--soft);border-color:#aac1ff;color:var(--blue)}
+.field{margin:12px 0}.field label{display:block;font-size:12px;font-weight:700;color:#475467;margin-bottom:5px}.field input:not([type=color]):not([type=checkbox]),.field select{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px}.field input[type=color]{width:100%;height:36px;border:1px solid var(--line);border-radius:8px;padding:2px}
+.row{display:flex;gap:14px}.row label{display:flex;gap:6px;align-items:center}
+.hint,.empty{font-size:12px;line-height:1.5;color:var(--muted)}.empty{background:#f7f9fc;padding:14px;border-radius:10px}
+.ws{min-width:0;display:flex;flex-direction:column}.bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}.bar .sp{flex:1}.bar button{padding:6px 10px;font-size:12px}
+.status{font-size:12px;color:var(--muted);padding:8px 14px;border-bottom:1px solid var(--line);background:#fbfcfe}
+.cv{flex:1;overflow:auto;padding:26px 16px 70px}
+.welcome{max-width:520px;margin:6vh auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px 30px}.welcome h1{font-size:25px}.welcome p{color:var(--muted);line-height:1.6}
+.page-wrap{position:relative;margin:0 auto;background:#fff;box-shadow:0 8px 30px rgba(22,34,61,.18)}.page-wrap canvas{display:block}
+.overlay{position:absolute;inset:0;overflow:hidden;touch-action:none}
+.blk{position:absolute;border:1px dashed rgba(40,100,232,.55);background:rgba(40,100,232,.06);cursor:text}.blk:hover{background:rgba(40,100,232,.22)}
+.item{position:absolute;cursor:move}.item.sel{outline:1px dashed var(--blue);outline-offset:2px}
+.item.text{white-space:pre;min-width:8px}.item.editing{outline:2px solid var(--blue);background:rgba(255,255,255,.92);cursor:text;min-width:20px}
+.item.highlight{mix-blend-mode:multiply;opacity:.45}.item.rect{border:2px solid}.item img{width:100%;height:100%;pointer-events:none}.ghost{position:absolute;border:1px dashed var(--blue);background:rgba(40,100,232,.1);pointer-events:none}
+.hd{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:var(--blue);cursor:nwse-resize;border-radius:3px}
+#fileInput,#imageInput{display:none}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#172033;color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;z-index:20;display:none;max-width:90vw}
+@media(max-width:900px){.app{grid-template-columns:1fr}.tg{grid-template-columns:repeat(4,1fr)}}
 </style>
 </head>
 <body>
 <header>
-  <div class="brand"><div class="logo">P</div><div>PDFix<small>ADVANCED PDF EDITOR</small></div></div>
-  <div class="header-actions">
-    <button id="openBtn">Open PDF</button>
-    <button id="undoBtn" disabled>Undo</button>
-    <button class="primary" id="saveBtn" disabled>Export PDF</button>
-  </div>
+  <div class="brand"><div class="logo">P</div>PDFix</div>
+  <div class="hb"><button id="openBtn">Open PDF</button><button id="undoBtn" disabled>Undo</button><button class="primary" id="saveBtn" disabled>Export PDF</button></div>
 </header>
-<input id="fileInput" type="file" accept="application/pdf,.pdf">
-<input id="imageInput" type="file" accept="image/png,image/jpeg">
+<input id="fileInput" type="file" accept="application/pdf,.pdf"><input id="imageInput" type="file" accept="image/png,image/jpeg">
 <div class="app">
-  <aside class="sidebar">
-    <div class="panel-title">Editing tools</div>
-    <div class="tool-grid">
-      <button class="tool active" data-mode="select"><span class="ico">↖</span>Select / Move</button>
-      <button class="tool" data-mode="text"><span class="ico">T</span>Add text</button>
-      <button class="tool" data-mode="replace"><span class="ico">✎</span>Edit existing text</button>
-      <button class="tool" data-mode="image"><span class="ico">▧</span>Add image</button>
-      <button class="tool" data-mode="highlight"><span class="ico">🖍</span>Highlight</button>
-      <button class="tool" data-mode="draw"><span class="ico">✎</span>Freehand</button>
-      <button class="tool" data-mode="rect"><span class="ico">▱</span>Rectangle</button>
-      <button class="tool" data-mode="whiteout"><span class="ico">□</span>Cover content</button>
-      <button class="tool" data-mode="signature"><span class="ico">✍</span>Signature text</button>
+  <aside class="side">
+    <div class="pt">Tools</div>
+    <div class="tg">
+      <button class="tool active" data-mode="select"><i>↖</i>Select</button>
+      <button class="tool" data-mode="edit"><i>✎</i>Edit text</button>
+      <button class="tool" data-mode="text"><i>T</i>Add text</button>
+      <button class="tool" data-mode="image"><i>▧</i>Image</button>
+      <button class="tool" data-mode="highlight"><i>🖍</i>Highlight</button>
+      <button class="tool" data-mode="draw"><i>〰</i>Draw</button>
+      <button class="tool" data-mode="rect"><i>▱</i>Rectangle</button>
+      <button class="tool" data-mode="cover"><i>□</i>Cover</button>
     </div>
-    <div class="sep"></div>
-    <div class="panel-title">PDF pages</div>
-    <div id="thumbList" class="thumb-list"><div class="hint">Open a PDF to see its pages.</div></div>
-    <div class="page-actions">
-      <button id="rotateBtn" disabled>↻ Rotate page</button>
-      <button id="deletePageBtn" disabled class="danger">Delete page</button>
-      <button id="duplicateBtn" disabled>Duplicate page</button>
-      <button id="extractBtn" disabled>Extract page</button>
-    </div>
-    <div class="footer-note">Tip: Select an object to move, resize (using the properties panel), recolour or delete it. Use Export PDF to save a new copy.</div>
+    <div class="pt" style="margin-top:20px">Custom fonts</div>
+    <button id="fontBtn" style="width:100%">Upload font (TTF/OTF)</button><input id="fontInput" type="file" accept=".ttf,.otf" multiple hidden>
+    <p class="hint" id="fontNames">None yet</p>
+    <p class="hint">Upload the PDF's own font files (e.g. Calibri.ttf, Calibri-Bold.ttf). They are matched automatically by name when you click text.</p>
+    <div style="height:12px"></div>
+    <button id="delPage" style="width:100%" class="danger" disabled>Delete this page</button>
+    <p class="hint" style="margin-top:14px">Edit text: click any text → type → Enter to apply (Esc cancels, Shift+Enter = new line).</p>
   </aside>
-
-  <main class="workspace">
-    <div class="toolbar">
-      <button id="prevBtn" disabled>← Prev</button><button id="nextBtn" disabled>Next →</button>
-      <span id="pageLabel" class="hint">No PDF open</span>
-      <span class="spacer"></span>
-      <button id="zoomOut" disabled>−</button><button id="zoomLabel" disabled>100%</button><button id="zoomIn" disabled>+</button>
-      <button id="fitBtn" disabled>Fit page</button>
+  <main class="ws">
+    <div class="bar">
+      <button id="prevBtn" disabled>← Prev</button><button id="nextBtn" disabled>Next →</button><span id="pageLabel" class="hint">No PDF open</span>
+      <span class="sp"></span>
+      <button id="zoomOut" disabled>−</button><span id="zoomLabel" class="hint">125%</span><button id="zoomIn" disabled>+</button><button id="fitBtn" disabled>Fit width</button>
     </div>
-    <div class="status" id="status">Open a PDF to begin. To replace existing text, choose “Edit existing text” and click a text line. Your file is processed in this browser.</div>
-    <div class="canvas-area" id="canvasArea">
-      <div class="welcome" id="welcome">
-        <div class="big">📄</div><h1>Edit PDFs with PDFix</h1>
-        <p>Add text, images, highlights, shapes and signatures; manage pages; then export your edited PDF.</p>
-        <label class="upload-label"><button class="primary" id="welcomeOpen">Choose a PDF</button></label>
-        <p class="hint">Supports ordinary PDF files. Internet is needed to load the PDF editing libraries.</p>
-      </div>
+    <div class="status" id="status">Open a PDF to begin. Your file stays in your browser.</div>
+    <div class="cv" id="canvasArea">
+      <div class="welcome" id="welcome"><div style="font-size:50px">📄</div><h1>Edit PDFs with PDFix</h1><p>Click text to edit it in the same font, size and colour. Add images, highlights, shapes; then export.</p><button class="primary" id="welcomeOpen">Choose a PDF</button></div>
     </div>
   </main>
-
-  <aside class="properties">
-    <div class="panel-title">Properties</div>
-    <div id="noSelection" class="empty-prop">Select an added object to edit its properties. Choose a tool and click the PDF page to add content.</div>
-    <div id="propPanel" hidden>
-      <div class="prop-layout">
-        <div class="field"><label>Text</label><input id="propText" type="text" placeholder="Text content"></div>
-        <div class="field"><label>Font size</label><input id="propSize" type="number" min="6" max="144" value="18"></div>
-        <div class="field"><label>Text / line colour</label><input id="propColor" type="color" value="#182033"></div>
-        <div class="field"><label>Background / fill</label><input id="propFill" type="color" value="#fff176"></div>
-        <div class="field"><label>Width (px)</label><input id="propWidth" type="number" min="10" max="2000" value="160"></div>
-        <div class="field"><label>Height (px)</label><input id="propHeight" type="number" min="10" max="2000" value="44"></div>
-      </div>
-      <div class="field"><label>Transparency / opacity</label><input id="propOpacity" type="range" min="10" max="100" value="45"></div>
-      <div class="field"><label>Text style</label><select id="propWeight"><option value="400">Regular</option><option value="700">Bold</option><option value="italic">Italic</option></select></div>
-      <div class="field"><label>Position X (px)</label><input id="propX" type="number" min="0" value="30"></div>
-      <div class="field"><label>Position Y (px)</label><input id="propY" type="number" min="0" value="30"></div>
-      <button id="applyProps" class="primary" style="width:100%">Apply properties</button>
-      <button id="deleteObject" class="danger" style="width:100%;margin-top:8px">Delete selected object</button>
+  <aside class="props">
+    <div class="pt">Properties</div>
+    <div id="noSel" class="empty">Select an object, or use “Edit text” and click any text on the page.</div>
+    <div id="pp" hidden>
+      <div class="field tx"><label>Font</label><select id="pFam"><option value="sans">Helvetica / Arial (Sans)</option><option value="serif">Times (Serif)</option><option value="mono">Courier (Mono)</option></select></div>
+      <div class="field tx"><label>Size (pt)</label><input id="pSize" type="number" min="4" max="200" step="0.5"></div>
+      <div class="field"><label>Colour</label><input id="pCol" type="color"></div>
+      <div class="field tx row"><label><input type="checkbox" id="pB"> Bold</label><label><input type="checkbox" id="pI"> Italic</label></div>
+      <button id="delObj" class="danger" style="width:100%">Delete (restores original text)</button>
     </div>
-    <div class="sep"></div>
-    <div class="panel-title">Quick actions</div>
-    <div class="field"><label>Insert blank page after current</label><button id="insertBlank" style="width:100%" disabled>＋ Insert blank page</button></div>
-    <div class="field"><label>Page navigation</label><div style="display:flex;gap:8px"><input id="jumpPage" type="number" min="1" value="1" style="width:75px;padding:8px;border:1px solid var(--line);border-radius:8px"><button id="jumpBtn" disabled>Go</button></div></div>
-    <div class="footer-note">Text replacement is visual: PDFix detects text lines and lets you click one to cover it and place replacement text. This does not rewrite the PDF's native text objects, may not perfectly match fonts/spacing, and is not secure redaction. Complex layouts may need manual adjustment.</div>
+    <p class="hint" style="margin-top:18px">Note: old text stays in the PDF under a cover. This is visual editing, not secure redaction.</p>
   </aside>
 </div>
 <div id="toast" class="toast"></div>
 <script>
 pdfjsLib.GlobalWorkerOptions.workerSrc='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-const { PDFDocument, rgb, StandardFonts, degrees } = PDFLib;
-const $=id=>document.getElementById(id);
-let originalBytes=null, pdfjsDoc=null, pdfDoc=null, currentPage=1, zoom=1, mode='select', selected=null, objects=[], undoStack=[], rotations={}, pageCount=0, renderTask=null;
-let pageWrap=null, overlay=null, pageCanvas=null, baseWidth=0, baseHeight=0, drawing=false, drawPoints=[];
-const colors={};
-function toast(msg){const t=$('toast');t.textContent=msg;t.style.display='block';clearTimeout(toast.timer);toast.timer=setTimeout(()=>t.style.display='none',3200)}
-function setStatus(s){$('status').textContent=s}
-function snapshot(){undoStack.push(JSON.stringify({objects,rotations,pageCount,currentPage}));if(undoStack.length>30)undoStack.shift();$('undoBtn').disabled=!undoStack.length}
-function restoreSnapshot(s){const d=JSON.parse(s);objects=d.objects||[];rotations=d.rotations||{};pageCount=d.pageCount||pageCount;currentPage=Math.min(d.currentPage||1,pageCount);selected=null;renderThumbs();renderPage();syncProps();updateControls()}
-function updateControls(){const loaded=!!pdfDoc;['prevBtn','nextBtn','zoomOut','zoomLabel','zoomIn','fitBtn','saveBtn','rotateBtn','deletePageBtn','duplicateBtn','extractBtn','insertBlank','jumpBtn'].forEach(id=>$(id).disabled=!loaded);$('pageLabel').textContent=loaded?`Page ${currentPage} of ${pageCount}`:'No PDF open';$('jumpPage').max=pageCount||1;$('jumpPage').value=currentPage;$('zoomLabel').textContent=Math.round(zoom*100)+'%';$('prevBtn').disabled=!loaded||currentPage<=1;$('nextBtn').disabled=!loaded||currentPage>=pageCount}
-function setMode(m){mode=m;document.querySelectorAll('.tool').forEach(b=>b.classList.toggle('active',b.dataset.mode===m));document.querySelectorAll('.existing-text-target').forEach(el=>el.style.pointerEvents=m==='replace'?'auto':'none');if(m==='image'){$('imageInput').click();return}setStatus(({select:'Select and move an added object.',text:'Click on the page to place text.',replace:'Click a detected text line to replace it. Replacement covers the original line visually.',highlight:'Drag on the page to add a highlight.',draw:'Drag on the page to draw.',rect:'Drag on the page to add a rectangle.',whiteout:'Drag over content to cover it with white.',signature:'Click on the page to place signature text.'})[m]||'Choose a tool.')}
-document.querySelectorAll('.tool').forEach(b=>b.addEventListener('click',()=>setMode(b.dataset.mode)));
+const {PDFDocument,rgb,StandardFonts}=PDFLib,$=i=>document.getElementById(i);
+const FF={sans:'Arial,Helvetica,sans-serif',serif:'"Times New Roman",Times,serif',mono:'"Courier New",Courier,monospace'};
+const FN={sans:['Helvetica','HelveticaBold','HelveticaOblique','HelveticaBoldOblique'],serif:['TimesRoman','TimesRomanBold','TimesRomanItalic','TimesRomanBoldItalic'],mono:['Courier','CourierBold','CourierOblique','CourierBoldOblique']};
+const MSG={select:'Click an object to select/move it. Double-click text to edit.',edit:'Click any text on the page to edit it in place (same font, size, colour).',text:'Click on the page to type new text.',image:'Choose an image to insert.',highlight:'Drag to highlight.',draw:'Drag to draw.',rect:'Drag to draw a rectangle.',cover:'Drag to cover content with a coloured box.'};
+const ASC=.945; // baseline offset as a fraction of font size
+const CF={}; // custom fonts: 'c:Name' -> {name,bytes,bl}
+const isC=f=>f.startsWith('c:'),BL=f=>CF[f]?CF[f].bl:ASC;
+const fcss=o=>isC(o.family)&&CF[o.family]?`"${CF[o.family].name}",${FF.sans}`:FF[o.family]||FF.sans;
+const nrm=s=>s.replace(/^[A-Z]{6}\+/,'').toLowerCase().replace(/[^a-z0-9]/g,'');
+const STY=/bold|italic|oblique|regular|black|heavy|demi|semi|light|medium/g;
+const sty=n=>(/bold|black|heavy|demi/.test(n)?1:0)+(/italic|oblique/.test(n)?2:0);
+function matchCustom(bk){const n=nrm(bk.name),b=n.replace(STY,'');if(b.length<3)return null;let best=null,bs=9;
+  for(const k in CF){const m=nrm(CF[k].name),mb=m.replace(STY,'');if(mb.length<3||!(b.includes(mb)||mb.includes(b)))continue;const d=Math.abs(sty(n)-sty(m));if(d<bs){bs=d;best=k}}return best}
+function fontList(){$('fontNames').textContent=Object.values(CF).map(f=>f.name).join(', ')||'None yet';const s=$('pFam');s.querySelectorAll('.cu').forEach(n=>n.remove());
+  for(const k in CF){const op=new Option(CF[k].name+' (custom)',k);op.className='cu';s.add(op)}}
+$('fontBtn').onclick=()=>$('fontInput').click();
+$('fontInput').onchange=async e=>{
+  for(const f of e.target.files){try{
+    const buf=await f.arrayBuffer(),name=f.name.replace(/\.[^.]+$/,'').replace(/["']/g,''),ff=new FontFace(name,buf.slice(0));await ff.load();document.fonts.add(ff);
+    let bl=ASC;try{const fk=fontkit.create(new Uint8Array(buf)),a=fk.ascent/fk.unitsPerEm,d=Math.abs(fk.descent)/fk.unitsPerEm;bl=(1.2-(a+d))/2+a}catch(x){}
+    CF['c:'+name]={name,bytes:new Uint8Array(buf),bl};
+  }catch(x){console.error(x);toast('Could not load font '+f.name)}}
+  e.target.value='';fontList();toast('Fonts loaded. Click text with “Edit text” to use them.')};
+let bytes,doc,page=1,pages=0,zoom=1.25,mode='select',sel=null,editing=null,objs=[],undo=[],W=0,H=0,cv,ov,blocks=[],drawId=0;
+const toast=m=>{const t=$('toast');t.textContent=m;t.style.display='block';clearTimeout(toast.t);toast.t=setTimeout(()=>t.style.display='none',3200)};
+const uid=()=>Math.random().toString(36).slice(2);
+const snap=()=>{undo.push(JSON.stringify(objs));if(undo.length>40)undo.shift();$('undoBtn').disabled=false};
+const cur=()=>objs.find(o=>o.id===sel);
+const xy=e=>{const r=ov.getBoundingClientRect();return{x:(e.clientX-r.left)/zoom,y:(e.clientY-r.top)/zoom}};
+const status=s=>$('status').textContent=s;
+
+/* ---------- open / render ---------- */
 $('openBtn').onclick=$('welcomeOpen').onclick=()=>$('fileInput').click();
-$('fileInput').addEventListener('change',async e=>{const f=e.target.files[0];if(!f)return;try{setStatus('Opening PDF…');originalBytes=await f.arrayBuffer();pdfjsDoc=await pdfjsLib.getDocument({data:new Uint8Array(originalBytes.slice(0))}).promise;pdfDoc=await PDFDocument.load(originalBytes.slice(0));pageCount=pdfjsDoc.numPages;currentPage=1;zoom=1;objects=[];rotations={};undoStack=[];selected=null;$('welcome').style.display='none';renderThumbs();await renderPage();updateControls();$('undoBtn').disabled=true;setStatus(`${f.name} opened · ${pageCount} page(s) · Browser-based editing`);toast('PDF opened successfully.')}catch(err){console.error(err);toast('Could not open this PDF. It may be encrypted or unsupported.');setStatus('Could not open PDF. Try another file.')}e.target.value=''});
-async function renderPage(){if(!pdfjsDoc)return;if(renderTask){try{renderTask.cancel()}catch(e){}}const page=await pdfjsDoc.getPage(currentPage);const base=page.getViewport({scale:1,rotation:rotations[currentPage]||0});const vp=page.getViewport({scale:zoom,rotation:rotations[currentPage]||0});baseWidth=base.width;baseHeight=base.height;$('canvasArea').querySelectorAll('.page-wrap').forEach(n=>n.remove());pageWrap=document.createElement('div');pageWrap.className='page-wrap';pageWrap.style.width=vp.width+'px';pageWrap.style.maxWidth='100%';pageCanvas=document.createElement('canvas');pageCanvas.width=Math.ceil(vp.width);pageCanvas.height=Math.ceil(vp.height);pageCanvas.style.width=vp.width+'px';pageCanvas.style.maxWidth='100%';pageWrap.appendChild(pageCanvas);overlay=document.createElement('div');overlay.className='overlay';overlay.style.width=vp.width+'px';overlay.style.height=vp.height+'px';pageWrap.appendChild(overlay);$('canvasArea').appendChild(pageWrap);renderTask=page.render({canvasContext:pageCanvas.getContext('2d'),viewport:vp});try{await renderTask.promise}catch(e){};renderOverlay();await renderExistingTextTargets(page,vp);updateControls()}
+$('fileInput').onchange=async e=>{const f=e.target.files[0];if(!f)return;try{bytes=new Uint8Array(await f.arrayBuffer());await load();objs=[];undo=[];sel=editing=null;page=1;$('welcome').hidden=true;$('undoBtn').disabled=true;await draw();status(f.name+' · '+pages+' page(s)')}catch(x){console.error(x);toast('Could not open this PDF (it may be encrypted).')}e.target.value=''};
+async function load(){doc=await pdfjsLib.getDocument({data:bytes.slice()}).promise;pages=doc.numPages}
+async function draw(){
+  const my=++drawId,pg=await doc.getPage(page),vp=pg.getViewport({scale:zoom}),b=pg.getViewport({scale:1});W=b.width;H=b.height;
+  $('canvasArea').querySelectorAll('.page-wrap').forEach(n=>n.remove());
+  const wrap=document.createElement('div');wrap.className='page-wrap';wrap.style.width=vp.width+'px';wrap.style.height=vp.height+'px';
+  cv=document.createElement('canvas');cv.width=Math.ceil(vp.width);cv.height=Math.ceil(vp.height);wrap.appendChild(cv);
+  ov=document.createElement('div');ov.className='overlay';ov.onpointerdown=ovDown;wrap.appendChild(ov);$('canvasArea').appendChild(wrap);
+  await pg.render({canvasContext:cv.getContext('2d',{willReadFrequently:true}),viewport:vp}).promise;
+  if(my!==drawId)return;
+  blocks=await getBlocks(pg,b);render();ctl();
+}
+function ctl(){const l=!!doc;['zoomIn','zoomOut','fitBtn','saveBtn','delPage'].forEach(i=>$(i).disabled=!l);$('prevBtn').disabled=!l||page<=1;$('nextBtn').disabled=!l||page>=pages;$('pageLabel').textContent=l?`Page ${page} of ${pages}`:'No PDF open';$('zoomLabel').textContent=Math.round(zoom*100)+'%'}
 
-async function renderExistingTextTargets(page, viewport){
-  if(!overlay || !pdfjsDoc) return;
-  // Transparent hit areas let the user click an existing PDF text line.
-  // Export uses a white cover plus replacement text; it does not rewrite the PDF's native text objects.
-  try {
-    const content = await page.getTextContent();
-    const frag = document.createDocumentFragment();
-    for (const item of content.items) {
-      if (!item.str || !item.str.trim() || !item.transform) continue;
-      const tx = PDFJSUtilTransform(viewport, item.transform);
-      const height = Math.max(8, Math.hypot(item.transform[2], item.transform[3]) * zoom);
-      const width = Math.max(10, (item.width || item.str.length * 5) * zoom);
-      const left = tx.x / zoom;
-      const top = (tx.y - height) / zoom;
-      const target = document.createElement('div');
-      target.className = 'existing-text-target';
-      target.title = 'Click to replace: ' + item.str;
-      target.style.cssText = `position:absolute;left:${left}px;top:${top}px;width:${width/zoom}px;height:${height/zoom}px;z-index:2;cursor:text;background:transparent;border:1px solid transparent;line-height:1;overflow:hidden;pointer-events:${mode==='replace'?'auto':'none'};`;
-      target.addEventListener('mouseenter',()=>{if(mode==='replace')target.style.background='rgba(40,100,232,.12)';});
-      target.addEventListener('mouseleave',()=>{target.style.background='transparent';});
-      target.addEventListener('pointerdown',e=>{
-        if(mode!=='replace') return;
-        e.preventDefault();e.stopPropagation();
-        const replacement=prompt('Replace this text line:',item.str);
-        if(replacement===null || replacement===item.str) return;
-        if(!replacement.trim()){toast('Blank replacement cancelled. Use a white cover if you want to hide text.');return;}
-        const x=Math.max(0,left), y=Math.max(0,top), w=Math.max(20,width/zoom+4), h=Math.max(12,height/zoom+4);
-        snapshot();
-        objects.push({id:(crypto.randomUUID?crypto.randomUUID():String(Date.now()+Math.random())),page:currentPage,type:'whiteout',x,y,w,h,fill:'#ffffff',color:'#ffffff',opacity:1});
-        objects.push({id:(crypto.randomUUID?crypto.randomUUID():String(Date.now()+Math.random())),page:currentPage,type:'text',x:x+1,y:y+1,w:Math.max(w,replacement.length*7),h,text:replacement,size:Math.max(8,height/zoom*.78),color:'#182033',fill:'transparent',opacity:1,weight:'400'});
-        selected=objects[objects.length-1].id;
-        renderOverlay();syncProps();
-        toast('Text replacement added. Export PDF to save the visible replacement.');
-      });
-      frag.appendChild(target);
+/* ---------- read existing text: position, font, size ---------- */
+async function getBlocks(pg,b){
+  const tc=await pg.getTextContent(),out=[];let last=null;
+  for(const it of tc.items){
+    if(!it.str||!it.transform)continue;
+    const t=it.transform,size=Math.hypot(t[2],t[3]);if(!size)continue;
+    const [x,y]=b.convertToViewportPoint(t[4],t[5]);
+    if(last&&last.font===it.fontName&&Math.abs(last.y-y)<size*.3&&x>=last.x&&x-(last.x+last.w)<size*.8){
+      const gap=x-(last.x+last.w);if(gap>size*.2&&!/\s$/.test(last.text)&&!/^\s/.test(it.str))last.text+=' ';
+      last.text+=it.str;last.w=x+it.width-last.x;continue}
+    let name='';try{name=pg.commonObjs.get(it.fontName).name||''}catch(e){}
+    last={x,y,w:it.width,size,font:it.fontName,text:it.str,name,ff:(tc.styles[it.fontName]||{}).fontFamily||''};out.push(last);
+  }
+  return out.filter(o=>o.text.trim());
+}
+function fam(o){const n=(o.name+' '+o.ff).toLowerCase();if(/courier|mono|consolas|typewriter/.test(n))return'mono';
+  return(/times|georgia|garamond|cambria|palatino|minion|bookman|roman/.test(n)||o.ff==='serif')&&!/sans/.test(n)?'serif':'sans'}
+/* sample page pixels: most common colour = background, farthest from it = text colour */
+function sample(x,y,w,h){
+  const X=Math.max(0,Math.floor(x*zoom)),Y=Math.max(0,Math.floor(y*zoom)),w2=Math.max(1,Math.min(cv.width-X,Math.ceil(w*zoom))),h2=Math.max(1,Math.min(cv.height-Y,Math.ceil(h*zoom)));
+  const d=cv.getContext('2d').getImageData(X,Y,w2,h2).data,cnt={};let bg=[255,255,255],bn=0;
+  for(let i=0;i<d.length;i+=4){const k=(d[i]>>4)<<8|(d[i+1]>>4)<<4|d[i+2]>>4,e=cnt[k]||(cnt[k]={n:0,c:[d[i],d[i+1],d[i+2]]});if(++e.n>bn){bn=e.n;bg=e.c}}
+  let fg=[0,0,0],md=-1;for(let i=0;i<d.length;i+=4){const dd=Math.abs(d[i]-bg[0])+Math.abs(d[i+1]-bg[1])+Math.abs(d[i+2]-bg[2]);if(dd>md){md=dd;fg=[d[i],d[i+1],d[i+2]]}}
+  const hx=a=>'#'+a.map(v=>v.toString(16).padStart(2,'0')).join('');return{bg:hx(bg),fg:md<60?'#000000':hx(fg)};
+}
+function editBlock(bk){
+  const key=page+':'+Math.round(bk.x)+':'+Math.round(bk.y),ex=objs.find(o=>o.key===key&&o.type==='text');
+  if(ex){snap();sel=editing=ex.id;render();syncProps();return}
+  snap();const top=bk.y-ASC*bk.size,h=bk.size*1.2,cl=sample(bk.x,top,bk.w,h),cm=matchCustom(bk),family=cm||fam(bk);
+  objs.push({id:uid(),page,type:'cover',key,x:bk.x-1,y:top-.5,w:bk.w+3,h:h+1,color:cl.bg},
+    {id:uid(),page,type:'text',key,x:bk.x,y:bk.y-BL(family)*bk.size,h,text:bk.text,orig:bk.text,size:+bk.size.toFixed(1),family,bold:!cm&&/bold|black|heavy|demi/i.test(bk.name),italic:!cm&&/italic|oblique/i.test(bk.name),color:cl.fg});
+  if(cm)toast('Matched custom font: '+CF[cm].name);
+  sel=editing=objs[objs.length-1].id;render();syncProps();
+}
+
+/* ---------- overlay rendering ---------- */
+function render(){
+  if(!ov)return;ov.innerHTML='';
+  if(mode==='edit')for(const bk of blocks){const d=document.createElement('div');d.className='blk';d.title=bk.text;d.style.cssText=`left:${bk.x*zoom}px;top:${(bk.y-ASC*bk.size)*zoom}px;width:${bk.w*zoom}px;height:${bk.size*1.2*zoom}px`;d.onpointerdown=e=>{e.stopPropagation();e.preventDefault();editBlock(bk)};ov.appendChild(d)}
+  for(const o of objs.filter(o=>o.page===page)){
+    const el=document.createElement('div'),s=el.style;el.className='item '+o.type+(sel===o.id?' sel':'');s.left=o.x*zoom+'px';s.top=o.y*zoom+'px';
+    if(o.type==='text'){
+      s.fontSize=o.size*zoom+'px';s.lineHeight=o.size*1.2*zoom+'px';s.color=o.color;const cu=isC(o.family);s.fontFamily=fcss(o);s.fontWeight=!cu&&o.bold?700:400;s.fontStyle=!cu&&o.italic?'italic':'normal';el.textContent=o.text;
+      if(editing===o.id){el.contentEditable='true';el.classList.add('editing');
+        setTimeout(()=>{el.focus();const r=document.createRange();r.selectNodeContents(el);const g=getSelection();g.removeAllRanges();g.addRange(r)});
+        el.onblur=()=>finish(o);
+        el.onkeydown=e=>{if(e.key==='Escape'){el.textContent=o.text;el.blur()}else if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();el.blur()}}}
+    }else{
+      s.width=o.w*zoom+'px';s.height=o.h*zoom+'px';
+      if(o.type==='cover')s.background=o.color;
+      else if(o.type==='highlight')s.background=o.color;
+      else if(o.type==='rect')s.borderColor=o.color;
+      else if(o.type==='image'){const im=document.createElement('img');im.src=o.src;el.appendChild(im)}
+      else if(o.type==='draw')el.innerHTML=`<svg width="${o.w*zoom+4}" height="${o.h*zoom+4}" style="overflow:visible"><polyline fill="none" stroke="${o.color}" stroke-width="${2*zoom}" stroke-linecap="round" stroke-linejoin="round" points="${o.pts.map(p=>p.x*zoom+','+p.y*zoom).join(' ')}"/></svg>`;
+      if(sel===o.id&&o.type!=='draw'){const h=document.createElement('div');h.className='hd';h.onpointerdown=e=>{e.stopPropagation();snap();const sx=e.clientX,sy=e.clientY,w0=o.w,h0=o.h;
+        const mv=ev=>{o.w=Math.max(5,w0+(ev.clientX-sx)/zoom);o.h=Math.max(5,h0+(ev.clientY-sy)/zoom);s.width=o.w*zoom+'px';s.height=o.h*zoom+'px'};
+        const up=()=>{removeEventListener('pointermove',mv);removeEventListener('pointerup',up)};addEventListener('pointermove',mv);addEventListener('pointerup',up)};el.appendChild(h)}
     }
-    overlay.appendChild(frag);
-  } catch(err) { console.warn('Could not detect text on page',err); }
+    el.onpointerdown=e=>{
+      if(mode==='edit'){if(o.type==='text'&&editing!==o.id){e.preventDefault();snap();sel=editing=o.id;render();syncProps()}return}
+      if(mode!=='select'||editing===o.id)return;
+      e.stopPropagation();sel=o.id;syncProps();snap();const sx=e.clientX,sy=e.clientY,ox=o.x,oy=o.y;
+      const mv=ev=>{o.x=Math.max(0,ox+(ev.clientX-sx)/zoom);o.y=Math.max(0,oy+(ev.clientY-sy)/zoom);s.left=o.x*zoom+'px';s.top=o.y*zoom+'px'};
+      const up=()=>{removeEventListener('pointermove',mv);removeEventListener('pointerup',up);render()};
+      addEventListener('pointermove',mv);addEventListener('pointerup',up)};
+    el.ondblclick=()=>{if(o.type==='text'&&mode==='select'){snap();sel=editing=o.id;render()}};
+    ov.appendChild(el);
+  }
+}
+function finish(o){
+  if(editing!==o.id)return;const el=ov.querySelector('.editing'),v=el?el.innerText.replace(/\n$/,''):o.text;editing=null;
+  if(o.orig!==undefined&&v===o.orig)objs=objs.filter(x=>x.key!==o.key);   // unchanged → restore original
+  else if(!v.trim())objs=objs.filter(x=>x.id!==o.id);                      // emptied → text removed (cover stays)
+  else o.text=v;
+  sel=null;render();syncProps();
 }
-function PDFJSUtilTransform(viewport, transform){
-  const point = viewport.convertToViewportPoint(transform[4], transform[5]);
-  return {x:point[0], y:point[1]};
+
+/* ---------- tools ---------- */
+function setMode(m){mode=m;document.querySelectorAll('.tool').forEach(b=>b.classList.toggle('active',b.dataset.mode===m));status(MSG[m]);if(m==='image')$('imageInput').click();render()}
+document.querySelectorAll('.tool').forEach(b=>b.onclick=()=>setMode(b.dataset.mode));
+function add(o){snap();o.id=uid();o.page=page;objs.push(o);sel=o.id;$('saveBtn').disabled=false;render();syncProps();return o}
+const COL={highlight:'#ffeb3b',rect:'#2864e8',cover:'#ffffff',draw:'#2864e8'};
+function ovDown(e){
+  if(!doc)return;const p=xy(e);
+  if(mode==='select'||mode==='edit'){sel=null;render();syncProps();return}
+  if(mode==='text'){const o=add({type:'text',x:p.x,y:p.y,h:16.8,text:'Text',size:14,family:'sans',bold:false,italic:false,color:'#000000'});editing=o.id;render();return}
+  if(!COL[mode])return;
+  const g=document.createElement('div');g.className='ghost';ov.appendChild(g);const pts=[p],md=mode;
+  const mv=ev=>{const q=xy(ev);pts.push(q);Object.assign(g.style,{left:Math.min(p.x,q.x)*zoom+'px',top:Math.min(p.y,q.y)*zoom+'px',width:Math.abs(q.x-p.x)*zoom+'px',height:Math.abs(q.y-p.y)*zoom+'px'});if(md==='draw'){g.style.border='0';g.style.background='transparent'}};
+  const up=ev=>{removeEventListener('pointermove',mv);removeEventListener('pointerup',up);g.remove();const q=xy(ev);
+    if(md==='draw'){if(pts.length<2)return;const x=Math.min(...pts.map(a=>a.x)),y=Math.min(...pts.map(a=>a.y));add({type:'draw',x,y,w:Math.max(...pts.map(a=>a.x))-x,h:Math.max(...pts.map(a=>a.y))-y,pts:pts.map(a=>({x:a.x-x,y:a.y-y})),color:COL.draw})}
+    else{const w=Math.abs(q.x-p.x),h=Math.abs(q.y-p.y);if(w>3&&h>3)add({type:md,x:Math.min(p.x,q.x),y:Math.min(p.y,q.y),w,h,color:COL[md]})}};
+  addEventListener('pointermove',mv);addEventListener('pointerup',up);
 }
+$('imageInput').onchange=e=>{const f=e.target.files[0];if(!f)return;const r=new FileReader();r.onload=()=>{const im=new Image();im.onload=()=>{const k=Math.min(1,220/im.width);add({type:'image',x:40,y:40,w:im.width*k,h:im.height*k,src:r.result});setMode('select')};im.src=r.result};r.readAsDataURL(f);e.target.value=''};
+
+/* ---------- properties panel (live) ---------- */
+function syncProps(){const o=cur();$('noSel').hidden=!!o;$('pp').hidden=!o;if(!o)return;
+  document.querySelectorAll('.tx').forEach(n=>n.hidden=o.type!=='text');
+  $('pCol').value=o.color||'#000000';if(o.type==='text'){$('pFam').value=o.family;$('pSize').value=o.size;$('pB').checked=!!o.bold;$('pI').checked=!!o.italic}}
+const live=(id,fn)=>$(id).oninput=()=>{const o=cur();if(!o)return;fn(o);render()};
+live('pFam',o=>o.family=$('pFam').value);live('pSize',o=>{o.size=Math.max(4,+$('pSize').value||12);o.h=o.size*1.2});
+live('pCol',o=>o.color=$('pCol').value);live('pB',o=>o.bold=$('pB').checked);live('pI',o=>o.italic=$('pI').checked);
+$('delObj').onclick=()=>{const o=cur();if(!o)return;snap();objs=objs.filter(x=>o.key?x.key!==o.key:x.id!==o.id);sel=editing=null;render();syncProps()};
+$('undoBtn').onclick=()=>{const s=undo.pop();if(s){objs=JSON.parse(s);sel=editing=null;render();syncProps()}$('undoBtn').disabled=!undo.length};
+addEventListener('keydown',e=>{if(editing||/INPUT|SELECT/.test(document.activeElement.tagName))return;
+  if((e.key==='Delete'||e.key==='Backspace')&&sel){e.preventDefault();$('delObj').click()}
+  if((e.ctrlKey||e.metaKey)&&e.key==='z'){e.preventDefault();$('undoBtn').click()}});
+
+/* ---------- navigation ---------- */
+const go=n=>{if(n<1||n>pages)return;page=n;sel=editing=null;draw();syncProps()};
+$('prevBtn').onclick=()=>go(page-1);$('nextBtn').onclick=()=>go(page+1);
+$('zoomIn').onclick=()=>{zoom=Math.min(3,zoom+.15);draw()};$('zoomOut').onclick=()=>{zoom=Math.max(.5,zoom-.15);draw()};
+$('fitBtn').onclick=()=>{zoom=Math.max(.5,Math.min(3,($('canvasArea').clientWidth-50)/W));draw()};
+$('delPage').onclick=async()=>{if(pages<2)return toast('A PDF needs at least one page.');if(!confirm('Delete page '+page+'?'))return;
+  const d=await PDFDocument.load(bytes);d.removePage(page-1);bytes=await d.save();objs=objs.filter(o=>o.page!==page);objs.forEach(o=>{if(o.page>page)o.page--});
+  await load();page=Math.min(page,pages);undo=[];$('undoBtn').disabled=true;sel=editing=null;draw()};
 
-function pageObjects(){return objects.filter(o=>o.page===currentPage)}
-function renderOverlay(){if(!overlay)return;overlay.innerHTML='';for(const o of pageObjects()){const el=document.createElement('div');el.className='item '+o.type+(selected===o.id?' selected':'');el.dataset.id=o.id;el.style.left=o.x*zoom+'px';el.style.top=o.y*zoom+'px';el.style.width=o.w*zoom+'px';el.style.height=o.h*zoom+'px';el.style.opacity=o.opacity??1;if(o.type==='text'||o.type==='signature'){el.textContent=o.text||'Text';el.style.fontSize=(o.size||18)*zoom+'px';el.style.color=o.color||'#182033';el.style.fontWeight=o.weight==='italic'?'400':(o.weight||'400');el.style.fontStyle=o.weight==='italic'?'italic':'normal';el.style.fontFamily=o.type==='signature'?'cursive':'Arial,sans-serif';el.style.background=o.fill&&o.fill!=='transparent'?o.fill:'transparent';el.style.padding='1px 2px';}else if(o.type==='image'){const img=document.createElement('img');img.src=o.src;el.appendChild(img)}else if(o.type==='highlight'){el.style.background=o.fill||'#fff176';el.style.opacity=o.opacity??.42}else if(o.type==='whiteout'){el.style.background='#fff';el.style.border='1px solid #ddd'}else if(o.type==='rect'){el.style.border=`${Math.max(1,(o.size||2)*zoom)}px solid ${o.color||'#2864e8'}`;el.style.background=o.fill&&o.fill!=='transparent'?o.fill:'transparent'}else if(o.type==='draw'){el.style.pointerEvents='none';const c=document.createElement('canvas');c.width=Math.max(1,o.w*zoom);c.height=Math.max(1,o.h*zoom);c.style.width='100%';c.style.height='100%';el.appendChild(c);const ctx=c.getContext('2d');ctx.strokeStyle=o.color||'#2864e8';ctx.lineWidth=(o.size||3)*zoom;ctx.lineCap='round';ctx.lineJoin='round';ctx.beginPath();(o.points||[]).forEach((p,i)=>{if(!i)ctx.moveTo((p.x-o.x)*zoom,(p.y-o.y)*zoom);else ctx.lineTo((p.x-o.x)*zoom,(p.y-o.y)*zoom)});ctx.stroke();}
-el.addEventListener('pointerdown',e=>{if(mode!=='select')return;e.stopPropagation();selected=o.id;syncProps();renderOverlay();const startX=e.clientX,startY=e.clientY,ox=o.x,oy=o.y;el.setPointerCapture?.(e.pointerId);const move=ev=>{o.x=Math.max(0,ox+(ev.clientX-startX)/zoom);o.y=Math.max(0,oy+(ev.clientY-startY)/zoom);el.style.left=o.x*zoom+'px';el.style.top=o.y*zoom+'px';syncPositionFields()};const up=()=>{window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up)};window.addEventListener('pointermove',move);window.addEventListener('pointerup',up);});overlay.appendChild(el)}}
-function syncProps(){const o=objects.find(x=>x.id===selected);$('noSelection').hidden=!!o;$('propPanel').hidden=!o;if(!o)return;$('propText').value=o.text||'';$('propSize').value=o.size||18;$('propColor').value=o.color||'#182033';$('propFill').value=o.fill&&o.fill!=='transparent'?o.fill:'#fff176';$('propWidth').value=Math.round(o.w);$('propHeight').value=Math.round(o.h);$('propOpacity').value=Math.round((o.opacity??(o.type==='highlight'?.42:1))*100);$('propWeight').value=o.weight||'400';$('propX').value=Math.round(o.x);$('propY').value=Math.round(o.y)}
-function syncPositionFields(){if(!selected)return;$('propX').value=Math.round(objects.find(o=>o.id===selected)?.x||0);$('propY').value=Math.round(objects.find(o=>o.id===selected)?.y||0)}
-function addObject(o){snapshot();o.id=crypto.randomUUID?crypto.randomUUID():String(Date.now()+Math.random());o.page=currentPage;objects.push(o);selected=o.id;renderOverlay();syncProps();$('saveBtn').disabled=false}
-function xy(e){const r=overlay.getBoundingClientRect();return{x:(e.clientX-r.left)/zoom,y:(e.clientY-r.top)/zoom}}
-overlayEventSetup();
-function overlayEventSetup(){document.addEventListener('pointerdown',e=>{if(!overlay||!overlay.contains(e.target)||e.target.closest('.item'))return;const p=xy(e);if(mode==='select'){selected=null;syncProps();renderOverlay();return}if(mode==='text'||mode==='signature'){const text=mode==='signature'?'Signature':prompt('Enter text to add to the PDF:','Your text');if(text===null||text==='')return;addObject({type:mode,x:p.x,y:p.y,w:Math.max(120,text.length*10),h:34,text,size:mode==='signature'?26:18,color:'#182033',fill:'transparent',opacity:1,weight:mode==='signature'?'italic':'400'});return}if(mode==='image'){toast('Choose an image file to insert.');$('imageInput').click();return}if(['highlight','draw','rect','whiteout'].includes(mode)){drawing=true;drawPoints=[p];const ghost=document.createElement('div');ghost.className='item';ghost.id='drawingGhost';ghost.style.left=p.x*zoom+'px';ghost.style.top=p.y*zoom+'px';ghost.style.width='1px';ghost.style.height='1px';ghost.style.pointerEvents='none';ghost.style.border=mode==='whiteout'?'1px solid #bbb':'1px dashed #2864e8';ghost.style.background=mode==='highlight'?'#fff17666':mode==='whiteout'?'#fff':'transparent';overlay.appendChild(ghost);const move=ev=>{if(!drawing)return;const q=xy(ev);drawPoints.push(q);const x=Math.min(p.x,q.x),y=Math.min(p.y,q.y),w=Math.max(2,Math.abs(q.x-p.x)),h=Math.max(2,Math.abs(q.y-p.y));ghost.style.left=x*zoom+'px';ghost.style.top=y*zoom+'px';ghost.style.width=w*zoom+'px';ghost.style.height=h*zoom+'px';if(mode==='draw'){ghost.style.border='0';ghost.style.background='transparent'}};const up=ev=>{if(!drawing)return;drawing=false;window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up);ghost.remove();const q=xy(ev),x=Math.min(p.x,q.x),y=Math.min(p.y,q.y),w=Math.max(2,Math.abs(q.x-p.x)),h=Math.max(2,Math.abs(q.y-p.y));if(mode==='draw'){const pts=drawPoints.length>1?drawPoints:[p,q];const minX=Math.min(...pts.map(a=>a.x)),minY=Math.min(...pts.map(a=>a.y));addObject({type:'draw',x:minX,y:minY,w:Math.max(2,Math.max(...pts.map(a=>a.x))-minX),h:Math.max(2,Math.max(...pts.map(a=>a.y))-minY),points:pts,color:'#2864e8',size:2,opacity:1})}else addObject({type:mode,x,y,w,h,color:'#2864e8',fill:mode==='highlight'?'#fff176':mode==='whiteout'?'#ffffff':'transparent',size:2,opacity:mode==='highlight'?.42:1});};window.addEventListener('pointermove',move);window.addEventListener('pointerup',up,{once:true})}})}
-$('imageInput').addEventListener('change',async e=>{const f=e.target.files[0];if(!f)return;const src=await new Promise((res,rej)=>{const r=new FileReader();r.onload=()=>res(r.result);r.onerror=rej;r.readAsDataURL(f)});const img=new Image();img.onload=()=>{addObject({type:'image',x:35,y:35,w:Math.min(260,img.width),h:Math.min(180,img.height),src,opacity:1});setMode('select');toast('Image added. Move it and adjust its size in Properties.')};img.src=src;e.target.value=''});
-$('applyProps').onclick=()=>{const o=objects.find(x=>x.id===selected);if(!o)return;snapshot();o.text=$('propText').value;o.size=+ $('propSize').value||18;o.color=$('propColor').value;o.fill=(o.type==='text'||o.type==='signature')?'transparent':$('propFill').value;o.w=Math.max(10,+$('propWidth').value||100);o.h=Math.max(10,+$('propHeight').value||30);o.opacity=(+$('propOpacity').value||100)/100;o.weight=$('propWeight').value;o.x=Math.max(0,+$('propX').value||0);o.y=Math.max(0,+$('propY').value||0);renderOverlay();toast('Properties applied.')};
-$('deleteObject').onclick=()=>{if(!selected)return;snapshot();objects=objects.filter(o=>o.id!==selected);selected=null;renderOverlay();syncProps();toast('Object deleted.')};
-$('undoBtn').onclick=()=>{const s=undoStack.pop();if(s)restoreSnapshot(s);$('undoBtn').disabled=!undoStack.length};
-$('prevBtn').onclick=()=>{if(currentPage>1){currentPage--;selected=null;renderPage();syncProps();renderThumbs()}};
-$('nextBtn').onclick=()=>{if(currentPage<pageCount){currentPage++;selected=null;renderPage();syncProps();renderThumbs()}};
-$('zoomIn').onclick=()=>{zoom=Math.min(2.5,zoom+.1);renderPage()};$('zoomOut').onclick=()=>{zoom=Math.max(.35,zoom-.1);renderPage()};
-$('fitBtn').onclick=()=>{if(!pdfjsDoc)return;const p=pdfjsDoc.getPage(currentPage);p.then(pg=>{const v=pg.getViewport({scale:1,rotation:rotations[currentPage]||0});zoom=Math.min(1.5,($('canvasArea').clientWidth-50)/v.width);renderPage()})};
-$('jumpBtn').onclick=()=>{const n=+$('jumpPage').value;if(n>=1&&n<=pageCount){currentPage=n;selected=null;renderPage();renderThumbs();syncProps()}};
-async function renderThumbs(){const list=$('thumbList');list.innerHTML='';if(!pdfjsDoc)return;for(let i=1;i<=pageCount;i++){const row=document.createElement('div');row.className='thumb'+(i===currentPage?' active':'');const c=document.createElement('canvas');const label=document.createElement('span');label.textContent=`Page ${i}`;const pick=document.createElement('button');pick.textContent='Go';pick.onclick=e=>{e.stopPropagation();currentPage=i;selected=null;renderPage();renderThumbs();syncProps()};row.onclick=()=>{currentPage=i;selected=null;renderPage();renderThumbs();syncProps()};row.append(c,label,pick);list.appendChild(row);try{const pg=await pdfjsDoc.getPage(i),vp=pg.getViewport({scale:.14,rotation:rotations[i]||0});c.width=vp.width;c.height=vp.height;await pg.render({canvasContext:c.getContext('2d'),viewport:vp}).promise}catch(e){}}}
-async function rebuildPdf(){const out=await PDFDocument.create();const source=await PDFDocument.load(originalBytes.slice(0));for(let i=0;i<pageCount;i++){const [p]=await out.copyPages(source,[i]);out.addPage(p)}for(let i=0;i<pageCount;i++){const p=out.getPage(i);const rot=rotations[i+1]||0;if(rot)p.setRotation(degrees(rot));}const font=await out.embedFont(StandardFonts.Helvetica),bold=await out.embedFont(StandardFonts.HelveticaBold),italic=await out.embedFont(StandardFonts.HelveticaOblique);for(const o of objects){if(o.page<1||o.page>pageCount)continue;const p=out.getPage(o.page-1),sz=p.getSize(),scaleX=sz.width/baseWidth,scaleY=sz.height/baseHeight;const x=o.x*scaleX,y=sz.height-(o.y+o.h)*scaleY,w=o.w*scaleX,h=o.h*scaleY;const col=hexRgb(o.color||'#182033'),fill=hexRgb(o.fill||'#ffffff'),opacity=o.opacity??1;try{if(o.type==='text'||o.type==='signature'){const f=o.weight==='italic'?italic:o.weight==='700'?bold:font;const lines=String(o.text||'').split('\\n');lines.forEach((line,idx)=>p.drawText(line,{x:x+2,y:sz.height-o.y*scaleY-(o.size||18)*scaleY*(idx+1),size:(o.size||18)*scaleY,font:f,color:rgb(...col),opacity}))}else if(o.type==='image'){let img;const data=o.src.split(',')[1];if(o.src.startsWith('data:image/png'))img=await out.embedPng(Uint8Array.from(atob(data),c=>c.charCodeAt(0)));else img=await out.embedJpg(Uint8Array.from(atob(data),c=>c.charCodeAt(0)));p.drawImage(img,{x,y,width:w,height:h,opacity})}else if(o.type==='whiteout'){p.drawRectangle({x,y,width:w,height:h,color:rgb(1,1,1),borderColor:rgb(.85,.85,.85),borderWidth:.4})}else if(o.type==='highlight'){p.drawRectangle({x,y,width:w,height:h,color:rgb(...fill),opacity:Math.min(.55,opacity),borderWidth:0})}else if(o.type==='rect'){p.drawRectangle({x,y,width:w,height:h,borderColor:rgb(...col),borderWidth:(o.size||2),color:o.fill&&o.fill!=='transparent'?rgb(...fill):undefined,opacity})}else if(o.type==='draw'){const pts=o.points||[];for(let j=1;j<pts.length;j++){p.drawLine({start:{x:pts[j-1].x*scaleX,y:sz.height-pts[j-1].y*scaleY},end:{x:pts[j].x*scaleX,y:sz.height-pts[j].y*scaleY},thickness:o.size||2,color:rgb(...col),opacity})}}}catch(err){console.warn('Could not export object',o,err)}}return out}
-function hexRgb(hex){let h=String(hex||'#000000').replace('#','');if(h.length===3)h=h.split('').map(c=>c+c).join('');const n=parseInt(h.slice(0,6),16)||0;return[((n>>16)&255)/255,((n>>8)&255)/255,(n&255)/255]}
-$('saveBtn').onclick=async()=>{try{setStatus('Preparing edited PDF…');const out=await rebuildPdf();const bytes=await out.save();const blob=new Blob([bytes],{type:'application/pdf'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='PDFix-edited.pdf';a.click();URL.revokeObjectURL(url);setStatus('Export complete. Your edited PDF has been downloaded.');toast('Edited PDF exported.')}catch(e){console.error(e);toast('Export failed. Try a simpler PDF or remove unsupported objects.');setStatus('Export failed.')}};
-$('rotateBtn').onclick=()=>{snapshot();rotations[currentPage]=((rotations[currentPage]||0)+90)%360;renderPage();renderThumbs()};
-$('deletePageBtn').onclick=async()=>{if(pageCount<=1){toast('A PDF must contain at least one page.');return}if(!confirm(`Delete page ${currentPage}?`))return;snapshot();const src=await PDFDocument.load(originalBytes.slice(0));src.removePage(currentPage-1);originalBytes=await src.save();pdfDoc=await PDFDocument.load(originalBytes);pdfjsDoc=await pdfjsLib.getDocument({data:new Uint8Array(originalBytes.slice(0))}).promise;pageCount=pdfjsDoc.numPages;objects=objects.filter(o=>o.page!==currentPage);objects.forEach(o=>{if(o.page>currentPage)o.page--});currentPage=Math.min(currentPage,pageCount);rotations={};renderThumbs();renderPage();toast('Page deleted. Note: existing overlay positions are retained on remaining pages.')};
-$('duplicateBtn').onclick=async()=>{try{snapshot();const src=await PDFDocument.load(originalBytes.slice(0));const [cp]=await src.copyPages(src,[currentPage-1]);src.insertPage(currentPage,cp);originalBytes=await src.save();pdfDoc=await PDFDocument.load(originalBytes);pdfjsDoc=await pdfjsLib.getDocument({data:new Uint8Array(originalBytes.slice(0))}).promise;pageCount=pdfjsDoc.numPages;objects.forEach(o=>{if(o.page>currentPage)o.page++});currentPage++;renderThumbs();renderPage();toast('Page duplicated.')}catch(e){toast('Could not duplicate this page.')}};
-$('extractBtn').onclick=async()=>{try{const src=await PDFDocument.load(originalBytes.slice(0));const out=await PDFDocument.create();const [p]=await out.copyPages(src,[currentPage-1]);out.addPage(p);const bytes=await out.save();const a=document.createElement('a');a.href=URL.createObjectURL(new Blob([bytes],{type:'application/pdf'}));a.download=`PDFix-page-${currentPage}.pdf`;a.click();toast('Current page extracted.')}catch(e){toast('Page extraction failed.')}};
-$('insertBlank').onclick=async()=>{try{snapshot();const src=await PDFDocument.load(originalBytes.slice(0));src.insertPage(currentPage,[612,792]);originalBytes=await src.save();pdfDoc=await PDFDocument.load(originalBytes);pdfjsDoc=await pdfjsLib.getDocument({data:new Uint8Array(originalBytes.slice(0))}).promise;pageCount=pdfjsDoc.numPages;objects.forEach(o=>{if(o.page>currentPage)o.page++});currentPage++;renderThumbs();renderPage();toast('Blank page inserted.')}catch(e){toast('Could not insert a page.')}};
+/* ---------- export: same font family/size/colour as shown ---------- */
+const hexC=h=>{const n=parseInt(h.slice(1),16);return rgb((n>>16&255)/255,(n>>8&255)/255,(n&255)/255)};
+$('saveBtn').onclick=async()=>{try{
+  status('Preparing PDF…');const out=await PDFDocument.load(bytes),fc={},csC=new Map();let warn=false;out.registerFontkit(fontkit);
+  const getF=async o=>{if(isC(o.family)&&CF[o.family]){const k=o.family;return fc[k]||(fc[k]=await out.embedFont(CF[k].bytes,{subset:true}))}
+    const k=FN[FN[o.family]?o.family:'sans'][(o.bold?1:0)+(o.italic?2:0)];return fc[k]||(fc[k]=await out.embedFont(StandardFonts[k]))};
+  for(const o of objs){
+    if(o.page<1||o.page>out.getPageCount())continue;
+    const p=out.getPage(o.page-1),{width:pw,height:ph}=p.getSize(),sx=pw/W,sy=ph/H;
+    if(o.type==='text'){const f=await getF(o);let cs=csC.get(f);if(!cs){cs=new Set(f.getCharacterSet());csC.set(f,cs)}
+      const safe=s=>[...s].map(c=>cs.has(c.codePointAt(0))?c:(warn=true,'?')).join('');
+      String(o.text).split('\n').forEach((ln,i)=>p.drawText(safe(ln),{x:o.x*sx,y:ph-(o.y+BL(o.family)*o.size+i*o.size*1.2)*sy,size:o.size*sy,font:f,color:hexC(o.color)}));continue}
+    const x=o.x*sx,y=ph-(o.y+o.h)*sy,w=o.w*sx,h=o.h*sy;
+    if(o.type==='cover')p.drawRectangle({x,y,width:w,height:h,color:hexC(o.color),borderWidth:0});
+    else if(o.type==='highlight')p.drawRectangle({x,y,width:w,height:h,color:hexC(o.color),opacity:.45,borderWidth:0});
+    else if(o.type==='rect')p.drawRectangle({x,y,width:w,height:h,borderColor:hexC(o.color),borderWidth:2});
+    else if(o.type==='image'){const d=Uint8Array.from(atob(o.src.split(',')[1]),c=>c.charCodeAt(0)),im=o.src.startsWith('data:image/png')?await out.embedPng(d):await out.embedJpg(d);p.drawImage(im,{x,y,width:w,height:h})}
+    else if(o.type==='draw')for(let j=1;j<o.pts.length;j++)p.drawLine({start:{x:(o.x+o.pts[j-1].x)*sx,y:ph-(o.y+o.pts[j-1].y)*sy},end:{x:(o.x+o.pts[j].x)*sx,y:ph-(o.y+o.pts[j].y)*sy},thickness:2,color:hexC(o.color)});
+  }
+  const a=document.createElement('a');a.href=URL.createObjectURL(new Blob([await out.save()],{type:'application/pdf'}));a.download='PDFix-edited.pdf';a.click();
+  status('Exported.');toast(warn?'Exported. Some characters (non-Latin) are not supported by standard fonts and became “?”.':'Edited PDF exported.');
+}catch(e){console.error(e);toast('Export failed.');status('Export failed.')}};
 </script>
 </body>
 </html>