@maizzle/framework 6.0.0-rc.21 → 6.0.0-rc.22

package/dist/components/Body.vue

@@ -94,7 +94,7 @@ const render = () => {
 
   const parts = [
     `dir="${props.dir}"`,
-    'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
+    'style="margin: 0; padding: 0; width: 100%; height: 100%; word-break: break-word;"',
   ]
   if (outlookFallback) {
     parts.unshift(`xml:lang="${lang}"`)

package/dist/components/CodeBlock.vue

@@ -61,7 +61,7 @@ export default {
     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 html = `<table class="w-full"><tr><td class="${props.tdClass}"><pre class="${classes}" style="${styles}"><code>${codeContent}</code></pre></td></tr></table>`
+    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>`
 
     return () => createStaticVNode(html, 1)
   }

package/dist/components/CodeInline.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { createStaticVNode } from 'vue'
+import { createStaticVNode, type PropType } from 'vue'
+import { codeToHtml, getSingletonHighlighter, type BundledLanguage, type BundledTheme } from 'shiki'
 
 export default {
   inheritAttrs: false,
@@ -13,9 +14,27 @@ export default {
     code: {
       type: String,
       default: ''
+    },
+    /**
+     * Language for syntax highlighting. Only consulted when `theme` is set.
+     * @default 'html'
+     */
+    language: {
+      type: String as PropType<BundledLanguage>,
+      default: 'html'
+    },
+    /**
+     * Shiki theme to apply. When set, the inline code is syntax-highlighted
+     * with this theme and the cell uses the theme's background color.
+     * When unset, falls back to the plain gray-styled `<code>` (no Shiki
+     * pass, faster, and visually quieter in body copy).
+     */
+    theme: {
+      type: String as PropType<BundledTheme | undefined>,
+      default: undefined
     }
   },
-  setup(props, { slots, attrs }) {
+  async setup(props, { slots, attrs }) {
     let source = props.code
 
     if (!source) {
@@ -32,6 +51,57 @@ export default {
     }
 
     const classes = attrs.class ? ` class="${attrs.class}"` : ''
+
+    if (props.theme) {
+      const highlighted = await codeToHtml(source, {
+        lang: props.language,
+        theme: props.theme,
+      })
+
+      const hl = await getSingletonHighlighter({ themes: [props.theme], langs: [] })
+      const bg = hl.getTheme(props.theme).bg
+
+      const codeContent = highlighted
+        .replace(/^<pre[^>]*><code>/, '')
+        .replace(/<\/code><\/pre>$/, '')
+
+      /**
+       * Replace shiki's structural `<`/`>` (the `<span>` tag delimiters)
+       * with private string markers `§MZLT§`/`§MZGT§`. Source-level
+       * entities like `&lt;` (representing a literal `<` in the user's
+       * code) are made of `&`, `l`, `t`, `;` — no real `<` character —
+       * so they pass through untouched.
+       *
+       * Why markers and not HTML entities? Both levels of escaping would
+       * end up as `&lt;` after a round-trip, and the decoder couldn't
+       * tell which to decode back to a real `<` (structural) vs leave
+       * as `&lt;` (content). Using non-entity markers makes the two
+       * levels distinguishable: only `§MZ*§` gets decoded.
+       *
+       * Two pipeline passes that would otherwise mangle the shiki HTML
+       * are defused by the markers:
+       *   - `format` (oxfmt with `htmlWhitespaceSensitivity: 'ignore'`)
+       *     sees the `<code>` body as plain text and won't reflow the
+       *     chain of `<span>` tokens onto separate lines.
+       *   - The HTML5 self-close strip (`( \/>)` regex at the end of
+       *     the pipeline) won't match anything inside a shiki cell,
+       *     so a highlighted Vue self-closing tag like `<MyTag />`
+       *     keeps its ` />` instead of being silently shortened to `>`.
+       *
+       * `minifyCodeInline` swaps the markers back to real angle brackets
+       * at the very end of the pipeline, after both passes have run.
+       */
+      const escaped = codeContent
+        .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 html = `<code${classes} style="${styles}" 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(';')
 

package/dist/components/Column.vue

@@ -71,13 +71,14 @@ const msoWidth = computed(() => {
  * `inline-table` during CSS inlining; routing both through twMerge lets
  * the user's utility cleanly replace ours instead of being dropped.
  */
-const baseClass = 'inline-block align-top text-base'
+const baseClass = 'inline-block align-top text-[medium]'
 const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
 
 const styles = computed(() => `min-width: ${minWidth.value};`)
 
 const tdStyle = computed(() => {
   const parts = [`width: ${msoWidth.value}`, 'vertical-align: top']
+  if (useMarker) parts.push(`__MAIZZLE_COLTDX_${colId}__`)
   if (props.msoStyle) parts.push(props.msoStyle)
   return parts.join('; ')
 })

package/dist/components/Container.vue

@@ -26,15 +26,6 @@ const props = defineProps({
     type: [String, Number],
     default: null
   },
-  /**
-   * Override the Outlook (MSO) table width independently of the
-   * div's width. Highest priority — wins over `width` and any
-   * class-derived value.
-   */
-  msoWidth: {
-    type: [String, Number],
-    default: null
-  },
   /**
    * Inline CSS applied only to the MSO `<td>` element.
    *
@@ -65,7 +56,7 @@ const outlookFallback = useOutlookFallback(props.outlookFallback)
 
 provide('containerWidth', computed(() => props.width))
 
-const useMarker = outlookFallback && props.width == null && props.msoWidth == null
+const useMarker = outlookFallback && props.width == null
 const msoId = useMarker ? nextId('c') : null
 const tdId = outlookFallback ? nextId('ct') : null
 
@@ -84,7 +75,6 @@ const mergedClass = computed(() => {
 })
 
 const msoWidth = computed(() => {
-  if (props.msoWidth != null) return normalizeToPixels(props.msoWidth)
   if (props.width != null) return normalizeToPixels(props.width)
   return `__MAIZZLE_MSOW_${msoId}__`
 })

package/dist/components/Img.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, createStaticVNode, useAttrs, type PropType } from 'vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+type AspectRatio = '1:1' | '4:3' | '3:2' | '16:9' | '21:9' | '2:1' | '3:4' | '9:16' | (string & {})
+type BackgroundPosition =
+  | 'top' | 'right' | 'bottom' | 'left' | 'center'
+  | 'top left' | 'top right' | 'top center'
+  | 'bottom left' | 'bottom right' | 'bottom center'
+  | 'center left' | 'center right' | 'center center'
+  | (string & {})
+type BackgroundSize = 'cover' | 'contain' | 'auto' | (string & {})
 
 defineOptions({ inheritAttrs: false })
 
@@ -30,9 +41,61 @@ const props = defineProps({
   motionSrc: {
     type: String,
     default: null
-  }
+  },
+  /**
+   * Aspect ratio for cropped images.
+   *
+   * Accepts colon or slash form: `'16:9'`, `'16/9'`, `'4:3'`, `'1:1'`, etc.
+   *
+   * Alternatively, set a Tailwind aspect class on the component:
+   * `aspect-square`, `aspect-video`, `aspect-[16/9]`, `aspect-3/2`. The
+   * prop wins when both are provided.
+   *
+   * @example '16:9'
+   * @example '4:3'
+   * @example '1:1'
+   */
+  aspect: {
+    type: String as PropType<AspectRatio>,
+    default: ''
+  },
+  /**
+   * CSS `background-position` for the cropped image fill.
+   *
+   * @default 'center'
+   * @example 'top'
+   * @example 'top left'
+   * @example '20% 30%'
+   */
+  position: {
+    type: String as PropType<BackgroundPosition>,
+    default: 'center'
+  },
+  /**
+   * CSS `background-size` for the cropped image fill.
+   *
+   * @default 'cover'
+   * @example 'contain'
+   * @example 'auto'
+   */
+  size: {
+    type: String as PropType<BackgroundSize>,
+    default: 'cover'
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this image.
+   *
+   * Only relevant in cropped mode (`aspect`). When `false`, the VML
+   * `<v:rect>` shape is skipped and the modern padding-hack div renders
+   * to all clients including Outlook (which will show an empty area).
+   *
+   * @default true
+   */
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 function mimeFromExtension(src: string): string {
   const ext = src.split('.').pop()?.toLowerCase() ?? ''
 
@@ -51,17 +114,149 @@ function mimeFromExtension(src: string): string {
   return types[ext] ?? ''
 }
 
+const ASPECT_KEYWORDS: Record<string, string> = {
+  'aspect-square': '1/1',
+  'aspect-video': '16/9',
+}
+
+function normalizeClass(value: unknown): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  if (Array.isArray(value)) return value.map(normalizeClass).filter(Boolean).join(' ')
+  if (typeof value === 'object') {
+    return Object.entries(value as Record<string, unknown>)
+      .filter(([, v]) => v)
+      .map(([k]) => k)
+      .join(' ')
+  }
+  return ''
+}
+
+/**
+ * Pull Tailwind `aspect-*` tokens out of the inherited class list. Returns
+ * both the derived ratio (first match wins) and the cleaned class string
+ * so the aspect token isn't duplicated on the wrapper.
+ */
+const parsedClass = computed(() => {
+  const tokens = normalizeClass(attrs.class).split(/\s+/).filter(Boolean)
+  let ratio: string | null = null
+  const rest: string[] = []
+  for (const t of tokens) {
+    if (ASPECT_KEYWORDS[t]) {
+      if (!ratio) ratio = ASPECT_KEYWORDS[t]
+      continue
+    }
+    const m = t.match(/^aspect-(?:\[(\d+(?:\.\d+)?)[/:](\d+(?:\.\d+)?)\]|(\d+(?:\.\d+)?)\/(\d+(?:\.\d+)?))$/)
+    if (m) {
+      if (!ratio) ratio = `${m[1] ?? m[3]}/${m[2] ?? m[4]}`
+      continue
+    }
+    rest.push(t)
+  }
+  return { ratio, className: rest.join(' ') }
+})
+
+const resolvedAspect = computed(() => props.aspect || parsedClass.value.ratio || '')
+
+const ratio = computed(() => {
+  if (!resolvedAspect.value) return null
+  const [w, h] = resolvedAspect.value.split(/[:/]/).map(Number)
+  if (!w || !h || !Number.isFinite(w) || !Number.isFinite(h)) return null
+  const pct = ((h / w) * 100).toFixed(4).replace(/\.?0+$/, '')
+  return { w, h, paddingBottom: `${pct}%` }
+})
+
+const isCropped = computed(() => ratio.value !== null)
+
 const motionType = computed(() => mimeFromExtension(props.motionSrc ?? ''))
 
 const imgWidth = computed(() => Number.parseInt(String(props.width), 10))
 
-const usePicture = computed(() => props.darkSrc || props.motionSrc)
+const heightPx = computed(() =>
+  ratio.value && Number.isFinite(imgWidth.value)
+    ? Math.round((imgWidth.value * ratio.value.h) / ratio.value.w)
+    : null
+)
+
+const usePicture = computed(() => !isCropped.value && (props.darkSrc || props.motionSrc))
+
+/**
+ * Escape characters that break Tailwind's `bg-[url('...')]` arbitrary value
+ * (the closing `']`, braces, spaces) and the `url()` wrapper itself (quotes,
+ * parens). Targeted replace so already-encoded URLs aren't double-encoded.
+ *
+ * Only used for the dark/motion variant classes — those have to be Tailwind
+ * arbitrary classes so they compile to `@media` rules. The base background
+ * image is set inline via `:style` to avoid the CSS pipeline rewriting it.
+ */
+const escapeForClass = (url: string) => url
+  .replace(/'/g, '%27')
+  .replace(/\(/g, '%28')
+  .replace(/\)/g, '%29')
+  .replace(/ /g, '%20')
+  .replace(/\]/g, '%5D')
+  .replace(/\}/g, '%7D')
+
+/** Escape a URL for safe use inside `url('...')` in an inline style. */
+const escapeForCssUrl = (s: string) => s
+  .replace(/\\/g, '\\\\')
+  .replace(/'/g, "\\'")
+
+const escapeAttr = (s: string) => s
+  .replace(/&/g, '&amp;')
+  .replace(/"/g, '&quot;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+
+const vmlAspect = computed(() => {
+  if (props.size === 'cover') return 'atleast'
+  if (props.size === 'contain') return 'atmost'
+  return ''
+})
+
+const VmlRect = () => {
+  if (!isCropped.value || !heightPx.value || !Number.isFinite(imgWidth.value)) return null
+  const aspectAttr = vmlAspect.value ? ` aspect="${vmlAspect.value}"` : ''
+  return createStaticVNode(
+    `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:${imgWidth.value}px;height:${heightPx.value}px;"><v:fill type="frame" src="${escapeAttr(props.src)}"${aspectAttr} /></v:rect><![endif]-->`,
+    1
+  )
+}
+
+const NotMsoBefore = () => createStaticVNode('<!--[if !mso]><!-->', 1)
+const NotMsoAfter = () => createStaticVNode('<!--<![endif]-->', 1)
 
 const imgStyle = 'max-width: 100%; vertical-align: middle;'
 </script>
 
 <template>
-  <picture v-if="usePicture">
+  <template v-if="isCropped">
+    <VmlRect v-if="outlookFallback" />
+    <NotMsoBefore v-if="outlookFallback" />
+    <div
+      v-bind="{ ...attrs, class: undefined }"
+      role="img"
+      :aria-label="alt || undefined"
+      :class="['overflow-hidden table', parsedClass.className]"
+      :style="`width: ${imgWidth}px; max-width: 100%;`"
+    >
+      <div
+        :class="[
+          'table-cell w-full h-0 bg-no-repeat',
+          darkSrc ? `dark:bg-[url('${escapeForClass(darkSrc)}')]!` : '',
+          motionSrc ? `motion-safe:bg-[url('${escapeForClass(motionSrc)}')]!` : '',
+        ]"
+        :style="{
+          paddingBottom: ratio!.paddingBottom,
+          backgroundImage: `url('${escapeForCssUrl(src)}')`,
+          backgroundSize: size,
+          backgroundPosition: position,
+        }"
+      />
+    </div>
+    <NotMsoAfter v-if="outlookFallback" />
+  </template>
+  <picture v-else-if="usePicture">
     <source v-if="darkSrc" :srcset="darkSrc" media="(prefers-color-scheme: dark)">
     <source v-if="motionSrc" :srcset="motionSrc" :type="motionType || undefined" media="(prefers-reduced-motion: no-preference)">
     <img v-bind="attrs" :src="src" :alt="alt" :width="imgWidth" :style="imgStyle">

package/dist/components/Preheader.vue

@@ -1,15 +1,43 @@
 <script setup lang="ts">
-defineProps({
-  /** Number of `&#8199;&#65279;&#847;` filler sequences to render after the preview text. */
+import { useSlots, computed } from 'vue'
+
+const props = defineProps({
+  /**
+   * Explicit number of filler sequences to render. When omitted, the count
+   * is auto-derived to fill our default 200-char inbox preview budget.
+   */
   spaces: {
     type: Number,
-    default: 150
-  }
+    default: undefined,
+  },
 })
+
+const slots = useSlots()
+
+function vnodesToText(nodes: unknown): string {
+  if (nodes == null || nodes === false || nodes === true) return ''
+  if (typeof nodes === 'string' || typeof nodes === 'number') return String(nodes)
+  if (Array.isArray(nodes)) return nodes.map(vnodesToText).join('')
+  if (typeof nodes === 'object' && 'children' in (nodes as Record<string, unknown>)) {
+    return vnodesToText((nodes as { children: unknown }).children)
+  }
+  return ''
+}
+
+// Inbox preview budget. Pad with invisible fillers so the
+// client doesn't pull body content into the snippet.
+const PREVIEW_LENGTH = 200
+
+const text = computed(() => vnodesToText(slots.default?.()))
+const fillerCount = computed(() =>
+  props.spaces !== undefined
+    ? Math.max(0, props.spaces)
+    : Math.max(0, PREVIEW_LENGTH - text.value.length),
+)
 </script>
 
 <template>
   <Teleport to="body:start">
-    <div style="display: none"><slot /><template v-for="i in spaces" :key="i">&#8199;&#65279;&#847; </template>&nbsp;</div>
+    <div style="display: none">{{ text }}<template v-for="i in fillerCount" :key="i">&#8199;&#65279;&#847; </template>&nbsp;</div>
   </Teleport>
 </template>

package/dist/components/Section.vue

@@ -63,6 +63,7 @@ const userHasWidth = computed(() => {
 
 const useMarker = outlookFallback && props.width == null && userHasWidth.value
 const msoId = useMarker ? nextId('s') : null
+const tdId = outlookFallback ? nextId('st') : null
 
 const divStyle = computed(() => {
   const parts: string[] = []
@@ -76,13 +77,6 @@ const restAttrs = computed(() => {
   return rest
 })
 
-const tdStyles = computed(() => {
-  const parts: string[] = []
-  if (userStyle.value) parts.push(userStyle.value)
-  if (props.msoStyle) parts.push(props.msoStyle)
-  return parts.length ? parts.join('; ') : ''
-})
-
 const msoWidth = computed(() => {
   if (props.width != null) return normalizeToPixels(props.width)
   if (useMarker) return `__MAIZZLE_MSOW_${msoId}__`
@@ -95,13 +89,12 @@ const colWidthSource = computed(() => {
   return null
 })
 
-const MsoBefore = () => {
-  const tdStyle = tdStyles.value ? ` style="${tdStyles.value}"` : ''
-  return createStaticVNode(
-    `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}"><tr><td${tdStyle}><![endif]-->`,
-    1
-  )
-}
+const tdMarker = tdId ? `__MAIZZLE_MSOTDSTYLE_${tdId}__` : ''
+
+const MsoBefore = () => createStaticVNode(
+  `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}"><tr><td${tdMarker}><![endif]-->`,
+  1
+)
 
 const MsoAfter = () => createStaticVNode(
   '<!--[if mso]></td></tr></table><![endif]-->',
@@ -117,6 +110,8 @@ const MsoAfter = () => createStaticVNode(
     :data-maizzle-msow-id="msoId"
     :data-maizzle-msow-fallback="useMarker ? '100%' : null"
     :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/Text.vue

@@ -18,7 +18,7 @@ const props = defineProps({
 
 const attrs = useAttrs()
 
-const defaultClass = computed(() => props.as === 'span' ? 'text-base' : 'm-0 my-4 text-base')
+const defaultClass = computed(() => props.as === 'span' ? 'text-base' : 'mt-4 text-base')
 const mergedClass = computed(() => twMerge(defaultClass.value, attrs.class as string))
 </script>
 

package/dist/composables/defineConfig.d.ts

@@ -3,10 +3,9 @@ import { MaizzleConfig } from "../types/config.js";
 /**
  * Define Maizzle config.
  *
- * Works in both contexts:
- * - In maizzle.config.ts: typed identity function, returns the config as-is
- * - In Vue SFC <script setup>: merges with the global config and provides
- *   the result to child components via useConfig()
+ * In maizzle.config.ts: typed identity function, returns the config as-is
+ * In Vue SFC `<script setup>`: merges with the global config and provides
+ * the result to child components via `useConfig()`
  */
 declare function defineConfig(data?: Partial<MaizzleConfig>): MaizzleConfig;
 //#endregion

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

@@ -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"}
+{"version":3,"file":"defineConfig.d.ts","names":[],"sources":["../../src/composables/defineConfig.ts"],"mappings":";;;;;AAoBA;;;;iBAAgB,YAAA,CAAa,IAAA,GAAM,OAAA,CAAQ,aAAA,IAAsB,aAAA"}

package/dist/composables/defineConfig.js

@@ -12,10 +12,9 @@ const merge = createDefu((obj, key, value) => {
 /**
 * Define Maizzle config.
 *
-* Works in both contexts:
-* - In maizzle.config.ts: typed identity function, returns the config as-is
-* - In Vue SFC <script setup>: merges with the global config and provides
-*   the result to child components via useConfig()
+* In maizzle.config.ts: typed identity function, returns the config as-is
+* In Vue SFC `<script setup>`: merges with the global config and provides
+* the result to child components via `useConfig()`
 */
 function defineConfig(data = {}) {
 	if (getCurrentInstance()) {

package/dist/composables/defineConfig.js.map

@@ -1 +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;CAC5C,IAAI,MAAM,QAAQ,IAAI,KAAK,EAAE;EAC3B,IAAI,OAAO;EACX,OAAO;;EAET;;;;;;;;;AAUF,SAAgB,aAAa,OAA+B,EAAE,EAAiB;CAE7E,IAAI,oBAAoB,EAAE;EAExB,MAAM,SAAS,MAAM,MADA,OAAO,kBAAkB,EAAE,CACT,CAAC;EAExC,MAAM,MAAM,OAAO,iBAAiB;EACpC,IAAI,KAAK,IAAI,YAAY;EAEzB,QAAQ,kBAAkB,OAAO;EAEjC,OAAO;;CAIT,OAAO"}
+{"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 * 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;CAC5C,IAAI,MAAM,QAAQ,IAAI,KAAK,EAAE;EAC3B,IAAI,OAAO;EACX,OAAO;;EAET;;;;;;;;AASF,SAAgB,aAAa,OAA+B,EAAE,EAAiB;CAE7E,IAAI,oBAAoB,EAAE;EAExB,MAAM,SAAS,MAAM,MADA,OAAO,kBAAkB,EAAE,CACT,CAAC;EAExC,MAAM,MAAM,OAAO,iBAAiB;EACpC,IAAI,KAAK,IAAI,YAAY;EAEzB,QAAQ,kBAAkB,OAAO;EAEjC,OAAO;;CAIT,OAAO"}

package/dist/composables/renderContext.d.ts

@@ -20,7 +20,6 @@ interface RenderContext {
   preheader?: {
     text: string;
     fillerCount: number;
-    shyCount: number;
   };
   sfcConfig?: MaizzleConfig;
   sfcEventHandlers: Array<{

package/dist/composables/renderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderContext.d.ts","names":[],"sources":["../../src/composables/renderContext.ts"],"mappings":";;;;;;UAKiB,gBAAA;EACf,MAAA;EACA,IAAA;EACA,WAAA;EACA,GAAA;AAAA;AAAA,UAGe,aAAA;EACf,EAAA;EANA;EAQA,GAAA;AAAA;AAAA,UAGe,aAAA;EACf,OAAA;EACA,SAAA;IAAc,IAAA;IAAc,WAAA;IAAqB,QAAA;EAAA;EACjD,SAAA,GAAY,aAAA;EACZ,gBAAA,EAAkB,KAAA;IAAQ,IAAA,EAAM,SAAA;IAAW,OAAA,EAAS,QAAA,CAAS,SAAA;EAAA;EAC7D,SAAA,GAAY,mBAAA;EACZ,KAAA,GAAQ,gBAAA;EACR,cAAA,GAAiB,aAAA;AAAA;AAAA,cAGN,gBAAA,EAAkB,YAAA,CAAa,aAAA"}
+{"version":3,"file":"renderContext.d.ts","names":[],"sources":["../../src/composables/renderContext.ts"],"mappings":";;;;;;UAKiB,gBAAA;EACf,MAAA;EACA,IAAA;EACA,WAAA;EACA,GAAA;AAAA;AAAA,UAGe,aAAA;EACf,EAAA;EANA;EAQA,GAAA;AAAA;AAAA,UAGe,aAAA;EACf,OAAA;EACA,SAAA;IAAc,IAAA;IAAc,WAAA;EAAA;EAC5B,SAAA,GAAY,aAAA;EACZ,gBAAA,EAAkB,KAAA;IAAQ,IAAA,EAAM,SAAA;IAAW,OAAA,EAAS,QAAA,CAAS,SAAA;EAAA;EAC7D,SAAA,GAAY,mBAAA;EACZ,KAAA,GAAQ,gBAAA;EACR,cAAA,GAAiB,aAAA;AAAA;AAAA,cAGN,gBAAA,EAAkB,YAAA,CAAa,aAAA"}

package/dist/composables/renderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderContext.js","names":[],"sources":["../../src/composables/renderContext.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { MaizzleConfig } from '../types/index.ts'\nimport type { EventName, EventMap } from '../events/index.ts'\nimport type { UsePlaintextOptions } from './usePlaintext.ts'\n\nexport interface FontRegistration {\n  family: string\n  slug: string\n  declaration: string\n  url: string\n}\n\nexport interface TailwindBlock {\n  id: string\n  /** Optional raw CSS from the component's `#config` slot. */\n  css?: string\n}\n\nexport interface RenderContext {\n  doctype?: string\n  preheader?: { text: string; fillerCount: number; shyCount: number }\n  sfcConfig?: MaizzleConfig\n  sfcEventHandlers: Array<{ name: EventName; handler: EventMap[EventName] }>\n  plaintext?: UsePlaintextOptions\n  fonts?: FontRegistration[]\n  tailwindBlocks?: TailwindBlock[]\n}\n\nexport const RenderContextKey: InjectionKey<RenderContext> = Symbol('RenderContext')\n"],"mappings":";AA4BA,MAAa,mBAAgD,OAAO,gBAAgB"}
+{"version":3,"file":"renderContext.js","names":[],"sources":["../../src/composables/renderContext.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { MaizzleConfig } from '../types/index.ts'\nimport type { EventName, EventMap } from '../events/index.ts'\nimport type { UsePlaintextOptions } from './usePlaintext.ts'\n\nexport interface FontRegistration {\n  family: string\n  slug: string\n  declaration: string\n  url: string\n}\n\nexport interface TailwindBlock {\n  id: string\n  /** Optional raw CSS from the component's `#config` slot. */\n  css?: string\n}\n\nexport interface RenderContext {\n  doctype?: string\n  preheader?: { text: string; fillerCount: number }\n  sfcConfig?: MaizzleConfig\n  sfcEventHandlers: Array<{ name: EventName; handler: EventMap[EventName] }>\n  plaintext?: UsePlaintextOptions\n  fonts?: FontRegistration[]\n  tailwindBlocks?: TailwindBlock[]\n}\n\nexport const RenderContextKey: InjectionKey<RenderContext> = Symbol('RenderContext')\n"],"mappings":";AA4BA,MAAa,mBAAgD,OAAO,gBAAgB"}

package/dist/composables/usePreheader.d.ts

@@ -1,9 +1,10 @@
 //#region src/composables/usePreheader.d.ts
 interface UsePreheaderOptions {
-  /** Number of  ͏ filler pairs to render. @default 150 */
-  fillerCount?: number;
-  /** Number of ­ entities to render. @default 150 */
-  shyCount?: number;
+  /**
+   * Explicit number of filler sequences to render. When omitted, the count
+   * is auto-derived to fill the 200-char inbox preview budget.
+   */
+  spaces?: number;
 }
 /**
  * Set the preheader text for the current email template.
@@ -15,7 +16,7 @@ interface UsePreheaderOptions {
  * Usage in SFC <script setup>:
  * ```ts
  * usePreheader('Thanks for signing up!')
- * usePreheader('Welcome!', { fillerCount: 200, shyCount: 200 })
+ * usePreheader('Welcome!', { spaces: 50 })
  * ```
  */
 declare function usePreheader(text: string, options?: UsePreheaderOptions): void;

package/dist/composables/usePreheader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePreheader.d.ts","names":[],"sources":["../../src/composables/usePreheader.ts"],"mappings":";UAGiB,mBAAA;EAAA;EAEf,WAAA;;EAEA,QAAA;AAAA;AAgBF;;;;;;;;;;;;;AAAA,iBAAgB,YAAA,CAAa,IAAA,UAAc,OAAA,GAAU,mBAAA"}
+{"version":3,"file":"usePreheader.d.ts","names":[],"sources":["../../src/composables/usePreheader.ts"],"mappings":";UAKiB,mBAAA;EAAA;;;;EAKf,MAAA;AAAA;;;;;;;;;;;;;;iBAgBc,YAAA,CAAa,IAAA,UAAc,OAAA,GAAU,mBAAA"}

package/dist/composables/usePreheader.js

@@ -1,6 +1,7 @@
 import { RenderContextKey } from "./renderContext.js";
 import { inject } from "vue";
 //#region src/composables/usePreheader.ts
+const PREVIEW_LENGTH = 200;
 /**
 * Set the preheader text for the current email template.
 *
@@ -11,15 +12,14 @@ import { inject } from "vue";
 * Usage in SFC <script setup>:
 * ```ts
 * usePreheader('Thanks for signing up!')
-* usePreheader('Welcome!', { fillerCount: 200, shyCount: 200 })
+* usePreheader('Welcome!', { spaces: 50 })
 * ```
 */
 function usePreheader(text, options) {
 	const ctx = inject(RenderContextKey);
 	if (ctx) ctx.preheader = {
 		text,
-		fillerCount: options?.fillerCount ?? 150,
-		shyCount: options?.shyCount ?? 150
+		fillerCount: options?.spaces !== void 0 ? Math.max(0, options.spaces) : Math.max(0, PREVIEW_LENGTH - text.length)
 	};
 }
 //#endregion

package/dist/composables/usePreheader.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePreheader.js","names":[],"sources":["../../src/composables/usePreheader.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { RenderContextKey } from './renderContext.ts'\n\nexport interface UsePreheaderOptions {\n  /** Number of &#8199;&#847; filler pairs to render. @default 150 */\n  fillerCount?: number\n  /** Number of &shy; entities to render. @default 150 */\n  shyCount?: number\n}\n\n/**\n * Set the preheader text for the current email template.\n *\n * Injects a hidden `<div>` at the start of `<body>` with the preheader text\n * followed by filler characters that prevent email clients from pulling\n * in body content after the preheader.\n *\n * Usage in SFC <script setup>:\n * ```ts\n * usePreheader('Thanks for signing up!')\n * usePreheader('Welcome!', { fillerCount: 200, shyCount: 200 })\n * ```\n */\nexport function usePreheader(text: string, options?: UsePreheaderOptions): void {\n  const ctx = inject(RenderContextKey)\n  if (ctx) {\n    ctx.preheader = {\n      text,\n      fillerCount: options?.fillerCount ?? 150,\n      shyCount: options?.shyCount ?? 150,\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,SAAgB,aAAa,MAAc,SAAqC;CAC9E,MAAM,MAAM,OAAO,iBAAiB;CACpC,IAAI,KACF,IAAI,YAAY;EACd;EACA,aAAa,SAAS,eAAe;EACrC,UAAU,SAAS,YAAY;EAChC"}
+{"version":3,"file":"usePreheader.js","names":[],"sources":["../../src/composables/usePreheader.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { RenderContextKey } from './renderContext.ts'\n\nconst PREVIEW_LENGTH = 200\n\nexport interface UsePreheaderOptions {\n  /**\n   * Explicit number of filler sequences to render. When omitted, the count\n   * is auto-derived to fill the 200-char inbox preview budget.\n   */\n  spaces?: number\n}\n\n/**\n * Set the preheader text for the current email template.\n *\n * Injects a hidden `<div>` at the start of `<body>` with the preheader text\n * followed by filler characters that prevent email clients from pulling\n * in body content after the preheader.\n *\n * Usage in SFC <script setup>:\n * ```ts\n * usePreheader('Thanks for signing up!')\n * usePreheader('Welcome!', { spaces: 50 })\n * ```\n */\nexport function usePreheader(text: string, options?: UsePreheaderOptions): void {\n  const ctx = inject(RenderContextKey)\n  if (ctx) {\n    const fillerCount = options?.spaces !== undefined\n      ? Math.max(0, options.spaces)\n      : Math.max(0, PREVIEW_LENGTH - text.length)\n    ctx.preheader = { text, fillerCount }\n  }\n}\n"],"mappings":";;;AAGA,MAAM,iBAAiB;;;;;;;;;;;;;;AAuBvB,SAAgB,aAAa,MAAc,SAAqC;CAC9E,MAAM,MAAM,OAAO,iBAAiB;CACpC,IAAI,KAIF,IAAI,YAAY;EAAE;EAAM,aAHJ,SAAS,WAAW,KAAA,IACpC,KAAK,IAAI,GAAG,QAAQ,OAAO,GAC3B,KAAK,IAAI,GAAG,iBAAiB,KAAK,OAAO;EACR"}

package/dist/composables/useTransformers.d.ts

@@ -11,7 +11,7 @@ import { TransformerToggles } from "../types/config.js";
  * - `useTransformers({ prettify: true, minify: true })` *enables*
  *   transformers that would otherwise no-op (boolean-driven ones:
  *   inlineCss, purgeCss, prettify, minify, shorthandCss, sixHex,
- *   safeClassNames, entities). Same effect as setting their config
+ *   safeSelectors, entities). Same effect as setting their config
  *   slice directly, scoped to one template.
  *
  * Data-driven transformers (filters, baseURL, urlQuery, addAttributes,