@useinsider/guido 2.1.0-beta.bc18abc → 2.1.0-beta.bcfc012

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

@@ -0,0 +1,48 @@
+import { createPaddingsControl as n, createTextBackgroundColorControl as e, createTextFontFamilyControl as C, createTextStyleControl as I, createTextSizeControl as l, createTextColorControl as i, createTextAlignControl as c } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as r } from "../../constants/selectors.js";
+import { OmnibusPriceTextAfterControl as O } from "./textAfter.js";
+import { OmnibusPriceTextBeforeControl as _ } from "./textBefore.js";
+const m = c(
+  t.OMNIBUS_PRICE_ALIGN,
+  o.OMNIBUS_PRICE,
+  r
+), S = i(
+  t.OMNIBUS_PRICE_COLOR,
+  o.OMNIBUS_PRICE,
+  r
+), B = l(
+  t.OMNIBUS_PRICE_SIZE,
+  o.OMNIBUS_PRICE,
+  r
+), N = I(
+  t.OMNIBUS_PRICE_STYLE,
+  o.OMNIBUS_PRICE,
+  r
+), P = C(
+  t.OMNIBUS_PRICE_FONT_FAMILY,
+  o.OMNIBUS_PRICE,
+  r
+), R = e(
+  t.OMNIBUS_PRICE_BACKGROUND,
+  o.OMNIBUS_PRICE,
+  r
+), a = n(
+  t.OMNIBUS_PRICE_PADDINGS,
+  o.OMNIBUS_PRICE,
+  r
+), f = {
+  align: m,
+  color: S,
+  size: B,
+  style: N,
+  fontFamily: P,
+  background: R,
+  paddings: a,
+  textBefore: _,
+  textAfter: O
+};
+export {
+  f as OmnibusPriceControls
+};

package/dist/extensions/Blocks/Recommendation/controls/{omnibusPriceTextAfterControl.js → omnibusPrice/textAfter.js}

@@ -1,11 +1,13 @@
-import { ModificationDescription as a } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as m } from "../../common-control.js";
-import { RecommendationControlId as l, RecommendationBlockId as d } from "../constants.js";
-import { preserveTextStyles as T } from "../utils/preserveTextStyles.js";
-const f = ".ins-recommendation-product-container", s = "data-text-after", c = "", p = ".omnibus-text-after";
-class C extends m {
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as a } from "../../../common-control.js";
+import { RecommendationBlockId as l } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as T } from "../../constants/selectors.js";
+import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
+const s = "data-text-after", m = "", p = ".omnibus-text-after";
+class N extends a {
   getId() {
-    return l.OMNIBUS_PRICE_TEXT_AFTER;
+    return d.OMNIBUS_PRICE_TEXT_AFTER;
   }
   getTemplate() {
     return `
@@ -35,18 +37,18 @@ class C extends m {
   }
   _getCurrentText() {
     if (!this.currentNode || !("getAttribute" in this.currentNode))
-      return c;
+      return m;
     const t = this.currentNode.getAttribute(s);
-    return t === null ? c : t;
+    return t === null ? m : t;
   }
   _onTextChange(t) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const e = this.currentNode.closest(f);
+    const e = this.currentNode.closest(T);
     if (!e || !("querySelectorAll" in e))
       return;
     const n = Array.from(
-      e.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_PRICE}"]`)
+      e.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_PRICE}"]`)
     );
     if (!n.length)
       return;
@@ -55,10 +57,10 @@ class C extends m {
       r.modifyHtml(i).setAttribute(s, t);
       const o = i.querySelector(p);
       if (o) {
-        const u = T(o, t);
+        const u = f(o, t);
         r.modifyHtml(o).setInnerHtml(u);
       }
-    }), r.apply(new a("Update omnibus price text after"));
+    }), r.apply(new c("Update omnibus price text after"));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusPriceTextAfter", (t) => {
@@ -67,5 +69,5 @@ class C extends m {
   }
 }
 export {
-  C as OmnibusPriceTextAfterControl
+  N as OmnibusPriceTextAfterControl
 };

package/dist/extensions/Blocks/Recommendation/controls/{omnibusPriceTextBeforeControl.js → omnibusPrice/textBefore.js}

