@useinsider/guido 3.14.1-beta.9ad6513 → 3.15.0-beta.166619d

package/dist/composables/useEmailTemplateApplier.js

@@ -1,43 +1,57 @@
-import { useActionsApi as T } from "./useActionsApi.js";
-import { useToaster as f } from "./useToaster.js";
-import { useTranslations as y } from "./useTranslations.js";
-import { ToasterTypeOptions as n } from "../enums/toaster.js";
-import { ref as v } from "vue";
-const E = 250, s = v({}), o = {}, j = () => {
-  const { updateHtmlAndCss: l } = T(), { showToaster: p } = f(), i = y(), u = (e) => {
-    s.value[e] === void 0 && (s.value = { ...s.value, [e]: "pending" });
-  }, c = (e, t, r) => {
-    s.value = { ...s.value, [e]: "applying" };
+import { useActionsApi as d } from "./useActionsApi.js";
+import { useConfig as D } from "./useConfig.js";
+import { useToaster as h } from "./useToaster.js";
+import { useTranslations as E } from "./useTranslations.js";
+import { ToasterTypeOptions as f } from "../enums/toaster.js";
+import { useDynamicContentStore as A } from "../stores/dynamic-content.js";
+import { flattenDynamicContentList as S } from "../utils/genericUtil.js";
+import { extractUsedDynamicContent as O } from "../utils/registerUsedDynamicContent.js";
+import { ref as U } from "vue";
+const w = 250, o = U({}), s = {}, u = /* @__PURE__ */ new Map(), z = () => {
+  const { updateHtmlAndCss: c } = d(), { showToaster: m } = h(), y = E(), { template: T } = D(), v = A(), g = (e, t) => {
+    const a = y(e);
+    return a === e ? t : a;
+  }, C = (e) => {
+    o.value[e] === void 0 && (o.value = { ...o.value, [e]: "pending" });
+  }, l = (e, t, a) => {
+    var n;
+    o.value = { ...o.value, [e]: "applying" };
     try {
-      l(t, r), s.value = { ...s.value, [e]: "applied" }, p({
-        type: n.Success,
-        message: i("newsletter.ai-template-applied")
-      });
-    } catch (a) {
-      s.value = { ...s.value, [e]: "failed" }, p({
-        type: n.Error,
-        message: a instanceof Error ? a.message : "Failed to apply template"
+      c(t, a), o.value = { ...o.value, [e]: "applied" };
+      try {
+        const r = S((n = T.value) == null ? void 0 : n.dynamicContentList), p = O(t, r);
+        p.length > 0 && v.registerDynamicContent(p);
+      } catch {
+      }
+      u.get(e) !== t && (u.set(e, t), m({
+        type: f.Success,
+        message: g("newsletter.ai-template-applied", "Template applied to the editor")
+      }));
+    } catch (r) {
+      o.value = { ...o.value, [e]: "failed" }, m({
+        type: f.Error,
+        message: r instanceof Error ? r.message : "Failed to apply template"
       });
     }
-  }, m = (e) => {
-    const t = o[e];
-    t && (clearTimeout(t), delete o[e]);
+  }, i = (e) => {
+    const t = s[e];
+    t && (clearTimeout(t), delete s[e]);
   };
-  return { applyStatus: s, markPending: u, applyTemplate: (e, t) => {
-    t.html && (m(e), c(e, t.html, t.css ?? ""));
+  return { applyStatus: o, markPending: C, applyTemplate: (e, t) => {
+    t.html && (i(e), l(e, t.html, t.css ?? ""));
   }, applyTemplateDebounced: (e, t) => {
     if (!t.html)
       return;
-    m(e);
-    const { html: r } = t, a = t.css ?? "";
-    o[e] = setTimeout(() => {
-      delete o[e], c(e, r, a);
-    }, E);
+    i(e);
+    const { html: a } = t, n = t.css ?? "";
+    s[e] = setTimeout(() => {
+      delete s[e], l(e, a, n);
+    }, w);
   } };
-}, k = () => {
-  Object.values(o).forEach(clearTimeout), Object.keys(o).forEach((l) => delete o[l]), s.value = {};
+}, G = () => {
+  Object.values(s).forEach(clearTimeout), Object.keys(s).forEach((c) => delete s[c]), o.value = {};
 };
 export {
-  k as resetEmailTemplateApplier,
-  j as useEmailTemplateApplier
+  G as resetEmailTemplateApplier,
+  z as useEmailTemplateApplier
 };

package/dist/composables/useHtmlValidator.js

@@ -1,64 +1,69 @@
-import { useConfig as W } from "./useConfig.js";
-import { getIgnoredRecommendationBlockIds as G } from "../config/compiler/utils/recommendationIgnoreUtils.js";
-import { TemplateTypes as H } from "../enums/defaults.js";
-import { DISPLAY_CONDITIONS_REGEX as P, DISPLAY_CONDITIONS_EXCEPTIONS_REGEX as X, CampaignCouldNotBeSavedKey as $, CanNotMakeAnyChangesForRunningKey as Y, DATA_ATTRIBUTE_REGEX as U, DYNAMIC_CONTENT_TAG_REGEX as j, ALLOWED_DYNAMIC_SYSTEM_TOKENS as q, VALID_DYNAMIC_VARIABLE_REGEX as K } from "../enums/html-validator.js";
+import { useConfig as V } from "./useConfig.js";
+import { getIgnoredRecommendationBlockIds as M } from "../config/compiler/utils/recommendationIgnoreUtils.js";
+import { TemplateTypes as W } from "../enums/defaults.js";
+import { DISPLAY_CONDITIONS_REGEX as G, DISPLAY_CONDITIONS_EXCEPTIONS_REGEX as H, CampaignCouldNotBeSavedKey as P, CanNotMakeAnyChangesForRunningKey as X, DATA_ATTRIBUTE_REGEX as $, DYNAMIC_CONTENT_TAG_REGEX as Y, ALLOWED_DYNAMIC_SYSTEM_TOKENS as U, VALID_DYNAMIC_VARIABLE_REGEX as j } from "../enums/html-validator.js";
 import { ToasterTypeOptions as c } from "../enums/toaster.js";
-import { itemsBlockDynamicVariables as z } from "../extensions/Blocks/Items/enums/productEnums.js";
-import { RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES as Z } from "../extensions/Blocks/Recommendation/constants/selectors.js";
-import { useRecommendationExtensionStore as J } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { resolveProductAttrValue as Q } from "../extensions/Blocks/Recommendation/templates/utils.js";
-import { RecommendationRequiredFieldsKey as ee } from "../extensions/Blocks/Recommendation/validation/requiredFields.js";
-import { useRecommendationStore as te } from "../stores/recommendation.js";
-import { base64EncodeWithSpecialChars as ne } from "../utils/base64.js";
-import { useHttp as se } from "./useHttp.js";
-import { useToaster as re } from "./useToaster.js";
-import { useTranslations as oe } from "./useTranslations.js";
-const ie = /recommendation-id="(\d+)"/g;
-function ae(t) {
-  return [...t.matchAll(ie)].map((m) => m[1]);
+import { itemsBlockDynamicVariables as q } from "../extensions/Blocks/Items/enums/productEnums.js";
+import { RECOMMENDATION_VARIABLE_BUILTIN_ATTRIBUTES as K } from "../extensions/Blocks/Recommendation/constants/selectors.js";
+import { useRecommendationExtensionStore as z } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { resolveProductAttrValue as Z } from "../extensions/Blocks/Recommendation/templates/utils.js";
+import { RecommendationRequiredFieldsKey as J } from "../extensions/Blocks/Recommendation/validation/requiredFields.js";
+import { useRecommendationStore as Q } from "../stores/recommendation.js";
+import { base64EncodeWithSpecialChars as ee } from "../utils/base64.js";
+import { computed as te } from "vue";
+import { useHttp as ne } from "./useHttp.js";
+import { useToaster as se } from "./useToaster.js";
+import { useTranslations as re } from "./useTranslations.js";
+const oe = /recommendation-id="(\d+)"/g;
+function ie(n) {
+  return [...n.matchAll(oe)].map((m) => m[1]);
 }
-function ce(t, m) {
-  return m.some((f) => t.startsWith(`${f}_`));
+function ae(n, m) {
+  return m.some((f) => n.startsWith(`${f}_`));
 }
-const le = /^(\d+)_\d+_(.+)$/;
-function me(t) {
-  const m = t.match(le);
+const ce = /^(\d+)_\d+_(.+)$/;
+function le(n) {
+  const m = n.match(ce);
   return m ? { recoId: m[1], attribute: m[2] } : null;
 }
-function ue(t) {
-  const m = new Set(Z);
-  return Object.values(t).forEach((f) => {
-    m.add(Q(f.attributeName, t).toLowerCase());
+function me(n) {
+  const m = new Set(K);
+  return Object.values(n).forEach((f) => {
+    m.add(Z(f.attributeName, n).toLowerCase());
   }), m;
 }
-function de(t, m, f, o, d) {
-  const u = t.match(/{{([a-zA-Z0-9_.\s]*)}}/gm);
+function ue(n, m, f, o, d) {
+  const u = n.match(/{{([a-zA-Z0-9_.\s]*)}}/gm);
   if (!u)
     return [];
-  const p = new Set(m.map((h) => h.toLowerCase())), E = [];
+  const g = new Set(m.map((h) => h.toLowerCase())), E = [];
   return u.forEach((h) => {
-    const g = h.slice(2, -2).trim().toLowerCase();
-    if (g !== "" && p.has(g))
+    const p = h.slice(2, -2).trim().toLowerCase();
+    if (p !== "" && g.has(p))
       return;
-    const y = me(g);
+    const y = le(p);
     if (y && o.has(y.recoId)) {
       if (!d || d.has(y.attribute))
         return;
-      E.push(g);
+      E.push(p);
       return;
     }
-    ce(g, f) || g.includes(".") || E.push(g);
+    ae(p, f) || p.includes(".") || E.push(p);
   }), E;
 }
-function fe(t) {
-  return (t.replace(U, "$1").match(j) ?? []).filter((o) => {
-    const d = o.slice(2, -2), u = d.indexOf("|"), p = (u === -1 ? d : d.slice(0, u)).trim();
-    return q.includes(p) ? !1 : K.test(p) ? u !== -1 && d.slice(u + 1).trim() === "" : !0;
+function de(n) {
+  return (n.replace($, "$1").match(Y) ?? []).filter((o) => {
+    const d = o.slice(2, -2), u = d.indexOf("|"), g = (u === -1 ? d : d.slice(0, u)).trim();
+    return U.includes(g) ? !1 : j.test(g) ? u !== -1 && d.slice(u + 1).trim() === "" : !0;
   });
 }
 const xe = () => {
-  var b, S;
-  const { showToaster: t } = re(), { post: m } = se(), { config: f } = W(), o = oe(), d = te(), u = J(), p = ((S = (b = f.value) == null ? void 0 : b.partner) == null ? void 0 : S.messageType) === H.transactional, E = async (e) => {
+  const { showToaster: n } = se(), { post: m } = ne(), { config: f } = V(), o = re(), d = Q(), u = z(), g = te(
+    () => {
+      var e, t;
+      return ((t = (e = f.value) == null ? void 0 : e.partner) == null ? void 0 : t.messageType) === W.transactional;
+    }
+  ), E = async (e) => {
     if (e.size === 0)
       return /* @__PURE__ */ new Set();
     try {
@@ -66,61 +71,61 @@ const xe = () => {
     } catch {
       return null;
     }
-    return ue(u.filterList);
+    return me(u.filterList);
   }, h = async (e) => {
-    const n = await m(
+    const s = await m(
       "/newsletter/template-library/check-template-html-body",
-      { html: ne(e) }
-    ), { status: r, message: a } = n.data;
-    return r || t({
+      { html: ee(e) }
+    ), { status: r, message: a } = s.data;
+    return r || n({
       type: c.Error,
       message: r === void 0 ? a : o("newsletter.invalid-url-link-for-toaster")
-    }), o($), a === o(Y) && t({
+    }), o(P), a === o(X) && n({
       type: c.Error,
       message: o("newsletter.already-in-progress")
     }), r;
-  }, g = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), y = (e) => ["if", "endif"].includes(e.toLowerCase()), T = (e, s) => {
-    const n = e.match(/({%(.*?)%})/g);
+  }, p = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), y = (e) => ["if", "endif"].includes(e.toLowerCase()), S = (e, t) => {
+    const s = e.match(/({%(.*?)%})/g);
     let r = !0;
-    return n !== null && !p && n.forEach((a) => {
+    return s !== null && !g.value && s.forEach((a) => {
       const i = a.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
       if (i && i.length > 0) {
         const [l] = i;
-        g(l) && !s.includes(l) && (t({
+        p(l) && !t.includes(l) && (n({
           type: c.Warning,
           message: o("custom-fields.invalid-custom-fields")
         }), r = !1);
       }
     }), r;
-  }, w = async (e, s, n) => {
-    const r = n ? await h(e) : !0;
-    return T(e, s) && r;
-  }, R = (e) => e.length > 0 ? !0 : (t({
+  }, A = async (e, t, s) => {
+    const r = s ? await h(e) : !0;
+    return S(e, t) && r;
+  }, T = (e) => e.length > 0 ? !0 : (n({
     type: c.Warning,
     message: o("newsletter.html-content-is-empty")
-  }), !1), _ = (e) => {
-    const s = (e.match(/{/gm) || []).length, n = (e.match(/}/gm) || []).length;
-    return s > n && t({
+  }), !1), w = (e) => {
+    const t = (e.match(/{/gm) || []).length, s = (e.match(/}/gm) || []).length;
+    return t > s && n({
       type: c.Warning,
       message: o("custom-fields.missing-closing-braces")
-    }), s < n && t({
+    }), t < s && n({
       type: c.Warning,
       message: o("custom-fields.missing-opening-braces")
-    }), s === n;
-  }, N = (e) => {
-    const s = fe(e).length === 0;
-    return s || t({
+    }), t === s;
+  }, R = (e) => {
+    const t = de(e).length === 0;
+    return t || n({
       type: c.Warning,
       message: o("custom-fields.invalid-custom-fields")
-    }), s;
-  }, x = (e, s, n, r) => {
-    if (p)
+    }), t;
+  }, _ = (e, t, s, r) => {
+    if (g.value)
       return !0;
-    const a = de(
+    const a = ue(
       e,
+      t,
+      ie(e),
       s,
-      ae(e),
-      n,
       r
     );
     if (a.length > 0) {
@@ -129,91 +134,91 @@ const xe = () => {
                     ${a.map((l) => `<li>${l}</li>`).join("")}
                 </ul>
             `;
-      return t({
+      return n({
         type: c.Error,
         message: o("custom-fields.invalid-custom-fields") + i
       }), !1;
     }
     return !0;
-  }, O = (e) => {
-    const s = e.match(/{%(.*?)%}/g), n = [];
+  }, N = (e) => {
+    const t = e.match(/{%(.*?)%}/g), s = [];
     let r = !0;
-    if (s && s.forEach((a) => {
-      const i = a.match(P), l = a.match(X), v = (i == null ? void 0 : i.join("")) || "";
-      (!i || a !== v) && !l && (t({
+    if (t && t.forEach((a) => {
+      const i = a.match(G), l = a.match(H), C = (i == null ? void 0 : i.join("")) || "";
+      (!i || a !== C) && !l && (n({
         type: c.Error,
         message: o("newsletter.display-conditions-invalid-syntax")
-      }), r = !1), i && i.forEach((C) => {
-        C.trim() === "=" && (t({
+      }), r = !1), i && i.forEach((v) => {
+        v.trim() === "=" && (n({
           type: c.Error,
           message: o("custom-conditions.wrong-equality-operators")
         }), r = !1);
-        const I = C.match(/^[a-zA-Z]*$/g);
-        I && I.forEach((A) => {
-          y(A) && n.push(A);
+        const I = v.match(/^[a-zA-Z]*$/g);
+        I && I.forEach((b) => {
+          y(b) && s.push(b);
         });
       });
-    }), n.length) {
-      const a = n.filter((l) => l === "if"), i = n.filter((l) => l === "endif");
-      a.length !== i.length && (t({
+    }), s.length) {
+      const a = s.filter((l) => l === "if"), i = s.filter((l) => l === "endif");
+      a.length !== i.length && (n({
         type: c.Error,
         message: o("custom-conditions.missing-if-endif-tag")
       }), r = !1);
     }
     return r;
-  }, k = (e) => {
-    const s = (e.match(/{% /gm) || []).length, n = (e.match(/ %}/gm) || []).length, r = s === n;
-    return r || t({
+  }, x = (e) => {
+    const t = (e.match(/{% /gm) || []).length, s = (e.match(/ %}/gm) || []).length, r = t === s;
+    return r || n({
       type: c.Warning,
       message: o("custom-conditions.no-space-after-braces")
     }), r;
-  }, B = (e) => (e.match(/({%(.*?)%})/g) || []).filter((n) => n.includes("if")).map((n) => (n.match(/{{.*}}/gm) || []).length).reduce((n, r) => n + r, 0) > 0 ? (t({
+  }, O = (e) => (e.match(/({%(.*?)%})/g) || []).filter((s) => s.includes("if")).map((s) => (s.match(/{{.*}}/gm) || []).length).reduce((s, r) => s + r, 0) > 0 ? (n({
     type: c.Warning,
     message: o("custom-conditions.no-braces-inside-if-tag")
-  }), !1) : !0, D = () => u.hasInvalidBlock() ? (t({
+  }), !1) : !0, k = () => u.hasInvalidBlock() ? (n({
     type: c.Error,
-    message: o(ee)
-  }), !1) : !0, F = () => d.recommendationConfigs && Object.values(d.recommendationConfigs).find((s) => s.filters.find((n) => n.value === "")) !== void 0 ? (t({
+    message: o(J)
+  }), !1) : !0, B = () => d.recommendationConfigs && Object.values(d.recommendationConfigs).find((t) => t.filters.find((s) => s.value === "")) !== void 0 ? (n({
     type: c.Error,
     message: o("newsletter.fill-all-necessary-fields")
-  }), !1) : !0, L = (e) => {
-    const s = /src="[^"]*\.(svg|pst)"/gm;
-    return e.match(s) === null ? !0 : (t({
+  }), !1) : !0, D = (e) => {
+    const t = /src="[^"]*\.(svg|pst)"/gm;
+    return e.match(t) === null ? !0 : (n({
       type: c.Error,
       message: o("newsletter.invalid-image-type")
     }), !1);
-  }, V = (e) => {
+  }, F = (e) => {
     const r = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".checkbox-block-v2");
     return Array.from(r).find((i) => {
       var l;
       return !((l = i.id) != null && l.trim());
-    }) ? (t({
+    }) ? (n({
       type: c.Error,
       message: o("unsubscribe-templates.select-checkbox-groups")
     }), !1) : !0;
-  }, M = (e) => {
+  }, L = (e) => {
     const r = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".radio-button-v2");
     return Array.from(r).find((i) => {
       var l;
       return !((l = i.id) != null && l.trim());
-    }) ? (t({
+    }) ? (n({
       type: c.Error,
       message: o("unsubscribe-templates.select-radio-button-groups")
     }), !1) : !0;
   };
-  return { validateHtml: async (e, s, n = !1) => {
-    var v, C;
+  return { validateHtml: async (e, t, s = !1) => {
+    var C, v;
     const r = [
-      ...s.map((I) => I.value),
-      ...z,
-      ...((C = (v = f.value) == null ? void 0 : v.template) == null ? void 0 : C.customFieldAttributes) ?? []
-    ], a = G(e), i = await E(a);
-    return await w(e, r, n) && R(e) && _(e) && N(e) && x(e, r, a, i) && O(e) && k(e) && B(e) && D() && F() && L(e) && V(e) && M(e);
+      ...t.map((I) => I.value),
+      ...q,
+      ...((v = (C = f.value) == null ? void 0 : C.template) == null ? void 0 : v.customFieldAttributes) ?? []
+    ], a = M(e), i = await E(a);
+    return await A(e, r, s) && T(e) && w(e) && R(e) && _(e, r, a, i) && N(e) && x(e) && O(e) && k() && B() && D(e) && F(e) && L(e);
   } };
 };
 export {
-  ue as buildPartnerAttributeNameSet,
-  de as findInvalidCustomFields,
-  me as parseRecommendationVariable,
+  me as buildPartnerAttributeNameSet,
+  ue as findInvalidCustomFields,
+  le as parseRecommendationVariable,
   xe as useHtmlValidator
 };

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

@@ -1,7 +1,7 @@
 import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as s } from "../../../common-control.js";
 import { getCurrentLayout as l } from "../main/utils.js";
-const i = "recommendation-card-background-color-control", e = {
+const u = "recommendation-card-background-color-control", e = {
   CARD_BACKGROUND_COLOR: "cardBackgroundColor"
 }, a = {
   GRID: ".product-card-segment",
@@ -9,17 +9,13 @@ const i = "recommendation-card-background-color-control", e = {
 };
 class _ extends s {
   getId() {
-    return i;
+    return u;
   }
   getTemplate() {
-    return `
-            <div class="card-bg-control-container">
-                ${this._GuTwoColumns([
+    return this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Card Background Color") }),
       this._GuColorPicker(e.CARD_BACKGROUND_COLOR)
-    ])}
-            </div>
-        `;
+    ]);
   }
   onRender() {
     this._setFormValues(), this._listenToFormUpdates();
@@ -75,6 +71,6 @@ class _ extends s {
   }
 }
 export {
-  i as CARD_BACKGROUND_COLOR_CONTROL_ID,
+  u as CARD_BACKGROUND_COLOR_CONTROL_ID,
   _ as CardBackgroundColorControl
 };

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

@@ -1,16 +1,16 @@
-var G = Object.defineProperty;
-var P = (u, s, t) => s in u ? G(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
-var C = (u, s, t) => P(u, typeof s != "symbol" ? s + "" : s, t);
-import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as R } from "../../../common-control.js";
-import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as M } from "../../constants/selectors.js";
-import { SPACING_STEP as _, MAX_SPACING as N, MIN_SPACING as b, DEFAULT_COLUMN_SPACING as g, DEFAULT_ROW_SPACING as E } from "../../constants/layout.js";
+var y = Object.defineProperty;
+var M = (u, s, t) => s in u ? y(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var g = (u, s, t) => M(u, typeof s != "symbol" ? s + "" : s, t);
+import { ModificationDescription as S } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as E } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as L } from "../../constants/selectors.js";
+import { SPACING_STEP as P, MAX_SPACING as G, MIN_SPACING as R, DEFAULT_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as I } from "../../constants/layout.js";
 import { RecommendationConfigService as p } from "../../services/configService.js";
 import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
-import { safeGetStyle as L, safeGetParent as V } from "../../utils/tagName.js";
-import { getCurrentLayout as f, getBlockElement as B } from "../main/utils.js";
-import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
-const U = "recommendation-spacing-control", n = {
+import { safeGetStyle as f, safeGetParent as B } from "../../utils/tagName.js";
+import { getCurrentLayout as _, getBlockElement as U } from "../main/utils.js";
+import { useDebounceFn as N } from "../../../../../node_modules/@vueuse/shared/index.js";
+const V = "recommendation-spacing-control", o = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
   ROW_SPACING: "rowSpacing",
@@ -19,97 +19,67 @@ const U = "recommendation-spacing-control", n = {
   MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
   MOBILE_ROW_SPACING: "mobileRowSpacing",
   MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
-}, A = {
+}, b = {
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing",
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function I(u, s) {
+function O(u, s) {
   if (!u)
     return s;
   const t = parseFloat(u);
   return Number.isNaN(t) ? s : t;
 }
-class j extends R {
+class j extends E {
   constructor() {
     super(...arguments);
-    C(this, "store", w());
-    C(this, "unsubscribeOrientation", null);
+    g(this, "store", w());
+    g(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    C(this, "_debouncedOnColumnSpacingChange", O((t) => {
+    g(this, "_debouncedOnColumnSpacingChange", N((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      */
-    C(this, "_debouncedOnRowSpacingChange", O((t) => {
+    g(this, "_debouncedOnRowSpacingChange", N((t) => {
       this._onRowSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileColumnSpacingChange
      */
-    C(this, "_debouncedOnMobileColumnSpacingChange", O((t) => {
+    g(this, "_debouncedOnMobileColumnSpacingChange", N((t) => {
       this._onMobileColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileRowSpacingChange
      */
-    C(this, "_debouncedOnMobileRowSpacingChange", O((t) => {
+    g(this, "_debouncedOnMobileRowSpacingChange", N((t) => {
       this._onMobileRowSpacingChange(t);
     }, 300));
   }
   getId() {
-    return U;
+    return V;
   }
   getTemplate() {
     return `
             <div class="spacing-control-container">
-                ${this._GuTwoColumns([
-      this._GuLabel({
-        text: this.api.translate("Column Spacing (px)"),
-        name: n.COLUMN_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.COLUMN_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Row Spacing (px)"),
-        name: n.ROW_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.ROW_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Column Spacing on Mobile (px)"),
-        name: n.MOBILE_COLUMN_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.MOBILE_COLUMN_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      }),
-      this._GuLabel({
-        text: this.api.translate("Row Spacing on Mobile (px)"),
-        name: n.MOBILE_ROW_SPACING_LABEL
-      }),
-      this._GuCounter({
-        name: n.MOBILE_ROW_SPACING,
-        minValue: b,
-        maxValue: N,
-        step: _
-      })
-    ])}
+                ${this._spacingRow("Column Spacing (px)", o.COLUMN_SPACING_LABEL, o.COLUMN_SPACING)}
+                ${this._spacingRow("Row Spacing (px)", o.ROW_SPACING_LABEL, o.ROW_SPACING)}
+                ${this._spacingRow(
+      "Column Spacing on Mobile (px)",
+      o.MOBILE_COLUMN_SPACING_LABEL,
+      o.MOBILE_COLUMN_SPACING
+    )}
+                ${this._spacingRow(
+      "Row Spacing on Mobile (px)",
+      o.MOBILE_ROW_SPACING_LABEL,
+      o.MOBILE_ROW_SPACING
+    )}
             </div>
         `;
   }
@@ -122,6 +92,21 @@ class j extends R {
   onDestroy() {
     this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
   }
+  /**
+   * One label + counter per two-column row, so every spacing field gets the same
+   * 16px-padded row the color controls already render instead of sharing one grid.
+   */
+  _spacingRow(t, e, n) {
+    return this._GuTwoColumns([
+      this._GuLabel({ text: this.api.translate(t), name: e }),
+      this._GuCounter({
+        name: n,
+        minValue: R,
+        maxValue: G,
+        step: P
+      })
+    ]);
+  }
   /**
    * Updates spacing control visibility based on layout orientation and mobileLayoutEnabled.
    * - List layout: hide column spacing (products are full-width), hide ALL mobile
@@ -132,14 +117,14 @@ class j extends R {
   _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || f(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, c = t.mobileCardsInRow > 1;
-    this.api.setVisibility(n.COLUMN_SPACING, i && r), this.api.setVisibility(n.COLUMN_SPACING_LABEL, i && r), this.api.setVisibility(n.ROW_SPACING, !0), this.api.setVisibility(n.ROW_SPACING_LABEL, !0), this.api.setVisibility(
-      n.MOBILE_COLUMN_SPACING,
+    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || _(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, c = t.mobileCardsInRow > 1;
+    this.api.setVisibility(o.COLUMN_SPACING, i && r), this.api.setVisibility(o.COLUMN_SPACING_LABEL, i && r), this.api.setVisibility(o.ROW_SPACING, !0), this.api.setVisibility(o.ROW_SPACING_LABEL, !0), this.api.setVisibility(
+      o.MOBILE_COLUMN_SPACING,
       i && a && c
     ), this.api.setVisibility(
-      n.MOBILE_COLUMN_SPACING_LABEL,
+      o.MOBILE_COLUMN_SPACING_LABEL,
       i && a && c
-    ), this.api.setVisibility(n.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(n.MOBILE_ROW_SPACING_LABEL, i && a);
+    ), this.api.setVisibility(o.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(o.MOBILE_ROW_SPACING_LABEL, i && a);
   }
   /**
    * Reads spacing values from node config first, falls back to DOM styles.
@@ -148,12 +133,12 @@ class j extends R {
   _setFormValues() {
     if (!this.api)
       return;
-    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), o = t ? e.columnSpacing : this._getStoredColumnSpacing(), i = t ? e.rowSpacing : this._getStoredRowSpacing();
+    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), n = t ? e.columnSpacing : this._getStoredColumnSpacing(), i = t ? e.rowSpacing : this._getStoredRowSpacing();
     this.api.updateValues({
-      [n.COLUMN_SPACING]: o,
-      [n.ROW_SPACING]: i,
-      [n.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
-      [n.MOBILE_ROW_SPACING]: e.mobileRowSpacing
+      [o.COLUMN_SPACING]: n,
+      [o.ROW_SPACING]: i,
+      [o.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
+      [o.MOBILE_ROW_SPACING]: e.mobileRowSpacing
     });
   }
   /**
@@ -165,20 +150,20 @@ class j extends R {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return g;
-    const t = this.currentNode.querySelector(S) ?? this.currentNode;
-    if (f(this.currentNode) === "grid") {
-      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = L(l, "padding");
+      return C;
+    const t = this.currentNode.querySelector(m) ?? this.currentNode;
+    if (_(this.currentNode) === "grid") {
+      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = f(l, "padding");
       if (!d)
-        return g;
-      const y = d.trim().split(/\s+/);
-      return y.length < 2 ? g : I(y[1], g / 2) * 2;
+        return C;
+      const A = d.trim().split(/\s+/);
+      return A.length < 2 ? C : O(A[1], C / 2) * 2;
     }
-    const o = t.querySelector(".product-card-wrapper") ?? null, i = V(o), a = L(i, "padding");
+    const n = t.querySelector(".product-card-wrapper") ?? null, i = B(n), a = f(i, "padding");
     if (!a)
-      return g;
+      return C;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? g : I(r[1], g / 2) * 2;
+    return r.length < 2 ? C : O(r[1], C / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -186,9 +171,9 @@ class j extends R {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return E;
-    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer") ?? null, o = L(e, "height");
-    return I(o, E);
+      return I;
+    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer") ?? null, n = f(e, "height");
+    return O(n, I);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -205,9 +190,9 @@ class j extends R {
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeDataAttribute(A.COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
-    c && (o === "grid" ? Array.from(
+    ), this._storeDataAttribute(b.COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || _(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(m);
+    c && (n === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
     ).forEach((l) => {
       i.modifyHtml(l).setStyle("padding", r);
@@ -216,7 +201,7 @@ class j extends R {
     ).forEach((l) => {
       const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new m(`Update column spacing to ${t}px`)));
+    }), i.apply(new S(`Update column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -230,19 +215,19 @@ class j extends R {
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeDataAttribute(A.ROW_SPACING, t);
-    const e = this.currentNode.querySelector(S);
+    ), this._storeDataAttribute(b.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(m);
     if (!e)
       return;
-    const o = Array.from(
+    const n = Array.from(
       e.querySelectorAll(".spacer")
     );
-    if (!o.length)
+    if (!n.length)
       return;
     const i = this.api.getDocumentModifier(), a = `${t}px`;
-    o.forEach((r) => {
+    n.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new m(`Update row spacing to ${t}px`));
+    }), i.apply(new S(`Update row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -259,9 +244,9 @@ class j extends R {
       this.currentNode,
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
-    ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(M);
-    c && (o === "grid" ? Array.from(
+    ), this._storeDataAttribute(b.MOBILE_COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || _(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(L);
+    c && (n === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
     ).forEach((l) => {
       i.modifyHtml(l).setStyle("padding", r);
@@ -270,7 +255,7 @@ class j extends R {
     ).forEach((l) => {
       const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
-    }), i.apply(new m(`Update mobile column spacing to ${t}px`)));
+    }), i.apply(new S(`Update mobile column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -284,19 +269,19 @@ class j extends R {
       this.currentNode,
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(M);
+    ), this._storeDataAttribute(b.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(L);
     if (!e)
       return;
-    const o = Array.from(
+    const n = Array.from(
       e.querySelectorAll(".spacer")
     );
-    if (!o.length)
+    if (!n.length)
       return;
     const i = this.api.getDocumentModifier(), a = `${t}px`;
-    o.forEach((r) => {
+    n.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new m(`Update mobile row spacing to ${t}px`));
+    }), i.apply(new S(`Update mobile row spacing to ${t}px`));
   }
   // ========================================================================
   // Data Attribute Storage
@@ -305,23 +290,23 @@ class j extends R {
    * Stores a spacing value as a data attribute on the block root element
    */
   _storeDataAttribute(t, e) {
-    const o = B(this.currentNode);
-    o && this.api.getDocumentModifier().modifyHtml(o).setAttribute(t, e.toString()).apply(new m(`Store ${t}`));
+    const n = U(this.currentNode);
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new S(`Store ${t}`));
   }
   // ========================================================================
   // Event Listeners
   // ========================================================================
   _listenToFormUpdates() {
-    this.api.onValueChanged(n.COLUMN_SPACING, (t) => {
+    this.api.onValueChanged(o.COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(n.ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(o.ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
-    }), this.api.onValueChanged(n.MOBILE_COLUMN_SPACING, (t) => {
+    }), this.api.onValueChanged(o.MOBILE_COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnMobileColumnSpacingChange(e);
-    }), this.api.onValueChanged(n.MOBILE_ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(o.MOBILE_ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnMobileRowSpacingChange(e);
     });
@@ -337,6 +322,6 @@ class j extends R {
   }
 }
 export {
-  U as SPACING_CONTROL_ID,
+  V as SPACING_CONTROL_ID,
   j as SpacingControl
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -25,6 +25,27 @@ const n = `/* Utils */
     border-top: none;
 }
 
+/* The editor's row-separator rule only reaches \`.container\`s that are direct
+   children of \`.container-wrapper\`; the spacing rows sit one level deeper, so the
+   first one loses its line. Restore it with the editor's own border token. */
+.spacing-control-container > .container {
+    border-top: var(--ue-border-width-1, 1px) solid var(--ue-panels-border-color, rgba(0, 0, 0, 0.07));
+}
+
+/* A spacing field that doesn't apply (mobile rows, column spacing in list layout) is
+   removed from its row and leaves the wrapper behind — collapse it so it can't
+   render as an empty separator-topped strip. */
+.spacing-control-container > .container:not(:has(ue-counter)) {
+    display: none;
+}
+
+/* The block background row stacks the editor's "inherits background color" banner
+   above its field, separated by the editor's default 10px gap — match the tab's 16px.
+   Scoped via the spacing control so other blocks keep the default. */
+.ue-scrollable-content:has(.spacing-control-container) .e2e-block-bg-color {
+    row-gap: 16px;
+}
+
 /* Right-align the mobile layout toggle within the two-column grid */
 .product-layout-control-container ue-switcher {
     justify-self: end;

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

@@ -30,6 +30,11 @@ export declare class SpacingControl extends CommonControl {
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
     onDestroy(): void;
+    /**
+     * One label + counter per two-column row, so every spacing field gets the same
+     * 16px-padded row the color controls already render instead of sharing one grid.
+     */
+    _spacingRow(label: string, labelName: string, counterName: string): string;
     /**
      * Updates spacing control visibility based on layout orientation and mobileLayoutEnabled.
      * - List layout: hide column spacing (products are full-width), hide ALL mobile

package/dist/src/stores/dynamic-content.d.ts

@@ -36,4 +36,12 @@ export declare const useDynamicContentStore: import("pinia").StoreDefinition<"gu
     }[];
 }, {
     setSelectedDynamicContent(dynamicContent: DynamicContent): void;
+    /**
+     * Append-only bulk registration for dynamic content used by an
+     * AI-applied template. Unlike `setSelectedDynamicContent` it doesn't
+     * touch `selectedDynamicContent`; the getter removes duplicates, so
+     * re-registering the same entries is harmless. Items are shallow-copied so Pinia
+     * reactivity can't write a later mutation back into the host's catalog.
+     */
+    registerDynamicContent(items: DynamicContent[]): void;
 }>;

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

@@ -0,0 +1,8 @@
+import type { DynamicContent } from '@@/Types/generic';
+export declare const extractUsedDynamicContent: (html: string, flattenedCatalog: DynamicContent[] | undefined | null) => DynamicContent[];
+/**
+ * Dev-diagnostic sibling of `extractUsedDynamicContent`: the used token names
+ * with NO catalog match (so intentionally not registered). Surfaced via a
+ * dev-gated `console.debug` to spot a neo↔guido vocabulary mismatch. Never throws.
+ */
+export declare const getUnmatchedDynamicContentTokens: (html: string, flattenedCatalog: DynamicContent[] | undefined | null) => string[];

package/dist/stores/dynamic-content.js

@@ -1,6 +1,6 @@
 import { removeDuplicatesFromArray as n } from "../utils/arrayUtil.js";
 import { defineStore as a } from "pinia";
-const s = a("guidoDynamicContent", {
+const c = a("guidoDynamicContent", {
   state: () => ({
     selectedDynamicContent: { text: "", value: "" },
     selectedDynamicContentList: []
@@ -8,6 +8,16 @@ const s = a("guidoDynamicContent", {
   actions: {
     setSelectedDynamicContent(t) {
       this.selectedDynamicContent = t, this.selectedDynamicContentList.push(t);
+    },
+    /**
+     * Append-only bulk registration for dynamic content used by an
+     * AI-applied template. Unlike `setSelectedDynamicContent` it doesn't
+     * touch `selectedDynamicContent`; the getter removes duplicates, so
+     * re-registering the same entries is harmless. Items are shallow-copied so Pinia
+     * reactivity can't write a later mutation back into the host's catalog.
+     */
+    registerDynamicContent(t) {
+      this.selectedDynamicContentList.push(...t.map((e) => ({ ...e })));
     }
   },
   getters: {
@@ -20,5 +30,5 @@ const s = a("guidoDynamicContent", {
   }
 });
 export {
-  s as useDynamicContentStore
+  c as useDynamicContentStore
 };

package/dist/utils/registerUsedDynamicContent.js

@@ -0,0 +1,23 @@
+import { DATA_ATTRIBUTE_REGEX as T } from "../enums/html-validator.js";
+const d = /{{([a-zA-Z0-9_.\s]*)}}/gm, h = (n, e) => {
+  if (!e || e.length === 0)
+    return { matched: [], unmatchedTokens: [] };
+  const s = n.replace(T, "$1").match(d);
+  if (!s)
+    return { matched: [], unmatchedTokens: [] };
+  const u = new Map(
+    e.map((c) => [c.value.trim().toLowerCase(), c])
+  ), a = /* @__PURE__ */ new Set(), o = [], m = [];
+  return s.forEach((c) => {
+    const t = c.slice(2, -2).trim().toLowerCase();
+    if (t === "" || a.has(t))
+      return;
+    a.add(t);
+    const r = u.get(t);
+    r ? o.push(r) : m.push(t);
+  }), { matched: o, unmatchedTokens: m };
+}, E = (n, e) => h(n, e).matched, k = (n, e) => h(n, e).unmatchedTokens;
+export {
+  E as extractUsedDynamicContent,
+  k as getUnmatchedDynamicContentTokens
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.14.1-beta.9ad6513",
+  "version": "3.15.0-beta.166619d",
   "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",