@maizzle/framework 6.0.0-rc.13 → 6.0.0-rc.14

package/dist/components/Section.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, createStaticVNode, useAttrs } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels } from './utils.ts'
 
 defineOptions({ inheritAttrs: false })
 
@@ -12,11 +12,14 @@ const props = defineProps({
    *
    * Applied as `max-width` on the div and as `width` on the MSO table.
    *
-   * @default '100%'
+   * When not set, the MSO table width is auto-derived from a width
+   * utility class (e.g. `max-w-md`) or inline style (`max-width`/
+   * `width`) on the component, after CSS inlining. Falls back to
+   * `100%` when no width source is provided.
    */
   width: {
     type: [String, Number],
-    default: '100%'
+    default: null
   },
   /**
    * Inline CSS applied only to the MSO `<td>` element.
@@ -31,8 +34,6 @@ const props = defineProps({
   }
 })
 
-const hasCustomWidth = computed(() => props.width !== '100%')
-
 const userStyle = computed(() => {
   const s = attrs.style
   if (!s) return ''
@@ -41,9 +42,17 @@ const userStyle = computed(() => {
     : String(s)
 })
 
+const userHasWidth = computed(() => {
+  const cls = (attrs.class as string) ?? ''
+  return hasWidthUtility(cls) || hasWidthInStyle(userStyle.value)
+})
+
+const useMarker = props.width == null && userHasWidth.value
+const msoId = useMarker ? nextId('s') : null
+
 const divStyle = computed(() => {
   const parts: string[] = []
-  if (hasCustomWidth.value) parts.push(`max-width: ${normalizeToPixels(props.width)}`)
+  if (props.width != null) parts.push(`max-width: ${normalizeToPixels(props.width)}`)
   if (userStyle.value) parts.push(userStyle.value)
   return parts.length ? parts.join('; ') : undefined
 })
@@ -60,10 +69,22 @@ const tdStyles = computed(() => {
   return parts.length ? parts.join('; ') : ''
 })
 
+const msoWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  if (useMarker) return `__MAIZZLE_MSOW_${msoId}__`
+  return '100%'
+})
+
+const colWidthSource = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  if (userHasWidth.value) return ''
+  return null
+})
+
 const MsoBefore = () => {
   const tdStyle = tdStyles.value ? ` style="${tdStyles.value}"` : ''
   return createStaticVNode(
-    `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${normalizeToPixels(props.width)}"><tr><td${tdStyle}><![endif]-->`,
+    `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}"><tr><td${tdStyle}><![endif]-->`,
     1
   )
 }
@@ -76,7 +97,13 @@ const MsoAfter = () => createStaticVNode(
 
 <template>
   <MsoBefore />
-  <div v-bind="restAttrs" :style="divStyle">
+  <div
+    v-bind="restAttrs"
+    :style="divStyle"
+    :data-maizzle-msow-id="msoId"
+    :data-maizzle-msow-fallback="useMarker ? '100%' : null"
+    :data-maizzle-cw="colWidthSource"
+  >
     <slot />
   </div>
   <MsoAfter />

package/dist/components/utils.d.mts

@@ -1,5 +1,18 @@
 //#region src/components/utils.d.ts
 declare function normalizeToPixels(value: string | number): string;
+/**
+ * Module-scoped sequential ID generator. Used by components to mint
+ * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+ *
+ * Must live here (not inside `<script setup>`) because Vue compiles
+ * `<script setup>` into the component's `setup()` function — any
+ * `let counter = 0` there resets per instance, causing id collisions.
+ */
+declare function nextId(prefix: string): string;
+declare function hasWidthUtility(classStr: string): boolean;
+declare function hasWidthInStyle(styleStr: string): boolean;
+declare function hasHeightUtility(classStr: string): boolean;
+declare function hasHeightInStyle(styleStr: string): boolean;
 //#endregion
-export { normalizeToPixels };
+export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels };
 //# sourceMappingURL=utils.d.mts.map

package/dist/components/utils.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.mts","names":[],"sources":["../../src/components/utils.ts"],"mappings":";iBAAgB,iBAAA,CAAkB,KAAA"}
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../../src/components/utils.ts"],"mappings":";iBAAgB,iBAAA,CAAkB,KAAA;AAAlC;;;;;AAiBA;;;AAjBA,iBAiBgB,MAAA,CAAO,MAAA;AAAA,iBAKP,eAAA,CAAgB,QAAA;AAAA,iBAQhB,eAAA,CAAgB,QAAA;AAAA,iBAIhB,gBAAA,CAAiB,QAAA;AAAA,iBAQjB,gBAAA,CAAiB,QAAA"}

package/dist/components/utils.mjs

@@ -3,7 +3,38 @@ function normalizeToPixels(value) {
 	if (typeof value === "number" || Number.isFinite(Number(value))) return `${value}px`;
 	return value;
 }
+const counters = {};
+/**
+* Module-scoped sequential ID generator. Used by components to mint
+* unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+*
+* Must live here (not inside `<script setup>`) because Vue compiles
+* `<script setup>` into the component's `setup()` function — any
+* `let counter = 0` there resets per instance, causing id collisions.
+*/
+function nextId(prefix) {
+	counters[prefix] = (counters[prefix] ?? 0) + 1;
+	return `${prefix}${counters[prefix]}`;
+}
+function hasWidthUtility(classStr) {
+	return classStr.split(/\s+/).some((c) => {
+		const clean = (c.split(":").pop() ?? "").replace(/^!/, "");
+		return /^(w-|max-w-|min-w-)/.test(clean);
+	});
+}
+function hasWidthInStyle(styleStr) {
+	return /(?:^|;\s*)(?:max-width|width)\s*:/i.test(styleStr);
+}
+function hasHeightUtility(classStr) {
+	return classStr.split(/\s+/).some((c) => {
+		const clean = (c.split(":").pop() ?? "").replace(/^!/, "");
+		return /^(h-|max-h-|min-h-)/.test(clean);
+	});
+}
+function hasHeightInStyle(styleStr) {
+	return /(?:^|;\s*)(?:max-height|height)\s*:/i.test(styleStr);
+}
 
 //#endregion
-export { normalizeToPixels };
+export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels };
 //# sourceMappingURL=utils.mjs.map

