@useinsider/guido 2.0.0-beta.c588e27 → 2.0.0-beta.c9db5fd

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

@@ -0,0 +1,77 @@
+import type { Orientation } from '@@/Types/recommendation';
+import { 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
+ */
+export declare class SpacingControl extends CommonControl {
+    private store;
+    private unsubscribeOrientation;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    /**
+     * Gets the current layout orientation from the block's data attribute
+     */
+    _getCurrentLayout(): Orientation;
+    /**
+     * Updates column spacing visibility based on layout orientation
+     * Column spacing is hidden for horizontal layout (products are stacked vertically)
+     * Reads from store first for reliability, falls back to DOM
+     */
+    _updateColumnSpacingVisibility(): void;
+    /**
+     * Reads spacing values from data attributes or returns defaults
+     */
+    _setFormValues(): void;
+    /**
+     * Gets stored column spacing from the first attribute row cell's padding.
+     * For vertical layout: cells inside .recommendation-attribute-row have padding applied.
+     * For horizontal 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.
+     */
+    _getStoredColumnSpacing(): number;
+    /**
+     * Gets stored row spacing from the first spacer element's height style
+     */
+    _getStoredRowSpacing(): number;
+    /**
+     * Handles column spacing changes.
+     * For vertical layout: applies horizontal padding to all cells inside attribute rows.
+     * For horizontal layout: applies padding to parent of product card wrappers.
+     */
+    _onColumnSpacingChange(spacing: number): void;
+    /**
+     * Handles row spacing changes
+     * Applies height to all spacer elements between product rows
+     */
+    _onRowSpacingChange(spacing: number): void;
+    /**
+     * Stores column spacing value in block data attribute
+     */
+    _storeColumnSpacing(spacing: number): void;
+    /**
+     * Stores row spacing value in block data attribute
+     */
+    _storeRowSpacing(spacing: number): void;
+    _listenToFormUpdates(): void;
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    _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>;
+    /**
+     * Subscribe to store orientation changes
+     * Updates column spacing visibility when layout changes via the layout control
+     */
+    _subscribeToOrientationChanges(): void;
+}

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

@@ -1,2 +1,11 @@
+/**
+ * Recommendation Block Extension
+ *
+ * This extension provides a product recommendation block for email templates.
+ * Controls are organized by element type in the ./controls directory.
+ */
+/**
+ * Build and export the Recommendation extension
+ */
 declare const _default: import("@stripoinc/ui-editor-extensions").Extension;
 export default _default;

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

@@ -0,0 +1,8 @@
+import type { ElementRenderer } from './templateUtils';
+/**
+ * Horizontal element renderer
+ * - Image and Button return `<td>` cells for the 3-column layout
+ * - Name and Prices return `<tr><td>` rows for the info cell table
+ * All elements have esd-block-* classes for Stripo selection
+ */
+export declare const horizontalElementRenderer: ElementRenderer;

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

@@ -0,0 +1,25 @@
+import type { RecommendationProduct } from '@@/Types/recommendation';
+import { DEFAULTS, getDefaultProducts } from './templateUtils';
+/**
+ * Migration template for horizontal layout
+ * Used when migrating old recommendation blocks to horizontal 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=\"horizontal\"\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 horizontal migration template with specified products
+ * @param products - Array of products to display
+ * @param title - Optional title for the block
+ * @param composition - Optional array defining order of card elements
+ * @returns Complete HTML template
+ */
+export declare function generateMigrationTemplate(products: RecommendationProduct[], title?: string, composition?: string[]): string;
+/**
+ * Prepares horizontal product rows for migration
+ * @param products - Array of products to display
+ * @param composition - Optional array defining order of card elements
+ * @returns HTML string for product rows
+ */
+export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[]): string;
+export { DEFAULTS, getDefaultProducts };
+export default migrationTemplate;

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