@@ -1,11 +1,13 @@
-import { ModificationDescription as m } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as a } from "../../common-control.js";
-import { RecommendationControlId as l, RecommendationBlockId as d } from "../constants.js";
-import { preserveTextStyles as T } from "../utils/preserveTextStyles.js";
-const p = ".ins-recommendation-product-container", s = "data-text-before", c = "Lowest 30-day price: ", f = ".omnibus-text-before";
-class C extends a {
+import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as p } from "../../constants/selectors.js";
+import { preserveTextStyles as T } from "../../utils/preserveTextStyles.js";
+const s = "data-text-before", c = "Lowest 30-day price: ", f = ".omnibus-text-before";
+class N extends l {
   getId() {
-    return l.OMNIBUS_PRICE_TEXT_BEFORE;
+    return d.OMNIBUS_PRICE_TEXT_BEFORE;
   }
   getTemplate() {
     return `
@@ -46,7 +48,7 @@ class C extends a {
     if (!t || !("querySelectorAll" in t))
       return;
     const n = Array.from(
-      t.querySelectorAll(`[esd-extension-block-id="${d.OMNIBUS_PRICE}"]`)
+      t.querySelectorAll(`[esd-extension-block-id="${a.OMNIBUS_PRICE}"]`)
     );
     if (!n.length)
       return;
@@ -55,10 +57,10 @@ class C extends a {
       o.modifyHtml(i).setAttribute(s, e);
       const r = i.querySelector(f);
       if (r) {
-        const u = T(r, e);
-        o.modifyHtml(r).setInnerHtml(u);
+        const m = T(r, e);
+        o.modifyHtml(r).setInnerHtml(m);
       }
-    }), o.apply(new m("Update omnibus price text before"));
+    }), o.apply(new u("Update omnibus price text before"));
   }
   _listenToFormUpdates() {
     this.api.onValueChanged("omnibusPriceTextBefore", (e) => {
@@ -67,5 +69,5 @@ class C extends a {
   }
 }
 export {
-  C as OmnibusPriceTextBeforeControl
+  N as OmnibusPriceTextBeforeControl
 };

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

@@ -0,0 +1,44 @@
+import { createPaddingsControl as r, createTextBackgroundColorControl as C, createTextFontFamilyControl as e, createTextStyleControl as l, createTextSizeControl as c, createTextColorControl as I, createTextAlignControl as R } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as n } from "../../constants/selectors.js";
+const a = R(
+  t.PRICE_ALIGN,
+  o.PRICE,
+  n
+), i = I(
+  t.PRICE_COLOR,
+  o.PRICE,
+  n
+), E = c(
+  t.PRICE_SIZE,
+  o.PRICE,
+  n
+), P = l(
+  t.PRICE_STYLE,
+  o.PRICE,
+  n
+), m = e(
+  t.PRICE_FONT_FAMILY,
+  o.PRICE,
+  n
+), s = C(
+  t.PRICE_BACKGROUND,
+  o.PRICE,
+  n
+), d = r(
+  t.PRICE_PADDINGS,
+  o.PRICE,
+  n
+), x = {
+  align: a,
+  color: i,
+  size: E,
+  style: P,
+  fontFamily: m,
+  background: s,
+  paddings: d
+};
+export {
+  x as PriceControls
+};

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

@@ -0,0 +1,222 @@
+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 = {
+  COLUMN_SPACING: "columnSpacing",
+  COLUMN_SPACING_LABEL: "columnSpacingLabel",
+  ROW_SPACING: "rowSpacing"
+}, P = {
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing"
+};
+function N(o, n) {
+  if (!o)
+    return n;
+  const t = parseFloat(o);
+  return Number.isNaN(t) ? n : t;
+}
+class $ extends L {
+  constructor() {
+    super(...arguments);
+    l(this, "store", w());
+    l(this, "unsubscribeOrientation", null);
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    l(this, "_debouncedOnColumnSpacingChange", O((t) => {
+      this._onColumnSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onRowSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    l(this, "_debouncedOnRowSpacingChange", O((t) => {
+      this._onRowSpacingChange(t);
+    }, 300));
+  }
+  getId() {
+    return R;
+  }
+  getTemplate() {
+    return `
+            <div class="spacing-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Column Spacing (px)", name: s.COLUMN_SPACING_LABEL }),
+      this._GuCounter({
+        name: s.COLUMN_SPACING,
+        minValue: A,
+        maxValue: y,
+        step: b
+      }),
+      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuCounter({
+        name: s.ROW_SPACING,
+        minValue: A,
+        maxValue: y,
+        step: b
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._updateColumnSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
+  }
+  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
+   */
+  _updateColumnSpacingVisibility() {
+    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);
+  }
+  /**
+   * Reads spacing values from node config first, falls back to DOM styles
+   */
+  _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();
+    this.api.updateValues({
+      [s.COLUMN_SPACING]: e,
+      [s.ROW_SPACING]: r
+    });
+  }
+  /**
+   * Gets stored column spacing from the first attribute row cell's padding.
+   * 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;
+    }
+    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;
+  }
+  /**
+   * Gets stored row spacing from the first spacer element's height style
+   */
+  _getStoredRowSpacing() {
+    if (!this.currentNode)
+      return m;
+    const t = this.currentNode.querySelector(".spacer"), e = S(t, "height");
+    return N(e, m);
+  }
+  /**
+   * 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.
+   */
+  _onColumnSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    d.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);
+    }) : 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`));
+  }
+  /**
+   * Handles row spacing changes
+   * Applies height to all spacer elements between product rows
+   */
+  _onRowSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    d.updateConfig(
+      this.api,
+      this.currentNode,
+      { rowSpacing: t },
+      `Changed row spacing to ${t}px`
+    ), this._storeRowSpacing(t);
+    const e = Array.from(
+      this.currentNode.querySelectorAll(".spacer")
+    );
+    if (!e.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`));
+  }
+  /**
+   * Stores column spacing value in block data attribute
+   */
+  _storeColumnSpacing(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"));
+  }
+  /**
+   * Stores row spacing value in block data attribute
+   */
+  _storeRowSpacing(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"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(s.COLUMN_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
+    }), this.api.onValueChanged(s.ROW_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
+    });
+  }
+  /**
+   * Subscribe to store orientation changes
+   * Updates column 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();
+    });
+  }
+}
+export {
+  R as SPACING_CONTROL_ID,
+  $ as SpacingControl
+};

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

@@ -1,19 +1,42 @@
-import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as t } from "./block.js";
-import { RecommendationCardCompositionControl as n } from "./cardCompositionControl.js";
-import { RecommendationBlockControl as r } from "./control.js";
-import { ButtonAlignControl as l, ButtonBorderControl as d, ButtonBorderRadiusControl as C, ButtonColorControl as i, ButtonFitToContentControl as a, ButtonFontFamilyControl as e, ButtonMarginsControl as m, ButtonPaddingsControl as s, ButtonTextControl as c, ButtonTextSizeControl as u, ButtonTextStyleAndFontColorControl as P, ImageMarginsControl as g, ImageSizeControl as B, NameAlignControl as O, NameBackgroundControl as f, NameColorControl as b, NameFontFamilyControl as p, NamePaddingsControl as y, NameSizeControl as S, NameStyleControl as F, OldPriceAlignControl as x, OldPriceBackgroundControl as T, OldPriceColorControl as k, OldPriceFontFamilyControl as A, OldPricePaddingsControl as D, OldPriceSizeControl as N, OldPriceStyleControl as R, OmnibusPriceAlignControl as z, OmnibusPriceBackgroundControl as I, OmnibusPriceColorControl as w, OmnibusPriceFontFamilyControl as h, OmnibusPricePaddingsControl as M, OmnibusPriceSizeControl as E, OmnibusPriceStyleControl as j, OmnibusDiscountAlignControl as q, OmnibusDiscountBackgroundControl as v, OmnibusDiscountColorControl as G, OmnibusDiscountFontFamilyControl as H, OmnibusDiscountPaddingsControl as J, OmnibusDiscountSizeControl as K, OmnibusDiscountStyleControl as L, PriceAlignControl as Q, PriceBackgroundControl as U, PriceColorControl as V, PriceFontFamilyControl as W, PricePaddingsControl as X, PriceSizeControl as Y, PriceStyleControl as Z } from "./controls/index.js";
-import { RecommendationIconsRegistry as _ } from "./iconsRegistry.js";
-import $ from "./recommendation.css.js";
-import { SettingsPanel as oo } from "./settingsPanel.js";
-import { CardBackgroundColorControl as to } from "./controls/cardBackgroundColorControl.js";
-import { SpacingControl as no } from "./controls/spacingControl.js";
-import { NameTextTrimControl as ro } from "./controls/nameTextTrimControl.js";
-import { OmnibusPriceTextBeforeControl as lo } from "./controls/omnibusPriceTextBeforeControl.js";
-import { OmnibusPriceTextAfterControl as Co } from "./controls/omnibusPriceTextAfterControl.js";
-import { OmnibusDiscountTextBeforeControl as io } from "./controls/omnibusDiscountTextBeforeControl.js";
-import { OmnibusDiscountTextAfterControl as ao } from "./controls/omnibusDiscountTextAfterControl.js";
-const xo = new o().addBlock(t).withSettingsPanelRegistry(oo).addControl(r).addControl(to).addControl(no).addControl(l).addControl(d).addControl(C).addControl(i).addControl(a).addControl(e).addControl(m).addControl(s).addControl(c).addControl(u).addControl(P).addControl(g).addControl(B).addControl(O).addControl(f).addControl(b).addControl(p).addControl(y).addControl(S).addControl(F).addControl(ro).addControl(x).addControl(T).addControl(k).addControl(A).addControl(D).addControl(N).addControl(R).addControl(z).addControl(I).addControl(w).addControl(h).addControl(M).addControl(E).addControl(j).addControl(lo).addControl(Co).addControl(q).addControl(v).addControl(G).addControl(H).addControl(J).addControl(K).addControl(L).addControl(io).addControl(ao).addControl(Q).addControl(U).addControl(V).addControl(W).addControl(X).addControl(Y).addControl(Z).addControl(n).addStyles($).withIconsRegistry(_).build();
+import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlock as m } from "./block.js";
+import { RecommendationBlockControl as n } from "./controls/main/index.js";
+import "./store/recommendation.js";
+import { NameControls as i } from "./controls/name/index.js";
+import { PriceControls as e } from "./controls/price/index.js";
+import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { OmnibusPriceControls as s } from "./controls/omnibusPrice/index.js";
+import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
+import { ButtonControls as p } from "./controls/button/index.js";
+import { ImageControls as c } from "./controls/image/index.js";
+import { SpacingControl as C } from "./controls/spacing/index.js";
+import { CardBackgroundColorControl as d } from "./controls/cardBackground/index.js";
+import { LayoutControl as f } from "./controls/layout/index.js";
+import { RecommendationCardCompositionControl as u } from "./controls/cardComposition/index.js";
+import { RecommendationIconsRegistry as g } from "./iconsRegistry.js";
+import R from "./recommendation.css.js";
+import { SettingsPanel as y } from "./settingsPanel.js";
+const B = [
+  i,
+  e,
+  l,
+  s,
+  a,
+  p,
+  c
+], P = [
+  n,
+  d,
+  f,
+  C,
+  u
+], b = [
+  ...P,
+  ...B.flatMap((o) => Object.values(o))
+], F = b.reduce(
+  (o, t) => o.addControl(t),
+  new r().addBlock(m).withSettingsPanelRegistry(y)
+).addStyles(R).withIconsRegistry(g).build();
 export {
-  xo as default
+  F as default
 };

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

@@ -1,5 +1,5 @@
-import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class n extends o {
+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">
@@ -43,9 +43,60 @@ class n extends o {
                 3.40029 12.0082 3.25285 11.7656 3.15234C11.365 2.98638 11.0001 2.64849 11 2.21484V2Z" 
                 fill="currentColor"/>
             </svg>
+        `, C["grid-orientation"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                <rect x="1" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
+                <rect x="12" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
+                <rect x="1" y="12" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
+                <rect x="12" y="12" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
+            </svg>
+        `, C["list-orientation"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                <circle cx="3" cy="4" r="1" stroke="currentColor" stroke-width="1"/>
+                <rect x="7" y="3" width="11" height="2" rx="1"/>
+                <circle cx="3" cy="10" r="1" stroke="currentColor" stroke-width="1"/>
+                <rect x="7" y="9" width="11" height="2" rx="1"/>
+                <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>
         `;
   }
 }
 export {
-  n as RecommendationIconsRegistry
+  o as RecommendationIconsRegistry
 };

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

@@ -1,18 +1,75 @@
 const n = `/* Utils */
 .es-180w { width: 180px; }
 
-/* Recommendation Controls */
-.recommendation-controls-container > .container {
-    padding: 16px;
+/* Recommendation Controls - Main settings panel separators */
+.recommendation-controls-container > div {
+    border-bottom: 1px solid #e0e0e0;
 }
 
-.recommendation-controls-container > .container:first-child {
+.recommendation-controls-container > div:first-child {
     padding-top: 0;
 }
 
+.recommendation-controls-container > div:last-child {
+    border-bottom: none;
+}
+
 .container:has(.recommendation-controls-container) {
     padding: 0
 }
+
+/* Hide drag icon for list layout (ordering disabled) */
+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