@useinsider/guido 1.0.0-beta.180c0fa → 1.0.0-beta.184e162

package/dist/components/organisms/header/LeftSlot.vue.js

@@ -1,11 +1,11 @@
-import n from "./LeftSlot.vue2.js";
+import r from "./LeftSlot.vue2.js";
 import o from "../../../_virtual/_plugin-vue2_normalizer.js";
-var r = function() {
-  var e = this, s = e._self._c, t = e._self._setupProxy;
-  return s("div", { staticClass: "d-f a-i-c" }, [s(t.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" }, on: { click: t.handleBack } }), t.editorStore.isVersionHistoryOpen ? s(t.RestoreButton, { staticClass: "ml-3" }) : e._e()], 1);
+var n = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [e(s.InButtonV2, { staticClass: "p-2", attrs: { id: "guido__back-button", "label-text": "Back", "left-icon": "line-arrow-left", styling: "text", type: "secondary" } }), s.editorStore.isVersionHistoryOpen ? e(s.RestoreButton, { staticClass: "ml-3" }) : t._e()], 1);
 }, a = [], i = /* @__PURE__ */ o(
-  n,
   r,
+  n,
   a,
   !1,
   null,

package/dist/components/organisms/header/LeftSlot.vue2.js

@@ -1,15 +1,13 @@
-import { defineComponent as r } from "vue";
-import { useBack as e } from "../../../composables/useGuidoActions.js";
-import { useEditorStore as m } from "../../../stores/editor.js";
-import { InButtonV2 as n } from "@useinsider/design-system-vue";
-import s from "./version-history/RestoreButton.vue.js";
-const c = /* @__PURE__ */ r({
+import { defineComponent as t } from "vue";
+import { useEditorStore as o } from "../../../stores/editor.js";
+import { InButtonV2 as r } from "@useinsider/design-system-vue";
+import e from "./version-history/RestoreButton.vue.js";
+const _ = /* @__PURE__ */ t({
   __name: "LeftSlot",
-  setup(f) {
-    const o = m(), t = e();
-    return { __sfc: !0, editorStore: o, handleBack: t, InButtonV2: n, RestoreButton: s };
+  setup(m) {
+    return { __sfc: !0, editorStore: o(), InButtonV2: r, RestoreButton: e };
   }
 });
 export {
-  c as default
+  _ as default
 };

package/dist/components/organisms/header/MiddleSlot.vue.js

@@ -2,7 +2,7 @@ import s from "./MiddleSlot.vue2.js";
 import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
   var e = this, o = e._self._c, t = e._self._setupProxy;
-  return t.editorStore.isVersionHistoryOpen ? o("div", { staticClass: "d-f" }, [o(t.VersionHistory), o(t.VersionHistoryViewOptions)], 1) : o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), o(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.trans("newsletter.email-preview") } }), o(t.ViewOptions, { staticClass: "ml-3" })], 1);
+  return t.editorStore.isVersionHistoryOpen ? o("div", { staticClass: "d-f" }, [o(t.VersionHistory), o(t.VersionHistoryViewOptions)], 1) : o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__code-button", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), o(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.trans("newsletter.email-preview") } }), o(t.ViewOptions, { staticClass: "ml-3" })], 1);
 }, l = [], r = /* @__PURE__ */ i(
   s,
   n,

package/dist/components/organisms/header/RightSlot.vue.js

@@ -2,16 +2,16 @@ import o from "./RightSlot.vue2.js";
 import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
   var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleVersionHistory } }), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.exportHtml } }), e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.handleSaveAsTemplate } }), e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleSave } })], 1);
-}, a = [], r = /* @__PURE__ */ i(
+  return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen }, on: { click: t.handleVersionHistory } }), e(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 }, on: { click: t.exportHtml } }), e(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryOpen, "label-text-status": !1 } }), e(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": t.editorStore.isVersionHistoryOpen } })], 1);
+}, r = [], a = /* @__PURE__ */ i(
   o,
   n,
-  a,
+  r,
   !1,
   null,
   null
 );
-const u = r.exports;
+const c = a.exports;
 export {
-  u as default
+  c as default
 };