package/dist/components/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/components/utils.ts"],"sourcesContent":["export function normalizeToPixels(value: string | number): string {\n  if (typeof value === 'number' || Number.isFinite(Number(value))) {\n    return `${value}px`\n  }\n  return value\n}\n"],"mappings":";AAAA,SAAgB,kBAAkB,OAAgC;AAChE,KAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,MAAM,CAAC,CAC7D,QAAO,GAAG,MAAM;AAElB,QAAO"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/components/utils.ts"],"sourcesContent":["export function normalizeToPixels(value: string | number): string {\n  if (typeof value === 'number' || Number.isFinite(Number(value))) {\n    return `${value}px`\n  }\n  return value\n}\n\nconst counters: Record<string, number> = {}\n\n/**\n * Module-scoped sequential ID generator. Used by components to mint\n * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.\n *\n * Must live here (not inside `<script setup>`) because Vue compiles\n * `<script setup>` into the component's `setup()` function — any\n * `let counter = 0` there resets per instance, causing id collisions.\n */\nexport function nextId(prefix: string): string {\n  counters[prefix] = (counters[prefix] ?? 0) + 1\n  return `${prefix}${counters[prefix]}`\n}\n\nexport function hasWidthUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(w-|max-w-|min-w-)/.test(clean)\n  })\n}\n\nexport function hasWidthInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-width|width)\\s*:/i.test(styleStr)\n}\n\nexport function hasHeightUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(h-|max-h-|min-h-)/.test(clean)\n  })\n}\n\nexport function hasHeightInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-height|height)\\s*:/i.test(styleStr)\n}\n"],"mappings":";AAAA,SAAgB,kBAAkB,OAAgC;AAChE,KAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,MAAM,CAAC,CAC7D,QAAO,GAAG,MAAM;AAElB,QAAO;;AAGT,MAAM,WAAmC,EAAE;;;;;;;;;AAU3C,SAAgB,OAAO,QAAwB;AAC7C,UAAS,WAAW,SAAS,WAAW,KAAK;AAC7C,QAAO,GAAG,SAAS,SAAS;;AAG9B,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,qCAAqC,KAAK,SAAS;;AAG5D,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,uCAAuC,KAAK,SAAS"}

package/dist/components/utils.ts

@@ -4,3 +4,42 @@ export function normalizeToPixels(value: string | number): string {
   }
   return value
 }
+
+const counters: Record<string, number> = {}
+
+/**
+ * Module-scoped sequential ID generator. Used by components to mint
+ * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.
+ *
+ * Must live here (not inside `<script setup>`) because Vue compiles
+ * `<script setup>` into the component's `setup()` function — any
+ * `let counter = 0` there resets per instance, causing id collisions.
+ */
+export function nextId(prefix: string): string {
+  counters[prefix] = (counters[prefix] ?? 0) + 1
+  return `${prefix}${counters[prefix]}`
+}
+
+export function hasWidthUtility(classStr: string): boolean {
+  return classStr.split(/\s+/).some((c) => {
+    const utility = c.split(':').pop() ?? ''
+    const clean = utility.replace(/^!/, '')
+    return /^(w-|max-w-|min-w-)/.test(clean)
+  })
+}
+
+export function hasWidthInStyle(styleStr: string): boolean {
+  return /(?:^|;\s*)(?:max-width|width)\s*:/i.test(styleStr)
+}
+
+export function hasHeightUtility(classStr: string): boolean {
+  return classStr.split(/\s+/).some((c) => {
+    const utility = c.split(':').pop() ?? ''
+    const clean = utility.replace(/^!/, '')
+    return /^(h-|max-h-|min-h-)/.test(clean)
+  })
+}
+
+export function hasHeightInStyle(styleStr: string): boolean {
+  return /(?:^|;\s*)(?:max-height|height)\s*:/i.test(styleStr)
+}

package/dist/composables/renderContext.d.mts

@@ -4,6 +4,12 @@ import { UsePlaintextOptions } from "./usePlaintext.mjs";
 import { InjectionKey } from "vue";
 
 //#region src/composables/renderContext.d.ts
