@emailens/engine 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 // src/clients.ts
 var EMAIL_CLIENTS = [
@@ -730,6 +745,189 @@ var CSS_SUPPORT = {
     "superhuman": "unsupported"
     // Superhuman strips forms for security
   },
+  // --- Text Wrapping ---
+  "word-break": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    // Word engine ignores word-break entirely
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "partial",
+    // break-all partially works; break-word unreliable
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  "overflow-wrap": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    // Word engine ignores overflow-wrap
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "partial",
+    // inconsistent support
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  "white-space": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "partial",
+    // only normal and nowrap
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "supported",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  "text-overflow": {
+    "gmail-web": "unsupported",
+    // Gmail strips overflow, so text-overflow is useless
+    "gmail-android": "unsupported",
+    "gmail-ios": "unsupported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "partial",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  // --- Table Layout ---
+  "vertical-align": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "partial",
+    // only on <td> elements via valign attribute
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "supported",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  "border-spacing": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    // use cellspacing attribute instead
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "supported",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  // --- Sizing ---
+  "min-width": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    // Word engine ignores min-width
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "supported",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  "min-height": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    // Word engine ignores min-height
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "supported",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  "max-height": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "supported",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  // --- Shadows ---
+  "text-shadow": {
+    "gmail-web": "unsupported",
+    "gmail-android": "unsupported",
+    "gmail-ios": "unsupported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "unsupported",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  // --- Background Sub-properties ---
+  "background-size": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "partial",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
+  "background-position": {
+    "gmail-web": "supported",
+    "gmail-android": "supported",
+    "gmail-ios": "supported",
+    "outlook-web": "supported",
+    "outlook-windows": "unsupported",
+    "apple-mail-macos": "supported",
+    "apple-mail-ios": "supported",
+    "yahoo-mail": "partial",
+    "samsung-mail": "supported",
+    "thunderbird": "supported",
+    "hey-mail": "supported",
+    "superhuman": "supported"
+  },
   // --- Misc ---
   "opacity": {
     "gmail-web": "unsupported",
@@ -822,6 +1020,8 @@ var OUTLOOK_WORD_UNSUPPORTED = /* @__PURE__ */ new Set([
   "text-shadow",
   "max-width",
   "max-height",
+  "min-width",
+  "min-height",
   "float",
   "position",
   "display",
@@ -834,7 +1034,30 @@ var OUTLOOK_WORD_UNSUPPORTED = /* @__PURE__ */ new Set([
   "background-position",
   "box-sizing",
   "object-fit",
-  "gap"
+  "gap",
+  "word-break",
+  "overflow-wrap",
+  "text-overflow",
+  "border-spacing"
+]);
+var STRUCTURAL_FIX_PROPERTIES = /* @__PURE__ */ new Set([
+  "display:flex",
+  "display:grid",
+  "word-break",
+  "overflow-wrap",
+  "text-overflow",
+  "position",
+  "float",
+  "gap",
+  "max-width",
+  "border-radius",
+  "background-image",
+  "background-size",
+  "background-position",
+  "<svg>",
+  "<video>",
+  "<form>",
+  "object-fit"
 ]);
 
 // src/fix-snippets.ts
@@ -1340,6 +1563,146 @@ h1 {
 <div style="font-size: 0; max-height: 0; overflow: hidden;
             mso-hide: all;" aria-hidden="true">
   Preheader text
+</div>`
+  },
+  // ── word-break → table cell wrapping ─────────────────────────────────────
+  "word-break": {
+    language: "html",
+    description: "Wrap long text in a table cell to force line breaks without word-break",
+    before: `<span style="word-break: break-all;">
+  https://example.com/very/long/url?token=abc123def456
+</span>`,
+    after: `<!-- Table cells force text wrapping in all clients including Outlook -->
+<table role="presentation" width="100%" cellpadding="0"
+  cellspacing="0" border="0">
+  <tr>
+    <td style="word-break: break-all; overflow-wrap: break-word;
+               word-wrap: break-word;">
+      https://example.com/very/long/url?token=abc123def456
+    </td>
+  </tr>
+</table>`
+  },
+  "word-break::jsx": {
+    language: "jsx",
+    description: "Wrap long text in a table cell for Outlook-safe word breaking",
+    before: `<span style={{ wordBreak: "break-all" }}>{url}</span>`,
+    after: `{/* Table cells force text wrapping in Outlook and Yahoo */}
+<table width="100%" cellPadding={0} cellSpacing={0}
+  role="presentation" style={{ borderCollapse: "collapse" }}>
+  <tr>
+    <td style={{
+      wordBreak: "break-all" as const,
+      overflowWrap: "break-word" as const,
+      wordWrap: "break-word" as const,
+    }}>
+      {url}
+    </td>
+  </tr>
+</table>`
+  },
+  "word-break::mjml": {
+    language: "mjml",
+    description: "MJML renders text in table cells by default \u2014 word-break works via mj-text",
+    before: `<mj-text>
+  <span style="word-break: break-all;">Long URL here</span>
+</mj-text>`,
+    after: `<!-- mj-text already renders inside a <td>, so add word-break
+     to the mj-text css-class or inline style -->
+<mj-text css-class="break-words"
+  padding="0">
+  Long URL here
+</mj-text>
+<mj-style>
+  .break-words td { word-break: break-all; word-wrap: break-word; }
+</mj-style>`
+  },
+  // ── overflow-wrap → table cell wrapping ────────────────────────────────
+  "overflow-wrap": {
+    language: "html",
+    description: "Use a table cell to force word wrapping without overflow-wrap",
+    before: `<p style="overflow-wrap: break-word;">
+  https://example.com/very/long/url?token=abc123def456
+</p>`,
+    after: `<table role="presentation" width="100%" cellpadding="0"
+  cellspacing="0" border="0">
+  <tr>
+    <td style="overflow-wrap: break-word; word-wrap: break-word;
+               word-break: break-all;">
+      https://example.com/very/long/url?token=abc123def456
+    </td>
+  </tr>
+</table>`
+  },
+  "overflow-wrap::jsx": {
+    language: "jsx",
+    description: "Wrap text in a table cell for Outlook-safe overflow wrapping",
+    before: `<p style={{ overflowWrap: "break-word" }}>{longText}</p>`,
+    after: `<table width="100%" cellPadding={0} cellSpacing={0}
+  role="presentation" style={{ borderCollapse: "collapse" }}>
+  <tr>
+    <td style={{
+      overflowWrap: "break-word" as const,
+      wordWrap: "break-word" as const,
+      wordBreak: "break-all" as const,
+    }}>
+      {longText}
+    </td>
+  </tr>
+</table>`
+  },
+  // ── text-shadow → border/font-weight alternative ───────────────────────
+  "text-shadow": {
+    language: "css",
+    description: "Use font-weight or border-bottom as alternatives to text-shadow",
+    before: `.glow {
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}`,
+    after: `.glow {
+  /* text-shadow is not supported in Gmail, Outlook, Yahoo.
+     Use font-weight or letter-spacing for emphasis instead. */
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}`
+  },
+  // ── border-spacing → cellspacing attribute ─────────────────────────────
+  "border-spacing": {
+    language: "html",
+    description: "Use the cellspacing HTML attribute instead of border-spacing CSS",
+    before: `<table style="border-spacing: 8px; border-collapse: separate;">
+  <tr><td>Cell</td></tr>
+</table>`,
+    after: `<table cellspacing="8" style="border-collapse: separate;">
+  <tr><td>Cell</td></tr>
+</table>`
+  },
+  // ── min-width → fixed width ────────────────────────────────────────────
+  "min-width": {
+    language: "html",
+    description: "Use a fixed width instead of min-width for Outlook compatibility",
+    before: `<td style="min-width: 200px;">Content</td>`,
+    after: `<!-- Outlook ignores min-width. Use a fixed width or a spacer. -->
+<td width="200" style="width: 200px;">Content</td>`
+  },
+  // ── min-height → fixed height ──────────────────────────────────────────
+  "min-height": {
+    language: "html",
+    description: "Use a fixed height or spacer instead of min-height",
+    before: `<td style="min-height: 100px;">Content</td>`,
+    after: `<!-- Outlook ignores min-height. Use height or a spacer image. -->
+<td height="100" style="height: 100px;">Content</td>`
+  },
+  // ── max-height → fixed height ──────────────────────────────────────────
+  "max-height": {
+    language: "html",
+    description: "Outlook ignores max-height \u2014 truncate content server-side",
+    before: `<div style="max-height: 200px; overflow: hidden;">
+  Long content...
+</div>`,
+    after: `<!-- Outlook ignores max-height. Truncate content server-side. -->
+<div style="height: 200px;">
+  Shortened content...
+  <a href="https://example.com/full">Read more</a>
 </div>`
   },
   // ── REACT EMAIL (jsx) framework-specific fixes ────────────────────────────
@@ -2074,6 +2437,8 @@ function getClientPrefix(clientId) {
   if (clientId.startsWith("outlook")) return null;
   if (clientId.startsWith("gmail")) return "gmail";
   if (clientId.startsWith("apple-mail")) return "apple";
+  if (clientId === "yahoo-mail") return "yahoo";
+  if (clientId === "samsung-mail") return "samsung";
   return null;
 }
 var SUGGESTION_DATABASE = {
@@ -2177,6 +2542,31 @@ var SUGGESTION_DATABASE = {
   "opacity::jsx": "Use solid colors. Opacity is not supported in many email clients.",
   "opacity::mjml": "Use solid colors. Most email clients don't support opacity.",
   "opacity::maizzle": "Use solid Tailwind color classes instead of opacity.",
+  // ── word-break ──────────────────────────────────────────────────────
+  "word-break": "Wrap long text in a <table><td> to force wrapping in clients that don't support word-break.",
+  "word-break::outlook": "Outlook's Word engine ignores word-break. Place text inside a <td> with a constrained width \u2014 tables always wrap.",
+  "word-break::jsx": "Wrap long text in a <table><tr><td> element. Outlook ignores wordBreak but respects table cell widths.",
+  "word-break::mjml": "mj-text renders inside a <td>, which helps. Add word-wrap: break-word to the td via mj-style.",
+  // ── overflow-wrap ──────────────────────────────────────────────────
+  "overflow-wrap": "Wrap text in a <table><td> to force wrapping. overflow-wrap is ignored by Outlook and unreliable in Yahoo.",
+  "overflow-wrap::jsx": "Wrap text in a <table><tr><td> element. Outlook ignores overflowWrap but respects table cell widths.",
+  // ── white-space ────────────────────────────────────────────────────
+  "white-space": "Outlook only supports 'normal' and 'nowrap'. Use &nbsp; for non-breaking spaces.",
+  // ── text-overflow ──────────────────────────────────────────────────
+  "text-overflow": "text-overflow requires overflow:hidden which is stripped by Gmail. Truncate content server-side.",
+  // ── vertical-align ─────────────────────────────────────────────────
+  "vertical-align": 'Use the valign HTML attribute on <td> elements for Outlook (e.g., valign="top").',
+  // ── border-spacing ─────────────────────────────────────────────────
+  "border-spacing": 'Use the cellspacing HTML attribute instead (e.g., <table cellspacing="8">).',
+  // ── min-width / min-height ─────────────────────────────────────────
+  "min-width": "Outlook ignores min-width. Use a fixed width attribute on <td> or <table>.",
+  "min-height": "Outlook ignores min-height. Use a fixed height or a spacer image.",
+  "max-height": "Outlook ignores max-height. Truncate content server-side or use a fixed height.",
+  // ── text-shadow ────────────────────────────────────────────────────
+  "text-shadow": "text-shadow is stripped by Gmail, Outlook, and Yahoo. Use font-weight for emphasis.",
+  // ── background-size / background-position ──────────────────────────
+  "background-size": "Not supported in many clients. Set image dimensions directly.",
+  "background-position": "Not supported in many clients. Use VML for positioning.",
   // ── Additional properties covered by transform helpers ────────────────
   "overflow": "Content will always be visible. Design accordingly.",
   "visibility": "Remove the element or use display:none as an alternative.",
@@ -2185,9 +2575,6 @@ var SUGGESTION_DATABASE = {
   "transition": "CSS transitions are not supported in email.",
   "box-sizing": "Account for padding in your width calculations (use padding on a nested element).",
   "object-fit": "Use width/height attributes on <img> directly.",
-  "max-height": "Use fixed height instead.",
-  "background-size": "Not supported in many clients. Set image dimensions directly.",
-  "background-position": "Not supported in many clients. Use VML for positioning.",
   "display": "Use tables for layout in email clients."
 };
 function getSuggestion(property, clientId, framework) {
@@ -2329,7 +2716,9 @@ function makeWarning(base, prop, clientId, framework) {
   const sug = getSuggestion(prop, clientId, framework);
   const fix = getCodeFix(prop, clientId, framework);
   const isFallback = framework && ((sug == null ? void 0 : sug.isGenericFallback) || fix && isCodeFixGenericFallback(prop, clientId, framework));
-  return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, base), sug ? { suggestion: sug.text } : {}), fix ? { fix } : {}), isFallback ? { fixIsGenericFallback: true } : {});
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, base), sug ? { suggestion: sug.text } : {}), fix ? { fix } : {}), isFallback ? { fixIsGenericFallback: true } : {}), {
+    fixType: STRUCTURAL_FIX_PROPERTIES.has(prop) ? "structural" : "css"
+  });
 }
 function transformGmail(html, clientId, framework) {
   const $ = cheerio.load(html);
@@ -2870,7 +3259,8 @@ function analyzeEmail(html, framework) {
           property: "<style>",
           message: `${client.name} strips <style> blocks. Styles must be inlined.`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("<style>")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<style>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       } else if (support === "partial") {
         const sug = getSuggestion("<style>:partial", client.id, framework);
@@ -2881,7 +3271,8 @@ function analyzeEmail(html, framework) {
           property: "<style>",
           message: `${client.name} has partial <style> support (head only, with limitations). Inline styles recommended.`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("<style>")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<style>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       }
     }
@@ -2898,7 +3289,8 @@ function analyzeEmail(html, framework) {
           property: "<link>",
           message: `${client.name} does not support external stylesheets.`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("<link>")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<link>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       }
     }
@@ -2915,7 +3307,8 @@ function analyzeEmail(html, framework) {
           property: "<svg>",
           message: `${client.name} does not support inline SVG.`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("<svg>")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<svg>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       }
     }
@@ -2932,7 +3325,8 @@ function analyzeEmail(html, framework) {
           property: "<video>",
           message: `${client.name} does not support <video> elements.`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("<video>")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<video>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       }
     }
@@ -2949,7 +3343,8 @@ function analyzeEmail(html, framework) {
           property: "<form>",
           message: `${client.name} strips form elements.`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("<form>")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<form>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       }
     }
@@ -2994,7 +3389,8 @@ function analyzeEmail(html, framework) {
           property: "@font-face",
           message: `${client.name} does not support web fonts (@font-face).`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("@font-face")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("@font-face", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       }
     }
@@ -3011,7 +3407,8 @@ function analyzeEmail(html, framework) {
           property: "@media",
           message: `${client.name} does not support @media queries.`,
           suggestion: sug.text,
-          fix
+          fix,
+          fixType: getFixType("@media")
         }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("@media", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
       }
     }
@@ -3050,7 +3447,8 @@ function analyzeEmail(html, framework) {
           severity: "warning",
           client: client.id,
           property: prop,
-          message: `${client.name} does not support "${prop}" in <style> blocks.`
+          message: `${client.name} does not support "${prop}" in <style> blocks.`,
+          fixType: getFixType(prop)
         });
       }
     }
@@ -3064,9 +3462,13 @@ function analyzeEmail(html, framework) {
   warnings.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
   return warnings;
 }
+function getFixType(prop) {
+  return STRUCTURAL_FIX_PROPERTIES.has(prop) ? "structural" : "css";
+}
 function checkPropertySupport(prop, addWarning, framework) {
   const supportData = CSS_SUPPORT[prop];
   if (!supportData) return;
+  const fixType = getFixType(prop);
   for (const client of EMAIL_CLIENTS) {
     const support = supportData[client.id] || "unknown";
     if (support === "unsupported") {
@@ -3078,7 +3480,8 @@ function checkPropertySupport(prop, addWarning, framework) {
         property: prop,
         message: `${client.name} does not support "${prop}".`,
         suggestion: sug.text,
-        fix
+        fix,
+        fixType
       }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
     } else if (support === "partial") {
       const sug = getSuggestion(prop, client.id, framework);
@@ -3089,7 +3492,8 @@ function checkPropertySupport(prop, addWarning, framework) {
         property: prop,
         message: `${client.name} has partial support for "${prop}".`,
         suggestion: sug.text,
-        fix
+        fix,
+        fixType
       }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
     }
   }
@@ -3311,8 +3715,13 @@ ${originalHtml}
 `;
       for (const w of group) {
         const clientName = (_f = (_e = getClient(w.client)) == null ? void 0 : _e.name) != null ? _f : w.client;
+        const fixTypeLabel = w.fixType === "structural" ? " [STRUCTURAL]" : "";
         issueSection += `
-- **${w.property}** (${clientName}): ${w.message}`;
+- **${w.property}** (${clientName})${fixTypeLabel}: ${w.message}`;
+        if (w.fixType === "structural") {
+          issueSection += `
+  - **Fix type: structural** \u2014 CSS-only changes will NOT work. HTML restructuring required.`;
+        }
         if (w.suggestion) {
           issueSection += `
   - Suggestion: ${w.suggestion}`;
@@ -3343,15 +3752,177 @@ ${originalHtml}
   );
   return sections.join("\n\n");
 }
+
+// src/token-utils.ts
+var CHARS_PER_TOKEN = 3.5;
+var OUTPUT_RATIO = 1.3;
+var DEFAULT_SYSTEM_PROMPT_TOKENS = 250;
+async function estimateAiFixTokens(options) {
+  const _a = options, {
+    maxInputTokens = 16e3,
+    tokenCounter,
+    systemPromptTokens = DEFAULT_SYSTEM_PROMPT_TOKENS
+  } = _a, rest = __objRest(_a, [
+    "maxInputTokens",
+    "tokenCounter",
+    "systemPromptTokens"
+  ]);
+  const effectiveMaxTokens = maxInputTokens - systemPromptTokens;
+  const { warnings: finalWarnings, truncated, removed } = truncateWarnings(
+    rest.warnings,
+    rest.originalHtml,
+    effectiveMaxTokens,
+    rest.scope,
+    rest.selectedClientId
+  );
+  const prompt = generateFixPrompt(__spreadProps(__spreadValues({}, rest), { warnings: finalWarnings }));
+  const promptChars = prompt.length;
+  let promptTokens;
+  if (tokenCounter) {
+    const count = tokenCounter(prompt);
+    promptTokens = count instanceof Promise ? await count : count;
+  } else {
+    promptTokens = heuristicTokenCount(prompt);
+  }
+  const inputTokens = promptTokens + systemPromptTokens;
+  const estimatedOutputTokens = Math.ceil(
+    heuristicTokenCount(rest.originalHtml) * OUTPUT_RATIO
+  );
+  const structuralCount = finalWarnings.filter(
+    (w) => w.fixType === "structural"
+  ).length;
+  return {
+    inputTokens,
+    estimatedOutputTokens,
+    promptCharacters: promptChars,
+    htmlCharacters: rest.originalHtml.length,
+    warningCount: finalWarnings.length,
+    structuralCount,
+    truncated,
+    warningsRemoved: removed,
+    warnings: finalWarnings
+  };
+}
+function heuristicTokenCount(text) {
+  return Math.ceil(text.length / CHARS_PER_TOKEN);
+}
+function truncateWarnings(warnings, html, maxTokens, scope, selectedClientId) {
+  const originalCount = warnings.length;
+  const fullPromptEstimate = heuristicTokenCount(html) + heuristicTokenCount(
+    JSON.stringify(warnings)
+  ) + 500;
+  if (fullPromptEstimate <= maxTokens) {
+    return { warnings, truncated: false, removed: 0 };
+  }
+  let result = [...warnings];
+  const seen = /* @__PURE__ */ new Set();
+  result = result.filter((w) => {
+    const key = `${w.property}:${w.severity}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+  if (estimateFits(result, html, maxTokens)) {
+    return { warnings: result, truncated: true, removed: originalCount - result.length };
+  }
+  result = result.filter((w) => w.severity !== "info");
+  if (estimateFits(result, html, maxTokens)) {
+    return { warnings: result, truncated: true, removed: originalCount - result.length };
+  }
+  result = result.filter((w) => w.fixType === "structural" || w.severity === "error");
+  if (estimateFits(result, html, maxTokens)) {
+    return { warnings: result, truncated: true, removed: originalCount - result.length };
+  }
+  result = result.map((w) => __spreadProps(__spreadValues({}, w), {
+    fix: w.fix ? __spreadProps(__spreadValues({}, w.fix), {
+      before: w.fix.before.length > 200 ? w.fix.before.slice(0, 200) + "\n/* ... truncated ... */" : w.fix.before,
+      after: w.fix.after.length > 200 ? w.fix.after.slice(0, 200) + "\n/* ... truncated ... */" : w.fix.after
+    }) : void 0
+  }));
+  return { warnings: result, truncated: true, removed: originalCount - result.length };
+}
+function estimateFits(warnings, html, maxTokens) {
+  const estimate = heuristicTokenCount(html) + heuristicTokenCount(JSON.stringify(warnings)) + 500;
+  return estimate <= maxTokens;
+}
+
+// src/ai-fix.ts
+async function generateAiFix(options) {
+  const _a = options, { provider, maxInputTokens = 16e3 } = _a, promptOptions = __objRest(_a, ["provider", "maxInputTokens"]);
+  const estimate = await estimateAiFixTokens(__spreadProps(__spreadValues({}, promptOptions), {
+    maxInputTokens
+  }));
+  const truncatedWarnings = estimate.warnings;
+  const prompt = generateFixPrompt(__spreadProps(__spreadValues({}, promptOptions), { warnings: truncatedWarnings }));
+  const structuralCount = countStructuralWarnings(
+    truncatedWarnings,
+    promptOptions.scope,
+    promptOptions.selectedClientId
+  );
+  const _b = estimate, { warnings: _discarded } = _b, tokenEstimate = __objRest(_b, ["warnings"]);
+  const response = await provider(prompt);
+  const code = extractCode(response);
+  return {
+    code,
+    prompt,
+    targetedWarnings: tokenEstimate.warningCount,
+    structuralCount,
+    tokenEstimate
+  };
+}
+var AI_FIX_SYSTEM_PROMPT = `You are an expert email developer specializing in cross-client HTML email compatibility. You fix emails to render correctly across all email clients.
+
+Rules:
+- Return ONLY the fixed code inside a single code fence. No explanations before or after.
+- Preserve all existing content, text, links, and visual design.
+- For structural issues (fixType: "structural"), you MUST restructure the HTML \u2014 CSS-only changes will not work.
+- Common structural patterns:
+  - word-break/overflow-wrap unsupported \u2192 wrap text in <table><tr><td> with constrained width
+  - display:flex/grid \u2192 convert to <table> layout (match the original column count and proportions)
+  - border-radius in Outlook \u2192 use VML <v:roundrect> with <!--[if mso]> conditionals
+  - background-image in Outlook \u2192 use VML <v:rect> with <v:fill>
+  - max-width in Outlook \u2192 wrap in <!--[if mso]><table width="N"> conditional
+  - position:absolute \u2192 use <table> cells for layout
+  - <svg> \u2192 replace with <img> pointing to a hosted PNG
+- For CSS-only issues (fixType: "css"), swap properties or add fallbacks.
+- Apply ALL fixes from the issues list \u2014 do not skip any.
+- Use the framework syntax specified (JSX/MJML/Maizzle/HTML).
+- For JSX: use camelCase style props, React Email components, and proper TypeScript types.
+- For MJML: use mj-* elements and attributes.
+- For Maizzle: use Tailwind CSS classes.`;
+function countStructuralWarnings(warnings, scope, selectedClientId) {
+  const filtered = scope === "current" && selectedClientId ? warnings.filter((w) => w.client === selectedClientId) : warnings;
+  return filtered.filter((w) => w.fixType === "structural").length;
+}
+function extractCode(response) {
+  const fencePattern = /```(?:[\w]*)\n([\s\S]*?)```/g;
+  let largest = null;
+  let match;
+  while ((match = fencePattern.exec(response)) !== null) {
+    const content = match[1].trim();
+    if (largest === null || content.length > largest.length) {
+      largest = content;
+    }
+  }
+  if (largest !== null) {
+    return largest;
+  }
+  return response.trim();
+}
 export {
+  AI_FIX_SYSTEM_PROMPT,
   EMAIL_CLIENTS,
+  STRUCTURAL_FIX_PROPERTIES,
   analyzeEmail,
   diffResults,
+  estimateAiFixTokens,
+  generateAiFix,
   generateCompatibilityScore,
   generateFixPrompt,
   getClient,
   getCodeFix,
   getSuggestion,
+  heuristicTokenCount,
   simulateDarkMode,
   transformForAllClients,
   transformForClient