@maizzle/framework 6.0.0-rc.0 → 6.0.0-rc.10

package/dist/components/Preheader.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps({
+  /** Number of `&#8199;&#847;` filler pairs to render. */
+  fillerCount: {
+    type: Number,
+    default: 150
+  },
+  /** Number of `&shy;` entities to render. */
+  shyCount: {
+    type: Number,
+    default: 150
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body:start">
+    <div style="display: none"><slot /><template v-for="i in fillerCount" :key="'f'+i">&#8199;&#847; </template><template v-for="i in shyCount" :key="'s'+i">&shy; </template>&nbsp;</div>
+  </Teleport>
+</template>

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 ?? '37.5em')
+
+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(() => divideValue(rowWidth.value, columnCount.value)))
+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;
+  previewText?: {
+    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,WAAA;IAAgB,IAAA;IAAc,WAAA;IAAqB,QAAA;EAAA;EACnD,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  previewText?: { 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/usePreviewText.d.mts

@@ -0,0 +1,24 @@
+//#region src/composables/usePreviewText.d.ts
+interface UsePreviewTextOptions {
+  /** Number of  ͏ filler pairs to render. @default 150 */
+  fillerCount?: number;
+  /** Number of ­ entities to render. @default 150 */
+  shyCount?: number;
+}
+/**
+ * Set the preview/preheader text for the current email template.
+ *
+ * Injects a hidden `<div>` at the start of `<body>` with the preview text
+ * followed by filler characters that prevent email clients from pulling
+ * in body content after the preheader.
+ *
+ * Usage in SFC <script setup>:
+ * ```ts
+ * usePreviewText('Thanks for signing up!')
+ * usePreviewText('Welcome!', { fillerCount: 200, shyCount: 200 })
+ * ```
+ */
+declare function usePreviewText(text: string, options?: UsePreviewTextOptions): void;
+//#endregion
+export { UsePreviewTextOptions, usePreviewText };
+//# sourceMappingURL=usePreviewText.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewText.d.mts","names":[],"sources":["../../src/composables/usePreviewText.ts"],"mappings":";UAGiB,qBAAA;EAAA;EAEf,WAAA;;EAEA,QAAA;AAAA;AAgBF;;;;;;;;;;;;;AAAA,iBAAgB,cAAA,CAAe,IAAA,UAAc,OAAA,GAAU,qBAAA"}

package/dist/composables/usePreviewText.mjs

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

package/dist/composables/usePreviewText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewText.mjs","names":[],"sources":["../../src/composables/usePreviewText.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { RenderContextKey } from './renderContext.ts'\n\nexport interface UsePreviewTextOptions {\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 preview/preheader text for the current email template.\n *\n * Injects a hidden `<div>` at the start of `<body>` with the preview 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 * usePreviewText('Thanks for signing up!')\n * usePreviewText('Welcome!', { fillerCount: 200, shyCount: 200 })\n * ```\n */\nexport function usePreviewText(text: string, options?: UsePreviewTextOptions): void {\n  const ctx = inject(RenderContextKey)\n  if (ctx) {\n    ctx.previewText = {\n      text,\n      fillerCount: options?.fillerCount ?? 150,\n      shyCount: options?.shyCount ?? 150,\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,SAAgB,eAAe,MAAc,SAAuC;CAClF,MAAM,MAAM,OAAO,iBAAiB;AACpC,KAAI,IACF,KAAI,cAAc;EAChB;EACA,aAAa,SAAS,eAAe;EACrC,UAAU,SAAS,YAAY;EAChC"}

package/dist/config/index.mjs

@@ -22,7 +22,31 @@ const CONFIG_FILES = ["maizzle.config.ts", "maizzle.config.js"];
 */
 async function resolveConfig(config, cwd = process.cwd()) {
 	const fileConfig = await loadConfig(typeof config === "string" ? config : void 0, cwd);
-	return merge(typeof config === "object" && config !== null ? config : {}, fileConfig, defaults);
+	const programmaticConfig = typeof config === "object" && config !== null ? config : {};
+	const merged = merge(programmaticConfig, fileConfig, defaults);
+	const hasExplicitRoot = !!(programmaticConfig.root ?? fileConfig.root);
+	const root = resolve(cwd, merged.root ?? ".");
+	merged.root = root;
+	if (merged.content) merged.content = merged.content.map((p) => {
+		if (p.startsWith("/") || p.startsWith("!")) return p;
+		return resolve(root, p).replace(/\\/g, "/");
+	});
+	if (merged.static?.source) merged.static.source = merged.static.source.map((p) => {
+		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;
+	}
+	return merged;
 }
 async function loadConfig(configPath, cwd = process.cwd()) {
 	const jiti = createJiti(fileURLToPath(import.meta.url), { moduleCache: false });