@gyramais/gyra-design 0.2.35 → 0.2.38

package/dist/emails/balance-sheet-finalized/email-layout.js

@@ -1,180 +0,0 @@
-"use strict";
-/**
- * Layout base de email no padrao do design system Gyra+ Toolbox
- * (claude design — gyra-toolbox-design-system). Tokens: azul #1256FF
- * (acao/primary), teal #1FB58A (accent), roxo #7C4EFF (IA/parecer),
- * neutrals Apple-gray, fonte Inter.
- *
- * Reutilizavel: cada email passa titulo, paragrafos, destaques (chips),
- * um bloco opcional "Parecer de IA" (faixa roxa) e botoes — o HTML
- * completo (logo, card, tipografia, footer) e' montado aqui.
- *
- * Email-safe: tabelas + inline-style (clients ignoram <style> externo,
- * flexbox e Material Symbols). Gradientes tem fallback solido.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildEmail = buildEmail;
-const C = {
-    blue: '#1256FF',
-    teal: '#1FB58A',
-    aiPurple: '#7C4EFF',
-    aiPurpleText: '#6635E0',
-    bg: '#F5F5F7',
-    card: '#FFFFFF',
-    fg1: '#1D1D1F',
-    fg2: '#636366',
-    fg3: '#8E8E93',
-    border: '#D2D2D7',
-    borderSubtle: '#E8E8ED',
-    aiCardBg: '#F6F4FF', // flatten do gradiente roxo (fallback Outlook)
-    aiBorder: 'rgba(124,78,255,0.22)',
-};
-const VERDICT = {
-    ok: { bg: '#E8F9ED', color: '#1A7D37' },
-    warn: { bg: '#FFF4E0', color: '#946200' },
-    danger: { bg: '#FFEDEC', color: '#C93430' },
-    info: { bg: '#EBF4FF', color: '#0055D4' },
-};
-const FONT = "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif";
-const LOGO_URL = 'https://gyra-file-prod.s3.us-west-2.amazonaws.com/assets/gyra-logo-color.png';
-const esc = (s) => String(s ?? '')
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-/**
- * So' permite http(s). Bloqueia schemes perigosos (javascript:, data:)
- * que poderiam virar href executavel. URL invalida vira '#'.
- */
-function safeUrl(url) {
-    try {
-        const u = new URL(String(url));
-        return u.protocol === 'http:' || u.protocol === 'https:' ? u.href : '#';
-    }
-    catch {
-        return '#';
-    }
-}
-function renderButton(btn) {
-    const isPrimary = (btn.variant ?? 'primary') === 'primary';
-    const bg = isPrimary ? C.blue : C.card;
-    const color = isPrimary ? '#FFFFFF' : C.blue;
-    const border = isPrimary ? C.blue : C.border;
-    return `
-    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:8px 8px 0 0;display:inline-block;">
-      <tr>
-        <td style="border-radius:10px;background:${bg};border:1px solid ${border};">
-          <a href="${esc(safeUrl(btn.url))}" target="_blank"
-             style="display:inline-block;padding:12px 22px;font-family:${FONT};font-size:14px;font-weight:600;color:${color};text-decoration:none;border-radius:10px;">
-            ${esc(btn.label)}
-          </a>
-        </td>
-      </tr>
-    </table>`;
-}
-function renderHighlight(h, widthPct) {
-    return `
-    <td width="${widthPct}%" style="padding:6px;" valign="top">
-      <table role="presentation" width="100%" cellpadding="0" cellspacing="0"
-             style="background:#FAFAFA;border:1px solid ${C.borderSubtle};border-radius:12px;">
-        <tr><td style="padding:14px 16px;font-family:${FONT};">
-          <div style="font-size:12px;color:${C.fg2};margin-bottom:4px;">${esc(h.label)}</div>
-          <div style="font-size:22px;font-weight:700;color:${h.color || C.fg1};font-family:'Lexend',${FONT};">${esc(h.value)}</div>
-        </td></tr>
-      </table>
-    </td>`;
-}
-function renderAiParecer(p) {
-    const v = p.verdict
-        ? (() => {
-            const t = VERDICT[p.verdictTone || 'info'];
-            // table/td (Outlook ignora padding/border-radius em <span>).
-            return `<table role="presentation" cellpadding="0" cellspacing="0" style="display:inline-block;"><tr>
-          <td style="background:${t.bg};border-radius:999px;padding:4px 10px;font-family:${FONT};font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:${t.color};white-space:nowrap;">${esc(p.verdict)}</td></tr></table>`;
-        })()
-        : '';
-    return `
-    <table role="presentation" width="100%" cellpadding="0" cellspacing="0"
-           style="margin:18px 0 4px;background:${C.aiCardBg};border:1px solid ${C.aiBorder};border-radius:12px;">
-      <tr><td style="padding:16px 18px;font-family:${FONT};">
-        <table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>
-          <td valign="middle" width="28">
-            <div style="width:22px;height:22px;border-radius:50%;background:${C.aiPurple};color:#fff;text-align:center;line-height:22px;font-size:13px;">&#10022;</div>
-          </td>
-          <td valign="middle" style="padding-left:8px;">
-            <span style="font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:${C.aiPurpleText};">Parecer GYRA+IA</span>
-          </td>
-          <td valign="middle" align="right">${v}</td>
-        </tr></table>
-        <p style="margin:10px 0 0;font-size:14px;line-height:1.55;color:${C.fg2};">${esc(p.text)}</p>
-        ${p.footer
-        ? `<div style="margin-top:10px;padding-top:10px;border-top:1px dashed ${C.aiBorder};font-size:11px;color:${C.fg3};">${esc(p.footer)}</div>`
-        : ''}
-      </td></tr>
-    </table>`;
-}
-function buildEmail(input) {
-    const { preheader, greeting, title, paragraphs = [], highlights = [], aiParecer, buttons = [], footerNote, } = input;
-    const highlightWidth = highlights.length
-        ? Math.floor(100 / highlights.length)
-        : 100;
-    const highlightsRow = highlights.length
-        ? `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0 4px;"><tr>${highlights
-            .map((h) => renderHighlight(h, highlightWidth))
-            .join('')}</tr></table>`
-        : '';
-    const paragraphsHtml = paragraphs
-        .map((p) => `<p style="margin:0 0 14px;font-family:${FONT};font-size:15px;line-height:1.6;color:${C.fg2};">${esc(p)}</p>`)
-        .join('');
-    const buttonsHtml = buttons.length
-        ? `<div style="margin-top:18px;">${buttons.map(renderButton).join('')}</div>`
-        : '';
-    return `<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <title>${esc(title)}</title>
-</head>
-<body style="margin:0;padding:0;background:${C.bg};">
-  ${preheader
-        ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${esc(preheader)}</div>`
-        : ''}
-  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${C.bg};padding:24px 0;">
-    <tr>
-      <td align="center">
-        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px;max-width:92%;">
-          <tr>
-            <td style="padding:8px 4px 20px;">
-              <img src="${LOGO_URL}" alt="GYRA+" height="30" style="height:30px;display:block;" />
-            </td>
-          </tr>
-          <tr>
-            <td style="background:${C.card};border:1px solid ${C.borderSubtle};border-radius:16px;padding:32px;">
-              ${greeting
-        ? `<p style="margin:0 0 6px;font-family:${FONT};font-size:14px;color:${C.fg2};">${esc(greeting)}</p>`
-        : ''}
-              <h1 style="margin:0 0 18px;font-family:'Lexend',${FONT};font-size:23px;line-height:1.3;color:${C.fg1};">${esc(title)}</h1>
-              ${paragraphsHtml}
-              ${highlightsRow}
-              ${aiParecer ? renderAiParecer(aiParecer) : ''}
-              ${buttonsHtml}
-            </td>
-          </tr>
-          <tr>
-            <td style="padding:20px 8px;font-family:${FONT};font-size:12px;line-height:1.5;color:${C.fg3};">
-              ${footerNote
-        ? `<p style="margin:0 0 8px;">${esc(footerNote)}</p>`
-        : ''}
-              <p style="margin:0;">GYRA+ • Esta é uma mensagem automática, não responda este email.</p>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
-</body>
-</html>`;
-}