fix: preview uploaded artwork by metre

dtf-site.html

@@ -369,6 +369,10 @@ h1 em{font-style:normal;color:var(--laranja)}
 #vArea::-webkit-scrollbar-track{background:transparent}
 #vArea canvas{max-width:100%;height:auto;display:block;background:#fff}
 #vArea.ampliado canvas{max-width:none}
+#vArea .folhaPrevias{min-height:200px;padding:10px;display:grid;gap:12px;background:#F8F9FA}
+#vArea .folhaPrevia{margin:0;background:#fff;border:1px solid var(--linha);border-radius:6px;overflow:hidden}
+#vArea .folhaPrevia img{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;background:#fff}
+#vArea .folhaPrevia figcaption{padding:7px 9px;font-size:10.5px;color:var(--fraco);border-top:1px solid var(--linha)}
 #vArea .semmont{border:0;min-height:200px;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
 #vUso:empty{display:none}
@@ -1529,7 +1533,7 @@ function sel(fs){
         x.med=md; if(md) x.m=md.alt/100; x.pct=55; pintaFolha();
         if(md && RENDERIZA.test(x.f.name)){
           carregarImagem(x.f).then(img=>{
-            if(img){ try{ x.an=analisarFolha(img, md.larg); if(x.an) x.an.fonteDpi='arquivo'; }
+            if(img){ x.previewSrc=img.src; try{ x.an=analisarFolha(img, md.larg); if(x.an) x.an.fonteDpi='arquivo'; }
                      catch(e){} }
             x.pct=null; pintaFolha();
           });
@@ -2503,14 +2507,28 @@ function previaAoVivo(){
     const tot=folhaTotalM();
     $('vMt').textContent = tot>0 ? fmtM(cobrar(tot))+' m' : '—';
     const medidas=folhas.filter(x=>x.med);
-    $('vArea').innerHTML = medidas.length
+    const previews=folhas.filter(x=>x.previewSrc);
-      ? '<div class="semmont"><b>'+(medidas.length>1
+    if(previews.length){
-          ? medidas.length+' folhas · '+fmtM(tot)+' m'
+      const painel=document.createElement('div'); painel.className='folhaPrevias';
-          : n1(medidas[0].med.larg)+' × '+n1(medidas[0].med.alt)+' cm')+'</b>'+
+      previews.forEach((x,index)=>{
-        '<span>'+(medidas.length>1? 'medidas lidas de cada arquivo' : medidas[0].med.fonte)+
+        const figura=document.createElement('figure'); figura.className='folhaPrevia';
-        ' · vão para a máquina do jeito que você montou</span></div>'
+        const imagem=new Image(); imagem.src=x.previewSrc; imagem.alt=x.f.name;
-      : '<div class="semmont"><b>Sua folha aparece aqui</b>'+
+        const legenda=document.createElement('figcaption');
-        '<span>a medida é lida do próprio arquivo, não do peso dele</span></div>';
+        legenda.textContent=(previews.length>1 ? (index+1)+'. ' : '')+x.f.name+
+          (x.med ? ' · '+n1(x.med.larg)+' × '+n1(x.med.alt)+' cm' : '');
+        figura.append(imagem,legenda); painel.append(figura);
+      });
+      $('vArea').replaceChildren(painel);
+    }else{
+      $('vArea').innerHTML = medidas.length
+        ? '<div class="semmont"><b>'+(medidas.length>1
+            ? medidas.length+' folhas · '+fmtM(tot)+' m'
+            : n1(medidas[0].med.larg)+' × '+n1(medidas[0].med.alt)+' cm')+'</b>'+
+          '<span>'+(medidas.length>1? 'medidas lidas de cada arquivo' : medidas[0].med.fonte)+
+          ' · vão para a máquina do jeito que você montou</span></div>'
+        : '<div class="semmont"><b>Sua folha aparece aqui</b>'+
+          '<span>a medida é lida do próprio arquivo, não do peso dele</span></div>';
+    }
     return;
   }
   clearTimeout(tMont);