@useinsider/guido 3.0.0-beta.de55333 → 3.0.0-beta.e7bc91a

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

@@ -1,18 +1,20 @@
-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 { BlockId as g } from "../../../enums/block.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 u {
   getId() {
-    return y;
+    return c;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return f.CONTAINER;
+    return I.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -20,10 +22,17 @@ class B extends g {
   getDescription() {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
+  getSettingsPanelTitleHtml() {
+    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.")
+    );
+  }
   getTemplate() {
-    return p({
-      orientation: c.ORIENTATION.VERTICAL,
-      itemsType: c.ITEMS_TYPE.CART_ITEMS,
+    return C({
+      orientation: a.ORIENTATION.VERTICAL,
+      itemsType: a.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
       currencySymbol: i.productPriceCurrencySymbolControlValue,
       currencyLocation: i.productPriceCurrencyLocationControlValue,
@@ -34,21 +43,21 @@ class B extends g {
     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);
+    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 e = y(n);
     if (!e)
       return;
-    const a = e.getNodeConfig(), l = a && Object.keys(a).length > 0, t = C(n);
+    const s = e.getNodeConfig(), m = s && Object.keys(s).length > 0, t = b(n);
     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"));
+      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 m = I();
-      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new o("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
+      const d = h();
+      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(d).apply(new o("Initialize Items block with default configuration")), p().startOnboarding("itemsOnboarding");
     }
   }
 }
 export {
-  y as BLOCK_ID,
-  B as ItemsBlock
+  c as BLOCK_ID,
+  E 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 o from "../../../static/assets/info.svg.js";
+import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class s extends r {
   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"] = o;
   }
 }
 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-block-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--items-migration-padding) + var(--items-migration-box-height));
+}
+
+/* Info box container */
+.items-block-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-block-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.items-block-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,15 @@
-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";
+var f = Object.defineProperty;
+var h = (r, o, t) => o in r ? f(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var g = (r, o, t) => h(r, typeof o != "symbol" ? o + "" : o, t);
+import { BlockId as I } from "../../../enums/block.js";
+import { getMigrationBannerHtml as k } from "../../../utils/migrationBannerHtml.js";
+import { Block as B, BlockCompositionType as _, ModificationDescription as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { ensureMobileCssRulesExist as d } 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 = "recommendation-block-v2", a = "recommendation-id";
-class y extends h {
+import { getDefaultTemplate as A } from "./templates/grid/template.js";
+const p = I.Recommendation, c = "recommendation-block-v2", a = "recommendation-id";
+class T extends B {
   constructor() {
     super();
     /**
@@ -17,13 +19,13 @@ class y extends h {
     g(this, "_pendingBlockId", null);
   }
   getId() {
-    return B;
+    return p;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return I.CONTAINER;
+    return _.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -31,6 +33,13 @@ class y extends h {
   getDescription() {
     return this.api.translate("Recommendation Block Title Description");
   }
+  getSettingsPanelTitleHtml() {
+    return k(
+      p,
+      this.api.translate("Recommendation Block"),
+      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.")
+    );
+  }
   /**
    * Returns the template HTML for a new recommendation block.
    * Generates a unique recommendation ID and embeds the instance class
@@ -40,7 +49,7 @@ class y extends h {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, k(t);
+    return this._pendingBlockId = t, A(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -115,7 +124,7 @@ class y extends h {
     if (!n)
       return;
     const i = this.api.getDocumentModifier();
-    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new _(`Assign recommendation ID ${e}`));
+    i.modifyHtml(n).setAttribute(a, e.toString()), i.apply(new R(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -139,7 +148,7 @@ class y extends h {
       if (e && e.includes(c))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${c}`) : null;
+    return "querySelector" in t ? t.querySelector(`.${c}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format
@@ -149,6 +158,6 @@ class y extends h {
   }
 }
 export {
-  B as BLOCK_ID,
-  y as RecommendationBlock
+  p as BLOCK_ID,
+  T as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/controls/main/utils.js

@@ -16,7 +16,7 @@ function A(t) {
     if (e && e.includes(M))
       return t;
   }
-  return "querySelector" in t ? t.querySelector(`.${M}`) : null;
+  return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
 }
 function b(t) {
   const e = A(t);

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

@@ -1,15 +1,15 @@
 var G = Object.defineProperty;
-var R = (p, c, t) => c in p ? G(p, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[c] = t;
-var h = (p, c, t) => R(p, typeof c != "symbol" ? c + "" : c, t);
-import { EditorStatePropertyType as y, PreviewDeviceMode as w, ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+var R = (p, s, t) => s in p ? G(p, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[s] = t;
+var C = (p, s, t) => R(p, typeof s != "symbol" ? s + "" : s, t);
+import { EditorStatePropertyType as y, PreviewDeviceMode as w, ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { CommonControl as V } from "../../../common-control.js";
-import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as E } from "../../constants/selectors.js";
-import { SPACING_STEP as S, MAX_SPACING as _, MIN_SPACING as N, DEFAULT_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as P } from "../../constants/layout.js";
+import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as E } 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 P } from "../../constants/layout.js";
 import { RecommendationConfigService as d } from "../../services/configService.js";
 import { useRecommendationExtensionStore as B } from "../../store/recommendation.js";
-import { safeGetStyle as A, safeGetParent as U } from "../../utils/tagName.js";
-import { getCurrentLayout as b, getBlockElement as x } from "../main/utils.js";
-import { useDebounceFn as f } from "../../../../../node_modules/@vueuse/shared/index.js";
+import { safeGetStyle as L, safeGetParent as U } from "../../utils/tagName.js";
+import { getCurrentLayout as f, getBlockElement as x } from "../main/utils.js";
+import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
 const W = "recommendation-spacing-control", i = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
@@ -19,46 +19,46 @@ const W = "recommendation-spacing-control", i = {
   MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
   MOBILE_ROW_SPACING: "mobileRowSpacing",
   MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
-}, O = {
+}, A = {
   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 L(p, c) {
+function I(p, s) {
   if (!p)
-    return c;
+    return s;
   const t = parseFloat(p);
-  return Number.isNaN(t) ? c : t;
+  return Number.isNaN(t) ? s : t;
 }
 class X extends V {
   constructor() {
     super(...arguments);
-    h(this, "store", B());
-    h(this, "unsubscribeOrientation", null);
+    C(this, "store", B());
+    C(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    h(this, "_debouncedOnColumnSpacingChange", f((t) => {
+    C(this, "_debouncedOnColumnSpacingChange", O((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      */
-    h(this, "_debouncedOnRowSpacingChange", f((t) => {
+    C(this, "_debouncedOnRowSpacingChange", O((t) => {
       this._onRowSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileColumnSpacingChange
      */
-    h(this, "_debouncedOnMobileColumnSpacingChange", f((t) => {
+    C(this, "_debouncedOnMobileColumnSpacingChange", O((t) => {
       this._onMobileColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileRowSpacingChange
      */
-    h(this, "_debouncedOnMobileRowSpacingChange", f((t) => {
+    C(this, "_debouncedOnMobileRowSpacingChange", O((t) => {
       this._onMobileRowSpacingChange(t);
     }, 300));
   }
@@ -72,16 +72,16 @@ class X extends V {
       this._GuLabel({ text: "Column Spacing on Desktop (px)", name: i.COLUMN_SPACING_LABEL }),
       this._GuCounter({
         name: i.COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({ text: "Row Spacing on Desktop (px)", name: i.ROW_SPACING_LABEL }),
       this._GuCounter({
         name: i.ROW_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({
         text: "Column Spacing on Mobile (px)",
@@ -89,16 +89,16 @@ class X extends V {
       }),
       this._GuCounter({
         name: i.MOBILE_COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({ text: "Row Spacing on Mobile (px)", name: i.MOBILE_ROW_SPACING_LABEL }),
       this._GuCounter({
         name: i.MOBILE_ROW_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       })
     ])}
             </div>
@@ -132,8 +132,8 @@ class X extends V {
   _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, n = t.layout || e || b(this.currentNode), o = n === "grid", a = n === "list", r = this._isMobileMode(), l = t.cardsInRow > 1, u = t.mobileCardsInRow > 1;
-    this.api.setVisibility(i.COLUMN_SPACING, o && !r && l), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && l), this.api.setVisibility(i.ROW_SPACING, a || !r), this.api.setVisibility(i.ROW_SPACING_LABEL, a || !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && u), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && u), this.api.setVisibility(i.MOBILE_ROW_SPACING, !a && r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, !a && r);
+    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, n = t.layout || e || f(this.currentNode), o = n === "grid", a = n === "list", r = this._isMobileMode(), c = t.cardsInRow > 1, u = t.mobileCardsInRow > 1;
+    this.api.setVisibility(i.COLUMN_SPACING, o && !r && c), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && c), this.api.setVisibility(i.ROW_SPACING, a || !r), this.api.setVisibility(i.ROW_SPACING_LABEL, a || !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && u), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && u), this.api.setVisibility(i.MOBILE_ROW_SPACING, !a && r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, !a && r);
   }
   /**
    * Reads spacing values from node config first, falls back to DOM styles.
@@ -159,20 +159,20 @@ class X extends V {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return C;
-    const t = this.currentNode.querySelector(m) ?? this.currentNode;
-    if (b(this.currentNode) === "grid") {
-      const u = t.querySelector(".recommendation-attribute-row"), s = u == null ? void 0 : u.querySelector("td"), I = A(s, "padding");
-      if (!I)
-        return C;
-      const M = I.trim().split(/\s+/);
-      return M.length < 2 ? C : L(M[1], C / 2) * 2;
+      return g;
+    const t = this.currentNode.querySelector(S) ?? this.currentNode;
+    if (f(this.currentNode) === "grid") {
+      const u = t.querySelector(".recommendation-attribute-row"), l = (u == null ? void 0 : u.querySelector("td")) ?? null, h = L(l, "padding");
+      if (!h)
+        return g;
+      const M = h.trim().split(/\s+/);
+      return M.length < 2 ? g : I(M[1], g / 2) * 2;
     }
-    const n = t.querySelector(".product-card-wrapper"), o = U(n), a = A(o, "padding");
+    const n = t.querySelector(".product-card-wrapper") ?? null, o = U(n), a = L(o, "padding");
     if (!a)
-      return C;
+      return g;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? C : L(r[1], C / 2) * 2;
+    return r.length < 2 ? g : I(r[1], g / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -181,8 +181,8 @@ class X extends V {
   _getStoredRowSpacing() {
     if (!this.currentNode)
       return P;
-    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer"), n = A(e, "height");
-    return L(n, P);
+    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer") ?? null, n = L(e, "height");
+    return I(n, P);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -199,17 +199,18 @@ class X extends V {
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeDataAttribute(O.COLUMN_SPACING, t);
-    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(m);
-    l && (n === "grid" ? Array.from(
-      l.querySelectorAll(".attribute-cell")
-    ).forEach((s) => {
-      o.modifyHtml(s).setStyle("padding", r);
+    ), this._storeDataAttribute(A.COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || f(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
+    c && (n === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((l) => {
+      o.modifyHtml(l).setStyle("padding", r);
     }) : Array.from(
-      l.querySelectorAll(".product-card-wrapper")
-    ).forEach((s) => {
-      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
-    }), o.apply(new g(`Update column spacing to ${t}px`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((l) => {
+      const h = "parent" in l ? l.parent() : void 0;
+      h && o.modifyHtml(h).setStyle("padding", r);
+    }), o.apply(new m(`Update column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -223,8 +224,8 @@ class X extends V {
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeDataAttribute(O.ROW_SPACING, t);
-    const e = this.currentNode.querySelector(m);
+    ), this._storeDataAttribute(A.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(S);
     if (!e)
       return;
     const n = Array.from(
@@ -235,7 +236,7 @@ class X extends V {
     const o = this.api.getDocumentModifier(), a = `${t}px`;
     n.forEach((r) => {
       o.modifyHtml(r).setStyle("height", a);
-    }), o.apply(new g(`Update row spacing to ${t}px`));
+    }), o.apply(new m(`Update row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -252,17 +253,18 @@ class X extends V {
       this.currentNode,
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
-    ), this._storeDataAttribute(O.MOBILE_COLUMN_SPACING, t);
-    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(E);
-    l && (n === "grid" ? Array.from(
-      l.querySelectorAll(".attribute-cell")
-    ).forEach((s) => {
-      o.modifyHtml(s).setStyle("padding", r);
+    ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || f(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(E);
+    c && (n === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((l) => {
+      o.modifyHtml(l).setStyle("padding", r);
     }) : Array.from(
-      l.querySelectorAll(".product-card-wrapper")
-    ).forEach((s) => {
-      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
-    }), o.apply(new g(`Update mobile column spacing to ${t}px`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((l) => {
+      const h = "parent" in l ? l.parent() : void 0;
+      h && o.modifyHtml(h).setStyle("padding", r);
+    }), o.apply(new m(`Update mobile column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -276,7 +278,7 @@ class X extends V {
       this.currentNode,
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(O.MOBILE_ROW_SPACING, t);
+    ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
     const e = this.currentNode.querySelector(E);
     if (!e)
       return;
@@ -288,7 +290,7 @@ class X extends V {
     const o = this.api.getDocumentModifier(), a = `${t}px`;
     n.forEach((r) => {
       o.modifyHtml(r).setStyle("height", a);
-    }), o.apply(new g(`Update mobile row spacing to ${t}px`));
+    }), o.apply(new m(`Update mobile row spacing to ${t}px`));
   }
   // ========================================================================
   // Data Attribute Storage
@@ -298,7 +300,7 @@ class X extends V {
    */
   _storeDataAttribute(t, e) {
     const n = x(this.currentNode);
-    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new g(`Store ${t}`));
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new m(`Store ${t}`));
   }
   // ========================================================================
   // Event Listeners

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 r from "../../../static/assets/info.svg.js";
+import { IconsRegistry as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class h extends t {
   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"] = r;
   }
 }
 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-block-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--rec-migration-padding) + var(--rec-migration-box-height));
+}
+
+/* Info box container */
+.recommendation-block-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-block-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.recommendation-block-migration-info__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
 `;
 export {
   n as default