+interface FontRegistration {
+  family: string;
+  slug: string;
+  declaration: string;
+  url: string;
+}
 interface RenderContext {
   doctype?: string;
   preheader?: {
@@ -17,8 +23,9 @@ interface RenderContext {
     handler: EventMap[EventName];
   }>;
   plaintext?: UsePlaintextOptions;
+  fonts?: FontRegistration[];
 }
 declare const RenderContextKey: InjectionKey<RenderContext>;
 //#endregion
-export { RenderContext, RenderContextKey };
+export { FontRegistration, RenderContext, RenderContextKey };
 //# sourceMappingURL=renderContext.d.mts.map

package/dist/composables/renderContext.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"renderContext.d.mts","names":[],"sources":["../../src/composables/renderContext.ts"],"mappings":";;;;;;UAKiB,aAAA;EACf,OAAA;EACA,SAAA;IAAc,IAAA;IAAc,WAAA;IAAqB,QAAA;EAAA;EACjD,SAAA,GAAY,aAAA;EACZ,gBAAA,EAAkB,KAAA;IAAQ,IAAA,EAAM,SAAA;IAAW,OAAA,EAAS,QAAA,CAAS,SAAA;EAAA;EAC7D,SAAA,GAAY,mBAAA;AAAA;AAAA,cAGD,gBAAA,EAAkB,YAAA,CAAa,aAAA"}
+{"version":3,"file":"renderContext.d.mts","names":[],"sources":["../../src/composables/renderContext.ts"],"mappings":";;;;;;UAKiB,gBAAA;EACf,MAAA;EACA,IAAA;EACA,WAAA;EACA,GAAA;AAAA;AAAA,UAGe,aAAA;EACf,OAAA;EACA,SAAA;IAAc,IAAA;IAAc,WAAA;IAAqB,QAAA;EAAA;EACjD,SAAA,GAAY,aAAA;EACZ,gBAAA,EAAkB,KAAA;IAAQ,IAAA,EAAM,SAAA;IAAW,OAAA,EAAS,QAAA,CAAS,SAAA;EAAA;EAC7D,SAAA,GAAY,mBAAA;EACZ,KAAA,GAAQ,gBAAA;AAAA;AAAA,cAGG,gBAAA,EAAkB,YAAA,CAAa,aAAA"}

package/dist/composables/renderContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderContext.mjs","names":[],"sources":["../../src/composables/renderContext.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { MaizzleConfig } from '../types/index.ts'\nimport type { EventName, EventMap } from '../events/index.ts'\nimport type { UsePlaintextOptions } from './usePlaintext.ts'\n\nexport interface RenderContext {\n  doctype?: string\n  preheader?: { text: string; fillerCount: number; shyCount: number }\n  sfcConfig?: MaizzleConfig\n  sfcEventHandlers: Array<{ name: EventName; handler: EventMap[EventName] }>\n  plaintext?: UsePlaintextOptions\n}\n\nexport const RenderContextKey: InjectionKey<RenderContext> = Symbol('RenderContext')\n"],"mappings":";AAaA,MAAa,mBAAgD,OAAO,gBAAgB"}
+{"version":3,"file":"renderContext.mjs","names":[],"sources":["../../src/composables/renderContext.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { MaizzleConfig } from '../types/index.ts'\nimport type { EventName, EventMap } from '../events/index.ts'\nimport type { UsePlaintextOptions } from './usePlaintext.ts'\n\nexport interface FontRegistration {\n  family: string\n  slug: string\n  declaration: string\n  url: string\n}\n\nexport interface RenderContext {\n  doctype?: string\n  preheader?: { text: string; fillerCount: number; shyCount: number }\n  sfcConfig?: MaizzleConfig\n  sfcEventHandlers: Array<{ name: EventName; handler: EventMap[EventName] }>\n  plaintext?: UsePlaintextOptions\n  fonts?: FontRegistration[]\n}\n\nexport const RenderContextKey: InjectionKey<RenderContext> = Symbol('RenderContext')\n"],"mappings":";AAqBA,MAAa,mBAAgD,OAAO,gBAAgB"}

package/dist/composables/useFont.d.mts

@@ -0,0 +1,50 @@
+//#region src/composables/useFont.d.ts
+type FontProvider = 'google' | 'bunny';
+interface UseFontOptions {
+  /**
+   * A single font family name, e.g. `"Roboto"` or `"Open Sans"`.
+   *
+   * For fallback fonts, use the `fallback` option instead of a
+   * comma-separated list here.
+   */
+  family: string;
+  /** CSS fallback list appended to the `font-family` declaration. */
+  fallback?: string;
+  /**
+   * Font provider used to build the stylesheet URL when `url` is omitted.
+   * Bunny Fonts is a drop-in, privacy-friendly Google Fonts mirror.
+   * @default 'google'
+   */
+  provider?: FontProvider;
+  /**
+   * Stylesheet URL. When provided, used as-is for the `<link href>`.
+   * When omitted, a URL is built from `provider`, `family`, `weights`,
+   * `display` and `styles`.
+   */
+  url?: string;
+  /** Font weights to load. Ignored when `url` is provided. */
+  weights?: number[];
+  /** `font-display` value. Ignored when `url` is provided. */
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+  /** Font styles to load. Ignored when `url` is provided. */
+  styles?: Array<'normal' | 'italic'>;
+}
+/**
+ * Register a font for the current email template.
+ *
+ * Builds a Google Fonts stylesheet URL from `family`/`weights`/`display`/`styles`
+ * (or uses `url` as-is). The renderer injects a `<link>` tag into `<head>`
+ * and merges `--font-{slug}` declarations into the template's existing
+ * `@import "tailwindcss"` style block so a `font-{slug}` utility class
+ * is generated. If no Tailwind import is found, falls back to a `:root`
+ * declaration so the CSS variable is still available.
+ *
+ * Usage in SFC <script setup>:
+ * ```ts
+ * useFont({ family: 'Roboto', fallback: 'Verdana, sans-serif', weights: [400, 600] })
+ * ```
+ */
+declare function useFont(options: UseFontOptions): void;
+//#endregion
+export { FontProvider, UseFontOptions, useFont };
+//# sourceMappingURL=useFont.d.mts.map

