@useinsider/guido 3.2.0-beta.51b7991 → 3.2.0-beta.556da4b

package/README.md

@@ -143,7 +143,8 @@ const config: GuidoConfigInput = {
     displayConditions?: boolean,  // Default: true
     unsubscribe?: boolean,        // Default: true
     modulesDisabled?: boolean,    // Default: false - Disable modules panel
-    liquidSyntax?: boolean,      // Default: false - Enable Liquid template syntax
+    liquidSyntax?: boolean,       // Default: false - Enable Liquid template syntax
+    autosave?: boolean,           // Default: false - Show the Auto Save toggle in the header. See wiki/AUTOSAVE.md.
   },
 
   // Optional: Callbacks
@@ -202,6 +203,7 @@ interface SavedTemplateDetails {
     config: number[];
   };
   metadata: Metadata;
+  silent: boolean;  // true when triggered by autosave, false when user clicked Save
 }
 
 interface Metadata {
@@ -327,6 +329,28 @@ const config: GuidoConfigInput = {
 
 ---
 
+## Autosave
+
+Guido ships an opt-in **autosave** that saves on a 3-minute interval and when the user leaves the tab. Enable it with the `features.autosave` feature flag — this **shows an "Auto Save" toggle in the editor header**; the end user switches autosave on per session.
+
+```typescript
+const config: GuidoConfigInput = {
+  identity: { templateId: 'tpl-123', userId: 'user-456' },
+  partner: { name: 'partner' },
+  features: {
+    autosave: true,   // Default: false — shows the Auto Save toggle in the header
+  },
+};
+```
+
+- Default is `false` — integrations see no change unless they opt in.
+- Autosave reuses the same save pipeline as the Save button, so your existing `@save:complete` handler receives autosave output identically to a manual save. No new events or callbacks.
+- Toggle state is **session-only** (Pinia) — resets to OFF on reload.
+
+For a deep dive on triggers, guards, and limitations, see **[wiki/AUTOSAVE.md](wiki/AUTOSAVE.md)**.
+
+---
+
 ## HTML Compiler Rules
 
 Add custom rules to transform HTML during export:

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

@@ -1,5 +1,5 @@
 import { ModuleFolderDefaults as b } from "../../enums/defaults.js";
-import { object as o, number as p, optional as e, string as t, pipe as u, picklist as n, minLength as d, custom as S, boolean as a, array as c, literal as l, variant as k } from "../../node_modules/valibot/dist/index.js";
+import { object as a, number as p, optional as e, string as t, pipe as u, picklist as n, minLength as d, custom as S, boolean as o, array as c, literal as l, variant as k } from "../../node_modules/valibot/dist/index.js";
 const m = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
@@ -12,7 +12,7 @@ const m = {
   ARCHITECT: 49,
   /** Unsubscribe page builder */
   UNSUBSCRIBE_PAGES: 97
-}, h = o({
+}, h = a({
   /** Unique identifier for the template being edited */
   templateId: u(
     t(),
@@ -25,12 +25,12 @@ const m = {
   ),
   /** Optional variation ID for A/B testing */
   variationId: e(t())
-}), y = o({
+}), f = a({
   /** Fallback font name (e.g., "Georgia") */
   name: t(),
   /** Fallback font family (e.g., "serif" or "sans-serif") */
   family: t()
-}), f = o({
+}), y = a({
   /** Partner/organization name (required) */
   name: u(
     t(),
@@ -53,8 +53,8 @@ const m = {
   /** Display name for the current user */
   username: e(t(), "Guido User"),
   /** Fallback font settings from partner settings — used to match backend size calculation */
-  fallbackFont: e(y)
-}), A = o({
+  fallbackFont: e(f)
+}), A = a({
   /** Display text for the dynamic content */
   text: t(),
   /** Template variable value (e.g., {{username}}) */
@@ -63,12 +63,12 @@ const m = {
   fallback: e(t()),
   /** Optional formatting options */
   format: e(
-    o({
+    a({
       key: t(),
       value: t()
     })
   )
-}), R = o({
+}), R = a({
   /** Initial HTML content */
   html: e(t(), ""),
   /** Initial CSS content */
@@ -83,13 +83,13 @@ const m = {
   /** Selected unsubscribe page IDs */
   selectedUnsubscribePages: e(c(p()), []),
   /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
-  forceRecreate: e(a(), !1)
-}), C = o({
+  forceRecreate: e(o(), !1)
+}), C = a({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
   subject: e(t(), "")
-}), T = o({
+}), T = a({
   /** Locale for the editor UI */
   locale: e(t(), "en"),
   /** Path to translations object */
@@ -102,28 +102,30 @@ const m = {
   savedModulesFolderName: e(t(), b.SAVED_MODULES),
   /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
   defaultModulesFolderName: e(t(), b.DEFAULT_MODULES)
-}), I = o({
+}), I = a({
   /** Whether to show the header bar */
-  showHeader: e(a(), !0),
+  showHeader: e(o(), !0),
   /** Custom label for back button (if shown) */
   backButtonLabel: e(t())
-}), E = o({
+}), E = a({
   /** Enable dynamic content insertion */
-  dynamicContent: e(a(), !0),
+  dynamicContent: e(o(), !0),
   /** Enable save as template functionality */
-  saveAsTemplate: e(a(), !0),
+  saveAsTemplate: e(o(), !0),
   /** Enable version history */
-  versionHistory: e(a(), !0),
+  versionHistory: e(o(), !0),
   /** Enable test message sending */
-  testMessage: e(a(), !0),
+  testMessage: e(o(), !0),
   /** Enable display conditions */
-  displayConditions: e(a(), !0),
+  displayConditions: e(o(), !0),
   /** Enable unsubscribe block */
-  unsubscribe: e(a(), !0),
+  unsubscribe: e(o(), !0),
   /** Disable modules panel in the editor */
-  modulesDisabled: e(a(), !1),
+  modulesDisabled: e(o(), !1),
   /** Enable Liquid template syntax */
-  liquidSyntax: e(a(), !1)
+  liquidSyntax: e(o(), !1),
+  /** Enable autosave (3-min interval + tab-hide). User toggles on/off from the header. */
+  autosave: e(o(), !1)
 }), g = n([
   "amp-accordion",
   "amp-carousel",
@@ -146,7 +148,7 @@ const m = {
   "unsubscribe-block",
   "coupon-block",
   "items-block"
-]), L = o({
+]), L = a({
   /** Default blocks to exclude from the editor */
   excludeDefaults: e(
     c(g),
@@ -157,14 +159,14 @@ const m = {
     c(O),
     []
   )
-}), r = o({
+}), r = a({
   /** Unique identifier for the rule */
   id: t(),
   /** Human-readable description */
   description: e(t()),
   /** Priority for rule ordering (lower = earlier) */
   priority: p()
-}), M = o({
+}), M = a({
   ...r.entries,
   type: l("replace"),
   /** String to search for */
@@ -172,8 +174,8 @@ const m = {
   /** Replacement string */
   replacement: t(),
   /** Replace all occurrences (default: false) */
-  replaceAll: e(a())
-}), N = o({
+  replaceAll: e(o())
+}), N = a({
   ...r.entries,
   type: l("regex"),
   /** Regex pattern string */
@@ -182,12 +184,12 @@ const m = {
   replacement: t(),
   /** Regex flags (e.g., 'gi') */
   flags: e(t())
-}), D = o({
+}), D = a({
   ...r.entries,
   type: l("remove"),
   /** Strings or patterns to remove */
   targets: c(t())
-}), v = o({
+}), v = a({
   ...r.entries,
   type: l("custom"),
   /** Custom processor function */
@@ -200,12 +202,12 @@ const m = {
   N,
   D,
   v
-]), U = o({
+]), U = a({
   /** Custom compiler rules to apply */
   customRules: e(c(x), []),
   /** Skip default compiler rules */
-  ignoreDefaultRules: e(a(), !1)
-}), B = o({
+  ignoreDefaultRules: e(o(), !1)
+}), B = a({
   /**
    * External validation handler called before save completes.
    * Return false to cancel the save operation.
@@ -216,12 +218,12 @@ const m = {
       "externalValidation must be a function"
     )
   )
-}), H = o({
+}), H = a({
   // Required sections
   /** Identity configuration (required) */
   identity: h,
   /** Partner configuration (required) */
-  partner: f,
+  partner: y,
   // Optional sections (with defaults)
   /** Template content and presets */
   template: e(R, {}),
@@ -249,12 +251,12 @@ export {
   A as DynamicContentSchema,
   T as EditorSchema,
   C as EmailHeaderSchema,
-  y as FallbackFontSchema,
+  f as FallbackFontSchema,
   E as FeaturesSchema,
   H as GuidoConfigSchema,
   h as IdentitySchema,
   m as MessageType,
-  f as PartnerSchema,
+  y as PartnerSchema,
   s as ProductType,
   N as RegexRuleSchema,
   D as RemoveRuleSchema,

package/dist/components/Guido.vue.js

@@ -3,7 +3,7 @@ import i from "./Guido.vue2.js";
 import a from "../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
+  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), r(e.AutoSaveController), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
     return e.emit("onboarding:finished");
   } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
 }, n = [], s = /* @__PURE__ */ a(
@@ -12,9 +12,9 @@ var t = function() {
   n,
   !1,
   null,
-  "25780af6"
+  "fffc13d6"
 );
-const u = s.exports;
+const l = s.exports;
 export {
-  u as default
+  l as default
 };

package/dist/components/Guido.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as j, defineAsyncComponent as R, ref as A, computed as I, watch as J, onMounted as Q, onUnmounted as X } from "vue";
+import { defineComponent as j, defineAsyncComponent as N, ref as R, computed as I, watch as J, onMounted as Q, onUnmounted as X } from "vue";
 import { provideGuidoActions as Y } from "../composables/useGuidoActions.js";
 import { usePartner as Z } from "../composables/usePartner.js";
 import { useStripo as ee } from "../composables/useStripo.js";
@@ -6,42 +6,43 @@ import { useTimerClone as te } from "../composables/useTimerClone.js";
 import { migrate as W } from "../config/migrator/index.js";
 import { ModuleFolderDefaults as B } from "../enums/defaults.js";
 import { RIBBON_SELECTOR as oe } from "../enums/onboarding.js";
-import ne from "./organisms/base/Toaster.vue.js";
+import ne from "./organisms/AutoSaveController.vue.js";
+import re from "./organisms/base/Toaster.vue.js";
 import se from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import re from "./organisms/header/HeaderWrapper.vue.js";
-import ce from "./organisms/LoadingWrapper.vue.js";
-import ae from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import ie from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as me } from "../services/stripoApi.js";
-import { useConfigStore as de } from "../stores/config.js";
-import { useDynamicContentStore as le } from "../stores/dynamic-content.js";
-import { useEditorStore as ue } from "../stores/editor.js";
-import { usePreviewStore as pe } from "../stores/preview.js";
-import { useUnsubscribeStore as fe } from "../stores/unsubscribe.js";
-const Re = /* @__PURE__ */ j({
+import ce from "./organisms/header/HeaderWrapper.vue.js";
+import ae from "./organisms/LoadingWrapper.vue.js";
+import ie from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import me from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as de } from "../services/stripoApi.js";
+import { useConfigStore as le } from "../stores/config.js";
+import { useDynamicContentStore as ue } from "../stores/dynamic-content.js";
+import { useEditorStore as pe } from "../stores/editor.js";
+import { usePreviewStore as fe } from "../stores/preview.js";
+import { useUnsubscribeStore as ve } from "../stores/unsubscribe.js";
+const Ie = /* @__PURE__ */ j({
   __name: "Guido",
   props: {
     config: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(H, { expose: x, emit: s }) {
-    const b = H, G = R(
+  setup(H, { expose: x, emit: r }) {
+    const S = H, G = N(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), z = R(
+    ), z = N(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), S = A(), d = A(), l = le(), g = fe(), a = de();
-    a.init(b.config);
-    const u = ue(), q = pe(), i = I(() => u.hasChanges), { isTestPartner: K } = Z(), w = () => {
+    ), b = R(), d = R(), l = ue(), g = ve(), a = le();
+    a.init(S.config);
+    const u = pe(), q = fe(), i = I(() => u.hasChanges), { isTestPartner: K } = Z(), w = () => {
       var e;
-      return (e = S.value) == null ? void 0 : e.handleSave(!0);
+      return (e = b.value) == null ? void 0 : e.handleSave(!0);
     }, {
       templateId: p,
       userId: E,
       partnerName: D,
       username: C,
       template: t,
-      editor: r
-    } = a, m = (t == null ? void 0 : t.html) || "", T = (t == null ? void 0 : t.css) || "", f = (t == null ? void 0 : t.preselectedDynamicContent) || [], k = (r == null ? void 0 : r.savedModulesFolderName) || B.SAVED_MODULES, F = (r == null ? void 0 : r.defaultModulesFolderName) || B.DEFAULT_MODULES;
+      editor: s
+    } = a, m = (t == null ? void 0 : t.html) || "", T = (t == null ? void 0 : t.css) || "", f = (t == null ? void 0 : t.preselectedDynamicContent) || [], k = (s == null ? void 0 : s.savedModulesFolderName) || B.SAVED_MODULES, F = (s == null ? void 0 : s.defaultModulesFolderName) || B.DEFAULT_MODULES;
     u.templateId = p;
     const v = {
       emailId: p,
@@ -53,38 +54,38 @@ const Re = /* @__PURE__ */ j({
     }, L = {
       preselectedDynamicContentList: f,
       onReady: () => {
-        console.debug("guido:ready"), s("ready");
+        console.debug("guido:ready"), r("ready");
       }
-    }, { initPlugin: U } = ee(v, L), { getDefaultTemplate: _ } = me(), { cloneTimersOnSave: M, hasTimerBlocks: O } = te(), V = I(() => {
+    }, { initPlugin: U } = ee(v, L), { getDefaultTemplate: _ } = de(), { cloneTimersOnSave: M, hasTimerBlocks: O } = te(), V = I(() => {
       var e;
       return !((e = a.ui) != null && e.showHeader);
     });
     Y({
       onBack: () => {
-        console.debug("guido:back"), s("back");
+        console.debug("guido:back"), r("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), s("save:start");
+        console.debug("guido:save:start"), r("save:start");
       },
       onSaveComplete: (e) => {
         const n = { ...e, metadata: v };
-        console.debug("guido:save:complete", n), s("save:complete", n);
+        console.debug("guido:save:complete", n), r("save:complete", n);
       },
       onTestEmailClick: () => {
-        console.debug("guido:test-email:click"), s("test-email:click");
+        console.debug("guido:test-email:click"), r("test-email:click");
       }
     });
     const P = (e) => {
       console.debug("dynamic-content:close", e), l.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, N = () => {
+    }, A = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
     J(() => i.value, () => {
-      s("on-change", i.value);
+      r("on-change", i.value);
     });
     const y = (e) => {
       const n = e, { attribute: o, position: $ } = n.detail;
-      console.debug("dynamic-content:open", n.detail), s("dynamic-content:open", o, $);
+      console.debug("dynamic-content:open", n.detail), r("dynamic-content:open", o, $);
     };
     let c = null;
     const h = () => {
@@ -119,13 +120,13 @@ const Re = /* @__PURE__ */ j({
     }), x({
       dynamicContent: {
         insert: P,
-        close: N
+        close: A
       },
       hasChanges: i,
       saveSilent: w
-    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: z, headerWrapperRef: S, wrapperRef: d, dynamicContentStore: l, unsubscribeStore: g, props: b, configStore: a, editorStore: u, previewStore: q, hasChanges: i, isTestPartner: K, saveSilent: w, templateId: p, userId: E, partnerName: D, username: C, templateConfig: t, editorConfig: r, html: m, css: T, preselectedDynamicContentList: f, savedModulesFolderName: k, defaultModulesFolderName: F, emit: s, metadata: v, options: L, initPlugin: U, getDefaultTemplate: _, cloneTimersOnSave: M, hasTimerBlocks: O, noHeader: V, insertDynamicContent: P, closeDynamicContent: N, handleDynamicContentOpen: y, ribbonObserver: c, updateRibbonOffset: h, Toaster: ne, FilterSelectionDrawer: se, HeaderWrapper: re, LoadingWrapper: ce, SaveAsTemplateDrawer: ae, UnsubscribeWrapper: ie };
+    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: z, headerWrapperRef: b, wrapperRef: d, dynamicContentStore: l, unsubscribeStore: g, props: S, configStore: a, editorStore: u, previewStore: q, hasChanges: i, isTestPartner: K, saveSilent: w, templateId: p, userId: E, partnerName: D, username: C, templateConfig: t, editorConfig: s, html: m, css: T, preselectedDynamicContentList: f, savedModulesFolderName: k, defaultModulesFolderName: F, emit: r, metadata: v, options: L, initPlugin: U, getDefaultTemplate: _, cloneTimersOnSave: M, hasTimerBlocks: O, noHeader: V, insertDynamicContent: P, closeDynamicContent: A, handleDynamicContentOpen: y, ribbonObserver: c, updateRibbonOffset: h, AutoSaveController: ne, Toaster: re, FilterSelectionDrawer: se, HeaderWrapper: ce, LoadingWrapper: ae, SaveAsTemplateDrawer: ie, UnsubscribeWrapper: me };
   }
 });
 export {
-  Re as default
+  Ie as default
 };

package/dist/components/organisms/AutoSaveController.vue.js

@@ -0,0 +1,17 @@
+import n from "./AutoSaveController.vue2.js";
+import t from "../../_virtual/_plugin-vue2_normalizer.js";
+var o = function() {
+  var r = this, e = r._self._c;
+  return r._self._setupProxy, e("div", { staticClass: "d-n" });
+}, s = [], _ = /* @__PURE__ */ t(
+  n,
+  o,
+  s,
+  !1,
+  null,
+  null
+);
+const f = _.exports;
+export {
+  f as default
+};

package/dist/components/organisms/AutoSaveController.vue2.js

@@ -0,0 +1,13 @@
+import { defineComponent as t } from "vue";
+import { useAutoSave as r } from "../../composables/useAutoSave.js";
+import { useSave as s } from "../../composables/useSave.js";
+const f = /* @__PURE__ */ t({
+  __name: "AutoSaveController",
+  setup(a) {
+    const { save: e } = s(), o = () => e(!1, !0);
+    return r(o), { __sfc: !0, save: e, backgroundSave: o };
+  }
+});
+export {
+  f as default
+};

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

@@ -0,0 +1,22 @@
+import o from "./AutoSaveToggle.vue2.js";
+/* empty css                    */
+import i from "../../../_virtual/_plugin-vue2_normalizer.js";
+var n = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return t.isFeatureEnabled("autosave") ? a("div", { staticClass: "d-f a-i-c mr-3 auto-save-toggle", on: { mouseenter: function(s) {
+    t.isHovered = !0;
+  }, mouseleave: function(s) {
+    t.isHovered = !1;
+  } } }, [a(t.InToggle, { attrs: { id: "guido__autosave-toggle", name: "guido-autosave-toggle", checked: t.autosaveStore.isOn, disable: t.editorStore.loadingStatus }, on: { click: t.toggle } }), a("span", { staticClass: "ml-2 auto-save-toggle__label t-c-55" }, [e._v(" " + e._s(t.trans("email-editor.auto-save")) + " ")]), t.autosaveStore.status === t.AUTOSAVE_STATUS.SAVING ? a("span", { staticClass: "ml-2 d-f a-i-c f-s-1" }, [a(t.InLoading, { attrs: { "color-class": "i-c-53", size: "16" } }), a("span", { staticClass: "ml-1 t-c-53" }, [e._v(" " + e._s(t.trans("newsletter.saving")) + " ")])], 1) : t.lastSavedLabel ? a("span", { staticClass: "ml-2 f-s-1 t-c-53" }, [e._v(" " + e._s(t.lastSavedLabel) + " ")]) : e._e(), t.isHovered ? a(t.InInfoBox, { staticClass: "auto-save-toggle__info-box", attrs: { id: "guido__autosave-info-box", size: "small", variant: "information", "description-text": t.trans("email-editor.auto-save-description"), "title-text": t.trans("email-editor.auto-save-title") } }) : e._e()], 1) : e._e();
+}, l = [], r = /* @__PURE__ */ i(
+  o,
+  n,
+  l,
+  !1,
+  null,
+  "2c964af4"
+);
+const d = r.exports;
+export {
+  d as default
+};

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

@@ -0,0 +1,19 @@
+import { defineComponent as i, ref as f, computed as u } from "vue";
+import { useConfig as l } from "../../../composables/useConfig.js";
+import { useTranslations as p } from "../../../composables/useTranslations.js";
+import { useAutosaveStore as c, AUTOSAVE_STATUS as t } from "../../../stores/autosave.js";
+import { useEditorStore as S } from "../../../stores/editor.js";
+import { formatLocalTime as d } from "../../../utils/timeUtil.js";
+import { InToggle as g, InLoading as _, InInfoBox as A } from "@useinsider/design-system-vue";
+const U = /* @__PURE__ */ i({
+  __name: "AutoSaveToggle",
+  setup(v) {
+    const { isFeatureEnabled: e } = l(), r = S(), o = c(), s = p(), n = f(!1), a = u(() => o.status !== t.SAVED || !o.lastSavedAt ? "" : d(o.lastSavedAt));
+    return { __sfc: !0, isFeatureEnabled: e, editorStore: r, autosaveStore: o, trans: s, isHovered: n, lastSavedLabel: a, toggle: (m) => {
+      o.isOn = m;
+    }, AUTOSAVE_STATUS: t, InInfoBox: A, InLoading: _, InToggle: g };
+  }
+});
+export {
+  U as default
+};

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

@@ -1,11 +1,11 @@
-import i from "./RightSlot.vue2.js";
-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" }, [t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-3", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : s._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
-}, a = [], n = /* @__PURE__ */ r(
-  i,
-  o,
+import s from "./RightSlot.vue2.js";
+import o from "../../../_virtual/_plugin-vue2_normalizer.js";
+var r = function() {
+  var i = this, e = i._self._c, t = i._self._setupProxy;
+  return e("div", { staticClass: "d-f a-i-c" }, [t.editorStore.isVersionHistoryOpen ? i._e() : e(t.AutoSaveToggle), t.isLiquidEnabled && !t.editorStore.isVersionHistoryOpen ? e(t.InChips, { staticClass: "mr-1", attrs: { id: "guido__liquid-tag-chip", styles: "stroke", type: "default", value: "liquid-tags", "close-button": !1, "disabled-status": t.editorStore.loadingStatus, interactive: !1, text: t.trans("email-editor.liquid-tags-enabled") } }) : i._e(), t.editorStore.isVersionHistoryOpen ? e(t.RestoreButton) : e(t.EditorActions, { ref: "editorActionsRef" })], 1);
+}, a = [], n = /* @__PURE__ */ o(
+  s,
+  r,
   a,
   !1,
   null,

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

@@ -1,22 +1,23 @@
 import { defineComponent as a, ref as f, computed as p } from "vue";
 import { useConfig as u } from "../../../composables/useConfig.js";
 import { useTranslations as d } from "../../../composables/useTranslations.js";
-import { useEditorStore as c } from "../../../stores/editor.js";
-import { InChips as l } from "@useinsider/design-system-vue";
-import _ from "./EditorActions.vue.js";
-import S from "./version-history/RestoreButton.vue.js";
-const x = /* @__PURE__ */ a({
+import { useEditorStore as l } from "../../../stores/editor.js";
+import { InChips as c } from "@useinsider/design-system-vue";
+import _ from "./AutoSaveToggle.vue.js";
+import S from "./EditorActions.vue.js";
+import g from "./version-history/RestoreButton.vue.js";
+const T = /* @__PURE__ */ a({
   __name: "RightSlot",
   setup(h, { expose: r }) {
-    const { isFeatureEnabled: o } = u(), n = d(), i = c(), t = f(null), s = p(() => o("liquidSyntax"));
+    const { isFeatureEnabled: o } = u(), i = d(), n = l(), t = f(null), s = p(() => o("liquidSyntax"));
     return r({
       handleSave: (m) => {
         var e;
         return (e = t.value) == null ? void 0 : e.handleSave(m);
       }
-    }), { __sfc: !0, isFeatureEnabled: o, trans: n, editorStore: i, editorActionsRef: t, isLiquidEnabled: s, InChips: l, EditorActions: _, RestoreButton: S };
+    }), { __sfc: !0, isFeatureEnabled: o, trans: i, editorStore: n, editorActionsRef: t, isLiquidEnabled: s, InChips: c, AutoSaveToggle: _, EditorActions: S, RestoreButton: g };
   }
 });
 export {
-  x as default
+  T as default
 };

package/dist/composables/useAutoSave.js

@@ -0,0 +1,71 @@
+import { useConfig as m } from "./useConfig.js";
+import { useAutosaveStore as A, AUTOSAVE_STATUS as s } from "../stores/autosave.js";
+import { useEditorStore as E } from "../stores/editor.js";
+import { computed as f, watch as p, onUnmounted as y } from "vue";
+const I = 18e4, r = 6e4, T = (b) => {
+  const { isFeatureEnabled: S } = m(), a = E(), t = A();
+  let i = null, c = 0;
+  const u = f(
+    () => S("autosave") && t.isOn
+  ), g = () => a.hasChanges && a.isInSaveableState, h = () => ({
+    hasChanges: a.hasChanges,
+    isInSaveableState: a.isInSaveableState
+  }), l = async (e) => {
+    if (!u.value) {
+      console.debug("guido:autosave:skipped", { trigger: e, reason: "not-active" });
+      return;
+    }
+    if (!g()) {
+      console.debug("guido:autosave:skipped", { trigger: e, reason: "gates-blocked", gates: h() });
+      return;
+    }
+    if (t.status === s.SAVING) {
+      console.debug("guido:autosave:skipped", { trigger: e, reason: "already-saving" });
+      return;
+    }
+    console.debug("guido:autosave:save-start", { trigger: e }), t.status = s.SAVING;
+    try {
+      if (await b() === void 0) {
+        console.debug("guido:autosave:blocked", { trigger: e, reason: "save-returned-undefined" }), t.status = s.ERROR;
+        return;
+      }
+      a.hasChanges = !1, t.status = s.SAVED, t.lastSavedAt = /* @__PURE__ */ new Date(), console.debug("guido:autosave:save-complete", { trigger: e, at: t.lastSavedAt });
+    } catch (o) {
+      console.debug("guido:autosave:error", { trigger: e, error: o }), t.status = s.ERROR;
+    }
+  }, n = () => {
+    const { visibilityState: e } = document;
+    if (console.debug("guido:autosave:visibility-change", {
+      visibilityState: e,
+      isActive: u.value
+    }), e !== "hidden")
+      return;
+    const o = Date.now() - c;
+    if (o < r) {
+      console.debug("guido:autosave:visibility-debounced", {
+        sinceLastMs: o,
+        debounceMs: r
+      });
+      return;
+    }
+    c = Date.now(), l("visibility");
+  }, d = () => {
+    i && (clearInterval(i), i = null);
+  }, v = () => {
+    document.removeEventListener("visibilitychange", n), window.removeEventListener("pagehide", n);
+  };
+  p(
+    u,
+    (e) => {
+      console.debug("guido:autosave:active-changed", { active: e }), e ? (d(), i = setInterval(() => {
+        console.debug("guido:autosave:interval-tick"), l("interval");
+      }, I), document.addEventListener("visibilitychange", n), window.addEventListener("pagehide", n)) : (d(), v(), t.status = s.IDLE);
+    },
+    { immediate: !0 }
+  ), y(() => {
+    d(), v(), t.status = s.IDLE, t.lastSavedAt = null;
+  });
+};
+export {
+  T as useAutoSave
+};

package/dist/composables/useSave.js

@@ -1,18 +1,18 @@
-import { useActionsApi as V } from "./useActionsApi.js";
-import { useConfig as x } from "./useConfig.js";
-import { useSaveStart as y, useSaveComplete as w } from "./useGuidoActions.js";
-import { useSyncModuleExtractor as C } from "./useSyncModuleExtractor.js";
-import { useStripoApi as H } from "../services/stripoApi.js";
-import { useTemplatePreparation as b } from "../utils/templatePreparation.js";
-import { useHtmlValidator as q } from "./useHtmlValidator.js";
-import { useCouponBlockValidator as L } from "./validators/useCouponBlockValidator.js";
-import { useLiquidValidator as P } from "./validators/useLiquidValidator.js";
-const h = () => {
-  const o = y(), s = w(), { validateHtml: r } = q(), { validateLiquidSyntax: l } = P(), { validateCouponBlockTags: n } = L(), { callbacks: a, isFeatureEnabled: d } = x(), { extractSyncModuleData: u } = C(), { setSyncModuleUnsubscriptionPages: c } = H(), { editorSave: m } = V();
-  return { save: async (p = !1) => {
+import { useActionsApi as x } from "./useActionsApi.js";
+import { useConfig as y } from "./useConfig.js";
+import { useSaveStart as w, useSaveComplete as C } from "./useGuidoActions.js";
+import { useSyncModuleExtractor as H } from "./useSyncModuleExtractor.js";
+import { useStripoApi as b } from "../services/stripoApi.js";
+import { useTemplatePreparation as q } from "../utils/templatePreparation.js";
+import { useHtmlValidator as L } from "./useHtmlValidator.js";
+import { useCouponBlockValidator as P } from "./validators/useCouponBlockValidator.js";
+import { useLiquidValidator as E } from "./validators/useLiquidValidator.js";
+const j = () => {
+  const o = w(), s = C(), { validateHtml: r } = L(), { validateLiquidSyntax: l } = E(), { validateCouponBlockTags: n } = P(), { callbacks: a, isFeatureEnabled: d } = y(), { extractSyncModuleData: u } = H(), { setSyncModuleUnsubscriptionPages: c } = b(), { editorSave: m } = x();
+  return { save: async (p = !1, f = !1) => {
     var i;
     o();
-    const { prepareTemplateDetails: f } = b(), t = await f();
+    const { prepareTemplateDetails: v } = q(), t = await v();
     if (!n(t.compiledHtml))
       return;
     if (d("liquidSyntax")) {
@@ -23,10 +23,10 @@ const h = () => {
     if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t))
       return;
     await m();
-    const { unsubscribePayload: v, stripoModules: S } = u(t.rawHtml);
-    return await c(v), t.modules = S, p || s(t), t;
+    const { unsubscribePayload: S, stripoModules: V } = u(t.rawHtml);
+    return await c(S), t.modules = V, p || s({ ...t, silent: f }), t;
   } };
 };
 export {
-  h as useSave
+  j as useSave
 };

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

@@ -8,8 +8,8 @@ import { regenerateMobileProductRows as C } from "./controls/main/utils.js";
 import { ensureMobileCssRulesExist as g, setMobileLayoutOptOut as d, hasMobileLayoutOptOut as A } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as c } from "./services/configService.js";
 import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
-import { getDefaultTemplate as D } from "./templates/grid/template.js";
-const f = B.Recommendation, l = "recommendation-block-v2", m = "recommendation-id";
+import { getDefaultTemplate as E } from "./templates/grid/template.js";
+const f = B.Recommendation, a = "recommendation-block-v2", l = "recommendation-id";
 let h = !1;
 class q extends b {
   constructor() {
@@ -56,7 +56,7 @@ class q extends b {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, D(t);
+    return this._pendingBlockId = t, E(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -68,20 +68,13 @@ class q extends b {
   onCreated(t) {
     const e = this._pendingBlockId ?? this._generateNextId();
     this._pendingBlockId = null, this._assignRecommendationId(t, e);
-    const { config: i, wasFreshDrop: o } = c.initializeConfig(
-      this.api,
-      t,
-      { recommendationId: e }
-    ), s = p();
-    if (s.setCurrentBlock(e), o) {
-      g(this.api);
-      const a = this._getBlockElement(t);
-      a && (d(this.api, a, !0), C({
-        currentNode: t,
-        documentModifier: this.api.getDocumentModifier()
-      }));
-    }
-    s.patchCurrentBlockConfig({ language: i.language }, { triggerRefetch: !1 });
+    const o = c.initializeConfig(this.api, t, { recommendationId: e }), i = p();
+    i.setCurrentBlock(e), g(this.api);
+    const s = this._getBlockElement(t);
+    s && (d(this.api, s, !0), C({
+      currentNode: t,
+      documentModifier: this.api.getDocumentModifier()
+    })), i.patchCurrentBlockConfig({ language: o.language }, { triggerRefetch: !1 });
   }
   /**
    * Called when the document changes or template is loaded
@@ -104,10 +97,10 @@ class q extends b {
       c.needsMigration(t) && this._migrateFromLegacy(t);
       try {
         h || (g(this.api), h = !0);
-        const e = c.getConfig(t), i = this._getBlockElement(t);
-        if (i) {
-          const o = !e.mobileLayoutEnabled;
-          A(i) !== o && d(this.api, i, o);
+        const e = c.getConfig(t), o = this._getBlockElement(t);
+        if (o) {
+          const i = !e.mobileLayoutEnabled;
+          A(o) !== i && d(this.api, o, i);
         }
       } catch {
       }
@@ -131,10 +124,10 @@ class q extends b {
     let t = 0;
     try {
       const e = this.api.getDocumentRoot();
-      e && "querySelectorAll" in e && e.querySelectorAll(`.${l}`).forEach((o) => {
-        if ("getAttribute" in o) {
-          const s = o.getAttribute(m), a = s ? parseInt(s) : 0;
-          a > t && (t = a);
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${a}`).forEach((i) => {
+        if ("getAttribute" in i) {
+          const s = i.getAttribute(l), m = s ? parseInt(s) : 0;
+          m > t && (t = m);
         }
       });
     } catch {
@@ -148,11 +141,11 @@ class q extends b {
    * added classes via setAttribute.
    */
   _assignRecommendationId(t, e) {
-    const i = this._getBlockElement(t);
-    if (!i)
+    const o = this._getBlockElement(t);
+    if (!o)
       return;
-    const o = this.api.getDocumentModifier();
-    o.modifyHtml(i).setAttribute(m, e.toString()), o.apply(new y(`Assign recommendation ID ${e}`));
+    const i = this.api.getDocumentModifier();
+    i.modifyHtml(o).setAttribute(l, e.toString()), i.apply(new y(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -161,11 +154,11 @@ class q extends b {
     const e = this._getBlockElement(t);
     if (!e || !("getAttribute" in e))
       return null;
-    const i = e.getAttribute(m);
-    if (!i)
+    const o = e.getAttribute(l);
+    if (!o)
       return null;
-    const o = parseInt(i);
-    return Number.isNaN(o) ? null : o;
+    const i = parseInt(o);
+    return Number.isNaN(i) ? null : i;
   }
   /**
    * Gets the block element (the element with BLOCK_CLASS)
@@ -173,10 +166,10 @@ class q extends b {
   _getBlockElement(t) {
     if ("getAttribute" in t) {
       const e = t.getAttribute("class");
-      if (e && e.includes(l))
+      if (e && e.includes(a))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${l}`) ?? null : null;
+    return "querySelector" in t ? t.querySelector(`.${a}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format

package/dist/extensions/Blocks/Recommendation/services/configService.js

@@ -85,28 +85,21 @@ class C {
    *
    * Called when a block is first created (dropped into template).
    * Can optionally merge in partial config from migration.
-   *
-   * The `wasFreshDrop` flag distinguishes a brand-new drop (no prior config)
-   * from a clone (Stripo replays the source's setNodeConfig payload before
-   * onCreated fires). Callers use this to skip side-effects already inherited
-   * from the source.
    * @example
    * // In Block.onCreated lifecycle
-   * const { config, wasFreshDrop } = RecommendationConfigService.initializeConfig(this.api, node);
+   * RecommendationConfigService.initializeConfig(this.api, node);
    * @param api - Stripo extension API with document modifier
    * @param node - The immutable HTML node to initialize
    * @param partialConfig - Optional partial config to merge with defaults
-   * @returns The initialized configuration and whether the node was a fresh drop
+   * @returns The initialized configuration
    */
   static initializeConfig(i, t, o) {
-    if (this.hasConfig(t))
-      return { config: o ? this.updateConfig(i, t, o, "Initialize recommendation block") : this.getConfig(t), wasFreshDrop: !1 };
     const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
     return this.saveConfig(i, t, n, "Initialize recommendation block"), g({
       currentNode: t,
       documentModifier: i.getDocumentModifier(),
       currency: n.currency
-    }), { config: n, wasFreshDrop: !0 };
+    }), n;
   }
   /**
    * Save complete configuration to a node
@@ -150,7 +143,7 @@ class C {
       const c = t.getAttribute("data-row-spacing");
       c && (o.rowSpacing = parseInt(c) || e.rowSpacing);
     }
-    return this.initializeConfig(i, t, o).config;
+    return this.initializeConfig(i, t, o);
   }
   /**
    * Check if configuration needs migration

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.editor-actions[data-v-4e2a4adb]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-25780af6]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-25780af6]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-25780af6]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-7419ae06] .vueperslides__bullets,[data-v-796d193b] .vueperslides__bullets{pointer-events:none!important}[data-v-796d193b] .vueperslides__parallax-wrapper{height:110px!important}[data-v-cadfc82d] .vueperslides__bullets{pointer-events:none!important}[data-v-cadfc82d] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.auto-save-toggle[data-v-2c964af4]{position:relative}.auto-save-toggle__info-box[data-v-2c964af4]{position:absolute;top:100%;left:0;z-index:10;width:280px}.editor-actions[data-v-4e2a4adb]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-fffc13d6]{--ribbon-offset: 0px;position:relative;width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__container[data-v-fffc13d6]{width:100%;height:calc(100vh - 128px - var(--ribbon-offset))}.guido-editor__no-header[data-v-fffc13d6]{height:calc(100vh - 75px - var(--ribbon-offset))}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-7419ae06] .vueperslides__bullets,[data-v-796d193b] .vueperslides__bullets{pointer-events:none!important}[data-v-796d193b] .vueperslides__parallax-wrapper{height:110px!important}[data-v-cadfc82d] .vueperslides__bullets{pointer-events:none!important}[data-v-cadfc82d] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/@types/config/schemas.d.ts

@@ -178,6 +178,8 @@ export declare const FeaturesSchema: v.ObjectSchema<{
     readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
     /** Enable Liquid template syntax */
     readonly liquidSyntax: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+    /** Enable autosave (3-min interval + tab-hide). User toggles on/off from the header. */
+    readonly autosave: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
 }, undefined>;
 /**
  * Default block types available in Stripo
@@ -501,6 +503,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
         readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
         /** Enable Liquid template syntax */
         readonly liquidSyntax: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+        /** Enable autosave (3-min interval + tab-hide). User toggles on/off from the header. */
+        readonly autosave: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
     }, undefined>, {}>;
     /** Block configuration */
     readonly blocks: v.OptionalSchema<v.ObjectSchema<{

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
         close: () => void;
     };
     hasChanges: import("vue").ComputedRef<boolean>;
-    saveSilent: () => Promise<Omit<SavedTemplateDetails, "metadata"> | undefined> | undefined;
+    saveSilent: () => Promise<Omit<SavedTemplateDetails, "metadata" | "silent"> | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
     "dynamic-content:open": (detail: {
         text: string;

package/dist/src/components/organisms/AutoSaveController.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/src/components/organisms/header/AutoSaveToggle.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/src/components/organisms/header/EditorActions.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata"> | undefined> | undefined;
+    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata" | "silent"> | undefined> | undefined;
 }, {}, {}, {}, 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/src/components/organisms/header/HeaderWrapper.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata"> | undefined> | undefined;
+    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata" | "silent"> | undefined> | undefined;
 }, {}, {}, {}, 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/src/components/organisms/header/RightSlot.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata"> | undefined> | undefined;
+    handleSave: (isSilent: boolean) => Promise<Omit<import("../../../@types/stripo.js").SavedTemplateDetails, "metadata" | "silent"> | undefined> | undefined;
 }, {}, {}, {}, 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/src/composables/useAutoSave.d.ts

@@ -0,0 +1,3 @@
+type SaveSilent = () => Promise<unknown>;
+export declare const useAutoSave: (saveSilent: SaveSilent) => void;
+export {};

package/dist/src/composables/useConfig.d.ts

@@ -62,6 +62,7 @@ export declare const useConfig: () => {
             unsubscribe: boolean;
             modulesDisabled: boolean;
             liquidSyntax: boolean;
+            autosave: boolean;
         };
         blocks: {
             excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -159,6 +160,7 @@ export declare const useConfig: () => {
         unsubscribe: boolean;
         modulesDisabled: boolean;
         liquidSyntax: boolean;
+        autosave: boolean;
     } | null>;
     blocks: import("vue").ComputedRef<{
         excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];

package/dist/src/composables/useSave.d.ts

@@ -1,4 +1,4 @@
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 export declare const useSave: () => {
-    save: (isSilent?: boolean) => Promise<Omit<SavedTemplateDetails, "metadata"> | undefined>;
+    save: (suppressEmit?: boolean, silent?: boolean) => Promise<Omit<SavedTemplateDetails, "metadata" | "silent"> | undefined>;
 };

package/dist/src/extensions/Blocks/Recommendation/services/configService.d.ts

@@ -95,23 +95,15 @@ export declare class RecommendationConfigService {
      *
      * Called when a block is first created (dropped into template).
      * Can optionally merge in partial config from migration.
-     *
-     * The `wasFreshDrop` flag distinguishes a brand-new drop (no prior config)
-     * from a clone (Stripo replays the source's setNodeConfig payload before
-     * onCreated fires). Callers use this to skip side-effects already inherited
-     * from the source.
      * @example
      * // In Block.onCreated lifecycle
-     * const { config, wasFreshDrop } = RecommendationConfigService.initializeConfig(this.api, node);
+     * RecommendationConfigService.initializeConfig(this.api, node);
      * @param api - Stripo extension API with document modifier
      * @param node - The immutable HTML node to initialize
      * @param partialConfig - Optional partial config to merge with defaults
-     * @returns The initialized configuration and whether the node was a fresh drop
+     * @returns The initialized configuration
      */
-    static initializeConfig(api: DocumentModifierApi, node: ImmutableHtmlNode, partialConfig?: PartialNodeConfig): {
-        config: RecommendationNodeConfig;
-        wasFreshDrop: boolean;
-    };
+    static initializeConfig(api: DocumentModifierApi, node: ImmutableHtmlNode, partialConfig?: PartialNodeConfig): RecommendationNodeConfig;
     /**
      * Save complete configuration to a node
      *

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

@@ -0,0 +1,12 @@
+export declare const AUTOSAVE_STATUS: {
+    readonly IDLE: "idle";
+    readonly SAVING: "saving";
+    readonly SAVED: "saved";
+    readonly ERROR: "error";
+};
+export type AutosaveStatus = typeof AUTOSAVE_STATUS[keyof typeof AUTOSAVE_STATUS];
+export declare const useAutosaveStore: import("pinia").StoreDefinition<"guidoAutosave", {
+    isOn: boolean;
+    lastSavedAt: Date | null;
+    status: AutosaveStatus;
+}, {}, {}>;

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

@@ -67,6 +67,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -170,6 +171,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -273,6 +275,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -376,6 +379,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -479,6 +483,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -582,6 +587,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -685,6 +691,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -788,6 +795,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -891,6 +899,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -994,6 +1003,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1097,6 +1107,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1200,6 +1211,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1303,6 +1315,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1406,6 +1419,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1509,6 +1523,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1612,6 +1627,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1715,6 +1731,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -1818,6 +1835,7 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 unsubscribe: boolean;
                 modulesDisabled: boolean;
                 liquidSyntax: boolean;
+                autosave: boolean;
             };
             blocks: {
                 excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];

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

@@ -263,4 +263,27 @@ export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEdito
         templateId: string;
         syncModulesEnabled: boolean;
     }>) => boolean;
+    isInSaveableState: (state: {
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+        templateId: string;
+        syncModulesEnabled: boolean;
+    } & import("pinia").PiniaCustomStateProperties<{
+        loadingStatus: boolean;
+        isCodeEditorOpen: boolean;
+        isSaveAsTemplateDrawerOpen: boolean;
+        isVersionHistoryOpen: boolean;
+        isPreviewModeOpen: boolean;
+        editorVisualMode: string;
+        hasChanges: boolean;
+        isStripoInitialized: boolean;
+        templateId: string;
+        syncModulesEnabled: boolean;
+    }>) => boolean;
 }, {}>;

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

@@ -0,0 +1,8 @@
+/**
+ * Formats a Date as local time in 24-hour format.
+ * Pass `useTimezone = true` to append the UTC offset and city name — useful when the
+ * timestamp must clearly communicate the client's timezone.
+ * @example formatLocalTime(date)              -> 12:20:02
+ * @example formatLocalTime(date, true)        -> 12:20:02 (UTC+3 Istanbul)
+ */
+export declare const formatLocalTime: (date: Date, useTimezone?: boolean) => string;

package/dist/stores/autosave.js

@@ -0,0 +1,17 @@
+import { defineStore as e } from "pinia";
+const t = {
+  IDLE: "idle",
+  SAVING: "saving",
+  SAVED: "saved",
+  ERROR: "error"
+}, o = e("guidoAutosave", {
+  state: () => ({
+    isOn: !1,
+    lastSavedAt: null,
+    status: t.IDLE
+  })
+});
+export {
+  t as AUTOSAVE_STATUS,
+  o as useAutosaveStore
+};

package/dist/stores/editor.js

@@ -25,7 +25,9 @@ const o = e("guidoEditor", {
     isExportButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isSaveAsButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isTestButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
-    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen
+    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen,
+    // Autosave
+    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen
   }
 });
 export {

package/dist/utils/timeUtil.js

@@ -0,0 +1,19 @@
+const r = (t) => {
+  const e = -t.getTimezoneOffset(), o = e >= 0 ? "+" : "-", n = Math.abs(e), s = Math.floor(n / 60), i = n % 60;
+  return i === 0 ? `UTC${o}${s}` : `UTC${o}${s}:${String(i).padStart(2, "0")}`;
+}, a = () => {
+  var e;
+  const { timeZone: t } = new Intl.DateTimeFormat().resolvedOptions();
+  return ((e = t.split("/").pop()) == null ? void 0 : e.replace(/_/g, " ")) ?? t;
+}, c = (t, e = !1) => {
+  const o = t.toLocaleTimeString([], {
+    hour: "2-digit",
+    hour12: !1,
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  return e ? `${o} (${r(t)} ${a()})` : o;
+};
+export {
+  c as formatLocalTime
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.51b7991",
+  "version": "3.2.0-beta.556da4b",
   "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",