@useinsider/guido 3.15.0-beta.e9014b0 → 3.15.0-beta.f5247a0

package/dist/extensions/Blocks/Items/block.js

@@ -1,12 +1,12 @@
-import { BlockId as g } from "../../../enums/block.js";
-import { useOnboardingStore as y } from "../../../stores/onboarding.js";
-import { getMigrationBannerHtml as I } from "../../../utils/migrationBannerHtml.js";
-import { Block as C, BlockCompositionType as b, ModificationDescription as c } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { SETTINGS_ENUMS as l, DefaultConfigValues as d } from "./enums/settingsEnums.js";
-import { getDefaultTemplate as h } from "./template.js";
-import { getItemsBlockContainer as u, getItemsBlockConfig as f, deriveItemNumber as D, getDefaultItemsBlockConfig as N } from "./utils/nodeConfigUtils.js";
-const p = g.Items;
-class E extends C {
+import { BlockId as f } from "../../../enums/block.js";
+import { useOnboardingStore as g } from "../../../stores/onboarding.js";
+import { getMigrationBannerHtml as y } from "../../../utils/migrationBannerHtml.js";
+import { Block as I, BlockCompositionType as C, ModificationDescription as c } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SETTINGS_ENUMS as d, DefaultConfigValues as m } from "./enums/settingsEnums.js";
+import { getDefaultTemplate as b } from "./template.js";
+import { getItemsBlockContainer as l, getItemsBlockConfig as u, deriveItemNumber as h, getDefaultItemsBlockConfig as N } from "./utils/nodeConfigUtils.js";
+const p = f.Items;
+class O extends I {
   getId() {
     return p;
   }
@@ -14,7 +14,7 @@ class E extends C {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return b.CONTAINER;
+    return C.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -23,20 +23,20 @@ class E extends C {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
   getSettingsPanelTitleHtml() {
-    return I(
+    return y(
       p,
       this.api.translate("Items"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.")
     );
   }
   getTemplate() {
-    return h({
-      orientation: l.ORIENTATION.VERTICAL,
-      itemsType: l.ITEMS_TYPE.CART_ITEMS,
+    return b({
+      orientation: d.ORIENTATION.VERTICAL,
+      itemsType: d.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
-      currencySymbol: d.productPriceCurrencySymbolControlValue,
-      currencyLocation: d.productPriceCurrencyLocationControlValue,
-      formattedPrice: d.productPriceFormattedControlValue === "1"
+      currencySymbol: m.productPriceCurrencySymbolControlValue,
+      currencyLocation: m.productPriceCurrencyLocationControlValue,
+      formattedPrice: m.productPriceFormattedControlValue === "1"
     });
   }
   allowInnerBlocksDND() {
@@ -45,23 +45,23 @@ class E extends C {
   canBeSavedAsModule() {
     return !0;
   }
-  onCreated(n) {
-    const t = this.api.getDocumentModifier(), a = this.api.getDocumentRootCssNode();
-    a.querySelector('[product-attr="imageSrc"] img') || t.modifyCss(a).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const e = u(n);
-    if (!e)
+  onCreated(e) {
+    const t = this.api.getDocumentModifier(), o = this.api.getDocumentRootCssNode();
+    o.querySelector('[product-attr="imageSrc"] img') || t.modifyCss(o).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
+    const i = l(e);
+    if (!i)
       return;
-    const o = e.getNodeConfig(), r = o && Object.keys(o).length > 0, i = f(n);
-    if (i != null && i.initialized)
-      if (r)
-        i.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...i, blockInstanceId: String(Date.now()) }).apply(new c("Assign block instance ID to block"));
+    const r = i.getNodeConfig(), s = r && Object.keys(r).length > 0, n = u(e);
+    if (n != null && n.initialized)
+      if (s)
+        n.blockInstanceId || this.api.getDocumentModifier().modifyHtml(i).setNodeConfig({ ...n, blockInstanceId: String(Date.now()) }).apply(new c("Assign block instance ID to block"));
       else {
-        const s = this.api.getDocumentModifier();
-        s.modifyHtml(e).setNodeConfig(i), this._stampProductTdDomAttributes(e, i, s), s.apply(new c("Migrate legacy config to nodeConfig"));
+        const a = this.api.getDocumentModifier();
+        a.modifyHtml(i).setNodeConfig(n), this._stampProductTdDomAttributes(i, n, a), a.apply(new c("Migrate legacy config to nodeConfig"));
       }
     else {
-      const s = N(), m = this.api.getDocumentModifier();
-      m.modifyHtml(e).setNodeConfig(s), this._stampProductTdDomAttributes(e, s, m, !0), m.apply(new c("Initialize Items block with default configuration")), y().startOnboarding("itemsOnboarding");
+      const a = N();
+      this.api.getDocumentModifier().modifyHtml(i).setNodeConfig(a).apply(new c("Initialize Items block with default configuration")), g().startOnboarding("itemsOnboarding");
     }
   }
   /**
@@ -70,18 +70,18 @@ class E extends C {
    * into nodeConfig, so without this a reused module would reset to defaults.
    * Guarded to the nodeConfig-empty case so it runs once and never loops.
    */
-  onDocumentChanged(n) {
-    const t = u(n);
+  onDocumentChanged(e) {
+    const t = l(e);
     if (!t)
       return;
-    const a = t.getNodeConfig();
-    if (a && Object.keys(a).length > 0)
+    const o = t.getNodeConfig();
+    if (o && Object.keys(o).length > 0)
       return;
-    const o = f(n);
-    if (!(o != null && o.initialized))
+    const r = u(e);
+    if (!(r != null && r.initialized))
       return;
-    const r = this.api.getDocumentModifier();
-    r.modifyHtml(t).setNodeConfig(o), this._stampProductTdDomAttributes(t, o, r), r.apply(new c("Recover Items block config from saved module"));
+    const s = this.api.getDocumentModifier();
+    s.modifyHtml(t).setNodeConfig(r), this._stampProductTdDomAttributes(t, r, s), s.apply(new c("Recover Items block config from saved module"));
   }
   /**
    * Bakes the compiler-read DOM attributes (`data-type`, `data-number`, `data-nodup`) onto the
@@ -91,14 +91,12 @@ class E extends C {
    * restored before export. The name `<a>` carries no data-type/data-number of its own and
    * relies on this td-level fallback in pairProductVariables.
    */
-  _stampProductTdDomAttributes(n, t, a, e = !1) {
-    const o = D(t.itemsSelectValue, t.type), r = (i, s) => {
-      e && n.getAttribute(i) || a.modifyHtml(n).setAttribute(i, s);
-    };
-    r("data-type", t.type), r("data-number", o), r("data-nodup", String(t.priceHideDiscount));
+  _stampProductTdDomAttributes(e, t, o) {
+    const i = h(t.itemsSelectValue, t.type);
+    o.modifyHtml(e).setAttribute("data-type", t.type), o.modifyHtml(e).setAttribute("data-number", i), o.modifyHtml(e).setAttribute("data-nodup", String(t.priceHideDiscount));
   }
 }
 export {
   p as BLOCK_ID,
-  E as ItemsBlock
+  O as ItemsBlock
 };

package/dist/extensions/Blocks/Items/template.js

@@ -1,17 +1,17 @@
 import { escapeHtml as m } from "../../../utils/htmlEscape.js";
 import { BlockType as R, BlockAttr as S } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { ItemsBlockId as O } from "./enums/controlEnums.js";
-import { productPairs as h, templateFirstLine as q } from "./enums/productEnums.js";
-import { ItemInCartOptions as j, SETTINGS_ENUMS as N, DefaultConfigValues as M } from "./enums/settingsEnums.js";
-import C from "./layouts/horizontal.html.js";
-import J from "./layouts/vertical.html.js";
-import { deriveItemNumber as Z, escapeReplacement as g } from "./utils/nodeConfigUtils.js";
-let [v] = h.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [F] = h.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [x] = h.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [L] = h.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [X] = h.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
-const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCase().startsWith(e.toLowerCase())).join("; ").replace(/;\s*$/, ""), k = (s) => U(s, "text-align"), y = (s, e) => {
-  const r = new RegExp(`${e}\\s*:\\s*([^;]+)`, "i"), a = s.match(r);
+import { productPairs as h, templateFirstLine as Y } from "./enums/productEnums.js";
+import { ItemInCartOptions as q, SETTINGS_ENUMS as N, DefaultConfigValues as k } from "./enums/settingsEnums.js";
+import j from "./layouts/horizontal.html.js";
+import f from "./layouts/vertical.html.js";
+import { deriveItemNumber as J, escapeReplacement as G } from "./utils/nodeConfigUtils.js";
+let [X] = h.PAIRS_FOR_EXTENSION.imageSrc.CART_ITEMS.DEFAULT, [F] = h.PAIRS_FOR_EXTENSION.name.CART_ITEMS.DEFAULT, [x] = h.PAIRS_FOR_EXTENSION.price.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [L] = h.PAIRS_FOR_EXTENSION.originalPrice.CART_ITEMS.DEFAULT_PRICE_FORMATTED, [V] = h.PAIRS_FOR_EXTENSION.quantity.CART_ITEMS.DEFAULT;
+const D = (s, e) => s.split(";").map((l) => l.trim()).filter((l) => !l.toLowerCase().startsWith(e.toLowerCase())).join("; ").replace(/;\s*$/, ""), U = (s) => D(s, "text-align"), y = (s, e) => {
+  const l = new RegExp(`${e}\\s*:\\s*([^;]+)`, "i"), a = s.match(l);
   return a ? a[1].trim() : null;
-}, w = (s) => `<tr>${s}</tr>`, f = (s, e, r, a) => {
-  const i = r || M.productImageHeight, d = (a == null ? void 0 : a.imageVisible) === !1 ? "display: none; " : "";
+}, w = (s) => `<tr>${s}</tr>`, Z = (s, e, l, a) => {
+  const i = l || k.productImageHeight, d = (a == null ? void 0 : a.imageVisible) === !1 ? "display: none; " : "";
   return w(`
         <td class="esd-block-image document-node-component default-block-component selectable ng-star-inserted"
             align="center"
@@ -26,7 +26,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 href="#!">
                 <img class="adapt-img document-node-component ng-star-inserted"
                     style="object-fit: contain;"
-                    src="${v}"
+                    src="${X}"
                     alt="${F}"
                     width="${i}"
                     height="${i}">
@@ -35,18 +35,18 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
     `);
 }, tt = (s, e) => `
     <${R.BLOCK_IMAGE}
-        ${S.BLOCK_IMAGE.src}="${v}"
+        ${S.BLOCK_IMAGE.src}="${X}"
         ${S.BLOCK_IMAGE.alt}="${F}"
         ${S.BLOCK_IMAGE.href}="#!"
-        ${S.BLOCK_IMAGE.width}="${M.productImageWidth}"
-        ${S.BLOCK_IMAGE.height}="${M.productImageWidth}"
+        ${S.BLOCK_IMAGE.width}="${k.productImageWidth}"
+        ${S.BLOCK_IMAGE.height}="${k.productImageWidth}"
         esd-extension-block-id="${O.IMAGE}"
         data-slot-1
         product-attr="imageSrc"
         data-type="${s}"
         data-number="${e}"
     />
-    `, et = (s, e, r, a) => {
+    `, et = (s, e, l, a) => {
   const i = `
         word-wrap: break-word;
         white-space: nowrap;
@@ -56,15 +56,15 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
         max-width: 100%;
     `;
   if (e) {
-    const d = y(r || "", "text-align") || "center", n = k(r || i), c = y(n, "font-weight"), l = y(n, "font-style"), o = c === "bold" || c === "700", t = l === "italic", p = U(
-      U(
-        U(n, "font-weight"),
+    const d = y(l || "", "text-align") || "center", n = U(l || i), c = y(n, "font-weight"), r = y(n, "font-style"), p = c === "bold" || c === "700", t = r === "italic", o = D(
+      D(
+        D(n, "font-weight"),
         "font-style"
       ),
       "text-decoration"
-    ), T = (a == null ? void 0 : a.nameVisible) === !1 ? "display: none;" : "display: table-cell;", _ = p ? ` style="${m(p)}"` : "";
-    let E = F;
-    return o && (E = `<strong>${E}</strong>`), t && (E = `<em>${E}</em>`), w(`
+    ), T = (a == null ? void 0 : a.nameVisible) === !1 ? "display: none;" : "display: table-cell;", _ = o ? ` style="${m(o)}"` : "";
+    let $ = F;
+    return p && ($ = `<strong>${$}</strong>`), t && ($ = `<em>${$}</em>`), w(`
             <td class="esd-block-text es-p10"
                 align="${d}"
                 width="100%"
@@ -76,7 +76,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                     path="1"
                     product-attr="name"
                     data-slot-2${_}>
-                    ${E}
+                    ${$}
                 </p>
             </td>
         `);
@@ -97,15 +97,15 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
         </p>
     </${R.BLOCK_TEXT}>
 `;
-}, at = (s, e, r, a, i, d, n, c, l, o) => {
+}, at = (s, e, l, a, i, d, n, c, r, p) => {
   let t = x;
   if (a && a.trim()) {
-    const $ = `${a.trim()}`;
-    t = (i || "0") === "1" ? `${x}&nbsp;${$}` : `${$}&nbsp;${x}`;
+    const E = `${a.trim()}`;
+    t = (i || "0") === "1" ? `${x}&nbsp;${E}` : `${E}&nbsp;${x}`;
   }
-  const p = i === "1" ? "after" : "before", T = `data-formated="${r ? "true" : "false"}"`, _ = `data-curency="${p}"`, E = a ? `data-currency_symbol="${a}"` : "", u = `data-single_price="${c ? "true" : "false"}"`, I = l === N.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
+  const o = i === "1" ? "after" : "before", T = `data-formated="${l ? "true" : "false"}"`, _ = `data-curency="${o}"`, $ = a ? `data-currency_symbol="${a}"` : "", u = `data-single_price="${c ? "true" : "false"}"`, I = r === N.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
   if (d) {
-    const b = k(n || "color: #060606; white-space: nowrap; font-size: 20px;"), A = o ? "" : ' style="display: none;"';
+    const b = U(n || "color: #060606; white-space: nowrap; font-size: 20px;"), A = p ? "" : ' style="display: none;"';
     return w(`
         <td class="esd-block-text items-block-price${I}"
             align="center"
@@ -119,7 +119,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 data-number="${e}"
                 ${T}
                 ${_}
-                ${E}
+                ${$}
                 ${u}
                 style="${m(b)}">
                 ${t}
@@ -149,20 +149,20 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
             </p>
         </${R.BLOCK_TEXT}>
     `;
-}, st = (s, e, r, a, i, d, n = !0, c, l, o) => {
+}, st = (s, e, l, a, i, d, n = !0, c, r, p) => {
   let t = L;
   if (a && a.trim()) {
-    const $ = `${a.trim()}`;
-    t = (i || "0") === "1" ? `${L}&nbsp;${$}` : `${$}&nbsp;${L}`;
+    const E = `${a.trim()}`;
+    t = (i || "0") === "1" ? `${L}&nbsp;${E}` : `${E}&nbsp;${L}`;
   }
-  const p = i === "1" ? "after" : "before", T = `data-formated="${r ? "true" : "false"}"`, _ = `data-curency="${p}"`, E = n ? "" : ' style="display: none;"', u = `data-single_price="${l ? "true" : "false"}"`, I = o === N.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
+  const o = i === "1" ? "after" : "before", T = `data-formated="${l ? "true" : "false"}"`, _ = `data-curency="${o}"`, $ = n ? "" : ' style="display: none;"', u = `data-single_price="${r ? "true" : "false"}"`, I = p === N.ORIENTATION.VERTICAL ? " es-p10b es-p10t" : "";
   if (d) {
-    const b = k(c || "color: #cc0000; white-space: nowrap; font-size: 19px;");
+    const b = U(c || "color: #cc0000; white-space: nowrap; font-size: 19px;");
     return w(`
             <td class="esd-block-text items-block-price${I}"
                 esd-extension-block-id="${O.ORIGINAL_PRICE}"
                 width="100%"
-                align="center"${E}>
+                align="center"${$}>
                 <p
                     product-attr="originalPrice"
                     contenteditable="false"
@@ -203,10 +203,10 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
             </p>
         </${R.BLOCK_TEXT}>
     `;
-}, lt = (s = !0, e, r) => {
+}, lt = (s = !0, e, l) => {
   const a = s ? "" : 'style="display: none;"';
   if (e) {
-    const i = "font-size: 14px;", d = y(r || "", "text-align") || "center", n = k(r || i);
+    const i = "font-size: 14px;", d = y(l || "", "text-align") || "center", n = U(l || i);
     return w(`
             <td class="esd-block-text es-p10 document-node-component default-block-component selectable"
                 width="100%" align="${d}"
@@ -218,7 +218,7 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                     width="100%"
                     path="1"
                     style="${m(n)}">
-                    ${X}
+                    ${V}
                 </p>
             </td>
             `);
@@ -236,26 +236,26 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
                 data-slot-3
                 contenteditable="false"
                 width="100%">
-                ${X}
+                ${V}
             </p>
         </${R.BLOCK_TEXT}>
     `;
-}, rt = (s, e, r = "Buy", a, i, d = !0, n = !0) => {
+}, rt = (s, e, l = "Buy", a, i, d = !0, n = !0) => {
   if (a) {
-    const c = y(i || "", "background") || y(i || "", "background-color"), l = c ? `border-width: 0px; background: ${c};` : "border-width: 0px;", o = d ? "es-fw" : "es-il", t = (i || "").replace("border-width: 0;", "");
+    const c = y(i || "", "background") || y(i || "", "background-color"), r = c ? `border-width: 0px; background: ${c};` : "border-width: 0px;", p = d ? "es-fw" : "es-il", t = (i || "").replace("border-width: 0;", "");
     return w(`
         <td class="esd-block-button ins-button default-block-component selectable"
-            align="center" width="100%" name="buy-button" caption="${r}"
+            align="center" width="100%" name="buy-button" caption="${l}"
             esd-extension-block-id="${O.BUTTON}"
             product-attr="button" data-slot-6="" data-type="${s}" data-number="${e}"
             ${n ? "" : ' style="display: none;"'}>
-            <span class="es-button-border ${o}" style="${m(l)}">
+            <span class="es-button-border ${p}" style="${m(r)}">
             <a
                 class="es-button"
                 href="#!"
                 target="_blank"
                 style="${m(t)} padding: 5px 12px;">
-                    ${r}
+                    ${l}
                 </a>
             </span>
         </td>
@@ -266,27 +266,27 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
             width="100%"
             class="ins-button"
             name="buy-button"
-            caption="${r}"
+            caption="${l}"
             align="center"
             esd-extension-block-id="${O.BUTTON}"
             product-attr="button"
             data-slot-6
             data-type="${s}"
             data-number="${e}"
-        >${r}
+        >${l}
         </${R.BLOCK_BUTTON}>
     `;
-}, ct = (s, e, r, a = !0, i = !0) => {
-  const d = e === N.ORIENTATION.VERTICAL, n = r === "horizontal";
+}, ct = (s, e, l, a = !0, i = !0) => {
+  const d = e === N.ORIENTATION.VERTICAL, n = l === "horizontal";
   if (d) {
-    const c = !n, l = c || !i ? "100%" : "50%", o = c || !a ? "100%" : "50%";
+    const c = !n, r = c || !i ? "100%" : "50%", p = c || !a ? "100%" : "50%";
     let t = s.replace(
       /<td\s+[^>]*class="([^"]*product-price-class[^"]*)"[^>]*>/gi,
-      (p) => p.replace(/width="[^"]*"/gi, `width="${l}"`).replace(/width:\s*[^;]+;/gi, `width: ${l};`)
+      (o) => o.replace(/width="[^"]*"/gi, `width="${r}"`).replace(/width:\s*[^;]+;/gi, `width: ${r};`)
     );
     return t = t.replace(
       /<td\s+[^>]*class="([^"]*product-original-price-class[^"]*)"[^>]*>/gi,
-      (p) => p.replace(/width="[^"]*"/gi, `width="${o}"`).replace(/width:\s*[^;]+;/gi, `width: ${o};`)
+      (o) => o.replace(/width="[^"]*"/gi, `width="${p}"`).replace(/width:\s*[^;]+;/gi, `width: ${p};`)
     ), t;
   }
   return n ? s : s.replace(
@@ -298,74 +298,74 @@ const U = (s, e) => s.split(";").map((r) => r.trim()).filter((r) => !r.toLowerCa
   );
 }, it = (s) => s ? `<td align="center"
             esd-extension-block-id="items-block"
-            class="ins-product-td items-block items-block-v2 esd-items-block esd-extension-block esd-container-frame">` : q, B = (s, e, r, a, i, d, n, c, l, o, t, p, T, _ = "horizontal", E, u, P, I) => {
-  const $ = o !== void 0 ? ` data-nodup="${o}"` : "", A = `${`data-type="${e}" data-number="${r}"`} data-orientation="${a}"${$}`, D = l == null ? void 0 : l["data-product_image_control_image-height"], V = d ? f(e, r, D, t) : tt(e, r), W = (t == null ? void 0 : t.buttonLabel) || "Buy", z = (t == null ? void 0 : t.buttonFullWidth) !== void 0 ? t.buttonFullWidth : !0, H = e === N.ITEMS_TYPE.BROWSED_ITEMS ? !1 : t == null ? void 0 : t.quantityControlEnabled, Q = (t == null ? void 0 : t.buttonVisible) !== void 0 ? t.buttonVisible : (l == null ? void 0 : l["data-product_button_control_enabled"]) !== "false", G = (t == null ? void 0 : t.priceVisible) !== void 0 ? t.priceVisible : (l == null ? void 0 : l["data-product_price_control_enabled"]) !== "false", K = (t == null ? void 0 : t.originalPriceVisible) !== void 0 ? t.originalPriceVisible : (l == null ? void 0 : l["data-product_original_price_control_enabled"]) !== "false", Y = s.replace("{-{-TEMPLATE_FIRST_LINE-}-}", it(d)).replace("{-{-PRODUCT_IMAGE-}-}", V).replace("{-{-PRODUCT_NAME-}-}", et(e, d, p, t)).replaceAll(
+            class="ins-product-td items-block items-block-v2 esd-items-block esd-extension-block esd-container-frame">` : Y, K = (s, e, l, a, i, d, n, c, r, p, t, o, T, _ = "horizontal", $, u, P, I) => {
+  const A = `${`data-type="${e}" data-number="${l}"`} data-orientation="${a}"`, M = r == null ? void 0 : r["data-product_image_control_image-height"], B = d ? Z(e, l, M, t) : tt(e, l), W = (t == null ? void 0 : t.buttonLabel) || "Buy", z = (t == null ? void 0 : t.buttonFullWidth) !== void 0 ? t.buttonFullWidth : !0, Q = e === N.ITEMS_TYPE.BROWSED_ITEMS ? !1 : t == null ? void 0 : t.quantityControlEnabled, H = (t == null ? void 0 : t.buttonVisible) !== void 0 ? t.buttonVisible : (r == null ? void 0 : r["data-product_button_control_enabled"]) !== "false", g = (t == null ? void 0 : t.priceVisible) !== void 0 ? t.priceVisible : (r == null ? void 0 : r["data-product_price_control_enabled"]) !== "false", v = (t == null ? void 0 : t.originalPriceVisible) !== void 0 ? t.originalPriceVisible : (r == null ? void 0 : r["data-product_original_price_control_enabled"]) !== "false", C = s.replace("{-{-TEMPLATE_FIRST_LINE-}-}", it(d)).replace("{-{-PRODUCT_IMAGE-}-}", B).replace("{-{-PRODUCT_NAME-}-}", et(e, d, o, t)).replaceAll(
     "{-{-PRODUCT_PRICE-}-}",
-    g(at(
+    G(at(
       e,
-      r,
+      l,
       i,
       n,
       c,
       d,
-      E,
+      $,
       I,
       a,
-      G
+      g
     ))
   ).replaceAll(
     "{-{-PRODUCT_ORIGINAL_PRICE-}-}",
-    g(st(
+    G(st(
       e,
-      r,
+      l,
       i,
       n,
       c,
       d,
-      K,
+      v,
       u,
       I,
       a
     ))
-  ).replace("{-{-PRODUCT_QUANTITY-}-}", lt(H, d, P)).replace(
+  ).replace("{-{-PRODUCT_QUANTITY-}-}", lt(Q, d, P)).replace(
     "{-{-PRODUCT_BUTTON-}-}",
-    rt(e, r, W, d, T, z, Q)
+    rt(e, l, W, d, T, z, H)
   ).replace(
     /<td([^>]*class="[^"]*ins-product-td[^"]*"[^>]*)>/,
     `<td$1 ${A}>`
   );
   return ct(
-    Y,
+    C,
     a,
     _,
-    G,
-    K
+    g,
+    v
   );
 };
 function It({
   orientation: s,
   itemsType: e = N.ITEMS_TYPE.CART_ITEMS,
-  itemId: r,
+  itemId: l,
   currencySymbol: a,
   currencyLocation: i,
   migrate: d = !1,
   formattedPrice: n = !0,
   configBlockAttributes: c,
-  nodeConfig: l,
-  nameStyles: o,
+  nodeConfig: r,
+  nameStyles: p,
   buttonStyles: t,
-  priceStyles: p,
+  priceStyles: o,
   originalPriceStyles: T,
   quantityStyles: _,
-  priceOrientation: E
+  priceOrientation: $
 }) {
-  const u = j[e].findIndex((V) => V.value === r), P = Z(r, e), I = (l == null ? void 0 : l.priceSinglePrice) ?? (c == null ? void 0 : c["data-product_price_control_single_price"]) === "1" ?? !1;
-  v = h.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[u >= 0 ? u : 0], F = h.PAIRS_FOR_EXTENSION.name[e].DEFAULT[u >= 0 ? u : 0];
-  const $ = h.PAIRS_FOR_EXTENSION.price[e], b = h.PAIRS_FOR_EXTENSION.originalPrice[e];
-  I ? (x = n ? $.DEFAULT_SINGLE_PRICE_FORMATTED : $.DEFAULT_SINGLE_PRICE, L = n ? b.DEFAULT_SINGLE_PRICE_FORMATTED : b.DEFAULT_SINGLE_PRICE) : (x = n ? $.DEFAULT_PRICE_FORMATTED : $.DEFAULT_PRICE, L = n ? b.DEFAULT_PRICE_FORMATTED : b.DEFAULT_PRICE), X = h.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT;
-  const A = E || (l == null ? void 0 : l.priceOrientation) || "horizontal", D = (l == null ? void 0 : l.priceHideDiscount) ?? M.productPriceHideDiscountControlValue === "1";
-  return s === N.ORIENTATION.VERTICAL ? B(
-    J,
+  const u = q[e].findIndex((M) => M.value === l), P = J(l, e), I = (r == null ? void 0 : r.priceSinglePrice) ?? (c == null ? void 0 : c["data-product_price_control_single_price"]) === "1" ?? !1;
+  X = h.PAIRS_FOR_EXTENSION.imageSrc[e].DEFAULT[u >= 0 ? u : 0], F = h.PAIRS_FOR_EXTENSION.name[e].DEFAULT[u >= 0 ? u : 0];
+  const E = h.PAIRS_FOR_EXTENSION.price[e], b = h.PAIRS_FOR_EXTENSION.originalPrice[e];
+  I ? (x = n ? E.DEFAULT_SINGLE_PRICE_FORMATTED : E.DEFAULT_SINGLE_PRICE, L = n ? b.DEFAULT_SINGLE_PRICE_FORMATTED : b.DEFAULT_SINGLE_PRICE) : (x = n ? E.DEFAULT_PRICE_FORMATTED : E.DEFAULT_PRICE, L = n ? b.DEFAULT_PRICE_FORMATTED : b.DEFAULT_PRICE), V = h.PAIRS_FOR_EXTENSION.quantity[e].DEFAULT;
+  const A = $ || (r == null ? void 0 : r.priceOrientation) || "horizontal";
+  return s === N.ORIENTATION.VERTICAL ? K(
+    f,
     e,
     P,
     s,
@@ -374,18 +374,18 @@ function It({
     a,
     i,
     c,
-    String(D),
+    void 0,
     // nodup
-    l,
-    o,
+    r,
+    p,
     t,
     A,
-    p,
+    o,
     T,
     _,
     I
-  ) : B(
-    C,
+  ) : K(
+    j,
     e,
     P,
     s,
@@ -394,13 +394,13 @@ function It({
     a,
     i,
     c,
-    String(D),
+    void 0,
     // nodup
-    l,
-    o,
+    r,
+    p,
     t,
     A,
-    p,
+    o,
     T,
     _,
     I

package/dist/extensions/Blocks/Recommendation/controls/cardBackground/index.js

@@ -1,7 +1,7 @@
 import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as s } from "../../../common-control.js";
 import { getCurrentLayout as l } from "../main/utils.js";
-const i = "recommendation-card-background-color-control", e = {
+const u = "recommendation-card-background-color-control", e = {
   CARD_BACKGROUND_COLOR: "cardBackgroundColor"
 }, a = {
   GRID: ".product-card-segment",
@@ -9,17 +9,13 @@ const i = "recommendation-card-background-color-control", e = {
 };
 class _ extends s {
   getId() {
-    return i;
+    return u;
   }
   getTemplate() {
-    return `
-            <div class="card-bg-control-container">
-                ${this._GuTwoColumns([
+    return this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Card Background Color") }),
       this._GuColorPicker(e.CARD_BACKGROUND_COLOR)
-    ])}
-            </div>
-        `;
+    ]);
   }
   onRender() {
     this._setFormValues(), this._listenToFormUpdates();
@@ -75,6 +71,6 @@ class _ extends s {
   }
 }
 export {
-  i as CARD_BACKGROUND_COLOR_CONTROL_ID,
+  u as CARD_BACKGROUND_COLOR_CONTROL_ID,
   _ as CardBackgroundColorControl
 };

package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js

@@ -1,16 +1,16 @@
-var G = Object.defineProperty;
-var P = (u, s, t) => s in u ? G(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
-var C = (u, s, t) => P(u, typeof s != "symbol" ? s + "" : s, t);
-import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as R } from "../../../common-control.js";
-import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as M } from "../../constants/selectors.js";
-import { SPACING_STEP as _, MAX_SPACING as N, MIN_SPACING as b, DEFAULT_COLUMN_SPACING as g, DEFAULT_ROW_SPACING as E } from "../../constants/layout.js";
+var y = Object.defineProperty;
+var M = (u, s, t) => s in u ? y(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var g = (u, s, t) => M(u, typeof s != "symbol" ? s + "" : s, t);
+import { ModificationDescription as S } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as E } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as L } from "../../constants/selectors.js";
+import { SPACING_STEP as P, MAX_SPACING as G, MIN_SPACING as R, DEFAULT_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as I } from "../../constants/layout.js";
 import { RecommendationConfigService as p } from "../../services/configService.js";
 import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
-import { safeGetStyle as L, safeGetParent as V } from "../../utils/tagName.js";
-import { getCurrentLayout as f, getBlockElement as B } from "../main/utils.js";
-import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
-const U = "recommendation-spacing-control", n = {
+import { safeGetStyle as f, safeGetParent as B } from "../../utils/tagName.js";
+import { getCurrentLayout as _, getBlockElement as U } from "../main/utils.js";
+import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
+const V = "recommendation-spacing-control", o = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
   ROW_SPACING: "rowSpacing",
@@ -19,97 +19,67 @@ const U = "recommendation-spacing-control", n = {
   MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
   MOBILE_ROW_SPACING: "mobileRowSpacing",
   MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
-}, A = {
+}, b = {
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing",
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function I(u, s) {
+function O(u, s) {
   if (!u)
     return s;
   const t = parseFloat(u);
   return Number.isNaN(t) ? s : t;
 }
-class j extends R {
+class j extends E {
   constructor() {
     super(...arguments);
-    C(this, "store", w());
-    C(this, "unsubscribeOrientation", null);
+    g(this, "store", w());
+    g(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    C(this, "_debouncedOnColumnSpacingChange", O((t) => {
+    g(this, "_debouncedOnColumnSpacingChange", N((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      */
-    C(this, "_debouncedOnRowSpacingChange", O((t) => {
+    g(this, "_debouncedOnRowSpacingChange", N((t) => {
       this._onRowSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileColumnSpacingChange
      */
-    C(this, "_debouncedOnMobileColumnSpacingChange", O((t) => {
+    g(this, "_debouncedOnMobileColumnSpacingChange", N((t) => {
       this._onMobileColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileRowSpacingChange
      */
-    C(this, "_debouncedOnMobileRowSpacingChange", O((t) => {
+    g(this, "_debouncedOnMobileRowSpacingChange", N((t) => {
       this._onMobileRowSpacingChange(t);
     }, 300));
   }
   getId() {
-    return U;
+    return V;
   }
   getTemplate() {
     return `
             <div class="spacing-control-container">
-                ${this._GuTwoColumns([
-      this._GuLabel({
-        text: this.api.translate("Column Spacing (px)"),
-        name: n.COLUMN_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.COLUMN_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Row Spacing (px)"),
-        name: n.ROW_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.ROW_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Column Spacing on Mobile (px)"),
-        name: n.MOBILE_COLUMN_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.MOBILE_COLUMN_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Row Spacing on Mobile (px)"),
-        name: n.MOBILE_ROW_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.MOBILE_ROW_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      })
-    ])}
+                ${this._spacingRow("Column Spacing (px)", o.COLUMN_SPACING_LABEL, o.COLUMN_SPACING)}
+                ${this._spacingRow("Row Spacing (px)", o.ROW_SPACING_LABEL, o.ROW_SPACING)}
+                ${this._spacingRow(
+      "Column Spacing on Mobile (px)",
+      o.MOBILE_COLUMN_SPACING_LABEL,
+      o.MOBILE_COLUMN_SPACING
+    )}
+                ${this._spacingRow(
+      "Row Spacing on Mobile (px)",
+      o.MOBILE_ROW_SPACING_LABEL,
+      o.MOBILE_ROW_SPACING
+    )}
             </div>
         `;
   }
@@ -122,6 +92,21 @@ class j extends R {
   onDestroy() {
     this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
   }
+  /**
+   * One label + counter per two-column row, so every spacing field gets the same
+   * 16px-padded row the color controls already render instead of sharing one grid.
+   */
+  _spacingRow(t, e, n) {
+    return this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate(t), name: e }),
+      this._GuCounter({
+        name: n,
+        minValue: R,
+        maxValue: G,
+        step: P
+      })
+    ]);
+  }
   /**
    * Updates spacing control visibility based on layout orientation and mobileLayoutEnabled.
    * - List layout: hide column spacing (products are full-width), hide ALL mobile
@@ -132,14 +117,14 @@ class j extends R {
   _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || f(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, c = t.mobileCardsInRow > 1;
-    this.api.setVisibility(n.COLUMN_SPACING, i && r), this.api.setVisibility(n.COLUMN_SPACING_LABEL, i && r), this.api.setVisibility(n.ROW_SPACING, !0), this.api.setVisibility(n.ROW_SPACING_LABEL, !0), this.api.setVisibility(
-      n.MOBILE_COLUMN_SPACING,
+    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || _(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, c = t.mobileCardsInRow > 1;
+    this.api.setVisibility(o.COLUMN_SPACING, i && r), this.api.setVisibility(o.COLUMN_SPACING_LABEL, i && r), this.api.setVisibility(o.ROW_SPACING, !0), this.api.setVisibility(o.ROW_SPACING_LABEL, !0), this.api.setVisibility(
+      o.MOBILE_COLUMN_SPACING,
       i && a && c
     ), this.api.setVisibility(
-      n.MOBILE_COLUMN_SPACING_LABEL,
+      o.MOBILE_COLUMN_SPACING_LABEL,
       i && a && c
-    ), this.api.setVisibility(n.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(n.MOBILE_ROW_SPACING_LABEL, i && a);
+    ), this.api.setVisibility(o.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(o.MOBILE_ROW_SPACING_LABEL, i && a);
   }
   /**
    * Reads spacing values from node config first, falls back to DOM styles.
@@ -148,12 +133,12 @@ class j extends R {
   _setFormValues() {
     if (!this.api)
       return;
-    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), o = t ? e.columnSpacing : this._getStoredColumnSpacing(), i = t ? e.rowSpacing : this._getStoredRowSpacing();
+    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), n = t ? e.columnSpacing : this._getStoredColumnSpacing(), i = t ? e.rowSpacing : this._getStoredRowSpacing();
     this.api.updateValues({
-      [n.COLUMN_SPACING]: o,
-      [n.ROW_SPACING]: i,
-      [n.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
-      [n.MOBILE_ROW_SPACING]: e.mobileRowSpacing
+      [o.COLUMN_SPACING]: n,
+      [o.ROW_SPACING]: i,
+      [o.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
+      [o.MOBILE_ROW_SPACING]: e.mobileRowSpacing
     });
   }
   /**
@@ -165,20 +150,20 @@ class j extends R {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return g;
-    const t = this.currentNode.querySelector(S) ?? this.currentNode;
-    if (f(this.currentNode) === "grid") {
-      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = L(l, "padding");
+      return C;
+    const t = this.currentNode.querySelector(m) ?? this.currentNode;
+    if (_(this.currentNode) === "grid") {
+      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = f(l, "padding");
       if (!d)
-        return g;
-      const y = d.trim().split(/\s+/);
-      return y.length < 2 ? g : I(y[1], g / 2) * 2;
+        return C;
+      const A = d.trim().split(/\s+/);
+      return A.length < 2 ? C : O(A[1], C / 2) * 2;
     }
-    const o = t.querySelector(".product-card-wrapper") ?? null, i = V(o), a = L(i, "padding");
+    const n = t.querySelector(".product-card-wrapper") ?? null, i = B(n), a = f(i, "padding");
     if (!a)
-      return g;
+      return C;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? g : I(r[1], g / 2) * 2;
+    return r.length < 2 ? C : O(r[1], C / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -186,9 +171,9 @@ class j extends R {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return E;
-    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer") ?? null, o = L(e, "height");
-    return I(o, E);
+      return I;
+    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer") ?? null, n = f(e, "height");
+    return O(n, I);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -205,9 +190,9 @@ class j extends R {
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeDataAttribute(A.COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
-    c && (o === "grid" ? Array.from(
+    ), this._storeDataAttribute(b.COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || _(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(m);
+    c && (n === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
     ).forEach((l) => {
       i.modifyHtml(l).setStyle("padding", r);
@@ -216,7 +201,7 @@ class j extends R {
     ).forEach((l) => {
       const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new m(`Update column spacing to ${t}px`)));
+    }), i.apply(new S(`Update column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -230,19 +215,19 @@ class j extends R {
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeDataAttribute(A.ROW_SPACING, t);
-    const e = this.currentNode.querySelector(S);
+    ), this._storeDataAttribute(b.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(m);
     if (!e)
       return;
-    const o = Array.from(
+    const n = Array.from(
       e.querySelectorAll(".spacer")
     );
-    if (!o.length)
+    if (!n.length)
       return;
     const i = this.api.getDocumentModifier(), a = `${t}px`;
-    o.forEach((r) => {
+    n.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new m(`Update row spacing to ${t}px`));
+    }), i.apply(new S(`Update row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -259,9 +244,9 @@ class j extends R {
       this.currentNode,
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
-    ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(M);
-    c && (o === "grid" ? Array.from(
+    ), this._storeDataAttribute(b.MOBILE_COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || _(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(L);
+    c && (n === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
     ).forEach((l) => {
       i.modifyHtml(l).setStyle("padding", r);
@@ -270,7 +255,7 @@ class j extends R {
     ).forEach((l) => {
       const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new m(`Update mobile column spacing to ${t}px`)));
+    }), i.apply(new S(`Update mobile column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -284,19 +269,19 @@ class j extends R {
       this.currentNode,
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(M);
+    ), this._storeDataAttribute(b.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(L);
     if (!e)
       return;
-    const o = Array.from(
+    const n = Array.from(
       e.querySelectorAll(".spacer")
     );
-    if (!o.length)
+    if (!n.length)
       return;
     const i = this.api.getDocumentModifier(), a = `${t}px`;
-    o.forEach((r) => {
+    n.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new m(`Update mobile row spacing to ${t}px`));
+    }), i.apply(new S(`Update mobile row spacing to ${t}px`));
   }
   // ========================================================================
   // Data Attribute Storage
@@ -305,23 +290,23 @@ class j extends R {
    * Stores a spacing value as a data attribute on the block root element
    */
   _storeDataAttribute(t, e) {
-    const o = B(this.currentNode);
-    o && this.api.getDocumentModifier().modifyHtml(o).setAttribute(t, e.toString()).apply(new m(`Store ${t}`));
+    const n = U(this.currentNode);
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new S(`Store ${t}`));
   }
   // ========================================================================
   // Event Listeners
   // ========================================================================
   _listenToFormUpdates() {
-    this.api.onValueChanged(n.COLUMN_SPACING, (t) => {
+    this.api.onValueChanged(o.COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(n.ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(o.ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
-    }), this.api.onValueChanged(n.MOBILE_COLUMN_SPACING, (t) => {
+    }), this.api.onValueChanged(o.MOBILE_COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnMobileColumnSpacingChange(e);
-    }), this.api.onValueChanged(n.MOBILE_ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(o.MOBILE_ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnMobileRowSpacingChange(e);
     });
@@ -337,6 +322,6 @@ class j extends R {
   }
 }
 export {
-  U as SPACING_CONTROL_ID,
+  V as SPACING_CONTROL_ID,
   j as SpacingControl
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -25,6 +25,27 @@ const n = `/* Utils */
     border-top: none;
 }
 
+/* The editor's row-separator rule only reaches \`.container\`s that are direct
+   children of \`.container-wrapper\`; the spacing rows sit one level deeper, so the
+   first one loses its line. Restore it with the editor's own border token. */
+.spacing-control-container > .container {
+    border-top: var(--ue-border-width-1, 1px) solid var(--ue-panels-border-color, rgba(0, 0, 0, 0.07));
+}
+
+/* A spacing field that doesn't apply (mobile rows, column spacing in list layout) is
+   removed from its row and leaves the wrapper behind — collapse it so it can't
+   render as an empty separator-topped strip. */
+.spacing-control-container > .container:not(:has(ue-counter)) {
+    display: none;
+}
+
+/* The block background row stacks the editor's "inherits background color" banner
+   above its field, separated by the editor's default 10px gap — match the tab's 16px.
+   Scoped via the spacing control so other blocks keep the default. */
+.ue-scrollable-content:has(.spacing-control-container) .e2e-block-bg-color {
+    row-gap: 16px;
+}
+
 /* Right-align the mobile layout toggle within the two-column grid */
 .product-layout-control-container ue-switcher {
     justify-self: end;

package/dist/src/extensions/Blocks/Recommendation/controls/spacing/index.d.ts

@@ -30,6 +30,11 @@ export declare class SpacingControl extends CommonControl {
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
     onDestroy(): void;
+    /**
+     * One label + counter per two-column row, so every spacing field gets the same
+     * 16px-padded row the color controls already render instead of sharing one grid.
+     */
+    _spacingRow(label: string, labelName: string, counterName: string): string;
     /**
      * Updates spacing control visibility based on layout orientation and mobileLayoutEnabled.
      * - List layout: hide column spacing (products are full-width), hide ALL mobile

package/dist/utils/pairProductVariables.js

@@ -1,108 +1,88 @@
-import { productPairs as w } from "../extensions/Blocks/Items/enums/productEnums.js";
-import { DefaultConfigValues as G } from "../extensions/Blocks/Items/enums/settingsEnums.js";
-import { escapeReplacement as N } from "../extensions/Blocks/Items/utils/nodeConfigUtils.js";
-import { preserveTextStyles as I } from "./preserveTextStyles.js";
-import { unwrapProductNameLinks as v } from "./unwrapProductNameLink.js";
-const O = {
-  CART_ITEMS: "ins_apr",
-  BROWSED_ITEMS: "browsed_item",
-  PURCHASED_ITEMS: "purchased_item"
-}, q = (h) => h.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->");
-function X(h, g, _) {
-  let E = h.indexOf(g);
-  if (E === -1)
-    return !1;
-  for (; E !== -1; ) {
-    let b = E;
-    for (; b > 0 && /\s/.test(h[b - 1]); )
-      b -= 1;
-    if (!_.some((P) => h.endsWith(P, b)))
-      return !1;
-    E = h.indexOf(g, E + g.length);
-  }
-  return !0;
-}
-function J(h) {
-  const g = q(h), _ = new DOMParser().parseFromString(g, "text/html");
-  v(_);
-  const E = w.PAIRS_FOR_EXTENSION;
-  Object.entries(E).forEach(([r, l]) => {
-    _.querySelectorAll(".ins-product-td").forEach((f) => {
-      const p = f.getAttribute("data-number") || "1", R = f.getAttribute("data-type") || "CART_ITEMS";
-      f.querySelectorAll(`[product-attr="${r}"]`).forEach((t) => {
-        var k, D, x;
-        const S = t.getAttribute("data-type") || R, u = t.getAttribute("data-number") || p, A = l[S];
-        if (A)
+import { productPairs as q } from "../extensions/Blocks/Items/enums/productEnums.js";
+import { DefaultConfigValues as O } from "../extensions/Blocks/Items/enums/settingsEnums.js";
+import { preserveTextStyles as C } from "./preserveTextStyles.js";
+import { unwrapProductNameLinks as U } from "./unwrapProductNameLink.js";
+function Y(L) {
+  const H = L.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), b = new DOMParser().parseFromString(H, "text/html");
+  U(b);
+  const R = q.PAIRS_FOR_EXTENSION;
+  Object.entries(R).forEach(([r, u]) => {
+    b.querySelectorAll(".ins-product-td").forEach((l) => {
+      const h = l.getAttribute("data-number") || "1", $ = l.getAttribute("data-type") || "CART_ITEMS";
+      l.querySelectorAll(`[product-attr="${r}"]`).forEach((t) => {
+        var F, I, w;
+        const T = t.getAttribute("data-type") || $, f = t.getAttribute("data-number") || h, d = u[T];
+        if (d)
           switch (r) {
             case "imageSrc": {
               let e = null, c = null;
               if (t.tagName === "IMG" ? (e = t, c = e.closest("a")) : (e = t.querySelector("img"), c = t.querySelector("a") || t.closest("a")), !e)
                 break;
-              const i = A.DEFAULT, s = A.ATTR;
+              const i = d.DEFAULT, a = d.ATTR;
               if (i && e.src) {
                 const o = e.src;
-                i.some((T) => {
-                  const a = T.split("/").pop() || "", C = o.split("/").pop() || "";
-                  return o.includes(T) || o.includes(a) || C === a;
-                }) && (e.src = `{{${s}_${u}}}`);
+                i.some((E) => {
+                  const s = E.split("/").pop() || "", g = o.split("/").pop() || "";
+                  return o.includes(E) || o.includes(s) || g === s;
+                }) && (e.src = `{{${a}_${f}}}`);
               }
-              const n = (D = (k = E.name) == null ? void 0 : k[S]) == null ? void 0 : D.ATTR;
-              if (n && e.setAttribute("alt", `{{${n}_${u}}}`), c) {
-                const o = (x = E.itemLink) == null ? void 0 : x[S];
+              const n = (I = (F = R.name) == null ? void 0 : F[T]) == null ? void 0 : I.ATTR;
+              if (n && e.setAttribute("alt", `{{${n}_${f}}}`), c) {
+                const o = (w = R.itemLink) == null ? void 0 : w[T];
                 if (o) {
-                  const $ = o.HREF, T = o.DEFAULT_HREF || "#!", a = c.href;
-                  (a === "#" || a === "" || a.endsWith("#!") || a.endsWith(T) || a === `${window.location.href}${T}` || !a || a === window.location.href) && (c.href = `{{${$}_${u}}}`);
+                  const A = o.HREF, E = o.DEFAULT_HREF || "#!", s = c.href;
+                  (s === "#" || s === "" || s.endsWith("#!") || s.endsWith(E) || s === `${window.location.href}${E}` || !s || s === window.location.href) && (c.href = `{{${A}_${f}}}`);
                 }
               }
               break;
             }
             case "name": {
-              const e = A, c = e.ATTR, i = e.DEFAULT_HREF || "#!", s = e.HREF;
-              t.textContent && (t.innerHTML = I(t, `{{${c}_${u}}}`));
+              const e = d, c = e.ATTR, i = e.DEFAULT_HREF || "#!", a = e.HREF;
+              t.textContent && (t.innerHTML = C(t, `{{${c}_${f}}}`));
               const n = t.closest("a") || (t.tagName === "A" ? t : null);
-              if (n && s) {
-                const o = n.href, $ = `${window.location.href}${i}`;
-                (o === $ || o.endsWith(i)) && (n.href = `{{${s}_${u}}}`);
+              if (n && a) {
+                const o = n.href, A = `${window.location.href}${i}`;
+                (o === A || o.endsWith(i)) && (n.href = `{{${a}_${f}}}`);
               }
               break;
             }
             case "price":
             case "originalPrice": {
-              const e = A, c = t.getAttribute("data-formated"), i = t.getAttribute("data-single_price"), s = c === "true", n = i === "true", o = t.getAttribute("data-curency") || "before";
-              let $;
-              n ? $ = s ? e.SINGLE_PRICE_FORMATTED : e.SINGLE_PRICE : $ = s ? e.PRICE_FORMATTED : e.PRICE;
-              const T = e.CURRENCY;
-              let a = `{{${$}_${u}}}`;
-              const C = (t.getAttribute("data-currency_symbol") || "").trim(), W = C !== "" && C !== G.productPriceCurrencySymbolControlValue;
-              let H = "";
-              W ? H = C : T && (H = `{{${T}_${u}}}`), H && (a = o === "after" ? `${a} ${H}` : `${H} ${a}`), t.innerHTML = I(t, a);
+              const e = d, c = t.getAttribute("data-formated"), i = t.getAttribute("data-single_price"), a = c === "true", n = i === "true", o = t.getAttribute("data-curency") || "before";
+              let A;
+              n ? A = a ? e.SINGLE_PRICE_FORMATTED : e.SINGLE_PRICE : A = a ? e.PRICE_FORMATTED : e.PRICE;
+              const E = e.CURRENCY;
+              let s = `{{${A}_${f}}}`;
+              const g = (t.getAttribute("data-currency_symbol") || "").trim(), N = g !== "" && g !== O.productPriceCurrencySymbolControlValue;
+              let m = "";
+              N ? m = g : E && (m = `{{${E}_${f}}}`), m && (s = o === "after" ? `${s} ${m}` : `${m} ${s}`), t.innerHTML = C(t, s);
               break;
             }
             case "quantity": {
-              const e = A, c = e.ATTR, i = e.DEFAULT;
-              t.textContent && t.textContent.trim() === i && (t.innerHTML = I(t, `{{${c}_${u}}}`));
+              const e = d, c = e.ATTR, i = e.DEFAULT;
+              t.textContent && t.textContent.trim() === i && (t.innerHTML = C(t, `{{${c}_${f}}}`));
               break;
             }
             case "button": {
-              const e = A, c = e.HREF, i = e.DEFAULT_HREF || "#!", s = t.tagName === "A" ? t : t.querySelector("a");
-              if (s) {
-                const n = s.href || "", o = `${window.location.href}${i}`;
-                (n === "" || n === "#" || n === o || n.endsWith(i) || n.endsWith("#!") || n === window.location.href) && (s.href = `{{${c}_${u}}}`);
+              const e = d, c = e.HREF, i = e.DEFAULT_HREF || "#!", a = t.tagName === "A" ? t : t.querySelector("a");
+              if (a) {
+                const n = a.href || "", o = `${window.location.href}${i}`;
+                (n === "" || n === "#" || n === o || n.endsWith(i) || n.endsWith("#!") || n === window.location.href) && (a.href = `{{${c}_${f}}}`);
               }
               break;
             }
             case "itemLink": {
-              const e = A, c = e.HREF, i = e.DEFAULT_HREF || "#!", s = t;
-              if (s.href) {
-                const n = s.href, o = `${window.location.href}${i}`;
-                (n === o || n.endsWith(i)) && (s.href = `{{${c}_${u}}}`);
+              const e = d, c = e.HREF, i = e.DEFAULT_HREF || "#!", a = t;
+              if (a.href) {
+                const n = a.href, o = `${window.location.href}${i}`;
+                (n === o || n.endsWith(i)) && (a.href = `{{${c}_${f}}}`);
               }
               break;
             }
             default: {
-              if ("ATTR" in A) {
-                const e = A.ATTR;
-                t.textContent && (t.innerHTML = I(t, `{{${e}_${u}}}`));
+              if ("ATTR" in d) {
+                const e = d.ATTR;
+                t.textContent && (t.innerHTML = C(t, `{{${e}_${f}}}`));
               }
               break;
             }
@@ -110,53 +90,55 @@ function J(h) {
       });
     });
   });
-  const b = g.match(/<!DOCTYPE[^>]*>/i), P = b ? `${b[0]}
-` : "", U = _.querySelectorAll(".ins-product-td"), L = [];
-  U.forEach((r) => {
-    const l = r.getAttribute("data-type") || "CART_ITEMS", d = r.getAttribute("data-number") || "1", f = r.outerHTML;
-    L.push({
+  const k = H.match(/<!DOCTYPE[^>]*>/i), P = k ? `${k[0]}
+` : "", D = b.querySelectorAll(".ins-product-td"), M = [];
+  D.forEach((r) => {
+    const u = r.getAttribute("data-type") || "CART_ITEMS", p = r.getAttribute("data-number") || "1", l = r.outerHTML;
+    M.push({
       element: r,
-      outerHtml: f,
-      type: l,
-      number: d
+      outerHtml: l,
+      type: u,
+      number: p
     });
   });
-  let y = P + _.documentElement.outerHTML;
-  L.reverse().forEach(({ outerHtml: r, type: l, number: d }) => {
-    const f = O[l], p = f ? `${f}_total_product_kind` : "";
-    if (p) {
-      const m = parseInt(d) - 1, u = `${`{% if ${p} > ${m} %}`}${r}{% endif %}`;
-      y = y.replace(r, N(u));
+  let _ = P + b.documentElement.outerHTML;
+  M.reverse().forEach(({ outerHtml: r, type: u, number: p }) => {
+    let l = "";
+    switch (u) {
+      case "CART_ITEMS":
+        l = "ins_apr_total_product_kind";
+        break;
+      case "BROWSED_ITEMS":
+        l = "browsed_item_total_product_kind";
+        break;
+      case "PURCHASED_ITEMS":
+        l = "purchased_item_total_product_kind";
+        break;
+    }
+    if (l) {
+      const $ = parseInt(p) - 1, T = `${`{% if ${l} > ${$} %}`}${r}{% endif %}`;
+      _ = _.replace(r, T);
     }
   });
-  const V = _.querySelectorAll('[product-attr="originalPrice"][data-type]'), F = [], M = /* @__PURE__ */ new Set();
-  return V.forEach((r) => {
-    var t;
-    const l = r.getAttribute("data-number"), d = r.getAttribute("data-type");
-    if (!l || !O[d])
-      return;
-    const f = r.closest(".product-original-price-class");
-    if (!f)
-      return;
-    const p = f.outerHTML;
-    if (((t = r.closest(".ins-product-td")) == null ? void 0 : t.getAttribute("data-nodup")) === "false") {
-      M.add(p);
+  const x = b.querySelectorAll('[product-attr="originalPrice"][data-type="CART_ITEMS"]'), S = [];
+  return x.forEach((r) => {
+    var $;
+    const u = r.getAttribute("data-number"), p = r.getAttribute("data-type");
+    if (!u || p !== "CART_ITEMS" || (($ = r.closest(".ins-product-td")) == null ? void 0 : $.getAttribute("data-nodup")) === "false")
       return;
+    const h = r.closest(".product-original-price-class");
+    if (h) {
+      const y = h.outerHTML;
+      S.some((T) => T.tdOuterHtml === y) || S.push({ tdOuterHtml: y, number: u });
     }
-    F.some((S) => S.tdOuterHtml === p) || F.push({ tdOuterHtml: p, number: l, type: d });
-  }), F.forEach(({ tdOuterHtml: r, number: l, type: d }) => {
-    if (M.has(r))
-      return;
-    const f = w.PAIRS_FOR_EXTENSION.price[d].PRICE, p = w.PAIRS_FOR_EXTENSION.originalPrice[d].PRICE, R = `{% if ${f}_${l} != ${p}_${l} %}`, m = X(y, r, [
-      R,
-      q(R)
-    ]);
-    r.includes("{% if") || m || (y = y.replaceAll(
-      r,
-      N(`${R}${r}{% endif %}`)
-    ));
-  }), y.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  }), S.reverse().forEach(({ tdOuterHtml: r, number: u }) => {
+    const p = `{% if ins_apr_price_${u} != ins_apr_originalprice_${u} %}`;
+    if (!_.includes(p) && !r.includes("{% if")) {
+      const h = `${p}${r}{% endif %}`;
+      _ = _.replace(r, h);
+    }
+  }), _.replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
-  J as pairProductVariables
+  Y as pairProductVariables
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.15.0-beta.e9014b0",
+  "version": "3.15.0-beta.f5247a0",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",