@maizzle/framework 6.0.0-rc.24 → 6.0.0-rc.26

package/dist/build.d.ts

@@ -15,6 +15,24 @@ interface BuildResult {
  * 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 };
+export { BuildResult, build, resolveParallel };
 //# 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":";;UAeiB,WAAA;EACf,KAAA;EACA,MAAA,EAAQ,aAAa;AAAA;;;;;;;;AAAA;AAavB;;iBAAsB,KAAA,CAAM,WAAA,GAAc,OAAA,CAAQ,aAAA,aAA0B,OAAA,CAAQ,WAAA"}
+{"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;AA6G/F;iBAAgB,eAAA,CACd,MAAA,EAAQ,aAAA,EACR,KAAA,UACA,WAAA,EAAa,OAAA,CAAQ,aAAA;EAClB,OAAA;EAAkB,OAAA;AAAA"}

package/dist/build.js

@@ -1,16 +1,14 @@
 import { resolveConfig } from "./config/index.js";
 import { EventManager } from "./events/index.js";
-import { runTransformers } from "./transformers/index.js";
 import { normalizeComponentSources } from "./utils/componentSources.js";
 import { createRenderer } from "./render/createRenderer.js";
-import { createPlaintext } from "./plaintext.js";
-import { stripForHtml, stripForPlaintext } from "./utils/output-markers.js";
-import { _setCurrentTemplate } from "./composables/useCurrentTemplate.js";
-import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
-import { basename, dirname, join, parse, relative, resolve } from "node:path";
+import { buildTemplate, computeContentBase } from "./render/buildTemplate.js";
+import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { availableParallelism } from "node:os";
 import { glob } from "tinyglobby";
 import ora from "ora";
-import defu from "defu";
 //#region src/build.ts
 /**
 * Build all SFC email templates to HTML files.
@@ -48,97 +46,56 @@ async function build(configInput) {
 		recursive: true,
 		force: true
 	});
-	const renderer = await createRenderer({
-		markdown: config.markdown,
-		root: config.root,
-		componentDirs: normalizeComponentSources(config.components?.source, process.cwd()),
-		vite: config.vite
-	});
 	const outputFiles = [];
-	try {
-		for (const templatePath of templateFiles) {
-			const absolutePath = resolve(templatePath);
-			const parsedPath = parse(absolutePath);
-			const template = {
-				source: readFileSync(absolutePath, "utf-8"),
-				path: parsedPath
-			};
-			_setCurrentTemplate(parsedPath);
-			try {
-				await events.fireBeforeRender({
-					config,
-					template
-				});
-				const rendered = await renderer.render(absolutePath, config);
-				/**
-				* Register SFC event handlers collected during render so they take
-				* part in the post-render events (afterRender / afterTransform).
-				* They're cleared at the end of the iteration so they don't
-				* leak into the next template.
-				*/
-				for (const { name, handler } of rendered.sfcEventHandlers) events.on(name, handler);
-				let html = await events.fireAfterRender({
-					config,
-					template,
-					html: rendered.html
-				});
-				/**
-				* Use the per-template merged config (from defineConfig() in the SFC) so
-				* that template-level overrides like css.safe: false are respected
-				* by transformers.
-				*/
-				const templateConfig = rendered.templateConfig;
-				const doctype = rendered.doctype ?? templateConfig.doctype ?? "<!DOCTYPE html>";
-				if (templateConfig.useTransformers !== false) html = await runTransformers(html, templateConfig, absolutePath, doctype, rendered.tailwindBlocks);
-				html = await events.fireAfterTransform({
-					config,
-					template,
-					html
-				});
-				if (doctype) html = `${doctype}\n${html}`;
-				const htmlOut = stripForHtml(html);
-				const sfcOutputPath = rendered.outputPath;
-				let outputFilePath;
-				if (sfcOutputPath) {
-					const parsed = parse(resolve(sfcOutputPath));
-					const ext = parsed.ext ? parsed.ext.slice(1) : outputExtension;
-					outputFilePath = join(parsed.dir, `${parsed.name}.${ext}`);
-				} else outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase);
-				mkdirSync(dirname(outputFilePath), { recursive: true });
-				writeFileSync(outputFilePath, htmlOut);
-				outputFiles.push(outputFilePath);
-				const globalPlaintext = templateConfig.plaintext;
-				const sfcPlaintext = rendered.plaintext;
-				if (globalPlaintext || sfcPlaintext) {
-					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 (sfcOutputPath) {
-						const parsed = parse(outputFilePath);
-						ptOutputPath = join(parsed.dir, `${parsed.name}.${ptExtension}`);
-					} 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);
-				}
-			} finally {
-				_setCurrentTemplate(void 0);
-				events.clearSfcHandlers();
-			}
-		}
+	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
 		});
