@maizzle/framework 6.0.0-rc.7 → 6.0.0-rc.9

package/dist/_virtual/_rolldown/runtime.mjs

@@ -0,0 +1,32 @@
+import { createRequire } from "node:module";
+
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+//#endregion
+export { __commonJSMin, __require, __toESM };

package/dist/build.mjs

@@ -41,7 +41,8 @@ async function build(options = {}) {
 	const renderer = await createRenderer({
 		markdown: config.markdown,
 		root: config.root,
-		componentDirs: [config.components?.source ?? []].flat()
+		componentDirs: [config.components?.source ?? []].flat(),
+		vite: config.vite
 	});
 	const outputFiles = [];
 	try {

package/dist/build.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build.mjs","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 BuildOptions {\n  config?: Partial<MaizzleConfig> | string\n}\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 */\nexport async function build(options: BuildOptions = {}): Promise<BuildResult> {\n  const start = Date.now()\n  const spinner = ora('Building templates...').start()\n\n  const config = await resolveConfig(options.config)\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() })\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      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)\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      // Register SFC event handlers that were collected during render\n      for (const { name, handler } of rendered.sfcEventHandlers) {\n        events.on(name, handler)\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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"}
+{"version":3,"file":"build.mjs","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 BuildOptions {\n  config?: Partial<MaizzleConfig> | string\n}\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 */\nexport async function build(options: BuildOptions = {}): Promise<BuildResult> {\n  const start = Date.now()\n  const spinner = ora('Building templates...').start()\n\n  const config = await resolveConfig(options.config)\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      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)\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      // Register SFC event handlers that were collected during render\n      for (const { name, handler } of rendered.sfcEventHandlers) {\n        events.on(name, handler)\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

@@ -1,42 +1,111 @@
-<script lang="ts">
-import { createStaticVNode } from 'vue'
+<script setup lang="ts">
+import { createStaticVNode, inject, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
 
-export default {
-  name: 'Body',
-  inheritAttrs: false,
-  props: {
-    xmlLang: {
-      type: String,
-      default: 'en'
-    },
-    dir: {
-      type: String as PropType<'ltr' | 'rtl'>,
-      default: 'ltr'
-    }
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const props = defineProps({
+  /**
+   * Language code for the `xml:lang` attribute on `<body>`.
+   *
+   * Inherited from the parent `Html` component's `lang` prop by default.
+   *
+   * @example 'fr'
+   */
+  xmlLang: {
+    type: String as PropType<
+      | 'af' | 'ar' | 'az'
+      | 'be' | 'bg' | 'bs'
+      | 'ca' | 'cs' | 'cy'
+      | 'da' | 'de' | 'dv'
+      | 'el' | 'en' | 'es' | 'et' | 'eu'
+      | 'fa' | 'fi' | 'fo' | 'fr'
+      | 'gl' | 'gu'
+      | 'he' | 'hi' | 'hr' | 'hu' | 'hy'
+      | 'id' | 'is' | 'it'
+      | 'ja'
+      | 'ka' | 'kk' | 'kn' | 'ko' | 'ky'
+      | 'lt' | 'lv'
+      | 'mk' | 'mn' | 'mr' | 'ms' | 'mt'
+      | 'nb' | 'nl' | 'nn' | 'no'
+      | 'pa' | 'pl' | 'pt'
+      | 'ro' | 'ru'
+      | 'sa' | 'se' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'sw'
+      | 'ta' | 'te' | 'th' | 'tr' | 'tt'
+      | 'uk' | 'ur' | 'uz'
+      | 'vi'
+      | 'zh'
+      | (string & {})
+    >,
+    default: undefined
+  },
+  /**
+   * Text direction of the body.
+   *
+   * - `ltr` — left to right (default)
+   * - `rtl` — right to left
+   *
+   * @default 'ltr'
+   */
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    default: 'ltr'
   },
-  setup(props, { slots, attrs }) {
-    return () => {
-      const extraAttrs = Object.entries(attrs)
-        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
-        .join(' ')
-
-      const parts = [
-        `xml:lang="${props.xmlLang}"`,
-        `dir="${props.dir}"`,
-        'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
-      ]
-
-      if (extraAttrs) {
-        parts.push(extraAttrs)
-      }
-
-      return [
-        createStaticVNode(`<body ${parts.join(' ')}>`, 1),
-        slots.default?.(),
-        createStaticVNode('</body>', 1),
-      ]
-    }
+  /**
+   * Accessible label for the email article wrapper.
+   *
+   * Used as the `aria-label` on the inner `<div role="article">`.
+   * Helps screen readers identify the email content.
+   *
+   * @example 'Order confirmation'
+   */
+  ariaLabel: {
+    type: String,
+    default: undefined
+  }
+})
+
+const htmlLang = inject<string>('htmlLang', 'en')
+
+const render = () => {
+  const extraAttrs = Object.entries(attrs)
+    .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+    .join(' ')
+
+  const lang = props.xmlLang ?? htmlLang
+
+  const parts = [
+    `xml:lang="${lang}"`,
+    `dir="${props.dir}"`,
+    'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
+  ]
+
+  if (extraAttrs) {
+    parts.push(extraAttrs)
   }
+
+  const articleParts = [
+    'role="article"',
+    'aria-roledescription="email"',
+    props.ariaLabel ? `aria-label="${props.ariaLabel}"` : '',
+    `lang="${lang}"`,
+    `dir="${props.dir}"`,
+    'style="font-size: medium; font-size: max(16px, 1rem)"',
+  ].filter(Boolean).join(' ')
+
+  return [
+    createStaticVNode(`<body ${parts.join(' ')}>`, 1),
+    createStaticVNode(`<div ${articleParts}>`, 1),
+    slots.default?.(),
+    createStaticVNode('</div>', 1),
+    createStaticVNode('</body>', 1),
+  ]
 }
 </script>
+
+<template>
+  <render />
+</template>

package/dist/components/Button.vue

@@ -10,7 +10,10 @@ const attrs = useAttrs()
 
 const props = defineProps({
   /** The URL the button links to. */
-  href: String,
+  href: {
+    type: String,
+    required: true
+  },
   /**
    * The button style variant.
    * - `solid` — filled background (default)

package/dist/components/CodeBlock.vue

@@ -9,7 +9,7 @@ export default {
       type: String,
       default: ''
     },
-/** The language for syntax highlighting. @default 'html' */
+    /** The language for syntax highlighting. @default 'html' */
     language: {
       type: String as PropType<BundledLanguage>,
       default: 'html'

package/dist/components/CodeInline.vue

@@ -4,7 +4,12 @@ import { createStaticVNode } from 'vue'
 export default {
   inheritAttrs: false,
   props: {
-    /** The inline code text. */
+    /**
+     * The inline code text to render.
+     *
+     * If not provided, the slot content is used instead.
+     * The text is HTML-escaped automatically.
+     */
     code: {
       type: String,
       default: ''

package/dist/components/Column.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, createStaticVNode, inject, useAttrs } from 'vue'
+import { computed, createStaticVNode, inject, provide, useAttrs } from 'vue'
 import type { ComputedRef } from 'vue'
 import { normalizeToPixels } from './utils.ts'
 
@@ -8,10 +8,26 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 const props = defineProps({
-  /** Override the auto-computed min-width. */
+  /**
+   * Override the auto-computed column width.
+   *
+   * By default, the width is calculated from the parent `Row`
+   * by dividing its width by the column count.
+   */
   width: {
     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.
+   *
+   * @example 'padding: 10px'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
   }
 })
 
@@ -26,10 +42,10 @@ const minWidth = computed(() => {
   // Fallback: divide container width by 2 if available
   if (containerWidth?.value) {
     const val = containerWidth.value
-    if (typeof val === 'number') return `${val / 2}px`
+    if (typeof val === 'number') return `${parseFloat((val / 2).toFixed(2))}px`
     const num = Number.parseFloat(val)
     const unit = val.replace(String(num), '') || 'px'
-    return `${num / 2}${unit}`
+    return `${parseFloat((num / 2).toFixed(2))}${unit}`
   }
 
   return '18.75em'
@@ -37,12 +53,21 @@ const minWidth = computed(() => {
 
 const msoWidth = computed(() => injectedMsoWidth?.value ?? '50%')
 
+// Provide column width as containerWidth for nested Rows
+provide('containerWidth', minWidth)
+
 const styles = computed(() => {
   return `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
 })
 
+const tdStyle = computed(() => {
+  const parts = ['vertical-align: top']
+  if (props.msoStyle) parts.push(props.msoStyle)
+  return parts.join('; ')
+})
+
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><td width="${msoWidth.value}" style="vertical-align:top"><![endif]-->`,
+  `<!--[if mso]><td width="${msoWidth.value}" style="${tdStyle.value}"><![endif]-->`,
   1
 )
 

package/dist/components/Container.vue

@@ -7,7 +7,15 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 const props = defineProps({
-  /** Max width of the container. */
+  /**
+   * Max width of the container.
+   *
+   * Applied as `max-width` on the div and as `width` on the MSO table.
+   * Also provided to child `Row` and `Column` components for
+   * automatic column width calculation.
+   *
+   * @default '37.5em'
+   */
   width: {
     type: [String, Number],
     default: '37.5em'
@@ -21,7 +29,7 @@ const styles = computed(() => {
 })
 
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width:${normalizeToPixels(props.width)}" align="center"><tr><td><![endif]-->`,
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${normalizeToPixels(props.width)}" align="center"><tr><td><![endif]-->`,
   1
 )
 

package/dist/components/Divider.vue

@@ -5,34 +5,62 @@ import { normalizeToPixels } from './utils.ts'
 const attrs = useAttrs()
 
 const props = defineProps({
+  /**
+   * Height (thickness) of the divider line.
+   *
+   * @default '1px'
+   */
   height: {
     type: [String, Number],
     default: '1px'
   },
+  /**
+   * Background color of the divider line.
+   *
+   * Defaults to `#cbd5e1` when no Tailwind `bg-*` class is used.
+   *
+   * @example '#e2e8f0'
+   */
   color: {
     type: String,
     default: null
   },
+  /**
+   * Vertical spacing (margin) above and below the divider.
+   *
+   * Overridden by `top` and `bottom` if set.
+   *
+   * @default '24px'
+   */
   spaceY: {
     type: [String, Number],
     default: '24px'
   },
+  /**
+   * Horizontal spacing (margin) on both sides of the divider.
+   *
+   * Overridden by `left` and `right` if set.
+   */
   spaceX: {
     type: [String, Number],
     default: null
   },
+  /** Margin above the divider. Overrides `spaceY` for the top side. */
   top: {
     type: [String, Number],
     default: null
   },
+  /** Margin below the divider. Overrides `spaceY` for the bottom side. */
   bottom: {
     type: [String, Number],
     default: null
   },
+  /** Margin to the left of the divider. Overrides `spaceX` for the left side. */
   left: {
     type: [String, Number],
     default: null
   },
+  /** Margin to the right of the divider. Overrides `spaceX` for the right side. */
   right: {
     type: [String, Number],
     default: null

package/dist/components/Head.vue

@@ -1,4 +1,26 @@
+<script setup lang="ts">
+import { createStaticVNode } from 'vue'
+
+const props = defineProps({
+  /**
+   * Render an empty `<head>` before the main head element.
+   *
+   * This is a workaround for Yahoo! Mail on Android, which
+   * strips styles from the first `<head>` element.
+   *
+   * @default false
+   */
+  double: {
+    type: [Boolean, String],
+    default: false
+  }
+})
+
+const EmptyHead = () => createStaticVNode('<head></head>', 1)
+</script>
+
 <template>
+  <EmptyHead v-if="props.double === true || props.double === 'true'" />
   <head>
     <meta charset="utf-8">
     <meta name="x-apple-disable-message-reformatting">

package/dist/components/Heading.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  /**
+   * The heading level (1-6), corresponding to `<h1>` through `<h6>`.
+   * @default 1
+   */
+  level: {
+    type: [String, Number],
+    default: 1,
+    validator: (v: string | number) => [1, 2, 3, 4, 5, 6].includes(Number(v)),
+  },
+})
+
+const attrs = useAttrs()
+const tag = computed(() => `h${props.level}`)
+const mergedClass = computed(() => twMerge('m-0', attrs.class as string))
+</script>
+
+<template>
+  <component :is="tag" v-bind="$attrs" :class="mergedClass">
+    <slot />
+  </component>
+</template>

package/dist/components/Html.vue

@@ -1,53 +1,104 @@
-<script lang="ts">
-import { createStaticVNode } from 'vue'
+<script setup lang="ts">
+import { createStaticVNode, provide, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
 
-export default {
-  name: 'Html',
-  inheritAttrs: false,
-  props: {
-    lang: {
-      type: String,
-      default: 'en'
-    },
-    dir: {
-      type: String as PropType<'ltr' | 'rtl'>,
-      default: 'ltr'
-    },
-    xmlns: {
-      type: String,
-      default: null
-    }
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const props = defineProps({
+  /**
+   * Language code for the `lang` attribute on `<html>`.
+   *
+   * Also provided to the child `Body` component for `xml:lang`.
+   *
+   * @default 'en'
+   */
+  lang: {
+    type: String as PropType<
+      | 'af' | 'ar' | 'az'
+      | 'be' | 'bg' | 'bs'
+      | 'ca' | 'cs' | 'cy'
+      | 'da' | 'de' | 'dv'
+      | 'el' | 'en' | 'es' | 'et' | 'eu'
+      | 'fa' | 'fi' | 'fo' | 'fr'
+      | 'gl' | 'gu'
+      | 'he' | 'hi' | 'hr' | 'hu' | 'hy'
+      | 'id' | 'is' | 'it'
+      | 'ja'
+      | 'ka' | 'kk' | 'kn' | 'ko' | 'ky'
+      | 'lt' | 'lv'
+      | 'mk' | 'mn' | 'mr' | 'ms' | 'mt'
+      | 'nb' | 'nl' | 'nn' | 'no'
+      | 'pa' | 'pl' | 'pt'
+      | 'ro' | 'ru'
+      | 'sa' | 'se' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'sw'
+      | 'ta' | 'te' | 'th' | 'tr' | 'tt'
+      | 'uk' | 'ur' | 'uz'
+      | 'vi'
+      | 'zh'
+      | (string & {})
+    >,
+    default: 'en'
+  },
+  /**
+   * Text direction of the document.
+   *
+   * - `ltr` — left to right (default)
+   * - `rtl` — right to left
+   *
+   * @default 'ltr'
+   */
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    default: 'ltr'
   },
-  setup(props, { slots, attrs }) {
-    return () => {
-      const extraAttrs = Object.entries(attrs)
-        .map(([key, value]) => value === true ? key : `${key}="${value}"`)
-        .join(' ')
-
-      const parts = [
-        `lang="${props.lang}"`,
-        `dir="${props.dir}"`,
-      ]
-
-      if (props.xmlns) {
-        parts.push(
-          `xmlns="${props.xmlns}"`,
-          'xmlns:v="urn:schemas-microsoft-com:vml"',
-          'xmlns:o="urn:schemas-microsoft-com:office:office"',
-        )
-      }
-
-      if (extraAttrs) {
-        parts.push(extraAttrs)
-      }
-
-      return [
-        createStaticVNode(`<html ${parts.join(' ')}>`, 1),
-        slots.default?.(),
-        createStaticVNode('</html>', 1),
-      ]
-    }
+  /**
+   * Whether to include VML and Office XML namespace declarations.
+   *
+   * Required for Outlook VML support (background images, etc.).
+   * Set to `false` to omit the `xmlns:v` and `xmlns:o` attributes.
+   *
+   * @default true
+   */
+  xmlns: {
+    type: [Boolean, String],
+    default: true
+  }
+})
+
+provide('htmlLang', props.lang)
+
+const render = () => {
+  const extraAttrs = Object.entries(attrs)
+    .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+    .join(' ')
+
+  const parts = [
+    `lang="${props.lang}"`,
+    `dir="${props.dir}"`,
+  ]
+
+  if (props.xmlns !== false && props.xmlns !== 'false') {
+    parts.push(
+      'xmlns:v="urn:schemas-microsoft-com:vml"',
+      'xmlns:o="urn:schemas-microsoft-com:office:office"',
+    )
+  }
+
+  if (extraAttrs) {
+    parts.push(extraAttrs)
   }
+
+  return [
+    createStaticVNode(`<html ${parts.join(' ')}>`, 1),
+    slots.default?.(),
+    createStaticVNode('</html>', 1),
+  ]
 }
 </script>
+
+<template>
+  <render />
+</template>