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

sdk/src/pdf-seal-designer.js

@@ -209,6 +209,9 @@ export class PdfSealDesigner {
         padding: 20px;
         color: #f8fafc;
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        max-width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
       }
       .designer-header {
         margin-bottom: 20px;
@@ -227,12 +230,13 @@ export class PdfSealDesigner {
       }
       .designer-body {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         gap: 24px;
+        min-width: 0;
       }
       @media (max-width: 860px) {
         .designer-body {
-          grid-template-columns: 1fr;
+          grid-template-columns: minmax(0, 1fr);
         }
       }
       .form-section-title {
@@ -364,12 +368,17 @@ export class PdfSealDesigner {
         display: flex;
         flex-direction: column;
         gap: 16px;
+        min-width: 0;
+        max-width: 100%;
       }
       .preview-card, .json-export-card {
         background: #131c31;
         border: 1px solid #24304f;
         border-radius: 10px;
         padding: 16px;
+        min-width: 0;
+        max-width: 100%;
+        box-sizing: border-box;
       }
       .preview-card h4, .json-export-card h4 {
         font-size: 12px;
@@ -385,9 +394,14 @@ export class PdfSealDesigner {
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+        max-width: 340px;
+        margin: 0 auto;
+        box-sizing: border-box;
+        overflow: hidden;
       }
       .seal-live-preview-box svg {
         max-width: 100%;
+        width: 100%;
         height: auto;
         display: block;
       }
@@ -426,8 +440,22 @@ export class PdfSealDesigner {
         font-size: 10.5px;
         color: #38bdf8;
         max-height: 180px;
-        overflow: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
         margin: 0;
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
+        max-width: 100%;
+        min-width: 0;
+        box-sizing: border-box;
+      }
+      .theme-json-box code {
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
+        display: block;
+        max-width: 100%;
       }
     `;
     document.head.appendChild(style);
@@ -541,7 +569,7 @@ export class PdfSealDesigner {
 
     let iconGraphic = '';
     if (t.customLogoBase64) {
-      iconGraphic = `<image href="${t.customLogoBase64}" x="12" y="14" width="34" height="34" preserveAspectRatio="xMidYMid meet" />`;
+      iconGraphic = `<image xlink:href="${t.customLogoBase64}" href="${t.customLogoBase64}" x="12" y="14" width="34" height="54" preserveAspectRatio="xMidYMid meet" />`;
     } else {
       switch (t.iconStyle) {
         case 'star':
@@ -578,7 +606,7 @@ export class PdfSealDesigner {
     }
 
     const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 82" width="320" height="82" style="border-radius:6px; background:${t.backgroundColor};">
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 82" width="320" height="82" style="border-radius:6px; background:${t.backgroundColor};">
         <rect x="1" y="1" width="318" height="80" rx="6" fill="${t.backgroundColor}" stroke="${t.borderColor}" stroke-width="1.5"/>
         <rect x="1" y="1" width="6" height="80" rx="3" fill="${t.primaryColor}"/>
         
@@ -591,13 +619,20 @@ export class PdfSealDesigner {
         <text x="54" y="19" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="8.5" font-weight="bold" fill="${t.primaryColor}" letter-spacing="0.3">${t.customHeader || 'DOCUMENTO ASSINADO DIGITALMENTE'}</text>
         <text x="54" y="34" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="12" font-weight="bold" fill="${t.textColor}">MARIA DA SILVA</text>
         <text x="54" y="47" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="8" fill="#475569">${[docText, extraText].filter(Boolean).join(' • ')}</text>
-        <text x="54" y="58" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="8" fill="#475569">${[dateText, 'AC SERPRO v5'].filter(Boolean).join(' • ')}</text>
+        <text x="54" y="58" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="8" fill="#475569">${dateText ? `Data: ${dateText}` : ''}</text>
         <text x="54" y="70" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="7.5" fill="#64748b">${t.customFooter || 'ICP-Brasil • MP nº 2.200-2/2001'}</text>
       </svg>
     `;
 
     this.previewBox.innerHTML = svg;
-    this.jsonBox.textContent = JSON.stringify(this.getThemeConfig(), null, 2);
+
+    // Na visualização do código, trunca se o Base64 for gigante para preservar performance da UI
+    const displayConfig = { ...this.getThemeConfig() };
+    if (displayConfig.customLogoBase64 && displayConfig.customLogoBase64.length > 100) {
+      const lenKb = (displayConfig.customLogoBase64.length / 1024).toFixed(1);
+      displayConfig.customLogoBase64 = `${displayConfig.customLogoBase64.substring(0, 32)}... [${lenKb} KB]`;
+    }
+    this.jsonBox.textContent = JSON.stringify(displayConfig, null, 2);
   }
 
   /**
@@ -625,6 +660,13 @@ export class PdfSealDesigner {
     };
   }
 
+  /**
+   * Alias conveniente para getThemeConfig().
+   */
+  getConfig() {
+    return this.getThemeConfig();
+  }
+
   /**
    * Carrega um tema para edição.
    */