@useinsider/guido 3.20.1 → 3.21.0-beta.0df5409

package/dist/extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.js

@@ -1,38 +1,42 @@
-import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const r = "ins-recommendation-desktop-container", l = "ins-recommendation-mobile-container", i = "ins-recommendation-list-layout", s = "ins-recommendation-no-mobile-layout", u = `.${l} { display: none; }`, m = `@media only screen and (max-width: 480px) { .${r} { display: none !important; } .${l} { display: table !important; } .${i} .${r} { display: table !important; } .${i} .${l}, .${i} .ins-recommendation-mobile-row { display: none !important; } .${i} .product-image-cell { width: 80px !important; } .${i} .product-image-cell img { max-width: 80px !important; } .${i} .button-cell { width: 80px !important; } .${i} .product-info-cell { padding: 5px 8px !important; } }`, d = `@media only screen and (max-width: 480px) { .${s} .${r} { display: table !important; } .${s} .${l}, .${s} .ins-recommendation-mobile-row { display: none !important; } }`, p = `.${l}`;
-function c(t, e) {
-  return !!t.querySelector(e);
+import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const r = "ins-recommendation-desktop-container", a = "ins-recommendation-mobile-container", i = "ins-recommendation-list-layout", s = "ins-recommendation-no-mobile-layout", m = `.${a} { display: none; }`, p = `@media only screen and (max-width: 480px) { .${r} { display: none !important; } .${a} { display: table !important; } .${i} .${r} { display: table !important; } .${i} .${a}, .${i} .ins-recommendation-mobile-row { display: none !important; } .${i} .product-image-cell { width: 80px !important; } .${i} .product-image-cell img { max-width: 80px !important; } .${i} .button-cell { width: 80px !important; } .${i} .product-info-cell { padding: 5px 8px !important; } }`, d = `@media only screen and (max-width: 480px) { .${s} .${r} { display: table !important; } .${s} .${a}, .${s} .ins-recommendation-mobile-row { display: none !important; } }`, c = `.${a}`;
+function f(t, o) {
+  return !!t.querySelector(o);
 }
-function f(t) {
+function y(t) {
   return t.querySelectorAll(`*${r}`).length > 0;
 }
-function y(t) {
+function _(t) {
   return t.querySelectorAll(`*${s}`).length > 0;
 }
-function S(t) {
+function C(t, o) {
   const e = t.getDocumentRootCssNode();
   if (!e)
-    return;
-  const o = t.getDocumentModifier();
-  let n = !1;
-  c(e, p) || (o.modifyCss(e).appendRule(u), n = !0), f(e) || (o.modifyCss(e).appendRule(m), n = !0), y(e) || (o.modifyCss(e).appendRule(d), n = !0), n && o.apply(new a("Add mobile layout CSS rules"));
+    return !1;
+  const n = o ?? t.getDocumentModifier();
+  let l = !1;
+  return f(e, c) || (n.modifyCss(e).appendRule(m), l = !0), y(e) || (n.modifyCss(e).appendRule(p), l = !0), _(e) || (n.modifyCss(e).appendRule(d), l = !0), l && !o && n.apply(new u("Add mobile layout CSS rules")), l;
 }
-function C(t) {
+function L(t) {
   return "hasClass" in t ? t.hasClass(s) : !1;
 }
-function O(t, e, o) {
+function O(t, o, e) {
+  e ? t.modifyHtml(o).setClass(s) : t.modifyHtml(o).removeClass(s);
+}
+function $(t, o, e) {
   const n = t.getDocumentModifier();
-  o ? n.modifyHtml(e).setClass(s) : n.modifyHtml(e).removeClass(s), n.apply(
-    new a(
-      o ? "Opt out of mobile layout" : "Opt in to mobile layout"
+  O(n, o, e), n.apply(
+    new u(
+      e ? "Opt out of mobile layout" : "Opt in to mobile layout"
     )
   );
 }
 export {
   r as CSS_CLASS_DESKTOP_CONTAINER,
-  l as CSS_CLASS_MOBILE_CONTAINER,
+  a as CSS_CLASS_MOBILE_CONTAINER,
   s as CSS_CLASS_NO_MOBILE_LAYOUT,
-  S as ensureMobileCssRulesExist,
-  C as hasMobileLayoutOptOut,
-  O as setMobileLayoutOptOut
+  C as ensureMobileCssRulesExist,
+  L as hasMobileLayoutOptOut,
+  $ as setMobileLayoutOptOut,
+  O as stageMobileLayoutOptOut
 };

package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js

@@ -3,7 +3,7 @@ import { CommonControl as u } from "../../../common-control.js";
 import { RecommendationBlockId as a } from "../../constants/blockIds.js";
 import { RecommendationControlId as d } from "../../constants/controlIds.js";
 import { BLOCK_ROOT_SELECTOR as m } from "../../constants/selectors.js";
-import { CSS_CLASS_TEXT_TRIM as r, ensureTextTrimCssRulesExist as T } from "../shared/textTrimCssRules.js";
+import { CSS_CLASS_TEXT_TRIM as o, ensureTextTrimCssRulesExist as T } from "../shared/textTrimCssRules.js";
 const s = {
   TEXT_TRIM_ENABLED: "textTrimEnabled"
 };
@@ -37,7 +37,7 @@ class N extends u {
   _getCurrentTrimState() {
     if (!this.currentNode || !("hasClass" in this.currentNode))
       return !1;
-    if (this.currentNode.hasClass(r))
+    if (this.currentNode.hasClass(o))
       return !0;
     const e = this.currentNode.closest(m);
     if (!e)
@@ -45,7 +45,7 @@ class N extends u {
     const t = e.querySelector(
       `[esd-extension-block-id="${a.NAME}"]`
     );
-    return t && "hasClass" in t ? t.hasClass(r) : !1;
+    return t && "hasClass" in t ? t.hasClass(o) : !1;
   }
   _onTextTrimChange(e) {
     if (!this.currentNode || !("closest" in this.currentNode))
@@ -58,11 +58,10 @@ class N extends u {
     );
     if (!i.length)
       return;
-    e && T(this.api);
-    const o = this.api.getDocumentModifier();
+    const r = this.api.getDocumentModifier();
     i.forEach((n) => {
-      e ? o.modifyHtml(n).setClass(r) : o.modifyHtml(n).removeClass(r);
-    }), o.apply(
+      e ? r.modifyHtml(n).setClass(o) : r.modifyHtml(n).removeClass(o);
+    }), e && T(this.api, r), r.apply(
       new l(
         e ? "Enable product name text trimming" : "Disable product name text trimming"
       )

package/dist/extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.js

@@ -1,14 +1,14 @@
-import { ModificationDescription as r } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const t = "text-trim-enabled", l = `.${t}`, c = `.${t} p`, S = `.${t} { max-width: 0; }`, T = `.${t} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
-function f(n) {
+import { ModificationDescription as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const t = "text-trim-enabled", c = `.${t}`, S = `.${t} p`, T = `.${t} { max-width: 0; }`, d = `.${t} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
+function R(n, r) {
   const e = n.getDocumentRootCssNode();
   if (!e)
-    return;
-  const o = n.getDocumentModifier();
-  let i = !1;
-  e.querySelector(l) || (o.modifyCss(e).appendRule(S), i = !0), e.querySelectorAll(`*${t}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" && s.getSelector() === c) || (o.modifyCss(e).appendRule(T), i = !0), i && o.apply(new r("Add text trim CSS rules"));
+    return !1;
+  const s = r ?? n.getDocumentModifier();
+  let o = !1;
+  return e.querySelector(c) || (s.modifyCss(e).appendRule(T), o = !0), e.querySelectorAll(`*${t}`).some((i) => "getSelector" in i && typeof i.getSelector == "function" && i.getSelector() === S) || (s.modifyCss(e).appendRule(d), o = !0), o && !r && s.apply(new l("Add text trim CSS rules")), o;
 }
 export {
   t as CSS_CLASS_TEXT_TRIM,
-  f as ensureTextTrimCssRulesExist
+  R as ensureTextTrimCssRulesExist
 };

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

@@ -1,16 +1,16 @@
-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";
+var M = Object.defineProperty;
+var P = (s, r, t) => r in s ? M(s, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[r] = t;
+var l = (s, r, t) => P(s, typeof r != "symbol" ? r + "" : r, t);
+import { ModificationDescription as _ } 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 { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as I } from "../../constants/selectors.js";
+import { SPACING_STEP as G, MAX_SPACING as R, MIN_SPACING as y, DEFAULT_COLUMN_SPACING as p, DEFAULT_ROW_SPACING as f } from "../../constants/layout.js";
+import { RecommendationConfigService as u } from "../../services/configService.js";
 import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
-import { safeGetStyle as f, safeGetParent as B } from "../../utils/tagName.js";
-import { getCurrentLayout as _, getBlockElement as U } from "../main/utils.js";
+import { safeGetStyle as O, safeGetParent as B } from "../../utils/tagName.js";
+import { getCurrentLayout as b, getBlockElement as U } from "../main/utils.js";
 import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
-const V = "recommendation-spacing-control", o = {
+const V = "recommendation-spacing-control", e = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
   ROW_SPACING: "rowSpacing",
@@ -19,46 +19,46 @@ const V = "recommendation-spacing-control", o = {
   MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
   MOBILE_ROW_SPACING: "mobileRowSpacing",
   MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
-}, b = {
+}, m = {
   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 O(u, s) {
-  if (!u)
-    return s;
-  const t = parseFloat(u);
-  return Number.isNaN(t) ? s : t;
+function L(s, r) {
+  if (!s)
+    return r;
+  const t = parseFloat(s);
+  return Number.isNaN(t) ? r : t;
 }
-class j extends E {
+class k extends E {
   constructor() {
     super(...arguments);
-    g(this, "store", w());
-    g(this, "unsubscribeOrientation", null);
+    l(this, "store", w());
+    l(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    g(this, "_debouncedOnColumnSpacingChange", N((t) => {
+    l(this, "_debouncedOnColumnSpacingChange", N((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      */
-    g(this, "_debouncedOnRowSpacingChange", N((t) => {
+    l(this, "_debouncedOnRowSpacingChange", N((t) => {
       this._onRowSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileColumnSpacingChange
      */
-    g(this, "_debouncedOnMobileColumnSpacingChange", N((t) => {
+    l(this, "_debouncedOnMobileColumnSpacingChange", N((t) => {
       this._onMobileColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileRowSpacingChange
      */
-    g(this, "_debouncedOnMobileRowSpacingChange", N((t) => {
+    l(this, "_debouncedOnMobileRowSpacingChange", N((t) => {
       this._onMobileRowSpacingChange(t);
     }, 300));
   }
@@ -68,17 +68,17 @@ class j extends E {
   getTemplate() {
     return `
             <div class="spacing-control-container">
-                ${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 (px)", e.COLUMN_SPACING_LABEL, e.COLUMN_SPACING)}
+                ${this._spacingRow("Row Spacing (px)", e.ROW_SPACING_LABEL, e.ROW_SPACING)}
                 ${this._spacingRow(
       "Column Spacing on Mobile (px)",
-      o.MOBILE_COLUMN_SPACING_LABEL,
-      o.MOBILE_COLUMN_SPACING
+      e.MOBILE_COLUMN_SPACING_LABEL,
+      e.MOBILE_COLUMN_SPACING
     )}
                 ${this._spacingRow(
       "Row Spacing on Mobile (px)",
-      o.MOBILE_ROW_SPACING_LABEL,
-      o.MOBILE_ROW_SPACING
+      e.MOBILE_ROW_SPACING_LABEL,
+      e.MOBILE_ROW_SPACING
     )}
             </div>
         `;
@@ -96,14 +96,14 @@ class j extends E {
    * 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) {
+  _spacingRow(t, i, o) {
     return this._GuTwoColumns([
-      this._GuLabel({ text: this.api.translate(t), name: e }),
+      this._GuLabel({ text: this.api.translate(t), name: i }),
       this._GuCounter({
-        name: n,
-        minValue: R,
-        maxValue: G,
-        step: P
+        name: o,
+        minValue: y,
+        maxValue: R,
+        step: G
       })
     ]);
   }
@@ -117,14 +117,14 @@ class j extends E {
   _updateSpacingVisibility() {
     if (!this.api)
       return;
-    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
+    const t = u.getConfig(this.currentNode), i = this.store.recommendationConfigs.orientation, n = (t.layout || i || b(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, c = t.cardsInRow > 1, g = t.mobileCardsInRow > 1;
+    this.api.setVisibility(e.COLUMN_SPACING, n && c), this.api.setVisibility(e.COLUMN_SPACING_LABEL, n && c), this.api.setVisibility(e.ROW_SPACING, !0), this.api.setVisibility(e.ROW_SPACING_LABEL, !0), this.api.setVisibility(
+      e.MOBILE_COLUMN_SPACING,
+      n && a && g
     ), this.api.setVisibility(
-      o.MOBILE_COLUMN_SPACING_LABEL,
-      i && a && c
-    ), this.api.setVisibility(o.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(o.MOBILE_ROW_SPACING_LABEL, i && a);
+      e.MOBILE_COLUMN_SPACING_LABEL,
+      n && a && g
+    ), this.api.setVisibility(e.MOBILE_ROW_SPACING, n && a), this.api.setVisibility(e.MOBILE_ROW_SPACING_LABEL, n && a);
   }
   /**
    * Reads spacing values from node config first, falls back to DOM styles.
@@ -133,12 +133,12 @@ class j extends E {
   _setFormValues() {
     if (!this.api)
       return;
-    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), n = t ? e.columnSpacing : this._getStoredColumnSpacing(), i = t ? e.rowSpacing : this._getStoredRowSpacing();
+    const t = u.hasConfig(this.currentNode), i = u.getConfig(this.currentNode), o = t ? i.columnSpacing : this._getStoredColumnSpacing(), n = t ? i.rowSpacing : this._getStoredRowSpacing();
     this.api.updateValues({
-      [o.COLUMN_SPACING]: n,
-      [o.ROW_SPACING]: i,
-      [o.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
-      [o.MOBILE_ROW_SPACING]: e.mobileRowSpacing
+      [e.COLUMN_SPACING]: o,
+      [e.ROW_SPACING]: n,
+      [e.MOBILE_COLUMN_SPACING]: i.mobileColumnSpacing,
+      [e.MOBILE_ROW_SPACING]: i.mobileRowSpacing
     });
   }
   /**
@@ -150,20 +150,20 @@ class j extends E {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      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 C;
-      const A = d.trim().split(/\s+/);
-      return A.length < 2 ? C : O(A[1], C / 2) * 2;
+      return p;
+    const t = this.currentNode.querySelector(S) ?? this.currentNode;
+    if (b(this.currentNode) === "grid") {
+      const d = t.querySelector(".recommendation-attribute-row"), C = (d == null ? void 0 : d.querySelector("td")) ?? null, h = O(C, "padding");
+      if (!h)
+        return p;
+      const A = h.trim().split(/\s+/);
+      return A.length < 2 ? p : L(A[1], p / 2) * 2;
     }
-    const n = t.querySelector(".product-card-wrapper") ?? null, i = B(n), a = f(i, "padding");
+    const o = t.querySelector(".product-card-wrapper") ?? null, n = B(o), a = O(n, "padding");
     if (!a)
-      return C;
-    const r = a.trim().split(/\s+/);
-    return r.length < 2 ? C : O(r[1], C / 2) * 2;
+      return p;
+    const c = a.trim().split(/\s+/);
+    return c.length < 2 ? p : L(c[1], p / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -171,9 +171,9 @@ class j extends E {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return I;
-    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer") ?? null, n = f(e, "height");
-    return O(n, I);
+      return f;
+    const i = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer") ?? null, o = O(i, "height");
+    return L(o, f);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -185,23 +185,8 @@ class j extends E {
   _onColumnSpacingChange(t) {
     if (!this.currentNode)
       return;
-    p.updateConfig(
-      this.api,
-      this.currentNode,
-      { columnSpacing: t },
-      `Changed column spacing to ${t}px`
-    ), 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);
-    }) : Array.from(
-      c.querySelectorAll(".product-card-wrapper")
-    ).forEach((l) => {
-      const d = "parent" in l ? l.parent() : void 0;
-      d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new S(`Update column spacing to ${t}px`)));
+    const i = this.api.getDocumentModifier();
+    u.stageConfig(i, this.currentNode, { columnSpacing: t }), this._stageDataAttribute(i, m.COLUMN_SPACING, t), this._stageColumnPadding(i, S, t), i.apply(new _(`Changed column spacing to ${t}px`));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -210,24 +195,8 @@ class j extends E {
   _onRowSpacingChange(t) {
     if (!this.currentNode)
       return;
-    p.updateConfig(
-      this.api,
-      this.currentNode,
-      { rowSpacing: t },
-      `Changed row spacing to ${t}px`
-    ), this._storeDataAttribute(b.ROW_SPACING, t);
-    const e = this.currentNode.querySelector(m);
-    if (!e)
-      return;
-    const n = Array.from(
-      e.querySelectorAll(".spacer")
-    );
-    if (!n.length)
-      return;
-    const i = this.api.getDocumentModifier(), a = `${t}px`;
-    n.forEach((r) => {
-      i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new S(`Update row spacing to ${t}px`));
+    const i = this.api.getDocumentModifier();
+    u.stageConfig(i, this.currentNode, { rowSpacing: t }), this._stageDataAttribute(i, m.ROW_SPACING, t), this._stageSpacerHeight(i, S, t), i.apply(new _(`Changed row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -239,23 +208,8 @@ class j extends E {
   _onMobileColumnSpacingChange(t) {
     if (!this.currentNode)
       return;
-    p.updateConfig(
-      this.api,
-      this.currentNode,
-      { mobileColumnSpacing: t },
-      `Changed mobile column spacing to ${t}px`
-    ), 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);
-    }) : Array.from(
-      c.querySelectorAll(".product-card-wrapper")
-    ).forEach((l) => {
-      const d = "parent" in l ? l.parent() : void 0;
-      d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new S(`Update mobile column spacing to ${t}px`)));
+    const i = this.api.getDocumentModifier();
+    u.stageConfig(i, this.currentNode, { mobileColumnSpacing: t }), this._stageDataAttribute(i, m.MOBILE_COLUMN_SPACING, t), this._stageColumnPadding(i, I, t), i.apply(new _(`Changed mobile column spacing to ${t}px`));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -264,51 +218,59 @@ class j extends E {
   _onMobileRowSpacingChange(t) {
     if (!this.currentNode)
       return;
-    p.updateConfig(
-      this.api,
-      this.currentNode,
-      { mobileRowSpacing: t },
-      `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(b.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(L);
-    if (!e)
-      return;
-    const n = Array.from(
-      e.querySelectorAll(".spacer")
-    );
-    if (!n.length)
-      return;
-    const i = this.api.getDocumentModifier(), a = `${t}px`;
-    n.forEach((r) => {
-      i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new S(`Update mobile row spacing to ${t}px`));
+    const i = this.api.getDocumentModifier();
+    u.stageConfig(i, this.currentNode, { mobileRowSpacing: t }), this._stageDataAttribute(i, m.MOBILE_ROW_SPACING, t), this._stageSpacerHeight(i, I, t), i.apply(new _(`Changed mobile row spacing to ${t}px`));
   }
   // ========================================================================
-  // Data Attribute Storage
+  // Staging helpers (the handlers apply once)
   // ========================================================================
-  /**
-   * Stores a spacing value as a data attribute on the block root element
-   */
-  _storeDataAttribute(t, e) {
+  /** Horizontal padding on every card cell inside the container the selector finds. */
+  _stageColumnPadding(t, i, o) {
+    var d;
+    const n = (d = this.currentNode) == null ? void 0 : d.querySelector(i);
+    if (!this.currentNode || !n)
+      return;
+    const c = u.getConfig(this.currentNode).layout || b(this.currentNode), g = `0 ${o / 2}px`;
+    if (c === "grid") {
+      Array.from(n.querySelectorAll(".attribute-cell")).forEach((C) => {
+        t.modifyHtml(C).setStyle("padding", g);
+      });
+      return;
+    }
+    Array.from(n.querySelectorAll(".product-card-wrapper")).forEach((C) => {
+      const h = "parent" in C ? C.parent() : void 0;
+      h && t.modifyHtml(h).setStyle("padding", g);
+    });
+  }
+  /** Height on every spacer row inside the container the selector finds. */
+  _stageSpacerHeight(t, i, o) {
+    var a;
+    const n = (a = this.currentNode) == null ? void 0 : a.querySelector(i);
+    n && Array.from(n.querySelectorAll(".spacer")).forEach((c) => {
+      t.modifyHtml(c).setStyle("height", `${o}px`);
+    });
+  }
+  /** Mirrors a spacing value onto the block root as a data attribute (regeneration reads it back). */
+  _stageDataAttribute(t, i, o) {
     const n = U(this.currentNode);
-    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new S(`Store ${t}`));
+    n && t.modifyHtml(n).setAttribute(i, o.toString());
   }
   // ========================================================================
   // Event Listeners
   // ========================================================================
   _listenToFormUpdates() {
-    this.api.onValueChanged(o.COLUMN_SPACING, (t) => {
-      const e = parseInt(t);
-      Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(o.ROW_SPACING, (t) => {
-      const e = parseInt(t);
-      Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
-    }), this.api.onValueChanged(o.MOBILE_COLUMN_SPACING, (t) => {
-      const e = parseInt(t);
-      Number.isNaN(e) || this._debouncedOnMobileColumnSpacingChange(e);
-    }), this.api.onValueChanged(o.MOBILE_ROW_SPACING, (t) => {
-      const e = parseInt(t);
-      Number.isNaN(e) || this._debouncedOnMobileRowSpacingChange(e);
+    this.api.onValueChanged(e.COLUMN_SPACING, (t) => {
+      const i = parseInt(t);
+      Number.isNaN(i) || this._debouncedOnColumnSpacingChange(i);
+    }), this.api.onValueChanged(e.ROW_SPACING, (t) => {
+      const i = parseInt(t);
+      Number.isNaN(i) || this._debouncedOnRowSpacingChange(i);
+    }), this.api.onValueChanged(e.MOBILE_COLUMN_SPACING, (t) => {
+      const i = parseInt(t);
+      Number.isNaN(i) || this._debouncedOnMobileColumnSpacingChange(i);
+    }), this.api.onValueChanged(e.MOBILE_ROW_SPACING, (t) => {
+      const i = parseInt(t);
+      Number.isNaN(i) || this._debouncedOnMobileRowSpacingChange(i);
     });
   }
   /**
@@ -323,5 +285,5 @@ class j extends E {
 }
 export {
   V as SPACING_CONTROL_ID,
-  j as SpacingControl
+  k as SpacingControl
 };