mail-editor-pancake 0.0.0 → 0.0.8

package/packages/blocks/dist/index.js

@@ -1,5 +1,5 @@
-import { defineBlock as d, blockButtonWidthCss as F, docContentWidthCss as L, mjRawEmailTableWrap as W, mjRawCellTypographyFromStyles as E } from "@simple-mail/core";
-const s = {
+import { defineBlock as h, blockButtonWidthCss as A, docContentWidthCss as H, mjRawEmailTableWrap as _, mjRawCellTypographyFromStyles as G, normalizeFontWeightStep as k, FONT_WEIGHT_STEP_OPTIONS as L } from "@simple-mail/core";
+const m = {
   html: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3.5" y="4" width="17" height="16" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M8 8.5l3 3.5-3 3.5M16 8.5l-3 3.5 3 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
   text: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5 6h14M5 10h14M5 14h10M5 18h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>',
   image: '<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="2" stroke="currentColor" stroke-width="1.6" fill="none"/><circle cx="9" cy="10" r="1.5" fill="currentColor"/><path d="M4 18l5-5 4 4 3-3 4 4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
@@ -11,11 +11,11 @@ const s = {
   social: '<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2.5" stroke="currentColor" stroke-width="1.4" fill="none"/><circle cx="12" cy="12" r="2.5" stroke="currentColor" stroke-width="1.4" fill="none"/><circle cx="18" cy="12" r="2.5" stroke="currentColor" stroke-width="1.4" fill="none"/></svg>',
   footer: '<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4" fill="none"/><path d="M5 18h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>',
   socialGroup: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="12" r="2" stroke="currentColor" stroke-width="1.4"/><circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="1.4"/><circle cx="16" cy="12" r="2" stroke="currentColor" stroke-width="1.4"/></svg>'
-}, y = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), N = d({
+}, $ = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), q = h({
   type: "button",
   name: "按钮",
   category: "content",
-  icon: s.button,
+  icon: m.button,
   defaultProps: {
     text: "立即查看",
     href: "https://example.com",
@@ -43,6 +43,7 @@ const s = {
       key: "align",
       label: "对齐",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "左", value: "left" },
         { label: "居中", value: "center" },
@@ -68,26 +69,26 @@ const s = {
     placeholder: "按钮文字"
   },
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, l = `${e.innerPaddingV}px ${e.innerPaddingH}px`, o = F(e.width), n = o ? ` width="${y(o)}"` : "";
-    return `<mj-button href="${y(e.href)}" background-color="${y(
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = `${e.innerPaddingV}px ${e.innerPaddingH}px`, n = A(e.width), i = n ? ` width="${$(n)}"` : "";
+    return `<mj-button href="${$(e.href)}" background-color="${$(
       e.backgroundColor
-    )}" color="${y(e.color)}" border-radius="${e.borderRadius}px" font-size="${y(
+    )}" color="${$(e.color)}" border-radius="${e.borderRadius}px" font-size="${$(
       e.fontSize
-    )}" align="${e.align}" padding="${t}" inner-padding="${l}"${n}>${y(
+    )}" align="${e.align}" padding="${t}" inner-padding="${o}"${i}>${$(
       e.text
     )}</mj-button>`;
   },
   renderPreview: (e) => {
-    const t = F(e.width), l = t ? `width:${t};max-width:100%;box-sizing:border-box;` : "";
+    const t = A(e.width), o = t ? `width:${t};max-width:100%;box-sizing:border-box;` : "";
     return `<div style="padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;text-align:${e.align};">
-      <a href="${y(e.href)}" style="display:inline-block;background:${e.backgroundColor};border-radius:${e.borderRadius}px;padding:${e.innerPaddingV}px ${e.innerPaddingH}px;text-decoration:none;font-size:${e.fontSize};line-height:1.2;${l}"><span class="sm-button-text" style="color:${e.color}">${y(e.text)}</span></a>
+      <a href="${$(e.href)}" style="display:inline-block;background:${e.backgroundColor};border-radius:${e.borderRadius}px;padding:${e.innerPaddingV}px ${e.innerPaddingH}px;text-decoration:none;font-size:${e.fontSize};line-height:1.2;${o}"><span class="sm-button-text" style="color:${e.color}">${$(e.text)}</span></a>
     </div>`;
   }
-}), R = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), O = d({
+}), E = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), K = h({
   type: "divider",
   name: "分隔线",
   category: "content",
-  icon: s.divider,
+  icon: m.divider,
   defaultProps: {
     color: "#e6e8ec",
     width: "100%",
@@ -102,15 +103,15 @@ const s = {
     { key: "paddingTop", label: "上边距", type: "number", min: 0, max: 80 },
     { key: "paddingBottom", label: "下边距", type: "number", min: 0, max: 80 }
   ],
-  toMjml: (e) => `<mj-divider border-color="${R(e.color)}" border-width="${e.thickness}px" width="${R(
+  toMjml: (e) => `<mj-divider border-color="${E(e.color)}" border-width="${e.thickness}px" width="${E(
     e.width
   )}" padding="${e.paddingTop}px 0px ${e.paddingBottom}px 0px" />`,
   renderPreview: (e) => `<div style="padding:${e.paddingTop}px 0 ${e.paddingBottom}px 0;"><div style="border-top:${e.thickness}px solid ${e.color};width:${e.width};margin:0 auto;"></div></div>`
