@useinsider/guido 2.1.0-beta.e13d291 → 2.1.0-beta.e2153c2

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = { stripo: { version: "2.52.0" } }, s = {
+const o = { stripo: { version: "2.54.0" } }, s = {
   guido: o
 };
 export {

package/dist/services/recommendationApi.js

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

package/dist/services/stripoApi.js

@@ -1,44 +1,47 @@
-import { useHttp as m } from "../composables/useHttp.js";
-import { useToaster as i } from "../composables/useToaster.js";
-import { MAX_DEFAULT_TEMPLATE_ID as p } from "../enums/defaults.js";
-const y = () => {
-  const { get: r } = m(), { handleError: o } = i();
+import { useHttp as l } from "../composables/useHttp.js";
+import { useToaster as u } from "../composables/useToaster.js";
+import { MAX_DEFAULT_TEMPLATE_ID as d } from "../enums/defaults.js";
+import f from "../static/templates/empty/index.html.js";
+import g from "../static/templates/empty/style.css.js";
+const D = () => {
+  const { get: o } = l(), { handleError: a } = u();
   return {
     getToken: async () => {
       try {
-        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await r(`/stripo/get-user-token?test=${t}`);
+        const t = Number(localStorage.getItem("ins-guido-test-instance")), { data: e } = await o(`/stripo/get-user-token?test=${t}`);
         return e.body.token;
       } catch (t) {
-        return o(t, "Failed to fetch token"), "";
+        return a(t, "Failed to fetch token"), "";
       }
     },
     getCustomFonts: async () => {
       try {
-        const { data: t = [] } = await r("/stripo/get-partner-custom-fonts");
+        const { data: t = [] } = await o("/stripo/get-partner-custom-fonts");
         return t.map((e) => ({
           ...e,
           active: !0
         }));
       } catch (t) {
-        return o(t, "Failed to fetch custom fonts"), [];
+        return a(t, "Failed to fetch custom fonts"), [];
       }
     },
     getDefaultTemplate: async () => {
       const t = {
-        html: "",
-        css: ""
+        html: f,
+        css: g
       };
       try {
-        const c = new URLSearchParams(window.location.search).get("default-template"), s = c ? parseInt(c) : 0, l = s >= 1 && s <= p ? s : 0, { data: n } = await r(
-          `/stripo/default-template/${l}`
-        ), a = typeof n == "string" ? JSON.parse(n) : n;
-        return !a || typeof a != "object" || !("html" in a) || !("css" in a) ? t : a;
+        const e = new URLSearchParams(window.location.search), c = e.get("default-template"), p = e.get("master"), s = c ? parseInt(c) : 0, m = s >= 1 && s <= d ? s : 0;
+        if (!m && !p)
+          return t;
+        const i = `/stripo/default-template/${m}`, { data: n } = await o(i), r = typeof n == "string" ? JSON.parse(n) : n;
+        return !r || typeof r != "object" || !("html" in r) || !("css" in r) ? t : r;
       } catch (e) {
-        return o(e, "Failed to fetch default template"), t;
+        return a(e, "Failed to fetch default template"), t;
       }
     }
   };
 };
 export {
-  y as useStripoApi
+  D as useStripoApi
 };

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/@types/config/schemas.d.ts

@@ -129,6 +129,10 @@ export declare const EditorSchema: v.ObjectSchema<{
         readonly senderName: "";
         readonly subject: "";
     }>;
+    /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
+    readonly savedModulesFolderName: v.OptionalSchema<v.StringSchema<undefined>, "savedModules">;
+    /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
+    readonly defaultModulesFolderName: v.OptionalSchema<v.StringSchema<undefined>, "defaultModules">;
 }, undefined>;
 /**
  * UI configuration - visual elements and layout
@@ -441,6 +445,10 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
             readonly senderName: "";
             readonly subject: "";
         }>;
+        /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
+        readonly savedModulesFolderName: v.OptionalSchema<v.StringSchema<undefined>, "savedModules">;
+        /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
+        readonly defaultModulesFolderName: v.OptionalSchema<v.StringSchema<undefined>, "defaultModules">;
     }, undefined>, {}>;
     /** UI configuration */
     readonly ui: v.OptionalSchema<v.ObjectSchema<{

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

@@ -41,6 +41,8 @@ export declare const useConfig: () => {
                 senderName: string;
                 subject: string;
             };
+            savedModulesFolderName: string;
+            defaultModulesFolderName: string;
         };
         ui: {
             showHeader: boolean;
@@ -130,6 +132,8 @@ export declare const useConfig: () => {
             senderName: string;
             subject: string;
         };
+        savedModulesFolderName: string;
+        defaultModulesFolderName: string;
     } | null>;
     ui: import("vue").ComputedRef<{
         showHeader: boolean;

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/config/i18n/en/index.d.ts

@@ -0,0 +1 @@
+export declare const en: Record<string, string>;

package/dist/src/config/i18n/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Stripo Editor Translation Overrides
+ *
+ * Custom translations for Stripo editor UI elements.
+ * Each language has its own folder with categorized JSON files.
+ *
+ * Reference: https://email-static.useinsider.com/guido/{version}/assets/i18n/en.json
+ * @module config/i18n
+ */
+/**
+ * Combined locale patch for Stripo editor initialization.
+ * Maps language codes to their translation overrides.
+ */
+export declare const localePatch: {
+    en: Record<string, string>;
+};

package/dist/src/enums/defaults.d.ts

@@ -9,3 +9,7 @@ export declare const TemplateTypes: {
 export declare const EditorType: number;
 export declare const MAX_DEFAULT_TEMPLATE_ID = 13;
 export declare const ProductIds: Record<string, number>;
+export declare const ModuleFolderDefaults: {
+    readonly SAVED_MODULES: "savedModules";
+    readonly DEFAULT_MODULES: "defaultModules";
+};

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

@@ -23,5 +23,4 @@ export declare class ItemsBlock extends Block {
     getTemplate(): string;
     allowInnerBlocksDND(): boolean;
     onCreated(node: ImmutableHtmlNode): void;
-    onSelect(node: ImmutableHtmlNode): void;
 }

package/dist/src/extensions/Blocks/Items/controls/button/link.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.BUTTON_LINK;
 export declare class ButtonLinkControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;

package/dist/src/extensions/Blocks/Items/controls/cardComposition.d.ts

@@ -2,7 +2,6 @@ import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { CommonControl } from '../../common-control';
 export declare const COMPOSITION_CONTROL_BLOCK_ID = "ui-elements-items-card-composition-block";
 export declare class ItemsBlockCardCompositionControl extends CommonControl {
-    private store;
     private visibilityState;
     getId(): string;
     getTemplate(): string;
@@ -19,10 +18,11 @@ export declare class ItemsBlockCardCompositionControl extends CommonControl {
      * If itemsType is not BROWSED_ITEMS, show quantity
      * If itemsType is BROWSED_ITEMS, hide quantity
      * and mark it as '0'
+     * @param syncOnly - If true, only sync local state and UI without modifying the document
      */
-    _handleBrowsedItemsQuantity(): void;
-    _applyVisibilityStyles(): void;
-    _updateVisibilityAttribute(elementName: string, isVisible: boolean): void;
+    _handleBrowsedItemsQuantity(syncOnly?: boolean): void;
+    _applyVisibilityStyles(modifier?: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _updateVisibilityAttribute(elementName: string, isVisible: boolean, modifier?: ReturnType<typeof this.api.getDocumentModifier>): void;
     _listenToFormUpdates(): void;
     _onProductImageChange(value: boolean): void;
     _onProductNameChange(value: boolean): void;
@@ -37,6 +37,6 @@ export declare class ItemsBlockCardCompositionControl extends CommonControl {
      *   - When price is hidden, original price cell expands to 100%
      *   - When both are visible, they share 50% each
      */
-    _updatePriceCellWidthsForVerticalLayout(): void;
+    _updatePriceCellWidthsForVerticalLayout(modifier?: ReturnType<typeof this.api.getDocumentModifier>): void;
     _onProductButtonChange(value: boolean): void;
 }

package/dist/src/extensions/Blocks/Items/controls/image/link.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.IMAGE_LINK;
 export declare class ImageLinkControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;

package/dist/src/extensions/Blocks/Items/controls/name/trimming.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.NAME_TRIMMING;
 export declare class NameTrimmingControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;

package/dist/src/extensions/Blocks/Items/controls/price/currencyLocation.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_CURRENCY_LOCATION;
 export declare class PriceCurrencyLocationControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;

package/dist/src/extensions/Blocks/Items/controls/price/currencySymbol.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_CURRENCY_SYMBOL;
 export declare class PriceCurrencySymbolControl extends CommonControl {
-    private store;
     private originalPriceContents;
     getId(): string;
     getTemplate(): string;

package/dist/src/extensions/Blocks/Items/controls/price/formattedPrice.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_FORMATTED_PRICE;
 export declare class PriceFormattedPriceControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;

package/dist/src/extensions/Blocks/Items/controls/price/hideDiscount.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_HIDE_DISCOUNT;
 export declare class PriceHideDiscountControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;

package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts

@@ -3,7 +3,6 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_ORIENTATION;
 export declare class PriceOrientationControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;

package/dist/src/extensions/Blocks/Items/controls/price/singlePrice.d.ts

@@ -3,15 +3,10 @@ import { CommonControl } from '../../../common-control';
 import { ItemsBlockControlId } from '../../enums/controlEnums';
 export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_SINGLE_PRICE;
 export declare class PriceSinglePriceControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    /**
-     * Syncs single price state from nodeConfig.
-     */
-    private _syncSinglePriceFromNodeConfig;
     _onSinglePriceChange(value: boolean): void;
     private _updatePriceBlock;
     _getSinglePrice(): string;

package/dist/src/extensions/Blocks/Items/controls/settingsControl.d.ts

@@ -3,12 +3,10 @@ import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { CommonControl } from '../../common-control';
 export declare const CONTROL_BLOCK_ID = "ui-elements-items-block";
 export declare class ItemsBlockControl extends CommonControl {
-    private store;
     getId(): string;
     getTemplate(): string;
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    onDestroy(): void;
     _getItemsType(): string;
     _getOrientation(): string;
     _getItemInCart(): string;
@@ -18,7 +16,7 @@ export declare class ItemsBlockControl extends CommonControl {
     _initializeSelectItems(): void;
     _listenToFormUpdates(): void;
     _renderTemplate(): void;
-    _getTemplateData(): {
+    _getTemplateData(itemsTypeOverride?: ProductType, itemIdOverride?: string): {
         imageSrc: string;
         name: string;
         price: string;
@@ -26,15 +24,15 @@ export declare class ItemsBlockControl extends CommonControl {
         quantity: string;
         button: string;
     };
-    _updateImageSrc(imageSrc: string): void;
-    _updateName(name: string): void;
-    _updatePrice(price: string): void;
-    _updateOriginalPrice(originalPrice: string): void;
-    _updateQuantity(quantity: string): void;
-    _reOrderTemplate(): void;
-    _updateDataTypeAttributes(itemsType: ProductType): void;
-    _updateDataNumberAttributes(itemId: string): void;
-    _reFillTemplate(): void;
+    _updateImageSrc(imageSrc: string, modifier: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _updateName(name: string, modifier: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _updatePrice(price: string, modifier: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _updateOriginalPrice(originalPrice: string, modifier: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _updateQuantity(quantity: string, itemsTypeOverride: ProductType | undefined, modifier: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _reOrderTemplate(modifier?: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _updateDataTypeAttributes(itemsType: ProductType, modifier: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _updateDataNumberAttributes(itemId: string, modifier: ReturnType<typeof this.api.getDocumentModifier>): void;
+    _reFillTemplate(itemsType?: ProductType): void;
     _recalculateTrimming(): void;
     private _getParagraphFromBlock;
     private _escapeRegex;

package/dist/src/extensions/Blocks/Items/utils/nodeConfigUtils.d.ts

@@ -66,8 +66,9 @@ export declare function getItemsBlockConfig(currentNode: ImmutableHtmlNode | und
  * @param currentNode - The current node from the control
  * @param api - The API object (ControlApi or BlockApi)
  * @param config - The configuration to set (partial update supported)
+ * @param modifier - Optional document modifier for batching updates
  */
-export declare function setItemsBlockConfig(currentNode: ImmutableHtmlNode | undefined, api: ControlApi | BlockApi, config: Partial<ItemsBlockConfig>): void;
+export declare function setItemsBlockConfig(currentNode: ImmutableHtmlNode | undefined, api: ControlApi | BlockApi, config: Partial<ItemsBlockConfig>, modifier?: ReturnType<typeof api.getDocumentModifier>): void;
 /**
  * Gets the block instance ID from the node config.
  * @param currentNode - The current node from the control

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

@@ -3,43 +3,76 @@
  *
  * 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
      *
-     * Initializes the block with default configuration stored via node config.
-     * This ensures the configuration persists with 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.
-     * Also handles config version upgrades for future migrations.
+     * 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;
     /**
-     * Migrate configuration from legacy format
+     * Called when a block is deleted from the template
      *
-     * Legacy templates may store configuration in:
-     * - data-attributes (data-layout, data-card-composition, etc.)
-     * - Pinia store (lost on reload - this is what we're fixing)
-     *
-     * This method reads what we can from the DOM and initializes proper node config.
-     * @param node - The block node to migrate
+     * 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/index.d.ts

@@ -8,6 +8,6 @@
  */
 export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
-export { 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, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
+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

@@ -23,6 +23,12 @@ export declare const MIN_PRODUCT_COUNT = 1;
 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 */

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

@@ -6,6 +6,10 @@
  * 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

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

@@ -29,7 +29,14 @@ export declare class CurrencyControl extends CommonControl {
     onDestroy(): void;
     _setFormValues(): void;
     _initializeSelectItems(): void;
-    _updateCurrency(updates: Partial<CurrencyConfig>): 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;