@maizzle/framework 6.0.0-rc.13 → 6.0.0-rc.15

package/dist/components/Button.vue

@@ -174,7 +174,7 @@ const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as
         <Outlook><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
         <template v-if="icon && iconPosition === 'left'">
           <span :style="`mso-text-raise: ${msoPt}`">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`">
+            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
           </span>
           <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
         </template>
@@ -182,7 +182,7 @@ const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as
         <template v-if="icon && iconPosition === 'right'">
           <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
           <span :style="`mso-text-raise: ${msoPt}`">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`">
+            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
           </span>
         </template>
         <Outlook><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>

package/dist/components/CodeBlock.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
 import { codeToHtml, getSingletonHighlighter, type BundledLanguage, type BundledTheme } from 'shiki'
 
 export default {
@@ -56,7 +57,7 @@ export default {
       .replace(/^<pre[^>]*><code>/, '')
       .replace(/<\/code><\/pre>$/, '')
 
-    const classes = ['font-mono', attrs.class].filter(Boolean).join(' ')
+    const classes = twMerge('font-mono', attrs.class as string)
     const baseStyles = `background-color:${bg};padding:16px;overflow:auto;white-space:pre;word-wrap:normal;word-break:normal;word-spacing:normal`
     const styles = [baseStyles, attrs.style].filter(Boolean).join(';')
 

package/dist/components/Column.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, createStaticVNode, inject, provide, useAttrs } from 'vue'
+import { computed, createStaticVNode, inject, useAttrs } from 'vue'
 import type { ComputedRef } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { nextId, normalizeToPixels } from './utils.ts'
 
 defineOptions({ inheritAttrs: false })
 
@@ -11,8 +11,9 @@ const props = defineProps({
   /**
    * Override the auto-computed column width.
    *
-   * By default, the width is calculated from the parent `Row`
-   * by dividing its width by the column count.
+   * By default, the width is calculated from the nearest sized
+   * ancestor (`Container`, `Section`, `Row`, or outer `Column`)
+   * divided by the column count detected on the parent `Row`.
    */
   width: {
     type: [String, Number],
@@ -31,35 +32,35 @@ const props = defineProps({
   }
 })
 
-const injectedMinWidth = inject<ComputedRef<string> | null>('columnMinWidth', null)
-const containerWidth = inject<ComputedRef<string | number> | null>('containerWidth', null)
-const injectedMsoWidth = inject<ComputedRef<string> | null>('columnMsoWidth', null)
+const columnCount = inject<ComputedRef<number> | null>('columnCount', null)
 
-const minWidth = computed(() => {
-  if (props.width) return normalizeToPixels(props.width)
-
-  return injectedMinWidth?.value ?? null
-})
+const count = computed(() => columnCount?.value ?? 2)
 
-const msoWidth = computed(() => injectedMsoWidth?.value ?? '50%')
+const useMarker = props.width == null
+const colId = useMarker ? nextId('co') : null
 
-// Provide column width as containerWidth for nested Rows
-provide('containerWidth', computed(() => minWidth.value ?? containerWidth?.value ?? null))
+const minWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_COLW_${colId}__`
+})
 
-const styles = computed(() => {
-  const parts = ['display: inline-block', 'font-size: 16px', 'vertical-align: top']
-  if (minWidth.value) parts.splice(1, 0, `min-width: ${minWidth.value}`)
-  return `${parts.join('; ')};`
+const msoWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_COLW_${colId}__`
 })
 
+const styles = computed(() =>
+  `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
+)
+
 const tdStyle = computed(() => {
-  const parts = ['vertical-align: top']
+  const parts = [`width: ${msoWidth.value}`, 'vertical-align: top']
   if (props.msoStyle) parts.push(props.msoStyle)
   return parts.join('; ')
 })
 
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><td width="${msoWidth.value}" style="${tdStyle.value}"><![endif]-->`,
+  `<!--[if mso]><td style="${tdStyle.value}"><![endif]-->`,
   1
 )
 
@@ -71,7 +72,12 @@ const MsoAfter = () => createStaticVNode(
 
 <template>
   <MsoBefore />
-  <div v-bind="attrs" :style="styles">
+  <div
+    v-bind="attrs"
+    :style="styles"
+    :data-maizzle-cw-id="colId"
+    :data-maizzle-cw-count="useMarker ? count : null"
+  >
     <slot />
   </div>
   <MsoAfter />

package/dist/components/Container.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, provide, createStaticVNode, useAttrs } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { twMerge } from 'tailwind-merge'
+import { hasWidthUtility, nextId, normalizeToPixels } from './utils.ts'
 
 defineOptions({ inheritAttrs: false })
 
@@ -11,27 +12,58 @@ const props = defineProps({
    * Max width of the container.
    *
    * Applied as `max-width` on the div and as `width` on the MSO table.
-   * Also provided to child `Row` and `Column` components for
-   * automatic column width calculation.
+   * Also used as the width source for descendant `Row`/`Column`
+   * components when computing column widths.
    *
-   * When not set, no inline `max-width` is applied to the div —
-   * use Tailwind classes like `max-w-xl mx-auto` instead.
-   * The MSO table defaults to 600px.
+   * 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.
    */
   width: {
     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
   }
 })
 
 provide('containerWidth', computed(() => props.width))
 
+const useMarker = props.width == null && props.msoWidth == null
+const msoId = useMarker ? nextId('c') : null
+
 const styles = computed(() => {
-  if (!props.width) return 'margin: 0 auto;'
+  if (props.width == null) return undefined
   return `max-width: ${normalizeToPixels(props.width)}; margin: 0 auto;`
 })
 
-const msoWidth = computed(() => normalizeToPixels(props.width ?? 600))
+const mergedClass = computed(() => {
+  if (props.width != null) return attrs.class as string | undefined
+  const userClass = (attrs.class as string) ?? ''
+  const defaultClass = hasWidthUtility(userClass)
+    ? 'm-0 mx-auto'
+    : 'w-150 m-0 mx-auto'
+  return twMerge(defaultClass, userClass)
+})
+
+const msoWidth = computed(() => {
+  if (props.msoWidth != null) return normalizeToPixels(props.msoWidth)
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_MSOW_${msoId}__`
+})
+
+const colWidthSource = computed(() =>
+  props.width != null ? normalizeToPixels(props.width) : ''
+)
 
 const MsoBefore = () => createStaticVNode(
   `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${msoWidth.value}" align="center"><tr><td><![endif]-->`,
@@ -46,7 +78,13 @@ const MsoAfter = () => createStaticVNode(
 
 <template>
   <MsoBefore />
-  <div v-bind="attrs" :style="styles">
+  <div
+    v-bind="{ ...attrs, class: undefined }"
+    :class="mergedClass"
+    :style="styles"
+    :data-maizzle-msow-id="msoId"
+    :data-maizzle-cw="colWidthSource"
+  >
     <slot />
   </div>
   <MsoAfter />

package/dist/components/Font.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { type PropType } from 'vue'
+import { useFont } from '../composables/useFont'
+
+type PopularGoogleFont =
+  // Sans-serif
+  | 'Roboto' | 'Open Sans' | 'Inter' | 'Lato' | 'Montserrat'
+  // Serif
+  | 'Merriweather' | 'Playfair Display' | 'Lora' | 'PT Serif' | 'Noto Serif'
+  // Display
+  | 'Oswald' | 'Bebas Neue' | 'Anton' | 'Lobster' | 'Pacifico'
+  // Handwriting
+  | 'Dancing Script' | 'Caveat' | 'Shadows Into Light' | 'Satisfy' | 'Great Vibes'
+  // Monospace
+  | 'Roboto Mono' | 'Source Code Pro' | 'JetBrains Mono' | 'Fira Code' | 'Inconsolata'
+
+const props = defineProps({
+  /**
+   * A single font family name, e.g. `"Roboto"` or `"Open Sans"`.
+   *
+   * For fallback fonts, use the `fallback` prop instead of a
+   * comma-separated list here. Popular Google Fonts are suggested
+   * in the IDE, but any string is accepted.
+   *
+   * @example "Open Sans"
+   */
+  family: {
+    type: String as PropType<PopularGoogleFont | (string & {})>,
+    required: true,
+    validator: (v: string) => v.trim().length > 0,
+  },
+  /**
+   * CSS fallback list appended to the `font-family` declaration.
+   *
+   * @example "Verdana, sans-serif"
+   */
+  fallback: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Font provider used to build the stylesheet URL when `url` is omitted.
+   * Bunny Fonts is a drop-in, privacy-friendly Google Fonts mirror.
+   */
+  provider: {
+    type: String as PropType<'google' | 'bunny'>,
+    default: 'google',
+    validator: (v: string) => ['google', 'bunny'].includes(v),
+  },
+  /**
+   * Stylesheet URL. When provided, used as-is for the `<link href>`.
+   * When omitted, a Google Fonts URL is built from `family`, `weights`,
+   * `display` and `styles`.
+   */
+  url: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Font weights to load. Ignored when `url` is provided.
+   */
+  weights: {
+    type: Array as () => number[],
+    default: () => [400],
+  },
+  /**
+   * `font-display` value. Ignored when `url` is provided.
+   */
+  display: {
+    type: String as PropType<'auto' | 'block' | 'swap' | 'fallback' | 'optional'>,
+    default: 'swap',
+    validator: (v: string) => ['auto', 'block', 'swap', 'fallback', 'optional'].includes(v),
+  },
+  /**
+   * Font styles to load. Ignored when `url` is provided.
+   *
+   * @example ['normal', 'italic']
+   */
+  styles: {
+    type: Array as () => Array<'normal' | 'italic'>,
+    default: () => ['normal'],
+  },
+})
+
+useFont({
+  family: props.family,
+  fallback: props.fallback || undefined,
+  provider: props.provider,
+  url: props.url || undefined,
+  weights: props.weights,
+  display: props.display,
+  styles: props.styles,
+})
+</script>
+
+<template></template>

package/dist/components/Head.vue

@@ -6,7 +6,7 @@ const props = defineProps({
    * Render an empty `<head>` before the main head element.
    *
    * This is a workaround for Yahoo! Mail on Android, which
-   * strips styles from the first `<head>` element.
+   * strips the first `<head>` element it finds.
    *
    * @default false
    */

package/dist/components/Layout.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import { computed, useAttrs, createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
 
 defineOptions({ inheritAttrs: false })
 
-defineProps({
+const props = defineProps({
   /**
    * Classes to add to the `<body>` tag.
    */
@@ -29,6 +30,18 @@ defineProps({
     type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr'
   },
+  /**
+   * Render an empty `<head>` before the main head element.
+   *
+   * This is a workaround for Yahoo! Mail on Android, which
+   * strips the first `<head>` element it finds.
+   *
+   * @default false
+   */
+  doubleHead: {
+    type: [Boolean, String],
+    default: false
+  },
   /**
    * Accessible label for the email article wrapper.
    *
@@ -41,10 +54,17 @@ defineProps({
     default: undefined
   }
 })
+
+const attrs = useAttrs()
+const bodyMergedClass = computed(() => twMerge('m-0 p-0 size-full [word-break:break-word]', props.bodyClass))
+const articleMergedClass = computed(() => twMerge('[font-size:max(16px,1rem)] font-inter', attrs.class as string))
+
+const EmptyHead = () => createStaticVNode('<head></head>', 1)
 </script>
 
 <template>
   <html :lang="lang" :dir="dir" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+  <EmptyHead v-if="props.doubleHead === true || props.doubleHead === 'true'" />
   <head>
     <meta charset="utf-8">
     <meta name="x-apple-disable-message-reformatting">
@@ -76,7 +96,7 @@ defineProps({
       }
     </style>
   </head>
-  <body :xml:lang="lang" :class="['m-0 p-0 size-full [word-break:break-word]', bodyClass]">
+  <body :xml:lang="lang" :class="bodyMergedClass">
     <div
       role="article"
       aria-roledescription="email"
@@ -84,7 +104,7 @@ defineProps({
       :lang="lang"
       :dir="dir"
       style="font-size: medium;"
-      :class="['[font-size:max(16px,1rem)] font-inter', $attrs.class]"
+      :class="articleMergedClass"
     >
       <slot />
     </div>

package/dist/components/Outlook.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, createStaticVNode } from 'vue'
+import { computed, createStaticVNode, type PropType } from 'vue'
 
 const VERSION_MAP = {
   2003: 11,
@@ -10,7 +10,10 @@ const VERSION_MAP = {
   2019: 16
 }
 
-const toMso = (v: string) => VERSION_MAP[v]
+type Year = `${keyof typeof VERSION_MAP}`
+type YearList = Year | (string & {})
+
+const toMso = (v: string) => VERSION_MAP[v as unknown as keyof typeof VERSION_MAP]
 
 const parseList = (value: string) =>
   value
@@ -30,7 +33,7 @@ export default {
      * @example '2013'
      * @example '2013,2016'
      */
-    only: String,
+    only: String as PropType<YearList>,
     /**
      * Render content in all Outlook versions except the specified one(s).
      *
@@ -39,31 +42,55 @@ export default {
      * @example '2007'
      * @example '2007,2010'
      */
-    not: String,
+    not: String as PropType<YearList>,
     /**
      * Render content in Outlook versions lower than the specified year.
      *
      * @example '2013'
      */
-    lt: String,
+    lt: String as PropType<Year>,
     /**
      * Render content in Outlook versions lower than or equal to the specified year.
      *
      * @example '2013'
      */
-    lte: String,
+    lte: String as PropType<Year>,
     /**
      * Render content in Outlook versions greater than the specified year.
      *
      * @example '2010'
      */
-    gt: String,
+    gt: String as PropType<Year>,
     /**
      * Render content in Outlook versions greater than or equal to the specified year.
      *
      * @example '2010'
      */
-    gte: String
+    gte: String as PropType<Year>,
+    /**
+     * Raw HTML inserted at the start of the conditional comment, before the slot.
+     *
+     * Bypasses Vue's template parser, so unbalanced tags are preserved — useful
+     * for MSO ghost tables where the opening `<table><tr><td>` must live inside
+     * the conditional comment.
+     *
+     * @example '<table align="center" width="600"><tr><td>'
+     */
+    open: {
+      type: String,
+      default: ''
+    },
+    /**
+     * Raw HTML inserted at the end of the conditional comment, after the slot.
+     *
+     * Pair with `open` to close ghost-table tags inside the conditional.
+     *
+     * @example '</td></tr></table>'
+     */
+    close: {
+      type: String,
+      default: ''
+    }
   },
   setup(props, { slots }) {
     const condition = computed(() => {
@@ -97,13 +124,13 @@ export default {
       return 'mso'
     })
 
-    const start = computed(() => `<!--[if ${condition.value}]>`)
-    const end = `<![endif]-->`
+    const start = computed(() => `<!--[if ${condition.value}]>${props.open}`)
+    const end = computed(() => `${props.close}<![endif]-->`)
 
     return () => [
       createStaticVNode(start.value, 1),
       slots.default?.(),
-      createStaticVNode(end, 1),
+      createStaticVNode(end.value, 1),
     ]
   }
 }

package/dist/components/Overlap.vue

@@ -1,37 +1,48 @@
 <script setup lang="ts">
-import { computed, inject, useAttrs, createStaticVNode } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { computed, useAttrs, createStaticVNode } from 'vue'
+import {
+  hasHeightInStyle,
+  hasHeightUtility,
+  hasWidthInStyle,
+  hasWidthUtility,
+  nextId,
+  normalizeToPixels
+} from './utils.ts'
 
 defineOptions({ inheritAttrs: false })
 
 const attrs = useAttrs()
 
-const containerWidth = inject('containerWidth', undefined)
-
 const props = defineProps({
   /**
    * Max height of the background (default slot) content.
    *
-   * This constrains the visible area of the background layer.
+   * Applied as `max-height` on the background div and as `height`
+   * on the VML rectangle. When not set, the height is taken from
+   * a Tailwind utility (e.g. `h-50`, `max-h-[200px]`) or inline
+   * `height`/`max-height` style on the component, after CSS inlining.
    */
   height: {
     type: [String, Number],
-    required: true
+    default: null
   },
   /**
    * Width of the overlay table and VML rectangle.
    *
-   * When used inside a Container, defaults to the container's width.
+   * When not set, derived from a width utility class or inline
+   * style on the component itself, otherwise from the nearest
+   * sized ancestor (`Container`, `Section`, outer `Column`).
+   * Falls back to `100%` when no source is found.
    */
   width: {
     type: [String, Number],
-    default: undefined
+    default: null
   },
   /**
    * Height of the VML rectangle in Outlook.
    *
-   * Defaults to the `height` prop value. Use this to fine-tune
-   * the overlay height specifically for Outlook rendering.
+   * Defaults to the resolved `height`. Use this to fine-tune the
+   * overlay height specifically for Outlook rendering.
    */
   msoHeight: {
     type: [String, Number],
@@ -51,17 +62,56 @@ const props = defineProps({
   },
 })
 
-const resolvedWidth = computed(() => props.width ?? containerWidth?.value)
+const userStyle = computed(() => {
+  const s = attrs.style
+  if (!s) return ''
+  return typeof s === 'object'
+    ? Object.entries(s).map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`).join('; ')
+    : String(s)
+})
+
+const userClass = computed(() => (attrs.class as string) ?? '')
+
+const userHasWidth = computed(() =>
+  hasWidthUtility(userClass.value) || hasWidthInStyle(userStyle.value)
+)
+const userHasHeight = computed(() =>
+  hasHeightUtility(userClass.value) || hasHeightInStyle(userStyle.value)
+)
+
+const useWidthMarker = props.width == null
+const useHeightMarker = props.height == null && props.msoHeight == null
+const id = (useWidthMarker || useHeightMarker) ? nextId('o') : null
+
+const widthValue = computed(() =>
+  useWidthMarker ? `__MAIZZLE_COLW_${id}__` : normalizeToPixels(props.width)
+)
+
+const heightValue = computed(() => {
+  if (props.msoHeight != null) return normalizeToPixels(props.msoHeight)
+  if (props.height != null) return normalizeToPixels(props.height)
+  return `__MAIZZLE_OH_${id}__`
+})
 
 const backgroundStyles = computed(() => {
-  return `max-height: ${normalizeToPixels(props.height)}; margin: 0 auto; text-align: center;`
+  const parts: string[] = []
+  if (props.height != null) parts.push(`max-height: ${normalizeToPixels(props.height)}`)
+  parts.push('margin: 0 auto', 'text-align: center')
+  if (userStyle.value) parts.push(userStyle.value)
+  return parts.join('; ') + ';'
 })
 
-const vmlOpen = computed(() => {
-  const w = normalizeToPixels(resolvedWidth.value)
-  const h = normalizeToPixels(props.msoHeight ?? props.height)
+const tdStyle = computed(() =>
+  `width: ${widthValue.value}; max-width: 100%; vertical-align: top;`
+)
+
+const vmlOpen = computed(() =>
+  `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="width: ${widthValue.value}; height: ${heightValue.value};"><v:textbox inset="${props.msoInset}"><![endif]-->`
+)
 
-  return `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="f" filled="f" style="width: ${w}; height: ${h};"><v:textbox inset="${props.msoInset}"><![endif]-->`
+const restAttrs = computed(() => {
+  const { style: _, ...rest } = attrs
+  return rest
 })
 
 const VmlBefore = () => createStaticVNode(vmlOpen.value, 1)
@@ -69,12 +119,19 @@ const VmlAfter = () => createStaticVNode('<!--[if mso]></v:textbox></v:rect><![e
 </script>
 
 <template>
-  <div v-bind="attrs" :style="backgroundStyles">
+  <div
+    v-bind="restAttrs"
+    :style="backgroundStyles"
+    :data-maizzle-cw-id="useWidthMarker ? id : null"
+    :data-maizzle-cw-count="useWidthMarker ? 1 : null"
+    :data-maizzle-cw-self="useWidthMarker && userHasWidth ? '' : null"
+    :data-maizzle-oh-id="useHeightMarker && userHasHeight ? id : null"
+  >
     <slot />
   </div>
   <table style="max-height: 0; position: relative; opacity: 0.999;">
     <tr>
-      <td :style="`width: ${normalizeToPixels(resolvedWidth)}; max-width: 100%; vertical-align: top;`">
+      <td :style="tdStyle">
         <VmlBefore />
         <slot name="overlay" />
         <VmlAfter />