@useinsider/guido 3.23.0-beta.86bed27 → 3.23.0-beta.9f6bfbf

package/dist/extensions/Blocks/Recommendation/utils/legacyStrategyMap.js

@@ -3,9 +3,10 @@ function r(e) {
     return e;
   switch (e) {
     case "viewedTogether":
-      return "similarViewed";
     case "purchasedTogether":
-      return "similarBought";
+    case "similarViewed":
+    case "similarBought":
+      return "mostPopular";
     case "trending":
       return "trendingProducts";
     case "mostValuable":

package/dist/extensions/Blocks/Recommendation/utils/priceFormatter.js

@@ -25,5 +25,6 @@ function f(c) {
   return r === "before" ? `${e} ${a}` : `${a} ${e}`;
 }
 export {
+  d as formatNumber,
   f as formatPrice
 };

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

@@ -1,12 +1,14 @@
-var c = Object.defineProperty;
-var i = (l, a, e) => a in l ? c(l, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[a] = e;
-var T = (l, a, e) => i(l, typeof a != "symbol" ? a + "" : a, e);
+var u = Object.defineProperty;
+var c = (l, E, e) => E in l ? u(l, E, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[E] = e;
+var i = (l, E, e) => c(l, typeof E != "symbol" ? E + "" : E, e);
 import { Control as I, UIElementType as n, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 class _ extends I {
   constructor() {
     super(...arguments);
-    T(this, "currentNode");
-    T(this, "lastBlockInstanceId", null);
+    i(this, "currentNode");
+    i(this, "lastBlockInstanceId", null);
+    // Set until the control handles the node Stripo hands a freshly rendered panel.
+    i(this, "isAwaitingPanelNode", !1);
   }
   getContainer() {
     var e;
@@ -18,6 +20,11 @@ class _ extends I {
   onDestroy() {
     this.lastBlockInstanceId = null;
   }
+  // Stripo renders a panel before it hands that panel its node, so a node still held is the last
+  // panel's and may be disposed. Controls Stripo renders call this first in onRender.
+  forgetLastPanelNode() {
+    this.currentNode = void 0, this.isAwaitingPanelNode = !0;
+  }
   /**
    * Gets the Items block container element from the current node.
    * @returns The container element or null if not found
@@ -44,18 +51,18 @@ class _ extends I {
    * @returns true if block instance changed, false otherwise
    */
   handleBlockInstanceChange(e) {
-    const t = this.getBlockInstanceId();
-    if (!t)
-      return !1;
-    const E = t !== this.lastBlockInstanceId;
-    return e(), E && (this.lastBlockInstanceId = t), E;
+    const t = this.getBlockInstanceId(), o = this.isAwaitingPanelNode;
+    if (this.isAwaitingPanelNode = !1, !t)
+      return o && e(), !1;
+    const a = t !== this.lastBlockInstanceId;
+    return e(), a && (this.lastBlockInstanceId = t), a;
   }
-  _GuLabel({ text: e, name: t = "", hint: E }) {
+  _GuLabel({ text: e, name: t = "", hint: o }) {
     return `
             <${n.LABEL}
                 ${$.LABEL.text}="${e}"
                 ${$.LABEL.name}="${t || `${e} Label`}"
-                ${E ? `${$.LABEL.hint}="${E}"` : ""}>
+                ${o ? `${$.LABEL.hint}="${o}"` : ""}>
             </${n.LABEL}>
         `;
   }
@@ -73,7 +80,7 @@ class _ extends I {
    * 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: E = "info" }) {
+  _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;">
@@ -81,7 +88,7 @@ class _ extends I {
                         ${this._GuIcon({ src: t, className: "icon" })}
                     </div>
                 </div>
-                ${this._GuMessage({ name: e, type: E })}
+                ${this._GuMessage({ name: e, type: o })}
             </div>
         `;
   }
@@ -91,21 +98,21 @@ class _ extends I {
    * and combines it with the text in Stripo's alert-message layout.
    */
   _setInfoMessageValue(e, t) {
-    const E = this.getContainer(), o = E.querySelector(`[data-icon-key="${e}"]`), r = o == null ? void 0 : o.querySelector("ue-icon-component"), s = (r == null ? void 0 : r.outerHTML) ?? "";
+    const o = this.getContainer(), a = o.querySelector(`[data-icon-key="${e}"]`), s = a == null ? void 0 : a.querySelector("ue-icon-component"), r = (s == null ? void 0 : s.outerHTML) ?? "";
     this.api.setUIEAttribute(
       e,
       "value",
       `
             <div class="service-element alert-message-main" style="align-items: start;">
-                ${s}
+                ${r}
                 <div class="service-element alert-message-text">
                     ${t}
                 </div>
             </div>
             `
     );
-    const u = E.querySelector(`[data-info-message="${e}"]`);
-    u && (u.style.display = "");
+    const T = o.querySelector(`[data-info-message="${e}"]`);
+    T && (T.style.display = "");
   }
   _GuToggle(e) {
     return `
@@ -124,66 +131,66 @@ class _ extends I {
   _GuSelect({
     name: e,
     placeholder: t,
-    options: E,
-    className: o = "es-180w",
-    searchable: r = !1
+    options: o,
+    className: a = "es-180w",
+    searchable: s = !1
   }) {
     return `
             <${n.SELECTPICKER}
-                class="${o}"
+                class="${a}"
                 ${$.SELECTPICKER.name}="${e}"
-                ${r ? `${$.SELECTPICKER.searchable}="true"` : ""}
+                ${s ? `${$.SELECTPICKER.searchable}="true"` : ""}
                 ${$.SELECTPICKER.placeholder}="${t}">
-                    ${E.map((s) => this._GuSelectItem(s)).join("")}
+                    ${o.map((r) => this._GuSelectItem(r)).join("")}
             </${n.SELECTPICKER}>
         `;
   }
-  _GuTextInput({ name: e, placeholder: t, className: E = "", disabled: o = !1 }) {
+  _GuTextInput({ name: e, placeholder: t, className: o = "", disabled: a = !1 }) {
     return `
             <${n.TEXT}
-                class=${E}
+                class=${o}
                 ${$.TEXT.name}="${e}"
                 placeholder="${t || e}"
-                ${o ? `${$.TEXT.disabled}="true"` : ""}>
+                ${a ? `${$.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: a = 1 }) {
     return `
             <${n.COUNTER}
                 ${$.COUNTER.name}="${e}"
-                ${$.COUNTER.minValue}="${E}"
+                ${$.COUNTER.minValue}="${o}"
                 ${$.COUNTER.maxValue}="${t}"
-                ${$.COUNTER.step}="${o}">
+                ${$.COUNTER.step}="${a}">
             </${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((a) => this._GuRadioButtonItem(a)).join("")}
             </${n.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: e, label: t, id: E = "", className: o = "", icon: r = "", disabled: s = !1 }) {
+  _GuButton({ name: e, label: t, id: o = "", className: a = "", icon: s = "", disabled: r = !1 }) {
     return `
             <${n.BUTTON}
                 ${$.BUTTON.name}="${e}"
-                ${E ? `id="${E}"` : ""}
-                ${o ? `class="${o}"` : ""}
-                ${r ? `${$.BUTTON.icon}="${r}"` : ""}
-                ${s ? `${$.BUTTON.disabled}="true"` : ""}
+                ${o ? `id="${o}"` : ""}
+                ${a ? `class="${a}"` : ""}
+                ${s ? `${$.BUTTON.icon}="${s}"` : ""}
+                ${r ? `${$.BUTTON.disabled}="true"` : ""}
                 ${$.BUTTON.caption}="${t}">
             </${n.BUTTON}>
         `;
@@ -201,10 +208,10 @@ class _ extends I {
    * @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}>
@@ -232,19 +239,19 @@ class _ extends I {
    * @returns HTML string for the orderable control
    */
   _GuOrderable(e, t) {
-    let E = "";
-    t.forEach((r) => {
-      const s = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
-      E += `
-                <${n.ORDERABLE_ITEM} ${s}="${r.key}">
-                    ${r.content}
+    let o = "";
+    t.forEach((s) => {
+      const r = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+      o += `
+                <${n.ORDERABLE_ITEM} ${r}="${s.key}">
+                    ${s.content}
                 </${n.ORDERABLE_ITEM}>
             `;
     });
-    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
+    const a = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${n.ORDERABLE} ${o}="${e}">
-                ${E}
+            <${n.ORDERABLE} ${a}="${e}">
+                ${o}
             </${n.ORDERABLE}>
         `;
   }
@@ -285,16 +292,16 @@ class _ extends I {
         `;
   }
   _GuRadioButtons(e, t) {
-    const E = t.map((o) => `
+    const o = t.map((a) => `
                 <${n.RADIO_ITEM}
-                    ${$.RADIO_ITEM.text}="${o.text}"
-                    ${$.RADIO_ITEM.value}="${o.value}">
+                    ${$.RADIO_ITEM.text}="${a.text}"
+                    ${$.RADIO_ITEM.value}="${a.value}">
                 </${n.RADIO_ITEM}>
             `).join("");
     return `
             <${n.RADIO_BUTTONS}
                 ${$.RADIO_BUTTONS.name}="${e}">
-                ${E}
+                ${o}
             </${n.RADIO_BUTTONS}>
         `;
   }

package/dist/guido.css

@@ -1 +1 @@
-@charset "UTF-8";.auth-error-modal[data-v-b4d7ae51]{position:relative;z-index:145}.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-b8f24f34] .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-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-baf7a5dd]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.validation-error-list[data-v-e48cebe9]{gap:16px}.validation-error-row[data-v-e48cebe9]{gap:8px;padding:24px;border:1px solid #E1E1E1;border-radius:8px}.validation-error-row__icon[data-v-e48cebe9]{flex-shrink:0;font-size:24px;line-height:0}.validation-error-row__text[data-v-e48cebe9]{font-size:13px;line-height:16px;color:#292929;word-break:break-word}.guido-editor__wrapper[data-v-f2154cb6]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-f2154cb6]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-f2154cb6]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-91a26acd]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-91a26acd]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-91a26acd]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-91a26acd]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-91a26acd]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .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-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{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-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-19d8cb42] .vueperslides__bullets,[data-v-ec2027ff] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-skeleton{width:100%!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}.legacy-strategy-updated-modal[data-v-da2225a1]{position:relative;z-index:145}
+@charset "UTF-8";.auth-error-modal[data-v-b4d7ae51]{position:relative;z-index:145}.gap-16[data-v-5553d071],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-b8f24f34] .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-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.view-options-wrapper[data-v-87033101]{position:relative;display:inline-block}.new-tag[data-v-87033101]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-87033101] .guido__view-option-selection-desktop svg,[data-v-87033101] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-87033101] .in-segments-wrapper__button_selected,[data-v-87033101] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-87033101] .in-tooltip-wrapper-v2__icon{cursor:pointer}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-fad98586]{gap:8px}.version-history__toolbar[data-v-fad98586]{gap:4px}.view-options-wrapper[data-v-6ebabfe4]{position:relative;display:inline-block}.new-tag[data-v-6ebabfe4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-6ebabfe4] .guido__verion-history-view-option-selection-desktop svg,[data-v-6ebabfe4] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-6ebabfe4] .in-segments-wrapper__button_selected,[data-v-6ebabfe4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-6ebabfe4] .in-tooltip-wrapper-v2__icon{cursor:pointer}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-baf7a5dd]{gap:4px}.header-wrapper[data-v-d11dd577]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.validation-error-list[data-v-e48cebe9]{gap:16px}.validation-error-row[data-v-e48cebe9]{gap:8px;padding:24px;border:1px solid #E1E1E1;border-radius:8px}.validation-error-row__icon[data-v-e48cebe9]{flex-shrink:0;font-size:24px;line-height:0}.validation-error-row__text[data-v-e48cebe9]{font-size:13px;line-height:16px;color:#292929;word-break:break-word}.guido-editor__wrapper[data-v-49dc1b30]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-49dc1b30]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-49dc1b30]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-eaf8e461]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-eaf8e461]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-eaf8e461]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-eaf8e461]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-eaf8e461]{object-fit:cover;transform:scale(1)}[data-v-b9a93c6e] .guido__verion-history-view-option-selection-desktop svg,[data-v-b9a93c6e] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-b9a93c6e] .in-segments-wrapper__button_selected,[data-v-b9a93c6e] .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-cf946232]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-cf946232]{min-height:504px}.iframe-wrapper[data-v-f255b2bb]{width:258px}.iframe-scaled[data-v-f255b2bb]{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-6bcaca8a] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-f16f20f8] .vueperslides__bullets{pointer-events:none!important}[data-v-f16f20f8] .vueperslides__parallax-wrapper{padding-bottom:110px!important}[data-v-bb3cca55] .vueperslides__bullets{pointer-events:none!important}[data-v-bb3cca55] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-19d8cb42] .vueperslides__bullets,[data-v-ec2027ff] .vueperslides__bullets,[data-v-b09e80c4] .vueperslides__bullets{pointer-events:none!important}[data-v-b09e80c4] .vueperslides__parallax-wrapper{height:110px!important;padding-bottom:110px!important}[data-v-9bdef600] .vueperslides__parallax-wrapper{padding-bottom:110px!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd]{width:100%;max-width:none}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-skeleton{width:100%!important}.assign-strategy-drawer-content .assign-strategy-select[data-v-6ce48dfd] .in-dropdown-box__container{width:413px}.assign-strategy-drawer .spaced-dot-sep{background-image:linear-gradient(90deg,#91949f 20%,#fff0 0);background-position:center bottom;background-repeat:repeat-x;background-size:5px 1px}.assign-strategy-drawer .spaced-dot-sep--top{background-position:center top}.assign-strategy-drawer .spaced-dot-sep--fc-n:first-child{background:none}.legacy-strategy-updated-modal[data-v-da2225a1]{position:relative;z-index:145}

package/dist/package.json.js

@@ -1,9 +1,9 @@
-const o = "3.23.0-beta.86bed27", s = { stripo: { version: "2.81.1" } }, e = {
+const o = "3.23.0-beta.9f6bfbf", s = { stripo: { version: "2.81.1" } }, t = {
   version: o,
   guido: s
 };
 export {
-  e as default,
+  t as default,
   s as guido,
   o as version
 };

package/dist/src/@types/config/schemas.d.ts

@@ -414,6 +414,8 @@ export declare const FeaturesSchema: v.ObjectSchema<{
     /** Allow persisting a template that still has validation errors (drawer "Save and Continue" soft-save). Host sets false for transactional + unsubscribe. */
     readonly allowSaveWithErrors: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
     readonly reusableRecommendationStrategy: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+    /** Items block: Recommendation-style price formatting (root currency-* attrs, raw price tags). Released dark. */
+    readonly itemsPriceFormatting: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
 }, undefined>;
 /**
  * Default block types available in Stripo
@@ -832,6 +834,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
         /** Allow persisting a template that still has validation errors (drawer "Save and Continue" soft-save). Host sets false for transactional + unsubscribe. */
         readonly allowSaveWithErrors: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
         readonly reusableRecommendationStrategy: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+        /** Items block: Recommendation-style price formatting (root currency-* attrs, raw price tags). Released dark. */
+        readonly itemsPriceFormatting: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
     }, undefined>, {}>;
     /** Block configuration */
     readonly blocks: v.OptionalSchema<v.ObjectSchema<{

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

@@ -104,6 +104,7 @@ export declare const useConfig: () => {
             linkTrackingIds: boolean;
             allowSaveWithErrors: boolean;
             reusableRecommendationStrategy: boolean;
+            itemsPriceFormatting: boolean;
         };
         blocks: {
             excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -243,6 +244,7 @@ export declare const useConfig: () => {
         linkTrackingIds: boolean;
         allowSaveWithErrors: boolean;
         reusableRecommendationStrategy: boolean;
+        itemsPriceFormatting: boolean;
     } | null>;
     blocks: import("vue").ComputedRef<{
         excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];

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

@@ -1,3 +1,6 @@
 import type { LegacyRecommendationConfig } from '@@/Types/config';
 import { type PartnerScopeMigrationOptions } from './recommendationPartnerMigrator';
-export declare const migrate: (html: string, recommendationConfigs?: Record<string, LegacyRecommendationConfig>, partnerScope?: PartnerScopeMigrationOptions) => Promise<string>;
+export interface MigrationFeatureFlags {
+    itemsPriceFormatting?: boolean;
+}
+export declare const migrate: (html: string, recommendationConfigs?: Record<string, LegacyRecommendationConfig>, partnerScope?: PartnerScopeMigrationOptions, features?: MigrationFeatureFlags) => Promise<string>;

package/dist/src/config/migrator/itemsPriceFormatMigrator.d.ts

@@ -0,0 +1 @@
+export declare function migrateItemsPriceFormat(html: string): string;

package/dist/src/config/migrator/recommendation/compositionMapper.d.ts

@@ -1,2 +1,4 @@
 import { type LegacyVariable, type MappedComposition } from './types';
-export declare function mapComposition(variables: LegacyVariable[] | undefined): MappedComposition;
+export declare function mapComposition(variables: LegacyVariable[] | undefined, { oldPriceFirst }?: {
+    oldPriceFirst?: boolean;
+}): MappedComposition;

package/dist/src/config/migrator/recommendation/extractors.d.ts

@@ -1,3 +1,4 @@
+import type { LegacyPaddingViewport, LegacyVariable } from './types';
 export declare function extractTitleText(block: Element): string;
 /**
  * Fallback for legacy configs that carry no `p_recommendation_title` variable:
@@ -7,6 +8,31 @@ export declare function extractTitleText(block: Element): string;
  * @returns True when the legacy block renders a visible title
  */
 export declare function hasVisibleTitle(block: Element): boolean;
+/**
+ * A rendered title container with no text showed the user no title, whatever the config's `hidden` flag says.
+ * @param block - The legacy recommendation block element
+ * @returns True when the legacy block renders an empty title container
+ */
+export declare function hasEmptyTitle(block: Element): boolean;
+/**
+ * Reads which price the legacy card renders first. Prices sharing a `positionIdx` are ordered by this.
+ * @param block - The legacy recommendation block element
+ * @returns True only when both prices render and the original price comes first
+ */
+export declare function isOldPriceFirst(block: Element): boolean;
+/**
+ * Reads the legacy "Move to next line" state from the rendered card, for blocks whose config does not carry it.
+ * @param block - The legacy recommendation block element
+ * @returns True only when both prices render in separate rows and neither row is laid out inline (`table-cell`)
+ */
+export declare function isPriceOnNextLine(block: Element): boolean;
+/**
+ * Legacy keeps the text color and the name's trim toggle in the rendered `<p>`, not in the config theme.
+ * @param variables - The legacy composition variables
+ * @param block - The legacy recommendation block element
+ * @returns The variables, with `textColor` / `textTrimming` filled from the rendered HTML where the theme lacks them
+ */
+export declare function withRenderedTextTheme(variables: LegacyVariable[] | undefined, block: Element): LegacyVariable[] | undefined;
 /**
  * Card background lives on either the block (`bgcolor`/`style`) or per-card
  * cells (`.product-card`). Returns empty string when no background is set —
@@ -14,13 +40,16 @@ export declare function hasVisibleTitle(block: Element): boolean;
  */
 export declare function extractCardBgColor(block: Element): string;
 /**
- * Reads the legacy block's own `currency-*` attributes into a
- * `currencySettings`-shaped object that `mapCurrency` understands. Used as a
- * fallback when the external recommendationConfigs map has no entry for this
- * block, so the migrated block keeps its real currency instead of defaulting.
- * Returns undefined when the block carries no `currency` attribute.
+ * `currencySettings` for a block whose legacy config has none: the code and symbol come from the block,
+ * the formatting from the legacy editor's defaults, which it rendered without reading the block's attributes.
+ */
+export declare function extractCurrencyFromBlock(block: Element): Record<string, string | number>;
+/**
+ * Block padding as the legacy product row renders it, for configs whose theme has no `blockPadding`.
+ * @param block - The legacy recommendation block element
+ * @returns The row's `es-p{n}{side}` padding, or undefined when the block has no product row
  */
-export declare function extractCurrencyFromBlock(block: Element): Record<string, string> | undefined;
+export declare function extractRenderedBlockPadding(block: Element): LegacyPaddingViewport | undefined;
 /**
  * True when a PM has manually opted the legacy block out of content
  * regeneration by adding the `ins-skip-compile` class. Detected before rebuild

package/dist/src/config/migrator/recommendation/htmlBuilder.d.ts

@@ -1,4 +1,4 @@
-import type { MappedComposition } from './types';
+import type { MappedBlockPadding, MappedComposition } from './types';
 import type { RecommendationNodeConfig } from '@@/Extensions/Blocks/Recommendation/types/nodeConfig';
 export declare function buildBlockHtml(params: {
     nodeConfig: RecommendationNodeConfig;
@@ -16,4 +16,6 @@ export declare function buildBlockHtml(params: {
     preserveInnerHtml?: string;
     /** Adds the `ins-skip-compile` opt-out class to the migrated block. */
     skipCompile?: boolean;
+    /** Legacy desktop block padding; without it the block keeps the default `es-p20`. */
+    blockPadding?: MappedBlockPadding;
 }): string;

package/dist/src/config/migrator/recommendation/themeMapper.d.ts

@@ -1,5 +1,7 @@
-import type { LegacyButtonTheme, LegacyImageTheme, LegacyTextTheme, MappedButtonStyle, MappedImageStyle, MappedTextStyle } from './types';
+import type { LegacyButtonTheme, LegacyImageTheme, LegacyPaddingViewport, LegacyTextTheme, MappedBlockPadding, MappedButtonStyle, MappedImageStyle, MappedTextStyle } from './types';
 export declare function mapTextTheme(theme: LegacyTextTheme | undefined): MappedTextStyle;
 export declare function mapButtonTheme(theme: LegacyButtonTheme | undefined): MappedButtonStyle;
 export declare function mapImageTheme(theme: LegacyImageTheme | undefined): MappedImageStyle;
+/** Stripo `es-p{n}{side}` classes where a step class exists, inline `padding-{side}` otherwise; 0 needs neither. */
+export declare function mapBlockPadding(padding: LegacyPaddingViewport | undefined): MappedBlockPadding | undefined;
 export declare function appendStyle(existing: string | undefined, addition: string | undefined): string;

package/dist/src/config/migrator/recommendation/types.d.ts

@@ -30,7 +30,9 @@ export interface LegacyPadding {
 /** Border-radius shape — observed in two flavours: shorthand or per-corner. */
 export interface LegacyBorderRadius {
     /** Single shorthand value (e.g. `radius: 4`). */
-    radius?: number;
+    radius?: number | string;
+    /** Shorthand the legacy button theme stores under `theme.borderRadius` (e.g. `borderRadius: "4"`). */
+    borderRadius?: number | string;
     /** Per-corner: top-left / top-right / bottom-right / bottom-left (in px). */
     lt?: number;
     rt?: number;
@@ -96,6 +98,7 @@ export interface LegacyButtonTheme {
         color?: LegacySides<string>;
     };
     buttonBorderRadius?: LegacyBorderRadius;
+    borderRadius?: LegacyBorderRadius;
     buttonAlign?: {
         align?: string;
     };
@@ -167,6 +170,13 @@ export interface MappedTextStyle {
     /** True if `textTrimming: true` in theme. */
     textTrimming: boolean;
 }
+/** Resolved block wrapper padding. */
+export interface MappedBlockPadding {
+    /** Space-separated `es-p{n}{side}` classes. */
+    classes: string;
+    /** Inline `padding-{side}` declarations for values without a step class. */
+    style: string;
+}
 /** Resolved button styles. */
 export interface MappedButtonStyle {
     /** Inline CSS for outer `<td>` (external padding). */

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

@@ -71,15 +71,12 @@ export declare class ItemsBlock extends Block {
      */
     private _resolveInstanceId;
     /**
-     * Stamps the export-read currency attrs onto every price `<p>` from config, so a template whose
-     * attrs drifted (e.g. a location toggle before the sync fix) self-heals to match the editor.
-     * Config is the source of truth — never derive from visible text.
-     *
-     * Authority split lives in `currencyAttrTargets` (SD-147588) — position only when a location
-     * is recorded, symbol only when customized — so this heal and the module-drop repair can't drift.
-     *
-     * Returns true only when an attr actually changed, so the caller can skip an empty apply that
-     * would otherwise re-trigger onDocumentChanged and loop.
+     * Single self-heal slot: the flag only decides whether a legacy root is converted; a root
+     * already in the new format is reconciled from config regardless. Returns whether anything was queued.
      */
     private _reconcileCurrencyDomAttributes;
+    /** Legacy `<p>` contract via `currencyAttrTargets`: position when recorded, symbol only when custom. */
+    private _reconcileLegacyCurrencyAttributes;
+    private _priceParagraphs;
+    private _isPriceFormattingEnabled;
 }

package/dist/src/extensions/Blocks/Items/constants/currency.d.ts

@@ -41,3 +41,35 @@ export declare function currencyAttrTargets(config: {
     priceCurrencyLocation?: string;
     priceCurrencySymbol?: string;
 }): CurrencyAttrTargets;
+export declare const ITEMS_PRICE_FORMAT_ATTR: {
+    readonly SYMBOL: "currency-symbol";
+    readonly ALIGNMENT: "currency-alignment";
+    readonly THOUSAND_SEPARATOR: "currency-thousand-separator";
+    readonly DECIMAL_SEPARATOR: "currency-decimal-separator";
+    readonly DECIMAL_COUNT: "currency-decimal-count";
+    readonly SINGLE_PRICE: "data-single_price";
+};
+/** Price `<p>` attrs of the legacy model; a new-format block carries none of them. */
+export declare const LEGACY_PRICE_PARAGRAPH_ATTRS: readonly ["data-formated", "data-single_price", "data-curency", "data-currency_symbol"];
+export declare const PRICE_FORMAT_CONFIG_KEYS: readonly ["priceThousandSeparator", "priceDecimalSeparator", "priceDecimalCount"];
+export interface ItemsPriceFormat {
+    thousandSeparator: string;
+    decimalSeparator: string;
+    decimalCount: number;
+}
+/** en-US, the shape the legacy pre-formatted price tags produced. */
+export declare const DEFAULT_ITEMS_PRICE_FORMAT: ItemsPriceFormat;
+export interface PriceFormatConfigSlice {
+    priceThousandSeparator?: string;
+    priceDecimalSeparator?: string;
+    priceDecimalCount?: number;
+}
+export declare function normalizeDecimalCount(value: unknown): number;
+/** Config → format, defaulting each missing key independently. */
+export declare function priceFormatFromConfig(config: PriceFormatConfigSlice | null | undefined): ItemsPriceFormat;
+export declare function isNewPriceFormatConfig(config: PriceFormatConfigSlice | null | undefined): boolean;
+export interface AttributeReader {
+    getAttribute(name: string): string | null | undefined;
+}
+/** The export/control switch: a root carrying `currency-decimal-count` is in the new format. */
+export declare function isNewPriceFormatRoot(root: AttributeReader | null | undefined): boolean;

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

@@ -11,7 +11,6 @@ export declare class ItemsBlockCardCompositionControl extends CommonControl {
         name: string;
         label: string;
     }): string;
-    _initializeToggles(): void;
     _updateTogglesFromState(): void;
     _syncVisibilityFromAttributes(): void;
     /**

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

@@ -0,0 +1,23 @@
+import { ControlApi, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../common-control';
+import { ItemsBlockControlId } from '../enums/controlEnums';
+import { type ItemsBlockConfig } from '../utils/nodeConfigUtils';
+export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_FORMAT;
+export declare function isNewPriceFormatBlock(currentNode: ImmutableHtmlNode | undefined): boolean;
+/** One apply: the config patch, the root attrs the export reads, and both price texts re-rendered. */
+export declare function applyPriceFormatChange(currentNode: ImmutableHtmlNode | undefined, api: ControlApi, patch: Partial<ItemsBlockConfig>, description: string): void;
+export declare class ItemsBlockPriceFormatControl extends CommonControl {
+    private lastWritten;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    _onThousandSeparatorChange(value: string): void;
+    _onDecimalSeparatorChange(value: string): void;
+    _onDecimalCountChange(value: string): void;
+    private _currentFormat;
+    private _write;
+    private _formValues;
+    private _getSelectRow;
+}

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

@@ -35,6 +35,7 @@ export declare class ItemsBlockControl extends CommonControl {
     _reFillTemplate(itemsType?: ProductType): void;
     _recalculateTrimming(): void;
     private _getParagraphFromBlock;
+    private _replacePriceText;
     private _escapeRegex;
     private _removeCurrencySymbol;
     private _replacePriceNumber;

package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts

@@ -46,6 +46,7 @@ export declare enum ItemsBlockControlId {
     PRICE_CURRENCY_SYMBOL = "items-block-price-currency-symbol-control",
     PRICE_CURRENCY_LOCATION = "items-block-price-currency-location-control",
     PRICE_ORIENTATION = "items-block-price-orientation-control",
+    PRICE_FORMAT = "items-block-price-format-control",
     NAME_ALIGN = "items-block-name-align-control",
     NAME_COLOR = "items-block-name-color-control",
     NAME_SIZE = "items-block-name-size-control",

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

@@ -1,3 +1,4 @@
+import { type ItemsPriceFormat } from './constants/currency';
 import { type ItemsBlockConfig } from './utils/nodeConfigUtils';
 declare const migrationTemplate = "ADD YOUR MIGRATION HERE";
 type ProductType = 'CART_ITEMS' | 'BROWSED_ITEMS' | 'PURCHASED_ITEMS';
@@ -36,6 +37,8 @@ type TemplateParameters = {
     quantityStyles?: string;
     /** Price orientation within the card ('vertical' = stacked, 'horizontal' = side-by-side) */
     priceOrientation?: PriceOrientationType;
+    /** New price model (itemsPriceFormatting): root attrs + raw dummy amounts; absent = legacy output. */
+    priceFormat?: ItemsPriceFormat;
 };
 /**
  * Applies price orientation styles to the generated HTML template.
@@ -67,5 +70,5 @@ export declare const applyPriceOrientationStyles: (html: string, layoutOrientati
  * @param params.formattedPrice - Whether to use formatted price display
  * @returns HTML template string for the Items Block
  */
-export declare function getDefaultTemplate({ orientation, itemsType, itemId, currencySymbol, currencyLocation, migrate, formattedPrice, configBlockAttributes, nodeConfig, nameStyles, buttonStyles, priceStyles, originalPriceStyles, quantityStyles, priceOrientation, }: TemplateParameters): string;
+export declare function getDefaultTemplate({ orientation, itemsType, itemId, currencySymbol, currencyLocation, migrate, formattedPrice, configBlockAttributes, nodeConfig, nameStyles, buttonStyles, priceStyles, originalPriceStyles, quantityStyles, priceOrientation, priceFormat, }: TemplateParameters): string;
 export default migrationTemplate;

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

@@ -18,6 +18,9 @@ export interface ItemsBlockConfig {
     priceCurrencySymbol: string;
     priceCurrencyLocation: string;
     priceOrientation: 'vertical' | 'horizontal';
+    priceThousandSeparator?: string;
+    priceDecimalSeparator?: string;
+    priceDecimalCount?: number;
     quantityControlEnabled: boolean;
     buttonLink: string;
     imageLink: string;