@useinsider/guido 3.1.1 → 3.2.0-beta.080341b

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/stores/onboarding.d.ts

@@ -1392,6 +1392,10 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
     close(type: OnboardingType): Promise<void>;
     next(type: OnboardingType): void;
     previous(type: OnboardingType): void;
+    updateCardPosition(type: OnboardingType, cardIndex: number, position: {
+        top: string;
+        position: string;
+    }): void;
     setConfig(type: OnboardingType, config: OnboardingCardConfig[]): void;
     onDiscoverNowClicked(): Promise<void>;
     onRemindMeLater(): void;

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/genericUtil.d.ts

@@ -1,6 +1,6 @@
 import type { DynamicContent, MergeTag } from '@@/Types/generic';
 export declare const mergeTagToDynamicContent: (mergeTag: MergeTag) => DynamicContent;
-export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[]) => MergeTag[];
+export declare const dynamicContentToMergeTags: (dynamicContentList: DynamicContent[], liquidSyntax?: boolean) => MergeTag[];
 export declare const getCsrfToken: () => string;
 /**
  * URL Parameter utilities

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/src/utils/htmlEscape.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Escape HTML special characters for safe inclusion in attribute values
+ * or text content. Use for any string that may contain untrusted input.
+ */
+export declare function escapeHtml(text: string): string;

package/dist/src/utils/htmlEscape.test.d.ts

@@ -0,0 +1 @@
+export {};

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/static/styles/base.css.js

@@ -1,11 +1,16 @@
-const t = `.amp-input-list,
+const n = `.amp-input-list,
 .button,
 .base-input,
 ue-stripe-thumb,
 .ue-stripe-thumb {
     transition: all .5s ease;
 }