@@ -0,0 +1,28 @@
+import type { RecommendationProduct } from '@@/Types/recommendation';
+import { DEFAULTS, spacer, getDefaultProducts, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY } from './templateUtils';
+/**
+ * Block template container for horizontal layout
+ * Uses native HTML elements for dynamic DOM update compatibility
+ * Horizontal layout: Each product is full width with 3 columns
+ * Layout: [Image (120px)] [Name + Prices (flexible)] [Button (100px)]
+ */
+declare const blockTemplate = "\n    <td\n        align=\"left\"\n        class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20\"\n        data-layout=\"horizontal\">\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                                                <td\n                                                    class=\"esd-block-text es-p10t es-p10b es-p20l es-p20r\"\n                                                    align=\"center\">\n                                                    <p path=\"1\" style=\"font-size: 28px; color: #333333;\">\n                                                        <strong path=\"1,0\">{-{-TITLE-}-}</strong>\n                                                    </p>\n                                                </td>\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            \n    <tr>\n        <td class=\"spacer\" style=\"height: 10px;\"></td>\n    </tr>\n\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";
+/**
+ * Generates a horizontal product card with 3-column layout
+ * Uses horizontalElementRenderer to render Image, Info content, and Button
+ * Layout: [Image (120px)] [Info table (flexible)] [Button (100px)]
+ * @param product - The product data
+ * @returns HTML string for a single product card row
+ */
+export declare function getHorizontalProductCard(product: RecommendationProduct): string;
+/**
+ * Prepares horizontal product rows
+ * Each product is a full-width row with 3-column layout
+ * @param products - Array of products to display
+ * @returns HTML string for product rows
+ */
+export declare function prepareProductRows(products: RecommendationProduct[]): string;
+export declare function getDefaultTemplate(): string;
+export declare function generateBlockTemplate(products: RecommendationProduct[], title?: string): string;
+export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, spacer, };
+export default blockTemplate;

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

@@ -1,44 +1,82 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
+import { 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 '../constants';
+/**
+ * Element renderer interface for product card elements
+ * Keys are ATTR_PRODUCT_* constants for consistent naming
+ */
 export interface ElementRenderer {
-    productImage: (product: RecommendationProduct) => string;
-    productName: (product: RecommendationProduct) => string;
-    productPrice: (product: RecommendationProduct) => string;
-    productOldPrice: (product: RecommendationProduct) => string;
-    productButton: (product: RecommendationProduct) => string;
-}
-export interface TemplateConfig {
-    spacer: string;
-    blockTemplate: string;
-    productRow: string;
-    productCardWrapper: string;
-    elementRenderer: ElementRenderer;
+    [ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_NAME]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OLD_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct) => string;
 }
+/**
+ * Product card getter function type
+ * Used by prepareProductRows to generate individual product cards
+ */
+export type ProductCardGetter = (product: RecommendationProduct, composition?: string[]) => string;
 export declare const DEFAULTS: {
     TITLE: string;
     DESCRIPTION: string;
 };
-export declare const spacer = "\n    <tr>\n        <td class=\"spacer\" style=\"height: 20px;\"></td>\n    </tr>\n";
-export declare const productRow = "\n    <tr>\n        <td>\n            <table width=\"100%\" height=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n                {-{-PRODUCTS-}-}\n            </table>\n        </td>\n    </tr>\n";
-export declare const productCardWrapper = "\n    <td width=\"{-{-COLUMN_WIDTH-}-}\" style=\"padding: 0 5px;\" valign=\"top\" height=\"100%\">\n        <table\n            width=\"100%\"\n            height=\"100%\"\n            cellpadding=\"0\"\n            cellspacing=\"0\"\n            border=\"0\"\n            class=\"product-card-wrapper\">\n            <tr>\n                <td\n                    class=\"product-attribute-cell\"\n                    valign=\"top\">\n                    <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                        <tbody>\n                            {-{-PRODUCT_CONTENT-}-}\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
 export declare const DEFAULT_CARD_COMPOSITION: string[];
