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

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

@@ -1 +1,3 @@
-export {};
+import '@useinsider/design-system-vue/style';
+import '@useinsider/design-system-vue/fonts.css';
+import '@useinsider/design-system-vue/utilities.css';

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

package/dist/src/stores/editor.d.ts

@@ -8,6 +8,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
     hasChanges: boolean;
     isStripoInitialized: boolean;
     templateId: string;
+    syncModulesEnabled: boolean;
 }, {
     isEditorToolbarVisible: (state: {
         loadingStatus: boolean;
@@ -19,6 +20,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -29,6 +31,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isUndoButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -40,6 +43,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -50,6 +54,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isRedoButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -61,6 +66,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -71,6 +77,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isCodeEditorButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -82,6 +89,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -92,6 +100,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isPreviewButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -103,6 +112,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -113,6 +123,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isViewOptionsDisabled: (state: {
         loadingStatus: boolean;
@@ -124,6 +135,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -134,6 +146,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isVersionHistoryButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -145,6 +158,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -155,6 +169,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isExportButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -166,6 +181,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -176,6 +192,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isSaveAsButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -187,6 +204,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -197,6 +215,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isTestButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -208,6 +227,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -218,6 +238,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
     isSaveButtonDisabled: (state: {
         loadingStatus: boolean;
@@ -229,6 +250,7 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     } & import("pinia").PiniaCustomStateProperties<{
         loadingStatus: boolean;
         isCodeEditorOpen: boolean;
@@ -239,5 +261,6 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         hasChanges: boolean;
         isStripoInitialized: boolean;
         templateId: string;
+        syncModulesEnabled: boolean;
     }>) => boolean;
 }, {}>;

package/dist/src/utils/templatePreparation.d.ts

@@ -1,4 +1,4 @@
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 export declare const useTemplatePreparation: () => {
-    prepareTemplateDetails: () => Promise<SavedTemplateDetails>;
+    prepareTemplateDetails: () => Promise<Omit<SavedTemplateDetails, "metadata">>;
 };

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

@@ -20,30 +20,30 @@ const n = `.esd-x,
 }
 .ins-product-cart ue-node-actions,
 /* Horizontal layout - hide for info, image, and button cells */
-.ins-recommendation-v3-block-v2 .product-info-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-info-cell ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-image-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-image-cell ue-node-panel,
-.ins-recommendation-v3-block-v2 .button-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .button-cell ue-node-panel,
+.recommendation-block-v2 .product-info-cell ue-node-actions,
+.recommendation-block-v2 .product-info-cell ue-node-panel,
+.recommendation-block-v2 .product-image-cell ue-node-actions,
+.recommendation-block-v2 .product-image-cell ue-node-panel,
+.recommendation-block-v2 .button-cell ue-node-actions,
+.recommendation-block-v2 .button-cell ue-node-panel,
 /* Vertical layout - hide for product-card-segment inner cells */
-.ins-recommendation-v3-block-v2 .product-card-segment ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-card-segment ue-node-panel,
+.recommendation-block-v2 .product-card-segment ue-node-actions,
+.recommendation-block-v2 .product-card-segment ue-node-panel,
 /* Hide for specific product attribute cells in both layouts */
-.ins-recommendation-v3-block-v2 .product-image ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-image ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-name ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-name ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-old-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-old-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-panel,
-.ins-recommendation-v3-block-v2 .product-button ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-button ue-node-panel {
+.recommendation-block-v2 .product-image ue-node-actions,
+.recommendation-block-v2 .product-image ue-node-panel,
+.recommendation-block-v2 .product-name ue-node-actions,
+.recommendation-block-v2 .product-name ue-node-panel,
+.recommendation-block-v2 .product-price ue-node-actions,
+.recommendation-block-v2 .product-price ue-node-panel,
+.recommendation-block-v2 .product-old-price ue-node-actions,
+.recommendation-block-v2 .product-old-price ue-node-panel,
+.recommendation-block-v2 .product-omnibus-price ue-node-actions,
+.recommendation-block-v2 .product-omnibus-price ue-node-panel,
+.recommendation-block-v2 .product-omnibus-discount ue-node-actions,
+.recommendation-block-v2 .product-omnibus-discount ue-node-panel,
+.recommendation-block-v2 .product-button ue-node-actions,
+.recommendation-block-v2 .product-button ue-node-panel {
     display: none !important;
 }
 
@@ -52,7 +52,7 @@ const n = `.esd-x,
     display: none;
 }
 
-/* Mobile layout: when Stripo mobile mode is active, swap containers */
+/* Mobile layout: when Stripo mobile mode is active, swap containers (grid layout only) */
 .ue-mobile-mode .ins-recommendation-desktop-container {
     display: none !important;
 }
@@ -60,6 +60,33 @@ const n = `.esd-x,
 .ue-mobile-mode .ins-recommendation-mobile-container {
     display: table !important;
 }
+
+/* List layout: keep desktop container visible in mobile mode (list rows are inherently responsive)
+   Uses class selector instead of [data-layout="list"] for Gmail compatibility */
+.ue-mobile-mode .ins-recommendation-list-layout .ins-recommendation-desktop-container {
+    display: table !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .ins-recommendation-mobile-container {
+    display: none !important;
+}
+
+/* List layout mobile: reduce image and button width for better text readability */
+.ue-mobile-mode .ins-recommendation-list-layout .product-image-cell {
+    width: 80px !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .product-image-cell img {
+    max-width: 80px !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .button-cell {
+    width: 80px !important;
+}
+
+.ue-mobile-mode .ins-recommendation-list-layout .product-info-cell {
+    padding: 5px 8px !important;
+}
 `;
 export {
   n as default

package/dist/stores/editor.js

@@ -9,7 +9,8 @@ const o = e("guidoEditor", {
     editorVisualMode: "desktop",
     hasChanges: !1,
     isStripoInitialized: !1,
-    templateId: ""
+    templateId: "",
+    syncModulesEnabled: !1
   }),
   getters: {
     // Middle Slot

package/dist/utils/templatePreparation.js

@@ -24,7 +24,7 @@ const E = () => {
         css: p,
         ampHtml: r,
         ampErrors: c,
-        modules: u,
+        modules: u.map(Number),
         recommendation: {
           campaignUrls: b.recommendationCampaignUrls,
           configs: {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.2.0-beta.fa4cec8",
+  "version": "3.0.0-beta.2235a35",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -32,7 +32,7 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.5.0",
-    "@useinsider/design-system-vue": "0.14.20",
+    "@useinsider/design-system-vue": "0.14.28",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",