-	} finally {
-		await renderer.close();
+	} 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({
@@ -151,20 +108,100 @@ async function build(configInput) {
 	};
 }
 /**
-* Extract the static (non-glob) prefix from content patterns.
+* 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.
 *
-* For example, `['/abs/path/emails/**\/*.vue']` → `'/abs/path/emails'`
+* `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))
 *
-* This is used to strip the content base from template paths
-* so the output preserves only the subdirectory structure.
+* 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).
 */
-function computeContentBase(patterns) {
-	const staticPart = (patterns.find((p) => !p.startsWith("!")) ?? patterns[0]).split(/[*{?[]/)[0];
-	return resolve(staticPart.endsWith("/") ? staticPart : dirname(staticPart));
+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();
+	}
 }
-function resolveOutputPath(templatePath, outputDir, extension, contentBase) {
-	const name = basename(templatePath).replace(/\.(vue|md)$/, "");
-	return join(outputDir, relative(contentBase, dirname(resolve(templatePath))), `${name}.${extension}`);
+/** 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/**/*.*"];
@@ -178,6 +215,6 @@ async function copyStatic(config, outputPath) {
 	}
 }
 //#endregion
-export { build };
+export { build, resolveParallel };
 
 //# sourceMappingURL=build.js.map

package/dist/build.js.map

@@ -1 +1 @@
-{"version":3,"file":"build.js","names":["parsePath"],"sources":["../src/build.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, basename, relative, join, parse as parsePath } 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 { normalizeComponentSources } from './utils/componentSources.ts'\nimport { _setCurrentTemplate } from './composables/useCurrentTemplate.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: normalizeComponentSources(config.components?.source, process.cwd()), vite: config.vite })\n  const outputFiles: string[] = []\n\n  try {\n    for (const templatePath of templateFiles) {\n      const absolutePath = resolve(templatePath)\n      const parsedPath = parsePath(absolutePath)\n      const template = { source: readFileSync(absolutePath, 'utf-8'), path: parsedPath }\n\n      _setCurrentTemplate(parsedPath)\n\n      try {\n        await events.fireBeforeRender({ config, template })\n\n        const rendered = await renderer.render(absolutePath, config)\n\n        /**\n         * Register SFC event handlers collected during render so they take\n         * part in the post-render events (afterRender / afterTransform).\n         * They're cleared at the end of the iteration so they don't\n         * leak into the next template.\n         */\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        /**\n         * Use the per-template merged config (from defineConfig() in the SFC) so\n         * that template-level overrides like css.safe: false are respected\n         * by transformers.\n         */\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        if (doctype) html = `${doctype}\\n${html}`\n\n        const htmlOut = stripForHtml(html)\n        const sfcOutputPath = rendered.outputPath\n        let outputFilePath: string\n\n        if (sfcOutputPath) {\n          const parsed = parsePath(resolve(sfcOutputPath))\n          const ext = parsed.ext ? parsed.ext.slice(1) : outputExtension\n          outputFilePath = join(parsed.dir, `${parsed.name}.${ext}`)\n        } else {\n          outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase)\n        }\n\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 (sfcOutputPath) {\n            const parsed = parsePath(outputFilePath)\n            ptOutputPath = join(parsed.dir, `${parsed.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      } finally {\n        _setCurrentTemplate(undefined)\n        events.clearSfcHandlers()\n      }\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":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,eAAsB,MAAM,aAAqE;CAC/F,MAAM,QAAQ,KAAK,IAAI;CACvB,MAAM,UAAU,IAAI;EAAE,MAAM;EAAyB,SAAS;CAAe,CAAC,EAAE,MAAM;CAEtF,MAAM,SAAS,MAAM,cAAc,WAAW;CAE9C,MAAM,SAAS,IAAI,aAAa;CAChC,OAAO,eAAe,MAAM;CAC5B,MAAM,OAAO,iBAAiB,EAAE,OAAO,CAAC;CAExC,MAAM,aAAa,QAAQ,OAAO,QAAQ,QAAQ,MAAM;CACxD,MAAM,kBAAkB,OAAO,QAAQ,aAAa;CAEpD,MAAM,kBAAkB,OAAO,WAAW,CAAC,iBAAiB;CAC5D,MAAM,cAAc,mBAAmB,eAAe;CACtD,MAAM,gBAAgB,MAAM,KAAK,eAAe;CAEhD,IAAI,cAAc,WAAW,GAAG;EAC9B,QAAQ,QAAQ,oBAAoB;EACpC,OAAO;GAAE,OAAO,CAAC;GAAG;EAAO;CAC7B;CAGA,IAAI,WAAW,UAAU,GACvB,OAAO,YAAY;EAAE,WAAW;EAAM,OAAO;CAAK,CAAC;CAGrD,MAAM,WAAW,MAAM,eAAe;EAAE,UAAU,OAAO;EAAU,MAAM,OAAO;EAAM,eAAe,0BAA0B,OAAO,YAAY,QAAQ,QAAQ,IAAI,CAAC;EAAG,MAAM,OAAO;CAAK,CAAC;CAC7L,MAAM,cAAwB,CAAC;CAE/B,IAAI;EACF,KAAK,MAAM,gBAAgB,eAAe;GACxC,MAAM,eAAe,QAAQ,YAAY;GACzC,MAAM,aAAaA,MAAU,YAAY;GACzC,MAAM,WAAW;IAAE,QAAQ,aAAa,cAAc,OAAO;IAAG,MAAM;GAAW;GAEjF,oBAAoB,UAAU;GAE9B,IAAI;IACF,MAAM,OAAO,iBAAiB;KAAE;KAAQ;IAAS,CAAC;IAElD,MAAM,WAAW,MAAM,SAAS,OAAO,cAAc,MAAM;;;;;;;IAQ3D,KAAK,MAAM,EAAE,MAAM,aAAa,SAAS,kBACvC,OAAO,GAAG,MAAM,OAAO;IAGzB,IAAI,OAAO,MAAM,OAAO,gBAAgB;KAAE;KAAQ;KAAU,MAAM,SAAS;IAAK,CAAC;;;;;;IAOjF,MAAM,iBAAiB,SAAS;IAEhC,MAAM,UAAU,SAAS,WAAW,eAAe,WAAW;IAE9D,IAAI,eAAe,oBAAoB,OACrC,OAAO,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,SAAS,SAAS,cAAc;IAGnG,OAAO,MAAM,OAAO,mBAAmB;KAAE;KAAQ;KAAU;IAAK,CAAC;IACjE,IAAI,SAAS,OAAO,GAAG,QAAQ,IAAI;IAEnC,MAAM,UAAU,aAAa,IAAI;IACjC,MAAM,gBAAgB,SAAS;IAC/B,IAAI;IAEJ,IAAI,eAAe;KACjB,MAAM,SAASA,MAAU,QAAQ,aAAa,CAAC;KAC/C,MAAM,MAAM,OAAO,MAAM,OAAO,IAAI,MAAM,CAAC,IAAI;KAC/C,iBAAiB,KAAK,OAAO,KAAK,GAAG,OAAO,KAAK,GAAG,KAAK;IAC3D,OACE,iBAAiB,kBAAkB,cAAc,YAAY,iBAAiB,WAAW;IAG3F,UAAU,QAAQ,cAAc,GAAG,EAAE,WAAW,KAAK,CAAC;IACtD,cAAc,gBAAgB,OAAO;IACrC,YAAY,KAAK,cAAc;IAG/B,MAAM,kBAAkB,eAAe;IACvC,MAAM,eAAe,SAAS;IAE9B,IAAI,mBAAmB,cAAc;KACnC,MAAM,YAAY,OAAO,oBAAoB,WAAW,kBAAkB,CAAC;KAC3E,MAAM,eAAe,KAAK,cAAc,SAAS,UAAU,OAAO;KAClE,MAAM,YAAY,gBAAgB,kBAAkB,IAAI,GAAG,YAAY;KACvE,MAAM,cAAc,cAAc,aAAa,UAAU,aAAa;KAEtE,IAAI;KAEJ,IAAI,cAAc,aAAa;MAC7B,MAAM,OAAO,SAAS,YAAY,EAAE,QAAQ,eAAe,EAAE;MAC7D,eAAe,KAAK,QAAQ,aAAa,WAAW,GAAG,GAAG,KAAK,GAAG,aAAa;KACjF,OAAO,IAAI,eAAe;MACxB,MAAM,SAASA,MAAU,cAAc;MACvC,eAAe,KAAK,OAAO,KAAK,GAAG,OAAO,KAAK,GAAG,aAAa;KACjE,OAAO,IAAI,UAAU,aACnB,eAAe,kBAAkB,cAAc,QAAQ,UAAU,WAAW,GAAG,aAAa,WAAW;UAEvG,eAAe,kBAAkB,cAAc,YAAY,aAAa,WAAW;KAGrF,UAAU,QAAQ,YAAY,GAAG,EAAE,WAAW,KAAK,CAAC;KACpD,cAAc,cAAc,SAAS;IACvC;GACF,UAAU;IACR,oBAAoB,KAAA,CAAS;IAC7B,OAAO,iBAAiB;GAC1B;EACF;EAEA,MAAM,WAAW,QAAQ,UAAU;EACnC,MAAM,OAAO,eAAe;GAAE,OAAO;GAAa;EAAO,CAAC;CAC5D,UAAU;EACR,MAAM,SAAS,MAAM;CACvB;CAEA,MAAM,aAAa,KAAK,IAAI,IAAI,SAAS,KAAM,QAAQ,CAAC;CACxD,MAAM,QAAQ,YAAY;CAC1B,QAAQ,eAAe;EACrB,QAAQ;EACR,MAAM,SAAS,MAAM,WAAW,UAAU,IAAI,MAAM,GAAG,MAAM,SAAS;CACxE,CAAC;CAED,OAAO;EAAE,OAAO;EAAa;CAAO;AACtC;;;;;;;;;AAUA,SAAS,mBAAmB,UAA4B;CAKtD,MAAM,cAHU,SAAS,MAAK,MAAK,CAAC,EAAE,WAAW,GAAG,CAAC,KAAK,SAAS,IAGxC,MAAM,QAAQ,EAAE;CAG3C,OAAO,QAAQ,WAAW,SAAS,GAAG,IAAI,aAAa,QAAQ,UAAU,CAAC;AAC5E;AAEA,SAAS,kBAAkB,cAAsB,WAAmB,WAAmB,aAA6B;CAClH,MAAM,OAAO,SAAS,YAAY,EAAE,QAAQ,eAAe,EAAE;CAI7D,OAAO,KAAK,WAFA,SAAS,aAAa,QADd,QAAQ,YACwB,CAAC,CAE5B,GAAG,GAAG,KAAK,GAAG,WAAW;AACpD;AAEA,eAAe,WAAW,QAAuB,YAAmC;CAClF,MAAM,UAAU,OAAO,QAAQ,UAAU,CAAC,eAAe;CACzD,MAAM,cAAc,OAAO,QAAQ,eAAe;CAElD,MAAM,QAAQ,MAAM,KAAK,OAAO;CAEhC,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,WAAW,KAAK,YAAY,aAAa,SAAS,QAAQ,QAAQ,EAAE,EAAE,QAAQ,SAAS,EAAE,GAAG,IAAI,CAAC;EACvG,MAAM,UAAU,QAAQ,QAAQ;EAEhC,IAAI,CAAC,WAAW,OAAO,GACrB,UAAU,SAAS,EAAE,WAAW,KAAK,CAAC;EAGxC,OAAO,MAAM,QAAQ;CACvB;AACF"}
+{"version":3,"file":"build.js","names":[],"sources":["../src/build.ts"],"sourcesContent":["import { mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, relative, join } 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  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 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}\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  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

@@ -85,6 +85,17 @@ 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}"`)
@@ -115,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

@@ -129,48 +129,35 @@ const alignClass = computed(() => props.align ? ({
   right: 'text-right',
 })[props.align] || '' : '')
 
-const styles = computed(() => {
+const baseClasses = computed(() => {
   if (props.variant === 'link') {
-    return 'text-decoration: none; color: #4338ca;'
+    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;',
+  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 #4338ca;',
-      'color: #4338ca;',
-    )
+    classes.push('bg-transparent', 'border', 'border-solid', 'border-indigo-700', 'text-indigo-700')
   } else if (props.variant === 'ghost') {
-    base.push(
-      'background-color: transparent;',
-      'color: #4338ca;',
-    )
+    classes.push('bg-transparent', 'text-indigo-700', 'hover:bg-indigo-50')
   } else {
-    base.push(
-      'background-color: #4338ca;',
-      'color: #fffffe;',
-    )
+    classes.push('bg-indigo-700', 'text-white')
   }
 
-  return base.join('')
+  return classes.join(' ')
 })
 
 const isLink = computed(() => props.variant === 'link')
 
-const variantClasses = computed(() =>
-  props.variant === 'ghost' ? 'hover:bg-indigo-50' : '',
-)
-
-const mergedClass = computed(() => twMerge(variantClasses.value, attrs.class as string))
+const mergedClass = computed(() => twMerge(baseClasses.value, attrs.class as string))
 
 const textSpanStyle = computed(() =>
   outlookFallback ? `mso-text-raise: ${props.msoPt};` : undefined,
@@ -209,7 +196,7 @@ const MsoIconGap = () => createStaticVNode(
     <a
       v-bind="{ ...$attrs, class: undefined, style: undefined }"
       :href="href"
-      :style="[styles, $attrs.style as any]"
+      :style="$attrs.style as any"
       :class="mergedClass"
     >
       <template v-if="!isLink">

package/dist/components/CodeBlock.vue

@@ -2,6 +2,7 @@
 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: {
@@ -57,11 +58,11 @@ export default {
       .replace(/^<pre[^>]*><code>/, '')
       .replace(/<\/code><\/pre>$/, '')
 
-    const classes = twMerge('font-mono', attrs.class as string)
-    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}" style="background-color:${bg}"><pre class="${classes}" style="${styles}"><code>${codeContent}</code></pre></td></tr></table>`
+    const html = buildCodeBlock(codeContent, bg, { preClass, tdClass, styleAttr })
 
     return () => createStaticVNode(html, 1)
   }

package/dist/components/CodeInline.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
 import { codeToHtml, getSingletonHighlighter, type BundledLanguage, type BundledTheme } from 'shiki'
 
 export default {
@@ -50,8 +51,6 @@ export default {
       return () => createStaticVNode('', 0)
     }
 
-    const classes = attrs.class ? ` class="${attrs.class}"` : ''
-
     if (props.theme) {
       const highlighted = await codeToHtml(source, {
         lang: props.language,
@@ -95,15 +94,17 @@ export default {
         .replace(/</g, '§MZLT§')
         .replace(/>/g, '§MZGT§')
 
-      const baseStyles = `background-color:${bg};border-radius:6px;padding:2px 6px;font-size:11px`
-      const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
+      const base = `bg-[${bg}] rounded-md py-0.5 px-1.5 text-[11px]`
+      const merged = twMerge(base, (attrs.class as string) ?? '')
+      const styleAttr = attrs.style ? ` style="${attrs.style}"` : ''
 
-      const html = `<code${classes} style="${styles}" data-minify-inline>${escaped}</code>`
+      const html = `<code class="${merged}"${styleAttr} data-minify-inline>${escaped}</code>`
       return () => createStaticVNode(html, 1)
     }
 
-    const baseStyles = 'white-space:normal;border-radius:6px;border:1px solid #d1d5db;background-color:#f3f4f6;padding:2px 6px;font-size:11px;color:inherit'
-    const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
+    const base = 'whitespace-normal rounded-md [border:1px_solid_#d1d5db] bg-gray-100 py-0.5 px-1.5 text-[11px] text-inherit'
+    const merged = twMerge(base, (attrs.class as string) ?? '')
+    const styleAttr = attrs.style ? ` style="${attrs.style}"` : ''
 
     const escaped = source
       .replace(/&/g, '&amp;')
@@ -111,7 +112,7 @@ export default {
       .replace(/>/g, '&gt;')
       .replace(/"/g, '&quot;')
 
-    const html = `<code${classes} style="${styles}">${escaped}</code>`
+    const html = `<code class="${merged}"${styleAttr}>${escaped}</code>`
 
     return () => createStaticVNode(html, 1)
   }

package/dist/components/Column.vue

@@ -70,14 +70,27 @@ const msoWidth = computed(() => {
  * `display: inline-block` would silently shadow a class like
  * `inline-table` during CSS inlining; routing both through twMerge lets
  * the user's utility cleanly replace ours instead of being dropped.
+ *
+ * When `width` is set as a prop the resolved pixel value also goes
+ * through the class list (`min-w-[Npx]`) so it dedupes against the
+ * user's `min-w-*` utility. The marker path (no prop) has to stay
+ * inline because the placeholder string is replaced post-render and
+ * Tailwind's content scanner can't compile a class whose value is
+ * still a marker.
  */
-const baseClass = 'inline-block align-top text-[medium]'
-const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
+const baseClass = 'inline-block text-[medium]'
+const mergedClass = computed(() => {
+  const parts = [baseClass]
+  if (props.width != null) parts.push(`min-w-[${normalizeToPixels(props.width)}]`)
+  return twMerge(parts.join(' '), (attrs.class as string) ?? '')
+})
 
-const styles = computed(() => `min-width: ${minWidth.value};`)
+const styles = computed(() =>
+  props.width != null ? undefined : `min-width: ${minWidth.value};`
+)
 
 const tdStyle = computed(() => {
-  const parts = [`width: ${msoWidth.value}`, 'vertical-align: top']
+  const parts = [`width: ${msoWidth.value}`]
   if (useMarker) parts.push(`__MAIZZLE_COLTDX_${colId}__`)
   if (props.msoStyle) parts.push(props.msoStyle)
   return parts.join('; ')

package/dist/components/Container.vue

@@ -60,18 +60,15 @@ const useMarker = outlookFallback && props.width == null
 const msoId = useMarker ? nextId('c') : null
 const tdId = outlookFallback ? nextId('ct') : null
 
-const styles = computed(() => {
-  if (props.width == null) return undefined
-  return `max-width: ${normalizeToPixels(props.width)}; margin: 0 auto;`
-})
-
 const mergedClass = computed(() => {
-  if (props.width != null) return attrs.class as string | undefined
   const userClass = (attrs.class as string) ?? ''
-  const defaultClass = hasWidthUtility(userClass)
-    ? 'm-0 mx-auto'
-    : 'max-w-150 m-0 mx-auto'
-  return twMerge(defaultClass, userClass)
+  const parts: string[] = ['m-0', 'mx-auto']
+  if (props.width != null) {
+    parts.push(`max-w-[${normalizeToPixels(props.width)}]`)
+  } else if (!hasWidthUtility(userClass)) {
+    parts.push('max-w-150')
+  }
+  return twMerge(parts.join(' '), userClass)
 })
 
 const msoWidth = computed(() => {
@@ -101,7 +98,6 @@ const MsoAfter = () => createStaticVNode(
   <div
     v-bind="{ ...attrs, class: undefined }"
     :class="mergedClass"
-    :style="styles"
     :data-maizzle-msow-id="msoId"
     :data-maizzle-cw="colWidthSource"
     :data-maizzle-mso-td-id="tdId"

package/dist/components/Hr.vue

@@ -15,7 +15,7 @@ const mergedClass = computed(() => {
   const userHeight = heights.length ? heights[heights.length - 1][1] : null
   const userHasLeading = LEADING_RE.test(userClass)
 
-  const defaults = ['my-6', 'bg-slate-300']
+  const defaults = ['my-6', 'bg-gray-300']
   if (!userHeight) defaults.push('h-px')
   if (!userHasLeading && !userHeight) defaults.push('leading-px')