+export declare const DEFAULT_CARD_VISIBILITY: Record<string, boolean>;
+export declare const spacer = "\n    <tr>\n        <td class=\"spacer\" style=\"height: 10px;\"></td>\n    </tr>\n";
+export declare const productRow = "\n    <tr class=\"recommendation-product-row\">\n        <td>\n            <table width=\"100%\" height=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n                {-{-PRODUCTS-}-}\n            </table>\n        </td>\n    </tr>\n";
+export declare const productCardWrapper = "\n    <td width=\"{-{-COLUMN_WIDTH-}-}\" style=\"padding: 0 5px;\" valign=\"top\" height=\"100%\">\n        <table\n            width=\"100%\"\n            height=\"100%\"\n            cellpadding=\"0\"\n            cellspacing=\"0\"\n            border=\"0\"\n            class=\"product-card-wrapper\">\n            <tr>\n                <td\n                    class=\"product-attribute-cell\"\n                    valign=\"top\">\n                    <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                        <tbody>\n                            {-{-PRODUCT_CONTENT-}-}\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
+/**
+ * Vertical product row template - wraps attribute rows for a set of products
+ * Uses a single table with rows for each attribute type, ensuring alignment across products
+ * Note: Product-card-wrapper table has height="100%" to support proper height inheritance
+ * for child product-card-segment elements with background colors
+ */
+export declare const verticalProductRowWrapper = "\n    <tr class=\"recommendation-product-row\">\n        <td>\n            <table width=\"100%\" height=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"product-card-wrapper\">\n                <tbody>\n                    {-{-ATTRIBUTE_ROWS-}-}\n                </tbody>\n            </table>\n        </td>\n    </tr>\n";
+/**
+ * Single attribute row template - contains one attribute type from all products
+ */
+export declare const attributeRowTemplate = "\n    <tr\n        class=\"recommendation-attribute-row\"\n        data-attribute-type=\"{-{-ATTR_TYPE-}-}\"\n        data-visibility=\"{-{-VISIBILITY-}-}\"\n        {-{-DISPLAY_STYLE-}-}>\n        {-{-CELLS-}-}\n    </tr>\n";
 export declare function getDefaultProducts(): RecommendationProduct[];
 /**
- * Core template generation logic that works with any element renderer
+ * Prepares product rows HTML for vertical/grid layout
+ * Groups products into rows with specified products per row
  * @param products - Array of products to display
  * @param productsPerRow - Number of products per row
- * @param elementRenderer - Object with methods to render each product element
+ * @param getProductCard - Function that generates HTML for a single product card
  * @param composition - Optional array defining order of card elements
  * @returns HTML string for product rows
  */
-export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[]): string;
+export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, getProductCard: ProductCardGetter, composition?: string[]): string;
+/**
+ * Generates attribute-aligned product rows for vertical layout.
+ * Creates rows where each row contains one attribute type from all products.
+ * @param products - Array of products in this row group
+ * @param productsPerRow - Number of products per row (for column width calculation)
+ * @param elementRenderer - Object mapping attribute types to render functions
+ * @param composition - Array defining order of card elements
+ * @returns HTML string for attribute-aligned rows
+ */
+export declare function prepareVerticalAttributeRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[]): string;
+/**
+ * Prepares vertical product rows with attribute-aligned structure
+ * Groups products into rows, then generates attribute-aligned HTML for each group
+ * @param products - Array of products to display
+ * @param productsPerRow - Number of products per row
+ * @param elementRenderer - Object mapping attribute types to render functions
+ * @param composition - Array defining order of card elements
+ * @returns HTML string for all product rows
+ */
+export declare function prepareVerticalProductRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[]): string;
 /**
- * Generates complete HTML template with dynamic products and layout
+ * Generates complete HTML template with dynamic products
  * @param blockTemplate - The base block template string
  * @param products - Array of products to display
  * @param productsPerRow - Number of products per row
- * @param elementRenderer - Element renderer for generating product HTML
+ * @param getProductCard - Function that generates HTML for a single product card
  * @param title - Title for the block
  * @param composition - Optional array defining order of card elements
  * @returns Complete HTML template
  */
-export declare function generateTemplate(blockTemplate: string, products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, title?: string, composition?: string[]): string;
+export declare function generateTemplate(blockTemplate: string, products: RecommendationProduct[], productsPerRow: number, getProductCard: ProductCardGetter, title?: string, composition?: string[]): string;

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

@@ -0,0 +1,7 @@
+import type { ElementRenderer } from './templateUtils';
+/**
+ * Class name for outer cells in attribute rows
+ * Used by controls to reliably select direct children for spacing adjustments
+ */
+export declare const ATTRIBUTE_CELL_CLASS = "attribute-cell";
+export declare const verticalElementRenderer: ElementRenderer;

package/dist/src/extensions/Blocks/Recommendation/templates/{migrationTemplate.d.ts → verticalMigrationTemplate.d.ts}

