@maizzle/framework 6.0.0-rc.17 → 6.0.0-rc.18

package/bin/maizzle.mjs

@@ -5,6 +5,6 @@ import { fileURLToPath } from 'node:url'
 
 const jiti = createJiti(fileURLToPath(import.meta.url), { interopDefault: true })
 const { default: bootstrap } = await jiti.import('maizzle')
-const framework = await jiti.import('../dist/index.mjs')
+const framework = await jiti.import('../dist/index.js')
 
 await bootstrap(framework)

package/dist/build.d.ts

@@ -1,8 +1,5 @@
 import { MaizzleConfig } from "./types/config.js";
 //#region src/build.d.ts
-interface BuildOptions {
-  config?: Partial<MaizzleConfig> | string;
-}
 interface BuildResult {
   files: string[];
   config: MaizzleConfig;
@@ -12,8 +9,12 @@ interface BuildResult {
  *
  * Creates a single Renderer instance, then loops through each template
  * calling render → transformers → write to disk.
+ *
+ * Pass a `Partial<MaizzleConfig>` to override config inline, or a string
+ * to load config from a specific file path. Omit to load `maizzle.config`
+ * from the working directory.
  */
-declare function build(options?: BuildOptions): Promise<BuildResult>;
+declare function build(configInput?: Partial<MaizzleConfig> | string): Promise<BuildResult>;
 //#endregion
-export { BuildOptions, BuildResult, build };
+export { BuildResult, build };
 //# sourceMappingURL=build.d.ts.map

package/dist/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","names":[],"sources":["../src/build.ts"],"mappings":";;UAWiB,YAAA;EACf,MAAA,GAAS,OAAA,CAAQ,aAAA;AAAA;AAAA,UAGF,WAAA;EACf,KAAA;EACA,MAAA,EAAQ,aAAA;AAAA;;;;;;AAFV;iBAWsB,KAAA,CAAM,OAAA,GAAS,YAAA,GAAoB,OAAA,CAAQ,WAAA"}
+{"version":3,"file":"build.d.ts","names":[],"sources":["../src/build.ts"],"mappings":";;UAWiB,WAAA;EACf,KAAA;EACA,MAAA,EAAQ,aAAA;AAAA;;;;;;;;;AAaV;;iBAAsB,KAAA,CAAM,WAAA,GAAc,OAAA,CAAQ,aAAA,aAA0B,OAAA,CAAQ,WAAA"}

package/dist/{build.mjs → build.js}

@@ -1,8 +1,8 @@
-import { resolveConfig } from "./config/index.mjs";
-import { EventManager } from "./events/index.mjs";
-import { runTransformers } from "./transformers/index.mjs";
-import { createRenderer } from "./render/createRenderer.mjs";
-import { createPlaintext } from "./plaintext.mjs";
+import { resolveConfig } from "./config/index.js";
+import { EventManager } from "./events/index.js";
+import { runTransformers } from "./transformers/index.js";
+import { createRenderer } from "./render/createRenderer.js";
+import { createPlaintext } from "./plaintext.js";
 import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { glob } from "tinyglobby";
@@ -14,14 +14,18 @@ import ora from "ora";
 *
 * Creates a single Renderer instance, then loops through each template
 * calling render → transformers → write to disk.
+*
+* Pass a `Partial<MaizzleConfig>` to override config inline, or a string
+* to load config from a specific file path. Omit to load `maizzle.config`
+* from the working directory.
 */
-async function build(options = {}) {
+async function build(configInput) {
 	const start = Date.now();
 	const spinner = ora({
 		text: "Building templates...",
 		spinner: "circleHalves"
 	}).start();
-	const config = await resolveConfig(options.config);
+	const config = await resolveConfig(configInput);
 	const events = new EventManager();
 	events.registerConfig(config);
 	await events.fireBeforeCreate({ config });
@@ -57,6 +61,7 @@ async function build(options = {}) {
 				template
 			});
 			const rendered = await renderer.render(absolutePath, config);
+			for (const { name, handler } of rendered.sfcEventHandlers) events.on(name, handler);
 			let html = await events.fireAfterRender({
 				config,
 				template,
@@ -89,7 +94,6 @@ async function build(options = {}) {
 				mkdirSync(dirname(ptOutputPath), { recursive: true });
 				writeFileSync(ptOutputPath, plaintext);
 			}
-			for (const { name, handler } of rendered.sfcEventHandlers) events.on(name, handler);
 			events.clearSfcHandlers();
 		}
 		await copyStatic(config, outputPath);
@@ -141,4 +145,4 @@ async function copyStatic(config, outputPath) {
 
 //#endregion
 export { build };
-//# sourceMappingURL=build.mjs.map
+//# sourceMappingURL=build.js.map

package/dist/build.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.js","names":[],"sources":["../src/build.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, basename, relative, join } from 'node:path'\nimport { glob } from 'tinyglobby'\nimport ora from 'ora'\nimport { resolveConfig } from './config/index.ts'\nimport { EventManager } from './events/index.ts'\nimport { runTransformers } from './transformers/index.ts'\nimport { createRenderer } from './render/createRenderer.ts'\nimport { createPlaintext } from './plaintext.ts'\nimport type { MaizzleConfig } from './types/index.ts'\n\nexport interface BuildResult {\n  files: string[]\n  config: MaizzleConfig\n}\n\n/**\n * Build all SFC email templates to HTML files.\n *\n * Creates a single Renderer instance, then loops through each template\n * calling render → transformers → write to disk.\n *\n * Pass a `Partial<MaizzleConfig>` to override config inline, or a string\n * to load config from a specific file path. Omit to load `maizzle.config`\n * from the working directory.\n */\nexport async function build(configInput?: Partial<MaizzleConfig> | string): Promise<BuildResult> {\n  const start = Date.now()\n  const spinner = ora({ text: 'Building templates...', spinner: 'circleHalves' }).start()\n\n  const config = await resolveConfig(configInput)\n\n  const events = new EventManager()\n  events.registerConfig(config)\n  await events.fireBeforeCreate({ config })\n\n  const outputPath = resolve(config.output?.path ?? 'dist')\n  const outputExtension = config.output?.extension ?? 'html'\n\n  const contentPatterns = config.content ?? ['emails/**/*.vue']\n  const contentBase = computeContentBase(contentPatterns)\n  const templateFiles = await glob(contentPatterns)\n\n  if (templateFiles.length === 0) {\n    spinner.succeed('No templates found')\n    return { files: [], config }\n  }\n\n  // Clear the output directory before writing fresh output\n  if (existsSync(outputPath)) {\n    rmSync(outputPath, { recursive: true, force: true })\n  }\n\n  const renderer = await createRenderer({ markdown: config.markdown, root: config.root, componentDirs: [config.components?.source ?? []].flat(), vite: config.vite })\n  const outputFiles: string[] = []\n\n  try {\n    for (const templatePath of templateFiles) {\n      const absolutePath = resolve(templatePath)\n      let template = readFileSync(absolutePath, 'utf-8')\n\n      template = await events.fireBeforeRender({ config, template })\n\n      const rendered = await renderer.render(absolutePath, config)\n\n      // Register SFC event handlers collected during render so they participate\n      // in the post-render events (afterRender / afterTransform). They're cleared\n      // at the end of the iteration so they don't leak into the next template.\n      for (const { name, handler } of rendered.sfcEventHandlers) {\n        events.on(name, handler)\n      }\n\n      let html = await events.fireAfterRender({ config, template, html: rendered.html })\n\n      // Use the per-template merged config (from defineConfig() in the SFC) so that\n      // template-level overrides like css.safe: false are respected by transformers.\n      const templateConfig = rendered.templateConfig\n\n      const doctype = rendered.doctype ?? templateConfig.doctype ?? '<!DOCTYPE html>'\n\n      if (templateConfig.useTransformers !== false) {\n        html = await runTransformers(html, templateConfig, absolutePath, doctype, rendered.tailwindBlocks)\n      }\n\n      html = await events.fireAfterTransform({ config, template, html })\n      html = `${doctype}\\n${html}`\n\n      const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase)\n      mkdirSync(dirname(outputFilePath), { recursive: true })\n      writeFileSync(outputFilePath, html)\n      outputFiles.push(outputFilePath)\n\n      // Generate plaintext version if configured\n      const globalPlaintext = templateConfig.plaintext\n      const sfcPlaintext = rendered.plaintext\n\n      if (globalPlaintext || sfcPlaintext) {\n        const stripOptions = typeof globalPlaintext === 'object' ? globalPlaintext : {}\n        const plaintext = createPlaintext(html, stripOptions)\n        const ptExtension = sfcPlaintext?.extension ?? 'txt'\n\n        let ptOutputPath: string\n\n        if (sfcPlaintext?.destination) {\n          const name = basename(templatePath).replace(/\\.(vue|md)$/, '')\n          ptOutputPath = join(resolve(sfcPlaintext.destination), `${name}.${ptExtension}`)\n        } else if (typeof globalPlaintext === 'string') {\n          ptOutputPath = resolveOutputPath(templatePath, resolve(globalPlaintext), ptExtension, contentBase)\n        } else {\n          ptOutputPath = resolveOutputPath(templatePath, outputPath, ptExtension, contentBase)\n        }\n\n        mkdirSync(dirname(ptOutputPath), { recursive: true })\n        writeFileSync(ptOutputPath, plaintext)\n      }\n\n      events.clearSfcHandlers()\n    }\n\n    await copyStatic(config, outputPath)\n    await events.fireAfterBuild({ files: outputFiles, config })\n  } finally {\n    await renderer.close()\n  }\n\n  const duration = ((Date.now() - start) / 1000).toFixed(2)\n  const count = outputFiles.length\n  spinner.stopAndPersist({\n    symbol: '✅',\n    text: `Built ${count} template${count !== 1 ? 's' : ''} in ${duration}s`,\n  })\n\n  return { files: outputFiles, config }\n}\n\n/**\n * Extract the static (non-glob) prefix from content patterns.\n *\n * For example, `['/abs/path/emails/**\\/*.vue']` → `'/abs/path/emails'`\n *\n * This is used to strip the content base from template paths\n * so the output preserves only the subdirectory structure.\n */\nfunction computeContentBase(patterns: string[]): string {\n  // Use the first non-negated pattern\n  const pattern = patterns.find(p => !p.startsWith('!')) ?? patterns[0]\n\n  // Split on first glob character (* { ? [) and take the directory part\n  const staticPart = pattern.split(/[*{?[]/)[0]\n\n  // Ensure we have a clean directory path (not a partial segment)\n  return resolve(staticPart.endsWith('/') ? staticPart : dirname(staticPart))\n}\n\nfunction resolveOutputPath(templatePath: string, outputDir: string, extension: string, contentBase: string): string {\n  const name = basename(templatePath).replace(/\\.(vue|md)$/, '')\n  const absTemplate = resolve(templatePath)\n  const rel = relative(contentBase, dirname(absTemplate))\n\n  return join(outputDir, rel, `${name}.${extension}`)\n}\n\nasync function copyStatic(config: MaizzleConfig, outputPath: string): Promise<void> {\n  const sources = config.static?.source ?? ['public/**/*.*']\n  const destination = config.static?.destination ?? 'public'\n\n  const files = await glob(sources)\n\n  for (const file of files) {\n    const destPath = join(outputPath, destination, relative(dirname(sources[0]).replace(/\\*.*$/, ''), file))\n    const destDir = dirname(destPath)\n\n    if (!existsSync(destDir)) {\n      mkdirSync(destDir, { recursive: true })\n    }\n\n    cpSync(file, destPath)\n  }\n}\n"],"mappings":"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"}

package/dist/components/Body.vue

@@ -68,6 +68,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 

package/dist/components/Button.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, createStaticVNode } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import Outlook from './Outlook.vue'
 import { outlookFallbackProp } from './utils.ts'
 import { useOutlookFallback } from '../composables/useOutlookFallback'
 
@@ -106,6 +105,35 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  /**
+   * Alt text for the icon image.
+   * @default ''
+   */
+  iconAlt: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Horizontal padding in old Outlook, applied as `mso-font-width` on the
+   * outer spacer `<i>` elements. Accepts a number, a numeric string, or a
+   * string with `%`. Bare numbers are treated as percentages. Effective
+   * range up to 500%.
+   * @default 150
+   */
+  msoPx: {
+    type: [String, Number],
+    default: 150
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 
@@ -165,6 +193,37 @@ const defaultClasses = computed(() => {
 })
 
 const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as string))
+
+const textSpanStyle = computed(() =>
+  outlookFallback ? `mso-text-raise: ${props.msoPt};` : undefined,
+)
+
+const msoPx = computed(() => {
+  const v = String(props.msoPx).trim()
+  // Bare number → percentage. Anything with a unit passes through.
+  return /^\d+(\.\d+)?$/.test(v) ? `${v}%` : v
+})
+
+/**
+ * Outlook spacer `<i>` elements rendered as raw HTML inside MSO conditional
+ * comments. JS strings keep `&emsp;` / `&#8203;` from being decoded by
+ * Vue's template parser; htmlparser2 then preserves the comment
+ * data verbatim because conditional comments are opaque.
+ */
+const MsoSpacerLeft = () => createStaticVNode(
+  `<!--[if mso]><i style="mso-font-width: ${msoPx.value}; mso-text-raise: ${props.msoPb};" hidden>&emsp;</i><![endif]-->`,
+  1,
+)
+
+const MsoSpacerRight = () => createStaticVNode(
+  `<!--[if mso]><i style="mso-font-width: ${msoPx.value};" hidden>&emsp;&#8203;</i><![endif]-->`,
+  1,
+)
+
+const MsoIconGap = () => createStaticVNode(
+  `<!--[if mso]><i style="mso-font-width: 30%;" hidden>&emsp;&#8203;</i><![endif]-->`,
+  1,
+)
 </script>
 
 <template>
@@ -176,21 +235,21 @@ const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as
       :class="mergedClass"
     >
       <template v-if="!isLink">
-        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
+        <MsoSpacerLeft v-if="outlookFallback" />
         <template v-if="icon && iconPosition === 'left'">
-          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
+          <span :style="textSpanStyle">
+            <img :src="icon" :width="parsedIconWidth" :alt="iconAlt" style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
           </span>
-          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
+          <MsoIconGap v-if="outlookFallback" />
         </template>
-        <span :class="icon ? (iconPosition === 'right' ? 'mr-2' : 'ml-2') : ''" :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined"><slot /></span>
+        <span :style="textSpanStyle"><slot /></span>
         <template v-if="icon && iconPosition === 'right'">
-          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
-          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
+          <MsoIconGap v-if="outlookFallback" />
+          <span :style="textSpanStyle">
+            <img :src="icon" :width="parsedIconWidth" :alt="iconAlt" style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
           </span>
         </template>
-        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
+        <MsoSpacerRight v-if="outlookFallback" />
       </template>
       <template v-else>
         <slot />

package/dist/components/Column.vue

@@ -32,6 +32,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 

package/dist/components/Container.vue

@@ -35,6 +35,29 @@ const props = defineProps({
     type: [String, Number],
     default: null
   },
+  /**
+   * Inline CSS applied only to the MSO `<td>` element.
+   *
+   * Use for Outlook-specific styling that shouldn't affect other clients.
+   * Appended after any padding propagated from the outer div's
+   * inlined style, so msoStyle wins on duplicate properties.
+   *
+   * @example 'padding: 10px 20px'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 
@@ -44,6 +67,7 @@ provide('containerWidth', computed(() => props.width))
 
 const useMarker = outlookFallback && props.width == null && props.msoWidth == null
 const msoId = useMarker ? nextId('c') : null
+const tdId = outlookFallback ? nextId('ct') : null
 
 const styles = computed(() => {
   if (props.width == null) return undefined
@@ -69,8 +93,10 @@ const colWidthSource = computed(() =>
   props.width != null ? normalizeToPixels(props.width) : ''
 )
 
+const tdMarker = tdId ? `__MAIZZLE_MSOTDSTYLE_${tdId}__` : ''
+
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}" align="center"><tr><td><![endif]-->`,
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}" align="center"><tr><td${tdMarker}><![endif]-->`,
   1
 )
 
@@ -88,6 +114,8 @@ const MsoAfter = () => createStaticVNode(
     :style="styles"
     :data-maizzle-msow-id="msoId"
     :data-maizzle-cw="colWidthSource"
+    :data-maizzle-mso-td-id="tdId"
+    :data-maizzle-mso-style="tdId && props.msoStyle ? props.msoStyle : null"
   >
     <slot />
   </div>

package/dist/components/Html.vue

@@ -68,6 +68,16 @@ const props = defineProps({
     type: [Boolean, String],
     default: true
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 

package/dist/components/Layout.vue

@@ -55,6 +55,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 
@@ -68,21 +78,25 @@ const EmptyHead = () => createStaticVNode('<head></head>', 1)
 
 const MsoHead = () => createStaticVNode(
   `<!--[if mso]>
-      <noscript>
-        <xml>
-          <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-          </o:OfficeDocumentSettings>
-        </xml>
-      </noscript>
-      <style>
-        td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
-        .mso-break-all {word-break: break-all;}
-      </style>
-      <![endif]-->`,
+    <style>
+      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
+      .mso-break-all {word-break: break-all;}
+    </style>
+  <![endif]-->`,
   1
 )
 
+const msoBody = `<!--[if mso]>
+  <xml>
+    <o:OfficeDocumentSettings>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    <w:WordDocument>
+      <w:DontUseAdvancedTypographyReadingMail />
+    </w:WordDocument>
+  </xml>
+<![endif]-->`
+
 const htmlXmlns = computed(() => outlookFallback ? {
   'xmlns:v': 'urn:schemas-microsoft-com:vml',
   'xmlns:o': 'urn:schemas-microsoft-com:office:office',
@@ -112,6 +126,7 @@ const htmlXmlns = computed(() => outlookFallback ? {
     </style>
   </head>
   <body :xml:lang="outlookFallback ? lang : null" :class="bodyMergedClass">
+    <span v-if="outlookFallback" style="display: none" v-html="msoBody"></span>
     <div
       role="article"
       aria-roledescription="email"

package/dist/components/MarkdownLayout.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import Layout from './Layout.vue'
+import Container from './Container.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  /**
+   * Frontmatter object — wired in automatically when this layout
+   * wraps a `.md` template (the default behavior, or via the
+   * `layout: MarkdownLayout` frontmatter key).
+   *
+   * Keys matching `Layout`'s props (`lang`, `dir`, `bodyClass`,
+   * `doubleHead`, `ariaLabel`, `outlookFallback`) flow through to
+   * the wrapped `Layout`. Missing keys fall back to `Layout`'s
+   * own defaults.
+   */
+  frontmatter: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+})
+</script>
+
+<template>
+  <Layout
+    :lang="props.frontmatter.lang as string | undefined"
+    :dir="props.frontmatter.dir as 'ltr' | 'rtl' | undefined"
+    :body-class="props.frontmatter.bodyClass as string | undefined"
+    :double-head="props.frontmatter.doubleHead as boolean | string | undefined"
+    :aria-label="props.frontmatter.ariaLabel as string | undefined"
+    :outlook-fallback="props.frontmatter.outlookFallback as boolean | undefined"
+  >
+    <Container class="max-w-xl">
+      <slot />
+    </Container>
+  </Layout>
+</template>

package/dist/components/Overlap.vue

@@ -62,6 +62,16 @@ const props = defineProps({
     type: String,
     default: '0,-60px,0,0'
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 

package/dist/components/Preheader.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 defineProps({
-  /** Number of `&#8199;&#847;` filler pairs to render. */
-  fillerCount: {
-    type: Number,
-    default: 150
-  },
-  /** Number of `&shy;` entities to render. */
-  shyCount: {
+  /** Number of `&#8199;&#65279;&#847;` filler sequences to render after the preview text. */
+  spaces: {
     type: Number,
     default: 150
   }
@@ -15,6 +10,6 @@ defineProps({
 
 <template>
   <Teleport to="body:start">
-    <div style="display: none"><slot /><template v-for="i in fillerCount" :key="'f'+i">&#8199;&#847; </template><template v-for="i in shyCount" :key="'s'+i">&shy; </template>&nbsp;</div>
+    <div style="display: none"><slot /><template v-for="i in spaces" :key="i">&#8199;&#65279;&#847; </template>&nbsp;</div>
   </Teleport>
 </template>

package/dist/components/Row.vue

@@ -38,6 +38,16 @@ const props = defineProps({
     type: Number,
     default: null
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 

package/dist/components/Section.vue

@@ -33,6 +33,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
 

package/dist/components/{utils.mjs → utils.js}

@@ -47,4 +47,4 @@ const outlookFallbackProp = {
 
 //#endregion
 export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp };
-//# sourceMappingURL=utils.mjs.map
+//# sourceMappingURL=utils.js.map

package/dist/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","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\n/**\n * Shared prop for components that emit MSO/VML fallback markup. The\n * `null` default acts as the \"unset\" sentinel — `useOutlookFallback`\n * treats `null` as inherit-from-ancestor (root default `true`),\n * letting users override per-component without losing inheritance.\n */\nexport const outlookFallbackProp = {\n  type: Boolean,\n  default: null,\n} as const\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;;;;;;;;AAS9D,MAAa,sBAAsB;CACjC,MAAM;CACN,SAAS;CACV"}

package/dist/composables/{defineConfig.mjs → defineConfig.js}

@@ -1,5 +1,5 @@
-import { MaizzleConfigKey } from "./useConfig.mjs";
-import { RenderContextKey } from "./renderContext.mjs";
+import { MaizzleConfigKey } from "./useConfig.js";
+import { RenderContextKey } from "./renderContext.js";
 import { createDefu } from "defu";
 import { getCurrentInstance, inject, provide } from "vue";
 
@@ -31,4 +31,4 @@ function defineConfig(data = {}) {
 
 //#endregion
 export { defineConfig };
-//# sourceMappingURL=defineConfig.mjs.map
+//# sourceMappingURL=defineConfig.js.map

package/dist/composables/defineConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineConfig.js","names":[],"sources":["../../src/composables/defineConfig.ts"],"sourcesContent":["import { getCurrentInstance, inject, provide } from 'vue'\nimport { createDefu } from 'defu'\nimport { MaizzleConfigKey } from './useConfig.ts'\nimport { RenderContextKey } from './renderContext.ts'\nimport type { MaizzleConfig } from '../types/index.ts'\n\nconst merge = createDefu((obj, key, value) => {\n  if (Array.isArray(obj[key])) {\n    obj[key] = value\n    return true\n  }\n})\n\n/**\n * Define Maizzle config.\n *\n * Works in both contexts:\n * - In maizzle.config.ts: typed identity function, returns the config as-is\n * - In Vue SFC <script setup>: merges with the global config and provides\n *   the result to child components via useConfig()\n */\nexport function defineConfig(data: Partial<MaizzleConfig> = {}): MaizzleConfig {\n  // Inside a Vue SFC — merge with global config and provide to children\n  if (getCurrentInstance()) {\n    const globalConfig = inject(MaizzleConfigKey, {} as MaizzleConfig)\n    const merged = merge(data, globalConfig) as MaizzleConfig\n\n    const ctx = inject(RenderContextKey)\n    if (ctx) ctx.sfcConfig = merged\n\n    provide(MaizzleConfigKey, merged)\n\n    return merged\n  }\n\n  // Outside Vue (maizzle.config.ts) — just return the config\n  return data as MaizzleConfig\n}\n"],"mappings":";;;;;;AAMA,MAAM,QAAQ,YAAY,KAAK,KAAK,UAAU;AAC5C,KAAI,MAAM,QAAQ,IAAI,KAAK,EAAE;AAC3B,MAAI,OAAO;AACX,SAAO;;EAET;;;;;;;;;AAUF,SAAgB,aAAa,OAA+B,EAAE,EAAiB;AAE7E,KAAI,oBAAoB,EAAE;EAExB,MAAM,SAAS,MAAM,MADA,OAAO,kBAAkB,EAAE,CAAkB,CAC1B;EAExC,MAAM,MAAM,OAAO,iBAAiB;AACpC,MAAI,IAAK,KAAI,YAAY;AAEzB,UAAQ,kBAAkB,OAAO;AAEjC,SAAO;;AAIT,QAAO"}

package/dist/composables/{renderContext.mjs → renderContext.js}

@@ -3,4 +3,4 @@ const RenderContextKey = Symbol("RenderContext");
 
 //#endregion
 export { RenderContextKey };
-//# sourceMappingURL=renderContext.mjs.map
+//# sourceMappingURL=renderContext.js.map

package/dist/composables/renderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderContext.js","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 TailwindBlock {\n  id: string\n  /** Optional raw CSS from the component's `#config` slot. */\n  css?: 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  tailwindBlocks?: TailwindBlock[]\n}\n\nexport const RenderContextKey: InjectionKey<RenderContext> = Symbol('RenderContext')\n"],"mappings":";AA4BA,MAAa,mBAAgD,OAAO,gBAAgB"}

package/dist/composables/useBaseUrl.d.ts

@@ -0,0 +1,19 @@
+import { UrlConfig } from "../types/config.js";
+//#region src/composables/useBaseUrl.d.ts
+/**
+ * Set the base URL for the current email template — same as
+ * `config.url.base`, scoped to one SFC.
+ *
+ * Pass a string to prepend to all default tags/attributes, or an object
+ * for fine-grained control (which tags/attributes, style tags, etc.).
+ *
+ * Usage in SFC <script setup>:
+ * ```ts
+ * useBaseUrl('https://cdn.example.com/emails/')
+ * useBaseUrl({ url: 'https://cdn.example.com/', styleTag: true })
+ * ```
+ */
+declare function useBaseUrl(value: UrlConfig['base']): void;
+//#endregion
+export { useBaseUrl };
+//# sourceMappingURL=useBaseUrl.d.ts.map

package/dist/composables/useBaseUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBaseUrl.d.ts","names":[],"sources":["../../src/composables/useBaseUrl.ts"],"mappings":";;;;;AAkBA;;;;;;;;;;iBAAgB,UAAA,CAAW,KAAA,EAAO,SAAA"}

package/dist/composables/useBaseUrl.js

@@ -0,0 +1,27 @@
+import { RenderContextKey } from "./renderContext.js";
+import { defu } from "defu";
+import { inject } from "vue";
+
+//#region src/composables/useBaseUrl.ts
+/**
+* Set the base URL for the current email template — same as
+* `config.url.base`, scoped to one SFC.
+*
+* Pass a string to prepend to all default tags/attributes, or an object
+* for fine-grained control (which tags/attributes, style tags, etc.).
+*
+* Usage in SFC <script setup>:
+* ```ts
+* useBaseUrl('https://cdn.example.com/emails/')
+* useBaseUrl({ url: 'https://cdn.example.com/', styleTag: true })
+* ```
+*/
+function useBaseUrl(value) {
+	const ctx = inject(RenderContextKey);
+	if (!ctx) return;
+	ctx.sfcConfig = defu({ url: { base: value } }, ctx.sfcConfig ?? {});
+}
+
+//#endregion
+export { useBaseUrl };
+//# sourceMappingURL=useBaseUrl.js.map

package/dist/composables/useBaseUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBaseUrl.js","names":["merge"],"sources":["../../src/composables/useBaseUrl.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { defu as merge } from 'defu'\nimport { RenderContextKey } from './renderContext.ts'\nimport type { UrlConfig } from '../types/index.ts'\n\n/**\n * Set the base URL for the current email template — same as\n * `config.url.base`, scoped to one SFC.\n *\n * Pass a string to prepend to all default tags/attributes, or an object\n * for fine-grained control (which tags/attributes, style tags, etc.).\n *\n * Usage in SFC <script setup>:\n * ```ts\n * useBaseUrl('https://cdn.example.com/emails/')\n * useBaseUrl({ url: 'https://cdn.example.com/', styleTag: true })\n * ```\n */\nexport function useBaseUrl(value: UrlConfig['base']): void {\n  const ctx = inject(RenderContextKey)\n  if (!ctx) return\n  ctx.sfcConfig = merge({ url: { base: value } }, ctx.sfcConfig ?? {})\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAAgB,WAAW,OAAgC;CACzD,MAAM,MAAM,OAAO,iBAAiB;AACpC,KAAI,CAAC,IAAK;AACV,KAAI,YAAYA,KAAM,EAAE,KAAK,EAAE,MAAM,OAAO,EAAE,EAAE,IAAI,aAAa,EAAE,CAAC"}

package/dist/composables/{useConfig.mjs → useConfig.js}

@@ -10,4 +10,4 @@ function useConfig() {
 
 //#endregion
 export { MaizzleConfigKey, useConfig };
-//# sourceMappingURL=useConfig.mjs.map
+//# sourceMappingURL=useConfig.js.map

package/dist/composables/useConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfig.js","names":[],"sources":["../../src/composables/useConfig.ts"],"sourcesContent":["import { inject } from 'vue'\nimport type { InjectionKey } from 'vue'\nimport type { MaizzleConfig } from '../types/index.ts'\n\nexport const MaizzleConfigKey: InjectionKey<MaizzleConfig> = Symbol('MaizzleConfig')\n\nexport function useConfig(): MaizzleConfig {\n  const config = inject(MaizzleConfigKey)\n\n  if (!config) {\n    throw new Error('useConfig() requires the Maizzle plugin to provide config. Make sure you are using it inside a Maizzle template.')\n  }\n\n  return config\n}\n"],"mappings":";;;AAIA,MAAa,mBAAgD,OAAO,gBAAgB;AAEpF,SAAgB,YAA2B;CACzC,MAAM,SAAS,OAAO,iBAAiB;AAEvC,KAAI,CAAC,OACH,OAAM,IAAI,MAAM,mHAAmH;AAGrI,QAAO"}