@useinsider/guido 2.0.0 → 2.1.0-beta.038f431

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/omnibusPrice/textAfter.js

@@ -0,0 +1,73 @@
+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 d.OMNIBUS_PRICE_TEXT_AFTER;
+  }
+  getTemplate() {
+    return `
+            <div class="omnibus-price-text-after-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Text After" }),
+      this._GuTextInput({
+        name: "omnibusPriceTextAfter",
+        placeholder: "e.g., (incl. VAT)",
+        className: "es-180w"
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const t = this._getCurrentText();
+    this.api.updateValues({
+      omnibusPriceTextAfter: t
+    });
+  }
+  _getCurrentText() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return m;
+    const t = this.currentNode.getAttribute(s);
+    return t === null ? m : t;
+  }
+  _onTextChange(t) {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return;
+    const e = this.currentNode.closest(T);
+    if (!e || !("querySelectorAll" in e))
+      return;
+    const n = Array.from(
+      e.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_PRICE}"]`)
+    );
+    if (!n.length)
+      return;
+    const r = this.api.getDocumentModifier();
+    n.forEach((i) => {
+      r.modifyHtml(i).setAttribute(s, t);
+      const o = i.querySelector(p);
+      if (o) {
+        const u = f(o, t);
+        r.modifyHtml(o).setInnerHtml(u);
+      }
+    }), r.apply(new c("Update omnibus price text after"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged("omnibusPriceTextAfter", (t) => {
+      this._onTextChange(t);
+    });
+  }
+}
+export {
+  N as OmnibusPriceTextAfterControl
+};

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

@@ -0,0 +1,73 @@
+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 d.OMNIBUS_PRICE_TEXT_BEFORE;
+  }
+  getTemplate() {
+    return `
+            <div class="omnibus-price-text-before-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Text Before" }),
+      this._GuTextInput({
+        name: "omnibusPriceTextBefore",
+        placeholder: "e.g., Lowest 30-day price: ",
+        className: "es-180w"
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
+  _setFormValues() {
+    const e = this._getCurrentText();
+    this.api.updateValues({
+      omnibusPriceTextBefore: e
+    });
+  }
+  _getCurrentText() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return c;
+    const e = this.currentNode.getAttribute(s);
+    return e === null ? c : e;
+  }
+  _onTextChange(e) {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return;
+    const t = this.currentNode.closest(p);
+    if (!t || !("querySelectorAll" in t))
+      return;
+    const n = Array.from(
+      t.querySelectorAll(`[esd-extension-block-id="${a.OMNIBUS_PRICE}"]`)
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier();
+    n.forEach((i) => {
+      o.modifyHtml(i).setAttribute(s, e);
+      const r = i.querySelector(f);
+      if (r) {
+        const m = T(r, e);
+        o.modifyHtml(r).setInnerHtml(m);
+      }
+    }), o.apply(new u("Update omnibus price text before"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged("omnibusPriceTextBefore", (e) => {
+      this._onTextChange(e);
+    });
+  }
+}
+export {
+  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,45 +1,42 @@
-import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as r } from "./block.js";
-import { RecommendationCardCompositionControl as t } from "./cardCompositionControl.js";
-import { RecommendationBlockControl as n } from "./control.js";
-import { ButtonAlignControl as d } from "./controls/button/align.js";
-import { ButtonBorderControl as l } from "./controls/button/border.js";
-import { ButtonBorderRadiusControl as m } from "./controls/button/borderRadius.js";
-import { ButtonColorControl as i } from "./controls/button/color.js";
-import { ButtonFitToContentControl as C } from "./controls/button/fitToContent.js";
-import { ButtonFontFamilyControl as a } from "./controls/button/fontFamily.js";
-import { ButtonMarginsControl as e } from "./controls/button/margins.js";
-import { ButtonPaddingsControl as p } from "./controls/button/paddings.js";
-import { ButtonTextControl as f } from "./controls/button/text.js";
-import { ButtonTextSizeControl as c } from "./controls/button/textSize.js";
-import { ButtonTextStyleAndFontColorControl as s } from "./controls/button/textStyleAndFontColor.js";
-import { ImageMarginsControl as g } from "./controls/image/margins.js";
-import { ImageSizeControl as B } from "./controls/image/size.js";
-import { NameAlignControl as P } from "./controls/name/align.js";
-import { NameBackgroundControl as u } from "./controls/name/background.js";
-import { NameColorControl as y } from "./controls/name/color.js";
-import { NameFontFamilyControl as S } from "./controls/name/fontFamily.js";
-import { NamePaddingsControl as F } from "./controls/name/paddings.js";
-import { NameSizeControl as R } from "./controls/name/size.js";
-import { NameStyleControl as N } from "./controls/name/style.js";
-import { OldPriceAlignControl as O } from "./controls/oldPrice/align.js";
-import { OldPriceBackgroundControl as k } from "./controls/oldPrice/background.js";
-import { OldPriceColorControl as x } from "./controls/oldPrice/color.js";
-import { OldPriceFontFamilyControl as z } from "./controls/oldPrice/fontFamily.js";
-import { OldPricePaddingsControl as A } from "./controls/oldPrice/paddings.js";
-import { OldPriceSizeControl as I } from "./controls/oldPrice/size.js";
-import { OldPriceStyleControl as T } from "./controls/oldPrice/style.js";
-import { PriceAlignControl as w } from "./controls/price/align.js";
-import { PriceBackgroundControl as h } from "./controls/price/background.js";
-import { PriceColorControl as M } from "./controls/price/color.js";
-import { PriceFontFamilyControl as b } from "./controls/price/fontFamily.js";
-import { PricePaddingsControl as E } from "./controls/price/paddings.js";
-import { PriceSizeControl as j } from "./controls/price/size.js";
-import { PriceStyleControl as q } from "./controls/price/style.js";
-import { RecommendationIconsRegistry as v } from "./iconsRegistry.js";
-import D from "./recommendation.css.js";
-import { SettingsPanel as G } from "./settingsPanel.js";
-const Io = new o().addBlock(r).withSettingsPanelRegistry(G).addControl(n).addControl(d).addControl(l).addControl(m).addControl(i).addControl(C).addControl(a).addControl(e).addControl(p).addControl(f).addControl(c).addControl(s).addControl(g).addControl(B).addControl(P).addControl(u).addControl(y).addControl(S).addControl(F).addControl(R).addControl(N).addControl(O).addControl(k).addControl(x).addControl(z).addControl(A).addControl(I).addControl(T).addControl(w).addControl(h).addControl(M).addControl(b).addControl(E).addControl(j).addControl(q).addControl(t).addStyles(D).withIconsRegistry(v).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 {
-  Io 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 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">
@@ -43,9 +43,25 @@ 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>
         `;
   }
 }
 export {
-  n as RecommendationIconsRegistry
+  o as RecommendationIconsRegistry
 };

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

@@ -1,18 +1,27 @@
 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;
+}
 `;
 export {
   n as default