@maizzle/framework 6.0.0-rc.9 → 6.0.1

package/dist/components/CodeInline.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
-import { createStaticVNode } from 'vue'
+import { createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { codeToHtml, getSingletonHighlighter, type BundledLanguage, type BundledTheme } from 'shiki'
 
 export default {
   inheritAttrs: false,
@@ -13,9 +15,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) {
@@ -31,9 +51,60 @@ export default {
       return () => createStaticVNode('', 0)
     }
 
-    const classes = attrs.class ? ` class="${attrs.class}"` : ''
-    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(';')
+    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 base = `bg-[${bg}] rounded-md py-0.5 px-1.5 text-[11px]`
+      const merged = twMerge(base, (attrs.class as string) ?? '')
+      const styleAttr = attrs.style ? ` style="${attrs.style}"` : ''
+
+      const html = `<code class="${merged}"${styleAttr} data-minify-inline>${escaped}</code>`
+      return () => createStaticVNode(html, 1)
+    }
+
+    const base = 'whitespace-normal rounded-md [border:1px_solid_#d1d5db] bg-gray-100 py-0.5 px-1.5 text-[11px] text-inherit'
+    const merged = twMerge(base, (attrs.class as string) ?? '')
+    const styleAttr = attrs.style ? ` style="${attrs.style}"` : ''
 
     const escaped = source
       .replace(/&/g, '&amp;')
@@ -41,7 +112,7 @@ export default {
       .replace(/>/g, '&gt;')
       .replace(/"/g, '&quot;')
 
-    const html = `<code${classes} style="${styles}">${escaped}</code>`
+    const html = `<code class="${merged}"${styleAttr}>${escaped}</code>`
 
     return () => createStaticVNode(html, 1)
   }

package/dist/components/Column.vue

@@ -1,7 +1,9 @@
 <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 { twMerge } from 'tailwind-merge'
+import { nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -11,8 +13,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],
@@ -28,46 +31,73 @@ const props = defineProps({
   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,
 })
 
-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 outlookFallback = useOutlookFallback(props.outlookFallback)
 
-const minWidth = computed(() => {
-  if (props.width) return normalizeToPixels(props.width)
-  if (injectedMinWidth?.value) return injectedMinWidth.value
+const columnCount = inject<ComputedRef<number> | null>('columnCount', null)
 
-  // Fallback: divide container width by 2 if available
-  if (containerWidth?.value) {
-    const val = containerWidth.value
-    if (typeof val === 'number') return `${parseFloat((val / 2).toFixed(2))}px`
-    const num = Number.parseFloat(val)
-    const unit = val.replace(String(num), '') || 'px'
-    return `${parseFloat((num / 2).toFixed(2))}${unit}`
-  }
+const count = computed(() => columnCount?.value ?? 2)
 
-  return '18.75em'
-})
+const useMarker = props.width == null
+const colId = useMarker ? nextId('co') : null
 
-const msoWidth = computed(() => injectedMsoWidth?.value ?? '50%')
+const minWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_COLW_${colId}__`
+})
 
-// Provide column width as containerWidth for nested Rows
-provide('containerWidth', minWidth)
+const msoWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_COLW_${colId}__`
+})
 