+
+:host {
+    height: 100% !important;
+    min-height: 0 !important;
+}
 `;
 export {
-  t as default
+  n as default
 };

package/dist/static/styles/components/button.css.js

@@ -1,4 +1,4 @@
-const o = `.control-shadow-wrapper:has(.button) {
+const n = `.control-shadow-wrapper:has(.button) {
     border-radius: 0;
     box-shadow: none;
     background-color: transparent;
@@ -99,18 +99,12 @@ ue-check-button.checked:not(.flat-white) input:checked + label .icon-button {
     color: var(--guido-color-primary-500);
 }
 
-ue-select.full-width .button {
-    border: none !important;
-    background-color: var(--guido-color-neutral-200) !important;
-    color: var(--guido-color-neutral-800) !important;
-}
-
 ue-select.full-width .button .icon-button {
     color: var(--guido-color-gray-600) !important;
 }
 
 ue-select.full-width .button:hover:not(:disabled,.disabled) {
-    background-color: var(--guido-color-neutral-100) !important;
+    background-color: var(--guido-color-gray-0) !important;
 }
 
 ue-color {
@@ -130,7 +124,20 @@ ue-select-text-input .select-text-input-toggle .button {
     justify-content: center;
     background-color: transparent !important;
 }
+
+
+.control-shadow-wrapper,
+ue-button:not(.no-shadow,.flat-white),
+ue-toggle:not(.no-shadow,.flat-white),
+:is(ue-popover-toggler,ue-toggle-icon-picker,ue-emoji-toggle),
+.button-group,
+ue-counter:not(.no-shadow),
+:is(ue-select,ue-mergetags,ue-font-family-select):not(.no-shadow),
+ue-check-button:not(.no-shadow,.flat-white) {
+    background: none;
+    padding: 0;
+}
 `;
 export {
-  o as default
+  n as default
 };

package/dist/static/styles/components/loader.css.js

@@ -4,6 +4,10 @@ const n = `ue-loader-component.full-height {
     z-index: 9;
     backdrop-filter: blur(2px);
 }
+
+ue-loader-component .service-element.loader {
+    box-shadow: var(--guido-color-primary-500) 1px 1px 0 0 !important;
+}
 `;
 export {
   n as default

package/dist/static/styles/components/narrow-panel.css.js

@@ -28,6 +28,58 @@ ue-stripe-thumb:hover:not(.disabled),
     border-color: var(--guido-color-primary-500);
 }
 
+/* Module search — initial */
+.module-search-container {
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+}
+
+.module-search-container .service-element {
+    background-color: unset;
+}
+
+.module-filter-toggle {
+    top: -1px !important;
+    right: -1px !important;
+}
+
+.module-filter-toggle > .button,
+.module-search-container:hover .module-filter-toggle > .button {
+    border: none;
+    background: transparent;
+}
+
+/* Module search — hover */
+.module-search-container:has(.module-search-chip-input:hover) {
+    border-color: var(--guido-color-primary-500);
+}
+
+.module-search-container .module-search-chip-input .service-element:hover {
+    background-color: var(--guido-color-gray-0);
+    border-radius: 4px;
+}
+
+.module-search-container .module-filter-toggle:hover > .button {
+    background-color: var(--guido-color-gray-1);
+}
+
+/* Module search — selected (.on) */
+.module-search-container:has(.module-search-chip-input.on),
+.module-search-container:has(.module-search-chip-input.on):hover {
+    border-color: var(--guido-color-primary-500);
+    box-shadow: 0 0 0 3px var(--guido-color-primary-200) !important;
+}
+
+.module-search-container .module-search-chip-input.on .input-section {
+    background-color: unset;
+    box-shadow: unset;
+}
+
+.module-categories-list .menu-item {
+    padding: 8px 20px !important;
+}
+
 .modules-layout-wrapper {
     padding: 0 16px 16px;
     grid-row-gap: 16px;

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/stores/onboarding.js

@@ -71,6 +71,10 @@ const t = () => ({
     previous(n) {
       this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
     },
+    updateCardPosition(n, i, o) {
+      const s = this.onboardings[n].config[i];
+      s && (s.top = o.top, s.position = o.position);
+    },
     setConfig(n, i) {
       this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },

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/genericUtil.js

@@ -1,25 +1,47 @@
-const f = (t) => {
-  const n = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [r] = n, e = {
-    text: t.label,
-    value: r || ""
+const s = (e) => {
+  const a = e.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [n] = a, c = {
+    text: e.label,
+    value: n || ""
   };
-  if (n.length >= 2) {
-    const [, l, o] = n, c = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
-    c ? e.format = c : o || (e.fallback = l), o && (e.fallback = o);
+  if (a.length >= 2) {
+    const [, l, r] = a;
+    if (l.startsWith("default:")) {
+      let t = l.slice(8).trim();
+      t.startsWith('"') && t.endsWith('"') && (t = t.slice(1, -1)), c.fallback = t;
+    } else {
+      const t = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
+      t ? c.format = t : r || (c.fallback = l), r && (c.fallback = r);
+    }
   }
-  return e;
-}, s = (t) => t.map((a) => a.format ? {
-  label: `${a.text} | ${a.format.key}=${a.format.value}`,
-  value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
-} : {
-  label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
-  value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
-}), u = () => {
-  var t;
-  return ((t = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : t.getAttribute("content")) ?? "";
+  return c;
+}, u = (e, f = !1) => e.map((a) => {
+  if (a.format)
+    return {
+      label: `${a.text} | ${a.format.key}=${a.format.value}`,
+      value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
+    };
+  if (f) {
+    if (!a.fallback)
+      return {
+        label: a.text,
+        value: `{{ ${a.value} }}`
+      };
+    const c = !Number.isNaN(Number(a.fallback)) && a.fallback.trim() !== "" ? a.fallback : `"${a.fallback}"`;
+    return {
+      label: `${a.text} | ${a.fallback}`,
+      value: `{{ ${a.value} | default: ${c} }}`
+    };
+  }
+  return {
+    label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
+    value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+  };
+}), o = () => {
+  var e;
+  return ((e = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : e.getAttribute("content")) ?? "";
 };
 export {
-  s as dynamicContentToMergeTags,
-  u as getCsrfToken,
-  f as mergeTagToDynamicContent
+  u as dynamicContentToMergeTags,
+  o as getCsrfToken,
+  s as mergeTagToDynamicContent
 };

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/htmlEscape.js

@@ -0,0 +1,13 @@
+const c = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#x27;"
+};
+function n(t) {
+  return t.replace(/[&<>"']/g, (e) => c[e]);
+}
+export {
+  n as escapeHtml
+};