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

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 hasInitializedData;
     private algorithmControl;
     private localeControl;
     private currencyControl;
@@ -38,6 +37,28 @@ export declare class RecommendationBlockControl extends CommonControl {
      * 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
      */
@@ -48,10 +69,11 @@ export declare class RecommendationBlockControl extends CommonControl {
      */
     private _debouncedRegenerateWithProducts;
     /**
-     * Listen to store changes that require product refresh or regeneration
-     * - Config changes (size, strategy, filters, etc.) trigger API refetch
-     * - Currency code changes trigger API refetch (formatting changes are handled in-place)
-     * - Products array changes (API response) trigger HTML regeneration
+     * 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/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,15 @@ 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).
+ */
+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;

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 {};

package/dist/src/extensions/Blocks/Recommendation/controls/name/textTrim.d.ts

@@ -1,8 +1,9 @@
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { ImmutableCssNode, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { CommonControl } from '../../../common-control';
 /**
  * Control for enabling/disabling text trimming on product names
  * When enabled, adds a CSS class that applies text-overflow: ellipsis
+ * and injects the required CSS rules into the document stylesheet
  */
 export declare class NameTextTrimControl extends CommonControl {
     getId(): string;
@@ -11,6 +12,23 @@ export declare class NameTextTrimControl extends CommonControl {
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
     _setFormValues(): void;
     _getCurrentTrimState(): boolean;
+    /**
+     * Finds an existing CSS rule in the document stylesheet by exact query
+     * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
+     * @returns The CSS rule node if found, undefined otherwise
+     */
+    _findCssRule(query: string): ImmutableCssNode | undefined;
+    /**
+     * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
+     * This is needed because Stripo's CSS query syntax interprets spaces as path separators
+     * @returns true if the rule exists
+     */
+    _hasParagraphRule(): boolean;
+    /**
+     * Ensures the text-trim CSS rules exist in the document stylesheet
+     * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
+     */
+    _ensureCssRulesExist(): void;
     _onTextTrimChange(enabled: boolean): void;
     _listenToFormUpdates(): void;
 }

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

@@ -47,8 +47,8 @@ export declare class SpacingControl extends CommonControl {
     _getStoredRowSpacing(): number;
     /**
      * Handles column spacing changes.
-     * For vertical layout: applies horizontal padding to all cells inside attribute rows.
-     * For horizontal layout: applies padding to parent of product card wrappers.
+     * For grid layout: applies horizontal padding to all cells inside attribute rows.
+     * For list layout: applies padding to parent of product card wrappers.
      */
     _onColumnSpacingChange(spacing: number): void;
     /**