@aswin.dev/editor 0.7.0 → 0.7.2

package/dist/cdn/chunks/{renderer-CUxvx7ro.js → renderer-D0L44Vlp.js}

@@ -1,7 +1,7 @@
 import { r as e } from "./rolldown-runtime-BNuo_Jkg.js";
-import { An as t, Cn as n, Dn as r, En as i, Mn as a, Nn as o, On as s, Pn as c, Sn as l, Tn as u, jn as d, kn as f, wn as p, xn as m } from "./features-DEMb13KS.js";
+import { $n as t, Bn as n, Gn as r, Hn as i, Jn as a, Kn as o, Qn as s, Un as c, Vn as l, Wn as u, Xn as d, Yn as f, Zn as p, er as m, qn as h } from "./features-DIBEo4xl.js";
 //#region ../renderer/src/render-context.ts
-var h = {
+var g = {
 	arial: "Arial, sans-serif",
 	helvetica: "Helvetica, sans-serif",
 	georgia: "Georgia, serif",
@@ -10,7 +10,7 @@ var h = {
 	"trebuchet ms": "'Trebuchet MS', sans-serif",
 	"courier new": "'Courier New', monospace",
 	tahoma: "Tahoma, sans-serif"
-}, g = class e {
+}, _ = class e {
 	constructor(e, t, n, r, i = /* @__PURE__ */ new Map()) {
 		this.containerWidth = e, this.customFonts = t, this.defaultFallbackFont = n, this.allowHtmlBlocks = r, this.customBlockHtml = i;
 	}
@@ -22,50 +22,53 @@ var h = {
 			let e = t.fallback ?? this.defaultFallbackFont;
 			return `'${t.name}', ${e}`;
 		}
-		return h[e.toLowerCase()] || e;
+		return g[e.toLowerCase()] || e;
 	}
-}, _ = {
+}, v = {
 	"&": "&",
 	"<": "&lt;",
 	">": "&gt;",
 	"\"": "&quot;",
 	"'": "&#039;"
-}, v = /[&<>"']/g;
-function y(e) {
-	return e === "" ? "" : e.replace(v, (e) => _[e] ?? e);
-}
+}, y = /[&<>"']/g;
 function b(e) {
-	return e === "" ? "" : e.replace(v, (e) => _[e] ?? e);
+	return e === "" ? "" : e.replace(y, (e) => v[e] ?? e);
 }
 function x(e) {
-	return e === "" ? "" : b(e).replace(/[;{}\r\n]/g, "");
+	return e === "" ? "" : e.replace(y, (e) => v[e] ?? e);
 }
 function S(e) {
+	return e === "" ? "" : x(e).replace(/[;{}\r\n]/g, "");
+}
+function C(e) {
 	if (e === "") return "";
 	let t = e.replace(/<span[^>]*\bdata-merge-tag="([^"]*)"[^>]*>.*?<\/span>/gs, "$1");
 	return t = t.replace(/<span[^>]*\bdata-logic-merge-tag="([^"]*)"[^>]*>.*?<\/span>/gs, "$1"), t;
 }
 //#endregion
 //#region ../renderer/src/padding.ts
