npm - @useinsider/guido - Versions diffs - 3.7.2-beta.3cec1a4 → 3.7.2-beta.7b4f9d0 - Mend

@useinsider/guido 3.7.2-beta.3cec1a4 → 3.7.2-beta.7b4f9d0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/config/compiler/htmlCompilerRules.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const a = [
+const l = [
   {
     id: "fix-url-encoding-start",
     description: "Replace {%22 with %7B%22 to fix URL encoding",
@@ -111,13 +111,13 @@ const a = [
         <w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail>
     </w:WordDocument>
 </xml><![endif]-->`
-      ], s = /<head>([\S\s]*)<\/head>/, o = new RegExp(s);
+      ], i = /<head>([\S\s]*)<\/head>/, o = new RegExp(i);
       if (!e.match(o))
         return e;
-      let i = e;
+      let s = e;
       return t.forEach((r) => {
-        i = i.replace("</head>", `${r}</head>`);
-      }), i;
+        s = s.replace("</head>", `${r}</head>`);
+      }), s;
     },
     priority: 30
   },
@@ -138,8 +138,36 @@ const a = [
     replacement: "email-static.useinsider.com",
     replaceAll: !0,
     priority: 41
+  },
+  {
+    id: "convert-rgb-to-hex",
+    // SD-142395: rgb()/6-digit hex are verbose; hex/3-digit shorthand is byte-identical
+    // to render. Shrinks the whole email to stay under Gmail's ~102KB clip threshold.
+    // Leaves rgba()/8-digit hex (alpha) untouched.
+    description: "Convert rgb() colors to hex and collapse 6-digit hex to shorthand",
+    type: "custom",
+    processor: (e) => {
+      const t = (i) => i.toString(16).padStart(2, "0");
+      return e.replace(/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/gi, (i, o, n, s) => {
+        const [r, a, c] = [Number(o), Number(n), Number(s)];
+        return r > 255 || a > 255 || c > 255 ? i : `#${t(r)}${t(a)}${t(c)}`;
+      }).replace(/#([0-9a-f])\1([0-9a-f])\2([0-9a-f])\3\b/gi, "#$1$2$3");
+    },
+    priority: 44
+  },
+  {
+    id: "remove-contenteditable",
+    // SD-142395: contenteditable is a Stripo editor flag with zero effect in a
+    // delivered email. Stripping it globally shaves bytes off every text block,
+    // helping the whole email stay under Gmail's ~102KB clip threshold.
+    description: "Strip editor-only contenteditable attributes from compiled output",
+    type: "regex",
+    pattern: '\\s+contenteditable="[^"]*"',
+    replacement: "",
+    flags: "g",
+    priority: 45
   }
 ];
 export {
-  a as defaultHtmlCompilerRules
+  l as defaultHtmlCompilerRules
 };

package/dist/config/compiler/recommendationCompilerRules.js CHANGED Viewed

