@useinsider/guido 2.1.0-beta.0e87316 → 2.1.0-beta.138d8fe

package/dist/config/migrator/recommendationMigrator.js

@@ -1,24 +1,26 @@
 var h = Object.defineProperty;
-var T = (A, e, t) => e in A ? h(A, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : A[e] = t;
-var m = (A, e, t) => T(A, typeof e != "symbol" ? e + "" : e, t);
-import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
-import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/utils.js";
-class w {
+var T = (d, e, t) => e in d ? h(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
+var A = (d, e, t) => T(d, typeof e != "symbol" ? e + "" : e, t);
+import { BLOCK_ID as S } from "../../extensions/Blocks/Recommendation/block.js";
+import P, { prepareProductRows as q } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
+import { useTemplateStore as w } from "../../stores/template.js";
+import { getDefaultProducts as B } from "../../extensions/Blocks/Recommendation/templates/utils.js";
+class $ {
   constructor() {
-    m(this, "parser");
+    A(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(e) {
     try {
       const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll(
         'td.ins-recommendation-v3-block-1, td.product-block[esd-handler-name*="EmailRecommendationV3"]'
-      );
-      return s.length === 0 ? e : (s.forEach((o) => {
-        const l = o.getAttribute("id"), r = this.extractBgColor(o), i = this.extractTitle(o), u = this.extractProductRows(o), c = P.replace("{-{-TITLE-}-}", i).replace("{-{-PRODUCT_ROWS-}-}", u), a = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
+      ), o = w();
+      return o.migrations[S] = s.length, s.length === 0 ? e : (s.forEach((n) => {
+        const r = n.getAttribute("id"), i = this.extractBgColor(n), u = this.extractTitle(n), c = this.extractProductRows(n), l = P.replace("{-{-TITLE-}-}", u).replace("{-{-PRODUCT_ROWS-}-}", c), a = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${l}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".ins-recommendation-v3-block-v2");
-        a && o.parentNode && (l && a.setAttribute("id", l), r && a.setAttribute("bgcolor", r), o.parentNode.replaceChild(a, o));
+        a && n.parentNode && (r && a.setAttribute("id", r), i && a.setAttribute("bgcolor", i), n.parentNode.replaceChild(a, n));
       }), t.documentElement.outerHTML);
     } catch (t) {
       return console.error("RecommendationMigrator failed:", t), e;
@@ -64,7 +66,7 @@ class w {
    * @returns HTML string for the title block
    */
   extractTitle(e) {
-    var a, g;
+    var g, a;
     const t = e.querySelector(".ext-recommendation-title");
     if (!t)
       return this.buildTitleBlock({
@@ -76,7 +78,7 @@ class w {
       });
     const s = t.querySelector("p");
     if (!s) {
-      const p = ((a = t.textContent) == null ? void 0 : a.trim()) || "You May Also Like!", b = t.getAttribute("align") || "center";
+      const p = ((g = t.textContent) == null ? void 0 : g.trim()) || "You May Also Like!", b = t.getAttribute("align") || "center";
       return this.buildTitleBlock({
         text: p,
         isBold: !0,
@@ -85,13 +87,13 @@ class w {
         styles: "font-size: 28px; color: #333333;"
       });
     }
-    const o = ((g = s.textContent) == null ? void 0 : g.trim()) || "You May Also Like!", l = t.getAttribute("align") || s.getAttribute("align") || "center", r = s.getAttribute("style") || "", i = /font-weight\s*:\s*bold/i.test(r) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(r) || !!s.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), n = this.convertInlineToBlock(c);
+    const o = ((a = s.textContent) == null ? void 0 : a.trim()) || "You May Also Like!", n = t.getAttribute("align") || s.getAttribute("align") || "center", r = s.getAttribute("style") || "", i = /font-weight\s*:\s*bold/i.test(r) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(r) || !!s.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), l = this.convertInlineToBlock(c);
     return this.buildTitleBlock({
       text: o,
       isBold: i,
       isItalic: u,
-      align: l,
-      styles: n
+      align: n,
+      styles: l
     });
   }
   /**
@@ -103,8 +105,8 @@ class w {
     const t = this.extractProductConfig(e);
     if (!t)
       return console.warn("[RecommendationMigrator] No product config found, using defaults"), this.generateProductRows(6, 3, {});
-    const { totalCount: s, productsPerRow: o } = t, l = this.extractProductStyles(e);
-    return this.generateProductRows(s, o, l);
+    const { totalCount: s, productsPerRow: o } = t, n = this.extractProductStyles(e);
+    return this.generateProductRows(s, o, n);
   }
   /**
    * Extracts Stripo padding/margin utility classes from a class string
@@ -152,12 +154,12 @@ class w {
    * @returns HTML string for product rows with applied styles
    */
   generateProductRows(e, t, s) {
-    const o = q(), l = [];
+    const o = B(), n = [];
     for (let i = 0; i < e; i++) {
       const u = o[i % o.length];
-      l.push({ ...u });
+      n.push({ ...u });
     }
-    let r = S(l, t);
+    let r = q(n, t);
     return r = this.applyExtractedStyles(r, s), r;
   }
   /**
@@ -171,30 +173,30 @@ class w {
       return console.warn("[RecommendationMigrator] No product card found, using default styles"), t;
     const o = this.extractCardBgColor(s);
     o && (t.cardBgColor = o);
-    const l = s.querySelector(".ext-product-image");
-    if (l) {
-      const n = l.querySelector("img"), a = n == null ? void 0 : n.getAttribute("width"), g = l.getAttribute("style") || "", p = l.getAttribute("align") || "center", b = l.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.imageWidth = a || "120", t.imageAlign = p, t.imageTdStyle = g, t.imageClasses = d;
+    const n = s.querySelector(".ext-product-image");
+    if (n) {
+      const l = n.querySelector("img"), g = l == null ? void 0 : l.getAttribute("width"), a = n.getAttribute("style") || "", p = n.getAttribute("align") || "center", b = n.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.imageWidth = g || "120", t.imageAlign = p, t.imageTdStyle = a, t.imageClasses = m;
     }
     const r = s.querySelector(".ext-product-name");
     if (r) {
-      const n = r.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = r.getAttribute("align") || "center", p = r.getAttribute("style") || "", b = r.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.nameStyle = a, t.nameAlign = g, t.nameTdStyle = p, t.nameClasses = d;
+      const l = r.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = r.getAttribute("align") || "center", p = r.getAttribute("style") || "", b = r.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.nameStyle = g, t.nameAlign = a, t.nameTdStyle = p, t.nameClasses = m;
     }
     const i = s.querySelector(".ext-product-price");
     if (i) {
-      const n = i.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = i.getAttribute("align") || "center", p = i.getAttribute("style") || "", b = i.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.priceStyle = a, t.priceAlign = g, t.priceTdStyle = p, t.priceClasses = d;
+      const l = i.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = i.getAttribute("align") || "center", p = i.getAttribute("style") || "", b = i.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.priceStyle = g, t.priceAlign = a, t.priceTdStyle = p, t.priceClasses = m;
     }
     const u = s.querySelector(".ext-product-original-price");
     if (u) {
-      const n = u.querySelector("p"), a = (n == null ? void 0 : n.getAttribute("style")) || "", g = u.getAttribute("align") || "center", p = u.getAttribute("style") || "", b = u.getAttribute("class") || "", d = this.extractStripoClasses(b);
-      t.oldPriceStyle = a, t.oldPriceAlign = g, t.oldPriceTdStyle = p, t.oldPriceClasses = d;
+      const l = u.querySelector("p"), g = (l == null ? void 0 : l.getAttribute("style")) || "", a = u.getAttribute("align") || "center", p = u.getAttribute("style") || "", b = u.getAttribute("class") || "", m = this.extractStripoClasses(b);
+      t.oldPriceStyle = g, t.oldPriceAlign = a, t.oldPriceTdStyle = p, t.oldPriceClasses = m;
     }
     const c = s.querySelector(".ext-product-button");
     if (c) {
-      const n = c.querySelector(".es-button-border"), a = c.querySelector("a.es-button"), g = (n == null ? void 0 : n.getAttribute("style")) || "", p = (a == null ? void 0 : a.getAttribute("style")) || "", b = c.getAttribute("align") || "center", d = c.getAttribute("style") || "", f = c.getAttribute("class") || "", C = this.extractStripoClasses(f), y = ((c == null ? void 0 : c.textContent) || "").trim();
-      t.buttonBorderStyle = g, t.buttonLinkStyle = p, t.buttonAlign = b, t.buttonTdStyle = d, t.buttonClasses = C, t.buttonText = y;
+      const l = c.querySelector(".es-button-border"), g = c.querySelector("a.es-button"), a = (l == null ? void 0 : l.getAttribute("style")) || "", p = (g == null ? void 0 : g.getAttribute("style")) || "", b = c.getAttribute("align") || "center", m = c.getAttribute("style") || "", f = c.getAttribute("class") || "", C = this.extractStripoClasses(f), y = ((c == null ? void 0 : c.textContent) || "").trim();
+      t.buttonBorderStyle = a, t.buttonLinkStyle = p, t.buttonAlign = b, t.buttonTdStyle = m, t.buttonClasses = C, t.buttonText = y;
     }
     return t;
   }
@@ -240,8 +242,8 @@ class w {
       i && t.oldPriceStyle && i.setAttribute("style", t.oldPriceStyle);
     }), (t.buttonBorderStyle || t.buttonLinkStyle || t.buttonAlign || t.buttonTdStyle || t.buttonClasses) && s.querySelectorAll(".product-button").forEach((r) => {
       if (t.buttonAlign && r.setAttribute("align", t.buttonAlign), t.buttonTdStyle && r.setAttribute("style", t.buttonTdStyle), t.buttonClasses) {
-        const n = `${r.getAttribute("class") || ""} ${t.buttonClasses}`.trim();
-        r.setAttribute("class", n);
+        const l = `${r.getAttribute("class") || ""} ${t.buttonClasses}`.trim();
+        r.setAttribute("class", l);
       }
       const i = r.querySelector(".es-button-border");
       i && t.buttonBorderStyle && i.setAttribute("style", t.buttonBorderStyle);
@@ -270,8 +272,8 @@ class w {
    * Removes specified style properties from a style string
    */
   removeStyleProperties(e, t) {
-    return e ? t.reduce((o, l) => {
-      const r = new RegExp(`${l}\\s*:\\s*[^;]*;?`, "gi");
+    return e ? t.reduce((o, n) => {
+      const r = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
       return o.replace(r, "");
     }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
   }
@@ -285,9 +287,9 @@ class w {
     return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").replace(/"/g, "'").trim();
   }
 }
-function k(A) {
-  return new w().migrate(A);
+function v(d) {
+  return new $().migrate(d);
 }
 export {
-  k as migrateRecommendation
+  v as migrateRecommendation
 };

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

@@ -1,18 +1,19 @@
-import { useOnboardingStore as d } from "../../../stores/onboarding.js";
-import { Block as g, BlockCompositionType as f, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { SETTINGS_ENUMS as c, DefaultConfigValues as i } from "./enums/settingsEnums.js";
-import { getDefaultTemplate as p } from "./template.js";
-import { getItemsBlockContainer as u, getItemsBlockConfig as C, getDefaultItemsBlockConfig as I } from "./utils/nodeConfigUtils.js";
-const y = "items-block";
-class B extends g {
+import { useOnboardingStore as g } from "../../../stores/onboarding.js";
+import { useTemplateStore as f } from "../../../stores/template.js";
+import { Block as u, BlockCompositionType as I, UIElementType as c, UEAttr as C, ModificationDescription as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SETTINGS_ENUMS as l, DefaultConfigValues as s } from "./enums/settingsEnums.js";
+import { getDefaultTemplate as y } from "./template.js";
+import { getItemsBlockContainer as b, getItemsBlockConfig as k, getDefaultItemsBlockConfig as N } from "./utils/nodeConfigUtils.js";
+const m = "items-block";
+class M extends u {
   getId() {
-    return y;
+    return m;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return f.CONTAINER;
+    return I.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -20,35 +21,54 @@ class B extends g {
   getDescription() {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
+  getSettingsPanelTitleHtml() {
+    if (f().migrations[m] === 0)
+      return "";
+    const n = this.api.translate("Items"), o = 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.");
+    return `<div>
+            <div style="display: flex; align-items: center;">
+                <span>${n}</span>
+            </div>
+            <div class="items-migration-info">
+                <${c.ICON}
+                    ${C.ICON.src}="migration-info-icon"
+                    class="items-migration-info__icon">
+                </${c.ICON}>
+                <p class="items-migration-info__text">
+                    ${o}
+                </p>
+            </div>
+        </div>`;
+  }
   getTemplate() {
-    return p({
-      orientation: c.ORIENTATION.VERTICAL,
-      itemsType: c.ITEMS_TYPE.CART_ITEMS,
+    return y({
+      orientation: l.ORIENTATION.VERTICAL,
+      itemsType: l.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
-      currencySymbol: i.productPriceCurrencySymbolControlValue,
-      currencyLocation: i.productPriceCurrencyLocationControlValue,
-      formattedPrice: i.productPriceFormattedControlValue === "1"
+      currencySymbol: s.productPriceCurrencySymbolControlValue,
+      currencyLocation: s.productPriceCurrencyLocationControlValue,
+      formattedPrice: s.productPriceFormattedControlValue === "1"
     });
   }
   allowInnerBlocksDND() {
     return !1;
   }
-  onCreated(n) {
-    const s = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
-    r.querySelector('[product-attr="imageSrc"] img') || s.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const e = u(n);
+  onCreated(i) {
+    const n = this.api.getDocumentModifier(), o = this.api.getDocumentRootCssNode();
+    o.querySelector('[product-attr="imageSrc"] img') || n.modifyCss(o).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
+    const e = b(i);
     if (!e)
       return;
-    const a = e.getNodeConfig(), l = a && Object.keys(a).length > 0, t = C(n);
+    const a = e.getNodeConfig(), d = a && Object.keys(a).length > 0, t = k(i);
     if (t != null && t.initialized)
-      l ? 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"));
+      d ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new r("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new r("Migrate legacy config to nodeConfig"));
     else {
-      const m = I();
-      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new o("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
+      const p = N();
+      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(p).apply(new r("Initialize Items block with default configuration")), g().startOnboarding("itemsOnboarding");
     }
   }
 }
 export {
-  y as BLOCK_ID,
-  B as ItemsBlock
+  m as BLOCK_ID,
+  M as ItemsBlock
 };

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

@@ -1,5 +1,6 @@
 import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class i extends o {
+import { MIGRATION_INFO_ICON as r } from "../common-icons.js";
+class s extends o {
   registerIconsSvg(t) {
     t["items-icon"] = `
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -19,14 +20,14 @@ class i extends o {
             </svg>
         `, t["horizontal-orientation"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor" 
+                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
-                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor" 
+                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
             </svg>
-        `;
+        `, t["migration-info-icon"] = r;
   }
 }
 export {
-  i as ItemsIconsRegistry
+  s as ItemsIconsRegistry
 };

package/dist/extensions/Blocks/Items/items.css.js

@@ -17,6 +17,54 @@ const n = `/* Utils */
 .container:has(.items-controls-container) {
     padding: 0
 }
+
+/* ─── Migration Info Box ─────────────────────────────────────────────── */
+/* Shown in the settings panel title when a block was migrated from legacy */
+
+/* Layout variables for positioning the absolutely-placed info box */
+:host {
+    --items-migration-padding: 16px;
+    --items-migration-title-height: 61px;
+    --items-migration-box-height: 98px;
+}
+
+/* Push tabs down when info box is present inside the control panel header */
+.control-panel-header:has(.items-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--items-migration-padding) + var(--items-migration-box-height));
+}
+
+/* Info box container */
+.items-migration-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: var(--guido-color-background-onpage-message-info);
+    border: 1px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    position: absolute;
+    left: var(--items-migration-padding);
+    right: var(--items-migration-padding);
+    top: calc(var(--items-migration-padding) + var(--items-migration-title-height));
+}
+
+/* Icon — 18x19 icon inside a 24x24 bounding box (matches Figma) */
+.items-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.items-migration-info__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
 `;
 export {
   n as default

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

@@ -1,13 +1,14 @@
-var p = Object.defineProperty;
-var f = (r, o, t) => o in r ? p(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var g = (r, o, t) => f(r, typeof o != "symbol" ? o + "" : o, t);
-import { Block as h, BlockCompositionType as I, ModificationDescription as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ensureMobileCssRulesExist as d } from "./controls/mobileLayout/cssRules.js";
+var h = Object.defineProperty;
+var I = (r, o, t) => o in r ? h(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var g = (r, o, t) => I(r, typeof o != "symbol" ? o + "" : o, t);
+import { useTemplateStore as k } from "../../../stores/template.js";
+import { Block as _, BlockCompositionType as B, UIElementType as d, UEAttr as C, ModificationDescription as A } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ensureMobileCssRulesExist as u } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as s } from "./services/configService.js";
-import { useRecommendationExtensionStore as u } from "./store/recommendation.js";
-import { getDefaultTemplate as k } from "./templates/grid/template.js";
-const B = "recommendation-block", c = "ins-recommendation-v3-block-v2", a = "recommendation-id";
-class y extends h {
+import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
+import { getDefaultTemplate as R } from "./templates/grid/template.js";
+const f = "recommendation-block", c = "ins-recommendation-v3-block-v2", a = "recommendation-id";
+class E extends _ {
   constructor() {
     super();
     /**
@@ -17,13 +18,13 @@ class y extends h {
     g(this, "_pendingBlockId", null);
   }
   getId() {
-    return B;
+    return f;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return I.CONTAINER;
+    return B.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -31,6 +32,25 @@ class y extends h {
   getDescription() {
     return this.api.translate("Recommendation Block Title Description");
   }
+  getSettingsPanelTitleHtml() {
+    if (k().migrations[f] === 0)
+      return "";
+    const e = this.api.translate("Recommendation Block"), i = this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.");
+    return `<div>
+            <div style="display: flex; align-items: center;">
+                <span>${e}</span>
+            </div>
+            <div class="recommendation-migration-info">
+                <${d.ICON}
+                    ${C.ICON.src}="migration-info-icon"
+                    class="recommendation-migration-info__icon">
+                </${d.ICON}>
+                <p class="recommendation-migration-info__text">
+                    ${i}
+                </p>
+            </div>
+        </div>`;
+  }
   /**
    * Returns the template HTML for a new recommendation block.
    * Generates a unique recommendation ID and embeds the instance class
@@ -40,7 +60,7 @@ class y extends h {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, k(t);
+    return this._pendingBlockId = t, R(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -52,8 +72,8 @@ class y extends h {
   onCreated(t) {
     const e = this._pendingBlockId ?? this._generateNextId();
     this._pendingBlockId = null, this._assignRecommendationId(t, e);
-    const n = s.initializeConfig(this.api, t, { recommendationId: e }), i = u();
-    i.setCurrentBlock(e), d(this.api), i.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 });
+    const i = s.initializeConfig(this.api, t, { recommendationId: e }), n = p();
+    n.setCurrentBlock(e), u(this.api), n.patchCurrentBlockConfig({ language: i.language }, { triggerRefetch: !1 });
   }
   /**
    * Called when the document changes or template is loaded
@@ -73,7 +93,7 @@ class y extends h {
           "Assign recommendation ID to legacy block"
         );
       }
-      s.needsMigration(t) && this._migrateFromLegacy(t), d(this.api);
+      s.needsMigration(t) && this._migrateFromLegacy(t), u(this.api);
     }
   }
   /**
@@ -84,7 +104,7 @@ class y extends h {
    */
   onDelete(t) {
     const e = this._getRecommendationId(t);
-    e && u().removeBlockState(e);
+    e && p().removeBlockState(e);
   }
   /**
    * Generates the next unique recommendation ID by scanning all existing blocks
@@ -94,9 +114,9 @@ class y extends h {
     let t = 0;
     try {
       const e = this.api.getDocumentRoot();
-      e && "querySelectorAll" in e && e.querySelectorAll(`.${c}`).forEach((i) => {
-        if ("getAttribute" in i) {
-          const m = i.getAttribute(a), l = m ? parseInt(m) : 0;
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${c}`).forEach((n) => {
+        if ("getAttribute" in n) {
+          const m = n.getAttribute(a), l = m ? parseInt(m) : 0;
           l > t && (t = l);
         }
       });
@@ -111,11 +131,11 @@ class y extends h {
    * added classes via setAttribute.
    */
   _assignRecommendationId(t, e) {
-    const n = this._getBlockElement(t);
-    if (!n)
+    const i = this._getBlockElement(t);
+    if (!i)
       return;
-    const i = this.api.getDocumentModifier();
-    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new _(`Assign recommendation ID ${e}`));
+    const n = this.api.getDocumentModifier();
+    n.modifyHtml(i).setAttribute(a, e.toString()), n.apply(new A(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -124,11 +144,11 @@ class y extends h {
     const e = this._getBlockElement(t);
     if (!e || !("getAttribute" in e))
       return null;
-    const n = e.getAttribute(a);
-    if (!n)
+    const i = e.getAttribute(a);
+    if (!i)
       return null;
-    const i = parseInt(n);
-    return Number.isNaN(i) ? null : i;
+    const n = parseInt(i);
+    return Number.isNaN(n) ? null : n;
   }
   /**
    * Gets the block element (the element with BLOCK_CLASS)
@@ -149,6 +169,6 @@ class y extends h {
   }
 }
 export {
-  B as BLOCK_ID,
-  y as RecommendationBlock
+  f as BLOCK_ID,
+  E as RecommendationBlock
 };

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

@@ -1,5 +1,6 @@
 import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class o extends r {
+import { MIGRATION_INFO_ICON as t } from "../common-icons.js";
+class h extends r {
   registerIconsSvg(C) {
     C["recommendation-icon"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -59,9 +60,9 @@ class o extends r {
                 <circle cx="3" cy="16" r="1" stroke="currentColor" stroke-width="1"/>
                 <rect x="7" y="15" width="11" height="2" rx="1"/>
             </svg>
-        `;
+        `, C["migration-info-icon"] = t;
   }
 }
 export {
-  o as RecommendationIconsRegistry
+  h as RecommendationIconsRegistry
 };

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

@@ -22,6 +22,54 @@ const n = `/* Utils */
 ue-orderable.orderable-disabled .droppable-icon {
     display: none;
 }
+
+/* ─── Migration Info Box ─────────────────────────────────────────────── */
+/* Shown in the settings panel title when a block was migrated from legacy */
+
+/* Layout variables for positioning the absolutely-placed info box */
+:host {
+    --rec-migration-padding: 16px;
+    --rec-migration-title-height: 61px;
+    --rec-migration-box-height: 98px;
+}
+
+/* Push tabs down when info box is present inside the control panel header */
+.control-panel-header:has(.recommendation-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--rec-migration-padding) + var(--rec-migration-box-height));
+}
+
+/* Info box container */
+.recommendation-migration-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: var(--guido-color-background-onpage-message-info);
+    border: 1px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    position: absolute;
+    left: var(--rec-migration-padding);
+    right: var(--rec-migration-padding);
+    top: calc(var(--rec-migration-padding) + var(--rec-migration-title-height));
+}
+
+/* Icon — 18x19 icon inside a 24x24 bounding box (matches Figma) */
+.recommendation-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.recommendation-migration-info__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
 `;
 export {
   n as default