@emailens/engine 0.3.1 → 0.5.0

package/dist/index.js

@@ -1,34 +1,9 @@
-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;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  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;
-};
+import {
+  CompileError,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-PFONR3YC.js";
 
 // src/clients.ts
 var EMAIL_CLIENTS = [
@@ -1060,8 +1035,8 @@ var STRUCTURAL_FIX_PROPERTIES = /* @__PURE__ */ new Set([
   "object-fit"
 ]);
 
-// src/fix-snippets.ts
-var FIX_DATABASE = {
+// src/fix-snippets/html-fixes.ts
+var HTML_FIX_DATABASE = {
   // ── border-radius (Outlook VML fallback) ──────────────────────────────
   "border-radius::outlook": {
     language: "html",
@@ -1565,7 +1540,7 @@ h1 {
   Preheader text
 </div>`
   },
-  // ── word-break → table cell wrapping ─────────────────────────────────────
+  // ── word-break → table cell wrapping ──────────────────────────────────
   "word-break": {
     language: "html",
     description: "Wrap long text in a table cell to force line breaks without word-break",
@@ -1583,41 +1558,7 @@ h1 {
   </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 → table cell wrapping ───────────────────────────────
   "overflow-wrap": {
     language: "html",
     description: "Use a table cell to force word wrapping without overflow-wrap",
@@ -1634,24 +1575,7 @@ h1 {
   </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 → border/font-weight alternative ──────────────────────
   "text-shadow": {
     language: "css",
     description: "Use font-weight or border-bottom as alternatives to text-shadow",
@@ -1665,7 +1589,7 @@ h1 {
   letter-spacing: 0.5px;
 }`
   },
-  // ── border-spacing → cellspacing attribute ─────────────────────────────
+  // ── border-spacing → cellspacing attribute ────────────────────────────
   "border-spacing": {
     language: "html",
     description: "Use the cellspacing HTML attribute instead of border-spacing CSS",
@@ -1676,7 +1600,7 @@ h1 {
   <tr><td>Cell</td></tr>
 </table>`
   },
-  // ── min-width → fixed width ────────────────────────────────────────────
+  // ── min-width → fixed width ──────────────────────────────────────────
   "min-width": {
     language: "html",
     description: "Use a fixed width instead of min-width for Outlook compatibility",
@@ -1684,7 +1608,7 @@ h1 {
     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 → fixed height ────────────────────────────────────────
   "min-height": {
     language: "html",
     description: "Use a fixed height or spacer instead of min-height",
@@ -1692,7 +1616,7 @@ h1 {
     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 → fixed height ────────────────────────────────────────
   "max-height": {
     language: "html",
     description: "Outlook ignores max-height \u2014 truncate content server-side",
@@ -1704,8 +1628,49 @@ h1 {
   Shortened content...
   <a href="https://example.com/full">Read more</a>
 </div>`
+  }
+};
+
+// src/fix-snippets/jsx-fixes.ts
+var JSX_FIX_DATABASE = {
+  // ── word-break (JSX) ─────────────────────────────────────────────────
+  "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>`
+  },
+  // ── overflow-wrap (JSX) ──────────────────────────────────────────────
+  "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>`
   },
-  // ── REACT EMAIL (jsx) framework-specific fixes ────────────────────────────
+  // ── display:flex (Outlook JSX) ───────────────────────────────────────
   "display:flex::outlook::jsx": {
     language: "jsx",
     description: "Use React Email Row + Column components instead of flexbox (Outlook-safe)",
@@ -1724,6 +1689,7 @@ h1 {
   </Column>
 </Row>`
   },
+  // ── display:grid (JSX) ──────────────────────────────────────────────
   "display:grid::jsx": {
     language: "jsx",
     description: "Replace CSS Grid with React Email Row + Column components",
@@ -1742,6 +1708,7 @@ h1 {
   </Column>
 </Row>`
   },
+  // ── max-width (Outlook JSX) ─────────────────────────────────────────
   "max-width::outlook::jsx": {
     language: "jsx",
     description: "Use React Email Container component for Outlook-safe max-width centering",
@@ -1754,6 +1721,7 @@ h1 {
   Content here
 </Container>`
   },
+  // ── @font-face (JSX) ────────────────────────────────────────────────
   "@font-face::jsx": {
     language: "jsx",
     description: "Use React Email Font component instead of @font-face in <style>",
@@ -1781,6 +1749,7 @@ h1 {
 </Head>
 <h1 style={{ fontFamily: "'CustomFont', Arial, sans-serif" }}>Hello</h1>`
   },
+  // ── <svg> (JSX) ─────────────────────────────────────────────────────
   "<svg>::jsx": {
     language: "jsx",
     description: "Replace inline SVG with React Email Img component",
@@ -1797,6 +1766,7 @@ h1 {
   style={{ display: "block", border: "0" }}
 />`
   },
+  // ── <video> (JSX) ───────────────────────────────────────────────────
   "<video>::jsx": {
     language: "jsx",
     description: "Replace video with a linked thumbnail using React Email Img + Link",
@@ -1814,6 +1784,7 @@ h1 {
   />
 </Link>`
   },
+  // ── border-radius (Outlook JSX) ─────────────────────────────────────
   "border-radius::outlook::jsx": {
     language: "jsx",
     description: "Render rounded buttons with VML via JSX dangerouslySetInnerHTML (Outlook workaround)",
@@ -1824,31 +1795,9 @@ h1 {
            textDecoration: "none", display: "inline-block" }}>
   Click Here
 </a>`,
-    after: `{/* Use dangerouslySetInnerHTML to inject VML for Outlook rounded corners */}
-<div
-  dangerouslySetInnerHTML={{
-    __html: \`
-<!--[if mso]>
-<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
-  href="https://example.com"
-  style="height:44px; v-text-anchor:middle; width:200px;"
-  arcsize="14%" strokecolor="#6d28d9" fillcolor="#6d28d9">
-  <w:anchorlock/>
-  <center style="color:#fff; font-family:Arial,sans-serif;
-    font-size:14px; font-weight:bold;">Click Here</center>
-</v:roundrect>
-<![endif]-->
-<!--[if !mso]><!-->
-<a href="https://example.com"
-  style="background-color:#6d28d9; color:#fff; padding:12px 32px;
-         border-radius:6px; text-decoration:none; display:inline-block;">
-  Click Here
-</a>
-<!--<![endif]-->
-\`,
-  }}
-/>`
+    after: '{/* Use dangerouslySetInnerHTML to inject VML for Outlook rounded corners */}\n<div\n  dangerouslySetInnerHTML={{\n    __html: `\n<!--[if mso]>\n<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"\n  href="https://example.com"\n  style="height:44px; v-text-anchor:middle; width:200px;"\n  arcsize="14%" strokecolor="#6d28d9" fillcolor="#6d28d9">\n  <w:anchorlock/>\n  <center style="color:#fff; font-family:Arial,sans-serif;\n    font-size:14px; font-weight:bold;">Click Here</center>\n</v:roundrect>\n<![endif]-->\n<!--[if !mso]><!-->\n<a href="https://example.com"\n  style="background-color:#6d28d9; color:#fff; padding:12px 32px;\n         border-radius:6px; text-decoration:none; display:inline-block;">\n  Click Here\n</a>\n<!--<![endif]-->\n`,\n  }}\n/>'
   },
+  // ── gap (JSX) ───────────────────────────────────────────────────────
   "gap::jsx": {
     language: "jsx",
     description: "Use padding style prop on Column instead of gap (email-safe spacing)",
@@ -1866,6 +1815,7 @@ h1 {
   <Column>Item 3</Column>
 </Row>`
   },
+  // ── <style> (Gmail JSX) ─────────────────────────────────────────────
   "<style>::gmail::jsx": {
     language: "jsx",
     description: "React Email inlines styles via style props \u2014 manual <style> blocks won't survive Gmail",
@@ -1885,6 +1835,7 @@ h1 {
   <h1 style={{ color: "#fff", fontSize: "24px", margin: 0 }}>Hello</h1>
 </div>`
   },
+  // ── <link> (JSX) ────────────────────────────────────────────────────
   "<link>::jsx": {
     language: "jsx",
     description: "Use React Email Head component instead of <link> for stylesheet references",
@@ -1901,281 +1852,100 @@ h1 {
   {/* Inline your CSS here or use Font component for web fonts */}
 </Head>`
   },
-  // ── MJML framework-specific fixes ─────────────────────────────────────────
-  "@font-face::mjml": {
-    language: "mjml",
-    description: "Use mj-font in mj-head instead of @font-face",
-    before: `<mj-style>
-  @font-face {
-    font-family: 'CustomFont';
-    src: url('https://example.com/custom.woff2') format('woff2');
-  }
-</mj-style>`,
-    after: `<mjml>
-  <mj-head>
-    <mj-font name="CustomFont"
-      href="https://fonts.googleapis.com/css2?family=CustomFont" />
-    <mj-attributes>
-      <mj-all font-family="CustomFont, Arial, Helvetica, sans-serif" />
-    </mj-attributes>
-  </mj-head>
-</mjml>`
+  // ── <form> (JSX) ───────────────────────────────────────────────────
+  "<form>::jsx": {
+    language: "jsx",
+    description: "Replace embedded form with a React Email Button linking to a hosted form",
+    before: `<form action="/subscribe" method="POST">
+  <input type="email" placeholder="Email" />
+  <button type="submit">Subscribe</button>
+</form>`,
+    after: `import { Button } from "@react-email/components";
+
+<Button
+  href="https://example.com/subscribe"
+  style={{
+    backgroundColor: "#6d28d9",
+    color: "#fff",
+    padding: "12px 32px",
+    borderRadius: "6px",
+    textDecoration: "none",
+    fontWeight: "bold",
+  }}
+>
+  Subscribe Now
+</Button>`
   },
-  "<style>::gmail::mjml": {
-    language: "mjml",
-    description: "Use mj-style inline='inline' to force style inlining for Gmail",
-    before: `<mj-head>
-  <mj-style>
-    .custom { color: #6d28d9; }
-  </mj-style>
-</mj-head>`,
-    after: `<mj-head>
-  <!-- Use inline="inline" to force MJML to inline these styles.
-       Class-based styles in a plain mj-style block will be stripped by Gmail. -->
-  <mj-style inline="inline">
-    .custom { color: #6d28d9; }
-  </mj-style>
-</mj-head>`
+  // ── @media (JSX) ────────────────────────────────────────────────────
+  "@media::jsx": {
+    language: "jsx",
+    description: "Design mobile-first \u2014 @media queries are stripped by many clients",
+    before: `import { Head } from "@react-email/components";
+
+<Head>
+  <style>{\`
+    @media (max-width: 600px) {
+      .cols { display: block !important; }
+      .col  { width: 100% !important; }
+    }
+  \`}</style>
+</Head>
+<Row>
+  <Column className="col" style={{ width: "50%" }}>Left</Column>
+  <Column className="col" style={{ width: "50%" }}>Right</Column>
+</Row>`,
+    after: `import { Container, Section, Text } from "@react-email/components";
+
+{/* Single-column stacked layout works without @media.
+    Stack content vertically so it reads well on all clients. */}
+<Container style={{ maxWidth: "600px" }}>
+  <Section style={{ padding: "16px" }}>
+    <Text>Left</Text>
+  </Section>
+  <Section style={{ padding: "16px" }}>
+    <Text>Right</Text>
+  </Section>
+</Container>`
   },
-  "border-radius::outlook::mjml": {
-    language: "mjml",
-    description: "MJML limitation: border-radius is unsupported in Outlook \u2014 MJML does not generate VML",
-    before: `<mj-button border-radius="6px" background-color="#6d28d9">
-  Click Here
-</mj-button>`,
-    after: `<!-- Known MJML limitation: MJML does not generate VML for rounded corners.
-     Options: accept flat corners, use mj-raw for VML, or set border-radius="0". -->
-<mj-button border-radius="0" background-color="#6d28d9">
-  Click Here
-</mj-button>`
+  // ── position (JSX) ─────────────────────────────────────────────────
+  "position::jsx": {
+    language: "jsx",
+    description: "Use React Email Row and Column for layout instead of CSS position",
+    before: `<div style={{ position: "relative" }}>
+  <div style={{ position: "absolute", top: 0, right: 0 }}>
+    Badge
+  </div>
+  <p>Content</p>
+</div>`,
+    after: `import { Row, Column, Text } from "@react-email/components";
+
+<Row>
+  <Column style={{ verticalAlign: "top" }}>
+    <Text>Content</Text>
+  </Column>
+  <Column style={{ width: "80px", verticalAlign: "top", textAlign: "right" }}>
+    <Text>Badge</Text>
+  </Column>
+</Row>`
   },
-  "background-image::outlook::mjml": {
-    language: "mjml",
-    description: "Use mj-section background-url for Outlook-compatible background images",
-    before: `<mj-section>
-  <mj-column>
-    <mj-image src="hero.jpg" />
-  </mj-column>
-</mj-section>`,
-    after: `<!-- MJML generates VML-compatible markup automatically via background-url on mj-section. -->
-<mj-section background-url="https://example.com/hero.jpg"
-             background-size="cover"
-             background-repeat="no-repeat"
-             background-color="#333333">
-  <mj-column>
-    <mj-text color="#ffffff">Your content here</mj-text>
-  </mj-column>
-</mj-section>`
-  },
-  "display:flex::mjml": {
-    language: "mjml",
-    description: "Replace flexbox (from mj-raw or inline styles) with mj-section and mj-column",
-    before: `<mj-raw>
-  <div style="display: flex; gap: 16px;">
-    <div style="flex: 1;">Column 1</div>
-    <div style="flex: 1;">Column 2</div>
-  </div>
-</mj-raw>`,
-    after: `<!-- Flexbox in MJML is not Outlook-compatible.
-     Use mj-section and mj-column \u2014 MJML compiles these to table-based layouts. -->
-<mj-section>
-  <mj-column width="50%">
-    <mj-text>Column 1</mj-text>
-  </mj-column>
-  <mj-column width="50%">
-    <mj-text>Column 2</mj-text>
-  </mj-column>
-</mj-section>`
-  },
-  "@media::mjml": {
-    language: "mjml",
-    description: "Use MJML responsive attributes and breakpoints instead of hand-written @media",
-    before: `<mj-style>
-  @media (max-width: 600px) {
-    .mobile-stack { display: block !important; width: 100% !important; }
-  }
-</mj-style>`,
-    after: `<!-- MJML generates responsive @media queries automatically.
-     Use mj-breakpoint and mj-column widths to control responsive behavior. -->
-<mj-head>
-  <mj-breakpoint width="600px" />
-</mj-head>
-<mj-body>
-  <mj-section>
-    <mj-column width="50%"><mj-text>Left</mj-text></mj-column>
-    <mj-column width="50%"><mj-text>Right</mj-text></mj-column>
-  </mj-section>
-</mj-body>`
-  },
-  // ── MAIZZLE framework-specific fixes ──────────────────────────────────────
-  "display:flex::outlook::maizzle": {
-    language: "maizzle",
-    description: "Replace Tailwind flex classes with HTML table + MSO conditional comments",
-    before: `<div class="flex gap-4">
-  <div class="flex-1">Column 1</div>
-  <div class="flex-1">Column 2</div>
-</div>`,
-    after: `<!--[if mso]>
-<table role="presentation" width="100%" cellpadding="0"
-  cellspacing="0" border="0"><tr>
-  <td class="w-1/2" valign="top">Column 1</td>
-  <td class="w-1/2" valign="top">Column 2</td>
-</tr></table>
-<![endif]-->
-<!--[if !mso]><!-->
-<div class="flex gap-4">
-  <div class="flex-1">Column 1</div>
-  <div class="flex-1">Column 2</div>
-</div>
-<!--<![endif]-->`
-  },
-  "@font-face::maizzle": {
-    language: "maizzle",
-    description: 'Add fonts via the googleFonts key in config.js \u2014 Maizzle injects the Google Fonts link tag automatically. Set googleFonts: "Inter:ital,wght@0,400;0,700" in your environment config, then reference the font family in your template.',
-    before: `<style>
-  @font-face {
-    font-family: 'Inter';
-    src: url('https://fonts.gstatic.com/...') format('woff2');
-  }
-</style>`,
-    after: `<!-- config.js: googleFonts: "Inter:ital,wght@0,400;0,700" -->
-<p class="font-['Inter',Arial,sans-serif]">Hello</p>`
-  },
-  "<style>::gmail::maizzle": {
-    language: "maizzle",
-    description: "Maizzle automatically inlines CSS via juice during build (inlineCSS: true in config.js). Manual <style> blocks bypass juice and will be stripped by Gmail \u2014 prefer Tailwind utility classes instead.",
-    before: `<style>
-  .custom { color: #6d28d9; }
-</style>
-<div class="custom">Hello</div>`,
-    after: `<!-- Prefer Tailwind classes \u2014 Maizzle inlines them automatically during build -->
-<div class="text-[#6d28d9]">Hello</div>`
-  },
-  "max-width::outlook::maizzle": {
-    language: "maizzle",
-    description: "Wrap max-width containers with MSO conditional table for Outlook",
-    before: `<div class="max-w-[600px] mx-auto">
-  Content here
-</div>`,
-    after: `<!--[if mso]>
-<table role="presentation" width="600" cellpadding="0"
-  cellspacing="0" border="0" align="center"><tr><td>
-<![endif]-->
-<div class="max-w-[600px] mx-auto">
-  Content here
-</div>
-<!--[if mso]>
-</td></tr></table>
-<![endif]-->`
-  },
-  "gap::maizzle": {
-    language: "maizzle",
-    description: "Use padding Tailwind classes on child elements instead of gap",
-    before: `<div class="flex gap-4">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>`,
-    after: `<!-- gap is not supported in Outlook or many email clients.
-     Use padding classes on child elements instead. -->
-<table role="presentation" cellpadding="0" cellspacing="0" border="0">
-  <tr>
-    <td class="pr-4">Item 1</td>
-    <td class="pr-4">Item 2</td>
-    <td>Item 3</td>
-  </tr>
-</table>`
-  },
-  // ── JSX fixes for remaining common properties ─────────────────────────────
-  "<form>::jsx": {
-    language: "jsx",
-    description: "Replace embedded form with a React Email Button linking to a hosted form",
-    before: `<form action="/subscribe" method="POST">
-  <input type="email" placeholder="Email" />
-  <button type="submit">Subscribe</button>
-</form>`,
-    after: `import { Button } from "@react-email/components";
-
-<Button
-  href="https://example.com/subscribe"
-  style={{
-    backgroundColor: "#6d28d9",
-    color: "#fff",
-    padding: "12px 32px",
-    borderRadius: "6px",
-    textDecoration: "none",
-    fontWeight: "bold",
-  }}
->
-  Subscribe Now
-</Button>`
-  },
-  "@media::jsx": {
-    language: "jsx",
-    description: "Design mobile-first \u2014 @media queries are stripped by many clients",
-    before: `import { Head } from "@react-email/components";
-
-<Head>
-  <style>{\`
-    @media (max-width: 600px) {
-      .cols { display: block !important; }
-      .col  { width: 100% !important; }
-    }
-  \`}</style>
-</Head>
-<Row>
-  <Column className="col" style={{ width: "50%" }}>Left</Column>
-  <Column className="col" style={{ width: "50%" }}>Right</Column>
-</Row>`,
-    after: `import { Container, Section, Text } from "@react-email/components";
-
-{/* Single-column stacked layout works without @media.
-    Stack content vertically so it reads well on all clients. */}
-<Container style={{ maxWidth: "600px" }}>
-  <Section style={{ padding: "16px" }}>
-    <Text>Left</Text>
-  </Section>
-  <Section style={{ padding: "16px" }}>
-    <Text>Right</Text>
-  </Section>
-</Container>`
-  },
-  "position::jsx": {
-    language: "jsx",
-    description: "Use React Email Row and Column for layout instead of CSS position",
-    before: `<div style={{ position: "relative" }}>
-  <div style={{ position: "absolute", top: 0, right: 0 }}>
-    Badge
-  </div>
-  <p>Content</p>
-</div>`,
-    after: `import { Row, Column, Text } from "@react-email/components";
-
-<Row>
-  <Column style={{ verticalAlign: "top" }}>
-    <Text>Content</Text>
-  </Column>
-  <Column style={{ width: "80px", verticalAlign: "top", textAlign: "right" }}>
-    <Text>Badge</Text>
-  </Column>
-</Row>`
-  },
-  "float::jsx": {
-    language: "jsx",
-    description: "Use React Email Row and Column instead of float for side-by-side layout",
-    before: `<img src="photo.jpg" style={{ float: "left", marginRight: "16px" }} width={200} />
-<p>Text wraps around the image.</p>`,
-    after: `import { Row, Column, Img, Text } from "@react-email/components";
-
-<Row>
-  <Column style={{ width: "200px", paddingRight: "16px", verticalAlign: "top" }}>
-    <Img src="photo.jpg" width={200} style={{ display: "block", border: "0" }} />
-  </Column>
-  <Column style={{ verticalAlign: "top" }}>
-    <Text>Text next to the image.</Text>
-  </Column>
-</Row>`
+  // ── float (JSX) ────────────────────────────────────────────────────
+  "float::jsx": {
+    language: "jsx",
+    description: "Use React Email Row and Column instead of float for side-by-side layout",
+    before: `<img src="photo.jpg" style={{ float: "left", marginRight: "16px" }} width={200} />
+<p>Text wraps around the image.</p>`,
+    after: `import { Row, Column, Img, Text } from "@react-email/components";
+
+<Row>
+  <Column style={{ width: "200px", paddingRight: "16px", verticalAlign: "top" }}>
+    <Img src="photo.jpg" width={200} style={{ display: "block", border: "0" }} />
+  </Column>
+  <Column style={{ verticalAlign: "top" }}>
+    <Text>Text next to the image.</Text>
+  </Column>
+</Row>`
   },
+  // ── background-image (Outlook JSX) ──────────────────────────────────
   "background-image::outlook::jsx": {
     language: "jsx",
     description: "Use VML for Outlook background images in JSX via dangerouslySetInnerHTML",
@@ -2183,26 +1953,9 @@ h1 {
               backgroundSize: "cover", padding: "40px" }}>
   <h1 style={{ color: "#fff" }}>Hello World</h1>
 </td>`,
-    after: `<div
-  dangerouslySetInnerHTML={{
-    __html: \`
-<!--[if gte mso 9]>
-<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
-  stroke="false" style="width:600px; height:300px;">
-  <v:fill type="frame" src="hero.jpg" />
-  <v:textbox inset="0,0,0,0">
-<![endif]-->
-<div style="background-image:url('hero.jpg'); background-size:cover; padding:40px;">
-  <h1 style="color:#fff;">Hello World</h1>
-</div>
-<!--[if gte mso 9]>
-  </v:textbox>
-</v:rect>
-<![endif]-->
-\`,
-  }}
-/>`
+    after: '<div\n  dangerouslySetInnerHTML={{\n    __html: `\n<!--[if gte mso 9]>\n<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"\n  stroke="false" style="width:600px; height:300px;">\n  <v:fill type="frame" src="hero.jpg" />\n  <v:textbox inset="0,0,0,0">\n<![endif]-->\n<div style="background-image:url(\'hero.jpg\'); background-size:cover; padding:40px;">\n  <h1 style="color:#fff;">Hello World</h1>\n</div>\n<!--[if gte mso 9]>\n  </v:textbox>\n</v:rect>\n<![endif]-->\n`,\n  }}\n/>'
   },
+  // ── opacity (JSX) ──────────────────────────────────────────────────
   "opacity::jsx": {
     language: "jsx",
     description: "Use solid colors instead of opacity in style objects",
@@ -2219,6 +1972,7 @@ h1 {
   Overlay content
 </div>`
   },
+  // ── box-shadow (JSX) ──────────────────────────────────────────────
   "box-shadow::jsx": {
     language: "jsx",
     description: "Use border as a fallback for boxShadow in style objects",
@@ -2237,6 +1991,7 @@ h1 {
   Card content
 </Section>`
   },
+  // ── linear-gradient (JSX) ─────────────────────────────────────────
   "linear-gradient::jsx": {
     language: "jsx",
     description: "Add a solid backgroundColor fallback before the gradient",
@@ -2257,6 +2012,7 @@ h1 {
   Content here
 </div>`
   },
+  // ── transform (JSX) ──────────────────────────────────────────────
   "transform::jsx": {
     language: "jsx",
     description: "Pre-render transformed content as an image using React Email Img",
@@ -2274,6 +2030,7 @@ h1 {
   style={{ display: "block", border: "0" }}
 />`
   },
+  // ── animation (JSX) ──────────────────────────────────────────────
   "animation::jsx": {
     language: "jsx",
     description: "Replace CSS animation with a React Email Img using an animated GIF",
@@ -2289,6 +2046,7 @@ h1 {
   style={{ display: "inline-block", border: "0" }}
 />`
   },
+  // ── transition (JSX) ─────────────────────────────────────────────
   "transition::jsx": {
     language: "jsx",
     description: "Transitions don't work in email \u2014 style the default state well",
@@ -2318,6 +2076,7 @@ h1 {
   Click
 </Button>`
   },
+  // ── overflow (JSX) ───────────────────────────────────────────────
   "overflow::jsx": {
     language: "jsx",
     description: "Content will always be visible \u2014 design for full content display",
@@ -2332,6 +2091,7 @@ h1 {
   <Link href="https://example.com/full">Read more</Link>
 </div>`
   },
+  // ── visibility (JSX) ─────────────────────────────────────────────
   "visibility::jsx": {
     language: "jsx",
     description: "Use font-size/max-height trick instead of visibility:hidden",
@@ -2354,6 +2114,7 @@ h1 {
   Preheader text
 </div>`
   },
+  // ── object-fit (JSX) ─────────────────────────────────────────────
   "object-fit::jsx": {
     language: "jsx",
     description: "Use React Email Img with explicit width/height instead of object-fit",
@@ -2372,6 +2133,7 @@ h1 {
   style={{ display: "block", border: "0" }}
 />`
   },
+  // ── background-size (JSX) ────────────────────────────────────────
   "background-size::jsx": {
     language: "jsx",
     description: "Outlook ignores background-size \u2014 use sized images instead",
@@ -2391,6 +2153,7 @@ h1 {
   style={{ display: "block", width: "100%", border: "0" }}
 />`
   },
+  // ── box-sizing (JSX) ─────────────────────────────────────────────
   "box-sizing::jsx": {
     language: "jsx",
     description: "Account for padding in width manually (no box-sizing support)",
@@ -2409,162 +2172,291 @@ h1 {
 </div>`
   }
 };
-function getCodeFix(property, clientId, framework) {
-  const clientPrefix = getClientPrefix(clientId);
-  if (framework && clientPrefix) {
-    const tier1 = FIX_DATABASE[`${property}::${clientPrefix}::${framework}`];
-    if (tier1) return tier1;
-  }
-  if (framework) {
-    const tier2 = FIX_DATABASE[`${property}::${framework}`];
-    if (tier2) return tier2;
-  }
-  if (clientPrefix) {
-    const tier3 = FIX_DATABASE[`${property}::${clientPrefix}`];
-    if (tier3) return tier3;
+
+// src/fix-snippets/mjml-fixes.ts
+var MJML_FIX_DATABASE = {
+  // ── word-break (MJML) ────────────────────────────────────────────────
+  "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>`
+  },
+  // ── @font-face (MJML) ───────────────────────────────────────────────
+  "@font-face::mjml": {
+    language: "mjml",
+    description: "Use mj-font in mj-head instead of @font-face",
+    before: `<mj-style>
+  @font-face {
+    font-family: 'CustomFont';
+    src: url('https://example.com/custom.woff2') format('woff2');
   }
-  return FIX_DATABASE[property];
-}
-function isCodeFixGenericFallback(property, clientId, framework) {
-  if (!framework) return false;
-  const clientPrefix = getClientPrefix(clientId);
-  if (clientPrefix && FIX_DATABASE[`${property}::${clientPrefix}::${framework}`]) return false;
-  if (FIX_DATABASE[`${property}::${framework}`]) return false;
-  return true;
-}
-function getClientPrefix(clientId) {
-  if (clientId.startsWith("outlook-windows")) return "outlook";
-  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 = {
+</mj-style>`,
+    after: `<mjml>
+  <mj-head>
+    <mj-font name="CustomFont"
+      href="https://fonts.googleapis.com/css2?family=CustomFont" />
+    <mj-attributes>
+      <mj-all font-family="CustomFont, Arial, Helvetica, sans-serif" />
+    </mj-attributes>
+  </mj-head>
+</mjml>`
+  },
+  // ── <style> (Gmail MJML) ────────────────────────────────────────────
+  "<style>::gmail::mjml": {
+    language: "mjml",
+    description: "Use mj-style inline='inline' to force style inlining for Gmail",
+    before: `<mj-head>
+  <mj-style>
+    .custom { color: #6d28d9; }
+  </mj-style>
+</mj-head>`,
+    after: `<mj-head>
+  <!-- Use inline="inline" to force MJML to inline these styles.
+       Class-based styles in a plain mj-style block will be stripped by Gmail. -->
+  <mj-style inline="inline">
+    .custom { color: #6d28d9; }
+  </mj-style>
+</mj-head>`
+  },
+  // ── border-radius (Outlook MJML) ────────────────────────────────────
+  "border-radius::outlook::mjml": {
+    language: "mjml",
+    description: "MJML limitation: border-radius is unsupported in Outlook \u2014 MJML does not generate VML",
+    before: `<mj-button border-radius="6px" background-color="#6d28d9">
+  Click Here
+</mj-button>`,
+    after: `<!-- Known MJML limitation: MJML does not generate VML for rounded corners.
+     Options: accept flat corners, use mj-raw for VML, or set border-radius="0". -->
+<mj-button border-radius="0" background-color="#6d28d9">
+  Click Here
+</mj-button>`
+  },
+  // ── background-image (Outlook MJML) ─────────────────────────────────
+  "background-image::outlook::mjml": {
+    language: "mjml",
+    description: "Use mj-section background-url for Outlook-compatible background images",
+    before: `<mj-section>
+  <mj-column>
+    <mj-image src="hero.jpg" />
+  </mj-column>
+</mj-section>`,
+    after: `<!-- MJML generates VML-compatible markup automatically via background-url on mj-section. -->
+<mj-section background-url="https://example.com/hero.jpg"
+             background-size="cover"
+             background-repeat="no-repeat"
+             background-color="#333333">
+  <mj-column>
+    <mj-text color="#ffffff">Your content here</mj-text>
+  </mj-column>
+</mj-section>`
+  },
+  // ── display:flex (MJML) ─────────────────────────────────────────────
+  "display:flex::mjml": {
+    language: "mjml",
+    description: "Replace flexbox (from mj-raw or inline styles) with mj-section and mj-column",
+    before: `<mj-raw>
+  <div style="display: flex; gap: 16px;">
+    <div style="flex: 1;">Column 1</div>
+    <div style="flex: 1;">Column 2</div>
+  </div>
+</mj-raw>`,
+    after: `<!-- Flexbox in MJML is not Outlook-compatible.
+     Use mj-section and mj-column \u2014 MJML compiles these to table-based layouts. -->
+<mj-section>
+  <mj-column width="50%">
+    <mj-text>Column 1</mj-text>
+  </mj-column>
+  <mj-column width="50%">
+    <mj-text>Column 2</mj-text>
+  </mj-column>
+</mj-section>`
+  },
+  // ── @media (MJML) ──────────────────────────────────────────────────
+  "@media::mjml": {
+    language: "mjml",
+    description: "Use MJML responsive attributes and breakpoints instead of hand-written @media",
+    before: `<mj-style>
+  @media (max-width: 600px) {
+    .mobile-stack { display: block !important; width: 100% !important; }
+  }
+</mj-style>`,
+    after: `<!-- MJML generates responsive @media queries automatically.
+     Use mj-breakpoint and mj-column widths to control responsive behavior. -->
+<mj-head>
+  <mj-breakpoint width="600px" />
+</mj-head>
+<mj-body>
+  <mj-section>
+    <mj-column width="50%"><mj-text>Left</mj-text></mj-column>
+    <mj-column width="50%"><mj-text>Right</mj-text></mj-column>
+  </mj-section>
+</mj-body>`
+  }
+};
+
+// src/fix-snippets/maizzle-fixes.ts
+var MAIZZLE_FIX_DATABASE = {
+  // ── display:flex (Outlook Maizzle) ──────────────────────────────────
+  "display:flex::outlook::maizzle": {
+    language: "maizzle",
+    description: "Replace Tailwind flex classes with HTML table + MSO conditional comments",
+    before: `<div class="flex gap-4">
+  <div class="flex-1">Column 1</div>
+  <div class="flex-1">Column 2</div>
+</div>`,
+    after: `<!--[if mso]>
+<table role="presentation" width="100%" cellpadding="0"
+  cellspacing="0" border="0"><tr>
+  <td class="w-1/2" valign="top">Column 1</td>
+  <td class="w-1/2" valign="top">Column 2</td>
+</tr></table>
+<![endif]-->
+<!--[if !mso]><!-->
+<div class="flex gap-4">
+  <div class="flex-1">Column 1</div>
+  <div class="flex-1">Column 2</div>
+</div>
+<!--<![endif]-->`
+  },
+  // ── @font-face (Maizzle) ────────────────────────────────────────────
+  "@font-face::maizzle": {
+    language: "maizzle",
+    description: 'Add fonts via the googleFonts key in config.js \u2014 Maizzle injects the Google Fonts link tag automatically. Set googleFonts: "Inter:ital,wght@0,400;0,700" in your environment config, then reference the font family in your template.',
+    before: `<style>
+  @font-face {
+    font-family: 'Inter';
+    src: url('https://fonts.gstatic.com/...') format('woff2');
+  }
+</style>`,
+    after: `<!-- config.js: googleFonts: "Inter:ital,wght@0,400;0,700" -->
+<p class="font-['Inter',Arial,sans-serif]">Hello</p>`
+  },
+  // ── <style> (Gmail Maizzle) ─────────────────────────────────────────
+  "<style>::gmail::maizzle": {
+    language: "maizzle",
+    description: "Maizzle automatically inlines CSS via juice during build (inlineCSS: true in config.js). Manual <style> blocks bypass juice and will be stripped by Gmail \u2014 prefer Tailwind utility classes instead.",
+    before: `<style>
+  .custom { color: #6d28d9; }
+</style>
+<div class="custom">Hello</div>`,
+    after: `<!-- Prefer Tailwind classes \u2014 Maizzle inlines them automatically during build -->
+<div class="text-[#6d28d9]">Hello</div>`
+  },
+  // ── max-width (Outlook Maizzle) ─────────────────────────────────────
+  "max-width::outlook::maizzle": {
+    language: "maizzle",
+    description: "Wrap max-width containers with MSO conditional table for Outlook",
+    before: `<div class="max-w-[600px] mx-auto">
+  Content here
+</div>`,
+    after: `<!--[if mso]>
+<table role="presentation" width="600" cellpadding="0"
+  cellspacing="0" border="0" align="center"><tr><td>
+<![endif]-->
+<div class="max-w-[600px] mx-auto">
+  Content here
+</div>
+<!--[if mso]>
+</td></tr></table>
+<![endif]-->`
+  },
+  // ── gap (Maizzle) ──────────────────────────────────────────────────
+  "gap::maizzle": {
+    language: "maizzle",
+    description: "Use padding Tailwind classes on child elements instead of gap",
+    before: `<div class="flex gap-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>`,
+    after: `<!-- gap is not supported in Outlook or many email clients.
+     Use padding classes on child elements instead. -->
+<table role="presentation" cellpadding="0" cellspacing="0" border="0">
+  <tr>
+    <td class="pr-4">Item 1</td>
+    <td class="pr-4">Item 2</td>
+    <td>Item 3</td>
+  </tr>
+</table>`
+  }
+};
+
+// src/fix-snippets/html-suggestions.ts
+var HTML_SUGGESTION_DATABASE = {
   // ── <style> ───────────────────────────────────────────────────────────
   "<style>": "Use a CSS inliner tool (like juice) to move styles to inline attributes.",
   "<style>:partial": "Use inline styles as the primary approach, with <style> in <head> as progressive enhancement.",
-  "<style>::jsx": "Move styles to inline style props \u2014 React Email components accept style objects directly.",
-  "<style>:partial::jsx": "Use inline style props on React Email components. Reserve <style> in <Head> for progressive enhancement only.",
-  "<style>::mjml": 'Use mj-style inline="inline" to force MJML to inline styles for Gmail compatibility.',
-  "<style>:partial::mjml": 'Use mj-style inline="inline" for critical styles; plain mj-style for progressive enhancement.',
-  "<style>::maizzle": "Prefer Tailwind utility classes \u2014 Maizzle inlines CSS via juice during build (inlineCSS: true in config.js).",
-  "<style>:partial::maizzle": "Use Tailwind utility classes for critical styles. Maizzle automatically inlines them at build time.",
   // ── <link> ────────────────────────────────────────────────────────────
   "<link>": "Inline all CSS directly in the HTML.",
-  "<link>::jsx": "Use the React Email <Head> component for font imports; place all other styles inline via style props.",
-  "<link>::mjml": "MJML does not support external stylesheets. Use mj-style or inline attributes.",
-  "<link>::maizzle": "External stylesheets are stripped. Use Tailwind CSS classes \u2014 Maizzle inlines them at build time.",
   // ── <svg> ─────────────────────────────────────────────────────────────
   "<svg>": "Convert SVGs to PNG/JPG images.",
-  "<svg>::jsx": "Replace inline SVG with the React Email <Img> component pointing to a hosted PNG.",
-  "<svg>::mjml": "Replace inline SVG with an mj-image component pointing to a hosted PNG.",
-  "<svg>::maizzle": "Replace inline SVG with an <img> tag pointing to a hosted PNG.",
   // ── <video> ───────────────────────────────────────────────────────────
   "<video>": "Use an animated GIF or a static image with a play button linking to the video.",
-  "<video>::jsx": "Replace <video> with a React Email <Link> wrapping an <Img> thumbnail.",
-  "<video>::mjml": "Replace <video> with an mj-image linking to a video thumbnail.",
-  "<video>::maizzle": "Replace <video> with a linked image thumbnail.",
   // ── <form> ────────────────────────────────────────────────────────────
   "<form>": "Use links to a web form instead of embedding forms in email.",
-  "<form>::jsx": "Replace the form with a React Email <Button> or <Link> component pointing to a hosted form page.",
-  "<form>::mjml": "Replace the form with an mj-button linking to a hosted form page.",
-  "<form>::maizzle": "Replace the form with a CTA link/button pointing to a hosted form page.",
   // ── @font-face ────────────────────────────────────────────────────────
   "@font-face": "Always include a web-safe font stack as fallback (e.g., Arial, Helvetica, sans-serif).",
-  "@font-face::jsx": "Use the React Email <Font> component in <Head> with a fallbackFontFamily prop.",
-  "@font-face::mjml": "Use mj-font in mj-head instead of @font-face in mj-style.",
-  "@font-face::maizzle": "Use the googleFonts key in config.js \u2014 Maizzle injects the Google Fonts link tag automatically.",
   // ── @media ────────────────────────────────────────────────────────────
   "@media": "Design emails mobile-first with a single-column layout that works without media queries.",
-  "@media::jsx": "Use a single-column layout with React Email <Container> and <Section>. Avoid relying on @media queries.",
-  "@media::mjml": "MJML generates responsive @media queries automatically. Use mj-breakpoint and mj-column widths.",
-  "@media::maizzle": "Use Tailwind responsive utility classes and Maizzle's breakpoints config instead of hand-written @media.",
   // ── display:flex ──────────────────────────────────────────────────────
   "display:flex": "Use <table> layouts for email client compatibility.",
   "display:flex::outlook": "Use <table> layouts with <!--[if mso]> conditional comments for Outlook's Word engine.",
-  "display:flex::jsx": "Use React Email <Row> and <Column> components instead of flexbox.",
-  "display:flex::mjml": "Use mj-section and mj-column \u2014 MJML compiles these to table-based layouts.",
-  "display:flex::maizzle": "Replace Tailwind flex classes with HTML table + MSO conditional comments for Outlook.",
   // ── display:grid ──────────────────────────────────────────────────────
   "display:grid": "Replace CSS Grid with table layout for email compatibility.",
-  "display:grid::jsx": "Use React Email <Row> and <Column> components instead of CSS Grid.",
-  "display:grid::mjml": "Use mj-section and mj-column for grid-like layouts.",
-  "display:grid::maizzle": "Replace Tailwind grid classes with HTML table layout for email compatibility.",
   // ── linear-gradient ───────────────────────────────────────────────────
   "linear-gradient": "Add a solid background-color fallback before the gradient.",
-  "linear-gradient::jsx": "Add a solid backgroundColor style prop as fallback before the gradient.",
-  "linear-gradient::mjml": "Add a background-color attribute on mj-section as a fallback.",
-  "linear-gradient::maizzle": "Add a bg-[color] Tailwind class as a fallback before the gradient.",
   // ── box-shadow ────────────────────────────────────────────────────────
   "box-shadow": "Use border styling as an alternative to box-shadow.",
-  "box-shadow::jsx": "Use a border style prop as an alternative to boxShadow.",
-  "box-shadow::mjml": "Use a border attribute on mj-section or mj-column as an alternative.",
-  "box-shadow::maizzle": "Use Tailwind border classes as an alternative to shadow classes.",
   // ── border-radius ─────────────────────────────────────────────────────
   "border-radius": "Use VML for rounded corners in Outlook, or accept square corners.",
   "border-radius::outlook": "Use VML (Vector Markup Language) for rounded buttons in Outlook.",
-  "border-radius::jsx": "Outlook ignores borderRadius. Use dangerouslySetInnerHTML with VML for rounded buttons if needed.",
-  "border-radius::mjml": 'MJML does not generate VML \u2014 border-radius will not render in Outlook. Set border-radius="0" or accept flat corners.',
-  "border-radius::maizzle": "Outlook ignores border-radius. Accept flat corners or use MSO conditional VML.",
   // ── max-width ─────────────────────────────────────────────────────────
   "max-width": "Use a fixed-width table wrapper for maximum compatibility.",
   "max-width::outlook": "Use a fixed width on table cells instead of max-width.",
-  "max-width::jsx": "Use the React Email <Container> component which handles max-width across clients.",
-  "max-width::mjml": "Set the width attribute on mj-body or mj-section for maximum compatibility.",
-  "max-width::maizzle": "Wrap max-w containers with MSO conditional table for Outlook.",
   // ── gap ───────────────────────────────────────────────────────────────
   "gap": "Use padding/margin on child elements instead of gap.",
   "gap::outlook": "Use cellpadding/cellspacing on tables, or padding on cells.",
-  "gap::jsx": "Use padding style props on <Column> components instead of gap.",
-  "gap::mjml": "Use padding attribute on mj-column or mj-text for spacing.",
-  "gap::maizzle": "Use Tailwind padding classes on child elements instead of gap.",
   // ── float ─────────────────────────────────────────────────────────────
   "float": "Use table cells with align attribute for side-by-side content.",
   "float::outlook": 'Use table cells with align="left" or align="right".',
-  "float::jsx": "Use React Email <Row> and <Column> components for side-by-side layout.",
-  "float::mjml": "Use mj-section with multiple mj-column elements for side-by-side layout.",
-  "float::maizzle": "Use HTML tables for side-by-side layout instead of Tailwind float classes.",
   // ── background-image ──────────────────────────────────────────────────
   "background-image": "Use VML for background images in clients that require it.",
   "background-image::outlook": "Use <!--[if gte mso 9]> with <v:background> VML for Outlook background images.",
-  "background-image::jsx": "Use VML via dangerouslySetInnerHTML for Outlook background images.",
-  "background-image::mjml": "Use background-url attribute on mj-section \u2014 MJML generates VML automatically.",
-  "background-image::maizzle": "Use MSO conditional VML for Outlook background images.",
   // ── position ──────────────────────────────────────────────────────────
   "position": "Use table-based positioning instead of CSS position.",
-  "position::jsx": "Use React Email <Row> and <Column> components for positioning.",
-  "position::mjml": "Use mj-section and mj-column for layout positioning.",
-  "position::maizzle": "Use HTML table layout instead of Tailwind position classes.",
   // ── opacity ───────────────────────────────────────────────────────────
   "opacity": "Use solid colors instead of opacity.",
-  "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 ────────────────────────────────────────────────────────
   "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 ─────────────────────────────────────────────────────
   "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 ───────────────────────────────────────────────────────
   "white-space": "Outlook only supports 'normal' and 'nowrap'. Use &nbsp; for non-breaking spaces.",
-  // ── text-overflow ──────────────────────────────────────────────────
+  // ── text-overflow ─────────────────────────────────────────────────────
   "text-overflow": "text-overflow requires overflow:hidden which is stripped by Gmail. Truncate content server-side.",
-  // ── vertical-align ─────────────────────────────────────────────────
+  // ── vertical-align ────────────────────────────────────────────────────
   "vertical-align": 'Use the valign HTML attribute on <td> elements for Outlook (e.g., valign="top").',
-  // ── border-spacing ─────────────────────────────────────────────────
+  // ── border-spacing ────────────────────────────────────────────────────
   "border-spacing": 'Use the cellspacing HTML attribute instead (e.g., <table cellspacing="8">).',
-  // ── min-width / min-height ─────────────────────────────────────────
+  // ── 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": "text-shadow is stripped by Gmail, Outlook, and Yahoo. Use font-weight for emphasis.",
-  // ── background-size / background-position ──────────────────────────
+  // ── 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 ────────────────
@@ -2577,6 +2469,171 @@ var SUGGESTION_DATABASE = {
   "object-fit": "Use width/height attributes on <img> directly.",
   "display": "Use tables for layout in email clients."
 };
+
+// src/fix-snippets/jsx-suggestions.ts
+var JSX_SUGGESTION_DATABASE = {
+  // ── <style> ───────────────────────────────────────────────────────────
+  "<style>::jsx": "Move styles to inline style props \u2014 React Email components accept style objects directly.",
+  "<style>:partial::jsx": "Use inline style props on React Email components. Reserve <style> in <Head> for progressive enhancement only.",
+  // ── <link> ────────────────────────────────────────────────────────────
+  "<link>::jsx": "Use the React Email <Head> component for font imports; place all other styles inline via style props.",
+  // ── <svg> ─────────────────────────────────────────────────────────────
+  "<svg>::jsx": "Replace inline SVG with the React Email <Img> component pointing to a hosted PNG.",
+  // ── <video> ───────────────────────────────────────────────────────────
+  "<video>::jsx": "Replace <video> with a React Email <Link> wrapping an <Img> thumbnail.",
+  // ── <form> ────────────────────────────────────────────────────────────
+  "<form>::jsx": "Replace the form with a React Email <Button> or <Link> component pointing to a hosted form page.",
+  // ── @font-face ────────────────────────────────────────────────────────
+  "@font-face::jsx": "Use the React Email <Font> component in <Head> with a fallbackFontFamily prop.",
+  // ── @media ────────────────────────────────────────────────────────────
+  "@media::jsx": "Use a single-column layout with React Email <Container> and <Section>. Avoid relying on @media queries.",
+  // ── display:flex ──────────────────────────────────────────────────────
+  "display:flex::jsx": "Use React Email <Row> and <Column> components instead of flexbox.",
+  // ── display:grid ──────────────────────────────────────────────────────
+  "display:grid::jsx": "Use React Email <Row> and <Column> components instead of CSS Grid.",
+  // ── linear-gradient ───────────────────────────────────────────────────
+  "linear-gradient::jsx": "Add a solid backgroundColor style prop as fallback before the gradient.",
+  // ── box-shadow ────────────────────────────────────────────────────────
+  "box-shadow::jsx": "Use a border style prop as an alternative to boxShadow.",
+  // ── border-radius ─────────────────────────────────────────────────────
+  "border-radius::jsx": "Outlook ignores borderRadius. Use dangerouslySetInnerHTML with VML for rounded buttons if needed.",
+  // ── max-width ─────────────────────────────────────────────────────────
+  "max-width::jsx": "Use the React Email <Container> component which handles max-width across clients.",
+  // ── gap ───────────────────────────────────────────────────────────────
+  "gap::jsx": "Use padding style props on <Column> components instead of gap.",
+  // ── float ─────────────────────────────────────────────────────────────
+  "float::jsx": "Use React Email <Row> and <Column> components for side-by-side layout.",
+  // ── background-image ──────────────────────────────────────────────────
+  "background-image::jsx": "Use VML via dangerouslySetInnerHTML for Outlook background images.",
+  // ── position ──────────────────────────────────────────────────────────
+  "position::jsx": "Use React Email <Row> and <Column> components for positioning.",
+  // ── opacity ───────────────────────────────────────────────────────────
+  "opacity::jsx": "Use solid colors. Opacity is not supported in many email clients.",
+  // ── word-break ────────────────────────────────────────────────────────
+  "word-break::jsx": "Wrap long text in a <table><tr><td> element. Outlook ignores wordBreak but respects table cell widths.",
+  // ── overflow-wrap ─────────────────────────────────────────────────────
+  "overflow-wrap::jsx": "Wrap text in a <table><tr><td> element. Outlook ignores overflowWrap but respects table cell widths."
+};
+
+// src/fix-snippets/mjml-suggestions.ts
+var MJML_SUGGESTION_DATABASE = {
+  // ── <style> ───────────────────────────────────────────────────────────
+  "<style>::mjml": 'Use mj-style inline="inline" to force MJML to inline styles for Gmail compatibility.',
+  "<style>:partial::mjml": 'Use mj-style inline="inline" for critical styles; plain mj-style for progressive enhancement.',
+  // ── <link> ────────────────────────────────────────────────────────────
+  "<link>::mjml": "MJML does not support external stylesheets. Use mj-style or inline attributes.",
+  // ── <svg> ─────────────────────────────────────────────────────────────
+  "<svg>::mjml": "Replace inline SVG with an mj-image component pointing to a hosted PNG.",
+  // ── <video> ───────────────────────────────────────────────────────────
+  "<video>::mjml": "Replace <video> with an mj-image linking to a video thumbnail.",
+  // ── <form> ────────────────────────────────────────────────────────────
+  "<form>::mjml": "Replace the form with an mj-button linking to a hosted form page.",
+  // ── @font-face ────────────────────────────────────────────────────────
+  "@font-face::mjml": "Use mj-font in mj-head instead of @font-face in mj-style.",
+  // ── @media ────────────────────────────────────────────────────────────
+  "@media::mjml": "MJML generates responsive @media queries automatically. Use mj-breakpoint and mj-column widths.",
+  // ── display:flex ──────────────────────────────────────────────────────
+  "display:flex::mjml": "Use mj-section and mj-column \u2014 MJML compiles these to table-based layouts.",
+  // ── display:grid ──────────────────────────────────────────────────────
+  "display:grid::mjml": "Use mj-section and mj-column for grid-like layouts.",
+  // ── linear-gradient ───────────────────────────────────────────────────
+  "linear-gradient::mjml": "Add a background-color attribute on mj-section as a fallback.",
+  // ── box-shadow ────────────────────────────────────────────────────────
+  "box-shadow::mjml": "Use a border attribute on mj-section or mj-column as an alternative.",
+  // ── border-radius ─────────────────────────────────────────────────────
+  "border-radius::mjml": 'MJML does not generate VML \u2014 border-radius will not render in Outlook. Set border-radius="0" or accept flat corners.',
+  // ── max-width ─────────────────────────────────────────────────────────
+  "max-width::mjml": "Set the width attribute on mj-body or mj-section for maximum compatibility.",
+  // ── gap ───────────────────────────────────────────────────────────────
+  "gap::mjml": "Use padding attribute on mj-column or mj-text for spacing.",
+  // ── float ─────────────────────────────────────────────────────────────
+  "float::mjml": "Use mj-section with multiple mj-column elements for side-by-side layout.",
+  // ── background-image ──────────────────────────────────────────────────
+  "background-image::mjml": "Use background-url attribute on mj-section \u2014 MJML generates VML automatically.",
+  // ── position ──────────────────────────────────────────────────────────
+  "position::mjml": "Use mj-section and mj-column for layout positioning.",
+  // ── opacity ───────────────────────────────────────────────────────────
+  "opacity::mjml": "Use solid colors. Most email clients don't support opacity.",
+  // ── word-break ────────────────────────────────────────────────────────
+  "word-break::mjml": "mj-text renders inside a <td>, which helps. Add word-wrap: break-word to the td via mj-style."
+};
+
+// src/fix-snippets/maizzle-suggestions.ts
+var MAIZZLE_SUGGESTION_DATABASE = {
+  // ── <style> ───────────────────────────────────────────────────────────
+  "<style>::maizzle": "Prefer Tailwind utility classes \u2014 Maizzle inlines CSS via juice during build (inlineCSS: true in config.js).",
+  "<style>:partial::maizzle": "Use Tailwind utility classes for critical styles. Maizzle automatically inlines them at build time.",
+  // ── <link> ────────────────────────────────────────────────────────────
+  "<link>::maizzle": "External stylesheets are stripped. Use Tailwind CSS classes \u2014 Maizzle inlines them at build time.",
+  // ── <svg> ─────────────────────────────────────────────────────────────
+  "<svg>::maizzle": "Replace inline SVG with an <img> tag pointing to a hosted PNG.",
+  // ── <video> ───────────────────────────────────────────────────────────
+  "<video>::maizzle": "Replace <video> with a linked image thumbnail.",
+  // ── <form> ────────────────────────────────────────────────────────────
+  "<form>::maizzle": "Replace the form with a CTA link/button pointing to a hosted form page.",
+  // ── @font-face ────────────────────────────────────────────────────────
+  "@font-face::maizzle": "Use the googleFonts key in config.js \u2014 Maizzle injects the Google Fonts link tag automatically.",
+  // ── @media ────────────────────────────────────────────────────────────
+  "@media::maizzle": "Use Tailwind responsive utility classes and Maizzle's breakpoints config instead of hand-written @media.",
+  // ── display:flex ──────────────────────────────────────────────────────
+  "display:flex::maizzle": "Replace Tailwind flex classes with HTML table + MSO conditional comments for Outlook.",
+  // ── display:grid ──────────────────────────────────────────────────────
+  "display:grid::maizzle": "Replace Tailwind grid classes with HTML table layout for email compatibility.",
+  // ── linear-gradient ───────────────────────────────────────────────────
+  "linear-gradient::maizzle": "Add a bg-[color] Tailwind class as a fallback before the gradient.",
+  // ── box-shadow ────────────────────────────────────────────────────────
+  "box-shadow::maizzle": "Use Tailwind border classes as an alternative to shadow classes.",
+  // ── border-radius ─────────────────────────────────────────────────────
+  "border-radius::maizzle": "Outlook ignores border-radius. Accept flat corners or use MSO conditional VML.",
+  // ── max-width ─────────────────────────────────────────────────────────
+  "max-width::maizzle": "Wrap max-w containers with MSO conditional table for Outlook.",
+  // ── gap ───────────────────────────────────────────────────────────────
+  "gap::maizzle": "Use Tailwind padding classes on child elements instead of gap.",
+  // ── float ─────────────────────────────────────────────────────────────
+  "float::maizzle": "Use HTML tables for side-by-side layout instead of Tailwind float classes.",
+  // ── background-image ──────────────────────────────────────────────────
+  "background-image::maizzle": "Use MSO conditional VML for Outlook background images.",
+  // ── position ──────────────────────────────────────────────────────────
+  "position::maizzle": "Use HTML table layout instead of Tailwind position classes.",
+  // ── opacity ───────────────────────────────────────────────────────────
+  "opacity::maizzle": "Use solid Tailwind color classes instead of opacity."
+};
+
+// src/fix-snippets/index.ts
+var FIX_DATABASE = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, HTML_FIX_DATABASE), JSX_FIX_DATABASE), MJML_FIX_DATABASE), MAIZZLE_FIX_DATABASE);
+var SUGGESTION_DATABASE = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, HTML_SUGGESTION_DATABASE), JSX_SUGGESTION_DATABASE), MJML_SUGGESTION_DATABASE), MAIZZLE_SUGGESTION_DATABASE);
+function getCodeFix(property, clientId, framework) {
+  const clientPrefix = getClientPrefix(clientId);
+  if (framework && clientPrefix) {
+    const tier1 = FIX_DATABASE[`${property}::${clientPrefix}::${framework}`];
+    if (tier1) return tier1;
+  }
+  if (framework) {
+    const tier2 = FIX_DATABASE[`${property}::${framework}`];
+    if (tier2) return tier2;
+  }
+  if (clientPrefix) {
+    const tier3 = FIX_DATABASE[`${property}::${clientPrefix}`];
+    if (tier3) return tier3;
+  }
+  return FIX_DATABASE[property];
+}
+function isCodeFixGenericFallback(property, clientId, framework) {
+  if (!framework) return false;
+  const clientPrefix = getClientPrefix(clientId);
+  if (clientPrefix && FIX_DATABASE[`${property}::${clientPrefix}::${framework}`]) return false;
+  if (FIX_DATABASE[`${property}::${framework}`]) return false;
+  return true;
+}
+function getClientPrefix(clientId) {
+  if (clientId.startsWith("outlook-windows")) return "outlook";
+  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;
+}
 function getSuggestion(property, clientId, framework) {
   const clientPrefix = getClientPrefix(clientId);
   if (framework && clientPrefix) {
@@ -2676,6 +2733,21 @@ function serializeStyle(map) {
   return parts.join("; ");
 }
 
+// src/constants.ts
+var MAX_HTML_SIZE = 2 * 1024 * 1024;
+var GENERIC_LINK_TEXT = /* @__PURE__ */ new Set([
+  "click here",
+  "here",
+  "read more",
+  "learn more",
+  "more",
+  "link",
+  "this link",
+  "click",
+  "tap here",
+  "this"
+]);
+
 // src/transform.ts
 function inlineStyles($) {
   const styleBlocks = [];
@@ -2720,8 +2792,38 @@ function makeWarning(base, prop, clientId, framework) {
     fixType: STRUCTURAL_FIX_PROPERTIES.has(prop) ? "structural" : "css"
   });
 }
-function transformGmail(html, clientId, framework) {
-  const $ = cheerio.load(html);
+function detectAnimations($) {
+  let found = false;
+  $("[style]").each((_, el) => {
+    const style = $(el).attr("style") || "";
+    const props = parseInlineStyle(style);
+    props.forEach((_2, prop) => {
+      if (prop === "animation" || prop === "transition" || prop.startsWith("animation-") || prop.startsWith("transition-")) {
+        found = true;
+      }
+    });
+  });
+  if (!found) {
+    $("style").each((_, el) => {
+      try {
+        const ast = csstree.parse($(el).text());
+        csstree.walk(ast, {
+          enter(node) {
+            if (node.type === "Declaration") {
+              const prop = node.property.toLowerCase();
+              if (prop === "animation" || prop === "transition" || prop.startsWith("animation-") || prop.startsWith("transition-")) {
+                found = true;
+              }
+            }
+          }
+        });
+      } catch (e) {
+      }
+    });
+  }
+  return found;
+}
+function gmailAdditionalChecks($, clientId, _html, framework) {
   const warnings = [];
   let hasAtFontFace = false;
   $("style").each((_, el) => {
@@ -2745,9 +2847,10 @@ function transformGmail(html, clientId, framework) {
       message: "Gmail does not support custom web fonts."
     }, "@font-face", clientId, framework));
   }
-  inlineStyles($);
-  $("style").remove();
-  $("link[rel='stylesheet']").remove();
+  return warnings;
+}
+function gmailPostChecks($, clientId, _html, framework) {
+  const warnings = [];
   $("*").contents().filter(function() {
     return this.type === "comment";
   }).each(function() {
@@ -2764,91 +2867,11 @@ function transformGmail(html, clientId, framework) {
     message: "Gmail partially supports <style> blocks (head only, 16KB limit). Inlining recommended for safety.",
     suggestion: styleSug.text
   });
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    const removed = [];
-    props.forEach((value, prop) => {
-      if (GMAIL_STRIPPED_PROPERTIES.has(prop)) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-      if (prop === "display" && value.includes("grid")) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-      if (prop === "background" && (value.includes("linear-gradient") || value.includes("radial-gradient"))) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-    });
-    if (removed.length > 0) {
-      $(el).attr("style", serializeStyle(props));
-      for (const prop of removed) {
-        warnings.push(makeWarning({
-          severity: "warning",
-          client: clientId,
-          property: prop,
-          message: `Gmail strips "${prop}" from inline styles.`
-        }, prop, clientId, framework));
-      }
-    }
-  });
-  if ($("svg").length > 0) {
-    warnings.push(makeWarning({
-      severity: "error",
-      client: clientId,
-      property: "<svg>",
-      message: "Gmail does not support inline SVG elements."
-    }, "<svg>", clientId, framework));
-    $("svg").each((_, el) => {
-      $(el).replaceWith('<img alt="[SVG not supported]" />');
-    });
-  }
-  if ($("form").length > 0) {
-    warnings.push(makeWarning({
-      severity: "error",
-      client: clientId,
-      property: "<form>",
-      message: "Gmail strips all form elements."
-    }, "<form>", clientId, framework));
-    $("form").each((_, el) => {
-      $(el).replaceWith($(el).html() || "");
-    });
-  }
-  return { clientId, html: $.html(), warnings };
+  return warnings;
 }
-function transformOutlookWindows(html, clientId, framework) {
-  const $ = cheerio.load(html);
+function outlookWindowsAdditionalChecks($, clientId, _html, framework) {
   const warnings = [];
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    const removed = [];
-    props.forEach((value, prop) => {
-      if (OUTLOOK_WORD_UNSUPPORTED.has(prop)) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-      if ((prop === "background" || prop === "background-image") && (value.includes("linear-gradient") || value.includes("radial-gradient"))) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-    });
-    if (removed.length > 0) {
-      $(el).attr("style", serializeStyle(props));
-      for (const prop of removed) {
-        warnings.push(makeWarning({
-          severity: "warning",
-          client: clientId,
-          property: prop,
-          message: `Outlook Windows (Word engine) does not support "${prop}".`
-        }, prop, clientId, framework));
-      }
-    }
-  });
-  const borderRadiusElements = $("[style*='border-radius']");
-  if (borderRadiusElements.length > 0) {
+  if ($("[style*='border-radius']").length > 0) {
     warnings.push(makeWarning({
       severity: "warning",
       client: clientId,
@@ -2856,8 +2879,7 @@ function transformOutlookWindows(html, clientId, framework) {
       message: "Outlook Windows ignores border-radius. Buttons and containers will have sharp corners."
     }, "border-radius", clientId, framework));
   }
-  const maxWidthElements = $("[style*='max-width']");
-  if (maxWidthElements.length > 0) {
+  if ($("[style*='max-width']").length > 0) {
     warnings.push(makeWarning({
       severity: "warning",
       client: clientId,
@@ -2884,44 +2906,10 @@ function transformOutlookWindows(html, clientId, framework) {
       message: "Outlook Windows requires VML for background images."
     }, "background-image", clientId, framework));
   }
-  return { clientId, html: $.html(), warnings };
-}
-function transformOutlookWeb(html, clientId, framework) {
-  const $ = cheerio.load(html);
-  const warnings = [];
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    const removed = [];
-    const outlookWebUnsupported = /* @__PURE__ */ new Set([
-      "position",
-      "transform",
-      "animation",
-      "transition"
-    ]);
-    props.forEach((_2, prop) => {
-      if (outlookWebUnsupported.has(prop)) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-    });
-    if (removed.length > 0) {
-      $(el).attr("style", serializeStyle(props));
-      for (const prop of removed) {
-        warnings.push(makeWarning({
-          severity: "warning",
-          client: clientId,
-          property: prop,
-          message: `Outlook 365 Web does not support "${prop}".`
-        }, prop, clientId, framework));
-      }
-    }
-  });
-  return { clientId, html: $.html(), warnings };
+  return warnings;
 }
-function transformAppleMail(html, clientId, _framework) {
+function appleMailAdditionalChecks($, clientId) {
   const warnings = [];
-  const $ = cheerio.load(html);
   const imgsWithTransparentBg = $("img").filter((_, el) => {
     const src = $(el).attr("src") || "";
     return src.endsWith(".png") || src.endsWith(".svg");
@@ -2935,10 +2923,9 @@ function transformAppleMail(html, clientId, _framework) {
       suggestion: "Add a white background or padding around images, or use dark-mode-friendly image variants."
     });
   }
-  return { clientId, html: $.html(), warnings };
+  return warnings;
 }
-function transformYahooMail(html, clientId, framework) {
-  const $ = cheerio.load(html);
+function yahooAdditionalChecks($, clientId, _html, framework) {
   const warnings = [];
   warnings.push({
     severity: "info",
@@ -2954,161 +2941,23 @@ function transformYahooMail(html, clientId, framework) {
       client: clientId,
       property: "background-image",
       message: "Yahoo Mail has inconsistent support for CSS background images."
-    }, "background-image", clientId, framework));
-  }
-  const yahooStripped = /* @__PURE__ */ new Set([
-    "position",
-    "box-shadow",
-    "transform",
-    "animation",
-    "transition",
-    "opacity"
-  ]);
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    const removed = [];
-    props.forEach((_2, prop) => {
-      if (yahooStripped.has(prop)) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-    });
-    if (removed.length > 0) {
-      $(el).attr("style", serializeStyle(props));
-      for (const prop of removed) {
-        warnings.push(makeWarning({
-          severity: "warning",
-          client: clientId,
-          property: prop,
-          message: `Yahoo Mail strips "${prop}" from styles.`
-        }, prop, clientId, framework));
-      }
-    }
-  });
-  return { clientId, html: $.html(), warnings };
-}
-function transformSamsungMail(html, clientId, framework) {
-  const $ = cheerio.load(html);
-  const warnings = [];
-  const samsungPartial = /* @__PURE__ */ new Set([
-    "box-shadow",
-    "transform",
-    "animation",
-    "transition",
-    "opacity"
-  ]);
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    props.forEach((_2, prop) => {
-      if (samsungPartial.has(prop)) {
-        warnings.push(makeWarning({
-          severity: "info",
-          client: clientId,
-          property: prop,
-          message: `Samsung Mail has limited support for "${prop}".`
-        }, prop, clientId, framework));
-      }
-    });
-  });
-  return { clientId, html: $.html(), warnings };
-}
-function transformThunderbird(html, clientId, _framework) {
-  const $ = cheerio.load(html);
-  const warnings = [];
-  let hasAnimationOrTransition = false;
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    props.forEach((_2, prop) => {
-      if (prop === "animation" || prop === "transition" || prop.startsWith("animation-") || prop.startsWith("transition-")) {
-        hasAnimationOrTransition = true;
-      }
-    });
-  });
-  if (!hasAnimationOrTransition) {
-    $("style").each((_, el) => {
-      try {
-        const ast = csstree.parse($(el).text());
-        csstree.walk(ast, {
-          enter(node) {
-            if (node.type === "Declaration") {
-              const prop = node.property.toLowerCase();
-              if (prop === "animation" || prop === "transition" || prop.startsWith("animation-") || prop.startsWith("transition-")) {
-                hasAnimationOrTransition = true;
-              }
-            }
-          }
-        });
-      } catch (e) {
-      }
-    });
-  }
-  if (hasAnimationOrTransition) {
-    warnings.push({
-      severity: "info",
-      client: clientId,
-      property: "animation",
-      message: "Thunderbird does not support CSS animations or transitions."
-    });
-  }
-  return { clientId, html: $.html(), warnings };
-}
-function transformHeyMail(html, clientId, framework) {
-  const $ = cheerio.load(html);
-  const warnings = [];
-  const heyStripped = /* @__PURE__ */ new Set([
-    "transform",
-    "animation",
-    "transition"
-  ]);
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    const removed = [];
-    props.forEach((value, prop) => {
-      if (heyStripped.has(prop)) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-      if (prop === "position" && (value.includes("fixed") || value.includes("sticky"))) {
-        removed.push(prop);
-        props.delete(prop);
-      }
-    });
-    if (removed.length > 0) {
-      $(el).attr("style", serializeStyle(props));
-      for (const prop of removed) {
-        warnings.push(makeWarning({
-          severity: "warning",
-          client: clientId,
-          property: prop,
-          message: `HEY Mail strips "${prop}" for security and rendering consistency.`
-        }, prop, clientId, framework));
-      }
-    }
-  });
-  if ($("form").length > 0) {
-    warnings.push(makeWarning({
-      severity: "error",
-      client: clientId,
-      property: "<form>",
-      message: "HEY Mail removes form elements for security."
-    }, "<form>", clientId, framework));
-    $("form").each((_, el) => {
-      $(el).replaceWith($(el).html() || "");
-    });
+    }, "background-image", clientId, framework));
   }
-  if ($("link[rel='stylesheet']").length > 0) {
-    warnings.push(makeWarning({
-      severity: "error",
+  return warnings;
+}
+function thunderbirdAdditionalChecks($, clientId) {
+  if (detectAnimations($)) {
+    return [{
+      severity: "info",
       client: clientId,
-      property: "<link>",
-      message: "HEY Mail does not load external stylesheets."
-    }, "<link>", clientId, framework));
-    $("link[rel='stylesheet']").remove();
+      property: "animation",
+      message: "Thunderbird does not support CSS animations or transitions."
+    }];
   }
+  return [];
+}
+function heyAdditionalChecks(_$, clientId, html) {
+  const warnings = [];
   if (!html.includes("prefers-color-scheme")) {
     warnings.push({
       severity: "info",
@@ -3118,96 +2967,270 @@ function transformHeyMail(html, clientId, framework) {
       suggestion: "Add a @media (prefers-color-scheme: dark) block to optimize for HEY's audience."
     });
   }
-  return { clientId, html: $.html(), warnings };
+  return warnings;
+}
+function superhumanAdditionalChecks($, clientId, html) {
+  const warnings = [];
+  if (detectAnimations($)) {
+    warnings.push({
+      severity: "info",
+      client: clientId,
+      property: "animation",
+      message: "Superhuman may honor OS-level 'reduce motion' preferences, disabling animations.",
+      suggestion: "Use @media (prefers-reduced-motion: reduce) to provide static fallbacks."
+    });
+  }
+  warnings.push({
+    severity: "info",
+    client: clientId,
+    property: "<style>",
+    message: "Superhuman uses Chromium rendering with excellent CSS support. Flexbox, Grid, CSS variables, and modern properties all work."
+  });
+  return warnings;
 }
-function transformSuperhuman(html, clientId, framework) {
+var EMPTY_SET = /* @__PURE__ */ new Set();
+var CLIENT_CONFIGS = {
+  "gmail-web": {
+    id: "gmail-web",
+    strippedProperties: GMAIL_STRIPPED_PROPERTIES,
+    stripMode: "strip",
+    valueStrips: [
+      { prop: "display", pattern: /grid/ },
+      { prop: "background", pattern: /linear-gradient|radial-gradient/ }
+    ],
+    inlineAndStripStyles: true,
+    stripExternalStylesheets: true,
+    stripForms: true,
+    stripSvg: true,
+    additionalChecks: gmailAdditionalChecks
+  },
+  "gmail-android": {
+    id: "gmail-android",
+    strippedProperties: GMAIL_STRIPPED_PROPERTIES,
+    stripMode: "strip",
+    valueStrips: [
+      { prop: "display", pattern: /grid/ },
+      { prop: "background", pattern: /linear-gradient|radial-gradient/ }
+    ],
+    inlineAndStripStyles: true,
+    stripExternalStylesheets: true,
+    stripForms: true,
+    stripSvg: true,
+    additionalChecks: gmailAdditionalChecks
+  },
+  "gmail-ios": {
+    id: "gmail-ios",
+    strippedProperties: GMAIL_STRIPPED_PROPERTIES,
+    stripMode: "strip",
+    valueStrips: [
+      { prop: "display", pattern: /grid/ },
+      { prop: "background", pattern: /linear-gradient|radial-gradient/ }
+    ],
+    inlineAndStripStyles: true,
+    stripExternalStylesheets: true,
+    stripForms: true,
+    stripSvg: true,
+    additionalChecks: gmailAdditionalChecks
+  },
+  "outlook-windows": {
+    id: "outlook-windows",
+    strippedProperties: OUTLOOK_WORD_UNSUPPORTED,
+    stripMode: "strip",
+    valueStrips: [
+      { prop: "background", pattern: /linear-gradient|radial-gradient/ },
+      { prop: "background-image", pattern: /linear-gradient|radial-gradient/ }
+    ],
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: false,
+    stripForms: false,
+    stripSvg: false,
+    additionalChecks: outlookWindowsAdditionalChecks
+  },
+  "outlook-web": {
+    id: "outlook-web",
+    strippedProperties: /* @__PURE__ */ new Set(["position", "transform", "animation", "transition"]),
+    stripMode: "strip",
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: false,
+    stripForms: false,
+    stripSvg: false
+  },
+  "apple-mail-macos": {
+    id: "apple-mail-macos",
+    strippedProperties: EMPTY_SET,
+    stripMode: "strip",
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: false,
+    stripForms: false,
+    stripSvg: false,
+    additionalChecks: appleMailAdditionalChecks
+  },
+  "apple-mail-ios": {
+    id: "apple-mail-ios",
+    strippedProperties: EMPTY_SET,
+    stripMode: "strip",
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: false,
+    stripForms: false,
+    stripSvg: false,
+    additionalChecks: appleMailAdditionalChecks
+  },
+  "yahoo-mail": {
+    id: "yahoo-mail",
+    strippedProperties: /* @__PURE__ */ new Set(["position", "box-shadow", "transform", "animation", "transition", "opacity"]),
+    stripMode: "strip",
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: false,
+    stripForms: false,
+    stripSvg: false,
+    additionalChecks: yahooAdditionalChecks
+  },
+  "samsung-mail": {
+    id: "samsung-mail",
+    strippedProperties: /* @__PURE__ */ new Set(["box-shadow", "transform", "animation", "transition", "opacity"]),
+    stripMode: "info",
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: false,
+    stripForms: false,
+    stripSvg: false
+  },
+  "thunderbird": {
+    id: "thunderbird",
+    strippedProperties: EMPTY_SET,
+    stripMode: "strip",
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: false,
+    stripForms: false,
+    stripSvg: false,
+    additionalChecks: thunderbirdAdditionalChecks
+  },
+  "hey-mail": {
+    id: "hey-mail",
+    strippedProperties: /* @__PURE__ */ new Set(["transform", "animation", "transition"]),
+    stripMode: "strip",
+    valueStrips: [
+      { prop: "position", pattern: /fixed|sticky/ }
+    ],
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: true,
+    stripForms: true,
+    stripSvg: false,
+    additionalChecks: heyAdditionalChecks
+  },
+  "superhuman": {
+    id: "superhuman",
+    strippedProperties: EMPTY_SET,
+    stripMode: "strip",
+    inlineAndStripStyles: false,
+    stripExternalStylesheets: true,
+    stripForms: true,
+    stripSvg: false,
+    additionalChecks: superhumanAdditionalChecks
+  }
+};
+function applyTransform(html, config, framework) {
   const $ = cheerio.load(html);
   const warnings = [];
-  if ($("form").length > 0) {
+  const clientId = config.id;
+  if (config.additionalChecks && config.inlineAndStripStyles) {
+    warnings.push(...config.additionalChecks($, clientId, html, framework));
+  }
+  if (config.inlineAndStripStyles) {
+    inlineStyles($);
+    $("style").remove();
+  }
+  if (config.stripExternalStylesheets) {
+    if ($("link[rel='stylesheet']").length > 0) {
+      warnings.push(makeWarning({
+        severity: "error",
+        client: clientId,
+        property: "<link>",
+        message: `${clientId} does not load external stylesheets.`
+      }, "<link>", clientId, framework));
+      $("link[rel='stylesheet']").remove();
+    }
+  }
+  if (config.stripForms && $("form").length > 0) {
     warnings.push(makeWarning({
       severity: "error",
       client: clientId,
       property: "<form>",
-      message: "Superhuman removes form elements."
+      message: `${clientId} removes form elements.`
     }, "<form>", clientId, framework));
     $("form").each((_, el) => {
       $(el).replaceWith($(el).html() || "");
     });
   }
-  if ($("link[rel='stylesheet']").length > 0) {
+  if (config.stripSvg && $("svg").length > 0) {
     warnings.push(makeWarning({
       severity: "error",
       client: clientId,
-      property: "<link>",
-      message: "Superhuman does not load external stylesheets."
-    }, "<link>", clientId, framework));
-    $("link[rel='stylesheet']").remove();
-  }
-  let hasAnimation = false;
-  $("[style]").each((_, el) => {
-    const style = $(el).attr("style") || "";
-    const props = parseInlineStyle(style);
-    props.forEach((_2, prop) => {
-      if (prop === "animation" || prop === "transition" || prop.startsWith("animation-") || prop.startsWith("transition-")) {
-        hasAnimation = true;
-      }
+      property: "<svg>",
+      message: `${clientId} does not support inline SVG elements.`
+    }, "<svg>", clientId, framework));
+    $("svg").each((_, el) => {
+      $(el).replaceWith('<img alt="[SVG not supported]" />');
     });
-  });
-  if (!hasAnimation) {
-    $("style").each((_, el) => {
-      try {
-        const ast = csstree.parse($(el).text());
-        csstree.walk(ast, {
-          enter(node) {
-            if (node.type === "Declaration") {
-              const prop = node.property.toLowerCase();
-              if (prop === "animation" || prop === "transition" || prop.startsWith("animation-") || prop.startsWith("transition-")) {
-                hasAnimation = true;
-              }
-            }
+  }
+  if (config.strippedProperties.size > 0 || config.valueStrips && config.valueStrips.length > 0) {
+    $("[style]").each((_, el) => {
+      const style = $(el).attr("style") || "";
+      const props = parseInlineStyle(style);
+      const removed = [];
+      props.forEach((value, prop) => {
+        var _a;
+        if (config.strippedProperties.has(prop)) {
+          if (config.stripMode === "strip") {
+            removed.push(prop);
+            props.delete(prop);
+          } else {
+            warnings.push(makeWarning({
+              severity: "info",
+              client: clientId,
+              property: prop,
+              message: `${clientId} has limited support for "${prop}".`
+            }, prop, clientId, framework));
           }
-        });
-      } catch (e) {
+          return;
+        }
+        for (const vs of (_a = config.valueStrips) != null ? _a : []) {
+          if (prop === vs.prop && vs.pattern.test(value)) {
+            removed.push(prop);
+            props.delete(prop);
+            return;
+          }
+        }
+      });
+      if (removed.length > 0) {
+        $(el).attr("style", serializeStyle(props));
+        for (const prop of removed) {
+          warnings.push(makeWarning({
+            severity: "warning",
+            client: clientId,
+            property: prop,
+            message: `${clientId} strips "${prop}" from styles.`
+          }, prop, clientId, framework));
+        }
       }
     });
   }
-  if (hasAnimation) {
-    warnings.push({
-      severity: "info",
-      client: clientId,
-      property: "animation",
-      message: "Superhuman may honor OS-level 'reduce motion' preferences, disabling animations.",
-      suggestion: "Use @media (prefers-reduced-motion: reduce) to provide static fallbacks."
-    });
+  if (config.inlineAndStripStyles) {
+    warnings.push(...gmailPostChecks($, clientId, html, framework));
+  }
+  if (config.additionalChecks && !config.inlineAndStripStyles) {
+    warnings.push(...config.additionalChecks($, clientId, html, framework));
   }
-  warnings.push({
-    severity: "info",
-    client: clientId,
-    property: "<style>",
-    message: "Superhuman uses Chromium rendering with excellent CSS support. Flexbox, Grid, CSS variables, and modern properties all work."
-  });
   return { clientId, html: $.html(), warnings };
 }
-var TRANSFORMERS = {
-  "gmail-web": transformGmail,
-  "gmail-android": transformGmail,
-  "gmail-ios": transformGmail,
-  "outlook-web": transformOutlookWeb,
-  "outlook-windows": transformOutlookWindows,
-  "apple-mail-macos": transformAppleMail,
-  "apple-mail-ios": transformAppleMail,
-  "yahoo-mail": transformYahooMail,
-  "samsung-mail": transformSamsungMail,
-  "thunderbird": transformThunderbird,
-  "hey-mail": transformHeyMail,
-  "superhuman": transformSuperhuman
-};
 function transformForClient(html, clientId, framework) {
   if (!html || !html.trim()) {
     return { clientId, html: html || "", warnings: [] };
   }
-  const transformer = TRANSFORMERS[clientId];
-  if (!transformer) {
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
+  const config = CLIENT_CONFIGS[clientId];
+  if (!config) {
     return {
       clientId,
       html,
@@ -3221,10 +3244,10 @@ function transformForClient(html, clientId, framework) {
       ]
     };
   }
-  return transformer(html, clientId, framework);
+  return applyTransform(html, config, framework);
 }
 function transformForAllClients(html, framework) {
-  return Object.keys(TRANSFORMERS).map(
+  return Object.keys(CLIENT_CONFIGS).map(
     (clientId) => transformForClient(html, clientId, framework)
   );
 }
@@ -3233,20 +3256,35 @@ function transformForAllClients(html, framework) {
 import * as cheerio2 from "cheerio";
 import * as csstree2 from "css-tree";
 function analyzeEmail(html, framework) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g;
   if (!html || !html.trim()) {
     return [];
   }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
   const $ = cheerio2.load(html);
   const warnings = [];
   const seenWarnings = /* @__PURE__ */ new Set();
   function addWarning(w) {
-    const key = `${w.client}:${w.property}:${w.severity}`;
+    const key = `${w.client}:${w.property}:${w.severity}:${w.selector || ""}`;
     if (!seenWarnings.has(key)) {
       seenWarnings.add(key);
       warnings.push(w);
     }
   }
+  function describeSelector(el) {
+    var _a2;
+    const $el = $(el);
+    const tag = ((_a2 = el.tagName) == null ? void 0 : _a2.toLowerCase()) || "";
+    const cls = $el.attr("class");
+    const id = $el.attr("id");
+    if (id) return `${tag}#${id}`;
+    if (cls) return `${tag}.${cls.split(/\s+/)[0]}`;
+    const href = $el.attr("href");
+    if (href) return `${tag}[href]`;
+    return tag;
+  }
   if ($("style").length > 0) {
     for (const client of EMAIL_CLIENTS) {
       const support = (_a = CSS_SUPPORT["<style>"]) == null ? void 0 : _a[client.id];
@@ -3351,25 +3389,43 @@ function analyzeEmail(html, framework) {
   }
   const parsedAtRules = /* @__PURE__ */ new Set();
   const parsedProperties = /* @__PURE__ */ new Set();
+  const propertyLines = /* @__PURE__ */ new Map();
   $("style").each((_, el) => {
     const cssText = $(el).text();
     try {
-      const ast = csstree2.parse(cssText, { parseCustomProperty: true });
+      const ast = csstree2.parse(cssText, { parseCustomProperty: true, positions: true });
       csstree2.walk(ast, {
         enter(node) {
           if (node.type === "Atrule") {
             parsedAtRules.add(`@${node.name}`);
           }
           if (node.type === "Declaration") {
-            parsedProperties.add(node.property.toLowerCase());
-            if (node.property.toLowerCase() === "display") {
+            const prop = node.property.toLowerCase();
+            parsedProperties.add(prop);
+            if (node.loc && !propertyLines.has(prop)) {
+              propertyLines.set(prop, node.loc.start.line);
+            }
+            if (prop === "display") {
               const value = csstree2.generate(node.value);
-              if (value.includes("flex")) parsedProperties.add("display:flex");
-              if (value.includes("grid")) parsedProperties.add("display:grid");
+              if (value.includes("flex")) {
+                parsedProperties.add("display:flex");
+                if (node.loc && !propertyLines.has("display:flex")) {
+                  propertyLines.set("display:flex", node.loc.start.line);
+                }
+              }
+              if (value.includes("grid")) {
+                parsedProperties.add("display:grid");
+                if (node.loc && !propertyLines.has("display:grid")) {
+                  propertyLines.set("display:grid", node.loc.start.line);
+                }
+              }
             }
             const valueStr = csstree2.generate(node.value);
             if (valueStr.includes("linear-gradient") || valueStr.includes("radial-gradient")) {
               parsedProperties.add("linear-gradient");
+              if (node.loc && !propertyLines.has("linear-gradient")) {
+                propertyLines.set("linear-gradient", node.loc.start.line);
+              }
             }
           }
         }
@@ -3419,43 +3475,33 @@ function analyzeEmail(html, framework) {
   $("[style]").each((_, el) => {
     const style = $(el).attr("style") || "";
     const props = parseStyleProperties(style);
+    const selector = describeSelector(el);
     for (const prop of props) {
       if (prop === "display") {
         const value2 = getStyleValue(style, "display");
         if (value2 == null ? void 0 : value2.includes("flex")) {
-          checkPropertySupport("display:flex", addWarning, framework);
+          checkPropertySupport("display:flex", addWarning, framework, selector);
         } else if (value2 == null ? void 0 : value2.includes("grid")) {
-          checkPropertySupport("display:grid", addWarning, framework);
+          checkPropertySupport("display:grid", addWarning, framework, selector);
         }
       }
       if (cssPropertiesToCheck.includes(prop)) {
-        checkPropertySupport(prop, addWarning, framework);
+        checkPropertySupport(prop, addWarning, framework, selector);
       }
       const value = getStyleValue(style, prop);
       if (value && (value.includes("linear-gradient") || value.includes("radial-gradient"))) {
-        checkPropertySupport("linear-gradient", addWarning, framework);
+        checkPropertySupport("linear-gradient", addWarning, framework, selector);
       }
     }
   });
   for (const prop of parsedProperties) {
     if (prop.includes(":")) continue;
     if (!cssPropertiesToCheck.includes(prop)) continue;
-    for (const client of EMAIL_CLIENTS) {
-      const support = (_h = CSS_SUPPORT[prop]) == null ? void 0 : _h[client.id];
-      if (support === "unsupported") {
-        addWarning({
-          severity: "warning",
-          client: client.id,
-          property: prop,
-          message: `${client.name} does not support "${prop}" in <style> blocks.`,
-          fixType: getFixType(prop)
-        });
-      }
-    }
+    checkPropertySupport(prop, addWarning, framework, void 0, propertyLines.get(prop));
   }
   for (const compound of ["display:flex", "display:grid", "linear-gradient"]) {
     if (parsedProperties.has(compound)) {
-      checkPropertySupport(compound, addWarning, framework);
+      checkPropertySupport(compound, addWarning, framework, void 0, propertyLines.get(compound));
     }
   }
   const severityOrder = { error: 0, warning: 1, info: 2 };
@@ -3465,7 +3511,7 @@ function analyzeEmail(html, framework) {
 function getFixType(prop) {
   return STRUCTURAL_FIX_PROPERTIES.has(prop) ? "structural" : "css";
 }
-function checkPropertySupport(prop, addWarning, framework) {
+function checkPropertySupport(prop, addWarning, framework, selector, line) {
   const supportData = CSS_SUPPORT[prop];
   if (!supportData) return;
   const fixType = getFixType(prop);
@@ -3474,7 +3520,7 @@ function checkPropertySupport(prop, addWarning, framework) {
     if (support === "unsupported") {
       const sug = getSuggestion(prop, client.id, framework);
       const fix = getCodeFix(prop, client.id, framework);
-      addWarning(__spreadValues({
+      addWarning(__spreadValues(__spreadValues(__spreadValues({
         severity: "warning",
         client: client.id,
         property: prop,
@@ -3482,11 +3528,11 @@ function checkPropertySupport(prop, addWarning, framework) {
         suggestion: sug.text,
         fix,
         fixType
-      }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
+      }, selector ? { selector } : {}), line !== void 0 ? { line } : {}), framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
     } else if (support === "partial") {
       const sug = getSuggestion(prop, client.id, framework);
       const fix = getCodeFix(prop, client.id, framework);
-      addWarning(__spreadValues({
+      addWarning(__spreadValues(__spreadValues(__spreadValues({
         severity: "info",
         client: client.id,
         property: prop,
@@ -3494,7 +3540,7 @@ function checkPropertySupport(prop, addWarning, framework) {
         suggestion: sug.text,
         fix,
         fixType
-      }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
+      }, selector ? { selector } : {}), line !== void 0 ? { line } : {}), framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
     }
   }
 }
@@ -3510,13 +3556,260 @@ function generateCompatibilityScore(warnings) {
   }
   return result;
 }
+function warningsForClient(warnings, clientId) {
+  return warnings.filter((w) => w.client === clientId);
+}
+function errorWarnings(warnings) {
+  return warnings.filter((w) => w.severity === "error");
+}
+function structuralWarnings(warnings) {
+  return warnings.filter((w) => w.fixType === "structural");
+}
 
 // src/dark-mode.ts
 import * as cheerio3 from "cheerio";
+import * as csstree3 from "css-tree";
+
+// src/color-utils.ts
+var NAMED_COLORS = {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 111, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50]
+};
+function parseColor(value) {
+  if (!value) return null;
+  const v = value.trim().toLowerCase();
+  if (v === "inherit" || v === "currentcolor" || v === "initial" || v === "unset" || v.startsWith("var(")) {
+    return null;
+  }
+  if (v === "transparent") {
+    return { r: 0, g: 0, b: 0, a: 0 };
+  }
+  const named = NAMED_COLORS[v];
+  if (named) {
+    return { r: named[0], g: named[1], b: named[2], a: 1 };
+  }
+  if (v.startsWith("#")) {
+    const hex = v.slice(1);
+    if (hex.length === 3) {
+      return {
+        r: parseInt(hex[0] + hex[0], 16),
+        g: parseInt(hex[1] + hex[1], 16),
+        b: parseInt(hex[2] + hex[2], 16),
+        a: 1
+      };
+    }
+    if (hex.length === 6) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+        a: 1
+      };
+    }
+    if (hex.length === 8) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+        a: parseInt(hex.slice(6, 8), 16) / 255
+      };
+    }
+    return null;
+  }
+  const rgbMatch = v.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)$/);
+  if (rgbMatch) {
+    return {
+      r: Math.min(255, parseInt(rgbMatch[1], 10)),
+      g: Math.min(255, parseInt(rgbMatch[2], 10)),
+      b: Math.min(255, parseInt(rgbMatch[3], 10)),
+      a: rgbMatch[4] !== void 0 ? Math.min(1, parseFloat(rgbMatch[4])) : 1
+    };
+  }
+  return null;
+}
+function relativeLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function contrastRatio(l1, l2) {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function wcagGrade(ratio) {
+  if (ratio >= 7) return "AAA";
+  if (ratio >= 4.5) return "AA";
+  if (ratio >= 3) return "AA Large";
+  return "Fail";
+}
+function alphaBlend(fg, bgR, bgG, bgB) {
+  const a = fg.a;
+  return [
+    Math.round(fg.r * a + bgR * (1 - a)),
+    Math.round(fg.g * a + bgG * (1 - a)),
+    Math.round(fg.b * a + bgB * (1 - a))
+  ];
+}
+
+// src/dark-mode.ts
+var LIGHT_THRESHOLD = 0.7;
+var DARK_THRESHOLD = 0.15;
 function simulateDarkMode(html, clientId) {
   if (!html || !html.trim()) {
     return { html: html || "", warnings: [] };
   }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
   const $ = cheerio3.load(html);
   const warnings = [];
   $("img").each((_, el) => {
@@ -3591,24 +3884,115 @@ function simulateDarkMode(html, clientId) {
   $("body").css("color", "#e0e0e0");
   return { html: $.html(), warnings };
 }
+function invertColor(value, mode) {
+  const parsed = parseColor(value);
+  if (!parsed || parsed.a === 0) return null;
+  const lum = relativeLuminance(parsed.r, parsed.g, parsed.b);
+  if (mode === "full") {
+    if (lum > LIGHT_THRESHOLD) {
+      return "#1a1a1a";
+    }
+    if (lum < DARK_THRESHOLD) {
+      return "#e0e0e0";
+    }
+    return null;
+  } else {
+    if (lum > 0.85) {
+      return "#2d2d2d";
+    }
+    if (lum < 0.05) {
+      return "#d4d4d4";
+    }
+    return null;
+  }
+}
+var COLOR_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background-color",
+  "border-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "outline-color"
+]);
+function extractBackgroundColor(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("#") || trimmed.startsWith("rgb") || /^[a-z]+$/i.test(trimmed.split(/\s/)[0])) {
+    const firstToken = trimmed.split(/\s/)[0];
+    if (parseColor(firstToken)) return firstToken;
+  }
+  return null;
+}
 function applyColorInversion($, mode) {
   $("[style]").each((_, el) => {
     const style = $(el).attr("style") || "";
-    if (mode === "full") {
-      const updated = style.replace(/background-color:\s*(#fff|#ffffff|white|#fafafa|#f5f5f5|#f0f0f0|#fefefe)/gi, "background-color: #1a1a1a").replace(/background:\s*(#fff|#ffffff|white|#fafafa|#f5f5f5|#f0f0f0|#fefefe)/gi, "background: #1a1a1a").replace(/color:\s*(#000|#000000|black|#111|#222|#333)/gi, "color: #e0e0e0").replace(/color:\s*(#fff|#ffffff|white)/gi, "color: #e0e0e0").replace(
-        /border(?:-[a-z]+)?:\s*[^;]*(?:#000|#111|#222|#333|black)/gi,
-        (match) => match.replace(/#000|#111|#222|#333|black/gi, "#555")
-      );
-      $(el).attr("style", updated);
-    } else {
-      const updated = style.replace(/background-color:\s*(#fff|#ffffff|white)/gi, "background-color: #2d2d2d").replace(/background:\s*(#fff|#ffffff|white)/gi, "background: #2d2d2d").replace(/color:\s*(#000|#000000|black)/gi, "color: #d4d4d4");
-      $(el).attr("style", updated);
+    const props = parseInlineStyle(style);
+    let changed = false;
+    props.forEach((value, prop) => {
+      if (COLOR_PROPS.has(prop)) {
+        const inverted = invertColor(value, mode);
+        if (inverted) {
+          props.set(prop, inverted);
+          changed = true;
+        }
+      }
+      if (prop === "background") {
+        const bgColor = extractBackgroundColor(value);
+        if (bgColor) {
+          const inverted = invertColor(bgColor, mode);
+          if (inverted) {
+            props.set(prop, value.replace(bgColor, inverted));
+            changed = true;
+          }
+        }
+      }
+    });
+    if (changed) {
+      $(el).attr("style", serializeStyle(props));
+    }
+  });
+  $("style").each((_, el) => {
+    const cssText = $(el).text();
+    try {
+      const ast = csstree3.parse(cssText, { parseCustomProperty: true });
+      let modified = false;
+      csstree3.walk(ast, {
+        enter(node) {
+          if (node.type !== "Declaration") return;
+          const prop = node.property.toLowerCase();
+          if (!COLOR_PROPS.has(prop) && prop !== "background") return;
+          const valueStr = csstree3.generate(node.value);
+          if (prop === "background") {
+            const bgColor = extractBackgroundColor(valueStr);
+            if (bgColor) {
+              const inverted = invertColor(bgColor, mode);
+              if (inverted) {
+                const newValue = valueStr.replace(bgColor, inverted);
+                node.value = csstree3.parse(newValue, { context: "value" });
+                modified = true;
+              }
+            }
+          } else {
+            const inverted = invertColor(valueStr, mode);
+            if (inverted) {
+              node.value = csstree3.parse(inverted, { context: "value" });
+              modified = true;
+            }
+          }
+        }
+      });
+      if (modified) {
+        $(el).text(csstree3.generate(ast));
+      }
+    } catch (e) {
     }
   });
   $("[bgcolor]").each((_, el) => {
-    const bgcolor = ($(el).attr("bgcolor") || "").toLowerCase();
-    if (bgcolor === "#ffffff" || bgcolor === "#fff" || bgcolor === "white" || bgcolor === "#fafafa" || bgcolor === "#f5f5f5") {
-      $(el).attr("bgcolor", mode === "full" ? "#1a1a1a" : "#2d2d2d");
+    const bgcolor = $(el).attr("bgcolor") || "";
+    const inverted = invertColor(bgcolor, mode);
+    if (inverted) {
+      $(el).attr("bgcolor", inverted);
     }
   });
 }
@@ -4254,6 +4638,9 @@ function analyzeSpam(html, options) {
   if (!html || !html.trim()) {
     return { score: 100, level: "low", issues: [] };
   }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
   const $ = cheerio4.load(html);
   const text = extractVisibleText($);
   const issues = [];
@@ -4295,18 +4682,6 @@ function analyzeSpam(html, options) {
 
 // src/link-validator.ts
 import * as cheerio5 from "cheerio";
-var GENERIC_LINK_TEXT = /* @__PURE__ */ new Set([
-  "click here",
-  "here",
-  "read more",
-  "learn more",
-  "more",
-  "link",
-  "this link",
-  "click",
-  "tap here",
-  "this"
-]);
 function classifyHref(href) {
   if (!href || !href.trim()) return "empty";
   const h = href.trim().toLowerCase();
@@ -4328,12 +4703,15 @@ function validateLinks(html) {
     return {
       totalLinks: 0,
       issues: [],
-      breakdown: { https: 0, http: 0, mailto: 0, tel: 0, anchor: 0, other: 0 }
+      breakdown: { https: 0, http: 0, mailto: 0, tel: 0, anchor: 0, javascript: 0, protocolRelative: 0, other: 0 }
     };
   }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
   const $ = cheerio5.load(html);
   const issues = [];
-  const breakdown = { https: 0, http: 0, mailto: 0, tel: 0, anchor: 0, other: 0 };
+  const breakdown = { https: 0, http: 0, mailto: 0, tel: 0, anchor: 0, javascript: 0, protocolRelative: 0, other: 0 };
   const links = $("a");
   const totalLinks = links.length;
   if (totalLinks === 0) {
@@ -4344,6 +4722,7 @@ function validateLinks(html) {
     });
     return { totalLinks: 0, issues, breakdown };
   }
+  const hrefCounts = /* @__PURE__ */ new Map();
   links.each((_, el) => {
     const href = $(el).attr("href") || "";
     const text = $(el).text().trim();
@@ -4364,10 +4743,19 @@ function validateLinks(html) {
       case "anchor":
         breakdown.anchor++;
         break;
+      case "javascript":
+        breakdown.javascript++;
+        break;
+      case "protocol-relative":
+        breakdown.protocolRelative++;
+        break;
       default:
         breakdown.other++;
         break;
     }
+    if (href && href.trim()) {
+      hrefCounts.set(href, (hrefCounts.get(href) || 0) + 1);
+    }
     if (!href || !href.trim()) {
       issues.push({
         severity: "error",
@@ -4406,6 +4794,15 @@ function validateLinks(html) {
         text: text.slice(0, 80) || "(no text)"
       });
     }
+    if (category === "protocol-relative") {
+      issues.push({
+        severity: "warning",
+        rule: "protocol-relative",
+        message: "Protocol-relative URL may break in email clients \u2014 use https:// explicitly",
+        href: href.slice(0, 120),
+        text: text.slice(0, 80) || "(no text)"
+      });
+    }
     if (text && GENERIC_LINK_TEXT.has(text.toLowerCase())) {
       issues.push({
         severity: "warning",
@@ -4432,6 +4829,15 @@ function validateLinks(html) {
         text: text.slice(0, 80) || "(no text)"
       });
     }
+    if (category === "tel" && href.trim().toLowerCase() === "tel:") {
+      issues.push({
+        severity: "error",
+        rule: "empty-tel",
+        message: "tel: link has no phone number",
+        href,
+        text: text.slice(0, 80) || "(no text)"
+      });
+    }
     if (href.length > 2e3) {
       issues.push({
         severity: "info",
@@ -4442,23 +4848,28 @@ function validateLinks(html) {
       });
     }
   });
+  for (const [href, count] of hrefCounts) {
+    if (count > 5) {
+      issues.push({
+        severity: "info",
+        rule: "duplicate-links",
+        message: `URL appears ${count} times \u2014 consider consolidating`,
+        href: href.slice(0, 120)
+      });
+    }
+  }
   return { totalLinks, issues, breakdown };
 }
 
 // src/accessibility-checker.ts
 import * as cheerio6 from "cheerio";
-var GENERIC_LINK_TEXT2 = /* @__PURE__ */ new Set([
-  "click here",
-  "here",
-  "read more",
-  "learn more",
-  "more",
-  "link",
-  "this link",
-  "click",
-  "tap here",
-  "this"
-]);
+var RULE_PENALTY_CAPS = {
+  "img-missing-alt": 3,
+  "link-generic-text": 3,
+  "link-no-accessible-name": 3,
+  "table-missing-role": 2,
+  "low-contrast": 3
+};
 function describeElement($, el) {
   var _a;
   const tag = ((_a = el.tagName) == null ? void 0 : _a.toLowerCase()) || "unknown";
@@ -4549,7 +4960,7 @@ function checkLinkAccessibility($) {
       });
       return;
     }
-    if (text && GENERIC_LINK_TEXT2.has(text) && !ariaLabel) {
+    if (text && GENERIC_LINK_TEXT.has(text) && !ariaLabel) {
       issues.push({
         severity: "warning",
         rule: "link-generic-text",
@@ -4564,6 +4975,7 @@ function checkLinkAccessibility($) {
 function checkTableAccessibility($) {
   const issues = [];
   $("table").each((_, el) => {
+    if ($(el).parents('table[role="presentation"], table[role="none"]').length > 0) return;
     const role = $(el).attr("role");
     const hasHeaders = $(el).find("th").length > 0;
     const looksLikeLayout = !hasHeaders;
@@ -4582,7 +4994,7 @@ function checkTableAccessibility($) {
   });
   return issues;
 }
-function checkColorContrast($) {
+function checkTextSizeAndContrast($) {
   const issues = [];
   let smallTextCount = 0;
   $("[style]").each((_, el) => {
@@ -4592,7 +5004,7 @@ function checkColorContrast($) {
       const size = parseFloat(fontSizeMatch[1]);
       const unit = fontSizeMatch[2].toLowerCase();
       const pxSize = unit === "pt" ? size * 1.333 : size;
-      if (pxSize < 10 && pxSize > 0) {
+      if (pxSize < 9 && pxSize > 0) {
         smallTextCount++;
         if (smallTextCount <= 3) {
           issues.push({
@@ -4600,7 +5012,66 @@ function checkColorContrast($) {
             rule: "small-text",
             message: `Very small text (${fontSizeMatch[0].trim()})`,
             element: describeElement($, el),
-            details: "Text smaller than 10px is difficult to read, especially on mobile devices."
+            details: "Text smaller than 9px is difficult to read, especially on mobile devices."
+          });
+        }
+      }
+    }
+    const colorValue = getStyleValue(style, "color");
+    if (colorValue) {
+      const fg = parseColor(colorValue);
+      if (fg) {
+        let bgR = 255, bgG = 255, bgB = 255;
+        let current = $(el);
+        let foundBg = false;
+        const elements = [current, ...$(el).parents("[style]").toArray().map((p) => $(p))];
+        for (const ancestor of elements) {
+          const ancestorStyle = (typeof ancestor === "function" ? ancestor : $(ancestor)).attr("style") || "";
+          const bgValue = getStyleValue(ancestorStyle, "background-color");
+          if (bgValue) {
+            const bg = parseColor(bgValue);
+            if (bg && bg.a > 0) {
+              if (bg.a < 1) {
+                [bgR, bgG, bgB] = alphaBlend(bg, 255, 255, 255);
+              } else {
+                bgR = bg.r;
+                bgG = bg.g;
+                bgB = bg.b;
+              }
+              foundBg = true;
+              break;
+            }
+          }
+        }
+        const [fR, fG, fB] = fg.a < 1 ? alphaBlend(fg, bgR, bgG, bgB) : [fg.r, fg.g, fg.b];
+        const fgLum = relativeLuminance(fR, fG, fB);
+        const bgLum = relativeLuminance(bgR, bgG, bgB);
+        const ratio = contrastRatio(fgLum, bgLum);
+        let isLargeText = false;
+        if (fontSizeMatch) {
+          const size = parseFloat(fontSizeMatch[1]);
+          const unit = fontSizeMatch[2].toLowerCase();
+          const pxSize = unit === "pt" ? size * 1.333 : size;
+          const fontWeight = getStyleValue(style, "font-weight");
+          const isBold = fontWeight === "bold" || fontWeight === "bolder" || fontWeight && parseInt(fontWeight, 10) >= 700;
+          isLargeText = pxSize >= 18 || pxSize >= 14 && !!isBold;
+        }
+        const grade = wcagGrade(ratio);
+        if (grade === "Fail") {
+          issues.push({
+            severity: "error",
+            rule: "low-contrast",
+            message: `Low contrast ratio ${ratio.toFixed(1)}:1 \u2014 fails WCAG minimum`,
+            element: describeElement($, el),
+            details: `Foreground ${colorValue} on background needs at least ${isLargeText ? "3:1" : "4.5:1"} contrast ratio.`
+          });
+        } else if (!isLargeText && grade === "AA Large") {
+          issues.push({
+            severity: "warning",
+            rule: "low-contrast",
+            message: `Low contrast ratio ${ratio.toFixed(1)}:1 \u2014 fails WCAG AA for normal text`,
+            element: describeElement($, el),
+            details: `Foreground ${colorValue} on background needs at least 4.5:1 for normal-sized text.`
           });
         }
       }
@@ -4610,7 +5081,7 @@ function checkColorContrast($) {
     issues.push({
       severity: "warning",
       rule: "small-text-multiple",
-      message: `${smallTextCount} elements with text smaller than 10px`,
+      message: `${smallTextCount} elements with text smaller than 9px`,
       details: "Consider using a minimum font size of 12-14px for readability."
     });
   }
@@ -4641,6 +5112,9 @@ function checkAccessibility(html) {
   if (!html || !html.trim()) {
     return { score: 100, issues: [] };
   }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
   const $ = cheerio6.load(html);
   const issues = [];
   const langIssue = checkLangAttribute($);
@@ -4650,10 +5124,15 @@ function checkAccessibility(html) {
   issues.push(...checkImageAlt($));
   issues.push(...checkLinkAccessibility($));
   issues.push(...checkTableAccessibility($));
-  issues.push(...checkColorContrast($));
+  issues.push(...checkTextSizeAndContrast($));
   issues.push(...checkSemanticStructure($));
   let penalty = 0;
+  const seenRules = /* @__PURE__ */ new Map();
   for (const issue of issues) {
+    const count = (seenRules.get(issue.rule) || 0) + 1;
+    seenRules.set(issue.rule, count);
+    const cap = RULE_PENALTY_CAPS[issue.rule];
+    if (cap !== void 0 && count > cap) continue;
     switch (issue.severity) {
       case "error":
         penalty += 12;
@@ -4706,6 +5185,9 @@ function analyzeImages(html) {
   if (!html || !html.trim()) {
     return { total: 0, totalDataUriBytes: 0, issues: [], images: [] };
   }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
   const $ = cheerio7.load(html);
   const issues = [];
   const images = [];
@@ -4832,15 +5314,56 @@ function analyzeImages(html) {
   }
   return { total: images.length, totalDataUriBytes, issues, images };
 }
+
+// src/audit.ts
+var EMPTY_SPAM = { score: 100, level: "low", issues: [] };
+var EMPTY_LINKS = {
+  totalLinks: 0,
+  issues: [],
+  breakdown: { https: 0, http: 0, mailto: 0, tel: 0, anchor: 0, javascript: 0, protocolRelative: 0, other: 0 }
+};
+var EMPTY_ACCESSIBILITY = { score: 100, issues: [] };
+var EMPTY_IMAGES = { total: 0, totalDataUriBytes: 0, issues: [], images: [] };
+function auditEmail(html, options) {
+  var _a;
+  if (!html || !html.trim()) {
+    return {
+      compatibility: { warnings: [], scores: {} },
+      spam: EMPTY_SPAM,
+      links: EMPTY_LINKS,
+      accessibility: EMPTY_ACCESSIBILITY,
+      images: EMPTY_IMAGES
+    };
+  }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
+  const framework = options == null ? void 0 : options.framework;
+  const skip = new Set((_a = options == null ? void 0 : options.skip) != null ? _a : []);
+  const warnings = skip.has("compatibility") ? [] : analyzeEmail(html, framework);
+  const scores = skip.has("compatibility") ? {} : generateCompatibilityScore(warnings);
+  const spam = skip.has("spam") ? EMPTY_SPAM : analyzeSpam(html, options == null ? void 0 : options.spam);
+  const links = skip.has("links") ? EMPTY_LINKS : validateLinks(html);
+  const accessibility = skip.has("accessibility") ? EMPTY_ACCESSIBILITY : checkAccessibility(html);
+  const images = skip.has("images") ? EMPTY_IMAGES : analyzeImages(html);
+  return { compatibility: { warnings, scores }, spam, links, accessibility, images };
+}
 export {
   AI_FIX_SYSTEM_PROMPT,
+  CompileError,
   EMAIL_CLIENTS,
+  GENERIC_LINK_TEXT,
+  MAX_HTML_SIZE,
   STRUCTURAL_FIX_PROPERTIES,
+  alphaBlend,
   analyzeEmail,
   analyzeImages,
   analyzeSpam,
+  auditEmail,
   checkAccessibility,
+  contrastRatio,
   diffResults,
+  errorWarnings,
   estimateAiFixTokens,
   generateAiFix,
   generateCompatibilityScore,
@@ -4849,9 +5372,14 @@ export {
   getCodeFix,
   getSuggestion,
   heuristicTokenCount,
+  parseColor,
+  relativeLuminance,
   simulateDarkMode,
+  structuralWarnings,
   transformForAllClients,
   transformForClient,
-  validateLinks
+  validateLinks,
+  warningsForClient,
+  wcagGrade
 };
 //# sourceMappingURL=index.js.map