-}), g = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), U = d({
+}), b = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), J = h({
   type: "custom:footer",
   name: "页脚",
   category: "custom",
-  icon: s.footer,
+  icon: m.footer,
   defaultProps: {
     companyName: "你的公司",
     address: "上海市某区某路某号",
@@ -125,21 +126,21 @@ const s = {
     { key: "unsubscribeHref", label: "退订链接", type: "url" },
     { key: "textColor", label: "文字颜色", type: "color" }
   ],
-  toMjml: (e) => `<mj-text align="center" color="${g(e.textColor)}" font-size="12px" line-height="1.6" padding="8px 0px 8px 0px">
-  ${g(e.companyName)}<br />
-  ${g(e.address)}<br />
-  <a href="${g(e.unsubscribeHref)}" style="color:${g(e.textColor)};">${g(e.unsubscribeText)}</a>
+  toMjml: (e) => `<mj-text align="center" color="${b(e.textColor)}" font-size="12px" line-height="1.6" padding="8px 0px 8px 0px">
+  ${b(e.companyName)}<br />
+  ${b(e.address)}<br />
+  <a href="${b(e.unsubscribeHref)}" style="color:${b(e.textColor)};">${b(e.unsubscribeText)}</a>
 </mj-text>`,
   renderPreview: (e) => `<div style="padding:8px 0;text-align:center;font-size:12px;line-height:1.6;color:${e.textColor};">
-      ${g(e.companyName)}<br/>
-      ${g(e.address)}<br/>
-      <a href="${g(e.unsubscribeHref)}" style="color:${e.textColor};">${g(e.unsubscribeText)}</a>
+      ${b(e.companyName)}<br/>
+      ${b(e.address)}<br/>
+      <a href="${b(e.unsubscribeHref)}" style="color:${e.textColor};">${b(e.unsubscribeText)}</a>
     </div>`
-}), v = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), I = d({
+}), C = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), X = h({
   type: "hero",
   name: "Hero 大图",
   category: "content",
-  icon: s.hero,
+  icon: m.hero,
   defaultProps: {
     backgroundUrl: "https://placehold.co/600x320/312e81/c4b5fd/png?text=Hero+Background",
     backgroundColor: "#1e1b4b",
@@ -161,6 +162,7 @@ const s = {
       key: "verticalAlign",
       label: "文字垂直位置",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "靠上", value: "top" },
         { label: "居中", value: "middle" },
@@ -171,6 +173,7 @@ const s = {
       key: "textAlign",
       label: "文字水平对齐",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "左", value: "left" },
         { label: "居中", value: "center" },
@@ -194,31 +197,31 @@ const s = {
     placeholder: "编写覆盖在图片上的文案…"
   },
   toMjml: (e, t) => {
-    const l = L(t.doc.meta.width), o = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, n = `${e.height}px`;
+    const o = H(t.doc.meta.width), n = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, i = `${e.height}px`;
     return `<mj-hero
       mode="fixed-height"
-      height="${n}"
-      background-width="${l}"
-      background-height="${n}"
-      background-url="${v(e.backgroundUrl)}"
-      background-color="${v(e.backgroundColor)}"
-      padding="${o}"
+      height="${i}"
+      background-width="${o}"
+      background-height="${i}"
+      background-url="${C(e.backgroundUrl)}"
+      background-color="${C(e.backgroundColor)}"
+      padding="${n}"
       vertical-align="${e.verticalAlign}"
     >
       <mj-text
         align="${e.textAlign}"
-        color="${v(e.textColor)}"
+        color="${C(e.textColor)}"
         padding="0"
       >${e.content}</mj-text>
     </mj-hero>`;
   },
   renderPreview: (e, t) => {
-    const l = L(t.doc.meta.width), o = e.verticalAlign === "top" ? "flex-start" : e.verticalAlign === "bottom" ? "flex-end" : "center", n = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, r = v(e.backgroundUrl);
+    const o = H(t.doc.meta.width), n = e.verticalAlign === "top" ? "flex-start" : e.verticalAlign === "bottom" ? "flex-end" : "center", i = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, r = C(e.backgroundUrl);
     return `<div
       style="
         box-sizing:border-box;
         width:100%;
-        max-width:${l};
+        max-width:${o};
         min-height:${e.height}px;
         margin:0 auto;
         background-image:linear-gradient(to bottom,rgba(0,0,0,0.25),rgba(0,0,0,0.35)),url(${r});
@@ -226,10 +229,10 @@ const s = {
         background-position:center;
         background-color:${e.backgroundColor};
         display:flex;
-        align-items:${o};
+        align-items:${n};
         justify-content:${e.textAlign === "right" ? "flex-end" : e.textAlign === "center" ? "center" : "flex-start"};
-        padding:${n};
-        color:${v(e.textColor)};
+        padding:${i};
+        color:${C(e.textColor)};
         overflow:hidden;
         border-radius:2px;
       "
@@ -239,17 +242,17 @@ const s = {
         style="
           width:100%;
           text-align:${e.textAlign};
-          color:${v(e.textColor)};
+          color:${C(e.textColor)};
           text-shadow:0 1px 2px rgba(0,0,0,0.45);
         "
       >${e.content}</div>
     </div>`;
   }
-}), q = d({
+}), D = h({
   type: "html",
   name: "HTML",
   category: "content",
-  icon: s.html,
+  icon: m.html,
   defaultProps: {
     html: '<p style="margin:0;">在此写入任意 HTML，将经 <strong>mj-raw</strong> 原样输出到邮件。支持变量 {{user.name}}</p>',
     paddingTop: 8,
@@ -274,15 +277,15 @@ const s = {
     placeholder: "输入 HTML…"
   },
   toMjml: (e, t) => {
-    const l = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
-    return W(l, e.html, E(t.doc.styles));
+    const o = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
+    return _(o, e.html, G(t.doc.styles));
   },
   renderPreview: (e) => `<div class="sm-html-content" style="padding:${`${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`};min-height:1em;">${e.html}</div>`
-}), C = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), _ = d({
+}), M = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), Y = h({
   type: "image",
   name: "图片",
   category: "content",
-  icon: s.image,
+  icon: m.image,
   defaultProps: {
     src: "https://placehold.co/600x240/EEF2FF/4F46E5/png?text=600x240",
     alt: "",
@@ -312,6 +315,7 @@ const s = {
       key: "align",
       label: "对齐",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "左", value: "left" },
         { label: "居中", value: "center" },
@@ -321,20 +325,20 @@ const s = {
     { key: "paddingTop", label: "内边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, l = e.href ? ` href="${C(e.href)}"` : "", o = ` alt="${C(e.alt || "")}"`, n = e.height != null && e.height > 0 ? ` height="${e.height}px"` : "";
-    return `<mj-image src="${C(e.src)}"${o}${l} width="${e.width}px"${n} align="${e.align}" padding="${t}" />`;
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = e.href ? ` href="${M(e.href)}"` : "", n = ` alt="${M(e.alt || "")}"`, i = e.height != null && e.height > 0 ? ` height="${e.height}px"` : "";
+    return `<mj-image src="${M(e.src)}"${n}${o} width="${e.width}px"${i} align="${e.align}" padding="${t}" />`;
   },
   renderPreview: (e) => {
-    const t = e.align === "center" ? "margin:0 auto;" : e.align === "right" ? "margin-left:auto;" : "", l = e.height != null && e.height > 0 ? e.height : 0, o = l > 0 ? `width:${e.width}px;height:${l}px;object-fit:cover;object-position:center;` : `width:${e.width}px;height:auto;`;
-    return `<div style="padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;text-align:${e.align};"><img src="${C(
+    const t = e.align === "center" ? "margin:0 auto;" : e.align === "right" ? "margin-left:auto;" : "", o = e.height != null && e.height > 0 ? e.height : 0, n = o > 0 ? `width:${e.width}px;height:${o}px;object-fit:cover;object-position:center;` : `width:${e.width}px;height:auto;`;
+    return `<div style="padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;text-align:${e.align};"><img src="${M(
       e.src
-    )}" alt="${C(e.alt)}" style="display:block;${t}max-width:100%;${o}border:0;outline:none;" /></div>`;
+    )}" alt="${M(e.alt)}" style="display:block;${t}max-width:100%;${n}border:0;outline:none;" /></div>`;
   }
-}), T = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), K = d({
+}), R = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), Z = h({
   type: "custom:logo",
   name: "公司 Logo",
   category: "custom",
-  icon: s.logo,
+  icon: m.logo,
   defaultProps: {
     src: "https://placehold.co/240x60/1f2328/ffffff/png?text=YOUR+LOGO",
     href: "https://example.com",
@@ -349,6 +353,7 @@ const s = {
       key: "align",
       label: "对齐",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "左", value: "left" },
         { label: "居中", value: "center" },
@@ -356,25 +361,25 @@ const s = {
       ]
     }
   ],
-  toMjml: (e) => `<mj-image src="${T(e.src)}" href="${T(e.href)}" width="${e.width}px" align="${e.align}" alt="logo" padding="8px 0px 8px 0px" />`,
+  toMjml: (e) => `<mj-image src="${R(e.src)}" href="${R(e.href)}" width="${e.width}px" align="${e.align}" alt="logo" padding="8px 0px 8px 0px" />`,
   renderPreview: (e) => {
     const t = e.align === "center" ? "margin:0 auto;" : e.align === "right" ? "margin-left:auto;" : "";
-    return `<div style="padding:8px 0;text-align:${e.align};"><img src="${T(
+    return `<div style="padding:8px 0;text-align:${e.align};"><img src="${R(
       e.src
     )}" alt="logo" style="display:block;${t}width:${e.width}px;max-width:100%;height:auto;" /></div>`;
   }
 });
