@useinsider/guido 3.8.0-beta.bf9ea20 → 3.8.0-beta.eb4074b

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

@@ -21,6 +21,11 @@ export declare class LayoutOrientationControl extends CommonControl {
     getTemplate(): string;
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    /**
+     * Layout orientation restructures the whole block, which is meaningless for
+     * partner-managed (`ins-skip-compile`) blocks — disable the control there.
+     */
+    _syncDisabledState(): void;
     _setFormValues(): void;
     /**
      * Handles layout change
@@ -31,7 +36,8 @@ export declare class LayoutOrientationControl extends CommonControl {
      * Regenerates product rows based on the selected layout
      * Uses unified style-preserving regeneration to maintain user customizations
      * @param layout - The layout to use for regeneration (passed explicitly to avoid stale DOM reads)
+     * @param composition - The preserved card composition, incl. customAttr:* entries
      */
-    _regenerateProductRows(layout: Orientation): void;
+    _regenerateProductRows(layout: Orientation, composition: string[]): void;
     _listenToFormUpdates(): void;
 }

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

@@ -30,6 +30,12 @@ export declare class ProductLayoutControl extends CommonControl {
     getTemplate(): string;
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    /**
+     * Products-per-row and mobile-layout restructure the block, which is
+     * meaningless for partner-managed (`ins-skip-compile`) blocks — disable
+     * these inputs there. Disabling coexists with the visibility logic above.
+     */
+    _syncDisabledState(): void;
     onDestroy(): void;
     _setFormValues(): void;
     /**

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

@@ -35,6 +35,15 @@ interface DocumentModifier {
  * @returns The block element or null if not found
  */
 export declare function getBlockElement(currentNode: ImmutableHtmlNode | null | undefined): ImmutableHtmlNode | null;
+/**
+ * True when the recommendation block has opted out of Guido's content
+ * regeneration via the `ins-skip-compile` class. Partner-managed blocks carry
+ * hand-authored `{{...}}` variables in their cells, so Guido must never
+ * overwrite their content with product data (regenerate / in-place update).
+ * @param currentNode - The current template node
+ * @returns True if the block opted out of content regeneration
+ */
+export declare function isPartnerManagedBlock(currentNode: ImmutableHtmlNode | null | undefined): boolean;
 /**
  * Gets the current layout orientation from the block's data attribute
  * Supports both old (horizontal/vertical) and new (list/grid) values for backward compatibility
@@ -60,39 +69,17 @@ export interface RegenerateProductRowsOptions {
     composition?: string[];
 }
 /**
- * Regenerates only the mobile product container rows.
- * Used when mobile-specific settings change (mobileCardsInRow)
- * or when the desktop container is regenerated (to keep both in sync).
+ * Regenerates only the mobile product container rows and commits in a single apply().
+ * Standalone entry point for callers that change mobile-only settings
+ * (block.ts, productLayout.ts). The combined desktop+mobile regeneration uses the
+ * apply-free accumulateMobileProductRows() so the whole rebuild is one commit.
  *
- * For list layout: clears the mobile row content (list rows are inherently responsive).
- * For grid layout with mobileLayoutEnabled OFF: clears the mobile row content.
- * For grid layout with mobileLayoutEnabled ON: rebuilds the full mobile row
- *   structure (<td><table>...products...</table></td>) in a single operation.
+ * For list layout / disabled mobile layout: clears the mobile row content.
+ * For grid layout with mobileLayoutEnabled ON: rebuilds the full mobile row.
  */
 export declare function regenerateMobileProductRows(options: Omit<RegenerateProductRowsOptions, 'afterRegenerate'>): void;
-/**
- * Regenerates product rows in the desktop container based on current store configuration.
- * Also regenerates the mobile container to keep both in sync.
- * Reads products, layout, and composition from store/DOM and rebuilds the HTML.
- * @param options - Configuration options for regeneration
- */
-export declare function regenerateProductRows(options: RegenerateProductRowsOptions): void;
-export interface ReapplySpacingOptions {
-    currentNode: ImmutableHtmlNode | null | undefined;
-    documentModifier: DocumentModifier;
-}
-/**
- * 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;
 export interface RegenerateWithStylesOptions extends Omit<RegenerateProductRowsOptions, 'products' | 'layout'> {
-    /** Skip style capture/restore if styles were already handled externally */
+    /** Skip style capture if styles were already handled externally */
     skipStylePreservation?: boolean;
     /** Optional: pass products directly instead of reading from store */
     products?: RecommendationProduct[];
@@ -100,26 +87,21 @@ export interface RegenerateWithStylesOptions extends Omit<RegenerateProductRowsO
     layout?: Orientation;
 }
 /**
- * Regenerates product rows while preserving user-applied styles
- *
- * This unified function handles the complete regeneration flow:
- * 1. Captures existing styles (fonts, colors, button styles, etc.)
- * 2. Regenerates HTML with new products/layout
- * 3. Restores captured styles to new elements
- * 4. Reapplies spacing from data attributes
+ * Regenerates product rows while preserving user-applied styles, in a SINGLE commit.
  *
- * NOTE: Style restoration is temporarily disabled due to Stripo selection bug.
- * Multiple apply() calls (setInnerHtml + restoreStyles + reapplySpacing) cause
- * Stripo's internal cursor/selection tracking to lose node references, resulting in
- * "Cannot read properties of undefined (reading 'textContent')" errors.
+ * Flow:
+ * 1. Capture the current per-attribute style templates (tag wrappers + p-style) and
+ *    spacing — read from the live DOM BEFORE it is replaced.
+ * 2. Accumulate the desktop + mobile rebuilds, with spacing and the captured styles
+ *    baked straight into the generated HTML.
+ * 3. Commit everything with ONE apply().
  *
- * Use this instead of `regenerateProductRows` when styles must be preserved.
- * @example
- * // When products change (API response, count change, layout change)
- * regenerateProductRowsWithStyles({
- *     currentNode: this.currentNode,
- *     documentModifier: this.api.getDocumentModifier(),
- * });
+ * Why one apply(): each apply() is a Stripo commit boundary that re-resolves the
+ * editor's selection against node references. A setInnerHtml rebuild destroys the old
+ * text nodes, so a second (or deferred) commit left the inline-format tracker pointing
+ * at gone nodes — the "Cannot read properties of undefined (reading 'textContent')"
+ * crash when toggling bold/italic/strike afterwards. Baking spacing + styles into the
+ * HTML removes the need for any post-rebuild reapply pass.
  * @param options - Configuration options for regeneration
  */
 export declare function regenerateProductRowsWithStyles(options: RegenerateWithStylesOptions): void;

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

