@maizzle/framework 6.0.0-rc.9 → 6.0.0

package/dist/components/Img.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import { computed, createStaticVNode, useAttrs, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+type AspectRatio = '1:1' | '4:3' | '3:2' | '16:9' | '21:9' | '2:1' | '3:4' | '9:16' | (string & {})
+type BackgroundPosition =
+  | 'top' | 'right' | 'bottom' | 'left' | 'center'
+  | 'top left' | 'top right' | 'top center'
+  | 'bottom left' | 'bottom right' | 'bottom center'
+  | 'center left' | 'center right' | 'center center'
+  | (string & {})
+type BackgroundSize = 'cover' | 'contain' | 'auto' | (string & {})
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  /** The image source URL. When motionSrc is used, this becomes the static fallback. */
+  src: {
+    type: String,
+    required: true
+  },
+  /** Alt text for the image. */
+  alt: {
+    type: String,
+    default: ''
+  },
+  /** Image source for dark mode. */
+  darkSrc: {
+    type: String,
+    default: null
+  },
+  /**
+   * The width of the image, rendered without units.
+   *
+   * Optional: when omitted, the width is auto-derived post-render from
+   * the nearest sized ancestor (Container/Section/Column or any element
+   * with a pixel width). Falls back to fluid when no pixel width is
+   * resolvable. The `aspect` crop mode still requires an explicit width.
+   */
+  width: {
+    type: [String, Number],
+    default: undefined
+  },
+  /** Animated image source, shown when user has no reduced motion preference. */
+  motionSrc: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Aspect ratio for cropped images.
+   *
+   * Accepts colon or slash form: `'16:9'`, `'16/9'`, `'4:3'`, `'1:1'`, etc.
+   *
+   * Alternatively, set a Tailwind aspect class on the component:
+   * `aspect-square`, `aspect-video`, `aspect-[16/9]`, `aspect-3/2`. The
+   * prop wins when both are provided.
+   *
+   * @example '16:9'
+   * @example '4:3'
+   * @example '1:1'
+   */
+  aspect: {
+    type: String as PropType<AspectRatio>,
+    default: ''
+  },
+  /**
+   * CSS `background-position` for the cropped image fill.
+   *
+   * @default 'center'
+   * @example 'top'
+   * @example 'top left'
+   * @example '20% 30%'
+   */
+  position: {
+    type: String as PropType<BackgroundPosition>,
+    default: 'center'
+  },
+  /**
+   * CSS `background-size` for the cropped image fill.
+   *
+   * @default 'cover'
+   * @example 'contain'
+   * @example 'auto'
+   */
+  size: {
+    type: String as PropType<BackgroundSize>,
+    default: 'cover'
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this image.
+   *
+   * Inherits from an ancestor (e.g. a Layout calling
+   * `useOutlookFallback(false)`); an explicit value overrides. When
+   * `false`, the VML `<v:rect>` emitted in cropped mode (`aspect`)
+   * is skipped and the modern padding-hack div renders to all
+   * clients including Outlook (which will show an empty area).
+   *
+   * @default inherits — root default `true`
+   */
+  outlookFallback: outlookFallbackProp,
+  /**
+   * URL to navigate to when the image is clicked.
+   *
+   * Modern clients: output is wrapped in `<a href>`. In cropped mode the
+   * anchor is `display:block` so the whole padding-hack area is clickable.
+   * Outlook: emitted as the `href` attribute on the `<v:rect>` (a
+   * documented VML Shape attribute).
+   */
+  href: {
+    type: String,
+    default: ''
+  },
+})
+
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
+function mimeFromExtension(src: string): string {
+  const ext = src.slice(src.lastIndexOf('.') + 1).toLowerCase()
+
+  const types: Record<string, string> = {
+    apng: 'image/apng',
+    avif: 'image/avif',
+    gif: 'image/gif',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    jfif: 'image/jpeg',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    webp: 'image/webp',
+  }
+
+  return types[ext] ?? ''
+}
+
+const ASPECT_KEYWORDS: Record<string, string> = {
+  'aspect-square': '1/1',
+  'aspect-video': '16/9',
+}
+
+/**
+ * Vue normalizes a component's `class` attr to a string before it
+ * reaches `attrs`, so only the string/empty cases can occur here.
+ */
+function normalizeClass(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+/**
+ * Pull Tailwind `aspect-*` tokens out of the inherited class list. Returns
+ * both the derived ratio (first match wins) and the cleaned class string
+ * so the aspect token isn't duplicated on the wrapper.
+ */
+const parsedClass = computed(() => {
+  const tokens = normalizeClass(attrs.class).split(/\s+/).filter(Boolean)
+  let ratio: string | null = null
+  const rest: string[] = []
+  for (const t of tokens) {
+    if (ASPECT_KEYWORDS[t]) {
+      if (!ratio) ratio = ASPECT_KEYWORDS[t]
+      continue
+    }
+    const m = t.match(/^aspect-(?:\[(\d+(?:\.\d+)?)[/:](\d+(?:\.\d+)?)\]|(\d+(?:\.\d+)?)\/(\d+(?:\.\d+)?))$/)
+    if (m) {
+      if (!ratio) ratio = `${m[1] ?? m[3]}/${m[2] ?? m[4]}`
+      continue
+    }
+    rest.push(t)
+  }
+  return { ratio, className: rest.join(' ') }
+})
+
+const resolvedAspect = computed(() => props.aspect || parsedClass.value.ratio || '')
+
+const ratio = computed(() => {
+  if (!resolvedAspect.value) return null
+  const [w, h] = resolvedAspect.value.split(/[:/]/).map(Number)
+  if (!w || !h || !Number.isFinite(w) || !Number.isFinite(h)) return null
+  const pct = ((h / w) * 100).toFixed(4).replace(/\.?0+$/, '')
+  return { w, h, paddingBottom: `${pct}%` }
+})
+
+const isCropped = computed(() => ratio.value !== null)
+
+const motionType = computed(() => mimeFromExtension(props.motionSrc))
+
+const imgWidth = computed(() => Number.parseInt(String(props.width), 10))
+
+/**
+ * Whether an explicit, usable pixel width was supplied. When false, the
+ * non-cropped `<img>` is emitted without a width attribute plus a
+ * `data-maizzle-img-width` marker the `imgWidth` transformer reads to
+ * backfill the width from the nearest sized ancestor.
+ */
+const hasWidth = computed(() => props.width != null && props.width !== '' && Number.isFinite(imgWidth.value))
+
+const heightPx = computed(() =>
+  ratio.value && Number.isFinite(imgWidth.value)
+    ? Math.round((imgWidth.value * ratio.value.h) / ratio.value.w)
+    : null
+)
+
+const usePicture = computed(() => !isCropped.value && (props.darkSrc || props.motionSrc))
+
+/**
+ * Escape characters that break Tailwind's `bg-[url('...')]` arbitrary value
+ * (the closing `']`, braces, spaces) and the `url()` wrapper itself (quotes,
+ * parens). Targeted replace so already-encoded URLs aren't double-encoded.
+ *
+ * Only used for the dark/motion variant classes — those have to be Tailwind
+ * arbitrary classes so they compile to `@media` rules. The base background
+ * image is set inline via `:style` to avoid the CSS pipeline rewriting it.
+ */
+const escapeForClass = (url: string) => url
+  .replace(/'/g, '%27')
+  .replace(/\(/g, '%28')
+  .replace(/\)/g, '%29')
+  .replace(/ /g, '%20')
+  .replace(/\]/g, '%5D')
+  .replace(/\}/g, '%7D')
+
+/** Escape a URL for safe use inside `url('...')` in an inline style. */
+const escapeForCssUrl = (s: string) => s
+  .replace(/\\/g, '\\\\')
+  .replace(/'/g, "\\'")
+
+const escapeAttr = (s: string) => s
+  .replace(/&/g, '&amp;')
+  .replace(/"/g, '&quot;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+
+const vmlAspect = computed(() => {
+  if (props.size === 'cover') return 'atleast'
+  if (props.size === 'contain') return 'atmost'
+  return ''
+})
+
+const VmlRect = () => {
+  if (!isCropped.value || !heightPx.value || !Number.isFinite(imgWidth.value)) return null
+  const aspectAttr = vmlAspect.value ? ` aspect="${vmlAspect.value}"` : ''
+  const altAttr = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ''
+  const hrefAttr = props.href ? ` href="${escapeAttr(props.href)}"` : ''
+  return createStaticVNode(
+    `<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"${hrefAttr}${altAttr} style="width:${imgWidth.value}px;height:${heightPx.value}px;"><v:fill type="frame" src="${escapeAttr(props.src)}"${aspectAttr} /></v:rect><![endif]-->`,
+    1
+  )
+}
+
+const NotMsoBefore = () => createStaticVNode('<!--[if !mso]><!-->', 1)
+const NotMsoAfter = () => createStaticVNode('<!--<![endif]-->', 1)
+
+const imgClass = 'max-w-full align-middle'
+
+const cropClass = computed(() =>
+  twMerge(
+    `overflow-hidden table max-w-full${hasWidth.value ? ` w-[${imgWidth.value}px]` : ''}`,
+    parsedClass.value.className,
+  )
+)
+</script>
+
+<template>
+  <template v-if="isCropped">
+    <VmlRect v-if="outlookFallback" />
+    <NotMsoBefore v-if="outlookFallback" />
+    <a v-if="href" :href="href" class="block no-underline">
+      <div
+        v-bind="{ ...attrs, class: undefined }"
+        role="img"
+        :aria-label="alt || undefined"
+        :class="cropClass"
+      >
+        <div
+          :class="[
+            'table-cell w-full h-0 bg-no-repeat',
+            darkSrc ? `dark:bg-[url('${escapeForClass(darkSrc)}')]!` : '',
+            motionSrc ? `motion-safe:bg-[url('${escapeForClass(motionSrc)}')]!` : '',
+          ]"
+          :style="{
+            paddingBottom: ratio!.paddingBottom,
+            backgroundImage: `url('${escapeForCssUrl(src)}')`,
+            backgroundSize: size,
+            backgroundPosition: position,
+          }"
+        />
+      </div>
+    </a>
+    <div
+      v-else
+      v-bind="{ ...attrs, class: undefined }"
+      role="img"
+      :aria-label="alt || undefined"
+      :class="['overflow-hidden table max-w-full', parsedClass.className]"
+      :style="hasWidth ? `width: ${imgWidth}px;` : undefined"
+    >
+      <div
+        :class="[
+          'table-cell w-full h-0 bg-no-repeat',
+          darkSrc ? `dark:bg-[url('${escapeForClass(darkSrc)}')]!` : '',
+          motionSrc ? `motion-safe:bg-[url('${escapeForClass(motionSrc)}')]!` : '',
+        ]"
+        :style="{
+          paddingBottom: ratio!.paddingBottom,
+          backgroundImage: `url('${escapeForCssUrl(src)}')`,
+          backgroundSize: size,
+          backgroundPosition: position,
+        }"
+      />
+    </div>
+    <NotMsoAfter v-if="outlookFallback" />
+  </template>
+  <a v-else-if="href && usePicture" :href="href">
+    <picture>
+      <source v-if="darkSrc" :srcset="darkSrc" media="(prefers-color-scheme: dark)">
+      <source v-if="motionSrc" :srcset="motionSrc" :type="motionType || undefined" media="(prefers-reduced-motion: no-preference)">
+      <img v-bind="attrs" :src="src" :alt="alt" :width="hasWidth ? imgWidth : undefined" :data-maizzle-img-width="hasWidth ? undefined : ''" :class="imgClass" data-juice-duplicates="false">
+    </picture>
+  </a>
+  <picture v-else-if="usePicture">
+    <source v-if="darkSrc" :srcset="darkSrc" media="(prefers-color-scheme: dark)">
+    <source v-if="motionSrc" :srcset="motionSrc" :type="motionType || undefined" media="(prefers-reduced-motion: no-preference)">
+    <img v-bind="attrs" :src="src" :alt="alt" :width="hasWidth ? imgWidth : undefined" :data-maizzle-img-width="hasWidth ? undefined : ''" :class="imgClass" data-juice-duplicates="false">
+  </picture>
+  <a v-else-if="href" :href="href">
+    <img v-bind="attrs" :src="src" :alt="alt" :width="hasWidth ? imgWidth : undefined" :data-maizzle-img-width="hasWidth ? undefined : ''" :class="imgClass" data-juice-duplicates="false">
+  </a>
+  <img v-else v-bind="attrs" :src="src" :alt="alt" :width="hasWidth ? imgWidth : undefined" :data-maizzle-img-width="hasWidth ? undefined : ''" :class="imgClass" data-juice-duplicates="false">
+</template>

