@useinsider/guido 3.1.1-beta.58e1771 → 3.1.1-beta.5fce9b2

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 r, variant as k } from "../../node_modules/valibot/dist/index.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";
 const m = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
@@ -26,6 +26,11 @@ const m = {
   /** Optional variation ID for A/B testing */
   variationId: e(t())
 }), y = o({
+  /** Fallback font name (e.g., "Georgia") */
+  name: t(),
+  /** Fallback font family (e.g., "serif" or "sans-serif") */
+  family: t()
+}), f = o({
   /** Partner/organization name (required) */
   name: u(
     t(),
@@ -46,8 +51,10 @@ const m = {
     m.PROMOTIONAL
   ),
   /** Display name for the current user */
-  username: e(t(), "Guido User")
-}), f = o({
+  username: e(t(), "Guido User"),
+  /** Fallback font settings from partner settings — used to match backend size calculation */
+  fallbackFont: e(y)
+}), A = o({
   /** Display text for the dynamic content */
   text: t(),
   /** Template variable value (e.g., {{username}}) */
@@ -61,14 +68,14 @@ const m = {
       value: t()
     })
   )
-}), A = o({
+}), R = o({
   /** Initial HTML content */
   html: e(t(), ""),
   /** Initial CSS content */
   css: e(t(), ""),
   /** Preselected dynamic content items */
   preselectedDynamicContent: e(
-    c(f),
+    c(A),
     []
   ),
   /** Valid custom field attribute names from the partner's categorized fields */
@@ -77,12 +84,12 @@ const m = {
   selectedUnsubscribePages: e(c(p()), []),
   /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
   forceRecreate: e(a(), !1)
-}), R = o({
+}), C = o({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
   subject: e(t(), "")
-}), C = o({
+}), T = o({
   /** Locale for the editor UI */
   locale: e(t(), "en"),
   /** Path to translations object */
@@ -90,17 +97,17 @@ const m = {
   /** Migration date for template compatibility */
   migrationDate: e(p(), 1759696858),
   /** Email header settings */
-  emailHeader: e(R, { senderName: "", subject: "" }),
+  emailHeader: e(C, { senderName: "", subject: "" }),
   /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
   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)
-}), T = o({
+}), I = o({
   /** Whether to show the header bar */
   showHeader: e(a(), !0),
   /** Custom label for back button (if shown) */
   backButtonLabel: e(t())
-}), I = o({
+}), E = o({
   /** Enable dynamic content insertion */
   dynamicContent: e(a(), !0),
   /** Enable save as template functionality */
@@ -115,7 +122,7 @@ const m = {
   unsubscribe: e(a(), !0),
   /** Disable modules panel in the editor */
   modulesDisabled: e(a(), !1)
-}), E = n([
+}), g = n([
   "amp-accordion",
   "amp-carousel",
   "amp-form-controls",
@@ -129,7 +136,7 @@ const m = {
   "text-block",
   "timer-block",
   "video-block"
-]), g = n([
+]), O = n([
   "dynamic-content",
   "checkbox-block",
   "radio-button-block",
@@ -137,66 +144,66 @@ const m = {
   "unsubscribe-block",
   "coupon-block",
   "items-block"
-]), O = o({
+]), L = o({
   /** Default blocks to exclude from the editor */
   excludeDefaults: e(
-    c(E),
+    c(g),
     []
   ),
   /** Custom blocks to include in the editor */
   includeCustoms: e(
-    c(g),
+    c(O),
     []
   )
-}), l = o({
+}), r = o({
   /** Unique identifier for the rule */
   id: t(),
   /** Human-readable description */
   description: e(t()),
   /** Priority for rule ordering (lower = earlier) */
   priority: p()
-}), L = o({
-  ...l.entries,
-  type: r("replace"),
+}), M = o({
+  ...r.entries,
+  type: l("replace"),
   /** String to search for */
   search: t(),
   /** Replacement string */
   replacement: t(),
   /** Replace all occurrences (default: false) */
   replaceAll: e(a())
-}), M = o({
-  ...l.entries,
-  type: r("regex"),
+}), N = o({
+  ...r.entries,
+  type: l("regex"),
   /** Regex pattern string */
   pattern: t(),
   /** Replacement string (supports $1, $2, etc.) */
   replacement: t(),
   /** Regex flags (e.g., 'gi') */
   flags: e(t())
-}), N = o({
-  ...l.entries,
-  type: r("remove"),
+}), D = o({
+  ...r.entries,
+  type: l("remove"),
   /** Strings or patterns to remove */
   targets: c(t())
-}), D = o({
-  ...l.entries,
-  type: r("custom"),
+}), v = o({
+  ...r.entries,
+  type: l("custom"),
   /** Custom processor function */
   processor: S(
     (i) => typeof i == "function",
     "processor must be a function"
   )
-}), v = k("type", [
-  L,
+}), U = k("type", [
   M,
   N,
-  D
-]), U = o({
+  D,
+  v
+]), x = o({
   /** Custom compiler rules to apply */
-  customRules: e(c(v), []),
+  customRules: e(c(U), []),
   /** Skip default compiler rules */
   ignoreDefaultRules: e(a(), !1)
-}), x = o({
+}), B = o({
   /**
    * External validation handler called before save completes.
    * Return false to cancel the save operation.
@@ -207,48 +214,49 @@ const m = {
       "externalValidation must be a function"
     )
   )
-}), F = o({
+}), H = o({
   // Required sections
   /** Identity configuration (required) */
   identity: h,
   /** Partner configuration (required) */
-  partner: y,
+  partner: f,
   // Optional sections (with defaults)
   /** Template content and presets */
-  template: e(A, {}),
+  template: e(R, {}),
   /** Editor settings */
-  editor: e(C, {}),
+  editor: e(T, {}),
   /** UI configuration */
-  ui: e(T, {}),
+  ui: e(I, {}),
   /** Feature toggles */
-  features: e(I, {}),
+  features: e(E, {}),
   /** Block configuration */
-  blocks: e(O, {}),
+  blocks: e(L, {}),
   /** Compiler configuration */
-  compiler: e(U, {}),
+  compiler: e(x, {}),
   /** Callbacks and event handlers */
-  callbacks: e(x, {})
+  callbacks: e(B, {})
 });
 export {
-  O as BlocksSchema,
-  x as CallbacksSchema,
-  v as CompilerRuleSchema,
-  U as CompilerSchema,
-  g as CustomBlockTypeSchema,
-  D as CustomRuleSchema,
-  E as DefaultBlockTypeSchema,
-  f as DynamicContentSchema,
-  C as EditorSchema,
-  R as EmailHeaderSchema,
-  I as FeaturesSchema,
-  F as GuidoConfigSchema,
+  L as BlocksSchema,
+  B as CallbacksSchema,
+  U as CompilerRuleSchema,
+  x as CompilerSchema,
+  O as CustomBlockTypeSchema,
+  v as CustomRuleSchema,
+  g as DefaultBlockTypeSchema,
+  A as DynamicContentSchema,
+  T as EditorSchema,
+  C as EmailHeaderSchema,
+  y as FallbackFontSchema,
+  E as FeaturesSchema,
+  H as GuidoConfigSchema,
   h as IdentitySchema,
   m as MessageType,
-  y as PartnerSchema,
+  f as PartnerSchema,
   s as ProductType,
-  M as RegexRuleSchema,
-  N as RemoveRuleSchema,
-  L as ReplaceRuleSchema,
-  A as TemplateSchema,
-  T as UISchema
+  N as RegexRuleSchema,
+  D as RemoveRuleSchema,
+  M as ReplaceRuleSchema,
+  R as TemplateSchema,
+  I as UISchema
 };

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

@@ -1,16 +1,16 @@
 import s from "./EmailSizeIndicator.vue2.js";
 /* empty css                        */
-import r from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var e = this, i = e._self._c, t = e._self._setupProxy;
-  return t.previewStore.previewHtml ? i("div", { staticClass: "d-f a-i-c j-c-c" }, [i(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), i(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })], 1) : e._e();
-}, a = [], n = /* @__PURE__ */ r(
+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 j-c-c" }, [t.previewStore.isLoaded ? [e(t.InProgress, { staticClass: "min-w-15-s", attrs: { id: "email-size-progress", "description-status": "", "description-position": "left", description: t.htmlSize, "max-value": t.MAX_EMAIL_SIZE_IN_KB, type: t.progress.type, value: t.progress.value } }), e(t.InTooltipV2, { attrs: { id: "email-size-tooltip", "icon-status": "", "static-position": "bottom center", "dynamic-position": !1, text: t.trans("email-editor.preview-design-size-tooltip") } })] : e(t.InSkeleton, { attrs: { sizing: { width: 200, height: 20 } } })], 2);
+}, a = [], n = /* @__PURE__ */ o(
   s,
-  o,
+  r,
   a,
   !1,
   null,
-  "870ebbaf"
+  "2cb418af"
 );
 const m = n.exports;
 export {

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

@@ -1,26 +1,17 @@
-import { defineComponent as u, ref as a, computed as p, watch as _ } from "vue";
-import { useActionsApi as f } from "../../../../composables/useActionsApi.js";
-import { useTranslations as v } from "../../../../composables/useTranslations.js";
-import { usePreviewStore as d } from "../../../../stores/preview.js";
-import { InTooltipV2 as h, InProgress as g } from "@useinsider/design-system-vue";
-const B = /* @__PURE__ */ u({
+import { defineComponent as i, computed as t } from "vue";
+import { useTranslations as m } from "../../../../composables/useTranslations.js";
+import { usePreviewStore as a } from "../../../../stores/preview.js";
+import { InTooltipV2 as p, InSkeleton as c, InProgress as _ } from "@useinsider/design-system-vue";
+const z = /* @__PURE__ */ i({
   __name: "EmailSizeIndicator",
-  setup(w) {
-    const o = d(), { getCompiledEmail: s } = f(), t = 102, e = a(0), r = a({
-      type: "success",
-      value: 0
-    }), i = p(() => `~${e.value} KB`), n = async () => {
-      const { html: c } = await s({ minimize: !0, resetDataSavedFlag: !1 }), l = new TextEncoder().encode(c).byteLength;
-      e.value = Math.round(l / 1024), r.value = {
-        type: e.value < t ? "success" : "warning",
-        value: Math.min(e.value, t)
-      };
-    }, m = v();
-    return _(() => o.previewHtml, () => {
-      n();
-    }, { immediate: !0 }), { __sfc: !0, previewStore: o, getCompiledEmail: s, MAX_EMAIL_SIZE_IN_KB: t, htmlKB: e, progress: r, htmlSize: i, calculateProgress: n, trans: m, InProgress: g, InTooltipV2: h };
+  setup(l) {
+    const e = a(), o = 102, r = t(() => `~${e.emailSizeKB} KB`), n = t(() => ({
+      type: e.emailSizeKB < o ? "success" : "warning",
+      value: Math.min(e.emailSizeKB, o)
+    })), s = m();
+    return { __sfc: !0, previewStore: e, MAX_EMAIL_SIZE_IN_KB: o, htmlSize: r, progress: n, trans: s, InProgress: _, InSkeleton: c, InTooltipV2: p };
   }
 });
 export {
-  B as default
+  z as default
 };

package/dist/composables/useHtmlCompiler.js

@@ -1,28 +1,28 @@
-import { defaultHtmlCompilerRules as p } from "../config/compiler/htmlCompilerRules.js";
-import { itemsCompilerRules as u } from "../config/compiler/itemsCompilerRules.js";
-import { outlookCompilerRules as c } from "../config/compiler/outlookCompilerRules.js";
-import { recommendationCompilerRules as n } from "../config/compiler/recommendationCompilerRules.js";
-import { socialCompilerRules as f } from "../config/compiler/socialCompilerRules.js";
-import { unsubscribeCompilerRules as R } from "../config/compiler/unsubscribeCompilerRules.js";
-import { createHtmlCompiler as a } from "../utils/htmlCompiler.js";
-import { useConfig as C } from "./useConfig.js";
-const B = () => {
-  var m, l;
-  const { compiler: e } = C(), r = ((m = e.value) == null ? void 0 : m.customRules) || [], t = [
-    ...!!((l = e.value) != null && l.ignoreDefaultRules) ? [] : p,
-    ...n,
+import { defaultHtmlCompilerRules as n } from "../config/compiler/htmlCompilerRules.js";
+import { itemsCompilerRules as a } from "../config/compiler/itemsCompilerRules.js";
+import { outlookCompilerRules as f } from "../config/compiler/outlookCompilerRules.js";
+import { recommendationCompilerRules as R } from "../config/compiler/recommendationCompilerRules.js";
+import { socialCompilerRules as C } from "../config/compiler/socialCompilerRules.js";
+import { unsubscribeCompilerRules as g } from "../config/compiler/unsubscribeCompilerRules.js";
+import { createHtmlCompiler as H } from "../utils/htmlCompiler.js";
+import { useConfig as b } from "./useConfig.js";
+const q = () => {
+  var l, m, r;
+  const { compiler: e, partner: t } = b(), i = ((l = e.value) == null ? void 0 : l.customRules) || [], s = [
+    ...!!((m = e.value) != null && m.ignoreDefaultRules) ? [] : n,
     ...R,
-    ...u,
-    ...c,
+    ...g,
+    ...a,
     ...f,
-    ...r.map((o, s) => ({
+    ...C,
+    ...i.map((o, c) => ({
       ...o,
-      priority: o.priority + 1e3 + s
+      priority: o.priority + 1e3 + c
       // Ensure additional rules run after default rules
     }))
-  ], i = a(t);
-  return { compileHtml: (o) => i.compile(o) };
+  ], p = H(s), u = (r = t.value) == null ? void 0 : r.fallbackFont;
+  return { compileHtml: (o) => p.compile(o, void 0, u) };
 };
 export {
-  B as useHtmlCompiler
+  q as useHtmlCompiler
 };

package/dist/composables/usePreviewMode.js

@@ -1,31 +1,35 @@
-import { useEditorStore as n } from "../stores/editor.js";
-import { usePreviewStore as l } from "../stores/preview.js";
-import { useActionsApi as m } from "./useActionsApi.js";
-import { useCodeEditorApi as p } from "./useCodeEditorApi.js";
-const E = () => {
-  const o = n(), e = l(), { closeCodeEditor: a } = p(), { getPreviewData: s } = m(), r = () => {
-    o.isPreviewModeOpen = !1, e.$reset();
+import { useEditorStore as d } from "../stores/editor.js";
+import { usePreviewStore as n } from "../stores/preview.js";
+import { useActionsApi as p } from "./useActionsApi.js";
+import { useCodeEditorApi as c } from "./useCodeEditorApi.js";
+import { useHtmlCompiler as u } from "./useHtmlCompiler.js";
+const g = () => {
+  const t = d(), e = n(), { closeCodeEditor: i } = c(), { getPreviewData: a, getCompiledEmail: s } = p(), { compileHtml: m } = u(), r = () => {
+    t.isPreviewModeOpen = !1, e.$reset();
   };
   return {
     closePreviewMode: r,
     openPreviewMode: () => {
-      o.isCodeEditorOpen && a(), o.isPreviewModeOpen = !0;
+      t.isCodeEditorOpen && i(), t.isPreviewModeOpen = !0;
     },
     loadPreviewData: async () => {
-      if (!(o.loadingStatus || e.isLoaded)) {
-        o.loadingStatus = !0;
+      if (!(t.loadingStatus || e.isLoaded)) {
+        t.loadingStatus = !0;
         try {
-          const { html: t, ampHtml: i, ampErrors: d } = await s();
-          e.templateHtml = t || "", e.ampHtml = i || "", e.ampErrors = d || [], e.setEmailFormat(i ? "AMP" : "html"), e.isLoaded = !0;
-        } catch (t) {
-          console.error("Failed to load preview data:", t), r();
+          const [o, l] = await Promise.all([
+            a(),
+            s({ minimize: !0, resetDataSavedFlag: !1 })
+          ]);
+          e.templateHtml = o.html || "", e.ampHtml = o.ampHtml || "", e.ampErrors = o.ampErrors || [], e.setEmailFormat(o.ampHtml ? "AMP" : "html"), e.emailSizeKB = m(l.html).estimatedSizeKB, e.isLoaded = !0;
+        } catch (o) {
+          console.error("Failed to load preview data:", o), r();
         } finally {
-          o.loadingStatus = !1;
+          t.loadingStatus = !1;
         }
       }
     }
   };
 };
 export {
-  E as usePreviewMode
+  g as usePreviewMode
 };

package/dist/composables/useSave.js

@@ -1,21 +1,23 @@
-import { useConfig as d } from "./useConfig.js";
-import { useSaveStart as p, useSaveComplete as f } from "./useGuidoActions.js";
-import { useSyncModuleExtractor as v } from "./useSyncModuleExtractor.js";
-import { useStripoApi as S } from "../services/stripoApi.js";
-import { useTemplatePreparation as x } from "../utils/templatePreparation.js";
-import { useHtmlValidator as V } from "./useHtmlValidator.js";
-const g = () => {
-  const o = p(), s = f(), { validateHtml: i } = V(), { callbacks: a } = d(), { extractSyncModuleData: r } = v(), { setSyncModuleUnsubscriptionPages: n } = S();
-  return { save: async (l = !1) => {
+import { useActionsApi as d } from "./useActionsApi.js";
+import { useConfig as f } from "./useConfig.js";
+import { useSaveStart as v, useSaveComplete as S } from "./useGuidoActions.js";
+import { useSyncModuleExtractor as x } from "./useSyncModuleExtractor.js";
+import { useStripoApi as V } from "../services/stripoApi.js";
+import { useTemplatePreparation as y } from "../utils/templatePreparation.js";
+import { useHtmlValidator as w } from "./useHtmlValidator.js";
+const k = () => {
+  const o = v(), s = S(), { validateHtml: i } = w(), { callbacks: a } = f(), { extractSyncModuleData: r } = x(), { setSyncModuleUnsubscriptionPages: n } = V(), { editorSave: l } = d();
+  return { save: async (c = !1) => {
     var e;
     o();
-    const { prepareTemplateDetails: c } = x(), t = await c();
+    const { prepareTemplateDetails: m } = y(), t = await m();
     if (!await i(t.compiledHtml, t.dynamicContentList, !0) || (e = a.value) != null && e.externalValidation && !await a.value.externalValidation(t))
       return;
-    const { unsubscribePayload: m, stripoModules: u } = r(t.rawHtml);
-    return await n(m), t.modules = u, l || s(t), t;
+    l();
+    const { unsubscribePayload: u, stripoModules: p } = r(t.rawHtml);
+    return await n(u), t.modules = p, c || s(t), t;
   } };
 };
 export {
-  g as useSave
+  k as useSave
 };

package/dist/config/migrator/checkboxMigrator.js

@@ -11,6 +11,8 @@ class f {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.checkbox-block");
       return i.length === 0 ? t : (i.forEach((r) => {
+        if (r.classList.contains("checkbox-block-v2"))
+          return;
         const n = r.getAttribute("id"), l = this.extractTextFromElement(r, "ins-title"), c = this.extractTextFromElement(r, "ins-description"), a = this.buildTextBlock(l), p = this.buildTextBlock(c), g = b.replace("{-{-TITLE-}-}", a).replace("{-{-DESCRIPTION-}-}", p), o = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${g}</tr></tbody></table>`,
           "text/html"
@@ -22,7 +24,7 @@ class f {
     }
   }
   extractTextFromElement(t, e) {
-    var o, u;
+    var o, d;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -41,13 +43,13 @@ class f {
         align: i.getAttribute("align") || "left",
         styles: ""
       };
-    const n = ((u = r.textContent) == null ? void 0 : u.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), d = this.convertInlineToBlock(g);
+    const n = ((d = r.textContent) == null ? void 0 : d.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), u = this.convertInlineToBlock(g);
     return {
       text: n,
       isBold: a,
       isItalic: p,
       align: c,
-      styles: d
+      styles: u
     };
   }
   buildTextBlock(t) {

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,28 +1,30 @@
-var b = Object.defineProperty;
-var f = (r, t, e) => t in r ? b(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var x = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
+var x = Object.defineProperty;
+var f = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var b = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
 import h from "../../extensions/Blocks/RadioButton/template.js";
 class T {
   constructor() {
-    x(this, "parser");
+    b(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.radio-button-block");
       return i.length === 0 ? t : (i.forEach((s) => {
-        const o = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), n = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", n), y = this.parser.parseFromString(
+        if (s.classList.contains("radio-button-v2"))
+          return;
+        const n = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), o = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", o), y = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        y && s.parentNode && (y.setAttribute("id", o || ""), s.parentNode.replaceChild(y, s));
+        y && s.parentNode && (y.setAttribute("id", n || ""), s.parentNode.replaceChild(y, s));
       }), e.documentElement.outerHTML);
     } catch (e) {
       return console.error("RadioButtonMigrator failed:", e), t;
     }
   }
   extractTextFromElement(t, e) {
-    var n, c;
+    var o, c;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -36,16 +38,16 @@ class T {
     const s = i.querySelector("p");
     if (!s)
       return {
-        text: ((n = i.textContent) == null ? void 0 : n.trim()) || (e === "ins-title" ? "Title" : "Description"),
+        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
         isBold: !1,
         isItalic: !1,
         align: i.getAttribute("align") || "left",
         styles: "",
         classList: ""
       };
-    const o = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
+    const n = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
     return {
-      text: o,
+      text: n,
       isBold: p,
       isItalic: u,
       align: a,
@@ -66,8 +68,8 @@ class T {
         `;
   }
   removeStyleProperties(t, e) {
-    return t ? e.reduce((s, o) => {
-      const l = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
+    return t ? e.reduce((s, n) => {
+      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
       return s.replace(l, "");
     }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
   }

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-870ebbaf] .in-progress-wrapper__progress p span:last-child{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-acff76a8]{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-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[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-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .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}.editor-actions[data-v-acff76a8]{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-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[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-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/services/recommendationApi.js

@@ -1,34 +1,36 @@
 import { useHttp as c } from "../composables/useHttp.js";
-import { URLS as m } from "../enums/extensions/recommendationBlock.js";
+import { URLS as i } from "../enums/extensions/recommendationBlock.js";
 const f = () => {
-  const { get: o } = c();
-  return {
+  const { get: r } = c(), a = void 0;
+  return console.error("[Guido] VITE_INS_RECOMMENDATION_CLIENT_ID is not set. Recommendation API requests will fail."), {
     fetchRecommendationCreateData: async () => {
       try {
-        return (await o("/newsletter/recommendations/create-data")).data;
+        return (await r("/newsletter/recommendations/create-data")).data;
       } catch (e) {
         throw console.error("fetchUserModalState error:", e), e;
       }
     },
     fetchRecommendationFilters: async () => {
       try {
-        const { data: e } = await o("/stripo/email-recommendation-attributes");
+        const { data: e } = await r("/stripo/email-recommendation-attributes");
         return e;
       } catch (e) {
         throw console.error("fetchRecommendationFilters error:", e), e;
       }
     },
-    fetchRecommendationProducts: async (e, a) => {
+    fetchRecommendationProducts: async (e, s) => {
       var n;
       try {
-        const t = decodeURIComponent(new URLSearchParams(Object.entries(a)).toString());
+        const t = decodeURIComponent(new URLSearchParams(Object.entries(s)).toString());
         console.debug("🏁 Recommendation API Query:", t);
-        const { get: s } = c({
-          headers: {}
-        }), r = await s(
-          `${m.RECOMMENDATION_API_URL}/v2/${e}?${t}`
+        const { get: m } = c({
+          headers: {
+            "X-CLIENT-ID": a
+          }
+        }), o = await m(
+          `${i.RECOMMENDATION_API_URL}/v2/${e}?${t}`
         );
-        return ((n = r == null ? void 0 : r.data) == null ? void 0 : n.data) ?? [];
+        return ((n = o == null ? void 0 : o.data) == null ? void 0 : n.data) ?? [];
       } catch (t) {
         throw console.error("fetchRecommendationProducts error:", t), t;
       }

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

@@ -8,7 +8,7 @@
  * - Validation utilities
  */
 export { MessageType, ProductType, GuidoConfigSchema, IdentitySchema, PartnerSchema, TemplateSchema, EditorSchema, UISchema, FeaturesSchema, BlocksSchema, CompilerSchema, CallbacksSchema, DynamicContentSchema, EmailHeaderSchema, DefaultBlockTypeSchema, CustomBlockTypeSchema, CompilerRuleSchema, CompilerRuleTypeSchema, ReplaceRuleSchema, RegexRuleSchema, RemoveRuleSchema, CustomRuleSchema, } from './schemas';
-export type { GuidoConfig, GuidoConfigInput, IdentityConfig, IdentityConfigInput, PartnerConfig, PartnerConfigInput, TemplateConfig, TemplateConfigInput, EditorConfig, EditorConfigInput, UIConfig, UIConfigInput, FeaturesConfig, FeaturesConfigInput, BlocksConfig, BlocksConfigInput, CompilerConfig, CompilerConfigInput, CallbacksConfig, CallbacksConfigInput, ExternalValidationHandler, EmailHeader, DynamicContent, DefaultBlockType, CustomBlockType, BlockType, FeatureName, CompilerRule, ReplaceRule, RegexRule, RemoveRule, CustomRule, DeepPartial, ConfigOverrides, } from './types';
+export type { GuidoConfig, GuidoConfigInput, IdentityConfig, IdentityConfigInput, PartnerConfig, PartnerConfigInput, FallbackFont, TemplateConfig, TemplateConfigInput, EditorConfig, EditorConfigInput, UIConfig, UIConfigInput, FeaturesConfig, FeaturesConfigInput, BlocksConfig, BlocksConfigInput, CompilerConfig, CompilerConfigInput, CallbacksConfig, CallbacksConfigInput, ExternalValidationHandler, EmailHeader, DynamicContent, DefaultBlockType, CustomBlockType, BlockType, FeatureName, CompilerRule, ReplaceRule, RegexRule, RemoveRule, CustomRule, DeepPartial, ConfigOverrides, } from './types';
 export { DEFAULT_EMAIL_HEADER, DEFAULT_TEMPLATE, DEFAULT_EDITOR, DEFAULT_UI, DEFAULT_FEATURES, DEFAULT_BLOCKS, DEFAULT_COMPILER, DEFAULT_PRODUCT_TYPE, DEFAULT_MESSAGE_TYPE, DEFAULT_USERNAME, EDITOR_TYPE, TEST_PARTNERS, isTestPartner, } from './defaults';
 export { validateConfig, parseConfig, parseConfigSafe, getValidationErrors, isValidConfig, validateIdentity, validatePartner, } from './validator';
 export type { ValidationResult, ValidationError, } from './validator';

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

@@ -47,6 +47,12 @@ export declare const IdentitySchema: v.ObjectSchema<{
 /**
  * Partner configuration - organization and product context
  */
+export declare const FallbackFontSchema: v.ObjectSchema<{
+    /** Fallback font name (e.g., "Georgia") */
+    readonly name: v.StringSchema<undefined>;
+    /** Fallback font family (e.g., "serif" or "sans-serif") */
+    readonly family: v.StringSchema<undefined>;
+}, undefined>;
 export declare const PartnerSchema: v.ObjectSchema<{
     /** Partner/organization name (required) */
     readonly name: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, "partner.name is required">]>;
@@ -56,6 +62,13 @@ export declare const PartnerSchema: v.ObjectSchema<{
     readonly messageType: v.OptionalSchema<v.PicklistSchema<[1, 2], undefined>, 1>;
     /** Display name for the current user */
     readonly username: v.OptionalSchema<v.StringSchema<undefined>, "Guido User">;
+    /** Fallback font settings from partner settings — used to match backend size calculation */
+    readonly fallbackFont: v.OptionalSchema<v.ObjectSchema<{
+        /** Fallback font name (e.g., "Georgia") */
+        readonly name: v.StringSchema<undefined>;
+        /** Fallback font family (e.g., "serif" or "sans-serif") */
+        readonly family: v.StringSchema<undefined>;
+    }, undefined>, undefined>;
 }, undefined>;
 /**
  * Dynamic content item schema
@@ -403,6 +416,13 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
         readonly messageType: v.OptionalSchema<v.PicklistSchema<[1, 2], undefined>, 1>;
         /** Display name for the current user */
         readonly username: v.OptionalSchema<v.StringSchema<undefined>, "Guido User">;
+        /** Fallback font settings from partner settings — used to match backend size calculation */
+        readonly fallbackFont: v.OptionalSchema<v.ObjectSchema<{
+            /** Fallback font name (e.g., "Georgia") */
+            readonly name: v.StringSchema<undefined>;
+            /** Fallback font family (e.g., "serif" or "sans-serif") */
+            readonly family: v.StringSchema<undefined>;
+        }, undefined>, undefined>;
     }, undefined>;
     /** Template content and presets */
     readonly template: v.OptionalSchema<v.ObjectSchema<{

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

@@ -5,7 +5,7 @@
  * This ensures type definitions are always in sync with validation.
  * @module @types/config/types
  */
-import type { GuidoConfigSchema, IdentitySchema, PartnerSchema, TemplateSchema, EditorSchema, UISchema, FeaturesSchema, BlocksSchema, CompilerSchema, CallbacksSchema, DynamicContentSchema, EmailHeaderSchema, CompilerRuleSchema, ReplaceRuleSchema, RegexRuleSchema, RemoveRuleSchema, CustomRuleSchema, DefaultBlockTypeSchema, CustomBlockTypeSchema, ExternalValidationHandler } from './schemas';
+import type { GuidoConfigSchema, IdentitySchema, PartnerSchema, TemplateSchema, EditorSchema, UISchema, FeaturesSchema, BlocksSchema, CompilerSchema, CallbacksSchema, DynamicContentSchema, EmailHeaderSchema, CompilerRuleSchema, ReplaceRuleSchema, RegexRuleSchema, RemoveRuleSchema, CustomRuleSchema, DefaultBlockTypeSchema, CustomBlockTypeSchema, FallbackFontSchema, ExternalValidationHandler } from './schemas';
 import type * as v from 'valibot';
 /**
  * Complete validated Guido configuration.
@@ -29,6 +29,8 @@ export type GuidoConfig = v.InferOutput<typeof GuidoConfigSchema>;
 export type IdentityConfig = v.InferOutput<typeof IdentitySchema>;
 /** Partner configuration (name, productType, messageType, username) */
 export type PartnerConfig = v.InferOutput<typeof PartnerSchema>;
+/** Fallback font settings for backend size calculation alignment */
+export type FallbackFont = v.InferOutput<typeof FallbackFontSchema>;
 /** Template configuration (html, css, dynamic content, unsubscribe pages) */
 export type TemplateConfig = v.InferOutput<typeof TemplateSchema>;
 /** Editor configuration (locale, translations, migration date, email header) */

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

@@ -44,7 +44,6 @@ export interface TooltipOptions {
         x: number;
         y: number;
     };
-    preventXss?: boolean;
 }
 export type TextValueObject = {
     text: string;

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

@@ -17,6 +17,10 @@ export declare const useConfig: () => {
             productType: 60 | 49 | 97;
             messageType: 1 | 2;
             username: string;
+            fallbackFont?: {
+                name: string;
+                family: string;
+            } | undefined;
         };
         template: {
             html: string;
@@ -109,6 +113,10 @@ export declare const useConfig: () => {
         productType: 60 | 49 | 97;
         messageType: 1 | 2;
         username: string;
+        fallbackFont?: {
+            name: string;
+            family: string;
+        } | undefined;
     } | null>;
     template: import("vue").ComputedRef<{
         html: string;

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

@@ -22,6 +22,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -120,6 +124,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -218,6 +226,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -316,6 +328,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -414,6 +430,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -512,6 +532,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -610,6 +634,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -708,6 +736,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -806,6 +838,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -904,6 +940,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1002,6 +1042,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1100,6 +1144,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1198,6 +1246,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1296,6 +1348,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1394,6 +1450,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1492,6 +1552,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1590,6 +1654,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1688,6 +1756,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;

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

@@ -7,6 +7,7 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPrev
         templateHtml: string;
         isLoaded: boolean;
         isAMPErrorModalVisible: boolean;
+        emailSizeKB: number;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
     previewHtml(): string;
     hasAMP: (state: {
@@ -16,6 +17,7 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPrev
         templateHtml: string;
         isLoaded: boolean;
         isAMPErrorModalVisible: boolean;
+        emailSizeKB: number;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
     hasAMPErrors: (state: {
         emailFormat: EmailFormat;
@@ -24,6 +26,7 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPrev
         templateHtml: string;
         isLoaded: boolean;
         isAMPErrorModalVisible: boolean;
+        emailSizeKB: number;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
     showAMPErrorButton(): boolean;
     isAMPResponsive(): boolean;

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

@@ -1,8 +1,9 @@
+import type { FallbackFont } from '@@/Types/config';
 import type { CompilerRule, CompilationResult, HtmlCompiler } from '@@/Types/html-compiler';
 export declare class HtmlCompilerEngine implements HtmlCompiler {
     private rules;
     constructor(rules?: CompilerRule[]);
-    compile(html: string, rules?: CompilerRule[]): CompilationResult;
+    compile(html: string, rules?: CompilerRule[], fallbackFont?: FallbackFont): CompilationResult;
     private applyRule;
     private applyReplaceRule;
     private applyRegexRule;

package/dist/stores/preview.js

@@ -1,13 +1,14 @@
 import { defineStore as e } from "pinia";
-const s = () => ({
+const i = () => ({
   emailFormat: "html",
   ampHtml: "",
   ampErrors: [],
   templateHtml: "",
   isLoaded: !1,
-  isAMPErrorModalVisible: !1
+  isAMPErrorModalVisible: !1,
+  emailSizeKB: 0
 }), a = e("guidoPreview", {
-  state: () => s(),
+  state: () => i(),
   getters: {
     isAMPModeEnabled: (t) => t.emailFormat === "AMP",
     previewHtml() {

package/dist/utils/htmlCompiler.js

@@ -1,70 +1,77 @@
-var y = Object.defineProperty;
-var g = (p, e, r) => e in p ? y(p, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : p[e] = r;
-var u = (p, e, r) => g(p, typeof e != "symbol" ? e + "" : e, r);
-import { useToaster as m } from "../composables/useToaster.js";
-class d {
+var h = Object.defineProperty;
+var f = (o, e, t) => e in o ? h(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var m = (o, e, t) => f(o, typeof e != "symbol" ? e + "" : e, t);
+import { useToaster as x } from "../composables/useToaster.js";
+const E = /font-family\s*:[^;}"']+/gi;
+class T {
   constructor(e = []) {
-    u(this, "rules");
+    m(this, "rules");
     this.rules = e;
   }
-  compile(e, r) {
-    const l = performance.now(), t = e, o = e.length;
+  compile(e, t, r) {
+    const n = performance.now(), l = e, c = e.length;
     let s = e;
-    const a = [];
-    (r || this.rules).sort((n, c) => n.priority - c.priority).forEach((n) => {
-      const c = s.length;
-      s = this.applyRule(s, n), s.length !== c && a.push(n.id);
+    const i = [];
+    (t || this.rules).sort((p, a) => p.priority - a.priority).forEach((p) => {
+      const a = s.length;
+      s = this.applyRule(s, p), s.length !== a && i.push(p.id);
     });
-    const i = s.length, R = o > 0 ? (o - i) / o * 100 : 0;
+    const u = s.length, R = c > 0 ? (c - u) / c * 100 : 0, d = new TextEncoder().encode(s).byteLength;
+    let y = 0;
+    if (r && r.name && r.family) {
+      const p = (s.match(E) || []).length, a = `, ${r.name}, ${r.family}`;
+      y = p * new TextEncoder().encode(a).byteLength;
+    }
+    const g = Math.round((d + y) / 1024);
     return {
-      originalHtml: t,
+      originalHtml: l,
       compiledHtml: s,
-      appliedRules: a,
-      // TODO: We can use stats for monitoring in the future
+      appliedRules: i,
+      estimatedSizeKB: g,
       stats: {
-        originalSize: o,
-        compiledSize: i,
+        originalSize: c,
+        compiledSize: u,
         reductionPercentage: R,
-        executionTime: performance.now() - l
+        executionTime: performance.now() - n
       }
     };
   }
-  applyRule(e, r) {
+  applyRule(e, t) {
     try {
-      switch (r.type) {
+      switch (t.type) {
         case "replace":
-          return this.applyReplaceRule(e, r);
+          return this.applyReplaceRule(e, t);
         case "regex":
-          return this.applyRegexRule(e, r);
+          return this.applyRegexRule(e, t);
         case "remove":
-          return this.applyRemoveRule(e, r);
+          return this.applyRemoveRule(e, t);
         case "custom":
-          return this.applyCustomRule(e, r);
+          return this.applyCustomRule(e, t);
         default:
           return e;
       }
-    } catch (l) {
-      const { handleError: t } = m();
-      return t(l, `Failed to apply rule ${r.id}:`), e;
+    } catch (r) {
+      const { handleError: n } = x();
+      return n(r, `Failed to apply rule ${t.id}:`), e;
     }
   }
-  applyReplaceRule(e, r) {
-    const { search: l, replacement: t, replaceAll: o = !0 } = r;
-    return o ? e.replaceAll(l, t) : e.replace(l, t);
+  applyReplaceRule(e, t) {
+    const { search: r, replacement: n, replaceAll: l = !0 } = t;
+    return l ? e.replaceAll(r, n) : e.replace(r, n);
   }
-  applyRegexRule(e, r) {
-    const { pattern: l, replacement: t, flags: o = "g" } = r, s = new RegExp(l, o);
-    return e.replace(s, t);
+  applyRegexRule(e, t) {
+    const { pattern: r, replacement: n, flags: l = "g" } = t, c = new RegExp(r, l);
+    return e.replace(c, n);
   }
-  applyRemoveRule(e, r) {
-    return r.targets.reduce((l, t) => t instanceof RegExp ? l.replace(t, "") : l.replaceAll(t, ""), e);
+  applyRemoveRule(e, t) {
+    return t.targets.reduce((r, n) => n instanceof RegExp ? r.replace(n, "") : r.replaceAll(n, ""), e);
   }
-  applyCustomRule(e, r) {
-    return r.processor(e);
+  applyCustomRule(e, t) {
+    return t.processor(e);
   }
 }
-const A = (p = []) => new d(p);
+const H = (o = []) => new T(o);
 export {
-  d as HtmlCompilerEngine,
-  A as createHtmlCompiler
+  T as HtmlCompilerEngine,
+  H as createHtmlCompiler
 };

package/dist/utils/templatePreparation.js

@@ -1,32 +1,32 @@
-import { useActionsApi as f } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as C } from "../composables/useHtmlCompiler.js";
-import { useRecommendationExtensionStore as T } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useDynamicContentStore as x } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as y } from "../stores/unsubscribe.js";
-const w = () => {
-  const o = x(), e = y(), { getCompiledEmail: i, getTemplateData: s, editorSave: n } = f(), { compileHtml: a } = C();
+import { useActionsApi as S } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as f } from "../composables/useHtmlCompiler.js";
+import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useDynamicContentStore as T } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as x } from "../stores/unsubscribe.js";
+const h = () => {
+  const o = T(), e = x(), { getCompiledEmail: i, getTemplateData: s } = S(), { compileHtml: n } = f();
   return {
     prepareTemplateDetails: async () => {
-      const { html: m, ampHtml: r = "", ampErrors: c = [] } = await i({
+      const { html: a, ampHtml: m = "", ampErrors: r = [] } = await i({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: l, css: p, syncModulesIds: u = [] } = await s();
+      }), { html: c, css: l, syncModulesIds: p = [] } = await s();
       e.selectedUnsubscribePages.length && await e.fetchTemplates();
-      const { compiledHtml: d, stats: t, appliedRules: g } = a(m), S = o.getSelectedDynamicContentList, b = T();
-      return n(), console.debug("HTML Compilation Stats:", {
+      const { compiledHtml: u, stats: t, appliedRules: d } = n(a), g = o.getSelectedDynamicContentList, b = C();
+      return console.debug("HTML Compilation Stats:", {
         originalSize: t.originalSize,
         compiledSize: t.compiledSize,
         reduction: `${t.reductionPercentage.toFixed(2)}%`,
-        appliedRules: g,
+        appliedRules: d,
         executionTime: `${t.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: S,
-        compiledHtml: d,
-        rawHtml: l,
-        css: p,
-        ampHtml: r,
-        ampErrors: c,
-        modules: u.map(Number),
+        dynamicContentList: g,
+        compiledHtml: u,
+        rawHtml: c,
+        css: l,
+        ampHtml: m,
+        ampErrors: r,
+        modules: p.map(Number),
         recommendation: {
           campaignUrls: b.recommendationCampaignUrls,
           configs: {}
@@ -40,5 +40,5 @@ const w = () => {
   };
 };
 export {
-  w as useTemplatePreparation
+  h as useTemplatePreparation
 };

package/dist/utils/tooltipUtils.js

@@ -1,11 +1,10 @@
-const e = (s, t = {}) => ({
-  id: s,
+const o = (i, t = {}) => ({
+  id: i,
   dynamicPosition: t.dynamicPosition ?? !1,
   staticPosition: t.staticPosition ?? "bottom center",
   iconStatus: t.iconStatus ?? !1,
-  offset: t.offset,
-  preventXss: t.preventXss
+  offset: t.offset
 });
 export {
-  e as getTooltipOptions
+  o as getTooltipOptions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.1.1-beta.58e1771",
+  "version": "3.1.1-beta.5fce9b2",
   "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",
@@ -33,7 +33,7 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.5.0",
-    "@useinsider/design-system-vue": "0.14.28",
+    "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",