@useinsider/guido 2.0.0-beta.2b3ed57 → 2.0.0-beta.31cb960

package/README.md

@@ -110,6 +110,7 @@ const config: GuidoConfigInput = {
     css?: string,
     preselectedDynamicContent?: DynamicContent[],
     selectedUnsubscribePages?: number[],
+    forceRecreate?: boolean,       // Default: false - Force recreate template in Stripo storage
   },
 
   // Optional: Editor settings
@@ -137,6 +138,7 @@ const config: GuidoConfigInput = {
     testMessage?: boolean,        // Default: true
     displayConditions?: boolean,  // Default: true
     unsubscribe?: boolean,        // Default: true
+    modulesDisabled?: boolean,    // Default: false - Disable modules panel
   },
 
   // Optional: Block configuration

package/dist/@types/config/schemas.js

@@ -1,5 +1,5 @@
-import { object as o, number as p, optional as e, string as t, pipe as m, picklist as n, boolean as c, array as a, minLength as u, literal as r, custom as b, variant as S } from "../../node_modules/valibot/dist/index.js";
-const i = {
+import { object as o, number as b, optional as e, string as t, pipe as u, picklist as n, custom as d, boolean as c, array as a, minLength as p, literal as r, variant as S } from "../../node_modules/valibot/dist/index.js";
+const m = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
   /** Transactional/system emails */
@@ -13,22 +13,22 @@ const i = {
   UNSUBSCRIBE_PAGES: 97
 }, h = o({
   /** Unique identifier for the template being edited */
-  templateId: m(
+  templateId: u(
     t(),
-    u(1, "templateId is required")
+    p(1, "templateId is required")
   ),
   /** Unique identifier for the user editing the template */
-  userId: m(
+  userId: u(
     t(),
-    u(1, "userId is required")
+    p(1, "userId is required")
   ),
   /** Optional variation ID for A/B testing */
   variationId: e(t())
 }), k = o({
   /** Partner/organization name (required) */
-  name: m(
+  name: u(
     t(),
-    u(1, "partner.name is required")
+    p(1, "partner.name is required")
   ),
   /** Product type identifier */
   productType: e(
@@ -41,8 +41,8 @@ const i = {
   ),
   /** Message type (promotional or transactional) */
   messageType: e(
-    n([i.PROMOTIONAL, i.TRANSACTIONAL]),
-    i.PROMOTIONAL
+    n([m.PROMOTIONAL, m.TRANSACTIONAL]),
+    m.PROMOTIONAL
   ),
   /** Display name for the current user */
   username: e(t(), "Guido User")
@@ -71,27 +71,29 @@ const i = {
     []
   ),
   /** Selected unsubscribe page IDs */
-  selectedUnsubscribePages: e(a(p()), [])
-}), C = o({
+  selectedUnsubscribePages: e(a(b()), []),
+  /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
+  forceRecreate: e(c(), !1)
+}), f = o({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
   subject: e(t(), "")
-}), I = o({
+}), C = o({
   /** Locale for the editor UI */
   locale: e(t(), "en"),
   /** Path to translations object */
   translationsPath: e(t(), "window.trans.en"),
   /** Migration date for template compatibility */
-  migrationDate: e(p(), 1759696858),
+  migrationDate: e(b(), 1759696858),
   /** Email header settings */
-  emailHeader: e(C, { senderName: "", subject: "" })
-}), T = o({
+  emailHeader: e(f, { senderName: "", subject: "" })
+}), I = o({
   /** Whether to show the header bar */
   showHeader: e(c(), !0),
   /** Custom label for back button (if shown) */
   backButtonLabel: e(t())
-}), A = o({
+}), T = o({
   /** Enable dynamic content insertion */
   dynamicContent: e(c(), !0),
   /** Enable save as template functionality */
@@ -106,7 +108,7 @@ const i = {
   unsubscribe: e(c(), !0),
   /** Disable modules panel in the editor */
   modulesDisabled: e(c(), !1)
-}), f = n([
+}), A = n([
   "amp-accordion",
   "amp-carousel",
   "amp-form-controls",
@@ -131,7 +133,7 @@ const i = {
 ]), E = o({
   /** Default blocks to exclude from the editor */
   excludeDefaults: e(
-    a(f),
+    a(A),
     []
   ),
   /** Custom blocks to include in the editor */
@@ -145,7 +147,7 @@ const i = {
   /** Human-readable description */
   description: e(t()),
   /** Priority for rule ordering (lower = earlier) */
-  priority: p()
+  priority: b()
 }), N = o({
   ...l.entries,
   type: r("replace"),
@@ -173,21 +175,32 @@ const i = {
   ...l.entries,
   type: r("custom"),
   /** Custom processor function */
-  processor: b(
-    (d) => typeof d == "function",
+  processor: d(
+    (i) => typeof i == "function",
     "processor must be a function"
   )
-}), B = S("type", [
+}), x = S("type", [
   N,
   O,
   L,
   v
-]), P = o({
+]), B = o({
   /** Custom compiler rules to apply */
-  customRules: e(a(B), []),
+  customRules: e(a(x), []),
   /** Skip default compiler rules */
   ignoreDefaultRules: e(c(), !1)
-}), x = o({
+}), P = o({
+  /**
+   * External validation handler called before save completes.
+   * Return false to cancel the save operation.
+   */
+  externalValidation: e(
+    d(
+      (i) => typeof i == "function",
+      "externalValidation must be a function"
+    )
+  )
+}), D = o({
   // Required sections
   /** Identity configuration (required) */
   identity: h,
@@ -197,35 +210,38 @@ const i = {
   /** Template content and presets */
   template: e(R, {}),
   /** Editor settings */
-  editor: e(I, {}),
+  editor: e(C, {}),
   /** UI configuration */
-  ui: e(T, {}),
+  ui: e(I, {}),
   /** Feature toggles */
-  features: e(A, {}),
+  features: e(T, {}),
   /** Block configuration */
   blocks: e(E, {}),
   /** Compiler configuration */
-  compiler: e(P, {})
+  compiler: e(B, {}),
+  /** Callbacks and event handlers */
+  callbacks: e(P, {})
 });
 export {
   E as BlocksSchema,
-  B as CompilerRuleSchema,
-  P as CompilerSchema,
+  P as CallbacksSchema,
+  x as CompilerRuleSchema,
+  B as CompilerSchema,
   g as CustomBlockTypeSchema,
   v as CustomRuleSchema,
-  f as DefaultBlockTypeSchema,
+  A as DefaultBlockTypeSchema,
   y as DynamicContentSchema,
-  I as EditorSchema,
-  C as EmailHeaderSchema,
-  A as FeaturesSchema,
-  x as GuidoConfigSchema,
+  C as EditorSchema,
+  f as EmailHeaderSchema,
+  T as FeaturesSchema,
+  D as GuidoConfigSchema,
   h as IdentitySchema,
-  i as MessageType,
+  m as MessageType,
   k as PartnerSchema,
   s as ProductType,
   O as RegexRuleSchema,
   L as RemoveRuleSchema,
   N as ReplaceRuleSchema,
   R as TemplateSchema,
-  T as UISchema
+  I as UISchema
 };

package/dist/components/Guido.vue.js

@@ -12,7 +12,7 @@ var t = function() {
   n,
   !1,
   null,
-  "282ca4d1"
+  "890b5336"
 );
 const v = s.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as x, defineAsyncComponent as P, ref as B, computed as U, watch as N, onMounted as z, onUnmounted as K } from "vue";
+import { defineComponent as B, defineAsyncComponent as P, ref as N, computed as U, watch as R, onMounted as z, onUnmounted as K } from "vue";
 import { provideGuidoActions as M } from "../composables/useGuidoActions.js";
 import { usePartner as j } from "../composables/usePartner.js";
 import { useStripo as q } from "../composables/useStripo.js";
@@ -15,8 +15,8 @@ import { useConfigStore as oe } from "../stores/config.js";
 import { useDynamicContentStore as te } from "../stores/dynamic-content.js";
 import { useEditorStore as ne } from "../stores/editor.js";
 import { usePreviewStore as re } from "../stores/preview.js";
-import { useUnsubscribeStore as ce } from "../stores/unsubscribe.js";
-const Ee = /* @__PURE__ */ x({
+import { useUnsubscribeStore as se } from "../stores/unsubscribe.js";
+const Ee = /* @__PURE__ */ B({
   __name: "Guido",
   props: {
     config: null
@@ -27,19 +27,19 @@ const Ee = /* @__PURE__ */ x({
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
     ), A = P(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), p = B(), s = te(), u = ce(), n = oe();
+    ), p = N(), c = te(), u = se(), n = oe();
     n.init(l.config);
     const i = ne(), F = re(), r = U(() => i.hasChanges), { isTestPartner: G } = j(), v = () => {
       var e;
       return (e = p.value) == null ? void 0 : e.handleSave(!0);
-    }, { templateId: a, userId: y, partnerName: h, productType: f, username: b, template: o } = n, c = (o == null ? void 0 : o.html) || "", g = (o == null ? void 0 : o.css) || "", m = (o == null ? void 0 : o.preselectedDynamicContent) || [];
+    }, { templateId: a, userId: y, partnerName: h, productType: b, username: f, template: o } = n, s = (o == null ? void 0 : o.html) || "", g = (o == null ? void 0 : o.css) || "", m = (o == null ? void 0 : o.preselectedDynamicContent) || [];
     i.templateId = a;
     const { initPlugin: S } = q({
       emailId: a,
       userId: y,
-      username: b,
+      username: f,
       partnerName: h,
-      productType: f,
+      productType: b,
       preselectedDynamicContentList: m,
       onReady: () => {
         console.debug("guido:ready"), t("ready");
@@ -63,28 +63,26 @@ const Ee = /* @__PURE__ */ x({
       }
     });
     const E = (e) => {
-      console.debug("dynamic-content:close", e), s.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+      console.debug("dynamic-content:close", e), c.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
     }, k = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    N(() => r.value, () => {
+    R(() => r.value, () => {
       t("on-change", r.value);
     });
     const d = (e) => {
-      const T = e, { attribute: O, position: R } = T.detail;
-      console.debug("dynamic-content:open", T.detail), t("dynamic-content:open", O, R);
+      const T = e, { attribute: O, position: x } = T.detail;
+      console.debug("dynamic-content:open", T.detail), t("dynamic-content:open", O, x);
     };
     return z(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
         u.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
         let e = {
-          html: c && await W(c),
-          css: g,
-          forceRecreate: !0
-          // TODO: It should be false for old templates. We will communicate with Stripo
+          html: s && await W(s),
+          css: g
         };
-        e.html || (e = await w(), e.html = await W(e.html)), D(e.html) && (e.html = await C(e.html)), await S(e), s.selectedDynamicContentList = m;
+        e.html || (e = await w(), e.html = await W(e.html)), D(e.html) && (e.html = await C(e.html)), await S(e), c.selectedDynamicContentList = m;
       } catch (e) {
         console.error("Failed to initialize Stripo editor:", e);
       }
@@ -104,7 +102,7 @@ const Ee = /* @__PURE__ */ x({
       },
       hasChanges: r,
       saveSilent: v
-    }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: A, headerWrapperRef: p, dynamicContentStore: s, unsubscribeStore: u, props: l, configStore: n, editorStore: i, previewStore: F, hasChanges: r, isTestPartner: G, saveSilent: v, templateId: a, userId: y, partnerName: h, productType: f, username: b, templateConfig: o, html: c, css: g, preselectedDynamicContentList: m, emit: t, initPlugin: S, getDefaultTemplate: w, cloneTimersOnSave: C, hasTimerBlocks: D, noHeader: H, insertDynamicContent: E, closeDynamicContent: k, handleDynamicContentOpen: d, Toaster: Q, FilterSelectionDrawer: V, HeaderWrapper: X, LoadingWrapper: Y, SaveAsTemplateDrawer: Z, UnsubscribeWrapper: $ };
+    }), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: A, headerWrapperRef: p, dynamicContentStore: c, unsubscribeStore: u, props: l, configStore: n, editorStore: i, previewStore: F, hasChanges: r, isTestPartner: G, saveSilent: v, templateId: a, userId: y, partnerName: h, productType: b, username: f, templateConfig: o, html: s, css: g, preselectedDynamicContentList: m, emit: t, initPlugin: S, getDefaultTemplate: w, cloneTimersOnSave: C, hasTimerBlocks: D, noHeader: H, insertDynamicContent: E, closeDynamicContent: k, handleDynamicContentOpen: d, Toaster: Q, FilterSelectionDrawer: V, HeaderWrapper: X, LoadingWrapper: Y, SaveAsTemplateDrawer: Z, UnsubscribeWrapper: $ };
   }
 });
 export {

package/dist/components/organisms/email-preview/PreviewContainer.vue.js

@@ -2,7 +2,7 @@ import s from "./PreviewContainer.vue2.js";
 import t from "../../../_virtual/_plugin-vue2_normalizer.js";
 var i = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return e.previewStore.isLoaded ? r("div", { staticClass: "d-f f-d-c h-1 b-c-5 bor-r-2 pb-5" }, [r("div", { staticClass: "f-g-1 d-f p-5 o-a g-4 min-h-600" }, [r(e.DesktopPreview, { staticClass: "f-g-1 min-w-0" }), r(e.MobilePreview, { staticClass: "f-0 min-w-a" })], 1), e.previewStore.isAMPErrorModalVisible ? r(e.AmpErrorModal, { on: { close: function(_) {
+  return e.previewStore.isLoaded ? r("div", { staticClass: "d-f f-d-c h-1 b-c-5 bor-r-2" }, [r("div", { staticClass: "f-g-1 d-f p-5 o-a g-4 min-h-600" }, [r(e.DesktopPreview, { staticClass: "f-g-1 min-w-0" }), r(e.MobilePreview, { staticClass: "f-0 min-w-a" })], 1), e.previewStore.isAMPErrorModalVisible ? r(e.AmpErrorModal, { on: { close: function(_) {
     return e.previewStore.closeErrorModal();
   } } }) : o._e()], 1) : o._e();
 }, n = [], a = /* @__PURE__ */ t(
@@ -13,7 +13,7 @@ var i = function() {
   null,
   null
 );
-const p = a.exports;
+const d = a.exports;
 export {
-  p as default
+  d as default
 };

package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue.js

@@ -1,20 +1,20 @@
-import s from "./AmpErrorModal.vue2.js";
+import i from "./AmpErrorModal.vue2.js";
 /* empty css                   */
 import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
   var e = this, r = e._self._c, t = e._self._setupProxy;
-  return r(t.WpModal, { attrs: { id: "amp-error-modal", size: "medium", description: t.trans("email-editor.amp-validation-description"), "footer-button-options": t.footerButtonOptions, title: t.trans("email-editor.amp-validation-title") }, on: { close: function(o) {
+  return r(t.WpModal, { attrs: { id: "amp-error-modal", size: "small", description: t.ampValidationDescription, "footer-button-options": t.footerButtonOptions, title: t.trans("email-editor.amp-validation-title") }, on: { close: function(o) {
     return t.emit("close");
-  }, "primary-action": t.handleFixInCodeEditor } }, [r("div", { staticClass: "d-f f-d-c" }, [r("div", { staticClass: "mb-3" }, [r("div", { staticClass: "l-s-5 f-s-1 f-w-600 t-c-55 t-t-u" }, [e._v(" " + e._s(t.errorCountText) + " ")])]), r("div", { staticClass: "d-f f-d-c g-13 max-h-21-s o-y-a error-list" }, e._l(t.previewStore.ampErrors, function(o, i) {
-    return r(t.InOnPageMessage, { key: i, attrs: { icon: "filled-error-box", size: "medium", type: "alert", text: o } });
+  }, "primary-action": t.handleFixInCodeEditor } }, [r("div", { staticClass: "d-f f-d-c" }, [r("div", { staticClass: "mb-3" }, [r("div", { staticClass: "l-s-5 f-s-1 f-w-600 t-c-55 t-t-u" }, [e._v(" " + e._s(t.errorCountText) + " ")])]), r("div", { staticClass: "d-f f-d-c g-13 error-list" }, e._l(t.previewStore.ampErrors, function(o, s) {
+    return r(t.InOnPageMessage, { key: s, attrs: { icon: "filled-error-box", size: "small", type: "alert", text: o } });
   }), 1)])]);
 }, l = [], d = /* @__PURE__ */ a(
-  s,
+  i,
   n,
   l,
   !1,
   null,
-  "7a09985c"
+  "c3fd5d4b"
 );
 const _ = d.exports;
 export {

package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue2.js

@@ -1,15 +1,16 @@
-import { defineComponent as p, ref as m, computed as c } from "vue";
-import d from "../../../wrappers/WpModal.vue.js";
-import { useCodeEditorApi as l } from "../../../../composables/useCodeEditorApi.js";
+import { defineComponent as m, ref as c, computed as d } from "vue";
+import l from "../../../wrappers/WpModal.vue.js";
+import { useCodeEditorApi as f } from "../../../../composables/useCodeEditorApi.js";
 import { usePreviewMode as u } from "../../../../composables/usePreviewMode.js";
-import { useTranslations as f } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as _ } from "../../../../stores/preview.js";
-import { InOnPageMessage as g } from "@useinsider/design-system-vue";
-const P = /* @__PURE__ */ p({
+import { useTranslations as _ } from "../../../../composables/useTranslations.js";
+import { ACADEMY_LINKS as M } from "../../../../enums/academy.js";
+import { usePreviewStore as y } from "../../../../stores/preview.js";
+import { InOnPageMessage as E } from "@useinsider/design-system-vue";
+const O = /* @__PURE__ */ m({
   __name: "AmpErrorModal",
   emits: ["close"],
-  setup(x, { emit: e }) {
-    const o = f(), { closePreviewMode: r } = u(), { openCodeEditor: t } = l(), n = _(), s = m({
+  setup(g, { emit: e }) {
+    const o = _(), { closePreviewMode: r } = u(), { openCodeEditor: t } = f(), i = y(), n = c({
       cancelOrBackButton: {
         type: "secondary",
         labelText: o("campaign-builder.cancel"),
@@ -19,12 +20,15 @@ const P = /* @__PURE__ */ p({
         type: "primary",
         labelText: o("email-editor.amp-validation-fix")
       }
-    }), i = () => {
+    }), a = () => {
       e("close"), r(), t();
-    }, a = c(() => `${o("products.errors")}(${n.ampErrors.length})`);
-    return { __sfc: !0, emit: e, trans: o, closePreviewMode: r, openCodeEditor: t, previewStore: n, footerButtonOptions: s, handleFixInCodeEditor: i, errorCountText: a, WpModal: d, InOnPageMessage: g };
+    }, s = o(
+      "email-editor.amp-validation-description",
+      { academyLink: M.AMP_FOR_EMAILS }
+    ), p = d(() => `${o("products.errors")} (${i.ampErrors.length})`);
+    return { __sfc: !0, emit: e, trans: o, closePreviewMode: r, openCodeEditor: t, previewStore: i, footerButtonOptions: n, handleFixInCodeEditor: a, ampValidationDescription: s, errorCountText: p, WpModal: l, InOnPageMessage: E };
   }
 });
 export {
-  P as default
+  O as default
 };

package/dist/components/organisms/email-preview/amp/AmpToggle.vue.js

@@ -1,20 +1,20 @@
 import o from "./AmpToggle.vue2.js";
 /* empty css               */
 import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var s = function() {
+var i = function() {
   var r = this, t = r._self._c, e = r._self._setupProxy;
-  return t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(e.InSegments, { attrs: { id: "guido__amp-toggle", "segment-list": e.segmentList, selected: e.previewStore.emailFormat }, on: { click: e.handleFormatChange } }), e.previewStore.showAMPErrorButton ? t(e.InButtonV2, { staticClass: "ml-2 d-f a-i-c b-c-11 b-c-h-11 t-c-4 t-c-h-4 i-c-4 bor-w-1 bor-s-s bor-c-11 bor-r-2", attrs: { id: "guido__amp-error-button", "left-icon": "line-error-box", type: "danger", "label-text-status": !1 }, on: { click: function(l) {
+  return t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(e.InSegments, { attrs: { id: "guido__amp-toggle", "with-icon": "", "segment-list": e.segmentList, selected: e.previewStore.emailFormat }, on: { click: e.handleFormatChange } }), e.previewStore.showAMPErrorButton ? t(e.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__amp-error-button", "left-icon": "filled-amp", type: "danger", "label-text": e.trans("email-editor.check-amp-errors", { count: e.previewStore.ampErrors.length }) }, on: { click: function(m) {
     return e.previewStore.openErrorModal();
   } } }) : r._e()], 1)]);
-}, a = [], i = /* @__PURE__ */ n(
+}, a = [], s = /* @__PURE__ */ n(
   o,
-  s,
+  i,
   a,
   !1,
   null,
-  "b5997368"
+  "22226124"
 );
-const d = i.exports;
+const d = s.exports;
 export {
   d as default
 };

package/dist/components/organisms/email-preview/amp/AmpToggle.vue2.js

@@ -1,26 +1,28 @@
-import { defineComponent as m, computed as n } from "vue";
-import { useTranslations as r } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as i } from "../../../../stores/preview.js";
+import { defineComponent as n, computed as i } from "vue";
+import { useTranslations as m } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as r } from "../../../../stores/preview.js";
 import { InButtonV2 as s, InSegments as l } from "@useinsider/design-system-vue";
-const _ = /* @__PURE__ */ m({
+const _ = /* @__PURE__ */ n({
   __name: "AmpToggle",
   setup(p) {
-    const t = i(), e = r(), o = n(() => [
+    const e = r(), t = m(), o = i(() => [
       {
-        text: e("dynamic-creatives.html"),
-        value: "html"
+        text: t("dynamic-creatives.html"),
+        value: "html",
+        icon: "line-code"
       },
       {
-        text: e("email-editor.amp-html"),
+        text: t("email-editor.amp-html"),
         value: "AMP",
-        tooltipText: t.hasAMP ? "" : e("email-editor.preview-amp-unavailable-tooltip"),
+        icon: "filled-amp",
+        tooltipText: e.hasAMP ? "" : t("email-editor.preview-amp-unavailable-tooltip"),
         position: "bottom",
         align: "center",
-        disable: !t.hasAMP
+        disable: !e.hasAMP
       }
     ]);
-    return { __sfc: !0, previewStore: t, trans: e, segmentList: o, handleFormatChange: (a) => {
-      t.setEmailFormat(a);
+    return { __sfc: !0, previewStore: e, trans: t, segmentList: o, handleFormatChange: (a) => {
+      e.setEmailFormat(a);
     }, InSegments: l, InButtonV2: s };
   }
 });

package/dist/components/organisms/email-preview/desktop-preview/DesktopBrowserHeader.vue.js

@@ -0,0 +1,18 @@
+import r from "./DesktopBrowserHeader.vue2.js";
+/* empty css                          */
+import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "desktop-browser-header d-f w-1 f-sh-0" }, [e("img", { staticClass: "desktop-browser-header__left f-sh-0", attrs: { alt: "", src: s.desktopMockupLeft } }), e("div", { staticClass: "desktop-browser-header__center f-g-1", style: s.centerBackgroundStyle }), e("img", { staticClass: "desktop-browser-header__right f-sh-0", attrs: { alt: "", src: s.desktopMockupRight } })]);
+}, _ = [], c = /* @__PURE__ */ o(
+  r,
+  a,
+  _,
+  !1,
+  null,
+  "d86c5af5"
+);
+const p = c.exports;
+export {
+  p as default
+};

package/dist/components/organisms/email-preview/desktop-preview/DesktopBrowserHeader.vue2.js

@@ -0,0 +1,15 @@
+import { defineComponent as e, computed as o } from "vue";
+import t from "../../../../static/assets/desktop/desktop-mockup-center.svg.js";
+import r from "../../../../static/assets/desktop/desktop-mockup-left.svg.js";
+import p from "../../../../static/assets/desktop/desktop-mockup-right.svg.js";
+const k = /* @__PURE__ */ e({
+  __name: "DesktopBrowserHeader",
+  setup(n) {
+    return { __sfc: !0, centerBackgroundStyle: o(() => ({
+      backgroundImage: `url("${t}")`
+    })), desktopMockupLeft: r, desktopMockupRight: p };
+  }
+});
+export {
+  k as default
+};

package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue.js

@@ -1,22 +1,18 @@
-import o from "./DesktopPreview.vue2.js";
+import r from "./DesktopPreview.vue2.js";
 /* empty css                    */
-import a from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var s = function() {
-  var r = this, t = r._self._c, e = r._self._setupProxy;
-  return t("div", { ref: "containerRef", staticStyle: { "min-height": "720px", height: "80vh" } }, [t(e.InContainer, { staticClass: "s-2 m-b-5 desktop-preview-container", attrs: { "full-width-content-status": "", "header-status": "", "border-radius": "bor-r-1", "container-type": "default", "footer-status": !1 }, scopedSlots: r._u([{ key: "headerLeftSlot", fn: function() {
-    return [t(e.EmailHeaderInfo)];
-  }, proxy: !0 }, { key: "headerRightSlot", fn: function() {
-    return [t(e.EmailSizeIndicator)];
-  }, proxy: !0 }]) }, [e.isContainerReady ? t("iframe", { staticClass: "email-iframe w-1 bor-w-0", style: { height: e.iframeHeight }, attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: e.previewStore.previewHtml } }) : r._e()])], 1);
-}, i = [], n = /* @__PURE__ */ a(
-  o,
-  s,
+import o from "../../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var s = this, e = s._self._c, t = s._self._setupProxy;
+  return e("div", { staticClass: "desktop-preview-wrapper" }, [e("p", { staticClass: "f-s-1 f-w-600 l-h-1 t-t-u t-c-53 mb-6 l-s-5" }, [s._v(" " + s._s(t.trans("email-editor.desktop-preview")) + " ")]), e("div", { ref: "containerRef", staticClass: "desktop-preview d-f f-d-c o-h s-1" }, [e(t.DesktopBrowserHeader), e("div", { staticClass: "desktop-preview__content d-f f-g-1 o-h b-c-5 min-h-0" }, [e("div", { staticClass: "f-g-1 h-1 o-h b-c-4 min-w-0" }, [t.isContainerReady ? e("iframe", { staticClass: "desktop-preview__iframe d-b w-1 h-1 b-c-4 bor-s-n", attrs: { sandbox: "allow-same-origin allow-popups allow-forms allow-scripts", srcdoc: t.previewStore.previewHtml } }) : s._e()])])], 1)]);
+}, i = [], p = /* @__PURE__ */ o(
+  r,
+  a,
   i,
   !1,
   null,
-  "2dd60b0c"
+  "e59b43cb"
 );
-const d = n.exports;
+const d = p.exports;
 export {
   d as default
 };

package/dist/components/organisms/email-preview/desktop-preview/DesktopPreview.vue2.js

@@ -1,31 +1,23 @@
-import { defineComponent as d, ref as r, onMounted as h, onBeforeUnmount as v, nextTick as g } from "vue";
-import { usePreviewStore as _ } from "../../../../stores/preview.js";
-import { InContainer as I } from "@useinsider/design-system-vue";
-import R from "./EmailHeaderInfo.vue.js";
-import C from "./EmailSizeIndicator.vue.js";
-const B = /* @__PURE__ */ d({
+import { defineComponent as f, ref as s, onMounted as c, onBeforeUnmount as m, nextTick as u } from "vue";
+import { useTranslations as p } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as l } from "../../../../stores/preview.js";
+import _ from "./DesktopBrowserHeader.vue.js";
+const x = /* @__PURE__ */ f({
   __name: "DesktopPreview",
-  setup(H) {
-    const t = r(), i = r("400px"), a = r(!1), m = _(), n = () => {
-      if (!t.value)
-        return;
-      const o = t.value.querySelector(".in-container");
-      if (!o)
-        return;
-      const u = o.getBoundingClientRect(), s = o.querySelector(".in-container__header"), f = s ? s.getBoundingClientRect().height : 0, p = u.height - f;
-      i.value = `${p}px`;
-    };
+  setup(v) {
+    const a = p(), o = s(), n = s(!1), i = l();
     let e = null;
-    const c = () => {
-      n(), t.value && (e = new ResizeObserver(n), e.observe(t.value), g(() => {
-        a.value = !0;
+    const t = () => {
+      o.value && (e = new ResizeObserver(() => {
+      }), e.observe(o.value), u(() => {
+        n.value = !0;
       }));
-    }, l = () => {
+    }, r = () => {
       e == null || e.disconnect();
     };
-    return h(c), v(l), { __sfc: !0, containerRef: t, iframeHeight: i, isContainerReady: a, previewStore: m, calculateIframeHeight: n, resizeObserver: e, initIframe: c, cleanIframe: l, InContainer: I, EmailHeaderInfo: R, EmailSizeIndicator: C };
+    return c(t), m(r), { __sfc: !0, trans: a, containerRef: o, isContainerReady: n, previewStore: i, resizeObserver: e, initIframe: t, cleanIframe: r, DesktopBrowserHeader: _ };
   }
 });
 export {
-  B as default
+  x as default
 };

package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js

@@ -2,15 +2,15 @@ import i from "./EmailSizeIndicator.vue2.js";
 /* empty css                        */
 import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var o = function() {
-  var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e("div", { staticClass: "d-f a-i-c j-c-c" }, [e(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), e(t.InTooltip, { staticClass: "d-f ml-1", attrs: { id: "email-size-tooltip", align: "center", position: "bottom", text: t.trans("email-editor.preview-design-size-tooltip") } })], 1);
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return e.previewStore.previewHtml ? s("div", { staticClass: "d-f a-i-c j-c-c" }, [s(e.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: e.htmlSize, "max-value": e.MAX_EMAIL_SIZE_IN_KB, type: e.progress.type, value: e.progress.value } }), s(e.InTooltip, { staticClass: "d-f ml-1", attrs: { id: "email-size-tooltip", align: "center", position: "bottom", text: e.trans("email-editor.preview-design-size-tooltip") } })], 1) : t._e();
 }, a = [], n = /* @__PURE__ */ r(
   i,
   o,
   a,
   !1,
   null,
-  "c2adc57d"
+  "913a3417"
 );
 const m = n.exports;
 export {