package/dist/composables/useFont.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFont.d.mts","names":[],"sources":["../../src/composables/useFont.ts"],"mappings":";KA8CY,YAAA;AAAA,UAEK,cAAA;EAFO;;;;AAExB;;EAOE,MAAA;EAoBc;EAlBd,QAAA;EAAA;;;;;EAMA,QAAA,GAAW,YAAA;EAYX;;;;AA+CF;EArDE,GAAA;;EAEA,OAAA;EAmD6C;EAjD7C,OAAA;;EAEA,MAAA,GAAS,KAAA;AAAA;;;;;;;;;;;;;;;;iBA+CK,OAAA,CAAQ,OAAA,EAAS,cAAA"}

package/dist/composables/useFont.mjs

@@ -0,0 +1,93 @@
+import { RenderContextKey } from "./renderContext.mjs";
+import { inject } from "vue";
+
+//#region src/composables/useFont.ts
+const FAMILY_CATEGORIES = {
+	"Roboto": "sans",
+	"Open Sans": "sans",
+	"Inter": "sans",
+	"Lato": "sans",
+	"Montserrat": "sans",
+	"Merriweather": "serif",
+	"Playfair Display": "serif",
+	"Lora": "serif",
+	"PT Serif": "serif",
+	"Noto Serif": "serif",
+	"Oswald": "display",
+	"Bebas Neue": "display",
+	"Anton": "display",
+	"Lobster": "display",
+	"Pacifico": "display",
+	"Dancing Script": "handwriting",
+	"Caveat": "handwriting",
+	"Shadows Into Light": "handwriting",
+	"Satisfy": "handwriting",
+	"Great Vibes": "handwriting",
+	"Roboto Mono": "mono",
+	"Source Code Pro": "mono",
+	"JetBrains Mono": "mono",
+	"Fira Code": "mono",
+	"Inconsolata": "mono"
+};
+const DEFAULT_FALLBACKS = {
+	sans: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+	serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
+	mono: "ui-monospace, Menlo, Consolas, monospace",
+	display: "Impact, \"Arial Black\", system-ui, sans-serif",
+	handwriting: "\"Segoe Script\", \"Brush Script MT\", cursive"
+};
+const PROVIDER_BASE_URL = {
+	google: "https://fonts.googleapis.com/css2",
+	bunny: "https://fonts.bunny.net/css2"
+};
+function slugify(family) {
+	return family.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+}
+function buildProviderUrl(opts) {
+	const familyParam = opts.family.trim().replace(/\s+/g, "+");
+	const weights = [...opts.weights].sort((a, b) => a - b);
+	const hasItalic = opts.styles.includes("italic");
+	const hasNormal = opts.styles.includes("normal");
+	const axis = hasItalic ? `:ital,wght@${weights.flatMap((w) => [...hasNormal ? [`0,${w}`] : [], `1,${w}`]).join(";")}` : `:wght@${weights.join(";")}`;
+	return `${PROVIDER_BASE_URL[opts.provider]}?family=${familyParam}${axis}&display=${opts.display}`;
+}
+/**
+* Register a font for the current email template.
+*
+* Builds a Google Fonts stylesheet URL from `family`/`weights`/`display`/`styles`
+* (or uses `url` as-is). The renderer injects a `<link>` tag into `<head>`
+* and merges `--font-{slug}` declarations into the template's existing
+* `@import "tailwindcss"` style block so a `font-{slug}` utility class
+* is generated. If no Tailwind import is found, falls back to a `:root`
+* declaration so the CSS variable is still available.
+*
+* Usage in SFC <script setup>:
+* ```ts
+* useFont({ family: 'Roboto', fallback: 'Verdana, sans-serif', weights: [400, 600] })
+* ```
+*/
+function useFont(options) {
+	const ctx = inject(RenderContextKey);
+	if (!ctx) return;
+	ctx.fonts = ctx.fonts ?? [];
+	if (ctx.fonts.some((f) => f.family === options.family)) return;
+	const url = options.url ?? buildProviderUrl({
+		family: options.family,
+		provider: options.provider ?? "google",
+		weights: options.weights ?? [400],
+		display: options.display ?? "swap",
+		styles: options.styles ?? ["normal"]
+	});
+	const fallback = options.fallback ?? DEFAULT_FALLBACKS[FAMILY_CATEGORIES[options.family] ?? "sans"];
+	const declaration = `${/\s/.test(options.family) ? `"${options.family}"` : options.family}, ${fallback}`;
+	ctx.fonts.push({
+		family: options.family,
+		slug: slugify(options.family),
+		declaration,
+		url
+	});
+}
+
+//#endregion
+export { useFont };
+//# sourceMappingURL=useFont.mjs.map

