feat: update PDF stamp picker and server CORS settings for enhanced UI rendering

sdk/demo/index.html

@@ -667,9 +667,9 @@
           <!-- Configurações do Selo e da Assinatura -->
           <div id="pdfOptionsSection" style="margin-top: 16px; display: none; background: var(--bg-surface); padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);">
             <h4 style="font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px;">🎨 Configurações do Selo Visual</h4>
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;">
+            <div style="display: grid; grid-template-columns: minmax(240px, 360px); gap: 14px;">
               <div class="form-group">
-                <label class="form-label">Tema do Selo do Agente:</label>
+                <label class="form-label">Tema do Selo Visual:</label>
                 <select id="pdfSealThemeSelect" class="cert-bar-select">
                   <option value="icp-brasil">ICP-Brasil Institucional (Padrão)</option>
                   <option value="gov-br">Governamental (Gov.br / ITI)</option>
@@ -678,16 +678,6 @@
                   <option value="custom">🎨 Selo Customizado do Designer</option>
                 </select>
               </div>
-
-              <div class="form-group">
-                <label class="form-label">Razão / Motivo da Assinatura:</label>
-                <input type="text" id="pdfReasonInput" value="Documento aprovado e assinado digitalmente" placeholder="Ex: De acordo com os termos">
-              </div>
-
-              <div class="form-group">
-                <label class="form-label">Localização:</label>
-                <input type="text" id="pdfLocationInput" value="Curitiba, PR - Brasil" placeholder="Ex: Brasília, DF">
-              </div>
             </div>
 
             <div style="margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap;">
@@ -1062,6 +1052,13 @@
         certTypeBadge.textContent = cert.type || 'A1';
         certTypeBadge.className = `badge-tag ${cert.type === 'A3' ? 'badge-a3' : 'badge-a1'}`;
         certValidityText.textContent = `Validade: ${cert.valid_to ? new Date(cert.valid_to).toLocaleDateString() : 'N/D'}`;
+
+        if (pdfStampPicker) {
+          pdfStampPicker.updateSealTheme(null, {
+            signerName: cert.common_name || cert.alias,
+            signerDoc: cert.cpf_cnpj ? `CPF: ${cert.cpf_cnpj}` : (cert.type === 'A3' ? 'Token Físico A3' : 'ICP-Brasil')
+          });
+        }
       } else {
         certTypeBadge.style.display = 'none';
         certValidityText.textContent = '';
@@ -1171,22 +1168,56 @@
       stampPickerMount.style.display = 'block';
       pdfOptionsSection.style.display = 'block';
 
+      const activeCert = currentCertificates.find(c => c.id === selectedCertificateId);
+      const currentThemeVal = pdfSealThemeSelect ? pdfSealThemeSelect.value : 'icp-brasil';
+      const initialTheme = (currentThemeVal === 'custom' && currentCustomSealConfig)
+        ? currentCustomSealConfig
+        : currentThemeVal;
+
+      const rawCertName = activeCert ? (activeCert.common_name || activeCert.alias) : '';
+      const cleanCertName = rawCertName.includes(':') ? rawCertName.split(':')[0].trim() : rawCertName;
+      const initialSignerInfo = activeCert ? {
+        signerName: cleanCertName,
+        signerDoc: activeCert.cpf_cnpj ? `CPF: ${activeCert.cpf_cnpj}` : (activeCert.type === 'A3' ? 'Token Físico A3' : 'ICP-Brasil')
+      } : {
+        signerName: 'Nome do Titular do Certificado',
+        signerDoc: 'CPF: ***.456.789-**'
+      };
+
       if (!pdfStampPicker) {
         pdfStampPicker = new PdfStampPicker({
           container: stampPickerMount,
-          pdfSource: buffer,
+          pdf: buffer,
+          sealTheme: initialTheme,
+          signerInfo: initialSignerInfo,
           initialScale: 1.0,
           onPositionChange: (pos) => {
             console.log('Posição do selo atualizada:', pos);
+          },
+          onSignRequest: () => {
+            btnSignPdfFull.click();
           }
         });
       } else {
+        pdfStampPicker.updateSealTheme(initialTheme, initialSignerInfo);
         pdfStampPicker.loadPdf(buffer);
       }
 
       updateButtonStates();
     }
 
+    // Sincroniza alteração de tema com o selo sobre o PDF
+    pdfSealThemeSelect.addEventListener('change', () => {
+      const themeVal = pdfSealThemeSelect.value;
+      if (pdfStampPicker) {
+        if (themeVal === 'custom' && currentCustomSealConfig) {
+          pdfStampPicker.updateSealTheme(currentCustomSealConfig);
+        } else {
+          pdfStampPicker.updateSealTheme(themeVal);
+        }
+      }
+    });
+
     // Assinatura Completa de PDF (Devolve PDF Assinado Base64)
     btnSignPdfFull.addEventListener('click', async () => {
       btnSignPdfFull.disabled = true;
@@ -1201,13 +1232,11 @@
 
         const signParams = {
           certificateId: selectedCertificateId,
-          pdf: currentPdfBytes,
+          pdf: currentPdfFile || currentPdfBytes,
           page: stampConfig.page,
           x: stampConfig.x,
           y: stampConfig.y,
-          scale: stampConfig.scale,
-          reason: document.getElementById('pdfReasonInput').value || 'Assinado Digitalmente',
-          location: document.getElementById('pdfLocationInput').value || 'Brasil'
+          scale: stampConfig.scale
         };
 
         if (selectedTheme === 'custom' && currentCustomSealConfig) {
@@ -1324,9 +1353,12 @@
       document.getElementById('btnApplySealToPdf').addEventListener('click', () => {
         currentCustomSealConfig = pdfSealDesigner.getConfig();
         pdfSealThemeSelect.value = 'custom';
+        if (pdfStampPicker) {
+          pdfStampPicker.updateSealTheme(currentCustomSealConfig);
+        }
         // Alterna para aba PDF
         document.querySelector('[data-tab="tab-pdf"]').click();
-        alert('Selo customizado selecionado para a assinatura do PDF!');
+        alert('Selo customizado selecionado e aplicado ao posicionador de PDF!');
       });
     }