@useinsider/guido 2.2.0-beta.eeefcc3 → 3.0.0-beta.5b2298c

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/Items/block.d.ts

@@ -1,5 +1,6 @@
+import type { BlockId } from '@@/Types/extensions/block';
 import { Block, BlockCompositionType, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-export declare const BLOCK_ID = "items-block";
+export declare const BLOCK_ID: BlockId;
 /**
  * Items Block extension for Stripo email editor.
  *
@@ -20,6 +21,7 @@ export declare class ItemsBlock extends Block {
     getBlockCompositionType(): BlockCompositionType;
     getName(): string;
     getDescription(): string;
+    getSettingsPanelTitleHtml(): string;
     getTemplate(): string;
     allowInnerBlocksDND(): boolean;
     onCreated(node: ImmutableHtmlNode): void;

package/dist/src/extensions/Blocks/Recommendation/block.d.ts

@@ -5,9 +5,10 @@
  * Handles block lifecycle including configuration initialization and migration.
  * Supports multiple block instances with unique recommendation-id attributes.
  */
+import type { BlockId } from '@@/Types/extensions/block';
 import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
-export declare const BLOCK_ID = "recommendation-block";
+export declare const BLOCK_ID: BlockId;
 export declare class RecommendationBlock extends Block {
     /**
      * Stores the ID generated in getTemplate() so onCreated() can reuse it.
@@ -20,6 +21,7 @@ export declare class RecommendationBlock extends Block {
     getBlockCompositionType(): BlockCompositionType;
     getName(): string;
     getDescription(): string;
+    getSettingsPanelTitleHtml(): string;
     /**
      * Returns the template HTML for a new recommendation block.
      * Generates a unique recommendation ID and embeds the instance class

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

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

@@ -31,6 +31,8 @@ interface PerBlockState {
     filterGroup: number;
     /** Whether initial API data (filters, algorithms, products) has been fetched for this block */
     isInitialized: boolean;
+    /** Snapshot of filters taken when the drawer opens, used to revert on cancel */
+    filterSnapshot: Filter[] | null;
 }
 interface StoreState {
     recommendationCampaignUrls: Record<string, string>;
@@ -125,7 +127,9 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
         configVersion: number;
     } & import("pinia").PiniaCustomStateProperties<StoreState>): number;
     hasFilters(): boolean;
+    hasValidFilters(): boolean;
     getFilterGroupCount(): number;
