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

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

@@ -1,222 +1,345 @@
 var G = Object.defineProperty;
-var I = (o, n, t) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[n] = t;
-var l = (o, n, t) => I(o, typeof n != "symbol" ? n + "" : n, t);
-import { ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as L } from "../../../common-control.js";
-import { SPACING_STEP as b, MAX_SPACING as y, MIN_SPACING as A, DEFAULT_COLUMN_SPACING as a, DEFAULT_ROW_SPACING as m } from "../../constants/layout.js";
-import { RecommendationConfigService as d } from "../../services/configService.js";
-import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
-import { safeGetStyle as S, safeGetParent as V } from "../../utils/tagName.js";
-import { getCurrentLayout as C } from "../main/utils.js";
-import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
-const R = "recommendation-spacing-control", s = {
+var R = (u, c, t) => c in u ? G(u, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[c] = t;
+var h = (u, c, t) => R(u, 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";
+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 { RecommendationConfigService as p } 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";
+const W = "recommendation-spacing-control", i = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
-  ROW_SPACING: "rowSpacing"
-}, P = {
+  ROW_SPACING: "rowSpacing",
+  ROW_SPACING_LABEL: "rowSpacingLabel",
+  MOBILE_COLUMN_SPACING: "mobileColumnSpacing",
+  MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
+  MOBILE_ROW_SPACING: "mobileRowSpacing",
+  MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
+}, O = {
   COLUMN_SPACING: "data-column-spacing",
-  ROW_SPACING: "data-row-spacing"
+  ROW_SPACING: "data-row-spacing",
+  MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
+  MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function N(o, n) {
-  if (!o)
-    return n;
-  const t = parseFloat(o);
-  return Number.isNaN(t) ? n : t;
+function L(u, c) {
+  if (!u)
+    return c;
+  const t = parseFloat(u);
+  return Number.isNaN(t) ? c : t;
 }
-class $ extends L {
+class X extends V {
   constructor() {
     super(...arguments);
-    l(this, "store", w());
-    l(this, "unsubscribeOrientation", null);
+    h(this, "store", B());
+    h(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    l(this, "_debouncedOnColumnSpacingChange", O((t) => {
+    h(this, "_debouncedOnColumnSpacingChange", f((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
-     * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    l(this, "_debouncedOnRowSpacingChange", O((t) => {
+    h(this, "_debouncedOnRowSpacingChange", f((t) => {
       this._onRowSpacingChange(t);
     }, 300));
+    /**
+     * Debounced version of _onMobileColumnSpacingChange
+     */
+    h(this, "_debouncedOnMobileColumnSpacingChange", f((t) => {
+      this._onMobileColumnSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onMobileRowSpacingChange
+     */
+    h(this, "_debouncedOnMobileRowSpacingChange", f((t) => {
+      this._onMobileRowSpacingChange(t);
+    }, 300));
   }
   getId() {
-    return R;
+    return W;
   }
   getTemplate() {
     return `
             <div class="spacing-control-container">
                 ${this._GuTwoColumns([
-      this._GuLabel({ text: "Column Spacing (px)", name: s.COLUMN_SPACING_LABEL }),
+      this._GuLabel({ text: "Column Spacing on Desktop (px)", name: i.COLUMN_SPACING_LABEL }),
       this._GuCounter({
-        name: s.COLUMN_SPACING,
-        minValue: A,
-        maxValue: y,
-        step: b
+        name: i.COLUMN_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
       }),
-      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuLabel({ text: "Row Spacing on Desktop (px)", name: i.ROW_SPACING_LABEL }),
       this._GuCounter({
-        name: s.ROW_SPACING,
-        minValue: A,
-        maxValue: y,
-        step: b
+        name: i.ROW_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      }),
+      this._GuLabel({
+        text: "Column Spacing on Mobile (px)",
+        name: i.MOBILE_COLUMN_SPACING_LABEL
+      }),
+      this._GuCounter({
+        name: i.MOBILE_COLUMN_SPACING,
+        minValue: N,
+        maxValue: _,
+        step: S
+      }),
+      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
       })
     ])}
             </div>
         `;
   }
   onRender() {
-    this._setFormValues(), this._updateColumnSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges();
+    this._setFormValues(), this._updateSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges(), this._subscribeToEditorModeChanges();
   }
   onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateSpacingVisibility();
   }
   onDestroy() {
     this.unsubscribeOrientation && (this.unsubscribeOrientation(), this.unsubscribeOrientation = null);
   }
   /**
-   * Updates column spacing visibility based on layout orientation
-   * Column spacing is hidden for list layout (products are stacked vertically)
-   * Reads from node config first, falls back to store then DOM
+   * Checks if the editor is currently in mobile preview mode
+   * using Stripo's EditorStatePropertyType API.
+   */
+  _isMobileMode() {
+    return this.api.getEditorState()[y.previewDeviceMode] === w.MOBILE;
+  }
+  /**
+   * Updates spacing control visibility based on layout orientation, editor mode,
+   * and products-per-row count.
+   * - List layout: hide column spacing (products are full-width)
+   * - Desktop mode: show desktop spacing, hide mobile spacing
+   * - Mobile mode: show mobile spacing, hide desktop spacing
+   * - 1 product per row: hide column spacing (no gap between single column)
    */
-  _updateColumnSpacingVisibility() {
+  _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || C(this.currentNode)) === "grid";
-    this.api.setVisibility(s.COLUMN_SPACING, i), this.api.setVisibility(s.COLUMN_SPACING_LABEL, i);
+    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, o = (t.layout || e || b(this.currentNode)) === "grid", r = this._isMobileMode(), a = t.cardsInRow > 1, l = t.mobileCardsInRow > 1;
+    this.api.setVisibility(i.COLUMN_SPACING, o && !r && a), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && a), this.api.setVisibility(i.ROW_SPACING, !r), this.api.setVisibility(i.ROW_SPACING_LABEL, !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && l), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && l), this.api.setVisibility(i.MOBILE_ROW_SPACING, r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, r);
   }
   /**
-   * Reads spacing values from node config first, falls back to DOM styles
+   * Reads spacing values from node config first, falls back to DOM styles.
+   * DOM fallback is only used for legacy templates that lack node config.
    */
   _setFormValues() {
     if (!this.api)
       return;
-    const t = d.getConfig(this.currentNode), e = t.columnSpacing !== a ? t.columnSpacing : this._getStoredColumnSpacing(), r = t.rowSpacing !== m ? t.rowSpacing : this._getStoredRowSpacing();
+    const t = p.hasConfig(this.currentNode), e = p.getConfig(this.currentNode), n = t ? e.columnSpacing : this._getStoredColumnSpacing(), o = t ? e.rowSpacing : this._getStoredRowSpacing();
     this.api.updateValues({
-      [s.COLUMN_SPACING]: e,
-      [s.ROW_SPACING]: r
+      [i.COLUMN_SPACING]: n,
+      [i.ROW_SPACING]: o,
+      [i.MOBILE_COLUMN_SPACING]: e.mobileColumnSpacing,
+      [i.MOBILE_ROW_SPACING]: e.mobileRowSpacing
     });
   }
   /**
    * Gets stored column spacing from the first attribute row cell's padding.
+   * Scoped to the desktop container for accurate readings.
    * For grid layout: cells inside .recommendation-attribute-row have padding applied.
    * For list layout: the parent of .product-card-wrapper has the padding.
    * The padding is applied as "0 {halfSpacing}px", so we extract and multiply by 2.
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return a;
-    if (C(this.currentNode) === "grid") {
-      const p = this.currentNode.querySelector(".recommendation-attribute-row"), c = p == null ? void 0 : p.querySelector("td"), f = S(c, "padding");
-      if (!f)
-        return a;
-      const _ = f.trim().split(/\s+/);
-      return _.length < 2 ? a : N(_[1], a / 2) * 2;
+      return C;
+    const t = this.currentNode.querySelector(m) ?? this.currentNode;
+    if (b(this.currentNode) === "grid") {
+      const d = t.querySelector(".recommendation-attribute-row"), s = d == null ? void 0 : d.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;
     }
-    const e = this.currentNode.querySelector(".product-card-wrapper"), r = V(e), i = S(r, "padding");
-    if (!i)
-      return a;
-    const u = i.trim().split(/\s+/);
-    return u.length < 2 ? a : N(u[1], a / 2) * 2;
+    const n = t.querySelector(".product-card-wrapper"), o = U(n), r = A(o, "padding");
+    if (!r)
+      return C;
+    const a = r.trim().split(/\s+/);
+    return a.length < 2 ? C : L(a[1], C / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
+   * Scoped to the desktop container for accurate readings.
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return m;
-    const t = this.currentNode.querySelector(".spacer"), e = S(t, "height");
-    return N(e, m);
+      return P;
+    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer"), n = A(e, "height");
+    return L(n, P);
   }
+  // ========================================================================
+  // Desktop Spacing Handlers
+  // ========================================================================
   /**
-   * Handles column spacing changes.
-   * For grid layout: applies horizontal padding to all cells inside attribute rows.
-   * For list layout: applies padding to parent of product card wrappers.
+   * Handles column spacing changes for desktop.
+   * Applies horizontal padding only to the desktop container elements.
    */
   _onColumnSpacingChange(t) {
     if (!this.currentNode)
       return;
-    d.updateConfig(
+    p.updateConfig(
       this.api,
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeColumnSpacing(t);
-    const r = d.getConfig(this.currentNode).layout || C(this.currentNode), i = this.api.getDocumentModifier(), h = `0 ${t / 2}px`;
-    r === "grid" ? Array.from(
-      this.currentNode.querySelectorAll(".attribute-cell")
-    ).forEach((c) => {
-      i.modifyHtml(c).setStyle("padding", h);
+    ), this._storeDataAttribute(O.COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), a = `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", a);
     }) : Array.from(
-      this.currentNode.querySelectorAll(".product-card-wrapper")
-    ).forEach((c) => {
-      "parent" in c && c.parent() && i.modifyHtml(c.parent()).setStyle("padding", h);
-    }), i.apply(new g(`Update column spacing to ${t}px`));
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
+    }), o.apply(new g(`Update column spacing to ${t}px`)));
   }
   /**
-   * Handles row spacing changes
-   * Applies height to all spacer elements between product rows
+   * Handles row spacing changes for desktop.
+   * Applies height only to spacer elements in the desktop container.
    */
   _onRowSpacingChange(t) {
     if (!this.currentNode)
       return;
-    d.updateConfig(
+    p.updateConfig(
       this.api,
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeRowSpacing(t);
-    const e = Array.from(
-      this.currentNode.querySelectorAll(".spacer")
+    ), this._storeDataAttribute(O.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(m);
+    if (!e)
+      return;
+    const n = Array.from(
+      e.querySelectorAll(".spacer")
     );
-    if (!e.length)
+    if (!n.length)
       return;
-    const r = this.api.getDocumentModifier(), i = `${t}px`;
-    e.forEach((u) => {
-      r.modifyHtml(u).setStyle("height", i);
-    }), r.apply(new g(`Update row spacing to ${t}px`));
+    const o = this.api.getDocumentModifier(), r = `${t}px`;
+    n.forEach((a) => {
+      o.modifyHtml(a).setStyle("height", r);
+    }), o.apply(new g(`Update row spacing to ${t}px`));
   }
+  // ========================================================================
+  // Mobile Spacing Handlers
+  // ========================================================================
   /**
-   * Stores column spacing value in block data attribute
+   * Handles column spacing changes for mobile.
+   * Applies horizontal padding only to the mobile container elements.
    */
-  _storeColumnSpacing(t) {
+  _onMobileColumnSpacingChange(t) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.COLUMN_SPACING, t.toString()).apply(new g("Store column spacing"));
+    p.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileColumnSpacing: t },
+      `Changed mobile column spacing to ${t}px`
+    ), this._storeDataAttribute(O.MOBILE_COLUMN_SPACING, t);
+    const n = p.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), a = `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", a);
+    }) : Array.from(
+      l.querySelectorAll(".product-card-wrapper")
+    ).forEach((s) => {
+      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", a);
+    }), o.apply(new g(`Update mobile column spacing to ${t}px`)));
   }
   /**
-   * Stores row spacing value in block data attribute
+   * Handles row spacing changes for mobile.
+   * Applies height only to spacer elements in the mobile container.
    */
-  _storeRowSpacing(t) {
+  _onMobileRowSpacingChange(t) {
     if (!this.currentNode)
       return;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(P.ROW_SPACING, t.toString()).apply(new g("Store row spacing"));
+    p.updateConfig(
+      this.api,
+      this.currentNode,
+      { mobileRowSpacing: t },
+      `Changed mobile row spacing to ${t}px`
+    ), this._storeDataAttribute(O.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(E);
+    if (!e)
+      return;
+    const n = Array.from(
+      e.querySelectorAll(".spacer")
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier(), r = `${t}px`;
+    n.forEach((a) => {
+      o.modifyHtml(a).setStyle("height", r);
+    }), o.apply(new g(`Update mobile row spacing to ${t}px`));
+  }
+  // ========================================================================
+  // Data Attribute Storage
+  // ========================================================================
+  /**
+   * Stores a spacing value as a data attribute on the block root element
+   */
+  _storeDataAttribute(t, e) {
+    const n = x(this.currentNode);
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new g(`Store ${t}`));
   }
+  // ========================================================================
+  // Event Listeners
+  // ========================================================================
   _listenToFormUpdates() {
-    this.api.onValueChanged(s.COLUMN_SPACING, (t) => {
+    this.api.onValueChanged(i.COLUMN_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
-    }), this.api.onValueChanged(s.ROW_SPACING, (t) => {
+    }), this.api.onValueChanged(i.ROW_SPACING, (t) => {
       const e = parseInt(t);
       Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
+    }), this.api.onValueChanged(i.MOBILE_COLUMN_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnMobileColumnSpacingChange(e);
+    }), this.api.onValueChanged(i.MOBILE_ROW_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnMobileRowSpacingChange(e);
     });
   }
   /**
    * Subscribe to store orientation changes
-   * Updates column spacing visibility when layout changes via the layout control
+   * Updates spacing visibility when layout changes via the layout control
    */
   _subscribeToOrientationChanges() {
     this.unsubscribeOrientation && this.unsubscribeOrientation(), this.unsubscribeOrientation = this.store.$subscribe((t) => {
-      t.type === "patch object" && this._updateColumnSpacingVisibility();
+      t.type === "patch object" && (this._updateSpacingVisibility(), this._setFormValues());
     });
   }
+  /**
+   * Subscribes to editor preview mode changes via Stripo API.
+   * Toggles which spacing controls (desktop/mobile) are visible.
+   */
+  _subscribeToEditorModeChanges() {
+    this.api.onEditorStatePropUpdated(
+      y.previewDeviceMode,
+      () => {
+        this._updateSpacingVisibility();
+      }
+    );
+  }
 }
 export {
-  R as SPACING_CONTROL_ID,
-  $ as SpacingControl
+  W as SPACING_CONTROL_ID,
+  X as SpacingControl
 };

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

@@ -1,5 +1,5 @@
-import { IconsRegistry as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class o extends t {
+import { IconsRegistry as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class o 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,41 +59,6 @@ class o extends t {
                 <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,54 +22,6 @@ 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