package/dist/components/organisms/header/RightSlot.vue2.js

@@ -1,37 +1,21 @@
-import { defineComponent as m } from "vue";
-import { useActionsApi as p } from "../../../composables/useActionsApi.js";
-import { useExport as l } from "../../../composables/useExport.js";
-import { useSaveStart as c, useSaveComplete as d } from "../../../composables/useGuidoActions.js";
-import { useVersionHistoryApi as f } from "../../../composables/useVersionHistoryApi.js";
-import { useEditorStore as u } from "../../../stores/editor.js";
-import { InButtonV2 as S } from "@useinsider/design-system-vue";
-const T = /* @__PURE__ */ m({
+import { defineComponent as s } from "vue";
+import { useExport as i } from "../../../composables/useExport.js";
+import { useVersionHistoryApi as n } from "../../../composables/useVersionHistoryApi.js";
+import { useEditorStore as p } from "../../../stores/editor.js";
+import { InButtonV2 as m } from "@useinsider/design-system-vue";
+const d = /* @__PURE__ */ s({
   __name: "RightSlot",
-  setup(h) {
-    const { exportHtml: i } = l(), { getCompiledEmail: o } = p(), r = c(), s = d(), { openVersionHistory: n, closeVersionHistory: a } = f(), e = u();
-    return { __sfc: !0, exportHtml: i, getCompiledEmail: o, saveStart: r, saveComplete: s, openVersionHistory: n, closeVersionHistory: a, editorStore: e, handleVersionHistory: () => {
-      if (e.isVersionHistoryOpen) {
-        a();
+  setup(f) {
+    const { exportHtml: e } = i(), { openVersionHistory: o, closeVersionHistory: r } = n(), t = p();
+    return { __sfc: !0, exportHtml: e, openVersionHistory: o, closeVersionHistory: r, editorStore: t, handleVersionHistory: () => {
+      if (t.isVersionHistoryOpen) {
+        r();
         return;
       }
-      n();
-    }, handleSaveAsTemplate: async () => {
-      e.isSaveTemplateModalOpen = !0;
-    }, handleSave: async () => {
-      r();
-      try {
-        const { html: t } = await o();
-        s({
-          html: t || "",
-          css: ""
-          // CSS is embedded in HTML from Stripo
-        });
-      } catch (t) {
-        console.error("Failed to get template data for save:", t);
-      }
-    }, InButtonV2: S };
+      o();
+    }, InButtonV2: m };
   }
 });
 export {
-  T as default
+  d as default
 };

package/dist/composables/useActionsApi.d.ts

@@ -1,6 +1,5 @@
-import { GetCompiledEmailOptions, CompiledEmailResult, TemplateDataResult } from '@@/Types/actions-api';
+import { GetCompiledEmailOptions, CompiledEmailResult } from '@@/Types/actions-api';
 export declare const useActionsApi: () => {
     getCompiledEmail: (options?: GetCompiledEmailOptions) => Promise<CompiledEmailResult>;
-    getRawTemplateData: () => Promise<TemplateDataResult>;
     activateCustomViewStyles: (isActive?: boolean) => void;
 };

package/dist/composables/useActionsApi.js

@@ -1,49 +1,38 @@
-const g = () => ({
-  getCompiledEmail: (t = {}) => new Promise((e, i) => {
-    const o = {
-      ...{ ...{
-        minimize: !1,
-        // TODO: Need to align Stripo Team
-        utmEntity: {
-          utmSource: "",
-          utmMedium: "",
-          utmCampaign: "",
-          utmContent: "",
-          utmTerm: "",
-          customUtms: [
-            {
-              name1: "val1",
-              name2: "val2"
-            }
-          ]
-        },
-        mergeTags: ["Tag1", "Tag2"],
-        forseAmp: !1,
-        resetDataSavedFlag: !1,
-        disableLineHeightsReplace: !0
-      }, ...t },
-      callback: (a, s, m, n, l) => {
-        a ? i(a) : e({
-          html: s,
-          ampHtml: m,
-          ampErrors: n,
-          displayConditions: l
-        });
-      }
-    };
-    window.StripoEditorApi.actionsApi.compileEmail(o);
-  }),
-  getRawTemplateData: () => new Promise((t) => {
-    window.StripoEditorApi.actionsApi.getTemplateData(
-      (e) => {
-        t(e);
-      }
-    );
-  }),
-  activateCustomViewStyles: (t = !0) => {
-    window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
-  }
-});
+const g = () => ({ getCompiledEmail: (t = {}) => new Promise((i, a) => {
+  const s = { ...{
+    minimize: !0,
+    utmEntity: {
+      utmSource: "",
+      utmMedium: "",
+      utmCampaign: "",
+      utmContent: "",
+      utmTerm: "",
+      customUtms: [
+        {
+          name1: "val1",
+          name2: "val2"
+        }
+      ]
+    },
+    mergeTags: ["Tag1", "Tag2"],
+    forseAmp: !1,
+    resetDataSavedFlag: !1,
+    disableLineHeightsReplace: !0
+  }, ...t }, o = {
+    callback: (e, m, l, n, c) => {
+      e ? a(e) : i({
+        html: m,
+        ampHtml: l,
+        ampErrors: n,
+        displayConditions: c
+      });
+    },
+    ...s
+  };
+  window.StripoEditorApi.actionsApi.compileEmail(o);
+}), activateCustomViewStyles: (t = !0) => {
+  window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
+} });
 export {
   g as useActionsApi
 };

package/dist/composables/useExport.d.ts

@@ -1,3 +1,3 @@
 export declare const useExport: () => {
-    exportHtml: (compile?: boolean) => Promise<void>;
+    exportHtml: () => Promise<void>;
 };

package/dist/composables/useExport.js

@@ -1,45 +1,30 @@
 import { useActionsApi as l } from "./useActionsApi.js";
-import { useHtmlCompiler as m } from "./useHtmlCompiler.js";
-import { useToaster as d } from "./useToaster.js";
-const h = () => {
-  const a = (s, o, r) => {
-    const i = new Blob([s], { type: r }), t = URL.createObjectURL(i), e = document.createElement("a");
-    e.href = t, e.download = o, document.body.appendChild(e), e.click(), document.body.removeChild(e), URL.revokeObjectURL(t);
-  }, c = (s) => {
-    const o = /* @__PURE__ */ new Date(), r = String(o.getDate()).padStart(2, "0"), i = String(o.getMonth() + 1).padStart(2, "0"), t = o.getFullYear(), e = String(o.getHours()).padStart(2, "0"), n = String(o.getMinutes()).padStart(2, "0");
-    return `${s}_${r}-${i}-${t}_${e}-${n}.html`;
+import { useToaster as m } from "./useToaster.js";
+const u = () => {
+  const a = (r, t, e) => {
+    const n = new Blob([r], { type: e }), s = URL.createObjectURL(n), o = document.createElement("a");
+    o.href = s, o.download = t, document.body.appendChild(o), o.click(), document.body.removeChild(o), URL.revokeObjectURL(s);
+  }, c = (r) => {
+    const t = /* @__PURE__ */ new Date(), e = String(t.getDate()).padStart(2, "0"), n = String(t.getMonth() + 1).padStart(2, "0"), s = t.getFullYear(), o = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0");
+    return `${r}_${e}-${n}-${s}_${o}-${i}.html`;
   };
-  return { exportHtml: async (s = !0) => {
-    const { getCompiledEmail: o } = l(), { showToaster: r } = d(), { compileHtml: i } = m();
+  return { exportHtml: async () => {
+    const { getCompiledEmail: r } = l(), { showToaster: t } = m();
     try {
-      const { html: t } = await o();
-      if (t) {
-        let e = t;
-        if (s) {
-          const n = i(t);
-          e = n.compiledHtml, console.debug("HTML Compilation Stats:", {
-            originalSize: n.stats.originalSize,
-            compiledSize: n.stats.compiledSize,
-            reduction: `${n.stats.reductionPercentage.toFixed(2)}%`,
-            appliedRules: n.appliedRules,
-            executionTime: `${n.stats.executionTime.toFixed(2)}ms`
-          });
-        }
-        a(e, c("HTML"), "text/html");
-      } else
-        r({
-          type: "error",
-          message: "No HTML content to download"
-        });
-    } catch (t) {
-      const e = t instanceof Error ? t.message : String(t);
-      r({
+      const { html: e } = await r();
+      e ? a(e, c("HTML"), "text/html") : t({
         type: "error",
-        message: `Error compiling email: ${e}`
+        message: "No HTML content to download"
+      });
+    } catch (e) {
+      const n = e instanceof Error ? e.message : String(e);
+      t({
+        type: "error",
+        message: `Error compiling email: ${n}`
       });
     }
   } };
 };
 export {
-  h as useExport
+  u as useExport
 };

package/dist/composables/useHttp.js

@@ -1,20 +1,18 @@
-import { ref as p, computed as T } from "vue";
-import { getCsrfToken as H } from "../utils/generic.js";
-const k = (b = {}) => {
-  const h = p(!1), a = p(null), u = p(null), g = T(() => h.value), y = T(() => a.value !== null), v = {
+import { ref as p, computed as v } from "vue";
+const j = (y = {}) => {
+  const h = p(!1), a = p(null), u = p(null), E = v(() => h.value), g = v(() => a.value !== null), T = {
     baseURL: "",
     timeout: 1e4,
     retry: 0,
     retryDelay: 1e3,
     headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-TOKEN": H()
+      "Content-Type": "application/json"
     },
-    ...b
+    ...y
   }, w = (e, s) => {
     if (e.startsWith("http://") || e.startsWith("https://"))
       return e;
-    const t = s || v.baseURL || "";
+    const t = s || T.baseURL || "";
     return t.endsWith("/") && e.startsWith("/") ? `${t}${e.slice(1)}` : t.endsWith("/") || e.startsWith("/") ? `${t}${e}` : `${t}/${e}`;
   }, P = (e) => new Promise((s, t) => {
     setTimeout(() => {
@@ -24,20 +22,20 @@ const k = (b = {}) => {
     setTimeout(s, e);
   }), i = async (e, s, t, D = {}) => {
     a.value = null, h.value = !0, u.value = new AbortController();
-    const n = { ...v, ...D }, L = w(s, n.baseURL), c = {
+    const n = { ...T, ...D }, L = w(s, n.baseURL), c = {
       method: e,
       headers: { ...n.headers },
       signal: u.value.signal,
       ...n
     };
     t && ["POST", "PUT", "PATCH"].includes(e) && (t instanceof FormData ? (delete c.headers["Content-Type"], c.body = t) : c.body = JSON.stringify(t));
-    const E = async (m = 0) => {
+    const b = async (m = 0) => {
       try {
         const o = [fetch(L, c)];
         n.timeout && o.push(P(n.timeout));
         const r = await Promise.race(o);
         if (!r.ok) {
-          const O = `HTTP Error: ${r.status} ${r.statusText}`, d = new Error(O);
+          const H = `HTTP Error: ${r.status} ${r.statusText}`, d = new Error(H);
           throw d.status = r.status, d.statusText = r.statusText, d.response = r, d;
         }
         let f;
@@ -51,36 +49,36 @@ const k = (b = {}) => {
       } catch (o) {
         const r = o instanceof Error && o.name === "AbortError";
         if (m < (n.retry || 0) && !r)
-          return await x(n.retryDelay || 1e3), E(m + 1);
+          return await x(n.retryDelay || 1e3), b(m + 1);
         throw o instanceof Error ? o.name === "AbortError" ? a.value = { message: "Request was cancelled" } : a.value = { message: o.message } : a.value = o, o;
       }
     };
     try {
-      return await E();
+      return await b();
     } finally {
       h.value = !1, u.value = null;
     }
-  }, C = (e, s) => i("GET", e, void 0, s), $ = (e, s, t) => i("POST", e, s, t), R = (e, s, t) => i("PUT", e, s, t), U = (e, s, t) => i("PATCH", e, s, t), A = (e, s) => i("DELETE", e, void 0, s), W = (e) => {
+  }, $ = (e, s) => i("GET", e, void 0, s), C = (e, s, t) => i("POST", e, s, t), U = (e, s, t) => i("PUT", e, s, t), A = (e, s, t) => i("PATCH", e, s, t), R = (e, s) => i("DELETE", e, void 0, s), W = (e) => {
     u.value && u.value.abort(e);
   }, q = () => {
     a.value = null;
   };
   return {
     // State
-    loading: g,
-    error: T(() => a.value),
-    hasError: y,
+    loading: E,
+    error: v(() => a.value),
+    hasError: g,
     // Methods
     request: i,
-    get: C,
-    post: $,
-    put: R,
-    patch: U,
-    delete: A,
+    get: $,
+    post: C,
+    put: U,
+    patch: A,
+    delete: R,
     cancel: W,
     clearError: q
   };
 };
 export {
-  k as useHttp
+  j as useHttp
 };

package/dist/composables/useStripo.js

@@ -1,21 +1,19 @@
-import { useActionsApi as g } from "./useActionsApi.js";
-import { useCustomInterfaceAppearance as f } from "./useCustomInterfaceAppearance.js";
-import { useToaster as y } from "./useToaster.js";
-import { displayConditions as C } from "../enums/displayConditions.js";
-import E from "../extensions/DynamicContent/extension.js";
-import { useStripoApi as S } from "../services/stripoApi.js";
-import { useEditorStore as w } from "../stores/editor.js";
-import { dynamicContentToMergeTags as b } from "../utils/genericUtil.js";
-const M = (d) => {
-  const { handleError: c } = y(), { getToken: a, getCustomFonts: u } = S(), l = (e, r = []) => {
-    const i = w(), { html: t, css: s, forceRecreate: p } = e;
+import { useActionsApi as m } from "./useActionsApi.js";
+import { useCustomInterfaceAppearance as g } from "./useCustomInterfaceAppearance.js";
+import { useToaster as f } from "./useToaster.js";
+import { displayConditions as E } from "../enums/displayConditions.js";
+import S from "../extensions/DynamicContent/extension.js";
+import { useStripoApi as w } from "../services/stripoApi.js";
+import { useEditorStore as y } from "../stores/editor.js";
+const x = (a) => {
+  const { handleError: d } = f(), { getToken: c, getCustomFonts: u } = w(), p = (e, r = []) => {
+    const i = y(), { html: t, css: s } = e;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: d,
+        metadata: a,
         html: t,
         css: s,
-        forceRecreate: p,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -31,32 +29,27 @@ const M = (d) => {
                 `,
         conditionsEnabled: !0,
         customConditionsEnabled: !0,
-        conditionCategories: C,
+        conditionCategories: E,
         messageSettingsEnabled: !1,
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
           customFonts: r
         },
-        mergeTags: [
-          {
-            entries: b(d.preselectedDynamicContentList)
-          }
-        ],
         async onTokenRefreshRequest(o) {
           try {
-            const n = await a();
+            const n = await c();
             o(n);
           } catch (n) {
-            c(n, "Failed to refresh token");
+            d(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: o } = f(), { activateCustomViewStyles: n } = g();
+            const { importCss: o } = g(), { activateCustomViewStyles: n } = m();
             o(), n();
           } catch (o) {
-            c(o, "Failed to load custom interface appearance");
+            d(o, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(o) {
@@ -68,11 +61,12 @@ const M = (d) => {
         onVersionHistoryVisibilityChanged(o) {
           i.isVersionHistoryOpen = o;
         },
-        ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal"],
-        extensions: [E]
+        // TODO: It might be needed to ignore click outside selectors for the dynamic content extension
+        // ignoreClickOutsideSelectors: ['#externalMergeTags'],
+        extensions: [S]
       }
     );
-  }, m = (e) => new Promise((r, i) => {
+  }, l = (e) => new Promise((r, i) => {
     if (document.getElementById("UiEditorScript")) {
       e(), r();
       return;
@@ -86,12 +80,12 @@ const M = (d) => {
     }, document.body.appendChild(t);
   });
   return { initPlugin: async (e) => {
-    await m(async () => {
+    await l(async () => {
       const r = await u();
-      l(e, r);
+      p(e, r);
     });
   } };
 };
 export {
-  M as useStripo
+  x as useStripo
 };

package/dist/composables/useTemplates.d.ts

@@ -0,0 +1,5 @@
+import type { Template } from '@@/Types/stripo';
+export declare const useTemplates: () => {
+    getDefaultTemplate: () => Promise<Template>;
+    getTemplate: (templateName: string) => Promise<Template>;
+};

package/dist/composables/useTemplates.js

@@ -0,0 +1,27 @@
+const s = () => {
+  const t = async () => {
+    const [e, a] = await Promise.all([
+      // eslint-disable-next-line import/extensions
+      import("../static/templates/default/index.html.js"),
+      import("../static/templates/default/style.css.js")
+    ]);
+    return {
+      html: e.default,
+      css: a.default
+    };
+  };
+  return {
+    getDefaultTemplate: t,
+    getTemplate: async (e) => {
+      switch (e) {
+        case "default":
+          return t();
+        default:
+          return t();
+      }
+    }
+  };
+};
+export {
+  s as useTemplates
+};

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

@@ -1,6 +1,20 @@
-import type { DynamicContent } from '@@/Types/generic';
 export declare class ExternalMergeTagsLibrary {
-    selectedDynamicContent: DynamicContent | null;
-    dataSelectCallback: (data: DynamicContent) => void;
-    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void): void;
+    selectedDynamicContent: {
+        value: string;
+    } | null;
+    dataSelectCallback: (data: Record<string, string>) => void;
+    activeCategory: string;
+    /**
+     * Handles click events on tag cards
+     * @param e - Click event
+     */
+    /**
+     * Opens the merge tags library modal
+     * @param mergeTag - Currently selected merge tag value (if any)
+     * @param onDataSelectCallback - Callback when tag is selected
+     */
+    openMergeTagsLibrary(dynamicContent: {
+        value: string;
+        label: string;
+    }, onDataSelectCallback: (data: Record<string, string>) => void): void;
 }

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

@@ -1,23 +1,48 @@
-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);
+var d = Object.defineProperty;
+var r = (e, t, n) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var a = (e, t, n) => r(e, typeof t != "symbol" ? t + "" : t, n);
 class y {
   constructor() {
     a(this, "selectedDynamicContent", null);
     a(this, "dataSelectCallback", () => {
     });
+    a(this, "activeCategory", "all");
   }
-  openMergeTagsLibrary(e, n) {
-    this.dataSelectCallback = n, this.selectedDynamicContent = e;
-    const s = new CustomEvent("dynamic-content:open", {
+  /**
+   * Handles click events on tag cards
+   * @param e - Click event
+   */
+  // onTagClick (e) {
+  //     // Check if clicked on tag card or any of its children
+  //     const tagCard = e.target.closest('.tag-card');
+  //     if (!tagCard) {
+  //         return;
+  //     }
+  //     // Create callback object with tag data
+  //     const tagData = {
+  //         value: tagCard.getAttribute('data-value'),
+  //         label: tagCard.getAttribute('data-label'),
+  //     };
+  //     // Close modal and execute callback
+  //     this.close();
+  //     this.dataSelectCallback(tagData);
+  // }
+  /**
+   * Opens the merge tags library modal
+   * @param mergeTag - Currently selected merge tag value (if any)
+   * @param onDataSelectCallback - Callback when tag is selected
+   */
+  openMergeTagsLibrary(t, n) {
+    this.dataSelectCallback = n, this.selectedDynamicContent = t;
+    const l = new CustomEvent("dynamic-content:open", {
       detail: {
-        attribute: e
+        attribute: t
       }
     });
-    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.dispatchEvent(l);
+    const o = (i) => {
+      const c = i.detail, s = c == null ? void 0 : c.attribute;
+      s && this.dataSelectCallback(s), document.removeEventListener("dynamic-content:close", o);
     };
     document.addEventListener("dynamic-content:close", o);
   }

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

@@ -6,7 +6,7 @@ export declare class DynamicContentUiElementExtension extends UIElement {
     private mergeTagsButton;
     private listener;
     private mergeTagsLibrary;
-    private selectedDynamicContent;
+    private selectedMergeTag;
     getId(): string;
     onRender(container: HTMLElement): void;
     onDestroy(): void;