@useinsider/guido 3.20.0-beta.11a0bde → 3.20.0-beta.30c96fc

package/dist/config/compiler/itemsCompilerRules.js

@@ -1,6 +1,15 @@
 import { pairProductVariables as o } from "../../utils/pairProductVariables.js";
-import { wrapHiddenPriceTdsForOutlook as r, MSO_ITEMS_HIDE_START as e, MSO_ITEMS_HIDE_END as t } from "./utils/itemsCompilerUtils.js";
-const a = [
+import { normalizeItemsBlockWidths as r, wrapHiddenPriceTdsForOutlook as e, MSO_ITEMS_HIDE_START as t, MSO_ITEMS_HIDE_END as s } from "./utils/itemsCompilerUtils.js";
+const d = [
+  {
+    id: "normalize-items-block-widths",
+    // Runs before the other items rules so they see non-zero widths; not AMP-safe.
+    description: "Normalize zero Items card widths in the compiled email",
+    type: "custom",
+    processor: r,
+    priority: 55
+    // Before pair-product-variables (60)
+  },
   {
     id: "pair-product-variables",
     description: "Replace product default values with template variables",
@@ -16,7 +25,7 @@ const a = [
     // with safe placeholder comments and collapse them inline for web-engine Outlook.
     description: "Mark hidden Items price tds for Outlook conditional hiding",
     type: "custom",
-    processor: r,
+    processor: e,
     priority: 65
     // After pair-product-variables (60), before outlook rules (70+)
   },
@@ -26,10 +35,10 @@ const a = [
     // and reco swap P100) keeps it out of every whitespace/comment-mangling pass.
     description: "Swap Items MSO markers into [if !mso] conditional comments",
     type: "custom",
-    processor: (i) => i.replaceAll(`<!--${e}-->`, "<!--[if !mso]><!-- -->").replaceAll(`<!--${t}-->`, "<!--<![endif]-->"),
+    processor: (i) => i.replaceAll(`<!--${t}-->`, "<!--[if !mso]><!-- -->").replaceAll(`<!--${s}-->`, "<!--<![endif]-->"),
     priority: 101
   }
 ];
 export {
-  a as itemsCompilerRules
+  d as itemsCompilerRules
 };

package/dist/config/compiler/utils/itemsCompilerUtils.js

@@ -1,28 +1,55 @@
-const p = "MSO_ITEMS_HIDE_START", E = "MSO_ITEMS_HIDE_END", u = "mso-hide:all; max-height:0; overflow:hidden; font-size:0; line-height:0;", _ = ".ins-product-cart td.horizontal-price, .ins-product-cart td.vertical-price";
-function T(t) {
-  if (!t.includes("vertical-price") || !t.includes("ins-product-cart"))
-    return t;
-  const i = t.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(i, "text/html");
-  let n = !1;
-  if (r.querySelectorAll(_).forEach((e) => {
-    var s, a;
-    const o = e.getAttribute("style") || "";
+import { PRODUCT_WRAPPER_SELECTOR as A, hasZeroWidthDeclaration as E, isZeroWidthValue as u, withWidthPin as h, PRODUCT_TD_SELECTOR as S, withoutZeroWidth as _ } from "../../../extensions/Blocks/Items/constants/cardWidth.js";
+import { protectLiquid as m, restoreLiquid as y } from "../../../utils/liquidProtection.js";
+const f = "MSO_ITEMS_HIDE_START", D = "MSO_ITEMS_HIDE_END", T = "mso-hide:all; max-height:0; overflow:hidden; font-size:0; line-height:0;", M = ".ins-product-cart td.horizontal-price, .ins-product-cart td.vertical-price";
+function g(e) {
+  if (!e.includes("vertical-price") || !e.includes("ins-product-cart"))
+    return e;
+  const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(n, "text/html");
+  let s = !1;
+  if (r.querySelectorAll(M).forEach((t) => {
+    var d, a;
+    const o = t.getAttribute("style") || "";
     if (!/display\s*:\s*none/i.test(o))
       return;
-    const c = e.previousSibling;
-    if (((c == null ? void 0 : c.nodeType) !== Node.COMMENT_NODE || c.data !== p) && ((s = e.parentNode) == null || s.insertBefore(r.createComment(p), e), (a = e.parentNode) == null || a.insertBefore(r.createComment(E), e.nextSibling)), !/mso-hide/i.test(o)) {
-      const d = o.trim().endsWith(";") ? " " : "; ";
-      e.setAttribute("style", `${o}${d}${u}`);
+    const l = t.previousSibling;
+    if (((l == null ? void 0 : l.nodeType) !== Node.COMMENT_NODE || l.data !== f) && ((d = t.parentNode) == null || d.insertBefore(r.createComment(f), t), (a = t.parentNode) == null || a.insertBefore(r.createComment(D), t.nextSibling)), !/mso-hide/i.test(o)) {
+      const p = o.trim().endsWith(";") ? " " : "; ";
+      t.setAttribute("style", `${o}${p}${T}`);
     }
-    n = !0;
-  }), !n)
-    return t;
-  const l = i.match(/<!DOCTYPE[^>]*>/i);
-  return ((l ? `${l[0]}
+    s = !0;
+  }), !s)
+    return e;
+  const c = n.match(/<!DOCTYPE[^>]*>/i);
+  return ((c ? `${c[0]}
 ` : "") + r.documentElement.outerHTML).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
+function I(e) {
+  if (!e.includes("ins-product-wrapper") && !e.includes("ins-product-td"))
+    return e;
+  const n = new DOMParser().parseFromString(m(e), "text/html");
+  let r = !1;
+  if (n.querySelectorAll(A).forEach((i) => {
+    const t = i.getAttribute("style") || "";
+    if (!E(t) && !u(i.getAttribute("width")))
+      return;
+    const o = h(t);
+    o !== t && (i.setAttribute("style", o), r = !0), u(i.getAttribute("width")) && (i.setAttribute("width", "100%"), r = !0);
+  }), n.querySelectorAll(S).forEach((i) => {
+    const t = i.getAttribute("style") || "";
+    if (E(t)) {
+      const o = _(t);
+      o ? i.setAttribute("style", o) : i.removeAttribute("style"), r = !0;
+    }
+    u(i.getAttribute("width")) && (i.removeAttribute("width"), r = !0);
+  }), !r)
+    return e;
+  const s = e.match(/<!DOCTYPE[^>]*>/i), c = s ? `${s[0]}
+` : "";
+  return y(c + n.documentElement.outerHTML);
+}
 export {
-  E as MSO_ITEMS_HIDE_END,
-  p as MSO_ITEMS_HIDE_START,
-  T as wrapHiddenPriceTdsForOutlook
+  D as MSO_ITEMS_HIDE_END,
+  f as MSO_ITEMS_HIDE_START,
+  I as normalizeItemsBlockWidths,
+  g as wrapHiddenPriceTdsForOutlook
 };

package/dist/config/migrator/itemsBlockMigrator.js

@@ -1,84 +1,86 @@
-var q = Object.defineProperty;
-var v = (c, t, e) => t in c ? q(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var M = (c, t, e) => v(c, typeof t != "symbol" ? t + "" : t, e);
+var B = Object.defineProperty;
+var v = (n, t, e) => t in n ? B(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var M = (n, t, e) => v(n, typeof t != "symbol" ? t + "" : t, e);
 import { BLOCK_ID as R } from "../../extensions/Blocks/Items/block.js";
+import { hasZeroWidthDeclaration as L, withoutZeroWidth as x } from "../../extensions/Blocks/Items/constants/cardWidth.js";
 import { ItemInCartOptions as h, DefaultConfigValues as b, SETTINGS_ENUMS as _ } from "../../extensions/Blocks/Items/enums/settingsEnums.js";
-import { getDefaultTemplate as L } from "../../extensions/Blocks/Items/template.js";
-import { useTemplateStore as x } from "../../stores/template.js";
-function O() {
+import { getDefaultTemplate as V } from "../../extensions/Blocks/Items/template.js";
+import { useTemplateStore as O } from "../../stores/template.js";
+import { protectLiquid as H, restoreLiquid as $ } from "../../utils/liquidProtection.js";
+function F() {
   return String(Date.now() + Math.floor(Math.random() * 1e3));
 }
-function P(c) {
-  return c ? {
+function D(n) {
+  return n ? {
     CartItems: _.ITEMS_TYPE.CART_ITEMS,
     BrowsedItems: _.ITEMS_TYPE.BROWSED_ITEMS,
     PurchasedItems: _.ITEMS_TYPE.PURCHASED_ITEMS,
     CART_ITEMS: _.ITEMS_TYPE.CART_ITEMS,
     BROWSED_ITEMS: _.ITEMS_TYPE.BROWSED_ITEMS,
     PURCHASED_ITEMS: _.ITEMS_TYPE.PURCHASED_ITEMS
-  }[c] || _.ITEMS_TYPE.CART_ITEMS : _.ITEMS_TYPE.CART_ITEMS;
+  }[n] || _.ITEMS_TYPE.CART_ITEMS : _.ITEMS_TYPE.CART_ITEMS;
 }
-function V(c) {
-  return c.classList.contains("esd-browsed-items-block") ? _.ITEMS_TYPE.BROWSED_ITEMS : c.classList.contains("esd-purchased-items-block") ? _.ITEMS_TYPE.PURCHASED_ITEMS : _.ITEMS_TYPE.CART_ITEMS;
+function U(n) {
+  return n.classList.contains("esd-browsed-items-block") ? _.ITEMS_TYPE.BROWSED_ITEMS : n.classList.contains("esd-purchased-items-block") ? _.ITEMS_TYPE.PURCHASED_ITEMS : _.ITEMS_TYPE.CART_ITEMS;
 }
-function D(c) {
+function P(n) {
   var o;
-  const t = (i, u) => i == null ? u : i === "1" || i === "true", e = (i, u) => i || u, a = c["data-type"] || c["data-source"], r = P(a), d = h[r];
-  let n = c["data-cart_items_select_control_value"] || ((o = d == null ? void 0 : d[0]) == null ? void 0 : o.value) || b.cartItemsSelectControlValue;
-  if (n && !n.includes("{{") && /^\d+$/.test(n)) {
-    const i = parseInt(n) - 1, u = h[r];
-    u && u[i] && (n = u[i].value);
+  const t = (i, d) => i == null ? d : i === "1" || i === "true", e = (i, d) => i || d, a = n["data-type"] || n["data-source"], r = D(a), u = h[r];
+  let c = n["data-cart_items_select_control_value"] || ((o = u == null ? void 0 : u[0]) == null ? void 0 : o.value) || b.cartItemsSelectControlValue;
+  if (c && !c.includes("{{") && /^\d+$/.test(c)) {
+    const i = parseInt(c) - 1, d = h[r];
+    d && d[i] && (c = d[i].value);
   }
   return {
     initialized: !0,
-    blockInstanceId: e(c["data-block-instance-id"], O()),
+    blockInstanceId: e(n["data-block-instance-id"], F()),
     source: r,
     type: r,
-    itemsSelectValue: n,
-    orientation: c["data-card_orientation_control_value"] || _.ORIENTATION.VERTICAL,
-    nameTrimming: t(c["data-product_name_control_trim"], !0),
-    priceHideDiscount: t(c["data-product_price_control_nodup"], !0),
-    priceFormatted: t(c["data-product_price_control_formated"], !0),
-    priceSinglePrice: t(c["data-product_price_control_single_price"], !1),
+    itemsSelectValue: c,
+    orientation: n["data-card_orientation_control_value"] || _.ORIENTATION.VERTICAL,
+    nameTrimming: t(n["data-product_name_control_trim"], !0),
+    priceHideDiscount: t(n["data-product_price_control_nodup"], !0),
+    priceFormatted: t(n["data-product_price_control_formated"], !0),
+    priceSinglePrice: t(n["data-product_price_control_single_price"], !1),
     priceCurrencySymbol: e(
-      c["data-product_price_control_currency_symbol"],
+      n["data-product_price_control_currency_symbol"],
       b.productPriceCurrencySymbolControlValue
     ),
     priceCurrencyLocation: e(
-      c["data-product_price_currency_location"],
+      n["data-product_price_currency_location"],
       b.productPriceCurrencyLocationControlValue
     ),
-    priceOrientation: c["data-product_original_price_control_orientation"] || "horizontal",
-    quantityControlEnabled: t(c["data-product_quantity_control_enabled"], !0),
-    buttonLink: e(c["data-product_button_link"], b.productButtonLinkControlValue),
-    imageLink: e(c["data-product_image_link"], b.productImageLinkControlValue),
-    buttonLabel: e(c["data-product_button_control_label"], "Buy"),
-    buttonFullWidth: t(c["data-product_button_control_atw"], !0),
-    imageVisible: t(c["data-product_image_control_enabled"], !0),
-    nameVisible: t(c["data-product_name_control_enabled"], !0),
-    quantityVisible: t(c["data-product_quantity_control_enabled"], !0),
-    priceVisible: t(c["data-product_price_control_enabled"], !0),
-    originalPriceVisible: t(c["data-product_original_price_control_enabled"], !0),
-    buttonVisible: t(c["data-product_button_control_enabled"], !0)
+    priceOrientation: n["data-product_original_price_control_orientation"] || "horizontal",
+    quantityControlEnabled: t(n["data-product_quantity_control_enabled"], !0),
+    buttonLink: e(n["data-product_button_link"], b.productButtonLinkControlValue),
+    imageLink: e(n["data-product_image_link"], b.productImageLinkControlValue),
+    buttonLabel: e(n["data-product_button_control_label"], "Buy"),
+    buttonFullWidth: t(n["data-product_button_control_atw"], !0),
+    imageVisible: t(n["data-product_image_control_enabled"], !0),
+    nameVisible: t(n["data-product_name_control_enabled"], !0),
+    quantityVisible: t(n["data-product_quantity_control_enabled"], !0),
+    priceVisible: t(n["data-product_price_control_enabled"], !0),
+    originalPriceVisible: t(n["data-product_original_price_control_enabled"], !0),
+    buttonVisible: t(n["data-product_button_control_enabled"], !0)
   };
 }
-function H(c, t) {
+function Y(n, t) {
   const e = {
     CART_ITEMS: `{{Abandoned Cart Item (${t}) Image}}`,
     BROWSED_ITEMS: `{{Browsed Item (${t}) Image}}`,
     PURCHASED_ITEMS: `{{Purchased Item (${t}) Image}}`
   };
-  return e[c] || e.CART_ITEMS;
+  return e[n] || e.CART_ITEMS;
 }
-function $(c, t) {
+function W(n, t) {
   const e = {
     CART_ITEMS: `{{Abandoned Cart Item (${t}) Url}}`,
     BROWSED_ITEMS: `{{Browsed Item (${t}) Url}}`,
     PURCHASED_ITEMS: `{{Purchased Item (${t}) Url}}`
   };
-  return e[c] || e.CART_ITEMS;
+  return e[n] || e.CART_ITEMS;
 }
-class F {
+class z {
   constructor() {
     M(this, "parser");
     this.parser = new DOMParser();
@@ -90,10 +92,10 @@ class F {
       const e = this.removeJinjaConditionals(t), a = this.parser.parseFromString(e, "text/html"), r = a.querySelectorAll(
         "td.esd-cart-items-block, td.esd-browsed-items-block, td.esd-purchased-items-block"
       );
-      return x().$patch((n) => {
-        n.migrations = { ...n.migrations, [R]: r.length };
-      }), r.length === 0 ? (console.warn("ItemsBlockMigrator: No blocks found with items block selectors"), e) : (r.forEach((n) => {
-        const o = this.extractConfiguration(n), i = L({
+      return O().$patch((c) => {
+        c.migrations = { ...c.migrations, [R]: r.length };
+      }), r.length === 0 ? (console.warn("ItemsBlockMigrator: No blocks found with items block selectors"), this.backfillV2ProductTdAttributes(e)) : (r.forEach((c) => {
+        const o = this.extractConfiguration(c), i = V({
           orientation: o.orientation,
           itemsType: o.itemsType,
           itemId: o.itemId,
@@ -107,18 +109,18 @@ class F {
           priceStyles: o.priceStyles,
           originalPriceStyles: o.originalPriceStyles,
           quantityStyles: o.quantityStyles,
-          nodeConfig: D(o.configBlockAttributes)
+          nodeConfig: P(o.configBlockAttributes)
         }), l = this.parser.parseFromString(
           `<table><tbody><tr>${i}</tr></tbody></table>`,
           "text/html"
         ).querySelector("td");
-        if (l && n.parentNode) {
-          const s = D(o.configBlockAttributes);
+        if (l && c.parentNode) {
+          const s = P(o.configBlockAttributes);
           l.setAttribute("esd-ext-config", JSON.stringify(s)), l.setAttribute("data-type", s.type);
           const p = l.querySelector("esd-config-block");
-          p && p.remove(), n.parentNode.replaceChild(l, n);
+          p && p.remove(), c.parentNode.replaceChild(l, c);
         }
-      }), a.documentElement.outerHTML);
+      }), this.backfillV2ProductTdAttributes(a.documentElement.outerHTML));
     } catch (e) {
       return console.error("ItemsBlockMigrator failed:", e), t;
     }
@@ -131,24 +133,24 @@ class F {
    */
   extractConfiguration(t) {
     var C;
-    const e = P(
-      this.readSelfOrDescendantAttribute(t, "data-type") || V(t)
-    ), a = this.readSelfOrDescendantAttribute(t, "data-number") || "1", r = parseInt(a) - 1, d = h[e], n = ((C = d == null ? void 0 : d[r]) == null ? void 0 : C.value) || d[0].value, o = this.extractConfigBlockAttributes(t, e, a);
+    const e = D(
+      this.readSelfOrDescendantAttribute(t, "data-type") || U(t)
+    ), a = this.readSelfOrDescendantAttribute(t, "data-number") || "1", r = parseInt(a) - 1, u = h[e], c = ((C = u == null ? void 0 : u[r]) == null ? void 0 : C.value) || u[0].value, o = this.extractConfigBlockAttributes(t, e, a);
     this.applyDomFallbacks(t, o);
-    const i = t.querySelector('[product-attr="price"]'), u = o["data-product_price_control_currency_symbol"], l = o["data-product_price_currency_location"] || "0", s = o["data-product_price_control_formated"], p = s !== "false" && s !== "0", S = o["data-card_orientation_control_value"] === "horizontal" ? "horizontal" : "vertical", y = t.querySelector('a[product-attr="name"]'), f = (y == null ? void 0 : y.getAttribute("style")) || void 0, g = t.querySelector('a[product-attr="button"]') ?? t.querySelector('[product-attr="button"]'), I = (g == null ? void 0 : g.getAttribute("style")) || void 0, w = (i == null ? void 0 : i.getAttribute("style")) || void 0, m = t.querySelector("p.original-price") ?? t.querySelector('[product-attr="originalPrice"]'), A = m != null && m.getAttribute("style") ? m : (m == null ? void 0 : m.closest("p")) ?? m, k = (A == null ? void 0 : A.getAttribute("style")) || void 0, E = t.querySelector('[product-attr="quantity"]'), B = (E == null ? void 0 : E.getAttribute("style")) || void 0;
+    const i = t.querySelector('[product-attr="price"]'), d = o["data-product_price_control_currency_symbol"], l = o["data-product_price_currency_location"] || "0", s = o["data-product_price_control_formated"], p = s !== "false" && s !== "0", S = o["data-card_orientation_control_value"] === "horizontal" ? "horizontal" : "vertical", f = t.querySelector('a[product-attr="name"]'), y = (f == null ? void 0 : f.getAttribute("style")) || void 0, g = t.querySelector('a[product-attr="button"]') ?? t.querySelector('[product-attr="button"]'), I = (g == null ? void 0 : g.getAttribute("style")) || void 0, k = (i == null ? void 0 : i.getAttribute("style")) || void 0, m = t.querySelector("p.original-price") ?? t.querySelector('[product-attr="originalPrice"]'), A = m != null && m.getAttribute("style") ? m : (m == null ? void 0 : m.closest("p")) ?? m, q = (A == null ? void 0 : A.getAttribute("style")) || void 0, E = t.querySelector('[product-attr="quantity"]'), w = (E == null ? void 0 : E.getAttribute("style")) || void 0;
     return {
       orientation: S,
       itemsType: e,
-      itemId: n,
-      currencySymbol: u,
+      itemId: c,
+      currencySymbol: d,
       currencyLocation: l,
       formattedPrice: p,
       configBlockAttributes: o,
-      nameStyles: f,
+      nameStyles: y,
       buttonStyles: I,
-      priceStyles: w,
-      originalPriceStyles: k,
-      quantityStyles: B
+      priceStyles: k,
+      originalPriceStyles: q,
+      quantityStyles: w
     };
   }
   /**
@@ -159,8 +161,8 @@ class F {
    * card migrates with the boilerplate defaults: caption "Buy", USD, full-width button.
    */
   applyDomFallbacks(t, e) {
-    var S, y;
-    const a = t.querySelector("esd-config-block"), r = (...f) => !a || f.every((g) => !(a.getAttribute(g) ?? "").trim());
+    var S, f;
+    const a = t.querySelector("esd-config-block"), r = (...y) => !a || y.every((g) => !(a.getAttribute(g) ?? "").trim());
     Object.entries({
       image: '[product-attr="imageSrc"]',
       name: '[product-attr="name"]',
@@ -168,17 +170,17 @@ class F {
       original_price: '[product-attr="originalPrice"], p.original-price',
       quantity: '[product-attr="quantity"]',
       button: '[product-attr="button"]'
-    }).forEach(([f, g]) => {
-      const I = `data-product_${f}_control_enabled`;
+    }).forEach(([y, g]) => {
+      const I = `data-product_${y}_control_enabled`;
       r(I) && (e[I] = t.querySelector(g) ? "true" : "false");
     }), r("data-card_orientation_control_value") && (e["data-card_orientation_control_value"] = t.querySelector('[colspan="2"]') ? "vertical" : "horizontal");
-    const n = t.querySelector('a[product-attr="button"]') ?? t.querySelector('[product-attr="button"]'), o = (S = n == null ? void 0 : n.textContent) == null ? void 0 : S.replace(/\s+/g, " ").trim();
+    const c = t.querySelector('a[product-attr="button"]') ?? t.querySelector('[product-attr="button"]'), o = (S = c == null ? void 0 : c.textContent) == null ? void 0 : S.replace(/\s+/g, " ").trim();
     o && r("data-product_button_control_label") && (e["data-product_button_control_label"] = o);
-    const i = (n == null ? void 0 : n.getAttribute("style")) || "";
+    const i = (c == null ? void 0 : c.getAttribute("style")) || "";
     r("data-product_button_control_atw") && /display:\s*inline/.test(i) && !/(?:^|;)\s*width\s*:\s*100%/.test(i) && (e["data-product_button_control_atw"] = "false");
-    const u = t.querySelector('[product-attr="imageSrc"]'), l = u ? this.readImageSize(u) : null, s = (l == null ? void 0 : l.height) ?? (l == null ? void 0 : l.width), p = (l == null ? void 0 : l.width) ?? (l == null ? void 0 : l.height);
+    const d = t.querySelector('[product-attr="imageSrc"]'), l = d ? this.readImageSize(d) : null, s = (l == null ? void 0 : l.height) ?? (l == null ? void 0 : l.width), p = (l == null ? void 0 : l.width) ?? (l == null ? void 0 : l.height);
     s && r("data-product_image_control_image-height") && (e["data-product_image_control_image-height"] = s), p && r("data-product_image_control_image-width") && (e["data-product_image_control_image-width"] = p), this.applyPriceDomFallbacks(t, e, r);
-    const T = ((y = t.querySelector('[product-attr="name"]')) == null ? void 0 : y.getAttribute("style")) || "";
+    const T = ((f = t.querySelector('[product-attr="name"]')) == null ? void 0 : f.getAttribute("style")) || "";
     r("data-product_name_control_trim") && /white-space:\s*normal/.test(T) && (e["data-product_name_control_trim"] = "0");
   }
   /**
@@ -189,15 +191,15 @@ class F {
    * the default back over the real value.
    */
   applyPriceDomFallbacks(t, e, a) {
-    var u;
+    var d;
     const r = t.querySelector('[product-attr="price"]') ?? t.querySelector('[product-attr="originalPrice"]');
     if (!r)
       return;
-    const d = (u = r.getAttribute("data-currency_symbol")) == null ? void 0 : u.trim();
-    d && a("data-product_price_control_currency_symbol") && (e["data-product_price_control_currency_symbol"] = d);
-    const n = r.getAttribute("data-curency");
-    if (n && a("data-product_price_currency_location", "data-product_price_control_curency")) {
-      const l = n === "after" ? "1" : "0";
+    const u = (d = r.getAttribute("data-currency_symbol")) == null ? void 0 : d.trim();
+    u && a("data-product_price_control_currency_symbol") && (e["data-product_price_control_currency_symbol"] = u);
+    const c = r.getAttribute("data-curency");
+    if (c && a("data-product_price_currency_location", "data-product_price_control_curency")) {
+      const l = c === "after" ? "1" : "0";
       e["data-product_price_currency_location"] = l, e["data-product_price_control_curency"] = l;
     }
     const o = r.getAttribute("data-formated");
@@ -232,14 +234,14 @@ class F {
    * to nothing, so only a positive integer counts as an answer.
    */
   readImageDimension(t, e) {
-    var u;
+    var d;
     const a = (l) => {
       const s = (l ?? "").trim().match(/^(\d+(?:\.\d+)?)(?:px)?$/i), p = s ? Math.floor(parseFloat(s[1])) : 0;
       return p > 0 ? String(p) : null;
-    }, r = a((u = t.getAttribute(e)) == null ? void 0 : u.trim());
+    }, r = a((d = t.getAttribute(e)) == null ? void 0 : d.trim());
     if (r)
       return r;
-    const d = t.getAttribute("style") || "", n = new RegExp(`(?:^|;)\\s*${e}:\\s*(\\d+(?:\\.\\d+)?)px`), o = new RegExp(`max-${e}:\\s*(\\d+(?:\\.\\d+)?)px`), i = d.match(n) || d.match(o);
+    const u = t.getAttribute("style") || "", c = new RegExp(`(?:^|;)\\s*${e}:\\s*(\\d+(?:\\.\\d+)?)px`), o = new RegExp(`max-${e}:\\s*(\\d+(?:\\.\\d+)?)px`), i = u.match(c) || u.match(o);
     return a(i == null ? void 0 : i[1]);
   }
   /**
@@ -250,26 +252,26 @@ class F {
    * @param itemNumber - The item number (1-based index)
    */
   extractConfigBlockAttributes(t, e, a) {
-    const r = t.querySelector("esd-config-block"), d = {};
+    const r = t.querySelector("esd-config-block"), u = {};
     if (r) {
       if (Array.from(r.attributes).forEach((o) => {
-        o.name.startsWith("data-") && (d[o.name] = o.value);
-      }), d["data-cart_items_select_control_value"]) {
-        const o = d["data-cart_items_select_control_value"];
+        o.name.startsWith("data-") && (u[o.name] = o.value);
+      }), u["data-cart_items_select_control_value"]) {
+        const o = u["data-cart_items_select_control_value"];
         if (/^\d+$/.test(o)) {
-          const i = parseInt(o) - 1, u = h[e];
-          u && u[i] && (d["data-cart_items_select_control_value"] = u[i].value);
+          const i = parseInt(o) - 1, d = h[e];
+          d && d[i] && (u["data-cart_items_select_control_value"] = d[i].value);
         }
       }
-      if (d["data-product_price_control_curency"]) {
-        const o = d["data-product_price_control_curency"];
+      if (u["data-product_price_control_curency"]) {
+        const o = u["data-product_price_control_curency"];
         let i = o;
-        o === "before" ? i = "0" : o === "after" && (i = "1"), d["data-product_price_control_curency"] = i, d["data-product_price_currency_location"] = i;
+        o === "before" ? i = "0" : o === "after" && (i = "1"), u["data-product_price_control_curency"] = i, u["data-product_price_currency_location"] = i;
       }
-      (!d["data-product_price_control_currency_symbol"] || d["data-product_price_control_currency_symbol"].trim() === "") && (d["data-product_price_control_currency_symbol"] = "USD");
+      (!u["data-product_price_control_currency_symbol"] || u["data-product_price_control_currency_symbol"].trim() === "") && (u["data-product_price_control_currency_symbol"] = "USD");
     }
-    const n = { ...this.getDefaultConfigBlockAttributes(), ...d };
-    return n["data-type"] = e, n["data-source"] = e, n["data-product_image_link"] = H(e, a), n["data-product_button_link"] = $(e, a), n;
+    const c = { ...this.getDefaultConfigBlockAttributes(), ...u };
+    return c["data-type"] = e, c["data-source"] = e, c["data-product_image_link"] = Y(e, a), c["data-product_button_link"] = W(e, a), c;
   }
   /**
    * Returns default esd-config-block attributes based on the old template structure
@@ -343,27 +345,29 @@ class F {
   backfillV2ProductTdAttributes(t) {
     if (!t.includes("ins-product-td") || !t.includes("esd-ext-config"))
       return t;
-    const e = this.parser.parseFromString(t, "text/html");
+    const e = this.parser.parseFromString(H(t), "text/html");
     let a = !1;
     return e.querySelectorAll(".ins-product-td").forEach((r) => {
-      r.hasAttribute("width") && (r.removeAttribute("width"), a = !0), r.classList.contains("esd-container-frame") && (r.classList.remove("esd-container-frame"), a = !0);
-      const d = r.querySelector("table.ins-product-wrapper");
-      d != null && d.hasAttribute("width") && d.getAttribute("width") !== "100%" && (d.setAttribute("width", "100%"), a = !0);
-      const n = r.getAttribute("esd-ext-config");
-      let o = null;
+      r.hasAttribute("width") && (r.removeAttribute("width"), a = !0), r.classList.contains("esd-container-frame") && (r.classList.remove("esd-container-frame"), a = !0), r.querySelectorAll("table.ins-product-wrapper").forEach((d) => {
+        d.hasAttribute("width") && d.getAttribute("width") !== "100%" && (d.setAttribute("width", "100%"), a = !0);
+        const l = d.getAttribute("style");
+        l && L(l) && (d.setAttribute("style", x(l)), d.setAttribute("width", "100%"), a = !0);
+      });
+      const u = r.getAttribute("esd-ext-config");
+      let c = null;
       try {
-        o = n ? JSON.parse(n) : null;
+        c = u ? JSON.parse(u) : null;
       } catch {
       }
-      if (!o || (!r.getAttribute("data-nodup") && typeof o.priceHideDiscount == "boolean" && (r.setAttribute("data-nodup", String(o.priceHideDiscount)), a = !0), r.getAttribute("data-type")))
+      if (!c || (!r.getAttribute("data-nodup") && typeof c.priceHideDiscount == "boolean" && (r.setAttribute("data-nodup", String(c.priceHideDiscount)), a = !0), r.getAttribute("data-type")))
         return;
-      const i = o.type || o.source;
-      if (!i)
+      const o = c.type || c.source;
+      if (!o)
         return;
-      r.setAttribute("data-type", i), a = !0;
-      const u = typeof o.itemsSelectValue == "string" ? o.itemsSelectValue.match(/\((\d+)\)/) : null;
-      u && r.getAttribute("data-number") !== u[1] && r.setAttribute("data-number", u[1]);
-    }), a ? e.documentElement.outerHTML : t;
+      r.setAttribute("data-type", o), a = !0;
+      const i = typeof c.itemsSelectValue == "string" ? c.itemsSelectValue.match(/\((\d+)\)/) : null;
+      i && r.getAttribute("data-number") !== i[1] && r.setAttribute("data-number", i[1]);
+    }), a ? $(e.documentElement.outerHTML) : t;
   }
   /**
    * Fast check for the presence of any items block (cart / browsed / purchased)
@@ -397,9 +401,9 @@ class F {
 `), r;
   }
 }
-function J(c) {
-  return new F().migrate(c);
+function X(n) {
+  return new z().migrate(n);
 }
 export {
-  J as migrateItemsBlock
+  X as migrateItemsBlock
 };

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

@@ -1,32 +1,33 @@
 var k = Object.defineProperty;
-var D = (l, a, t) => a in l ? k(l, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[a] = t;
-var y = (l, a, t) => D(l, typeof a != "symbol" ? a + "" : a, t);
-import { BlockId as N } from "../../../enums/block.js";
+var S = (d, l, e) => l in d ? k(d, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[l] = e;
+var g = (d, l, e) => S(d, typeof l != "symbol" ? l + "" : l, e);
+import { BlockId as D } from "../../../enums/block.js";
 import { useOnboardingStore as T } from "../../../stores/onboarding.js";
-import { getMigrationBannerHtml as S } from "../../../utils/migrationBannerHtml.js";
-import { Block as A, BlockCompositionType as M, ModificationDescription as u } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { currencyAttrTargets as H, ITEMS_CURRENCY_ATTR as m } from "./constants/currency.js";
-import { ItemsBlockId as R } from "./enums/controlEnums.js";
-import { SETTINGS_ENUMS as C, DefaultConfigValues as g } from "./enums/settingsEnums.js";
+import { getMigrationBannerHtml as N } from "../../../utils/migrationBannerHtml.js";
+import { Block as H, BlockCompositionType as R, ModificationDescription as u } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { PRODUCT_WRAPPER_SELECTOR as M, isZeroWidthValue as m } from "./constants/cardWidth.js";
+import { currencyAttrTargets as w, ITEMS_CURRENCY_ATTR as y } from "./constants/currency.js";
+import { ItemsBlockId as E } from "./enums/controlEnums.js";
+import { SETTINGS_ENUMS as b, DefaultConfigValues as p } from "./enums/settingsEnums.js";
 import { getDefaultTemplate as O } from "./template.js";
-import { getItemsBlockContainer as b, getItemsBlockConfig as h, deriveItemNumber as B, generateBlockInstanceId as E, getDefaultItemsBlockConfig as w } from "./utils/nodeConfigUtils.js";
-const _ = N.Items, P = "Reconcile Items currency DOM attributes";
-class K extends A {
+import { getItemsBlockContainer as _, getItemsBlockConfig as C, deriveItemNumber as B, generateBlockInstanceId as P, getDefaultItemsBlockConfig as v } from "./utils/nodeConfigUtils.js";
+const A = D.Items, V = "Reconcile Items currency DOM attributes";
+class $ extends H {
   constructor() {
     super(...arguments);
     /** Block instances whose currency attrs were already self-healed this session (SD-147588 — undo-safe). */
-    y(this, "_currencyHealed", /* @__PURE__ */ new Set());
+    g(this, "_currencyHealed", /* @__PURE__ */ new Set());
     /** blockInstanceIds already claimed by a live block this session (SD-147588 collision detection). */
-    y(this, "_seenInstanceIds", /* @__PURE__ */ new Set());
+    g(this, "_seenInstanceIds", /* @__PURE__ */ new Set());
   }
   getId() {
-    return _;
+    return A;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return M.CONTAINER;
+    return R.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -35,20 +36,20 @@ class K extends A {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
   getSettingsPanelTitleHtml() {
-    return S(
-      _,
+    return N(
+      A,
       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 O({
-      orientation: C.ORIENTATION.VERTICAL,
-      itemsType: C.ITEMS_TYPE.CART_ITEMS,
+      orientation: b.ORIENTATION.VERTICAL,
+      itemsType: b.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
-      currencySymbol: g.productPriceCurrencySymbolControlValue,
-      currencyLocation: g.productPriceCurrencyLocationControlValue,
-      formattedPrice: g.productPriceFormattedControlValue === "1"
+      currencySymbol: p.productPriceCurrencySymbolControlValue,
+      currencyLocation: p.productPriceCurrencyLocationControlValue,
+      formattedPrice: p.productPriceFormattedControlValue === "1"
     });
   }
   allowInnerBlocksDND() {
@@ -57,27 +58,27 @@ class K extends A {
   canBeSavedAsModule() {
     return !0;
   }
-  onCreated(t) {
-    const o = this.api.getDocumentModifier(), c = this.api.getDocumentRootCssNode();
-    c.querySelector('[product-attr="imageSrc"] img') || o.modifyCss(c).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const i = b(t);
-    if (!i)
+  onCreated(e) {
+    const t = this.api.getDocumentModifier(), c = this.api.getDocumentRootCssNode();
+    c.querySelector('[product-attr="imageSrc"] img') || t.modifyCss(c).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
+    const r = _(e);
+    if (!r)
       return;
-    const r = i.getNodeConfig(), s = r && Object.keys(r).length > 0, e = h(t);
-    if (e != null && e.initialized) {
+    const o = r.getNodeConfig(), s = o && Object.keys(o).length > 0, i = C(e);
+    if (i != null && i.initialized) {
       if (!s) {
-        const d = this.api.getDocumentModifier();
-        d.modifyHtml(i).setNodeConfig(e), this._stampProductTdDomAttributes(i, e, d), this._shouldReconcileCurrency(e) && this._reconcileCurrencyDomAttributes(i, e, d), d.apply(new u("Migrate legacy config to nodeConfig")), this._markCurrencyHealed(e.blockInstanceId);
+        const a = this.api.getDocumentModifier();
+        a.modifyHtml(r).setNodeConfig(i), this._stampProductTdDomAttributes(r, i, a), this._healCollapsedWidths(r, a), this._shouldReconcileCurrency(i) && this._reconcileCurrencyDomAttributes(r, i, a), a.apply(new u("Migrate legacy config to nodeConfig")), this._markCurrencyHealed(i.blockInstanceId);
         return;
       }
     } else {
-      const d = w(), p = this.api.getDocumentModifier();
-      p.modifyHtml(i).setNodeConfig(d), this._stampProductTdDomAttributes(i, d, p, !0), p.apply(new u("Initialize Items block with default configuration")), T().startOnboarding("itemsOnboarding");
+      const a = v(), I = this.api.getDocumentModifier();
+      I.modifyHtml(r).setNodeConfig(a), this._stampProductTdDomAttributes(r, a, I, !0), I.apply(new u("Initialize Items block with default configuration")), T().startOnboarding("itemsOnboarding");
       return;
     }
-    const n = this._resolveInstanceId(e.blockInstanceId), f = this.api.getDocumentModifier();
-    let I = !1;
-    n !== e.blockInstanceId && (f.modifyHtml(i).setNodeConfig({ ...e, blockInstanceId: n }), I = !0), !this._currencyHealed.has(n) && this._reconcileCurrencyDomAttributes(i, e, f) && (I = !0), I && f.apply(new u("Assign Items block instance ID and reconcile currency")), this._markCurrencyHealed(n);
+    const n = this._resolveInstanceId(i.blockInstanceId), f = this.api.getDocumentModifier();
+    let h = !1;
+    n !== i.blockInstanceId && (f.modifyHtml(r).setNodeConfig({ ...i, blockInstanceId: n }), h = !0), !this._currencyHealed.has(n) && this._reconcileCurrencyDomAttributes(r, i, f) && (h = !0), this._healCollapsedWidths(r, f) && (h = !0), h && f.apply(new u("Assign Items block instance ID and reconcile currency")), this._markCurrencyHealed(n);
   }
   /**
    * Re-seeds nodeConfig from the persisted esd-ext-config when a saved module
@@ -85,24 +86,24 @@ class K extends A {
    * 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(t) {
-    const o = b(t);
-    if (!o)
+  onDocumentChanged(e) {
+    const t = _(e);
+    if (!t)
       return;
-    const c = o.getNodeConfig();
+    const c = t.getNodeConfig();
     if (c && Object.keys(c).length > 0) {
-      const e = h(t);
-      if (e != null && e.initialized && this._shouldReconcileCurrency(e)) {
+      const i = C(e);
+      if (i != null && i.initialized && this._shouldReconcileCurrency(i)) {
         const n = this.api.getDocumentModifier();
-        this._reconcileCurrencyDomAttributes(o, e, n) && n.apply(new u(P)), this._markCurrencyHealed(e.blockInstanceId);
+        this._reconcileCurrencyDomAttributes(t, i, n) && n.apply(new u(V)), this._markCurrencyHealed(i.blockInstanceId);
       }
       return;
     }
-    const r = h(t);
-    if (!(r != null && r.initialized))
+    const o = C(e);
+    if (!(o != null && o.initialized))
       return;
     const s = this.api.getDocumentModifier();
-    s.modifyHtml(o).setNodeConfig(r), this._stampProductTdDomAttributes(o, r, s), this._shouldReconcileCurrency(r) && this._reconcileCurrencyDomAttributes(o, r, s), s.apply(new u("Recover Items block config from saved module")), this._markCurrencyHealed(r.blockInstanceId);
+    s.modifyHtml(t).setNodeConfig(o), this._stampProductTdDomAttributes(t, o, s), this._healCollapsedWidths(t, s), this._shouldReconcileCurrency(o) && this._reconcileCurrencyDomAttributes(t, o, s), s.apply(new u("Recover Items block config from saved module")), this._markCurrencyHealed(o.blockInstanceId);
   }
   /**
    * Bakes the compiler-read DOM attributes (`data-type`, `data-number`, `data-nodup`) onto the
@@ -112,11 +113,21 @@ class K extends A {
    * 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(t, o, c, i = !1) {
-    const r = B(o.itemsSelectValue, o.type), s = (e, n) => {
-      i && t.getAttribute(e) || c.modifyHtml(t).setAttribute(e, n);
+  _stampProductTdDomAttributes(e, t, c, r = !1) {
+    const o = B(t.itemsSelectValue, t.type), s = (i, n) => {
+      r && e.getAttribute(i) || c.modifyHtml(e).setAttribute(i, n);
     };
-    s("data-type", o.type), s("data-number", r), s("data-nodup", String(o.priceHideDiscount));
+    s("data-type", t.type), s("data-number", o), s("data-nodup", String(t.priceHideDiscount));
+  }
+  /**
+   * Repairs a saved module's collapsed card into the state the load migrator produces. Acts only
+   * on a zero width, so Stripo's non-zero drop-time width never triggers it and a healed block no-ops.
+   */
+  _healCollapsedWidths(e, t) {
+    const r = e.querySelectorAll(M).filter((o) => m(o.getAttribute("width")) || m(o.getStyle("width")));
+    return !m(e.getAttribute("width")) && !r.length ? !1 : (e.hasClass("esd-container-frame") && t.modifyHtml(e).removeClass("esd-container-frame"), e.getAttribute("width") !== null && t.modifyHtml(e).removeAttribute("width"), r.forEach((o) => {
+      m(o.getAttribute("width")) && t.modifyHtml(o).setAttribute("width", "100%"), m(o.getStyle("width")) && t.modifyHtml(o).setStyle("width", "100%");
+    }), !0);
   }
   /**
    * Whether a currency self-heal pass should run for this block (SD-147588). The only gate here is
@@ -126,12 +137,12 @@ class K extends A {
    * the symbol write alone is skipped for the 'USD' sentinel — so we must NOT gate the whole pass
    * on symbol customization here, or a default-symbol block with a toggled location never heals.
    */
-  _shouldReconcileCurrency(t) {
-    return !t.blockInstanceId || !this._currencyHealed.has(t.blockInstanceId);
+  _shouldReconcileCurrency(e) {
+    return !e.blockInstanceId || !this._currencyHealed.has(e.blockInstanceId);
   }
   /** Marks a block instance's currency as reconciled so it is not healed again (undo-safe). */
-  _markCurrencyHealed(t) {
-    t && this._currencyHealed.add(t);
+  _markCurrencyHealed(e) {
+    e && this._currencyHealed.add(e);
   }
   /**
    * Resolves the id for a just-created block to one that is unique per live instance.
@@ -140,13 +151,13 @@ class K extends A {
    * currency heal guard and settings-panel switch detection. Mint a fresh id on absence
    * or collision, otherwise keep the existing one. Registers the result as claimed.
    */
-  _resolveInstanceId(t) {
-    let o = t;
-    if (!o || this._seenInstanceIds.has(o))
+  _resolveInstanceId(e) {
+    let t = e;
+    if (!t || this._seenInstanceIds.has(t))
       do
-        o = E();
-      while (this._seenInstanceIds.has(o));
-    return this._seenInstanceIds.add(o), o;
+        t = P();
+      while (this._seenInstanceIds.has(t));
+    return this._seenInstanceIds.add(t), t;
   }
   /**
    * Stamps the export-read currency attrs onto every price `<p>` from config, so a template whose
@@ -159,15 +170,15 @@ class K extends A {
    * Returns true only when an attr actually changed, so the caller can skip an empty apply that
    * would otherwise re-trigger onDocumentChanged and loop.
    */
-  _reconcileCurrencyDomAttributes(t, o, c) {
-    const { position: i, symbol: r } = H(o), s = t.querySelectorAll(`.${R.PRICE} p`);
-    let e = !1;
+  _reconcileCurrencyDomAttributes(e, t, c) {
+    const { position: r, symbol: o } = w(t), s = e.querySelectorAll(`.${E.PRICE} p`);
+    let i = !1;
     return s.forEach((n) => {
-      i !== void 0 && n.getAttribute(m.POSITION) !== i && (c.modifyHtml(n).setAttribute(m.POSITION, i), e = !0), r !== void 0 && n.getAttribute(m.SYMBOL) !== r && (c.modifyHtml(n).setAttribute(m.SYMBOL, r), e = !0);
-    }), e;
+      r !== void 0 && n.getAttribute(y.POSITION) !== r && (c.modifyHtml(n).setAttribute(y.POSITION, r), i = !0), o !== void 0 && n.getAttribute(y.SYMBOL) !== o && (c.modifyHtml(n).setAttribute(y.SYMBOL, o), i = !0);
+    }), i;
   }
 }
 export {
-  _ as BLOCK_ID,
-  K as ItemsBlock
+  A as BLOCK_ID,
+  $ as ItemsBlock
 };

package/dist/extensions/Blocks/Items/constants/cardWidth.js

@@ -0,0 +1,20 @@
+const R = ".ins-product-td", T = ".ins-product-wrapper", s = "width: 100%", c = /(^|;)\s*width\s*:\s*0(?:px|%)?\s*(?:!important)?\s*(?=;|$)/i, n = new RegExp(c.source, "gi"), o = /(^|;)\s*width\s*:/i, _ = /^0(?:px|%)?$/i, a = (t) => _.test((t ?? "").trim()), E = (t) => c.test(t), h = (t) => {
+  if (E(t))
+    return t.replace(
+      n,
+      (i, e) => `${e}${e ? " " : ""}${s}`
+    );
+  if (o.test(t))
+    return t;
+  const r = t.trim();
+  return r ? r.endsWith(";") ? `${r} ${s};` : `${r}; ${s};` : `${s};`;
+}, p = (t) => t.replace(n, (r, i) => i).replace(/;{2,}/g, ";").replace(/^\s*;\s*/, "").replace(/;\s*$/, "").trim();
+export {
+  R as PRODUCT_TD_SELECTOR,
+  T as PRODUCT_WRAPPER_SELECTOR,
+  s as WIDTH_PIN_DECLARATION,
+  E as hasZeroWidthDeclaration,
+  a as isZeroWidthValue,
+  h as withWidthPin,
+  p as withoutZeroWidth
+};

package/dist/extensions/Blocks/Items/layouts/vertical.html.js

@@ -1,5 +1,5 @@
 const t = `{-{-TEMPLATE_FIRST_LINE-}-}
-<table class="es-left ins-product-wrapper" cellspacing="0" cellpadding="0" align="left" width="100%">
+<table class="es-left ins-product-wrapper" cellspacing="0" cellpadding="0" align="left" width="100%" style="width: 100%;">
     <tbody>
         <tr>
             <td class="es-p20b es-p10r es-p10l es-m-p20b es-p10t" width="100%" align="center">

package/dist/extensions/Blocks/Recommendation/utils/legacyStrategyMigration.js

@@ -1,21 +1,21 @@
 import "../constants/selectors.js";
 import { RRS_CONFIG_VERSION as m } from "../constants/defaultConfig.js";
-import { sanitizeProductIds as p, PRODUCT_ID_SEPARATOR as d } from "./productIds.js";
-const u = "manualMerchandising";
-function f({ strategyId: e, nodeConfigVersion: t }) {
+import { sanitizeProductIds as p } from "./productIds.js";
+const d = "manualMerchandising";
+function N({ strategyId: e, nodeConfigVersion: t }) {
   return !e && t < m;
 }
 const o = (e) => {
   const t = String(e ?? "").trim();
   return /^[1-9]\d*$/.test(t) ? t : null;
 };
-function R({ campaignId: e, templateLibraryId: t }) {
+function f({ campaignId: e, templateLibraryId: t }) {
   if (o(e))
     return { scope: "campaign" };
   const n = o(t);
   return n ? { scope: "template", templateId: n } : { scope: "campaign" };
 }
-function S({
+function y({
   blockId: e,
   url: t,
   campaignId: n,
@@ -24,7 +24,7 @@ function S({
   productIds: s,
   target: r
 }) {
-  const i = c === u ? p(s).split(d).filter(Boolean) : [];
+  const i = c === d ? p(s).split(",").filter(Boolean) : [];
   return {
     ...r.scope === "template" ? { templateId: Number.parseInt(r.templateId) } : {
       campaignId: Number.parseInt(n) || 0,
@@ -36,7 +36,7 @@ function S({
   };
 }
 export {
-  S as buildLegacyMigrationPayload,
-  f as isLegacyStrategyConfig,
-  R as resolveMigrationTarget
+  y as buildLegacyMigrationPayload,
+  N as isLegacyStrategyConfig,
+  f as resolveMigrationTarget
 };

package/dist/extensions/Blocks/Recommendation/utils/productIds.js

@@ -1,8 +1,6 @@
-const i = ",";
-function o(t) {
-  return t.map((n) => String(n ?? "").trim()).filter(Boolean).join(",");
+function n(t) {
+  return t.map((i) => String(i ?? "").trim()).filter(Boolean).join(",");
 }
 export {
-  i as PRODUCT_ID_SEPARATOR,
-  o as sanitizeProductIds
+  n as sanitizeProductIds
 };

package/dist/src/config/compiler/utils/itemsCompilerUtils.d.ts

@@ -10,3 +10,8 @@ export declare const MSO_ITEMS_HIDE_END = "MSO_ITEMS_HIDE_END";
  * and collapse them inline for web-engine Outlook.
  */
 export declare function wrapHiddenPriceTdsForOutlook(html: string): string;
+/**
+ * Export safety net for a zero Items width: the wrapper gets the 100% pin, the cell's zero is
+ * dropped so it keeps its column width (a pin there overflows 33%/50% columns).
+ */
+export declare function normalizeItemsBlockWidths(html: string): string;

package/dist/src/extensions/Blocks/Items/block.d.ts

@@ -46,6 +46,11 @@ export declare class ItemsBlock extends Block {
      * relies on this td-level fallback in pairProductVariables.
      */
     private _stampProductTdDomAttributes;
+    /**
+     * Repairs a saved module's collapsed card into the state the load migrator produces. Acts only
+     * on a zero width, so Stripo's non-zero drop-time width never triggers it and a healed block no-ops.
+     */
+    private _healCollapsedWidths;
     /**
      * Whether a currency self-heal pass should run for this block (SD-147588). The only gate here is
      * once-per-session: heal each instance at most once, so the auto-fix can't fight undo (undo

package/dist/src/extensions/Blocks/Items/constants/cardWidth.d.ts

@@ -0,0 +1,12 @@
+export declare const PRODUCT_TD_SELECTOR = ".ins-product-td";
+export declare const PRODUCT_WRAPPER_SELECTOR = ".ins-product-wrapper";
+/** The declaration `layouts/vertical.html` and `layouts/horizontal.html` ship inline. */
+export declare const WIDTH_PIN_DECLARATION = "width: 100%";
+/** True for a `width` attribute value that renders the card zero-wide (`0`, `0px`, `0%`). */
+export declare const isZeroWidthValue: (value?: string | null) => boolean;
+/** True when an inline style declares a zero `width` (ignores `max-width` / `min-width`). */
+export declare const hasZeroWidthDeclaration: (style: string) => boolean;
+/** Rewrites a zero width to the pin or appends it; a non-zero width is kept. Idempotent. */
+export declare const withWidthPin: (style: string) => string;
+/** Drops a zero `width` declaration; the product cell must inherit its column width, not be pinned. */
+export declare const withoutZeroWidth: (style: string) => string;

package/dist/src/extensions/Blocks/Recommendation/utils/productIds.d.ts

@@ -1,5 +1,3 @@
-/** Separator between product ids in the `sanitizeProductIds` output */
-export declare const PRODUCT_ID_SEPARATOR = ",";
 /**
  * Builds the request/URL `productId` value from raw product ID segments.
  * Trimming happens here — NOT on input change — so the user's in-progress

package/dist/src/utils/liquidProtection.d.ts

@@ -0,0 +1,3 @@
+export declare const protectLiquid: (html: string) => string;
+/** Reverses `protectLiquid`, including markers the serializer escaped inside attribute values. */
+export declare const restoreLiquid: (html: string) => string;

package/dist/utils/liquidProtection.js

@@ -0,0 +1,5 @@
+const p = (l) => l.split(/(<!--[\s\S]*?-->)/).map((e, c) => c % 2 ? e : e.replaceAll("{%", "<!--lq{%").replaceAll("%}", "%}lq-->")).join(""), r = (l) => l.replaceAll("<!--lq{%", "{%").replaceAll("%}lq-->", "%}").replaceAll("&lt;!--lq{%", "{%").replaceAll("%}lq--&gt;", "%}");
+export {
+  p as protectLiquid,
+  r as restoreLiquid
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.20.0-beta.11a0bde",
+  "version": "3.20.0-beta.30c96fc",
   "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",