@useinsider/guido 1.0.0-beta.eb2a99e → 1.0.0-beta.ef5e504

package/dist/components/organisms/design-preview/InboxView.vue2.js

@@ -0,0 +1,23 @@
+import { defineComponent as r, computed as n } from "vue";
+import { useTranslations as i } from "../../../composables/useTranslations.js";
+import { InIcons as c } from "@useinsider/design-system-vue";
+const f = /* @__PURE__ */ r({
+  __name: "InboxView",
+  props: {
+    emailData: null
+  },
+  emits: ["open-email"],
+  setup(o) {
+    const t = o, s = i(), a = n(() => {
+      var e;
+      return ((e = t.emailData) == null ? void 0 : e.senderName) || `(${s("settings.sender-name")})`;
+    }), m = n(() => {
+      var e;
+      return ((e = t.emailData) == null ? void 0 : e.subject) || s("newsletter.subject");
+    });
+    return { __sfc: !0, props: t, trans: s, senderName: a, subject: m, InIcons: c };
+  }
+});
+export {
+  f as default
+};

package/dist/components/organisms/design-preview/MobilePreview.vue.d.ts

@@ -0,0 +1,17 @@
+import type { EmailData } from '@@/Types/generic';
+interface Props {
+    emailHtml: string;
+    isAmp: boolean;
+    emailData?: EmailData;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/organisms/design-preview/MobilePreview.vue.js

@@ -0,0 +1,17 @@
+import e from "./MobilePreview.vue2.js";
+import o from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var t = this, s = t._self._c, a = t._self._setupProxy;
+  return s("div", { staticClass: "d-f j-c-c p-4" }, [s("div", { staticClass: "p-r w-35-s h-26-s" }, [s("img", { staticClass: "w-1 h-1 d-b p-e-n", attrs: { alt: a.mockupAlt, src: a.mockupImage } }), s("div", { staticClass: "p-a l-3 w-21-s h-24-s o-h", style: { top: a.phoneScreenTopMargin } }, [a.showInbox ? s(a.InboxView, { attrs: { "email-data": a.props.emailData }, on: { "open-email": a.openEmail } }) : s(a.EmailView, { attrs: { "email-html": t.emailHtml, "is-amp": t.isAmp }, on: { "back-to-inbox": a.backToInbox } })], 1)])]);
+}, n = [], r = /* @__PURE__ */ o(
+  e,
+  i,
+  n,
+  !1,
+  null,
+  null
+);
+const c = r.exports;
+export {
+  c as default
+};

package/dist/components/organisms/design-preview/MobilePreview.vue2.js

@@ -0,0 +1,22 @@
+import { defineComponent as c, ref as u, computed as e } from "vue";
+import r from "./EmailView.vue.js";
+import i from "./InboxView.vue.js";
+const b = /* @__PURE__ */ c({
+  __name: "MobilePreview",
+  props: {
+    emailHtml: null,
+    isAmp: { type: Boolean },
+    emailData: null
+  },
+  setup(n) {
+    const p = n, o = u(!1), m = e(() => o.value ? "/inbox-mockup.svg" : "/phone-mockup.svg"), t = e(() => o.value ? "Inbox mockup" : "Phone mockup"), a = () => {
+      o.value = !1;
+    }, l = () => {
+      o.value = !0;
+    }, s = e(() => o.value ? "88px" : "44px");
+    return { __sfc: !0, props: p, showInbox: o, mockupImage: m, mockupAlt: t, openEmail: a, backToInbox: l, phoneScreenTopMargin: s, EmailView: r, InboxView: i };
+  }
+});
+export {
+  b as default
+};

package/dist/components/organisms/header/AmpErrorModal.vue.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    errors: string[];
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    close: () => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,21 @@
+import n from "./AmpErrorModal.vue2.js";
+import a from "../../../_virtual/_plugin-vue2_normalizer.js";
+var i = function() {
+  var e = this, o = e._self._c, t = e._self._setupProxy;
+  return o(t.InModalV2, { attrs: { id: "amp-error-modal", "close-button-status": "", "close-on-outside-click": "", "description-status": "", "footer-status": "", status: "", size: "medium", "description-text": t.trans("email.amp-validation-description"), "footer-button-group-options": t.footerButtonOptions, "title-text": t.trans("email.amp-validation-title") }, on: { cancelOrBackButtonEvent: t.handleClose, onCloseEvent: t.handleClose, primaryButtonEvent: t.handleFixInCodeEditor }, scopedSlots: e._u([{ key: "contentSlot", fn: function() {
+    return [o("div", { staticClass: "d-f f-d-c" }, [o("div", { staticClass: "mb-3" }, [o("div", { staticClass: "l-s-5 f-s-1 f-w-600 t-c-55 t-t-u" }, [e._v(" " + e._s(`${t.trans("products.errors")}(${t.errorCount})`) + " ")])]), o("div", { staticClass: "d-f f-d-c g-13 max-h-21-s o-y-a", staticStyle: { gap: "16px" } }, e._l(t.props.errors, function(s, r) {
+      return o(t.InOnPageMessage, { key: r, attrs: { icon: "filled-error-box", size: "medium", type: "alert", text: s } });
+    }), 1)])];
+  }, proxy: !0 }]) });
+}, l = [], c = /* @__PURE__ */ a(
+  n,
+  i,
+  l,
+  !1,
+  null,
+  null
+);
+const f = c.exports;
+export {
+  f as default
+};

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