package/dist/components/Layout.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import { computed, useAttrs, createStaticVNode, type PropType } from 'vue'
+import { twMerge } from 'tailwind-merge'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
-defineProps({
+const props = defineProps({
   /**
    * Classes to add to the `<body>` tag.
    */
@@ -29,6 +32,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.
    *
@@ -39,12 +54,58 @@ defineProps({
   ariaLabel: {
     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)
+
+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)
+
+const MsoHead = () => createStaticVNode(
+  `<!--[if mso]>
+    <style>
+      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
+      .mso-break-all {word-break: break-all;}
+    </style>
+  <![endif]-->`,
+  1
+)
+
+const msoBody = `<!--[if mso]>
+  <xml>
+    <o:OfficeDocumentSettings>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    <w:WordDocument>
+      <w:DontUseAdvancedTypographyReadingMail />
+    </w:WordDocument>
+  </xml>
+<![endif]-->`
+
+const htmlXmlns = computed(() => outlookFallback ? {
+  'xmlns:v': 'urn:schemas-microsoft-com:vml',
+  'xmlns:o': 'urn:schemas-microsoft-com:office:office',
+} : {})
 </script>
 
 <template>
-  <html :lang="lang" :dir="dir" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+  <html :lang="lang" :dir="dir" v-bind="htmlXmlns">
+  <EmptyHead v-if="props.doubleHead === true || props.doubleHead === 'true'" />
   <head>
     <meta charset="utf-8">
     <meta name="x-apple-disable-message-reformatting">
@@ -52,32 +113,20 @@ defineProps({
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <meta name="color-scheme" content="light dark">
     <meta name="supported-color-schemes" content="light dark">
-    <!--[if mso]>
-      <noscript>
-        <xml>
-          <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-          </o:OfficeDocumentSettings>
-        </xml>
-      </noscript>
-      <style>
-        td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
-        .mso-break-all {word-break: break-all;}
-      </style>
-      <![endif]-->
+    <MsoHead v-if="outlookFallback" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" media="screen">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" media="screen">
     <style>
       @import "@maizzle/tailwindcss";
 
       img {
         @apply max-w-full align-middle;
       }
-
     </style>
   </head>
-  <body :xml:lang="lang" :class="['m-0 p-0 size-full [word-break:break-word]', bodyClass]">
+  <body :xml:lang="outlookFallback ? lang : null" :class="bodyMergedClass">
+    <span v-if="outlookFallback" style="display: none" v-html="msoBody"></span>
     <div
       role="article"
       aria-roledescription="email"
@@ -85,7 +134,8 @@ defineProps({
       :lang="lang"
       :dir="dir"
       style="font-size: medium;"
-      :class="['[font-size:max(16px,1rem)]', $attrs.class]">
+      :class="articleMergedClass"
+    >
       <slot />
     </div>
   </body>

package/dist/components/Link.vue

@@ -20,7 +20,7 @@ const mergedClass = computed(() => twMerge('no-underline', attrs.class as string
 </script>
 
 <template>
-  <a :href="href" v-bind="$attrs" :class="mergedClass">
+  <a :href="href" v-bind="{ ...$attrs, class: mergedClass }">
     <slot />
   </a>
 </template>

package/dist/components/Markdown.vue

@@ -1,7 +1,10 @@
 <script lang="ts">
-import { createStaticVNode, type PropType } from 'vue'
+import { createStaticVNode, inject, type PropType } from 'vue'
 import { createMarkdownExit, type MarkdownExitOptions } from 'markdown-exit'
 import { codeToHtml, type BundledTheme } from 'shiki'
+import { defu } from 'defu'
+import { MaizzleConfigKey } from '../composables/useConfig'
+import { shikiToCodeBlock } from './utils'
 
 export default {
   props: {
@@ -15,17 +18,21 @@ export default {
       type: String,
       default: ''
     },
-    /** Shiki theme for fenced code blocks. @default 'github-dark-high-contrast' */
+    /**
+     * Shiki theme for fenced code blocks. Falls back to
+     * `markdown.shikiTheme` from the config, then to
+     * `'github-dark-high-contrast'`.
+     */
     shikiTheme: {
       type: String as PropType<BundledTheme>,
-      default: 'github-dark-high-contrast'
+      default: undefined
     },
     /** Wrap output in a div element. @default false */
     wrapper: {
       type: Boolean,
       default: false
     },
-    /** markdown-exit configuration options. Merged with defaults. */
+    /** markdown-exit configuration options. Takes precedence over `markdown.markdownOptions` from the config. */
     config: {
       type: Object as PropType<MarkdownExitOptions>,
       default: () => ({})
@@ -48,32 +55,52 @@ export default {
       return () => createStaticVNode('', 0)
     }
 
-    const md = createMarkdownExit({
-      html: true,
-      linkify: true,
-      typographer: true,
-      highlight: async (code, lang) => {
-        try {
-          return await codeToHtml(code, { lang, theme: props.shikiTheme })
-        } catch {
-          return ''
-        }
+    /**
+     * Pull the global `markdown` config (when rendered inside a Maizzle
+     * build) so the component honors the same options and plugins as
+     * `.md` templates. Props override the config; both fall back to the
+     * component defaults. `inject` over `useConfig()` so the component
+     * still works standalone, when no config is provided.
+     */
+    const mdConfig = inject(MaizzleConfigKey, undefined)?.markdown ?? {}
+    const markdownOptions = mdConfig.markdownOptions
+    const markdownUses = mdConfig.markdownUses
+    const markdownSetup = mdConfig.markdownSetup
+    const theme = props.shikiTheme ?? mdConfig.shikiTheme ?? 'github-dark-high-contrast'
+
+    const md = createMarkdownExit(defu(
+      props.config,
+      markdownOptions ?? {},
+      {
+        html: true,
+        linkify: true,
+        typographer: true,
+        highlight: async (code: string, lang: string) => {
+          try {
+            return await codeToHtml(code, { lang, theme })
+          } catch {
+            return ''
+          }
+        },
       },
-      ...props.config,
-    })
+    ))
 
-    const wrapPre = (html: string) =>
-      `<table class="w-full"><tr><td class="max-w-0 mso-padding-alt-4">${html}</td></tr></table>\n`
+    /**
+     * Apply config plugins before overriding the fence rules, so the
+     * code-block wrapping below composes over whatever they emit.
+     */
+    for (const use of markdownUses ?? []) {
+      if (Array.isArray(use)) md.use(use[0], ...use.slice(1))
+      else md.use(use)
+    }
+    await markdownSetup?.(md)
 
     const defaultFence = md.renderer.rules.fence!
-    md.renderer.rules.fence = (...args) => {
-      const result = defaultFence(...args)
-      if (typeof result === 'string') return wrapPre(result)
-      return result.then(wrapPre)
-    }
+    md.renderer.rules.fence = (...args) =>
+      Promise.resolve(defaultFence(...args)).then(shikiToCodeBlock)
 
     const defaultCodeBlock = md.renderer.rules.code_block!
-    md.renderer.rules.code_block = (...args) => wrapPre(defaultCodeBlock(...args) as string)
+    md.renderer.rules.code_block = (...args) => shikiToCodeBlock(defaultCodeBlock(...args) as string)
 
     let html = await md.renderAsync(source)
 

package/dist/components/MarkdownLayout.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import Layout from './Layout.vue'
+import Container from './Container.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  /**
+   * Frontmatter object — wired in automatically when this layout
+   * wraps a `.md` template (the default behavior, or via the
+   * `layout: MarkdownLayout` frontmatter key).
+   *
+   * Keys matching `Layout`'s props (`lang`, `dir`, `bodyClass`,
+   * `doubleHead`, `ariaLabel`, `outlookFallback`) flow through to
+   * the wrapped `Layout`. Missing keys fall back to `Layout`'s
+   * own defaults.
+   */
+  frontmatter: {
+    type: Object as PropType<Record<string, unknown>>,
+    default: () => ({})
+  },
+})
+</script>
+
+<template>
+  <Layout
+    :lang="props.frontmatter.lang as string | undefined"
+    :dir="props.frontmatter.dir as 'ltr' | 'rtl' | undefined"
+    :body-class="props.frontmatter.bodyClass as string | undefined"
+    :double-head="props.frontmatter.doubleHead as boolean | string | undefined"
+    :aria-label="props.frontmatter.ariaLabel as string | undefined"
+    :outlook-fallback="props.frontmatter.outlookFallback as boolean | undefined"
+  >
+    <Container class="max-w-xl">
+      <slot />
+    </Container>
+  </Layout>
+</template>

package/dist/components/NotPlaintext.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { h } from 'vue'
+
+export default {
+  name: 'NotPlaintext',
+  setup(_, { slots }) {
+    return () => h(
+      'div',
+      { 'data-maizzle-html-only': '' },
+      slots.default?.(),
+    )
+  },
+}
+</script>