@@ -1,5 +1,5 @@
 import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommendation';
-import { type ElementRenderer } from '../utils';
+import { type ElementRenderer, type RenderOptions } from '../utils';
 /**
  * Generates attribute-aligned product rows for grid layout.
  * Creates rows where each row contains one attribute type from all products.
@@ -9,7 +9,7 @@ import { type ElementRenderer } from '../utils';
  * @param composition - Array defining order of card elements
  * @returns HTML string for attribute-aligned rows
  */
-export declare function prepareGridAttributeRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[], filterList?: FiltersResponse): string;
+export declare function prepareGridAttributeRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[], filterList?: FiltersResponse, renderOptions?: RenderOptions): string;
 /**
  * Prepares grid product rows with attribute-aligned structure
  * Groups products into rows, then generates attribute-aligned HTML for each group
@@ -19,7 +19,7 @@ export declare function prepareGridAttributeRows(products: RecommendationProduct
  * @param composition - Array defining order of card elements
  * @returns HTML string for all product rows
  */
-export declare function prepareGridProductRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[], filterList?: FiltersResponse): string;
+export declare function prepareGridProductRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[], filterList?: FiltersResponse, renderOptions?: RenderOptions): string;
 /**
  * Prepares grid product rows with attribute-aligned structure.
  * Uses row-based rendering where each attribute type forms a single row across all products.
@@ -28,6 +28,6 @@ export declare function prepareGridProductRows(products: RecommendationProduct[]
  * @param composition - Array defining element order
  * @returns HTML string for product rows
  */
