@useinsider/guido 2.1.0-beta.e2153c2 → 2.1.0-beta.e4c3fa1

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

@@ -1,14 +1,16 @@
-import { RecommendationFeedSourceMaps as d, PriceAttributes as S } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as p } from "../../../../services/recommendationApi.js";
-import { useConfigStore as b } from "../../../../stores/config.js";
-import { defineStore as I } from "pinia";
-import { DEFAULT_CARDS_IN_ROW as R } from "../constants/layout.js";
-import { getDefaultProducts as k } from "../templates/utils.js";
-import { generateCompleteFilterQuery as f } from "../utils/filterUtil.js";
-const m = p();
-function h() {
+import { RecommendationFeedSourceMaps as S, PriceAttributes as R } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationApi as k } from "../../../../services/recommendationApi.js";
+import { useConfigStore as y } from "../../../../stores/config.js";
+import { defineStore as C } from "pinia";
+import { DEFAULT_CARDS_IN_ROW as G } from "../constants/layout.js";
+import { EXCLUDED_ALGORITHM_IDS as P } from "../constants/defaultConfig.js";
+import { getDefaultProducts as p } from "../templates/utils.js";
+import { generateCompleteFilterQuery as b } from "../utils/filterUtil.js";
+const h = k();
+let a = null, l = null, u = null;
+function I() {
   return {
-    cardsInRow: R,
+    cardsInRow: G,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -32,9 +34,9 @@ function h() {
     size: "6"
   };
 }
-function C() {
+function v() {
   return {
-    recommendationConfigs: h(),
+    recommendationConfigs: I(),
     recommendationProducts: [],
     filterStatus: !1,
     filterSelectionDrawerStatus: !1,
@@ -42,7 +44,7 @@ function C() {
     isInitialized: !1
   };
 }
-const y = () => ({
+const D = () => ({
   recommendationCampaignUrls: {},
   activePredictiveAlgorithms: [],
   languages: {},
@@ -51,8 +53,8 @@ const y = () => ({
   blockStates: {},
   currentRecommendationId: null,
   configVersion: 0
-}), A = I("guidoRecommendationExtension", {
-  state: () => y(),
+}), _ = C("guidoRecommendationExtension", {
+  state: () => D(),
   getters: {
     // ====================================================================
     // Proxy Getters — Backward Compatible Access to Current Block State
@@ -62,7 +64,7 @@ const y = () => ({
      * This allows all existing code that reads `store.recommendationConfigs` to work unchanged.
      */
     recommendationConfigs(t) {
-      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationConfigs : h();
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationConfigs : I();
     },
     /**
      * Proxy getter: delegates to blockStates[currentRecommendationId].recommendationProducts
@@ -100,8 +102,8 @@ const y = () => ({
     },
     getActivePredictiveAlgorithms: (t) => {
       const r = [];
-      return t.activePredictiveAlgorithms.forEach((e) => {
-        r.push(...d.filter((n) => n.id === e));
+      return t.activePredictiveAlgorithms.filter((e) => !P.includes(e)).forEach((e) => {
+        r.push(...S.filter((n) => n.id === e));
       }), r.map((e) => ({
         text: e.name,
         value: e.key
@@ -117,7 +119,7 @@ const y = () => ({
     })),
     getFilterList() {
       return Object.values(this.filterList).map((t) => {
-        const r = t.type === "defaultAttribute", e = S.includes(t.attributeName);
+        const r = t.type === "defaultAttribute", e = R.includes(t.attributeName);
         let n = r ? t.attributeName : `product_attributes.${t.attributeName}`;
         return n = e ? `${n}.${this.recommendationConfigs.currencySettings.value}` : n, {
           text: t.displayName,
@@ -141,7 +143,7 @@ const y = () => ({
     setCurrentBlock(t) {
       this.blockStates[t] || (this.blockStates = {
         ...this.blockStates,
-        [t]: C()
+        [t]: v()
       }), this.currentRecommendationId = t;
     },
     /**
@@ -213,22 +215,46 @@ const y = () => ({
     // Shared Data Fetching (fetched once, used by all blocks)
     // ====================================================================
     async fetchRecommendationCreateData() {
-      if (this.activePredictiveAlgorithms.length)
-        return;
-      const {
-        activePredictiveAlgorithms: t,
-        languages: r,
-        currencies: e
-      } = await m.fetchRecommendationCreateData();
-      if (this.activePredictiveAlgorithms = t, this.languages = r, this.currentRecommendationId !== null && this.blockStates[this.currentRecommendationId]) {
-        const n = this.blockStates[this.currentRecommendationId];
-        n.filterStatus = !!n.recommendationConfigs.filters.length;
+      if (!this.activePredictiveAlgorithms.length) {
+        if (a) {
+          await a;
+          return;
+        }
+        a = (async () => {
+          const {
+            activePredictiveAlgorithms: t,
+            languages: r,
+            currencies: e
+          } = await h.fetchRecommendationCreateData();
+          if (this.activePredictiveAlgorithms = t, this.languages = r, this.currentRecommendationId !== null && this.blockStates[this.currentRecommendationId]) {
+            const n = this.blockStates[this.currentRecommendationId];
+            n.filterStatus = !!n.recommendationConfigs.filters.length;
+          }
+          this.currencyList = e;
+        })();
+        try {
+          await a;
+        } finally {
+          a = null;
+        }
       }
-      this.currencyList = e;
     },
     async fetchRecommendationFilters() {
-      const t = await m.fetchRecommendationFilters();
-      this.filterList = t;
+      if (!Object.keys(this.filterList).length) {
+        if (l) {
+          await l;
+          return;
+        }
+        l = (async () => {
+          const t = await h.fetchRecommendationFilters();
+          this.filterList = t;
+        })();
+        try {
+          await l;
+        } finally {
+          l = null;
+        }
+      }
     },
     // ====================================================================
     // Per-Block Filter Actions
@@ -268,47 +294,62 @@ const y = () => ({
     addFilter(t) {
       if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
         return;
-      const r = this.blockStates[this.currentRecommendationId], e = [...r.recommendationConfigs.filters], o = e.filter(
-        (i) => i.filterGroup === t.filterGroup
-      ).length + 1, s = e.findLastIndex((i) => i.filterGroup === t.filterGroup);
-      s !== -1 ? e.splice(s + 1, 0, {
+      const r = this.blockStates[this.currentRecommendationId], e = [...r.recommendationConfigs.filters], s = e.filter(
+        (o) => o.filterGroup === t.filterGroup
+      ).length + 1, m = e.findLastIndex((o) => o.filterGroup === t.filterGroup);
+      m !== -1 ? e.splice(m + 1, 0, {
         ...t,
-        filterNumber: o
+        filterNumber: s
       }) : e.push({
         ...t,
-        filterNumber: o
+        filterNumber: s
       }), r.recommendationConfigs.filters = e;
     },
     generateFilterQuery() {
-      return f(this.recommendationConfigs.filters);
+      return b(this.recommendationConfigs.filters);
     },
     // ====================================================================
     // Per-Block Product Fetching
     // ====================================================================
     async fetchRecommendationProducts() {
-      var u;
-      if (this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])
-        return;
-      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((l) => l.isValid), o = f(n), s = ((u = d.find((l) => l.key === e.strategy)) == null ? void 0 : u.path) || "", i = b(), c = {
+      if (!(this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])) {
+        if (u) {
+          await u;
+          return;
+        }
+        u = this._doFetchProducts();
+        try {
+          await u;
+        } finally {
+          u = null;
+        }
+      }
+    },
+    async _doFetchProducts() {
+      var g;
+      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((i) => i.isValid), s = b(n), m = ((g = S.find((i) => i.key === e.strategy)) == null ? void 0 : g.path) || "", o = y(), c = {
         locale: e.language,
         currency: e.currencySettings.value,
-        partnerName: i.partnerName,
+        partnerName: o.partnerName,
         size: e.size,
         details: !0,
-        campaignId: i.variationId
+        campaignId: o.variationId
       };
-      e.strategy === "manualMerchandising" ? c.productId = e.productIds.join(",") : e.strategy === "similarViewed" && (c.productId = "{itemId}"), o && (c.filter = o), e.shuffleProducts && (c.shuffle = !0);
-      const g = parseInt(e.size) || 6;
-      let a;
+      e.strategy === "manualMerchandising" ? c.productId = e.productIds.join(",") : e.strategy === "similarViewed" && (c.productId = "{itemId}"), e.strategy === "userBased" && (c.userId = "{user_id}"), s && (c.filter = s), e.shuffleProducts && (c.shuffle = !0);
+      const f = parseInt(e.size) || 6;
+      let d;
       try {
-        a = await m.fetchRecommendationProducts(s, c);
+        d = await h.fetchRecommendationProducts(m, c);
       } catch {
-        a = [];
+        d = [];
+      }
+      if (this.blockStates[t]) {
+        const i = d.length > 0 ? d : p(f);
+        this.blockStates[t].recommendationProducts = i.length < f ? [...i, ...p(f - i.length)] : i;
       }
-      this.blockStates[t] && (this.blockStates[t].recommendationProducts = a.length > 0 ? a : k(g));
     }
   }
 });
 export {
-  A as useRecommendationExtensionStore
+  _ as useRecommendationExtensionStore
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-913a3417] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-16abb398]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-16abb398]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-16abb398]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-079d2bf7] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-16abb398]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-16abb398]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-16abb398]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts

@@ -41,6 +41,12 @@ export declare const DEFAULT_VISIBILITY: Record<string, boolean>;
  * All other code should import and use this constant.
  */
 export declare const DEFAULT_NODE_CONFIG: RecommendationNodeConfig;
+/**
+ * Algorithm IDs to exclude from the recommendation algorithm dropdown.
+ * These algorithms will not be shown as options regardless of API response.
+ * View Together and Purchase Together algorithms are disabled because these require product id.
+ */
+export declare const EXCLUDED_ALGORITHM_IDS: number[];
 /**
  * Current configuration version
  * Increment this when making breaking changes to the schema

package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts

@@ -8,6 +8,6 @@
  */
 export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
-export { CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, } from './selectors';
-export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
-export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, } from './defaultConfig';
+export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, } from './selectors';
+export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, DEFAULT_MOBILE_COLUMN_SPACING, DEFAULT_MOBILE_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
+export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';

package/dist/src/extensions/Blocks/Recommendation/constants/layout.d.ts

@@ -31,8 +31,12 @@ export declare const MAX_MOBILE_PRODUCTS_PER_ROW = 2;
 export declare const MIN_MOBILE_PRODUCTS_PER_ROW = 1;
 /** Default column spacing between product cards (5px on each side = 10px total) */
 export declare const DEFAULT_COLUMN_SPACING = 10;
-/** Default row spacing between product rows */
-export declare const DEFAULT_ROW_SPACING = 20;
+/** Default row spacing between product rows (matches spacer height in template) */
+export declare const DEFAULT_ROW_SPACING = 10;
+/** Default mobile column spacing between product cards */
+export declare const DEFAULT_MOBILE_COLUMN_SPACING = 10;
+/** Default mobile row spacing between product rows (matches spacer height in template) */
+export declare const DEFAULT_MOBILE_ROW_SPACING = 10;
 /** Minimum spacing value */
 export declare const MIN_SPACING = 0;
 /** Maximum spacing value */

package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts

@@ -1,9 +1,14 @@
 /**
  * CSS selectors and data attributes used across the Recommendation extension
  */
+/**
+ * Block root selector — common ancestor of both desktop and mobile containers.
+ * Used across attribute controls so edits apply to BOTH containers simultaneously.
+ */
+export declare const BLOCK_ROOT_SELECTOR = ".ins-recommendation-v3-block-v2";
 /**
  * Container selector for the product container element
- * Used across controls to target elements within the recommendation block
+ * Used in product regeneration logic where container-specific scoping is needed
  */
 export declare const CONTAINER_SELECTOR = ".ins-recommendation-product-container";
 /** Desktop product container selector */

package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts

@@ -25,18 +25,13 @@ export declare class RecommendationBlockControl extends CommonControl {
     getId(): string;
     getTemplate(): string;
     onRender(): Promise<void>;
-    /**
-     * Immediately regenerate products with styles (no debounce)
-     * Used for initial load after fetch completes
-     */
-    private _regenerateWithProducts;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
     onDestroy(): void;
     /**
      * Initialize all sub-controls with the shared API context
      * Each sub-control manages its own form values and event listeners
      */
-    _initializeSubControls(): void;
+    private _initializeSubControls;
     /**
      * Syncs persisted node config into the Pinia store's block state.
      *
@@ -50,11 +45,26 @@ export declare class RecommendationBlockControl extends CommonControl {
      */
     private _syncNodeConfigToStore;
     /**
-     * Fetches initial data for a block (filters, algorithms, products).
+     * Fetches initial data for a block in three phases:
+     * 1. Shared reference data (algorithms, currencies, filters) — parallel
+     * 2. Smart defaults for new blocks (currency, algorithm) — sequential
+     * 3. Product data with correct defaults — sequential
+     *
      * Shared by onRender() and onTemplateNodeUpdated() to avoid duplication.
      * Marks the block as initialized to prevent redundant fetches on re-selection.
      */
     private _fetchBlockData;
+    /**
+     * Applies smart defaults for newly dropped blocks.
+     *
+     * For new blocks (config still matches hardcoded defaults), validates that
+     * the default currency and algorithm are available from the API response.
+     * If not, falls back to the first available option.
+     *
+     * Saved templates with user-customized config are left unchanged because
+     * their values won't match the hardcoded defaults.
+     */
+    private _applySmartDefaults;
     /**
      * Reads the recommendation-id attribute from the block element within the node
      */
@@ -64,8 +74,15 @@ export declare class RecommendationBlockControl extends CommonControl {
      */
     private _debouncedFetchProducts;
     /**
-     * Debounced regeneration when products arrive from API
-     * Tries in-place update first to preserve styles, falls back to full regeneration
+     * Debounced content update when products arrive from API.
+     *
+     * Tries in-place update first (preserves user-applied styles) — this succeeds
+     * when the product count matches the DOM (algorithm/locale/currency changes).
+     *
+     * Falls back to full regeneration when product count differs from DOM — this
+     * happens after "Number of Products" changes where the DOM still has the old
+     * count. The store pads products to the configured size, so in-place only
+     * fails when the size actually changed.
      */
     private _debouncedRegenerateWithProducts;
     /**
@@ -74,6 +91,12 @@ export declare class RecommendationBlockControl extends CommonControl {
      * Uses configVersion counter (incremented only by patchCurrentBlockConfig)
      * to distinguish user-initiated config changes from internal mutations
      * (e.g., fetchRecommendationCreateData setting preferred currency).
+     *
+     * Tracks currentRecommendationId to detect block switches. When the user
+     * selects a different recommendation block, the proxy getters (e.g.,
+     * recommendationProducts) return the new block's data — a different array
+     * reference that would be falsely detected as "new products arrived".
+     * We skip that tick and update tracking references instead.
      */
-    _listenStateUpdates(): void;
+    private _listenStateUpdates;
 }

package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.d.ts

@@ -75,8 +75,12 @@ export interface ReapplySpacingOptions {
     documentModifier: DocumentModifier;
 }
 /**
- * Reapplies spacing values from data attributes after product regeneration
- * This ensures spacing persists when products are regenerated
+ * Reapplies spacing values after product regeneration.
+ * Desktop spacing applies only to the desktop container;
+ * mobile spacing applies only to the mobile container.
+ *
+ * Reads values from node config (primary) with data-attribute fallback
+ * for backward compatibility with pre-nodeConfig templates.
  * @param options - Configuration options
  */
 export declare function reapplySpacing(options: ReapplySpacingOptions): void;
@@ -112,6 +116,17 @@ export interface RegenerateWithStylesOptions extends Omit<RegenerateProductRowsO
  * @param options - Configuration options for regeneration
  */
 export declare function regenerateProductRowsWithStyles(options: RegenerateWithStylesOptions): void;
+/**
+ * Adjusts a products array to a target size.
+ * Used by ProductLayoutControl to synchronously match products to the new size
+ * before regeneration, avoiding the race condition where the store still holds
+ * products from the previous (stale) fetch.
+ *
+ * - More products than target → truncate
+ * - Fewer products than target → pad with dummy products
+ * - Exact match → return as-is
+ */
+export declare function adjustProductsToSize(products: RecommendationProduct[], targetSize: number): RecommendationProduct[];
 type PriceKey = 'price' | 'original_price' | 'discount';
 /**
  * Formats a product price using current currency settings
@@ -149,16 +164,11 @@ export interface UpdateProductContentInPlaceOptions {
  * Updates product content in-place without regenerating HTML structure.
  * Preserves all user-applied styles by only touching dynamic content.
  *
- * This is the preferred method when:
- * - Product data changed but count remains the same
- * - Currency/locale changed (prices need reformatting)
+ * Scopes element queries to the desktop container to avoid double-counting
+ * mobile container elements (both containers share identical block IDs).
+ * After updating desktop, also updates mobile container to keep them in sync.
  *
- * Uses setText() on text nodes instead of setInnerHtml() to preserve
- * Stripo's internal node references and avoid cursor/selection tracking issues.
- *
- * Falls back to false when:
- * - Product count changed (need to add/remove elements)
- * - Cannot find required elements
+ * Falls back to false when product count changed (need to add/remove elements).
  * @param options - Configuration options
  * @returns true if in-place update was successful, false to fall back to full regeneration
  */
@@ -171,13 +181,13 @@ export interface UpdatePricesInPlaceOptions {
  * Updates only price displays in-place (for currency changes).
  * This is a lightweight update when only formatting changes, not product data.
  *
+ * Scopes element queries to the desktop container to avoid double-counting
+ * mobile container elements. After updating desktop, also updates mobile.
+ *
  * Perfect for:
  * - Currency symbol change
  * - Currency alignment change
  * - Decimal/thousand separator changes
- *
- * Uses setText() on text nodes instead of setInnerHtml() to preserve
- * Stripo's internal node references and avoid cursor/selection tracking issues.
  * @param options - Configuration options
  * @returns true if update was successful, false otherwise
  */

package/dist/src/extensions/Blocks/Recommendation/controls/spacing/index.d.ts

@@ -5,16 +5,20 @@
  * - Column spacing: horizontal gap between cards in the same row
  * - Row spacing: vertical gap between different rows
  *
+ * Desktop and mobile have independent spacing controls that toggle
+ * visibility based on Stripo's editor preview mode (desktop/mobile).
+ *
  * Configuration is stored via node config (persists with template).
  * Actual spacing is applied to DOM elements via inline styles.
  */
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { type ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { CommonControl } from '../../../common-control';
 export declare const SPACING_CONTROL_ID = "recommendation-spacing-control";
 /**
  * Control for managing spacing between product cards
  * - Column spacing: horizontal gap between cards in the same row
  * - Row spacing: vertical gap between different rows
+ * - Separate controls for desktop and mobile with device-mode toggling
  */
 export declare class SpacingControl extends CommonControl {
     private store;
@@ -25,17 +29,27 @@ export declare class SpacingControl extends CommonControl {
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
     onDestroy(): void;
     /**
-     * Updates column spacing visibility based on layout orientation
-     * Column spacing is hidden for list layout (products are stacked vertically)
-     * Reads from node config first, falls back to store then DOM
+     * Checks if the editor is currently in mobile preview mode
+     * using Stripo's EditorStatePropertyType API.
+     */
+    _isMobileMode(): boolean;
+    /**
+     * Updates spacing control visibility based on layout orientation, editor mode,
+     * and products-per-row count.
+     * - List layout: hide column spacing (products are full-width)
+     * - Desktop mode: show desktop spacing, hide mobile spacing
+     * - Mobile mode: show mobile spacing, hide desktop spacing
+     * - 1 product per row: hide column spacing (no gap between single column)
      */
-    _updateColumnSpacingVisibility(): void;
+    _updateSpacingVisibility(): void;
     /**
-     * Reads spacing values from node config first, falls back to DOM styles
+     * Reads spacing values from node config first, falls back to DOM styles.
+     * DOM fallback is only used for legacy templates that lack node config.
      */
     _setFormValues(): void;
     /**
      * Gets stored column spacing from the first attribute row cell's padding.
+     * Scoped to the desktop container for accurate readings.
      * For grid layout: cells inside .recommendation-attribute-row have padding applied.
      * For list layout: the parent of .product-card-wrapper has the padding.
      * The padding is applied as "0 {halfSpacing}px", so we extract and multiply by 2.
@@ -43,27 +57,33 @@ export declare class SpacingControl extends CommonControl {
     _getStoredColumnSpacing(): number;
     /**
      * Gets stored row spacing from the first spacer element's height style
+     * Scoped to the desktop container for accurate readings.
      */
     _getStoredRowSpacing(): number;
     /**
-     * Handles column spacing changes.
-     * For grid layout: applies horizontal padding to all cells inside attribute rows.
-     * For list layout: applies padding to parent of product card wrappers.
+     * Handles column spacing changes for desktop.
+     * Applies horizontal padding only to the desktop container elements.
      */
     _onColumnSpacingChange(spacing: number): void;
     /**
-     * Handles row spacing changes
-     * Applies height to all spacer elements between product rows
+     * Handles row spacing changes for desktop.
+     * Applies height only to spacer elements in the desktop container.
      */
     _onRowSpacingChange(spacing: number): void;
     /**
-     * Stores column spacing value in block data attribute
+     * Handles column spacing changes for mobile.
+     * Applies horizontal padding only to the mobile container elements.
      */
-    _storeColumnSpacing(spacing: number): void;
+    _onMobileColumnSpacingChange(spacing: number): void;
     /**
-     * Stores row spacing value in block data attribute
+     * Handles row spacing changes for mobile.
+     * Applies height only to spacer elements in the mobile container.
      */
-    _storeRowSpacing(spacing: number): void;
+    _onMobileRowSpacingChange(spacing: number): void;
+    /**
+     * Stores a spacing value as a data attribute on the block root element
+     */
+    _storeDataAttribute(attr: string, spacing: number): void;
     _listenToFormUpdates(): void;
     /**
      * Debounced version of _onColumnSpacingChange
@@ -72,12 +92,24 @@ export declare class SpacingControl extends CommonControl {
     _debouncedOnColumnSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
     /**
      * Debounced version of _onRowSpacingChange
-     * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
     _debouncedOnRowSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
+    /**
+     * Debounced version of _onMobileColumnSpacingChange
+     */
+    _debouncedOnMobileColumnSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
+    /**
+     * Debounced version of _onMobileRowSpacingChange
+     */
+    _debouncedOnMobileRowSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
     /**
      * Subscribe to store orientation changes
-     * Updates column spacing visibility when layout changes via the layout control
+     * Updates spacing visibility when layout changes via the layout control
      */
     _subscribeToOrientationChanges(): void;
+    /**
+     * Subscribes to editor preview mode changes via Stripo API.
+     * Toggles which spacing controls (desktop/mobile) are visible.
+     */
+    _subscribeToEditorModeChanges(): void;
 }

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -221,5 +221,6 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
     addFilter(filter: Filter): void;
     generateFilterQuery(): string;
     fetchRecommendationProducts(): Promise<void>;
+    _doFetchProducts(): Promise<void>;
 }>;
 export {};

package/dist/src/extensions/Blocks/Recommendation/types/nodeConfig.d.ts

@@ -106,6 +106,14 @@ export interface RecommendationNodeConfig {
      * Vertical spacing between product rows in pixels
      */
     rowSpacing: number;
+    /**
+     * Horizontal spacing between product cards on mobile in pixels (grid layout only)
+     */
+    mobileColumnSpacing: number;
+    /**
+     * Vertical spacing between product rows on mobile in pixels
+     */
+    mobileRowSpacing: number;
     /**
      * Order of card elements from top to bottom
      * Array of ATTR_PRODUCT_* constants

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.1.0-beta.e2153c2",
+  "version": "2.1.0-beta.e4c3fa1",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",