-const styles = computed(() => {
-  return `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
+/**
+ * Baseline display/typography lives in classes — not inline `:style` —
+ * so the user can override any of them via tailwind utilities. Inline
+ * `display: inline-block` would silently shadow a class like
+ * `inline-table` during CSS inlining; routing both through twMerge lets
+ * the user's utility cleanly replace ours instead of being dropped.
+ *
+ * When `width` is set as a prop the resolved pixel value also goes
+ * through the class list (`min-w-[Npx]`) so it dedupes against the
+ * user's `min-w-*` utility. The marker path (no prop) has to stay
+ * inline because the placeholder string is replaced post-render and
+ * Tailwind's content scanner can't compile a class whose value is
+ * still a marker.
+ */
+const baseClass = 'inline-block text-[medium]'
+const mergedClass = computed(() => {
+  const parts = [baseClass]
+  if (props.width != null) parts.push(`min-w-[${normalizeToPixels(props.width)}]`)
+  return twMerge(parts.join(' '), (attrs.class as string) ?? '')
 })
 
+const styles = computed(() =>
+  props.width != null ? undefined : `min-width: ${minWidth.value};`
+)
+
 const tdStyle = computed(() => {
-  const parts = ['vertical-align: top']
+  const parts = [`width: ${msoWidth.value}`]
+  if (useMarker) parts.push(`__MAIZZLE_COLTDX_${colId}__`)
   if (props.msoStyle) parts.push(props.msoStyle)
   return parts.join('; ')
 })
 
 const MsoBefore = () => createStaticVNode(
-  `<!--[if mso]><td width="${msoWidth.value}" style="${tdStyle.value}"><![endif]-->`,
+  `<!--[if mso]><td style="${tdStyle.value}"><![endif]-->`,
   1
 )
 
@@ -78,9 +108,15 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
-  <div v-bind="attrs" :style="styles">
+  <MsoBefore v-if="outlookFallback" />
+  <div
+    v-bind="{ ...attrs, class: undefined }"
+    :class="mergedClass"
+    :style="styles"
+    :data-maizzle-cw-id="colId"
+    :data-maizzle-cw-count="useMarker ? count : null"
+  >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Container.vue

@@ -1,6 +1,8 @@
 <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, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -11,25 +13,77 @@ 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.
    *
-   * @default '37.5em'
+   * 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],
-    default: '37.5em'
-  }
+    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,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 provide('containerWidth', computed(() => props.width))
 
-const styles = computed(() => {
-  return `max-width: ${normalizeToPixels(props.width)}; margin: 0 auto;`
+const useMarker = outlookFallback && props.width == null
+const msoId = useMarker ? nextId('c') : null
+const tdId = outlookFallback ? nextId('ct') : null
+
+const mergedClass = computed(() => {
+  const userClass = (attrs.class as string) ?? ''
+  const parts: string[] = ['m-0', 'mx-auto']
+  if (props.width != null) {
+    parts.push(`max-w-[${normalizeToPixels(props.width)}]`)
+  } else if (!hasWidthUtility(userClass)) {
+    parts.push('max-w-150')
+  }
+  return twMerge(parts.join(' '), userClass)
+})
+
+const msoWidth = computed(() => {
+  if (props.width != null) return normalizeToPixels(props.width)
+  return `__MAIZZLE_MSOW_${msoId}__`
 })
 
+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: ${normalizeToPixels(props.width)}" 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
 )
 
@@ -40,9 +94,16 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
-  <div v-bind="attrs" :style="styles">
+  <MsoBefore v-if="outlookFallback" />
+  <div
+    v-bind="{ ...attrs, class: undefined }"
+    :class="mergedClass"
+    :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>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

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/Heading.vue

@@ -22,7 +22,7 @@ const mergedClass = computed(() => twMerge('m-0', attrs.class as string))
 </script>
 
 <template>
-  <component :is="tag" v-bind="$attrs" :class="mergedClass">
+  <component :is="tag" v-bind="{ ...$attrs, class: mergedClass }">
     <slot />
   </component>
 </template>

package/dist/components/Hr.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const HEIGHT_RE = /(?:^|\s)h-([\w./\-[\]%]+)/g
+const LEADING_RE = /(?:^|\s)leading-/
+
+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)
+
+  const defaults = ['my-6', 'bg-gray-300']
+  if (!userHeight) defaults.push('h-px')
+  if (!userHasLeading && !userHeight) defaults.push('leading-px')
+
+  const derived = userHeight && !userHasLeading ? `leading-${userHeight}` : ''
+  return twMerge(defaults.join(' '), userClass, derived)
+})
+</script>
+
+<template>
+  <div
+    role="separator"
+    v-bind="{ ...$attrs, class: undefined }"
+    :class="mergedClass"
+  >&zwj;</div>
+</template>

package/dist/components/Html.vue

@@ -1,6 +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 })
 
@@ -65,9 +68,39 @@ const props = defineProps({
   xmlns: {
     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,
+  /**
+   * 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 = () => {
@@ -80,7 +113,7 @@ const render = () => {
     `dir="${props.dir}"`,
   ]
 
-  if (props.xmlns !== false && props.xmlns !== 'false') {
+  if (outlookFallback && props.xmlns !== false && props.xmlns !== 'false') {
     parts.push(
       'xmlns:v="urn:schemas-microsoft-com:vml"',
       'xmlns:o="urn:schemas-microsoft-com:office:office"',