package/dist/composables/useFont.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFont.mjs","names":[],"sources":["../../src/composables/useFont.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { RenderContextKey } from './renderContext.ts'\n\ntype FontCategory = 'sans' | 'serif' | 'mono' | 'display' | 'handwriting'\n\nconst FAMILY_CATEGORIES: Record<string, FontCategory> = {\n  // Sans-serif\n  'Roboto': 'sans',\n  'Open Sans': 'sans',\n  'Inter': 'sans',\n  'Lato': 'sans',\n  'Montserrat': 'sans',\n  // Serif\n  'Merriweather': 'serif',\n  'Playfair Display': 'serif',\n  'Lora': 'serif',\n  'PT Serif': 'serif',\n  'Noto Serif': 'serif',\n  // Display\n  'Oswald': 'display',\n  'Bebas Neue': 'display',\n  'Anton': 'display',\n  'Lobster': 'display',\n  'Pacifico': 'display',\n  // Handwriting\n  'Dancing Script': 'handwriting',\n  'Caveat': 'handwriting',\n  'Shadows Into Light': 'handwriting',\n  'Satisfy': 'handwriting',\n  'Great Vibes': 'handwriting',\n  // Monospace\n  'Roboto Mono': 'mono',\n  'Source Code Pro': 'mono',\n  'JetBrains Mono': 'mono',\n  'Fira Code': 'mono',\n  'Inconsolata': 'mono',\n}\n\nconst DEFAULT_FALLBACKS: Record<FontCategory, string> = {\n  sans: 'ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif',\n  serif: 'ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif',\n  mono: 'ui-monospace, Menlo, Consolas, monospace',\n  display: 'Impact, \"Arial Black\", system-ui, sans-serif',\n  handwriting: '\"Segoe Script\", \"Brush Script MT\", cursive',\n}\n\nexport type FontProvider = 'google' | 'bunny'\n\nexport interface UseFontOptions {\n  /**\n   * A single font family name, e.g. `\"Roboto\"` or `\"Open Sans\"`.\n   *\n   * For fallback fonts, use the `fallback` option instead of a\n   * comma-separated list here.\n   */\n  family: string\n  /** CSS fallback list appended to the `font-family` declaration. */\n  fallback?: string\n  /**\n   * Font provider used to build the stylesheet URL when `url` is omitted.\n   * Bunny Fonts is a drop-in, privacy-friendly Google Fonts mirror.\n   * @default 'google'\n   */\n  provider?: FontProvider\n  /**\n   * Stylesheet URL. When provided, used as-is for the `<link href>`.\n   * When omitted, a URL is built from `provider`, `family`, `weights`,\n   * `display` and `styles`.\n   */\n  url?: string\n  /** Font weights to load. Ignored when `url` is provided. */\n  weights?: number[]\n  /** `font-display` value. Ignored when `url` is provided. */\n  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'\n  /** Font styles to load. Ignored when `url` is provided. */\n  styles?: Array<'normal' | 'italic'>\n}\n\nconst PROVIDER_BASE_URL: Record<FontProvider, string> = {\n  google: 'https://fonts.googleapis.com/css2',\n  bunny: 'https://fonts.bunny.net/css2',\n}\n\nfunction slugify(family: string): string {\n  return family\n    .trim()\n    .toLowerCase()\n    .replace(/\\s+/g, '-')\n    .replace(/[^a-z0-9-]/g, '')\n}\n\nfunction buildProviderUrl(opts: Required<Omit<UseFontOptions, 'url' | 'fallback'>>): string {\n  const familyParam = opts.family.trim().replace(/\\s+/g, '+')\n  const weights = [...opts.weights].sort((a, b) => a - b)\n  const hasItalic = opts.styles.includes('italic')\n  const hasNormal = opts.styles.includes('normal')\n\n  const axis = hasItalic\n    ? `:ital,wght@${weights.flatMap(w => [\n        ...(hasNormal ? [`0,${w}`] : []),\n        `1,${w}`,\n      ]).join(';')}`\n    : `:wght@${weights.join(';')}`\n\n  return `${PROVIDER_BASE_URL[opts.provider]}?family=${familyParam}${axis}&display=${opts.display}`\n}\n\n/**\n * Register a font for the current email template.\n *\n * Builds a Google Fonts stylesheet URL from `family`/`weights`/`display`/`styles`\n * (or uses `url` as-is). The renderer injects a `<link>` tag into `<head>`\n * and merges `--font-{slug}` declarations into the template's existing\n * `@import \"tailwindcss\"` style block so a `font-{slug}` utility class\n * is generated. If no Tailwind import is found, falls back to a `:root`\n * declaration so the CSS variable is still available.\n *\n * Usage in SFC <script setup>:\n * ```ts\n * useFont({ family: 'Roboto', fallback: 'Verdana, sans-serif', weights: [400, 600] })\n * ```\n */\nexport function useFont(options: UseFontOptions): void {\n  const ctx = inject(RenderContextKey)\n  if (!ctx) return\n\n  ctx.fonts = ctx.fonts ?? []\n  if (ctx.fonts.some(f => f.family === options.family)) return\n\n  const url = options.url ?? buildProviderUrl({\n    family: options.family,\n    provider: options.provider ?? 'google',\n    weights: options.weights ?? [400],\n    display: options.display ?? 'swap',\n    styles: options.styles ?? ['normal'],\n  })\n\n  const fallback = options.fallback\n    ?? DEFAULT_FALLBACKS[FAMILY_CATEGORIES[options.family] ?? 'sans']\n  const quoted = /\\s/.test(options.family) ? `\"${options.family}\"` : options.family\n  const declaration = `${quoted}, ${fallback}`\n\n  ctx.fonts.push({\n    family: options.family,\n    slug: slugify(options.family),\n    declaration,\n    url,\n  })\n}\n"],"mappings":";;;;AAKA,MAAM,oBAAkD;CAEtD,UAAU;CACV,aAAa;CACb,SAAS;CACT,QAAQ;CACR,cAAc;CAEd,gBAAgB;CAChB,oBAAoB;CACpB,QAAQ;CACR,YAAY;CACZ,cAAc;CAEd,UAAU;CACV,cAAc;CACd,SAAS;CACT,WAAW;CACX,YAAY;CAEZ,kBAAkB;CAClB,UAAU;CACV,sBAAsB;CACtB,WAAW;CACX,eAAe;CAEf,eAAe;CACf,mBAAmB;CACnB,kBAAkB;CAClB,aAAa;CACb,eAAe;CAChB;AAED,MAAM,oBAAkD;CACtD,MAAM;CACN,OAAO;CACP,MAAM;CACN,SAAS;CACT,aAAa;CACd;AAkCD,MAAM,oBAAkD;CACtD,QAAQ;CACR,OAAO;CACR;AAED,SAAS,QAAQ,QAAwB;AACvC,QAAO,OACJ,MAAM,CACN,aAAa,CACb,QAAQ,QAAQ,IAAI,CACpB,QAAQ,eAAe,GAAG;;AAG/B,SAAS,iBAAiB,MAAkE;CAC1F,MAAM,cAAc,KAAK,OAAO,MAAM,CAAC,QAAQ,QAAQ,IAAI;CAC3D,MAAM,UAAU,CAAC,GAAG,KAAK,QAAQ,CAAC,MAAM,GAAG,MAAM,IAAI,EAAE;CACvD,MAAM,YAAY,KAAK,OAAO,SAAS,SAAS;CAChD,MAAM,YAAY,KAAK,OAAO,SAAS,SAAS;CAEhD,MAAM,OAAO,YACT,cAAc,QAAQ,SAAQ,MAAK,CACjC,GAAI,YAAY,CAAC,KAAK,IAAI,GAAG,EAAE,EAC/B,KAAK,IACN,CAAC,CAAC,KAAK,IAAI,KACZ,SAAS,QAAQ,KAAK,IAAI;AAE9B,QAAO,GAAG,kBAAkB,KAAK,UAAU,UAAU,cAAc,KAAK,WAAW,KAAK;;;;;;;;;;;;;;;;;AAkB1F,SAAgB,QAAQ,SAA+B;CACrD,MAAM,MAAM,OAAO,iBAAiB;AACpC,KAAI,CAAC,IAAK;AAEV,KAAI,QAAQ,IAAI,SAAS,EAAE;AAC3B,KAAI,IAAI,MAAM,MAAK,MAAK,EAAE,WAAW,QAAQ,OAAO,CAAE;CAEtD,MAAM,MAAM,QAAQ,OAAO,iBAAiB;EAC1C,QAAQ,QAAQ;EAChB,UAAU,QAAQ,YAAY;EAC9B,SAAS,QAAQ,WAAW,CAAC,IAAI;EACjC,SAAS,QAAQ,WAAW;EAC5B,QAAQ,QAAQ,UAAU,CAAC,SAAS;EACrC,CAAC;CAEF,MAAM,WAAW,QAAQ,YACpB,kBAAkB,kBAAkB,QAAQ,WAAW;CAE5D,MAAM,cAAc,GADL,KAAK,KAAK,QAAQ,OAAO,GAAG,IAAI,QAAQ,OAAO,KAAK,QAAQ,OAC7C,IAAI;AAElC,KAAI,MAAM,KAAK;EACb,QAAQ,QAAQ;EAChB,MAAM,QAAQ,QAAQ,OAAO;EAC7B;EACA;EACD,CAAC"}

package/dist/index.d.mts

@@ -5,6 +5,7 @@ import { usePlaintext } from "./composables/usePlaintext.mjs";
 import { useConfig } from "./composables/useConfig.mjs";
 import { useDoctype } from "./composables/useDoctype.mjs";
 import { useEvent } from "./composables/useEvent.mjs";
+import { useFont } from "./composables/useFont.mjs";
 import { resolveConfig } from "./config/index.mjs";
 import { maizzle } from "./plugin.mjs";
 import { CreateRendererOptions, RenderedTemplate, Renderer, createRenderer } from "./render/createRenderer.mjs";
@@ -28,4 +29,4 @@ import { replaceStrings } from "./transformers/replaceStrings.mjs";
 import { format } from "./transformers/format.mjs";
 import { minify } from "./transformers/minify.mjs";
 import { useHead } from "@unhead/vue";
-export { type AttributesConfig, type CreateRendererOptions, type CssConfig, type EntitiesConfig, type FilterFunction, type FiltersConfig, type HtmlConfig, type MaizzleConfig, type RenderOptions, type RenderResult, type RenderedTemplate, type Renderer, type UrlConfig, type UrlQuery, type UrlQueryOptions, addAttributes, attributeToStyle, base, build, createPlaintext, createRenderer, defineConfig, entities, filters, format, inlineCSS, inlineLink, maizzle, minify, removeAttributes, purgeCSS as removeUnusedCSS, render, replaceStrings, resolveConfig, safeClassNames, serve, shorthandCSS, sixHex, urlQuery, useConfig, useDoctype, useEvent, useHead, usePlaintext };
+export { type AttributesConfig, type CreateRendererOptions, type CssConfig, type EntitiesConfig, type FilterFunction, type FiltersConfig, type HtmlConfig, type MaizzleConfig, type RenderOptions, type RenderResult, type RenderedTemplate, type Renderer, type UrlConfig, type UrlQuery, type UrlQueryOptions, addAttributes, attributeToStyle, base, build, createPlaintext, createRenderer, defineConfig, entities, filters, format, inlineCSS, inlineLink, maizzle, minify, removeAttributes, purgeCSS as removeUnusedCSS, render, replaceStrings, resolveConfig, safeClassNames, serve, shorthandCSS, sixHex, urlQuery, useConfig, useDoctype, useEvent, useFont, useHead, usePlaintext };

package/dist/index.mjs

@@ -25,7 +25,8 @@ import { render } from "./render/index.mjs";
 import { serve } from "./serve.mjs";
 import { useDoctype } from "./composables/useDoctype.mjs";
 import { useEvent } from "./composables/useEvent.mjs";
+import { useFont } from "./composables/useFont.mjs";
 import { usePlaintext } from "./composables/usePlaintext.mjs";
 import { useHead } from "@unhead/vue";
 
-export { addAttributes, attributeToStyle, base, build, createPlaintext, createRenderer, defineConfig, entities, filters, format, inlineCSS, inlineLink, maizzle, minify, removeAttributes, purgeCSS as removeUnusedCSS, render, replaceStrings, resolveConfig, safeClassNames, serve, shorthandCSS, sixHex, urlQuery, useConfig, useDoctype, useEvent, useHead, usePlaintext };
+export { addAttributes, attributeToStyle, base, build, createPlaintext, createRenderer, defineConfig, entities, filters, format, inlineCSS, inlineLink, maizzle, minify, removeAttributes, purgeCSS as removeUnusedCSS, render, replaceStrings, resolveConfig, safeClassNames, serve, shorthandCSS, sixHex, urlQuery, useConfig, useDoctype, useEvent, useFont, useHead, usePlaintext };

package/dist/plugins/postcss/quoteFontFamilies.d.mts

@@ -0,0 +1,13 @@
+import { Plugin } from "postcss";
+
+//#region src/plugins/postcss/quoteFontFamilies.d.ts
+/**
+ * Re-quote multi-word font-family identifiers that lightningcss "optimised"
+ * by removing quotes. CSS allows space-separated identifiers as a family
+ * name, but Google Fonts (and most style guides) prescribe quoted form.
+ */
+declare function quoteFontFamilies(): Plugin;
+declare const postcss = true;
+//#endregion
+export { postcss, quoteFontFamilies };
+//# sourceMappingURL=quoteFontFamilies.d.mts.map

package/dist/plugins/postcss/quoteFontFamilies.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quoteFontFamilies.d.mts","names":[],"sources":["../../../src/plugins/postcss/quoteFontFamilies.ts"],"mappings":";;;;;AA+CA;;;iBAAgB,iBAAA,CAAA,GAAqB,MAAA;AAAA,cA6BxB,OAAA"}

package/dist/plugins/postcss/quoteFontFamilies.mjs

@@ -0,0 +1,84 @@
+//#region src/plugins/postcss/quoteFontFamilies.ts
+const GENERIC_KEYWORDS = new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong",
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer"
+]);
+/**
+* Split a font-family value on top-level commas only, preserving quoted
+* strings and parenthesised groups like `var(...)`.
+*/
+function splitFamilies(value) {
+	const parts = [];
+	let depth = 0;
+	let quote = null;
+	let start = 0;
+	for (let i = 0; i < value.length; i++) {
+		const ch = value[i];
+		if (quote) {
+			if (ch === "\\") {
+				i++;
+				continue;
+			}
+			if (ch === quote) quote = null;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			quote = ch;
+			continue;
+		}
+		if (ch === "(") depth++;
+		else if (ch === ")") depth--;
+		else if (ch === "," && depth === 0) {
+			parts.push(value.slice(start, i).trim());
+			start = i + 1;
+		}
+	}
+	parts.push(value.slice(start).trim());
+	return parts.filter(Boolean);
+}
+/**
+* Re-quote multi-word font-family identifiers that lightningcss "optimised"
+* by removing quotes. CSS allows space-separated identifiers as a family
+* name, but Google Fonts (and most style guides) prescribe quoted form.
+*/
+function quoteFontFamilies() {
+	return {
+		postcssPlugin: "quote-font-families",
+		Declaration: { "font-family": (decl) => {
+			const value = decl.value;
+			if (!value || !/\s/.test(value)) return;
+			const families = splitFamilies(value);
+			let changed = false;
+			const fixed = families.map((token) => {
+				if (token.startsWith("\"") || token.startsWith("'")) return token;
+				if (token.startsWith("var(")) return token;
+				if (!token.includes(" ")) return token;
+				if (GENERIC_KEYWORDS.has(token.toLowerCase())) return token;
+				changed = true;
+				return `"${token}"`;
+			});
+			if (changed) decl.value = fixed.join(", ");
+		} }
+	};
+}
+const postcss = true;
+
+//#endregion
+export { postcss, quoteFontFamilies };
+//# sourceMappingURL=quoteFontFamilies.mjs.map

