@maizzle/framework 6.0.0-rc.9 → 6.0.0

package/README.md

@@ -7,7 +7,7 @@
       </picture>
     </a>
   </p>
-  <p>Quickly build HTML emails with Tailwind CSS</p>
+  <p>The modern email development framework</p>
   <div>
 
   [![Version][npm-version-shield]][npm]
@@ -20,9 +20,9 @@
 
 ## About
 
-> **Note:** This repository contains the core code of the Maizzle framework. If you want to build HTML emails using Maizzle, visit the [Starter repository](https://github.com/maizzle/maizzle).
+> **Note:** This repository contains the core code of the Maizzle framework. If you want to start building HTML emails using Maizzle, visit the [Starter repository](https://github.com/maizzle/maizzle).
 
-Maizzle is a framework that helps you quickly build HTML emails with [Tailwind CSS](https://tailwindcss.com/).
+Maizzle is a Vite-powered framework for building HTML emails with Vue and Tailwind CSS.
 
 ## Documentation
 

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

@@ -0,0 +1,38 @@
+import { MaizzleConfig } from "./types/config.js";
+//#region src/build.d.ts
+interface BuildResult {
+  files: string[];
+  config: MaizzleConfig;
+}
+/**
+ * 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.
+ */
+declare function build(configInput?: Partial<MaizzleConfig> | string): Promise<BuildResult>;
+/**
+ * Decide whether to build in parallel and with how many workers.
+ *
+ * `config.parallel`:
+ *   - omitted → parallel when `count > 50`, min(CPU count − 1, 8) workers
+ *   - `true`  → always parallel (ignores threshold), default workers
+ *   - `false` → always sequential
+ *   - `{ workers, threshold }` → parallel when `count > threshold` (default 50),
+ *     using `workers` threads (default min(CPU count − 1, 8))
+ *
+ * Workers reload the config file to recover function hooks, so parallel only
+ * applies to file-based configs (a path or the default cwd config) — an inline
+ * config object has no file to reload and always builds sequentially.
+ */
+declare function resolveParallel(config: MaizzleConfig, count: number, configInput: Partial<MaizzleConfig> | string | undefined): {
+  enabled: boolean;
+  workers: number;
+};
+//#endregion
+export { BuildResult, build, resolveParallel };
+//# sourceMappingURL=build.d.ts.map

package/dist/build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.d.ts","names":[],"sources":["../src/build.ts"],"mappings":";;UAaiB,WAAA;EACf,KAAA;EACA,MAAA,EAAQ,aAAa;AAAA;;;;;;;;AAAA;AAavB;;iBAAsB,KAAA,CAAM,WAAA,GAAc,OAAA,CAAQ,aAAA,aAA0B,OAAA,CAAQ,WAAA;;;;;;;;;;;;;AAAW;AA0H/F;iBAAgB,eAAA,CACd,MAAA,EAAQ,aAAA,EACR,KAAA,UACA,WAAA,EAAa,OAAA,CAAQ,aAAA;EAClB,OAAA;EAAkB,OAAA;AAAA"}

package/dist/build.js

@@ -0,0 +1,234 @@
+import { resolveConfig } from "./config/index.js";
+import { EventManager } from "./events/index.js";
+import { normalizeComponentSources } from "./utils/componentSources.js";
+import { createRenderer } from "./render/createRenderer.js";
+import { buildTemplate, computeContentBase } from "./render/buildTemplate.js";
+import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs";
+import { dirname, join, parse, relative, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { availableParallelism } from "node:os";
+import { glob } from "tinyglobby";
+import ora from "ora";
+//#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(configInput) {
+	const start = Date.now();
+	const spinner = ora({
+		text: "Building templates...",
+		spinner: "circleHalves"
+	}).start();
+	try {
+		const config = await resolveConfig(configInput);
+		const events = new EventManager();
+		events.registerConfig(config);
+		await events.fireBeforeCreate({ config });
+		const outputPath = resolve(config.output?.path ?? "dist");
+		const outputExtension = config.output?.extension ?? "html";
+		const contentPatterns = config.content ?? ["emails/**/*.vue"];
+		const contentBase = computeContentBase(contentPatterns);
+		const templateFiles = await glob(contentPatterns);
+		if (templateFiles.length === 0) {
+			spinner.succeed("No templates found");
+			return {
+				files: [],
+				config
+			};
+		}
+		const cwd = process.cwd();
+		if (outputPath === parse(outputPath).root || outputPath === cwd || cwd.startsWith(outputPath + sep)) throw new Error(`Refusing to clear output path "${outputPath}": it is the filesystem root, the current working directory, or a parent of it. Set output.path to a subdirectory like "dist".`);
+		if (existsSync(outputPath)) rmSync(outputPath, {
+			recursive: true,
+			force: true
+		});
+		const outputFiles = [];
+		let droppedAfterBuild = 0;
+		const parallel = resolveParallel(config, templateFiles.length, configInput);
+		if (parallel.enabled) {
+			spinner.text = `Building ${templateFiles.length} templates across ${parallel.workers} workers...`;
+			const result = await runParallelBuild({
+				templateFiles,
+				workers: parallel.workers,
+				config,
+				configInput,
+				outputPath,
+				outputExtension,
+				contentBase
+			});
+			outputFiles.push(...result.files);
+			droppedAfterBuild = result.sfcAfterBuildCount;
+			await copyStatic(config, outputPath);
+			await events.fireAfterBuild({
+				files: outputFiles,
+				config
+			});
+		} else {
+			const renderer = await createRenderer({
+				markdown: config.markdown,
+				root: config.root,
+				componentDirs: normalizeComponentSources(config.components?.source, process.cwd()),
+				vite: config.vite
+			});
+			try {
+				for (const templatePath of templateFiles) {
+					const { files } = await buildTemplate(templatePath, {
+						config,
+						renderer,
+						events,
+						outputPath,
+						outputExtension,
+						contentBase
+					});
+					outputFiles.push(...files);
+				}
+				await copyStatic(config, outputPath);
+				await events.fireAfterBuild({
+					files: outputFiles,
+					config
+				});
+			} finally {
+				await renderer.close();
+			}
+		}
+		if (droppedAfterBuild > 0) console.warn(`[maizzle] Skipped ${droppedAfterBuild} SFC-registered afterBuild handler(s): afterBuild can't run inside a parallel build worker. Move build-completion logic to the config's afterBuild hook.`);
+		const duration = ((Date.now() - start) / 1e3).toFixed(2);
+		const count = outputFiles.length;
+		spinner.stopAndPersist({
+			symbol: "✅",
+			text: `Built ${count} template${count !== 1 ? "s" : ""} in ${duration}s`
+		});
+		return {
+			files: outputFiles,
+			config
+		};
+	} catch (err) {
+		if (spinner.isSpinning) spinner.fail("Build failed");
+		throw err;
+	}
+}
+/**
+* Default template count above which parallel build turns on. Benchmarked
+* crossover (with the worker cap below) is ~25 templates; 50 leaves margin so
+* auto-parallel only kicks in where it's a reliable win across hardware.
+* Override per project with `parallel: { threshold }`.
+*/
+const DEFAULT_PARALLEL_THRESHOLD = 50;
+/**
+* Default worker cap. Each worker runs a full Vite SSR renderer, so startup +
+* contention outweighs added parallelism past ~8 — benchmarks showed 8 beating
+* 12/16/23 at every size. Override with `parallel: { workers }`.
+*/
+const DEFAULT_MAX_WORKERS = 8;
+/**
+* Decide whether to build in parallel and with how many workers.
+*
+* `config.parallel`:
+*   - omitted → parallel when `count > 50`, min(CPU count − 1, 8) workers
+*   - `true`  → always parallel (ignores threshold), default workers
+*   - `false` → always sequential
+*   - `{ workers, threshold }` → parallel when `count > threshold` (default 50),
+*     using `workers` threads (default min(CPU count − 1, 8))
+*
+* Workers reload the config file to recover function hooks, so parallel only
+* applies to file-based configs (a path or the default cwd config) — an inline
+* config object has no file to reload and always builds sequentially.
+*/
+function resolveParallel(config, count, configInput) {
+	const setting = config.parallel;
+	if (setting === false) return {
+		enabled: false,
+		workers: 0
+	};
+	if (!(typeof configInput === "string" || configInput == null)) return {
+		enabled: false,
+		workers: 0
+	};
+	const cpus = availableParallelism();
+	let maxWorkers = Math.min(Math.max(1, cpus - 1), DEFAULT_MAX_WORKERS);
+	let threshold = DEFAULT_PARALLEL_THRESHOLD;
+	const ignoreThreshold = setting === true;
+	if (typeof setting === "object" && setting !== null) {
+		if (typeof setting.workers === "number" && setting.workers > 0) maxWorkers = Math.floor(setting.workers);
+		if (typeof setting.threshold === "number" && setting.threshold >= 0) threshold = Math.floor(setting.threshold);
+	}
+	if (!ignoreThreshold && count <= threshold) return {
+		enabled: false,
+		workers: 0
+	};
+	const workers = Math.min(maxWorkers, count);
+	return {
+		enabled: workers >= 2 && count >= 2,
+		workers
+	};
+}
+/**
+* Run the build across worker threads. Each worker reloads the config (for its
+* function hooks), builds its batch via the same `buildTemplate` as the
+* sequential path, and returns the files it wrote. beforeCreate/afterBuild stay
+* on the main thread (handled by the caller).
+*/
+async function runParallelBuild(opts) {
+	const { templateFiles, workers, config, configInput, outputPath, outputExtension, contentBase } = opts;
+	const { default: Tinypool } = await import("tinypool");
+	const workerPath = resolve(dirname(fileURLToPath(import.meta.url)), "render/parallel/worker.mjs");
+	const configPath = typeof configInput === "string" ? configInput : void 0;
+	const configData = JSON.parse(JSON.stringify(config));
+	const batches = shardEvenly(templateFiles, workers);
+	const pool = new Tinypool({
+		filename: workerPath,
+		minThreads: batches.length,
+		maxThreads: batches.length
+	});
+	try {
+		const results = await Promise.all(batches.map((templatePaths) => pool.run({
+			templatePaths,
+			configPath,
+			configData,
+			outputPath,
+			outputExtension,
+			contentBase
+		})));
+		return {
+			files: results.flatMap((r) => r.files),
+			sfcAfterBuildCount: results.reduce((n, r) => n + r.sfcAfterBuildCount, 0)
+		};
+	} finally {
+		await pool.destroy();
+	}
+}
+/** Round-robin items into up to `buckets` non-empty groups for even balance. */
+function shardEvenly(items, buckets) {
+	const out = Array.from({ length: buckets }, () => []);
+	items.forEach((item, i) => out[i % buckets].push(item));
+	return out.filter((b) => b.length > 0);
+}
+async function copyStatic(config, outputPath) {
+	const sources = config.static?.source ?? ["public/**/*.*"];
+	const destination = config.static?.destination ?? "public";
+	const files = await glob(sources);
+	const bases = sources.filter((s) => !s.startsWith("!")).map(staticBase);
+	for (const file of files) {
+		const abs = resolve(file);
+		const destPath = join(outputPath, destination, relative(bases.filter((b) => abs === b || abs.startsWith(b + sep)).sort((a, b) => b.length - a.length)[0] ?? bases[0] ?? resolve("."), abs));
+		const destDir = dirname(destPath);
+		if (!existsSync(destDir)) mkdirSync(destDir, { recursive: true });
+		cpSync(file, destPath);
+	}
+}
+/** Absolute static (non-glob) prefix of a source pattern, used as the strip base. */
+function staticBase(pattern) {
+	const staticPart = pattern.split(/[*{?[]/)[0];
+	return resolve(/[/\\]$/.test(staticPart) ? staticPart : dirname(staticPart));
+}
+//#endregion
+export { build, resolveParallel };
+
+//# sourceMappingURL=build.js.map

package/dist/build.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.js","names":["parsePath"],"sources":["../src/build.ts"],"sourcesContent":["import { mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, relative, join, parse as parsePath, sep } from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { availableParallelism } from 'node:os'\nimport { glob } from 'tinyglobby'\nimport ora from 'ora'\nimport { resolveConfig } from './config/index.ts'\nimport { EventManager } from './events/index.ts'\nimport { createRenderer } from './render/createRenderer.ts'\nimport { normalizeComponentSources } from './utils/componentSources.ts'\nimport { buildTemplate, computeContentBase } from './render/buildTemplate.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  try {\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. Guard against a\n    // misconfigured output.path (e.g. '.', '', '../..') that resolves to the\n    // project root or a parent of it — rmSync would wipe the whole project.\n    const cwd = process.cwd()\n    if (outputPath === parsePath(outputPath).root || outputPath === cwd || cwd.startsWith(outputPath + sep)) {\n      throw new Error(`Refusing to clear output path \"${outputPath}\": it is the filesystem root, the current working directory, or a parent of it. Set output.path to a subdirectory like \"dist\".`)\n    }\n\n    if (existsSync(outputPath)) {\n      rmSync(outputPath, { recursive: true, force: true })\n    }\n\n    const outputFiles: string[] = []\n    let droppedAfterBuild = 0\n\n    const parallel = resolveParallel(config, templateFiles.length, configInput)\n\n    if (parallel.enabled) {\n      spinner.text = `Building ${templateFiles.length} templates across ${parallel.workers} workers...`\n\n      const result = await runParallelBuild({\n        templateFiles,\n        workers: parallel.workers,\n        config,\n        configInput,\n        outputPath,\n        outputExtension,\n        contentBase,\n      })\n\n      outputFiles.push(...result.files)\n      droppedAfterBuild = result.sfcAfterBuildCount\n\n      await copyStatic(config, outputPath)\n      await events.fireAfterBuild({ files: outputFiles, config })\n    } else {\n      const renderer = await createRenderer({ markdown: config.markdown, root: config.root, componentDirs: normalizeComponentSources(config.components?.source, process.cwd()), vite: config.vite })\n\n      try {\n        for (const templatePath of templateFiles) {\n          const { files } = await buildTemplate(templatePath, { config, renderer, events, outputPath, outputExtension, contentBase })\n          outputFiles.push(...files)\n        }\n\n        await copyStatic(config, outputPath)\n        await events.fireAfterBuild({ files: outputFiles, config })\n      } finally {\n        await renderer.close()\n      }\n    }\n\n    if (droppedAfterBuild > 0) {\n      console.warn(`[maizzle] Skipped ${droppedAfterBuild} SFC-registered afterBuild handler(s): afterBuild can't run inside a parallel build worker. Move build-completion logic to the config's afterBuild hook.`)\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  } catch (err) {\n    // Stop the spinner so a thrown error doesn't leave it spinning forever.\n    if (spinner.isSpinning) spinner.fail('Build failed')\n    throw err\n  }\n}\n\n/**\n * Default template count above which parallel build turns on. Benchmarked\n * crossover (with the worker cap below) is ~25 templates; 50 leaves margin so\n * auto-parallel only kicks in where it's a reliable win across hardware.\n * Override per project with `parallel: { threshold }`.\n */\nconst DEFAULT_PARALLEL_THRESHOLD = 50\n\n/**\n * Default worker cap. Each worker runs a full Vite SSR renderer, so startup +\n * contention outweighs added parallelism past ~8 — benchmarks showed 8 beating\n * 12/16/23 at every size. Override with `parallel: { workers }`.\n */\nconst DEFAULT_MAX_WORKERS = 8\n\n/**\n * Decide whether to build in parallel and with how many workers.\n *\n * `config.parallel`:\n *   - omitted → parallel when `count > 50`, min(CPU count − 1, 8) workers\n *   - `true`  → always parallel (ignores threshold), default workers\n *   - `false` → always sequential\n *   - `{ workers, threshold }` → parallel when `count > threshold` (default 50),\n *     using `workers` threads (default min(CPU count − 1, 8))\n *\n * Workers reload the config file to recover function hooks, so parallel only\n * applies to file-based configs (a path or the default cwd config) — an inline\n * config object has no file to reload and always builds sequentially.\n */\nexport function resolveParallel(\n  config: MaizzleConfig,\n  count: number,\n  configInput: Partial<MaizzleConfig> | string | undefined,\n): { enabled: boolean; workers: number } {\n  const setting = config.parallel\n  if (setting === false) return { enabled: false, workers: 0 }\n\n  const fileBased = typeof configInput === 'string' || configInput == null\n  if (!fileBased) return { enabled: false, workers: 0 }\n\n  const cpus = availableParallelism()\n  const defaultWorkers = Math.min(Math.max(1, cpus - 1), DEFAULT_MAX_WORKERS)\n\n  let maxWorkers = defaultWorkers\n  let threshold = DEFAULT_PARALLEL_THRESHOLD\n  // `true` opts in regardless of count; object/omitted stay threshold-gated.\n  const ignoreThreshold = setting === true\n\n  if (typeof setting === 'object' && setting !== null) {\n    if (typeof setting.workers === 'number' && setting.workers > 0) maxWorkers = Math.floor(setting.workers)\n    if (typeof setting.threshold === 'number' && setting.threshold >= 0) threshold = Math.floor(setting.threshold)\n  }\n\n  if (!ignoreThreshold && count <= threshold) return { enabled: false, workers: 0 }\n\n  const workers = Math.min(maxWorkers, count)\n  return { enabled: workers >= 2 && count >= 2, workers }\n}\n\n/**\n * Run the build across worker threads. Each worker reloads the config (for its\n * function hooks), builds its batch via the same `buildTemplate` as the\n * sequential path, and returns the files it wrote. beforeCreate/afterBuild stay\n * on the main thread (handled by the caller).\n */\nasync function runParallelBuild(opts: {\n  templateFiles: string[]\n  workers: number\n  config: MaizzleConfig\n  configInput: Partial<MaizzleConfig> | string | undefined\n  outputPath: string\n  outputExtension: string\n  contentBase: string\n}): Promise<{ files: string[]; sfcAfterBuildCount: number }> {\n  const { templateFiles, workers, config, configInput, outputPath, outputExtension, contentBase } = opts\n\n  const { default: Tinypool } = await import('tinypool')\n  const workerPath = resolve(dirname(fileURLToPath(import.meta.url)), 'render/parallel/worker.mjs')\n\n  const configPath = typeof configInput === 'string' ? configInput : undefined\n  // Serializable snapshot of the post-beforeCreate config (functions dropped).\n  const configData = JSON.parse(JSON.stringify(config)) as Partial<MaizzleConfig>\n\n  const batches = shardEvenly(templateFiles, workers)\n\n  const pool = new Tinypool({ filename: workerPath, minThreads: batches.length, maxThreads: batches.length })\n\n  try {\n    const results = await Promise.all(\n      batches.map(templatePaths => pool.run({\n        templatePaths,\n        configPath,\n        configData,\n        outputPath,\n        outputExtension,\n        contentBase,\n      })),\n    )\n\n    return {\n      files: results.flatMap(r => r.files),\n      sfcAfterBuildCount: results.reduce((n, r) => n + r.sfcAfterBuildCount, 0),\n    }\n  } finally {\n    await pool.destroy()\n  }\n}\n\n/** Round-robin items into up to `buckets` non-empty groups for even balance. */\nfunction shardEvenly<T>(items: T[], buckets: number): T[][] {\n  const out: T[][] = Array.from({ length: buckets }, () => [])\n  items.forEach((item, i) => out[i % buckets].push(item))\n  return out.filter(b => b.length > 0)\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  // One glob call so negation patterns still apply across the whole set.\n  const files = await glob(sources)\n\n  // Absolute base dir to strip, per positive source pattern. Each file keeps\n  // the structure under its own pattern's base — using only sources[0] sends\n  // files from other roots to the wrong place (or escaping the output dir).\n  const bases = sources.filter(s => !s.startsWith('!')).map(staticBase)\n\n  for (const file of files) {\n    const abs = resolve(file)\n    const base = bases\n      .filter(b => abs === b || abs.startsWith(b + sep))\n      .sort((a, b) => b.length - a.length)[0] ?? bases[0] ?? resolve('.')\n\n    const destPath = join(outputPath, destination, relative(base, abs))\n    const destDir = dirname(destPath)\n\n    if (!existsSync(destDir)) {\n      mkdirSync(destDir, { recursive: true })\n    }\n\n    cpSync(file, destPath)\n  }\n}\n\n/** Absolute static (non-glob) prefix of a source pattern, used as the strip base. */\nfunction staticBase(pattern: string): string {\n  const staticPart = pattern.split(/[*{?[]/)[0]\n  // Treat both separators as trailing: resolved patterns use '\\' on Windows.\n  return resolve(/[/\\\\]$/.test(staticPart) ? staticPart : dirname(staticPart))\n}\n"],"mappings":"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"}

package/dist/components/Body.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { createStaticVNode, inject, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -65,11 +67,35 @@ const props = defineProps({
   ariaLabel: {
     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,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const htmlLang = inject<string>('htmlLang', 'en')
 
+const msoBody = `<!--[if mso]>
+  <xml>
+    <o:OfficeDocumentSettings>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    <w:WordDocument>
+      <w:DontUseAdvancedTypographyReadingMail />
+    </w:WordDocument>
+  </xml>
+<![endif]-->`
+
 const render = () => {
   const extraAttrs = Object.entries(attrs)
     .map(([key, value]) => value === true ? key : `${key}="${value}"`)
@@ -78,10 +104,12 @@ const render = () => {
   const lang = props.xmlLang ?? htmlLang
 
   const parts = [
-    `xml:lang="${lang}"`,
     `dir="${props.dir}"`,
-    'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
+    'style="margin: 0; padding: 0; width: 100%; height: 100%; word-break: break-word;"',
   ]
+  if (outlookFallback) {
+    parts.unshift(`xml:lang="${lang}"`)
+  }
 
   if (extraAttrs) {
     parts.push(extraAttrs)
@@ -98,6 +126,7 @@ const render = () => {
 
   return [
     createStaticVNode(`<body ${parts.join(' ')}>`, 1),
+    outlookFallback ? createStaticVNode(`<span style="display: none">${msoBody}</span>`, 1) : null,
     createStaticVNode(`<div ${articleParts}>`, 1),
     slots.default?.(),
     createStaticVNode('</div>', 1),

package/dist/components/Button.vue

@@ -1,8 +1,9 @@
 <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'
 
 defineOptions({ inheritAttrs: false })
 
@@ -35,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.
@@ -103,9 +86,41 @@ const props = defineProps({
   iconClass: {
     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,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const parsedIconWidth = computed(() => parseInt(String(props.iconWidth), 10))
 
 const alignClass = computed(() => props.align ? ({
@@ -114,78 +129,92 @@ 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(() => {
+const baseClasses = computed(() => {
   if (props.variant === 'link') {
-    return [
-      'text-decoration: none;',
-      `color: ${textColor.value};`,
-    ].join('')
+    return 'no-underline text-gray-950'
   }
 
-  const base = [
-    'display: inline-block;',
-    'text-decoration: none;',
-    'padding: 16px 24px;',
-    'font-size: 16px;',
-    'line-height: 1;',
-    'border-radius: 4px;',
-    `color: ${textColor.value};`,
+  const classes = [
+    'inline-block',
+    'no-underline',
+    'px-6',
+    'py-4',
+    'text-base',
+    'leading-none',
+    'rounded',
   ]
 
   if (props.variant === 'outline') {
-    base.push(
-      'background-color: transparent;',
-      `border: 1px solid ${props.bgColor};`,
-    )
+    classes.push('bg-transparent', 'border', 'border-solid', 'border-indigo-700', 'text-indigo-700')
   } else if (props.variant === 'ghost') {
-    base.push('background-color: transparent;')
+    classes.push('bg-transparent', 'text-indigo-700', 'hover:bg-indigo-50')
   } else {
-    base.push(`background-color: ${props.bgColor};`)
+    classes.push('bg-indigo-700', 'text-white')
   }
 
-  return base.join('')
+  return classes.join(' ')
 })
 
 const isLink = computed(() => props.variant === 'link')
 
-const defaultClasses = computed(() => {
-  if (props.variant === 'ghost') return 'hover:bg-indigo-50'
-  return ''
+const mergedClass = computed(() => twMerge(baseClasses.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="$attrs.style as any"
       :class="mergedClass"
     >
       <template v-if="!isLink">
-        <Outlook><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="`mso-text-raise: ${msoPt}`">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`">
+          <span :style="textSpanStyle">
+            <img :src="icon" :width="parsedIconWidth" :alt="iconAlt" style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
           </span>
-          <Outlook><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="`mso-text-raise: ${msoPt}`"><slot /></span>
+        <span :style="textSpanStyle"><slot /></span>
         <template v-if="icon && iconPosition === 'right'">
-          <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
-          <span :style="`mso-text-raise: ${msoPt}`">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`">
+          <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><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
+        <MsoSpacerRight v-if="outlookFallback" />
       </template>
       <template v-else>
         <slot />

package/dist/components/CodeBlock.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
 import { codeToHtml, getSingletonHighlighter, type BundledLanguage, type BundledTheme } from 'shiki'
+import { buildCodeBlock, codeBlockPreClass } from './utils'
 
 export default {
   props: {
@@ -56,11 +58,11 @@ export default {
       .replace(/^<pre[^>]*><code>/, '')
       .replace(/<\/code><\/pre>$/, '')
 
-    const classes = ['font-mono', attrs.class].filter(Boolean).join(' ')
-    const baseStyles = `background-color:${bg};padding:16px;overflow:auto;white-space:pre;word-wrap:normal;word-break:normal;word-spacing:normal`
-    const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
+    const preClass = twMerge(codeBlockPreClass(bg), attrs.class as string)
+    const tdClass = twMerge(`bg-[${bg}]`, props.tdClass)
+    const styleAttr = attrs.style ? ` style="${attrs.style}"` : ''
 
-    const html = `<table class="w-full"><tr><td class="${props.tdClass}"><pre class="${classes}" style="${styles}"><code>${codeContent}</code></pre></td></tr></table>`
+    const html = buildCodeBlock(codeContent, bg, { preClass, tdClass, styleAttr })
 
     return () => createStaticVNode(html, 1)
   }