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

package/dist/components/Row.vue

@@ -1,6 +1,12 @@
+<script lang="ts">
+const warnedLocations = new Set<string>()
+</script>
+
 <script setup lang="ts">
-import { Comment, computed, createStaticVNode, inject, provide, useAttrs, useSlots, Fragment } from 'vue'
-import type { ComputedRef, VNode } from 'vue'
+import { Comment, Text, computed, createStaticVNode, provide, useAttrs, useSlots, Fragment } from 'vue'
+import type { VNode } from 'vue'
+import Column from './Column.vue'
+import { hasWidthInStyle, hasWidthUtility, normalizeToPixels } from './utils.ts'
 
 defineOptions({ inheritAttrs: false })
 
@@ -8,10 +14,12 @@ const attrs = useAttrs()
 
 const props = defineProps({
   /**
-   * Override the inherited container width.
+   * Explicit row width.
    *
-   * Used to calculate column widths. Inherited from the
-   * parent `Container` by default.
+   * Used as the width source for column min-width calculation.
+   * When not set, the nearest sized ancestor (`Container`, `Section`,
+   * outer `Column`, or this row's own width class/inline style) is
+   * used instead.
    */
   width: {
     type: [String, Number],
@@ -46,6 +54,41 @@ function countChildren(vnodes: VNode[]): number {
   return count
 }
 
+function hasColumnChild(vnodes: VNode[]): boolean {
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      if (hasColumnChild(vnode.children as VNode[])) return true
+    } else if (vnode.type === Column) {
+      return true
+    } else if (
+      typeof vnode.type === 'object'
+      && vnode.type !== null
+      && '__name' in vnode.type
+      && (vnode.type as { __name?: string }).__name === 'Column'
+    ) {
+      return true
+    }
+  }
+  return false
+}
+
+function hasMeaningfulContent(vnodes: VNode[]): boolean {
+  for (const vnode of vnodes) {
+    if (vnode.type === Comment) continue
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      if (hasMeaningfulContent(vnode.children as VNode[])) return true
+      continue
+    }
+    if (vnode.type === Text) {
+      if (typeof vnode.children === 'string' && vnode.children.trim()) return true
+      continue
+    }
+    if (typeof vnode.type === 'symbol') continue
+    return true
+  }
+  return false
+}
+
 const columnCount = computed(() => {
   if (props.cols) return props.cols
 
@@ -53,26 +96,40 @@ const columnCount = computed(() => {
   return countChildren(children) || 1
 })
 
-const containerWidth = inject<ComputedRef<string | number> | null>('containerWidth', null)
+provide('columnCount', columnCount)
 
-const rowWidth = computed(() => props.width ?? containerWidth?.value ?? null)
+const userStyle = computed(() => {
+  const s = attrs.style
+  if (!s) return ''
+  return typeof s === 'object'
+    ? Object.entries(s).map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`).join('; ')
+    : String(s)
+})
 
-function divideValue(value: string | number, divisor: number): string {
-  if (typeof value === 'number') {
-    return `${parseFloat((value / divisor).toFixed(2))}px`
-  }
+const userHasWidth = computed(() => {
+  const cls = (attrs.class as string) ?? ''
+  return hasWidthUtility(cls) || hasWidthInStyle(userStyle.value)
+})
 
-  const num = Number.parseFloat(value)
-  const unit = value.replace(String(num), '') || 'px'
+const colWidthSource = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  if (userHasWidth.value) return ''
+  return null
+})
 
-  return `${parseFloat((num / divisor).toFixed(2))}${unit}`
-}
+const restAttrs = computed(() => {
+  const { style: _, 'data-maizzle-loc': __, ...rest } = attrs
+  return rest
+})
 
-provide('columnMinWidth', computed(() => rowWidth.value ? divideValue(rowWidth.value, columnCount.value) : null))
-provide('columnMsoWidth', computed(() => `${Math.round(100 / columnCount.value)}%`))
+const divStyle = computed(() => {
+  const parts: string[] = ['font-size: 0;']
+  if (userStyle.value) parts.push(userStyle.value)
+  return parts.join(' ')
+})
 
 const MsoBefore = () => createStaticVNode(
-  '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" width="100%"><tr><![endif]-->',
+  '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: 100%"><tr><![endif]-->',
   1
 )
 
@@ -80,11 +137,25 @@ const MsoAfter = () => createStaticVNode(
   '<!--[if mso]></tr></table><![endif]-->',
   1
 )
+
+const initialChildren = slots.default?.() ?? []
+if (hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
+  const loc = (attrs['data-maizzle-loc'] as string | undefined) ?? '<unknown location>'
+  if (!warnedLocations.has(loc)) {
+    warnedLocations.add(loc)
+    const display = loc.split('/').pop() ?? loc
+    console.warn(`[maizzle] <Row> in ${display} has no <Column> inside it. Layout will break in Outlook.`)
+  }
+}
 </script>
 
 <template>
   <MsoBefore />
-  <div v-bind="attrs" style="font-size: 0;">
+  <div
+    v-bind="restAttrs"
+    :style="divStyle"
+    :data-maizzle-cw="colWidthSource"
+  >
     <slot />
   </div>
   <MsoAfter />

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,11 +5,13 @@ 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";
 import { RenderOptions, RenderResult, render } from "./render/index.mjs";
 import { serve } from "./serve.mjs";
+import { PrepareOptions, prepare } from "./prepare.mjs";
 import { createPlaintext } from "./plaintext.mjs";
 import { inlineLink } from "./transformers/inlineLink.mjs";
 import { urlQuery } from "./transformers/urlQuery.mjs";
@@ -28,4 +30,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 PrepareOptions, 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, prepare, removeAttributes, purgeCSS as removeUnusedCSS, render, replaceStrings, resolveConfig, safeClassNames, serve, shorthandCSS, sixHex, urlQuery, useConfig, useDoctype, useEvent, useFont, useHead, usePlaintext };

package/dist/index.mjs

@@ -23,9 +23,11 @@ import { build } from "./build.mjs";
 import { maizzle } from "./plugin.mjs";
 import { render } from "./render/index.mjs";
 import { serve } from "./serve.mjs";
+import { prepare } from "./prepare.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, prepare, 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"}