@useinsider/guido 3.1.1-beta.6b60896 → 3.1.1-beta.7145c7d

package/dist/src/enums/extensions/recommendationBlock.d.ts

@@ -3,6 +3,9 @@ import type { RecommendationFeedItem } from '@@/Types/recommendation';
 export declare const URLS: {
     RECOMMENDATION_API_URL: string;
 };
+export declare const QUERY_PARAMS: {
+    CLIENT_ID: string;
+};
 export declare const RecommendationFeedSourceMaps: RecommendationFeedItem[];
 export declare const PriceAttributes: string[];
 export declare const currencyLocationMaps: TextValueObject[];

package/dist/src/extensions/Blocks/CouponBlock/template.d.ts

@@ -1,3 +1,5 @@
+export declare const COUPON_PLACEHOLDER_DEFAULT = "{@COUPON_CODE}";
+export declare const COUPON_PLACEHOLDER_LIQUID = "{{ins_coupon_code}}";
 declare const migrationTemplate = "\n    <td\n        class=\"coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block\"\n        esd-extension-block-id=\"coupon-block\"\n    >\n        <p class=\"ins-title\" contenteditable=\"false\">{@COUPON_CODE}</p>\n    </td>\n";
 export declare function getDefaultTemplate(): string;
 export default migrationTemplate;

package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts

@@ -8,6 +8,6 @@
  */
 export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
-export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_CUSTOM_PREFIX, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, } from './selectors';
+export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_CUSTOM_PREFIX, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, BUILT_IN_DEFAULT_ATTRIBUTES, } from './selectors';
 export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, DEFAULT_MOBILE_COLUMN_SPACING, DEFAULT_MOBILE_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
 export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';

package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts

@@ -50,3 +50,8 @@ export declare const ATTR_CUSTOM_PREFIX = "customAttr:";
 export declare const ATTR_DATA_CUSTOM_ATTRIBUTES = "data-custom-attributes";
 /** HTML attribute on <td> elements identifying the product attribute for compiler template variable generation */
 export declare const ATTR_PRODUCT_ATTR = "product-attr";
+/**
+ * Default attribute names that are already represented by built-in composition toggle items.
+ * Used to exclude these from the custom attribute dropdown to prevent duplication with toggles.
+ */
+export declare const BUILT_IN_DEFAULT_ATTRIBUTES: Set<string>;

package/dist/src/extensions/Blocks/Recommendation/controls/cardComposition/index.d.ts

@@ -170,6 +170,11 @@ export declare class RecommendationCardCompositionControl extends CommonControl
      * When filterList changes (e.g. after async fetch), re-renders dropdowns with new options.
      */
     private _subscribeToStoreChanges;
+    /**
+     * Returns filters eligible for the custom attribute dropdown,
+     * excluding default attributes already covered by built-in toggle items.
+     */
+    private _getAddableFilters;
     /**
      * Looks up the display name for an attribute from the store's filterList.
      * Falls back to Title Case conversion of the snake_case attribute name.

package/dist/src/extensions/Blocks/Recommendation/templates/grid/template.d.ts

@@ -1,4 +1,4 @@
-import type { RecommendationProduct } from '@@/Types/recommendation';
+import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommendation';
 import { type ElementRenderer } from '../utils';
 /**
  * Generates attribute-aligned product rows for grid layout.
@@ -9,7 +9,7 @@ import { type ElementRenderer } from '../utils';
  * @param composition - Array defining order of card elements
  * @returns HTML string for attribute-aligned rows
  */
-export declare function prepareGridAttributeRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[]): string;
+export declare function prepareGridAttributeRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[], filterList?: FiltersResponse): string;
 /**
  * Prepares grid product rows with attribute-aligned structure
  * Groups products into rows, then generates attribute-aligned HTML for each group
@@ -19,7 +19,7 @@ export declare function prepareGridAttributeRows(products: RecommendationProduct
  * @param composition - Array defining order of card elements
  * @returns HTML string for all product rows
  */
-export declare function prepareGridProductRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[]): string;
+export declare function prepareGridProductRows(products: RecommendationProduct[], productsPerRow: number, elementRenderer: ElementRenderer, composition?: string[], filterList?: FiltersResponse): string;
 /**
  * Prepares grid product rows with attribute-aligned structure.
  * Uses row-based rendering where each attribute type forms a single row across all products.
@@ -28,6 +28,6 @@ export declare function prepareGridProductRows(products: RecommendationProduct[]
  * @param composition - Array defining element order
  * @returns HTML string for product rows
  */
-export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
+export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[], filterList?: FiltersResponse): string;
 export declare function getDefaultTemplate(recommendationId?: number): string;
 export declare function generateBlockTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[], mobileProductsPerRow?: number): string;

package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts

@@ -1,4 +1,4 @@
-import type { RecommendationProduct } from '@@/Types/recommendation';
+import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommendation';
 /**
  * Generates a list product card with 3-column layout
  * Uses buildElementRenderer to render Image, Info content, and Button
@@ -11,7 +11,7 @@ import type { RecommendationProduct } from '@@/Types/recommendation';
  * @param composition - Array defining order of card elements
  * @returns HTML string for a single product card row
  */
