npm - @maizzle/framework - Versions diffs - 6.0.0-rc.16 → 6.0.0-rc.18 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/bin/maizzle.mjs CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,20 @@
+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>;
+//#endregion
+export { BuildResult, build };
+//# sourceMappingURL=build.d.ts.map

package/dist/build.d.ts.map ADDED Viewed

	@@ -0,0 +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"}

package/dist/{build.mjs → build.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { resolveConfig } from "./config/index.mjs";
-import { EventManager } from "./events/index.mjs";
-import { runTransformers } from "./transformers/index.mjs";
-import { createRenderer } from "./render/createRenderer.mjs";
-import { createPlaintext } from "./plaintext.mjs";
+import { resolveConfig } from "./config/index.js";
+import { EventManager } from "./events/index.js";
+import { runTransformers } from "./transformers/index.js";
+import { createRenderer } from "./render/createRenderer.js";
+import { createPlaintext } from "./plaintext.js";
 import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { glob } from "tinyglobby";
@@ -14,14 +14,18 @@ import ora from "ora";
 *
 * Creates a single Renderer instance, then loops through each template
 * calling render → transformers → write to disk.
+*
+* Pass a `Partial<MaizzleConfig>` to override config inline, or a string
+* to load config from a specific file path. Omit to load `maizzle.config`
+* from the working directory.
 */
-async function build(options = {}) {
+async function build(configInput) {
 	const start = Date.now();
 	const spinner = ora({
 		text: "Building templates...",
 		spinner: "circleHalves"
 	}).start();
-	const config = await resolveConfig(options.config);
+	const config = await resolveConfig(configInput);
 	const events = new EventManager();
 	events.registerConfig(config);
 	await events.fireBeforeCreate({ config });
@@ -57,6 +61,7 @@ async function build(options = {}) {
 				template
 			});
 			const rendered = await renderer.render(absolutePath, config);
+			for (const { name, handler } of rendered.sfcEventHandlers) events.on(name, handler);
 			let html = await events.fireAfterRender({
 				config,
 				template,
@@ -64,7 +69,7 @@ async function build(options = {}) {
 			});
 			const templateConfig = rendered.templateConfig;
 			const doctype = rendered.doctype ?? templateConfig.doctype ?? "<!DOCTYPE html>";
-			if (templateConfig.useTransformers !== false) html = await runTransformers(html, templateConfig, absolutePath, doctype);
+			if (templateConfig.useTransformers !== false) html = await runTransformers(html, templateConfig, absolutePath, doctype, rendered.tailwindBlocks);
 			html = await events.fireAfterTransform({
 				config,
 				template,
@@ -89,7 +94,6 @@ async function build(options = {}) {
 				mkdirSync(dirname(ptOutputPath), { recursive: true });
 				writeFileSync(ptOutputPath, plaintext);
 			}
-			for (const { name, handler } of rendered.sfcEventHandlers) events.on(name, handler);
 			events.clearSfcHandlers();
 		}
 		await copyStatic(config, outputPath);
@@ -141,4 +145,4 @@ async function copyStatic(config, outputPath) {
 //#endregion
 export { build };
-//# sourceMappingURL=build.mjs.map
+//# sourceMappingURL=build.js.map

package/dist/build.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"build.js","names":[],"sources":["../src/build.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, basename, relative, join } from 'node:path'\nimport { glob } from 'tinyglobby'\nimport ora from 'ora'\nimport { resolveConfig } from './config/index.ts'\nimport { EventManager } from './events/index.ts'\nimport { runTransformers } from './transformers/index.ts'\nimport { createRenderer } from './render/createRenderer.ts'\nimport { createPlaintext } from './plaintext.ts'\nimport 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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"}

package/dist/components/Body.vue CHANGED Viewed

@@ -68,6 +68,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })

package/dist/components/Button.vue CHANGED Viewed

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, createStaticVNode } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import Outlook from './Outlook.vue'
 import { outlookFallbackProp } from './utils.ts'
 import { useOutlookFallback } from '../composables/useOutlookFallback'
@@ -106,6 +105,35 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  /**
+   * Alt text for the icon image.
+   * @default ''
+   */
+  iconAlt: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Horizontal padding in old Outlook, applied as `mso-font-width` on the
+   * outer spacer `<i>` elements. Accepts a number, a numeric string, or a
+   * string with `%`. Bare numbers are treated as percentages. Effective
+   * range up to 500%.
+   * @default 150
+   */
+  msoPx: {
+    type: [String, Number],
+    default: 150
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
@@ -165,6 +193,37 @@ const defaultClasses = computed(() => {
 })
 const mergedClass = computed(() => twMerge(defaultClasses.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
+})
+/**
+ * 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>
@@ -176,21 +235,21 @@ const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as
       :class="mergedClass"
     >
       <template v-if="!isLink">
-        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
+        <MsoSpacerLeft v-if="outlookFallback" />
         <template v-if="icon && iconPosition === 'left'">
-          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
+          <span :style="textSpanStyle">
+            <img :src="icon" :width="parsedIconWidth" :alt="iconAlt" style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
           </span>
-          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
+          <MsoIconGap v-if="outlookFallback" />
         </template>
-        <span :class="icon ? (iconPosition === 'right' ? 'mr-2' : 'ml-2') : ''" :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined"><slot /></span>
+        <span :style="textSpanStyle"><slot /></span>
         <template v-if="icon && iconPosition === 'right'">
-          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
-          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
+          <MsoIconGap v-if="outlookFallback" />
+          <span :style="textSpanStyle">
+            <img :src="icon" :width="parsedIconWidth" :alt="iconAlt" style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
           </span>
         </template>
-        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
+        <MsoSpacerRight v-if="outlookFallback" />
       </template>
       <template v-else>
         <slot />

package/dist/components/Column.vue CHANGED Viewed

@@ -32,6 +32,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })

package/dist/components/Container.vue CHANGED Viewed

@@ -35,6 +35,29 @@ const props = defineProps({
     type: [String, Number],
     default: null
   },
+  /**
+   * Inline CSS applied only to the MSO `<td>` element.
+   *
+   * Use for Outlook-specific styling that shouldn't affect other clients.
+   * Appended after any padding propagated from the outer div's
+   * inlined style, so msoStyle wins on duplicate properties.
+   *
+   * @example 'padding: 10px 20px'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
@@ -44,6 +67,7 @@ provide('containerWidth', computed(() => props.width))
 const useMarker = outlookFallback && props.width == null && props.msoWidth == null
 const msoId = useMarker ? nextId('c') : null
+const tdId = outlookFallback ? nextId('ct') : null
 const styles = computed(() => {
   if (props.width == null) return undefined
@@ -69,8 +93,10 @@ const colWidthSource = computed(() =>
   props.width != null ? normalizeToPixels(props.width) : ''
 )
+const tdMarker = tdId ? `__MAIZZLE_MSOTDSTYLE_${tdId}__` : ''
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}" align="center"><tr><td><![endif]-->`,
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}" align="center"><tr><td${tdMarker}><![endif]-->`,
   1
 )
@@ -88,6 +114,8 @@ const MsoAfter = () => createStaticVNode(
     :style="styles"
     :data-maizzle-msow-id="msoId"
     :data-maizzle-cw="colWidthSource"
+    :data-maizzle-mso-td-id="tdId"
+    :data-maizzle-mso-style="tdId && props.msoStyle ? props.msoStyle : null"
   >
     <slot />
   </div>

package/dist/components/Html.vue CHANGED Viewed

@@ -68,6 +68,16 @@ const props = defineProps({
     type: [Boolean, String],
     default: true
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })

package/dist/components/Layout.vue CHANGED Viewed

@@ -55,6 +55,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })
@@ -68,21 +78,25 @@ const EmptyHead = () => createStaticVNode('<head></head>', 1)
 const MsoHead = () => createStaticVNode(
   `<!--[if mso]>
-      <noscript>
-        <xml>
-          <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-          </o:OfficeDocumentSettings>
-        </xml>
-      </noscript>
-      <style>
-        td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
-        .mso-break-all {word-break: break-all;}
-      </style>
-      <![endif]-->`,
+    <style>
+      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
+      .mso-break-all {word-break: break-all;}
+    </style>
+  <![endif]-->`,
   1
 )
+const msoBody = `<!--[if mso]>
+  <xml>
+    <o:OfficeDocumentSettings>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    <w:WordDocument>
+      <w:DontUseAdvancedTypographyReadingMail />
+    </w:WordDocument>
+  </xml>
+<![endif]-->`
 const htmlXmlns = computed(() => outlookFallback ? {
   'xmlns:v': 'urn:schemas-microsoft-com:vml',
   'xmlns:o': 'urn:schemas-microsoft-com:office:office',
@@ -112,6 +126,7 @@ const htmlXmlns = computed(() => outlookFallback ? {
     </style>
   </head>
   <body :xml:lang="outlookFallback ? lang : null" :class="bodyMergedClass">
+    <span v-if="outlookFallback" style="display: none" v-html="msoBody"></span>
     <div
       role="article"
       aria-roledescription="email"

package/dist/components/MarkdownLayout.vue ADDED Viewed

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import Layout from './Layout.vue'
+import Container from './Container.vue'
+defineOptions({ inheritAttrs: false })
+const props = defineProps({
+  /**
+   * Frontmatter object — wired in automatically when this layout
+   * wraps a `.md` template (the default behavior, or via the
+   * `layout: MarkdownLayout` frontmatter key).
+   *
+   * Keys matching `Layout`'s props (`lang`, `dir`, `bodyClass`,
+   * `doubleHead`, `ariaLabel`, `outlookFallback`) flow through to
+   * the wrapped `Layout`. Missing keys fall back to `Layout`'s
+   * own defaults.
+   */
+  frontmatter: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+})
+</script>
+<template>
+  <Layout
+    :lang="props.frontmatter.lang as string | undefined"
+    :dir="props.frontmatter.dir as 'ltr' | 'rtl' | undefined"
+    :body-class="props.frontmatter.bodyClass as string | undefined"
+    :double-head="props.frontmatter.doubleHead as boolean | string | undefined"
+    :aria-label="props.frontmatter.ariaLabel as string | undefined"
+    :outlook-fallback="props.frontmatter.outlookFallback as boolean | undefined"
+  >
+    <Container class="max-w-xl">
+      <slot />
+    </Container>
+  </Layout>
+</template>

package/dist/components/Overlap.vue CHANGED Viewed

@@ -62,6 +62,16 @@ const props = defineProps({
     type: String,
     default: '0,-60px,0,0'
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })

package/dist/components/Preheader.vue CHANGED Viewed

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 defineProps({
-  /** Number of `&#8199;&#847;` filler pairs to render. */
-  fillerCount: {
-    type: Number,
-    default: 150
-  },
-  /** Number of `&shy;` entities to render. */
-  shyCount: {
+  /** Number of `&#8199;&#65279;&#847;` filler sequences to render after the preview text. */
+  spaces: {
     type: Number,
     default: 150
   }
@@ -15,6 +10,6 @@ defineProps({
 <template>
   <Teleport to="body:start">
-    <div style="display: none"><slot /><template v-for="i in fillerCount" :key="'f'+i">&#8199;&#847; </template><template v-for="i in shyCount" :key="'s'+i">&shy; </template>&nbsp;</div>
+    <div style="display: none"><slot /><template v-for="i in spaces" :key="i">&#8199;&#65279;&#847; </template>&nbsp;</div>
   </Teleport>
 </template>

package/dist/components/Row.vue CHANGED Viewed

@@ -38,6 +38,16 @@ const props = defineProps({
     type: Number,
     default: null
   },
+  /**
+   * 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,
 })
@@ -149,12 +159,13 @@ const MsoAfter = () => createStaticVNode(
 )
 const initialChildren = slots.default?.() ?? []
-if (outlookFallback && hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
+if (hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
   const loc = (attrs['data-maizzle-loc'] as string | undefined) ?? '<unknown location>'
   if (!warnedLocations.has(loc)) {
     warnedLocations.add(loc)
     const display = loc.split('/').pop() ?? loc
-    console.warn(`[maizzle] <Row> in ${display} has no <Column> inside it. Layout will break in Outlook.`)
+    const suffix = outlookFallback ? ' Layout will break in Outlook.' : ''
+    console.warn(`[maizzle] <Row> in ${display} has no <Column> inside it.${suffix}`)
   }
 }
 </script>

package/dist/components/Section.vue CHANGED Viewed

@@ -33,6 +33,16 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
   outlookFallback: outlookFallbackProp,
 })

package/dist/components/Tailwind.vue ADDED Viewed

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent, createCommentVNode, inject, h, Fragment, type VNode } from 'vue'
+import { RenderContextKey } from '../composables/renderContext'
+/**
+ * Walk a slot's vnode tree and concatenate its text content.
+ * Handles plain text children, arrays, and Comment vnodes.
+ * Static text in <template #config>...</template> compiles into
+ * text vnodes whose `children` is a string — that's our path.
+ */
+function vnodeText(input: unknown): string {
+  if (input == null || input === false) return ''
+  if (typeof input === 'string') return input
+  if (typeof input === 'number') return String(input)
+  if (Array.isArray(input)) return input.map(vnodeText).join('')
+  const v = input as VNode
+  if (typeof v.children === 'string') return v.children
+  if (Array.isArray(v.children)) return vnodeText(v.children)
+  return ''
+}
+export default defineComponent({
+  name: 'Tailwind',
+  setup(_, { slots }) {
+    const ctx = inject(RenderContextKey)!
+    if (!ctx.tailwindBlocks) ctx.tailwindBlocks = []
+    const id = `tw${ctx.tailwindBlocks.length}`
+    // Extract optional `#config` slot content as raw CSS. Evaluated at
+    // setup time; the slot is NOT rendered into the document.
+    const css = slots.config ? vnodeText(slots.config()).trim() : undefined
+    ctx.tailwindBlocks.push({ id, css: css || undefined })
+    return () => h(Fragment, null, [
+      createCommentVNode(`mz-tw:${id}`),
+      slots.default?.(),
+      createCommentVNode(`/mz-tw:${id}`),
+    ])
+  },
+})
+</script>

package/dist/components/{utils.d.mts → utils.d.ts} RENAMED Viewed

@@ -25,4 +25,4 @@ declare const outlookFallbackProp: {
 };
 //#endregion
 export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp };
-//# sourceMappingURL=utils.d.mts.map
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/utils.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"utils.d.ts","names":[],"sources":["../../src/components/utils.ts"],"mappings":";iBAAgB,iBAAA,CAAkB,KAAA;AAAlC;;;;;AAiBA;;;AAjBA,iBAiBgB,MAAA,CAAO,MAAA;AAAA,iBAKP,eAAA,CAAgB,QAAA;AAAA,iBAQhB,eAAA,CAAgB,QAAA;AAAA,iBAIhB,gBAAA,CAAiB,QAAA;AAAA,iBAQjB,gBAAA,CAAiB,QAAA;;;AAZjC;;;;cAsBa,mBAAA;EAAA,eAGH,kBAAA;EAAA"}

package/dist/components/{utils.mjs → utils.js} RENAMED Viewed

@@ -47,4 +47,4 @@ const outlookFallbackProp = {
 //#endregion
 export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp };
-//# sourceMappingURL=utils.mjs.map
+//# sourceMappingURL=utils.js.map

package/dist/components/utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"utils.js","names":[],"sources":["../../src/components/utils.ts"],"sourcesContent":["export function normalizeToPixels(value: string | number): string {\n if (typeof value === 'number' || Number.isFinite(Number(value))) {\n return `${value}px`\n }\n return value\n}\n\nconst counters: Record<string, number> = {}\n\n/**\n * Module-scoped sequential ID generator. Used by components to mint\n * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.\n *\n * Must live here (not inside `<script setup>`) because Vue compiles\n * `<script setup>` into the component's `setup()` function — any\n * `let counter = 0` there resets per instance, causing id collisions.\n */\nexport function nextId(prefix: string): string {\n counters[prefix] = (counters[prefix] ?? 0) + 1\n return `${prefix}${counters[prefix]}`\n}\n\nexport function hasWidthUtility(classStr: string): boolean {\n return classStr.split(/\\s+/).some((c) => {\n const utility = c.split(':').pop() ?? ''\n const clean = utility.replace(/^!/, '')\n return /^(w-|max-w-|min-w-)/.test(clean)\n })\n}\n\nexport function hasWidthInStyle(styleStr: string): boolean {\n return /(?:^|;\\s*)(?:max-width|width)\\s*:/i.test(styleStr)\n}\n\nexport function hasHeightUtility(classStr: string): boolean {\n return classStr.split(/\\s+/).some((c) => {\n const utility = c.split(':').pop() ?? ''\n const clean = utility.replace(/^!/, '')\n return /^(h-|max-h-|min-h-)/.test(clean)\n })\n}\n\nexport function hasHeightInStyle(styleStr: string): boolean {\n return /(?:^|;\\s*)(?:max-height|height)\\s*:/i.test(styleStr)\n}\n\n/**\n * Shared prop for components that emit MSO/VML fallback markup. The\n * `null` default acts as the \"unset\" sentinel — `useOutlookFallback`\n * treats `null` as inherit-from-ancestor (root default `true`),\n * letting users override per-component without losing inheritance.\n */\nexport const outlookFallbackProp = {\n type: Boolean,\n default: null,\n} as const\n\n"],"mappings":";AAAA,SAAgB,kBAAkB,OAAgC;AAChE,KAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,MAAM,CAAC,CAC7D,QAAO,GAAG,MAAM;AAElB,QAAO;;AAGT,MAAM,WAAmC,EAAE;;;;;;;;;AAU3C,SAAgB,OAAO,QAAwB;AAC7C,UAAS,WAAW,SAAS,WAAW,KAAK;AAC7C,QAAO,GAAG,SAAS,SAAS;;AAG9B,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,qCAAqC,KAAK,SAAS;;AAG5D,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,uCAAuC,KAAK,SAAS;;;;;;;;AAS9D,MAAa,sBAAsB;CACjC,MAAM;CACN,SAAS;CACV"}

package/dist/composables/{defineConfig.d.mts → defineConfig.d.ts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { MaizzleConfig } from "../types/config.mjs";
+import { MaizzleConfig } from "../types/config.js";
 //#region src/composables/defineConfig.d.ts
 /**
  * Define Maizzle config.
@@ -11,4 +11,4 @@ import { MaizzleConfig } from "../types/config.mjs";
 declare function defineConfig(data?: Partial<MaizzleConfig>): MaizzleConfig;
 //#endregion
 export { defineConfig };
-//# sourceMappingURL=defineConfig.d.mts.map
+//# sourceMappingURL=defineConfig.d.ts.map

package/dist/composables/defineConfig.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"defineConfig.d.ts","names":[],"sources":["../../src/composables/defineConfig.ts"],"mappings":";;;;;AAqBA;;;;;iBAAgB,YAAA,CAAa,IAAA,GAAM,OAAA,CAAQ,aAAA,IAAsB,aAAA"}

package/dist/composables/{defineConfig.mjs → defineConfig.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { MaizzleConfigKey } from "./useConfig.mjs";
-import { RenderContextKey } from "./renderContext.mjs";
+import { MaizzleConfigKey } from "./useConfig.js";
+import { RenderContextKey } from "./renderContext.js";
 import { createDefu } from "defu";
 import { getCurrentInstance, inject, provide } from "vue";
@@ -31,4 +31,4 @@ function defineConfig(data = {}) {
 //#endregion
 export { defineConfig };
-//# sourceMappingURL=defineConfig.mjs.map
+//# sourceMappingURL=defineConfig.js.map

package/dist/composables/defineConfig.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"defineConfig.js","names":[],"sources":["../../src/composables/defineConfig.ts"],"sourcesContent":["import { getCurrentInstance, inject, provide } from 'vue'\nimport { createDefu } from 'defu'\nimport { MaizzleConfigKey } from './useConfig.ts'\nimport { RenderContextKey } from './renderContext.ts'\nimport type { MaizzleConfig } from '../types/index.ts'\n\nconst merge = createDefu((obj, key, value) => {\n if (Array.isArray(obj[key])) {\n obj[key] = value\n return true\n }\n})\n\n/**\n * Define Maizzle config.\n *\n * Works in both contexts:\n * - In maizzle.config.ts: typed identity function, returns the config as-is\n * - In Vue SFC <script setup>: merges with the global config and provides\n * the result to child components via useConfig()\n */\nexport function defineConfig(data: Partial<MaizzleConfig> = {}): MaizzleConfig {\n // Inside a Vue SFC — merge with global config and provide to children\n if (getCurrentInstance()) {\n const globalConfig = inject(MaizzleConfigKey, {} as MaizzleConfig)\n const merged = merge(data, globalConfig) as MaizzleConfig\n\n const ctx = inject(RenderContextKey)\n if (ctx) ctx.sfcConfig = merged\n\n provide(MaizzleConfigKey, merged)\n\n return merged\n }\n\n // Outside Vue (maizzle.config.ts) — just return the config\n return data as MaizzleConfig\n}\n"],"mappings":";;;;;;AAMA,MAAM,QAAQ,YAAY,KAAK,KAAK,UAAU;AAC5C,KAAI,MAAM,QAAQ,IAAI,KAAK,EAAE;AAC3B,MAAI,OAAO;AACX,SAAO;;EAET;;;;;;;;;AAUF,SAAgB,aAAa,OAA+B,EAAE,EAAiB;AAE7E,KAAI,oBAAoB,EAAE;EAExB,MAAM,SAAS,MAAM,MADA,OAAO,kBAAkB,EAAE,CAAkB,CAC1B;EAExC,MAAM,MAAM,OAAO,iBAAiB;AACpC,MAAI,IAAK,KAAI,YAAY;AAEzB,UAAQ,kBAAkB,OAAO;AAEjC,SAAO;;AAIT,QAAO"}