@@ -0,0 +1,27 @@
+import { defineComponent as m } from "vue";
+import { usePreviewMode as f } from "../../../composables/usePreviewMode.js";
+import { useTranslations as u } from "../../../composables/useTranslations.js";
+import { useEditorStore as E } from "../../../stores/editor.js";
+import { InOnPageMessage as w, InModalV2 as A } from "@useinsider/design-system-vue";
+const v = /* @__PURE__ */ m({
+  __name: "AmpErrorModal",
+  props: {
+    errors: null
+  },
+  emits: ["close"],
+  setup(a, { emit: o }) {
+    const r = a, p = r.errors.length, e = u(), t = E(), { disablePreviewUI: i } = f(), d = () => {
+      o("close");
+    }, l = () => {
+      var n, s;
+      o("close"), t.isPreviewModeOpen = !1, (s = (n = window.StripoEditorApi) == null ? void 0 : n.codeEditorApi) != null && s.openCodeEditor ? (i(), window.StripoEditorApi.codeEditorApi.openCodeEditor()) : console.error("StripoEditorApi codeEditorApi not available");
+    }, c = {
+      primaryButton: { type: "primary", labelText: e("email.amp-validation-fix") },
+      cancelOrBackButton: { type: "secondary", labelText: e("campaign-builder.cancel"), styling: "ghost" }
+    };
+    return { __sfc: !0, props: r, emit: o, errorCount: p, trans: e, editorStore: t, disablePreviewUI: i, handleClose: d, handleFixInCodeEditor: l, footerButtonOptions: c, InModalV2: A, InOnPageMessage: w };
+  }
+});
+export {
+  v as default
+};

package/dist/components/organisms/header/AmpToggle.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -0,0 +1,19 @@
+import o from "./AmpToggle.vue2.js";
+import s from "../../../_virtual/_plugin-vue2_normalizer.js";
+var a = function() {
+  var e = this, t = e._self._c, r = e._self._setupProxy;
+  return r.editorStore.isPreviewModeOpen ? t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(r.InSegments, { attrs: { id: "guido__amp-toggle", "segment-list": r.segmentList, selected: r.editorStore.emailFormat }, on: { click: r.handleFormatChange } }), r.editorStore.emailFormat === "amp" && r.hasAMPErrors ? t(r.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", attrs: { id: "guido__amp-error-button", "left-icon": "line-error-box", type: "danger", "label-text-status": !1 }, on: { click: r.handleErrorClick } }) : e._e()], 1), r.showErrorModal ? t(r.AmpErrorModal, { attrs: { errors: r.editorStore.ampErrors || [] }, on: { close: function(c) {
+    r.showErrorModal = !1;
+  } } }) : e._e()], 1) : e._e();
+}, n = [], i = /* @__PURE__ */ s(
+  o,
+  a,
+  n,
+  !1,
+  null,
+  null
+);
+const _ = i.exports;
+export {
+  _ as default
+};

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