+    getUniqueFilterGroups(): number[];
     getActivePredictiveAlgorithms: (state: {
         recommendationCampaignUrls: Record<string, string>;
         activePredictiveAlgorithms: number[];
@@ -203,23 +207,36 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
     patchCurrentBlockConfig(updates: Partial<PerBlockConfigs>, options?: {
         triggerRefetch?: boolean;
     }): void;
+    /**
+     * Creates a filter with the first available attribute and operator pre-selected.
+     */
+    createDefaultFilter(filterGroup: number, filterNumber: number): Filter;
     /**
      * Opens the filter selection drawer for the current block.
-     * If no filters exist, initializes with a default empty filter
+     * Saves a snapshot of current filters for cancel/revert.
+     * If no filters exist, initializes with a default filter
      * so the user has a starting point for input.
      */
     openFilterDrawer(): void;
     /**
-     * Closes the filter selection drawer for the current block
+     * Closes the filter selection drawer for the current block.
+     * Called after successful apply — discards the snapshot.
      */
     closeFilterDrawer(): void;
+    /**
+     * Cancels the filter selection drawer and reverts filters
+     * to the snapshot taken when the drawer was opened.
+     */
+    cancelFilterDrawer(): void;
     fetchRecommendationCreateData(): Promise<void>;
     fetchRecommendationFilters(): Promise<void>;
     addFilterGroup(filterGroup: number): void;
+    deleteFilterGroup(groupId: number): void;
     updateFilter(updatedFilter: Filter): void;
     deleteFilter(filter: Filter): void;
     addFilter(filter: Filter): void;
     generateFilterQuery(): string;
     fetchRecommendationProducts(): Promise<void>;
+    _doFetchProducts(): Promise<void>;
 }>;
 export {};

package/dist/src/extensions/Blocks/Recommendation/templates/grid/migration.d.ts

@@ -1,6 +1,6 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
 import { DEFAULTS, getDefaultProducts, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY } from '../utils';
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"recommendation-block\"\n        esd-handler-name=\"esd-extension-RecommendationBlock\"\n        class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20\"\n    >\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <tr>\n                                                {-{-TITLE-}-}\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            <tr>\n                                <td class=\"spacer\" style=\"height: 20px;\"></td>\n                            </tr>\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"recommendation-block\"\n        esd-handler-name=\"esd-extension-RecommendationBlock\"\n        class=\"recommendation-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20\"\n    >\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <tr>\n                                                {-{-TITLE-}-}\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            <tr>\n                                <td class=\"spacer\" style=\"height: 20px;\"></td>\n                            </tr>\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
 /**
  * Prepares migration product rows with attribute-aligned structure.
  * @param products - Array of products to display

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

@@ -24,14 +24,16 @@ export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefault
 export declare function prepareProductRows(products: RecommendationProduct[], layout: Orientation, options?: PrepareProductRowsOptions): string;
 /**
  * Generates the default template for a given layout.
- * Includes both desktop and mobile product containers for grid layouts.
+ * Grid layout includes both desktop and mobile product containers.
+ * List layout only populates the desktop container (list rows are responsive).
  * @param layout - The layout orientation ('list' or 'grid')
  * @returns Complete HTML template with default products
  */
 export declare function getDefaultTemplate(layout?: Orientation): string;
 /**
  * Generates a complete block template with custom products.
- * Includes both desktop and mobile product containers for grid layouts.
+ * Grid layout includes both desktop and mobile product containers.
+ * List layout only populates the desktop container (list rows are responsive).
  * @param products - Array of products to display
  * @param layout - The layout orientation ('list' or 'grid')
  * @param title - Title for the block

package/dist/src/extensions/Blocks/Recommendation/templates/list/migration.d.ts

@@ -4,7 +4,7 @@ import { DEFAULTS, getDefaultProducts } from '../utils';
  * Migration template for list layout
  * Used when migrating old recommendation blocks to list format
  */
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"recommendation-block\"\n        esd-handler-name=\"esd-extension-RecommendationBlock\"\n        class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20\"\n        data-layout=\"list\"\n    >\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <tr>\n                                                {-{-TITLE-}-}\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            <tr>\n                                <td class=\"spacer\" style=\"height: 20px;\"></td>\n                            </tr>\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"recommendation-block\"\n        esd-handler-name=\"esd-extension-RecommendationBlock\"\n        class=\"recommendation-block-v2 esd-block-recommendation-v3-block\n            esd-extension-block es-p20 es-m-p0 ins-recommendation-list-layout\"\n        data-layout=\"list\"\n    >\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <tr>\n                                                {-{-TITLE-}-}\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            <tr>\n                                <td class=\"spacer\" style=\"height: 20px;\"></td>\n                            </tr>\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
 export declare function getMigrationTemplate(): string;
 /**
  * Generates a custom list migration template with specified products

package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts

@@ -61,6 +61,6 @@ export declare function getDefaultProducts(count?: number): RecommendationProduc
  * @param instanceClass - Optional instance-specific class (e.g., 'ins-recommendation-v3-block-1')
  *   for CSS scoping per block instance. Must be included in the initial template HTML because
  *   Stripo's Angular rendering manages the class attribute and overwrites dynamic setAttribute changes.
- * @returns HTML template string with {-{-TITLE-}-}, {-{-PRODUCT_ROWS-}-}, and {-{-MOBILE_PRODUCT_ROWS-}-} placeholders
+ * @returns HTML template string with {-{-TITLE-}-}, {-{-PRODUCT_ROWS-}-}, and {-{-MOBILE_PRODUCT_ROWS-}-} (grid only) placeholders
  */
 export declare function createBlockTemplate(layout?: Orientation, instanceClass?: string): string;

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/dist/src/extensions/Blocks/Recommendation/validation/filterSchema.d.ts

@@ -0,0 +1,15 @@
+import type { Filter } from '@@/Types/recommendation';
+import * as v from 'valibot';
+export declare const FilterSchema: v.ObjectSchema<{
+    readonly type: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly attribute: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly operator: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly innerGroupOperator: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly outerGroupOperator: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly value: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, undefined>]>;
+    readonly filterGroup: v.NumberSchema<undefined>;
+    readonly filterNumber: v.NumberSchema<undefined>;
+    readonly isValid: v.BooleanSchema<undefined>;
+}, undefined>;
+export declare function isFilterValid(filter: Filter): boolean;
+export declare function getInvalidFilterFields(filter: Filter): Set<string>;

package/dist/src/extensions/Blocks/Unsubscribe/control.d.ts

@@ -17,6 +17,7 @@ export declare class UnsubscribeControl extends Control {
     private _onButtonClick;
     private _onPrevClick;
     private _onNextClick;
+    private _loadAndUpdatePreview;
     private _updatePreview;
     private _updateCounter;
     private _getPreview;

package/dist/src/extensions/Blocks/common-control.d.ts

@@ -11,6 +11,10 @@ interface LabelProps {
     name?: string;
     position?: 'top' | 'left';
 }
+interface IconProps {
+    src: string;
+    className?: string;
+}
 interface IconButtonProps {
     name: string;
     icon: string;
@@ -89,6 +93,7 @@ export declare abstract class CommonControl extends Control {
     }): string;
     _GuRadioButton({ name, buttons, id }: RadioButtonProps): string;
     _GuButton({ name, label, id }: ButtonProps): string;
+    _GuIcon({ src, className }: IconProps): string;
     /**
      *
      * @param param0

package/dist/src/mock/api/settings.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("msw").HttpHandler[];
+export default _default;

package/dist/src/services/stripoApi.d.ts

@@ -1,3 +1,4 @@
+import type { ModuleUpdatedParams, SyncModuleResponse, SyncModuleUnsubscribePayload } from '@@/Types/events';
 import type { CustomFont, Template } from '@@/Types/stripo';
 export declare const useStripoApi: () => {
     getToken: () => Promise<string>;
@@ -5,4 +6,8 @@ export declare const useStripoApi: () => {
         active: boolean;
     })[]>;
     getDefaultTemplate: () => Promise<Template>;
+    getSyncModulesStatus: () => Promise<boolean>;
+    updateSyncModule: (params: ModuleUpdatedParams) => Promise<boolean>;
+    getSyncModule: (moduleId: number) => Promise<SyncModuleResponse>;
+    setSyncModuleUnsubscriptionPages: (payload: SyncModuleUnsubscribePayload[]) => Promise<boolean>;
 };