@useinsider/guido 3.21.0-beta.ed1d11f → 3.21.0-beta.f545026

package/dist/components/Guido.vue.js

@@ -12,7 +12,7 @@ var t = function() {
   s,
   !1,
   null,
-  "c5146fc5"
+  "65036aaf"
 );
 const v = n.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -4,33 +4,34 @@ import { useEditorLock as le } from "../composables/useEditorLock.js";
 import { provideGuidoActions as ue } from "../composables/useGuidoActions.js";
 import { useGuidoStateBridge as pe } from "../composables/useGuidoStateBridge.js";
 import { usePartner as fe } from "../composables/usePartner.js";
-import { useSaveValidationRollout as ye } from "../composables/useSaveValidationRollout.js";
-import { useStripo as ge } from "../composables/useStripo.js";
+import { useSaveValidationRollout as ge } from "../composables/useSaveValidationRollout.js";
+import { useStripo as ye } from "../composables/useStripo.js";
 import { useTimerClone as Se } from "../composables/useTimerClone.js";
-import { migrate as V } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as $ } from "../enums/defaults.js";
+import { migrate as H } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as V } from "../enums/defaults.js";
 import { RIBBON_SELECTOR as ve } from "../enums/onboarding.js";
-import { useRecommendationExtensionStore as z, disposeStrategyPageReturnListeners as be } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { disposeUnsubscribeListeners as he } from "../extensions/Blocks/Unsubscribe/block.js";
-import Ee from "./organisms/AutoSaveController.vue.js";
-import we from "./organisms/base/AuthErrorModal.vue.js";
-import De from "./organisms/base/Toaster.vue.js";
-import Ce from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import ke from "./organisms/header/HeaderWrapper.vue.js";
-import Re from "./organisms/LoadingWrapper.vue.js";
-import Fe from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import Le from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import Me from "./organisms/validation/ValidationErrorDrawer.vue.js";
-import { useStripoApi as Te } from "../services/stripoApi.js";
-import { useConfigStore as Ie } from "../stores/config.js";
-import { useDynamicContentStore as Ue } from "../stores/dynamic-content.js";
+import { forgetHeightBounds as be } from "../extensions/Blocks/Recommendation/controls/image/index.js";
+import { useRecommendationExtensionStore as $, disposeStrategyPageReturnListeners as he } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { disposeUnsubscribeListeners as Ee } from "../extensions/Blocks/Unsubscribe/block.js";
+import we from "./organisms/AutoSaveController.vue.js";
+import De from "./organisms/base/AuthErrorModal.vue.js";
+import Ce from "./organisms/base/Toaster.vue.js";
+import ke from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import Re from "./organisms/header/HeaderWrapper.vue.js";
+import Fe from "./organisms/LoadingWrapper.vue.js";
+import Le from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import Me from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import Te from "./organisms/validation/ValidationErrorDrawer.vue.js";
+import { useStripoApi as Ie } from "../services/stripoApi.js";
+import { useConfigStore as Ue } from "../stores/config.js";
+import { useDynamicContentStore as Be } from "../stores/dynamic-content.js";
 import { useEditorStore as E } from "../stores/editor.js";
 import { usePreviewStore as Ae } from "../stores/preview.js";
