@useinsider/guido 2.2.0-beta.fa4cec8 → 3.0.0-beta.2235a35

package/dist/services/stripoApi.js

@@ -1,47 +1,83 @@
-import { useHttp as l } from "../composables/useHttp.js";
-import { useToaster as u } from "../composables/useToaster.js";
-import { MAX_DEFAULT_TEMPLATE_ID as d } from "../enums/defaults.js";
-import f from "../static/templates/empty/index.html.js";
-import g from "../static/templates/empty/style.css.js";
-const D = () => {
-  const { get: o } = l(), { handleError: a } = u();
+import { useHttp as d } from "../composables/useHttp.js";
+import { useToaster as m } from "../composables/useToaster.js";
+import { MAX_DEFAULT_TEMPLATE_ID as y } from "../enums/defaults.js";
+import g from "../static/templates/empty/index.html.js";
+import f from "../static/templates/empty/style.css.js";
+const E = () => {
+  const { get: s, post: c } = d(), { handleError: r } = m();
   return {
     getToken: async () => {
       try {
-        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await o(`/stripo/get-user-token?test=${t}`);
+        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await s(`/stripo/get-user-token?test=${t}`);
         return e.body.token;
       } catch (t) {
-        return a(t, "Failed to fetch token"), "";
+        return r(t, "Failed to fetch token"), "";
       }
     },
     getCustomFonts: async () => {
       try {
-        const { data: t = [] } = await o("/stripo/get-partner-custom-fonts");
+        const { data: t = [] } = await s("/stripo/get-partner-custom-fonts");
         return t.map((e) => ({
           ...e,
           active: !0
         }));
       } catch (t) {
-        return a(t, "Failed to fetch custom fonts"), [];
+        return r(t, "Failed to fetch custom fonts"), [];
       }
     },
     getDefaultTemplate: async () => {
       const t = {
-        html: f,
-        css: g
+        html: g,
+        css: f
       };
       try {
-        const e = new URLSearchParams(window.location.search), c = e.get("default-template"), p = e.get("master"), s = c ? parseInt(c) : 0, m = s >= 1 && s <= d ? s : 0;
-        if (!m && !p)
+        const e = new URLSearchParams(window.location.search), u = e.get("default-template"), l = e.get("master"), a = u ? parseInt(u) : 0, i = a >= 1 && a <= y ? a : 0;
+        if (!i && !l)
           return t;
-        const i = `/stripo/default-template/${m}`, { data: n } = await o(i), r = typeof n == "string" ? JSON.parse(n) : n;
-        return !r || typeof r != "object" || !("html" in r) || !("css" in r) ? t : r;
+        const p = `/stripo/default-template/${i}`, { data: n } = await s(p), o = typeof n == "string" ? JSON.parse(n) : n;
+        return !o || typeof o != "object" || !("html" in o) || !("css" in o) ? t : o;
       } catch (e) {
-        return a(e, "Failed to fetch default template"), t;
+        return r(e, "Failed to fetch default template"), t;
+      }
+    },
+    getSyncModulesStatus: async () => {
+      try {
+        const { data: t } = await s("/newsletter/settings/synchronisation-in-modules-status");
+        return t.status;
+      } catch (t) {
+        return r(t, "Failed to fetch sync modules status"), !1;
+      }
+    },
+    updateSyncModule: async (t) => {
+      try {
+        return await c(`/stripo/stripo-modules/${t.moduleId}/update`), !0;
+      } catch (e) {
+        return r(e, "Failed to update sync module"), !1;
+      }
+    },
+    getSyncModule: async (t) => {
+      try {
+        const { data: e } = await s(`/stripo/stripo-modules/${t}/get`);
+        return e;
+      } catch (e) {
+        return r(e, "Failed to get sync module"), {
+          id: 0,
+          stripoId: 0,
+          unsubscriptionPreferencePages: []
+        };
+      }
+    },
+    setSyncModuleUnsubscriptionPages: async (t) => {
+      if (t.length === 0)
+        return !0;
+      try {
+        return await c("/stripo/stripo-modules/set-unsubscription-preference-pages", t), !0;
+      } catch (e) {
+        return r(e, "Failed to set unsubscription preference pages"), !1;
       }
     }
   };
 };
 export {
-  D as useStripoApi
+  E as useStripoApi
 };

package/dist/src/@types/config/schemas.d.ts

@@ -12,7 +12,7 @@ import * as v from 'valibot';
  * @param data - The template details to validate
  * @returns Promise<boolean> - true if valid, false to cancel save
  */
-export type ExternalValidationHandler = (data: SavedTemplateDetails) => Promise<boolean>;
+export type ExternalValidationHandler = (data: Omit<SavedTemplateDetails, 'metadata'>) => Promise<boolean>;
 /**
  * Message type constants for email templates
  */

package/dist/src/@types/events.d.ts

@@ -1,6 +1,42 @@
-export type StripoEventType = 'save' | 'export' | 'close' | 'autosave' | 'publish' | 'export:requested' | 'export:ready';
+export type StripoEventType = 'save' | 'export' | 'close' | 'autosave' | 'publish' | 'export:requested' | 'export:ready' | 'module_updated' | 'module_dropped';
+export interface ModuleUpdatedParams {
+    target: string;
+    blockType: string;
+    moduleId: number;
+    moduleCategory: string | null;
+    syncModule: boolean;
+}
+export interface ModuleDroppedParams {
+    target: string;
+    blockType: string;
+    moduleId: number;
+    syncModule: boolean;
+}
+export interface SyncModuleUnsubscribePayload {
+    stripoModuleId: string;
+    unsubscriptionPreferencePages: number[];
+    type: string;
+}
+export interface SyncModuleExtractResult {
+    unsubscribePayload: SyncModuleUnsubscribePayload[];
+    stripoModules: number[];
+}
+export interface SyncModuleResponse {
+    id: number;
+    stripoId: number;
+    unsubscriptionPreferencePages: UnsubscriptionPreferencePage[];
+}
+export interface UnsubscriptionPreferencePage {
+    id: number;
+    name: string;
+    type: number;
+    status: number;
+    isVisible: number;
+    thumbnail: string;
+    createdAt: string;
+}
 export interface EventHandler {
-    (params: Record<string, string>): void | Promise<void>;
+    (params: Record<string, unknown>): void | Promise<void>;
 }
 export interface EventHandlers {
     [eventType: string]: EventHandler;

package/dist/src/App.vue.d.ts

@@ -1,3 +1,2 @@
-import '../node_modules/@useinsider/design-system-vue/dist/design-system-vue.css';
 declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/components/Guido.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
         close: () => void;
     };
     hasChanges: import("vue").ComputedRef<boolean>;
-    saveSilent: () => Promise<SavedTemplateDetails | undefined> | undefined;
+    saveSilent: () => Promise<Omit<SavedTemplateDetails, "metadata"> | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
     "dynamic-content:open": (detail: {
         text: string;
@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
     } | null, position?: PositionData | undefined) => void;
     back: () => void;
     "save:start": () => void;
-    "save:complete": (data: Omit<SavedTemplateDetails, "forceRecreate">) => void;
+    "save:complete": (data: SavedTemplateDetails) => void;
     "on-change": (hasChanges: boolean) => void;
     ready: () => void;
     "onboarding:finished": () => void;

package/dist/src/components/organisms/extensions/recommendation/FilterItem.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     filter: Filter;
     index: number;
     hasLogicAdapter?: boolean;
+    submitted: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
     "delete-filter": (filter: Filter) => void;

package/dist/src/components/organisms/extensions/recommendation/Filters.vue.d.ts

@@ -1,2 +1,18 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+type __VLS_Props = {
+    submitted: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
+    switchToGroup: (groupId: number) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    "reset-validation": () => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/src/components/organisms/header/EditorActions.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    handleSave: (isSilent: boolean) => Promise<import("../../../@types/stripo").SavedTemplateDetails | undefined>;
+    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo").SavedTemplateDetails, "metadata"> | undefined>;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/components/organisms/header/HeaderWrapper.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    handleSave: (isSilent: boolean) => Promise<import("../../../@types/stripo.js").SavedTemplateDetails | undefined> | undefined;
+    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata"> | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/components/organisms/header/RightSlot.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    handleSave: (isSilent: boolean) => Promise<import("../../../@types/stripo.js").SavedTemplateDetails | undefined> | undefined;
+    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata"> | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/composables/useGuidoActions.d.ts

@@ -2,7 +2,7 @@ import type { SavedTemplateDetails } from '@@/Types/stripo';
 import type { InjectionKey } from 'vue';
 export type BackHandler = () => void;
 export type SaveStartHandler = () => void;
-export type SaveCompleteHandler = (template: Omit<SavedTemplateDetails, 'forceRecreate'>) => void;
+export type SaveCompleteHandler = (template: Omit<SavedTemplateDetails, 'metadata'>) => void;
 export type TestEmailClickHandler = () => void;
 export declare const BACK_KEY: InjectionKey<BackHandler>;
 export declare const SAVE_START_KEY: InjectionKey<SaveStartHandler>;

package/dist/src/composables/useSave.d.ts

@@ -1,4 +1,4 @@
-import { SavedTemplateDetails } from '@@/Types/stripo';
+import type { SavedTemplateDetails } from '@@/Types/stripo';
 export declare const useSave: () => {
-    save: (isSilent?: boolean) => Promise<SavedTemplateDetails | undefined>;
+    save: (isSilent?: boolean) => Promise<Omit<SavedTemplateDetails, "metadata"> | undefined>;
 };

package/dist/src/composables/useStripo.d.ts

@@ -1,4 +1,4 @@
-import type { Metadata, Template } from '@@/Types/stripo';
-export declare const useStripo: (metadata: Metadata) => {
+import type { Metadata, Options, Template } from '@@/Types/stripo';
+export declare const useStripo: (metadata: Metadata, options: Options) => {
     initPlugin: (template: Template) => Promise<void>;
 };

package/dist/src/composables/useSyncModuleExtractor.d.ts

@@ -0,0 +1,4 @@
+import type { SyncModuleExtractResult } from '@@/Types/events';
+export declare const useSyncModuleExtractor: () => {
+    extractSyncModuleData: (html: string) => SyncModuleExtractResult;
+};

package/dist/src/enums/unsubscribe.d.ts

@@ -25,6 +25,9 @@ export declare const PAGE_TYPES: {
     SUBSCRIPTION_PREFERENCE_CONFIRMATION: number;
     RESUBSCRIBE: number;
 };
+export declare const UNSUBSCRIBE_SYNC_MODULE_TYPES: {
+    [x: number]: string;
+};
 export declare const TYPE_COLLECTIONS: {
     [x: number]: number[];
 };

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, MOBILE_ROW_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,15 +1,22 @@
 /**
  * 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 = ".recommendation-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 */
 export declare const DESKTOP_CONTAINER_SELECTOR = ".ins-recommendation-desktop-container";
 /** Mobile product container selector */
 export declare const MOBILE_CONTAINER_SELECTOR = ".ins-recommendation-mobile-container";
+/** Mobile row wrapper — the <tr> that wraps the mobile container <td>/<table> */
+export declare const MOBILE_ROW_SELECTOR = ".ins-recommendation-mobile-row";
 /**
  * Currency HTML attributes set on the block element
  * These are read by the HTML compiler at runtime to format prices

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,17 @@ 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.
+     */
+    private _listenStateUpdates;
+    /**
+     * Persists the current filter state from Pinia store to the Stripo node config.
+     * This ensures filters survive template save/reload cycles.
      */
-    _listenStateUpdates(): void;
+    private _persistFiltersToNodeConfig;
 }

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

@@ -61,6 +61,9 @@ export interface RegenerateProductRowsOptions {
  * Regenerates only the mobile product container rows.
  * Used when mobile-specific settings change (mobileCardsInRow)
  * or when the desktop container is regenerated (to keep both in sync).
+ *
+ * For list layout: hides the mobile row entirely (list is inherently responsive).
+ * For grid layout: shows the mobile row and populates it.
  */
 export declare function regenerateMobileProductRows(options: Omit<RegenerateProductRowsOptions, 'afterRegenerate'>): void;
 /**
@@ -75,8 +78,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 +119,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 +167,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)
- *
- * Uses setText() on text nodes instead of setInnerHtml() to preserve
- * Stripo's internal node references and avoid cursor/selection tracking issues.
+ * 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.
  *
- * 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 +184,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,28 @@ 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), hide ALL mobile
+     *   spacing controls (list is responsive — single row spacing applies to both views)
+     * - 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 +58,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 +93,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;
 }