@zyther/tzmail 0.1.3 → 0.5.0

package/dist/templates/base/template-builder.js

@@ -1,86 +1,88 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TemplateBuilder = void 0;
+const color_accessibility_1 = require("./color-accessibility");
+function escapeHtml(value) {
+    return String(value ?? '').replace(/[&<>"']/g, character => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[character]));
+}
+function safeHref(value, allowMailto = false) {
+    if (typeof value !== 'string' || !value.trim() || /[\u0000-\u0020"'<>\\]/.test(value))
+        throw new Error('Unsafe URL in template');
+    let url;
+    try {
+        url = new URL(value);
+    }
+    catch {
+        throw new Error('Template URLs must be absolute');
+    }
+    const schemes = allowMailto ? ['http:', 'https:', 'mailto:'] : ['http:', 'https:'];
+    if (!schemes.includes(url.protocol.toLowerCase()))
+        throw new Error('Unsafe URL scheme in template');
+    return escapeHtml(value);
+}
+const DEFAULT_EMAIL_STYLES = {
+    maxWidthPx: 600,
+    container: { borderColor: 'border', borderWidth: '1px', borderRadius: '8px', boxShadow: 'none' },
+    header: { accentColor: 'border', accentWidth: '1px', horizontalPadding: '24px', logoColor: 'text', imageBorderRadius: '0px' },
+    body: { accentColor: 'none', accentWidth: '0px', borderRadius: '0px', boxShadow: 'none', horizontalPadding: '24px', lineHeight: 1.6 },
+    button: { appearance: 'solid', borderRadius: '6px', borderWidth: '0px', boxShadow: 'none' },
+    footer: { accentColor: 'border', accentWidth: '1px' }
+};
+function colorFor(token, colors) {
+    return token === 'none' ? undefined : colors[token];
+}
+function borderFor(token, width, colors) {
+    const color = colorFor(token, colors);
+    return !color || !width || Number.parseFloat(width) <= 0 ? 'none' : `${width} solid ${color}`;
+}
 class TemplateBuilder {
+    template = '';
+    theme;
+    config;
+    variant;
     constructor(theme, config, variant) {
-        this.template = '';
         this.theme = theme;
         this.config = config;
         this.variant = variant;
     }
+    get emailStyles() {
+        return this.theme.emailStyles ?? DEFAULT_EMAIL_STYLES;
+    }
+    buildPreheader() {
+        const preheader = this.config.preheader;
+        if (!preheader)
+            return this;
+        this.template += `<div aria-hidden="true" style="display:none!important;visibility:hidden;opacity:0;color:transparent;height:0;width:0;max-height:0;max-width:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;">${escapeHtml(preheader)}</div>`;
+        return this;
+    }
     buildHeader(content) {
-        var _a;
-        if (!((_a = this.config.header) === null || _a === void 0 ? void 0 : _a.show))
+        if (!this.config.header?.show)
             return this;
         const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
-        const isMonokai = this.theme.id === 'monokai';
-        const isModern = this.theme.id === 'modern';
-        const isCorporate = this.theme.id === 'corporate';
-        const isMinimal = this.theme.id === 'minimal';
-        let headerStyles = `
-      background-color: ${colors.background};
-      padding: ${this.theme.spacing.lg} ${this.theme.spacing.xl};
+        const styles = this.emailStyles.header;
+        const headerBorder = borderFor(styles.accentColor, styles.accentWidth, colors);
+        const headerBackground = this.config.header?.backgroundColor || colors.background;
+        const headerTextColor = (0, color_accessibility_1.readableTextColor)(this.config.header?.textColor || colors.text, headerBackground, colors.text);
+        const headerStyles = `
+      background-color: ${headerBackground};
+      color: ${headerTextColor};
+      padding: ${this.theme.spacing.lg} ${styles.horizontalPadding};
+      border-bottom: ${headerBorder};
+      font-family: ${this.theme.typography.fontFamily};
     `;
-        // styles específicos para tema Corporate
-        if (isCorporate) {
-            const corporate = this.theme;
-            headerStyles += `
-        border-bottom: ${corporate.borderStyle.width.medium} solid ${corporate.corporateColors.gold};
-        box-shadow: ${corporate.elevation.shadow};
-        text-transform: ${corporate.branding.textTransform.uppercase};
-        letter-spacing: ${corporate.branding.letterSpacing.wide};
-      `;
-        }
-        // styles específicos para tema Minimal
-        if (isMinimal) {
-            const minimal = this.theme;
-            headerStyles += `
-        border-bottom: ${minimal.borderStyle.width.thin} solid ${colors.border};
-        padding: ${minimal.spacing.lg} ${minimal.spacing.xl};
-      `;
-        }
-        // styles existentes para outros temas
-        else if (isModern) {
-            headerStyles += `
-        border-bottom: 1px solid ${colors.border};
-        backdrop-filter: blur(${this.theme.glassmorphism.blur});
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-      `;
-        }
-        else if (isMonokai) {
-            headerStyles += `
-        border-bottom: 2px solid ${colors.primary};
-        box-shadow: ${this.theme.effects.shadow};
-        transition: ${this.theme.effects.transition};
-      `;
-        }
-        else {
-            headerStyles += `
-        border-bottom: 1px solid ${colors.border};
-      `;
-        }
         const logoHtml = this.buildLogo();
         this.template += `
-      <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+      <table width="100%" cellpadding="0" cellspacing="0" role="presentation" bgcolor="${headerBackground}" style="width:100%;background-color:${headerBackground};">
         <tr>
-          <td style="${headerStyles}" align="center">
-            
+          <td class="email-header-cell" style="${escapeHtml(headerStyles)}" align="center">
             ${logoHtml}
-
             ${content ? `
               <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
-                <tr>
-                  <td style="
-                    padding-top: ${this.theme.spacing.md};
-                    ${isCorporate ? 'font-family: serif;' : ''}
-                    ${isMinimal ? 'font-weight: 300;' : ''}
-                  ">
-                    ${content}
-                  </td>
-                </tr>
+                <tr><td style="padding-top:${this.theme.spacing.md};font-size:${this.theme.typography.fontSizes.medium};line-height:1.4;">
+                  ${escapeHtml(content)}
+                </td></tr>
               </table>
             ` : ''}
-
           </td>
         </tr>
       </table>
@@ -88,481 +90,223 @@ class TemplateBuilder {
         return this;
     }
     buildLogo() {
-        var _a;
-        const logo = (_a = this.config.header) === null || _a === void 0 ? void 0 : _a.logo;
+        const logo = this.config.header?.logo;
         if (!logo)
             return '';
         const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
-        const isMonokai = this.theme.id === 'monokai';
-        const isModern = this.theme.id === 'modern';
-        const isCorporate = this.theme.id === 'corporate';
-        const isMinimal = this.theme.id === 'minimal';
+        const styles = this.emailStyles.header;
         if (logo.type === 'text') {
-            let textStyles = `
+            const logoBackground = this.config.header?.backgroundColor || colors.background;
+            const preferredColor = this.config.header?.textColor || colors[styles.logoColor];
+            const logoColor = (0, color_accessibility_1.readableTextColor)(preferredColor, logoBackground, colors.text);
+            const textStyles = `
+        display: inline-block;
+        max-width: 100%;
+        font-family: ${styles.logoFontFamily || this.theme.typography.fontFamily};
         font-size: ${this.theme.typography.fontSizes.xlarge};
         font-weight: ${this.theme.typography.fontWeights.bold};
-        color: ${colors.primary};
+        line-height: 1.2;
+        color: ${logoColor};
+        text-transform: ${styles.logoTextTransform || 'none'};
+        letter-spacing: ${styles.logoLetterSpacing || 'normal'};
       `;
-            // styles para tema Corporate
-            if (isCorporate) {
-                const corporate = this.theme;
-                textStyles += `
-          font-family: 'Playfair Display', serif;
-          letter-spacing: ${corporate.branding.letterSpacing.wider};
-          text-transform: ${corporate.branding.textTransform.uppercase};
-          color: ${corporate.corporateColors.gold};
-        `;
-            }
-            // styles para tema Minimal
-            else if (isMinimal) {
-                textStyles += `
-          font-weight: 500;
-          letter-spacing: -0.5px;
-          color: ${colors.text};
-        `;
-            }
-            // styles existentes
-            else if (isMonokai) {
-                textStyles += `
-          letter-spacing: -0.5px;
-          text-shadow: ${this.theme.effects.glow};
-        `;
-            }
-            else if (isModern) {
-                textStyles += `
-          background: ${this.theme.gradients.primary};
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          background-clip: text;
-        `;
-            }
-            return `<div style="${textStyles}">${logo.text || 'Logo'}</div>`;
+            return `<div style="${escapeHtml(textStyles)}">${escapeHtml(logo.text || 'Logo')}</div>`;
         }
         if (logo.type === 'image') {
-            let imageStyles = `
-        height: ${logo.size === 'small' ? '30px' : logo.size === 'large' ? '100px' : '60px'};
-        width: auto;
-      `;
-            if (isModern) {
-                imageStyles += `
-          border-radius: ${this.theme.borderStyle.radius.small};
-          transition: ${this.theme.animations.hover};
-        `;
-            }
-            else if (isCorporate) {
-                imageStyles += `
-          border-radius: ${this.theme.borderStyle.radius.small};
-        `;
-            }
-            return `<img src="${logo.imageUrl}" alt="${logo.alt || 'Logo'}" style="${imageStyles}" />`;
+            const imageHeight = logo.size === 'small' ? 30 : logo.size === 'large' ? 100 : 60;
+            return `<img src="${safeHref(logo.imageUrl || '')}" alt="${escapeHtml(logo.alt || 'Logo')}" height="${imageHeight}" style="display:block;width:auto;height:${imageHeight}px;max-width:100%;border:0;border-radius:${styles.imageBorderRadius};margin:0 auto;" />`;
         }
         return '';
     }
     buildBody(content) {
         const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
-        const isMonokai = this.theme.id === 'monokai';
-        const isModern = this.theme.id === 'modern';
-        const isCorporate = this.theme.id === 'corporate';
-        const isMinimal = this.theme.id === 'minimal';
-        let bodyStyles = `
-      padding: ${this.theme.spacing.xl}!important;
-      background-color: ${colors.background};
-      color: ${colors.text};
+        const styles = this.emailStyles.body;
+        const bodyBackground = this.config.body?.backgroundColor || colors.background;
+        const bodyTextColor = (0, color_accessibility_1.readableTextColor)(this.config.body?.textColor || colors.text, bodyBackground, colors.text);
+        const accentBorder = borderFor(styles.accentColor, styles.accentWidth, colors);
+        let processedContent = content;
+        if (this.theme.id === 'corporate')
+            processedContent = this.formatCorporateContent(content, bodyBackground, bodyTextColor);
+        else if (this.theme.id === 'minimal')
+            processedContent = this.formatMinimalContent(content, bodyTextColor);
+        else if (this.theme.id === 'monokai' && content.includes('<code>'))
+            processedContent = this.highlightCode(content, bodyBackground, bodyTextColor);
+        const bodyStyles = `
+      padding: ${this.theme.spacing.xl} ${styles.horizontalPadding};
+      background-color: ${bodyBackground};
+      color: ${bodyTextColor};
       font-family: ${this.theme.typography.fontFamily};
       font-size: ${this.theme.typography.fontSizes.medium};
-      line-height: ${isMinimal ? 1.7 : 1.6};
+      line-height: ${styles.lineHeight};
+      border-left: ${accentBorder};
+      border-radius: ${styles.borderRadius};
+      box-shadow: ${styles.boxShadow};
+      word-wrap: break-word;
+      overflow-wrap: break-word;
     `;
-        // styles para tema Corporate
-        if (isCorporate) {
-            const corporate = this.theme;
-            bodyStyles += `
-        border-left: 4px solid ${corporate.corporateColors.gold};
-        margin: ${this.theme.spacing.md} 0;
-        box-shadow: ${corporate.elevation.card};
-      `;
-        }
-        // styles para tema Minimal
-        else if (isMinimal) {
-            bodyStyles += `
-        padding: ${this.theme.spacing.xl} ${this.theme.spacing.lg}!important;
-        max-width: ${this.theme.layout.contentWidth};
-        margin: 0 auto;
-      `;
-        }
-        // styles existentes
-        else if (isModern) {
-            bodyStyles += `
-        border-radius: ${this.theme.borderStyle.radius.medium};
-        margin: ${this.theme.spacing.md};
-      `;
-        }
-        else if (isMonokai) {
-            bodyStyles += `
-        border-left: 4px solid ${colors.primary};
-        margin: ${this.theme.spacing.md} 0;
-      `;
-        }
-        // Processar conteúdo com formatação específica
-        let processedContent = content;
-        if (isCorporate) {
-            processedContent = this.formatCorporateContent(content);
-        }
-        else if (isMinimal) {
-            processedContent = this.formatMinimalContent(content);
-        }
-        else if (isMonokai && content.includes('<code>')) {
-            processedContent = this.highlightCode(content);
-        }
         this.template += `
-    <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #ffffff; padding: 10px;">
-      <tr>
-        <td style="${bodyStyles}">
-          ${processedContent}
-        </td>
-      </tr>
-    </table>
+      <table width="100%" cellpadding="0" cellspacing="0" role="presentation" bgcolor="${bodyBackground}" style="width:100%;background-color:${bodyBackground};">
+        <tr><td class="email-body" style="${escapeHtml(bodyStyles)}">${processedContent}</td></tr>
+      </table>
     `;
         return this;
     }
-    formatCorporateContent(content) {
-        // add els corporativos como citações e destaques
+    formatCorporateContent(content, background, textColor) {
+        const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
+        const quoteColor = (0, color_accessibility_1.contrastRatio)(colors.textMuted, background) >= 4.5 ? colors.textMuted : textColor;
         return content
-            .replace(/<blockquote>(.*?)<\/blockquote>/g, (match, quote) => {
-            const corporate = this.theme;
-            return `<blockquote style="
-          border-left: 4px solid ${corporate.corporateColors.gold};
-          margin: ${this.theme.spacing.md} 0;
-          padding: ${this.theme.spacing.md}!important;
-          font-style: italic;
-          color: ${corporate.light.textMuted};
-        ">${quote}</blockquote>`;
-        })
-            .replace(/<highlight>(.*?)<\/highlight>/g, (match, text) => {
-            const corporate = this.theme;
-            return `<span style="
-          background: linear-gradient(120deg, ${corporate.corporateColors.gold}20 0%, ${corporate.corporateColors.gold}20 40%, transparent 60%);
-          padding: 0 ${this.theme.spacing.xs}!important;
-          font-weight: bold;
-        ">${text}</span>`;
-        });
+            .replace(/<blockquote(?:\s[^>]*)?>([\s\S]*?)<\/blockquote>/gi, (_match, quote) => `<blockquote style="border-left:3px solid ${colors.primary};margin:${this.theme.spacing.md} 0;padding:${this.theme.spacing.md};font-style:italic;color:${quoteColor};">${quote}</blockquote>`)
+            .replace(/<highlight(?:\s[^>]*)?>([\s\S]*?)<\/highlight>/gi, (_match, text) => `<span style="background-color:${colors.border};padding:0 ${this.theme.spacing.xs};font-weight:bold;color:${(0, color_accessibility_1.readableTextColor)(colors.text, colors.border, textColor)};">${text}</span>`);
     }
-    formatMinimalContent(content) {
-        const minimal = this.theme;
-        // fmt minimalista - remove styles desnecessários
+    formatMinimalContent(content, textColor) {
+        const headingSizes = { '1': '24px', '2': '20px', '3': '18px', '4': '16px', '5': '14px', '6': '13px' };
         return content
-            .replace(/<h[1-6]>/g, (match) => {
-            var _a;
-            const level = ((_a = match.match(/h([1-6])/)) === null || _a === void 0 ? void 0 : _a[1]) || '2';
-            const size = {
-                '1': '24px',
-                '2': '20px',
-                '3': '18px',
-                '4': '16px',
-                '5': '14px',
-                '6': '13px'
-            }[level];
-            return `<h${level} style="
-          font-size: ${size};
-          font-weight: 500;
-          margin: ${minimal.spacing.lg} 0 ${minimal.spacing.md} 0;
-          line-height: 1.3;
-        ">`;
-        })
-            .replace(/<p>/g, `<p style="margin: 0 0 ${minimal.layout.paragraphSpacing} 0;">`);
+            .replace(/<h([1-6])(?:\s[^>]*)?>/gi, (_match, level) => `<h${level} style="font-size:${headingSizes[level]};font-weight:${this.theme.typography.fontWeights.medium};margin:${this.theme.spacing.lg} 0 ${this.theme.spacing.md};line-height:1.3;color:${textColor};">`)
+            .replace(/<p(?:\s[^>]*)?>/gi, `<p style="margin:0 0 ${this.theme.spacing.md};">`);
     }
-    highlightCode(content) {
+    highlightCode(content, background, textColor) {
+        const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
         const monokai = this.theme;
-        return content.replace(/<code>(.*?)<\/code>/g, (match, code) => {
-            return `<pre style="
-        background: ${monokai.dark.background};
-        color: ${monokai.dark.text};
-        padding: ${this.theme.spacing.md}!important;
-        border-radius: ${monokai.borderStyle.radius};
-        overflow-x: auto;
-        font-family: ${this.theme.typography.fontFamily};
-        font-size: 13px;
-        line-height: 1.5;
-      "><code>${this.applySyntaxHighlighting(code, monokai)}</code></pre>`;
-        });
+        const radius = this.emailStyles.body.borderRadius;
+        const codeStyles = `margin:${this.theme.spacing.md} 0;background-color:${background};color:${textColor};padding:${this.theme.spacing.md};border:1px solid ${colors.border};border-radius:${radius};font-family:${this.theme.typography.fontFamily};font-size:13px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;`;
+        return content.replace(/<code(?:\s[^>]*)?>([\s\S]*?)<\/code>/gi, (_match, code) => `<pre style="${escapeHtml(codeStyles)}">${this.applySyntaxHighlighting(code, monokai, background, textColor)}</pre>`);
     }
-    applySyntaxHighlighting(code, monokai) {
-        // smp highlighting para demonstração
-        const keywords = ['function', 'const', 'let', 'var', 'if', 'else', 'return', 'import', 'from'];
-        let highlighted = code;
-        keywords.forEach(keyword => {
-            const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
-            highlighted = highlighted.replace(regex, `<span style="color: ${monokai.codeHighlight.keyword}">$1</span>`);
-        });
-        // strs
-        highlighted = highlighted.replace(/'([^']*)'/g, `<span style="color: ${monokai.codeHighlight.string}">'$1'</span>`);
-        highlighted = highlighted.replace(/"([^"]*)"/g, `<span style="color: ${monokai.codeHighlight.string}">"$1"</span>`);
-        // nums
-        highlighted = highlighted.replace(/\b(\d+)\b/g, `<span style="color: ${monokai.codeHighlight.number}">$1</span>`);
-        // funcs
-        highlighted = highlighted.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*\(/g, `<span style="color: ${monokai.codeHighlight.function}">$1</span>(`);
-        return highlighted;
+    applySyntaxHighlighting(code, monokai, background, textColor) {
+        const keywords = new Set(['function', 'const', 'let', 'var', 'if', 'else', 'return', 'import', 'from']);
+        const tokenPattern = /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\b(?:function|const|let|var|if|else|return|import|from)\b|\b\d+\b|\b[A-Za-z_$][\w$]*(?=\s*\()/g;
+        let result = '';
+        let lastIndex = 0;
+        for (const match of code.matchAll(tokenPattern)) {
+            const token = match[0];
+            const index = match.index ?? 0;
+            result += escapeHtml(code.slice(lastIndex, index));
+            const preferredColor = token.startsWith('"') || token.startsWith("'") ? monokai.codeHighlight.string
+                : /^\d+$/.test(token) ? monokai.codeHighlight.number
+                    : keywords.has(token) ? monokai.codeHighlight.keyword : monokai.codeHighlight.function;
+            const color = (0, color_accessibility_1.contrastRatio)(preferredColor, background) >= 4.5 ? preferredColor : textColor;
+            result += `<span style="color:${color};">${escapeHtml(token)}</span>`;
+            lastIndex = index + token.length;
+        }
+        return result + escapeHtml(code.slice(lastIndex));
     }
     buildButton(text, url, variant = 'primary') {
         const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
-        const isModern = this.theme.id === 'modern';
-        const isMonokai = this.theme.id === 'monokai';
-        const isCorporate = this.theme.id === 'corporate';
-        const isMinimal = this.theme.id === 'minimal';
-        let buttonColor = variant === 'primary' ? colors.primary : colors.secondary;
-        let buttonStyles = `
+        if (!['primary', 'secondary', 'success', 'danger'].includes(variant))
+            throw new Error('Invalid CTA variant');
+        const safeUrl = safeHref(url, true);
+        const buttonColor = variant === 'primary' ? colors.primary : variant === 'secondary' ? colors.secondary : variant === 'success' ? colors.success : colors.error;
+        const button = this.emailStyles.button;
+        const isOutline = button.appearance === 'outline';
+        const alignment = this.config.body?.alignment || 'left';
+        const buttonTextColor = isOutline
+            ? (0, color_accessibility_1.contrastRatio)(buttonColor, colors.background) >= 4.5 ? buttonColor : colors.text
+            : (0, color_accessibility_1.accessibleTextColor)(buttonColor);
+        const buttonStyles = `
       display: inline-block;
-      padding: 12px 24px!important;
-      background-color: ${buttonColor};
-      color: white;
-      text-decoration: none;
-      font-weight: ${this.theme.typography.fontWeights.medium};
-      margin: ${this.theme.spacing.md} 0;
+      box-sizing: border-box;
+      max-width: 100%;
+      padding: 13px 24px;
+      background-color: ${isOutline ? colors.background : buttonColor};
+      border: ${button.borderWidth} solid ${isOutline ? buttonColor : 'transparent'};
+      border-radius: ${button.borderRadius};
+      box-shadow: ${button.boxShadow};
+      color: ${buttonTextColor};
+      font-family: ${this.theme.typography.fontFamily};
+      font-size: ${this.theme.typography.fontSizes.medium};
+      font-weight: ${this.theme.typography.fontWeights.bold};
+      line-height: 1.3;
+      letter-spacing: ${button.letterSpacing || 'normal'};
+      text-transform: ${button.textTransform || 'none'};
+      text-decoration: none !important;
     `;
-        // styles para tema Corporate
-        if (isCorporate) {
-            const corporate = this.theme;
-            buttonStyles += `
-        border-radius: ${corporate.borderStyle.radius.small};
-        text-transform: ${corporate.branding.textTransform.uppercase};
-        letter-spacing: ${corporate.branding.letterSpacing.wide};
-        transition: all 0.3s ease;
-        &:hover {
-          transform: translateY(-2px);
-          box-shadow: ${corporate.elevation.hover};
-        }
-      `;
-        }
-        // styles para tema Minimal
-        else if (isMinimal) {
-            buttonStyles += `
-        border-radius: 0;
-        border: 1px solid ${buttonColor};
-        background-color: transparent;
-        color: ${buttonColor};
-        padding: 10px 20px!important;
-        transition: all 0.2s ease;
-        &:hover {
-          background-color: ${buttonColor};
-          color: white;
-        }
-      `;
-        }
-        // styles existentes
-        else if (isModern) {
-            buttonStyles += `
-        background: ${this.theme.gradients.primary};
-        border-radius: ${this.theme.borderStyle.radius.medium};
-        transition: ${this.theme.animations.hover};
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      `;
-        }
-        else if (isMonokai) {
-            buttonStyles += `
-        border: 2px solid ${buttonColor};
-        border-radius: ${this.theme.borderStyle.radius};
-        transition: ${this.theme.effects.transition};
-        &:hover {
-          transform: translateY(-2px);
-          box-shadow: ${this.theme.effects.glow};
-        }
-      `;
-        }
-        else {
-            buttonStyles += `
-        border-radius: 4px;
-      `;
-        }
         this.template += `
-      <table width="100%" style="padding: 10px;" cellpadding="0" cellspacing="0" role="presentation">
-        <tr>
-          <td align="center">
-            
-            <table cellpadding="0" cellspacing="0" role="presentation">
-              <tr>
-                <td style="${buttonStyles}">
-                  <a href="${url}" style="
-                    text-decoration: none;
-                    color: inherit;
-                    display: inline-block;
-                    font-weight: ${this.theme.typography.fontWeights.bold};
-                    padding: 12px 24px;
-                  ">
-                    ${text}
-                  </a>
-                </td>
-              </tr>
-            </table>
-
-          </td>
-        </tr>
+      <table width="100%" class="button-wrap" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tr><td align="${alignment}" style="padding:${this.theme.spacing.sm} 8px;">
+          <table class="button" align="${alignment}" cellpadding="0" cellspacing="0" role="presentation">
+            <tr><td align="${alignment}"><a class="button-link" href="${safeUrl}" style="${escapeHtml(buttonStyles)}">${escapeHtml(text)}</a></td></tr>
+          </table>
+        </td></tr>
       </table>
     `;
         return this;
     }
     buildFooter() {
-        var _a, _b, _c;
-        if (!((_a = this.config.footer) === null || _a === void 0 ? void 0 : _a.show))
+        if (!this.config.footer?.show)
             return this;
         const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
-        const isModern = this.theme.id === 'modern';
-        const isMonokai = this.theme.id === 'monokai';
-        const isCorporate = this.theme.id === 'corporate';
-        const isMinimal = this.theme.id === 'minimal';
-        let footerStyles = `
-      background-color: ${colors.background};
-      border-top: 1px solid ${colors.border};
-      padding: ${this.theme.spacing.lg} ${this.theme.spacing.xl}!important;
+        const styles = this.emailStyles.footer;
+        const footerBorder = borderFor(styles.accentColor, styles.accentWidth, colors);
+        const footerBackground = this.config.footer?.backgroundColor || colors.background;
+        const defaultFooterTextColor = (0, color_accessibility_1.contrastRatio)(colors.textMuted, footerBackground) >= 4.5 ? colors.textMuted : colors.text;
+        const footerTextColor = (0, color_accessibility_1.readableTextColor)(this.config.footer?.textColor || defaultFooterTextColor, footerBackground, colors.text);
+        const copyrightStyles = escapeHtml(`padding-top:${this.theme.spacing.md};font-family:${this.theme.typography.fontFamily};font-size:${this.theme.typography.fontSizes.small};line-height:1.5;color:${footerTextColor};text-align:center;`);
+        const unsubscribeCellStyles = escapeHtml(`padding-top:${this.theme.spacing.sm};text-align:center;font-family:${this.theme.typography.fontFamily};font-size:${this.theme.typography.fontSizes.small};line-height:1.5;`);
+        const footerStyles = `
+      background-color: ${footerBackground};
+      border-top: ${footerBorder};
+      padding: ${this.theme.spacing.lg} ${this.theme.spacing.xl};
       text-align: center;
+      font-family: ${this.theme.typography.fontFamily};
       font-size: ${this.theme.typography.fontSizes.small};
-      color: ${colors.textMuted};
+      line-height: 1.5;
+      color: ${footerTextColor};
     `;
-        // styles para tema Corporate
-        if (isCorporate) {
-            const corporate = this.theme;
-            footerStyles += `
-        border-top: 2px solid ${corporate.corporateColors.gold};
-        font-size: 11px;
-        letter-spacing: ${corporate.branding.letterSpacing.normal};
-      `;
-        }
-        // styles para tema Minimal
-        else if (isMinimal) {
-            footerStyles += `
-        border-top: 1px solid ${colors.border};
-        padding: ${this.theme.spacing.lg}!important;
-        font-size: 12px;
-      `;
-        }
-        // styles existentes
-        else if (isModern) {
-            footerStyles += `
-        backdrop-filter: blur(${this.theme.glassmorphism.blur});
-        border-radius: ${this.theme.borderStyle.radius.small};
-      `;
-        }
-        else if (isMonokai) {
-            footerStyles += `
-        border-top-width: 2px;
-        border-top-color: ${colors.primary};
-      `;
-        }
         const footerLinks = this.buildFooterLinks();
         const socialLinks = this.buildSocialLinks();
         this.template += `
-      <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
-        <tr>
-          <td style="${footerStyles}" align="center">
-
-            ${footerLinks}
-
-            ${socialLinks}
-
-            ${((_b = this.config.footer) === null || _b === void 0 ? void 0 : _b.copyrightText) ? `
-              <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
-                <tr>
-                  <td style="
-                    padding-top: ${this.theme.spacing.md};
-                    font-family: Arial, sans-serif;
-                    font-size: 12px;
-                    color: ${colors.textMuted};
-                    text-align: center;
-                  ">
-                    ${this.config.footer.copyrightText}
-                  </td>
-                </tr>
-              </table>
-            ` : ''}
-
-            ${((_c = this.config.footer) === null || _c === void 0 ? void 0 : _c.unsubscribeText) ? `
-              <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
-                <tr>
-                  <td style="
-                    padding-top: ${this.theme.spacing.sm};
-                    text-align: center;
-                    font-family: Arial, sans-serif;
-                    font-size: 12px;
-                  ">
-                    <a href="#" style="
-                      color: ${colors.textMuted};
-                      text-decoration: underline;
-                    ">
-                      ${this.config.footer.unsubscribeText}
-                    </a>
-                  </td>
-                </tr>
-              </table>
-            ` : ''}
-
-          </td>
-        </tr>
+      <table width="100%" cellpadding="0" cellspacing="0" role="presentation" bgcolor="${footerBackground}" style="width:100%;background-color:${footerBackground};">
+        <tr><td class="email-footer-cell" bgcolor="${footerBackground}" style="${escapeHtml(footerStyles)}" align="center">
+          ${footerLinks}
+          ${socialLinks}
+          ${this.config.footer?.copyrightText ? `
+            <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+              <tr><td style="${copyrightStyles}">
+                ${escapeHtml(this.config.footer.copyrightText)}
+              </td></tr>
+            </table>
+          ` : ''}
+          ${this.config.footer?.unsubscribeText ? `
+            <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
+              <tr><td style="${unsubscribeCellStyles}">
+                ${this.config.footer.unsubscribeUrl
+            ? `<a href="${safeHref(this.config.footer.unsubscribeUrl, true)}" style="color:${footerTextColor};${this.linkDecorationStyle()}">${escapeHtml(this.config.footer.unsubscribeText)}</a>`
+            : escapeHtml(this.config.footer.unsubscribeText)}
+              </td></tr>
+            </table>
+          ` : ''}
+        </td></tr>
       </table>
     `;
         return this;
     }
     buildFooterLinks() {
-        var _a, _b;
-        if (!((_b = (_a = this.config.footer) === null || _a === void 0 ? void 0 : _a.links) === null || _b === void 0 ? void 0 : _b.length))
+        if (!this.config.footer?.links?.length)
             return '';
         const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
-        const isModern = this.theme.id === 'modern';
-        const isCorporate = this.theme.id === 'corporate';
-        const isMinimal = this.theme.id === 'minimal';
-        let linkStyles = `
-      color: ${colors.textMuted};
-      text-decoration: none;
-      margin: 0 ${this.theme.spacing.sm};
-    `;
-        if (isModern) {
-            linkStyles += `
-        transition: ${this.theme.animations.hover};
-        &:hover {
-          color: ${colors.primary};
-          transform: translateY(-1px);
-        }
-      `;
-        }
-        else if (isCorporate) {
-            linkStyles += `
-        text-transform: uppercase;
-        font-size: 11px;
-        letter-spacing: 0.5px;
-        &:hover {
-          color: ${this.theme.corporateColors.gold};
-        }
-      `;
-        }
-        else if (isMinimal) {
-            linkStyles += `
-        &:hover {
-          text-decoration: underline;
-        }
-      `;
-        }
+        const footerBackground = this.config.footer.backgroundColor || colors.background;
+        const preferredLinkColor = (0, color_accessibility_1.contrastRatio)(colors.textMuted, footerBackground) >= 4.5 ? colors.textMuted : colors.text;
+        const linkColor = (0, color_accessibility_1.readableTextColor)(this.config.footer.textColor || preferredLinkColor, footerBackground, colors.text);
+        const linkStyles = `color:${linkColor};${this.linkDecorationStyle()}font-family:${this.theme.typography.fontFamily};font-size:${this.theme.typography.fontSizes.small};line-height:1.5;`;
         return `
-      <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
-        <tr>
-          <td style="padding-bottom: ${this.theme.spacing.lg};" align="center">
-            
-            <table cellpadding="0" cellspacing="0" role="presentation">
-              <tr>
-                ${this.config.footer.links.map(link => `
-                  <td style="padding: 0 8px;">
-                    <a href="${link.url}" style="${linkStyles}">
-                      ${link.text}
-                    </a>
-                  </td>
-                `).join('')}
-              </tr>
-            </table>
-
-          </td>
-        </tr>
+      <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+        <tr><td style="padding-bottom:${this.theme.spacing.md};" align="center">
+          <table class="footer-links" cellpadding="0" cellspacing="0" role="presentation">
+            <tr>${this.config.footer.links.map(link => `
+              <td class="footer-link-cell" style="padding:0 8px;">
+                <a href="${safeHref(link.url, true)}" style="${escapeHtml(linkStyles)}">${escapeHtml(link.text)}</a>
+              </td>
+            `).join('')}</tr>
+          </table>
+        </td></tr>
       </table>
     `;
     }
+    linkDecorationStyle() {
+        const decoration = this.config.linkDecoration === 'underline' ? 'underline' : 'none';
+        return `text-decoration:${decoration} !important;`;
+    }
     buildSocialLinks() {
-        var _a, _b;
-        if (!((_b = (_a = this.config.footer) === null || _a === void 0 ? void 0 : _a.socialLinks) === null || _b === void 0 ? void 0 : _b.length))
+        if (!this.config.footer?.socialLinks?.length)
             return '';
         return `
       <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
@@ -573,12 +317,12 @@ class TemplateBuilder {
               <tr>
                 ${this.config.footer.socialLinks.map(link => `
                   <td style="padding: 0 6px;">
-                    <a href="${link.url}" target="_blank">
+                    <a href="${safeHref(link.url)}" target="_blank" rel="noopener noreferrer" style="${this.linkDecorationStyle()}">
                       <img 
                         src="${this.getSocialIcon(link.platform)}"
                         width="20"
                         height="20"
-                        alt="${link.platform}"
+                        alt="${escapeHtml(link.platform)}"
                         style="display: block; border: 0;"
                       />
                     </a>
@@ -595,6 +339,7 @@ class TemplateBuilder {
     getSocialIcon(platform) {
         const icons = {
             facebook: 'https://cdn.simpleicons.org/facebook/1877F2',
+            linkedin: 'https://cdn.simpleicons.org/linkedin/0A66C2',
             twitter: 'https://cdn.simpleicons.org/x/1DA1F2',
             github: 'https://cdn.simpleicons.org/github/000000',
             instagram: 'https://cdn.simpleicons.org/instagram/E4405F',
@@ -613,61 +358,65 @@ class TemplateBuilder {
         return icons[platform] || 'https://cdn.simpleicons.org/virginmedia/5865F2';
     }
     build() {
-        const isModern = this.theme.id === 'modern';
-        const isMonokai = this.theme.id === 'monokai';
-        const isCorporate = this.theme.id === 'corporate';
-        const isMinimal = this.theme.id === 'minimal';
-        let wrapperStyles = 'margin: 0; padding: 0;';
-        let containerStyles = `max-width: ${isMinimal ? '640px' : '600px'}; margin: 0 auto;`;
-        if (isModern) {
-            containerStyles += `
-        border-radius: ${this.theme.borderStyle.radius.large};
-        overflow: hidden;
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
-      `;
-        }
-        else if (isMonokai) {
-            containerStyles += `
-        border: 1px solid ${this.theme.light.border};
-        border-radius: ${this.theme.borderStyle.radius};
-      `;
-        }
-        else if (isCorporate) {
-            containerStyles += `
-        border: 1px solid ${this.theme.light.border};
-        box-shadow: ${this.theme.elevation.card};
-      `;
-        }
-        else if (isMinimal) {
-            containerStyles += `
-        border: none;
-      `;
-        }
-        const backgroundColor = this.variant === 'light' ? '#f5f5f5' : '#1a1a1a';
-        const finalBackgroundColor = isMinimal ? (this.variant === 'light' ? '#ffffff' : '#000000') : backgroundColor;
+        const colors = this.variant === 'light' ? this.theme.light : this.theme.dark;
+        const styles = this.emailStyles;
+        const direction = this.config.direction || 'ltr';
+        if (!['ltr', 'rtl', 'auto'].includes(direction))
+            throw new Error('Invalid template text direction');
+        const maxWidth = Number.isFinite(styles.maxWidthPx) ? Math.min(800, Math.max(320, Math.round(styles.maxWidthPx))) : 600;
+        const containerBorder = borderFor(styles.container.borderColor, styles.container.borderWidth, colors);
+        const pageBackground = this.variant === 'light' ? '#f3f4f6' : '#090d15';
+        const containerStyles = `
+      width: 100%;
+      max-width: ${maxWidth}px;
+      margin: 0 auto;
+      background-color: ${colors.background};
+      border: ${containerBorder};
+      border-radius: ${styles.container.borderRadius};
+      box-shadow: ${styles.container.boxShadow};
+      border-collapse: separate;
+    `;
         return `
       <!DOCTYPE html>
-      <html>
+      <html lang="${escapeHtml(this.config.language || 'en')}" dir="${escapeHtml(direction)}">
         <head>
           <meta charset="utf-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>Email Template</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <meta name="color-scheme" content="${this.variant}">
+          <meta name="supported-color-schemes" content="${this.variant}">
+          <meta name="x-apple-disable-message-reformatting">
+          <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
+          <title>Email template</title>
           <style>
+            :root { color-scheme:${this.variant}; supported-color-schemes:${this.variant}; }
+            body { margin:0 !important; padding:0 !important; width:100% !important; background-color:${pageBackground}; }
+            table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
+            img { border:0; max-width:100%; height:auto; }
+            .container { width:100%; max-width:${maxWidth}px; }
+            .button { max-width:100%; }
             @media only screen and (max-width: 600px) {
-              .container {
-                width: 100% !important;
-              }
-              .button {
-                display: block !important;
-                width: 100% !important;
-              }
+              .outer-cell { padding:10px 8px !important; }
+              .container { width:100% !important; max-width:100% !important; }
+              .email-header-cell { padding-left:16px !important; padding-right:16px !important; }
+              .email-body { padding-left:16px !important; padding-right:16px !important; }
+              .email-footer-cell { padding-left:16px !important; padding-right:16px !important; }
+              table.button { display:block !important; width:100% !important; }
+              .button-link { box-sizing:border-box !important; display:block !important; width:100% !important; text-align:center !important; }
+              .footer-links { width:100% !important; }
+              .footer-link-cell { box-sizing:border-box !important; display:block !important; width:100% !important; padding:5px 0 !important; text-align:center !important; }
             }
           </style>
         </head>
-        <body style="${wrapperStyles}">
-          <div class="container" style="${containerStyles} background-color: ${finalBackgroundColor};">
-            ${this.template}
-          </div>
+        <body style="margin:0;padding:0;background-color:${pageBackground};">
+          <table class="email-page" width="100%" cellpadding="0" cellspacing="0" role="presentation" bgcolor="${pageBackground}" style="width:100%;background-color:${pageBackground};">
+            <tr><td class="outer-cell" align="center" style="padding:20px 12px;">
+              <table class="container" width="${maxWidth}" cellpadding="0" cellspacing="0" role="presentation" bgcolor="${colors.background}" style="${escapeHtml(containerStyles)}">
+                <tr><td class="container-content" style="padding:0;">
+                  ${this.template}
+                </td></tr>
+              </table>
+            </td></tr>
+          </table>
         </body>
       </html>
     `;