@@ -0,0 +1,38 @@
+import { defineComponent as i, ref as p, computed as t, watch as c } from "vue";
+import { usePreviewMode as d } from "../../../composables/usePreviewMode.js";
+import { useEditorStore as u } from "../../../stores/editor.js";
+import { InButtonV2 as M, InSegments as f } from "@useinsider/design-system-vue";
+import h from "./AmpErrorModal.vue.js";
+const C = /* @__PURE__ */ i({
+  __name: "AmpToggle",
+  setup(E) {
+    const o = u(), { compile: a } = d(), m = p(!1), r = t(() => !!o.ampHtml), l = t(() => !!(o.ampErrors && o.ampErrors.length > 0)), s = t(() => [
+      { text: "HTML", value: "html" },
+      {
+        text: "AMP HTML",
+        value: "amp",
+        tooltipText: r.value ? "" : "AMP HTML Preview isn’t available as no AMP blocks found in your Email Design.",
+        position: "bottom",
+        align: "center",
+        disable: !r.value
+      }
+    ]), n = async () => {
+      try {
+        const e = await a();
+        o.ampHtml = e.ampHtml ?? null, o.ampErrors = e.ampErrors ?? null, o.emailFormat = e.ampHtml ? "amp" : "html";
+      } catch (e) {
+        console.error("Failed to compile for AMP:", e);
+      }
+    };
+    return c([() => o.editorVisualMode, () => o.isPreviewModeOpen], () => {
+      o.isPreviewModeOpen && n();
+    }, { immediate: !0 }), { __sfc: !0, editorStore: o, compile: a, showErrorModal: m, hasAMP: r, hasAMPErrors: l, segmentList: s, updateAmpData: n, handleFormatChange: (e) => {
+      o.emailFormat = e;
+    }, handleErrorClick: () => {
+      m.value = !0;
+    }, InSegments: f, InButtonV2: M, AmpErrorModal: h };
+  }
+});
+export {
+  C as default
+};

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

@@ -1,17 +1,17 @@
 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);
-}, l = [], r = /* @__PURE__ */ i(
+  var o = this, e = o._self._c, t = o._self._setupProxy;
+  return t.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(t.VersionHistory), e(t.VersionHistoryViewOptions)], 1) : e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1 } }), e(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), e(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.editorStore.isPreviewModeOpen ? t.trans("newsletter.close-email-preview") : t.trans("newsletter.email-preview") }, on: { click: t.handlePreviewClick } }), e(t.ViewOptions, { staticClass: "ml-3" }), e(t.AmpToggle)], 1);
+}, r = [], l = /* @__PURE__ */ i(
   s,
   n,
-  l,
+  r,
   !1,
   null,
   null
 );
-const p = r.exports;
+const u = l.exports;
 export {
-  p as default
+  u as default
 };

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