package/dist/plugins/postcss/quoteFontFamilies.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quoteFontFamilies.mjs","names":[],"sources":["../../../src/plugins/postcss/quoteFontFamilies.ts"],"sourcesContent":["import type { Plugin } from 'postcss'\n\nconst GENERIC_KEYWORDS = new Set([\n  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy',\n  'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded',\n  'emoji', 'math', 'fangsong',\n  'inherit', 'initial', 'unset', 'revert', 'revert-layer',\n])\n\n/**\n * Split a font-family value on top-level commas only, preserving quoted\n * strings and parenthesised groups like `var(...)`.\n */\nfunction splitFamilies(value: string): string[] {\n  const parts: string[] = []\n  let depth = 0\n  let quote: string | null = null\n  let start = 0\n\n  for (let i = 0; i < value.length; i++) {\n    const ch = value[i]\n    if (quote) {\n      if (ch === '\\\\') { i++; continue }\n      if (ch === quote) quote = null\n      continue\n    }\n    if (ch === '\"' || ch === \"'\") {\n      quote = ch\n      continue\n    }\n    if (ch === '(') depth++\n    else if (ch === ')') depth--\n    else if (ch === ',' && depth === 0) {\n      parts.push(value.slice(start, i).trim())\n      start = i + 1\n    }\n  }\n\n  parts.push(value.slice(start).trim())\n  return parts.filter(Boolean)\n}\n\n/**\n * Re-quote multi-word font-family identifiers that lightningcss \"optimised\"\n * by removing quotes. CSS allows space-separated identifiers as a family\n * name, but Google Fonts (and most style guides) prescribe quoted form.\n */\nexport function quoteFontFamilies(): Plugin {\n  return {\n    postcssPlugin: 'quote-font-families',\n    Declaration: {\n      'font-family': (decl) => {\n        const value = decl.value\n        if (!value || !/\\s/.test(value)) return\n\n        const families = splitFamilies(value)\n        let changed = false\n\n        const fixed = families.map((token) => {\n          if (token.startsWith('\"') || token.startsWith(\"'\")) return token\n          if (token.startsWith('var(')) return token\n          if (!token.includes(' ')) return token\n          if (GENERIC_KEYWORDS.has(token.toLowerCase())) return token\n\n          changed = true\n          return `\"${token}\"`\n        })\n\n        if (changed) {\n          decl.value = fixed.join(', ')\n        }\n      },\n    },\n  }\n}\n\nexport const postcss = true\n"],"mappings":";AAEA,MAAM,mBAAmB,IAAI,IAAI;CAC/B;CAAS;CAAc;CAAa;CAAW;CAC/C;CAAa;CAAY;CAAiB;CAAgB;CAC1D;CAAS;CAAQ;CACjB;CAAW;CAAW;CAAS;CAAU;CAC1C,CAAC;;;;;AAMF,SAAS,cAAc,OAAyB;CAC9C,MAAM,QAAkB,EAAE;CAC1B,IAAI,QAAQ;CACZ,IAAI,QAAuB;CAC3B,IAAI,QAAQ;AAEZ,MAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;EACrC,MAAM,KAAK,MAAM;AACjB,MAAI,OAAO;AACT,OAAI,OAAO,MAAM;AAAE;AAAK;;AACxB,OAAI,OAAO,MAAO,SAAQ;AAC1B;;AAEF,MAAI,OAAO,QAAO,OAAO,KAAK;AAC5B,WAAQ;AACR;;AAEF,MAAI,OAAO,IAAK;WACP,OAAO,IAAK;WACZ,OAAO,OAAO,UAAU,GAAG;AAClC,SAAM,KAAK,MAAM,MAAM,OAAO,EAAE,CAAC,MAAM,CAAC;AACxC,WAAQ,IAAI;;;AAIhB,OAAM,KAAK,MAAM,MAAM,MAAM,CAAC,MAAM,CAAC;AACrC,QAAO,MAAM,OAAO,QAAQ;;;;;;;AAQ9B,SAAgB,oBAA4B;AAC1C,QAAO;EACL,eAAe;EACf,aAAa,EACX,gBAAgB,SAAS;GACvB,MAAM,QAAQ,KAAK;AACnB,OAAI,CAAC,SAAS,CAAC,KAAK,KAAK,MAAM,CAAE;GAEjC,MAAM,WAAW,cAAc,MAAM;GACrC,IAAI,UAAU;GAEd,MAAM,QAAQ,SAAS,KAAK,UAAU;AACpC,QAAI,MAAM,WAAW,KAAI,IAAI,MAAM,WAAW,IAAI,CAAE,QAAO;AAC3D,QAAI,MAAM,WAAW,OAAO,CAAE,QAAO;AACrC,QAAI,CAAC,MAAM,SAAS,IAAI,CAAE,QAAO;AACjC,QAAI,iBAAiB,IAAI,MAAM,aAAa,CAAC,CAAE,QAAO;AAEtD,cAAU;AACV,WAAO,IAAI,MAAM;KACjB;AAEF,OAAI,QACF,MAAK,QAAQ,MAAM,KAAK,KAAK;KAGlC;EACF;;AAGH,MAAa,UAAU"}

