@useinsider/guido 2.1.0-beta.febc521 → 2.1.0-beta.ff1bc98

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

@@ -0,0 +1,25 @@
+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;
+    /**
+     * Reads the current background color from the first product card wrapper
+     * @returns The background color value or 'transparent' if not found
+     */
+    _getCurrentCardBackgroundColor(): string;
+    /**
+     * Handles card background color changes
+     * Applies the color to all product card wrapper elements
+     */
+    _onCardBackgroundColorChange(color: string): void;
+    _listenToFormUpdates(): void;
+}

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

@@ -0,0 +1,95 @@
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const COMPOSITION_CONTROL_BLOCK_ID = "ui-elements-recommendation-card-composition";
+export interface CardCompositionItem {
+    key: string;
+    label: string;
+    visible: boolean;
+}
+export declare class RecommendationCardCompositionControl extends CommonControl {
+    private store;
+    private unsubscribeOrientation;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    /**
+     * Creates the HTML content for an orderable item with label and toggle
+     */
+    private _createItemContent;
+    /**
+     * Registers event listeners for composition and visibility changes
+     */
+    private _registerValueChangeListeners;
+    /**
+     * Initializes composition order and visibility state from the current node
+     */
+    private _initializeComposition;
+    /**
+     * Reads composition order from node's data-card-composition attribute
+     * Falls back to default order if attribute is not present
+     */
+    private _readCompositionFromNode;
+    /**
+     * Builds visibility values object from the visibility map
+     */
+    private _buildVisibilityValues;
+    /**
+     * Read visibility state from individual row elements' data-visibility attributes
+     * This ensures toggles reflect the actual DOM state
+     */
+    private _readVisibilityFromRows;
+    /**
+     * Returns default visibility values for all items
+     */
+    private _getDefaultVisibilities;
+    /**
+     * Extracts visibility values from DOM nodes
+     */
+    private _extractVisibilityFromRows;
+    /**
+     * Parses visibility value from string to boolean
+     * Accepts "1", "true" as true, everything else as false
+     */
+    private _parseVisibilityValue;
+    /**
+     * Merges extracted visibilities with default values for missing keys
+     */
+    private _mergeWithDefaults;
+    /**
+     * 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 card based on composition order
+     * Targets the tbody inside each product-attribute-cell to preserve card structure
+     */
+    private _reorderProductAttributes;
+    /**
+     * Builds HTML string with attributes ordered according to composition
+     */
+    private _buildCompositionHtml;
+    /**
+     * Apply visibility changes to the block's HTML structure
+     * 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;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Image Element Controls
+ *
+ * Controls for styling the product image element in recommendation cards.
+ */
+/**
+ * Grouped Image Controls
+ * Use this object for cleaner imports in extension.ts
+ */
+export declare const ImageControls: {
+    readonly size: {
+        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;
+        };
+    };
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Recommendation Block Controls
+ *
+ * This module exports all controls for the Recommendation extension.
+ * Controls are organized by element type for better discoverability.
+ * @example
+ * // Grouped imports (recommended)
+ * import { NameControls, ButtonControls } from './controls';
+ * // Or individual imports
+ * import { NameAlignControl, ButtonColorControl } from './controls';
+ */
+export { RecommendationBlockControl, CONTROL_BLOCK_ID, AlgorithmControl, ALGORITHM_CONTROL_ID, LocaleControl, LOCALE_CONTROL_ID, CurrencyControl, CURRENCY_CONTROL_ID, ProductLayoutControl, PRODUCT_LAYOUT_CONTROL_ID, FiltersControl, FILTERS_CONTROL_ID, ShuffleControl, SHUFFLE_CONTROL_ID, } from './main';
+export * from './main/utils';
+export { NameControls } from './name';
+export { PriceControls } from './price';
+export { OldPriceControls } from './oldPrice';
+export { OmnibusPriceControls } from './omnibusPrice';
+export { OmnibusDiscountControls } from './omnibusDiscount';
+export { ButtonControls } from './button';
+export { ImageControls } from './image';
+export { SpacingControl, SPACING_CONTROL_ID } from './spacing';
+export { CardBackgroundColorControl, CARD_BACKGROUND_COLOR_CONTROL_ID } from './cardBackground';
+export { LayoutControl, LAYOUT_CONTROL_ID } from './layout';
+export { RecommendationCardCompositionControl, COMPOSITION_CONTROL_BLOCK_ID } from './cardComposition';

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

@@ -0,0 +1,37 @@
+/**
+ * Layout Control
+ *
+ * Manages recommendation block layout orientation
+ * Allows switching between grid and list layouts
+ *
+ * Configuration is stored via node config (persists with template).
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+import { type Orientation } from '../../templates';
+export declare const LAYOUT_CONTROL_ID = "recommendation-layout-control";
+/**
+ * Control for managing recommendation block layout orientation
+ * Allows switching between grid and list layouts
+ */
+export declare class LayoutControl extends CommonControl {
+    private store;
+    private isChangingLayout;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    /**
+     * Handles layout change
+     * Updates node config, data attribute and regenerates product rows
+     */
+    _onLayoutChange(layout: Orientation): void;
+    /**
+     * 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)
+     */
+    _regenerateProductRows(layout: Orientation): void;
+    _listenToFormUpdates(): void;
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Algorithm Selection Control
+ *
+ * Handles recommendation algorithm selection and product IDs for manual merchandising:
+ * - Algorithm/strategy selection
+ * - Product IDs input (visible only for manual merchandising)
+ *
+ * Configuration is stored via node config (persists with template).
+ * Algorithm options are fetched from API and cached in Pinia store.
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const ALGORITHM_CONTROL_ID = "recommendation-algorithm-control";
+/**
+ * Control for selecting recommendation algorithm and manual product IDs
+ */
+export declare class AlgorithmControl extends CommonControl {
+    private store;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    _initializeSelectItems(): void;
+    _setProductIdsVisibility(strategy?: string): void;
+    _onAlgorithmChange(value: string): void;
+    _onProductIdsChange(value: string): void;
+    _listenToFormUpdates(): void;
+}

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

@@ -0,0 +1,52 @@
+/**
+ * Currency Settings Control
+ *
+ * Handles all currency-related configuration for recommendation products:
+ * - Currency type
+ * - Currency location (before/after)
+ * - Currency symbol
+ * - Thousand separator
+ * - Decimal separator
+ * - Decimal count
+ *
+ * Configuration is stored via node config (persists with template).
+ * Currency options are fetched from API and cached in Pinia store.
+ */
+import type { CurrencyConfig } from '../../types/nodeConfig';
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const CURRENCY_CONTROL_ID = "recommendation-currency-control";
+/**
+ * Control for managing currency display settings in recommendation blocks
+ */
+export declare class CurrencyControl extends CommonControl {
+    private store;
+    private storeUnsubscription;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    _setFormValues(): void;
+    _initializeSelectItems(): void;
+    /**
+     * Applies currency updates to node config, HTML attributes, Pinia store, and DOM.
+     * @param updates - Partial currency config to merge
+     * @param triggerRefetch - Whether to trigger a product API refetch.
+     *   true for currency code changes (different prices from API),
+     *   false for display-only changes (symbol, separators, alignment, decimal count).
+     */
+    _updateCurrency(updates: Partial<CurrencyConfig>, triggerRefetch?: boolean): void;
+    _onCurrencyChange(value: string): void;
+    _onCurrencyLocationChange(value: string): void;
+    _onCurrencySymbolChange(value: string): void;
+    _onThousandSeparatorChange(value: string): void;
+    _onDecimalSeparatorChange(value: string): void;
+    _onDecimalCountChange(value: string): void;
+    _listenToFormUpdates(): void;
+    /**
+     * Subscribe to store changes to update currency selects when API data arrives
+     * This handles the case where the control renders before currency list is loaded
+     */
+    _subscribeToStoreChanges(): void;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Filters Control
+ *
+ * Handles the filter selection UI for recommendation products
+ * Opens filter selection drawer when button is clicked
+ */
+import { CommonControl } from '../../../common-control';
+export declare const FILTERS_CONTROL_ID = "recommendation-filters-control";
+/**
+ * Control for managing recommendation product filters
+ */
+export declare class FiltersControl extends CommonControl {
+    private store;
+    private addFilterListener;
+    private addFilterButton;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onDestroy(): void;
+    _onFilterSelectClick(): void;
+    _setupButtonListener(): void;
+}

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

@@ -0,0 +1,79 @@
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+import { AlgorithmControl, ALGORITHM_CONTROL_ID } from './algorithm';
+import { CurrencyControl, CURRENCY_CONTROL_ID } from './currency';
+import { FiltersControl, FILTERS_CONTROL_ID } from './filters';
+import { LocaleControl, LOCALE_CONTROL_ID } from './locale';
+import { ProductLayoutControl, PRODUCT_LAYOUT_CONTROL_ID } from './productLayout';
+import { ShuffleControl, SHUFFLE_CONTROL_ID } from './shuffle';
+export declare const CONTROL_BLOCK_ID = "ui-elements-recommendation-block";
+export { AlgorithmControl, ALGORITHM_CONTROL_ID, LocaleControl, LOCALE_CONTROL_ID, CurrencyControl, CURRENCY_CONTROL_ID, ProductLayoutControl, PRODUCT_LAYOUT_CONTROL_ID, FiltersControl, FILTERS_CONTROL_ID, ShuffleControl, SHUFFLE_CONTROL_ID, };
+export * from './utils';
+/**
+ * Main recommendation block control that composes all sub-controls
+ * Registered in the Settings tab of the block's settings panel
+ */
+export declare class RecommendationBlockControl extends CommonControl {
+    private store;
+    private storeUnsubscription;
+    private algorithmControl;
+    private localeControl;
+    private currencyControl;
+    private productLayoutControl;
+    private filtersControl;
+    private shuffleControl;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): Promise<void>;
+    /**
+     * Immediately regenerate products with styles (no debounce)
+     * Used for initial load after fetch completes
+     */
+    private _regenerateWithProducts;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    /**
+     * Initialize all sub-controls with the shared API context
+     * Each sub-control manages its own form values and event listeners
+     */
+    _initializeSubControls(): void;
+    /**
+     * Syncs persisted node config into the Pinia store's block state.
+     *
+     * setCurrentBlock() creates a default entry (USD, en_US, mostPopular).
+     * For saved templates, the real config lives in the node (e.g., TRY, tr_TR).
+     * This method reads it and patches the store so fetchRecommendationProducts()
+     * uses the correct values.
+     *
+     * Uses triggerRefetch: false because the fetch hasn't happened yet —
+     * values are being prepared for the upcoming initial fetch.
+     */
+    private _syncNodeConfigToStore;
+    /**
+     * Fetches initial data for a block (filters, algorithms, products).
+     * Shared by onRender() and onTemplateNodeUpdated() to avoid duplication.
+     * Marks the block as initialized to prevent redundant fetches on re-selection.
+     */
+    private _fetchBlockData;
+    /**
+     * Reads the recommendation-id attribute from the block element within the node
+     */
+    private _getRecommendationIdFromNode;
+    /**
+     * Debounced product fetch to prevent rapid API calls during config changes
+     */
+    private _debouncedFetchProducts;
+    /**
+     * Debounced regeneration when products arrive from API
+     * Tries in-place update first to preserve styles, falls back to full regeneration
+     */
+    private _debouncedRegenerateWithProducts;
+    /**
+     * Listen to store changes that require product refresh or regeneration.
+     *
+     * Uses configVersion counter (incremented only by patchCurrentBlockConfig)
+     * to distinguish user-initiated config changes from internal mutations
+     * (e.g., fetchRecommendationCreateData setting preferred currency).
+     */
+    _listenStateUpdates(): void;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Locale Selection Control
+ *
+ * Handles locale/language selection for recommendation products.
+ * Configuration is stored via node config (persists with template).
+ * Language options are fetched from API and cached in Pinia store.
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const LOCALE_CONTROL_ID = "recommendation-locale-control";
+/**
+ * Control for selecting recommendation content locale/language
+ */
+export declare class LocaleControl extends CommonControl {
+    private store;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    _initializeSelectItems(): void;
+    _onLocaleChange(value: string): void;
+    _listenToFormUpdates(): void;
+}