@@ -1,20 +1,24 @@
-import { defineComponent as r } from "vue";
-import { useTranslations as s } from "../../../composables/useTranslations.js";
-import { useEditorStore as n } from "../../../stores/editor.js";
-import { InButtonV2 as e } from "@useinsider/design-system-vue";
-import m from "./version-history/VersionHistory.vue.js";
-import p from "./version-history/ViewOptions.vue.js";
-import f from "./ViewOptions.vue.js";
-const y = /* @__PURE__ */ r({
+import { defineComponent as s } from "vue";
+import { usePreviewMode as n } from "../../../composables/usePreviewMode.js";
+import { useTranslations as p } from "../../../composables/useTranslations.js";
+import { useEditorStore as m } from "../../../stores/editor.js";
+import { InButtonV2 as l } from "@useinsider/design-system-vue";
+import a from "./AmpToggle.vue.js";
+import f from "./version-history/VersionHistory.vue.js";
+import d from "./version-history/ViewOptions.vue.js";
+import c from "./ViewOptions.vue.js";
+const y = /* @__PURE__ */ s({
   __name: "MiddleSlot",
-  setup(a) {
-    const o = n(), t = s();
-    return { __sfc: !0, editorStore: o, trans: t, getTooltipOptions: (i) => ({
-      id: `${i}-tooltip`,
+  setup(w) {
+    const o = m(), t = p(), { enablePreviewUI: e, disablePreviewUI: i } = n();
+    return { __sfc: !0, editorStore: o, trans: t, enablePreviewUI: e, disablePreviewUI: i, handlePreviewClick: () => {
+      o.isPreviewModeOpen = !o.isPreviewModeOpen, o.isPreviewModeOpen ? e() : i();
+    }, getTooltipOptions: (r) => ({
+      id: `${r}-tooltip`,
       dynamicPosition: !1,
       staticPosition: "bottom center",
       iconStatus: !1
-    }), InButtonV2: e, VersionHistory: m, VersionHistoryViewOptions: p, ViewOptions: f };
+    }), InButtonV2: l, AmpToggle: a, VersionHistory: f, VersionHistoryViewOptions: d, ViewOptions: c };
   }
 });
 export {

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

@@ -2,7 +2,7 @@ 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 } }), 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);
+  return e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isPreviewModeOpen, "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 || t.editorStore.isPreviewModeOpen } })], 1);
 }, r = [], a = /* @__PURE__ */ i(
   o,
   n,

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

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

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

@@ -1,16 +1,16 @@
 import r from "./ViewOptions.vue2.js";
 /* empty css                 */
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var n = function() {
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var s = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
-}, i = [], _ = /* @__PURE__ */ s(
+  return o(e.InSegments, { attrs: { id: "guido__view-option-selection", "with-icon": "", disable: e.editorStore.isPreviewModeOpen, "segment-list": e.segmentList, selected: e.editorStore.editorVisualMode } });
+}, n = [], _ = /* @__PURE__ */ i(
   r,
+  s,
   n,
-  i,
   !1,
   null,
-  "0fff376c"
+  "f90d31ea"
 );
 const l = _.exports;
 export {

package/dist/composables/useDebounce.d.ts

@@ -0,0 +1,4 @@
+export declare const useDebounce: () => {
+    debounce: (fn: () => void, ms?: number) => void;
+    clearDebounce: () => void;
+};

package/dist/composables/useDebounce.js

@@ -0,0 +1,12 @@
+import { ref as c } from "vue";
+const r = () => {
+  const e = c(void 0);
+  return { debounce: (o, u = 150) => {
+    e.value && window.clearTimeout(e.value), e.value = window.setTimeout(o, u);
+  }, clearDebounce: () => {
+    e.value && (window.clearTimeout(e.value), e.value = void 0);
+  } };
+};
+export {
+  r as useDebounce
+};

package/dist/composables/useMobileGmailFit.d.ts

@@ -0,0 +1,5 @@
+export declare const useMobileGmailFit: () => {
+    setupMobileGmailFit: (iframe: HTMLIFrameElement) => void;
+    tearDownMobileGmailFit: (iframe: HTMLIFrameElement) => void;
+    hasResponsiveMetaViewport: (doc: Document) => boolean;
+};

package/dist/composables/useMobileGmailFit.js

@@ -0,0 +1,69 @@
+import { useDebounce as p } from "./useDebounce.js";
+import { META_VIEWPORT_REGEX as h, INLINE_WIDTH_REGEX as w, EMAIL_CONTAINER_SELECTORS as f, DEFAULT_EMAIL_WIDTH as b, MIN_SCALE as v, TABLE_WIDTH_REGEX as A, RESIZE_DEBOUNCE_MS as u } from "../enums/gmailMobilePreview.js";
+let a = null, c = null;
+const { debounce: y } = p(), M = (t) => {
+  if (!t)
+    return null;
+  const e = t.match(A);
+  if (!e)
+    return null;
+  const r = Number(e[1]);
+  return Number.isNaN(r) ? null : r;
+}, g = (t) => {
+  const e = Array.from(t.querySelectorAll("table[width]")).reduce(
+    (n, i) => {
+      const o = M(i.getAttribute("width"));
+      return o && o > n ? o : n;
+    },
+    0
+  ), r = Array.from(t.querySelectorAll('[style*="width"]')).reduce(
+    (n, i) => {
+      const l = (i.getAttribute("style") || "").match(w);
+      if (!l)
+        return n;
+      const m = Number(l[1]);
+      return !Number.isNaN(m) && m > n ? m : n;
+    },
+    0
+  ), s = f.reduce((n, i) => {
+    const o = t.querySelector(i);
+    if (!o)
+      return n;
+    const l = Math.max(o.offsetWidth, o.scrollWidth);
+    return l > n ? l : n;
+  }, 0);
+  return Math.max(e, r, s) || b;
+}, N = (t) => {
+  t.documentElement.style.setProperty("overflow-x", "visible", "important"), t.body.style.setProperty("visibility", "visible", "important");
+}, S = (t) => {
+  t.documentElement.style.removeProperty("transform"), t.documentElement.style.removeProperty("transform-origin"), t.documentElement.style.removeProperty("height"), t.body.style.removeProperty("overflow-x");
+}, d = (t) => {
+  const e = t.querySelector('meta[name="viewport"]');
+  if (!e)
+    return !1;
+  const r = e.getAttribute("content") || "";
+  return h.test(r);
+}, W = (t, e) => {
+  const r = g(t), s = e / r, n = Math.min(Math.max(s, v), 1);
+  t.documentElement.style.setProperty("height", "100%", "important"), t.documentElement.style.setProperty("transform", `scale(${n})`, "important"), t.documentElement.style.setProperty("transform-origin", "top left", "important"), t.body.style.setProperty("overflow-x", "hidden", "important");
+}, E = (t) => {
+  const e = t.contentWindow;
+  c && e && e.removeEventListener("resize", c), a && window.removeEventListener("resize", a), c = null, a = null;
+}, P = () => ({ setupMobileGmailFit: (e) => {
+  const r = e.contentDocument, s = e.contentWindow;
+  if (!r || !s)
+    return;
+  N(r);
+  const n = () => {
+    const i = e.clientWidth || e.getBoundingClientRect().width || 375;
+    if (d(r)) {
+      S(r);
+      return;
+    }
+    W(r, i);
+  };
+  n(), E(e), c = () => y(n, u), s.addEventListener("resize", c), a = () => y(n, u), window.addEventListener("resize", a);
+}, tearDownMobileGmailFit: E, hasResponsiveMetaViewport: d });
+export {
+  P as useMobileGmailFit
+};

package/dist/composables/usePreviewMode.d.ts

@@ -0,0 +1,6 @@
+import type { CompiledEmailResult, CompileEmailOptions } from '@@/Types/stripo';
+export declare const usePreviewMode: () => {
+    compile: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
+    enablePreviewUI: () => void;
+    disablePreviewUI: () => void;
+};

package/dist/composables/usePreviewMode.js

@@ -0,0 +1,19 @@
+import { useActionsApi as s } from "./useActionsApi.js";
+const a = () => {
+  const { getCompiledEmail: e } = s();
+  return { compile: async (t) => {
+    const i = await e({ minimize: !1, resetDataSavedFlag: !1, ...t });
+    return {
+      html: i.html,
+      ampHtml: i.ampHtml || null,
+      ampErrors: i.ampErrors || null
+    };
+  }, enablePreviewUI: () => {
+    window.StripoEditorApi.uiApi.setSettingsPanelVisible(!1), window.StripoEditorApi.uiApi.setBlocksPanelVisible(!1);
+  }, disablePreviewUI: () => {
+    window.StripoEditorApi.uiApi.setSettingsPanelVisible(!0), window.StripoEditorApi.uiApi.setBlocksPanelVisible(!0);
+  } };
+};
+export {
+  a as usePreviewMode
+};

package/dist/composables/useStripo.js

@@ -1,20 +1,20 @@
-import { useActionsApi as g } from "./useActionsApi.js";
-import { useCustomInterfaceAppearance as f } from "./useCustomInterfaceAppearance.js";
-import { useToaster as E } from "./useToaster.js";
-import { displayConditions as S } from "../enums/displayConditions.js";
-import y from "../extensions/DynamicContent/extension.js";
-import { useStripoApi as C } from "../services/stripoApi.js";
-import { useEditorStore as w } from "../stores/editor.js";
-const A = (a) => {
-  const { handleError: d } = E(), { getToken: c, getCustomFonts: u } = C(), l = (e, r = []) => {
-    const i = w(), { html: t, css: s, forceRecreate: m } = 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 y } from "../services/stripoApi.js";
+import { useEditorStore as C } from "../stores/editor.js";
+const x = (a) => {
+  const { handleError: d } = f(), { getToken: c, getCustomFonts: u } = y(), l = (e, r = []) => {
+    const i = C(), { html: t, css: s } = e;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
         metadata: a,
         html: t,
         css: s,
-        forceRecreate: m,
+        forceRecreate: !0,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -30,7 +30,7 @@ const A = (a) => {
                 `,
         conditionsEnabled: !0,
         customConditionsEnabled: !0,
-        conditionCategories: S,
+        conditionCategories: E,
         messageSettingsEnabled: !1,
         editorFonts: {
           showDefaultStandardFonts: !0,
@@ -47,7 +47,7 @@ const A = (a) => {
         },
         onTemplateLoaded() {
           try {
-            const { importCss: o } = f(), { activateCustomViewStyles: n } = g();
+            const { importCss: o } = g(), { activateCustomViewStyles: n } = m();
             o(), n();
           } catch (o) {
             d(o, "Failed to load custom interface appearance");
@@ -63,7 +63,7 @@ const A = (a) => {
           i.isVersionHistoryOpen = o;
         },
         ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal"],
-        extensions: [y]
+        extensions: [S]
       }
     );
   }, p = (e) => new Promise((r, i) => {
@@ -87,5 +87,5 @@ const A = (a) => {
   } };
 };
 export {
-  A as useStripo
+  x as useStripo
 };

package/dist/enums/gmailMobilePreview.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_EMAIL_WIDTH = 600;
+export declare const MIN_SCALE = 0.2;
+export declare const RESIZE_DEBOUNCE_MS = 100;
+export declare const INLINE_WIDTH_REGEX: RegExp;
+export declare const TABLE_WIDTH_REGEX: RegExp;
+export declare const META_VIEWPORT_REGEX: RegExp;
+export declare const EMAIL_CONTAINER_SELECTORS: readonly [".wrapper", ".container", "#wrapper", "#container", "[data-email-container]", "[role=\"presentation\"]"];