Rename Pocket_Image_Converter_v1_6.html to Pocket_Image_Converter_v3_0.html

Browse files

Files changed (1) hide show

Pocket_Image_Converter_v1_6.html → Pocket_Image_Converter_v3_0.html +297 -116

Pocket_Image_Converter_v1_6.html → Pocket_Image_Converter_v3_0.html RENAMED Viewed

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Pocket Image Converter</title>
 <style>
   :root{
     --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#2a323d;
@@ -26,6 +26,11 @@
   header .ver{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;
     border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--panel)}
   header .by{color:var(--dim);font-size:10px;letter-spacing:.3px;opacity:.8}
   .spacer{flex:1}
   button{
     font:inherit;color:var(--txt);background:var(--panel2);border:1px solid var(--line);
@@ -124,7 +129,7 @@
   /* ---------- preview stage ---------- */
   .stage{background:#000;border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;
     position:relative;border:1px solid var(--line);min-height:240px;margin-bottom:14px}
-  .stage canvas{max-width:100%;max-height:52vh;width:auto;height:auto;display:block;background:#000}
   .badge{position:absolute;top:10px;left:10px;z-index:3;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);
     padding:4px 9px;border-radius:6px;font-size:11.5px;color:#cfe;letter-spacing:.3px}
   .ba-right{left:auto;right:10px;color:#bfe9ff}
@@ -132,13 +137,13 @@
   .row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
   .row label{flex:0 0 92px;color:var(--dim);font-size:12.5px}
   .row:last-child{margin-bottom:0}
-  input[type=text],input[type=number],select{
     font:inherit;background:var(--panel2);color:var(--txt);border:1px solid var(--line);
     border-radius:7px;padding:6px 8px;width:100%;min-width:0;
   }
   input[type=color]{padding:2px;height:31px;width:44px;flex:none;background:var(--panel2);
     border:1px solid var(--line);border-radius:7px;cursor:pointer}
-  input:focus,select:focus{outline:none;border-color:var(--accent)}
   input[type=range]{width:100%;accent-color:var(--accent)}
   .seg{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
   .seg button{padding:5px 9px;font-size:12.5px;border-radius:7px;flex:1 1 auto}
@@ -171,12 +176,12 @@
 <body>
 <div class="wrap">
   <header>
-    <h1>Pocket Image Converter</h1>
-    <span class="sub">HEIC &amp; more &middot; convert &middot; resize &middot; batch</span>
     <span class="spacer"></span>
-    <span class="verwrap"><span class="ver">v1.6</span><span class="by">by C_Nugget</span></span>
   </header>
-  <div id="drop" role="button" tabindex="0" aria-label="Add images">
     <button id="dropToggle" class="ghost" type="button" title="Collapse / expand" aria-expanded="true">Hide <span class="chev">&#9650;</span></button>
     <span class="miniLabel"><b>Add more images</b> &middot; or drop them anywhere on the page</span>
     <div class="big">&#9634;</div>
@@ -222,6 +227,7 @@
         <span class="kbd">&larr;</span> <span class="kbd">&rarr;</span> move between images &nbsp;&middot;&nbsp;
         <span class="kbd">Space</span> toggle selected &nbsp;&middot;&nbsp;
         <span class="kbd">R</span> rotate &nbsp;&middot;&nbsp; <span class="kbd">Del</span> remove &nbsp;&middot;&nbsp;
         only <b style="color:var(--txt)">ticked</b> images are converted; edits apply to every image.
       </div>
     </div>
@@ -235,6 +241,7 @@
           <button data-fmt="image/jpeg">JPEG</button>
           <button data-fmt="image/webp">WebP</button>
           <button data-fmt="image/avif">AVIF</button>
           <button data-fmt="application/pdf">PDF</button>
         </div>
         <div class="row" id="qualityRow">
@@ -311,27 +318,45 @@
           <div class="hint">Rotate / flip applies to every image in the queue.</div>
         </div>
       </div>
-      <!-- Watermark -->
       <div class="panelbox">
-        <h3 class="collap shut" data-target="wmBody">Watermark <span class="chev">&#9660;</span></h3>
         <div class="collapbody shut" id="wmBody">
-          <div class="row"><label>Text</label><input type="text" id="wmText" placeholder="Leave blank for none"></div>
-          <div class="row">
-            <label>Position</label>
-            <select id="wmPos">
-              <option value="br" selected>Bottom right</option>
-              <option value="bl">Bottom left</option>
-              <option value="tr">Top right</option>
-              <option value="tl">Top left</option>
-              <option value="c">Centre</option>
-            </select>
-          </div>
-          <div class="row">
-            <label>Size</label>
-            <select id="wmSize"><option value="0.03">Small</option><option value="0.05" selected>Medium</option><option value="0.08">Large</option></select>
-            <input type="color" id="wmColor" value="#ffffff" title="Text colour">
-          </div>
-          <div class="row"><label>Opacity</label><input type="range" id="wmOpacity" min="10" max="100" value="70"><b class="hint" id="wmOpacityL" style="margin:0;flex:0 0 36px;text-align:right;color:var(--txt)">70%</b></div>
         </div>
       </div>
       <!-- Naming -->
@@ -393,6 +418,7 @@
   </div>
 </div>
 <canvas id="work" style="display:none"></canvas>
 <script>
 "use strict";
 (function(){
@@ -411,7 +437,7 @@ function safeName(s, fallback){
   return String(s || fallback).replace(/[\\/:*?"<>|\x00-\x1f]+/g,"-").replace(/^\.+/,"").trim().slice(0,90) || fallback;
 }
 function extFor(mime){
-  return ({"image/png":"png","image/jpeg":"jpg","image/webp":"webp","image/avif":"avif","application/pdf":"pdf"})[mime] || "img";
 }
 function isLossy(mime){ return mime==="image/jpeg" || mime==="image/webp" || mime==="image/avif"; }
 function say(el, msg, kind){ el.textContent = msg || ""; el.className = "status" + (kind ? " " + kind : ""); }
@@ -426,16 +452,29 @@ async function supportsMime(mime){
   }catch(e){ return false; }
 }
 /* ======================= state ======================= */
-const items = [];          // {id,file,name,selected,bitmap,w,h,status,outName,outSize,thumbUrl,err}
 let sel = -1, uid = 0, exporting = false, cancel = false, view = "preview";
 let outFmt = "image/png";
 const support = {};
 /* ======================= collapsibles ======================= */
 document.querySelectorAll("h3.collap").forEach(h => {
-  h.addEventListener("click", () => {
     h.classList.toggle("shut");
     const b = $(h.dataset.target);
     if(b) b.classList.toggle("shut");
   });
 });
 /* ======================= loading files ======================= */
@@ -443,10 +482,7 @@ const drop = $("drop");
 $("pickFiles").addEventListener("click", e => { e.stopPropagation(); $("fileInput").click(); });
 $("pickFolder").addEventListener("click", e => { e.stopPropagation(); $("folderInput").click(); });
 drop.addEventListener("click", e => { if(e.target.closest("button")) return; $("fileInput").click(); });
-drop.addEventListener("keydown", e => {
-  if(e.target !== drop) return;
-  if(e.key === "Enter" || e.key === " "){ e.preventDefault(); $("fileInput").click(); }
-});
 $("fileInput").addEventListener("change", e => { addFiles(e.target.files); e.target.value = ""; });
 $("folderInput").addEventListener("change", e => { addFiles(e.target.files); e.target.value = ""; });
@@ -534,23 +570,46 @@ function looksImage(f){
   return (f.type && f.type.startsWith("image/")) ||
     /\.(heic|heif|heics|jpe?g|jfif|pjpeg|pjp|png|webp|gif|bmp|tiff?|avif|ico)$/i.test(f.name);
 }
 async function addFiles(fileList){
   const files = Array.from(fileList).filter(looksImage);
   if(!files.length){ say($("status"), "Those files are not images. Add HEIC, JPEG, PNG, WebP, GIF or BMP.", "err"); return; }
   say($("status"), "Reading " + files.length + (files.length === 1 ? " image\u2026" : " images\u2026"));
   const firstNew = items.length;
   for(const f of files){
-    items.push({ id: ++uid, file: f, name: f.name, selected: true, status: "queued",
-                 bitmap: null, w: 0, h: 0, outName: "", outSize: 0, thumbUrl: "", err: "" });
   }
   render();
   autoCollapseDrop();
-  for(let i = firstNew; i < items.length; i++){
-    if(!items[i].bitmap && items[i].status !== "error") await decode(items[i]);
-    render();
   }
-  if(sel < 0 && items.length){ sel = 0; drawPreview(); }
-  say($("status"), items.length + " image" + (items.length===1?"":"s") + " ready.", "ok");
   updateEstimate();
 }
 const isHeic = f => /\.(heic|heif)$/i.test(f.name) || f.type === "image/heic" || f.type === "image/heif" || f.type === "image/heic-sequence";
@@ -610,7 +669,7 @@ async function decodeNative(blob){
   }
 }
 async function decode(it){
-  it.status = "decoding"; render();
   try{
     let bmp = await decodeNative(it.file);
     if(!bmp && isHeic(it.file)) bmp = await decodeViaWebCodecs(it.file);
@@ -629,12 +688,26 @@ async function decode(it){
     if(!bmp) throw new Error(isHeic(it.file)
       ? "HEIC needs a codec this browser lacks — see the offline HEIC note, or open in Safari"
       : "this browser can't read that format");
-    it.bitmap = bmp; it.w = bmp.width; it.h = bmp.height; it.status = "ready";
     it.thumbUrl = makeThumb(bmp);
   }catch(e){
     it.status = "error"; it.err = e.message || "could not decode";
   }
 }
 function loadViaImg(blob){
   return new Promise((res, rej) => {
     const url = URL.createObjectURL(blob), img = new Image();
@@ -662,9 +735,14 @@ $("flipH").addEventListener("click", () => { flipH = !flipH; drawPreview(); });
 $("flipV").addEventListener("click", () => { flipV = !flipV; drawPreview(); });
 $("resetAdj").addEventListener("click", () => { rot = 0; flipH = flipV = false; drawPreview(); updateEstimate(); });
 $("autoExif").addEventListener("change", async () => {
-  for(const it of items){ if(it.bitmap){ try{ it.bitmap.close && it.bitmap.close(); }catch(_){} it.bitmap = null; it.status = "queued"; } }
   render();
-  for(const it of items) if(it.status !== "error") { await decode(it); render(); }
   drawPreview();
 });
 function targetSize(sw, sh){
@@ -684,54 +762,88 @@ function targetSize(sw, sh){
   }
   return { w: Math.max(1, Math.round(w)), h: Math.max(1, Math.round(h)) };
 }
-function renderToCanvas(bmp){
-  const swapped = (rot === 90 || rot === 270);
-  const bw = swapped ? bmp.height : bmp.width;
-  const bh = swapped ? bmp.width : bmp.height;
-  const t = targetSize(bw, bh);
-  const cv = $("work");
-  cv.width = t.w; cv.height = t.h;
-  const g = cv.getContext("2d");
-  g.imageSmoothingEnabled = true; g.imageSmoothingQuality = "high";
-  const indexedPng = (outFmt === "image/png" && (+$("pngColors").value||0) > 0);
-  // JPEG/PDF have no alpha; indexed PNG flattens alpha. Lossless PNG keeps alpha.
-  if(outFmt === "image/jpeg" || outFmt === "application/pdf" || indexedPng){ g.fillStyle = "#fff"; g.fillRect(0,0,t.w,t.h); }
-  g.save();
-  g.translate(t.w/2, t.h/2);
-  g.rotate(rot * Math.PI/180);
-  g.scale(flipH ? -1 : 1, flipV ? -1 : 1);
-  const drawW = swapped ? t.h : t.w;
-  const drawH = swapped ? t.w : t.h;
-  g.drawImage(bmp, -drawW/2, -drawH/2, drawW, drawH);
   g.restore();
-  drawWatermark(g, t.w, t.h);
   return cv;
 }
-function drawWatermark(g, W, H){
-  const text = ($("wmText").value || "").trim();
-  if(!text) return;
-  const size = Math.max(11, Math.round(Math.min(W,H) * (parseFloat($("wmSize").value)||0.05)));
-  g.font = "600 " + size + "px -apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif";
-  g.textBaseline = "alphabetic";
-  const pad = Math.round(size*0.6);
-  const w = g.measureText(text).width;
-  const pos = $("wmPos").value;
-  let x = W - w - pad, y = H - pad;
-  if(pos === "bl"){ x = pad; }
-  else if(pos === "tr"){ y = size + pad; }
-  else if(pos === "tl"){ x = pad; y = size + pad; }
-  else if(pos === "c"){ x = (W - w)/2; y = (H + size)/2; }
-  g.globalAlpha = (+$("wmOpacity").value||70)/100;
-  g.fillStyle = "rgba(0,0,0,.45)";
-  g.fillText(text, x+Math.max(1,size*0.04), y+Math.max(1,size*0.04));
-  g.fillStyle = $("wmColor").value || "#ffffff";
-  g.fillText(text, x, y);
-  g.globalAlpha = 1;
 }
 /* ======================= preview ======================= */
 function drawPreview(){
   const cv = $("preview"), g = cv.getContext("2d");
   const it = items[sel];
   if(!it || !it.bitmap){
     cv.width = 640; cv.height = 360;
     g.fillStyle = "#000"; g.fillRect(0,0,cv.width,cv.height);
@@ -739,13 +851,24 @@ function drawPreview(){
     $("outBadge").textContent = "";
     return;
   }
-  const out = renderToCanvas(it.bitmap);
   cv.width = out.width; cv.height = out.height;
   g.drawImage(out, 0, 0);
-  $("srcBadge").textContent = it.name + " \u00b7 " + it.w + "\u00d7" + it.h + (isHeic(it.file) ? " \u00b7 HEIC" : "");
-  $("outBadge").textContent = out.width + "\u00d7" + out.height + " \u00b7 " + fmtLabel(outFmt);
 }
-function fmtLabel(m){ return ({"image/png":"PNG","image/jpeg":"JPEG","image/webp":"WebP","image/avif":"AVIF","application/pdf":"PDF"})[m] || m; }
 /* ======================= view toggle ======================= */
 $("viewTabs").addEventListener("click", e => {
   const b = e.target.closest("button"); if(!b) return;
@@ -757,8 +880,7 @@ $("viewTabs").addEventListener("click", e => {
   if(view === "grid") renderGrid(); else drawPreview();
 });
 /* ======================= selection helpers ======================= */
-function selectableCount(){ return items.filter(it => it.status !== "error").length; }
-function selectedReady(){ return items.filter(it => it.selected && it.status !== "error" && it.bitmap); }
 $("selAll").addEventListener("click", () => { items.forEach(it => { if(it.status !== "error") it.selected = true; }); render(); });
 $("selNone").addEventListener("click", () => { items.forEach(it => it.selected = false); render(); });
 /* ======================= queue rendering ======================= */
@@ -776,7 +898,7 @@ function renderList(){
   items.forEach((it, i) => {
     const row = document.createElement("div");
     row.className = "qrow" + (i === sel ? " on" : "");
-    row.addEventListener("click", () => { sel = i; drawPreview(); render(); });
     const chk = document.createElement("input");
     chk.type = "checkbox"; chk.checked = !!it.selected; chk.title = "Include in conversion";
     chk.disabled = it.status === "error";
@@ -812,7 +934,7 @@ function renderGrid(){
   items.forEach((it, i) => {
     const card = document.createElement("div");
     card.className = "gcard" + (i === sel ? " on" : "");
-    card.addEventListener("click", () => { sel = i; if(view==="preview") drawPreview(); render(); });
     const chk = document.createElement("input");
     chk.type = "checkbox"; chk.className = "gchk"; chk.checked = !!it.selected;
     chk.disabled = it.status === "error"; chk.title = "Include in conversion";
@@ -835,15 +957,19 @@ function renderGrid(){
     g.appendChild(card);
   });
 }
 function removeAt(i){
   if(exporting) return;
-  const it = items[i]; if(it && it.bitmap){ try{ it.bitmap.close && it.bitmap.close(); }catch(_){} }
   items.splice(i, 1);
   if(sel >= items.length) sel = items.length - 1;
   if(!items.length){ dropAutoDone = false; setDropMini(false); }
   render(); if(view==="preview") drawPreview();
 }
-$("clearAll").addEventListener("click", () => { if(exporting) return; items.forEach(it => it.bitmap && it.bitmap.close && it.bitmap.close()); items.length = 0; sel = -1; dropAutoDone = false; setDropMini(false); render(); drawPreview(); say($("status"),""); });
 $("clearDone").addEventListener("click", () => {
   if(exporting) return;
   for(let i = items.length-1; i>=0; i--) if(items[i].status === "done") removeAt(i);
@@ -851,7 +977,8 @@ $("clearDone").addEventListener("click", () => {
 /* ======================= settings wiring ======================= */
 function syncFmtUI(){
   const lossy = isLossy(outFmt);
-  $("qualityRow").style.display = lossy ? "flex" : "none";
   $("targetChk").style.display = lossy ? "flex" : "none";
   $("targetRow").style.display = (lossy && $("targetOn").checked) ? "flex" : "none";
   $("pngOpts").style.display = outFmt === "image/png" ? "block" : "none";
@@ -865,10 +992,12 @@ function syncFmtUI(){
   else if(outFmt === "image/jpeg") hint = "JPEG is best for photos. No transparency — transparent areas become white.";
   else if(outFmt === "image/webp") hint = "WebP gives smaller files than JPEG at similar quality, with transparency support.";
   else if(outFmt === "image/avif") hint = support["image/avif"] === false ? "\u26a0 Your browser can\u2019t encode AVIF — try Chrome or Edge, or pick WebP." : "AVIF is the smallest for photos, but slower to encode. Chrome/Edge only.";
-  else if(outFmt === "application/pdf") hint = "Each ticked image becomes one PDF page (embedded as JPEG) in a single document.";
   $("fmtHint").textContent = hint;
 }
 $("fmtSeg").addEventListener("click", async e => {
   const b = e.target.closest("button"); if(!b || b.disabled) return;
   document.querySelectorAll("#fmtSeg button").forEach(x => x.classList.toggle("on", x === b));
   outFmt = b.dataset.fmt;
@@ -891,15 +1020,40 @@ $("resizeMode").addEventListener("click", e => {
   drawPreview(); updateEstimate();
 });
 ["pct","maxPreset"].forEach(id => $(id).addEventListener("input", () => { drawPreview(); updateEstimate(); }));
-$("pxW").addEventListener("input", () => { if($("lockAr").checked && items[sel]){ const it = items[sel]; $("pxH").value = Math.round((+$("pxW").value||1) * it.h / it.w); } drawPreview(); updateEstimate(); });
-$("pxH").addEventListener("input", () => { if($("lockAr").checked && items[sel]){ const it = items[sel]; $("pxW").value = Math.round((+$("pxH").value||1) * it.w / it.h); } drawPreview(); updateEstimate(); });
-["wmText","wmPos","wmSize","wmColor"].forEach(id => $(id).addEventListener("input", () => { drawPreview(); updateEstimate(); }));
-$("wmOpacity").addEventListener("input", () => { $("wmOpacityL").textContent = $("wmOpacity").value + "%"; drawPreview(); });
 $("nameMode").addEventListener("click", e => {
   const b = e.target.closest("button"); if(!b) return;
   document.querySelectorAll("#nameMode button").forEach(x => x.classList.toggle("on", x === b));
   $("tplRows").style.display = b.dataset.m === "tpl" ? "block" : "none";
 });
 /* ======================= estimate ======================= */
 let estTimer = 0, estToken = 0;
 function updateEstimate(){
@@ -910,17 +1064,18 @@ function updateEstimate(){
   $("exportBtn").disabled = exporting || selN === 0;
   const it = items[sel];
   if(!it || !it.bitmap){ $("eDims").textContent = "\u2014"; $("eBytes").textContent = "\u2014"; return; }
-  const out = renderToCanvas(it.bitmap);
-  $("eDims").textContent = out.width + "\u00d7" + out.height;
   clearTimeout(estTimer);
   const token = ++estToken;
   estTimer = setTimeout(async () => {
     try{
       const cur = items[sel];
-      if(!cur || !cur.bitmap){ $("eBytes").textContent = "\u2014"; return; }
-      // re-render now: #work is shared, so the canvas captured above may be stale by this point
-      const blob = await encodeCanvas(renderToCanvas(cur.bitmap), false);
-      if(token !== estToken) return;                 // a newer estimate started, drop this one
       $("eBytes").textContent = blob ? human(blob.size) : "\u2014";
     }catch(e){ if(token === estToken) $("eBytes").textContent = "\u2014"; }
   }, 300);
@@ -929,6 +1084,7 @@ function updateEstimate(){
 function canvasToBlob(cv, mime, q){ return new Promise(res => cv.toBlob(res, mime, q)); }
 async function encodeCanvas(cv, doTarget){
   if(outFmt === "application/pdf") return makePdf([cv]);
   if(outFmt === "image/png"){
     const colors = +$("pngColors").value || 0;
     if(colors > 0) return encodeIndexedPNG(cv, colors, $("pngDither").checked);
@@ -1110,6 +1266,21 @@ async function encodeIndexedPNG(cv, colors, dither){
   const plte = pngChunk("PLTE", pal.subarray(0, count*3));
   return assemblePNG(w, h, 3, [plte], idat);
 }
 /* ---------- PDF: one page per image, JPEG embedded (DCTDecode) ---------- */
 async function makePdf(canvases){
   const q = clamp((+$("quality").value||82)/100, 0.4, 0.95);
@@ -1127,11 +1298,15 @@ async function makePdf(canvases){
   start(); push("2 0 obj\n<< /Type /Pages /Count " + N + " /Kids [ " + kids.join(" ") + " ] >>\nendobj\n");
   for(let i=0;i<N;i++){
     const cv = canvases[i], w = cv.width, h = cv.height;
     const pageObj = 3 + i*3, contentObj = pageObj + 1, imgObj = pageObj + 2;
     start();
-    push(pageObj + " 0 obj\n<< /Type /Page /Parent 2 0 R /MediaBox [0 0 " + w + " " + h + "] " +
          "/Resources << /XObject << /Im0 " + imgObj + " 0 R >> >> /Contents " + contentObj + " 0 R >>\nendobj\n");
-    const content = "q\n" + w + " 0 0 " + h + " 0 0 cm\n/Im0 Do\nQ\n";
     start();
     push(contentObj + " 0 obj\n<< /Length " + content.length + " >>\nstream\n" + content + "endstream\nendobj\n");
     const data = imgDatas[i];
@@ -1204,8 +1379,9 @@ $("exportBtn").addEventListener("click", async () => {
     if(cancel) break;
     it.status = "working"; render();
     try{
-      const cv = renderToCanvas(it.bitmap);
-      const blob = await encodeCanvas(cv, true);
       if(!blob || !blob.size) throw new Error("empty output");
       const name = uniqueName(outNameFor(it, i, cv.width, cv.height), usedNames);
       it.outName = name; it.outSize = blob.size;
@@ -1217,7 +1393,7 @@ $("exportBtn").addEventListener("click", async () => {
         if(ready.length > 1) await wait(300);
       }
       it.status = "done"; done++;
-    }catch(e){ it.status = "error"; it.err = e.message || "convert failed"; failed++; }
     i++;
     $("barI").style.width = ((done+failed)/ready.length*100).toFixed(1) + "%";
     render();
@@ -1237,7 +1413,9 @@ async function exportPdf(ready){
     const canvases = [];
     for(let k=0;k<ready.length;k++){
       if(cancel) break;
-      const cv = renderToCanvas(ready[k].bitmap);
       const c2 = document.createElement("canvas"); c2.width = cv.width; c2.height = cv.height;
       c2.getContext("2d").drawImage(cv, 0, 0);
       canvases.push(c2);
@@ -1267,11 +1445,12 @@ window.addEventListener("beforeunload", e => { if(exporting){ e.preventDefault()
 /* ======================= keyboard ======================= */
 document.addEventListener("keydown", e => {
   const tag = (e.target.tagName||"").toLowerCase();
-  if(tag === "input" || tag === "select" || tag === "textarea") return;
   if(e.metaKey || e.ctrlKey || e.altKey) return;
   if(exporting) return;
-  if(e.key === "ArrowLeft"){ e.preventDefault(); if(sel > 0){ sel--; drawPreview(); render(); } }
-  else if(e.key === "ArrowRight"){ e.preventDefault(); if(sel < items.length-1){ sel++; drawPreview(); render(); } }
   else if(e.key === " "){ e.preventDefault(); const it=items[sel]; if(it && it.status!=="error"){ it.selected=!it.selected; render(); } }
   else if(e.key === "r" || e.key === "R"){ e.preventDefault(); rot = (rot+90)%360; drawPreview(); updateEstimate(); }
   else if(e.key === "Delete" || e.key === "Backspace"){ if(sel>=0){ e.preventDefault(); removeAt(sel); } }
@@ -1285,9 +1464,11 @@ document.addEventListener("keydown", e => {
     if(b){ b.disabled = true; b.title = "Not supported by this browser"; b.style.opacity = ".4"; b.style.cursor = "not-allowed"; }
   }
   syncFmtUI();
   drawPreview(); render();
 })();
 })();
 </script>
 </body>
 </html>

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Pocket Image Editor</title>
 <style>
   :root{
     --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#2a323d;
   header .ver{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;
     border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--panel)}
   header .by{color:var(--dim);font-size:10px;letter-spacing:.3px;opacity:.8}
+  .profileLink{text-decoration:none;color:inherit;border-radius:10px;padding:2px 3px;transition:.12s}
+  .profileLink:hover{background:var(--panel2)}
+  .profileLink:hover .ver{border-color:var(--accent);color:var(--accent)}
+  .profileLink:hover .by{color:var(--txt);opacity:1}
   .spacer{flex:1}
   button{
     font:inherit;color:var(--txt);background:var(--panel2);border:1px solid var(--line);
   /* ---------- preview stage ---------- */
   .stage{background:#000;border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;
     position:relative;border:1px solid var(--line);min-height:240px;margin-bottom:14px}
+  .stage canvas{max-width:100%; touch-action:none; user-select:none; cursor:default;max-height:52vh;width:auto;height:auto;display:block;background:#000}
   .badge{position:absolute;top:10px;left:10px;z-index:3;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);
     padding:4px 9px;border-radius:6px;font-size:11.5px;color:#cfe;letter-spacing:.3px}
   .ba-right{left:auto;right:10px;color:#bfe9ff}
   .row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
   .row label{flex:0 0 92px;color:var(--dim);font-size:12.5px}
   .row:last-child{margin-bottom:0}
+  input[type=text],input[type=number],textarea,select{
     font:inherit;background:var(--panel2);color:var(--txt);border:1px solid var(--line);
     border-radius:7px;padding:6px 8px;width:100%;min-width:0;
   }
   input[type=color]{padding:2px;height:31px;width:44px;flex:none;background:var(--panel2);
     border:1px solid var(--line);border-radius:7px;cursor:pointer}
+  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
   input[type=range]{width:100%;accent-color:var(--accent)}
   .seg{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
   .seg button{padding:5px 9px;font-size:12.5px;border-radius:7px;flex:1 1 auto}
 <body>
 <div class="wrap">
   <header>
+    <h1>Pocket Image Editor</h1>
+    <span class="sub">convert &middot; resize &middot; GIF timing &middot; captions &amp; memes</span>
     <span class="spacer"></span>
+    <a class="verwrap profileLink" href="https://huggingface.co/PoopMan333" target="_blank" rel="noopener noreferrer" title="Open PoopMan333 on Hugging Face"><span class="ver">v3.0</span><span class="by">by C_Nugget</span></a>
   </header>
+  <div id="drop" aria-label="Add images">
     <button id="dropToggle" class="ghost" type="button" title="Collapse / expand" aria-expanded="true">Hide <span class="chev">&#9650;</span></button>
     <span class="miniLabel"><b>Add more images</b> &middot; or drop them anywhere on the page</span>
     <div class="big">&#9634;</div>
         <span class="kbd">&larr;</span> <span class="kbd">&rarr;</span> move between images &nbsp;&middot;&nbsp;
         <span class="kbd">Space</span> toggle selected &nbsp;&middot;&nbsp;
         <span class="kbd">R</span> rotate &nbsp;&middot;&nbsp; <span class="kbd">Del</span> remove &nbsp;&middot;&nbsp;
+        <span class="kbd">Ctrl</span>+<span class="kbd">V</span> paste an image &nbsp;&middot;&nbsp;
         only <b style="color:var(--txt)">ticked</b> images are converted; edits apply to every image.
       </div>
     </div>
           <button data-fmt="image/jpeg">JPEG</button>
           <button data-fmt="image/webp">WebP</button>
           <button data-fmt="image/avif">AVIF</button>
+          <button data-fmt="image/gif">GIF</button>
           <button data-fmt="application/pdf">PDF</button>
         </div>
         <div class="row" id="qualityRow">
           <div class="hint">Rotate / flip applies to every image in the queue.</div>
         </div>
       </div>
       <div class="panelbox">
+        <h3 class="collap shut" data-target="cropBody">Crop &amp; straighten <span class="chev">&#9660;</span></h3>
+        <div class="collapbody shut" id="cropBody">
+          <div class="row"><label>Preset</label><select id="cropPreset"><option value="free">Free crop</option><option value="1:1">Square 1:1</option><option value="4:3">4:3</option><option value="3:2">3:2</option><option value="16:9">16:9</option><option value="9:16">Story 9:16</option></select></div>
+          <div class="row"><label>Left</label><input type="range" id="cropL" min="0" max="45" value="0"><b class="hint" id="cropLL" style="margin:0;flex:0 0 34px">0%</b></div>
+          <div class="row"><label>Right</label><input type="range" id="cropR" min="0" max="45" value="0"><b class="hint" id="cropRL" style="margin:0;flex:0 0 34px">0%</b></div>
+          <div class="row"><label>Top</label><input type="range" id="cropT" min="0" max="45" value="0"><b class="hint" id="cropTL" style="margin:0;flex:0 0 34px">0%</b></div>
+          <div class="row"><label>Bottom</label><input type="range" id="cropB" min="0" max="45" value="0"><b class="hint" id="cropBL" style="margin:0;flex:0 0 34px">0%</b></div>
+          <div class="row"><label>Straighten</label><input type="range" id="straighten" min="-15" max="15" step="0.1" value="0"><b class="hint" id="straightenL" style="margin:0;flex:0 0 42px">0°</b></div>
+          <button id="resetCrop" type="button" class="ghost" style="width:100%">Reset crop</button>
+          <div class="hint">Crop is non-destructive and applies to preview and export. Straightening trims the rotated edges.</div>
+        </div>
+      </div>
+      <!-- Text and meme editor -->
+      <div class="panelbox">
+        <h3 class="collap shut" data-target="wmBody">Text &amp; meme <span class="chev">&#9660;</span></h3>
         <div class="collapbody shut" id="wmBody">
+          <div class="row" style="align-items:flex-start"><label>Text layers</label><div style="flex:1"><select id="textLayerList" size="3" style="margin-bottom:6px"></select><div class="toolbtns" style="margin:0"><button id="addTextLayer" type="button">+ Add</button><button id="dupTextLayer" type="button">Duplicate</button><button id="delTextLayer" type="button" class="danger">Delete</button></div></div></div>
+          <div class="row"><label>Style</label><select id="textMode"><option value="none">None</option><option value="bubble">WhatsApp-style bubble</option><option value="meme">Meme text</option><option value="topbox">Black box above</option><option value="bottombox">Black box below</option></select></div>
+          <div class="row"><label>Text</label><textarea id="wmText" rows="3" placeholder="Type text or emoji 😀"></textarea></div>
+          <div class="hint" style="margin:-4px 0 10px 100px">Emoji work in the text box — copy one from anywhere and paste it in. Whether it draws depends on the emoji your operating system has; very new ones may come out as an empty box.</div>
+          <div class="row"><label>Position</label><select id="wmPos"><option value="tl">Top left</option><option value="tc">Top centre</option><option value="tr">Top right</option><option value="c">Centre</option><option value="bl">Bottom left</option><option value="bc" selected>Bottom centre</option><option value="br">Bottom right</option></select></div>
+          <div class="row"><label>Font</label><select id="wmFont"><option value="Impact,Arial Black,sans-serif">Impact / meme</option><option value="Arial,Segoe UI,sans-serif" selected>Arial</option><option value="Georgia,serif">Georgia</option><option value="Comic Sans MS,cursive">Comic Sans</option><option value="system-ui,sans-serif">System / emoji</option></select></div>
+          <div class="row"><label>Size</label><input type="range" id="wmSize" min="2" max="30" step="0.1" value="7"><b class="hint" id="wmSizeL" style="margin:0;flex:0 0 36px;text-align:right;color:var(--txt)">7%</b></div>
+          <div class="row"><label>Text colour</label><input type="color" id="wmColor" value="#ffffff"><span class="spacer"></span><label style="flex:0 0 auto">Background</label><input type="color" id="wmBg" value="#000000"></div>
+          <div class="hint" id="dragHint">For WhatsApp bubbles, drag the text directly on the preview. Drag the round handle to rotate. Drag the square corner to increase or decrease the text and box size together. Editing handles appear only in the preview, never in saved files.</div>
+          <div class="row"><label>Padding</label><input type="range" id="wmPad" min="0" max="100" value="45"><b class="hint" id="wmPadL" style="margin:0;flex:0 0 36px;text-align:right;color:var(--txt)">45%</b></div>
+          <div class="row"><label>Opacity</label><input type="range" id="wmOpacity" min="10" max="100" value="95"><b class="hint" id="wmOpacityL" style="margin:0;flex:0 0 36px;text-align:right;color:var(--txt)">95%</b></div>
+          <label class="chk"><input type="checkbox" id="wmStroke" checked> Outline text <span class="sub">(recommended for memes)</span></label>
+        </div>
+      </div>
+      <div class="panelbox">
+        <h3 class="collap shut" data-target="gifBody">Animated GIF <span class="chev">&#9660;</span></h3>
+        <div class="collapbody shut" id="gifBody">
+          <div class="row"><label>Playback speed</label><input type="range" id="gifSpeed" min="25" max="400" value="100"><b class="hint" id="gifSpeedL" style="margin:0;flex:0 0 46px;text-align:right;color:var(--txt)">100%</b></div>
+          <label class="chk"><input type="checkbox" id="gifLoop" checked> Loop animation</label>
+          <label class="chk"><input type="checkbox" id="gifTransparent" checked> Preserve transparent pixels</label>
+          <div class="row"><label>Alpha cutoff</label><input type="range" id="gifAlpha" min="1" max="254" value="128"><b class="hint" id="gifAlphaL" style="margin:0;flex:0 0 38px">128</b></div>
+          <div class="hint">Animated GIFs use all decoded frames when the browser supports ImageDecoder. If it does not, the first frame is still editable.</div>
         </div>
       </div>
       <!-- Naming -->
   </div>
 </div>
 <canvas id="work" style="display:none"></canvas>
 <script>
 "use strict";
 (function(){
   return String(s || fallback).replace(/[\\/:*?"<>|\x00-\x1f]+/g,"-").replace(/^\.+/,"").trim().slice(0,90) || fallback;
 }
 function extFor(mime){
+  return ({"image/png":"png","image/jpeg":"jpg","image/webp":"webp","image/avif":"avif","image/gif":"gif","application/pdf":"pdf"})[mime] || "img";
 }
 function isLossy(mime){ return mime==="image/jpeg" || mime==="image/webp" || mime==="image/avif"; }
 function say(el, msg, kind){ el.textContent = msg || ""; el.className = "status" + (kind ? " " + kind : ""); }
   }catch(e){ return false; }
 }
 /* ======================= state ======================= */
+const items = [];          // images, optionally with animated GIF frames
+const PREVIEW_CAP = 1600;   // longest side rendered in the preview; export is always full size
+let previewTimer = 0, previewFrame = 0;
+let bubbleHit=null,dragState=null;
+let crop={l:0,r:0,t:0,b:0,angle:0};
+let textLayers=[{id:1,mode:"bubble",text:"",pos:"bc",font:"Arial,Segoe UI,sans-serif",size:7,color:"#ffffff",bg:"#000000",pad:45,opacity:95,stroke:false,x:.5,y:.82,rot:0}],activeText=0,nextTextId=2;
 let sel = -1, uid = 0, exporting = false, cancel = false, view = "preview";
 let outFmt = "image/png";
 const support = {};
 /* ======================= collapsibles ======================= */
 document.querySelectorAll("h3.collap").forEach(h => {
+  h.setAttribute("role","button");
+  h.setAttribute("tabindex","0");
+  h.setAttribute("aria-expanded", String(!h.classList.contains("shut")));
+  const toggle = () => {
     h.classList.toggle("shut");
     const b = $(h.dataset.target);
     if(b) b.classList.toggle("shut");
+    h.setAttribute("aria-expanded", String(!h.classList.contains("shut")));
+  };
+  h.addEventListener("click", toggle);
+  h.addEventListener("keydown", e => {
+    if(e.key === "Enter" || e.key === " "){ e.preventDefault(); toggle(); }
   });
 });
 /* ======================= loading files ======================= */
 $("pickFiles").addEventListener("click", e => { e.stopPropagation(); $("fileInput").click(); });
 $("pickFolder").addEventListener("click", e => { e.stopPropagation(); $("folderInput").click(); });
 drop.addEventListener("click", e => { if(e.target.closest("button")) return; $("fileInput").click(); });
 $("fileInput").addEventListener("change", e => { addFiles(e.target.files); e.target.value = ""; });
 $("folderInput").addEventListener("change", e => { addFiles(e.target.files); e.target.value = ""; });
   return (f.type && f.type.startsWith("image/")) ||
     /\.(heic|heif|heics|jpe?g|jfif|pjpeg|pjp|png|webp|gif|bmp|tiff?|avif|ico)$/i.test(f.name);
 }
+let _rTimer = 0;
+function renderSoon(){ if(_rTimer) return; _rTimer = setTimeout(() => { _rTimer = 0; render(); }, 120); }
+/* paste an image straight from the clipboard */
+window.addEventListener("paste", e => {
+  const f = e.clipboardData && e.clipboardData.files;
+  if(f && f.length){ e.preventDefault(); addFiles(f); }
+});
 async function addFiles(fileList){
+  if(exporting){ say($("status"), "Finish or stop the current export before adding more images.", "err"); return; }
   const files = Array.from(fileList).filter(looksImage);
   if(!files.length){ say($("status"), "Those files are not images. Add HEIC, JPEG, PNG, WebP, GIF or BMP.", "err"); return; }
   say($("status"), "Reading " + files.length + (files.length === 1 ? " image\u2026" : " images\u2026"));
   const firstNew = items.length;
   for(const f of files){
+    items.push({ id: ++uid, file: f, name: f.name, selected: true, status: "queued", gifTotalFrames:0, gifTruncated:false,
+                 bitmap: null, frames: null, delays: null, loops: 0, w: 0, h: 0, outName: "", outSize: 0, thumbUrl: "", err: "" });
   }
   render();
   autoCollapseDrop();
+  const pending = items.slice(firstNew);
+  const worker = async () => {
+    while(pending.length){
+      const it = pending.shift();
+      if(!it.bitmap && it.status !== "error") await decode(it);
+      renderSoon();
+    }
+  };
+  await Promise.all([worker(), worker(), worker()]);
+  clearTimeout(_rTimer); _rTimer = 0; render();
+  if(sel < 0 && items.length) sel = 0;
+  if(firstNew === 0 && files.length && files.every(f => /\.gif$/i.test(f.name) || f.type === "image/gif")){
+    outFmt = "image/gif";
+    document.querySelectorAll("#fmtSeg button").forEach(x => x.classList.toggle("on", x.dataset.fmt === outFmt));
+    syncFmtUI();
   }
+  drawPreview();
+  const bad = items.filter(it => it.status === "error").length;
+  say($("status"),
+      items.length + " image" + (items.length===1?"":"s") + " ready" + (bad ? " \u00b7 " + bad + " could not be read" : "") + ".",
+      bad ? "err" : "ok");
   updateEstimate();
 }
 const isHeic = f => /\.(heic|heif)$/i.test(f.name) || f.type === "image/heic" || f.type === "image/heif" || f.type === "image/heic-sequence";
   }
 }
 async function decode(it){
+  it.status = "decoding"; renderSoon();
   try{
     let bmp = await decodeNative(it.file);
     if(!bmp && isHeic(it.file)) bmp = await decodeViaWebCodecs(it.file);
     if(!bmp) throw new Error(isHeic(it.file)
       ? "HEIC needs a codec this browser lacks — see the offline HEIC note, or open in Safari"
       : "this browser can't read that format");
+    it.bitmap = bmp; it.w = bmp.width; it.h = bmp.height;
+    if(/\.gif$/i.test(it.name) || it.file.type === "image/gif") await decodeGifFrames(it);
+    it.status = "ready";
     it.thumbUrl = makeThumb(bmp);
   }catch(e){
     it.status = "error"; it.err = e.message || "could not decode";
   }
 }
+async function decodeGifFrames(it){
+  if(typeof ImageDecoder === "undefined") return false;
+  let dec=null,frames=[];
+  try{
+    const ok=!ImageDecoder.isTypeSupported||await ImageDecoder.isTypeSupported("image/gif");if(!ok)return false;
+    dec=new ImageDecoder({data:await it.file.arrayBuffer(),type:"image/gif",preferAnimation:true});await dec.tracks.ready;
+    const track=dec.tracks.selectedTrack,total=Number(track&&track.frameCount)||1,count=Math.min(total,600);it.gifTotalFrames=total;it.gifTruncated=total>600;if(count<2)return false;
+    const delays=[];
+    for(let i=0;i<count;i++){const r=await dec.decode({frameIndex:i,completeFramesOnly:true}),vf=r.image;frames.push(await createImageBitmap(vf));delays.push(Math.max(20,Math.round((Number(vf.duration)||100000)/1000)));try{vf.close()}catch(_){}if(i%10===0)await wait(0);}
+    const old=it.bitmap;it.frames=frames;it.delays=delays;it.loops=track.repetitionCount;it.bitmap=frames[0];it.w=frames[0].width;it.h=frames[0].height;if(old&&old!==it.bitmap){try{old.close&&old.close()}catch(_){}}return true;
+  }catch(e){for(const f of frames){try{f.close&&f.close()}catch(_){}}it.frames=null;it.delays=null;return false;}finally{try{dec&&dec.close()}catch(_){}}
+}
 function loadViaImg(blob){
   return new Promise((res, rej) => {
     const url = URL.createObjectURL(blob), img = new Image();
 $("flipV").addEventListener("click", () => { flipV = !flipV; drawPreview(); });
 $("resetAdj").addEventListener("click", () => { rot = 0; flipH = flipV = false; drawPreview(); updateEstimate(); });
 $("autoExif").addEventListener("change", async () => {
+  for(const it of items){
+    if(!it.bitmap) continue;
+    freeItem(it);
+    it.bitmap = null; it.frames = null; it.delays = null; it.status = "queued";
+  }
   render();
+  for(const it of items) if(it.status !== "error") { await decode(it); renderSoon(); }
+  clearTimeout(_rTimer); _rTimer = 0; render();
   drawPreview();
 });
 function targetSize(sw, sh){
   }
   return { w: Math.max(1, Math.round(w)), h: Math.max(1, Math.round(h)) };
 }
+/* Work out the exact output geometry without drawing anything.
+   Used for the size badges and the estimate, so we no longer re-render
+   the full-resolution image just to learn how big it will be. */
+function outputGeom(bmp){
+  const swapped=(rot===90||rot===270);
+  const cl=Math.min(.45,crop.l/100),cr=Math.min(.45,crop.r/100),ct=Math.min(.45,crop.t/100),cb=Math.min(.45,crop.b/100);
+  const srcW=Math.max(1,bmp.width*(1-cl-cr)),srcH=Math.max(1,bmp.height*(1-ct-cb));
+  const baseW=swapped?srcH:srcW,baseH=swapped?srcW:srcH,t=targetSize(baseW,baseH);
+  let extraTop=0,extraBottom=0;
+  for(const o of textLayers){if(!o.text)continue;if(o.mode==="topbox")extraTop=Math.max(extraTop,captionExtraFor(o,t.w,t.h));if(o.mode==="bottombox")extraBottom=Math.max(extraBottom,captionExtraFor(o,t.w,t.h));}
+  return {swapped,cl,ct,srcW,srcH,tw:t.w,th:t.h,extraTop,extraBottom,w:t.w,h:t.h+extraTop+extraBottom};
+}
+/* cap = longest side to render at (preview only). 0 = full resolution. */
+function renderToCanvas(bmp,showControls=false,cap=0){
+  const G=outputGeom(bmp);
+  const k=(cap&&Math.max(G.w,G.h)>cap)?cap/Math.max(G.w,G.h):1;
+  const tw=Math.max(1,Math.round(G.tw*k)),th=Math.max(1,Math.round(G.th*k));
+  const extraTop=Math.round(G.extraTop*k),extraBottom=Math.round(G.extraBottom*k);
+  const cv=$("work");cv.width=tw;cv.height=th+extraTop+extraBottom;
+  const g=cv.getContext("2d");g.imageSmoothingEnabled=true;g.imageSmoothingQuality="high";
+  const indexedPng=(outFmt==="image/png"&&(+$("pngColors").value||0)>0);
+  if(outFmt==="image/jpeg"||outFmt==="application/pdf"||indexedPng||extraTop||extraBottom){
+    g.fillStyle=(extraTop||extraBottom)?"#000":"#fff";g.fillRect(0,0,cv.width,cv.height);
+  }
+  const sx=bmp.width*G.cl,sy=bmp.height*G.ct;
+  g.save();g.beginPath();g.rect(0,extraTop,tw,th);g.clip();
+  g.translate(tw/2,extraTop+th/2);
+  g.rotate((rot+crop.angle)*Math.PI/180);
+  /* straightening rotates inside a fixed frame, which would expose empty
+     corners — zoom just enough to keep the frame covered. */
+  if(crop.angle){
+    const ar=Math.abs(crop.angle)*Math.PI/180,ca=Math.cos(ar),sa=Math.sin(ar);
+    const cover=Math.max((tw*ca+th*sa)/tw,(tw*sa+th*ca)/th);
+    g.scale(cover,cover);
+  }
+  g.scale(flipH?-1:1,flipV?-1:1);
+  const drawW=G.swapped?th:tw,drawH=G.swapped?tw:th;
+  g.drawImage(bmp,sx,sy,G.srcW,G.srcH,-drawW/2,-drawH/2,drawW,drawH);
   g.restore();
+  if(showControls) bubbleHit=null;
+  for(let i=0;i<textLayers.length;i++)drawTextLayer(g,textLayers[i],cv.width,cv.height,extraTop,th,extraTop,extraBottom,showControls&&i===activeText);
   return cv;
 }
+function captionExtraFor(o,W,H){const size=Math.max(14,Math.round(Math.min(W,H)*(o.size/100))),pad=Math.round(size*(o.pad/100)),tmp=document.createElement("canvas").getContext("2d");tmp.font="700 "+size+"px "+o.font;return wrapLines(tmp,o.text,Math.max(80,W-pad*4)).length*Math.round(size*1.18)+pad*2;}
+function wrapLines(g,text,maxW){
+  const out=[]; for(const para of text.split(/\n/)){ const words=para.split(/\s+/); let line="";
+    for(const w of words){ const test=line?line+" "+w:w; if(line&&g.measureText(test).width>maxW){out.push(line);line=w;}else line=test; } out.push(line); }
+  return out.length?out:[""];
+}
+function drawTextLayer(g,o,W,H,imageY,imageH,extraTop,extraBottom,isActive){
+  if(!o||o.mode==="none"||!o.text)return;const mode=o.mode,text=mode==="meme"?o.text.toUpperCase():o.text,size=Math.max(14,Math.round(Math.min(W,imageH)*(o.size/100))),basePad=Math.round(size*(o.pad/100)),pad=basePad;
+  g.save();g.globalAlpha=o.opacity/100;const family=mode==="meme"?"Impact,Arial Black,sans-serif":o.font;g.font=(mode==="meme"?"900 ":"700 ")+size+"px "+family;g.textBaseline="alphabetic";g.textAlign="left";const maxW=Math.max(80,W-basePad*4),lines=wrapLines(g,text,maxW),metrics=lines.map(x=>g.measureText(x)),ascent=Math.max(...metrics.map(m=>m.actualBoundingBoxAscent||size*.8)),descent=Math.max(...metrics.map(m=>m.actualBoundingBoxDescent||size*.2)),gap=Math.round(size*.18),lh=ascent+descent+gap,tw=Math.min(maxW,Math.max(...metrics.map(m=>m.width))),th=lines.length*(ascent+descent)+(lines.length-1)*gap;
+  if(mode==="topbox"||mode==="bottombox"){const y=mode==="topbox"?0:H-extraBottom;g.fillStyle="#000";g.fillRect(0,y,W,mode==="topbox"?extraTop:extraBottom);g.fillStyle=o.color;g.textAlign="center";lines.forEach((ln,i)=>g.fillText(ln,W/2,y+pad+ascent+i*lh));g.restore();return;}
+  let x=o.x*W,y=imageY+o.y*imageH;if(mode!=="bubble"){const pos=o.pos;x=pad+tw/2;y=imageY+pad+th/2;if(pos.endsWith("c"))x=W/2;else if(pos.endsWith("r"))x=W-pad-tw/2;if(pos.startsWith("b"))y=imageY+imageH-pad-th/2;else if(pos==="c"){x=W/2;y=imageY+imageH/2;}}
+  g.translate(x,y);g.rotate(o.rot*Math.PI/180);
+  const lineWidths=lines.map(ln=>g.measureText(ln).width);
+  const bubbleLineH=ascent+descent+pad*2;
+  const bubbleStep=ascent+descent+gap;
+  const bubbleTotalH=lines.length===1?bubbleLineH:bubbleLineH+(lines.length-1)*bubbleStep;
+  if(mode==="bubble"){
+    g.fillStyle=o.bg;
+    lines.forEach((ln,i)=>{
+      const bw=lineWidths[i]+pad*2;
+      const by=-bubbleTotalH/2+i*bubbleStep;
+      const radius=Math.min(bubbleLineH/2,Math.max(12,bubbleLineH*.34));
+      roundRect(g,-bw/2,by,bw,bubbleLineH,radius);g.fill();
+    });
+  }
+  g.fillStyle=o.color;const stroke=o.stroke||mode==="meme";if(stroke){g.strokeStyle="#000";g.lineWidth=Math.max(2,size*.09);g.lineJoin="round";}
+  lines.forEach((ln,i)=>{const lx=-lineWidths[i]/2,ly=(mode==="bubble"?-bubbleTotalH/2+pad+ascent+i*bubbleStep:-th/2+ascent+i*lh);if(stroke)g.strokeText(ln,lx,ly);g.fillText(ln,lx,ly);});
+  if(isActive&&mode==="bubble"){
+    const hitW=Math.max(...lineWidths)+pad*2,hitH=bubbleTotalH;
+    bubbleHit={cx:x,cy:y,w:hitW,h:hitH,a:o.rot*Math.PI/180,handleY:-hitH/2-size*.8,resizeX:hitW/2,resizeY:hitH/2};
+    g.globalAlpha=1;g.strokeStyle="#4cc2ff";g.lineWidth=Math.max(2,W/400);g.setLineDash([6,4]);g.strokeRect(-hitW/2,-hitH/2,hitW,hitH);g.setLineDash([]);g.beginPath();g.arc(0,bubbleHit.handleY,Math.max(7,size*.13),0,Math.PI*2);g.fillStyle="#4cc2ff";g.fill();const hs=Math.max(10,size*.18);g.fillRect(bubbleHit.resizeX-hs/2,bubbleHit.resizeY-hs/2,hs,hs);
+  }g.restore();
 }
+function roundRect(g,x,y,w,h,r){r=Math.min(r,w/2,h/2);g.beginPath();g.moveTo(x+r,y);g.arcTo(x+w,y,x+w,y+h,r);g.arcTo(x+w,y+h,x,y+h,r);g.arcTo(x,y+h,x,y,r);g.arcTo(x,y,x+w,y,r);g.closePath();}
 /* ======================= preview ======================= */
 function drawPreview(){
   const cv = $("preview"), g = cv.getContext("2d");
   const it = items[sel];
+  clearTimeout(previewTimer); previewTimer = 0;
   if(!it || !it.bitmap){
     cv.width = 640; cv.height = 360;
     g.fillStyle = "#000"; g.fillRect(0,0,cv.width,cv.height);
     $("outBadge").textContent = "";
     return;
   }
+  const anim = it.frames && it.frames.length > 1;
+  const frame = anim ? it.frames[previewFrame % it.frames.length] : it.bitmap;
+  const out = renderToCanvas(frame, true, PREVIEW_CAP);
   cv.width = out.width; cv.height = out.height;
   g.drawImage(out, 0, 0);
+  const G = outputGeom(frame);
+  $("srcBadge").textContent = it.name + " \u00b7 " + it.w + "\u00d7" + it.h +
+    (isHeic(it.file) ? " \u00b7 HEIC" : "") + (anim ? " \u00b7 " + it.frames.length + " frames" : "");
+  $("outBadge").textContent = G.w + "\u00d7" + G.h + " \u00b7 " + fmtLabel(outFmt) +
+    (out.width < G.w ? " \u00b7 preview scaled" : "");
+  /* play animated GIFs in the preview instead of freezing on frame 1 */
+  if(anim && !dragState && view === "preview"){
+    const sp = (+$("gifSpeed").value || 100) / 100;
+    const d = Math.max(20, (it.delays && it.delays[previewFrame % it.frames.length] || 100) / sp);
+    previewTimer = setTimeout(() => { previewFrame++; drawPreview(); }, d);
+  }
 }
+function fmtLabel(m){ return ({"image/png":"PNG","image/jpeg":"JPEG","image/webp":"WebP","image/avif":"AVIF","image/gif":"GIF","application/pdf":"PDF"})[m] || m; }
 /* ======================= view toggle ======================= */
 $("viewTabs").addEventListener("click", e => {
   const b = e.target.closest("button"); if(!b) return;
   if(view === "grid") renderGrid(); else drawPreview();
 });
 /* ======================= selection helpers ======================= */
+function selectedReady(){ return items.filter(it => it.selected && it.status !== "error" && (it.bitmap || (it.frames && it.frames[0]))); }
 $("selAll").addEventListener("click", () => { items.forEach(it => { if(it.status !== "error") it.selected = true; }); render(); });
 $("selNone").addEventListener("click", () => { items.forEach(it => it.selected = false); render(); });
 /* ======================= queue rendering ======================= */
   items.forEach((it, i) => {
     const row = document.createElement("div");
     row.className = "qrow" + (i === sel ? " on" : "");
+    row.addEventListener("click", () => { sel = i; previewFrame = 0; drawPreview(); render(); });
     const chk = document.createElement("input");
     chk.type = "checkbox"; chk.checked = !!it.selected; chk.title = "Include in conversion";
     chk.disabled = it.status === "error";
   items.forEach((it, i) => {
     const card = document.createElement("div");
     card.className = "gcard" + (i === sel ? " on" : "");
+    card.addEventListener("click", () => { sel = i; previewFrame = 0; if(view==="preview") drawPreview(); render(); });
     const chk = document.createElement("input");
     chk.type = "checkbox"; chk.className = "gchk"; chk.checked = !!it.selected;
     chk.disabled = it.status === "error"; chk.title = "Include in conversion";
     g.appendChild(card);
   });
 }
+function freeItem(it){
+  if(!it) return;
+  for(const b of new Set([it.bitmap, ...(it.frames || [])])){ try{ b && b.close && b.close(); }catch(_){} }
+}
 function removeAt(i){
   if(exporting) return;
+  freeItem(items[i]);
   items.splice(i, 1);
   if(sel >= items.length) sel = items.length - 1;
   if(!items.length){ dropAutoDone = false; setDropMini(false); }
   render(); if(view==="preview") drawPreview();
 }
+$("clearAll").addEventListener("click", () => { if(exporting) return; items.forEach(freeItem); items.length = 0; sel = -1; dropAutoDone = false; setDropMini(false); render(); drawPreview(); say($("status"),""); });
 $("clearDone").addEventListener("click", () => {
   if(exporting) return;
   for(let i = items.length-1; i>=0; i--) if(items[i].status === "done") removeAt(i);
 /* ======================= settings wiring ======================= */
 function syncFmtUI(){
   const lossy = isLossy(outFmt);
+  /* PDF pages are embedded as JPEG, so the quality slider matters there too. */
+  $("qualityRow").style.display = (lossy || outFmt === "application/pdf") ? "flex" : "none";
   $("targetChk").style.display = lossy ? "flex" : "none";
   $("targetRow").style.display = (lossy && $("targetOn").checked) ? "flex" : "none";
   $("pngOpts").style.display = outFmt === "image/png" ? "block" : "none";
   else if(outFmt === "image/jpeg") hint = "JPEG is best for photos. No transparency — transparent areas become white.";
   else if(outFmt === "image/webp") hint = "WebP gives smaller files than JPEG at similar quality, with transparency support.";
   else if(outFmt === "image/avif") hint = support["image/avif"] === false ? "\u26a0 Your browser can\u2019t encode AVIF — try Chrome or Edge, or pick WebP." : "AVIF is the smallest for photos, but slower to encode. Chrome/Edge only.";
+  else if(outFmt === "image/gif") hint = "Animated GIF export keeps animation when its frames were decoded; otherwise it exports one GIF frame. Colours are reduced to a web-safe palette.";
+  else if(outFmt === "application/pdf") hint = "Each ticked image becomes one PDF page (embedded as JPEG), scaled to fit A4 in its own orientation. The quality slider controls the page images.";
   $("fmtHint").textContent = hint;
 }
 $("fmtSeg").addEventListener("click", async e => {
+  if(exporting) return;
   const b = e.target.closest("button"); if(!b || b.disabled) return;
   document.querySelectorAll("#fmtSeg button").forEach(x => x.classList.toggle("on", x === b));
   outFmt = b.dataset.fmt;
   drawPreview(); updateEstimate();
 });
 ["pct","maxPreset"].forEach(id => $(id).addEventListener("input", () => { drawPreview(); updateEstimate(); }));
+/* the naming segment had no handler at all, so "Template" could never be chosen */
 $("nameMode").addEventListener("click", e => {
   const b = e.target.closest("button"); if(!b) return;
   document.querySelectorAll("#nameMode button").forEach(x => x.classList.toggle("on", x === b));
   $("tplRows").style.display = b.dataset.m === "tpl" ? "block" : "none";
 });
+$("pxW").addEventListener("input", () => { if($("lockAr").checked && items[sel]){ const it = items[sel]; $("pxH").value = Math.round((+$("pxW").value||1) * it.h / it.w); } drawPreview(); updateEstimate(); });
+$("pxH").addEventListener("input", () => { if($("lockAr").checked && items[sel]){ const it = items[sel]; $("pxW").value = Math.round((+$("pxH").value||1) * it.w / it.h); } drawPreview(); updateEstimate(); });
+function activeLayer(){return textLayers[activeText];}
+function saveLayerFromUI(){const o=activeLayer();if(!o)return;o.mode=$("textMode").value;o.text=$("wmText").value;o.pos=$("wmPos").value;o.font=$("wmFont").value;o.size=+$("wmSize").value;o.color=$("wmColor").value;o.bg=$("wmBg").value;o.pad=+$("wmPad").value;o.opacity=+$("wmOpacity").value;o.stroke=$("wmStroke").checked;}
+function loadLayerToUI(){const o=activeLayer();if(!o)return;$("textMode").value=o.mode;$("wmText").value=o.text;$("wmPos").value=o.pos;$("wmFont").value=o.font;$("wmSize").value=o.size;$("wmColor").value=o.color;$("wmBg").value=o.bg;$("wmPad").value=o.pad;$("wmOpacity").value=o.opacity;$("wmStroke").checked=o.stroke;$("wmSizeL").textContent=o.size+"%";$("wmPadL").textContent=o.pad+"%";$("wmOpacityL").textContent=o.opacity+"%";renderTextLayerList();drawPreview();updateEstimate();}
+function renderTextLayerList(){const l=$("textLayerList");l.textContent="";textLayers.forEach((o,i)=>{const op=document.createElement("option");op.value=i;op.textContent=(i+1)+". "+(o.mode==="none"?"None":o.mode)+" · "+(o.text||"empty").slice(0,22);op.selected=i===activeText;l.appendChild(op);});}
+["textMode","wmText","wmPos","wmFont","wmSize","wmColor","wmBg","wmPad","wmStroke","wmOpacity"].forEach(id=>$(id).addEventListener("input",()=>{saveLayerFromUI();$("wmSizeL").textContent=$("wmSize").value+"%";$("wmPadL").textContent=$("wmPad").value+"%";$("wmOpacityL").textContent=$("wmOpacity").value+"%";renderTextLayerList();drawPreview();updateEstimate();}));
+$("textLayerList").onchange=e=>{saveLayerFromUI();activeText=+e.target.value;loadLayerToUI();};
+$("addTextLayer").onclick=()=>{saveLayerFromUI();textLayers.push({id:nextTextId++,mode:"bubble",text:"",pos:"bc",font:"Arial,Segoe UI,sans-serif",size:7,color:"#ffffff",bg:"#000000",pad:45,opacity:95,stroke:false,x:.5,y:.82,rot:0});activeText=textLayers.length-1;loadLayerToUI();};
+$("dupTextLayer").onclick=()=>{saveLayerFromUI();const n={...activeLayer(),id:nextTextId++,x:Math.min(.95,activeLayer().x+.04),y:Math.min(.95,activeLayer().y+.04)};textLayers.push(n);activeText=textLayers.length-1;loadLayerToUI();};
+$("delTextLayer").onclick=()=>{if(textLayers.length===1){textLayers[0]={id:nextTextId++,mode:"bubble",text:"",pos:"bc",font:"Arial,Segoe UI,sans-serif",size:7,color:"#ffffff",bg:"#000000",pad:45,opacity:95,stroke:false,x:.5,y:.82,rot:0};activeText=0;}else{textLayers.splice(activeText,1);activeText=Math.max(0,activeText-1);}loadLayerToUI();};
+$("textMode").addEventListener("change",()=>{if($("textMode").value==="meme"){$("wmFont").value="Impact,Arial Black,sans-serif";}saveLayerFromUI();drawPreview();});
+function canvasPoint(e){const c=$("preview"),r=c.getBoundingClientRect();return{x:(e.clientX-r.left)*c.width/r.width,y:(e.clientY-r.top)*c.height/r.height};}
+function localHit(p,h){const dx=p.x-h.cx,dy=p.y-h.cy,ca=Math.cos(-h.a),sa=Math.sin(-h.a);return{x:dx*ca-dy*sa,y:dx*sa+dy*ca};}
+$("preview").addEventListener("pointerdown",e=>{const o=activeLayer();if(!o||o.mode!=="bubble"||!bubbleHit)return;const p=canvasPoint(e),l=localHit(p,bubbleHit),hr=Math.max(14,bubbleHit.h*.15);if(Math.hypot(l.x,l.y-bubbleHit.handleY)<hr)dragState={kind:"rotate"};else if(Math.hypot(l.x-bubbleHit.resizeX,l.y-bubbleHit.resizeY)<hr)dragState={kind:"resize",startDist:Math.hypot(l.x,l.y),startSize:o.size};else if(Math.abs(l.x)<=bubbleHit.w/2&&Math.abs(l.y)<=bubbleHit.h/2)dragState={kind:"move",ox:p.x-bubbleHit.cx,oy:p.y-bubbleHit.cy};if(dragState){e.preventDefault();$("preview").setPointerCapture(e.pointerId);}});
+$("preview").addEventListener("pointermove",e=>{if(!dragState)return;const p=canvasPoint(e),o=activeLayer();if(!o)return;if(dragState.kind==="move"){o.x=Math.max(0,Math.min(1,(p.x-dragState.ox)/$("preview").width));o.y=Math.max(0,Math.min(1,(p.y-dragState.oy)/$("preview").height)); }else if(dragState.kind==="resize"){const l=localHit(p,bubbleHit),ratio=Math.hypot(l.x,l.y)/Math.max(1,dragState.startDist);o.size=Math.max(2,Math.min(30,dragState.startSize*ratio));$("wmSize").value=o.size;$("wmSizeL").textContent=o.size.toFixed(1)+"%";}else{o.rot=Math.round(Math.atan2(p.y-bubbleHit.cy,p.x-bubbleHit.cx)*180/Math.PI+90);}drawPreview();});
+function endBubbleDrag(){if(!dragState)return;dragState=null;renderTextLayerList();updateEstimate();drawPreview();}
+$("preview").addEventListener("pointerup",endBubbleDrag);
+$("preview").addEventListener("pointercancel",endBubbleDrag);
+$("preview").addEventListener("lostpointercapture",()=>{if(dragState){dragState=null;renderTextLayerList();updateEstimate();drawPreview();}});
+["cropL","cropR","cropT","cropB","straighten"].forEach(id=>$(id).addEventListener("input",()=>{crop.l=+$("cropL").value;crop.r=+$("cropR").value;crop.t=+$("cropT").value;crop.b=+$("cropB").value;crop.angle=+$("straighten").value;$("cropLL").textContent=crop.l+"%";$("cropRL").textContent=crop.r+"%";$("cropTL").textContent=crop.t+"%";$("cropBL").textContent=crop.b+"%";$("straightenL").textContent=crop.angle+"°";drawPreview();updateEstimate();}));
+$("resetCrop").onclick=()=>{crop={l:0,r:0,t:0,b:0,angle:0};$("cropPreset").value="free";["cropL","cropR","cropT","cropB","straighten"].forEach(id=>$(id).value=0);["cropLL","cropRL","cropTL","cropBL"].forEach(id=>$(id).textContent="0%");$("straightenL").textContent="0°";drawPreview();updateEstimate();};
+$("cropPreset").onchange=()=>{const v=$("cropPreset").value,it=items[sel];
+  if(v==="free"){["cropL","cropR","cropT","cropB"].forEach(id=>$(id).value=0);$("cropL").dispatchEvent(new Event("input"));return;}
+  if(!it)return;const [a,b]=v.split(":").map(Number),target=a/b,cur=it.w/it.h;let lr=0,tb=0;if(cur>target)lr=(1-target/cur)*50;else tb=(1-cur/target)*50;$("cropL").value=$("cropR").value=lr.toFixed(1);$("cropT").value=$("cropB").value=tb.toFixed(1);$("cropL").dispatchEvent(new Event("input"));};
+$("gifAlpha").oninput=()=>{$("gifAlphaL").textContent=$("gifAlpha").value;updateEstimate();};
+$("gifSpeed").oninput=()=>{$("gifSpeedL").textContent=$("gifSpeed").value+"%";};
+$("gifTransparent").onchange=updateEstimate;
 /* ======================= estimate ======================= */
 let estTimer = 0, estToken = 0;
 function updateEstimate(){
   $("exportBtn").disabled = exporting || selN === 0;
   const it = items[sel];
   if(!it || !it.bitmap){ $("eDims").textContent = "\u2014"; $("eBytes").textContent = "\u2014"; return; }
+  const G = outputGeom(it.bitmap);
+  $("eDims").textContent = G.w + "\u00d7" + G.h;
   clearTimeout(estTimer);
   const token = ++estToken;
   estTimer = setTimeout(async () => {
     try{
       const cur = items[sel];
+      const source=cur&&(cur.bitmap||(cur.frames&&cur.frames[0]));
+      if(!source){ $("eBytes").textContent = "\u2014"; return; }
+      if(outFmt === "image/gif" && cur.frames && cur.frames.length > 1){if(token === estToken) $("eBytes").textContent = "calculated on export";return;}
+      const blob = await encodeCanvas(renderToCanvas(source), false);
+      if(token !== estToken) return;
       $("eBytes").textContent = blob ? human(blob.size) : "\u2014";
     }catch(e){ if(token === estToken) $("eBytes").textContent = "\u2014"; }
   }, 300);
 function canvasToBlob(cv, mime, q){ return new Promise(res => cv.toBlob(res, mime, q)); }
 async function encodeCanvas(cv, doTarget){
   if(outFmt === "application/pdf") return makePdf([cv]);
+  if(outFmt === "image/gif") return encodeStillGif(cv);
   if(outFmt === "image/png"){
     const colors = +$("pngColors").value || 0;
     if(colors > 0) return encodeIndexedPNG(cv, colors, $("pngDither").checked);
   const plte = pngChunk("PLTE", pal.subarray(0, count*3));
   return assemblePNG(w, h, 3, [plte], idat);
 }
+/* ---------- compact animated GIF encoder: fixed 216-colour palette ---------- */
+function gifBytes(it){const a=[];return{a,u8(v){a.push(v&255)},u16(v){a.push(v&255,(v>>8)&255)},str(t){for(const c of t)a.push(c.charCodeAt(0))},arr(v){for(const x of v)a.push(x)}}}
+function gifPalette(){const p=[];for(let r=0;r<6;r++)for(let g=0;g<6;g++)for(let b=0;b<6;b++)p.push(r*51,g*51,b*51);while(p.length<768)p.push(0);return p;}
+function gifIndex(data){const o=new Uint8Array(data.length/4),keep=$("gifTransparent").checked,cut=+$("gifAlpha").value||128;for(let p=0,q=0;q<o.length;q++,p+=4){if(keep&&data[p+3]<cut){o[q]=255;continue;}const r=Math.round(data[p]/51),g=Math.round(data[p+1]/51),b=Math.round(data[p+2]/51);o[q]=r*36+g*6+b;}return o;}
+function lzwGif(idx,min=8){const clear=1<<min,eoi=clear+1;let size=min+1,next=eoi+1,dict=new Map(),bits=0,nb=0,out=[];const put=c=>{bits|=c<<nb;nb+=size;while(nb>=8){out.push(bits&255);bits>>=8;nb-=8;}};const reset=()=>{dict=new Map();size=min+1;next=eoi+1;};put(clear);let pref=idx[0]||0;for(let i=1;i<idx.length;i++){const k=pref+','+idx[i];if(dict.has(k))pref=dict.get(k);else{put(pref);if(next<4096){dict.set(k,next++);if(next===(1<<size)&&size<12)size++;}else{put(clear);reset();}pref=idx[i];}}put(pref);put(eoi);if(nb)out.push(bits&255);return out;}
+function addGifFrame(w,indices,delay,W,H){w.u8(0x21);w.u8(0xF9);w.u8(4);w.u8($("gifTransparent").checked?9:4);  /* disposal 2 + transparency, or disposal 1 */w.u16(Math.max(2,Math.min(65535,Math.round(delay/10))));w.u8($("gifTransparent").checked?255:0);w.u8(0);w.u8(0x2C);w.u16(0);w.u16(0);w.u16(W);w.u16(H);w.u8(0);w.u8(8);const z=lzwGif(indices);for(let i=0;i<z.length;i+=255){const n=Math.min(255,z.length-i);w.u8(n);w.arr(z.slice(i,i+n));}w.u8(0);}
+async function encodeGifCanvases(canvases,delays,loop){
+  if(!canvases.length)throw new Error("GIF has no frames");const W=canvases[0].width,H=canvases[0].height;
+  const w=gifBytes();w.str("GIF89a");w.u16(W);w.u16(H);w.u8(0xF7);w.u8(0);w.u8(0);w.arr(gifPalette());
+  if(loop){w.u8(0x21);w.u8(0xFF);w.u8(11);w.str("NETSCAPE2.0");w.u8(3);w.u8(1);w.u16(0);w.u8(0);}
+  for(let i=0;i<canvases.length;i++){const cv=canvases[i];if(cv.width!==W||cv.height!==H)throw new Error("GIF frame size mismatch");const d=cv.getContext("2d",{willReadFrequently:true}).getImageData(0,0,W,H).data;addGifFrame(w,gifIndex(d),delays[i]||100,W,H);if(exporting){$("barI").style.width=Math.min(95,5+(i+1)/canvases.length*88)+"%";say($("status"),"Encoding GIF frame "+(i+1)+" of "+canvases.length+"…");}if(i%2===0)await wait(0);if(cancel)throw new Error("Export stopped");}
+  w.u8(0x3B);const blob=new Blob([new Uint8Array(w.a)],{type:"image/gif"});if(blob.size<20)throw new Error("GIF encoder produced an empty file");return blob;
+}
+async function encodeStillGif(cv){return encodeGifCanvases([cv],[100],false);}
+async function encodeAnimatedItem(it){if(!it.frames||!it.frames.length)throw new Error("No animated GIF frames were decoded");const arr=[];for(let i=0;i<it.frames.length;i++){const src=renderToCanvas(it.frames[i]),c=document.createElement("canvas");c.width=src.width;c.height=src.height;c.getContext("2d").drawImage(src,0,0);arr.push(c);if(i%6===0)await wait(0);}const sp=(+$("gifSpeed").value||100)/100;return encodeGifCanvases(arr,(it.delays||[]).map(d=>d/sp),$("gifLoop").checked);}
 /* ---------- PDF: one page per image, JPEG embedded (DCTDecode) ---------- */
 async function makePdf(canvases){
   const q = clamp((+$("quality").value||82)/100, 0.4, 0.95);
   start(); push("2 0 obj\n<< /Type /Pages /Count " + N + " /Kids [ " + kids.join(" ") + " ] >>\nendobj\n");
   for(let i=0;i<N;i++){
     const cv = canvases[i], w = cv.width, h = cv.height;
+    /* A PDF unit is 1/72 inch, so using raw pixels made a 4000px photo into a
+       55-inch page. Scale each page to fill A4 in its own orientation. */
+    const sc = Math.min(595 / Math.min(w,h), 842 / Math.max(w,h));
+    const pw = (w*sc).toFixed(2), ph = (h*sc).toFixed(2);
     const pageObj = 3 + i*3, contentObj = pageObj + 1, imgObj = pageObj + 2;
     start();
+    push(pageObj + " 0 obj\n<< /Type /Page /Parent 2 0 R /MediaBox [0 0 " + pw + " " + ph + "] " +
          "/Resources << /XObject << /Im0 " + imgObj + " 0 R >> >> /Contents " + contentObj + " 0 R >>\nendobj\n");
+    const content = "q\n" + pw + " 0 0 " + ph + " 0 0 cm\n/Im0 Do\nQ\n";
     start();
     push(contentObj + " 0 obj\n<< /Length " + content.length + " >>\nstream\n" + content + "endstream\nendobj\n");
     const data = imgDatas[i];
     if(cancel) break;
     it.status = "working"; render();
     try{
+      const source=it.bitmap||(it.frames&&it.frames[0]);if(!source)throw new Error("No readable image frame");
+      const cv = renderToCanvas(source);
+      const blob = (outFmt==="image/gif" && it.frames && it.frames.length>1) ? await encodeAnimatedItem(it) : await encodeCanvas(cv, true);
       if(!blob || !blob.size) throw new Error("empty output");
       const name = uniqueName(outNameFor(it, i, cv.width, cv.height), usedNames);
       it.outName = name; it.outSize = blob.size;
         if(ready.length > 1) await wait(300);
       }
       it.status = "done"; done++;
+    }catch(e){ it.status = "ready"; it.err = e.message || "convert failed"; failed++; say($("status"), "Could not save "+it.name+": "+it.err, "err"); }
     i++;
     $("barI").style.width = ((done+failed)/ready.length*100).toFixed(1) + "%";
     render();
     const canvases = [];
     for(let k=0;k<ready.length;k++){
       if(cancel) break;
+      const src = ready[k].bitmap || (ready[k].frames && ready[k].frames[0]);
+      if(!src) continue;
+      const cv = renderToCanvas(src);
       const c2 = document.createElement("canvas"); c2.width = cv.width; c2.height = cv.height;
       c2.getContext("2d").drawImage(cv, 0, 0);
       canvases.push(c2);
 /* ======================= keyboard ======================= */
 document.addEventListener("keydown", e => {
   const tag = (e.target.tagName||"").toLowerCase();
+  if(tag === "input" || tag === "select" || tag === "textarea" || tag === "button" || tag === "a") return;
+  if(e.target.isContentEditable) return;
   if(e.metaKey || e.ctrlKey || e.altKey) return;
   if(exporting) return;
+  if(e.key === "ArrowLeft"){ e.preventDefault(); if(sel > 0){ sel--; previewFrame = 0; drawPreview(); render(); } }
+  else if(e.key === "ArrowRight"){ e.preventDefault(); if(sel < items.length-1){ sel++; previewFrame = 0; drawPreview(); render(); } }
   else if(e.key === " "){ e.preventDefault(); const it=items[sel]; if(it && it.status!=="error"){ it.selected=!it.selected; render(); } }
   else if(e.key === "r" || e.key === "R"){ e.preventDefault(); rot = (rot+90)%360; drawPreview(); updateEstimate(); }
   else if(e.key === "Delete" || e.key === "Backspace"){ if(sel>=0){ e.preventDefault(); removeAt(sel); } }
     if(b){ b.disabled = true; b.title = "Not supported by this browser"; b.style.opacity = ".4"; b.style.cursor = "not-allowed"; }
   }
   syncFmtUI();
+  renderTextLayerList();loadLayerToUI();
   drawPreview(); render();
 })();
 })();
 </script>
 </body>
 </html>