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

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":";;UAaiB,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,27 +1,32 @@
-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 { stripForHtml, stripForPlaintext } from "./utils/output-markers.js";
 import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { glob } from "tinyglobby";
 import ora from "ora";
-
+import defu from "defu";
 //#region src/build.ts
 /**
 * Build all SFC email templates to HTML files.
 *
 * 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 +62,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,
@@ -71,25 +77,27 @@ async function build(options = {}) {
 				html
 			});
 			html = `${doctype}\n${html}`;
+			const htmlOut = stripForHtml(html);
 			const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase);
 			mkdirSync(dirname(outputFilePath), { recursive: true });
-			writeFileSync(outputFilePath, html);
+			writeFileSync(outputFilePath, htmlOut);
 			outputFiles.push(outputFilePath);
 			const globalPlaintext = templateConfig.plaintext;
 			const sfcPlaintext = rendered.plaintext;
 			if (globalPlaintext || sfcPlaintext) {
-				const plaintext = createPlaintext(html, typeof globalPlaintext === "object" ? globalPlaintext : {});
-				const ptExtension = sfcPlaintext?.extension ?? "txt";
+				const globalCfg = typeof globalPlaintext === "object" ? globalPlaintext : {};
+				const stripOptions = defu(sfcPlaintext?.options, globalCfg.options);
+				const plaintext = createPlaintext(stripForPlaintext(html), stripOptions);
+				const ptExtension = sfcPlaintext?.extension ?? globalCfg.extension ?? "txt";
 				let ptOutputPath;
 				if (sfcPlaintext?.destination) {
 					const name = basename(templatePath).replace(/\.(vue|md)$/, "");
 					ptOutputPath = join(resolve(sfcPlaintext.destination), `${name}.${ptExtension}`);
-				} else if (typeof globalPlaintext === "string") ptOutputPath = resolveOutputPath(templatePath, resolve(globalPlaintext), ptExtension, contentBase);
+				} else if (globalCfg.destination) ptOutputPath = resolveOutputPath(templatePath, resolve(globalCfg.destination), ptExtension, contentBase);
 				else ptOutputPath = resolveOutputPath(templatePath, outputPath, ptExtension, contentBase);
 				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);
@@ -138,7 +146,7 @@ async function copyStatic(config, outputPath) {
 		cpSync(file, destPath);
 	}
 }
-
 //#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 { stripForHtml, stripForPlaintext } from './utils/output-markers.ts'\nimport defu from 'defu'\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 htmlOut = stripForHtml(html)\n      const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase)\n      mkdirSync(dirname(outputFilePath), { recursive: true })\n      writeFileSync(outputFilePath, htmlOut)\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 globalCfg = typeof globalPlaintext === 'object' ? globalPlaintext : {}\n        const stripOptions = defu(sfcPlaintext?.options, globalCfg.options)\n        const plaintext = createPlaintext(stripForPlaintext(html), stripOptions)\n        const ptExtension = sfcPlaintext?.extension ?? globalCfg.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 (globalCfg.destination) {\n          ptOutputPath = resolveOutputPath(templatePath, resolve(globalCfg.destination), 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'
 
@@ -37,24 +36,6 @@ const props = defineProps({
     type: String as PropType<'left' | 'center' | 'right' | null>,
     default: null
   },
-  /**
-   * Background color for `solid` and `outline` variants.
-   * Also used as the text color for `outline` and `ghost` variants when `color` is not set.
-   * @default '#4338ca'
-   */
-  bgColor: {
-    type: String,
-    default: '#4338ca'
-  },
-  /**
-   * Explicit text color. When omitted, `solid` buttons use `#fffffe`
-   * and all other variants fall back to `bgColor`.
-   * @default null
-   */
-  color: {
-    type: String,
-    default: null
-  },
   /**
    * `mso-text-raise` value applied to the inner `<span>` elements.
    * Controls vertical text alignment inside the button in old Outlook.
@@ -106,6 +87,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,
 })
 
@@ -119,18 +129,9 @@ const alignClass = computed(() => props.align ? ({
   right: 'text-right',
 })[props.align] || '' : '')
 
-const textColor = computed(() => {
-  if (props.color) return props.color
-
-  return props.variant === 'solid' ? '#fffffe' : props.bgColor
-})
-
 const styles = computed(() => {
   if (props.variant === 'link') {
-    return [
-      'text-decoration: none;',
-      `color: ${textColor.value};`,
-    ].join('')
+    return 'text-decoration: none; color: #4338ca;'
   }
 
   const base = [
@@ -140,18 +141,24 @@ const styles = computed(() => {
     'font-size: 16px;',
     'line-height: 1;',
     'border-radius: 4px;',
-    `color: ${textColor.value};`,
   ]
 
   if (props.variant === 'outline') {
     base.push(
       'background-color: transparent;',
-      `border: 1px solid ${props.bgColor};`,
+      'border: 1px solid #4338ca;',
+      'color: #4338ca;',
     )
   } else if (props.variant === 'ghost') {
-    base.push('background-color: transparent;')
+    base.push(
+      'background-color: transparent;',
+      'color: #4338ca;',
+    )
   } else {
-    base.push(`background-color: ${props.bgColor};`)
+    base.push(
+      'background-color: #4338ca;',
+      'color: #fffffe;',
+    )
   }
 
   return base.join('')
@@ -159,38 +166,68 @@ const styles = computed(() => {
 
 const isLink = computed(() => props.variant === 'link')
 
-const defaultClasses = computed(() => {
-  if (props.variant === 'ghost') return 'hover:bg-indigo-50'
-  return ''
+const variantClasses = computed(() =>
+  props.variant === 'ghost' ? 'hover:bg-indigo-50' : '',
+)
+
+const mergedClass = computed(() => twMerge(variantClasses.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
 })
 
-const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as string))
+/**
+ * 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>
   <div :class="alignClass">
     <a
-      v-bind="{ ...$attrs, class: undefined }"
+      v-bind="{ ...$attrs, class: undefined, style: undefined }"
       :href="href"
-      :style="styles"
+      :style="[styles, $attrs.style as any]"
       :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

@@ -16,11 +16,11 @@ const props = defineProps({
    * Also used as the width source for descendant `Row`/`Column`
    * components when computing column widths.
    *
-   * When not set, the div defaults to `w-150 mx-auto` (600px,
-   * centered) — overridable via Tailwind classes such as
-   * `w-[400px]` or `max-w-xl`. The MSO table width is auto-derived
-   * from the resolved width/max-width after CSS inlining, falling
-   * back to 600px when unresolvable.
+   * When not set, the div defaults to `max-w-150 mx-auto` (max
+   * 600px, centered, shrinks below) — overridable via Tailwind
+   * classes such as `w-[400px]` or `max-w-xl`. The MSO table
+   * width is auto-derived from the resolved width/max-width after
+   * CSS inlining, falling back to 600px when unresolvable.
    */
   width: {
     type: [String, Number],
@@ -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
@@ -55,7 +79,7 @@ const mergedClass = computed(() => {
   const userClass = (attrs.class as string) ?? ''
   const defaultClass = hasWidthUtility(userClass)
     ? 'm-0 mx-auto'
-    : 'w-150 m-0 mx-auto'
+    : 'max-w-150 m-0 mx-auto'
   return twMerge(defaultClass, userClass)
 })
 
@@ -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/Hr.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const HEIGHT_RE = /(?:^|\s)h-([\w./\-[\]%]+)/g
+const LEADING_RE = /(?:^|\s)leading-/
+
+const mergedClass = computed(() => {
+  const userClass = (attrs.class as string) || ''
+  const heights = [...userClass.matchAll(HEIGHT_RE)]
+  const userHeight = heights.length ? heights[heights.length - 1][1] : null
+  const userHasLeading = LEADING_RE.test(userClass)
+
+  const defaults = ['my-6', 'bg-slate-300']
+  if (!userHeight) defaults.push('h-px')
+  if (!userHasLeading && !userHeight) defaults.push('leading-px')
+
+  const derived = userHeight && !userHasLeading ? `leading-${userHeight}` : ''
+  return twMerge(defaults.join(' '), userClass, derived)
+})
+</script>
+
+<template>
+  <div
+    role="separator"
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="mergedClass"
+  >&zwj;</div>
+</template>

package/dist/components/Html.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { createStaticVNode, provide, useAttrs, useSlots } from 'vue'
+import { createStaticVNode, inject, provide, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import { outlookFallbackProp } from './utils.ts'
 import { useOutlookFallback } from '../composables/useOutlookFallback'
+import { RenderContextKey } from '../composables/renderContext'
 
 defineOptions({ inheritAttrs: false })
 
@@ -68,11 +69,38 @@ 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,
+  /**
+   * DOCTYPE declaration prepended to the rendered HTML.
+   *
+   * Overrides `doctype` in the Maizzle config and any value
+   * set via `useDoctype()` in the same template.
+   *
+   * @default '<!DOCTYPE html>'
+   */
+  doctype: {
+    type: String,
+    default: undefined,
+  },
 })
 
 const outlookFallback = useOutlookFallback(props.outlookFallback)
 
+if (props.doctype !== undefined) {
+  const ctx = inject(RenderContextKey, undefined)
+  if (ctx) ctx.doctype = props.doctype
+}
+
 provide('htmlLang', props.lang)
 
 const render = () => {

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>