@useinsider/guido 2.0.0-beta.1c331b8 → 2.0.0-beta.1f72712

package/dist/extensions/Blocks/Recommendation/block.js

@@ -1,7 +1,8 @@
-import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as o } from "./templates/vertical/template.js";
+import { Block as o, BlockCompositionType as i } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationConfigService as t } from "./services/configService.js";
+import { getDefaultTemplate as r } from "./templates/vertical/template.js";
 const n = "recommendation-block";
-class m extends e {
+class g extends o {
   constructor() {
     super();
   }
@@ -12,7 +13,7 @@ class m extends e {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return t.CONTAINER;
+    return i.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -21,10 +22,43 @@ class m extends e {
     return this.api.translate("Recommendation Block Title Description");
   }
   getTemplate() {
-    return o();
+    return r();
+  }
+  /**
+   * Called when a new block is dropped into the template
+   *
+   * Initializes the block with default configuration stored via node config.
+   * This ensures the configuration persists with the template.
+   * @param node - The newly created block node
+   */
+  onCreated(e) {
+    t.initializeConfig(this.api, e);
+  }
+  /**
+   * Called when the document changes or template is loaded
+   *
+   * Handles migration from legacy templates that don't have node config.
+   * Also handles config version upgrades for future migrations.
+   * @param node - The block node that may need migration
+   */
+  onDocumentChanged(e) {
+    !e || !("getNodeConfig" in e) || t.needsMigration(e) && this._migrateFromLegacy(e);
+  }
+  /**
+   * Migrate configuration from legacy format
+   *
+   * Legacy templates may store configuration in:
+   * - data-attributes (data-layout, data-card-composition, etc.)
+   * - Pinia store (lost on reload - this is what we're fixing)
+   *
+   * This method reads what we can from the DOM and initializes proper node config.
+   * @param node - The block node to migrate
+   */
+  _migrateFromLegacy(e) {
+    t.migrateFromDataAttributes(this.api, e);
   }
 }
 export {
   n as BLOCK_ID,
-  m as RecommendationBlock
+  g as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -0,0 +1,64 @@
+import { DEFAULT_ROW_SPACING as s, DEFAULT_COLUMN_SPACING as R, DEFAULT_CARDS_IN_ROW as n } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as e, ATTR_PRODUCT_OLD_PRICE as T, ATTR_PRODUCT_PRICE as o, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as U } from "./selectors.js";
+const I = {
+  code: "USD",
+  symbol: "USD",
+  alignment: "after",
+  decimalCount: 2,
+  decimalSeparator: ".",
+  thousandSeparator: ","
+}, O = {
+  textBefore: "",
+  textAfter: ""
+}, i = {
+  textBefore: "",
+  textAfter: ""
+}, C = [
+  t,
+  e,
+  T,
+  o,
+  _,
+  r,
+  U
+], D = {
+  [t]: !0,
+  [e]: !0,
+  [o]: !0,
+  [T]: !0,
+  [_]: !1,
+  [r]: !1,
+  [U]: !0
+}, a = {
+  // Settings
+  strategy: "mostPopular",
+  productIds: [],
+  size: "6",
+  shuffleProducts: !1,
+  language: "en_US",
+  currency: I,
+  filters: [],
+  // Layout
+  layout: "vertical",
+  cardsInRow: n,
+  columnSpacing: R,
+  rowSpacing: s,
+  // Composition
+  composition: C,
+  visibility: D,
+  // Element settings
+  omnibusPrice: O,
+  omnibusDiscount: i,
+  textTrimming: !1,
+  // Meta
+  configVersion: 1
+}, E = 1;
+export {
+  E as CURRENT_CONFIG_VERSION,
+  C as DEFAULT_COMPOSITION,
+  I as DEFAULT_CURRENCY,
+  a as DEFAULT_NODE_CONFIG,
+  i as DEFAULT_OMNIBUS_DISCOUNT,
+  O as DEFAULT_OMNIBUS_PRICE,
+  D as DEFAULT_VISIBILITY
+};

package/dist/extensions/Blocks/Recommendation/constants/layout.js

@@ -1,7 +1,12 @@
-const _ = 3, R = 3, O = 9, D = 4;
+const _ = 3, A = 3, C = 9, P = 4, o = 10, t = 20, R = 0, c = 50, n = 5;
 export {
-  R as DEFAULT_CARDS_IN_ROW,
+  A as DEFAULT_CARDS_IN_ROW,
+  o as DEFAULT_COLUMN_SPACING,
   _ as DEFAULT_PRODUCTS_PER_ROW,
-  D as MAX_PRODUCTS_PER_ROW,
-  O as MAX_PRODUCT_COUNT
+  t as DEFAULT_ROW_SPACING,
+  P as MAX_PRODUCTS_PER_ROW,
+  C as MAX_PRODUCT_COUNT,
+  c as MAX_SPACING,
+  R as MIN_SPACING,
+  n as SPACING_STEP
 };

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -1,11 +1,19 @@
-const T = ".ins-recommendation-product-container", c = "productImage", o = "productName", t = "productPrice", R = "productOldPrice", _ = "productOmnibusPrice", n = "productOmnibusDiscount", O = "productButton";
+const c = ".ins-recommendation-product-container", T = {
+  CURRENCY: "currency",
+  SYMBOL: "currency-symbol",
+  ALIGNMENT: "currency-alignment",
+  THOUSAND_SEPARATOR: "currency-thousand-separator",
+  DECIMAL_SEPARATOR: "currency-decimal-separator",
+  DECIMAL_COUNT: "currency-decimal-count"
+}, r = "productImage", n = "productName", o = "productPrice", t = "productOldPrice", R = "productOmnibusPrice", O = "productOmnibusDiscount", _ = "productButton";
 export {
-  O as ATTR_PRODUCT_BUTTON,
-  c as ATTR_PRODUCT_IMAGE,
-  o as ATTR_PRODUCT_NAME,
-  R as ATTR_PRODUCT_OLD_PRICE,
-  n as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  _ as ATTR_PRODUCT_OMNIBUS_PRICE,
-  t as ATTR_PRODUCT_PRICE,
-  T as CONTAINER_SELECTOR
+  _ as ATTR_PRODUCT_BUTTON,
+  r as ATTR_PRODUCT_IMAGE,
+  n as ATTR_PRODUCT_NAME,
+  t as ATTR_PRODUCT_OLD_PRICE,
+  O as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  R as ATTR_PRODUCT_OMNIBUS_PRICE,
+  o as ATTR_PRODUCT_PRICE,
+  c as CONTAINER_SELECTOR,
+  T as CURRENCY_ATTR
 };

package/dist/extensions/Blocks/Recommendation/controls/cardComposition/index.js

@@ -1,33 +1,34 @@
-var C = Object.defineProperty;
-var f = (a, s, t) => s in a ? C(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
-var c = (a, s, t) => f(a, typeof s != "symbol" ? s + "" : s, t);
-import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as O } from "../../../common-control.js";
-import { ATTR_PRODUCT_IMAGE as g, ATTR_PRODUCT_NAME as R, ATTR_PRODUCT_PRICE as A, ATTR_PRODUCT_OLD_PRICE as N, ATTR_PRODUCT_OMNIBUS_PRICE as D, ATTR_PRODUCT_OMNIBUS_DISCOUNT as E, ATTR_PRODUCT_BUTTON as I } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as V } from "../../store/recommendation.js";
+var T = Object.defineProperty;
+var C = (a, n, t) => n in a ? T(a, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[n] = t;
+var l = (a, n, t) => C(a, typeof n != "symbol" ? n + "" : n, t);
+import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
+import { ATTR_PRODUCT_IMAGE as O, ATTR_PRODUCT_NAME as g, ATTR_PRODUCT_PRICE as R, ATTR_PRODUCT_OLD_PRICE as A, ATTR_PRODUCT_OMNIBUS_PRICE as D, ATTR_PRODUCT_OMNIBUS_DISCOUNT as N, ATTR_PRODUCT_BUTTON as V } from "../../constants/selectors.js";
+import { useRecommendationExtensionStore as E } from "../../store/recommendation.js";
+import { getTableDisplayValue as I } from "../../utils/tagName.js";
 import { getCurrentLayout as P } from "../main/utils.js";
 const S = "ui-elements-recommendation-card-composition", k = {
   ORDERABLE: "cardComposition"
-}, b = ".recommendation-attribute-row", v = ".product-card-wrapper > tbody", T = "data-card-composition", p = "data-attribute-type", y = "data-visibility", n = [
-  { key: g, label: "Product Image", visible: !0 },
-  { key: R, label: "Product Name", visible: !0 },
-  { key: A, label: "Product Price", visible: !0 },
-  { key: N, label: "Product Original Price", visible: !0 },
+}, c = ".recommendation-attribute-row", v = ".product-card-wrapper > tbody", _ = "data-card-composition", d = "data-attribute-type", m = "data-visibility", s = [
+  { key: O, label: "Product Image", visible: !0 },
+  { key: g, label: "Product Name", visible: !0 },
+  { key: R, label: "Product Price", visible: !0 },
+  { key: A, label: "Product Original Price", visible: !0 },
   { key: D, label: "Omnibus Price", visible: !1 },
-  { key: E, label: "Omnibus Discount", visible: !1 },
-  { key: I, label: "Product Button", visible: !0 }
+  { key: N, label: "Omnibus Discount", visible: !1 },
+  { key: V, label: "Product Button", visible: !0 }
 ];
-class q extends O {
+class H extends f {
   constructor() {
     super(...arguments);
-    c(this, "store", V());
-    c(this, "unsubscribeOrientation", null);
+    l(this, "store", E());
+    l(this, "unsubscribeOrientation", null);
   }
   getId() {
     return S;
   }
   getTemplate() {
-    const t = n.map((e) => ({
+    const t = s.map((e) => ({
       key: e.key,
       label: e.label,
       content: this._createItemContent(e.label, e.key)
@@ -63,7 +64,7 @@ class q extends O {
   _registerValueChangeListeners() {
     this.api.onValueChanged("cardComposition", (t) => {
       this._applyCompositionToBlock(t);
-    }), n.forEach((t) => {
+    }), s.forEach((t) => {
       this.api.onValueChanged(`visibility_${t.key}`, (e) => {
         this._applyVisibilityToBlock(t.key, e);
       });
@@ -85,15 +86,15 @@ class q extends O {
    */
   _readCompositionFromNode() {
     if (!this.currentNode || !("getAttribute" in this.currentNode))
-      return n.map((e) => e.key);
-    const t = this.currentNode.getAttribute(T);
-    return t ? t.split(",").filter(Boolean) : n.map((e) => e.key);
+      return s.map((e) => e.key);
+    const t = this.currentNode.getAttribute(_);
+    return t ? t.split(",").filter(Boolean) : s.map((e) => e.key);
   }
   /**
    * Builds visibility values object from the visibility map
    */
   _buildVisibilityValues(t) {
-    return n.reduce((e, i) => (e[`visibility_${i.key}`] = t[i.key] ?? !0, e), {});
+    return s.reduce((e, i) => (e[`visibility_${i.key}`] = t[i.key] ?? !0, e), {});
   }
   /**
    * Read visibility state from individual row elements' data-visibility attributes
@@ -102,14 +103,14 @@ class q extends O {
   _readVisibilityFromRows() {
     if (!this.currentNode)
       return this._getDefaultVisibilities();
-    const t = Array.from(this.currentNode.querySelectorAll(b)), e = this._extractVisibilityFromRows(t);
+    const t = Array.from(this.currentNode.querySelectorAll(c)), e = this._extractVisibilityFromRows(t);
     return this._mergeWithDefaults(e);
   }
   /**
    * Returns default visibility values for all items
    */
   _getDefaultVisibilities() {
-    return n.reduce((t, e) => (t[e.key] = e.visible, t), {});
+    return s.reduce((t, e) => (t[e.key] = e.visible, t), {});
   }
   /**
    * Extracts visibility values from DOM nodes
@@ -119,8 +120,8 @@ class q extends O {
     return t.forEach((i) => {
       if (!("getAttribute" in i))
         return;
-      const r = i.getAttribute(p), o = i.getAttribute(y);
-      r && o !== null && (e[r] = this._parseVisibilityValue(o));
+      const o = i.getAttribute(d), r = i.getAttribute(m);
+      o && r !== null && (e[o] = this._parseVisibilityValue(r));
     }), e;
   }
   /**
@@ -134,7 +135,7 @@ class q extends O {
    * Merges extracted visibilities with default values for missing keys
    */
   _mergeWithDefaults(t) {
-    return n.forEach((e) => {
+    return s.forEach((e) => {
       e.key in t || (t[e.key] = e.visible);
     }), t;
   }
@@ -147,7 +148,7 @@ class q extends O {
     if (!this.currentNode)
       return;
     const e = this._getCurrentLayout();
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(T, t.join(",")).apply(new d("Update card composition")), e === "vertical" && this._reorderProductAttributes(t);
+    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(_, t.join(",")).apply(new u("Update card composition")), e === "vertical" && this._reorderProductAttributes(t);
   }
   /**
    * Reorders attribute rows within each product card based on composition order
@@ -160,18 +161,18 @@ class q extends O {
     if (!(e != null && e.length))
       return;
     const i = this.api.getDocumentModifier();
-    e.forEach((r) => {
-      const o = this._buildCompositionHtml(r, t);
-      i.modifyHtml(r).setInnerHtml(o);
-    }), i.apply(new d("Reorder product attributes"));
+    e.forEach((o) => {
+      const r = this._buildCompositionHtml(o, t);
+      i.modifyHtml(o).setInnerHtml(r);
+    }), i.apply(new u("Reorder product attributes"));
   }
   /**
    * Builds HTML string with attributes ordered according to composition
    */
   _buildCompositionHtml(t, e) {
-    return e.reduce((i, r) => {
-      const o = t.querySelector(`${b}[${p}="${r}"]`);
-      return o && "getOuterHTML" in o ? i + o.getOuterHTML() : i;
+    return e.reduce((i, o) => {
+      const r = t.querySelector(`${c}[${d}="${o}"]`);
+      return r && "getOuterHTML" in r ? i + r.getOuterHTML() : i;
     }, "");
   }
   /**
@@ -183,21 +184,14 @@ class q extends O {
   _applyVisibilityToBlock(t, e) {
     if (!this.currentNode)
       return;
-    const i = this.currentNode.querySelectorAll(`${b}[${p}="${t}"]`);
+    const i = this.currentNode.querySelectorAll(`${c}[${d}="${t}"]`);
     if (!(i != null && i.length))
       return;
-    const r = e ? "1" : "0", o = `Set ${t} visibility to ${e ? "visible" : "hidden"}`, m = this.api.getDocumentModifier();
-    i.forEach((l) => {
-      let u = "TR";
-      if ("tagName" in l && l.tagName)
-        u = l.tagName.toUpperCase();
-      else if ("getTagName" in l) {
-        const _ = l;
-        typeof _.getTagName == "function" && (u = _.getTagName().toUpperCase());
-      }
-      const h = e ? u === "TD" || u === "BLOCK_IMAGE" || u === "BLOCK_BUTTON" ? "table-cell" : "table-row" : "none";
-      m.modifyHtml(l).setStyle("display", h).setAttribute(y, r);
-    }), m.apply(new d(o));
+    const o = e ? "1" : "0", r = `Set ${t} visibility to ${e ? "visible" : "hidden"}`, b = this.api.getDocumentModifier();
+    i.forEach((p) => {
+      const y = I(p), h = e ? y : "none";
+      b.modifyHtml(p).setStyle("display", h).setAttribute(m, o);
+    }), b.apply(new u(r));
   }
   /**
    * Gets the current layout orientation from store or DOM
@@ -213,11 +207,11 @@ class q extends O {
     const e = this._getCurrentLayout() === "horizontal", i = this.getContainer();
     if (!i)
       return;
-    const r = i.querySelector("[data-card-composition-control]");
-    if (!r)
+    const o = i.querySelector("[data-card-composition-control]");
+    if (!o)
       return;
-    const o = r.querySelector("ue-orderable");
-    o && o.classList.toggle("orderable-disabled", e);
+    const r = o.querySelector("ue-orderable");
+    r && r.classList.toggle("orderable-disabled", e);
   }
   /**
    * Subscribe to store orientation changes
@@ -234,5 +228,5 @@ class q extends O {
 }
 export {
   S as COMPOSITION_CONTROL_BLOCK_ID,
-  q as RecommendationCardCompositionControl
+  H as RecommendationCardCompositionControl
 };

package/dist/extensions/Blocks/Recommendation/controls/layout/index.js

@@ -1,29 +1,30 @@
-var h = Object.defineProperty;
-var p = (e, o, t) => o in e ? h(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
-var i = (e, o, t) => p(e, typeof o != "symbol" ? o + "" : o, t);
-import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as g } from "../../../common-control.js";
+var g = Object.defineProperty;
+var p = (e, o, t) => o in e ? g(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
+var s = (e, o, t) => p(e, typeof o != "symbol" ? o + "" : o, t);
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as f } from "../../../common-control.js";
 import { CONTAINER_SELECTOR as C } from "../../constants/selectors.js";
-import { useRecommendationExtensionStore as f } from "../../store/recommendation.js";
-import { prepareProductRows as L } from "../../templates/index.js";
-import { getCurrentLayout as u, getBlockElement as T, getCurrentCardBackgroundColor as y, getCardComposition as N, applyCardBackgroundColor as _ } from "../main/utils.js";
-import { getDefaultProducts as O } from "../../templates/utils.js";
-const R = "recommendation-layout-control", s = {
+import { RecommendationConfigService as i } from "../../services/configService.js";
+import { useRecommendationExtensionStore as L } from "../../store/recommendation.js";
+import { prepareProductRows as y } from "../../templates/index.js";
+import { getCurrentLayout as d, getBlockElement as N, getCurrentCardBackgroundColor as T, getCardComposition as _, applyCardBackgroundColor as O } from "../main/utils.js";
+import { getDefaultProducts as R } from "../../templates/utils.js";
+const A = "recommendation-layout-control", a = {
   LAYOUT: "layout"
-}, A = {
+}, U = {
   LAYOUT: "data-layout"
-}, U = [
+}, w = [
   { text: "Vertical", value: "vertical" },
   { text: "Horizontal", value: "horizontal" }
 ];
-class I extends g {
+class V extends f {
   constructor() {
     super(...arguments);
-    i(this, "store", f());
-    i(this, "isChangingLayout", !1);
+    s(this, "store", L());
+    s(this, "isChangingLayout", !1);
   }
   getId() {
-    return R;
+    return A;
   }
   getTemplate() {
     return `
@@ -31,8 +32,8 @@ class I extends g {
                 ${this._GuTwoColumns([
       this._GuLabel({ text: "Layout Orientation" }),
       this._GuRadioButton({
-        name: s.LAYOUT,
-        buttons: U
+        name: a.LAYOUT,
+        buttons: w
       })
     ])}
             </div>
@@ -45,27 +46,32 @@ class I extends g {
     super.onTemplateNodeUpdated(t), this._setFormValues();
   }
   _setFormValues() {
-    const t = u(this.currentNode);
+    const r = i.getConfig(this.currentNode).layout || d(this.currentNode);
     this.api.updateValues({
-      [s.LAYOUT]: t
+      [a.LAYOUT]: r
     });
   }
   /**
    * Handles layout change
-   * Updates the block's data attribute and regenerates product rows
+   * Updates node config, data attribute and regenerates product rows
    */
   _onLayoutChange(t) {
-    if (this.isChangingLayout || u(this.currentNode) === t)
+    if (this.isChangingLayout || !this.currentNode || (i.getConfig(this.currentNode).layout || d(this.currentNode)) === t)
       return;
-    const r = T(this.currentNode);
-    if (r) {
+    const n = N(this.currentNode);
+    if (n) {
       this.isChangingLayout = !0;
       try {
-        this.store.$patch({
+        i.updateConfig(
+          this.api,
+          this.currentNode,
+          { layout: t },
+          `Changed layout to ${t}`
+        ), this.store.$patch({
           recommendationConfigs: {
             orientation: t
           }
-        }), this.api.getDocumentModifier().modifyHtml(r).setAttribute(A.LAYOUT, t).apply(new a(`Update layout to ${t}`)), this._regenerateProductRows(t);
+        }), this.api.getDocumentModifier().modifyHtml(n).setAttribute(U.LAYOUT, t).apply(new c(`Update layout to ${t}`)), this._regenerateProductRows(t);
       } finally {
         this.isChangingLayout = !1;
       }
@@ -78,27 +84,27 @@ class I extends g {
   _regenerateProductRows(t) {
     if (!this.currentNode || !("querySelector" in this.currentNode))
       return;
-    const n = this.currentNode.querySelector(C);
-    if (!n)
+    const r = this.currentNode.querySelector(C);
+    if (!r)
       return;
-    const r = y(this.currentNode), c = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : O(), { cardsInRow: d } = this.store.recommendationConfigs, m = N(this.currentNode), l = L(c, t, {
-      productsPerRow: d,
-      composition: m
+    const u = T(this.currentNode), n = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : R(), m = i.getConfig(this.currentNode), l = _(this.currentNode), h = y(n, t, {
+      productsPerRow: m.cardsInRow,
+      composition: l
     });
-    this.api.getDocumentModifier().modifyHtml(n).setInnerHtml(l).apply(new a(`Regenerated products for ${t} layout`)), _({
+    this.api.getDocumentModifier().modifyHtml(r).setInnerHtml(h).apply(new c(`Regenerated products for ${t} layout`)), O({
       currentNode: this.currentNode,
       documentModifier: this.api.getDocumentModifier(),
-      bgColor: r,
+      bgColor: u,
       layout: t
     });
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(s.LAYOUT, (t) => {
+    this.api.onValueChanged(a.LAYOUT, (t) => {
       this._onLayoutChange(t);
     });
   }
 }
 export {
-  R as LAYOUT_CONTROL_ID,
-  I as LayoutControl
+  A as LAYOUT_CONTROL_ID,
+  V as LayoutControl
 };

package/dist/extensions/Blocks/Recommendation/controls/main/algorithm.js

@@ -1,20 +1,22 @@
-var r = Object.defineProperty;
-var a = (s, i, t) => i in s ? r(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var n = (s, i, t) => a(s, typeof i != "symbol" ? i + "" : i, t);
-import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as m } from "../../../common-control.js";
-import { useRecommendationExtensionStore as h } from "../../store/recommendation.js";
-const c = "recommendation-algorithm-control", e = {
+var d = Object.defineProperty;
+var c = (o, i, t) => i in o ? d(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var a = (o, i, t) => c(o, typeof i != "symbol" ? i + "" : i, t);
+import { UEAttr as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationConfigService as n } from "../../services/configService.js";
+import { useRecommendationExtensionStore as m } from "../../store/recommendation.js";
+const g = "recommendation-algorithm-control", e = {
   ALGORITHM: "strategy",
   PRODUCT_IDS: "productIds"
 };
-class _ extends m {
+class T extends l {
   constructor() {
     super(...arguments);
-    n(this, "store", h());
+    // Store is used ONLY for API-fetched data (algorithms list), not for config
+    a(this, "store", m());
   }
   getId() {
-    return c;
+    return g;
   }
   getTemplate() {
     return `
@@ -39,36 +41,58 @@ class _ extends m {
   onRender() {
     this._initializeSelectItems(), this._setFormValues(), this._listenToFormUpdates();
   }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
   _setFormValues() {
-    const { recommendationConfigs: t } = this.store;
-    this._setProductIdsVisibility(), this.api.updateValues({
+    const t = n.getConfig(this.currentNode);
+    this._setProductIdsVisibility(t.strategy), this.api.updateValues({
       [e.ALGORITHM]: t.strategy,
       [e.PRODUCT_IDS]: t.productIds.join(",")
     });
   }
   _initializeSelectItems() {
-    this.api.setUIEAttribute(
-      e.ALGORITHM,
-      l.SELECTPICKER.items,
-      this.store.getActivePredictiveAlgorithms
-    );
+    var s;
+    const t = (s = this.store) == null ? void 0 : s.getActivePredictiveAlgorithms;
+    if (t != null && t.length)
+      try {
+        this.api.setUIEAttribute(
+          e.ALGORITHM,
+          h.SELECTPICKER.items,
+          t
+        );
+      } catch (r) {
+        console.warn("[AlgorithmControl] Failed to set algorithm options:", r);
+      }
   }
-  _setProductIdsVisibility() {
-    const { recommendationConfigs: t } = this.store, o = t.strategy === "manualMerchandising";
-    this.api.setVisibility(e.PRODUCT_IDS, o), this.api.setVisibility(`${e.PRODUCT_IDS}_label`, o);
+  _setProductIdsVisibility(t) {
+    const r = (t ?? n.getConfig(this.currentNode).strategy) === "manualMerchandising";
+    this.api.setVisibility(e.PRODUCT_IDS, r), this.api.setVisibility(`${e.PRODUCT_IDS}_label`, r);
   }
   _onAlgorithmChange(t) {
-    this.store.$patch({
+    this.currentNode && (n.updateConfig(
+      this.api,
+      this.currentNode,
+      { strategy: t },
+      `Changed algorithm to ${t}`
+    ), this.store.$patch({
       recommendationConfigs: {
         strategy: t
       }
-    }), this._setProductIdsVisibility();
+    }), this._setProductIdsVisibility(t));
   }
   _onProductIdsChange(t) {
-    const o = t.split(",").filter(Boolean);
-    this.store.$patch({
+    if (!this.currentNode)
+      return;
+    const s = t.split(",").map((r) => r.trim()).filter(Boolean);
+    n.updateConfig(
+      this.api,
+      this.currentNode,
+      { productIds: s },
+      "Updated product IDs"
+    ), this.store.$patch({
       recommendationConfigs: {
-        productIds: o
+        productIds: s
       }
     });
   }
@@ -81,6 +105,6 @@ class _ extends m {
   }
 }
 export {
-  c as ALGORITHM_CONTROL_ID,
-  _ as AlgorithmControl
+  g as ALGORITHM_CONTROL_ID,
+  T as AlgorithmControl
 };