@useinsider/guido 2.1.0-beta.ce3f1f2 → 2.1.0-beta.cfff05b

package/dist/extensions/Blocks/Items/block.js

@@ -1,18 +1,19 @@
-import { useOnboardingStore as d } from "../../../stores/onboarding.js";
-import { Block as g, BlockCompositionType as f, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { SETTINGS_ENUMS as c, DefaultConfigValues as i } from "./enums/settingsEnums.js";
-import { getDefaultTemplate as p } from "./template.js";
-import { getItemsBlockContainer as u, getItemsBlockConfig as C, getDefaultItemsBlockConfig as I } from "./utils/nodeConfigUtils.js";
-const y = "items-block";
-class B extends g {
+import { useOnboardingStore as g } from "../../../stores/onboarding.js";
+import { useTemplateStore as f } from "../../../stores/template.js";
+import { Block as u, BlockCompositionType as I, UIElementType as c, UEAttr as C, ModificationDescription as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { SETTINGS_ENUMS as l, DefaultConfigValues as s } from "./enums/settingsEnums.js";
+import { getDefaultTemplate as y } from "./template.js";
+import { getItemsBlockContainer as b, getItemsBlockConfig as k, getDefaultItemsBlockConfig as N } from "./utils/nodeConfigUtils.js";
+const m = "items-block";
+class M extends u {
   getId() {
-    return y;
+    return m;
   }
   getIcon() {
     return "items-icon";
   }
   getBlockCompositionType() {
-    return f.CONTAINER;
+    return I.CONTAINER;
   }
   getName() {
     return this.api.translate("Items");
@@ -20,35 +21,54 @@ class B extends g {
   getDescription() {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
+  getSettingsPanelTitleHtml() {
+    if (f().migrations[m] === 0)
+      return "";
+    const n = this.api.translate("Items"), o = this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.");
+    return `<div>
+            <div style="display: flex; align-items: center;">
+                <span>${n}</span>
+            </div>
+            <div class="items-migration-info">
+                <${c.ICON}
+                    ${C.ICON.src}="migration-info-icon"
+                    class="items-migration-info__icon">
+                </${c.ICON}>
+                <p class="items-migration-info__text">
+                    ${o}
+                </p>
+            </div>
+        </div>`;
+  }
   getTemplate() {
-    return p({
-      orientation: c.ORIENTATION.VERTICAL,
-      itemsType: c.ITEMS_TYPE.CART_ITEMS,
+    return y({
+      orientation: l.ORIENTATION.VERTICAL,
+      itemsType: l.ITEMS_TYPE.CART_ITEMS,
       itemId: "{{Abandoned Cart Item (1) Url}}",
-      currencySymbol: i.productPriceCurrencySymbolControlValue,
-      currencyLocation: i.productPriceCurrencyLocationControlValue,
-      formattedPrice: i.productPriceFormattedControlValue === "1"
+      currencySymbol: s.productPriceCurrencySymbolControlValue,
+      currencyLocation: s.productPriceCurrencyLocationControlValue,
+      formattedPrice: s.productPriceFormattedControlValue === "1"
     });
   }
   allowInnerBlocksDND() {
     return !1;
   }
-  onCreated(n) {
-    const s = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
-    r.querySelector('[product-attr="imageSrc"] img') || s.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const e = u(n);
+  onCreated(i) {
+    const n = this.api.getDocumentModifier(), o = this.api.getDocumentRootCssNode();
+    o.querySelector('[product-attr="imageSrc"] img') || n.modifyCss(o).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
+    const e = b(i);
     if (!e)
       return;
-    const a = e.getNodeConfig(), l = a && Object.keys(a).length > 0, t = C(n);
+    const a = e.getNodeConfig(), d = a && Object.keys(a).length > 0, t = k(i);
     if (t != null && t.initialized)
-      l ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
+      d ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new r("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new r("Migrate legacy config to nodeConfig"));
     else {
-      const m = I();
-      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(m).apply(new o("Initialize Items block with default configuration")), d().startOnboarding("itemsOnboarding");
+      const p = N();
+      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(p).apply(new r("Initialize Items block with default configuration")), g().startOnboarding("itemsOnboarding");
     }
   }
 }
 export {
-  y as BLOCK_ID,
-  B as ItemsBlock
+  m as BLOCK_ID,
+  M as ItemsBlock
 };

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

@@ -1,5 +1,6 @@
 import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class i extends o {
+import { MIGRATION_INFO_ICON as r } from "../common-icons.js";
+class s extends o {
   registerIconsSvg(t) {
     t["items-icon"] = `
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -19,14 +20,14 @@ class i extends o {
             </svg>
         `, t["horizontal-orientation"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor" 
+                <path d="M10 19H4C3.44772 19 3 18.5523 3 18V2C3 1.44772 3.44772 1 4 1H10V19Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
-                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor" 
+                <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
             </svg>
-        `;
+        `, t["migration-info-icon"] = r;
   }
 }
 export {
-  i as ItemsIconsRegistry
+  s as ItemsIconsRegistry
 };

package/dist/extensions/Blocks/Items/items.css.js

@@ -17,6 +17,54 @@ const n = `/* Utils */
 .container:has(.items-controls-container) {
     padding: 0
 }
+
+/* ─── Migration Info Box ─────────────────────────────────────────────── */
+/* Shown in the settings panel title when a block was migrated from legacy */
+
+/* Layout variables for positioning the absolutely-placed info box */
+:host {
+    --items-migration-padding: 16px;
+    --items-migration-title-height: 61px;
+    --items-migration-box-height: 98px;
+}
+
+/* Push tabs down when info box is present inside the control panel header */
+.control-panel-header:has(.items-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--items-migration-padding) + var(--items-migration-box-height));
+}
+
+/* Info box container */
+.items-migration-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: var(--guido-color-background-onpage-message-info);
+    border: 1px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    position: absolute;
+    left: var(--items-migration-padding);
+    right: var(--items-migration-padding);
+    top: calc(var(--items-migration-padding) + var(--items-migration-title-height));
+}
+
+/* Icon — 18x19 icon inside a 24x24 bounding box (matches Figma) */
+.items-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.items-migration-info__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
 `;
 export {
   n as default

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

@@ -1,18 +1,30 @@
-import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as o } from "./templates/blockTemplate.js";
-const n = "recommendation-block";
-class m extends e {
+var h = Object.defineProperty;
+var I = (r, o, t) => o in r ? h(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
+var g = (r, o, t) => I(r, typeof o != "symbol" ? o + "" : o, t);
+import { useTemplateStore as k } from "../../../stores/template.js";
+import { Block as _, BlockCompositionType as B, UIElementType as d, UEAttr as C, ModificationDescription as A } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ensureMobileCssRulesExist as u } from "./controls/mobileLayout/cssRules.js";
+import { RecommendationConfigService as s } from "./services/configService.js";
+import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
+import { getDefaultTemplate as R } from "./templates/grid/template.js";
+const f = "recommendation-block", c = "ins-recommendation-v3-block-v2", a = "recommendation-id";
+class E extends _ {
   constructor() {
     super();
+    /**
+     * Stores the ID generated in getTemplate() so onCreated() can reuse it.
+     * This avoids generating a new (different) ID in onCreated().
+     */
+    g(this, "_pendingBlockId", null);
   }
   getId() {
-    return n;
+    return f;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return t.CONTAINER;
+    return B.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -20,11 +32,143 @@ class m extends e {
   getDescription() {
     return this.api.translate("Recommendation Block Title Description");
   }
+  getSettingsPanelTitleHtml() {
+    if (k().migrations[f] === 0)
+      return "";
+    const e = this.api.translate("Recommendation Block"), i = this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.");
+    return `<div>
+            <div style="display: flex; align-items: center;">
+                <span>${e}</span>
+            </div>
+            <div class="recommendation-migration-info">
+                <${d.ICON}
+                    ${C.ICON.src}="migration-info-icon"
+                    class="recommendation-migration-info__icon">
+                </${d.ICON}>
+                <p class="recommendation-migration-info__text">
+                    ${i}
+                </p>
+            </div>
+        </div>`;
+  }
+  /**
+   * Returns the template HTML for a new recommendation block.
+   * Generates a unique recommendation ID and embeds the instance class
+   * (ins-recommendation-v3-block-{id}) directly in the template HTML.
+   * This is necessary because Stripo's Angular rendering manages the class
+   * attribute and overwrites dynamically added classes via setAttribute.
+   */
   getTemplate() {
-    return o();
+    const t = this._generateNextId();
+    return this._pendingBlockId = t, R(t);
+  }
+  /**
+   * Called when a new block is dropped into the template
+   *
+   * Uses the ID from getTemplate() (which already embedded the instance class)
+   * and assigns the recommendation-id attribute + initializes configuration.
+   * @param node - The newly created block node
+   */
+  onCreated(t) {
+    const e = this._pendingBlockId ?? this._generateNextId();
+    this._pendingBlockId = null, this._assignRecommendationId(t, e);
+    const i = s.initializeConfig(this.api, t, { recommendationId: e }), n = p();
+    n.setCurrentBlock(e), u(this.api), n.patchCurrentBlockConfig({ language: i.language }, { triggerRefetch: !1 });
+  }
+  /**
+   * Called when the document changes or template is loaded
+   *
+   * Handles migration from legacy templates that don't have node config
+   * and assigns recommendation-id to legacy blocks that lack one.
+   * @param node - The block node that may need migration
+   */
+  onDocumentChanged(t) {
+    if (!(!t || !("getNodeConfig" in t))) {
+      if (!this._getRecommendationId(t)) {
+        const e = this._generateNextId();
+        this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
+          this.api,
+          t,
+          { recommendationId: e },
+          "Assign recommendation ID to legacy block"
+        );
+      }
+      s.needsMigration(t) && this._migrateFromLegacy(t), u(this.api);
+    }
+  }
+  /**
+   * Called when a block is deleted from the template
+   *
+   * Cleans up the per-block state from the Pinia store.
+   * @param node - The block node being deleted
+   */
+  onDelete(t) {
+    const e = this._getRecommendationId(t);
+    e && p().removeBlockState(e);
+  }
+  /**
+   * Generates the next unique recommendation ID by scanning all existing blocks
+   * in the document and finding the maximum existing ID + 1.
+   */
+  _generateNextId() {
+    let t = 0;
+    try {
+      const e = this.api.getDocumentRoot();
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${c}`).forEach((n) => {
+        if ("getAttribute" in n) {
+          const m = n.getAttribute(a), l = m ? parseInt(m) : 0;
+          l > t && (t = l);
+        }
+      });
+    } catch {
+    }
+    return t + 1;
+  }
+  /**
+   * Assigns a recommendation-id attribute to the block element.
+   * The instance class (ins-recommendation-v3-block-{id}) is embedded in the template
+   * HTML by getTemplate(), since Stripo's Angular rendering overwrites dynamically
+   * added classes via setAttribute.
+   */
+  _assignRecommendationId(t, e) {
+    const i = this._getBlockElement(t);
+    if (!i)
+      return;
+    const n = this.api.getDocumentModifier();
+    n.modifyHtml(i).setAttribute(a, e.toString()), n.apply(new A(`Assign recommendation ID ${e}`));
+  }
+  /**
+   * Gets the recommendation-id from a block node
+   */
+  _getRecommendationId(t) {
+    const e = this._getBlockElement(t);
+    if (!e || !("getAttribute" in e))
+      return null;
+    const i = e.getAttribute(a);
+    if (!i)
+      return null;
+    const n = parseInt(i);
+    return Number.isNaN(n) ? null : n;
+  }
+  /**
+   * Gets the block element (the element with BLOCK_CLASS)
+   */
+  _getBlockElement(t) {
+    if ("getAttribute" in t) {
+      const e = t.getAttribute("class");
+      if (e && e.includes(c))
+        return t;
+    }
+    return "querySelector" in t ? t.querySelector(`.${c}`) : null;
+  }
+  /**
+   * Migrate configuration from legacy format
+   */
+  _migrateFromLegacy(t) {
+    s.migrateFromDataAttributes(this.api, t);
   }
 }
 export {
-  n as BLOCK_ID,
-  m as RecommendationBlock
+  f as BLOCK_ID,
+  E as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/constants/blockIds.js

@@ -0,0 +1,4 @@
+var b = /* @__PURE__ */ ((r) => (r.BUTTON = "recommendation-block-button", r.NAME = "recommendation-block-name", r.PRICE = "recommendation-block-price", r.OLD_PRICE = "recommendation-block-old-price", r.OMNIBUS_PRICE = "recommendation-block-omnibus-price", r.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", r.IMAGE = "recommendation-block-image", r))(b || {});
+export {
+  b as RecommendationBlockId
+};

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -0,0 +1,4 @@
+var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(o || {});
+export {
+  o as RecommendationControlId
+};

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -0,0 +1,66 @@
+import { DEFAULT_ROW_SPACING as U, DEFAULT_COLUMN_SPACING as I, DEFAULT_MOBILE_CARDS_IN_ROW as n, DEFAULT_CARDS_IN_ROW as s } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as o, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OMNIBUS_PRICE as T, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as R } from "./selectors.js";
+const O = {
+  code: "USD",
+  symbol: "USD",
+  alignment: "after",
+  decimalCount: 2,
+  decimalSeparator: ".",
+  thousandSeparator: ","
+}, i = {
+  textBefore: "",
+  textAfter: ""
+}, C = {
+  textBefore: "",
+  textAfter: ""
+}, D = [
+  t,
+  e,
+  o,
+  _,
+  T,
+  r,
+  R
+], A = {
+  [t]: !0,
+  [e]: !0,
+  [_]: !0,
+  [o]: !0,
+  [T]: !1,
+  [r]: !1,
+  [R]: !0
+}, E = {
+  // Settings
+  strategy: "mostPopular",
+  productIds: [],
+  size: "6",
+  shuffleProducts: !1,
+  language: "en_US",
+  currency: O,
+  filters: [],
+  // Layout
+  layout: "grid",
+  cardsInRow: s,
+  mobileCardsInRow: n,
+  columnSpacing: I,
+  rowSpacing: U,
+  // Composition
+  composition: D,
+  visibility: A,
+  // Element settings
+  omnibusPrice: i,
+  omnibusDiscount: C,
+  textTrimming: !1,
+  // Meta
+  configVersion: 1,
+  recommendationId: 0
+}, N = 1;
+export {
+  N as CURRENT_CONFIG_VERSION,
+  D as DEFAULT_COMPOSITION,
+  O as DEFAULT_CURRENCY,
+  E as DEFAULT_NODE_CONFIG,
+  C as DEFAULT_OMNIBUS_DISCOUNT,
+  i as DEFAULT_OMNIBUS_PRICE,
+  A as DEFAULT_VISIBILITY
+};

package/dist/extensions/Blocks/Recommendation/constants/layout.js

@@ -0,0 +1,22 @@
+const _ = {
+  GRID: "grid",
+  LIST: "list"
+}, o = [
+  { icon: "grid-orientation", value: _.GRID },
+  { icon: "list-orientation", value: _.LIST }
+], t = 3, n = 3, A = 9, O = 4, R = 1, T = 2, c = 10, s = 20, I = 0, S = 50, P = 5;
+export {
+  n as DEFAULT_CARDS_IN_ROW,
+  c as DEFAULT_COLUMN_SPACING,
+  R as DEFAULT_MOBILE_CARDS_IN_ROW,
+  t as DEFAULT_PRODUCTS_PER_ROW,
+  s as DEFAULT_ROW_SPACING,
+  o as LAYOUT_OPTIONS,
+  _ as LAYOUT_VALUES,
+  T as MAX_MOBILE_PRODUCTS_PER_ROW,
+  O as MAX_PRODUCTS_PER_ROW,
+  A as MAX_PRODUCT_COUNT,
+  S as MAX_SPACING,
+  I as MIN_SPACING,
+  P as SPACING_STEP
+};

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -0,0 +1,21 @@
+const c = ".ins-recommendation-product-container", n = ".ins-recommendation-desktop-container", o = ".ins-recommendation-mobile-container", T = {
+  CURRENCY: "currency",
+  SYMBOL: "currency-symbol",
+  ALIGNMENT: "currency-alignment",
+  THOUSAND_SEPARATOR: "currency-thousand-separator",
+  DECIMAL_SEPARATOR: "currency-decimal-separator",
+  DECIMAL_COUNT: "currency-decimal-count"
+}, t = "productImage", r = "productName", R = "productPrice", e = "productOldPrice", O = "productOmnibusPrice", _ = "productOmnibusDiscount", C = "productButton";
+export {
+  C as ATTR_PRODUCT_BUTTON,
+  t as ATTR_PRODUCT_IMAGE,
+  r as ATTR_PRODUCT_NAME,
+  e as ATTR_PRODUCT_OLD_PRICE,
+  _ as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  O as ATTR_PRODUCT_OMNIBUS_PRICE,
+  R as ATTR_PRODUCT_PRICE,
+  c as CONTAINER_SELECTOR,
+  T as CURRENCY_ATTR,
+  n as DESKTOP_CONTAINER_SELECTOR,
+  o as MOBILE_CONTAINER_SELECTOR
+};

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

@@ -0,0 +1,64 @@
+import { createButtonFitToContainerControl as T, createButtonTextStyleAndFontColorControl as r, createButtonTextSizeControl as e, createButtonTextControl as B, createButtonPaddingsControl as l, createButtonMarginsControl as C, createButtonFontFamilyControl as O, createButtonColorControl as N, createButtonBorderRadiusControl as i, createButtonBorderControl as a, createButtonAlignControl 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 n } from "../../constants/selectors.js";
+const U = c(
+  t.BUTTON_ALIGN,
+  o.BUTTON,
+  n
+), d = a(
+  t.BUTTON_BORDER,
+  o.BUTTON,
+  n
+), s = i(
+  t.BUTTON_BORDER_RADIUS,
+  o.BUTTON,
+  n
+), _ = N(
+  t.BUTTON_COLOR,
+  o.BUTTON,
+  n
+), m = O(
+  t.BUTTON_FONT_FAMILY,
+  o.BUTTON,
+  n
+), u = C(
+  t.BUTTON_MARGINS,
+  o.BUTTON,
+  n
+), R = l(
+  t.BUTTON_PADDINGS,
+  o.BUTTON,
+  n
+), F = B(
+  t.BUTTON_TEXT,
+  o.BUTTON,
+  n
+), A = e(
+  t.BUTTON_TEXT_SIZE,
+  o.BUTTON,
+  n
+), S = r(
+  t.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+  o.BUTTON,
+  n
+), E = T(
+  t.BUTTON_FIT_TO_CONTENT,
+  o.BUTTON,
+  n
+), p = {
+  align: U,
+  border: d,
+  borderRadius: s,
+  color: _,
+  fontFamily: m,
+  margins: u,
+  paddings: R,
+  text: F,
+  textSize: A,
+  textStyleAndFontColor: S,
+  fitToContent: E
+};
+export {
+  p as ButtonControls
+};

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

@@ -0,0 +1,80 @@
+import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as s } from "../../../common-control.js";
+import { getCurrentLayout as l } from "../main/utils.js";
+const u = "recommendation-card-background-color-control", e = {
+  CARD_BACKGROUND_COLOR: "cardBackgroundColor"
+}, a = {
+  GRID: ".product-card-segment",
+  LIST: ".product-card-wrapper"
+};
+class _ extends s {
+  getId() {
+    return u;
+  }
+  getTemplate() {
+    return `
+            <div class="card-bg-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Card Background Color" }),
+      this._GuColorPicker(e.CARD_BACKGROUND_COLOR)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(r) {
+    super.onTemplateNodeUpdated(r), this._setFormValues();
+  }
+  _setFormValues() {
+    const r = this._getCurrentCardBackgroundColor();
+    this.api.updateValues({
+      [e.CARD_BACKGROUND_COLOR]: r
+    });
+  }
+  /**
+   * Gets the appropriate selector based on layout
+   * Grid: .product-card-segment (inner table per product cell)
+   * List: .product-card-wrapper (table per product row)
+   */
+  _getCardSelector() {
+    return l(this.currentNode) === "grid" ? a.GRID : a.LIST;
+  }
+  /**
+   * Reads the current background color from the first product card element
+   * @returns The background color value or 'transparent' if not found
+   */
+  _getCurrentCardBackgroundColor() {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return "transparent";
+    const r = this._getCardSelector(), t = this.currentNode.querySelector(r);
+    return !t || !("getStyle" in t) ? "transparent" : t.getStyle("background-color") || "transparent";
+  }
+  /**
+   * Handles card background color changes
+   * Applies the color to all product card elements based on layout
+   */
+  _onCardBackgroundColorChange(r) {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return;
+    const t = this._getCardSelector(), o = Array.from(
+      this.currentNode.querySelectorAll(t)
+    );
+    if (o.length === 0)
+      return;
+    const n = this.api.getDocumentModifier();
+    o.forEach((c) => {
+      n.modifyHtml(c).setStyle("background-color", r);
+    }), n.apply(new d("Update card background color"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(e.CARD_BACKGROUND_COLOR, (r) => {
+      this._onCardBackgroundColorChange(r);
+    });
+  }
+}
+export {
+  u as CARD_BACKGROUND_COLOR_CONTROL_ID,
+  _ as CardBackgroundColorControl
+};