@useinsider/guido 3.7.0-beta.24a845f → 3.7.0-beta.340a6d3

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

@@ -1,12 +1,12 @@
 import { BlockId as g } from "../../../enums/block.js";
-import { useOnboardingStore as u } from "../../../stores/onboarding.js";
-import { getMigrationBannerHtml as p } from "../../../utils/migrationBannerHtml.js";
-import { Block as f, BlockCompositionType as I, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { useOnboardingStore as p } from "../../../stores/onboarding.js";
+import { getMigrationBannerHtml as f } from "../../../utils/migrationBannerHtml.js";
+import { Block as u, BlockCompositionType as I, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { SETTINGS_ENUMS as a, DefaultConfigValues as i } from "./enums/settingsEnums.js";
 import { getDefaultTemplate as C } from "./template.js";
 import { getItemsBlockContainer as y, getItemsBlockConfig as b, getDefaultItemsBlockConfig as h } from "./utils/nodeConfigUtils.js";
 const c = g.Items;
-class E extends f {
+class E extends u {
   getId() {
     return c;
   }
@@ -23,7 +23,7 @@ class E extends f {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
   getSettingsPanelTitleHtml() {
-    return p(
+    return f(
       c,
       this.api.translate("Items"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.")
@@ -42,23 +42,18 @@ class E extends f {
   allowInnerBlocksDND() {
     return !1;
   }
-  // Stripo's Block default is false. Items keeps its full config in nodeConfig
-  // (esd-ext-config), so a saved module is self-contained and restores on re-drop.
-  canBeSavedAsModule() {
-    return !0;
-  }
   onCreated(n) {
     const l = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
     r.querySelector('[product-attr="imageSrc"] img') || l.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const t = y(n);
-    if (!t)
+    const e = y(n);
+    if (!e)
       return;
-    const s = t.getNodeConfig(), m = s && Object.keys(s).length > 0, e = b(n);
-    if (e != null && e.initialized)
-      m ? e.blockInstanceId || this.api.getDocumentModifier().modifyHtml(t).setNodeConfig({ ...e, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(t).setNodeConfig(e).apply(new o("Migrate legacy config to nodeConfig"));
+    const s = e.getNodeConfig(), m = s && Object.keys(s).length > 0, t = b(n);
+    if (t != null && t.initialized)
+      m ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
     else {
       const d = h();
-      this.api.getDocumentModifier().modifyHtml(t).setNodeConfig(d).apply(new o("Initialize Items block with default configuration")), u().startOnboarding("itemsOnboarding");
+      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(d).apply(new o("Initialize Items block with default configuration")), p().startOnboarding("itemsOnboarding");
     }
   }
 }

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

@@ -47,9 +47,9 @@ class q extends R {
   allowInnerBlocksDND() {
     return !1;
   }
-  // Full config persists in nodeConfig (esd-ext-config) and is rebuilt at
-  // compile time by hydrateRecommendationStoreFromRawHtml, so a saved module
-  // restores its campaign/layout/styles when re-dropped into another email.
+  // 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;
   }

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

@@ -1,29 +1,29 @@
-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";
+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";
 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 _t, buildElementRenderer as w } from "../../templates/utils.js";
+import { toDisplayName as ht, isDefaultAttribute as pt, toDisplayableAttributeValue as gt, buildElementRenderer as M } from "../../templates/utils.js";
 import { getTableDisplayValue as ft } from "../../utils/tagName.js";
-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 = {
+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 = {
   ADD_ATTRIBUTE: "addAttribute"
-}, 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" },
+}, _ = 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" },
   { key: U, label: "Product Button" }
-], yt = new Set(h.map((p) => p.key)), T = "customAttr_", R = "deleteAttr_";
-class Ut extends Z {
+], yt = new Set(h.map((p) => p.key)), T = "customAttr_", E = "deleteAttr_";
+class Ht extends tt {
   constructor() {
     super(...arguments);
     S(this, "store", lt());
@@ -47,7 +47,7 @@ class Ut extends Z {
                 ${this._GuToggle(`visibility_${l.key}`)}
             </div>
         `).join(""), r = Array.from(
-      { length: g },
+      { length: _ },
       (l, u) => `
                 <div data-custom-select-key="${T}${u}" style="display: none;">
                     ${this._GuSelect({
@@ -57,13 +57,13 @@ class Ut extends Z {
       })}
                 </div>
             `
-    ).join(""), e = h.length + g, o = Array.from(
+    ).join(""), e = h.length + _, o = Array.from(
       { length: e },
       (l, u) => `
-                <div data-reorder-icon-key="${E}${u}" style="display: none;">
+                <div data-reorder-icon-key="${R}${u}" style="display: none;">
                     <${f.BUTTON}
                         class="drag-handle-btn flat-inline flat-white"
-                        ${I.BUTTON.name}="${E}${u}"
+                        ${v.BUTTON.name}="${R}${u}"
                     >
                         <${f.ICON}
                             src="reorder"
@@ -73,12 +73,12 @@ class Ut extends Z {
                 </div>
             `
     ).join(""), s = Array.from(
-      { length: g },
+      { length: _ },
       (l, u) => `
-                <div data-custom-delete-key="${R}${u}" style="display: none;">
+                <div data-custom-delete-key="${E}${u}" style="display: none;">
                     <${f.BUTTON}
                         class="custom-attr-delete flat-inline flat-white"
-                        ${I.BUTTON.name}="${R}${u}"
+                        ${v.BUTTON.name}="${E}${u}"
                     >
                         <${f.ICON}
                             src="delete"
@@ -89,15 +89,15 @@ class Ut extends Z {
             `
     ).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."
-    ), a = this.api.translate("For more information, you can"), c = this.api.translate("visit Academy");
+    ), c = this.api.translate("For more information, you can"), a = this.api.translate("visit Academy");
     return `
             <div class="recommendation-controls-container" data-card-composition-control>
                 <div class="container">
                     <p class="card-composition-description">
                         ${n}
-                        ${a}
+                        ${c}
                         <!-- cspell:disable-next-line -->
-                        <a href="${i}" target="_blank" rel="noopener noreferrer">${c}</a>.
+                        <a href="${i}" target="_blank" rel="noopener noreferrer">${a}</a>.
                     </p>
                 </div>
 
@@ -120,7 +120,7 @@ class Ut extends Z {
                 <div class="orderable-list" data-composition-list></div>
 
                 ${this._GuButton({
-      name: x.ADD_ATTRIBUTE,
+      name: j.ADD_ATTRIBUTE,
       label: this.api.translate("Add Attribute"),
       id: "guido__btn-add-attribute"
     })}
@@ -149,7 +149,7 @@ class Ut extends Z {
         this._applyVisibilityToBlock(t.key, r);
       });
     });
-    for (let t = 0; t < g; t++) {
+    for (let t = 0; t < _; t++) {
       const r = `${T}${t}`, e = t;
       this.api.onValueChanged(r, (o) => {
         this._onCustomAttributeChanged(e, o);
@@ -162,36 +162,42 @@ class Ut extends Z {
   _readCompositionFromNode() {
     if (!this.currentNode || !("getAttribute" in this.currentNode))
       return [...P];
-    const t = this.currentNode.getAttribute(V);
-    return t ? t.split(",").filter(Boolean) : [...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];
   }
   _readCustomAttributesFromNode() {
     if (!this.currentNode || !("getAttribute" in this.currentNode))
       return [];
-    const t = this.currentNode.getAttribute(q);
-    if (!t)
-      return [];
-    try {
-      return JSON.parse(t);
-    } catch {
-      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));
   }
   _readVisibilityFromRows() {
     if (!this.currentNode)
       return this._getDefaultVisibilities();
-    const t = Array.from(this.currentNode.querySelectorAll(C)), r = this._extractVisibilityFromRows(t);
-    return this._mergeWithDefaults(r);
+    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 });
   }
   _getDefaultVisibilities() {
-    return { ...F };
+    return { ...w };
   }
   _extractVisibilityFromRows(t) {
     const r = {};
     return t.forEach((e) => {
       if (!("getAttribute" in e))
         return;
-      const o = e.getAttribute(y), s = e.getAttribute(v);
+      const o = e.getAttribute(y), s = e.getAttribute(N);
       o && s !== null && (r[o] = this._parseVisibilityValue(s));
     }), r;
   }
@@ -199,7 +205,7 @@ class Ut extends Z {
     return t === "1" || t === "true";
   }
   _mergeWithDefaults(t) {
-    return Object.entries(F).forEach(([r, e]) => {
+    return Object.entries(w).forEach(([r, e]) => {
       r in t || (t[r] = e);
     }), t;
   }
@@ -223,19 +229,19 @@ class Ut extends Z {
       return !1;
     const s = new Set(r);
     let i = 0, n = 0;
-    const a = t.map((c) => {
-      if (yt.has(c)) {
-        const l = h.find((u) => u.key === c);
+    const c = t.map((a) => {
+      if (yt.has(a)) {
+        const l = h.find((u) => u.key === a);
         return this._createBuiltInItemHtml(l, n++);
       }
-      if (c.startsWith(m)) {
-        const l = c.substring(m.length);
+      if (a.startsWith(d)) {
+        const l = a.substring(d.length);
         if (s.has(l))
-          return this._createCustomItemHtml(c, i++, n++);
+          return this._createCustomItemHtml(a, i++, n++);
       }
       return "";
     }).join("");
-    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;
+    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;
   }
   /**
    * Attempts to reorder existing orderable-item elements to match the composition order.
@@ -247,27 +253,27 @@ class Ut extends Z {
     const e = Array.from(t.querySelectorAll(".orderable-item"));
     if (e.length !== r.length)
       return !1;
-    const o = e.map((c) => c.dataset.key).filter(Boolean);
+    const o = e.map((a) => a.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((c) => c.startsWith(m)))
+    if (s !== i || r.some((a) => a.startsWith(d)))
       return !1;
     const n = /* @__PURE__ */ new Map();
-    e.forEach((c) => {
-      const { key: l } = c.dataset;
+    e.forEach((a) => {
+      const { key: l } = a.dataset;
       if (l) {
         const u = n.get(l) || [];
-        u.push(c), n.set(l, u);
+        u.push(a), n.set(l, u);
       }
     });
-    const a = /* @__PURE__ */ new Map();
-    return r.forEach((c) => {
-      const l = n.get(c);
+    const c = /* @__PURE__ */ new Map();
+    return r.forEach((a) => {
+      const l = n.get(a);
       if (!l)
         return;
-      const u = a.get(c) || 0;
-      a.set(c, u + 1), l[u] && t.appendChild(l[u]);
+      const u = c.get(a) || 0;
+      c.set(a, u + 1), l[u] && t.appendChild(l[u]);
     }), !0;
   }
   _createBuiltInItemHtml(t, r) {
@@ -316,7 +322,7 @@ class Ut extends Z {
     t.length !== 0 && setTimeout(() => {
       t.forEach((r, e) => {
         const o = `${T}${e}`, s = this._getSelectOptions(r, t);
-        this.api.setUIEAttribute(o, I.SELECTPICKER.items, s), this.api.updateValues({ [o]: r });
+        this.api.setUIEAttribute(o, v.SELECTPICKER.items, s), this.api.updateValues({ [o]: r });
       });
     }, 0);
   }
@@ -366,7 +372,7 @@ class Ut extends Z {
    * Same rescue pattern as _rescueTogglesToStore — prevents innerHTML from destroying them.
    */
   _rescueSelectsToStore(t) {
-    for (let r = 0; r < g; r++) {
+    for (let r = 0; r < _; 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");
@@ -380,7 +386,7 @@ class Ut extends Z {
    */
   _moveDeleteButtonsIntoItems(t, r) {
     for (let e = 0; e < r; e++) {
-      const o = `${R}${e}`, s = t.querySelector(`[data-custom-delete-key="${o}"]`), i = t.querySelector(`[data-custom-delete-slot="${e}"]`);
+      const o = `${E}${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);
@@ -392,8 +398,8 @@ class Ut extends Z {
    * Same rescue pattern as _rescueSelectsToStore — prevents innerHTML from destroying them.
    */
   _rescueDeleteButtonsToStore(t) {
-    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}"]`);
+    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}"]`);
       if (s) {
         const i = s.querySelector("ue-button");
         i && o && o.appendChild(i);
@@ -406,7 +412,7 @@ class Ut extends Z {
    */
   _moveReorderIconsIntoItems(t, r) {
     for (let e = 0; e < r; e++) {
-      const o = `${E}${e}`, s = t.querySelector(`[data-reorder-icon-key="${o}"]`), i = t.querySelector(`[data-reorder-icon-slot="${e}"]`);
+      const o = `${R}${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);
@@ -418,9 +424,9 @@ class Ut extends Z {
    * Same rescue pattern as _rescueDeleteButtonsToStore — prevents innerHTML from destroying them.
    */
   _rescueReorderIconsToStore(t) {
-    const r = h.length + g;
+    const r = h.length + _;
     for (let e = 0; e < r; e++) {
-      const o = `${E}${e}`, s = t.querySelector(`[data-reorder-icon-key="${o}"]`), i = t.querySelector(`[data-reorder-icon-slot="${e}"]`);
+      const o = `${R}${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);
@@ -444,24 +450,24 @@ class Ut extends Z {
   _setupDragAndDrop(t, r) {
     let e = null, o = null;
     t.addEventListener("dragstart", (s) => {
-      var a;
+      var c;
       const n = s.target.closest(".orderable-item");
-      n && (e = n, n.classList.add("dragging"), (a = s.dataTransfer) == null || a.setData("text/plain", n.dataset.key || ""));
+      n && (e = n, n.classList.add("dragging"), (c = s.dataTransfer) == null || c.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"), a = n && n !== e ? n : null;
-      a !== o && (o == null || o.classList.remove("drag-over"), o = a, o == null || o.classList.add("drag-over"));
+      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"));
     }, { signal: r }), t.addEventListener("drop", (s) => {
       s.preventDefault();
       const n = s.target.closest(".orderable-item");
       if (!n || !e || n === e)
         return;
-      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;
+      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;
     }, { signal: r });
   }
   _setupDeleteHandler(t, r) {
@@ -477,7 +483,7 @@ class Ut extends Z {
   // Actions (Add, Delete, Reorder)
   // ========================================================================
   _onAddAttribute(t, r) {
-    const e = `${m}${t}`, o = this._readCompositionFromNode();
+    const e = `${d}${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();
@@ -490,7 +496,7 @@ class Ut extends Z {
     const r = this._readCustomAttributesFromNode();
     if (r[t] === void 0)
       return;
-    const o = this._readCompositionFromNode(), s = this._findNthCustomKeyIndex(o, t), i = o.filter((a, c) => c !== s), n = r.filter((a, c) => c !== t);
+    const o = this._readCompositionFromNode(), s = this._findNthCustomKeyIndex(o, t), i = o.filter((c, a) => a !== s), n = r.filter((c, a) => a !== t);
     this._updateBothAttributes(i, n), this._removeCustomAttributeHtml(i), this._renderOrderableItems(i, n), this._initializeCustomSelects(n), this._updateAddButtonState();
   }
   /**
@@ -501,13 +507,13 @@ class Ut extends Z {
     const e = this._readCustomAttributesFromNode(), o = e[t];
     if (o === void 0 || o === r)
       return;
-    const s = `${m}${r}`, i = this._readCompositionFromNode(), n = this._findNthCustomKeyIndex(i, t);
+    const s = `${d}${r}`, i = this._readCompositionFromNode(), n = this._findNthCustomKeyIndex(i, t);
     n !== -1 && (i[n] = s), e[t] = r;
-    const a = this._getDisplayNameForAttribute(r);
-    this._updateBothAttributes(i, e), this._injectCustomAttributeHtml(r, a, s, i), this._renderOrderableItems(i, e), this._initializeCustomSelects(e);
+    const c = this._getDisplayNameForAttribute(r);
+    this._updateBothAttributes(i, e), this._injectCustomAttributeHtml(r, c, s, i), this._renderOrderableItems(i, e), this._initializeCustomSelects(e);
   }
   _onReorder(t) {
-    const r = t.filter((e) => e.startsWith(m)).map((e) => e.substring(m.length));
+    const r = t.filter((e) => e.startsWith(d)).map((e) => e.substring(d.length));
     this.reorderInProgress = !0;
     try {
       this._updateBothAttributes(t, r), this._getCurrentLayout() === "grid" && this._reorderProductAttributes(t);
@@ -528,58 +534,58 @@ class Ut extends Z {
     const s = this.currentNode.querySelectorAll(L);
     if (!(s != null && s.length))
       return;
-    const i = nt.getConfig(this.currentNode), a = `0 ${Math.floor(i.columnSpacing / 2)}px`, c = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
+    const i = $.getConfig(this.currentNode), c = `0 ${Math.floor(i.columnSpacing / 2)}px`, a = this.api.getDocumentModifier(), l = this.store.recommendationProducts.length;
     let u = 0;
-    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(
+    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(
             { length: O },
-            (At, Y) => {
-              const X = this._resolveAttributeContent(
+            (Ct, X) => {
+              const J = this._resolveAttributeContent(
                 t,
                 r,
-                u + Y
+                u + X
               );
               return this._getGridCellHtml(
                 t,
-                X,
+                J,
                 B,
-                j,
                 W,
-                a
+                K,
+                c
               );
             }
-          ).join(""), G = dt(B, a).repeat($ - O);
-          return `<tr class="recommendation-attribute-row" ${y}="${e}" ${v}="1">${z}${G}</tr>`;
+          ).join(""), Y = dt(B, c).repeat(I - O);
+          return `<tr class="recommendation-attribute-row" ${y}="${e}" ${N}="1">${G}${Y}</tr>`;
         }
-        const N = d.querySelector(
-          `${C}[${y}="${k}"]`
+        const D = m.querySelector(
+          `${A}[${y}="${q}"]`
         );
-        return N && "getOuterHTML" in N ? N.getOuterHTML() : "";
+        return D && "getOuterHTML" in D ? D.getOuterHTML() : "";
       }).join("");
-      u += O, l > 0 && u >= l && (u = 0), c.modifyHtml(d).setInnerHtml(K);
-    }), c.apply(new A(`${this.api.translate("Add custom attribute")}: ${r}`));
+      u += O, l > 0 && u >= l && (u = 0), a.modifyHtml(m).setInnerHtml(z);
+    }), a.apply(new C(`${this.api.translate("Add custom attribute")}: ${r}`));
   }
   _injectListAttributeRow(t, r, e, o) {
-    const s = this.currentNode.querySelectorAll(M);
+    const s = this.currentNode.querySelectorAll(V);
     if (!(s != null && s.length))
       return;
-    const i = o.filter((a) => a !== D && a !== U), n = this.api.getDocumentModifier();
-    s.forEach((a, c) => {
+    const i = o.filter((c) => c !== H && c !== U), n = this.api.getDocumentModifier();
+    s.forEach((c, a) => {
       const l = i.map((u) => {
         if (u === e) {
-          const b = this._resolveAttributeContent(t, r, c);
+          const b = this._resolveAttributeContent(t, r, a);
           return this._getListRowHtml(t, b, e);
         }
-        const d = a.querySelector(
-          `${C}[${y}="${u}"]`
+        const m = c.querySelector(
+          `${A}[${y}="${u}"]`
         );
-        return d && "getOuterHTML" in d ? d.getOuterHTML() : "";
+        return m && "getOuterHTML" in m ? m.getOuterHTML() : "";
       }).join("");
-      n.modifyHtml(a).setInnerHtml(l);
-    }), n.apply(new A(`${this.api.translate("Add custom attribute")}: ${r}`));
+      n.modifyHtml(c).setInnerHtml(l);
+    }), n.apply(new C(`${this.api.translate("Add custom attribute")}: ${r}`));
   }
   /**
    * Removes a custom attribute by rebuilding product card content without it.
@@ -596,13 +602,13 @@ class Ut extends Z {
         e.modifyHtml(s).setInnerHtml(i);
       });
     } else {
-      const o = t.filter((i) => i !== D && i !== U), s = this.currentNode.querySelectorAll(M);
+      const o = t.filter((i) => i !== H && i !== U), s = this.currentNode.querySelectorAll(V);
       s == null || s.forEach((i) => {
         const n = this._buildCompositionHtml(i, o);
         e.modifyHtml(i).setInnerHtml(n);
       });
     }
-    e.apply(new A(this.api.translate("Remove custom attribute")));
+    e.apply(new C(this.api.translate("Remove custom attribute")));
   }
   // ========================================================================
   // DOM Mutation (Block Root Attributes, Reorder)
@@ -615,7 +621,13 @@ class Ut extends Z {
    * producing a flicker on the custom attribute dropdowns.
    */
   _updateBothAttributes(t, r) {
-    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")));
+    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")));
   }
   /**
    * Reorders attribute rows within each product card based on composition order.
@@ -631,7 +643,7 @@ class Ut extends Z {
     r.forEach((o) => {
       const s = this._buildCompositionHtml(o, t);
       e.modifyHtml(o).setInnerHtml(s);
-    }), e.apply(new A(this.api.translate("Reorder product attributes")));
+    }), e.apply(new C(this.api.translate("Reorder product attributes")));
   }
   /**
    * Builds HTML string with attributes ordered according to composition.
@@ -639,7 +651,7 @@ class Ut extends Z {
    */
   _buildCompositionHtml(t, r) {
     return r.reduce((e, o) => {
-      const s = t.querySelector(`${C}[${y}="${o}"]`);
+      const s = t.querySelector(`${A}[${y}="${o}"]`);
       return s && "getOuterHTML" in s ? e + s.getOuterHTML() : e;
     }, "");
   }
@@ -649,14 +661,19 @@ class Ut extends Z {
   _applyVisibilityToBlock(t, r) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelectorAll(`${C}[${y}="${t}"]`);
+    const e = this.currentNode.querySelectorAll(`${A}[${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 c = ft(a), l = r ? c : "none";
-      n.modifyHtml(a).setStyle("display", l).setAttribute(v, o);
-    }), n.apply(new A(i));
+      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));
   }
   // ========================================================================
   // Utilities
@@ -669,7 +686,7 @@ class Ut extends Z {
   _findNthCustomKeyIndex(t, r) {
     let e = 0;
     for (let o = 0; o < t.length; o++)
-      if (t[o].startsWith(m)) {
+      if (t[o].startsWith(d)) {
         if (e === r)
           return o;
         e++;
@@ -677,7 +694,7 @@ class Ut extends Z {
     return -1;
   }
   _getCurrentLayout() {
-    return this.store.recommendationConfigs.orientation || gt(this.currentNode);
+    return this.store.recommendationConfigs.orientation || _t(this.currentNode);
   }
   /**
    * Extracts background color properties from existing card elements.
@@ -728,10 +745,10 @@ class Ut extends Z {
    * or when all available filters have already been added (no unused attributes left).
    */
   _updateAddButtonState() {
-    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));
+    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));
     this.api.setUIEAttribute(
-      x.ADD_ATTRIBUTE,
-      I.BUTTON.disabled,
+      j.ADD_ATTRIBUTE,
+      v.BUTTON.disabled,
       r || s ? "true" : "false"
     );
   }
@@ -754,7 +771,7 @@ class Ut extends Z {
    * excluding default attributes already covered by built-in toggle items.
    */
   _getAddableFilters() {
-    return Object.values(this.store.filterList).filter((t) => !(t.type === "defaultAttribute" && it.has(t.attributeName)));
+    return Object.values(this.store.filterList).filter((t) => !(t.type === "defaultAttribute" && nt.has(t.attributeName)));
   }
   /**
    * Looks up the display name for an attribute from the store's filterList.
@@ -771,28 +788,28 @@ class Ut extends Z {
   _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 _t(i) ?? r;
+    return gt(i) ?? r;
   }
   _getGridCellHtml(t, r, e, o = "", s = "", i = "") {
-    const n = `${m}${t}`, a = w(ct, [n], this.store.filterList), c = {
+    const n = `${d}${t}`, c = M(ct, [n], this.store.filterList), a = {
       [t]: r,
       product_attributes: { [t]: r }
     };
-    let l = a[n](c);
+    let l = c[n](a);
     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 = w(mt, [e], this.store.filterList), s = {
+    const o = M(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}" ${v}="1">${n}</tr>`;
+    return `<tr class="recommendation-attribute-row" ${y}="${e}" ${N}="1">${n}</tr>`;
   }
 }
 export {
   bt as COMPOSITION_CONTROL_BLOCK_ID,
-  Ut as RecommendationCardCompositionControl
+  Ht as RecommendationCardCompositionControl
 };

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

@@ -24,6 +24,5 @@ export declare class ItemsBlock extends Block {
     getSettingsPanelTitleHtml(): string;
     getTemplate(): string;
     allowInnerBlocksDND(): boolean;
-    canBeSavedAsModule(): boolean;
     onCreated(node: ImmutableHtmlNode): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.7.0-beta.24a845f",
+  "version": "3.7.0-beta.340a6d3",
   "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",