@@ -1,9 +1,17 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
-import { DEFAULTS, getDefaultProducts } from './templateUtils';
+import { DEFAULTS, getDefaultProducts, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY } from './templateUtils';
 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";
+/**
+ * Prepares migration product rows with attribute-aligned structure.
+ * @param products - Array of products to display
+ * @param productsPerRow - Number of products per row
+ * @param composition - Array defining element order
+ * @returns HTML string for product rows
+ */
+export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
 export declare function getMigrationTemplate(): string;
 /**
- * Generates a custom migration template with specified products and layout
+ * Generates a custom migration template with specified products and layout.
  * @param products - Array of products to display
  * @param productsPerRow - Number of products per row
  * @param title - Optional title for the block
@@ -11,6 +19,5 @@ export declare function getMigrationTemplate(): string;
  * @returns Complete HTML template
  */
 export declare function generateMigrationTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[]): string;
-export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
-export { DEFAULTS, getDefaultProducts };
+export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, };
 export default migrationTemplate;

package/dist/src/extensions/Blocks/Recommendation/templates/{blockTemplate.d.ts → verticalTemplate.d.ts}

@@ -1,16 +1,20 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
-import { DEFAULTS, getDefaultProducts, DEFAULT_CARD_COMPOSITION } from './templateUtils';
-declare const blockTemplate = "\n    <td align=\"left\" class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20\">\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                                            <BLOCK_TEXT\n                                                class=\"es-p10t es-p10b es-p20l es-p20r\"\n                                                align=\"center\">\n                                                <p path=\"1\" style=\"font-size: 28px; color: #333333;\">\n                                                    <strong path=\"1,0\">{-{-TITLE-}-}</strong>\n                                                </p>\n                                            </BLOCK_TEXT>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            \n    <tr>\n        <td class=\"spacer\" style=\"height: 20px;\"></td>\n    </tr>\n\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 getDefaultTemplate(): string;
+import { DEFAULTS, spacer, getDefaultProducts, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY } from './templateUtils';
+/**
+ * Block template container for vertical layout
+ * Uses native HTML elements for dynamic DOM update compatibility
+ */
+declare const blockTemplate = "\n    <td align=\"left\" class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20\">\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                                                <td\n                                                    class=\"esd-block-text es-p10t es-p10b es-p20l es-p20r\"\n                                                    align=\"center\">\n                                                    <p path=\"1\" style=\"font-size: 28px; color: #333333;\">\n                                                        <strong path=\"1,0\">{-{-TITLE-}-}</strong>\n                                                    </p>\n                                                </td>\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            \n    <tr>\n        <td class=\"spacer\" style=\"height: 10px;\"></td>\n    </tr>\n\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";
 /**
- * Generates a custom template with specified products and layout
+ * Prepares vertical product rows with attribute-aligned structure.
+ * Uses row-based rendering where each attribute type forms a single row across all products.
  * @param products - Array of products to display
  * @param productsPerRow - Number of products per row
- * @param title - Optional title for the block
- * @param composition - Optional array defining order of card elements
- * @returns Complete HTML template
+ * @param composition - Array defining element order
+ * @returns HTML string for product rows
  */
-export declare function generateBlockTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[]): string;
 export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
-export { DEFAULTS, DEFAULT_CARD_COMPOSITION, getDefaultProducts, };
+export declare function getDefaultTemplate(): string;
+export declare function generateBlockTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[]): string;
+export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, spacer, };
 export default blockTemplate;

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

@@ -0,0 +1,19 @@
+/**
+ * Utility for preserving text styling when updating innerHTML
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+/**
+ * Preserves existing style tags when updating text content
+ *
+ * When users apply text styles (bold, italic, etc.) in Stripo, the editor wraps
+ * content in tags like <strong>, <em>, <u>, <s>. This function extracts those
+ * style tags from the original HTML and re-applies them to the new text content.
+ * @example
+ * // Original: <span class="omnibus-text-before"><strong>Lowest price: </strong></span>
+ * // After calling preserveTextStyles(element, 'Best price: ')
+ * // Result: <strong>Best price: </strong>
+ * @param element - The DOM element or ImmutableHtmlNode containing the styled text
+ * @param newText - The new text content to insert
+ * @returns The new text wrapped in the original style tags
+ */
+export declare function preserveTextStyles(element: ImmutableHtmlNode | Element, newText: string): string;