@useinsider/guido 2.2.0-beta.8160e1e → 2.2.0-beta.8abc7b6

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 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

package/dist/extensions/Blocks/Recommendation/services/configService.js

@@ -0,0 +1,240 @@
+import { ModificationDescription as f } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CURRENT_CONFIG_VERSION as u, DEFAULT_NODE_CONFIG as e } from "../constants/defaultConfig.js";
+import { setCurrencyAttributes as g } from "../controls/main/utils.js";
+import { hasMinimalConfig as a } from "../types/nodeConfig.js";
+class C {
+  // ========================================================================
+  // Read Operations
+  // ========================================================================
+  /**
+   * Get configuration from a node, with defaults for missing values
+   *
+   * This is the primary way to read configuration from a block.
+   * Always returns a complete config object with defaults merged in.
+   * @example
+   * const config = RecommendationConfigService.getConfig(this.currentNode);
+   * console.log(config.strategy); // 'mostPopular'
+   * @param node - The immutable HTML node to read config from
+   * @returns Complete configuration with defaults for missing values
+   */
+  static getConfig(i) {
+    if (!i)
+      return this.cloneDefaults();
+    if (!("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
+      return this.cloneDefaults();
+    try {
+      const t = i.getNodeConfig();
+      return t ? this.mergeWithDefaults(t) : this.cloneDefaults();
+    } catch {
+      return this.cloneDefaults();
+    }
+  }
+  /**
+   * Check if a node has valid configuration stored
+   *
+   * Used for migration detection - returns false for legacy templates
+   * that need their configuration migrated.
+   * @param node - The immutable HTML node to check
+   * @returns True if node has valid config with version number
+   */
+  static hasConfig(i) {
+    if (!i || !("getNodeConfig" in i) || typeof i.getNodeConfig != "function")
+      return !1;
+    try {
+      const t = i.getNodeConfig();
+      return a(t);
+    } catch {
+      return !1;
+    }
+  }
+  /**
+   * Get the configuration version from a node
+   * @param node - The immutable HTML node to check
+   * @returns Config version number, or 0 if no config exists
+   */
+  static getConfigVersion(i) {
+    return this.hasConfig(i) && this.getConfig(i).configVersion || 0;
+  }
+  // ========================================================================
+  // Write Operations
+  // ========================================================================
+  /**
+   * Update specific configuration values
+   *
+   * Merges the updates with existing config and persists to node.
+   * This is the primary way to update configuration from controls.
+   * @example
+   * RecommendationConfigService.updateConfig(
+   *   this.api,
+   *   this.currentNode,
+   *   { strategy: 'complementaryItems' },
+   *   'Changed recommendation algorithm'
+   * );
+   * @param api - Stripo extension API with document modifier
+   * @param node - The immutable HTML node to update
+   * @param updates - Partial config with values to update
+   * @param description - Human-readable description for undo/redo
+   * @returns The new complete configuration
+   */
+  static updateConfig(i, t, o, n) {
+    const s = this.getConfig(t), r = this.deepMerge(s, o);
+    return this.saveConfig(i, t, r, n), r;
+  }
+  /**
+   * Initialize configuration for a new block
+   *
+   * Called when a block is first created (dropped into template).
+   * Can optionally merge in partial config from migration.
+   * @example
+   * // In Block.onCreated lifecycle
+   * RecommendationConfigService.initializeConfig(this.api, node);
+   * @param api - Stripo extension API with document modifier
+   * @param node - The immutable HTML node to initialize
+   * @param partialConfig - Optional partial config to merge with defaults
+   * @returns The initialized configuration
+   */
+  static initializeConfig(i, t, o) {
+    const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
+    return this.saveConfig(i, t, n, "Initialize recommendation block"), g({
+      currentNode: t,
+      documentModifier: i.getDocumentModifier(),
+      currency: n.currency
+    }), n;
+  }
+  /**
+   * Save complete configuration to a node
+   *
+   * Low-level method - prefer `updateConfig` or `initializeConfig` in most cases.
+   * @param api - Stripo extension API with document modifier
+   * @param node - The immutable HTML node to save to
+   * @param config - Complete configuration to save
+   * @param description - Human-readable description for undo/redo
+   */
+  static saveConfig(i, t, o, n) {
+    try {
+      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new f(n));
+    } catch (s) {
+      console.warn("[RecommendationConfigService] Failed to save config:", s);
+    }
+  }
+  // ========================================================================
+  // Migration Helpers
+  // ========================================================================
+  /**
+   * Migrate configuration from legacy data-attributes
+   *
+   * Reads existing data-attributes and creates a proper node config.
+   * Used when loading templates created before node config was implemented.
+   * @param api - Stripo extension API with document modifier
+   * @param node - The block node to migrate
+   * @returns The migrated configuration
+   */
+  static migrateFromDataAttributes(i, t) {
+    const o = {
+      configVersion: u
+    };
+    if ("getAttribute" in t && typeof t.getAttribute == "function") {
+      const n = t.getAttribute("data-layout");
+      n === "list" || n === "horizontal" ? o.layout = "list" : (n === "grid" || n === "vertical") && (o.layout = "grid");
+      const s = t.getAttribute("data-card-composition");
+      s && (o.composition = s.split(",").filter(Boolean));
+      const r = t.getAttribute("data-column-spacing");
+      r && (o.columnSpacing = parseInt(r) || e.columnSpacing);
+      const c = t.getAttribute("data-row-spacing");
+      c && (o.rowSpacing = parseInt(c) || e.rowSpacing);
+    }
+    return this.initializeConfig(i, t, o);
+  }
+  /**
+   * Check if configuration needs migration
+   * @param node - The block node to check
+   * @returns True if migration is needed
+   */
+  static needsMigration(i) {
+    return i ? this.hasConfig(i) ? this.getConfigVersion(i) < u : !0 : !1;
+  }
+  // ========================================================================
+  // Internal Helpers
+  // ========================================================================
+  /**
+   * Clone default config to avoid mutations
+   */
+  static cloneDefaults() {
+    return {
+      ...e,
+      currency: { ...e.currency },
+      omnibusPrice: { ...e.omnibusPrice },
+      omnibusDiscount: { ...e.omnibusDiscount },
+      composition: [...e.composition],
+      visibility: { ...e.visibility },
+      filters: [],
+      productIds: [],
+      recommendationId: 0
+    };
+  }
+  /**
+   * Merge partial config with defaults
+   *
+   * Deep merges nested objects like currency, omnibus settings.
+   */
+  static mergeWithDefaults(i) {
+    const t = this.cloneDefaults();
+    return {
+      ...t,
+      ...i,
+      currency: {
+        ...t.currency,
+        ...i.currency || {}
+      },
+      omnibusPrice: {
+        ...t.omnibusPrice,
+        ...i.omnibusPrice || {}
+      },
+      omnibusDiscount: {
+        ...t.omnibusDiscount,
+        ...i.omnibusDiscount || {}
+      },
+      visibility: {
+        ...t.visibility,
+        ...i.visibility || {}
+      },
+      composition: i.composition || t.composition,
+      filters: i.filters || [],
+      productIds: i.productIds || []
+    };
+  }
+  /**
+   * Deep merge for nested objects
+   *
+   * Recursively merges source into target, preserving existing values
+   * that aren't explicitly overwritten.
+   */
+  static deepMerge(i, t) {
+    return {
+      ...i,
+      ...t,
+      currency: {
+        ...i.currency,
+        ...t.currency || {}
+      },
+      omnibusPrice: {
+        ...i.omnibusPrice,
+        ...t.omnibusPrice || {}
+      },
+      omnibusDiscount: {
+        ...i.omnibusDiscount,
+        ...t.omnibusDiscount || {}
+      },
+      visibility: {
+        ...i.visibility,
+        ...t.visibility || {}
+      },
+      composition: t.composition ?? i.composition,
+      filters: t.filters ?? i.filters,
+      productIds: t.productIds ?? i.productIds
+    };
+  }
+}
+export {
+  C as RecommendationConfigService
+};

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

@@ -1,17 +1,27 @@
 import { SettingsPanelRegistry as S, SettingsPanelTab as I, SettingsTab as T, ContainerControls as E, TextControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { BLOCK_ID as R } from "./block.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as L } from "./cardCompositionControl.js";
-import { RecommendationBlockId as N, RecommendationControlId as _ } from "./constants.js";
-import { CONTROL_BLOCK_ID as U } from "./control.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackgroundColorControl.js";
-import { SPACING_CONTROL_ID as D } from "./controls/spacingControl.js";
-class m extends S {
+import { RecommendationBlockId as N } from "./constants/blockIds.js";
+import { RecommendationControlId as _ } from "./constants/controlIds.js";
+import { CONTROL_BLOCK_ID as L } from "./controls/main/index.js";
+import "./store/recommendation.js";
+import "./controls/name/index.js";
+import "./controls/price/index.js";
+import "./controls/oldPrice/index.js";
+import "./controls/omnibusPrice/index.js";
+import "./controls/omnibusDiscount/index.js";
+import "./controls/button/index.js";
+import "./controls/image/index.js";
+import { SPACING_CONTROL_ID as U } from "./controls/spacing/index.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackground/index.js";
+import { LAYOUT_CONTROL_ID as D } from "./controls/layout/index.js";
+import { COMPOSITION_CONTROL_BLOCK_ID as A } from "./controls/cardComposition/index.js";
+class s extends S {
   registerBlockControls(O) {
     O[R] = [
       new I(
         T.SETTINGS,
         [
-          U,
+          L,
           E.EXTERNAL_INDENTS
         ]
       ),
@@ -20,13 +30,14 @@ class m extends S {
         [
           C.TEXT_BLOCK_BACKGROUND_COLOR,
           B,
-          D
+          D,
+          U
         ]
       ),
       new I(
         "Card Composition",
         [
-          L
+          A
         ]
       ).withLabel("Card Composition")
     ], O[N.NAME] = [
@@ -158,5 +169,5 @@ class m extends S {
   }
 }
 export {
-  m as SettingsPanel
+  s as SettingsPanel
 };