@useinsider/guido 1.0.3-beta.a024c62 → 1.0.3-beta.a04f37a

package/README.md

@@ -198,7 +198,6 @@ interface GuidoConfig {
     saveAsTemplate: boolean;
     versionHistory: boolean;
     testMessage: boolean;
-    displayConditions: boolean;
   };
   blocks?: {
     excludeDefaults?: GuidoBlockType[];
@@ -217,7 +216,6 @@ interface GuidoConfig {
 | `features.dynamicContent` | `boolean` | `true` | Enable dynamic content insertion feature |
 | `features.saveAsTemplate` | `boolean` | `true` | Enable save as template feature |
 | `features.versionHistory` | `boolean` | `true` | Enable version history feature |
-| `features.displayConditions` | `boolean` | `true` | Enable display conditions |
 | `blocks` | `BlocksConfig` | `{ excludeDefaults: [], includeCustoms: [] }` | Block configuration for excluding default blocks and including custom blocks. See [Blocks Configuration](#-blocks-configuration) section below |
 | `blocks.excludeDefaults` | `GuidoBlockType[]` | `[]` | Array of default Stripo blocks to exclude from the editor |
 | `blocks.includeCustoms` | `GuidoCustomBlockType[]` | `[]` | Array of custom blocks to include in the editor |
@@ -600,9 +598,6 @@ Create a `.env` file with the following variables: (You can get env variables fr
 VITE_STRIPO_PLUGIN_ID=your_plugin_id
 VITE_STRIPO_SECRET_KEY=your_secret_key
 VITE_STRIPO_ROLE=your_role
-
-# Playwright Test Configuration (Optional - for local debugging only)
-HEADED=false  # Set to 'true' to run tests with visible browser
 ```
 
 ### Project Structure

package/dist/components/Guido.vue.js

@@ -12,7 +12,7 @@ var t = function() {
   n,
   !1,
   null,
-  "23c413c9"
+  "e299731b"
 );
 const v = s.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,23 +1,23 @@
-import { defineComponent as O, defineAsyncComponent as I, ref as z, computed as U, watch as B, onMounted as K, onUnmounted as j } from "vue";
-import { provideGuidoActions as q } from "../composables/useGuidoActions.js";
-import { usePartner as J } from "../composables/usePartner.js";
-import { useStripo as Q } from "../composables/useStripo.js";
-import { migrate as L } from "../config/migrator/index.js";
-import { DefaultUsername as V, DefaultMessageType as X, DefaultGuidoConfig as Y } from "../enums/defaults.js";
-import Z from "./organisms/base/Toaster.vue.js";
-import $ from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import ee from "./organisms/header/HeaderWrapper.vue.js";
-import oe from "./organisms/LoadingWrapper.vue.js";
-import te from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import ne from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as re } from "../services/stripoApi.js";
-import { useConfigStore as ie } from "../stores/config.js";
-import { useDynamicContentStore as se } from "../stores/dynamic-content.js";
-import { useEditorStore as ae } from "../stores/editor.js";
-import { usePreviewStore as ce } from "../stores/preview.js";
-import { useUnsubscribeStore as me } from "../stores/unsubscribe.js";
-import de from "../node_modules/lodash-es/merge.js";
-const Ue = /* @__PURE__ */ O({
+import { defineComponent as R, defineAsyncComponent as G, ref as x, computed as I, watch as M, onMounted as z, onUnmounted as B } from "vue";
+import { provideGuidoActions as K } from "../composables/useGuidoActions.js";
+import { usePartner as O } from "../composables/usePartner.js";
+import { useStripo as j } from "../composables/useStripo.js";
+import { migrate as U } from "../config/migrator/index.js";
+import { DefaultUsername as q, DefaultMessageType as J, DefaultGuidoConfig as Q } from "../enums/defaults.js";
+import V from "./organisms/base/Toaster.vue.js";
+import X from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import Y from "./organisms/header/HeaderWrapper.vue.js";
+import Z from "./organisms/LoadingWrapper.vue.js";
+import $ from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import ee from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as oe } from "../services/stripoApi.js";
+import { useConfigStore as te } from "../stores/config.js";
+import { useDynamicContentStore as ne } from "../stores/dynamic-content.js";
+import { useEditorStore as re } from "../stores/editor.js";
+import { usePreviewStore as ie } from "../stores/preview.js";
+import { useUnsubscribeStore as se } from "../stores/unsubscribe.js";
+import ae from "../node_modules/lodash-es/merge.js";
+const ke = /* @__PURE__ */ R({
   __name: "Guido",
   props: {
     templateId: null,
@@ -33,45 +33,45 @@ const Ue = /* @__PURE__ */ O({
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
   setup(W, { expose: _, emit: o }) {
-    const u = W, A = I(
+    const l = W, L = G(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), N = I(
+    ), A = G(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), p = z(), i = se(), g = me(), f = ie(), s = ae(), F = ce(), n = U(() => s.hasChanges), { getPartnerName: y, getProductType: v, isTestPartner: H } = J(), b = () => {
+    ), u = x(), i = ne(), p = se(), g = te(), s = re(), N = ie(), n = I(() => s.hasChanges), { getPartnerName: f, getProductType: y, isTestPartner: F } = O(), v = () => {
       var e;
-      return (e = p.value) == null ? void 0 : e.handleSave(!0);
+      return (e = u.value) == null ? void 0 : e.handleSave(!0);
     }, {
       templateId: a,
-      userId: C,
-      guidoConfig: h,
+      userId: b,
+      guidoConfig: C,
       templateConfig: t,
       html: r = "",
-      css: S = "",
-      partnerName: c = y(),
-      productType: m = v(),
-      messageType: w = X,
-      username: D = V
-    } = u, d = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
-    s.templateId = a, window.GuidoConfig = de(Y, h), window.GuidoConfig.partner = {
+      css: h = "",
+      partnerName: c = f(),
+      productType: d = y(),
+      messageType: S = J,
+      username: w = q
+    } = l, m = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
+    s.templateId = a, window.GuidoConfig = ae(Q, C), window.GuidoConfig.partner = {
       partnerName: c,
-      productType: m,
-      messageType: w
-    }, f.templateConfig = t;
-    const { initPlugin: E } = Q({
+      productType: d,
+      messageType: S
+    }, g.templateConfig = t;
+    const { initPlugin: D } = j({
       emailId: a,
-      userId: C,
-      username: D,
+      userId: b,
+      username: w,
       partnerName: c,
-      productType: m,
-      preselectedDynamicContentList: d,
+      productType: d,
+      preselectedDynamicContentList: m,
       onReady: () => {
         console.debug("guido:ready"), o("ready");
       }
-    }), { getDefaultTemplate: T } = re(), R = U(() => {
+    }), { getDefaultTemplate: T } = oe(), H = I(() => {
       var e;
       return !((e = window.GuidoConfig) != null && e.useHeader);
     });
-    q({
+    K({
       onBack: () => {
         console.debug("guido:back"), o("back");
       },
@@ -85,35 +85,32 @@ const Ue = /* @__PURE__ */ O({
         console.debug("guido:test-email:click"), o("test-email:click");
       }
     });
-    const P = (e) => {
+    const E = (e) => {
       console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, k = () => {
+    }, P = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    B(() => n.value, () => {
+    return M(() => n.value, () => {
       o("on-change", n.value);
-    });
-    const l = (e) => {
-      const G = e, { attribute: x, position: M } = G.detail;
-      console.debug("dynamic-content:open", G.detail), o("dynamic-content:open", x, M);
-    };
-    return K(async () => {
+    }), z(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
-        g.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
+        p.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
         let e = {
-          html: r && await L(r),
-          css: S,
+          html: r && await U(r),
+          css: h,
           forceRecreate: !0
           // TODO: It should be false for old templates. We will communicate with Stripo
         };
-        e.html || (e = await T(), e.html = await L(e.html)), await E(e), i.selectedDynamicContentList = d;
+        e.html || (e = await T(), e.html = await U(e.html)), await D(e), i.selectedDynamicContentList = m;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
-      document.addEventListener("dynamic-content:open", l);
-    }), j(() => {
-      document.removeEventListener("dynamic-content:open", l);
+      document.addEventListener("dynamic-content:open", (e) => {
+        const k = e;
+        console.debug("dynamic-content:open", k.detail), o("dynamic-content:open", k.detail);
+      });
+    }), B(() => {
       try {
         window.UIEditor.removeEditor();
       } catch {
@@ -121,14 +118,14 @@ const Ue = /* @__PURE__ */ O({
       }
     }), _({
       dynamicContent: {
-        insert: P,
-        close: k
+        insert: E,
+        close: P
       },
       hasChanges: n,
-      saveSilent: b
-    }), { __sfc: !0, PreviewContainer: A, OnboardingWrapper: N, headerWrapperRef: p, dynamicContentStore: i, unsubscribeStore: g, props: u, configStore: f, editorStore: s, previewStore: F, hasChanges: n, getPartnerName: y, getProductType: v, isTestPartner: H, saveSilent: b, templateId: a, userId: C, guidoConfig: h, templateConfig: t, html: r, css: S, partnerName: c, productType: m, messageType: w, username: D, preselectedDynamicContentList: d, emit: o, initPlugin: E, getDefaultTemplate: T, noHeader: R, insertDynamicContent: P, closeDynamicContent: k, handleDynamicContentOpen: l, Toaster: Z, FilterSelectionDrawer: $, HeaderWrapper: ee, LoadingWrapper: oe, SaveAsTemplateDrawer: te, UnsubscribeWrapper: ne };
+      saveSilent: v
+    }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: A, headerWrapperRef: u, dynamicContentStore: i, unsubscribeStore: p, props: l, configStore: g, editorStore: s, previewStore: N, hasChanges: n, getPartnerName: f, getProductType: y, isTestPartner: F, saveSilent: v, templateId: a, userId: b, guidoConfig: C, templateConfig: t, html: r, css: h, partnerName: c, productType: d, messageType: S, username: w, preselectedDynamicContentList: m, emit: o, initPlugin: D, getDefaultTemplate: T, noHeader: H, insertDynamicContent: E, closeDynamicContent: P, Toaster: V, FilterSelectionDrawer: X, HeaderWrapper: Y, LoadingWrapper: Z, SaveAsTemplateDrawer: $, UnsubscribeWrapper: ee };
   }
 });
 export {
-  Ue as default
+  ke as default
 };

package/dist/composables/useStripo.js

@@ -1,25 +1,23 @@
-import { useActionsApi as h } from "./useActionsApi.js";
-import { useBlocksConfig as b } from "./useBlocksConfig.js";
-import { useConfig as k } from "./useConfig.js";
-import { useCustomInterfaceAppearance as B } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as V } from "./useStripoEventHandler.js";
-import { useToaster as _ } from "./useToaster.js";
-import { displayConditions as F } from "../enums/displayConditions.js";
-import { useStripoApi as A } from "../services/stripoApi.js";
-import T from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as v } from "../stores/editor.js";
-import { dynamicContentToMergeTags as I } from "../utils/genericUtil.js";
-import M from "../package.json.js";
-const N = (d) => {
-  const { config: u } = k(), { handleError: l } = _(), { getToken: f, getCustomFonts: S } = A(), { handleEvent: C } = V(), { getStripoBlocksConfig: y } = b(), E = async (i, r = []) => {
-    var m, g;
-    const t = v(), { html: n, css: p, forceRecreate: a } = i, { baseBlocks: e, extensions: c } = await y();
+import { useActionsApi as y } from "./useActionsApi.js";
+import { useBlocksConfig as E } from "./useBlocksConfig.js";
+import { useCustomInterfaceAppearance as w } from "./useCustomInterfaceAppearance.js";
+import { useStripoEventHandler as h } from "./useStripoEventHandler.js";
+import { useToaster as b } from "./useToaster.js";
+import { displayConditions as k } from "../enums/displayConditions.js";
+import { useStripoApi as B } from "../services/stripoApi.js";
+import V from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as _ } from "../stores/editor.js";
+import { dynamicContentToMergeTags as F } from "../utils/genericUtil.js";
+import A from "../package.json.js";
+const L = (d) => {
+  const { handleError: u } = b(), { getToken: p, getCustomFonts: m } = B(), { handleEvent: g } = h(), { getStripoBlocksConfig: f } = E(), S = async (r, i = []) => {
+    const t = _(), { html: n, css: l, forceRecreate: a } = r, { baseBlocks: e, extensions: c } = await f();
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: d,
         html: n,
-        css: p,
+        css: l,
         forceRecreate: a,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
@@ -30,10 +28,10 @@ const N = (d) => {
         customAppearanceMergetags: !0,
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: T,
-        conditionsEnabled: ((m = u.features) == null ? void 0 : m.displayConditions) ?? !0,
-        customConditionsEnabled: ((g = u.features) == null ? void 0 : g.displayConditions) ?? !0,
-        conditionCategories: F,
+        customViewStyles: V,
+        conditionsEnabled: !0,
+        customConditionsEnabled: !0,
+        conditionCategories: k,
         enableXSSSecurity: !0,
         messageSettingsEnabled: !1,
         selectBlockAfterDropFromSettingsPanel: !0,
@@ -41,29 +39,29 @@ const N = (d) => {
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: r
+          customFonts: i
         },
         mergeTags: [
           {
-            entries: I(d.preselectedDynamicContentList)
+            entries: F(d.preselectedDynamicContentList)
           }
         ],
         async onTokenRefreshRequest(o) {
           try {
-            const s = await f();
+            const s = await p();
             o(s);
           } catch (s) {
-            l(s, "Failed to refresh token");
+            u(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: o } = B(), { activateCustomViewStyles: s } = h();
+            const { importCss: o } = w(), { activateCustomViewStyles: s } = y();
             o(), s(), d.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
               t.hasChanges = !1;
             }, 1e3);
           } catch (o) {
-            l(o, "Failed to load custom interface appearance");
+            u(o, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(o) {
@@ -78,7 +76,7 @@ const N = (d) => {
         onDataChanged() {
           t.hasChanges = !0;
         },
-        onEvent: C,
+        onEvent: g,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
@@ -87,26 +85,26 @@ const N = (d) => {
         extensions: c
       }
     );
-  }, w = (i) => new Promise((r, t) => {
+  }, C = (r) => new Promise((i, t) => {
     var c;
     if (document.getElementById("UiEditorScript")) {
-      i(), r();
+      r(), i();
       return;
     }
-    const n = M.guido, a = `https://email-static.useinsider.com/guido/${(c = n == null ? void 0 : n.stripo) == null ? void 0 : c.version}/UIEditor.js`, e = document.createElement("script");
+    const n = A.guido, a = `https://email-static.useinsider.com/guido/${(c = n == null ? void 0 : n.stripo) == null ? void 0 : c.version}/UIEditor.js`, e = document.createElement("script");
     e.id = "UiEditorScript", e.type = "module", e.src = a, e.onload = () => {
-      i(), r();
+      r(), i();
     }, e.onerror = () => {
       t(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
     }, document.body.appendChild(e);
   });
-  return { initPlugin: async (i) => {
-    await w(async () => {
-      const r = await S();
-      await E(i, r);
+  return { initPlugin: async (r) => {
+    await C(async () => {
+      const i = await m();
+      await S(r, i);
     });
   } };
 };
 export {
-  N as useStripo
+  L as useStripo
 };

package/dist/enums/defaults.js

@@ -16,8 +16,7 @@ const e = {
     dynamicContent: !0,
     saveAsTemplate: !0,
     versionHistory: !0,
-    testMessage: !0,
-    displayConditions: !0
+    testMessage: !0
   },
   useHeader: !0
 }, t = {

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -133,7 +133,7 @@ const a = c(), d = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), G = p("guidoRecommendationExtension", {
+}), G = p("recommendationExtension", {
   state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,

package/dist/extensions/DynamicContent/dynamic-content-modal.js

@@ -1,33 +1,27 @@
-var d = Object.defineProperty;
-var m = (t, e, n) => e in t ? d(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var c = (t, e, n) => m(t, typeof e != "symbol" ? e + "" : e, n);
-class C {
+var i = Object.defineProperty;
+var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
+class y {
   constructor() {
-    c(this, "selectedDynamicContent", null);
-    c(this, "dataSelectCallback", () => {
+    a(this, "selectedDynamicContent", null);
+    a(this, "dataSelectCallback", () => {
     });
-    c(this, "closeDynamicContentHandler", null);
   }
-  /**
-   * Opens the merge tags library modal
-   * @param dynamicContent - Currently selected dynamic content (if any)
-   * @param onDataSelectCallback - Callback invoked when user selects a merge tag
-   * @param position - Optional position data to place the modal
-   */
-  openMergeTagsLibrary(e, n, l) {
-    this.closeDynamicContentHandler && (document.removeEventListener("dynamic-content:close", this.closeDynamicContentHandler), this.closeDynamicContentHandler = null), this.dataSelectCallback = n, this.selectedDynamicContent = e;
-    const o = {
-      attribute: e,
-      position: l
-    }, s = new CustomEvent("dynamic-content:open", {
-      detail: o
+  openMergeTagsLibrary(e, n) {
+    this.dataSelectCallback = n, this.selectedDynamicContent = e;
+    const s = new CustomEvent("dynamic-content:open", {
+      detail: {
+        attribute: e
+      }
     });
-    document.dispatchEvent(s), this.closeDynamicContentHandler = (i) => {
-      const a = i.detail;
-      this.selectedDynamicContent = a, a.text && a.value && this.dataSelectCallback(a);
-    }, document.addEventListener("dynamic-content:close", this.closeDynamicContentHandler);
+    document.dispatchEvent(s);
+    const o = (l) => {
+      const c = l.detail;
+      this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
+    };
+    document.addEventListener("dynamic-content:close", o);
   }
 }
 export {
-  C as ExternalMergeTagsLibrary
+  y as ExternalMergeTagsLibrary
 };

package/dist/extensions/DynamicContent/dynamic-content.js

@@ -1,156 +1,61 @@
-var c = Object.defineProperty;
-var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
-var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
-import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
-import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
-const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
-class p extends T {
-  registerUiElements(s) {
-    s[a.MERGETAGS] = l;
+var o = Object.defineProperty;
+var g = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var i = (n, t, e) => g(n, typeof t != "symbol" ? t + "" : t, e);
+import { dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
+import { UIElement as c, UIElementType as r, UEAttr as l, UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExternalMergeTagsLibrary as T } from "./dynamic-content-modal.js";
+const a = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
+class p extends d {
+  registerUiElements(t) {
+    t[r.MERGETAGS] = a;
   }
 }
-class b extends u {
+class C extends c {
   constructor() {
     super(...arguments);
-    r(this, "mergeTagsButton", null);
-    r(this, "mergeTagsLibrary", null);
-    r(this, "clickListener", null);
-    r(this, "lastClickedElement", null);
-    r(this, "lastClickedFrame", null);
-    r(this, "mousedownListener", null);
+    i(this, "mergeTagsButton", null);
+    i(this, "listener", () => {
+    });
+    i(this, "mergeTagsLibrary", null);
+    i(this, "selectedDynamicContent", { value: "", text: "" });
   }
   getId() {
-    return l;
+    return a;
   }
-  onRender(t) {
-    var e;
-    this.mergeTagsButton = t.querySelector("#guido__btn-add-dynamic-content"), this.clickListener = this._onClick.bind(this), (e = this.mergeTagsButton) == null || e.addEventListener("click", this.clickListener), this._setupCoordinateTracking();
+  onRender(e) {
+    var s;
+    this.listener = this._onClick.bind(this), this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), (s = this.mergeTagsButton) == null || s.addEventListener("click", this.listener);
   }
   onDestroy() {
-    var t;
-    this.clickListener && ((t = this.mergeTagsButton) == null || t.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.mergeTagsButton = null, this.clickListener = null, this.lastClickedElement = null, this.lastClickedFrame = null;
+    var e;
+    (e = this.mergeTagsButton) == null || e.removeEventListener("click", this.listener);
   }
   _onClick() {
     this.openMergeTagLibrary();
   }
-  /**
-   * Called when Stripo detects merge tag interactions
-   * This is the key method that receives notifications about merge tag clicks
-   * @param name - Attribute name (e.g., 'mergeTag')
-   * @param value - MergeTag object with label, value, selStart, selEnd, etc.
-   */
-  onAttributeUpdated(t, e) {
-    if (t !== "mergeTag" || !(e != null && e.value))
-      return;
-    const n = d(e), i = this._getLastClickedPosition();
-    this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
-  }
   openMergeTagLibrary() {
-    const t = this._getButtonPosition(), e = { value: "", text: "" };
-    this._openDynamicContentLibrary(e, t);
-  }
-  /**
-   * Opens the dynamic content library for external apps
-   * Dispatches event with dynamic content data and position
-   */
-  _openDynamicContentLibrary(t, e) {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
-      t,
-      (n) => {
-        n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
-      },
-      e
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new T()), this.mergeTagsLibrary.openMergeTagsLibrary(
+      this.selectedDynamicContent,
+      (e) => {
+        this.api.onValueChanged(m([e])[0]);
+      }
     );
   }
-  /**
-   * Gets the button's position on the screen
-   * Used to position the modal or anything else near the button
-   */
-  _getButtonPosition() {
-    if (!this.mergeTagsButton)
-      return { x: 0, y: 0, width: 0, height: 0 };
-    const { x: t, y: e, width: n, height: i } = this.mergeTagsButton.getBoundingClientRect();
-    return { x: t, y: e, width: n, height: i };
-  }
-  /**
-   * Sets up coordinate tracking for merge tag clicks in the iframe
-   * Workaround from Stripo intercepting click events - tracks mousedown events instead
-   */
-  _setupCoordinateTracking() {
-    var e;
-    const t = this._getEditorFrame();
-    (e = t == null ? void 0 : t.contentWindow) != null && e.document && (this.mousedownListener = (n) => {
-      const i = this._findMergeTagElement(n.target);
-      i && (this.lastClickedElement = i, this.lastClickedFrame = t);
-    }, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener));
-  }
-  /**
-   * Gets the editor iframe element
-   */
-  _getEditorFrame() {
-    var n;
-    const t = document.querySelector("ui-editor");
-    if (!(t != null && t.shadowRoot))
-      return null;
-    const e = t.shadowRoot.querySelector("iframe");
-    return (n = e == null ? void 0 : e.contentWindow) != null && n.document ? e : null;
-  }
-  /**
-   * Finds merge tag element in the element tree
-   */
-  _findMergeTagElement(t) {
-    return t.closest(".target, .esd-merge-tag");
-  }
-  /**
-   * Gets the position of the last clicked element, calculated on-demand
-   * This ensures we always use the correct element's position even with rapid clicks
-   */
-  _getLastClickedPosition() {
-    if (!(!this.lastClickedElement || !this.lastClickedFrame))
-      return this._calculateAbsolutePosition(this.lastClickedFrame, this.lastClickedElement);
-  }
-  /**
-   * Calculates absolute position of element relative to page
-   */
-  _calculateAbsolutePosition(t, e) {
-    const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
-    return {
-      x: n.x + i.x,
-      y: n.y + i.y,
-      width: i.width,
-      height: i.height
-    };
-  }
-  /**
-   * Cleans up the coordinate tracking event listener
-   */
-  _cleanupCoordinateTracking() {
-    var e;
-    if (!this.mousedownListener)
-      return;
-    const t = this._getEditorFrame();
-    (e = t == null ? void 0 : t.contentWindow) != null && e.document && t.contentWindow.document.removeEventListener("mousedown", this.mousedownListener), this.mousedownListener = null;
-  }
-  /**
-   * Returns the HTML template for the "Add Dynamic Content" button
-   * This button is placed in the merge tags selector UI
-   */
   getTemplate() {
     return `
             <div>
-                <${a.BUTTON} 
+                <${r.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${h.BUTTON.name}="${C}">
-                        <${a.ICON} src="plus" class="icon icon-button color-primary">
-                        </${a.ICON}>
+                    ${l.BUTTON.name}="${y}">
+                        <${r.ICON} src="plus" class="icon icon-button color-primary">
+                        </${r.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
-                </${a.BUTTON}>
+                </${r.BUTTON}>
             </div>`;
   }
 }
 export {
   p as DynamicContentTagRegistry,
-  b as DynamicContentUiElementExtension
+  C as DynamicContentUiElementExtension
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.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}.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}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-23c413c9],.guido-editor__container[data-v-23c413c9]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-23c413c9]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.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}.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}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-e299731b],.guido-editor__container[data-v-e299731b]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-e299731b]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/@types/generic.d.ts

@@ -7,7 +7,6 @@ type Features = {
     saveAsTemplate?: boolean;
     versionHistory?: boolean;
     testMessage?: boolean;
-    displayConditions?: boolean;
 };
 type Partner = {
     partnerName: string;
@@ -38,39 +37,15 @@ export type TemplateConfig = {
     selectedUnsubscribePages?: number[];
     variationId?: string;
 };
-export type BaseDynamicContent = {
+export type DynamicContent = {
     value: string;
+    text: string;
     fallback?: string;
     format?: {
         key: string;
         value: string;
     };
 };
-export type DynamicContent = BaseDynamicContent & {
-    text: string;
-};
-export type MergeTag = BaseDynamicContent & {
-    label: string;
-    selStart?: number;
-    selEnd?: number;
-    hidden?: boolean;
-};
-export type PositionData = {
-    x: number;
-    y: number;
-    width?: number;
-    height?: number;
-};
-export type DynamicContentEvent = {
-    attribute: DynamicContent;
-    position?: PositionData;
-};
-export type MergeTagClickEvent = {
-    position: PositionData;
-    element: HTMLElement;
-    tagValue: string | null;
-    tagLabel: string | null;
-};
 export interface EmailHeader {
     senderName: string;
     subject: string;
@@ -86,6 +61,10 @@ export interface TooltipOptions {
     };
     preventXss?: boolean;
 }
+export type MergeTag = {
+    label: string;
+    value: string;
+};
 export type TextValueObject = {
     text: string;
     value: string;

package/dist/src/components/Guido.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DynamicContent, GuidoConfig, PositionData, TemplateConfig } from '@@/Types/generic';
+import type { DynamicContent, GuidoConfig, TemplateConfig } from '@@/Types/generic';
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 type __VLS_Props = {
     templateId: string;
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
     hasChanges: import("vue").ComputedRef<boolean>;
     saveSilent: () => Promise<SavedTemplateDetails | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
-    "dynamic-content:open": (detail: DynamicContent | null, position?: PositionData | undefined) => void;
+    "dynamic-content:open": (detail: DynamicContent | null) => void;
     back: () => void;
     "save:start": () => void;
     "save:complete": (data: Omit<SavedTemplateDetails, "forceRecreate">) => void;

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -34,7 +34,7 @@ interface StoreState {
     filterList: FiltersResponse;
     filterGroup: number;
 }
-export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"guidoRecommendationExtension", StoreState, {
+export declare const useRecommendationExtensionStore: import("pinia").StoreDefinition<"recommendationExtension", StoreState, {
     hasFilters: (state: {
         recommendationCampaignUrls: Record<string, string>;
         recommendationConfigs: {

package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts

@@ -1,13 +1,6 @@
-import type { DynamicContent, PositionData } from '@@/Types/generic';
+import type { DynamicContent } from '@@/Types/generic';
 export declare class ExternalMergeTagsLibrary {
     selectedDynamicContent: DynamicContent | null;
     dataSelectCallback: (data: DynamicContent) => void;
-    private closeDynamicContentHandler;
-    /**
-     * Opens the merge tags library modal
-     * @param dynamicContent - Currently selected dynamic content (if any)
-     * @param onDataSelectCallback - Callback invoked when user selects a merge tag
-     * @param position - Optional position data to place the modal
-     */
-    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void, position?: PositionData): void;
+    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void): void;
 }

package/dist/src/extensions/DynamicContent/dynamic-content.d.ts

@@ -1,66 +1,16 @@
-import type { MergeTag } from '@@/Types/generic';
 import { UIElementType, UIElement, UIElementTagRegistry } from '@stripoinc/ui-editor-extensions';
 export declare class DynamicContentTagRegistry extends UIElementTagRegistry {
     registerUiElements(uiElementsTagsMap: Record<UIElementType, string>): void;
 }
 export declare class DynamicContentUiElementExtension extends UIElement {
     private mergeTagsButton;
+    private listener;
     private mergeTagsLibrary;
-    private clickListener;
-    private lastClickedElement;
-    private lastClickedFrame;
-    private mousedownListener;
+    private selectedDynamicContent;
     getId(): string;
     onRender(container: HTMLElement): void;
     onDestroy(): void;
     _onClick(): void;
-    /**
-     * Called when Stripo detects merge tag interactions
-     * This is the key method that receives notifications about merge tag clicks
-     * @param name - Attribute name (e.g., 'mergeTag')
-     * @param value - MergeTag object with label, value, selStart, selEnd, etc.
-     */
-    onAttributeUpdated(name: string, value: MergeTag | null | undefined): void;
     openMergeTagLibrary(): void;
-    /**
-     * Opens the dynamic content library for external apps
-     * Dispatches event with dynamic content data and position
-     */
-    private _openDynamicContentLibrary;
-    /**
-     * Gets the button's position on the screen
-     * Used to position the modal or anything else near the button
-     */
-    private _getButtonPosition;
-    /**
-     * Sets up coordinate tracking for merge tag clicks in the iframe
-     * Workaround from Stripo intercepting click events - tracks mousedown events instead
-     */
-    private _setupCoordinateTracking;
-    /**
-     * Gets the editor iframe element
-     */
-    private _getEditorFrame;
-    /**
-     * Finds merge tag element in the element tree
-     */
-    private _findMergeTagElement;
-    /**
-     * Gets the position of the last clicked element, calculated on-demand
-     * This ensures we always use the correct element's position even with rapid clicks
-     */
-    private _getLastClickedPosition;
-    /**
-     * Calculates absolute position of element relative to page
-     */
-    private _calculateAbsolutePosition;
-    /**
-     * Cleans up the coordinate tracking event listener
-     */
-    private _cleanupCoordinateTracking;
-    /**
-     * Returns the HTML template for the "Add Dynamic Content" button
-     * This button is placed in the merge tags selector UI
-     */
     getTemplate(): string;
 }

package/dist/src/stores/config.d.ts

@@ -3,7 +3,7 @@ interface StoreState {
     guidoConfig: GuidoConfig;
     templateConfig?: TemplateConfig;
 }
-export declare const useConfigStore: import("pinia").StoreDefinition<"guidoConfig", StoreState, {
+export declare const useConfigStore: import("pinia").StoreDefinition<"config", StoreState, {
     getVariationId: (state: {
         guidoConfig: {
             translationsPath: string;
@@ -78,7 +78,6 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guidoConfi
                 saveAsTemplate?: boolean | undefined;
                 versionHistory?: boolean | undefined;
                 testMessage?: boolean | undefined;
-                displayConditions?: boolean | undefined;
             } | undefined;
             blocks?: {
                 excludeDefaults?: import("@@/Types/generic").GuidoBlockType[] | undefined;
@@ -89,12 +88,12 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guidoConfi
         templateConfig?: {
             preselectedDynamicContentList?: {
                 value: string;
+                text: string;
                 fallback?: string | undefined;
                 format?: {
                     key: string;
                     value: string;
                 } | undefined;
-                text: string;
             }[] | undefined;
             selectedUnsubscribePages?: number[] | undefined;
             variationId?: string | undefined;

package/dist/src/stores/dynamic-content.d.ts

@@ -1,26 +1,26 @@
 import type { DynamicContent } from '@@/Types/generic';
-export declare const useDynamicContentStore: import("pinia").StoreDefinition<"guidoDynamicContent", {
+export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dynamicContent", {
     selectedDynamicContent: DynamicContent;
     selectedDynamicContentList: DynamicContent[];
 }, {
     getSelectedDynamicContentList: (state: {
         selectedDynamicContent: {
             value: string;
+            text: string;
             fallback?: string | undefined;
             format?: {
                 key: string;
                 value: string;
             } | undefined;
-            text: string;
         };
         selectedDynamicContentList: {
             value: string;
+            text: string;
             fallback?: string | undefined;
             format?: {
                 key: string;
                 value: string;
             } | undefined;
-            text: string;
         }[];
     } & import("pinia").PiniaCustomStateProperties<{
         selectedDynamicContent: DynamicContent;

package/dist/src/stores/editor.d.ts

@@ -1,4 +1,4 @@
-export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEditor", {
+export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
     loadingStatus: boolean;
     isCodeEditorOpen: boolean;
     isSaveAsTemplateDrawerOpen: boolean;

package/dist/src/stores/onboarding.d.ts

@@ -1,5 +1,5 @@
 import type { OnboardingCardConfig, OnboardingType, OnboardingStoreState } from '@@/Types/onboarding';
-export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoOnboarding", OnboardingStoreState, {
+export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboarding", OnboardingStoreState, {
     getOnboarding: (state: {
         onboardings: {
             newVersionPopup: {

package/dist/src/stores/preview.d.ts

@@ -1,5 +1,5 @@
 import type { PreviewState, EmailFormat } from '@@/Types/preview';
-export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPreview", PreviewState, {
+export declare const usePreviewStore: import("pinia").StoreDefinition<"preview", PreviewState, {
     isAMPModeEnabled: (state: {
         emailFormat: EmailFormat;
         ampHtml: string;

package/dist/src/stores/recommendation.d.ts

@@ -6,5 +6,5 @@ type RecommendationConfig = {
 interface StoreState {
     recommendationConfigs: RecommendationConfig[];
 }
-export declare const useRecommendationStore: import("pinia").StoreDefinition<"guidoRecommendation", StoreState, {}, {}>;
+export declare const useRecommendationStore: import("pinia").StoreDefinition<"recommendation", StoreState, {}, {}>;
 export {};

package/dist/src/stores/save-as-template.d.ts

@@ -17,7 +17,7 @@ interface StoreState {
         message: number;
     };
 }
-export declare const useSaveAsTemplateStore: import("pinia").StoreDefinition<"guidoSaveAsTemplate", StoreState, {
+export declare const useSaveAsTemplateStore: import("pinia").StoreDefinition<"saveAsTemplate", StoreState, {
     getTemplateName: (state: {
         templateName: string;
         categories: {

package/dist/src/stores/toaster.d.ts

@@ -1,5 +1,5 @@
 import type { ToasterState, ToasterOptions } from '@@/Types/toaster';
-export declare const useToasterStore: import("pinia").StoreDefinition<"guidoToaster", ToasterState, {
+export declare const useToasterStore: import("pinia").StoreDefinition<"toaster", ToasterState, {
     shouldAutoHide: (s: {
         status: boolean;
         type: import("@@/Types/toaster").ToasterType;

package/dist/src/stores/unsubscribe.d.ts

@@ -11,7 +11,7 @@ interface StoreState {
     isGlobalUnsubscribeDisabled: boolean;
     isSubscriptionPreferencesCenterDisabled: boolean;
 }
-export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guidoUnsubscribe", StoreState, {
+export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"unsubscribe", StoreState, {
     getSelectedCollection: (state: {
         templates: {
             id: number;

package/dist/src/stores/version-history.d.ts

@@ -2,7 +2,7 @@ import type { VersionHistoryState } from '@@/Types/version-history-api';
 export interface StoreState extends VersionHistoryState {
     editorVisualMode: 'desktop' | 'mobile';
 }
-export declare const useVersionHistoryStore: import("pinia").StoreDefinition<"guidoVersionHistory", StoreState, {
+export declare const useVersionHistoryStore: import("pinia").StoreDefinition<"versionHistory", StoreState, {
     hasPreviousPatch: (state: {
         editorVisualMode: "desktop" | "mobile";
         previousPatch: {

package/dist/src/utils/genericUtil.d.ts

@@ -1,5 +1,4 @@
 import type { DynamicContent, MergeTag } from '@@/Types/generic';
-export declare const mergeTagToDynamicContent: (mergeTag: MergeTag) => DynamicContent;
 export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[]) => MergeTag[];
 export declare const getCsrfToken: () => string;
 /**

package/dist/stores/config.js

@@ -1,8 +1,8 @@
-import { DefaultGuidoConfig as i } from "../enums/defaults.js";
-import { defineStore as e } from "pinia";
-const n = e("guidoConfig", {
+import { DefaultGuidoConfig as e } from "../enums/defaults.js";
+import { defineStore as i } from "pinia";
+const r = i("config", {
   state: () => ({
-    guidoConfig: i,
+    guidoConfig: e,
     templateConfig: {}
   }),
   getters: {
@@ -13,5 +13,5 @@ const n = e("guidoConfig", {
   }
 });
 export {
-  n as useConfigStore
+  r as useConfigStore
 };

package/dist/stores/dynamic-content.js

@@ -1,8 +1,8 @@
 import { removeDuplicatesFromArray as n } from "../utils/arrayUtil.js";
 import { defineStore as a } from "pinia";
-const s = a("guidoDynamicContent", {
+const s = a("dynamicContent", {
   state: () => ({
-    selectedDynamicContent: { text: "", value: "" },
+    selectedDynamicContent: { text: "", value: "", fallback: "" },
     selectedDynamicContentList: []
   }),
   actions: {

package/dist/stores/editor.js

@@ -1,5 +1,5 @@
 import { defineStore as e } from "pinia";
-const o = e("guidoEditor", {
+const o = e("editor", {
   state: () => ({
     loadingStatus: !0,
     isCodeEditorOpen: !1,

package/dist/stores/onboarding.js

@@ -14,41 +14,41 @@ const e = () => ({
   },
   userModalState: {},
   isFetched: !1
-}), c = s("guidoOnboarding", {
+}), g = s("onboarding", {
   state: () => a(),
   getters: {
-    getOnboarding: (n) => (i) => n.onboardings[i],
-    isActive: (n) => (i) => n.onboardings[i].isActive,
-    getCurrentCard: (n) => (i) => {
-      const o = n.onboardings[i];
-      return o.config[o.cardIndex];
+    getOnboarding: (n) => (o) => n.onboardings[o],
+    isActive: (n) => (o) => n.onboardings[o].isActive,
+    getCurrentCard: (n) => (o) => {
+      const i = n.onboardings[o];
+      return i.config[i.cardIndex];
     },
     getGenericCurrentCard: (n) => {
-      const { genericOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { genericOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
     getTextBlockCurrentCard: (n) => {
-      const { textBlockOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { textBlockOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
     getVersionHistoryCurrentCard: (n) => {
-      const { versionHistoryOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { versionHistoryOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
     getAmpCurrentCard: (n) => {
-      const { ampOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { ampOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
-    shouldShowOnboarding: (n) => (i) => {
-      const o = n.userModalState.Guido;
-      return i === "newVersionPopup" && (o != null && o.genericOnboarding) ? !1 : o ? !o[i] : !0;
+    shouldShowOnboarding: (n) => (o) => {
+      const i = n.userModalState.Guido;
+      return o === "newVersionPopup" && (i != null && i.genericOnboarding) ? !1 : i ? !i[o] : !0;
     }
   },
   actions: {
     closeOtherOnboardings(n) {
-      Object.keys(this.onboardings).forEach((i) => {
-        const o = i;
-        o !== n && this.onboardings[o].isActive && (this.onboardings[o].isActive = !1, this.onboardings[o].cardIndex = 0, this.onboardings[o].config = []);
+      Object.keys(this.onboardings).forEach((o) => {
+        const i = o;
+        i !== n && this.onboardings[i].isActive && (this.onboardings[i].isActive = !1, this.onboardings[i].cardIndex = 0, this.onboardings[i].config = []);
       });
     },
     start(n) {
@@ -63,8 +63,8 @@ const e = () => ({
     previous(n) {
       this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
     },
-    setConfig(n, i) {
-      this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
+    setConfig(n, o) {
+      this.onboardings[n].config = o ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },
     async onDiscoverNowClicked() {
       await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido"), this.start("genericOnboarding");
@@ -81,15 +81,15 @@ const e = () => ({
     async fetchUserModalState() {
       if (this.isFetched)
         return;
-      const { fetchUserModalState: n } = t(), i = await n();
-      this.userModalState = i, this.isFetched = !0;
+      const { fetchUserModalState: n } = t(), o = await n();
+      this.userModalState = o, this.isFetched = !0;
     },
-    async setUserModalState(n, i, o) {
+    async setUserModalState(n, o, i) {
       const { setUserModalState: r } = t();
-      await r(n, i, o), this.isFetched = !1, await this.fetchUserModalState();
+      await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
     }
   }
 });
 export {
-  c as useOnboardingStore
+  g as useOnboardingStore
 };

package/dist/stores/preview.js

@@ -6,7 +6,7 @@ const s = () => ({
   templateHtml: "",
   isLoaded: !1,
   isAMPErrorModalVisible: !1
-}), a = e("guidoPreview", {
+}), a = e("preview", {
   state: () => s(),
   getters: {
     isAMPModeEnabled: (t) => t.emailFormat === "AMP",

package/dist/stores/recommendation.js

@@ -1,8 +1,8 @@
 import { defineStore as e } from "pinia";
-const o = () => ({
+const t = () => ({
   recommendationConfigs: []
-}), n = e("guidoRecommendation", {
-  state: () => o()
+}), n = e("recommendation", {
+  state: () => t()
 });
 export {
   n as useRecommendationStore

package/dist/stores/save-as-template.js

@@ -17,7 +17,7 @@ const r = () => ({
     editor: 2,
     message: 1
   }
-}), g = i("guidoSaveAsTemplate", {
+}), n = i("saveAsTemplate", {
   state: () => r(),
   getters: {
     getTemplateName: (e) => e.templateName.trim(),
@@ -44,5 +44,5 @@ const r = () => ({
   }
 });
 export {
-  g as useSaveAsTemplateStore
+  n as useSaveAsTemplateStore
 };

package/dist/stores/toaster.js

@@ -8,7 +8,7 @@ const a = () => ({
   withIcon: !0,
   withoutLeftMargin: !1,
   actionButton: void 0
-}), u = i("guidoToaster", {
+}), u = i("toaster", {
   state: () => a(),
   getters: {
     shouldAutoHide: (t) => t.status && !!t.text

package/dist/stores/unsubscribe.js

@@ -12,7 +12,7 @@ const p = () => ({
   typeSelectionDrawerStatus: !1,
   isGlobalUnsubscribeDisabled: !1,
   isSubscriptionPreferencesCenterDisabled: !1
-}), g = d("guidoUnsubscribe", {
+}), g = d("unsubscribe", {
   state: () => p(),
   getters: {
     getSelectedCollection: (e) => i[e.selectedCollectionType],

package/dist/stores/version-history.js

@@ -5,13 +5,13 @@ const e = () => ({
   description: "",
   authorId: "",
   authorName: ""
-}), i = () => ({
+}), r = () => ({
   previousPatch: e(),
   currentPatch: e(),
   nextPatch: e(),
   editorVisualMode: "desktop"
-}), r = a("guidoVersionHistory", {
-  state: () => i(),
+}), o = a("versionHistory", {
+  state: () => r(),
   getters: {
     hasPreviousPatch: (t) => !!t.previousPatch.id,
     hasCurrentPatch: (t) => !!t.currentPatch.id,
@@ -24,5 +24,5 @@ const e = () => ({
   }
 });
 export {
-  r as useVersionHistoryStore
+  o as useVersionHistoryStore
 };

package/dist/utils/genericUtil.js

@@ -1,26 +1,15 @@
-const s = (e) => {
-  const n = e.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((a) => a.trim()), [r] = n, l = {
-    text: e.label,
-    value: r || ""
-  };
-  if (n.length >= 2) {
-    const [, a, c] = n, o = a.includes("=") ? { key: a.split("=")[0].trim(), value: a.split("=")[1].trim() } : null;
-    o ? l.format = o : c || (l.fallback = a), c && (l.fallback = c);
-  }
-  return l;
-}, f = (e) => e.map((t) => t.format ? {
-  label: `${t.text} | ${t.format.key}=${t.format.value}`,
-  value: `{{${t.value}|${t.format.key}=${t.format.value}}}`
+const o = (e) => e.map((a) => a.format ? {
+  label: `${a.text} | ${a.format.key}=${a.format.value}`,
+  value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
 } : {
-  label: t.fallback ? `${t.text} | ${t.fallback}` : t.text,
-  value: t.fallback ? `{{${t.value}|${t.fallback}}}` : `{{${t.value}}}`
-}), u = () => {
+  label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
+  value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+}), f = () => {
   var e;
   return ((e = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : e.getAttribute("content")) ?? "";
-}, $ = (e = "", t = {}, n = !1) => Object.entries(t).reduce((r, [l, a]) => n && (a === "" || a === null || a === void 0) ? r.replace(`&${l}={${l}}`, "") : r.replace(`{${l}}`, String(a)), e);
+}, $ = (e = "", a = {}, n = !1) => Object.entries(a).reduce((l, [t, r]) => n && (r === "" || r === null || r === void 0) ? l.replace(`&${t}={${t}}`, "") : l.replace(`{${t}}`, String(r)), e);
 export {
-  f as dynamicContentToMergeTags,
-  u as getCsrfToken,
-  s as mergeTagToDynamicContent,
+  o as dynamicContentToMergeTags,
+  f as getCsrfToken,
   $ as replaceString
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.3-beta.a024c62",
+  "version": "1.0.3-beta.a04f37a",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -44,7 +44,7 @@
     "@cspell/eslint-plugin": "8.17.5",
     "@eslint/eslintrc": "3.3.0",
     "@eslint/js": "8.57.1",
-    "@playwright/test": "1.57.0",
+    "@playwright/test": "1.55.0",
     "@stylistic/eslint-plugin": "3.1.0",
     "@stylistic/eslint-plugin-migrate": "3.1.0",
     "@types/eslint": "8.56.12",