-import { useSaveValidationStore as Be } from "../stores/save-validation.js";
-import { useTemplateStore as Ne } from "../stores/template.js";
-import { useUnsubscribeStore as Pe } from "../stores/unsubscribe.js";
-import { readTrackFloor as H } from "../utils/linkTrackingIds.js";
-const yt = /* @__PURE__ */ ie({
+import { useSaveValidationStore as Ne } from "../stores/save-validation.js";
+import { useTemplateStore as Pe } from "../stores/template.js";
+import { useUnsubscribeStore as _e } from "../stores/unsubscribe.js";
+import { readTrackFloor as z } from "../utils/linkTrackingIds.js";
+const St = /* @__PURE__ */ ie({
   __name: "Guido",
   props: {
     config: null,
@@ -48,32 +49,32 @@ const yt = /* @__PURE__ */ ie({
       () => import("./organisms/extensions/recommendation/RemoveStrategyModal.vue.js")
     ), Y = m(
       () => import("./organisms/extensions/recommendation/LegacyStrategyUpdatedModal.vue.js")
-    ), w = W(), f = W(), y = Ue(), D = Pe(), o = Ie();
+    ), w = W(), f = W(), g = Be(), D = _e(), o = Ue();
     s.ready && o.init(s.config);
-    const c = E(), Z = Ae(), l = p(() => c.hasChanges), { isTestPartner: ee } = fe(), { isEnabled: te, loadRollout: C } = ye(), k = () => {
+    const c = E(), Z = Ae(), l = p(() => c.hasChanges), { isTestPartner: ee } = fe(), { isEnabled: te, loadRollout: C } = ge(), k = () => {
       var t;
       return (t = w.value) == null ? void 0 : t.handleSave(!0);
     }, R = (t) => {
       c.loadingStatus = t;
     };
     me(), pe();
-    const g = () => {
+    const y = () => {
       var t, e;
       return {
         emailId: o.templateId,
         userId: o.userId,
         username: o.username,
         partnerName: o.partnerName,
-        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || $.SAVED_MODULES,
-        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || $.DEFAULT_MODULES
+        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || V.SAVED_MODULES,
+        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || V.DEFAULT_MODULES
       };
-    }, { initPlugin: F, preloadRuntime: L } = ge(), { runExclusive: M, beginMount: T, isCurrentMount: S } = le();
+    }, { initPlugin: F, preloadRuntime: L } = ye(), { runExclusive: M, beginMount: T, isCurrentMount: S } = le();
     let u = 0;
-    const { getDefaultTemplate: I } = Te(), { cloneTimersOnSave: U, hasTimerBlocks: A } = Se(), oe = p(() => {
+    const { getDefaultTemplate: I } = Ie(), { cloneTimersOnSave: U, hasTimerBlocks: B } = Se(), oe = p(() => {
       var t;
       return !((t = o.ui) != null && t.showHeader);
     }), ne = p(() => o.isFeatureEnabled("reusableRecommendationStrategy")), re = p(
-      () => !!z().recommendationConfigs.strategyId
+      () => !!$().recommendationConfigs.strategyId
     );
     ue({
       onBack: () => {
@@ -83,15 +84,15 @@ const yt = /* @__PURE__ */ ie({
         console.debug("guido:save:start"), r("save:start");
       },
       onSaveComplete: (t) => {
-        const e = { ...t, metadata: g() };
+        const e = { ...t, metadata: y() };
         console.debug("guido:save:complete", e), r("save:complete", e);
       },
       onTestEmailClick: () => {
         console.debug("guido:test-email:click"), r("test-email:click");
       }
     });
-    const B = (t) => {
-      console.debug("dynamic-content:close", t), y.setSelectedDynamicContent(t), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: t }));
+    const A = (t) => {
+      console.debug("dynamic-content:close", t), g.setSelectedDynamicContent(t), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: t }));
     }, N = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
@@ -119,26 +120,26 @@ const yt = /* @__PURE__ */ ie({
           rrsEnabled: o.isFeatureEnabled("reusableRecommendationStrategy")
         };
         let n = {
-          html: a && await V(a, _, x),
+          html: a && await H(a, _, x),
           css: d
         };
-        n.html || (n = await I(), n.html = await V(n.html, _, x));
-        const ae = O ? H(n.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
-        A(n.html) && (n.html = await U(n.html)), O && (c.trackIdSessionFloor = Math.max(ae, H(n.html)));
+        n.html || (n = await I(), n.html = await H(n.html, _, x));
+        const ae = O ? z(n.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
+        B(n.html) && (n.html = await U(n.html)), O && (c.trackIdSessionFloor = Math.max(ae, z(n.html)));
         const se = {
           preselectedDynamicContentList: P,
           onReady: () => {
             console.debug("guido:ready"), r("ready");
           }
         };
-        u = T(), await F(n, g(), se), y.selectedDynamicContentList = P;
+        u = T(), await F(n, y(), se), g.selectedDynamicContentList = P;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
     };
     return ce(async () => {
       var e;
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), z().$reset(), E().$reset(), Ne().$reset(), Be().$reset(), C(), b();
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), $().$reset(), E().$reset(), Pe().$reset(), Ne().$reset(), C(), b();
       const t = (e = f.value) == null ? void 0 : e.parentElement;
       if (t && (i = new ResizeObserver(b), i.observe(t)), L(), s.ready)
         await h();
@@ -149,7 +150,7 @@ const yt = /* @__PURE__ */ ie({
       }
       document.addEventListener("dynamic-content:open", v);
     }), de(() => {
-      if (he(), be(), i == null || i.disconnect(), document.removeEventListener("dynamic-content:open", v), S(u))
+      if (Ee(), he(), be(), i == null || i.disconnect(), document.removeEventListener("dynamic-content:open", v), S(u))
         try {
           E().isStripoInitialized = !1;
         } catch (t) {
@@ -165,15 +166,15 @@ const yt = /* @__PURE__ */ ie({
       }), o.reset();
     }), K({
       dynamicContent: {
-        insert: B,
+        insert: A,
         close: N
       },
       hasChanges: l,
       saveSilent: k,
       setLoading: R
-    }), { __sfc: !0, PreviewContainer: j, OnboardingWrapper: J, AssignStrategyDrawer: Q, RemoveStrategyModal: X, LegacyStrategyUpdatedModal: Y, headerWrapperRef: w, wrapperRef: f, dynamicContentStore: y, unsubscribeStore: D, props: s, configStore: o, editorStore: c, previewStore: Z, hasChanges: l, isTestPartner: ee, isSaveValidationEnabled: te, loadRollout: C, saveSilent: k, setLoading: R, emit: r, buildMetadata: g, initPlugin: F, preloadRuntime: L, runExclusive: M, beginMount: T, isCurrentMount: S, mountGeneration: u, getDefaultTemplate: I, cloneTimersOnSave: U, hasTimerBlocks: A, noHeader: oe, isRrsEnabled: ne, hasAssignedStrategy: re, insertDynamicContent: B, closeDynamicContent: N, handleDynamicContentOpen: v, ribbonObserver: i, updateRibbonOffset: b, startEditor: h, AutoSaveController: Ee, AuthErrorModal: we, Toaster: De, FilterSelectionDrawer: Ce, HeaderWrapper: ke, LoadingWrapper: Re, SaveAsTemplateDrawer: Fe, UnsubscribeWrapper: Le, ValidationErrorDrawer: Me };
+    }), { __sfc: !0, PreviewContainer: j, OnboardingWrapper: J, AssignStrategyDrawer: Q, RemoveStrategyModal: X, LegacyStrategyUpdatedModal: Y, headerWrapperRef: w, wrapperRef: f, dynamicContentStore: g, unsubscribeStore: D, props: s, configStore: o, editorStore: c, previewStore: Z, hasChanges: l, isTestPartner: ee, isSaveValidationEnabled: te, loadRollout: C, saveSilent: k, setLoading: R, emit: r, buildMetadata: y, initPlugin: F, preloadRuntime: L, runExclusive: M, beginMount: T, isCurrentMount: S, mountGeneration: u, getDefaultTemplate: I, cloneTimersOnSave: U, hasTimerBlocks: B, noHeader: oe, isRrsEnabled: ne, hasAssignedStrategy: re, insertDynamicContent: A, closeDynamicContent: N, handleDynamicContentOpen: v, ribbonObserver: i, updateRibbonOffset: b, startEditor: h, AutoSaveController: we, AuthErrorModal: De, Toaster: Ce, FilterSelectionDrawer: ke, HeaderWrapper: Re, LoadingWrapper: Fe, SaveAsTemplateDrawer: Le, UnsubscribeWrapper: Me, ValidationErrorDrawer: Te };
   }
 });
 export {
-  yt as default
+  St as default
 };

package/dist/composables/useActionsApi.js

@@ -1,20 +1,21 @@
-import { filterAmpErrors as y } from "../utils/ampErrorFilter.js";
-import { getEditorApi as s } from "../utils/stripoEditorApi.js";
+import { forgetHeightBounds as y } from "../extensions/Blocks/Recommendation/controls/image/index.js";
+import { filterAmpErrors as h } from "../utils/ampErrorFilter.js";
+import { getEditorApi as r } from "../utils/stripoEditorApi.js";
 import { useToaster as D } from "./useToaster.js";
-const h = 1e4, T = 3e4, r = (n, l, A) => new Promise((C, p) => {
-  const f = setTimeout(
+const H = 1e4, T = 3e4, m = (n, l, A) => new Promise((f, p) => {
+  const C = setTimeout(
     () => p(new Error(`${n} did not report completion within ${l}ms`)),
     l
   ), c = (t) => (e) => {
-    clearTimeout(f), t(e);
+    clearTimeout(C), t(e);
   }, d = c(p);
   try {
-    A(c(C), d);
+    A(c(f), d);
   } catch (t) {
     d(t);
   }
-}), P = () => {
-  const { handleError: n } = D(), l = (t = {}) => r(
+}), b = () => {
+  const { handleError: n } = D(), l = (t = {}) => m(
     "compileEmail",
     T,
     (e, i) => {
@@ -38,38 +39,38 @@ const h = 1e4, T = 3e4, r = (n, l, A) => new Promise((C, p) => {
         resetDataSavedFlag: !1,
         disableLineHeightsReplace: !0
       }, ...t }, u = {
-        callback: (m, g, w, S, v) => {
-          m ? i(m) : e({
-            html: g,
+        callback: (s, E, w, S, v) => {
+          s ? i(s) : e({
+            html: E,
             ampHtml: w,
-            ampErrors: y(S ?? []),
+            ampErrors: h(S ?? []),
             displayConditions: v
           });
         },
         ...o
       };
-      s().actionsApi.compileEmail(u);
+      r().actionsApi.compileEmail(u);
     }
   );
   return {
     getCompiledEmail: l,
-    getTemplateData: () => r(
+    getTemplateData: () => m(
       "getTemplateData",
       T,
       (t) => {
-        const e = ({ html: i, css: a, width: o, height: E, utmParams: u, syncModulesIds: m }) => t({
+        const e = ({ html: i, css: a, width: o, height: g, utmParams: u, syncModulesIds: s }) => t({
           html: i,
           css: a,
           width: o,
-          height: E,
+          height: g,
           utmParams: u,
-          syncModulesIds: m
+          syncModulesIds: s
         });
-        s().actionsApi.getTemplateData(e);
+        r().actionsApi.getTemplateData(e);
       }
     ),
     activateCustomViewStyles: (t = !0) => {
-      s().actionsApi.activateCustomViewStyles(t);
+      r().actionsApi.activateCustomViewStyles(t);
     },
     getPreviewData: async (t) => {
       try {
@@ -109,16 +110,16 @@ const h = 1e4, T = 3e4, r = (n, l, A) => new Promise((C, p) => {
       }
     }),
     updateHtmlAndCss: (t, e) => {
-      const { actionsApi: i } = s();
-      return r("updateHtmlAndCss", h, (a) => {
+      const { actionsApi: i } = r();
+      return y(), m("updateHtmlAndCss", H, (a) => {
         i.updateHtmlAndCss(t, e, () => a());
       });
     },
-    editorSave: () => r(
+    editorSave: () => m(
       "save",
       T,
       (t) => {
-        s().actionsApi.save((e) => {
+        r().actionsApi.save((e) => {
           if (e) {
             n(e, "Failed to save template"), t(!1);
             return;
@@ -130,5 +131,5 @@ const h = 1e4, T = 3e4, r = (n, l, A) => new Promise((C, p) => {
   };
 };
 export {
-  P as useActionsApi
+  b as useActionsApi
 };

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

@@ -7,13 +7,13 @@ function L(t, r, e, o, c = "") {
   const i = `{{${c}${t}_${r}_${e}}}`, n = `{{${c}${t}_${r}_currency}}`;
   return o === "before" ? `${n} ${i}` : `${i} ${n}`;
 }
-function _(t) {
+function A(t) {
   let r = t;
   for (; r.children.length === 1; )
     [r] = r.children;
   return r;
 }
-function A(t, r, e, o, c, i) {
+function y(t, r, e, o, c, i) {
   switch (r) {
     case "productImage": {
       const n = t.querySelector("img");
@@ -24,7 +24,7 @@ function A(t, r, e, o, c, i) {
     }
     case "productName": {
       const n = t.querySelector("p");
-      n && (_(n).textContent = `{{${i}${e}_${o}_name}}`);
+      n && (A(n).textContent = `{{${i}${e}_${o}_name}}`);
       break;
     }
     // Inline mode ("Move to next line" OFF) merges BOTH prices into one row
@@ -32,16 +32,16 @@ function A(t, r, e, o, c, i) {
     // substitute by cell content, not by the row's anchor (SD-145161).
     case "productPrice":
     case "productOldPrice": {
-      const n = (l, d) => {
-        l && (_(l).textContent = L(
+      const n = (a, l) => {
+        a && (A(a).textContent = L(
           e,
           o,
-          d,
+          l,
           c,
           i
         ));
-      }, s = t.querySelector(".product-price p"), a = t.querySelector(".product-old-price p"), u = !s && !a ? t.querySelector("p") : null;
-      n(s ?? (r === "productPrice" ? u : null), "price"), n(a ?? (r === "productOldPrice" ? u : null), "original_price");
+      }, s = t.querySelector(".product-price p"), d = t.querySelector(".product-old-price p"), u = !s && !d ? t.querySelector("p") : null;
+      n(s ?? (r === "productPrice" ? u : null), "price"), n(d ?? (r === "productOldPrice" ? u : null), "original_price");
       break;
     }
     case "productButton": {
@@ -70,8 +70,8 @@ function A(t, r, e, o, c, i) {
     default: {
       const n = t.getAttribute("product-attr") ? t : t.querySelector("[product-attr]");
       if (n) {
-        const s = n.getAttribute("product-attr"), a = n.querySelector("p");
-        a && (_(a).textContent = `{{${i}${e}_${o}_${s}}}`);
+        const s = n.getAttribute("product-attr"), d = n.querySelector("p");
+        d && (A(d).textContent = `{{${i}${e}_${o}_${s}}}`);
       }
       break;
     }
@@ -88,54 +88,54 @@ function b(t, r, e, o) {
 function R(t, r, e) {
   return b(t, r, 0, e);
 }
-function D(t, r, e, o) {
+function w(t, r, e, o) {
   if (!t.innerHTML.includes("{{"))
     return;
   const { open: c, close: i } = b(t.ownerDocument, r, e, o);
   t.insertBefore(c, t.firstChild), t.appendChild(i);
 }
-function w(t, r, e, o) {
+function D(t, r, e, o) {
   var n, s;
   if (!t.innerHTML.includes("{{"))
     return;
   const { open: c, close: i } = b(t.ownerDocument, r, e, o);
   (n = t.parentNode) == null || n.insertBefore(c, t), (s = t.parentNode) == null || s.insertBefore(i, t.nextSibling);
 }
-function W(t, r, e, o) {
+function v(t, r, e, o) {
   t.querySelectorAll(".recommendation-product-row").forEach((i, n) => {
-    i.querySelectorAll("[data-attribute-type]").forEach((a) => {
-      const u = a.getAttribute("data-attribute-type") || "", l = a.querySelectorAll(".attribute-cell");
-      l.length > 0 ? l.forEach((d) => {
-        A(d, u, r, n, e, o);
-      }) : A(a, u, r, n, e, o);
-    }), w(i, r, n, o);
+    i.querySelectorAll("[data-attribute-type]").forEach((d) => {
+      const u = d.getAttribute("data-attribute-type") || "", a = d.querySelectorAll(".attribute-cell");
+      a.length > 0 ? a.forEach((l) => {
+        y(l, u, r, n, e, o);
+      }) : y(d, u, r, n, e, o);
+    }), D(i, r, n, o);
   });
 }
-function v(t, r, e, o) {
+function H(t, r, e, o) {
   const c = t.querySelectorAll(".recommendation-product-row");
   if (!c.length)
     return;
   const [i] = c, n = i.querySelector("[data-attribute-type]"), s = n ? n.querySelectorAll(".attribute-cell").length : 1;
-  c.forEach((a, u) => {
-    a.querySelectorAll("[data-attribute-type]").forEach((d) => {
-      const p = d.getAttribute("data-attribute-type") || "";
-      d.querySelectorAll(".attribute-cell").forEach((f, m) => {
-        const h = u * s + m;
-        A(f, p, r, h, e, o), D(f, r, h, o);
+  c.forEach((d, u) => {
+    d.querySelectorAll("[data-attribute-type]").forEach((l) => {
+      const p = l.getAttribute("data-attribute-type") || "";
+      l.querySelectorAll(".attribute-cell").forEach((f, h) => {
+        const S = u * s + h;
+        y(f, p, r, S, e, o), w(f, r, S, o);
       });
     });
   });
 }
-function H(t, r, e, o) {
+function W(t, r, e, o) {
   t.querySelectorAll(".ins-recommendation-product-container").forEach((i) => {
-    v(i, r, e, o);
+    H(i, r, e, o);
   });
 }
 function F(t, r, e) {
   const o = t.getAttribute("data-layout") || "grid", c = t.getAttribute("currency-alignment") || "after";
-  o === "list" ? W(t, r, c, e) : H(t, r, c, e);
+  o === "list" ? v(t, r, c, e) : W(t, r, c, e);
 }
-function y(t, r, e) {
+function _(t, r, e) {
   const o = new RegExp(`${r}\\s*:\\s*(\\d+)\\s*px`, "i"), c = t.match(o);
   return c ? parseInt(c[1]) : e;
 }
@@ -150,7 +150,7 @@ function C(t) {
   const e = (t.getAttribute("style") || "").match(/(?:^|[;\s])width\s*:\s*(\d+(?:\.\d+)?(?:px|%))/i);
   return e && $(e[1]) ? e[1] : null;
 }
-function G(t, r) {
+function x(t, r) {
   let e = t.parentElement;
   for (; e && e !== r; ) {
     if (e.tagName === "TD" && C(e))
@@ -159,35 +159,37 @@ function G(t, r) {
   }
   return null;
 }
-function V(t) {
-  const r = t.getAttribute("style") || "", e = y(r, "width", 600), o = y(r, "padding", 0) * 2, c = Math.max(0, e - o);
+function G(t) {
+  const r = t.getAttribute("style") || "", e = _(r, "width", 600), o = _(r, "padding", 0) * 2, c = Math.max(0, e - o);
   c !== 0 && t.querySelectorAll("img.adapt-img").forEach((i) => {
     if (i.hasAttribute("width"))
       return;
-    const n = G(i, t);
+    const n = x(i, t);
     if (!n)
       return;
-    const s = C(n), a = y(n.getAttribute("style") || "", "padding", 0) * 2, u = s.endsWith("%") ? Math.floor(c * parseFloat(s) / 100) : parseInt(s), l = Math.max(1, u - a);
-    i.setAttribute("width", String(l));
-    const d = i.getAttribute("style") || "";
-    if (!/\bwidth\s*:\s*\d/i.test(d)) {
-      const p = d && !d.trim().endsWith(";") ? "; " : "";
-      i.setAttribute("style", `${d}${p}width: ${l}px`);
+    const s = C(n), d = _(n.getAttribute("style") || "", "padding", 0) * 2, u = s.endsWith("%") ? Math.floor(c * parseFloat(s) / 100) : parseInt(s), a = Math.max(1, u - d), l = i.getAttribute("style") || "", p = /(?:^|[;\s])max-height\s*:\s*(\d+(?:\.\d+)?)px/i.exec(l);
+    if (p) {
+      i.setAttribute("width", String(Math.max(1, Math.min(a, Math.floor(parseFloat(p[1])))))), i.removeAttribute("height");
+      return;
+    }
+    if (i.setAttribute("width", String(a)), !/\bwidth\s*:\s*\d/i.test(l)) {
+      const m = l && !l.trim().endsWith(";") ? "; " : "";
+      i.setAttribute("style", `${l}${m}width: ${a}px`);
     }
   });
 }
-const E = "MSO_MOBILE_HIDE_START", U = "MSO_MOBILE_HIDE_END";
-function X(t, r) {
+const E = "MSO_MOBILE_HIDE_START", V = "MSO_MOBILE_HIDE_END";
+function U(t, r) {
   t.querySelectorAll(q).forEach((e) => {
     var i, n;
     const o = e.querySelector(M);
     if (!o || o.children.length === 0)
       return;
     const c = e.previousSibling;
-    (c == null ? void 0 : c.nodeType) === Node.COMMENT_NODE && c.data === E || ((i = e.parentNode) == null || i.insertBefore(r.createComment(E), e), (n = e.parentNode) == null || n.insertBefore(r.createComment(U), e.nextSibling));
+    (c == null ? void 0 : c.nodeType) === Node.COMMENT_NODE && c.data === E || ((i = e.parentNode) == null || i.insertBefore(r.createComment(E), e), (n = e.parentNode) == null || n.insertBefore(r.createComment(V), e.nextSibling));
   });
 }
-function j(t, r) {
+function X(t, r) {
   const e = t.match(/<!DOCTYPE[^>]*>/i);
   return (e ? `${e[0]}
 ` : "") + r.documentElement.outerHTML;
@@ -200,17 +202,17 @@ function Q(t) {
   i.recommendationCampaignUrls = {};
   const { isFeatureEnabled: n } = g(), s = n("liquidSyntax") ? "reco_" : "";
   return o.forEach((u) => {
-    var d, p, S, f;
-    const l = u.getAttribute("recommendation-id");
-    if (l) {
-      if ((d = u.parentNode) == null || d.insertBefore(e.createComment("REC_START"), u), (p = u.parentNode) == null || p.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), c(l), X(u, e), !T(u)) {
-        F(u, l, s);
-        const { open: m, close: h } = R(e, l, s);
-        (S = u.parentNode) == null || S.insertBefore(m, u), (f = u.parentNode) == null || f.insertBefore(h, u.nextSibling);
+    var l, p, m, f;
+    const a = u.getAttribute("recommendation-id");
+    if (a) {
+      if ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (p = u.parentNode) == null || p.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((h) => h.remove()), c(a), U(u, e), !T(u)) {
+        F(u, a, s);
+        const { open: h, close: S } = R(e, a, s);
+        (m = u.parentNode) == null || m.insertBefore(h, u), (f = u.parentNode) == null || f.insertBefore(S, u.nextSibling);
       }
-      V(u);
+      G(u);
     }
-  }), j(r, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  }), X(r, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
   L as formatPriceVariable,

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

@@ -1,23 +1,24 @@
-var B = Object.defineProperty;
-var b = (a, l, t) => l in a ? B(a, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[l] = t;
-var d = (a, l, t) => b(a, typeof l != "symbol" ? l + "" : l, t);
+var b = Object.defineProperty;
+var D = (a, l, t) => l in a ? b(a, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[l] = t;
+var d = (a, l, t) => D(a, typeof l != "symbol" ? l + "" : l, t);
 import { useConfig as g } from "../../../composables/useConfig.js";
 import { BlockId as C } from "../../../enums/block.js";
 import { getMigrationBannerHtml as A } from "../../../utils/migrationBannerHtml.js";
 import { Block as E, BlockCompositionType as S, ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as w } from "./constants/defaultConfig.js";
+import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as M } from "./constants/defaultConfig.js";
 import { RECOMMENDATION_ID_ATTR as m } from "./constants/selectors.js";
-import { regenerateMobileProductRows as M } from "./controls/main/utils.js";
-import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as O } from "./controls/mobileLayout/cssRules.js";
+import { forgetHeightBounds as w, ensureMobileFitRule as O, syncHeightBound as H } from "./controls/image/index.js";
+import { regenerateMobileProductRows as x } from "./controls/main/utils.js";
+import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as T } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as s } from "./services/configService.js";
 import { useRecommendationExtensionStore as h } from "./store/recommendation.js";
-import { getDefaultTemplate as x } from "./templates/grid/template.js";
-import { useRecommendationBlockWarning as T } from "./useRecommendationBlockWarning.js";
-import { registerNodeConfigWriter as H } from "./utils/nodeConfigWriter.js";
-import { refreshDuplicatedStrategyBlocks as $ } from "./utils/strategyCommit.js";
-const k = C.Recommendation, u = "recommendation-block-v2", D = "hide-price";
-let y = !1;
-class Y extends E {
+import { getDefaultTemplate as F } from "./templates/grid/template.js";
+import { useRecommendationBlockWarning as $ } from "./useRecommendationBlockWarning.js";
+import { registerNodeConfigWriter as v } from "./utils/nodeConfigWriter.js";
+import { refreshDuplicatedStrategyBlocks as L } from "./utils/strategyCommit.js";
+const k = C.Recommendation, u = "recommendation-block-v2", y = "hide-price";
+let B = !1;
+class it extends E {
   constructor() {
     super();
     /**
@@ -72,7 +73,7 @@ class Y extends E {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, x(t);
+    return this._pendingBlockId = t, F(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -84,7 +85,7 @@ class Y extends E {
   onCreated(t) {
     const e = this._getRecommendationId(t);
     if (e !== null && e > 0) {
-      if (this._detectDuplicate(e)) {
+      if (this._ensureMobileFitRule(t), this._detectDuplicate(e)) {
         this._handleDuplicate(t, e), this._scheduleArrivalReset(t);
         return;
       }
@@ -100,7 +101,7 @@ class Y extends E {
       t,
       {
         recommendationId: i,
-        configVersion: n ? N : w,
+        configVersion: n ? N : M,
         ...o ? { partnerName: g().partnerName.value } : {},
         // An RRS block picks a strategy, not an algorithm, and its algorithm control is
         // hidden. Keeping the `mostPopular` default would bake a most-popular feed URL
@@ -111,7 +112,7 @@ class Y extends E {
     if (f.setCurrentBlock(i), this._stampHidePrice(t, r.priceHideIfSameAsDiscounted), c) {
       I(this.api);
       const _ = this._getBlockElement(t);
-      _ && (R(this.api, _, !0), M({
+      _ && (R(this.api, _, !0), x({
         currentNode: t,
         documentModifier: this.api.getDocumentModifier()
       }));
@@ -136,13 +137,13 @@ class Y extends E {
           "Assign recommendation ID to legacy block"
         );
       }
-      this._healLingeringDuplicate(t), s.needsMigration(t) && this._migrateFromLegacy(t), this._healHidePriceAttr(t);
+      this._healLingeringDuplicate(t), s.needsMigration(t) && this._migrateFromLegacy(t), this._healHidePriceAttr(t), this._ensureMobileFitRule(t), this._syncHeightBound(t);
       try {
-        y || (I(this.api), y = !0);
+        B || (I(this.api), B = !0);
         const e = s.getConfig(t), i = this._getBlockElement(t);
         if (i) {
           const n = !e.mobileLayoutEnabled;
-          O(i) !== n && R(this.api, i, n);
+          T(i) !== n && R(this.api, i, n);
         }
       } catch {
       }
@@ -156,7 +157,21 @@ class Y extends E {
    */
   onDelete(t) {
     const e = this._getRecommendationId(t);
-    e && h().removeBlockState(e);
+    e && (h().removeBlockState(e), w(String(e)));
+  }
+  _ensureMobileFitRule(t) {
+    try {
+      O(this.api, t);
+    } catch {
+    }
+  }
+  _syncHeightBound(t) {
+    const e = this._getRecommendationId(t);
+    if (e)
+      try {
+        H(this.api, t, String(e));
+      } catch {
+      }
   }
   /**
    * Warns (dark advisory toaster) when the design holds more than one live
@@ -172,7 +187,7 @@ class Y extends E {
    */
   _warnIfMultipleBlocks() {
     try {
-      T().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
+      $().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
     } catch {
     }
   }
@@ -264,7 +279,7 @@ class Y extends E {
   /** Assigns a fresh id to a duplicated block and syncs DOM, node config and store. */
   _handleDuplicate(t, e) {
     const i = this._reassignDuplicateId(t, e), n = h();
-    n.cloneBlockState(e, i), n.setCurrentBlock(i), g().isFeatureEnabled("reusableRecommendationStrategy") && (this._resetSourceIds.add(e), H(this.api), $(e, i, s.getConfig(t)).catch((o) => console.error("[recommendation] refreshing a duplicated strategy failed", o))), this._warnIfMultipleBlocks();
+    n.cloneBlockState(e, i), n.setCurrentBlock(i), g().isFeatureEnabled("reusableRecommendationStrategy") && (this._resetSourceIds.add(e), v(this.api), L(e, i, s.getConfig(t)).catch((o) => console.error("[recommendation] refreshing a duplicated strategy failed", o))), this._warnIfMultipleBlocks();
   }
   /**
    * Core id-reassignment for a duplicated block: rewrites the DOM
@@ -320,7 +335,7 @@ class Y extends E {
    */
   _stampHidePrice(t, e) {
     const i = this._getBlockElement(t);
-    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(D, String(e)).apply(new p("Stamp hide-price"));
+    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(y, String(e)).apply(new p("Stamp hide-price"));
   }
   /**
    * Stamps `hide-price` from config only when the block lacks the attribute —
@@ -328,7 +343,7 @@ class Y extends E {
    */
   _healHidePriceAttr(t) {
     const e = this._getBlockElement(t);
-    if (!e || !("getAttribute" in e) || e.getAttribute(D) !== null)
+    if (!e || !("getAttribute" in e) || e.getAttribute(y) !== null)
       return;
     const { priceHideIfSameAsDiscounted: i } = s.getConfig(t);
     this._stampHidePrice(t, i);
@@ -366,5 +381,5 @@ class Y extends E {
 }
 export {
   k as BLOCK_ID,
-  Y as RecommendationBlock
+  it as RecommendationBlock
 };

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

@@ -1,19 +1,89 @@
-import { createImageMarginsControl as m, createImageSizeControl as n } from "../../../controlFactories.js";
-import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { RecommendationControlId as r } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
-const e = n(
-  r.IMAGE_SIZE,
-  o.IMAGE,
-  t
-), i = m(
-  r.IMAGE_MARGINS,
-  o.IMAGE,
-  t
-), C = {
-  size: e,
-  margins: i
+import { EditorStatePropertyType as E, PreviewDeviceMode as M, ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { createImageSizeControl as x, createImageMarginsControl as I } from "../../../controlFactories.js";
+import { RecommendationBlockId as u } from "../../constants/blockIds.js";
+import { RecommendationControlId as f } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as g } from "../../constants/selectors.js";
+import { hasGetStyle as c, hasGetAttribute as C } from "../../utils/tagName.js";
+const R = { width: "", height: "auto", "max-height": "" }, S = `${g} img.adapt-img`, B = `*${g.slice(1)}`, p = `@media only screen and (max-width: 600px) { ${S} { max-height: none !important; } }`;
+function A(e) {
+  return { width: "auto", height: "auto", "max-height": `${e}px` };
+}
+function H(e) {
+  return e.querySelectorAll(B).some((t) => "getSelector" in t && t.getSelector() === S);
+}
+function O(e, t) {
+  return c(e) && Object.entries(t).some(([o, n]) => (e.getStyle(o) ?? "") !== n);
+}
+function y(e) {
+  const t = e.getDocumentRootCssNode();
+  return t && !H(t) ? t : null;
+}
+function N(e, t) {
+  const n = t.querySelectorAll("img").some((s) => c(s) && !!s.getStyle("max-height")) ? y(e) : null;
+  if (!n)
+    return;
+  const i = e.getDocumentModifier();
+  i.modifyCss(n).appendRule(p), i.apply(new d("Add the reco image mobile fit rule"));
+}
+const m = /* @__PURE__ */ new Map();
+function T(e) {
+  return {
+    height: C(e) ? Number(e.getAttribute("height")) : 0,
+    maxHeight: c(e) ? e.getStyle("max-height") ?? "" : ""
+  };
+}
+function _(e, t) {
+  return !!(e && t.maxHeight && t.height > 0) && (e == null ? void 0 : e.maxHeight) === t.maxHeight && e.height !== t.height && t.maxHeight !== `${t.height}px`;
+}
+function z(e, t, o) {
+  const n = t.querySelectorAll("img"), i = n.map(T), s = m.get(o), a = i.map((r, h) => _(s == null ? void 0 : s[h], r));
+  if (!a.includes(!0)) {
+    m.set(o, i);
+    return;
+  }
+  const l = e.getDocumentModifier();
+  n.forEach((r, h) => {
+    a[h] && l.modifyHtml(r).setStyle("max-height", `${i[h].height}px`);
+  }), l.apply(new d("Sync the reco image height bound")), m.set(o, i.map((r, h) => a[h] ? { ...r, maxHeight: `${r.height}px` } : r));
+}
+function U(e) {
+  e === void 0 ? m.clear() : m.delete(e);
+}
+class F extends x(
+  f.IMAGE_SIZE,
+  u.IMAGE,
+  g
+) {
+  getAdditionalModifications(t) {
+    if (this.api.getEditorState()[E.previewDeviceMode] === M.MOBILE)
+      return;
+    const o = this.getFitStyles(), n = this.getTargetNodes(t).map((a) => a.querySelector("img")).filter((a) => O(a, o)), i = o["max-height"] ? y(this.api) : null;
+    if (!n.length && !i)
+      return;
+    const s = this.api.getDocumentModifier();
+    return i && s.modifyCss(i).appendRule(p), n.forEach((a) => {
+      const l = s.modifyHtml(a);
+      Object.entries(o).forEach(([r, h]) => {
+        h ? l.setStyle(r, h) : l.removeStyle(r);
+      });
+    }), s;
+  }
+  getFitStyles() {
+    const { size: t } = this.api.getValues();
+    return (t == null ? void 0 : t.type) === "height" && t.value ? A(t.value) : R;
+  }
+}
+const w = I(
+  f.IMAGE_MARGINS,
+  u.IMAGE,
+  g
+), j = {
+  size: F,
+  margins: w
 };
 export {
-  C as ImageControls
+  j as ImageControls,
+  N as ensureMobileFitRule,
+  U as forgetHeightBounds,
+  z as syncHeightBound
 };

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

@@ -1,10 +1,10 @@
 import { extractWrapperTags as A } from "../../../../utils/preserveTextStyles.js";
 import { RecommendationBlockId as c } from "../constants/blockIds.js";
-import { DESKTOP_CONTAINER_SELECTOR as b, ATTR_PRODUCT_NAME as k, ATTR_PRODUCT_PRICE as y, ATTR_PRODUCT_OLD_PRICE as p, ATTR_PRODUCT_OMNIBUS_PRICE as R, ATTR_PRODUCT_OMNIBUS_DISCOUNT as _, ATTR_PRODUCT_BUTTON as x, ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_ATTR as v } from "../constants/selectors.js";
+import { DESKTOP_CONTAINER_SELECTOR as g, ATTR_PRODUCT_NAME as k, ATTR_PRODUCT_PRICE as y, ATTR_PRODUCT_OLD_PRICE as p, ATTR_PRODUCT_OMNIBUS_PRICE as R, ATTR_PRODUCT_OMNIBUS_DISCOUNT as _, ATTR_PRODUCT_BUTTON as x, ATTR_PRODUCT_IMAGE as q, ATTR_PRODUCT_ATTR as v } from "../constants/selectors.js";
 import { CSS_CLASS_TEXT_TRIM as B } from "../controls/shared/textTrimCssRules.js";
 import { toCustomCompositionKey as U } from "../templates/utils.js";
 import { resolveRowVisibilityKeys as N, isMergedInlinePriceRow as C } from "./compositionKeys.js";
-import { hasQuerySelectorAll as I, hasGetAttribute as l, hasGetStyle as O, hasGetComputedStyle as M } from "./tagName.js";
+import { hasQuerySelectorAll as I, hasGetAttribute as l, hasGetStyle as h, hasGetComputedStyle as M } from "./tagName.js";
 const s = [
   "font-size",
   "font-family",
@@ -37,9 +37,10 @@ const s = [
   "width",
   "height",
   "max-width",
+  "max-height",
   "border-radius",
   "margin"
-], g = /* @__PURE__ */ new Set(["transparent", "rgba(0, 0, 0, 0)"]), L = [
+], b = /* @__PURE__ */ new Set(["transparent", "rgba(0, 0, 0, 0)"]), L = [
   { attrKey: k, blockId: c.NAME, kind: "text" },
   { attrKey: y, blockId: c.PRICE, kind: "text" },
   { attrKey: p, blockId: c.OLD_PRICE, kind: "text" },
@@ -48,14 +49,14 @@ const s = [
   { attrKey: x, blockId: c.BUTTON, kind: "button" },
   { attrKey: q, blockId: c.IMAGE, kind: "image" }
 ];
-function h(t) {
+function O(t) {
   return t && "getInnerHTML" in t && typeof t.getInnerHTML == "function" ? t.getInnerHTML().trim() : "";
 }
 function K(t) {
   return t && "getInnerText" in t && typeof t.getInnerText == "function" ? t.getInnerText().trim() : "";
 }
 function a(t, e, r) {
-  !e || !O(e) || r.forEach((n) => {
+  !e || !h(e) || r.forEach((n) => {
     const o = e.getStyle(n);
     o && o !== "inherit" && o !== "initial" && (t[n] = o);
   });
@@ -64,10 +65,10 @@ function E(t) {
   return Object.entries(t).map(([e, r]) => `${e}: ${r};`).join(" ");
 }
 function P(t) {
-  if (!t || !O(t))
+  if (!t || !h(t))
     return;
   const e = t.getStyle("background-color") || t.getStyle("background");
-  return e && !g.has(e) ? e : void 0;
+  return e && !b.has(e) ? e : void 0;
 }
 function S(t, e) {
   const r = {};
@@ -76,11 +77,11 @@ function S(t, e) {
 function $(t) {
   const e = t.querySelector("p"), r = {};
   a(r, t, s), a(r, e, s), a(r, t.querySelector("strong"), s), a(r, t.querySelector("em"), s), a(r, t.querySelector("s"), s);
-  const n = E(r), { openTags: o, closeTags: i } = A(h(e));
+  const n = E(r), { openTags: o, closeTags: i } = A(O(e));
   return !n && !o ? null : { pStyle: n || void 0, openTags: o, closeTags: i };
 }
 function H(t) {
-  const e = t.querySelector(".es-button-border"), r = t.querySelector("a.es-button") ?? t.querySelector("a"), n = S(e, D), o = S(r, w), i = e && "getAttribute" in e ? e.getAttribute("class") ?? "" : "", u = /\bes-fw\b/.test(i), { openTags: T, closeTags: d } = A(h(r)), m = K(r);
+  const e = t.querySelector(".es-button-border"), r = t.querySelector("a.es-button") ?? t.querySelector("a"), n = S(e, D), o = S(r, w), i = e && "getAttribute" in e ? e.getAttribute("class") ?? "" : "", u = /\bes-fw\b/.test(i), { openTags: T, closeTags: d } = A(O(r)), m = K(r);
   return !n && !o && !u && !T && !m ? null : {
     buttonBorderStyle: n || void 0,
     buttonAnchorStyle: o || void 0,
@@ -100,7 +101,7 @@ function j(t, e) {
 function f(t, e) {
   if (!t || !("querySelector" in t))
     return;
-  const r = t.querySelector(b) ?? t;
+  const r = t.querySelector(g) ?? t;
   if (L.forEach(({ attrKey: i, blockId: u, kind: T }) => {
     const d = r.querySelector(`[esd-extension-block-id="${u}"]`);
     d && e(d, i, T);
@@ -126,20 +127,20 @@ function V(t) {
 function X(t) {
   if (!t || !("querySelector" in t))
     return;
-  const e = t.querySelector(b) ?? t, r = e.querySelector(".product-card-segment") ?? e.querySelector(".product-card-wrapper");
+  const e = t.querySelector(g) ?? t, r = e.querySelector(".product-card-segment") ?? e.querySelector(".product-card-wrapper");
   return P(r);
 }
 function z(t) {
   if (!t)
     return;
   const e = l(t) ? t.getAttribute("bgcolor") : null;
-  if (e && !g.has(e))
+  if (e && !b.has(e))
     return e;
   const r = P(t);
   if (r)
     return r;
   const n = M(t) ? t.getComputedStyle("background-color") : void 0;
-  return n && !g.has(n) ? n : void 0;
+  return n && !b.has(n) ? n : void 0;
 }
 function Q(t) {
   const e = {};
@@ -170,7 +171,7 @@ function J(t) {
 function Z(t) {
   if (!t || !("querySelector" in t))
     return !1;
-  const e = t.querySelector(b) ?? t;
+  const e = t.querySelector(g) ?? t;
   return C(e.querySelector(`[data-attribute-type="${y}"]`)) || C(e.querySelector(`[data-attribute-type="${p}"]`));
 }
 function tt(t) {
@@ -195,7 +196,7 @@ function rt(t) {
   const e = {};
   if (!t || !("querySelector" in t))
     return e;
-  const r = t.querySelector(b) ?? t;
+  const r = t.querySelector(g) ?? t;
   return I(r) && r.querySelectorAll(".recommendation-attribute-row").forEach((n) => {
     if (!l(n))
       return;

package/dist/extensions/Blocks/controlFactories.js

@@ -1,7 +1,7 @@
-import { TextAlignBuiltInControl as C, TextColorBuiltInControl as x, TextSizeBuiltInControl as T, TextStyleBuiltInControl as B, TextFontFamilyBuiltInControl as m, ButtonBackgroundColorBuiltInControl as d, TextPaddingsBuiltInControl as y, ImageSizeBuiltInControl as b, ImageMarginsBuiltInControl as I, ButtonAlignBuiltInControl as S, ButtonBorderBuiltInControl as A, ButtonBorderRadiusBuiltInControl as k, ButtonColorBuiltInControl as N, ButtonFontFamilyBuiltInControl as h, ButtonMarginsBuiltInControl as p, ButtonPaddingsBuiltInControl as $, ButtonTextBuiltInControl as q, ButtonTextSizeBuiltInControl as F, ButtonTextStyleAndFontColorBuiltInControl as v, ButtonFitToContainerBuiltInControl as R, TextLineSpacingBuiltInControl as M } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ImageSizeBuiltInControl as C, ImageMarginsBuiltInControl as x, TextAlignBuiltInControl as T, TextColorBuiltInControl as B, TextSizeBuiltInControl as m, TextStyleBuiltInControl as y, TextFontFamilyBuiltInControl as b, ButtonBackgroundColorBuiltInControl as d, TextPaddingsBuiltInControl as I, ButtonAlignBuiltInControl as S, ButtonBorderBuiltInControl as A, ButtonBorderRadiusBuiltInControl as k, ButtonColorBuiltInControl as N, ButtonFontFamilyBuiltInControl as h, ButtonMarginsBuiltInControl as p, ButtonPaddingsBuiltInControl as $, ButtonTextBuiltInControl as q, ButtonTextSizeBuiltInControl as F, ButtonTextStyleAndFontColorBuiltInControl as v, ButtonFitToContainerBuiltInControl as R, TextLineSpacingBuiltInControl as M } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 const O = "buttonTextStyleForm", a = "backgroundColor", g = /* @__PURE__ */ new Set(["", "transparent", "rgba(0, 0, 0, 0)"]), _ = ["elementColor", a], E = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 function P(o, e, r) {
-  return class extends C {
+  return class extends T {
     getId() {
       return o;
     }
@@ -14,7 +14,7 @@ function P(o, e, r) {
   };
 }
 function H(o, e, r) {
-  return class extends x {
+  return class extends B {
     getId() {
       return o;
     }
@@ -27,7 +27,7 @@ function H(o, e, r) {
   };
 }
 function U(o, e, r) {
-  return class extends T {
+  return class extends m {
     getId() {
       return o;
     }
@@ -40,7 +40,7 @@ function U(o, e, r) {
   };
 }
 function Y(o, e, r) {
-  return class extends B {
+  return class extends y {
     getId() {
       return o;
     }
@@ -53,7 +53,7 @@ function Y(o, e, r) {
   };
 }
 function G(o, e, r) {
-  return class extends m {
+  return class extends b {
     getId() {
       return o;
     }
@@ -149,7 +149,7 @@ function w(o, e) {
   };
 }
 function W(o, e, r) {
-  return class extends y {
+  return class extends I {
     getId() {
       return o;
     }
@@ -318,7 +318,7 @@ function it(o, e, r) {
   };
 }
 function lt(o, e, r) {
-  return class extends b {
+  return class extends C {
     getId() {
       return o;
     }
@@ -333,7 +333,7 @@ function lt(o, e, r) {
   };
 }
 function ct(o, e, r) {
-  return class extends I {
+  return class extends x {
     getId() {
       return o;
     }

package/dist/guido.css

@@ -1 +1 @@
-@charset "UTF-8";.auth-error-modal[data-v-b4d7ae51]{position:relative;z-index:145}.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-b8f24f34] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-baf7a5dd]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.validation-error-list[data-v-e48cebe9]{gap:16px}.validation-error-row[data-v-e48cebe9]{gap:8px;padding:24px;border:1px solid #E1E1E1;border-radius:8px}.validation-error-row__icon[data-v-e48cebe9]{flex-shrink:0;font-size:24px;line-height:0}.validation-error-row__text[data-v-e48cebe9]{font-size:13px;line-height:16px;color:#292929;word-break:break-word}.guido-editor__wrapper[data-v-c5146fc5]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-c5146fc5]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-c5146fc5]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-19d8cb42] .vueperslides__bullets,[data-v-ec2027ff] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-skeleton{width:100%!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}.legacy-strategy-updated-modal[data-v-da2225a1]{position:relative;z-index:145}
+@charset "UTF-8";.auth-error-modal[data-v-b4d7ae51]{position:relative;z-index:145}.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-b8f24f34] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-baf7a5dd]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.validation-error-list[data-v-e48cebe9]{gap:16px}.validation-error-row[data-v-e48cebe9]{gap:8px;padding:24px;border:1px solid #E1E1E1;border-radius:8px}.validation-error-row__icon[data-v-e48cebe9]{flex-shrink:0;font-size:24px;line-height:0}.validation-error-row__text[data-v-e48cebe9]{font-size:13px;line-height:16px;color:#292929;word-break:break-word}.guido-editor__wrapper[data-v-65036aaf]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-65036aaf]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-65036aaf]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-19d8cb42] .vueperslides__bullets,[data-v-ec2027ff] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-skeleton{width:100%!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}.legacy-strategy-updated-modal[data-v-da2225a1]{position:relative;z-index:145}

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

@@ -59,6 +59,8 @@ export declare class RecommendationBlock extends Block {
      * @param node - The block node being deleted
      */
     onDelete(node: ImmutableHtmlNode): void;
+    private _ensureMobileFitRule;
+    private _syncHeightBound;
     /**
      * Warns (dark advisory toaster) when the design holds more than one live
      * recommendation block. Triggered from the user-add paths only (fresh drop

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

@@ -3,35 +3,50 @@
  *
  * Controls for styling the product image element in recommendation cards.
  */
+import type { CssNodeModifier, HtmlNodeModifier, ImmutableCssNode, ImmutableHtmlNode, TemplateModifier } from '@stripoinc/ui-editor-extensions';
+import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
+interface FitRuleApi {
+    getDocumentRootCssNode: () => ImmutableCssNode | null;
+    getDocumentModifier: () => TemplateModifier<HtmlNodeModifier, CssNodeModifier>;
+}
+export declare function ensureMobileFitRule(api: FitRuleApi, block: ImmutableHtmlNode): void;
+export declare function syncHeightBound(api: Pick<FitRuleApi, 'getDocumentModifier'>, block: ImmutableHtmlNode, blockKey: string): void;
+export declare function forgetHeightBounds(blockKey?: string): void;
+declare const SizeControl_base: {
+    new (): {
+        getId(): string;
+        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+        getParentControlId(): string;
+        api: import("@stripoinc/ui-editor-extensions").ControlApi;
+        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+        getModificationDescription(): ModificationDescription | undefined;
+        getAdditionalModifications(_root: ImmutableHtmlNode): TemplateModifier<HtmlNodeModifier, CssNodeModifier> | undefined;
+        isVisible(_node: ImmutableHtmlNode): boolean;
+        getElementLockCategory(): import("@stripoinc/ui-editor-extensions").ElementLockCategory | undefined;
+    };
+};
+declare class SizeControl extends SizeControl_base {
+    getAdditionalModifications(root: ImmutableHtmlNode): TemplateModifier<HtmlNodeModifier, CssNodeModifier> | undefined;
+    private getFitStyles;
+}
 /**
  * Grouped Image Controls
  * Use this object for cleaner imports in extension.ts
  */
 export declare const ImageControls: {
-    readonly size: {
-        new (): {
-            getId(): string;
-            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
-            getParentControlId(): string;
-            api: import("@stripoinc/ui-editor-extensions").ControlApi;
-            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
-            getElementLockCategory(): import("@stripoinc/ui-editor-extensions").ElementLockCategory | undefined;
-        };
-    };
+    readonly size: typeof SizeControl;
     readonly margins: {
         new (): {
             getId(): string;
-            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
             getParentControlId(): string;
             api: import("@stripoinc/ui-editor-extensions").ControlApi;
             getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+            getModificationDescription(): ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): TemplateModifier<HtmlNodeModifier, CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
             getElementLockCategory(): import("@stripoinc/ui-editor-extensions").ElementLockCategory | undefined;
         };
     };
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.21.0-beta.ed1d11f",
+  "version": "3.21.0-beta.f545026",
   "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",