-export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[], filterList?: FiltersResponse): string;
+export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[], filterList?: FiltersResponse, renderOptions?: RenderOptions): string;
 export declare function getDefaultTemplate(recommendationId?: number): string;
 export declare function generateBlockTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[], mobileProductsPerRow?: number): string;

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

@@ -6,7 +6,7 @@
  */
 import type { RecommendationProduct } from '@@/Types/recommendation';
 import { type Orientation, type PrepareProductRowsOptions } from './utils';
-export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, spacer, sanitizeImageUrl, createBlockTemplate, toDisplayableAttributeValue, type Orientation, type PrepareProductRowsOptions, type ElementRenderer, type ProductCardGetter, } from './utils';
+export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, spacer, sanitizeImageUrl, createBlockTemplate, toDisplayableAttributeValue, type Orientation, type PrepareProductRowsOptions, type ElementRenderer, type ProductCardGetter, type AttributeStyleTemplate, type AttributeStyleTemplates, type CellBackgroundColors, type CellAlignments, type CellClasses, type OmnibusTexts, } from './utils';
 /**
  * Unified function to prepare product rows for any layout.
  * Delegates to the appropriate layout-specific implementation.

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

@@ -1,4 +1,5 @@
 import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommendation';
+import { type RenderOptions } from '../utils';
 /**
  * Generates a list product card with 3-column layout
  * Uses buildElementRenderer to render Image, Info content, and Button
@@ -11,7 +12,7 @@ import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommenda
  * @param composition - Array defining order of card elements
  * @returns HTML string for a single product card row
  */
-export declare function getListProductCard(product: RecommendationProduct, composition?: string[], filterList?: FiltersResponse): string;
+export declare function getListProductCard(product: RecommendationProduct, composition?: string[], filterList?: FiltersResponse, renderOptions?: RenderOptions): string;
 /**
  * Prepares list product rows
  * Each product is a full-width row with 3-column layout
@@ -19,6 +20,6 @@ export declare function getListProductCard(product: RecommendationProduct, compo
  * @param composition - Array defining order of card elements
  * @returns HTML string for product rows
  */
-export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[], filterList?: FiltersResponse): string;
+export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[], filterList?: FiltersResponse, renderOptions?: RenderOptions): string;
 export declare function getDefaultTemplate(): string;
 export declare function generateBlockTemplate(products: RecommendationProduct[], title?: string, composition?: string[]): string;

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

