@useinsider/guido 2.1.0-beta.f42da92 → 2.1.0-beta.f8696fd

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,5 @@
-import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class i extends o {
+import { IconsRegistry as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class e extends C {
   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 +19,49 @@ 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"] = `
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g transform="translate(3, 2.5)">
+                <path d="M6.87812 0.141942C10.7873 -0.580665 14.6797 1.51065 16.201 5.16436C17.7344
+                8.84685 16.432 13.0909 13.0906 15.3015C9.77511 17.4946 5.36819 17.08 2.52785
+                14.3193L2.46105 14.2536C0.882709 12.6854 -0.00259777 10.5591 5.72603e-06
+                8.34301L0.000643642 8.24974C0.0491816 4.30543 2.87651 0.926565 6.78576
+                0.159555L6.87812 0.141942ZM14.5911 5.82406C13.3749 2.90345 10.2486 1.24158 7.12372
+                1.85468C3.99888 2.46779 1.74568 5.18516 1.74194 8.34505C1.73988 10.1027 2.44203
+                11.789 3.69379 13.0328C5.94435 15.269 9.4739 15.617 12.1241 13.8638C14.7742 12.1106
+                15.8071 8.74458 14.5911 5.82406Z" fill="#258DDE"/>
+                <path d="M12.5195 13.5806C12.8537 13.2479 13.3933 13.2417 13.7351 13.5628L13.7512
+                13.5783L17.7437 17.5239C18.0845 17.8607 18.0856 18.4077 17.7461 18.7458C17.4066
+                19.0838 16.8551 19.0849 16.5143 18.7481L12.5218 14.8025L12.5061 14.7866C12.1811
+                14.4487 12.1853 13.9134 12.5195 13.5806Z" fill="#258DDE"/>
+                <path d="M6.71262 5.42913C6.37248 5.09172 5.82105 5.09172 5.48092 5.42913C5.14079
+                5.76655 5.14079 6.3136 5.48092 6.65104L6.71262 5.42913ZM7.80353 8.95504C8.14367
+                9.29246 8.69506 9.29246 9.0352 8.95504C9.37534 8.61762 9.37534 8.07053 9.0352
+                7.73311L7.80353 8.95504ZM9.0352 7.73311C8.69506 7.39569 8.14367 7.39569 7.80353
+                7.73311C7.46339 8.07053 7.46339 8.61762 7.80353 8.95504L9.0352 7.73311ZM10.1261
+                11.259C10.4663 11.5965 11.0176 11.5965 11.3578 11.259C11.6979 10.9216 11.6979
+                10.3745 11.3578 10.0371L10.1261 11.259ZM9.0352 8.95504C9.37534 8.61762 9.37534
+                8.07053 9.0352 7.73311C8.69506 7.39569 8.14367 7.39569 7.80353 7.73311L9.0352
+                8.95504ZM5.48092 10.0371C5.14079 10.3745 5.14079 10.9216 5.48092 11.259C5.82105
+                11.5965 6.37248 11.5965 6.71262 11.259L5.48092 10.0371ZM7.80353 7.73311C7.46339
+                8.07053 7.46339 8.61762 7.80353 8.95504C8.14367 9.29246 8.69506 9.29246 9.0352
+                8.95504L7.80353 7.73311ZM11.3578 6.65104C11.6979 6.3136 11.6979 5.76655 11.3578
+                5.42913C11.0176 5.09172 10.4663 5.09172 10.1261 5.42913L11.3578 6.65104ZM5.48092
+                6.65104L7.80353 8.95504L9.0352 7.73311L6.71262 5.42913L5.48092 6.65104ZM7.80353
+                8.95504L10.1261 11.259L11.3578 10.0371L9.0352 7.73311L7.80353 8.95504ZM7.80353
+                7.73311L5.48092 10.0371L6.71262 11.259L9.0352 8.95504L7.80353 7.73311ZM9.0352
+                8.95504L11.3578 6.65104L10.1261 5.42913L7.80353 7.73311L9.0352 8.95504Z"
+                fill="#258DDE"/>
+              </g>
+            </svg>
         `;
   }
 }
 export {
-  i as ItemsIconsRegistry
+  e 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,5 @@
-import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class o extends r {
+import { IconsRegistry as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class o 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,6 +59,41 @@ 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"] = `
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g transform="translate(3, 2.5)">
+                <path d="M6.87812 0.141942C10.7873 -0.580665 14.6797 1.51065 16.201 5.16436C17.7344
+                8.84685 16.432 13.0909 13.0906 15.3015C9.77511 17.4946 5.36819 17.08 2.52785
+                14.3193L2.46105 14.2536C0.882709 12.6854 -0.00259777 10.5591 5.72603e-06
+                8.34301L0.000643642 8.24974C0.0491816 4.30543 2.87651 0.926565 6.78576
+                0.159555L6.87812 0.141942ZM14.5911 5.82406C13.3749 2.90345 10.2486 1.24158 7.12372
+                1.85468C3.99888 2.46779 1.74568 5.18516 1.74194 8.34505C1.73988 10.1027 2.44203
+                11.789 3.69379 13.0328C5.94435 15.269 9.4739 15.617 12.1241 13.8638C14.7742 12.1106
+                15.8071 8.74458 14.5911 5.82406Z" fill="#258DDE"/>
+                <path d="M12.5195 13.5806C12.8537 13.2479 13.3933 13.2417 13.7351 13.5628L13.7512
+                13.5783L17.7437 17.5239C18.0845 17.8607 18.0856 18.4077 17.7461 18.7458C17.4066
+                19.0838 16.8551 19.0849 16.5143 18.7481L12.5218 14.8025L12.5061 14.7866C12.1811
+                14.4487 12.1853 13.9134 12.5195 13.5806Z" fill="#258DDE"/>
+                <path d="M6.71262 5.42913C6.37248 5.09172 5.82105 5.09172 5.48092 5.42913C5.14079
+                5.76655 5.14079 6.3136 5.48092 6.65104L6.71262 5.42913ZM7.80353 8.95504C8.14367
+                9.29246 8.69506 9.29246 9.0352 8.95504C9.37534 8.61762 9.37534 8.07053 9.0352
+                7.73311L7.80353 8.95504ZM9.0352 7.73311C8.69506 7.39569 8.14367 7.39569 7.80353
+                7.73311C7.46339 8.07053 7.46339 8.61762 7.80353 8.95504L9.0352 7.73311ZM10.1261
+                11.259C10.4663 11.5965 11.0176 11.5965 11.3578 11.259C11.6979 10.9216 11.6979
+                10.3745 11.3578 10.0371L10.1261 11.259ZM9.0352 8.95504C9.37534 8.61762 9.37534
+                8.07053 9.0352 7.73311C8.69506 7.39569 8.14367 7.39569 7.80353 7.73311L9.0352
+                8.95504ZM5.48092 10.0371C5.14079 10.3745 5.14079 10.9216 5.48092 11.259C5.82105
+                11.5965 6.37248 11.5965 6.71262 11.259L5.48092 10.0371ZM7.80353 7.73311C7.46339
+                8.07053 7.46339 8.61762 7.80353 8.95504C8.14367 9.29246 8.69506 9.29246 9.0352
+                8.95504L7.80353 7.73311ZM11.3578 6.65104C11.6979 6.3136 11.6979 5.76655 11.3578
+                5.42913C11.0176 5.09172 10.4663 5.09172 10.1261 5.42913L11.3578 6.65104ZM5.48092
+                6.65104L7.80353 8.95504L9.0352 7.73311L6.71262 5.42913L5.48092 6.65104ZM7.80353
+                8.95504L10.1261 11.259L11.3578 10.0371L9.0352 7.73311L7.80353 8.95504ZM7.80353
+                7.73311L5.48092 10.0371L6.71262 11.259L9.0352 8.95504L7.80353 7.73311ZM9.0352
+                8.95504L11.3578 6.65104L10.1261 5.42913L7.80353 7.73311L9.0352 8.95504Z"
+                fill="#258DDE"/>
+              </g>
+            </svg>
         `;
   }
 }

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

package/dist/extensions/Blocks/common-control.js

@@ -1,5 +1,5 @@
-var I = Object.defineProperty;
-var O = (T, r, e) => r in T ? I(T, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[r] = e;
+var l = Object.defineProperty;
+var O = (T, r, e) => r in T ? l(T, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[r] = e;
 var u = (T, r, e) => O(T, typeof r != "symbol" ? r + "" : r, e);
 import { Control as c, UIElementType as n, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 class _ extends c {
@@ -129,6 +129,14 @@ class _ extends c {
             </${n.BUTTON}>
         `;
   }
+  _GuIcon({ src: e, className: t = "" }) {
+    return `
+            <${n.ICON}
+                ${$.ICON.src}="${e}"
+                ${t ? `class="${t}"` : ""}>
+            </${n.ICON}>
+        `;
+  }
   /**
    *
    * @param param0
@@ -167,9 +175,9 @@ class _ extends c {
   _GuOrderable(e, t) {
     let E = "";
     t.forEach((a) => {
-      const l = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+      const I = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
       E += `
-                <${n.ORDERABLE_ITEM} ${l}="${a.key}">
+                <${n.ORDERABLE_ITEM} ${I}="${a.key}">
                     ${a.content}
                 </${n.ORDERABLE_ITEM}>
             `;

package/dist/extensions/ModulesTabIcons/extension.js

@@ -0,0 +1,17 @@
+import { ModuleFolderDefaults as n } from "../../enums/defaults.js";
+import { ExtensionBuilder as t, BlocksPanel as r } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class u extends r {
+  getModulesTabIconName(o) {
+    const { key: e } = o, { SAVED_MODULES: l, DEFAULT_MODULES: s } = n;
+    if (e.includes(l))
+      return "user-profile";
+    if (e.includes(s))
+      return "modules";
+    if (e === "amp_modules")
+      return "mail-template";
+  }
+}
+const c = new t().withBlocksPanel(u).build();
+export {
+  c as default
+};

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-913a3417] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-890b5336]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-890b5336]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-890b5336]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-913a3417] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-92b1be6c]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-16abb398]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-16abb398]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-16abb398]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}