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

package/dist/build.d.ts.map

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

package/dist/build.js

@@ -3,11 +3,12 @@ import { EventManager } from "./events/index.js";
 import { runTransformers } from "./transformers/index.js";
 import { createRenderer } from "./render/createRenderer.js";
 import { createPlaintext } from "./plaintext.js";
+import { stripForHtml, stripForPlaintext } from "./utils/output-markers.js";
 import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { glob } from "tinyglobby";
 import ora from "ora";
-
+import defu from "defu";
 //#region src/build.ts
 /**
 * Build all SFC email templates to HTML files.
@@ -76,20 +77,23 @@ async function build(configInput) {
 				html
 			});
 			html = `${doctype}\n${html}`;
+			const htmlOut = stripForHtml(html);
 			const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase);
 			mkdirSync(dirname(outputFilePath), { recursive: true });
-			writeFileSync(outputFilePath, html);
+			writeFileSync(outputFilePath, htmlOut);
 			outputFiles.push(outputFilePath);
 			const globalPlaintext = templateConfig.plaintext;
 			const sfcPlaintext = rendered.plaintext;
 			if (globalPlaintext || sfcPlaintext) {
-				const plaintext = createPlaintext(html, typeof globalPlaintext === "object" ? globalPlaintext : {});
-				const ptExtension = sfcPlaintext?.extension ?? "txt";
+				const globalCfg = typeof globalPlaintext === "object" ? globalPlaintext : {};
+				const stripOptions = defu(sfcPlaintext?.options, globalCfg.options);
+				const plaintext = createPlaintext(stripForPlaintext(html), stripOptions);
+				const ptExtension = sfcPlaintext?.extension ?? globalCfg.extension ?? "txt";
 				let ptOutputPath;
 				if (sfcPlaintext?.destination) {
 					const name = basename(templatePath).replace(/\.(vue|md)$/, "");
 					ptOutputPath = join(resolve(sfcPlaintext.destination), `${name}.${ptExtension}`);
-				} else if (typeof globalPlaintext === "string") ptOutputPath = resolveOutputPath(templatePath, resolve(globalPlaintext), ptExtension, contentBase);
+				} else if (globalCfg.destination) ptOutputPath = resolveOutputPath(templatePath, resolve(globalCfg.destination), ptExtension, contentBase);
 				else ptOutputPath = resolveOutputPath(templatePath, outputPath, ptExtension, contentBase);
 				mkdirSync(dirname(ptOutputPath), { recursive: true });
 				writeFileSync(ptOutputPath, plaintext);
@@ -142,7 +146,7 @@ async function copyStatic(config, outputPath) {
 		cpSync(file, destPath);
 	}
 }
-
 //#endregion
 export { build };
+
 //# sourceMappingURL=build.js.map

package/dist/build.js.map

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

package/dist/components/Button.vue

@@ -36,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.
@@ -147,18 +129,9 @@ const alignClass = computed(() => props.align ? ({
   right: 'text-right',
 })[props.align] || '' : '')
 
-const textColor = computed(() => {
-  if (props.color) return props.color
-
-  return props.variant === 'solid' ? '#fffffe' : props.bgColor
-})
-
 const styles = computed(() => {
   if (props.variant === 'link') {
-    return [
-      'text-decoration: none;',
-      `color: ${textColor.value};`,
-    ].join('')
+    return 'text-decoration: none; color: #4338ca;'
   }
 
   const base = [
@@ -168,18 +141,24 @@ const styles = computed(() => {
     'font-size: 16px;',
     'line-height: 1;',
     'border-radius: 4px;',
-    `color: ${textColor.value};`,
   ]
 
   if (props.variant === 'outline') {
     base.push(
       'background-color: transparent;',
-      `border: 1px solid ${props.bgColor};`,
+      'border: 1px solid #4338ca;',
+      'color: #4338ca;',
     )
   } else if (props.variant === 'ghost') {
-    base.push('background-color: transparent;')
+    base.push(
+      'background-color: transparent;',
+      'color: #4338ca;',
+    )
   } else {
-    base.push(`background-color: ${props.bgColor};`)
+    base.push(
+      'background-color: #4338ca;',
+      'color: #fffffe;',
+    )
   }
 
   return base.join('')
@@ -187,12 +166,11 @@ const styles = computed(() => {
 
 const isLink = computed(() => props.variant === 'link')
 
-const defaultClasses = computed(() => {
-  if (props.variant === 'ghost') return 'hover:bg-indigo-50'
-  return ''
-})
+const variantClasses = computed(() =>
+  props.variant === 'ghost' ? 'hover:bg-indigo-50' : '',
+)
 
-const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as string))
+const mergedClass = computed(() => twMerge(variantClasses.value, attrs.class as string))
 
 const textSpanStyle = computed(() =>
   outlookFallback ? `mso-text-raise: ${props.msoPt};` : undefined,
@@ -229,9 +207,9 @@ const MsoIconGap = () => createStaticVNode(
 <template>
   <div :class="alignClass">
     <a
-      v-bind="{ ...$attrs, class: undefined }"
+      v-bind="{ ...$attrs, class: undefined, style: undefined }"
       :href="href"
-      :style="styles"
+      :style="[styles, $attrs.style as any]"
       :class="mergedClass"
     >
       <template v-if="!isLink">

package/dist/components/Container.vue

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

package/dist/components/Hr.vue

@@ -1,133 +1,33 @@
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { twMerge } from 'tailwind-merge'
 
-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
-  }
-})
-
-const hasBgClass = computed(() =>
-  typeof attrs.class === 'string' &&
-  attrs.class.split(' ').some(c => c.startsWith('bg-'))
-)
+defineOptions({ inheritAttrs: false })
 
-const styles = computed(() => {
-  const s = []
-  const height = normalizeToPixels(props.height || '1px')
-
-  s.push(`height: ${height};`)
-  s.push(`line-height: ${height};`)
-
-  // Color
-  if (props.color) {
-    s.push(`background-color: ${props.color};`)
-  } else if (!hasBgClass.value) {
-    s.push('background-color: #cbd5e1;')
-  }
-
-  // Margins reset
-  if (
-    props.top != null ||
-    props.bottom != null ||
-    props.left != null ||
-    props.right != null ||
-    props.spaceY != null ||
-    props.spaceX != null
-  ) {
-    s.push('margin: 0;')
-  }
+const attrs = useAttrs()
 
-  // space-y
-  if (props.spaceY != null) {
-    const v = props.spaceY === 0 ? '0px' : normalizeToPixels(props.spaceY)
-    s.push(`margin-top: ${v}; margin-bottom: ${v};`)
-  }
+const HEIGHT_RE = /(?:^|\s)h-([\w./\-[\]%]+)/g
+const LEADING_RE = /(?:^|\s)leading-/
 
-  // space-x
-  if (props.spaceX != null) {
-    const v = props.spaceX === 0 ? '0px' : normalizeToPixels(props.spaceX)
-    s.push(`margin-left: ${v}; margin-right: ${v};`)
-  }
+const mergedClass = computed(() => {
+  const userClass = (attrs.class as string) || ''
+  const heights = [...userClass.matchAll(HEIGHT_RE)]
+  const userHeight = heights.length ? heights[heights.length - 1][1] : null
+  const userHasLeading = LEADING_RE.test(userClass)
 
-  // individual margins
-  if (props.top != null) {
-    s.push(`margin-top: ${normalizeToPixels(props.top)};`)
-  }
-  if (props.bottom != null) {
-    s.push(`margin-bottom: ${normalizeToPixels(props.bottom)};`)
-  }
-  if (props.left != null) {
-    s.push(`margin-left: ${normalizeToPixels(props.left)};`)
-  }
-  if (props.right != null) {
-    s.push(`margin-right: ${normalizeToPixels(props.right)};`)
-  }
+  const defaults = ['my-6', 'bg-slate-300']
+  if (!userHeight) defaults.push('h-px')
+  if (!userHasLeading && !userHeight) defaults.push('leading-px')
 
-  return s.join('')
+  const derived = userHeight && !userHasLeading ? `leading-${userHeight}` : ''
+  return twMerge(defaults.join(' '), userClass, derived)
 })
 </script>
 
 <template>
-  <div role="separator" :style="styles">&zwj;</div>
+  <div
+    role="separator"
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="mergedClass"
+  >&zwj;</div>
 </template>

package/dist/components/Html.vue

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

package/dist/components/NotPlaintext.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { h } from 'vue'
+
+export default {
+  name: 'NotPlaintext',
+  setup(_, { slots }) {
+    return () => h(
+      'div',
+      { 'data-maizzle-html-only': '' },
+      slots.default?.(),
+    )
+  },
+}
+</script>

package/dist/components/{Vml.vue → OutlookBg.vue}

@@ -4,7 +4,7 @@ import type { PropType } from 'vue'
 import { normalizeToPixels } from './utils.ts'
 
 export default {
-  name: 'Vml',
+  name: 'OutlookBg',
   props: {
     /**
      * Width of the VML rectangle.

package/dist/components/Plaintext.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { h } from 'vue'
+
+export default {
+  name: 'Plaintext',
+  setup(_, { slots }) {
+    return () => h(
+      'div',
+      { 'data-maizzle-plaintext-only': '' },
+      slots.default?.(),
+    )
+  },
+}
+</script>

package/dist/components/QrCode.vue

@@ -0,0 +1,157 @@
+<script lang="ts">
+import { createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { encode } from 'uqr'
+
+type Ecc = 'L' | 'M' | 'Q' | 'H'
+
+const escapeAttr = (v: string) =>
+  v
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+
+/**
+ * Parse a Tailwind sizing token's pixel equivalent.
+ *
+ * Assumes the default v4 spacing scale (1 unit = 0.25rem),
+ * which resolves to 4px at the standard 16px root font.
+ * Arbitrary values accept `px` and `rem`; other units
+ * fall through to the caller's default.
+ */
+function tokenToPx(token: string): number {
+  const seg = token.split(':').at(-1) ?? ''
+  const m = seg.match(/^(?:size|w|h)-(.+)$/)
+  if (!m) return 0
+  const v = m[1]
+  if (v.startsWith('[') && v.endsWith(']')) {
+    const um = v.slice(1, -1).match(/^([\d.]+)(px|rem)?$/)
+    if (!um) return 0
+    const n = Number.parseFloat(um[1])
+    return um[2] === 'rem' ? n * 16 : n
+  }
+  if (/^\d+(?:\.\d+)?$/.test(v)) return Number.parseFloat(v) * 4
+  return 0
+}
+
+/**
+ * Partition a class string into two buckets:
+ *
+ * - `sizing` — width/height/size utilities used for cell px math.
+ * - `neutral` — everything else; lands on the table verbatim.
+ */
+function partition(cls: string): { neutral: string[]; sizing: string[] } {
+  const neutral: string[] = []
+  const sizing: string[] = []
+  for (const t of cls.split(/\s+/).filter(Boolean)) {
+    const last = t.split(':').at(-1) ?? ''
+    if (/^(?:size|w|h|min-w|min-h|max-w|max-h)-/.test(last)) sizing.push(t)
+    else neutral.push(t)
+  }
+  return { neutral, sizing }
+}
+
+export default {
+  name: 'QrCode',
+  inheritAttrs: false,
+  props: {
+    /** Data to encode (URL or arbitrary text). */
+    value: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Error correction level: redundancy that keeps the code
+     * scannable when partially obscured (e.g. a logo overlay),
+     * at the cost of a larger matrix.
+     *
+     * - `L` ~7% recovery
+     * - `M` ~15% recovery (default, fine for on-screen display)
+     * - `Q` ~25% recovery
+     * - `H` ~30% recovery
+     */
+    ecc: {
+      type: String as PropType<Ecc>,
+      default: 'M',
+      validator: (v: string) => ['L', 'M', 'Q', 'H'].includes(v),
+    },
+    /**
+     * Width of the light "quiet zone" around the code, in modules.
+     * Spec recommends ≥ 4; 1 is plenty for on-screen scans.
+     */
+    border: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Accessible label exposed via `aria-label` on the table.
+     */
+    alt: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { attrs }) {
+    const userClass = String(attrs.class ?? '')
+    const { neutral, sizing } = partition(userClass)
+
+    /**
+     * Effective pixel size from the user's sizing token, else
+     * 120px (= `size-30` on the default v4 spacing scale).
+     */
+    const sizingToken = sizing[0]
+    const effectivePx = sizingToken ? (tokenToPx(sizingToken) || 120) : 120
+
+    const result = encode(props.value, {
+      ecc: props.ecc,
+      border: props.border,
+      boostEcc: true,
+    })
+    const matrix = result.data
+    const dim = matrix.length
+    const cellPx = Math.max(1, Math.floor(effectivePx / dim))
+    const totalPx = cellPx * dim
+
+    /**
+     * Table base classes:
+     *
+     * - `size-[Npx]` matches the outer to cell math (no stripe).
+     * - `[&_td]:*` sizes each cell and zeroes its font-size.
+     * - `bg-*` paints the table; light cells stay transparent.
+     * - `qr:*` paints dark cells via the registered variant.
+     *
+     * Defaults and user tokens share each form, so `twMerge`
+     * resolves overrides cleanly.
+     */
+    const baseTable = [
+      `size-[${totalPx}px]`,
+      `[&_td]:w-[${cellPx}px]`,
+      `[&_td]:h-[${cellPx}px]`,
+      '[&_td]:text-[0px]',
+      'bg-white',
+      'dark:bg-gray-950',
+      'qr:bg-gray-950',
+      'dark:qr:bg-white',
+    ]
+
+    const merged = twMerge([...baseTable, ...neutral].join(' '))
+
+    let rows = ''
+    for (let y = 0; y < dim; y++) {
+      let cells = ''
+      const row = matrix[y]
+      for (let x = 0; x < dim; x++) {
+        cells += row[x] ? '<td class="qd"></td>' : '<td></td>'
+      }
+      rows += `<tr>${cells}</tr>`
+    }
+
+    const altAttr = props.alt ? ` aria-label="${escapeAttr(props.alt)}"` : ''
+    const styleAttr = attrs.style ? ` style="${String(attrs.style)}"` : ''
+    const html = `<table class="${escapeAttr(merged)}" role="img"${altAttr} cellpadding="0" cellspacing="0" border="0"${styleAttr}>${rows}</table>`
+
+    return () => createStaticVNode(html, 1)
+  },
+}
+</script>