@@ -1,16 +1,16 @@
-import { useRecommendation as h } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as N, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as y, HTML as C } from "../../enums/recommendation.js";
-import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
-const w = [
+import { useRecommendation as N } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as M, REGEX as d, VerticalOrientation as $, CSS as n, ATTRIBUTES as p, CONDITIONS as T, HTML as g } from "../../enums/recommendation.js";
+import { prepareRecommendationBlocks as O } from "./utils/recommendationCompilerUtils.js";
+const U = [
   {
     id: "replace-images-with-variable-names",
     description: "Replacing dummy images with variable names in recommendation module",
     type: "custom",
-    processor: (c) => {
-      let e = c;
-      return Object.entries(N).forEach(([, l]) => {
-        Object.entries(l).forEach(([n, s]) => {
-          e = e.replaceAll(s, `{{${n}}}`);
+    processor: (o) => {
+      let e = o;
+      return Object.entries(M).forEach(([, r]) => {
+        Object.entries(r).forEach(([t, i]) => {
+          e = e.replaceAll(i, `{{${t}}}`);
         });
       }), e;
     },
@@ -41,21 +41,21 @@ const w = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (c) => {
-      const { calculateCardWidth: e, getRecommendationCampaignData: l } = h();
-      let n = c;
-      const s = n.match(T.ID);
-      if (s) {
-        const a = [];
-        if (s.forEach((i) => {
-          const u = /recommendation-id="(.*?)"/i.exec(i), _ = u ? u[1].trim() : "", R = l(_);
-          R.textTrimming && R.orientation === M && a.push(e(R));
-        }), a.length) {
-          const i = `width:${Math.min(...a)}px!important;`;
-          n = n.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+    processor: (o) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: r } = N();
+      let t = o;
+      const i = t.match(d.ID);
+      if (i) {
+        const s = [];
+        if (i.forEach((c) => {
+          const m = /recommendation-id="(.*?)"/i.exec(c), E = m ? m[1].trim() : "", u = r(E);
+          u.textTrimming && u.orientation === $ && s.push(e(u));
+        }), s.length) {
+          const c = `width:${Math.min(...s)}px!important;`;
+          t = t.replace(n.REGULAR_NAME_HEIGHT, `${n.TRIMMED_NAME_HEIGHT} ${c} ${n.ELLIPSIS}`).replace(n.REGULAR_NAME_CONTAINER_HEIGHT, n.TRIMMED_NAME_CONTAINER_CSS).replace(n.RESPONSIVE_NAME_SIZE, `${n.RESPONSIVE_NAME_HEIGHT} ${c} ${n.ELLIPSIS}`).replace(n.RESPONSIVE_NAME_CONTAINER_HEIGHT, n.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return n;
+      return t;
     },
     priority: 52
   },
@@ -63,34 +63,34 @@ const w = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (c) => x(c),
+    processor: (o) => O(o),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (c) => {
-      let e = c;
-      const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = h();
-      return l !== null && l.forEach((s) => {
-        const a = s.match(T.CUSTOM_FIELD);
-        if (!a)
+    processor: (o) => {
+      let e = o;
+      const r = e.match(d.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: t } = N();
+      return r !== null && r.forEach((i) => {
+        const s = i.match(d.CUSTOM_FIELD);
+        if (!s)
           return;
-        const [i] = a, u = i.match(T.CUSTOM_FIELD_INDEXES_PART), _ = i.match(T.CUSTOM_FIELD_NAME_PART), R = s.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!u || !_ || !R)
+        const [c] = s, m = c.match(d.CUSTOM_FIELD_INDEXES_PART), E = c.match(d.CUSTOM_FIELD_NAME_PART), u = i.match(d.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!m || !E || !u)
           return;
-        const [b] = u, [I] = _, [d] = R, o = I.substring(1, I.length - 2), r = d.match(T.COMPOSITION) !== null;
-        let t = i;
-        if (r) {
-          const S = b.substring(2, b.length - 3), m = n(S);
-          o === A.OMNIBUS_PRICE && (m.priceBeforeTextValue && (t = `${m.priceBeforeTextValue}${t}`), m.priceAfterTextValue && (t = `${t}${m.priceAfterTextValue}`)), o === A.OMNIBUS_DISCOUNT && (m.discountBeforeTextValue && (t = `${m.discountBeforeTextValue}${t}`), m.discountAfterTextValue && (t = `${t}${m.discountAfterTextValue}`));
+        const [A] = m, [I] = E, [R] = u, b = I.substring(1, I.length - 2), S = R.match(d.COMPOSITION) !== null;
+        let a = c;
+        if (S) {
+          const f = A.substring(2, A.length - 3), l = t(f);
+          b === p.OMNIBUS_PRICE && (l.priceBeforeTextValue && (a = `${l.priceBeforeTextValue}${a}`), l.priceAfterTextValue && (a = `${a}${l.priceAfterTextValue}`)), b === p.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (a = `${l.discountBeforeTextValue}${a}`), l.discountAfterTextValue && (a = `${a}${l.discountAfterTextValue}`));
         }
-        const p = b.substring(2);
-        let f = "";
-        o in y.IF && (f = y.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${p}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${p}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${p}${A.OMNIBUS_PRICE}`));
-        const g = `${d}${t}${C.PARAGRAPH_END_TAG}`, $ = `${f}${r ? g : s}${y.ELSE}${d}${C.PARAGRAPH_END_TAG}${y.END_IF}`;
-        e = e.replace(s, $);
+        const _ = A.substring(2);
+        let y = "";
+        b in T.IF && (y = T.IF[b].replaceAll(`{${p.DISCOUNT}}`, `${_}${p.DISCOUNT}`).replaceAll(`{${p.OMNIBUS_DISCOUNT}}`, `${_}${p.OMNIBUS_DISCOUNT}`).replaceAll(`{${p.OMNIBUS_PRICE}}`, `${_}${p.OMNIBUS_PRICE}`));
+        const C = `${R}${a}${g.PARAGRAPH_END_TAG}`, h = `${y}${S ? C : i}${T.ELSE}${R}${g.PARAGRAPH_END_TAG}${T.END_IF}`;
+        e = e.replace(i, h);
       }), e;
     },
     priority: 53
@@ -110,11 +110,11 @@ const w = [
     type: "custom",
     // Scoped to REC_START/REC_END markers so it cannot strip `product-attr`
     // from Items block elements, which the items compiler rule depends on.
-    processor: (c) => {
+    processor: (o) => {
       const e = /\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"/g;
-      return c.replace(
+      return o.replace(
         /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
-        (l, n) => `<!--REC_START-->${n.replace(e, "")}<!--REC_END-->`
+        (r, t) => `<!--REC_START-->${t.replace(e, "")}<!--REC_END-->`
       );
     },
     priority: 55
@@ -123,8 +123,8 @@ const w = [
     id: "strip-unused-recommendation-classes",
     description: "Remove CSS classes not referenced by any style rule from recommendation elements",
     type: "custom",
-    processor: (c) => {
-      let e = c.replace(
+    processor: (o) => {
+      let e = o.replace(
         / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
         ""
       );
@@ -136,8 +136,8 @@ const w = [
     id: "remove-empty-mobile-layout-artifacts",
     description: "Remove empty mobile container rows and unused mobile layout CSS",
     type: "custom",
-    processor: (c) => {
-      let e = c;
+    processor: (o) => {
+      let e = o;
       return e = e.replace(
         /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
         ""
@@ -146,75 +146,50 @@ const w = [
         ""
       ), e = e.replace(
         /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
-        (l, n) => {
-          const s = n.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
-          return s.every((u) => a.test(u)) ? "" : l;
+        (r, t) => {
+          const i = t.match(/[^{}]+\{[^{}]*\}/g) || [], s = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return i.every((m) => s.test(m)) ? "" : r;
         }
       )), e;
     },
     priority: 57
   },
   {
-    id: "deduplicate-inline-styles",
-    description: "Replace repeated inline styles with CSS class references within recommendation blocks",
+    id: "protect-gmail-button-link-color",
+    // Gmail overrides link colors with `.ii a[href] { color: #15c }`. Force
+    // `!important` on es-button anchor colors so the intended button text color
+    // wins. Kept INLINE (never moved into a <style> class) so it survives Gmail's
+    // clipping — "view entire message" strips <style> blocks but keeps inline styles.
+    // (SD-142395: split out of the removed deduplicate-inline-styles rule.)
+    description: "Force !important on es-button link color to defeat Gmail link-color override",
     type: "custom",
-    processor: (c) => {
-      const e = c.replace(
-        /<a\b[^>]*\bes-button\b[^>]*>/g,
-        (o) => o.replace(
-          /([;"]color:)([^;"]+)/g,
-          (r, t, p) => p.includes("!important") ? r : `${t}${p} !important`
-        )
-      ), l = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, n = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
-      let a = l.exec(e);
-      for (; a !== null; ) {
-        let o = n.exec(a[1]);
-        for (; o !== null; ) {
-          const [, r] = o;
-          s.set(r, (s.get(r) || 0) + 1), o = n.exec(a[1]);
-        }
-        n.lastIndex = 0, a = l.exec(e);
-      }
-      const i = /* @__PURE__ */ new Map(), u = [];
-      let _ = 0;
-      if (s.forEach((o, r) => {
-        if (!r.includes("v-text-anchor") && o >= 6) {
-          const t = `rc${_++}`, p = r.endsWith(";") ? r : `${r};`;
-          i.set(r, t), u.push(`.${t}{${p}}`);
-        }
-      }), i.size === 0) {
-        let o = e;
-        return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
-      }
-      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = (o, r) => `${o.slice(0, -1)} ${r}"`, I = /* @__PURE__ */ new Map();
-      i.forEach((o, r) => {
-        const t = R(r);
-        I.set(r, {
-          caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
-          caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
-        });
-      });
-      let d = e.replace("</style>", `${u.join("")}</style>`);
-      return d = d.replace(
-        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
-        (o, r) => {
-          let t = r;
-          return i.forEach((p, f) => {
-            const g = I.get(f);
-            t = t.replace(
-              g.caseA,
-              ($, S, m) => b(S, p) + m
-            ), t = t.replace(
-              g.caseB,
-              ($, S, m) => S + b(m, p)
-            ), t = t.replaceAll(` style="${f}"`, ` class="${p}"`);
-          }), t;
-        }
-      ), d = d.replaceAll("<!--REC_START-->", ""), d = d.replaceAll("<!--REC_END-->", ""), d;
-    },
+    processor: (o) => o.replace(
+      /<a\b[^>]*\bes-button\b[^>]*>/g,
+      (e) => e.replace(
+        /([;"]color:)([^;"]+)/g,
+        (r, t, i) => i.includes("!important") ? r : `${t}${i} !important`
+      )
+    ),
     priority: 58
+  },
+  {
+    id: "minify-recommendation-whitespace",
+    // SD-142395: shrink the compiled recommendation block to keep emails under
+    // Gmail's ~102KB clip threshold. The editor templates emit deeply-indented
+    // markup that the P48 DOMParser round-trip preserves, and nothing else in the
+    // pipeline minifies it. Scoped to REC_START/REC_END so it only touches
+    // recommendation markup, and strips those markers last (relocated here from the
+    // removed deduplicate-inline-styles rule). Render-critical styles are left inline
+    // rather than classed, so they survive Gmail clipping.
+    description: "Collapse whitespace inside recommendation blocks and strip boundary markers",
+    type: "custom",
+    processor: (o) => {
+      const e = (r) => r.replace(/>\s+</g, "><").replace(/<[^>]+>/g, (t) => t.replace(/\s+/g, " "));
+      return o.replace(/<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, (r, t) => e(t)).replaceAll("<!--REC_START-->", "").replaceAll("<!--REC_END-->", "");
+    },
+    priority: 99
   }
 ];
 export {
-  w as recommendationCompilerRules
+  U as recommendationCompilerRules
 };

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

@@ -48,11 +48,8 @@ class H extends D {
   allowInnerBlocksDND() {
     return !1;
   }
-  // A saved module carries its config in the esd-config blob, restored on
-  // re-drop by migrateFromDataAttributes; per-element styles ride the
-  // preserved inner HTML. (onCreated early-returns for re-drops, never clobbers.)
   canBeSavedAsModule() {
-    return !0;
+    return !1;
   }
   /**
    * Returns the template HTML for a new recommendation block.

package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js CHANGED Viewed

@@ -1,29 +1,29 @@
-var Q = Object.defineProperty;
-var Z = (p, g, t) => g in p ? Q(p, g, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[g] = t;
-var S = (p, g, t) => Z(p, typeof g != "symbol" ? g + "" : g, t);
-import { UIElementType as f, UEAttr as v, ModificationDescription as C } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as tt } from "../../../common-control.js";
-import { ATTR_PRODUCT_IMAGE as H, ATTR_PRODUCT_NAME as et, ATTR_PRODUCT_PRICE as rt, ATTR_PRODUCT_OLD_PRICE as ot, ATTR_PRODUCT_OMNIBUS_PRICE as st, ATTR_PRODUCT_OMNIBUS_DISCOUNT as it, ATTR_PRODUCT_BUTTON as U, ATTR_DATA_CUSTOM_ATTRIBUTES as F, ATTR_CUSTOM_PREFIX as d, BUILT_IN_DEFAULT_ATTRIBUTES as nt } from "../../constants/selectors.js";
-import { DEFAULT_COMPOSITION as P, DEFAULT_VISIBILITY as w } from "../../constants/defaultConfig.js";
-import { RecommendationConfigService as $ } from "../../services/configService.js";
+var J = Object.defineProperty;
+var Q = (p, _, t) => _ in p ? J(p, _, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[_] = t;
+var S = (p, _, t) => Q(p, typeof _ != "symbol" ? _ + "" : _, t);
+import { UIElementType as f, UEAttr as I, ModificationDescription as A } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as Z } from "../../../common-control.js";
+import { ATTR_PRODUCT_IMAGE as D, ATTR_PRODUCT_NAME as tt, ATTR_PRODUCT_PRICE as et, ATTR_PRODUCT_OLD_PRICE as rt, ATTR_PRODUCT_OMNIBUS_PRICE as ot, ATTR_PRODUCT_OMNIBUS_DISCOUNT as st, ATTR_PRODUCT_BUTTON as U, ATTR_DATA_CUSTOM_ATTRIBUTES as q, ATTR_CUSTOM_PREFIX as m, BUILT_IN_DEFAULT_ATTRIBUTES as it } from "../../constants/selectors.js";
+import { DEFAULT_COMPOSITION as P, DEFAULT_VISIBILITY as F } from "../../constants/defaultConfig.js";
+import { RecommendationConfigService as nt } from "../../services/configService.js";
 import { useRecommendationExtensionStore as lt } from "../../store/recommendation.js";
 import { ATTRIBUTE_CELL_CLASS as at, gridElementRenderer as ct, DEFAULT_CELL_PADDING as ut, buildFillerCell as dt } from "../../templates/grid/elementRenderer.js";
 import { listElementRenderer as mt } from "../../templates/list/elementRenderer.js";
-import { toDisplayName as ht, isDefaultAttribute as pt, toDisplayableAttributeValue as gt, buildElementRenderer as M } from "../../templates/utils.js";
+import { toDisplayName as ht, isDefaultAttribute as pt, toDisplayableAttributeValue as _t, buildElementRenderer as w } from "../../templates/utils.js";
 import { getTableDisplayValue as ft } from "../../utils/tagName.js";
-import { getCurrentLayout as _t } from "../main/utils.js";
-const bt = "ui-elements-recommendation-card-composition", A = ".recommendation-attribute-row", L = ".product-card-wrapper > tbody", V = ".product-info-cell > table > tbody", x = "data-card-composition", y = "data-attribute-type", N = "data-visibility", j = {
+import { getCurrentLayout as gt } from "../main/utils.js";
+const bt = "ui-elements-recommendation-card-composition", C = ".recommendation-attribute-row", L = ".product-card-wrapper > tbody", M = ".product-info-cell > table > tbody", V = "data-card-composition", y = "data-attribute-type", v = "data-visibility", x = {
   ADD_ATTRIBUTE: "addAttribute"
-}, _ = 5, R = "reorderIcon_", h = [
-  { key: H, label: "Product Image" },
-  { key: et, label: "Product Name" },
-  { key: rt, label: "Product Price" },
-  { key: ot, label: "Product Original Price" },
-  { key: st, label: "Omnibus Price" },
-  { key: it, label: "Omnibus Discount" },
+}, g = 5, E = "reorderIcon_", h = [
+  { key: D, label: "Product Image" },
+  { key: tt, label: "Product Name" },
+  { key: et, label: "Product Price" },
+  { key: rt, label: "Product Original Price" },
+  { key: ot, label: "Omnibus Price" },
+  { key: st, label: "Omnibus Discount" },
   { key: U, label: "Product Button" }
-], yt = new Set(h.map((p) => p.key)), T = "customAttr_", E = "deleteAttr_";
-class Ht extends tt {
+], yt = new Set(h.map((p) => p.key)), T = "customAttr_", R = "deleteAttr_";
+class Ut extends Z {
   constructor() {
     super(...arguments);
     S(this, "store", lt());
@@ -47,7 +47,7 @@ class Ht extends tt {
                 ${this._GuToggle(`visibility_${l.key}`)}
             </div>
         `).join(""), r = Array.from(
-      { length: _ },
+      { length: g },
       (l, u) => `
                 <div data-custom-select-key="${T}${u}" style="display: none;">
                     ${this._GuSelect({
@@ -57,13 +57,13 @@ class Ht extends tt {
       })}
                 </div>
             `
-    ).join(""), e = h.length + _, o = Array.from(
+    ).join(""), e = h.length + g, o = Array.from(
       { length: e },
       (l, u) => `
-                <div data-reorder-icon-key="${R}${u}" style="display: none;">
+                <div data-reorder-icon-key="${E}${u}" style="display: none;">
                     <${f.BUTTON}
                         class="drag-handle-btn flat-inline flat-white"
-                        ${v.BUTTON.name}="${R}${u}"
+                        ${I.BUTTON.name}="${E}${u}"
                     >
                         <${f.ICON}
                             src="reorder"
@@ -73,12 +73,12 @@ class Ht extends tt {
                 </div>
             `
     ).join(""), s = Array.from(
-      { length: _ },
+      { length: g },
       (l, u) => `
-                <div data-custom-delete-key="${E}${u}" style="display: none;">
+                <div data-custom-delete-key="${R}${u}" style="display: none;">
                     <${f.BUTTON}
                         class="custom-attr-delete flat-inline flat-white"
-                        ${v.BUTTON.name}="${E}${u}"
+                        ${I.BUTTON.name}="${R}${u}"
                     >
                         <${f.ICON}
                             src="delete"
@@ -89,15 +89,15 @@ class Ht extends tt {
             `
     ).join(""), i = "https://academy.insiderone.com/docs/new-editor-email-recommendation-block", n = this.api.translate(
       "Drag and drop the card elements to reorder them, adjust their visibility or add new attributes up to 5."
-    ), c = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
+    ), a = this.api.translate("For more information, you can"), c = this.api.translate("visit Academy");
     return `
             <div class="recommendation-controls-container" data-card-composition-control>
                 <div class="container">
                     <p class="card-composition-description">
                         ${n}
-                        ${c}
+                        ${a}
                         <!-- cspell:disable-next-line -->
-                        <a href="${i}" target="_blank" rel="noopener noreferrer">${a}</a>.
+                        <a href="${i}" target="_blank" rel="noopener noreferrer">${c}</a>.
                     </p>
                 </div>
@@ -120,7 +120,7 @@ class Ht extends tt {
                 <div class="orderable-list" data-composition-list></div>
                 ${this._GuButton({
-      name: j.ADD_ATTRIBUTE,
+      name: x.ADD_ATTRIBUTE,
       label: this.api.translate("Add Attribute"),
       id: "guido__btn-add-attribute"
     })}
@@ -149,7 +149,7 @@ class Ht extends tt {
         this._applyVisibilityToBlock(t.key, r);
       });
     });
-    for (let t = 0; t < _; t++) {
+    for (let t = 0; t < g; t++) {
       const r = `${T}${t}`, e = t;
       this.api.onValueChanged(r, (o) => {
         this._onCustomAttributeChanged(e, o);
@@ -162,42 +162,36 @@ class Ht extends tt {
   _readCompositionFromNode() {
     if (!this.currentNode || !("getAttribute" in this.currentNode))
       return [...P];
-    const t = this.currentNode.getAttribute(x);
-    if (t)
-      return t.split(",").filter(Boolean);
-    const { composition: r } = $.getConfig(this.currentNode);
-    return r != null && r.length ? [...r] : [...P];
+    const t = this.currentNode.getAttribute(V);
+    return t ? t.split(",").filter(Boolean) : [...P];
   }
   _readCustomAttributesFromNode() {
     if (!this.currentNode || !("getAttribute" in this.currentNode))
       return [];
-    const t = this.currentNode.getAttribute(F);
-    if (t)
-      try {
-        return JSON.parse(t);
-      } catch {
-        return [];
-      }
-    return this._readCompositionFromNode().filter((r) => r.startsWith(d)).map((r) => r.substring(d.length));
+    const t = this.currentNode.getAttribute(q);
+    if (!t)
+      return [];
+    try {
+      return JSON.parse(t);
+    } catch {
+      return [];
+    }
   }
   _readVisibilityFromRows() {
     if (!this.currentNode)
       return this._getDefaultVisibilities();
-    const t = Array.from(this.currentNode.querySelectorAll(A)), r = this._extractVisibilityFromRows(t);
-    if (Object.keys(r).length > 0)
-      return this._mergeWithDefaults(r);
-    const e = $.getConfig(this.currentNode).visibility;
-    return this._mergeWithDefaults({ ...e });
+    const t = Array.from(this.currentNode.querySelectorAll(C)), r = this._extractVisibilityFromRows(t);
+    return this._mergeWithDefaults(r);
   }
   _getDefaultVisibilities() {
-    return { ...w };
+    return { ...F };
   }
   _extractVisibilityFromRows(t) {
     const r = {};
     return t.forEach((e) => {
       if (!("getAttribute" in e))
         return;
-      const o = e.getAttribute(y), s = e.getAttribute(N);
+      const o = e.getAttribute(y), s = e.getAttribute(v);
       o && s !== null && (r[o] = this._parseVisibilityValue(s));
     }), r;
   }
@@ -205,7 +199,7 @@ class Ht extends tt {
     return t === "1" || t === "true";
   }
   _mergeWithDefaults(t) {
-    return Object.entries(w).forEach(([r, e]) => {
+    return Object.entries(F).forEach(([r, e]) => {
       r in t || (t[r] = e);
     }), t;
   }
@@ -229,19 +223,19 @@ class Ht extends tt {
       return !1;
     const s = new Set(r);
     let i = 0, n = 0;
-    const c = t.map((a) => {
-      if (yt.has(a)) {
-        const l = h.find((u) => u.key === a);
+    const a = t.map((c) => {
+      if (yt.has(c)) {
+        const l = h.find((u) => u.key === c);
         return this._createBuiltInItemHtml(l, n++);
       }
-      if (a.startsWith(d)) {
-        const l = a.substring(d.length);
+      if (c.startsWith(m)) {
+        const l = c.substring(m.length);
         if (s.has(l))
-          return this._createCustomItemHtml(a, i++, n++);
+          return this._createCustomItemHtml(c, i++, n++);
       }
       return "";
     }).join("");
-    return this._rescueTogglesToStore(e), this._rescueSelectsToStore(e), this._rescueDeleteButtonsToStore(e), this._rescueReorderIconsToStore(e), o.innerHTML = c, this._moveTogglesIntoItems(e), this._moveSelectsIntoItems(e, r.length), this._moveDeleteButtonsIntoItems(e, r.length), this._moveReorderIconsIntoItems(e, n), !0;
+    return this._rescueTogglesToStore(e), this._rescueSelectsToStore(e), this._rescueDeleteButtonsToStore(e), this._rescueReorderIconsToStore(e), o.innerHTML = a, this._moveTogglesIntoItems(e), this._moveSelectsIntoItems(e, r.length), this._moveDeleteButtonsIntoItems(e, r.length), this._moveReorderIconsIntoItems(e, n), !0;
   }
   /**
    * Attempts to reorder existing orderable-item elements to match the composition order.
@@ -253,27 +247,27 @@ class Ht extends tt {
     const e = Array.from(t.querySelectorAll(".orderable-item"));
     if (e.length !== r.length)
       return !1;
-    const o = e.map((a) => a.dataset.key).filter(Boolean);
+    const o = e.map((c) => c.dataset.key).filter(Boolean);
     if (o.length !== r.length)
       return !1;
     const s = [...o].sort().join(","), i = [...r].sort().join(",");
-    if (s !== i || r.some((a) => a.startsWith(d)))
+    if (s !== i || r.some((c) => c.startsWith(m)))
       return !1;
     const n = /* @__PURE__ */ new Map();
-    e.forEach((a) => {
-      const { key: l } = a.dataset;
+    e.forEach((c) => {
+      const { key: l } = c.dataset;
       if (l) {
         const u = n.get(l) || [];
-        u.push(a), n.set(l, u);
+        u.push(c), n.set(l, u);
       }
     });
-    const c = /* @__PURE__ */ new Map();
-    return r.forEach((a) => {
-      const l = n.get(a);
+    const a = /* @__PURE__ */ new Map();
+    return r.forEach((c) => {
+      const l = n.get(c);
       if (!l)
         return;
-      const u = c.get(a) || 0;
-      c.set(a, u + 1), l[u] && t.appendChild(l[u]);
+      const u = a.get(c) || 0;
+      a.set(c, u + 1), l[u] && t.appendChild(l[u]);
     }), !0;
   }
   _createBuiltInItemHtml(t, r) {
@@ -322,7 +316,7 @@ class Ht extends tt {
     t.length !== 0 && setTimeout(() => {
       t.forEach((r, e) => {
         const o = `${T}${e}`, s = this._getSelectOptions(r, t);
-        this.api.setUIEAttribute(o, v.SELECTPICKER.items, s), this.api.updateValues({ [o]: r });
+        this.api.setUIEAttribute(o, I.SELECTPICKER.items, s), this.api.updateValues({ [o]: r });
       });
     }, 0);
   }
@@ -372,7 +366,7 @@ class Ht extends tt {
    * Same rescue pattern as _rescueTogglesToStore — prevents innerHTML from destroying them.
    */
   _rescueSelectsToStore(t) {
-    for (let r = 0; r < _; r++) {
+    for (let r = 0; r < g; r++) {
       const e = `${T}${r}`, o = t.querySelector(`[data-custom-select-key="${e}"]`), s = t.querySelector(`[data-custom-select-slot="${r}"]`);
       if (s) {
         const i = s.querySelector("ue-select");
@@ -386,7 +380,7 @@ class Ht extends tt {
    */
   _moveDeleteButtonsIntoItems(t, r) {
     for (let e = 0; e < r; e++) {
-      const o = `${E}${e}`, s = t.querySelector(`[data-custom-delete-key="${o}"]`), i = t.querySelector(`[data-custom-delete-slot="${e}"]`);
+      const o = `${R}${e}`, s = t.querySelector(`[data-custom-delete-key="${o}"]`), i = t.querySelector(`[data-custom-delete-slot="${e}"]`);
       if (s && i) {
         const n = s.querySelector("ue-button");
         n && i.appendChild(n);
@@ -398,8 +392,8 @@ class Ht extends tt {
    * Same rescue pattern as _rescueSelectsToStore — prevents innerHTML from destroying them.
    */
   _rescueDeleteButtonsToStore(t) {
-    for (let r = 0; r < _; r++) {
-      const e = `${E}${r}`, o = t.querySelector(`[data-custom-delete-key="${e}"]`), s = t.querySelector(`[data-custom-delete-slot="${r}"]`);
+    for (let r = 0; r < g; r++) {
+      const e = `${R}${r}`, o = t.querySelector(`[data-custom-delete-key="${e}"]`), s = t.querySelector(`[data-custom-delete-slot="${r}"]`);
       if (s) {
         const i = s.querySelector("ue-button");
         i && o && o.appendChild(i);
@@ -412,7 +406,7 @@ class Ht extends tt {
    */
   _moveReorderIconsIntoItems(t, r) {
     for (let e = 0; e < r; e++) {
-      const o = `${R}${e}`, s = t.querySelector(`[data-reorder-icon-key="${o}"]`), i = t.querySelector(`[data-reorder-icon-slot="${e}"]`);
+      const o = `${E}${e}`, s = t.querySelector(`[data-reorder-icon-key="${o}"]`), i = t.querySelector(`[data-reorder-icon-slot="${e}"]`);
       if (s && i) {
         const n = s.querySelector("ue-button");
         n && i.appendChild(n);
@@ -424,9 +418,9 @@ class Ht extends tt {
    * Same rescue pattern as _rescueDeleteButtonsToStore — prevents innerHTML from destroying them.
    */
   _rescueReorderIconsToStore(t) {
-    const r = h.length + _;
+    const r = h.length + g;
     for (let e = 0; e < r; e++) {
-      const o = `${R}${e}`, s = t.querySelector(`[data-reorder-icon-key="${o}"]`), i = t.querySelector(`[data-reorder-icon-slot="${e}"]`);
+      const o = `${E}${e}`, s = t.querySelector(`[data-reorder-icon-key="${o}"]`), i = t.querySelector(`[data-reorder-icon-slot="${e}"]`);
       if (i) {
         const n = i.querySelector("ue-button");
         n && s && s.appendChild(n);
@@ -450,24 +444,24 @@ class Ht extends tt {
   _setupDragAndDrop(t, r) {
     let e = null, o = null;
     t.addEventListener("dragstart", (s) => {
-      var c;
+      var a;
       const n = s.target.closest(".orderable-item");
-      n && (e = n, n.classList.add("dragging"), (c = s.dataTransfer) == null || c.setData("text/plain", n.dataset.key || ""));
+      n && (e = n, n.classList.add("dragging"), (a = s.dataTransfer) == null || a.setData("text/plain", n.dataset.key || ""));
     }, { signal: r }), t.addEventListener("dragend", () => {
       e && e.classList.remove("dragging"), e = null, o == null || o.classList.remove("drag-over"), o = null;
     }, { signal: r }), t.addEventListener("dragover", (s) => {
       s.preventDefault();
-      const n = s.target.closest(".orderable-item"), c = n && n !== e ? n : null;
-      c !== o && (o == null || o.classList.remove("drag-over"), o = c, o == null || o.classList.add("drag-over"));
+      const n = s.target.closest(".orderable-item"), a = n && n !== e ? n : null;
+      a !== o && (o == null || o.classList.remove("drag-over"), o = a, o == null || o.classList.add("drag-over"));
     }, { signal: r }), t.addEventListener("drop", (s) => {
       s.preventDefault();
       const n = s.target.closest(".orderable-item");
       if (!n || !e || n === e)
         return;
-      const c = n.getBoundingClientRect(), a = c.top + c.height / 2;
-      s.clientY < a ? t.insertBefore(e, n) : t.insertBefore(e, n.nextSibling), o == null || o.classList.remove("drag-over"), o = null, e.classList.remove("dragging");
-      const u = t.querySelectorAll(".orderable-item"), m = Array.from(u).map((b) => b.dataset.key).filter(Boolean);
-      this._onReorder(m), e = null;
+      const a = n.getBoundingClientRect(), c = a.top + a.height / 2;
+      s.clientY < c ? t.insertBefore(e, n) : t.insertBefore(e, n.nextSibling), o == null || o.classList.remove("drag-over"), o = null, e.classList.remove("dragging");
+      const u = t.querySelectorAll(".orderable-item"), d = Array.from(u).map((b) => b.dataset.key).filter(Boolean);
+      this._onReorder(d), e = null;
     }, { signal: r });
   }
   _setupDeleteHandler(t, r) {
@@ -483,7 +477,7 @@ class Ht extends tt {
   // Actions (Add, Delete, Reorder)
   // ========================================================================
   _onAddAttribute(t, r) {
-    const e = `${d}${t}`, o = this._readCompositionFromNode();
+    const e = `${m}${t}`, o = this._readCompositionFromNode();
     o.push(e);
     const s = [...this._readCustomAttributesFromNode(), t];
     this._updateBothAttributes(o, s), this._injectCustomAttributeHtml(t, r, e, o), this._renderOrderableItems(o, s), this._initializeCustomSelects(s), this._updateAddButtonState();
@@ -496,7 +490,7 @@ class Ht extends tt {
     const r = this._readCustomAttributesFromNode();
     if (r[t] === void 0)
       return;
-    const o = this._readCompositionFromNode(), s = this._findNthCustomKeyIndex(o, t), i = o.filter((c, a) => a !== s), n = r.filter((c, a) => a !== t);
+    const o = this._readCompositionFromNode(), s = this._findNthCustomKeyIndex(o, t), i = o.filter((a, c) => c !== s), n = r.filter((a, c) => c !== t);
     this._updateBothAttributes(i, n), this._removeCustomAttributeHtml(i), this._renderOrderableItems(i, n), this._initializeCustomSelects(n), this._updateAddButtonState();
   }
   /**
@@ -507,13 +501,13 @@ class Ht extends tt {
     const e = this._readCustomAttributesFromNode(), o = e[t];
     if (o === void 0 || o === r)
       return;
-    const s = `${d}${r}`, i = this._readCompositionFromNode(), n = this._findNthCustomKeyIndex(i, t);
+    const s = `${m}${r}`, i = this._readCompositionFromNode(), n = this._findNthCustomKeyIndex(i, t);
     n !== -1 && (i[n] = s), e[t] = r;
-    const c = this._getDisplayNameForAttribute(r);
-    this._updateBothAttributes(i, e), this._injectCustomAttributeHtml(r, c, s, i), this._renderOrderableItems(i, e), this._initializeCustomSelects(e);
+    const a = this._getDisplayNameForAttribute(r);
+    this._updateBothAttributes(i, e), this._injectCustomAttributeHtml(r, a, s, i), this._renderOrderableItems(i, e), this._initializeCustomSelects(e);
   }
   _onReorder(t) {
-    const r = t.filter((e) => e.startsWith(d)).map((e) => e.substring(d.length));
+    const r = t.filter((e) => e.startsWith(m)).map((e) => e.substring(m.length));
     this.reorderInProgress = !0;
     try {
       this._updateBothAttributes(t, r), this._getCurrentLayout() === "grid" && this._reorderProductAttributes(t);
@@ -534,58 +528,58 @@ class Ht extends tt {
     const s = this.currentNode.querySelectorAll(L);
     if (!(s != null && s.length))
       return;
-    const i = $.getConfig(this.currentNode), c = `0 ${Math.floor(i.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
+    const i = nt.getConfig(this.currentNode), a = `0 ${Math.floor(i.columnSpacing / 2)}px`, c = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
     let u = 0;
-    s.forEach((m) => {
-      var k;
-      const b = m.querySelector(A), I = ((k = b == null ? void 0 : b.querySelectorAll(`.${at}`)) == null ? void 0 : k.length) || 1, B = (100 / I).toFixed(2), { bgStyle: W, bgAttr: K } = this._extractSegmentBgFromCard(m), O = l > 0 ? Math.min(I, l - u) : I, z = o.map((q) => {
-        if (q === e) {
-          const G = Array.from(
+    s.forEach((d) => {
+      var H;
+      const b = d.querySelector(C), $ = ((H = b == null ? void 0 : b.querySelectorAll(`.${at}`)) == null ? void 0 : H.length) || 1, B = (100 / $).toFixed(2), { bgStyle: j, bgAttr: W } = this._extractSegmentBgFromCard(d), O = l > 0 ? Math.min($, l - u) : $, K = o.map((k) => {
+        if (k === e) {
+          const z = Array.from(
             { length: O },
-            (Ct, X) => {
-              const J = this._resolveAttributeContent(
+            (At, Y) => {
+              const X = this._resolveAttributeContent(
                 t,
                 r,
-                u + X
+                u + Y
               );
               return this._getGridCellHtml(
                 t,
-                J,
+                X,
                 B,
+                j,
                 W,
-                K,
-                c
+                a
               );
             }
-          ).join(""), Y = dt(B, c).repeat(I - O);
-          return `<tr class="recommendation-attribute-row" ${y}="${e}" ${N}="1">${G}${Y}</tr>`;
+          ).join(""), G = dt(B, a).repeat($ - O);
+          return `<tr class="recommendation-attribute-row" ${y}="${e}" ${v}="1">${z}${G}</tr>`;
         }
-        const D = m.querySelector(
-          `${A}[${y}="${q}"]`
+        const N = d.querySelector(
+          `${C}[${y}="${k}"]`
         );
-        return D && "getOuterHTML" in D ? D.getOuterHTML() : "";
+        return N && "getOuterHTML" in N ? N.getOuterHTML() : "";
       }).join("");
-      u += O, l > 0 && u >= l && (u = 0), a.modifyHtml(m).setInnerHtml(z);
-    }), a.apply(new C(`${this.api.translate("Add custom attribute")}: ${r}`));
+      u += O, l > 0 && u >= l && (u = 0), c.modifyHtml(d).setInnerHtml(K);
+    }), c.apply(new A(`${this.api.translate("Add custom attribute")}: ${r}`));
   }
   _injectListAttributeRow(t, r, e, o) {
-    const s = this.currentNode.querySelectorAll(V);
+    const s = this.currentNode.querySelectorAll(M);
     if (!(s != null && s.length))
       return;
-    const i = o.filter((c) => c !== H && c !== U), n = this.api.getDocumentModifier();
-    s.forEach((c, a) => {
+    const i = o.filter((a) => a !== D && a !== U), n = this.api.getDocumentModifier();
+    s.forEach((a, c) => {
       const l = i.map((u) => {
         if (u === e) {
-          const b = this._resolveAttributeContent(t, r, a);
+          const b = this._resolveAttributeContent(t, r, c);
           return this._getListRowHtml(t, b, e);
         }
-        const m = c.querySelector(
-          `${A}[${y}="${u}"]`
+        const d = a.querySelector(
+          `${C}[${y}="${u}"]`
         );
-        return m && "getOuterHTML" in m ? m.getOuterHTML() : "";
+        return d && "getOuterHTML" in d ? d.getOuterHTML() : "";
       }).join("");
-      n.modifyHtml(c).setInnerHtml(l);
-    }), n.apply(new C(`${this.api.translate("Add custom attribute")}: ${r}`));
+      n.modifyHtml(a).setInnerHtml(l);
+    }), n.apply(new A(`${this.api.translate("Add custom attribute")}: ${r}`));
   }
   /**
    * Removes a custom attribute by rebuilding product card content without it.
@@ -602,13 +596,13 @@ class Ht extends tt {
         e.modifyHtml(s).setInnerHtml(i);
       });
     } else {
-      const o = t.filter((i) => i !== H && i !== U), s = this.currentNode.querySelectorAll(V);
+      const o = t.filter((i) => i !== D && i !== U), s = this.currentNode.querySelectorAll(M);
       s == null || s.forEach((i) => {
         const n = this._buildCompositionHtml(i, o);
         e.modifyHtml(i).setInnerHtml(n);
       });
     }
-    e.apply(new C(this.api.translate("Remove custom attribute")));
+    e.apply(new A(this.api.translate("Remove custom attribute")));
   }
   // ========================================================================
   // DOM Mutation (Block Root Attributes, Reorder)
@@ -621,13 +615,7 @@ class Ht extends tt {
    * producing a flicker on the custom attribute dropdowns.
    */
   _updateBothAttributes(t, r) {
-    if (!this.currentNode)
-      return;
-    const e = {
-      ...$.getConfig(this.currentNode),
-      composition: t
-    };
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(x, t.join(",")).setAttribute(F, JSON.stringify(r)).setNodeConfig(e).apply(new C(this.api.translate("Update card composition")));
+    this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(V, t.join(",")).setAttribute(q, JSON.stringify(r)).apply(new A(this.api.translate("Update card composition")));
   }
   /**
    * Reorders attribute rows within each product card based on composition order.
@@ -643,7 +631,7 @@ class Ht extends tt {
     r.forEach((o) => {
       const s = this._buildCompositionHtml(o, t);
       e.modifyHtml(o).setInnerHtml(s);
-    }), e.apply(new C(this.api.translate("Reorder product attributes")));
+    }), e.apply(new A(this.api.translate("Reorder product attributes")));
   }
   /**
    * Builds HTML string with attributes ordered according to composition.
@@ -651,7 +639,7 @@ class Ht extends tt {
    */
   _buildCompositionHtml(t, r) {
     return r.reduce((e, o) => {
-      const s = t.querySelector(`${A}[${y}="${o}"]`);
+      const s = t.querySelector(`${C}[${y}="${o}"]`);
       return s && "getOuterHTML" in s ? e + s.getOuterHTML() : e;
     }, "");
   }
@@ -661,19 +649,14 @@ class Ht extends tt {
   _applyVisibilityToBlock(t, r) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelectorAll(`${A}[${y}="${t}"]`);
+    const e = this.currentNode.querySelectorAll(`${C}[${y}="${t}"]`);
     if (!(e != null && e.length))
       return;
     const o = r ? "1" : "0", s = r ? this.api.translate("visible") : this.api.translate("hidden"), i = `${this.api.translate("Set visibility")}: ${t} → ${s}`, n = this.api.getDocumentModifier();
     e.forEach((a) => {
-      const l = ft(a), u = r ? l : "none";
-      n.modifyHtml(a).setStyle("display", u).setAttribute(N, o);
-    });
-    const c = {
-      ...$.getConfig(this.currentNode),
-      visibility: { ...this._readVisibilityFromRows(), [t]: r }
-    };
-    n.modifyHtml(this.currentNode).setNodeConfig(c), n.apply(new C(i));
+      const c = ft(a), l = r ? c : "none";
+      n.modifyHtml(a).setStyle("display", l).setAttribute(v, o);
+    }), n.apply(new A(i));
   }
   // ========================================================================
   // Utilities
@@ -686,7 +669,7 @@ class Ht extends tt {
   _findNthCustomKeyIndex(t, r) {
     let e = 0;
     for (let o = 0; o < t.length; o++)
-      if (t[o].startsWith(d)) {
+      if (t[o].startsWith(m)) {
         if (e === r)
           return o;
         e++;
@@ -694,7 +677,7 @@ class Ht extends tt {
     return -1;
   }
   _getCurrentLayout() {
-    return this.store.recommendationConfigs.orientation || _t(this.currentNode);
+    return this.store.recommendationConfigs.orientation || gt(this.currentNode);
   }
   /**
    * Extracts background color properties from existing card elements.
@@ -745,10 +728,10 @@ class Ht extends tt {
    * or when all available filters have already been added (no unused attributes left).
    */
   _updateAddButtonState() {
-    const t = this._readCustomAttributesFromNode(), r = t.length >= _, e = new Set(t), o = this._getAddableFilters(), s = o.length > 0 && o.every((i) => e.has(i.attributeName));
+    const t = this._readCustomAttributesFromNode(), r = t.length >= g, e = new Set(t), o = this._getAddableFilters(), s = o.length > 0 && o.every((i) => e.has(i.attributeName));
     this.api.setUIEAttribute(
-      j.ADD_ATTRIBUTE,
-      v.BUTTON.disabled,
+      x.ADD_ATTRIBUTE,
+      I.BUTTON.disabled,
       r || s ? "true" : "false"
     );
   }
@@ -771,7 +754,7 @@ class Ht extends tt {
    * excluding default attributes already covered by built-in toggle items.
    */
   _getAddableFilters() {
-    return Object.values(this.store.filterList).filter((t) => !(t.type === "defaultAttribute" && nt.has(t.attributeName)));
+    return Object.values(this.store.filterList).filter((t) => !(t.type === "defaultAttribute" && it.has(t.attributeName)));
   }
   /**
    * Looks up the display name for an attribute from the store's filterList.
@@ -788,28 +771,28 @@ class Ht extends tt {
   _resolveAttributeContent(t, r, e) {
     var n;
     const s = this.store.recommendationProducts[e], i = pt(t, this.store.filterList) ? s == null ? void 0 : s[t] : (n = s == null ? void 0 : s.product_attributes) == null ? void 0 : n[t];
-    return gt(i) ?? r;
+    return _t(i) ?? r;
   }
   _getGridCellHtml(t, r, e, o = "", s = "", i = "") {
-    const n = `${d}${t}`, c = M(ct, [n], this.store.filterList), a = {
+    const n = `${m}${t}`, a = w(ct, [n], this.store.filterList), c = {
       [t]: r,
       product_attributes: { [t]: r }
     };
-    let l = c[n](a);
+    let l = a[n](c);
     return l = l.replace("<td", `<td width="${e}%"`), i && (l = l.replace(
       `padding: ${ut}`,
       `padding: ${i}`
     )), o && (l = l.replace(/style="table-layout: fixed;"/, `style="table-layout: fixed; ${o}"`)), s && (l = l.replace(/border="0"/, `border="0" bgcolor="${s}"`)), l;
   }
   _getListRowHtml(t, r, e) {
-    const o = M(mt, [e], this.store.filterList), s = {
+    const o = w(mt, [e], this.store.filterList), s = {
       [t]: r,
       product_attributes: { [t]: r }
     }, n = o[e](s).replace(/<tr>/, "").replace(/<\/tr>/, "");
-    return `<tr class="recommendation-attribute-row" ${y}="${e}" ${N}="1">${n}</tr>`;
+    return `<tr class="recommendation-attribute-row" ${y}="${e}" ${v}="1">${n}</tr>`;
   }
 }
 export {
   bt as COMPOSITION_CONTROL_BLOCK_ID,
-  Ht as RecommendationCardCompositionControl
+  Ut as RecommendationCardCompositionControl
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.7.2-beta.3cec1a4",
+  "version": "3.7.2-beta.7b4f9d0",
   "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",