@maizzle/framework 6.0.0-rc.1 → 6.0.0-rc.11

package/dist/components/Row.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { Comment, computed, createStaticVNode, inject, provide, useAttrs, useSlots, Fragment } from 'vue'
+import type { ComputedRef, VNode } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * Override the inherited container width.
+   *
+   * Used to calculate column widths. Inherited from the
+   * parent `Container` by default.
+   */
+  width: {
+    type: [String, Number],
+    default: null
+  },
+  /**
+   * Override the auto-detected column count.
+   *
+   * By default, the number of direct child elements is used.
+   * Set this when the auto-detection doesn't match your layout
+   * (e.g. when using `v-if` or `v-for`).
+   */
+  cols: {
+    type: Number,
+    default: null
+  }
+})
+
+const slots = useSlots()
+
+function countChildren(vnodes: VNode[]): number {
+  let count = 0
+
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      count += countChildren(vnode.children as VNode[])
+    } else if (vnode.type !== Comment && typeof vnode.type !== 'symbol') {
+      count++
+    }
+  }
+
+  return count
+}
+
+const columnCount = computed(() => {
+  if (props.cols) return props.cols
+
+  const children = slots.default?.() ?? []
+  return countChildren(children) || 1
+})
+
+const containerWidth = inject<ComputedRef<string | number> | null>('containerWidth', null)
+
+const rowWidth = computed(() => props.width ?? containerWidth?.value ?? null)
+
+function divideValue(value: string | number, divisor: number): string {
+  if (typeof value === 'number') {
+    return `${parseFloat((value / divisor).toFixed(2))}px`
+  }
+
+  const num = Number.parseFloat(value)
+  const unit = value.replace(String(num), '') || 'px'
+
+  return `${parseFloat((num / divisor).toFixed(2))}${unit}`
+}
+
+provide('columnMinWidth', computed(() => rowWidth.value ? divideValue(rowWidth.value, columnCount.value) : null))
+provide('columnMsoWidth', computed(() => `${Math.round(100 / columnCount.value)}%`))
+
+const MsoBefore = () => createStaticVNode(
+  '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" width="100%"><tr><![endif]-->',
+  1
+)
+
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></tr></table><![endif]-->',
+  1
+)
+</script>
+
+<template>
+  <MsoBefore />
+  <div v-bind="attrs" style="font-size: 0;">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Section.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, createStaticVNode, useAttrs } from 'vue'
+import { normalizeToPixels } from './utils.ts'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /**
+   * Width of the section.
+   *
+   * Applied as `max-width` on the div and as `width` on the MSO table.
+   *
+   * @default '100%'
+   */
+  width: {
+    type: [String, Number],
+    default: '100%'
+  },
+  /**
+   * Inline CSS applied only to the MSO `<td>` element.
+   *
+   * Use for Outlook-specific styling that shouldn't affect other clients.
+   *
+   * @example 'padding: 10px 20px'
+   */
+  msoStyle: {
+    type: String,
+    default: undefined
+  }
+})
+
+const hasCustomWidth = computed(() => props.width !== '100%')
+
+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 divStyle = computed(() => {
+  const parts: string[] = []
+  if (hasCustomWidth.value) parts.push(`max-width: ${normalizeToPixels(props.width)}`)
+  if (userStyle.value) parts.push(userStyle.value)
+  return parts.length ? parts.join('; ') : undefined
+})
+
+const restAttrs = computed(() => {
+  const { style: _, ...rest } = attrs
+  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 MsoBefore = () => {
+  const tdStyle = tdStyles.value ? ` style="${tdStyles.value}"` : ''
+  return createStaticVNode(
+    `<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: ${normalizeToPixels(props.width)}"><tr><td${tdStyle}><![endif]-->`,
+    1
+  )
+}
+
+const MsoAfter = () => createStaticVNode(
+  '<!--[if mso]></td></tr></table><![endif]-->',
+  1
+)
+</script>
+
+<template>
+  <MsoBefore />
+  <div v-bind="restAttrs" :style="divStyle">
+    <slot />
+  </div>
+  <MsoAfter />
+</template>

package/dist/components/Spacer.vue

@@ -3,11 +3,21 @@ import { computed } from 'vue'
 import { normalizeToPixels } from './utils.ts'
 
 const props = defineProps({
-  /** The height of the spacer. */
-  size: {
+  /** The type of spacer. */
+  type: {
+    type: String as () => 'vertical' | 'horizontal',
+    default: 'vertical'
+  },
+  /** The height of the spacer (vertical). */
+  height: {
     type: [String, Number],
     default: null
   },
+  /** The width of the spacer (horizontal). */
+  width: {
+    type: [String, Number],
+    default: 16
+  },
   /** The alternative height to use in Outlook. */
   msoHeight: {
     type: [String, Number],
@@ -15,11 +25,16 @@ const props = defineProps({
   }
 })
 
-const styles = computed(() => {
+function parsePixelValue(value: string | number): number {
+  if (typeof value === 'number') return value
+  return Number.parseFloat(value) || 0
+}
+
+const verticalStyles = computed(() => {
   const s = []
 
-  if (props.size) {
-    s.push(`line-height: ${normalizeToPixels(props.size)};`)
+  if (props.height) {
+    s.push(`line-height: ${normalizeToPixels(props.height)};`)
   }
 
   if (props.msoHeight) {
@@ -28,9 +43,37 @@ const styles = computed(() => {
 
   return s.join('')
 })
+
+const horizontalStyles = computed(() => {
+  return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${msoFontWidth.value}`
+})
+
+const msoFontWidth = computed(() => {
+  const widthPx = parsePixelValue(props.width)
+  const emspBase = 16
+  const maxPercent = 500
+  const maxPerEmsp = emspBase * (maxPercent / 100)
+  const numEmsps = Math.ceil(widthPx / maxPerEmsp)
+  const percent = Math.round((widthPx / (numEmsps * emspBase)) * 100)
+
+  return ` mso-font-width:${percent}%;`
+})
+
+const emspCount = computed(() => {
+  const widthPx = parsePixelValue(props.width)
+  const maxPerEmsp = 16 * 5
+  return Math.ceil(widthPx / maxPerEmsp)
+})
+
+const emsps = computed(() => '\u2003'.repeat(emspCount.value))
 </script>
 
 <template>
-  <div v-if="size" role="separator" :style="styles">&zwj;</div>
-  <div v-else role="separator">&zwj;</div>
+  <template v-if="type === 'horizontal'">
+    <i :style="horizontalStyles">{{ emsps }}</i>
+  </template>
+  <template v-else>
+    <div v-if="height" role="separator" :style="verticalStyles">&zwj;</div>
+    <div v-else role="separator">&zwj;</div>
+  </template>
 </template>

package/dist/components/Text.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type PropType, computed, useAttrs } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  /**
+   * The HTML element to render.
+   * @default 'p'
+   */
+  as: {
+    type: String as PropType<'p' | 'span'>,
+    default: 'p',
+    validator: (v: string) => ['p', 'span'].includes(v),
+  },
+})
+
+const attrs = useAttrs()
+
+const defaultClass = computed(() => props.as === 'span' ? 'text-base' : 'm-0 my-4 text-base')
+const mergedClass = computed(() => twMerge(defaultClass.value, attrs.class as string))
+</script>
+
+<template>
+  <component :is="props.as" v-bind="$attrs" :class="mergedClass">
+    <slot />
+  </component>
+</template>

package/dist/components/Vml.vue

@@ -1,56 +1,208 @@
 <script lang="ts">
 import { computed, createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
 import { normalizeToPixels } from './utils.ts'
 
 export default {
   name: 'Vml',
   props: {
+    /**
+     * Width of the VML rectangle.
+     *
+     * Accepts a number (treated as pixels) or a string with units.
+     *
+     * @default '600px'
+     */
     width: {
       type: [String, Number],
       default: '600px'
     },
+    /**
+     * Height of the VML rectangle.
+     *
+     * Accepts a number (treated as pixels) or a string with units.
+     * When not set, the rectangle auto-sizes to fit its content.
+     */
     height: {
       type: [String, Number],
       default: null
     },
+    /**
+     * VML fill type that controls how the background image is rendered.
+     *
+     * - `frame` — scale to fill the rectangle (default)
+     * - `tile` — repeat the image to fill the rectangle
+     * - `pattern` — tile at original size
+     * - `solid` — solid color fill, no image
+     * - `gradient` — linear gradient fill
+     * - `gradientradial` — radial gradient fill
+     *
+     * @default 'frame'
+     */
     type: {
-      type: String,
+      type: String as PropType<'solid' | 'gradient' | 'gradientradial' | 'tile' | 'pattern' | 'frame'>,
       default: 'frame'
     },
-    sizes: String,
-    origin: String,
-    position: String,
-    aspect: String,
+    /**
+     * Comma-separated dimensions for the fill image.
+     *
+     * Controls the rendered size of the background image.
+     *
+     * @example '300px,200px'
+     */
+    sizes: {
+      type: String,
+      validator: (v: string) => /^[\d.]+(px|%|em|rem)?(,[\d.]+(px|%|em|rem)?)+$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Fill origin offset as comma-separated fractional values.
+     *
+     * Controls where the fill image anchors relative to the shape.
+     * Values are fractions of the shape's dimensions, where `0,0` is
+     * center and `-0.5,-0.5` is the top-left corner.
+     *
+     * Overridden by `backgroundPosition` if both are set.
+     *
+     * @example '0,0'
+     * @example '-0.5,-0.5'
+     */
+    origin: {
+      type: String,
+      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Fill position offset as comma-separated fractional values.
+     *
+     * Controls where the fill image is positioned within the shape.
+     * Values are fractions of the shape's dimensions, where `0,0` is
+     * center and `0.5,0.5` is the bottom-right corner.
+     *
+     * Overridden by `backgroundPosition` if both are set.
+     *
+     * @example '0,0'
+     * @example '0.5,0.5'
+     */
+    position: {
+      type: String,
+      validator: (v: string) => /^-?[\d.]+(,-?[\d.]+)+$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Background image position as `vertical,horizontal`.
+     *
+     * First value is the vertical axis: `top`, `center`, or `bottom`.
+     * Second value is the horizontal axis: `left`, `center`, or `right`.
+     *
+     * Convenience prop that maps to VML `origin` and `position` attributes.
+     *
+     * @example 'top,left'
+     * @example 'center,center'
+     */
+    backgroundPosition: {
+      type: String as PropType<
+        | 'top,left' | 'top,center' | 'top,right'
+        | 'center,left' | 'center,center' | 'center,right'
+        | 'bottom,left' | 'bottom,center' | 'bottom,right'
+      >,
+      validator: (v: string) => /^(top|center|bottom),(left|center|right)$/.test(v.replace(/\s/g, ''))
+    },
+    /**
+     * Aspect ratio constraint for the fill image.
+     *
+     * - `atleast` — image is at least as large as the shape
+     * - `atmost` — image is at most as large as the shape
+     */
+    aspect: {
+      type: String as PropType<'atleast' | 'atmost'>,
+    },
+    /**
+     * Fill color used for `solid` and `gradient` fill types.
+     *
+     * @example '#ffffff'
+     */
     color: String,
+    /**
+     * Text box inset (padding) as `top,right,bottom,left`.
+     *
+     * Controls the inner spacing of the `v:textbox` element.
+     *
+     * @default '0,0,0,0'
+     */
     inset: {
       type: String,
       default: '0,0,0,0'
     },
+    /**
+     * Whether the VML rectangle has a visible border.
+     *
+     * @default false
+     */
     stroke: {
-      type: String,
-      default: 'f'
+      type: [Boolean, String],
+      default: false
     },
+    /**
+     * Border color for the VML rectangle.
+     *
+     * Setting this also enables `stroke` automatically.
+     *
+     * @example '#000000'
+     */
     strokecolor: String,
+    /**
+     * Whether the VML rectangle has a fill.
+     *
+     * @default true
+     */
     fill: {
-      type: String,
-      default: 't'
+      type: [Boolean, String],
+      default: true
     },
+    /**
+     * Background color of the VML rectangle.
+     *
+     * Used as a fallback when the background image cannot be loaded.
+     *
+     * @default 'none'
+     * @example '#3b82f6'
+     */
     fillcolor: {
       type: String,
       default: 'none'
     },
+    /**
+     * URL of the background image.
+     *
+     * @default 'https://via.placeholder.com/600x400'
+     */
     src: {
       type: String,
       default: 'https://via.placeholder.com/600x400'
     }
   },
   setup(props, { slots }) {
+    const backgroundPositionMap: Record<string, string> = {
+      'top,left': '-0.5,-0.5',
+      'top,center': '0,-0.5',
+      'top,right': '0.5,-0.5',
+      'center,left': '-0.5,0',
+      'center,center': '0,0',
+      'center,right': '0.5,0',
+      'bottom,left': '-0.5,0.5',
+      'bottom,center': '0,0.5',
+      'bottom,right': '0.5,0.5',
+    }
+
+    const resolvedOrigin = computed(() => props.origin ?? (props.backgroundPosition ? backgroundPositionMap[props.backgroundPosition.replace(/\s/g, '')] : undefined))
+    const resolvedPosition = computed(() => props.position ?? (props.backgroundPosition ? backgroundPositionMap[props.backgroundPosition.replace(/\s/g, '')] : undefined))
+
     const before = computed(() => {
       const width = normalizeToPixels(props.width)
 
+      const toBool = (v: boolean | string) => v === true || v === 'true' ? 'true' : 'false'
+
       const rectAttrs = [
-        `fill="${props.fillcolor ? 't' : props.fill}"`,
-        `stroke="${props.strokecolor ? 't' : props.stroke}"`,
+        `fill="${props.fillcolor ? 'true' : toBool(props.fill)}"`,
+        `stroke="${props.strokecolor ? 'true' : toBool(props.stroke)}"`,
         `style="width: ${width};${props.height ? ` height: ${normalizeToPixels(props.height)};` : ''}"`,
         props.strokecolor ? `strokecolor="${props.strokecolor}"` : '',
         props.fillcolor ? `fillcolor="${props.fillcolor}"` : ''
@@ -61,8 +213,8 @@ export default {
         `src="${props.src}"`,
         props.sizes ? `sizes="${props.sizes}"` : '',
         props.aspect ? `aspect="${props.aspect}"` : '',
-        props.origin ? `origin="${props.origin}"` : '',
-        props.position ? `position="${props.position}"` : '',
+        resolvedOrigin.value ? `origin="${resolvedOrigin.value}"` : '',
+        resolvedPosition.value ? `position="${resolvedPosition.value}"` : '',
         props.color ? `color="${props.color}"` : ''
       ].filter(Boolean).join(' ')
 

package/dist/composables/renderContext.d.mts

@@ -6,6 +6,11 @@ import { InjectionKey } from "vue";
 //#region src/composables/renderContext.d.ts
 interface RenderContext {
   doctype?: string;
+  preheader?: {
+    text: string;
+    fillerCount: number;
+    shyCount: number;
+  };
   sfcConfig?: MaizzleConfig;
   sfcEventHandlers: Array<{
     name: EventName;

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

@@ -1 +1 @@
-{"version":3,"file":"renderContext.d.mts","names":[],"sources":["../../src/composables/renderContext.ts"],"mappings":";;;;;;UAKiB,aAAA;EACf,OAAA;EACA,SAAA,GAAY,aAAA;EACZ,gBAAA,EAAkB,KAAA;IAAQ,IAAA,EAAM,SAAA;IAAW,OAAA,EAAS,QAAA,CAAS,SAAA;EAAA;EAC7D,SAAA,GAAY,mBAAA;AAAA;AAAA,cAGD,gBAAA,EAAkB,YAAA,CAAa,aAAA"}
+{"version":3,"file":"renderContext.d.mts","names":[],"sources":["../../src/composables/renderContext.ts"],"mappings":";;;;;;UAKiB,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;AAAA;AAAA,cAGD,gBAAA,EAAkB,YAAA,CAAa,aAAA"}

package/dist/composables/renderContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderContext.mjs","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 RenderContext {\n  doctype?: string\n  sfcConfig?: MaizzleConfig\n  sfcEventHandlers: Array<{ name: EventName; handler: EventMap[EventName] }>\n  plaintext?: UsePlaintextOptions\n}\n\nexport const RenderContextKey: InjectionKey<RenderContext> = Symbol('RenderContext')\n"],"mappings":";AAYA,MAAa,mBAAgD,OAAO,gBAAgB"}
+{"version":3,"file":"renderContext.mjs","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 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}\n\nexport const RenderContextKey: InjectionKey<RenderContext> = Symbol('RenderContext')\n"],"mappings":";AAaA,MAAa,mBAAgD,OAAO,gBAAgB"}

package/dist/composables/usePreheader.d.mts

@@ -0,0 +1,24 @@
+//#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;
+}
+/**
+ * Set the preheader text for the current email template.
+ *
+ * Injects a hidden `<div>` at the start of `<body>` with the preheader text
+ * followed by filler characters that prevent email clients from pulling
+ * in body content after the preheader.
+ *
+ * Usage in SFC <script setup>:
+ * ```ts
+ * usePreheader('Thanks for signing up!')
+ * usePreheader('Welcome!', { fillerCount: 200, shyCount: 200 })
+ * ```
+ */
+declare function usePreheader(text: string, options?: UsePreheaderOptions): void;
+//#endregion
+export { UsePreheaderOptions, usePreheader };
+//# sourceMappingURL=usePreheader.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePreheader.d.mts","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"}

package/dist/composables/usePreheader.mjs

@@ -0,0 +1,29 @@
+import { RenderContextKey } from "./renderContext.mjs";
+import { inject } from "vue";
+
+//#region src/composables/usePreheader.ts
+/**
+* Set the preheader text for the current email template.
+*
+* Injects a hidden `<div>` at the start of `<body>` with the preheader text
+* followed by filler characters that prevent email clients from pulling
+* in body content after the preheader.
+*
+* Usage in SFC <script setup>:
+* ```ts
+* usePreheader('Thanks for signing up!')
+* usePreheader('Welcome!', { fillerCount: 200, shyCount: 200 })
+* ```
+*/
+function usePreheader(text, options) {
+	const ctx = inject(RenderContextKey);
+	if (ctx) ctx.preheader = {
+		text,
+		fillerCount: options?.fillerCount ?? 150,
+		shyCount: options?.shyCount ?? 150
+	};
+}
+
+//#endregion
+export { usePreheader };
+//# sourceMappingURL=usePreheader.mjs.map

package/dist/composables/usePreheader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreheader.mjs","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;AACpC,KAAI,IACF,KAAI,YAAY;EACd;EACA,aAAa,SAAS,eAAe;EACrC,UAAU,SAAS,YAAY;EAChC"}

package/dist/config/defaults.mjs

@@ -15,9 +15,7 @@ const defaults = {
 	},
 	css: {
 		safe: true,
-		preferUnitless: true,
-		resolveCalc: true,
-		resolveProps: true
+		preferUnitless: true
 	},
 	html: { decodeEntities: true },
 	useTransformers: true

package/dist/config/defaults.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.mjs","names":[],"sources":["../../src/config/defaults.ts"],"sourcesContent":["import type { MaizzleConfig } from '../types/index.ts'\n\nexport const defaults: MaizzleConfig = {\n  content: ['emails/**/*.{vue,md}'],\n  output: {\n    path: 'dist',\n    extension: 'html',\n  },\n  static: {\n    source: ['public/**/*.*'],\n    destination: 'public',\n  },\n  server: {\n    port: 3000,\n    watch: [],\n  },\n  css: {\n    safe: true,\n    preferUnitless: true,\n    resolveCalc: true,\n    resolveProps: true,\n  },\n  html: {\n    decodeEntities: true,\n  },\n  useTransformers: true,\n}\n"],"mappings":";AAEA,MAAa,WAA0B;CACrC,SAAS,CAAC,uBAAuB;CACjC,QAAQ;EACN,MAAM;EACN,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ,CAAC,gBAAgB;EACzB,aAAa;EACd;CACD,QAAQ;EACN,MAAM;EACN,OAAO,EAAE;EACV;CACD,KAAK;EACH,MAAM;EACN,gBAAgB;EAChB,aAAa;EACb,cAAc;EACf;CACD,MAAM,EACJ,gBAAgB,MACjB;CACD,iBAAiB;CAClB"}
+{"version":3,"file":"defaults.mjs","names":[],"sources":["../../src/config/defaults.ts"],"sourcesContent":["import type { MaizzleConfig } from '../types/index.ts'\n\nexport const defaults: MaizzleConfig = {\n  content: ['emails/**/*.{vue,md}'],\n  output: {\n    path: 'dist',\n    extension: 'html',\n  },\n  static: {\n    source: ['public/**/*.*'],\n    destination: 'public',\n  },\n  server: {\n    port: 3000,\n    watch: [],\n  },\n  css: {\n    safe: true,\n    preferUnitless: true,\n  },\n  html: {\n    decodeEntities: true,\n  },\n  useTransformers: true,\n}\n"],"mappings":";AAEA,MAAa,WAA0B;CACrC,SAAS,CAAC,uBAAuB;CACjC,QAAQ;EACN,MAAM;EACN,WAAW;EACZ;CACD,QAAQ;EACN,QAAQ,CAAC,gBAAgB;EACzB,aAAa;EACd;CACD,QAAQ;EACN,MAAM;EACN,OAAO,EAAE;EACV;CACD,KAAK;EACH,MAAM;EACN,gBAAgB;EACjB;CACD,MAAM,EACJ,gBAAgB,MACjB;CACD,iBAAiB;CAClB"}

package/dist/config/index.mjs

@@ -35,6 +35,13 @@ async function resolveConfig(config, cwd = process.cwd()) {
 		if (p.startsWith("/") || p.startsWith("!")) return p;
 		return resolve(root, p).replace(/\\/g, "/");
 	});
+	if (merged.components?.source) {
+		const dirs = Array.isArray(merged.components.source) ? merged.components.source : [merged.components.source];
+		merged.components.source = dirs.map((p) => {
+			if (p.startsWith("/")) return p;
+			return resolve(cwd, p);
+		});
+	}
 	if (hasExplicitRoot && !merged.css?.base) {
 		if (!merged.css) merged.css = {};
 		merged.css.base = root;

package/dist/config/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/config/index.ts"],"sourcesContent":["import { existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\nimport { createJiti } from 'jiti'\nimport { fileURLToPath } from 'node:url'\nimport { createDefu } from 'defu'\n\n// defu that replaces arrays: if user provides content: ['x'], it replaces the default, not appends\nconst merge = createDefu((obj, key, value) => {\n  if (Array.isArray(obj[key])) {\n    obj[key] = value\n    return true\n  }\n})\nimport { defaults } from './defaults.ts'\nimport type { MaizzleConfig } from '../types/index.ts'\n\nexport { defineConfig } from '../composables/defineConfig.ts'\nexport { defaults } from './defaults.ts'\n\nconst CONFIG_FILES = [\n  'maizzle.config.ts',\n  'maizzle.config.js',\n]\n\n/**\n * Resolve the Maizzle config.\n *\n * Always loads from the config file on disk (maizzle.config.{ts,js}),\n * then merges the programmatic config on top, then fills in defaults.\n */\nexport async function resolveConfig(\n  config?: Partial<MaizzleConfig> | string,\n  cwd: string = process.cwd(),\n): Promise<MaizzleConfig> {\n  // If a string path was provided, load that specific file\n  const fileConfig = await loadConfig(\n    typeof config === 'string' ? config : undefined,\n    cwd,\n  )\n\n  // Programmatic config (object) overrides file config, which overrides defaults\n  const programmaticConfig = typeof config === 'object' && config !== null ? config : {}\n\n  const merged = merge(programmaticConfig, fileConfig, defaults) as MaizzleConfig\n\n  // Check if root was explicitly provided before resolving\n  const hasExplicitRoot = !!(programmaticConfig.root ?? fileConfig.root)\n\n  // Resolve root to an absolute path (defaults to cwd)\n  const root = resolve(cwd, merged.root ?? '.')\n  merged.root = root\n\n  // Resolve content patterns relative to root\n  if (merged.content) {\n    merged.content = merged.content.map(p => {\n      // Skip already-absolute or negated patterns\n      if (p.startsWith('/') || p.startsWith('!')) return p\n      return resolve(root, p).replace(/\\\\/g, '/')\n    })\n  }\n\n  // Resolve static source patterns relative to root\n  if (merged.static?.source) {\n    merged.static.source = merged.static.source.map(p => {\n      if (p.startsWith('/') || p.startsWith('!')) return p\n      return resolve(root, p).replace(/\\\\/g, '/')\n    })\n  }\n\n  // Default css.base to root when root is explicitly set,\n  // so Tailwind resolves @source from the right directory.\n  // When root is not set, leave css.base undefined so Tailwind\n  // uses its own default (the template file's directory).\n  if (hasExplicitRoot && !merged.css?.base) {\n    if (!merged.css) merged.css = {}\n    merged.css.base = root\n  }\n\n  return merged\n}\n\nasync function loadConfig(\n  configPath?: string,\n  cwd: string = process.cwd(),\n): Promise<MaizzleConfig> {\n  const jiti = createJiti(fileURLToPath(import.meta.url), { moduleCache: false })\n\n  // If an explicit path was provided, use it directly\n  if (configPath) {\n    const absolutePath = resolve(cwd, configPath)\n\n    if (!existsSync(absolutePath)) {\n      throw new Error(`Config file not found: ${absolutePath}`)\n    }\n\n    const mod = await jiti.import(absolutePath) as any\n    return mod.default ?? mod\n  }\n\n  // Otherwise scan cwd for known config file names\n  for (const filename of CONFIG_FILES) {\n    const filepath = resolve(cwd, filename)\n\n    if (existsSync(filepath)) {\n      const mod = await jiti.import(filepath) as any\n      return mod.default ?? mod\n    }\n  }\n\n  // No config file found, return empty (defaults will be applied by resolveConfig)\n  return {}\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,QAAQ,YAAY,KAAK,KAAK,UAAU;AAC5C,KAAI,MAAM,QAAQ,IAAI,KAAK,EAAE;AAC3B,MAAI,OAAO;AACX,SAAO;;EAET;AAOF,MAAM,eAAe,CACnB,qBACA,oBACD;;;;;;;AAQD,eAAsB,cACpB,QACA,MAAc,QAAQ,KAAK,EACH;CAExB,MAAM,aAAa,MAAM,WACvB,OAAO,WAAW,WAAW,SAAS,QACtC,IACD;CAGD,MAAM,qBAAqB,OAAO,WAAW,YAAY,WAAW,OAAO,SAAS,EAAE;CAEtF,MAAM,SAAS,MAAM,oBAAoB,YAAY,SAAS;CAG9D,MAAM,kBAAkB,CAAC,EAAE,mBAAmB,QAAQ,WAAW;CAGjE,MAAM,OAAO,QAAQ,KAAK,OAAO,QAAQ,IAAI;AAC7C,QAAO,OAAO;AAGd,KAAI,OAAO,QACT,QAAO,UAAU,OAAO,QAAQ,KAAI,MAAK;AAEvC,MAAI,EAAE,WAAW,IAAI,IAAI,EAAE,WAAW,IAAI,CAAE,QAAO;AACnD,SAAO,QAAQ,MAAM,EAAE,CAAC,QAAQ,OAAO,IAAI;GAC3C;AAIJ,KAAI,OAAO,QAAQ,OACjB,QAAO,OAAO,SAAS,OAAO,OAAO,OAAO,KAAI,MAAK;AACnD,MAAI,EAAE,WAAW,IAAI,IAAI,EAAE,WAAW,IAAI,CAAE,QAAO;AACnD,SAAO,QAAQ,MAAM,EAAE,CAAC,QAAQ,OAAO,IAAI;GAC3C;AAOJ,KAAI,mBAAmB,CAAC,OAAO,KAAK,MAAM;AACxC,MAAI,CAAC,OAAO,IAAK,QAAO,MAAM,EAAE;AAChC,SAAO,IAAI,OAAO;;AAGpB,QAAO;;AAGT,eAAe,WACb,YACA,MAAc,QAAQ,KAAK,EACH;CACxB,MAAM,OAAO,WAAW,cAAc,OAAO,KAAK,IAAI,EAAE,EAAE,aAAa,OAAO,CAAC;AAG/E,KAAI,YAAY;EACd,MAAM,eAAe,QAAQ,KAAK,WAAW;AAE7C,MAAI,CAAC,WAAW,aAAa,CAC3B,OAAM,IAAI,MAAM,0BAA0B,eAAe;EAG3D,MAAM,MAAM,MAAM,KAAK,OAAO,aAAa;AAC3C,SAAO,IAAI,WAAW;;AAIxB,MAAK,MAAM,YAAY,cAAc;EACnC,MAAM,WAAW,QAAQ,KAAK,SAAS;AAEvC,MAAI,WAAW,SAAS,EAAE;GACxB,MAAM,MAAM,MAAM,KAAK,OAAO,SAAS;AACvC,UAAO,IAAI,WAAW;;;AAK1B,QAAO,EAAE"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/config/index.ts"],"sourcesContent":["import { existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\nimport { createJiti } from 'jiti'\nimport { fileURLToPath } from 'node:url'\nimport { createDefu } from 'defu'\n\n// defu that replaces arrays: if user provides content: ['x'], it replaces the default, not appends\nconst merge = createDefu((obj, key, value) => {\n  if (Array.isArray(obj[key])) {\n    obj[key] = value\n    return true\n  }\n})\nimport { defaults } from './defaults.ts'\nimport type { MaizzleConfig } from '../types/index.ts'\n\nexport { defineConfig } from '../composables/defineConfig.ts'\nexport { defaults } from './defaults.ts'\n\nconst CONFIG_FILES = [\n  'maizzle.config.ts',\n  'maizzle.config.js',\n]\n\n/**\n * Resolve the Maizzle config.\n *\n * Always loads from the config file on disk (maizzle.config.{ts,js}),\n * then merges the programmatic config on top, then fills in defaults.\n */\nexport async function resolveConfig(\n  config?: Partial<MaizzleConfig> | string,\n  cwd: string = process.cwd(),\n): Promise<MaizzleConfig> {\n  // If a string path was provided, load that specific file\n  const fileConfig = await loadConfig(\n    typeof config === 'string' ? config : undefined,\n    cwd,\n  )\n\n  // Programmatic config (object) overrides file config, which overrides defaults\n  const programmaticConfig = typeof config === 'object' && config !== null ? config : {}\n\n  const merged = merge(programmaticConfig, fileConfig, defaults) as MaizzleConfig\n\n  // Check if root was explicitly provided before resolving\n  const hasExplicitRoot = !!(programmaticConfig.root ?? fileConfig.root)\n\n  // Resolve root to an absolute path (defaults to cwd)\n  const root = resolve(cwd, merged.root ?? '.')\n  merged.root = root\n\n  // Resolve content patterns relative to root\n  if (merged.content) {\n    merged.content = merged.content.map(p => {\n      // Skip already-absolute or negated patterns\n      if (p.startsWith('/') || p.startsWith('!')) return p\n      return resolve(root, p).replace(/\\\\/g, '/')\n    })\n  }\n\n  // Resolve static source patterns relative to root\n  if (merged.static?.source) {\n    merged.static.source = merged.static.source.map(p => {\n      if (p.startsWith('/') || p.startsWith('!')) return p\n      return resolve(root, p).replace(/\\\\/g, '/')\n    })\n  }\n\n  // Resolve components.source paths relative to cwd (not root),\n  // since extra component dirs often live outside the root directory\n  if (merged.components?.source) {\n    const dirs = Array.isArray(merged.components.source)\n      ? merged.components.source\n      : [merged.components.source]\n\n    merged.components.source = dirs.map(p => {\n      if (p.startsWith('/')) return p\n      return resolve(cwd, p)\n    })\n  }\n\n  // Default css.base to root when root is explicitly set,\n  // so Tailwind resolves @source from the right directory.\n  // When root is not set, leave css.base undefined so Tailwind\n  // uses its own default (the template file's directory).\n  if (hasExplicitRoot && !merged.css?.base) {\n    if (!merged.css) merged.css = {}\n    merged.css.base = root\n  }\n\n  return merged\n}\n\nasync function loadConfig(\n  configPath?: string,\n  cwd: string = process.cwd(),\n): Promise<MaizzleConfig> {\n  const jiti = createJiti(fileURLToPath(import.meta.url), { moduleCache: false })\n\n  // If an explicit path was provided, use it directly\n  if (configPath) {\n    const absolutePath = resolve(cwd, configPath)\n\n    if (!existsSync(absolutePath)) {\n      throw new Error(`Config file not found: ${absolutePath}`)\n    }\n\n    const mod = await jiti.import(absolutePath) as any\n    return mod.default ?? mod\n  }\n\n  // Otherwise scan cwd for known config file names\n  for (const filename of CONFIG_FILES) {\n    const filepath = resolve(cwd, filename)\n\n    if (existsSync(filepath)) {\n      const mod = await jiti.import(filepath) as any\n      return mod.default ?? mod\n    }\n  }\n\n  // No config file found, return empty (defaults will be applied by resolveConfig)\n  return {}\n}\n"],"mappings":";;;;;;;;;AAOA,MAAM,QAAQ,YAAY,KAAK,KAAK,UAAU;AAC5C,KAAI,MAAM,QAAQ,IAAI,KAAK,EAAE;AAC3B,MAAI,OAAO;AACX,SAAO;;EAET;AAOF,MAAM,eAAe,CACnB,qBACA,oBACD;;;;;;;AAQD,eAAsB,cACpB,QACA,MAAc,QAAQ,KAAK,EACH;CAExB,MAAM,aAAa,MAAM,WACvB,OAAO,WAAW,WAAW,SAAS,QACtC,IACD;CAGD,MAAM,qBAAqB,OAAO,WAAW,YAAY,WAAW,OAAO,SAAS,EAAE;CAEtF,MAAM,SAAS,MAAM,oBAAoB,YAAY,SAAS;CAG9D,MAAM,kBAAkB,CAAC,EAAE,mBAAmB,QAAQ,WAAW;CAGjE,MAAM,OAAO,QAAQ,KAAK,OAAO,QAAQ,IAAI;AAC7C,QAAO,OAAO;AAGd,KAAI,OAAO,QACT,QAAO,UAAU,OAAO,QAAQ,KAAI,MAAK;AAEvC,MAAI,EAAE,WAAW,IAAI,IAAI,EAAE,WAAW,IAAI,CAAE,QAAO;AACnD,SAAO,QAAQ,MAAM,EAAE,CAAC,QAAQ,OAAO,IAAI;GAC3C;AAIJ,KAAI,OAAO,QAAQ,OACjB,QAAO,OAAO,SAAS,OAAO,OAAO,OAAO,KAAI,MAAK;AACnD,MAAI,EAAE,WAAW,IAAI,IAAI,EAAE,WAAW,IAAI,CAAE,QAAO;AACnD,SAAO,QAAQ,MAAM,EAAE,CAAC,QAAQ,OAAO,IAAI;GAC3C;AAKJ,KAAI,OAAO,YAAY,QAAQ;EAC7B,MAAM,OAAO,MAAM,QAAQ,OAAO,WAAW,OAAO,GAChD,OAAO,WAAW,SAClB,CAAC,OAAO,WAAW,OAAO;AAE9B,SAAO,WAAW,SAAS,KAAK,KAAI,MAAK;AACvC,OAAI,EAAE,WAAW,IAAI,CAAE,QAAO;AAC9B,UAAO,QAAQ,KAAK,EAAE;IACtB;;AAOJ,KAAI,mBAAmB,CAAC,OAAO,KAAK,MAAM;AACxC,MAAI,CAAC,OAAO,IAAK,QAAO,MAAM,EAAE;AAChC,SAAO,IAAI,OAAO;;AAGpB,QAAO;;AAGT,eAAe,WACb,YACA,MAAc,QAAQ,KAAK,EACH;CACxB,MAAM,OAAO,WAAW,cAAc,OAAO,KAAK,IAAI,EAAE,EAAE,aAAa,OAAO,CAAC;AAG/E,KAAI,YAAY;EACd,MAAM,eAAe,QAAQ,KAAK,WAAW;AAE7C,MAAI,CAAC,WAAW,aAAa,CAC3B,OAAM,IAAI,MAAM,0BAA0B,eAAe;EAG3D,MAAM,MAAM,MAAM,KAAK,OAAO,aAAa;AAC3C,SAAO,IAAI,WAAW;;AAIxB,MAAK,MAAM,YAAY,cAAc;EACnC,MAAM,WAAW,QAAQ,KAAK,SAAS;AAEvC,MAAI,WAAW,SAAS,EAAE;GACxB,MAAM,MAAM,MAAM,KAAK,OAAO,SAAS;AACvC,UAAO,IAAI,WAAW;;;AAK1B,QAAO,EAAE"}