-function C(e) {
+function w(e) {
 	return `${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`;
 }
+function T(e) {
+	return w(e);
+}
 //#endregion
 //#region ../renderer/src/utils.ts
-function w(e, t) {
+function E(e, t) {
 	return e ? ` ${t === "native" ? "background-color" : "container-background-color"}="${e}"` : "";
 }
 //#endregion
 //#region ../renderer/src/visibility.ts
-function T(e) {
+function D(e) {
 	let t = e.visibility;
 	return t ? !t.desktop && !t.tablet && !t.mobile : !1;
 }
-function E(e) {
-	let t = D(e);
+function O(e) {
+	let t = k(e);
 	return t === "" ? "" : ` css-class="${t}"`;
 }
-function D(e) {
+function k(e) {
 	let t = e.visibility;
 	if (!t) return "";
 	let n = [];
@@ -73,97 +76,157 @@ function D(e) {
 }
 //#endregion
 //#region ../renderer/src/renderers/title.ts
-function O(e, t) {
-	if (T(e)) return "";
-	let n = C(e.styles.padding), r = w(e.styles.backgroundColor, "container"), i = k(S(e.content)), a = c[e.level] ?? c[2], o = b(e.color), s = e.textAlign, l = ee(e.fontFamily, t), u = E(e), d = `h${c[e.level] ? e.level : 2}`;
+function ee(e, t) {
+	if (D(e)) return "";
+	let n = w(e.styles.padding), r = E(e.styles.backgroundColor, "container"), i = A(C(e.content)), a = m[e.level] ?? m[2], o = x(e.color), s = e.textAlign, c = j(e.fontFamily, t), l = O(e), u = `h${m[e.level] ? e.level : 2}`;
 	return `<mj-text
   font-size="${a}px"
   color="${o}"
   align="${s}"
   line-height="1.3"
-  padding="${n}"${r}${l}${u}
-><${d} style="margin:0;font-size:inherit;color:inherit;line-height:inherit">${i}</${d}></mj-text>`;
+  padding="${n}"${r}${c}${l}
+><${u} style="margin:0;font-size:inherit;color:inherit;line-height:inherit">${i}</${u}></mj-text>`;
 }
-function k(e) {
+function A(e) {
 	let t = e.match(/^\s*<p\b[^>]*>([\s\S]*)<\/p>\s*$/);
 	return !t || /<\/p>\s*<p\b/i.test(t[1]) ? e : t[1];
 }
-function ee(e, t) {
+function j(e, t) {
 	return e ? ` font-family="${t.resolveFontFamily(e)}"` : "";
 }
 //#endregion
 //#region ../renderer/src/renderers/paragraph.ts
 function te(e, t) {
-	if (T(e) || e.content.replace(/<\/?p[^>]*>/gi, "").trim() === "") return "";
-	let n = C(e.styles.padding), r = w(e.styles.backgroundColor, "container"), i = S(e.content);
+	if (D(e) || e.content.replace(/<\/?p[^>]*>/gi, "").trim() === "") return "";
+	let n = w(e.styles.padding), r = E(e.styles.backgroundColor, "container"), i = C(e.content);
 	return `<mj-text
   line-height="1.5"
-  padding="${n}"${r}${E(e)}
+  padding="${n}"${r}${O(e)}
 >${i}</mj-text>`;
 }
 //#endregion
 //#region ../renderer/src/renderers/image.ts
 function ne(e, t) {
-	if (T(e) || e.src === "") return "";
-	let n = C(e.styles.padding), r = w(e.styles.backgroundColor, "container"), i = e.width === "full" ? t.containerWidth + "px" : e.width + "px", a = E(e), o = "";
-	e.linkUrl && (o = ` href="${b(e.linkUrl)}"`, e.linkOpenInNewTab && (o += " target=\"_blank\" rel=\"noopener\""));
-	let s = b(e.src), c = e.decorative === !0;
-	return `<mj-image
-  src="${s}"
-  alt="${c ? "" : b(e.alt)}"
+	if (D(e) || e.src === "") return "";
+	let n = w(e.styles.padding), r = E(e.styles.backgroundColor, "container"), i = e.width === "full" ? t.containerWidth + "px" : e.width + "px", a = O(e), o = "";
+	return e.linkUrl && (o = ` href="${x(e.linkUrl)}"`, e.linkOpenInNewTab && (o += " target=\"_blank\" rel=\"noopener\"")), `<mj-image
+  src="${x(e.src)}"
+  alt="${e.decorative === !0 ? "" : x(e.alt)}"
   width="${i}"
   align="${e.align}"
-  padding="${n}"${r}${o}${a}${c ? " role=\"presentation\"" : ""}
+  padding="${n}"${r}${o}${a}
 />`;
 }
 //#endregion
+//#region ../renderer/src/renderers/input.ts
+function M(e, t) {
+	return e ? `font-family:${S(t.resolveFontFamily(e))};` : "";
+}
+function re(e, t, n) {
+	if (e <= 0) return "border:none;";
+	let r = `${e}px`, i = S(t);
+	return n === "all" ? `border:${r} solid ${i};` : `border-style:solid;border-color:${i};border-top-width:${n === "top" ? r : "0"};border-right-width:${n === "right" ? r : "0"};border-bottom-width:${n === "bottom" ? r : "0"};border-left-width:${n === "left" ? r : "0"};`;
+}
+function ie(e) {
+	return b(C(e));
+}
+function ae(e, t) {
+	if (D(e)) return "";
+	let n = w(e.styles.padding), r = E(e.styles.backgroundColor, "container"), i = O(e), a = x(`tpl-in-${e.id}`), o = x(e.id), s = ie(e.label), c = C(e.placeholder), l = C(e.defaultValue ?? ""), u = T(e.labelMargin), d = w(e.labelPadding), f = [
+		"display:block;",
+		`margin:${u};`,
+		`padding:${d};`,
+		`font-size:${e.labelFontSize}px;`,
+		`font-weight:${e.labelFontWeight};`,
+		`color:${S(e.labelColor)};`,
+		`text-align:${e.labelTextAlign};`,
+		M(e.labelFontFamily, t)
+	].filter(Boolean).join(""), p = T(e.inputMargin), m = w(e.inputPadding), h = e.inputWidth === "full" ? "100%" : `${e.inputWidth}px`, g = re(e.inputBorderWidth ?? 0, e.inputBorderColor ?? "#d1d5db", e.inputBorderSides ?? "all"), _ = [
+		"box-sizing:border-box;",
+		`width:${h};`,
+		`margin:${p};`,
+		`padding:${m};`,
+		`background-color:${S(e.inputBackgroundColor)};`,
+		`color:${S(e.inputTextColor)};`,
+		`font-size:${e.inputFontSize}px;`,
+		`border-radius:${e.inputBorderRadius}px;`,
+		g,
+		M(e.inputFontFamily, t),
+		"outline:none;"
+	].join(""), v = x(e.inputType), y = e.required ? " required" : "", b = e.name.trim() === "" ? "" : ` name="${x(e.name.trim())}"`;
+	return `<mj-text
+  line-height="1.5"
+  padding="${n}"${r}${i}
+>${`${`<style type="text/css">[data-tpl-input="${o}"]::placeholder{color:${S(e.inputPlaceholderColor)}!important;opacity:1;}</style>`}<label for="${a}" style="${f}">${s}</label><input id="${a}"${b} type="${v}" data-tpl-input="${o}" placeholder="${x(c)}" value="${x(l)}" style="${_}"${y} />`}</mj-text>`;
+}
+//#endregion
 //#region ../renderer/src/renderers/button.ts
-function re(e, t) {
-	if (T(e)) return "";
-	let n = C(e.styles.padding), r = w(e.styles.backgroundColor, "container"), i = C(e.buttonPadding), a = e.url === "" ? "" : b(e.url), o = a === "" ? "" : ` href="${a}"`, s = b(e.backgroundColor), c = b(e.textColor), l = e.fontSize, u = e.borderRadius, d = y(e.text);
-	return `<mj-button${o}${e.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : ""}
+function oe(e, t) {
+	if (D(e)) return "";
+	let n = w(e.styles.padding), r = E(e.styles.backgroundColor, "container"), i = w(e.buttonPadding), a = P(e), o = a === "" ? "" : ` href="${a}"`, s = x(e.backgroundColor), c = x(e.textColor), l = e.fontSize, u = e.borderRadius, d = b(e.text), f = e.clickAction ?? "none";
+	return `<mj-button${o}${e.openInNewTab && f !== "next_step" && f !== "previous_step" ? " target=\"_blank\" rel=\"noopener\"" : ""}
   background-color="${s}"
   color="${c}"
   font-size="${l}px"
   font-weight="bold"
   border-radius="${u}px"
   inner-padding="${i}"
-  padding="${n}"${r}${A(e.fontFamily, t)}${E(e)}
+  padding="${n}"${r}${F(e.fontFamily, t)}${se(e)}${N(e)}
 >${d}</mj-button>`;
 }
-function A(e, t) {
+function se(e) {
+	let t = [], n = k(e);
+	n && t.push(...n.split(/\s+/).filter(Boolean));
+	let r = e.clickAction ?? "none";
+	return r === "next_step" ? t.push("tpl-btn-next-step") : r === "previous_step" && t.push("tpl-btn-prev-step"), t.length === 0 ? "" : ` css-class="${x(t.join(" "))}"`;
+}
+function N(e) {
+	let t = e.borderWidth ?? 0;
+	if (t <= 0) return "";
+	let n = x(`${t}px solid ${e.borderColor ?? "#000000"}`), r = x("none"), i = e.borderSides ?? "all";
+	return i === "all" ? ` border="${n}"` : ` border-top="${i === "top" ? n : r}" border-right="${i === "right" ? n : r}" border-bottom="${i === "bottom" ? n : r}" border-left="${i === "left" ? n : r}"`;
+}
+function P(e) {
+	let t = e.clickAction ?? "none";
+	if (t === "scroll_anchor") {
+		let t = e.clickActionAnchorId?.trim().replace(/^#/, "") ?? "";
+		return t === "" ? e.url === "" ? "" : x(e.url) : x(`#${t}`);
+	}
+	return t === "none" || t === "load_page" ? e.url === "" ? "" : x(e.url) : t === "next_step" || t === "previous_step" || t === "close_popup" ? x(e.url === "" ? "#" : e.url) : "";
+}
+function F(e, t) {
 	return e ? ` font-family="${t.resolveFontFamily(e)}"` : "";
 }
 //#endregion
 //#region ../renderer/src/renderers/divider.ts
-function j(e, t) {
-	if (T(e)) return "";
-	let n = C(e.styles.padding), r = e.styles.backgroundColor ? ` container-background-color="${b(e.styles.backgroundColor)}"` : "", i = e.width === "full" ? "100%" : e.width + "px";
+function I(e, t) {
+	if (D(e)) return "";
+	let n = w(e.styles.padding), r = e.styles.backgroundColor ? ` container-background-color="${x(e.styles.backgroundColor)}"` : "", i = e.width === "full" ? "100%" : e.width + "px";
 	return `<mj-divider
   border-width="${e.thickness}px"
   border-style="${e.lineStyle}"
-  border-color="${b(e.color)}"
+  border-color="${x(e.color)}"
   width="${i}"
-  padding="${n}"${r}${E(e)}
+  padding="${n}"${r}${O(e)}
 />`;
 }
 //#endregion
 //#region ../renderer/src/renderers/spacer.ts
-function M(e, t) {
-	return T(e) ? "" : `<mj-spacer height="${e.height}px" padding="0"${e.styles.backgroundColor ? ` container-background-color="${b(e.styles.backgroundColor)}"` : ""}${E(e)} />`;
+function L(e, t) {
+	return D(e) ? "" : `<mj-spacer height="${e.height}px" padding="0"${e.styles.backgroundColor ? ` container-background-color="${x(e.styles.backgroundColor)}"` : ""}${O(e)} />`;
 }
 //#endregion
 //#region ../renderer/src/renderers/html.ts
-function N(e, t) {
-	if (T(e) || !t.allowHtmlBlocks) return "";
+function R(e, t) {
+	if (D(e) || !t.allowHtmlBlocks) return "";
 	let n = e.content;
-	return n === "" ? "" : `<mj-text${E(e)}>
+	return n === "" ? "" : `<mj-text${O(e)}>
 ${n}
 </mj-text>`;
 }
 //#endregion
 //#region ../renderer/src/social-icons.ts
-var P = {
+var z = {
 	facebook: {
 		path: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
 		color: "#1877F2"
@@ -229,8 +292,8 @@ var P = {
 		color: "#1769FF"
 	}
 };
-function F(e, t, n) {
-	let r = P[e], i = r?.path ?? "", a = r?.color ?? "#6B7280";
+function B(e, t, n) {
+	let r = z[e], i = r?.path ?? "", a = r?.color ?? "#6B7280";
 	if (i === "") return "";
 	let o = t === "outlined" ? a : "#ffffff", s;
 	switch (t) {
@@ -255,11 +318,11 @@ function F(e, t, n) {
 }
 //#endregion
 //#region ../renderer/src/renderers/social.ts
-function I(e, t) {
-	if (T(e)) return "";
+function V(e, t) {
+	if (D(e)) return "";
 	let n = e.icons;
 	if (n.length === 0) return "";
-	let r = C(e.styles.padding), i = e.styles.backgroundColor ? ` container-background-color="${b(e.styles.backgroundColor)}"` : "", a = E(e), o = e.align, s = e.iconSize, c = e.iconStyle, l = e.spacing, u;
+	let r = w(e.styles.padding), i = e.styles.backgroundColor ? ` container-background-color="${x(e.styles.backgroundColor)}"` : "", a = O(e), o = e.align, s = e.iconSize, c = e.iconStyle, l = e.spacing, u;
 	switch (s) {
 		case "small":
 			u = 24;
@@ -294,85 +357,85 @@ function I(e, t) {
   padding="${r}"${i}${a}
 >
 ${n.map((e, t) => {
-		let n = e.platform, r = b(e.url), i = F(n, c, u), a = t === f - 1 ? 0 : l;
+		let n = e.platform, r = x(e.url), i = B(n, c, u), a = t === f - 1 ? 0 : l;
 		return `<mj-social-element src="${i}" href="${r}" icon-size="${u}px" padding="0 ${a}px 0 0" border-radius="${d}" background-color="transparent"></mj-social-element>`;
 	}).join("\n")}
 </mj-social>`;
 }
 //#endregion
 //#region ../renderer/src/renderers/menu.ts
-function L(e, t) {
-	if (T(e) || e.items.length === 0) return "";
-	let n = C(e.styles.padding), r = w(e.styles.backgroundColor, "container"), i = E(e), a = B(e.fontFamily, t), o = e.textAlign;
+function H(e, t) {
+	if (D(e) || e.items.length === 0) return "";
+	let n = w(e.styles.padding), r = E(e.styles.backgroundColor, "container"), i = O(e), a = G(e.fontFamily, t), o = e.textAlign;
 	return `<mj-text
   font-size="${e.fontSize}px"
-  color="${b(e.color)}"
+  color="${x(e.color)}"
   align="${o}"
   line-height="1.5"
   padding="${n}"${r}${a}${i}
->${R(e)}</mj-text>`;
+>${U(e)}</mj-text>`;
 }
-function R(e) {
-	let t = e.items, n = y(e.separator), r = x(e.separatorColor), i = e.spacing, a = e.linkColor ?? e.color, o = [], s = t.length;
-	for (let e = 0; e < s; e++) o.push(z(t[e], a)), e < s - 1 && o.push(`<span style="color: ${r}; padding: 0 ${i}px;">${n}</span>`);
+function U(e) {
+	let t = e.items, n = b(e.separator), r = S(e.separatorColor), i = e.spacing, a = e.linkColor ?? e.color, o = [], s = t.length;
+	for (let e = 0; e < s; e++) o.push(W(t[e], a)), e < s - 1 && o.push(`<span style="color: ${r}; padding: 0 ${i}px;">${n}</span>`);
 	return o.join("");
 }
-function z(e, t) {
-	let n = y(e.text), r = b(e.url), i = x(e.color ?? t), a = e.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : "", o = [`color: ${i}`, "text-decoration: none"];
+function W(e, t) {
+	let n = b(e.text), r = x(e.url), i = S(e.color ?? t), a = e.openInNewTab ? " target=\"_blank\" rel=\"noopener\"" : "", o = [`color: ${i}`, "text-decoration: none"];
 	return e.bold && o.push("font-weight: bold"), e.underline && o.push("text-decoration: underline"), `<a href="${r}" style="${o.join("; ")}"${a}>${n}</a>`;
 }
-function B(e, t) {
+function G(e, t) {
 	return e ? ` font-family="${t.resolveFontFamily(e)}"` : "";
 }
 //#endregion
 //#region ../renderer/src/renderers/table.ts
-function V(e, t) {
-	if (T(e) || e.rows.length === 0) return "";
-	let n = C(e.styles.padding), r = w(e.styles.backgroundColor, "container"), i = E(e), a = G(e.fontFamily, t);
+function K(e, t) {
+	if (D(e) || e.rows.length === 0) return "";
+	let n = w(e.styles.padding), r = E(e.styles.backgroundColor, "container"), i = O(e), a = de(e.fontFamily, t);
 	return `<mj-text
   font-size="${e.fontSize}px"
-  color="${b(e.color)}"
+  color="${x(e.color)}"
   align="${e.textAlign}"
   line-height="1.5"
   padding="${n}"${r}${a}${i}
->${H(e)}</mj-text>`;
+>${ce(e)}</mj-text>`;
 }
-function H(e) {
-	let t = x(e.borderColor), n = e.borderWidth, r = "";
+function ce(e) {
+	let t = S(e.borderColor), n = e.borderWidth, r = "";
 	for (let i = 0; i < e.rows.length; i++) {
 		let a = e.rows[i];
-		r += U(a, e, e.hasHeaderRow && i === 0, t, n);
+		r += le(a, e, e.hasHeaderRow && i === 0, t, n);
 	}
 	return `<table style="width: 100%; border-collapse: collapse;">${r}</table>`;
 }
-function U(e, t, n, r, i) {
+function le(e, t, n, r, i) {
 	let a = "";
-	for (let o of e.cells) a += W(o, t, n, r, i);
+	for (let o of e.cells) a += ue(o, t, n, r, i);
 	return `<tr>${a}</tr>`;
 }
-function W(e, t, n, r, i) {
+function ue(e, t, n, r, i) {
 	let a = t.cellPadding, o = [`border: ${i}px solid ${r}`, `padding: ${a}px`];
-	n && (o.push("font-weight: bold"), t.headerBackgroundColor && o.push(`background-color: ${x(t.headerBackgroundColor)}`));
-	let s = o.join("; "), c = S(e.content), l = n ? "th" : "td";
+	n && (o.push("font-weight: bold"), t.headerBackgroundColor && o.push(`background-color: ${S(t.headerBackgroundColor)}`));
+	let s = o.join("; "), c = C(e.content), l = n ? "th" : "td";
 	return `<${l} style="${s}">${c}</${l}>`;
 }
-function G(e, t) {
+function de(e, t) {
 	return e ? ` font-family="${t.resolveFontFamily(e)}"` : "";
 }
 //#endregion
 //#region ../renderer/src/renderers/custom.ts
-function ie(e, t) {
-	if (T(e)) return "";
+function fe(e, t) {
+	if (D(e)) return "";
 	let n = t.customBlockHtml.get(e.id) ?? e.renderedHtml;
 	if (!n || n === "") return "";
-	let r = E(e);
-	return `<mj-text${w(e.styles?.backgroundColor, "container")}${r}>
+	let r = O(e);
+	return `<mj-text${E(e.styles?.backgroundColor, "container")}${r}>
 ${n}
 </mj-text>`;
 }
 //#endregion
 //#region ../renderer/src/columns.ts
-function K(e) {
+function q(e) {
 	switch (e) {
 		case "2": return ["50%", "50%"];
 		case "3": return [
@@ -385,7 +448,7 @@ function K(e) {
 		default: return ["100%"];
 	}
 }
-function q(e, t) {
+function J(e, t) {
 	switch (e) {
 		case "2": return [t * .5, t * .5];
 		case "3": return [
@@ -400,25 +463,25 @@ function q(e, t) {
 }
 //#endregion
 //#region ../renderer/src/renderers/section.ts
-function J(e, t, n) {
-	if (T(e)) return "";
-	let r = e.columns, i = K(r), a = q(r, t.containerWidth), o = C(e.styles.padding), c = w(e.styles.backgroundColor, "native"), l = E(e), u = e.children, d = [];
+function pe(e, t, n) {
+	if (D(e)) return "";
+	let r = e.columns, i = q(r), o = J(r, t.containerWidth), s = w(e.styles.padding), c = E(e.styles.backgroundColor, "native"), l = O(e), u = e.children, d = [];
 	for (let e = 0; e < u.length; e++) {
-		let r = u[e], o = i[e] ?? "100%", c = Math.floor(a[e] ?? t.containerWidth), l = Y(r, t.allowHtmlBlocks).filter((e) => !s(e)), f = t.withContainerWidth(c), p = l.map((e) => n(e, f)).filter((e) => e !== "").join("\n");
-		d.push(`<mj-column width="${o}">
+		let r = u[e], s = i[e] ?? "100%", c = Math.floor(o[e] ?? t.containerWidth), l = me(r, t.allowHtmlBlocks).filter((e) => !a(e)), f = t.withContainerWidth(c), p = l.map((e) => n(e, f)).filter((e) => e !== "").join("\n");
+		d.push(`<mj-column width="${s}">
 ${p === "" ? "<mj-text>&nbsp;</mj-text>" : p}
 </mj-column>`);
 	}
-	return `<mj-section${c} padding="${o}"${l}>
+	return `<mj-section${c} padding="${s}"${l}>
 ${d.join("\n")}
 </mj-section>`;
 }
-function Y(e, t) {
+function me(e, t) {
 	return t ? e : e.filter((e) => e.type !== "html");
 }
 //#endregion
 //#region ../renderer/src/renderers/video.ts
-function ae(e, t) {
+function he(e, t) {
 	if (t) return t;
 	if (!e) return null;
 	for (let t of [/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/, /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/]) {
@@ -428,51 +491,51 @@ function ae(e, t) {
 	let n = e.match(/vimeo\.com\/(?:video\/)?(\d+)/);
 	return n ? `https://vumbnail.com/${n[1]}.jpg` : null;
 }
-function oe(e, t) {
-	if (T(e)) return "";
-	let n = ae(e.url, e.thumbnailUrl);
+function ge(e, t) {
+	if (D(e)) return "";
+	let n = he(e.url, e.thumbnailUrl);
 	if (!n) return "";
-	let r = C(e.styles.padding), i = w(e.styles.backgroundColor, "container"), a = e.width === "full" ? t.containerWidth + "px" : e.width + "px", o = E(e);
+	let r = w(e.styles.padding), i = E(e.styles.backgroundColor, "container"), a = e.width === "full" ? t.containerWidth + "px" : e.width + "px", o = O(e);
 	return `<mj-image
-  src="${b(n)}"
-  alt="${b(e.alt)}"
+  src="${x(n)}"
+  alt="${x(e.alt)}"
   width="${a}"
   align="${e.align}"
   padding="${r}"
-  href="${b(e.url)}"
+  href="${x(e.url)}"
   target="_blank"
   rel="noopener"${i}${o}
 />`;
 }
 //#endregion
 //#region ../renderer/src/renderers/index.ts
-function X(e, c) {
-	return s(e) ? J(e, c, X) : a(e) ? O(e, c) : r(e) ? te(e, c) : u(e) ? ne(e, c) : m(e) ? re(e, c) : n(e) ? j(e, c) : t(e) ? M(e, c) : p(e) ? N(e, c) : f(e) ? I(e, c) : i(e) ? L(e, c) : d(e) ? V(e, c) : o(e) ? oe(e, c) : l(e) ? ie(e, c) : "";
+function Y(e, m) {
+	return a(e) ? pe(e, m, Y) : s(e) ? ee(e, m) : h(e) ? te(e, m) : u(e) ? ne(e, m) : r(e) ? ae(e, m) : n(e) ? oe(e, m) : i(e) ? I(e, m) : d(e) ? L(e, m) : c(e) ? R(e, m) : f(e) ? V(e, m) : o(e) ? H(e, m) : p(e) ? K(e, m) : t(e) ? ge(e, m) : l(e) ? fe(e, m) : "";
 }
 //#endregion
 //#region ../renderer/src/index.ts
-var se = /* @__PURE__ */ e({
-	RenderContext: () => g,
-	SOCIAL_ICONS: () => P,
-	convertMergeTagsToValues: () => S,
-	escapeAttr: () => b,
-	escapeHtml: () => y,
-	generateSocialIconDataUri: () => F,
-	getCssClassAttr: () => E,
-	getCssClasses: () => D,
-	getWidthPercentages: () => K,
-	getWidthPixels: () => q,
-	isHiddenOnAll: () => T,
-	renderBlock: () => X,
-	renderToMjml: () => ce,
-	toPaddingString: () => C
+var _e = /* @__PURE__ */ e({
+	RenderContext: () => _,
+	SOCIAL_ICONS: () => z,
+	convertMergeTagsToValues: () => C,
+	escapeAttr: () => x,
+	escapeHtml: () => b,
+	generateSocialIconDataUri: () => B,
+	getCssClassAttr: () => O,
+	getCssClasses: () => k,
+	getWidthPercentages: () => q,
+	getWidthPixels: () => J,
+	isHiddenOnAll: () => D,
+	renderBlock: () => Y,
+	renderToMjml: () => ve,
+	toPaddingString: () => w
 });
-async function ce(e, t) {
-	let n = t?.customFonts ?? [], r = t?.defaultFallbackFont ?? "Arial, sans-serif", i = t?.allowHtmlBlocks ?? !0, a = await pe(e, t?.renderCustomBlock), o = new g(e.settings.width, n, r, i, a), s = fe(e.blocks, i), c = o.resolveFontFamily(e.settings.fontFamily), l = e.settings.backgroundColor, u = s.map((e) => Z(e, o)).filter((e) => e !== "").join("\n"), d = de(n), f = ue(e.settings.preheaderText);
-	return `<mjml lang="${b(e.settings.locale)}">
+async function ve(e, t) {
+	let n = t?.customFonts ?? [], r = t?.defaultFallbackFont ?? "Arial, sans-serif", i = t?.allowHtmlBlocks ?? !0, a = await Q(e, t?.renderCustomBlock), o = new _(e.settings.width, n, r, i, a), s = o.resolveFontFamily(e.settings.fontFamily), c = e.settings.backgroundColor, l = (e.canvasPages?.length ?? 0) > 0, u = ye(e, o, i), d = Ce(n), f = Se(e.settings.preheaderText), p = x(e.settings.locale), m = `width="${o.containerWidth}px" background-color="${c}"` + (l ? " css-class=\"tpl-canvas-multi\"" : "");
+	return `<mjml lang="${p}">
   <mj-head>${f}
     <mj-attributes>
-      <mj-all font-family="${c}" />
+      <mj-all font-family="${s}" />
       <mj-text font-size="14px" />
       <mj-section padding="0" />
       <mj-column padding="0" />
@@ -488,47 +551,64 @@ async function ce(e, t) {
       }
       @media only screen and (min-width: 769px) {
         .tpl-hide-desktop { display: none !important; mso-hide: all !important; }
-      }
+      }${l ? Ee() : ""}
     </mj-style>
   </mj-head>
-  <mj-body width="${o.containerWidth}px" background-color="${l}">
-${u}
+  <mj-body ${m}>
+${u}${l ? `\n${De()}\n` : ""}
   </mj-body>
 </mjml>`;
 }
-function Z(e, t) {
-	return s(e) ? Q(e, X(e, t)) : Q(e, le(X(e, t)));
+function ye(e, t, n) {
+	let r = e.canvasPages;
+	if (r?.length) {
+		let e = [];
+		for (let i = 0; i < r.length; i++) {
+			let a = X(r[i].blocks ?? [], t, n);
+			if (a.trim() === "") continue;
+			let o = i === 0 ? `tpl-canvas-page tpl-canvas-page-idx-${i} tpl-canvas-page--current` : `tpl-canvas-page tpl-canvas-page-idx-${i}`;
+			e.push(`<mj-wrapper css-class="${x(o)}" padding="0">\n${a}\n</mj-wrapper>`);
+		}
+		return e.join("\n");
+	}
+	return X(e.blocks, t, n);
+}
+function X(e, t, n) {
+	return we(e, n).map((e) => be(e, t)).filter((e) => e !== "").join("\n");
+}
+function be(e, t) {
+	return a(e) ? Z(e, Y(e, t)) : Z(e, xe(Y(e, t)));
 }
-function Q(e, t) {
+function Z(e, t) {
 	if (t === "") return "";
 	let n = e.displayCondition;
 	return n ? `<mj-raw>${n.before}</mj-raw>
 ` + t + `
 <mj-raw>${n.after}</mj-raw>` : t;
 }
-function le(e) {
+function xe(e) {
 	return e === "" ? "" : `<mj-section>
   <mj-column>
 ${e}
   </mj-column>
 </mj-section>`;
 }
-function ue(e) {
+function Se(e) {
 	if (!e) return "";
 	let t = e.trim();
-	return t === "" ? "" : `\n    <mj-preview>${y(t)}</mj-preview>`;
+	return t === "" ? "" : `\n    <mj-preview>${b(t)}</mj-preview>`;
 }
-function de(e) {
-	return e.length === 0 ? "" : e.map((e) => `\n    <mj-font name="${b(e.name)}" href="${b(e.url)}" />`).join("");
+function Ce(e) {
+	return e.length === 0 ? "" : e.map((e) => `\n    <mj-font name="${x(e.name)}" href="${x(e.url)}" />`).join("");
 }
-function fe(e, t) {
+function we(e, t) {
 	return t ? e : e.filter((e) => e.type !== "html");
 }
-async function pe(e, t) {
+async function Q(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	if (!t) return n;
 	let r = [];
-	if ($(e.blocks, r), r.length === 0) return n;
+	if (Te(e, r), r.length === 0) return n;
 	let i = await Promise.all(r.map((e) => t(e)));
 	for (let e = 0; e < r.length; e++) n.set(r[e].id, i[e]);
 	return n;
@@ -539,10 +619,24 @@ function $(e, t) {
 			t.push(n);
 			continue;
 		}
-		if (s(n)) for (let e of n.children) $(e, t);
+		if (a(n)) for (let e of n.children) $(e, t);
+	}
+}
+function Te(e, t) {
+	let n = e.canvasPages;
+	if (n?.length) {
+		for (let e of n) $(e.blocks ?? [], t);
+		return;
 	}
+	$(e.blocks, t);
+}
+function Ee() {
+	return "\n      .tpl-canvas-multi .tpl-canvas-page { display: none !important; }\n      .tpl-canvas-multi .tpl-canvas-page.tpl-canvas-page--current { display: block !important; }";
+}
+function De() {
+	return "<mj-raw>\n    <script>\n      (function () {\n        var root = document.body;\n        if (!root || !root.classList.contains(\"tpl-canvas-multi\")) return;\n        root.addEventListener(\n          \"click\",\n          function (e) {\n            var link = e.target.closest(\"a\");\n            if (!link || !root.contains(link)) return;\n            var isNext =\n              link.classList.contains(\"tpl-btn-next-step\") ||\n              !!link.closest(\"td.tpl-btn-next-step\");\n            var isPrev =\n              link.classList.contains(\"tpl-btn-prev-step\") ||\n              !!link.closest(\"td.tpl-btn-prev-step\");\n            if (!isNext && !isPrev) return;\n            e.preventDefault();\n            e.stopPropagation();\n            var pages = Array.prototype.slice.call(\n              root.querySelectorAll(\".tpl-canvas-page\"),\n            );\n            var cur = root.querySelector(\n              \".tpl-canvas-page.tpl-canvas-page--current\",\n            );\n            var i = pages.indexOf(cur);\n            if (i < 0) return;\n            if (isNext) {\n              if (i >= pages.length - 1) return;\n              pages[i].classList.remove(\"tpl-canvas-page--current\");\n              pages[i + 1].classList.add(\"tpl-canvas-page--current\");\n            } else {\n              if (i <= 0) return;\n              pages[i].classList.remove(\"tpl-canvas-page--current\");\n              pages[i - 1].classList.add(\"tpl-canvas-page--current\");\n            }\n          },\n          true,\n        );\n      })();\n    <\/script>\n  </mj-raw>";
 }
 //#endregion
-export { se as t };
+export { _e as t };
 
-//# sourceMappingURL=renderer-CUxvx7ro.js.map
+//# sourceMappingURL=renderer-D0L44Vlp.js.map