@useinsider/guido 2.1.0-beta.42f5dfa → 2.1.0-beta.486ee9c

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/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/components/organisms/extensions/recommendation/FilterItem.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     filter: Filter;
     index: number;
     hasLogicAdapter?: boolean;
+    submitted: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
     "delete-filter": (filter: Filter) => void;

package/dist/src/components/organisms/extensions/recommendation/Filters.vue.d.ts

@@ -1,2 +1,18 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+type __VLS_Props = {
+    submitted: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {
+    switchToGroup: (groupId: number) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    "reset-validation": () => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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/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/Recommendation/constants/defaultConfig.d.ts

@@ -41,6 +41,12 @@ export declare const DEFAULT_VISIBILITY: Record<string, boolean>;
  * All other code should import and use this constant.
  */
 export declare const DEFAULT_NODE_CONFIG: RecommendationNodeConfig;
+/**
+ * Algorithm IDs to exclude from the recommendation algorithm dropdown.
+ * These algorithms will not be shown as options regardless of API response.
+ * View Together and Purchase Together algorithms are disabled because these require product id.
+ */
+export declare const EXCLUDED_ALGORITHM_IDS: number[];
 /**
  * Current configuration version
  * Increment this when making breaking changes to the schema

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 { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, } from './defaultConfig';
+export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_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, DEFAULT_MOBILE_COLUMN_SPACING, DEFAULT_MOBILE_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
+export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';

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

@@ -23,10 +23,20 @@ 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 */
-export declare const DEFAULT_ROW_SPACING = 20;
+/** Default row spacing between product rows (matches spacer height in template) */
+export declare const DEFAULT_ROW_SPACING = 10;
+/** Default mobile column spacing between product cards */
+export declare const DEFAULT_MOBILE_COLUMN_SPACING = 10;
+/** Default mobile row spacing between product rows (matches spacer height in template) */
+export declare const DEFAULT_MOBILE_ROW_SPACING = 10;
 /** Minimum spacing value */
 export declare const MIN_SPACING = 0;
 /** Maximum spacing value */

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

@@ -1,11 +1,22 @@
 /**
  * CSS selectors and data attributes used across the Recommendation extension
  */
+/**
+ * Block root selector — common ancestor of both desktop and mobile containers.
+ * Used across attribute controls so edits apply to BOTH containers simultaneously.
+ */
+export declare const BLOCK_ROOT_SELECTOR = ".recommendation-block-v2";
 /**
  * Container selector for the product container element
- * Used across controls to target elements within the recommendation block
+ * Used in product regeneration logic where container-specific scoping is needed
  */
 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";
+/** Mobile row wrapper — the <tr> that wraps the mobile container <td>/<table> */
+export declare const MOBILE_ROW_SELECTOR = ".ins-recommendation-mobile-row";
 /**
  * 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/index.d.ts

@@ -16,7 +16,6 @@ export * from './utils';
 export declare class RecommendationBlockControl extends CommonControl {
     private store;
     private storeUnsubscription;
-    private initializedBlocks;
     private algorithmControl;
     private localeControl;
     private currencyControl;
@@ -26,24 +25,46 @@ export declare class RecommendationBlockControl extends CommonControl {
     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;
+    private _initializeSubControls;
+    /**
+     * 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).
+     * Fetches initial data for a block in three phases:
+     * 1. Shared reference data (algorithms, currencies, filters) — parallel
+     * 2. Smart defaults for new blocks (currency, algorithm) — sequential
+     * 3. Product data with correct defaults — sequential
+     *
      * Shared by onRender() and onTemplateNodeUpdated() to avoid duplication.
      * Marks the block as initialized to prevent redundant fetches on re-selection.
      */
     private _fetchBlockData;
+    /**
+     * Applies smart defaults for newly dropped blocks.
+     *
+     * For new blocks (config still matches hardcoded defaults), validates that
+     * the default currency and algorithm are available from the API response.
+     * If not, falls back to the first available option.
+     *
+     * Saved templates with user-customized config are left unchanged because
+     * their values won't match the hardcoded defaults.
+     */
+    private _applySmartDefaults;
     /**
      * Reads the recommendation-id attribute from the block element within the node
      */
@@ -53,8 +74,15 @@ export declare class RecommendationBlockControl extends CommonControl {
      */
     private _debouncedFetchProducts;
     /**
-     * Debounced regeneration when products arrive from API
-     * Tries in-place update first to preserve styles, falls back to full regeneration
+     * Debounced content update when products arrive from API.
+     *
+     * Tries in-place update first (preserves user-applied styles) — this succeeds
+     * when the product count matches the DOM (algorithm/locale/currency changes).
+     *
+     * Falls back to full regeneration when product count differs from DOM — this
+     * happens after "Number of Products" changes where the DOM still has the old
+     * count. The store pads products to the configured size, so in-place only
+     * fails when the size actually changed.
      */
     private _debouncedRegenerateWithProducts;
     /**
@@ -63,6 +91,17 @@ export declare class RecommendationBlockControl extends CommonControl {
      * Uses configVersion counter (incremented only by patchCurrentBlockConfig)
      * to distinguish user-initiated config changes from internal mutations
      * (e.g., fetchRecommendationCreateData setting preferred currency).
+     *
+     * Tracks currentRecommendationId to detect block switches. When the user
+     * selects a different recommendation block, the proxy getters (e.g.,
+     * recommendationProducts) return the new block's data — a different array
+     * reference that would be falsely detected as "new products arrived".
+     * We skip that tick and update tracking references instead.
+     */
+    private _listenStateUpdates;
+    /**
+     * Persists the current filter state from Pinia store to the Stripo node config.
+     * This ensures filters survive template save/reload cycles.
      */
-    _listenStateUpdates(): void;
+    private _persistFiltersToNodeConfig;
 }

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

@@ -3,9 +3,13 @@
  *
  * Handles product display configuration:
  * - Number of products to show
- * - Products per row (hidden for list layout)
+ * - Products per row on desktop (hidden for list layout)
+ * - Products per row on mobile (hidden for list layout)
  * - Triggers product row regeneration on changes
  *
+ * Desktop/mobile counters swap visibility based on editor mode
+ * (detected via Stripo's EditorStatePropertyType.previewDeviceMode).
+ *
  * Configuration is stored via node config (persists with template).
  */
 import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
@@ -13,6 +17,7 @@ import { CommonControl } from '../../../common-control';
 export declare const PRODUCT_LAYOUT_CONTROL_ID = "recommendation-product-layout-control";
 /**
  * Control for configuring product count and layout density
+ * Includes both desktop and mobile "products per row" counters
  */
 export declare class ProductLayoutControl extends CommonControl {
     private store;
@@ -24,13 +29,26 @@ export declare class ProductLayoutControl extends CommonControl {
     onDestroy(): void;
     _setFormValues(): void;
     /**
-     * Updates "Products in One Row" visibility based on layout orientation
-     * This control is hidden for list layout (products always take full width)
-     * Reads from node config first, falls back to DOM
+     * Checks if the editor is currently in mobile preview mode
+     * using Stripo's EditorStatePropertyType API.
+     */
+    _isMobileMode(): boolean;
+    /**
+     * Updates counter visibility based on layout orientation and editor mode.
+     * - List layout: hide both counters (products always full-width)
+     * - Grid + desktop mode: show desktop counter, hide mobile counter
+     * - Grid + mobile mode: show mobile counter, hide desktop counter
      */
     _updateProductsInRowVisibility(): void;
+    /**
+     * Subscribes to editor preview mode changes via Stripo API.
+     * When the user switches between desktop/mobile preview, toggles
+     * which "Products in One Row" counter is visible.
+     */
+    _subscribeToEditorModeChanges(): void;
     _onProductCountChange(value: string): void;
     _onProductsInRowChange(value: number): void;
+    _onMobileCardsInRowChange(value: number): void;
     _regenerateProductRows(): void;
     _debouncedRegenerateProductRows: import("@vueuse/shared").PromisifyFn<() => void>;
     _listenToFormUpdates(): void;

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

@@ -58,8 +58,18 @@ export interface RegenerateProductRowsOptions {
     layout?: Orientation;
 }
 /**
- * Regenerates product rows based on current store configuration
- * Reads products, layout, and composition from store/DOM and rebuilds the HTML
+ * Regenerates only the mobile product container rows.
+ * Used when mobile-specific settings change (mobileCardsInRow)
+ * or when the desktop container is regenerated (to keep both in sync).
+ *
+ * For list layout: hides the mobile row entirely (list is inherently responsive).
+ * For grid layout: shows the mobile row and populates it.
+ */
+export declare function regenerateMobileProductRows(options: Omit<RegenerateProductRowsOptions, 'afterRegenerate'>): void;
+/**
+ * Regenerates product rows in the desktop container based on current store configuration.
+ * Also regenerates the mobile container to keep both in sync.
+ * Reads products, layout, and composition from store/DOM and rebuilds the HTML.
  * @param options - Configuration options for regeneration
  */
 export declare function regenerateProductRows(options: RegenerateProductRowsOptions): void;
@@ -68,8 +78,12 @@ export interface ReapplySpacingOptions {
     documentModifier: DocumentModifier;
 }
 /**
- * Reapplies spacing values from data attributes after product regeneration
- * This ensures spacing persists when products are regenerated
+ * Reapplies spacing values after product regeneration.
+ * Desktop spacing applies only to the desktop container;
+ * mobile spacing applies only to the mobile container.
+ *
+ * Reads values from node config (primary) with data-attribute fallback
+ * for backward compatibility with pre-nodeConfig templates.
  * @param options - Configuration options
  */
 export declare function reapplySpacing(options: ReapplySpacingOptions): void;
@@ -105,6 +119,17 @@ export interface RegenerateWithStylesOptions extends Omit<RegenerateProductRowsO
  * @param options - Configuration options for regeneration
  */
 export declare function regenerateProductRowsWithStyles(options: RegenerateWithStylesOptions): void;
+/**
+ * Adjusts a products array to a target size.
+ * Used by ProductLayoutControl to synchronously match products to the new size
+ * before regeneration, avoiding the race condition where the store still holds
+ * products from the previous (stale) fetch.
+ *
+ * - More products than target → truncate
+ * - Fewer products than target → pad with dummy products
+ * - Exact match → return as-is
+ */
+export declare function adjustProductsToSize(products: RecommendationProduct[], targetSize: number): RecommendationProduct[];
 type PriceKey = 'price' | 'original_price' | 'discount';
 /**
  * Formats a product price using current currency settings
@@ -142,16 +167,11 @@ export interface UpdateProductContentInPlaceOptions {
  * Updates product content in-place without regenerating HTML structure.
  * Preserves all user-applied styles by only touching dynamic content.
  *
- * This is the preferred method when:
- * - Product data changed but count remains the same
- * - Currency/locale changed (prices need reformatting)
- *
- * Uses setText() on text nodes instead of setInnerHtml() to preserve
- * Stripo's internal node references and avoid cursor/selection tracking issues.
+ * Scopes element queries to the desktop container to avoid double-counting
+ * mobile container elements (both containers share identical block IDs).
+ * After updating desktop, also updates mobile container to keep them in sync.
  *
- * Falls back to false when:
- * - Product count changed (need to add/remove elements)
- * - Cannot find required elements
+ * Falls back to false when product count changed (need to add/remove elements).
  * @param options - Configuration options
  * @returns true if in-place update was successful, false to fall back to full regeneration
  */
@@ -164,13 +184,13 @@ export interface UpdatePricesInPlaceOptions {
  * Updates only price displays in-place (for currency changes).
  * This is a lightweight update when only formatting changes, not product data.
  *
+ * Scopes element queries to the desktop container to avoid double-counting
+ * mobile container elements. After updating desktop, also updates mobile.
+ *
  * Perfect for:
  * - Currency symbol change
  * - Currency alignment change
  * - Decimal/thousand separator changes
- *
- * Uses setText() on text nodes instead of setInnerHtml() to preserve
- * Stripo's internal node references and avoid cursor/selection tracking issues.
  * @param options - Configuration options
  * @returns true if update was successful, false otherwise
  */

package/dist/src/extensions/Blocks/Recommendation/controls/mobileLayout/cssRules.d.ts

@@ -0,0 +1,29 @@
+/**
+ * CSS rules for mobile grid layout visibility switching
+ *
+ * Follows the modifyCss pattern from textTrim control.
+ * Rules are injected into the document's stylesheet via modifyCss
+ * so they appear in the compiled HTML export.
+ */
+import type { ImmutableCssNode } from '@stripoinc/ui-editor-extensions';
+import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
+/** CSS class for desktop product container */
+export declare const CSS_CLASS_DESKTOP_CONTAINER = "ins-recommendation-desktop-container";
+/** CSS class for mobile product container */
+export declare const CSS_CLASS_MOBILE_CONTAINER = "ins-recommendation-mobile-container";
+interface CssModifierApi {
+    getDocumentRootCssNode: () => ImmutableCssNode | null;
+    getDocumentModifier: () => {
+        modifyCss: (node: ImmutableCssNode) => {
+            appendRule: (rule: string) => void;
+        };
+        apply: (desc: ModificationDescription) => void;
+    };
+}
+/**
+ * Ensures mobile layout CSS rules exist in the document stylesheet.
+ * Only adds rules if they don't already exist (prevents duplicates across multiple blocks).
+ * Follows the same pattern as textTrim's _ensureCssRulesExist().
+ */
+export declare function ensureMobileCssRulesExist(api: CssModifierApi): void;
+export {};