@useinsider/guido 2.1.0-beta.f869a80 → 2.1.0-beta.f9ab899

package/dist/extensions/Blocks/Unsubscribe/styles.css.js

@@ -29,12 +29,42 @@ const n = `/* Unsubscribe Extension Styles */
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 }
 
-.unsubscribe-preview-image {
+.unsubscribe-preview-image-container .unsubscribe-preview-image {
     object-fit: cover;
     width: 100%;
     height: auto;
+    display: none;
+}
+
+.unsubscribe-preview-image-container.is-loaded .unsubscribe-preview-image {
+    display: block;
+}
+
+.unsubscribe-preview-image-container.is-loaded .unsubscribe-preview-loader {
+    display: none;
+}
+
+/* Loading shimmer */
+.unsubscribe-preview-loader {
+    width: 100%;
+    height: 200px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: unsubscribe-shimmer 1.5s infinite;
+}
+
+@keyframes unsubscribe-shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+
+    100% {
+        background-position: -200% 0;
+    }
 }
 `;
 export {

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{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-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{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/components/organisms/extensions/recommendation/FilterItem.vue.d.ts

@@ -3,7 +3,6 @@ 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,18 +1,2 @@
-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>>>, {}>;
+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;
-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/config/i18n/en/index.d.ts

@@ -0,0 +1 @@
+export declare const en: Record<string, string>;

package/dist/src/config/i18n/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Stripo Editor Translation Overrides
+ *
+ * Custom translations for Stripo editor UI elements.
+ * Each language has its own folder with categorized JSON files.
+ *
+ * Reference: https://email-static.useinsider.com/guido/{version}/assets/i18n/en.json
+ * @module config/i18n
+ */
+/**
+ * Combined locale patch for Stripo editor initialization.
+ * Maps language codes to their translation overrides.
+ */
+export declare const localePatch: {
+    en: Record<string, string>;
+};

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

@@ -31,8 +31,6 @@ 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>;
@@ -127,9 +125,7 @@ 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[];
@@ -207,35 +203,24 @@ 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.
-     * Saves a snapshot of current filters for cancel/revert.
-     * If no filters exist, initializes with a default filter
+     * If no filters exist, initializes with a default empty filter
      * so the user has a starting point for input.
      */
     openFilterDrawer(): void;
     /**
-     * Closes the filter selection drawer for the current block.
-     * Called after successful apply — discards the snapshot.
+     * Closes the filter selection drawer for the current block
      */
     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/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/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/static/styles/components/notification.css.js

@@ -17,6 +17,24 @@ ue-notifications-container .alert-message-wrapper {
     padding: 16px 24px;
 }
 
+ue-notifications-container .alert-message-wrapper.info,
+ue-notifications-container .alert-message-wrapper.loader {
+    background-color: var(--guido-color-background-toaster-info) !important;
+    color: inherit;
+}
+
+.alert-message-wrapper .alert-message-main {
+    align-items: center;
+}
+
+ue-notifications-container ue-caption .caption {
+    color: var(--guido-color-white) !important;
+}
+
+ue-block-thumb-hint {
+    text-align: left;
+}
+
 ue-notifications-container .alert-message-wrapper .alert-message-main .alert-message-content {
     width: calc(100% - 64px);
 }

package/dist/static/styles/components/tools.css.js

@@ -1,4 +1,4 @@
-const o = `ue-emoji .emoji-tabs .active-smile-tab {
+const e = `ue-emoji .emoji-tabs .active-smile-tab {
     border-color: var(--guido-color-primary-500);
 }
 
@@ -17,7 +17,11 @@ ue-insert-table .template-cell {
     border: 1px solid var(--guido-color-gray-300);
     box-shadow: var(--guido-box-shadow);
 }
+
+.ue-popover.dark-tiny {
+    text-align: left !important;
+}
 `;
 export {
-  o as default
+  e as default
 };

package/dist/static/styles/variables.css.js

@@ -10,6 +10,7 @@ const o = `:host {
     --guido-color-gray-1: #F0F0F0;
     --guido-color-gray-0: #F9F9F9;
     --guido-color-neutral-800: #222938;
+    --guido-color-neutral-700: #2C3546;
     --guido-color-neutral-200: #DCDFE6;
     --guido-color-neutral-100: #EFF2F4;
     --guido-color-danger-300: #e84342;
@@ -25,6 +26,7 @@ const o = `:host {
     --guido-color-border-onpage-message-error: var(--guido-color-danger-500);
     --guido-color-background-toaster-success: #128745;
     --guido-color-background-toaster-error: var(--guido-color-danger-500);
+    --guido-color-background-toaster-info: var(--guido-color-neutral-700);
     --guido-color-background-toaster-warn: #D37400;
 }
 `;