-export declare function getListProductCard(product: RecommendationProduct, composition?: string[]): string;
+export declare function getListProductCard(product: RecommendationProduct, composition?: string[], filterList?: FiltersResponse): string;
 /**
  * Prepares list product rows
  * Each product is a full-width row with 3-column layout
@@ -19,6 +19,6 @@ export declare function getListProductCard(product: RecommendationProduct, compo
  * @param composition - Array defining order of card elements
  * @returns HTML string for product rows
  */
-export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[]): string;
+export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[], filterList?: FiltersResponse): string;
 export declare function getDefaultTemplate(): string;
 export declare function generateBlockTemplate(products: RecommendationProduct[], title?: string, composition?: string[]): string;

package/dist/src/extensions/Blocks/Recommendation/templates/utils.d.ts

@@ -1,15 +1,29 @@
-import type { RecommendationProduct } from '@@/Types/recommendation';
+import type { FiltersResponse, RecommendationProduct } from '@@/Types/recommendation';
 import { ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON } from '../constants';
 /**
  * Converts a snake_case attribute name to Title Case display name.
  * e.g., "rating_star" → "Rating Star"
  */
 export declare function toDisplayName(attrName: string): string;
+/**
+ * Checks whether an attribute is a default (top-level) product attribute
+ * vs a custom product attribute (nested under `product_attributes`).
+ * Returns false when filterList is empty or the attribute is not found.
+ */
+export declare function isDefaultAttribute(attrName: string, filterList: FiltersResponse): boolean;
+/**
+ * Resolves the `product-attr` HTML attribute value based on attribute type from the filter list.
+ * - Default attributes → attribute name directly (e.g., "brand") → compiles to `{{1_0_brand}}`
+ * - Product attributes → "product_attribute.<name>" (e.g., "product_attribute.rating_star")
+ */
+export declare function resolveProductAttrValue(attrName: string, filterList: FiltersResponse): string;
 /**
  * Callback that generates the cell HTML for a custom product attribute.
  * Layout-specific: grid returns `<td>…`, list returns `<tr><td>…</td></tr>`.
+ * @param productAttrValue - The resolved `product-attr` value (e.g., "brand" or "product_attribute.rating_star")
+ * @param content - The display content for the cell
  */
-export type CustomCellHtmlGetter = (attrName: string, content: string) => string;
+export type CustomCellHtmlGetter = (productAttrValue: string, content: string) => string;
 /**
  * Symbol key for embedding custom attribute HTML in an ElementRenderer.
  * Grid and list renderers store their custom-attribute cell template under this key
@@ -28,8 +42,9 @@ export declare const CUSTOM_CELL_HTML: unique symbol;
  * alongside built-in ones, so template code can use a uniform lookup for all attributes.
  * @param baseRenderer - The built-in element renderer (grid or list), must include a [CUSTOM_CELL_HTML] entry
  * @param composition - Array of attribute keys including `customAttr:*` entries
+ * @param filterList - Filter list from the store, used to determine attribute type for correct product-attr resolution
  */
-export declare function buildElementRenderer(baseRenderer: ElementRenderer, composition: string[]): ElementRenderer;
+export declare function buildElementRenderer(baseRenderer: ElementRenderer, composition: string[], filterList?: FiltersResponse): ElementRenderer;
 export type Orientation = 'list' | 'grid';
 /**
  * Options for prepareProductRows unified function
@@ -41,6 +56,8 @@ export interface PrepareProductRowsOptions {
     mobileProductsPerRow?: number;
     /** Array defining order of card elements */
     composition?: string[];
+    /** Filter list for attribute type resolution (default vs product attributes) */
+    filterList?: FiltersResponse;
 }
 /**
  * Element renderer interface for product card elements.

package/dist/src/services/templateLibraryApi.d.ts

@@ -3,5 +3,5 @@ export declare const useTemplateLibraryApi: () => {
     getCategories: () => Promise<Category[]>;
     checkTemplateNameAvailability: (value: string) => Promise<boolean>;
     createCategory: (category: string) => Promise<string>;
-    createTemplate: () => Promise<void>;
+    createTemplate: () => Promise<boolean>;
 };

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;
@@ -121,6 +125,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;
@@ -220,6 +228,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;
@@ -319,6 +331,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;
@@ -418,6 +434,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;
@@ -517,6 +537,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;
@@ -616,6 +640,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;
@@ -715,6 +743,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;
@@ -814,6 +846,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;
@@ -913,6 +949,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;
@@ -1012,6 +1052,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;
@@ -1111,6 +1155,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;
@@ -1210,6 +1258,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;
@@ -1309,6 +1361,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;
@@ -1408,6 +1464,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;
@@ -1507,6 +1567,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;
@@ -1606,6 +1670,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;
@@ -1705,6 +1773,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/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/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/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
 };