package/dist/render/createRenderer.mjs

@@ -236,10 +236,12 @@ async function createRenderer(options = {}) {
 			if (bodyAttrs) html = html.replace(/<body([^>]*)>/, `<body$1 ${bodyAttrs}>`);
 			if (bodyTagsOpen) html = html.replace(/<body([^>]*)>/, `<body$1>\n${bodyTagsOpen}`);
 			if (bodyTags) html = html.replace("</body>", `${bodyTags}\n</body>`);
-			if (ssrContext.teleports) {
+			const hasTeleports = ssrContext.teleports && Object.keys(ssrContext.teleports).length > 0;
+			const hasFonts = (renderContext.fonts?.length ?? 0) > 0;
+			if (hasTeleports || hasFonts) {
 				const { parse: parseDom, serialize: serializeDom, walk } = await import("../utils/ast/index.mjs");
 				let dom = parseDom(html);
-				for (const [rawTarget, content] of Object.entries(ssrContext.teleports)) {
+				if (hasTeleports) for (const [rawTarget, content] of Object.entries(ssrContext.teleports)) {
 					if (!content) continue;
 					const prepend = rawTarget.endsWith(":start");
 					const target = prepend ? rawTarget.slice(0, -6) : rawTarget;
@@ -253,6 +255,10 @@ async function createRenderer(options = {}) {
 						}
 					});
 				}
+				if (hasFonts) {
+					const { injectFonts } = await import("./injectFonts.mjs");
+					injectFonts(dom, renderContext.fonts, parseDom, walk);
+				}
 				html = serializeDom(dom);
 			}
 			if (renderContext.preheader) {