@useinsider/guido 2.1.0-beta.8699c8a → 2.1.0-beta.8e15673

package/dist/services/recommendationApi.js

@@ -1,6 +1,6 @@
 import { useHttp as c } from "../composables/useHttp.js";
-import { URLS as a } from "../enums/extensions/recommendationBlock.js";
-const R = () => {
+import { URLS as m } from "../enums/extensions/recommendationBlock.js";
+const f = () => {
   const { get: o } = c();
   return {
     fetchRecommendationCreateData: async () => {
@@ -18,14 +18,17 @@ const R = () => {
         throw console.error("fetchRecommendationFilters error:", e), e;
       }
     },
-    fetchRecommendationProducts: async (e, n) => {
+    fetchRecommendationProducts: async (e, a) => {
+      var n;
       try {
-        const t = decodeURIComponent(new URLSearchParams(Object.entries(n)).toString());
+        const t = decodeURIComponent(new URLSearchParams(Object.entries(a)).toString());
         console.debug("🏁 Recommendation API Query:", t);
-        const r = await o(
-          `${a.RECOMMENDATION_API_URL}/v2/${e}?${t}`
+        const { get: s } = c({
+          headers: {}
+        }), r = await s(
+          `${m.RECOMMENDATION_API_URL}/v2/${e}?${t}`
         );
-        return (r == null ? void 0 : r.data) ?? [];
+        return ((n = r == null ? void 0 : r.data) == null ? void 0 : n.data) ?? [];
       } catch (t) {
         throw console.error("fetchRecommendationProducts error:", t), t;
       }
@@ -33,5 +36,5 @@ const R = () => {
   };
 };
 export {
-  R as useRecommendationApi
+  f as useRecommendationApi
 };

package/dist/services/templateLibraryApi.js

@@ -3,29 +3,30 @@ import { useHttp as f } from "../composables/useHttp.js";
 import { useToaster as w } from "../composables/useToaster.js";
 import { useTranslations as b } from "../composables/useTranslations.js";
 import { EditorType as h } from "../enums/defaults.js";
-import { useSaveAsTemplateStore as C } from "../stores/save-as-template.js";
+import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useSaveAsTemplateStore as v } from "../stores/save-as-template.js";
 import { base64EncodeWithSpecialChars as a } from "../utils/base64.js";
-import { useTemplatePreparation as v } from "../utils/templatePreparation.js";
-const L = () => {
-  const { get: m, post: n } = f(), { handleError: o, showToaster: i } = w(), { config: l } = T(), p = b();
+import { useTemplatePreparation as S } from "../utils/templatePreparation.js";
+const R = () => {
+  const { get: n, post: c } = f(), { handleError: o, showToaster: i } = w(), { config: l } = T(), p = b();
   return {
     getCategories: async () => {
       try {
-        const { data: e = [] } = await m("/newsletter/template-library/get-template-categories");
+        const { data: e = [] } = await n("/newsletter/template-library/get-template-categories");
         return e;
       } catch (e) {
         return o(e, "Failed to fetch template categories"), [];
       }
     },
     checkTemplateNameAvailability: async (e) => {
-      const { data: { status: t = !1 } } = await m(
+      const { data: { status: t = !1 } } = await n(
         `/newsletter/template-library/template-name-exists?name=${e}`
       );
       return !t;
     },
     createCategory: async (e) => {
       try {
-        const { data: { id: t } } = await n(
+        const { data: { id: t } } = await c(
           "/newsletter/template-library/create-category",
           { name: e }
         );
@@ -37,7 +38,7 @@ const L = () => {
     createTemplate: async () => {
       var e, t, g, y;
       try {
-        const { prepareTemplateDetails: c } = v(), r = C(), s = await c(), u = {
+        const { prepareTemplateDetails: m } = S(), r = v(), s = await m(), u = {
           name: r.getTemplateName,
           categories: r.getSelectedCategoryIds,
           productId: ((t = (e = l.value) == null ? void 0 : e.partner) == null ? void 0 : t.productType) || 0,
@@ -47,7 +48,9 @@ const L = () => {
           css: a(s.css),
           unsubscriptionPreferencePageStatus: !1,
           unsubscriptionPreferencePages: [],
-          recommendationCampaignUrls: a({}),
+          recommendationCampaignUrls: a(
+            C().recommendationCampaignUrls
+          ),
           recommendationConfigs: a({}),
           isGuido: !0,
           stripoConfig: a({
@@ -55,7 +58,7 @@ const L = () => {
             html: s.rawHtml,
             css: s.css
           })
-        }, { data: { type: d } } = await n(
+        }, { data: { type: d } } = await c(
           "/newsletter/template-library/create-template",
           u
         );
@@ -76,12 +79,12 @@ const L = () => {
           ),
           type: "success"
         });
-      } catch (c) {
-        o(c, "Failed to create template");
+      } catch (m) {
+        o(m, "Failed to create template");
       }
     }
   };
 };
 export {
-  L as useTemplateLibraryApi
+  R as useTemplateLibraryApi
 };

package/dist/src/components/wrappers/WpDrawer.vue.d.ts

@@ -33,8 +33,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     descriptionStatus: boolean;
     descriptionText: string;
 }>>>, {
-    className: string;
     size: "small" | "medium" | "large";
+    className: string;
     closeOnOutsideClick: boolean;
     descriptionStatus: boolean;
     descriptionText: string;

package/dist/src/composables/useRecommendation.d.ts

@@ -15,5 +15,6 @@ interface CampaignData extends CardWidthParams {
 export declare const useRecommendation: () => {
     calculateCardWidth: ({ mobileLeftPadding, mobileRightPadding, cardsInRow, unresponsive, }: CardWidthParams) => number;
     getRecommendationCampaignData: (id: string) => CampaignData;
+    buildCampaignUrl: (campaignId: string) => string;
 };
 export {};

package/dist/src/config/compiler/utils/recommendationCompilerUtils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Formats a price template variable with the correct currency alignment.
+ * @param campaignId - The recommendation block campaign ID
+ * @param productIndex - Zero-based product index
+ * @param attribute - Price attribute name (e.g., 'price', 'original_price')
+ * @param alignment - Currency alignment from block config: 'before' or 'after'
+ * @returns Formatted price string with currency variable in correct position
+ */
+export declare function formatPriceVariable(campaignId: string, productIndex: number, attribute: string, alignment: string): string;
+/**
+ * Transforms recommendation block HTML by replacing product data with
+ * template variables.
+ * Preserves the full document structure (DOCTYPE, html, head, body).
+ * @param html - The raw template HTML
+ * @returns HTML with template variables replacing product data
+ */
+export declare function prepareRecommendationBlocks(html: string): string;

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

@@ -1,11 +1,78 @@
+/**
+ * Recommendation Block
+ *
+ * Main block class for the Recommendation extension.
+ * Handles block lifecycle including configuration initialization and migration.
+ * Supports multiple block instances with unique recommendation-id attributes.
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
 export declare const BLOCK_ID = "recommendation-block";
 export declare class RecommendationBlock extends Block {
+    /**
+     * Stores the ID generated in getTemplate() so onCreated() can reuse it.
+     * This avoids generating a new (different) ID in onCreated().
+     */
+    private _pendingBlockId;
     constructor();
     getId(): string;
     getIcon(): string;
     getBlockCompositionType(): BlockCompositionType;
     getName(): string;
     getDescription(): string;
+    /**
+     * Returns the template HTML for a new recommendation block.
+     * Generates a unique recommendation ID and embeds the instance class
+     * (ins-recommendation-v3-block-{id}) directly in the template HTML.
+     * This is necessary because Stripo's Angular rendering manages the class
+     * attribute and overwrites dynamically added classes via setAttribute.
+     */
     getTemplate(): string;
+    /**
+     * Called when a new block is dropped into the template
+     *
+     * Uses the ID from getTemplate() (which already embedded the instance class)
+     * and assigns the recommendation-id attribute + initializes configuration.
+     * @param node - The newly created block node
+     */
+    onCreated(node: ImmutableHtmlNode): void;
+    /**
+     * Called when the document changes or template is loaded
+     *
+     * Handles migration from legacy templates that don't have node config
+     * and assigns recommendation-id to legacy blocks that lack one.
+     * @param node - The block node that may need migration
+     */
+    onDocumentChanged(node: ImmutableHtmlNode): void;
+    /**
+     * Called when a block is deleted from the template
+     *
+     * Cleans up the per-block state from the Pinia store.
+     * @param node - The block node being deleted
+     */
+    onDelete(node: ImmutableHtmlNode): void;
+    /**
+     * Generates the next unique recommendation ID by scanning all existing blocks
+     * in the document and finding the maximum existing ID + 1.
+     */
+    private _generateNextId;
+    /**
+     * Assigns a recommendation-id attribute to the block element.
+     * The instance class (ins-recommendation-v3-block-{id}) is embedded in the template
+     * HTML by getTemplate(), since Stripo's Angular rendering overwrites dynamically
+     * added classes via setAttribute.
+     */
+    private _assignRecommendationId;
+    /**
+     * Gets the recommendation-id from a block node
+     */
+    private _getRecommendationId;
+    /**
+     * Gets the block element (the element with BLOCK_CLASS)
+     */
+    private _getBlockElement;
+    /**
+     * Migrate configuration from legacy format
+     */
+    private _migrateFromLegacy;
 }

package/dist/src/extensions/Blocks/Recommendation/constants/blockIds.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Block IDs used in the Recommendation Extension
+ * These IDs are used in the esd-extension-block-id attribute to identify specific blocks
+ */
+export declare enum RecommendationBlockId {
+    BUTTON = "recommendation-block-button",
+    NAME = "recommendation-block-name",
+    PRICE = "recommendation-block-price",
+    OLD_PRICE = "recommendation-block-old-price",
+    OMNIBUS_PRICE = "recommendation-block-omnibus-price",
+    OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount",
+    IMAGE = "recommendation-block-image"
+}

package/dist/src/extensions/Blocks/Recommendation/{constants.d.ts → constants/controlIds.d.ts}

@@ -1,27 +1,3 @@
-/**
- * Attribute type constants used in templates
- * These are used as keys in ElementRenderer and composition arrays
- */
-export declare const ATTR_PRODUCT_IMAGE = "productImage";
-export declare const ATTR_PRODUCT_NAME = "productName";
-export declare const ATTR_PRODUCT_PRICE = "productPrice";
-export declare const ATTR_PRODUCT_OLD_PRICE = "productOldPrice";
-export declare const ATTR_PRODUCT_OMNIBUS_PRICE = "productOmnibusPrice";
-export declare const ATTR_PRODUCT_OMNIBUS_DISCOUNT = "productOmnibusDiscount";
-export declare const ATTR_PRODUCT_BUTTON = "productButton";
-/**
- * Block IDs used in the Recommendation Extension
- * These IDs are used in the esd-extension-block-id attribute to identify specific blocks
- */
-export declare enum RecommendationBlockId {
-    BUTTON = "recommendation-block-button",
-    NAME = "recommendation-block-name",
-    PRICE = "recommendation-block-price",
-    OLD_PRICE = "recommendation-block-old-price",
-    OMNIBUS_PRICE = "recommendation-block-omnibus-price",
-    OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount",
-    IMAGE = "recommendation-block-image"
-}
 /**
  * Control IDs used in the Recommendation Extension
  * These IDs are returned by the getId() method of each control

package/dist/src/extensions/Blocks/Recommendation/constants/defaultConfig.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Default Configuration for Recommendation Block
+ *
+ * This module provides the default values for RecommendationNodeConfig.
+ * These values are used when:
+ * - A new block is dropped into the template
+ * - Migrating legacy templates without stored config
+ * - Merging partial updates with existing config
+ */
+import type { RecommendationNodeConfig, CurrencyConfig, OmnibusTextConfig } from '../types/nodeConfig';
+/**
+ * Default currency configuration
+ * Uses USD as the base currency with standard formatting
+ * Note: symbol stores the currency code (e.g., 'USD'), not the symbol character ('$')
+ * This matches the Currency Symbol dropdown which shows currency codes
+ */
+export declare const DEFAULT_CURRENCY: CurrencyConfig;
+/**
+ * Default omnibus price text configuration
+ * Pre-filled with common EU Omnibus Directive text
+ */
+export declare const DEFAULT_OMNIBUS_PRICE: OmnibusTextConfig;
+/**
+ * Default omnibus discount text configuration
+ */
+export declare const DEFAULT_OMNIBUS_DISCOUNT: OmnibusTextConfig;
+/**
+ * Default card composition order
+ * Defines the visual order of elements in product cards
+ */
+export declare const DEFAULT_COMPOSITION: string[];
+/**
+ * Default visibility settings for card elements
+ * Omnibus elements are hidden by default (not all regions require them)
+ */
+export declare const DEFAULT_VISIBILITY: Record<string, boolean>;
+/**
+ * Complete default configuration for Recommendation Block
+ *
+ * This is the single source of truth for default values.
+ * All other code should import and use this constant.
+ */
+export declare const DEFAULT_NODE_CONFIG: RecommendationNodeConfig;
+/**
+ * Current configuration version
+ * Increment this when making breaking changes to the schema
+ * Used for migration detection
+ */
+export declare const CURRENT_CONFIG_VERSION = 1;

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

@@ -0,0 +1,13 @@
+/**
+ * Recommendation Extension Constants
+ *
+ * This module re-exports all constants for the Recommendation extension.
+ * Import from this file for cleaner imports.
+ * @example
+ * import { RecommendationBlockId, CONTAINER_SELECTOR } from './constants';
+ */
+export { RecommendationBlockId } from './blockIds';
+export { RecommendationControlId } from './controlIds';
+export { CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, } from './selectors';
+export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
+export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, } from './defaultConfig';

package/dist/src/extensions/Blocks/Recommendation/constants/layout.d.ts

@@ -0,0 +1,41 @@
+/** Type-safe layout orientation values */
+export declare const LAYOUT_VALUES: {
+    GRID: "grid";
+    LIST: "list";
+};
+/** Layout options for radio button UI control */
+export declare const LAYOUT_OPTIONS: ({
+    icon: string;
+    value: "grid";
+} | {
+    icon: string;
+    value: "list";
+})[];
+/** Default number of products displayed per row in grid layout */
+export declare const DEFAULT_PRODUCTS_PER_ROW = 3;
+/** Default number of cards in a row (used in store initialization) */
+export declare const DEFAULT_CARDS_IN_ROW = 3;
+/** Maximum number of products that can be displayed */
+export declare const MAX_PRODUCT_COUNT = 9;
+/** Minimum number of products that can be displayed */
+export declare const MIN_PRODUCT_COUNT = 1;
+/** Maximum number of products per row in grid layout */
+export declare const MAX_PRODUCTS_PER_ROW = 4;
+/** Minimum number of products per row in grid layout */
+export declare const MIN_PRODUCTS_PER_ROW = 1;
+/** Default number of products per row on mobile */
+export declare const DEFAULT_MOBILE_CARDS_IN_ROW = 1;
+/** Maximum products per row on mobile */
+export declare const MAX_MOBILE_PRODUCTS_PER_ROW = 2;
+/** Minimum products per row on mobile */
+export declare const MIN_MOBILE_PRODUCTS_PER_ROW = 1;
+/** Default column spacing between product cards (5px on each side = 10px total) */
+export declare const DEFAULT_COLUMN_SPACING = 10;
+/** Default row spacing between product rows */
+export declare const DEFAULT_ROW_SPACING = 20;
+/** Minimum spacing value */
+export declare const MIN_SPACING = 0;
+/** Maximum spacing value */
+export declare const MAX_SPACING = 50;
+/** Spacing adjustment step */
+export declare const SPACING_STEP = 5;

package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CSS selectors and data attributes used across the Recommendation extension
+ */
+/**
+ * Container selector for the product container element
+ * Used across controls to target elements within the recommendation block
+ */
+export declare const CONTAINER_SELECTOR = ".ins-recommendation-product-container";
+/** Desktop product container selector */
+export declare const DESKTOP_CONTAINER_SELECTOR = ".ins-recommendation-desktop-container";
+/** Mobile product container selector */
+export declare const MOBILE_CONTAINER_SELECTOR = ".ins-recommendation-mobile-container";
+/**
+ * Currency HTML attributes set on the block element
+ * These are read by the HTML compiler at runtime to format prices
+ */
+export declare const CURRENCY_ATTR: {
+    readonly CURRENCY: "currency";
+    readonly SYMBOL: "currency-symbol";
+    readonly ALIGNMENT: "currency-alignment";
+    readonly THOUSAND_SEPARATOR: "currency-thousand-separator";
+    readonly DECIMAL_SEPARATOR: "currency-decimal-separator";
+    readonly DECIMAL_COUNT: "currency-decimal-count";
+};
+/**
+ * Attribute type constants used in templates
+ * These are used as keys in ElementRenderer and composition arrays
+ */
+export declare const ATTR_PRODUCT_IMAGE = "productImage";
+export declare const ATTR_PRODUCT_NAME = "productName";
+export declare const ATTR_PRODUCT_PRICE = "productPrice";
+export declare const ATTR_PRODUCT_OLD_PRICE = "productOldPrice";
+export declare const ATTR_PRODUCT_OMNIBUS_PRICE = "productOmnibusPrice";
+export declare const ATTR_PRODUCT_OMNIBUS_DISCOUNT = "productOmnibusDiscount";
+export declare const ATTR_PRODUCT_BUTTON = "productButton";

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

@@ -0,0 +1,143 @@
+/**
+ * Button Element Controls
+ *
+ * Controls for styling the CTA button element in recommendation cards.
+ */
+/**
+ * Grouped Button Controls
+ * Use this object for cleaner imports in extension.ts
+ */
+export declare const ButtonControls: {
+    readonly align: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly border: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ButtonBorderControlLabels | undefined;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly borderRadius: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ButtonBorderRadiusControlLabels | undefined;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly color: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly fontFamily: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly margins: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly paddings: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly text: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly textSize: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly textStyleAndFontColor: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly fitToContent: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+};

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

@@ -0,0 +1,31 @@
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const CARD_BACKGROUND_COLOR_CONTROL_ID = "recommendation-card-background-color-control";
+/**
+ * Control for managing recommendation card background color
+ * This control is displayed in the Styles tab
+ */
+export declare class CardBackgroundColorControl extends CommonControl {
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    /**
+     * Gets the appropriate selector based on layout
+     * Grid: .product-card-segment (inner table per product cell)
+     * List: .product-card-wrapper (table per product row)
+     */
+    _getCardSelector(): string;
+    /**
+     * Reads the current background color from the first product card element
+     * @returns The background color value or 'transparent' if not found
+     */
+    _getCurrentCardBackgroundColor(): string;
+    /**
+     * Handles card background color changes
+     * Applies the color to all product card elements based on layout
+     */
+    _onCardBackgroundColorChange(color: string): void;
+    _listenToFormUpdates(): void;
+}

package/dist/src/extensions/Blocks/Recommendation/{cardCompositionControl.d.ts → controls/cardComposition/index.d.ts}

@@ -1,5 +1,5 @@
 import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../common-control';
+import { CommonControl } from '../../../common-control';
 export declare const COMPOSITION_CONTROL_BLOCK_ID = "ui-elements-recommendation-card-composition";
 export interface CardCompositionItem {
     key: string;
@@ -7,6 +7,8 @@ export interface CardCompositionItem {
     visible: boolean;
 }
 export declare class RecommendationCardCompositionControl extends CommonControl {
+    private store;
+    private unsubscribeOrientation;
     getId(): string;
     getTemplate(): string;
     onRender(): void;
@@ -57,10 +59,12 @@ export declare class RecommendationCardCompositionControl extends CommonControl
     /**
      * Apply the reordered composition to the block's HTML structure
      * Updates the data-card-composition attribute and reorders product attributes
+     * Note: Reordering is only applied for grid layout
      */
     private _applyCompositionToBlock;
     /**
-     * Reorders attribute rows within each product row based on composition order
+     * Reorders attribute rows within each product card based on composition order
+     * Targets the tbody inside each product-attribute-cell to preserve card structure
      */
     private _reorderProductAttributes;
     /**
@@ -69,7 +73,23 @@ export declare class RecommendationCardCompositionControl extends CommonControl
     private _buildCompositionHtml;
     /**
      * Apply visibility changes to the block's HTML structure
-     * Updates display style and data-visibility attribute for all matching rows
+     * Updates display style and data-visibility attribute for all matching elements
+     * - <tr> elements: use display: none / table-row
+     * - <td> elements: use display: none / table-cell
      */
     private _applyVisibilityToBlock;
+    /**
+     * Gets the current layout orientation from store or DOM
+     */
+    private _getCurrentLayout;
+    /**
+     * Updates orderable state based on layout orientation
+     * Adds/removes disabled class to hide drag icons for list layout
+     */
+    private _updateOrderableState;
+    /**
+     * Subscribe to store orientation changes
+     * Updates orderable state when layout changes via the layout control
+     */
+    private _subscribeToOrientationChanges;
 }