@@ -25,13 +25,20 @@ export declare function isDefaultAttribute(attrName: string, filterList: Filters
  * - Product attributes → "product_attribute.<name>" (e.g., "product_attribute.rating_star")
  */
 export declare function resolveProductAttrValue(attrName: string, filterList: FiltersResponse): string;
+/**
+ * Reverse of `resolveProductAttrValue`: maps a cell's `product-attr` value back to its
+ * `customAttr:<name>` composition key. The resolver only ever emits `<name>` (default
+ * attribute) or `product_attribute.<name>` (custom product attribute), so stripping the
+ * prefix recovers the attribute name without needing the store's filter list.
+ */
+export declare function toCustomCompositionKey(productAttrValue: string): string;
 /**
  * Callback that generates the cell HTML for a custom product attribute.
  * Layout-specific: grid returns `<td>…`, list returns `<tr><td>…</td></tr>`.
  * @param productAttrValue - The resolved `product-attr` value (e.g., "brand" or "product_attribute.rating_star")
  * @param content - The display content for the cell
  */
-export type CustomCellHtmlGetter = (productAttrValue: string, content: string) => string;
+export type CustomCellHtmlGetter = (productAttrValue: string, content: string, options?: CellRenderOptions) => string;
 /**
  * Symbol key for embedding custom attribute HTML in an ElementRenderer.
  * Grid and list renderers store their custom-attribute cell template under this key
@@ -54,10 +61,99 @@ export declare const CUSTOM_CELL_HTML: unique symbol;
  */
 export declare function buildElementRenderer(baseRenderer: ElementRenderer, composition: string[], filterList?: FiltersResponse): ElementRenderer;
 export type Orientation = 'list' | 'grid';
+/**
+ * A captured "style template" for one text attribute, used to bake user-applied
+ * styling back into regenerated HTML in a SINGLE setInnerHtml/apply pass.
+ *
+ * Stripo applies inline formats as TAGS (`<strong>`, `<em>`, `<s>`), not CSS, so we
+ * preserve the actual wrapper tags around the text — re-emitting `text-decoration`
+ * CSS would render a strike that Stripo's own toggle can't detect. `pStyle` carries
+ * the `<p>`-level inline CSS (font-size/color/align/etc.).
+ */
+export interface AttributeStyleTemplate {
+    /** Raw inline style for the `<p>`, e.g. "font-size: 18px; color: #111;" */
+    pStyle?: string;
+    /** Opening inline-format tags captured around the text (or button label), e.g. "<strong><em>" */
+    openTags?: string;
+    /** Matching closing tags in reverse order, e.g. "</em></strong>" */
+    closeTags?: string;
+    /** Button: inline style of the `<span class="es-button-border">` (background/border/radius). */
+    buttonBorderStyle?: string;
+    /** Button: inline style of the `<a class="es-button">` (color/background/font/padding/width). */
+    buttonAnchorStyle?: string;
+    /** Button: whether "Fit to Container" is on (the `es-fw` class on the border span). */
+    buttonFitToContainer?: boolean;
+    /** Button: the user-edited label text (without wrapper tags), e.g. "Shop Now" instead of "Buy". */
+    buttonText?: string;
+    /** Image: inline style of the `<img>` (width/height/max-width/border-radius/margin). */
+    imgStyle?: string;
+}
+/** Per-attribute style templates keyed by ATTR_PRODUCT_* composition key. */
+export type AttributeStyleTemplates = Record<string, AttributeStyleTemplate>;
+/** Per-attribute "Block Background Color" values keyed by ATTR_PRODUCT_* composition key. */
+export type CellBackgroundColors = Record<string, string>;
+/** Per-attribute text alignment (the cell's `align` attribute) keyed by ATTR_PRODUCT_* composition key. */
+export type CellAlignments = Record<string, string>;
+/** Per-attribute preserved cell classes (padding `es-p*`, margin `es-m*`, text-trim) keyed by attr. */
+export type CellClasses = Record<string, string>;
+/** A user-edited omnibus prefix/suffix, e.g. before = "Lowest 30-day price: ". */
+export interface OmnibusText {
+    before?: string;
+    after?: string;
+}
+/** Per-attribute omnibus before/after texts keyed by ATTR_PRODUCT_OMNIBUS_* composition key. */
+export type OmnibusTexts = Record<string, OmnibusText>;
+/** Per-attribute visibility (show/hide) keyed by ATTR_PRODUCT_* composition key. */
+export type AttributeVisibility = Record<string, boolean>;
+/**
+ * Per-cell rendering context passed to each ElementRenderer function so a single
+ * regeneration can bake column spacing and preserved styles directly into the HTML.
+ */
+export interface CellRenderOptions {
+    /** Column-spacing padding for the attribute cell, e.g. "0 7px". Falls back to DEFAULT_CELL_PADDING. */
+    cellPadding?: string;
+    /** Captured style template for this attribute (preserves user bold/italic/strike + p-style). */
+    styleTemplate?: AttributeStyleTemplate;
+    /** Card background color baked onto the `.product-card-segment` of every cell. */
+    cardBackgroundColor?: string;
+    /** This text attribute's "Block Background Color", baked onto its `[esd-extension-block-id]` cell. */
+    cellBackgroundColor?: string;
+    /** This text attribute's alignment, baked onto its `[esd-extension-block-id]` cell `align` attribute. */
+    cellAlignment?: string;
+    /** This cell's preserved spacing/text-trim classes, replacing the renderer's hardcoded `es-p*` defaults. */
+    cellClasses?: string;
+    /** Omnibus cell's user-edited before/after text, replacing the renderer's hardcoded prefix. */
+    omnibusText?: OmnibusText;
+}
+/**
+ * Spacing + preserved-style values baked into generated HTML so a regeneration
+ * needs only a single setInnerHtml/apply (no deferred reapply pass). Shared by the
+ * grid and list layout generators and by `PrepareProductRowsOptions`.
+ */
+export interface RenderOptions {
+    /** Column-spacing padding baked into product cells (grid) or the card wrapper (list), e.g. "0 7px". */
+    cellPadding?: string;
+    /** Row-spacing height in px baked into spacer rows between product rows. */
+    rowSpacingPx?: number;
+    /** Per-attribute captured style templates to preserve user styling across regeneration. */
+    styleTemplates?: AttributeStyleTemplates;
+    /** Card background color baked into the card containers (`.product-card-segment` / `.product-card-wrapper`). */
+    cardBackgroundColor?: string;
+    /** Per-attribute "Block Background Color" values baked onto each text cell across regeneration. */
+    cellBackgroundColors?: CellBackgroundColors;
+    /** Per-attribute text alignment baked onto each text cell's `align` attribute across regeneration. */
+    cellAlignments?: CellAlignments;
+    /** Per-attribute preserved cell classes (padding/margin/text-trim) re-baked across regeneration. */
+    cellClasses?: CellClasses;
+    /** Per-attribute omnibus before/after texts re-baked across regeneration. */
+    omnibusTexts?: OmnibusTexts;
+    /** Per-attribute visibility (show/hide) re-applied across regeneration; falls back to defaults. */
+    visibility?: AttributeVisibility;
+}
 /**
  * Options for prepareProductRows unified function
  */
-export interface PrepareProductRowsOptions {
+export interface PrepareProductRowsOptions extends RenderOptions {
     /** Number of products per row (only for grid layout, defaults to 3) */
     productsPerRow?: number;
     /** Number of products per row on mobile (only for grid layout, defaults to 1) */
@@ -75,15 +171,15 @@ export interface PrepareProductRowsOptions {
  * for custom attributes — used by `buildElementRenderer` to create custom entries.
  */
 export interface 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;
+    [ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
+    [ATTR_PRODUCT_NAME]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
+    [ATTR_PRODUCT_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
+    [ATTR_PRODUCT_OLD_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
+    [ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
+    [ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
+    [ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
     [CUSTOM_CELL_HTML]?: CustomCellHtmlGetter;
-    [key: string]: (product: RecommendationProduct) => string;
+    [key: string]: (product: RecommendationProduct, options?: CellRenderOptions) => string;
 }
 /**
  * Product card getter function type
@@ -96,7 +192,65 @@ export declare const DEFAULTS: {
 };
 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";
+/** Default row-spacing height in px, used when no explicit value is baked in. */
+export declare const DEFAULT_ROW_SPACING_PX = 10;
+/**
+ * Builds a spacer row with the given height. Baking row spacing into the HTML lets
+ * regeneration use a single setInnerHtml/apply instead of a deferred reapply pass.
+ */
+export declare function buildSpacer(heightPx?: number): string;
+export declare const spacer: string;
+/**
+ * Resolves the `<p>` inline style for a text cell. When a captured template exists,
+ * it wins (even when empty — meaning the user cleared the style); otherwise the
+ * renderer's default style is used.
+ */
+export declare function resolvePStyle(defaultPStyle: string, template?: AttributeStyleTemplate): string;
+/**
+ * Renders `<p>…text…</p>` for a text attribute, preserving captured inline-format
+ * tags (`<strong>`/`<em>`/`<s>`) and p-style when a template is supplied, or falling
+ * back to the renderer defaults. A present-but-empty template faithfully drops the
+ * default wrapper (e.g. the user removed bold).
+ */
+export declare function renderStyledParagraph(text: string, defaults: {
+    pStyle: string;
+    openTags: string;
+    closeTags: string;
+}, template?: AttributeStyleTemplate): string;
+/**
+ * Builds the inline style for a card container (`.product-card-segment` in grid,
+ * `.product-card-wrapper` in list), appending the captured card background color to any
+ * base style. Returns '' when there is nothing to set.
+ */
+export declare function resolveSegmentBgStyle(baseStyle: string, cardBackgroundColor?: string): string;
+/**
+ * Builds the ` style="background-color: …"` attribute for a text attribute's
+ * `[esd-extension-block-id]` cell, baking in the captured "Block Background Color".
+ * Returns '' when there is nothing to set (the cell otherwise carries no inline style).
+ */
+export declare function cellBgStyleAttr(cellBackgroundColor?: string): string;
+/** Resolves an omnibus cell's before/after text, falling back to the renderer's defaults. */
+export declare function resolveOmnibusText(captured?: OmnibusText, defaultBefore?: string): Required<OmnibusText>;
+/**
+ * Wraps a button label in the captured inline-format tags (bold/italic), or returns it
+ * plain. Mirrors text wrapper preservation for the button's `<a>` content.
+ */
+export declare function renderButtonLabel(label: string, template?: AttributeStyleTemplate): string;
+/**
+ * Resolves the `<span class="es-button-border">` class, adding `es-fw` (full-width)
+ * when the captured template had "Fit to Container" on. Stripo applies fit via this
+ * class, not inline width, so we preserve the class across regeneration.
+ */
+export declare function resolveButtonBorderClass(template?: AttributeStyleTemplate): string;
+/** Default inline style for the product image `<img>` (used when nothing is captured). */
+export declare const DEFAULT_IMG_STYLE = "display: block; max-width: 100%; height: auto;";
+/** Default inline style for the button `<span class="es-button-border">`. */
+export declare const DEFAULT_BUTTON_BORDER_STYLE: string;
+/**
+ * Default inline style for the button `<a class="es-button">`. The list layout appends its
+ * own `padding: 5px 30px;` on top of this shared base.
+ */
+export declare const DEFAULT_BUTTON_ANCHOR_STYLE: string;
 export declare const PLACEHOLDER_IMAGE = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
 /**
  * Sanitizes product image URLs for consistent rendering

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

@@ -0,0 +1,78 @@
+/**
+ * Capture Style Templates
+ *
+ * Reads the user-applied styling of each text attribute from the LIVE block DOM
+ * and turns it into per-attribute `AttributeStyleTemplate`s that the template
+ * renderers bake straight into regenerated HTML.
+ *
+ * Why this exists: a full regeneration replaces product cells via `setInnerHtml`.
+ * Querying the new cells to re-apply styles after `apply()` requires a second
+ * (deferred) commit, and multiple commits corrupt Stripo's selection tracking
+ * (the `textContent` crash). Baking the captured styles into the HTML keeps the
+ * whole regeneration a SINGLE `setInnerHtml` + SINGLE `apply()`.
+ *
+ * Inline formats (bold/italic/strike) are captured as TAGS (`<strong>/<em>/<s>`),
+ * not CSS, because Stripo applies and detects them as tags — re-emitting
+ * `text-decoration` CSS would render a strike its own toggle can't see.
+ */
+import type { AttributeStyleTemplates, OmnibusText, RenderOptions } from '../templates/utils';
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+/**
+ * Captures per-attribute style templates (text + button + image) from the block's desktop
+ * container. Scoped to desktop so the mobile container's duplicate block ids aren't read.
+ * Returns only the attributes that actually have styling worth preserving.
+ */
+export declare function captureAttributeStyleTemplates(node: ImmutableHtmlNode | null | undefined): AttributeStyleTemplates;
+/**
+ * Captures the card background color (the "Styles" tab control) from the first card
+ * container — `.product-card-segment` in grid, `.product-card-wrapper` in list. Returns
+ * undefined when unset/transparent so the renderer keeps its (bg-less) default.
+ */
+export declare function captureCardBackgroundColor(node: ImmutableHtmlNode | null | undefined): string | undefined;
+/**
+ * Captures each text attribute's "Block Background Color" (Styles tab) from the block's
+ * desktop container, keyed by composition key. The renderers bake these
+ * straight onto the regenerated `[esd-extension-block-id]` cell so the bg survives a full
+ * regeneration — unlike the card background, the text-cell bg lives on the attribute cell
+ * itself and is only readable via `getComputedStyle` (see `readCellBackground`). Returns
+ * only the attributes that actually carry a non-transparent background.
+ */
+export declare function captureCellBackgroundColors(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
+/**
+ * Captures each text attribute's alignment from the cell's `align` attribute, keyed by
+ * composition key. Stripo's built-in `TextAlignBuiltInControl` writes the
+ * alignment as the `align` HTML attribute on the `[esd-extension-block-id]` cell (not as
+ * inline `text-align`), so the renderers' hardcoded `align` would otherwise reset it on
+ * every regeneration. We capture the current value and re-bake it.
+ */
+export declare function captureCellAlignments(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
+/**
+ * Captures each text/button cell's preservable classes (padding `es-p*`, margin `es-m*`,
+ * text-trim) keyed by composition key, so a regeneration can re-bake them
+ * instead of resetting to the renderer's hardcoded spacing classes. Stripo stores padding
+ * and margin as these classes (NOT inline style), so an inline-style capture misses them.
+ */
+export declare function captureCellClasses(node: ImmutableHtmlNode | null | undefined): Record<string, string>;
+/**
+ * Captures the omnibus cells' editable before/after text (from the `data-text-before` /
+ * `data-text-after` attributes the omnibus text controls write), keyed by attr, so a
+ * regeneration re-bakes the user's wording instead of the renderer's hardcoded prefix.
+ */
+export declare function captureOmnibusTexts(node: ImmutableHtmlNode | null | undefined): Record<string, OmnibusText>;
+/**
+ * Captures the current per-attribute visibility from the live block, keyed by composition
+ * attribute (`data-attribute-type`). The card-composition control toggles visibility by
+ * setting `display`/`data-visibility` on `.recommendation-attribute-row`s, but the renderers
+ * re-apply the hardcoded `DEFAULT_CARD_VISIBILITY` on regeneration — so a user who showed
+ * omnibus (default-hidden) or hid a row would lose it. Capturing the live `data-visibility`
+ * lets the rebuild honor the user's choice.
+ */
+export declare function captureVisibility(node: ImmutableHtmlNode | null | undefined): Record<string, boolean>;
+/**
+ * The full bundle of user-applied styling captured from the live block before a
+ * regeneration replaces its cells. Threaded as ONE object (not a long positional list)
+ * into the rebuild so the regenerated HTML re-bakes every preserved value.
+ */
+export type StyleCaptures = Pick<RenderOptions, 'styleTemplates' | 'cardBackgroundColor' | 'cellBackgroundColors' | 'cellAlignments' | 'cellClasses' | 'omnibusTexts' | 'visibility'>;
+/** Runs every capture against the live node and returns them as a single bundle. */
+export declare function captureStyles(node: ImmutableHtmlNode | null | undefined): StyleCaptures;

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

@@ -1,4 +1,19 @@
 import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+/**
+ * Extracts the nested inline-format wrapper tags around text content, outermost first.
+ *
+ * Stripo applies bold/italic/underline/strike as tags (`<strong>/<em>/<u>/<s>`), so to
+ * preserve user formatting across a text swap or block regeneration we capture the actual
+ * wrapper tags rather than CSS.
+ * @example
+ * // '<strong><em>Hi</em></strong>' → { openTags: '<strong><em>', closeTags: '</em></strong>' }
+ * @param html - The inner HTML to parse
+ * @returns The concatenated opening tags and matching closing tags (empty strings if none)
+ */
+export declare function extractWrapperTags(html: string): {
+    openTags: string;
+    closeTags: string;
+};
 /**
  * Preserves existing style tags when updating text content
  *

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

@@ -5,33 +5,54 @@
  * Handles both standard DOM properties and Stripo's custom methods.
  */
 import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-/** Interface for nodes with standard tagName property */
-interface NodeWithTagName {
-    tagName: string;
-}
 /** Interface for nodes with getStyle method */
 export interface NodeWithGetStyle {
     getStyle: (property: string) => string | null | undefined;
 }
+/** Interface for nodes with getComputedStyle method */
+export interface NodeWithGetComputedStyle {
+    getComputedStyle: (property: string) => string | null | undefined;
+}
+/** Interface for nodes with getAttribute method */
+export interface NodeWithGetAttribute {
+    getAttribute: (name: string) => string | null;
+}
 /** Interface for nodes with parent method */
 export interface NodeWithParent {
     parent: () => ImmutableHtmlNode | null;
 }
+/** Interface for nodes with querySelectorAll method */
+export interface NodeWithQuerySelectorAll {
+    querySelectorAll: (selector: string) => ImmutableHtmlNode[];
+}
 /**
  * Type guard to check if a node has getStyle method
  * @param node - The node to check
  */
 export declare function hasGetStyle(node: unknown): node is NodeWithGetStyle;
 /**
- * Type guard to check if a node has parent method
+ * Type guard to check if a node has getComputedStyle method.
+ * This is the only read that sees a background applied by Stripo's built-in
+ * "Block Background Color" control — it writes neither an inline style nor a
+ * queryable stylesheet rule, but the computed value is still resolvable.
  * @param node - The node to check
  */
-export declare function hasParent(node: unknown): node is NodeWithParent;
+export declare function hasGetComputedStyle(node: unknown): node is NodeWithGetComputedStyle;
+/**
+ * Type guard to check if a node has getAttribute method
+ * @param node - The node to check
+ */
+export declare function hasGetAttribute(node: unknown): node is NodeWithGetAttribute;
 /**
- * Type guard to check if a node is a TD element
+ * Type guard to check if a node has querySelectorAll method
  * @param node - The node to check
  */
-export declare function isTdNode(node: unknown): node is ImmutableHtmlNode & NodeWithTagName;
+export declare function hasQuerySelectorAll(node: unknown): node is NodeWithQuerySelectorAll;
+/**
+ * Type guard to check if a node has parent method
+ * @param node - The node to check
+ */
+export declare function hasParent(node: unknown): node is NodeWithParent;
 /**
  * Safely retrieves a style value from a node
  * @param node - The node to get the style from
@@ -74,4 +95,3 @@ export declare function isTableCellNode(node: ImmutableHtmlNode | null | undefin
  * @returns The CSS display value ('table-cell' or 'table-row')
  */
 export declare function getTableDisplayValue(node: ImmutableHtmlNode | null | undefined): 'table-cell' | 'table-row';
-export {};

package/dist/src/extensions/Blocks/controlFactories.d.ts

@@ -280,11 +280,21 @@ export declare function createButtonTextStyleAndFontColorControl(controlId: stri
     new (): {
         getId(): string;
         getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+        /**
+         * Propagates Bold/Italic to ALL product buttons, not just the focused one.
+         *
+         * Stripo's built-in applies font-color/size to every target node but writes
+         * the text-style (font-weight/font-style) only to the selected button. Bold/italic
+         * are plain inline CSS on the `<a class="es-button">` (no tags), so we mirror them
+         * onto every button's anchor. The toggle state comes from the control's form
+         * (`buttonTextStyleForm.{bold,italic}`) because the patched node isn't updated yet
+         * when this runs. Returned modifications are merged into the parent control's patch.
+         */
+        getAdditionalModifications(root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
         getParentControlId(): string;
         getLabels(): import("@stripoinc/ui-editor-extensions").ButtonTextStyleAndFontColorControlLabels | undefined;
         api: import("@stripoinc/ui-editor-extensions").ControlApi;
         getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
         isVisible(_node: ImmutableHtmlNode): boolean;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.8.0-beta.bf9ea20",
+  "version": "3.8.0-beta.eb4074b",
   "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",