@useinsider/guido 3.0.0 → 3.1.0

package/dist/extensions/Blocks/common-control.js

@@ -1,8 +1,8 @@
-var I = Object.defineProperty;
-var O = (T, r, e) => r in T ? I(T, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : T[r] = e;
-var u = (T, r, e) => O(T, typeof r != "symbol" ? r + "" : r, e);
-import { Control as c, UIElementType as n, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class _ extends c {
+var c = Object.defineProperty;
+var i = (s, r, e) => r in s ? c(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var u = (s, r, e) => i(s, typeof r != "symbol" ? r + "" : r, e);
+import { Control as I, UIElementType as n, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class d extends I {
   constructor() {
     super(...arguments);
     u(this, "currentNode");
@@ -47,17 +47,66 @@ class _ extends c {
     const t = this.getBlockInstanceId();
     if (!t)
       return !1;
-    const E = t !== this.lastBlockInstanceId;
-    return e(), E && (this.lastBlockInstanceId = t), E;
+    const o = t !== this.lastBlockInstanceId;
+    return e(), o && (this.lastBlockInstanceId = t), o;
   }
-  _GuLabel({ text: e, name: t = "" }) {
+  _GuLabel({ text: e, name: t = "", hint: o }) {
     return `
-            <${n.LABEL} 
-                ${$.LABEL.text}="${e}" 
-                ${$.LABEL.name}="${t || `${e} Label`}">
+            <${n.LABEL}
+                ${$.LABEL.text}="${e}"
+                ${$.LABEL.name}="${t || `${e} Label`}"
+                ${o ? `${$.LABEL.hint}="${o}"` : ""}>
             </${n.LABEL}>
         `;
   }
+  _GuMessage({ name: e = "", type: t = "info" }) {
+    return `
+            <${n.MESSAGE}
+                ${$.MESSAGE.type}="${t}"
+                ${$.MESSAGE.name}="${e}"
+            >
+            </${n.MESSAGE}>
+        `;
+  }
+  /**
+   * Returns template HTML for an info message with an optional icon.
+   * Use in getTemplate() — the icon is registered in a hidden store so Stripo initializes it.
+   * Pair with _setInfoMessageValue() in onRender() to set the text content.
+   */
+  _GuOnPageMessage({ name: e, icon: t = "not-found", type: o = "info" }) {
+    return `
+            <div data-info-message="${e}" style="display: none; padding: 16px 16px 0;">
+                <div class="icon-store" style="display: none;">
+                    <div data-icon-key="${e}">
+                        ${this._GuIcon({ src: t, className: "icon" })}
+                    </div>
+                </div>
+                ${this._GuMessage({ name: e, type: o })}
+            </div>
+        `;
+  }
+  /**
+   * Sets the info message value with the pre-registered icon.
+   * Use in onRender() — reads the icon's outerHTML from the hidden store
+   * and combines it with the text in Stripo's alert-message layout.
+   */
+  _setInfoMessageValue(e, t) {
+    const o = this.getContainer(), E = o.querySelector(`[data-icon-key="${e}"]`), a = E == null ? void 0 : E.querySelector("ue-icon-component"), l = (a == null ? void 0 : a.outerHTML) ?? "";
+    this.api.setUIEAttribute(
+      e,
+      "value",
+      `
+            <div class="service-element alert-message-main" style="align-items: start;">
+                ${l}
+                <div class="service-element alert-message-text">
+                    ${t}
+                </div>
+            </div>
+            `
+    );
+    const T = o.querySelector(`[data-info-message="${e}"]`);
+    T && (T.style.display = "");
+  }
   _GuToggle(e) {
     return `
             <${n.SWITCHER}
@@ -72,72 +121,80 @@ class _ extends c {
                 ${$.SELECT_ITEM.value}="${t}">
             </${n.SELECT_ITEM}>`;
   }
-  _GuSelect({ name: e, placeholder: t, options: E, className: o = "es-180w" }) {
+  _GuSelect({ name: e, placeholder: t, options: o, className: E = "es-180w" }) {
     return `
             <${n.SELECTPICKER}
-                class="${o}"
+                class="${E}"
                 ${$.SELECTPICKER.name}="${e}"
                 ${$.SELECTPICKER.placeholder}="${t}">
-                    ${E.map((a) => this._GuSelectItem(a)).join("")}
+                    ${o.map((a) => this._GuSelectItem(a)).join("")}
             </${n.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: t, className: E = "", disabled: o = !1 }) {
+  _GuTextInput({ name: e, placeholder: t, className: o = "", disabled: E = !1 }) {
     return `
             <${n.TEXT}
-                class=${E}
+                class=${o}
                 ${$.TEXT.name}="${e}"
                 placeholder="${t || e}"
-                ${o ? `${$.TEXT.disabled}="true"` : ""}>
+                ${E ? `${$.TEXT.disabled}="true"` : ""}>
             </${n.TEXT}>
         `;
   }
-  _GuCounter({ name: e, maxValue: t, minValue: E = 1, step: o = 1 }) {
+  _GuCounter({ name: e, maxValue: t, minValue: o = 1, step: E = 1 }) {
     return `
             <${n.COUNTER}
                 ${$.COUNTER.name}="${e}"
-                ${$.COUNTER.minValue}="${E}"
+                ${$.COUNTER.minValue}="${o}"
                 ${$.COUNTER.maxValue}="${t}"
-                ${$.COUNTER.step}="${o}">
+                ${$.COUNTER.step}="${E}">
             </${n.COUNTER}>
         `;
   }
-  _GuRadioButtonItem({ text: e, value: t, icon: E }) {
+  _GuRadioButtonItem({ text: e, value: t, icon: o }) {
     return `
             <${n.RADIO_ITEM}
                 ${$.RADIO_ITEM.value}="${t}"
                 ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
-                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
+                ${o ? `${$.RADIO_ITEM.icon}="${o}"` : ""}>
             </${n.RADIO_ITEM}>
         `;
   }
-  _GuRadioButton({ name: e, buttons: t, id: E = "" }) {
+  _GuRadioButton({ name: e, buttons: t, id: o = "" }) {
     return `
             <${n.RADIO_BUTTONS}
-                ${E ? `id="${E}"` : ""}
+                ${o ? `id="${o}"` : ""}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${t.map((o) => this._GuRadioButtonItem(o)).join("")}
+                ${t.map((E) => this._GuRadioButtonItem(E)).join("")}
             </${n.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: t, id: E = "" }) {
+  _GuButton({ name: e, label: t, id: o = "" }) {
     return `
             <${n.BUTTON}
                 ${$.BUTTON.name}="${e}"
-                ${E ? `id="${E}"` : ""}
+                ${o ? `id="${o}"` : ""}
                 ${$.BUTTON.caption}="${t}"}>
             </${n.BUTTON}>
         `;
   }
+  _GuIcon({ src: e, className: t = "" }) {
+    return `
+            <${n.ICON}
+                ${$.ICON.src}="${e}"
+                ${t ? `class="${t}"` : ""}>
+            </${n.ICON}>
+        `;
+  }
   /**
    *
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: e, icon: t, className: E = "" }) {
+  _GuIconButton({ name: e, icon: t, className: o = "" }) {
     return `
             <${n.BUTTON}
-                class="${E}"
+                class="${o}"
                 ${$.BUTTON.name}="${e}"
                 ${$.BUTTON.icon}="${t}">
             </${n.BUTTON}>
@@ -165,19 +222,19 @@ class _ extends c {
    * @returns HTML string for the orderable control
    */
   _GuOrderable(e, t) {
-    let E = "";
+    let o = "";
     t.forEach((a) => {
       const l = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
-      E += `
+      o += `
                 <${n.ORDERABLE_ITEM} ${l}="${a.key}">
                     ${a.content}
                 </${n.ORDERABLE_ITEM}>
             `;
     });
-    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    const E = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${n.ORDERABLE} ${o}="${e}">
-                ${E}
+            <${n.ORDERABLE} ${E}="${e}">
+                ${o}
             </${n.ORDERABLE}>
         `;
   }
@@ -218,16 +275,16 @@ class _ extends c {
         `;
   }
   _GuRadioButtons(e, t) {
-    const E = t.map((o) => `
+    const o = t.map((E) => `
                 <${n.RADIO_ITEM}
-                    ${$.RADIO_ITEM.text}="${o.text}"
-                    ${$.RADIO_ITEM.value}="${o.value}">
+                    ${$.RADIO_ITEM.text}="${E.text}"
+                    ${$.RADIO_ITEM.value}="${E.value}">
                 </${n.RADIO_ITEM}>
             `).join("");
     return `
             <${n.RADIO_BUTTONS}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${E}
+                ${o}
             </${n.RADIO_BUTTONS}>
         `;
   }
@@ -241,5 +298,5 @@ class _ extends c {
   }
 }
 export {
-  _ as CommonControl
+  d as CommonControl
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-079d2bf7] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-17dd4d8b]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-079d2bf7] .in-progress-wrapper__progress p span:last-child{display:none!important}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/@types/extensions/block.d.ts

@@ -0,0 +1,2 @@
+import { BlockId as BlockIdEnum } from '@@/Enums/block';
+export type BlockId = `${BlockIdEnum}`;

package/dist/src/App.vue.d.ts

@@ -1,3 +1,5 @@
-import '../node_modules/@useinsider/design-system-vue/dist/design-system-vue.css';
+import '@useinsider/design-system-vue/style';
+import '@useinsider/design-system-vue/fonts.css';
+import '@useinsider/design-system-vue/utilities.css';
 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<{}>>, {}>;
 export default _default;

package/dist/src/components/organisms/header/EditorActions.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo").SavedTemplateDetails, "metadata"> | undefined>;
+    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata"> | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/src/components/organisms/header/MigrationConfirmModal.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    open: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    confirm: () => void;
+}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -3,7 +3,7 @@ type __VLS_Props = {
     id: string;
     title: string;
     description?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'X-small' | 'small' | 'medium' | 'large';
     footerButtonOptions?: FooterButtonGroup;
     closeButtonStatus?: boolean;
     closeOnOutsideClick?: boolean;
@@ -33,7 +33,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     footerStatus: boolean;
 }>>>, {
     description: string;
-    size: "small" | "medium" | "large";
+    size: "X-small" | "small" | "medium" | "large";
     closeOnOutsideClick: boolean;
     footerButtonOptions: FooterButtonGroup;
     closeButtonStatus: boolean;

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

@@ -0,0 +1,4 @@
+export declare enum BlockId {
+    Items = "items-block",
+    Recommendation = "recommendation-block"
+}

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

@@ -1,5 +1,6 @@
+import type { BlockId } from '@@/Types/extensions/block';
 import { Block, BlockCompositionType, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-export declare const BLOCK_ID = "items-block";
+export declare const BLOCK_ID: BlockId;
 /**
  * Items Block extension for Stripo email editor.
  *
@@ -20,6 +21,7 @@ export declare class ItemsBlock extends Block {
     getBlockCompositionType(): BlockCompositionType;
     getName(): string;
     getDescription(): string;
+    getSettingsPanelTitleHtml(): string;
     getTemplate(): string;
     allowInnerBlocksDND(): boolean;
     onCreated(node: ImmutableHtmlNode): void;

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

@@ -5,9 +5,10 @@
  * Handles block lifecycle including configuration initialization and migration.
  * Supports multiple block instances with unique recommendation-id attributes.
  */
+import type { BlockId } from '@@/Types/extensions/block';
 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 const BLOCK_ID: BlockId;
 export declare class RecommendationBlock extends Block {
     /**
      * Stores the ID generated in getTemplate() so onCreated() can reuse it.
@@ -20,6 +21,8 @@ export declare class RecommendationBlock extends Block {
     getBlockCompositionType(): BlockCompositionType;
     getName(): string;
     getDescription(): string;
+    getSettingsPanelTitleHtml(): string;
+    allowInnerBlocksDND(): boolean;
     /**
      * Returns the template HTML for a new recommendation block.
      * Generates a unique recommendation ID and embeds the instance class

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

@@ -9,5 +9,6 @@ export declare enum RecommendationBlockId {
     OLD_PRICE = "recommendation-block-old-price",
     OMNIBUS_PRICE = "recommendation-block-omnibus-price",
     OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount",
-    IMAGE = "recommendation-block-image"
+    IMAGE = "recommendation-block-image",
+    CUSTOM_ATTRIBUTE = "recommendation-block-custom-attribute"
 }

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

@@ -55,5 +55,13 @@ export declare enum RecommendationControlId {
     OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control",
     OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control",
     IMAGE_SIZE = "recommendation-block-image-size-control",
-    IMAGE_MARGINS = "recommendation-block-image-margins-control"
+    IMAGE_MARGINS = "recommendation-block-image-margins-control",
+    CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control",
+    CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control",
+    CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control",
+    CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control",
+    CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control",
+    CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control",
+    CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control",
+    SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message"
 }

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

@@ -8,6 +8,6 @@
  */
 export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
-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 { 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, ATTR_CUSTOM_PREFIX, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, } 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/selectors.d.ts

@@ -40,3 +40,13 @@ 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";
+/**
+ * Custom attribute constants
+ * Used for dynamically added product attributes in Card Composition
+ */
+/** Prefix for custom attribute keys in composition arrays (e.g., "customAttr:rating_star") */
+export declare const ATTR_CUSTOM_PREFIX = "customAttr:";
+/** HTML data attribute storing JSON array of added custom attribute names */
+export declare const ATTR_DATA_CUSTOM_ATTRIBUTES = "data-custom-attributes";
+/** HTML attribute on <td> elements identifying the product attribute for compiler template variable generation */
+export declare const ATTR_PRODUCT_ATTR = "product-attr";

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

@@ -4,92 +4,182 @@ export declare const COMPOSITION_CONTROL_BLOCK_ID = "ui-elements-recommendation-
 export interface CardCompositionItem {
     key: string;
     label: string;
-    visible: boolean;
 }
 export declare class RecommendationCardCompositionControl extends CommonControl {
     private store;
-    private unsubscribeOrientation;
+    private unsubscribeStore;
+    private eventController;
+    /**
+     * Guard flag: when true, onTemplateNodeUpdated skips _initializeComposition.
+     * Used during _onReorder to prevent multiple intermediate rebuilds.
+     */
+    private reorderInProgress;
     getId(): string;
     getTemplate(): string;
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    private _initializeComposition;
+    private _registerValueChangeListeners;
+    private _readCompositionFromNode;
+    private _readCustomAttributesFromNode;
+    private _readVisibilityFromRows;
+    private _getDefaultVisibilities;
+    private _extractVisibilityFromRows;
+    private _parseVisibilityValue;
+    private _mergeWithDefaults;
+    private _buildVisibilityValues;
     /**
-     * Creates the HTML content for an orderable item with label and toggle
+     * Renders orderable items into the composition list.
+     * Returns `true` if a full DOM rebuild occurred, `false` if existing
+     * elements were reordered in-place (preserving UE-SELECT state).
      */
-    private _createItemContent;
+    private _renderOrderableItems;
     /**
-     * Registers event listeners for composition and visibility changes
+     * Attempts to reorder existing orderable-item elements to match the composition order.
+     * If the list already contains the same set of items (possibly in a different order),
+     * performs a lightweight DOM reorder instead of a full innerHTML rebuild.
+     * Returns true if reorder was performed, false if a full rebuild is needed.
      */
-    private _registerValueChangeListeners;
+    private _tryReorderInPlace;
+    private _createBuiltInItemHtml;
+    private _createCustomItemHtml;
     /**
-     * Initializes composition order and visibility state from the current node
+     * Builds select options from the store's filterList.
+     * Falls back to a single option for the currently selected attribute.
      */
-    private _initializeComposition;
+    private _getSelectOptions;
     /**
-     * Reads composition order from node's data-card-composition attribute
-     * Falls back to default order if attribute is not present
+     * Initializes custom attribute selects: sets their options and current value.
+     * Selects are pre-allocated in getTemplate() and moved into items by
+     * _moveSelectsIntoItems — this method only updates their data.
      */
-    private _readCompositionFromNode;
+    private _initializeCustomSelects;
     /**
-     * Builds visibility values object from the visibility map
+     * Moves UE-SWITCHER elements from the hidden toggle store into orderable items.
+     * Stripo initializes toggles at template parse time; moving the DOM node preserves bindings.
      */
-    private _buildVisibilityValues;
+    private _moveTogglesIntoItems;
     /**
-     * Read visibility state from individual row elements' data-visibility attributes
-     * This ensures toggles reflect the actual DOM state
+     * Moves pre-allocated UE-SELECT elements from the hidden custom-select-store
+     * into orderable item slots. Same pattern as _moveTogglesIntoItems.
      */
-    private _readVisibilityFromRows;
+    private _moveSelectsIntoItems;
     /**
-     * Returns default visibility values for all items
+     * Rescues UE-SWITCHER elements from orderable items back to the hidden toggle store.
+     * Must be called before re-rendering the list with innerHTML to prevent toggle destruction.
+     * Without this, onTemplateNodeUpdated → _renderOrderableItems → innerHTML would destroy
+     * previously-moved toggles, making them permanently lost.
      */
-    private _getDefaultVisibilities;
+    private _rescueTogglesToStore;
     /**
-     * Extracts visibility values from DOM nodes
+     * Rescues UE-SELECT elements from orderable items back to the hidden custom-select-store.
+     * Same rescue pattern as _rescueTogglesToStore — prevents innerHTML from destroying them.
      */
-    private _extractVisibilityFromRows;
+    private _rescueSelectsToStore;
     /**
-     * Parses visibility value from string to boolean
-     * Accepts "1", "true" as true, everything else as false
+     * Moves pre-allocated UE-BUTTON delete elements from the hidden custom-delete-store
+     * into orderable item slots. Same pattern as _moveSelectsIntoItems.
      */
-    private _parseVisibilityValue;
+    private _moveDeleteButtonsIntoItems;
     /**
-     * Merges extracted visibilities with default values for missing keys
+     * Rescues UE-BUTTON delete elements from orderable items back to the hidden custom-delete-store.
+     * Same rescue pattern as _rescueSelectsToStore — prevents innerHTML from destroying them.
      */
-    private _mergeWithDefaults;
+    private _rescueDeleteButtonsToStore;
     /**
-     * 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
+     * Moves pre-allocated reorder icon UE-BUTTON elements from the hidden reorder-icon-store
+     * into orderable item drag-handle slots. Same pattern as _moveDeleteButtonsIntoItems.
      */
-    private _applyCompositionToBlock;
+    private _moveReorderIconsIntoItems;
     /**
-     * Reorders attribute rows within each product card based on composition order
-     * Targets the tbody inside each product-attribute-cell to preserve card structure
+     * Rescues reorder icon UE-BUTTON elements from orderable items back to the hidden reorder-icon-store.
+     * Same rescue pattern as _rescueDeleteButtonsToStore — prevents innerHTML from destroying them.
      */
-    private _reorderProductAttributes;
+    private _rescueReorderIconsToStore;
+    private _setupEventListeners;
+    private _setupDragAndDrop;
+    private _setupDeleteHandler;
+    private _onAddAttribute;
     /**
-     * Builds HTML string with attributes ordered according to composition
+     * Removes a single custom attribute by its index in the customAttrs array.
+     * Index-based to correctly handle duplicate attributes.
      */
-    private _buildCompositionHtml;
+    private _onDeleteCustomAttribute;
+    /**
+     * Handles changing a custom attribute's selection via its inline _GuSelect.
+     * Uses the customIndex to target only the specific instance, supporting duplicates.
+     */
+    private _onCustomAttributeChanged;
+    private _onReorder;
+    private _injectCustomAttributeHtml;
+    private _injectGridAttributeRow;
+    private _injectListAttributeRow;
+    /**
+     * Removes a custom attribute by rebuilding product card content without it.
+     * The composition parameter should already have the deleted key removed.
+     */
+    private _removeCustomAttributeHtml;
+    /**
+     * Atomically updates both composition and custom-attributes in a single apply()
+     * so that onTemplateNodeUpdated fires only once with fully consistent state.
+     * Two separate apply() calls would cause an intermediate onTemplateNodeUpdated
+     * where composition is updated but customAttributes still has the old order,
+     * producing a flicker on the custom attribute dropdowns.
+     */
+    private _updateBothAttributes;
+    /**
+     * Reorders attribute rows within each product card based on composition order.
+     * Only used for grid layout (list layout has fixed 3-column structure).
+     */
+    private _reorderProductAttributes;
     /**
-     * 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
+     * Builds HTML string with attributes ordered according to composition.
+     * Queries existing rows from the container by data-attribute-type.
      */
+    private _buildCompositionHtml;
     private _applyVisibilityToBlock;
     /**
-     * Gets the current layout orientation from store or DOM
+     * Finds the composition array index for the Nth custom attribute (0-based).
+     * Scans left-to-right, counting only entries with the custom prefix.
+     * The customIndex maps 1:1 with the customAttrs array order.
      */
+    private _findNthCustomKeyIndex;
     private _getCurrentLayout;
     /**
-     * Updates orderable state based on layout orientation
-     * Adds/removes disabled class to hide drag icons for list layout
+     * Extracts background color properties from existing card elements.
+     * Checks both `.product-card-segment` (where applyCardBackgroundColor sets bg for grid)
+     * and `.product-card-wrapper` (where CardBackgroundColorControl sets bg).
+     * Used when injecting new attribute cells to match the card's current background.
+     */
+    private _extractSegmentBgFromCard;
+    private _getControlContainer;
+    /**
+     * Adds/removes orderable-disabled class based on layout orientation.
+     * List layout hides drag handles via CSS and disables draggable attribute
+     * to prevent native browser drag-and-drop from working without the handle.
      */
     private _updateOrderableState;
     /**
-     * Subscribe to store orientation changes
-     * Updates orderable state when layout changes via the layout control
+     * Disables the "Add Attribute" button when the custom attribute limit is reached
+     * or when all available filters have already been added (no unused attributes left).
+     */
+    private _updateAddButtonState;
+    /**
+     * Subscribes to store changes for orientation and filterList updates.
+     * When filterList changes (e.g. after async fetch), re-renders dropdowns with new options.
+     */
+    private _subscribeToStoreChanges;
+    /**
+     * Looks up the display name for an attribute from the store's filterList.
+     * Falls back to Title Case conversion of the snake_case attribute name.
+     */
+    private _getDisplayNameForAttribute;
+    /**
+     * Resolves the display content for a custom attribute cell.
+     * Uses the real product value from the store when available, falls back to displayName.
      */
-    private _subscribeToOrientationChanges;
+    private _resolveAttributeContent;
+    private _getGridCellHtml;
+    private _getListRowHtml;
 }