-function G(e) {
+function Q(e) {
   const t = e.trim();
-  return t === "ig" ? "instagram" : t === "rabbit" || t === "tiktok" ? "web" : t;
+  return t === "ig" ? "instagram" : t === "rabbit" || t === "tiktok" || t === "reddit" ? "web" : t;
 }
-const V = [
+const ee = [
   { label: "X", value: "x" },
   { label: "Rabbit", value: "rabbit" },
   { label: "Facebook", value: "facebook" },
   { label: "TikTok", value: "tiktok" },
   { label: "Instagram", value: "ig" }
-], X = [
+], te = [
   { label: "微信", value: "wechat" },
   { label: "微博", value: "weibo" },
   { label: "X", value: "x" },
@@ -383,8 +388,9 @@ const V = [
   { label: "Facebook", value: "facebook" },
   { label: "Instagram", value: "instagram" },
   { label: "YouTube", value: "youtube" },
+  { label: "Reddit", value: "reddit" },
   { label: "网页", value: "web" }
-], D = {
+], oe = {
   wechat: { color: "#1AAD19", preview: "信" },
   weibo: { color: "#E6162D", preview: "微" },
   x: { color: "#000000", preview: "X" },
@@ -394,63 +400,85 @@ const V = [
   instagram: { color: "#E4405F", preview: "◎" },
   ig: { color: "#E4405F", preview: "◎" },
   youtube: { color: "#FF0000", preview: "▶" },
+  reddit: { color: "#FF4500", preview: "r" },
   tiktok: { color: "#000000", preview: "♪" },
   rabbit: { color: "#FF2442", preview: "R" },
   website: { color: "#6b7280", preview: "◇" },
   web: { color: "#6b7280", preview: "◇" }
-}, a = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), J = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function B(e) {
-  return D[e] ?? { color: "#6b7280", preview: "·" };
+}, p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ne = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function P(e) {
+  return oe[e] ?? { color: "#6b7280", preview: "·" };
 }
-function j(e) {
+function T(e) {
   return `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
 }
-function A(e, t) {
-  var p, m;
-  const l = t.labelFontSize > 0 ? t.labelFontSize : 13, o = Math.max(8, Math.min(48, l)), n = ((p = t.labelFontWeight) == null ? void 0 : p.trim()) || "normal", r = ((m = t.labelColor) == null ? void 0 : m.trim()) || "#333333", h = a(n);
-  return e.map((i) => {
-    var u, f, M;
-    const c = B(i.network), z = ((u = i.backgroundColor) == null ? void 0 : u.trim()) || c.color, b = [
-      `name="${a(G(i.network))}"`,
-      `href="${a(i.href)}"`,
-      `background-color="${a(z)}"`,
-      `color="${a(r)}"`,
-      `font-size="${o}px"`,
-      `font-weight="${h}"`
-    ].join(" "), k = (f = i.iconSrc) == null ? void 0 : f.trim(), w = k ? `${b} src="${a(k)}"` : b, x = ((M = i.label) == null ? void 0 : M.trim()) ?? "";
-    return x ? `  <mj-social-element ${w}>
-    ${J(x)}
-  </mj-social-element>` : `  <mj-social-element ${w} />`;
+function N(e, t) {
+  const o = Math.max(1, Number(e) || 28), n = Number(t);
+  if (!Number.isFinite(n) || n <= 0) return "0px";
+  const i = o / 2;
+  return n >= 999 || n >= i ? "999px" : `${Math.min(n, o)}px`;
+}
+function V(e, t) {
+  const o = Math.max(1, Number(e) || 28), n = Number(t);
+  if (!Number.isFinite(n) || n <= 0) return "0";
+  const i = o / 2;
+  return n >= 999 || n >= i ? "50%" : `${Math.min(n, o)}px`;
+}
+function F(e, t = 10) {
+  const o = Number(e);
+  return !Number.isFinite(o) || o < 0 ? t : Math.min(64, Math.round(o));
+}
+function I(e) {
+  return e === "right" ? "flex-end" : e === "left" ? "flex-start" : "center";
+}
+function O(e, t) {
+  var a;
+  const o = t.labelFontSize > 0 ? t.labelFontSize : 13, n = Math.max(8, Math.min(48, o)), i = k(t.labelFontWeight), r = ((a = t.labelColor) == null ? void 0 : a.trim()) || "#333333", d = p(i);
+  return e.map((l) => {
+    var v, S, y;
+    const c = P(l.network), u = ((v = l.backgroundColor) == null ? void 0 : v.trim()) || c.color, g = [
+      `name="${p(Q(l.network))}"`,
+      `href="${p(l.href)}"`,
+      `background-color="${p(u)}"`,
+      `color="${p(r)}"`,
+      `font-size="${n}px"`,
+      `font-weight="${d}"`
+    ].join(" "), w = (S = l.iconSrc) == null ? void 0 : S.trim(), x = w ? `${g} src="${p(w)}"` : g, f = ((y = l.label) == null ? void 0 : y.trim()) ?? "";
+    return f ? `  <mj-social-element ${x}>
+    ${ne(f)}
+  </mj-social-element>` : `  <mj-social-element ${x} />`;
   }).join(`
 `);
 }
-const H = [
+const U = [
   { network: "x", href: "https://x.com/" },
   { network: "rabbit", href: "https://example.com" },
   { network: "facebook", href: "https://facebook.com/" },
   { network: "tiktok", href: "https://www.tiktok.com/" },
   { network: "ig", href: "https://instagram.com/" }
 ];
-function P(e) {
-  var l;
-  if ((l = e.elements) != null && l.length) return e.elements;
+function W(e) {
+  var o;
+  if ((o = e.elements) != null && o.length) return e.elements;
   const t = e.links;
-  return Array.isArray(t) && t.length ? t.map((o) => ({
-    network: String(o.network ?? "web"),
-    href: String(o.href ?? "")
-  })) : H;
+  return Array.isArray(t) && t.length ? t.map((n) => ({
+    network: String(n.network ?? "web"),
+    href: String(n.href ?? "")
+  })) : U;
 }
-const Y = d({
+const ie = h({
   type: "custom:social",
   name: "社交链接",
   category: "custom",
-  icon: s.social,
+  icon: m.social,
   defaultProps: {
-    elements: H,
+    elements: U,
     align: "center",
     iconSize: 28,
+    iconBorderRadius: 999,
+    iconSpacing: 10,
     labelFontSize: 13,
-    labelFontWeight: "normal",
+    labelFontWeight: "400",
     labelColor: "#333333",
     paddingTop: 8,
     paddingRight: 0,
@@ -462,7 +490,7 @@ const Y = d({
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: V,
+      options: ee,
       help: "平台：X、Rabbit、Facebook、TikTok、Instagram (ig)。可填标签、自定义图标 URL。MJML 侧 Rabbit/TikTok 使用 web 占位图标，需要品牌图时请填「图标 URL」。"
     },
     {
@@ -477,22 +505,15 @@ const Y = d({
       key: "labelFontWeight",
       label: "标签字重",
       type: "select",
-      options: [
-        { label: "较细 (300)", value: "300" },
-        { label: "常规", value: "normal" },
-        { label: "400", value: "400" },
-        { label: "500", value: "500" },
-        { label: "600", value: "600" },
-        { label: "700", value: "700" },
-        { label: "粗体", value: "bold" },
-        { label: "更粗 (800)", value: "800" }
-      ]
+      selectVariant: "segmented",
+      options: [...L]
     },
     { key: "labelColor", label: "标签颜色", type: "color" },
     {
       key: "align",
       label: "对齐",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "左", value: "left" },
         { label: "居中", value: "center" },
@@ -500,44 +521,62 @@ const Y = d({
       ]
     },
     { key: "iconSize", label: "图标尺寸 (px)", type: "number", min: 16, max: 64 },
+    {
+      key: "iconBorderRadius",
+      label: "图标圆角 (px)",
+      type: "number",
+      min: 0,
+      max: 999,
+      step: 1,
+      help: "0 为方形直角；较大值（如 999）为圆形（默认）。"
+    },
+    {
+      key: "iconSpacing",
+      label: "图标间距 (px)",
+      type: "number",
+      min: 0,
+      max: 64,
+      step: 1,
+      help: "图标之间的间隔（MJML inner-padding）。"
+    },
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = j(e), l = P(e).filter((r) => {
-      var h;
-      return (h = r.href) == null ? void 0 : h.trim();
-    }), o = {
+    const t = T(e), o = N(e.iconSize, e.iconBorderRadius ?? 999), n = F(e.iconSpacing, 10), i = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${n}px" padding="${t}"`, r = W(e).filter((l) => {
+      var c;
+      return (c = l.href) == null ? void 0 : c.trim();
+    }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
-      labelFontWeight: String(e.labelFontWeight ?? "normal"),
+      labelFontWeight: k(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, n = A(l, o);
-    return n.trim() ? `<mj-social align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" padding="${t}">
-${n}
-</mj-social>` : `<mj-social align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" padding="${t}"></mj-social>`;
+    }, a = O(r, d);
+    return a.trim() ? `<mj-social ${i}>
+${a}
+</mj-social>` : `<mj-social ${i}></mj-social>`;
   },
   renderPreview: (e) => {
-    var p, m;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, l = Math.max(8, Math.min(48, t)), o = ((p = e.labelFontWeight) == null ? void 0 : p.trim()) || "normal", n = ((m = e.labelColor) == null ? void 0 : m.trim()) || "#333333", r = P(e).filter((i) => {
-      var c;
-      return (c = i.href) == null ? void 0 : c.trim();
-    }).map((i) => {
-      var x, u, f;
-      const c = B(i.network), z = ((x = i.backgroundColor) == null ? void 0 : x.trim()) || c.color, $ = ((u = i.label) == null ? void 0 : u.trim()) ?? "", b = (f = i.iconSrc) == null ? void 0 : f.trim(), k = b ? `<img src="${a(b)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:contain;border-radius:3px;flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:50%;background:${z};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
+    var u;
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = k(e.labelFontWeight), i = ((u = e.labelColor) == null ? void 0 : u.trim()) || "#333333", r = V(e.iconSize, e.iconBorderRadius ?? 999), d = F(e.iconSpacing, 10), a = I(e.align), l = W(e).filter((s) => {
+      var g;
+      return (g = s.href) == null ? void 0 : g.trim();
+    }).map((s) => {
+      var y, z, j;
+      const g = P(s.network), w = ((y = s.backgroundColor) == null ? void 0 : y.trim()) || g.color, x = ((z = s.label) == null ? void 0 : z.trim()) ?? "", f = (j = s.iconSrc) == null ? void 0 : j.trim(), v = f ? `<img src="${p(f)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:cover;border-radius:${r};flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:${r};background:${w};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
         e.iconSize / 2
-      )}px;font-weight:600;flex-shrink:0;">${c.preview}</span>`, w = $ ? `<span style="margin-left:6px;font-size:${l}px !important;font-weight:${o};color:${a(
-        n
-      )} !important;line-height:1.2;">${a($)}</span>` : "";
-      return `<span style="display:inline-flex;align-items:center;margin:0 6px;vertical-align:middle;"><a href="${a(
-        i.href
-      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${k}</a>${w}</span>`;
-    }).join("");
-    return `<div style="padding:${j(e)};text-align:${e.align};">${r || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
+      )}px;font-weight:600;flex-shrink:0;overflow:hidden;">${g.preview}</span>`, S = x ? `<span style="font-size:${o}px !important;font-weight:${n};color:${p(
+        i
+      )} !important;line-height:1.2;">${p(x)}</span>` : "";
+      return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${p(
+        s.href
+      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${v}</a>${S}</span>`;
+    }).join(""), c = T(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${a};align-items:center;gap:${d}px;padding:${c};">${l || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
   }
-}), Z = d({
+}), le = h({
   type: "social-group",
   name: "社交组",
   category: "content",
-  icon: s.socialGroup,
+  icon: m.socialGroup,
   defaultProps: {
     elements: [
       { network: "weibo", href: "https://weibo.com" },
@@ -545,8 +584,10 @@ ${n}
     ],
     align: "center",
     iconSize: 28,
+    iconBorderRadius: 999,
+    iconSpacing: 10,
     labelFontSize: 13,
-    labelFontWeight: "normal",
+    labelFontWeight: "400",
     labelColor: "#333333",
     paddingTop: 8,
     paddingRight: 0,
@@ -558,7 +599,7 @@ ${n}
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: X,
+      options: te,
       help: "每行：平台、链接、可选标签文字、自定义图标 URL、图标背景色。标签的字号/字重/颜色在下方统一设置。"
     },
     {
@@ -573,22 +614,15 @@ ${n}
       key: "labelFontWeight",
       label: "标签字重",
       type: "select",
-      options: [
-        { label: "较细 (300)", value: "300" },
-        { label: "常规", value: "normal" },
-        { label: "400", value: "400" },
-        { label: "500", value: "500" },
-        { label: "600", value: "600" },
-        { label: "700", value: "700" },
-        { label: "粗体", value: "bold" },
-        { label: "更粗 (800)", value: "800" }
-      ]
+      selectVariant: "segmented",
+      options: [...L]
     },
     { key: "labelColor", label: "标签颜色", type: "color" },
     {
       key: "align",
       label: "对齐",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "左", value: "left" },
         { label: "居中", value: "center" },
@@ -596,60 +630,78 @@ ${n}
       ]
     },
     { key: "iconSize", label: "图标尺寸 (px)", type: "number", min: 16, max: 64 },
+    {
+      key: "iconBorderRadius",
+      label: "图标圆角 (px)",
+      type: "number",
+      min: 0,
+      max: 999,
+      step: 1,
+      help: "0 为方形直角；填较大值（如 999）或与尺寸一半相当时为圆形（默认圆形）。"
+    },
+    {
+      key: "iconSpacing",
+      label: "图标间距 (px)",
+      type: "number",
+      min: 0,
+      max: 64,
+      step: 1,
+      help: "每个图标周围的留白，横向即图标之间的间隔（MJML inner-padding）。"
+    },
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = j(e), l = e.elements.filter((r) => {
-      var h;
-      return (h = r.href) == null ? void 0 : h.trim();
-    }), o = {
+    const t = T(e), o = N(e.iconSize, e.iconBorderRadius ?? 999), n = F(e.iconSpacing, 10), i = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${n}px" padding="${t}"`, r = e.elements.filter((l) => {
+      var c;
+      return (c = l.href) == null ? void 0 : c.trim();
+    }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
-      labelFontWeight: String(e.labelFontWeight ?? "normal"),
+      labelFontWeight: k(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, n = A(l, o);
-    return n.trim() ? `<mj-social align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" padding="${t}">
-${n}
-</mj-social>` : `<mj-social align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" padding="${t}"></mj-social>`;
+    }, a = O(r, d);
+    return a.trim() ? `<mj-social ${i}>
+${a}
+</mj-social>` : `<mj-social ${i}></mj-social>`;
   },
   renderPreview: (e) => {
-    var p, m;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, l = Math.max(8, Math.min(48, t)), o = ((p = e.labelFontWeight) == null ? void 0 : p.trim()) || "normal", n = ((m = e.labelColor) == null ? void 0 : m.trim()) || "#333333", r = e.elements.filter((i) => {
-      var c;
-      return (c = i.href) == null ? void 0 : c.trim();
-    }).map((i) => {
-      var x, u, f;
-      const c = B(i.network), z = ((x = i.backgroundColor) == null ? void 0 : x.trim()) || c.color, $ = ((u = i.label) == null ? void 0 : u.trim()) ?? "", b = (f = i.iconSrc) == null ? void 0 : f.trim(), k = b ? `<img src="${a(b)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:contain;border-radius:3px;flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:50%;background:${z};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
+    var u;
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = k(e.labelFontWeight), i = ((u = e.labelColor) == null ? void 0 : u.trim()) || "#333333", r = V(e.iconSize, e.iconBorderRadius ?? 999), d = F(e.iconSpacing, 10), a = I(e.align), l = e.elements.filter((s) => {
+      var g;
+      return (g = s.href) == null ? void 0 : g.trim();
+    }).map((s) => {
+      var y, z, j;
+      const g = P(s.network), w = ((y = s.backgroundColor) == null ? void 0 : y.trim()) || g.color, x = ((z = s.label) == null ? void 0 : z.trim()) ?? "", f = (j = s.iconSrc) == null ? void 0 : j.trim(), v = f ? `<img src="${p(f)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:cover;border-radius:${r};flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:${r};background:${w};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
         e.iconSize / 2
-      )}px;font-weight:600;flex-shrink:0;">${c.preview}</span>`, w = $ ? `<span style="margin-left:6px;font-size:${l}px !important;font-weight:${o};color:${a(
-        n
-      )} !important;line-height:1.2;">${a($)}</span>` : "";
-      return `<span style="display:inline-flex;align-items:center;margin:0 6px;vertical-align:middle;"><a href="${a(
-        i.href
-      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${k}</a>${w}</span>`;
-    }).join("");
-    return `<div style="padding:${j(e)};text-align:${e.align};">${r || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
+      )}px;font-weight:600;flex-shrink:0;overflow:hidden;">${g.preview}</span>`, S = x ? `<span style="font-size:${o}px !important;font-weight:${n};color:${p(
+        i
+      )} !important;line-height:1.2;">${p(x)}</span>` : "";
+      return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${p(
+        s.href
+      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${v}</a>${S}</span>`;
+    }).join(""), c = T(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${a};align-items:center;gap:${d}px;padding:${c};">${l || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
   }
-}), Q = d({
+}), re = h({
   type: "spacer",
   name: "间距",
   category: "content",
-  icon: s.spacer,
+  icon: m.spacer,
   defaultProps: { height: 24 },
   schema: [{ key: "height", label: "高度 (px)", type: "number", min: 1, max: 200 }],
   toMjml: (e) => `<mj-spacer height="${e.height}px" />`,
   renderPreview: (e) => `<div style="height:${e.height}px;line-height:${e.height}px;"></div>`
-}), S = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ee = d({
+}), B = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ae = h({
   type: "text",
   name: "文本",
   category: "content",
-  icon: s.text,
+  icon: m.text,
   defaultProps: {
     content: '<p style="margin:0;">在此处输入文本。<strong>双击</strong>进入编辑模式，<em>选中文字</em>会出现工具条；支持变量 {{user.name}}</p>',
     align: "left",
-    color: "#433f3f",
-    fontSize: "16px",
+    color: "",
+    fontSize: "",
     fontFamily: "",
-    fontWeight: "normal",
+    fontWeight: "",
     lineHeight: "",
     paddingTop: 8,
     paddingRight: 0,
@@ -659,27 +711,25 @@ ${n}
   schema: [
     {
       key: "align",
-      label: "默认对齐",
+      label: "对齐",
       type: "select",
+      selectVariant: "segmented",
       options: [
         { label: "左", value: "left" },
         { label: "居中", value: "center" },
         { label: "右", value: "right" }
       ]
     },
-    { key: "color", label: "默认颜色", type: "color" },
-    { key: "fontSize", label: "默认字号", type: "text", placeholder: "14px" },
+    { key: "color", label: "颜色", type: "color", placeholder: "继承全局" },
+    { key: "fontSize", label: "字号", type: "text", inheritGlobal: !0 },
     { key: "fontFamily", label: "字体", type: "text", placeholder: "继承全局" },
     {
       key: "fontWeight",
       label: "字重",
       type: "select",
-      options: [
-        { label: "常规 400", value: "normal" },
-        { label: "中等 500", value: "500" },
-        { label: "半粗 600", value: "600" },
-        { label: "加粗 700", value: "bold" }
-      ]
+      selectVariant: "segmented",
+      inheritGlobal: !0,
+      options: [...L]
     },
     {
       key: "lineHeight",
@@ -717,39 +767,48 @@ ${n}
     placeholder: "输入文本…"
   },
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, l = e.fontFamily ? ` font-family="${S(e.fontFamily)}"` : "", o = e.fontWeight && e.fontWeight !== "normal" ? ` font-weight="${e.fontWeight}"` : "", n = String(e.lineHeight ?? "").trim(), r = n ? ` line-height="${S(n)}"` : "";
-    return `<mj-text align="${e.align}" color="${S(e.color)}" font-size="${S(
-      e.fontSize
-    )}"${r}${l}${o} padding="${t}">${e.content}</mj-text>`;
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = e.fontFamily ? ` font-family="${B(e.fontFamily)}"` : "", n = String(e.fontWeight ?? "").trim(), i = n ? ` font-weight="${B(k(n))}"` : "", r = String(e.lineHeight ?? "").trim(), d = r ? ` line-height="${B(r)}"` : "", a = String(e.color ?? "").trim(), l = a ? ` color="${B(a)}"` : "", c = String(e.fontSize ?? "").trim(), u = c ? ` font-size="${B(c)}"` : "";
+    return `<mj-text align="${e.align}"${l}${u}${d}${o}${i} padding="${t}">${e.content}</mj-text>`;
   },
   renderPreview: (e) => {
-    const t = e.fontFamily ? `font-family:${e.fontFamily};` : "", l = e.fontWeight && e.fontWeight !== "normal" ? `font-weight:${e.fontWeight};` : "", o = String(e.lineHeight ?? "").trim(), n = o ? `line-height:${o};` : "line-height:normal;";
-    return `<div class="sm-text-content" style="text-align:${e.align};color:${e.color};font-size:${e.fontSize};${n}${t}${l}padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;">${e.content}</div>`;
+    const t = e.fontFamily ? `font-family:${e.fontFamily};` : "", o = String(e.fontWeight ?? "").trim(), n = o ? `font-weight:${k(o)};` : "", i = String(e.lineHeight ?? "").trim(), r = i ? `line-height:${i};` : "line-height:normal;", d = String(e.color ?? "").trim(), a = d ? `color:${d};` : "", l = String(e.fontSize ?? "").trim(), c = l ? `font-size:${l};` : "";
+    return `<div class="sm-text-content" style="text-align:${e.align};${a}${c}${n}${r}${t}padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;">${e.content}</div>`;
   }
-}), te = [
-  ee,
+}), ce = [
+  ae,
+  D,
+  Y,
+  le,
+  X,
   q,
-  _,
-  Z,
-  I,
-  N,
-  O,
-  Q
-], le = [K, Y, U], ne = [...te, ...le];
+  K,
+  re
+], se = [Z, ie, J], ge = [...ce, ...se];
 export {
-  ne as allBlocks,
-  te as builtinBlocks,
-  N as buttonBlock,
-  O as dividerBlock,
-  le as exampleCustomBlocks,
-  U as footerBlock,
-  I as heroBlock,
-  q as htmlBlock,
-  _ as imageBlock,
-  K as logoBlock,
-  Y as socialBlock,
-  Z as socialGroupBlock,
-  Q as spacerBlock,
-  ee as textBlock
+  te as SOCIAL_NETWORK_OPTIONS,
+  ge as allBlocks,
+  ce as builtinBlocks,
+  q as buttonBlock,
+  K as dividerBlock,
+  p as escAttr,
+  ne as escMjmlText,
+  se as exampleCustomBlocks,
+  I as flexJustifyFromAlign,
+  J as footerBlock,
+  X as heroBlock,
+  D as htmlBlock,
+  Y as imageBlock,
+  Z as logoBlock,
+  Q as mjSocialElementName,
+  O as mjSocialElementsLines,
+  T as paddingQuad,
+  ie as socialBlock,
+  le as socialGroupBlock,
+  V as socialIconBorderRadiusCss,
+  N as socialIconBorderRadiusMjml,
+  F as socialIconSpacingPx,
+  P as socialMeta,
+  re as spacerBlock,
+  ae as textBlock
 };
 //# sourceMappingURL=index.js.map