@erpsquad/common 1.11.6 → 1.11.7

package/dist/chunks/common-BgXEAs_y.esm.js

@@ -0,0 +1,851 @@
+import { i as initialStyles, T as TEMPLATE_EDITOR_PATHS } from "./constant-BXPcBhJN.esm.js";
+import { cssScopingService } from "../views/template-editor/services/index.esm.js";
+const editableTypes = /* @__PURE__ */ new Set(["text", "text-block", "heading", "heading-2", "heading-3", "heading-4"]);
+const generateSectionsHTML = (sections, yOffset = 0, isCompiler = false) => {
+  const visibleSections = sections.filter((s) => !s.hidden);
+  const hasPositionData = visibleSections.some((s) => s.x !== void 0 && s.y !== void 0);
+  if (hasPositionData) {
+    const maxBottom = Math.max(...visibleSections.map((s) => (s.y ?? 0) + (s.height ?? 60)));
+    const wrapperHeight = Math.max(maxBottom + 20, 100);
+    let html2 = `<div style="position:relative;width:100%;min-height:${wrapperHeight}px;height:auto;">`;
+    for (const section of visibleSections) {
+      const x = section.x ?? 0;
+      const y = (section.y ?? 0) + yOffset;
+      const w = section.width ?? 200;
+      const h = section.height ?? 60;
+      const rot = section.rotation ?? 0;
+      const z = section.zIndex ?? 1;
+      const rotStyle = rot !== 0 ? `transform:rotate(${rot}deg);transform-origin:center center;` : "";
+      const isTextType = editableTypes.has(section.type) || !section.type && !["image", "table", "buttons", "divider", "signature", "qr-code", "bar-code"].includes(section.type);
+      const isTableType = section.type === "table";
+      const isButtonOrSig = section.type === "buttons" || section.type === "signature";
+      let cleanContent = (section.content || "").replace(/<span class="cx-ph-tag">([\s\S]*?)<\/span>/g, "$1");
+      if (isTableType && !cleanContent && section.attributes) {
+        cleanContent = generateContentHTML("table", "", section.attributes, [], isCompiler);
+      }
+      const overflowStyle = isButtonOrSig || isTableType || isTextType ? "visible" : "hidden";
+      const hasExplicitLineBreak = cleanContent.includes("<br") || cleanContent.includes("\n") || (cleanContent.match(/<\/p>/gi) || []).length > 1;
+      const isMultiLineParagraph = !hasExplicitLineBreak && h > 45 && cleanContent.length > 80;
+      const whiteSpaceStyle = isTableType ? "normal" : hasExplicitLineBreak || isMultiLineParagraph ? "pre-wrap" : "nowrap";
+      const widthStyle = isTextType && !hasExplicitLineBreak && !isMultiLineParagraph ? `width:max-content;min-width:${w}px;max-width:${Math.max(w, 1200 - x - 10)}px;` : `width:${w}px;`;
+      const wordBreakStyle = isTextType && !hasExplicitLineBreak && !isMultiLineParagraph ? "word-break:normal;" : "word-break:break-word;";
+      let innerDisplayStyles = "";
+      if (isTextType) {
+        innerDisplayStyles = "display:block;";
+      } else if (isTableType) {
+        innerDisplayStyles = "display:block;";
+      } else {
+        innerDisplayStyles = "display:flex;flex-direction:column;justify-content:center;align-items:center;";
+      }
+      const wrapperHeightStyle = isTableType ? `height:auto;min-height:${h}px;` : `height:${h}px;`;
+      html2 += `<div style="position:absolute;left:${x}px;top:${y}px;${widthStyle}${wrapperHeightStyle}${rotStyle}z-index:${z};overflow:${overflowStyle};${innerDisplayStyles}${wordBreakStyle}white-space:${whiteSpaceStyle};box-sizing:border-box;">${cleanContent}</div>`;
+    }
+    html2 += "</div>";
+    return html2;
+  }
+  let html = "";
+  const groups = [];
+  const visited = /* @__PURE__ */ new Set();
+  for (const section of visibleSections) {
+    if (visited.has(section.id)) continue;
+    visited.add(section.id);
+    groups.push([section]);
+  }
+  for (const group of groups) {
+    const cleanContent = (group[0].content || "").replace(/<span class="cx-ph-tag">([\s\S]*?)<\/span>/g, "$1");
+    html += `<div style="padding: 10px;">${cleanContent}</div>`;
+  }
+  return html;
+};
+const templateRoutes = (modulePath, type) => {
+  const list = `${modulePath}${TEMPLATE_EDITOR_PATHS.TEMPLATES_LIST(type)}`;
+  const add = `${modulePath}${TEMPLATE_EDITOR_PATHS.TEMPLATES_ADD(type)}`;
+  const edit = `${modulePath}${TEMPLATE_EDITOR_PATHS.TEMPLATES_EDIT(type)}`;
+  return {
+    LIST: list,
+    ADD_TEMPLATE: (id) => add.replace(":id", id),
+    EDIT_TEMPLATE: (id, templateId) => edit.replace(":id", id).replace(":template_id", templateId)
+  };
+};
+const generateEmailPreview = (sections, headerSections = [], footerSections = [], isSaving = false, scopeId, stationeryHeaderHtml = "", stationeryFooterHtml = "", paper = "A4", orient = "portrait", watermark) => {
+  let pW = paper === "Letter" ? 816 : 794;
+  let pH = paper === "Letter" ? 1056 : 1123;
+  if (orient === "landscape") {
+    const t = pW;
+    pW = pH;
+    pH = t;
+  }
+  const headerHtml = headerSections && (headerSections == null ? void 0 : headerSections.length) ? generateHeaderFooterPreview(headerSections, "header") : "";
+  const footerHtml = footerSections && (footerSections == null ? void 0 : footerSections.length) ? generateHeaderFooterPreview(footerSections, "footer") : "";
+  const templateScopeId = scopeId || cssScopingService.generateScopeId();
+  const watermarkHtml = (watermark == null ? void 0 : watermark.show) && (watermark == null ? void 0 : watermark.image) ? `
+    <div class="st-wm" style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none;">
+      <img src="${watermark.image}" alt="Watermark" style="opacity: ${(watermark.opacity ?? 15) / 100}; width: ${watermark.size ?? 50}%; transform: rotate(${watermark.rotation ?? 0}deg); object-fit: contain; pointer-events: none; user-select: none;" />
+    </div>
+  ` : "";
+  const styleBlock = `
+    <style>
+      .email-container {
+        margin: 0 auto;
+        margin-bottom: 20px;
+        background-color: #fff;
+        border-radius: 8px;
+        width: ${isSaving ? "65%" : `${pW}px`};
+        max-width: ${isSaving ? "65%" : `${pW}px`};
+        display: flex;
+        flex-direction: column;
+        height: ${pH}px;
+        min-height: ${pH}px;
+      }
+      .email-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+      }
+      a {
+        color: #007bff;
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+        * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Inter", sans-serif !important;
+        font-size: 16px;
+        font-weight: 400;
+        color: #00011c;
+        font-style: normal;
+      }
+
+      img {
+        display: block;
+        height: auto;
+      }
+
+      /* Minimal reset — border-collapse is scoped to specific table classes */
+
+      a {
+        text-decoration: none;
+      }
+
+      table.our-details,
+      .our-details td,
+      .our-details th {
+        border: 1px solid #d3d3d4;
+      }
+
+      table.amount-word-table,
+      table.amount-word-table td,
+      table.amount-word-table th {
+        border: 1px solid #d6d6d6;
+      }
+
+      .amount-word-table thead th {
+        background-color: #f5f6f5;
+      }
+
+      .amount-word-table thead td {
+        background-color: #f5f6f5;
+      }
+
+      .amount-word-table tbody tr:nth-child(even) {
+        background-color: #f5f6f5;
+      }
+
+      .amount-word-table tbody tr td {
+        border-top: 0;
+        border-bottom: 0;
+      }
+
+      .deliver-table thead th {
+        background-color: transparent;
+      }
+
+      .email-container table {
+        background-color: transparent !important;
+        border-collapse: collapse !important;
+      }
+      .email-content p,
+      .email-content h1,
+      .email-content h2,
+      .email-content h3,
+      .email-content h4,
+      .email-content h5,
+      .email-content h6 {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
+      }
+      .email-content hr {
+        width: 100% !important;
+        margin: 0 !important;
+      }
+      .email-content a {
+        width: 100% !important;
+        height: 100% !important;
+        box-sizing: border-box !important;
+      }
+      .email-content img {
+        max-width: 100% !important;
+        max-height: 100% !important;
+        box-sizing: border-box !important;
+      }
+      /* Table rules to exactly match FreeElement's sx */
+      .email-content table {
+        width: 100% !important;
+        min-width: 0 !important; /* Override doc.css min-width: max-content */
+        height: auto !important;
+        border-collapse: collapse !important;
+        white-space: normal !important;
+        table-layout: fixed !important;
+        margin: 0 !important;
+        background-color: transparent !important;
+      }
+      .email-content table tr {
+        box-sizing: border-box !important;
+      }
+      .email-content table td {
+        box-sizing: border-box !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        vertical-align: middle !important;
+      }
+      .email-content table th {
+        box-sizing: border-box !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        vertical-align: middle !important;
+      }
+      .email-content div {
+        box-sizing: border-box !important;
+      }
+    </style>
+  `;
+  let html = isSaving ? `<html><head>${styleBlock}</head><body>` : `<div>${styleBlock}`;
+  html += `
+  <div class="email-container st pbd-page pb-tpl-view ${templateScopeId}" style="position: relative; width: ${isSaving ? "65%" : `${pW}px`} !important; min-width: ${isSaving ? "65%" : `${pW}px`} !important; max-width: ${isSaving ? "65%" : `${pW}px`} !important; height: ${pH}px !important; min-height: ${pH}px !important; overflow: hidden;">
+    ${watermarkHtml}
+    <div style="width: 100%; z-index: 0; flex-shrink: 0; pointer-events: none;">
+      ${stationeryHeaderHtml}
+      ${headerHtml}
+      ${headerHtml ? "<hr/>" : ""}
+    </div>
+    <div class="email-content pbd-page-inner" style="position: relative; z-index: 1; padding: 0 !important;">
+  `;
+  html += generateSectionsHTML(sections);
+  html += `
+    </div>
+    <div style="width: 100%; z-index: 0; flex-shrink: 0; margin-top: auto; pointer-events: none;">
+      ${footerHtml ? "<hr/>" : ""}
+      ${footerHtml}
+      ${stationeryFooterHtml}
+    </div>
+  </div>
+  `;
+  html += isSaving ? `</body></html>` : `</div>`;
+  return html;
+};
+const generateHeaderFooterPreview = (sections, type = "header", scopeId) => {
+  const scopeClass = scopeId ? ` ${scopeId}` : "";
+  let html = `<${type} class="${type}${scopeClass}">`;
+  html += generateSectionsHTML(sections);
+  html += `</${type}>`;
+  return html;
+};
+const extractStyles = (html, sectionType) => {
+  const tempDiv = document.createElement("div");
+  tempDiv.innerHTML = html;
+  const element = tempDiv.firstChild;
+  if (!element) return {};
+  if ((element == null ? void 0 : element.getAttribute) instanceof Function === false) {
+    return {};
+  }
+  const styleAttr = element == null ? void 0 : element.getAttribute("style");
+  const allAttributes = (element == null ? void 0 : element.attributes) || [];
+  const attrObj = Array.from(allAttributes).reduce((obj, attr) => {
+    obj[attr.name] = attr.value;
+    return obj;
+  }, {});
+  if (!styleAttr) return {};
+  const styleObj = {};
+  const stylePairs = styleAttr.split(";").filter((pair) => pair.trim() !== "");
+  stylePairs.forEach((pair) => {
+    const [prop, value] = pair.split(":").map((part) => part.trim());
+    if (prop && value) {
+      const propName = prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      if ((propName === "width" || propName === "height" || propName === "maxWidth" || propName === "maxHeight") && value === "100% !important") {
+        return;
+      }
+      styleObj[propName] = value;
+    }
+  });
+  attrObj.styles = styleObj;
+  return attrObj;
+};
+const EMAIL_SAFE_PROPERTIES = /* @__PURE__ */ new Set([
+  "background",
+  "background-color",
+  "border",
+  "border-style",
+  "border-collapse",
+  "border-top",
+  "border-right",
+  "border-bottom",
+  "border-left",
+  "border-color",
+  "border-radius",
+  "color",
+  "display",
+  "font",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "height",
+  "line-height",
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "padding",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "text-align",
+  "text-decoration",
+  "vertical-align",
+  "width",
+  "max-width",
+  "min-width",
+  "max-height",
+  "min-height",
+  "object-fit",
+  "opacity"
+]);
+const applyOpacityToColor = (color, opacity) => {
+  if (!color || color === "transparent") return "transparent";
+  if (typeof opacity !== "number" || opacity >= 1) return color;
+  if (opacity <= 0) return "transparent";
+  const trimmed = color.trim();
+  if (trimmed.startsWith("#")) {
+    const hex = trimmed.slice(1);
+    let r = 0, g = 0, b = 0, a = 1;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 4) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+      a = parseInt(hex[3] + hex[3], 16) / 255;
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else if (hex.length === 8) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+      a = parseInt(hex.slice(6, 8), 16) / 255;
+    } else {
+      return color;
+    }
+    const finalAlpha = Math.max(0, Math.min(1, Math.round(a * opacity * 1e3) / 1e3));
+    return `rgba(${r}, ${g}, ${b}, ${finalAlpha})`;
+  }
+  const rgbaMatch = trimmed.match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i);
+  if (rgbaMatch) {
+    const r = parseInt(rgbaMatch[1], 10);
+    const g = parseInt(rgbaMatch[2], 10);
+    const b = parseInt(rgbaMatch[3], 10);
+    const existingA = parseFloat(rgbaMatch[4]);
+    const finalAlpha = Math.max(0, Math.min(1, Math.round(existingA * opacity * 1e3) / 1e3));
+    return `rgba(${r}, ${g}, ${b}, ${finalAlpha})`;
+  }
+  const rgbMatch = trimmed.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+  if (rgbMatch) {
+    const r = parseInt(rgbMatch[1], 10);
+    const g = parseInt(rgbMatch[2], 10);
+    const b = parseInt(rgbMatch[3], 10);
+    const finalAlpha = Math.max(0, Math.min(1, Math.round(opacity * 1e3) / 1e3));
+    return `rgba(${r}, ${g}, ${b}, ${finalAlpha})`;
+  }
+  const namedColors = {
+    white: [255, 255, 255],
+    black: [0, 0, 0],
+    red: [255, 0, 0],
+    green: [0, 128, 0],
+    blue: [0, 0, 255],
+    gray: [128, 128, 128],
+    grey: [128, 128, 128],
+    lightgray: [211, 211, 211],
+    lightgrey: [211, 211, 211]
+  };
+  const lower = trimmed.toLowerCase();
+  if (namedColors[lower]) {
+    const [r, g, b] = namedColors[lower];
+    const finalAlpha = Math.max(0, Math.min(1, Math.round(opacity * 1e3) / 1e3));
+    return `rgba(${r}, ${g}, ${b}, ${finalAlpha})`;
+  }
+  return color;
+};
+const generateInlineStyles = (styles, parentKey = "") => {
+  if (!styles || typeof styles !== "object") return "";
+  const styleEntries = Object.entries(styles).reduce((acc, [key, value]) => {
+    if (value === void 0 || value === null) return acc;
+    const fullKey = parentKey ? `${parentKey}-${key}` : key;
+    if (typeof value === "object" && !Array.isArray(value)) {
+      acc.push(generateInlineStyles(value, fullKey));
+      return acc;
+    }
+    const cssKey = fullKey.replace(/([A-Z])/g, "-$1").toLowerCase();
+    if (!EMAIL_SAFE_PROPERTIES.has(cssKey) && key !== "fullWidth" && key !== "alignment") {
+      return acc;
+    }
+    if (key === "fullWidth" && value === true) {
+      acc.push("width: 100%");
+      return acc;
+    }
+    if (key === "alignment" && typeof value === "string") {
+      acc.push(`text-align: ${value}`);
+      return acc;
+    }
+    if (typeof value === "boolean") return acc;
+    const cssValue = typeof value === "number" && !["z-index", "opacity", "line-height", "font-weight"].includes(cssKey) ? `${value}px` : value;
+    acc.push(`${cssKey}: ${cssValue}`);
+    return acc;
+  }, []);
+  return styleEntries.filter(Boolean).join("; ");
+};
+const getInitialSectionData = (type, attrs = {}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  let content = "";
+  const styles = initialStyles[type] || {};
+  const inlineStyles = generateInlineStyles(styles);
+  switch (type) {
+    case "heading":
+      content = `<h1 style="${inlineStyles}">Heading 1</h1>`;
+      break;
+    case "heading-2":
+      content = `<h2 style="${inlineStyles}">Heading 2</h2>`;
+      break;
+    case "heading-3":
+      content = `<h3 style="${inlineStyles}">Heading 3</h3>`;
+      break;
+    case "heading-4":
+      content = `<h4 style="${inlineStyles}">Heading 4</h4>`;
+      break;
+    case "text":
+      content = `<p style="${inlineStyles}">Hello, enter your text here...</p>`;
+      break;
+    case "image":
+      content = `<img src="${(attrs == null ? void 0 : attrs.src) || ""}" alt="${(attrs == null ? void 0 : attrs.alt) || "Image"}" style="${inlineStyles};" />`;
+      break;
+    case "buttons":
+      attrs.text = (attrs == null ? void 0 : attrs.text) || "Button text";
+      content = `<a href="${(attrs == null ? void 0 : attrs.href) || "#"}" target="_blank" style="${inlineStyles}; display: flex !important; text-decoration: none !important; box-sizing: border-box !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; text-align: center !important; word-break: break-word !important; white-space: normal !important;">${attrs.text}</a>`;
+      break;
+    case "divider":
+      content = `<hr style="border: none !important; border-top: ${(styles == null ? void 0 : styles.borderWidth) || 1}px ${(styles == null ? void 0 : styles.borderStyle) || "solid"} ${(styles == null ? void 0 : styles.borderColor) || "#000000"} !important; width: 100% !important; margin: 0 !important; height: 0 !important;" />`;
+      break;
+    case "table": {
+      const { border, borderStyle, borderColor, borderRadius, height, opacity, ...rest } = styles;
+      const tableOpacity = typeof opacity === "number" ? opacity : 1;
+      const useWrapperTrick = borderRadius && styles.borderCollapse !== "separate" && styles.is_bordered;
+      const tInlineStyles = generateInlineStyles({
+        ...rest,
+        ...useWrapperTrick ? { borderStyle: "hidden" } : styles.is_bordered ? { border, borderStyle, borderColor } : {},
+        ...useWrapperTrick ? {} : { borderRadius }
+      });
+      const wrapperStyles = useWrapperTrick ? `border: ${border || 1}px ${borderStyle || "solid"} ${borderColor || "#000000"}; border-radius: ${borderRadius}px; overflow: hidden; box-sizing: border-box; width: 100%;` : "";
+      const tHeadRowHeight = Number((_a = styles.tHead) == null ? void 0 : _a.rowHeight) || 38;
+      const tBodyRowHeight = Number((_b = styles.tBody) == null ? void 0 : _b.rowHeight) || 38;
+      const rawHeadBg = ((_c = styles.tHead) == null ? void 0 : _c.backgroundColor) || "rgba(245, 245, 245, 0.75)";
+      const headBgColor = applyOpacityToColor(rawHeadBg, tableOpacity);
+      const rawBodyBg = ((_d = styles.tBody) == null ? void 0 : _d.backgroundColor) || "rgba(255, 255, 255, 0.75)";
+      const bodyBgColor = applyOpacityToColor(rawBodyBg, tableOpacity);
+      const thUserFontSize = Number((_e = styles.tHead) == null ? void 0 : _e.fontSize) || 14;
+      const thBasePadding = typeof ((_f = styles.thCells) == null ? void 0 : _f.padding) === "number" ? styles.thCells.padding : 8;
+      const thAvailH = Math.max(4, tHeadRowHeight - 1);
+      const effectiveThFontSize = Math.min(thUserFontSize, Math.max(8, thAvailH - 2));
+      const thRemainingV = Math.max(0, thAvailH - effectiveThFontSize);
+      const thVPadding = Math.max(0, Math.min(thBasePadding, Math.floor(thRemainingV / 2)));
+      const thHPadding = thBasePadding;
+      const thWhiteSpace = tHeadRowHeight < 36 ? "nowrap" : "normal";
+      const tbUserFontSize = Number((_g = styles.tBody) == null ? void 0 : _g.fontSize) || 14;
+      const tbBasePadding = typeof ((_h = styles.tbCells) == null ? void 0 : _h.padding) === "number" ? styles.tbCells.padding : 8;
+      const tbAvailH = Math.max(4, tBodyRowHeight - 1);
+      const effectiveTbFontSize = Math.min(tbUserFontSize, Math.max(8, tbAvailH - 2));
+      const tbRemainingV = Math.max(0, tbAvailH - effectiveTbFontSize);
+      const tbVPadding = Math.max(0, Math.min(tbBasePadding, Math.floor(tbRemainingV / 2)));
+      const tbHPadding = tbBasePadding;
+      const tbWhiteSpace = tBodyRowHeight < 36 ? "nowrap" : "normal";
+      const { padding: _thPad, ...thCellsRest } = styles.thCells || {};
+      const { padding: _tbPad, ...tbCellsRest } = styles.tbCells || {};
+      const { rowHeight: _thRH, backgroundColor: _thBg, ...tHeadRest } = styles.tHead || {};
+      const { rowHeight: _tbRH, backgroundColor: _tbBg, ...tBodyRest } = styles.tBody || {};
+      const tHeadInlineStyles = generateInlineStyles(tHeadRest);
+      const tBodyInlineStyles = generateInlineStyles(tBodyRest);
+      const thCellInlineStyles = generateInlineStyles({ ...tHeadRest, ...thCellsRest, border, borderStyle, borderColor });
+      const tbCellInlineStyles = generateInlineStyles({ ...tBodyRest, ...tbCellsRest, border, borderStyle, borderColor });
+      content = `${useWrapperTrick ? `<div style="${wrapperStyles}">` : ""}<table style="${tInlineStyles}; width: 100%; border-collapse: collapse; height: auto !important; table-layout: fixed; margin: 0 !important;"><thead style="${tHeadInlineStyles}"><tr style="background-color: ${headBgColor} !important; height: ${tHeadRowHeight}px; max-height: ${tHeadRowHeight}px; line-height: 1;"><th style="${thCellInlineStyles}; vertical-align: middle; height: ${tHeadRowHeight}px; max-height: ${tHeadRowHeight}px; box-sizing: border-box; padding: ${thVPadding}px ${thHPadding}px !important; font-size: ${effectiveThFontSize}px !important; line-height: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: ${thWhiteSpace}; background-color: ${headBgColor} !important;">Column 1</th><th style="${thCellInlineStyles}; vertical-align: middle; height: ${tHeadRowHeight}px; max-height: ${tHeadRowHeight}px; box-sizing: border-box; padding: ${thVPadding}px ${thHPadding}px !important; font-size: ${effectiveThFontSize}px !important; line-height: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: ${thWhiteSpace}; background-color: ${headBgColor} !important;">Column 2</th><th style="${thCellInlineStyles}; vertical-align: middle; height: ${tHeadRowHeight}px; max-height: ${tHeadRowHeight}px; box-sizing: border-box; padding: ${thVPadding}px ${thHPadding}px !important; font-size: ${effectiveThFontSize}px !important; line-height: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: ${thWhiteSpace}; background-color: ${headBgColor} !important;">Column 3</th></tr></thead><tbody style="${tBodyInlineStyles}"><tr style="height: ${tBodyRowHeight}px; max-height: ${tBodyRowHeight}px; line-height: 1;"><td style="${tbCellInlineStyles}; vertical-align: middle; height: ${tBodyRowHeight}px; max-height: ${tBodyRowHeight}px; box-sizing: border-box; padding: ${tbVPadding}px ${tbHPadding}px !important; font-size: ${effectiveTbFontSize}px !important; line-height: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: ${tbWhiteSpace}; background-color: ${bodyBgColor} !important;"></td><td style="${tbCellInlineStyles}; vertical-align: middle; height: ${tBodyRowHeight}px; max-height: ${tBodyRowHeight}px; box-sizing: border-box; padding: ${tbVPadding}px ${tbHPadding}px !important; font-size: ${effectiveTbFontSize}px !important; line-height: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: ${tbWhiteSpace}; background-color: ${bodyBgColor} !important;"></td><td style="${tbCellInlineStyles}; vertical-align: middle; height: ${tBodyRowHeight}px; max-height: ${tBodyRowHeight}px; box-sizing: border-box; padding: ${tbVPadding}px ${tbHPadding}px !important; font-size: ${effectiveTbFontSize}px !important; line-height: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: ${tbWhiteSpace}; background-color: ${bodyBgColor} !important;"></td></tr></tbody></table>${useWrapperTrick ? `</div>` : ""}`.trim();
+      break;
+    }
+    case "signature": {
+      const signatureText = (attrs == null ? void 0 : attrs.signatureText) || "Signature";
+      content = `<svg viewBox="0 0 300 80" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" fill="${((_i = attrs == null ? void 0 : attrs.styles) == null ? void 0 : _i.color) || "#333333"}" style="${inlineStyles}">${signatureText}</text></svg>`;
+      break;
+    }
+    case "qr-code":
+      attrs.placeholder = (attrs == null ? void 0 : attrs.placeholder) || "{{qr_data}}";
+      content = `<div style="background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;">${attrs.placeholder}</div>`;
+      break;
+    case "bar-code":
+      attrs.placeholder = (attrs == null ? void 0 : attrs.placeholder) || "{{barcode_data}}";
+      content = `<div style="background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;">${attrs.placeholder}</div>`;
+      break;
+    default:
+      content = '<p style="font-size: 16px; color: #333333; line-height: 1.5;">New section</p>';
+  }
+  extractStyles(content);
+  const baseAttrs = { ...attrs || {}, styles };
+  if (type === "table" && !baseAttrs.tableData) {
+    baseAttrs.tableData = {
+      name: "",
+      columns: [
+        { id: "col1", header: "Column 1", align: "l" },
+        { id: "col2", header: "Column 2", align: "l" },
+        { id: "col3", header: "Column 3", align: "l" }
+      ],
+      rows: [
+        { col1: "", col2: "", col3: "" }
+      ],
+      border: true,
+      mergedCells: []
+    };
+    content = generateContentHTML(type, content, baseAttrs, []);
+  }
+  return {
+    content,
+    type,
+    attributes: baseAttrs,
+    // Default free-positioning fields (caller overrides x/y with drop position)
+    x: 52,
+    y: 52,
+    width: 300,
+    height: 78,
+    rotation: 0,
+    zIndex: 1
+  };
+};
+const generateContentHTML = (sectionType, content, attrs, placeholders = [], isCompiler = false) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const { src, alt, styles: eStyles, text, placeholder, tableData } = attrs || {};
+  const styles = {
+    ...initialStyles[sectionType],
+    ...eStyles
+  };
+  const inlineStyles = generateInlineStyles(styles);
+  if (sectionType === "buttons") {
+    return `<a href="${(attrs == null ? void 0 : attrs.href) || "#"}" target="_blank" style="${inlineStyles}; display: flex !important; text-decoration: none !important; box-sizing: border-box !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; text-align: center !important; word-break: break-word !important; white-space: normal !important;">${text || "Button Text"}</a>`;
+  } else if (sectionType === "image") {
+    let imgInlineStyles = inlineStyles;
+    if (styles == null ? void 0 : styles.is_bordered) {
+      styles.padding = "10px";
+      imgInlineStyles = generateInlineStyles(styles);
+    } else {
+      styles.padding = "0";
+      imgInlineStyles = generateInlineStyles(styles);
+    }
+    const objectFit = (styles == null ? void 0 : styles.objectFit) || "contain";
+    let objectPosition = "center";
+    if ((styles == null ? void 0 : styles.alignment) === "left") objectPosition = "left";
+    if ((styles == null ? void 0 : styles.alignment) === "right") objectPosition = "right";
+    return `<img src="${src || ""}" alt="${alt || "Image"}" style="${imgInlineStyles}; box-sizing: border-box !important; object-fit: ${objectFit} !important; object-position: ${objectPosition} !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;" />`;
+  } else if (sectionType === "divider") {
+    return `<hr style="border: none !important; border-top: ${(styles == null ? void 0 : styles.borderWidth) || 1}px ${(styles == null ? void 0 : styles.borderStyle) || "solid"} ${(styles == null ? void 0 : styles.borderColor) || "#000000"} !important; width: 100% !important; margin: 0 !important; height: 0 !important;" />`;
+  } else if (sectionType === "table") {
+    const { border, borderStyle, borderColor, borderRadius, height, opacity, ...rest } = styles;
+    const tableOpacity = typeof opacity === "number" ? opacity : 1;
+    const useWrapperTrick = borderRadius && styles.borderCollapse !== "separate" && styles.is_bordered;
+    const tInlineStyles = generateInlineStyles({
+      ...rest,
+      ...useWrapperTrick ? { borderStyle: "hidden" } : styles.is_bordered ? { border, borderStyle, borderColor } : {},
+      ...useWrapperTrick ? {} : { borderRadius }
+    });
+    const wrapperStyles = useWrapperTrick ? `border: ${border || 1}px ${borderStyle || "solid"} ${borderColor || "#000000"}; border-radius: ${borderRadius}px; overflow: hidden; box-sizing: border-box; width: 100%;` : "";
+    const tHeadRowHeight = Number((_a = styles.tHead) == null ? void 0 : _a.rowHeight) || 38;
+    const tBodyRowHeight = Number((_b = styles.tBody) == null ? void 0 : _b.rowHeight) || 38;
+    const rawHeadBg = ((_c = styles.tHead) == null ? void 0 : _c.backgroundColor) || "rgba(245, 245, 245, 0.75)";
+    const headBgColor = applyOpacityToColor(rawHeadBg, tableOpacity);
+    const hasZebra = !!((_d = styles.tBody) == null ? void 0 : _d.zebraStriping);
+    const rawAltColor = ((_e = styles.tBody) == null ? void 0 : _e.alternateRowColor) || "#f9f9f9";
+    const altColor = applyOpacityToColor(rawAltColor, tableOpacity);
+    const rawMainBg = ((_f = styles.tBody) == null ? void 0 : _f.backgroundColor) || "#ffffff";
+    const mainBgColor = applyOpacityToColor(rawMainBg, tableOpacity);
+    const thUserFontSize = Number((_g = styles.tHead) == null ? void 0 : _g.fontSize) || 14;
+    const thBasePadding = typeof ((_h = styles.thCells) == null ? void 0 : _h.padding) === "number" ? styles.thCells.padding : 8;
+    const thAvailH = Math.max(4, tHeadRowHeight - 1);
+    const effectiveThFontSize = Math.min(thUserFontSize, Math.max(8, thAvailH - 2));
+    const thRemainingV = Math.max(0, thAvailH - effectiveThFontSize);
+    const thVPadding = Math.max(0, Math.min(thBasePadding, Math.floor(thRemainingV / 2)));
+    const thHPadding = thBasePadding;
+    const thWhiteSpace = tHeadRowHeight < 36 ? "nowrap" : "normal";
+    const tbUserFontSize = Number((_i = styles.tBody) == null ? void 0 : _i.fontSize) || 14;
+    const tbBasePadding = typeof ((_j = styles.tbCells) == null ? void 0 : _j.padding) === "number" ? styles.tbCells.padding : 8;
+    const tbAvailH = Math.max(4, tBodyRowHeight - 1);
+    const effectiveTbFontSize = Math.min(tbUserFontSize, Math.max(8, tbAvailH - 2));
+    const tbRemainingV = Math.max(0, tbAvailH - effectiveTbFontSize);
+    const tbVPadding = Math.max(0, Math.min(tbBasePadding, Math.floor(tbRemainingV / 2)));
+    const tbHPadding = tbBasePadding;
+    const tbWhiteSpace = tBodyRowHeight < 36 ? "nowrap" : "normal";
+    const { padding: _thPad, ...thCellsRest } = styles.thCells || {};
+    const { padding: _tbPad, ...tbCellsRest } = styles.tbCells || {};
+    const { rowHeight: _thRH, backgroundColor: _thBg, ...tHeadRest } = styles.tHead || {};
+    const { rowHeight: _tbRH, backgroundColor: _tbBg, ...tBodyRest } = styles.tBody || {};
+    const tHeadInlineStyles = generateInlineStyles(tHeadRest);
+    const tBodyInlineStyles = generateInlineStyles(tBodyRest);
+    const thCellInlineStyles = generateInlineStyles({
+      ...tHeadRest,
+      ...thCellsRest,
+      ...styles.is_bordered ? { border, borderStyle, borderColor } : {}
+    });
+    const { backgroundColor: _tbBg2, ...tBodyRestNoBg } = tBodyRest;
+    const tbCellInlineStyles = generateInlineStyles({
+      ...tBodyRestNoBg,
+      ...tbCellsRest,
+      ...styles.is_bordered ? { border, borderStyle, borderColor } : {}
+    });
+    const getCellMergeInfo = (section, rowIndex, colIndex) => {
+      var _a2;
+      return (_a2 = tableData == null ? void 0 : tableData.mergedCells) == null ? void 0 : _a2.find(
+        (m) => m.section === section && rowIndex >= m.rowStart && rowIndex <= m.rowEnd && colIndex >= m.colStart && colIndex <= m.colEnd
+      );
+    };
+    const getPlaceholderValue = (placeholderKey) => {
+      const placeholder2 = placeholders.find((p) => p.value === placeholderKey || p.id === placeholderKey || p.field === placeholderKey);
+      if (!placeholder2) return "";
+      if (typeof placeholder2.actualValue !== "undefined") return String(placeholder2.actualValue);
+      switch (placeholder2.type) {
+        case "date":
+          return (/* @__PURE__ */ new Date()).toLocaleDateString();
+        case "datetime":
+          return (/* @__PURE__ */ new Date()).toLocaleString();
+        case "number":
+          return "123";
+        case "currency":
+          return "$1,234.56";
+        case "email":
+          return "example@domain.com";
+        case "phone":
+          return "+1 (555) 123-4567";
+        case "url":
+          return "https://example.com";
+        default:
+          return placeholder2.label || placeholder2.value || placeholderKey;
+      }
+    };
+    let theadRowsHTML = "";
+    if ((tableData == null ? void 0 : tableData.headerRows) && tableData.headerRows.length > 0) {
+      theadRowsHTML = tableData.headerRows.map((hRow, rowIndex) => {
+        const rowCellsHTML = hRow.cells.map((hCell, colIndex) => {
+          var _a2, _b2, _c2;
+          const mergeInfo = getCellMergeInfo("thead", rowIndex, colIndex);
+          if (mergeInfo && (rowIndex !== mergeInfo.rowStart || colIndex !== mergeInfo.colStart)) return "";
+          const mergeAttributes = mergeInfo ? ` rowspan="${mergeInfo.rowEnd - mergeInfo.rowStart + 1}" colspan="${mergeInfo.colEnd - mergeInfo.colStart + 1}"` : "";
+          const cellValue = mergeInfo ? mergeInfo.value : hCell.value;
+          const cellStyleObj = ((_c2 = (_b2 = (_a2 = tableData.cellStyles) == null ? void 0 : _a2.thead) == null ? void 0 : _b2[rowIndex]) == null ? void 0 : _c2[colIndex]) || {};
+          const customCellStyles = Object.keys(cellStyleObj).map((k) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${cellStyleObj[k]} !important;`).join(" ");
+          return `<th style="${thCellInlineStyles}; vertical-align: middle; min-height: ${tHeadRowHeight}px; box-sizing: border-box; padding: ${thVPadding}px ${thHPadding}px !important; font-size: ${effectiveThFontSize}px !important; line-height: 1 !important; overflow: visible; word-break: break-word; white-space: ${thWhiteSpace === "nowrap" ? "normal" : thWhiteSpace}; background-color: ${headBgColor} !important; ${customCellStyles}"${mergeAttributes}>${cellValue}</th>`;
+        }).filter((cell) => cell !== "").join("");
+        return `<tr style="${tHeadInlineStyles}; background-color: ${headBgColor} !important; min-height: ${tHeadRowHeight}px; line-height: 1;">${rowCellsHTML}</tr>`;
+      }).join("");
+    } else {
+      const headerCellsHTML = ((tableData == null ? void 0 : tableData.columns) || []).map((column, colIndex) => {
+        var _a2, _b2, _c2;
+        const mergeInfo = getCellMergeInfo("thead", 0, colIndex);
+        if (mergeInfo && colIndex !== mergeInfo.colStart) return "";
+        const mergeAttributes = mergeInfo ? ` rowspan="${mergeInfo.rowEnd - mergeInfo.rowStart + 1}" colspan="${mergeInfo.colEnd - mergeInfo.colStart + 1}"` : "";
+        const cellValue = mergeInfo ? mergeInfo.value : column.header;
+        const alignStyle = column.align === "r" ? "text-align: right;" : column.align === "l" ? "text-align: left;" : "";
+        const cellStyleObj = ((_c2 = (_b2 = (_a2 = tableData == null ? void 0 : tableData.cellStyles) == null ? void 0 : _a2.thead) == null ? void 0 : _b2[0]) == null ? void 0 : _c2[colIndex]) || {};
+        const customCellStyles = Object.keys(cellStyleObj).map((k) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${cellStyleObj[k]} !important;`).join(" ");
+        return `<th style="${alignStyle}${alignStyle && !alignStyle.endsWith(";") ? ";" : ""}${thCellInlineStyles}; vertical-align: middle; min-height: ${tHeadRowHeight}px; box-sizing: border-box; padding: ${thVPadding}px ${thHPadding}px !important; font-size: ${effectiveThFontSize}px !important; line-height: 1 !important; overflow: visible; word-break: break-word; white-space: ${thWhiteSpace === "nowrap" ? "normal" : thWhiteSpace}; background-color: ${headBgColor} !important; ${customCellStyles}"${mergeAttributes}>${cellValue}</th>`;
+      }).filter((cell) => cell !== "").join("");
+      theadRowsHTML = `<tr style="${tHeadInlineStyles}; background-color: ${headBgColor} !important; min-height: ${tHeadRowHeight}px; line-height: 1;">${headerCellsHTML}</tr>`;
+    }
+    let tableRowsHTML = "";
+    const tPlaceholders = attrs == null ? void 0 : attrs.placeholders;
+    const rowsToRender = (tableData == null ? void 0 : tableData.rows) && tableData.rows.length > 0 ? tableData.rows : [{}];
+    const staticRowsHTML = rowsToRender.map((row, rowIndex) => {
+      const rowBgColor = hasZebra && rowIndex % 2 === 1 ? altColor : mainBgColor;
+      const rowStyleAddition = `; background-color: ${rowBgColor} !important;`;
+      const cellsHTML = ((tableData == null ? void 0 : tableData.columns) || []).map((column, colIndex) => {
+        var _a2, _b2, _c2;
+        const mergeInfo = getCellMergeInfo("tbody", rowIndex, colIndex);
+        if (mergeInfo && (rowIndex !== mergeInfo.rowStart || colIndex !== mergeInfo.colStart)) return "";
+        let cellValue = row[column.id] || "";
+        const keys = Object.keys(row || {});
+        if (keys.includes(`${column.id}_static`)) {
+          cellValue = row[`${column.id}_static`] || "";
+        }
+        if (!cellValue && (tPlaceholders == null ? void 0 : tPlaceholders[column.id])) {
+          cellValue = getPlaceholderValue(tPlaceholders[column.id]);
+        }
+        const mergeAttributes = mergeInfo ? ` rowspan="${mergeInfo.rowEnd - mergeInfo.rowStart + 1}" colspan="${mergeInfo.colEnd - mergeInfo.colStart + 1}"` : "";
+        const finalCellValue = mergeInfo ? mergeInfo.value : cellValue;
+        const alignStyle = column.align === "r" ? "text-align: right;" : column.align === "l" ? "text-align: left;" : "";
+        const cellStyleObj = ((_c2 = (_b2 = (_a2 = tableData == null ? void 0 : tableData.cellStyles) == null ? void 0 : _a2.tbody) == null ? void 0 : _b2[rowIndex]) == null ? void 0 : _c2[column.id]) || {};
+        const customCellStyles = Object.keys(cellStyleObj).map((k) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${cellStyleObj[k]} !important;`).join(" ");
+        return `<td style="${alignStyle}${alignStyle && !alignStyle.endsWith(";") ? ";" : ""}${tbCellInlineStyles}; vertical-align: middle; min-height: ${tBodyRowHeight}px; box-sizing: border-box; padding: ${tbVPadding}px ${tbHPadding}px !important; font-size: ${effectiveTbFontSize}px !important; line-height: 1 !important; overflow: visible; word-break: break-word; white-space: ${tbWhiteSpace === "nowrap" ? "normal" : tbWhiteSpace}; background-color: ${rowBgColor} !important;${rowStyleAddition} ${customCellStyles}"${mergeAttributes}>${finalCellValue}</td>`;
+      }).filter((cell) => cell !== "").join("");
+      return `<tr style="${tBodyInlineStyles}; min-height: ${tBodyRowHeight}px; line-height: 1;${rowStyleAddition}">${cellsHTML}</tr>`;
+    }).join("");
+    const hasDynamicHandlebars = rowsToRender.some(
+      (r) => Object.values(r).some((v) => typeof v === "string" && v.includes("{{"))
+    ) || ((tableData == null ? void 0 : tableData.columns) || []).some((c) => tPlaceholders == null ? void 0 : tPlaceholders[c.id]);
+    if (isCompiler && hasDynamicHandlebars) {
+      const cellsForLoopHTML = ((tableData == null ? void 0 : tableData.columns) || []).map((column) => {
+        var _a2, _b2, _c2, _d2;
+        const alignStyle = column.align === "r" ? "text-align: right;" : column.align === "l" ? "text-align: left;" : "";
+        let cellValue = ((_a2 = rowsToRender[0]) == null ? void 0 : _a2[column.id]) || "";
+        const keys = Object.keys(rowsToRender[0] || {});
+        if (keys.includes(`${column.id}_static`)) {
+          cellValue = rowsToRender[0][`${column.id}_static`] || "";
+        }
+        if (!cellValue && (tPlaceholders == null ? void 0 : tPlaceholders[column.id])) {
+          cellValue = `{{${tPlaceholders[column.id]}}}`;
+        }
+        if (cellValue.includes("{{items}}") || cellValue.includes("{{item}}")) {
+          cellValue = `{{#if items}}{{items}}{{else if item_data.name}}{{item_data.name}}{{else if item}}{{item}}{{else if description}}{{description}}{{else}}{{items}}{{/if}}`;
+        } else if (cellValue.includes("{{quantity}}") || cellValue.includes("{{qty}}")) {
+          cellValue = `{{#if quantity}}{{quantity}}{{else if qty}}{{qty}}{{else}}0{{/if}}`;
+        } else if (cellValue.includes("{{rate}}") || cellValue.includes("{{price}}")) {
+          cellValue = `{{#if rate}}{{rate}}{{else if price}}{{price}}{{else if unit_price}}{{unit_price}}{{else}}0{{/if}}`;
+        } else if (cellValue.includes("{{discount_rate}}")) {
+          cellValue = `{{#if discount_rate}}{{discount_rate}}{{else}}0{{/if}}`;
+        } else if (cellValue.includes("{{discount_amount}}")) {
+          cellValue = `{{#if discount_amount}}{{discount_amount}}{{else}}0{{/if}}`;
+        }
+        const cellStyleObj = ((_d2 = (_c2 = (_b2 = tableData == null ? void 0 : tableData.cellStyles) == null ? void 0 : _b2.tbody) == null ? void 0 : _c2[0]) == null ? void 0 : _d2[column.id]) || {};
+        const customCellStyles = Object.keys(cellStyleObj).map((k) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${cellStyleObj[k]} !important;`).join(" ");
+        return `<td style="${alignStyle}${alignStyle && !alignStyle.endsWith(";") ? ";" : ""}${tbCellInlineStyles}; vertical-align: middle; min-height: ${tBodyRowHeight}px; box-sizing: border-box; padding: ${tbVPadding}px ${tbHPadding}px !important; font-size: ${effectiveTbFontSize}px !important; line-height: 1 !important; overflow: visible; word-break: break-word; white-space: ${tbWhiteSpace === "nowrap" ? "normal" : tbWhiteSpace}; background-color: ${mainBgColor} !important; ${customCellStyles}">${cellValue}</td>`;
+      }).join("");
+      tableRowsHTML = `{{#if sales_item_entries}}
+{{#each sales_item_entries}}
+<tr style="${tBodyInlineStyles}; min-height: ${tBodyRowHeight}px; line-height: 1;">${cellsForLoopHTML}</tr>
+{{/each}}
+{{else if item_entries}}
+{{#each item_entries}}
+<tr style="${tBodyInlineStyles}; min-height: ${tBodyRowHeight}px; line-height: 1;">${cellsForLoopHTML}</tr>
+{{/each}}
+{{else if items}}
+{{#each items}}
+<tr style="${tBodyInlineStyles}; min-height: ${tBodyRowHeight}px; line-height: 1;">${cellsForLoopHTML}</tr>
+{{/each}}
+{{else}}
+${staticRowsHTML}
+{{/if}}`;
+    } else {
+      tableRowsHTML = staticRowsHTML;
+    }
+    const zebraClass = hasZebra ? "pbd-table-zebra" : "";
+    const zebraStyleTag = hasZebra ? `<style>
+      .pbd-table-zebra tbody tr:nth-child(even) { background-color: ${altColor} !important; }
+      .pbd-table-zebra tbody tr:nth-child(even) td { background-color: ${altColor} !important; }
+      .pbd-table-zebra tbody tr:nth-child(odd) { background-color: ${mainBgColor} !important; }
+      .pbd-table-zebra tbody tr:nth-child(odd) td { background-color: ${mainBgColor} !important; }
+    </style>` : "";
+    const colgroupHTML = ((_k = tableData == null ? void 0 : tableData.columns) == null ? void 0 : _k.length) > 0 ? `<colgroup>${tableData.columns.map((col, colIndex) => {
+      var _a2, _b2, _c2, _d2;
+      return `<col style="width: ${((_d2 = (_c2 = (_b2 = (_a2 = tableData == null ? void 0 : tableData.cellStyles) == null ? void 0 : _a2.thead) == null ? void 0 : _b2[0]) == null ? void 0 : _c2[colIndex]) == null ? void 0 : _d2.width) || "auto"};">`;
+    }).join("")}</colgroup>` : "";
+    return `${zebraStyleTag}${useWrapperTrick ? `<div style="${wrapperStyles}">` : ""}<table class="${zebraClass}" style="${tInlineStyles}; width: 100%; border-collapse: collapse; height: auto !important; table-layout: fixed; margin: 0 !important; background-color: transparent !important;">${colgroupHTML}<thead>${theadRowsHTML}</thead><tbody>${tableRowsHTML}</tbody></table>${useWrapperTrick ? `</div>` : ""}`.trim();
+  } else if (sectionType === "qr-code" || sectionType === "bar-code") {
+    return `<div style="${inlineStyles}">${placeholder || "{{data}}"}</div>`;
+  } else if (sectionType === "signature") {
+    const signatureText = (attrs == null ? void 0 : attrs.signatureText) || "Signature";
+    return `<svg viewBox="0 0 300 80" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" fill="${((_l = attrs == null ? void 0 : attrs.styles) == null ? void 0 : _l.color) || "#333333"}" style="${inlineStyles}">${signatureText}</text></svg>`;
+  }
+  const hasHtmlTags = /<\/?[a-z][\s\S]*>/i.test(content);
+  if (!hasHtmlTags) {
+    switch (sectionType) {
+      case "text":
+      case "text-block":
+        return `<p style="${inlineStyles}">${content}</p>`;
+      case "heading":
+        return `<h1 style="${inlineStyles}">${content}</h1>`;
+      case "heading-2":
+        return `<h2 style="${inlineStyles}">${content}</h2>`;
+      case "heading-3":
+        return `<h3 style="${inlineStyles}">${content}</h3>`;
+      case "heading-4":
+        return `<h4 style="${inlineStyles}">${content}</h4>`;
+      default:
+        return `<p style="${inlineStyles}">${content}</p>`;
+    }
+  } else {
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(`<div>${content}</div>`, "text/html");
+      const container = doc.body.firstChild;
+      if (container && container.nodeType === Node.ELEMENT_NODE) {
+        const elements = container.querySelectorAll("*");
+        elements.forEach((element) => {
+          if (element.tagName === "SCRIPT" || element.tagName === "STYLE") return;
+          const existingStyle = element.getAttribute("style") || "";
+          const existingProps = {};
+          existingStyle.split(";").forEach((prop) => {
+            const [key, value] = prop.split(":").map((item) => item.trim());
+            if (key && value) existingProps[key] = value;
+          });
+          const newStyleProps = {};
+          inlineStyles.split(";").forEach((prop) => {
+            const [key, value] = prop.split(":").map((item) => item.trim());
+            if (key && value) newStyleProps[key] = value;
+          });
+          if (element.tagName === "P" || element.tagName === "DIV") {
+            if (!newStyleProps["line-height"] && !existingProps["line-height"]) newStyleProps["line-height"] = "1.5";
+          } else if (["H1", "H2", "H3", "H4", "H5", "H6"].includes(element.tagName)) {
+            if (!newStyleProps["line-height"] && !existingProps["line-height"]) newStyleProps["line-height"] = "1.2";
+            if (!newStyleProps["margin"] && !existingProps["margin"]) newStyleProps["margin"] = "0.5em 0";
+          }
+          const mergedProps = { ...existingProps, ...newStyleProps };
+          const mergedStyle = Object.entries(mergedProps).filter(([key, value]) => key && value).map(([key, value]) => `${key}: ${value}`).join("; ");
+          element.setAttribute("style", mergedStyle);
+        });
+        let wrapperTag = "div";
+        if (sectionType === "heading") wrapperTag = "h1";
+        else if (sectionType === "heading-2") wrapperTag = "h2";
+        else if (sectionType === "heading-3") wrapperTag = "h3";
+        else if (sectionType === "heading-4") wrapperTag = "h4";
+        return `<${wrapperTag} style="${inlineStyles}">${container.innerHTML}</${wrapperTag}>`;
+      }
+    } catch (e) {
+    }
+    return content;
+  }
+};
+export {
+  applyOpacityToColor as a,
+  generateEmailPreview as b,
+  generateHeaderFooterPreview as c,
+  generateInlineStyles as d,
+  extractStyles as e,
+  generateSectionsHTML as f,
+  generateContentHTML as g,
+  getInitialSectionData as h,
+  templateRoutes as t
+};
+//# sourceMappingURL=common-BgXEAs_y.esm.js.map