@lit-pigeon/renderer-mjml 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lit Pigeon Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("mjml"),T=require("@lit-pigeon/core");function u(e){return`${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`}function h(e){const{content:t,padding:r,textAlign:o,lineHeight:n}=e.values;return`<mj-text ${[`padding="${u(r)}"`,`align="${o}"`,`line-height="${n}"`].join(" ")}>${t}</mj-text>`}function j(e){const{src:t,alt:r,width:o,href:n,padding:a,alignment:c,borderRadius:i}=e.values,s=[`src="${m(t)}"`,`alt="${m(r)}"`,`padding="${u(a)}"`,`align="${c}"`];return o!=="auto"&&s.push(`width="${o}px"`),n&&s.push(`href="${m(n)}"`),i!==void 0&&i>0&&s.push(`border-radius="${i}px"`),`<mj-image ${s.join(" ")} />`}function m(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function b(e){const{content:t,href:r,backgroundColor:o,textColor:n,borderRadius:a,padding:c,innerPadding:i,fontSize:s,fontWeight:l,alignment:g,fullWidth:d}=e.values,p=[`href="${H(r)}"`,`background-color="${o}"`,`color="${n}"`,`border-radius="${a}px"`,`padding="${u(c)}"`,`inner-padding="${u(i)}"`,`font-size="${s}px"`,`font-weight="${l}"`,`align="${g}"`];d&&p.push('width="100%"');const S=t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i,"$1");return`<mj-button ${p.join(" ")}>${S}</mj-button>`}function H(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function k(e){const{borderColor:t,borderWidth:r,borderStyle:o,padding:n,width:a}=e.values;return`<mj-divider ${[`border-color="${t}"`,`border-width="${r}px"`,`border-style="${o}"`,`padding="${u(n)}"`,`width="${a}"`].join(" ")} />`}function x(e){const{height:t}=e.values;return`<mj-spacer height="${t}px" />`}function W(e){switch(e.type){case"facebook":return"facebook";case"twitter":return"twitter";case"instagram":return"instagram";case"linkedin":return"linkedin";case"youtube":return"youtube";case"tiktok":return"web";case"custom":return"web";default:return"web"}}function q(e,t){const o=[`name="${W(e)}"`,`href="${$(e.href)}"`,`icon-size="${t}px"`];e.iconUrl&&o.push(`src="${$(e.iconUrl)}"`);const n=e.label??"";return`<mj-social-element ${o.join(" ")}>${N(n)}</mj-social-element>`}function v(e){const{icons:t,iconSize:r,spacing:o,alignment:n,padding:a}=e.values,c=[`icon-size="${r}px"`,`icon-padding="${o}px"`,`align="${n}"`,`padding="${u(a)}"`,'mode="horizontal"'],i=t.map(s=>q(s,r)).join(`
+    `);return`<mj-social ${c.join(" ")}>
+    ${i}
+  </mj-social>`}function $(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function N(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const _=/<(\s*\/?\s*mj-raw\b[^>]*)>/gi;function z(e){return e.replace(_,"&lt;$1&gt;")}function w(e){const{content:t,padding:r}=e.values,o=u(r),n=z(t);return`<mj-raw><div style="padding: ${o};">${n}</div></mj-raw>`}function y(e){const{content:t,innerPadding:r}=e.values;return`<mj-text ${[`padding="${u(r)}"`].join(" ")}>${t}</mj-text>`}function B(e){const t=e.values,r=[`mode="${t.mode}"`,`height="${t.height}px"`,`vertical-align="${t.verticalAlign}"`,`padding="${u(t.padding)}"`];return t.backgroundUrl&&r.push(`background-width="${t.width}px"`),t.backgroundUrl&&(r.push(`background-url="${D(t.backgroundUrl)}"`),r.push(`background-position="${t.backgroundPosition}"`)),t.backgroundColor&&r.push(`background-color="${t.backgroundColor}"`),`  <mj-hero ${r.join(" ")}>
+      <mj-text padding="${u(t.innerPadding)}">${t.content}</mj-text>
+  </mj-hero>`}function D(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function O(e){const t=[`href="${I(e.href)}"`];return e.color&&t.push(`color="${e.color}"`),e.fontWeight&&t.push(`font-weight="${e.fontWeight}"`),e.textDecoration&&t.push(`text-decoration="${e.textDecoration}"`),e.padding&&t.push(`padding="${e.padding}"`),`<mj-navbar-link ${t.join(" ")}>${E(e.text)}</mj-navbar-link>`}function M(e){const{links:t,hamburger:r,padding:o}=e.values,n=[`hamburger="${r}"`,`padding="${u(o)}"`],a=t.map(c=>O(c)).join(`
+    `);return`<mj-navbar ${n.join(" ")}>
+    ${a}
+  </mj-navbar>`}function I(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function E(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function L(e){switch(e.type){case"text":return h(e);case"image":return j(e);case"button":return b(e);case"divider":return k(e);case"spacer":return x(e);case"social":return v(e);case"html":return w(e);case"hero":return y(e);case"navbar":return M(e);default:return P(e)}}function P(e){const t=e.type,r=T.getBlockDefinition(t);return r!=null&&r.renderMjml?r.renderMjml(e):`<!-- Unknown block type: ${t} -->`}function U(e,t){const{backgroundColor:r,padding:o,borderRadius:n,verticalAlign:a}=e.attributes,c=[`width="${t}"`,`padding="${u(o)}"`,`vertical-align="${a}"`];r&&c.push(`background-color="${r}"`),n!==void 0&&n>0&&c.push(`border-radius="${n}px"`);const i=e.blocks.map(s=>`      ${L(s)}`).join(`
+`);return`    <mj-column ${c.join(" ")}>
+${i}
+    </mj-column>`}function K(e){if(e.columns.length===1&&e.columns[0].blocks.length===1&&e.columns[0].blocks[0].type==="hero")return f(B(e.columns[0].blocks[0]),e.attributes.condition);const{backgroundColor:t,backgroundImage:r,padding:o,fullWidth:n}=e.attributes,a=[`padding="${u(o)}"`];n&&a.push('full-width="full-width"'),t&&a.push(`background-color="${t}"`),r&&(a.push(`background-url="${C(r)}"`),a.push('background-size="cover"'),a.push('background-repeat="no-repeat"'));const c=e.columnRatios.reduce((s,l)=>s+l,0),i=e.columns.map((s,l)=>{const d=((e.columnRatios[l]??1)/c*100).toFixed(2).replace(/\.?0+$/,"");return U(s,`${d}%`)}).join(`
+`);return f(`  <mj-section ${a.join(" ")}>
+${i}
+  </mj-section>`,e.attributes.condition)}function f(e,t){const r=t==null?void 0:t.trim();return r?`  <mj-raw>{{#if ${r}}}</mj-raw>
+${e}
+  <mj-raw>{{/if}}</mj-raw>`:e}const G=`    <mj-raw>
+      <!--[if mso]>
+      <style>
+        body, table, td { font-family: Arial, Helvetica, sans-serif !important; }
+        blockquote { margin: 0 0 16px !important; }
+      </style>
+      <![endif]-->
+    </mj-raw>`,F=`    <mj-raw>
+      <meta name="color-scheme" content="light dark">
+      <meta name="supported-color-schemes" content="light dark">
+    </mj-raw>`,J=`    <mj-style inline="inline">
+      h1, h2, h3, blockquote { margin: 0 0 0.5em; }
+    </mj-style>`;function Q(e,t){const{fontFamily:r}=e.body.attributes,o=e.metadata.previewText,n=[];return t.outlookWorkarounds&&(n.push(G),n.push(F),n.push(J)),n.push(`    <mj-attributes>
+      <mj-all font-family="${C(r)}" />
+      <mj-text font-size="14px" line-height="1.5" />
+      <mj-button font-size="14px" />
+    </mj-attributes>`),o&&n.push(`    <mj-preview>${V(o)}</mj-preview>`),`  <mj-head>
+${n.join(`
+`)}
+  </mj-head>`}function A(e,t){const r={outlookWorkarounds:(t==null?void 0:t.outlookWorkarounds)??!0},{width:o,backgroundColor:n}=e.body.attributes,a=[`width="${o}px"`];n&&a.push(`background-color="${n}"`);const c=Q(e,r),i=e.body.rows.map(s=>K(s)).join(`
+`);return`<mjml>
+${c}
+  <mj-body ${a.join(" ")}>
+${i}
+  </mj-body>
+</mjml>`}function C(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function V(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class X{async render(t,r){const o=A(t,{outlookWorkarounds:r==null?void 0:r.outlookWorkarounds}),n={keepComments:!1};r!=null&&r.minify&&(n.minify=!0),r!=null&&r.beautify&&(n.beautify=!0);try{const a=R(o,n),c=(a.errors||[]).map(i=>({message:i.message,line:i.line,tagName:i.tagName}));return{html:a.html,errors:c}}catch(a){return{html:"",errors:[{message:`MJML compilation failed: ${a instanceof Error?a.message:String(a)}`}]}}}}exports.MjmlRenderer=X;exports.documentToMjml=A;exports.renderButtonBlock=b;exports.renderDividerBlock=k;exports.renderHeroBlock=y;exports.renderHeroSection=B;exports.renderHtmlBlock=w;exports.renderImageBlock=j;exports.renderNavBarBlock=M;exports.renderSocialBlock=v;exports.renderSpacerBlock=x;exports.renderTextBlock=h;exports.spacingToMjml=u;

package/dist/index.d.ts

@@ -0,0 +1,123 @@
+import { ButtonBlock } from '@lit-pigeon/core';
+import { DividerBlock } from '@lit-pigeon/core';
+import { HeroBlock } from '@lit-pigeon/core';
+import { HtmlBlock } from '@lit-pigeon/core';
+import { ImageBlock } from '@lit-pigeon/core';
+import { NavBarBlock } from '@lit-pigeon/core';
+import { PigeonDocument } from '@lit-pigeon/core';
+import { Renderer } from '@lit-pigeon/core';
+import { RenderOptions } from '@lit-pigeon/core';
+import { RenderResult } from '@lit-pigeon/core';
+import { SocialBlock } from '@lit-pigeon/core';
+import { SpacerBlock } from '@lit-pigeon/core';
+import { Spacing } from '@lit-pigeon/core';
+import { TextBlock } from '@lit-pigeon/core';
+
+/**
+ * Converts a PigeonDocument into a complete MJML markup string.
+ *
+ * This function maps the document's body attributes, rows, columns,
+ * and content blocks to their MJML equivalents. The resulting string
+ * can then be passed to mjml2html() to produce the final HTML output.
+ *
+ * @param doc - The PigeonDocument to render.
+ * @param options - Optional MJML-shaping options. `outlookWorkarounds`
+ *   defaults to `true` and injects Outlook (mso) + dark-mode workarounds.
+ */
+export declare function documentToMjml(doc: PigeonDocument, options?: DocumentToMjmlOptions): string;
+
+/**
+ * Options that influence the MJML document the renderer emits.
+ *
+ * Kept as a local subset of `@lit-pigeon/core`'s `RenderOptions` — only the
+ * fields that affect MJML markup generation are relevant here (other fields
+ * like `minify`/`beautify` apply to the mjml2html compilation step).
+ */
+declare interface DocumentToMjmlOptions {
+    /**
+     * Inject Outlook (mso) and dark-mode rendering workarounds into the
+     * document. Defaults to `true`. Set to `false` to emit a bare MJML
+     * document without the heading-margin reset, dark-mode meta tags, or
+     * `[if mso]` conditional block.
+     */
+    outlookWorkarounds?: boolean;
+}
+
+/**
+ * MJML-based renderer that implements the Pigeon Renderer interface.
+ *
+ * Converts a PigeonDocument into a full MJML markup string, then uses
+ * the mjml library to compile it into responsive HTML email output.
+ */
+export declare class MjmlRenderer implements Renderer {
+    /**
+     * Renders a PigeonDocument to HTML using MJML as the compilation backend.
+     *
+     * @param doc - The Pigeon email document to render
+     * @param options - Optional rendering configuration (minify, beautify, inlineCss)
+     * @returns A promise resolving to the rendered HTML and any errors
+     */
+    render(doc: PigeonDocument, options?: RenderOptions): Promise<RenderResult>;
+}
+
+/**
+ * Renders a ButtonBlock to an MJML <mj-button> element.
+ */
+export declare function renderButtonBlock(block: ButtonBlock): string;
+
+/**
+ * Renders a DividerBlock to an MJML <mj-divider> element.
+ */
+export declare function renderDividerBlock(block: DividerBlock): string;
+
+/**
+ * Renders a HeroBlock to MJML markup.
+ * Note: mj-hero is a top-level section element in MJML.
+ * This renders the inner content; the wrapping <mj-hero> is handled by renderRow().
+ */
+export declare function renderHeroBlock(block: HeroBlock): string;
+
+/**
+ * Renders the full mj-hero wrapper for a hero block.
+ * Called from renderRow when it detects a hero block.
+ */
+export declare function renderHeroSection(block: HeroBlock): string;
+
+export declare function renderHtmlBlock(block: HtmlBlock): string;
+
+/**
+ * Renders an ImageBlock to an MJML <mj-image> element.
+ */
+export declare function renderImageBlock(block: ImageBlock): string;
+
+/**
+ * Renders a NavBarBlock to an MJML <mj-navbar> element.
+ */
+export declare function renderNavBarBlock(block: NavBarBlock): string;
+
+/**
+ * Renders a SocialBlock to an MJML <mj-social> element.
+ */
+export declare function renderSocialBlock(block: SocialBlock): string;
+
+/**
+ * Renders a SpacerBlock to an MJML <mj-spacer> element.
+ */
+export declare function renderSpacerBlock(block: SpacerBlock): string;
+
+/**
+ * Renders a TextBlock to an MJML <mj-text> element.
+ */
+export declare function renderTextBlock(block: TextBlock): string;
+
+/**
+ * Converts a Spacing object to an MJML-compatible padding string.
+ * Returns a CSS shorthand string in the order: top right bottom left.
+ *
+ * @example
+ * spacingToMjml({ top: 10, right: 20, bottom: 10, left: 20 })
+ * // => "10px 20px 10px 20px"
+ */
+export declare function spacingToMjml(spacing: Spacing): string;
+
+export { }

package/dist/index.js

@@ -0,0 +1,333 @@
+import b from "mjml";
+import { getBlockDefinition as k } from "@lit-pigeon/core";
+function u(e) {
+  return `${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`;
+}
+function x(e) {
+  const { content: t, padding: r, textAlign: a, lineHeight: n } = e.values;
+  return `<mj-text ${[
+    `padding="${u(r)}"`,
+    `align="${a}"`,
+    `line-height="${n}"`
+  ].join(" ")}>${t}</mj-text>`;
+}
+function v(e) {
+  const { src: t, alt: r, width: a, href: n, padding: o, alignment: i, borderRadius: c } = e.values, s = [
+    `src="${m(t)}"`,
+    `alt="${m(r)}"`,
+    `padding="${u(o)}"`,
+    `align="${i}"`
+  ];
+  return a !== "auto" && s.push(`width="${a}px"`), n && s.push(`href="${m(n)}"`), c !== void 0 && c > 0 && s.push(`border-radius="${c}px"`), `<mj-image ${s.join(" ")} />`;
+}
+function m(e) {
+  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function w(e) {
+  const {
+    content: t,
+    href: r,
+    backgroundColor: a,
+    textColor: n,
+    borderRadius: o,
+    padding: i,
+    innerPadding: c,
+    fontSize: s,
+    fontWeight: l,
+    alignment: p,
+    fullWidth: d
+  } = e.values, g = [
+    `href="${y(r)}"`,
+    `background-color="${a}"`,
+    `color="${n}"`,
+    `border-radius="${o}px"`,
+    `padding="${u(i)}"`,
+    `inner-padding="${u(c)}"`,
+    `font-size="${s}px"`,
+    `font-weight="${l}"`,
+    `align="${p}"`
+  ];
+  d && g.push('width="100%"');
+  const j = t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i, "$1");
+  return `<mj-button ${g.join(" ")}>${j}</mj-button>`;
+}
+function y(e) {
+  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function A(e) {
+  const { borderColor: t, borderWidth: r, borderStyle: a, padding: n, width: o } = e.values;
+  return `<mj-divider ${[
+    `border-color="${t}"`,
+    `border-width="${r}px"`,
+    `border-style="${a}"`,
+    `padding="${u(n)}"`,
+    `width="${o}"`
+  ].join(" ")} />`;
+}
+function B(e) {
+  const { height: t } = e.values;
+  return `<mj-spacer height="${t}px" />`;
+}
+function C(e) {
+  switch (e.type) {
+    case "facebook":
+      return "facebook";
+    case "twitter":
+      return "twitter";
+    case "instagram":
+      return "instagram";
+    case "linkedin":
+      return "linkedin";
+    case "youtube":
+      return "youtube";
+    case "tiktok":
+      return "web";
+    case "custom":
+      return "web";
+    default:
+      return "web";
+  }
+}
+function M(e, t) {
+  const a = [
+    `name="${C(e)}"`,
+    `href="${$(e.href)}"`,
+    `icon-size="${t}px"`
+  ];
+  e.iconUrl && a.push(`src="${$(e.iconUrl)}"`);
+  const n = e.label ?? "";
+  return `<mj-social-element ${a.join(" ")}>${S(n)}</mj-social-element>`;
+}
+function R(e) {
+  const { icons: t, iconSize: r, spacing: a, alignment: n, padding: o } = e.values, i = [
+    `icon-size="${r}px"`,
+    `icon-padding="${a}px"`,
+    `align="${n}"`,
+    `padding="${u(o)}"`,
+    'mode="horizontal"'
+  ], c = t.map((s) => M(s, r)).join(`
+    `);
+  return `<mj-social ${i.join(" ")}>
+    ${c}
+  </mj-social>`;
+}
+function $(e) {
+  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function S(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+const W = /<(\s*\/?\s*mj-raw\b[^>]*)>/gi;
+function H(e) {
+  return e.replace(W, "&lt;$1&gt;");
+}
+function T(e) {
+  const { content: t, padding: r } = e.values, a = u(r), n = H(t);
+  return `<mj-raw><div style="padding: ${a};">${n}</div></mj-raw>`;
+}
+function _(e) {
+  const { content: t, innerPadding: r } = e.values;
+  return `<mj-text ${[
+    `padding="${u(r)}"`
+  ].join(" ")}>${t}</mj-text>`;
+}
+function z(e) {
+  const t = e.values, r = [
+    `mode="${t.mode}"`,
+    `height="${t.height}px"`,
+    `vertical-align="${t.verticalAlign}"`,
+    `padding="${u(t.padding)}"`
+  ];
+  return t.backgroundUrl && r.push(`background-width="${t.width}px"`), t.backgroundUrl && (r.push(`background-url="${N(t.backgroundUrl)}"`), r.push(`background-position="${t.backgroundPosition}"`)), t.backgroundColor && r.push(`background-color="${t.backgroundColor}"`), `  <mj-hero ${r.join(" ")}>
+      <mj-text padding="${u(t.innerPadding)}">${t.content}</mj-text>
+  </mj-hero>`;
+}
+function N(e) {
+  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function q(e) {
+  const t = [
+    `href="${O(e.href)}"`
+  ];
+  return e.color && t.push(`color="${e.color}"`), e.fontWeight && t.push(`font-weight="${e.fontWeight}"`), e.textDecoration && t.push(`text-decoration="${e.textDecoration}"`), e.padding && t.push(`padding="${e.padding}"`), `<mj-navbar-link ${t.join(" ")}>${E(e.text)}</mj-navbar-link>`;
+}
+function D(e) {
+  const { links: t, hamburger: r, padding: a } = e.values, n = [
+    `hamburger="${r}"`,
+    `padding="${u(a)}"`
+  ], o = t.map((i) => q(i)).join(`
+    `);
+  return `<mj-navbar ${n.join(" ")}>
+    ${o}
+  </mj-navbar>`;
+}
+function O(e) {
+  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function E(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function I(e) {
+  switch (e.type) {
+    case "text":
+      return x(e);
+    case "image":
+      return v(e);
+    case "button":
+      return w(e);
+    case "divider":
+      return A(e);
+    case "spacer":
+      return B(e);
+    case "social":
+      return R(e);
+    case "html":
+      return T(e);
+    case "hero":
+      return _(e);
+    case "navbar":
+      return D(e);
+    default:
+      return L(e);
+  }
+}
+function L(e) {
+  const t = e.type, r = k(t);
+  return r != null && r.renderMjml ? r.renderMjml(e) : `<!-- Unknown block type: ${t} -->`;
+}
+function U(e, t) {
+  const { backgroundColor: r, padding: a, borderRadius: n, verticalAlign: o } = e.attributes, i = [
+    `width="${t}"`,
+    `padding="${u(a)}"`,
+    `vertical-align="${o}"`
+  ];
+  r && i.push(`background-color="${r}"`), n !== void 0 && n > 0 && i.push(`border-radius="${n}px"`);
+  const c = e.blocks.map((s) => `      ${I(s)}`).join(`
+`);
+  return `    <mj-column ${i.join(" ")}>
+${c}
+    </mj-column>`;
+}
+function P(e) {
+  if (e.columns.length === 1 && e.columns[0].blocks.length === 1 && e.columns[0].blocks[0].type === "hero")
+    return f(
+      z(e.columns[0].blocks[0]),
+      e.attributes.condition
+    );
+  const { backgroundColor: t, backgroundImage: r, padding: a, fullWidth: n } = e.attributes, o = [
+    `padding="${u(a)}"`
+  ];
+  n && o.push('full-width="full-width"'), t && o.push(`background-color="${t}"`), r && (o.push(`background-url="${h(r)}"`), o.push('background-size="cover"'), o.push('background-repeat="no-repeat"'));
+  const i = e.columnRatios.reduce((s, l) => s + l, 0), c = e.columns.map((s, l) => {
+    const d = ((e.columnRatios[l] ?? 1) / i * 100).toFixed(2).replace(/\.?0+$/, "");
+    return U(s, `${d}%`);
+  }).join(`
+`);
+  return f(
+    `  <mj-section ${o.join(" ")}>
+${c}
+  </mj-section>`,
+    e.attributes.condition
+  );
+}
+function f(e, t) {
+  const r = t == null ? void 0 : t.trim();
+  return r ? `  <mj-raw>{{#if ${r}}}</mj-raw>
+${e}
+  <mj-raw>{{/if}}</mj-raw>` : e;
+}
+const K = `    <mj-raw>
+      <!--[if mso]>
+      <style>
+        body, table, td { font-family: Arial, Helvetica, sans-serif !important; }
+        blockquote { margin: 0 0 16px !important; }
+      </style>
+      <![endif]-->
+    </mj-raw>`, G = `    <mj-raw>
+      <meta name="color-scheme" content="light dark">
+      <meta name="supported-color-schemes" content="light dark">
+    </mj-raw>`, F = `    <mj-style inline="inline">
+      h1, h2, h3, blockquote { margin: 0 0 0.5em; }
+    </mj-style>`;
+function J(e, t) {
+  const { fontFamily: r } = e.body.attributes, a = e.metadata.previewText, n = [];
+  return t.outlookWorkarounds && (n.push(K), n.push(G), n.push(F)), n.push(`    <mj-attributes>
+      <mj-all font-family="${h(r)}" />
+      <mj-text font-size="14px" line-height="1.5" />
+      <mj-button font-size="14px" />
+    </mj-attributes>`), a && n.push(`    <mj-preview>${V(a)}</mj-preview>`), `  <mj-head>
+${n.join(`
+`)}
+  </mj-head>`;
+}
+function Q(e, t) {
+  const r = {
+    outlookWorkarounds: (t == null ? void 0 : t.outlookWorkarounds) ?? !0
+  }, { width: a, backgroundColor: n } = e.body.attributes, o = [
+    `width="${a}px"`
+  ];
+  n && o.push(`background-color="${n}"`);
+  const i = J(e, r), c = e.body.rows.map((s) => P(s)).join(`
+`);
+  return `<mjml>
+${i}
+  <mj-body ${o.join(" ")}>
+${c}
+  </mj-body>
+</mjml>`;
+}
+function h(e) {
+  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function V(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+class Z {
+  /**
+   * Renders a PigeonDocument to HTML using MJML as the compilation backend.
+   *
+   * @param doc - The Pigeon email document to render
+   * @param options - Optional rendering configuration (minify, beautify, inlineCss)
+   * @returns A promise resolving to the rendered HTML and any errors
+   */
+  async render(t, r) {
+    const a = Q(t, {
+      outlookWorkarounds: r == null ? void 0 : r.outlookWorkarounds
+    }), n = {
+      // By default MJML inlines CSS; respect the option if provided
+      keepComments: !1
+    };
+    r != null && r.minify && (n.minify = !0), r != null && r.beautify && (n.beautify = !0);
+    try {
+      const o = b(a, n), i = (o.errors || []).map((c) => ({
+        message: c.message,
+        line: c.line,
+        tagName: c.tagName
+      }));
+      return {
+        html: o.html,
+        errors: i
+      };
+    } catch (o) {
+      return {
+        html: "",
+        errors: [{ message: `MJML compilation failed: ${o instanceof Error ? o.message : String(o)}` }]
+      };
+    }
+  }
+}
+export {
+  Z as MjmlRenderer,
+  Q as documentToMjml,
+  w as renderButtonBlock,
+  A as renderDividerBlock,
+  _ as renderHeroBlock,
+  z as renderHeroSection,
+  T as renderHtmlBlock,
+  v as renderImageBlock,
+  D as renderNavBarBlock,
+  R as renderSocialBlock,
+  B as renderSpacerBlock,
+  x as renderTextBlock,
+  u as spacingToMjml
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@lit-pigeon/renderer-mjml",
+  "version": "0.1.1",
+  "description": "MJML-based HTML renderer for Pigeon email editor",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "mjml": "^4.15.0",
+    "@lit-pigeon/core": "^0.1.1"
+  },
+  "devDependencies": {
+    "@types/mjml": "^4.7.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^2.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/snxstudio/lit-pigeon.git",
+    "directory": "packages/renderer-mjml"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  }
+}