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

package/dist/server/ui/pages/Preview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { ChevronUp, ChevronDown, Check, Info } from 'lucide-vue-next'
+import { ChevronUp, ChevronDown, Check } from 'lucide-vue-next'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,7 +20,6 @@ import {
   TagsInputItemDelete,
   TagsInputItemText,
 } from '@/components/ui/tags-input'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
 import stripesUrl from '../stripes.svg'
 
@@ -88,20 +87,51 @@ function copySource() {
   })
 }
 
-interface CompatibilityIssue {
-  type: 'error' | 'warning'
+interface CheckIssue {
+  kind: 'compat' | 'lint'
+  slug?: string
   title: string
-  category: string
-  clients: Array<{ name: string, notes: string[] }>
   url?: string
+  category: string
   line?: number
+  file: string
+  // compat-only
+  supportLevel?: 'unsupported' | 'mitigated' | 'unknown'
+  supportLabel?: string
+  affectedClients?: string[]
+  // lint-only
+  severity?: 'error' | 'warning'
+  message?: string
 }
 
-interface LintIssue {
-  type: 'error' | 'warning'
-  title: string
-  message: string
-  line?: number
+function supportPrefix(issue: CheckIssue): string {
+  if (issue.supportLevel === 'unsupported') return 'Not supported in'
+  if (issue.supportLevel === 'mitigated') return 'Partial support in'
+  return 'Support unknown in'
+}
+
+/**
+ * Split a message on backtick-delimited code spans. Returns alternating
+ * { text } and { code } segments so the template can render <code> inline
+ * without needing v-html.
+ */
+function messageSegments(raw: string | undefined): Array<{ code: boolean, text: string }> {
+  if (!raw) return []
+  const out: Array<{ code: boolean, text: string }> = []
+  const parts = raw.split('`')
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i]) out.push({ code: i % 2 === 1, text: parts[i] })
+  }
+  return out
+}
+
+function issueColorClass(issue: CheckIssue): string {
+  if (issue.kind === 'lint') {
+    return issue.severity === 'error' ? 'text-rose-600' : 'text-amber-600'
+  }
+  if (issue.supportLevel === 'unsupported') return 'text-rose-600'
+  if (issue.supportLevel === 'mitigated') return 'text-amber-600'
+  return 'text-gray-500 dark:text-gray-400'
 }
 
 interface TemplateStats {
@@ -110,10 +140,16 @@ interface TemplateStats {
   links: number
 }
 
-const compatibilityIssues = ref<CompatibilityIssue[]>([])
+const compatibilityIssues = ref<CheckIssue[]>([])
 const compatibilityLoading = ref(false)
 const compatibilityError = ref('')
 const compatibilityCategory = ref('')
+// Injected by serveDevUI into index.html — synchronous, available before
+// any HTTP calls, so the Checks tab never flashes in when disabled.
+const checksConfig = (window as any).__MAIZZLE_CONFIG__?.checks
+const compatibilityDisabled = ref(checksConfig === false)
+const expandedIssueKeys = ref(new Set<string>())
+const issueKey = (issue: CheckIssue, i: number): string => `${issue.file}|${issue.line ?? 0}|${issue.slug ?? issue.title}|${i}`
 const compatibilityCategories = ['css', 'html', 'image', 'others'] as const
 const activeCompatibilityCategories = computed(() =>
   compatibilityCategories.filter(cat => compatibilityIssues.value.some(i => i.category === cat))
@@ -122,8 +158,6 @@ const filteredCompatibilityIssues = computed(() => {
   if (!compatibilityCategory.value) return compatibilityIssues.value
   return compatibilityIssues.value.filter(i => i.category === compatibilityCategory.value)
 })
-const lintIssues = ref<LintIssue[]>([])
-const lintLoading = ref(false)
 const stats = ref<TemplateStats | null>(null)
 const statsLoading = ref(false)
 
@@ -247,22 +281,30 @@ async function fetchStats() {
 }
 
 async function fetchCompatibility() {
+  if (compatibilityDisabled.value) return
+  const template = props.templates?.find(t => t.href === '/' + route.params.template)
+  if (!template) return
+
   compatibilityLoading.value = true
   compatibilityError.value = ''
   try {
-    const res = await fetch('/__maizzle/compatibility', {
-      method: 'POST',
-      body: renderedHtml,
-    })
+    const res = await fetch(`/__maizzle/compatibility/${template.path}`)
     const data = await res.json()
-    if (data?.error) {
+    if (!Array.isArray(data) && data?.error) {
       compatibilityError.value = data.error
       compatibilityIssues.value = []
     } else {
-      compatibilityIssues.value = data
-      // Default to first category that has issues
-      const firstCat = compatibilityCategories.find(cat => data.some((i: CompatibilityIssue) => i.category === cat))
-      compatibilityCategory.value = firstCat || ''
+      const issues: CheckIssue[] = Array.isArray(data) ? data : []
+      compatibilityIssues.value = issues
+      // Keep the current category if it still has issues; otherwise fall
+      // back to the first category that does. Prevents a "refresh" during
+      // edits from snapping back to CSS when the user is on HTML/Image.
+      const current = compatibilityCategory.value
+      const currentStillActive = current && issues.some((i) => i.category === current)
+      if (!currentStillActive) {
+        const firstCat = compatibilityCategories.find(cat => issues.some((i) => i.category === cat))
+        compatibilityCategory.value = firstCat || ''
+      }
     }
   } catch {
     compatibilityIssues.value = []
@@ -271,19 +313,21 @@ async function fetchCompatibility() {
   }
 }
 
-async function fetchLint() {
-  lintLoading.value = true
-  try {
-    const template = props.templates?.find(t => t.href === '/' + route.params.template)
-    const filePath = template?.path ?? route.params.template
-    const res = await fetch(`/__maizzle/lint/${filePath}`)
-    const data = await res.json()
-    lintIssues.value = Array.isArray(data) ? data.filter((i: LintIssue) => i.title) : []
-  } catch {
-    lintIssues.value = []
-  } finally {
-    lintLoading.value = false
-  }
+/** Check if an issue is from the currently viewed template file */
+function isCurrentFile(issue: { file: string }): boolean {
+  const template = props.templates?.find(t => t.href === '/' + route.params.template)
+  if (!template) return true
+  return issue.file.endsWith(template.path)
+}
+
+/** Get a short display name for a component file path */
+function componentName(filePath: string): string {
+  const parts = filePath.replace(/\\/g, '/').split('/')
+  return parts[parts.length - 1]?.replace(/\.vue$/, '') ?? filePath
+}
+
+function openInEditor(file: string, line: number) {
+  fetch(`/__open-in-editor?file=${encodeURIComponent(file + ':' + line)}`)
 }
 
 watch(() => route.params.template, () => {
@@ -292,17 +336,23 @@ watch(() => route.params.template, () => {
   plaintextContent.value = ''
   compatibilityIssues.value = []
   compatibilityError.value = ''
-  lintIssues.value = []
   stats.value = null
   emailResult.value = null
   sourceView.value = 'compiled'
-  fetchTemplate().then(fetchCompatibility)
-  fetchLint()
+  fetchTemplate()
+  fetchCompatibility()
   fetchStats()
   fetchEmailConfig()
   if (viewMode.value === 'source') fetchSource()
 }, { immediate: true })
 
+// Templates list loads async from App.vue — re-trigger once available
+watch(() => props.templates, (templates) => {
+  if (templates?.length && !compatibilityIssues.value.length && !compatibilityLoading.value) {
+    fetchCompatibility()
+  }
+})
+
 watch(viewMode, (mode) => {
   if (mode === 'source') {
     if (sourceView.value === 'compiled' && !sourceHtml.value) fetchSource()
@@ -319,8 +369,8 @@ watch(sourceView, (view) => {
 
 if ((import.meta as any).hot) {
   ;(import.meta as any).hot.on('maizzle:template-updated', () => {
-    fetchTemplate().then(fetchCompatibility)
-    fetchLint()
+    fetchTemplate()
+    fetchCompatibility()
     fetchStats()
 
     // Always clear all source views so they re-fetch when switched to
@@ -335,33 +385,22 @@ if ((import.meta as any).hot) {
       if (sourceView.value === 'plaintext') fetchPlaintext()
     }
   })
-}
-
-
-async function goToLine(line: number) {
-  // Switch to source view showing Vue source
-  viewMode.value = 'source'
-  sourceView.value = 'vue'
-
-  // Ensure vue source is loaded
-  if (!vueSourceHtml.value) {
-    await fetchVueSource()
-  }
-
-  await nextTick()
-
-  const el = vueSourceEl.value
-  if (!el) return
 
-  // Remove previous highlight
-  el.querySelectorAll('.shiki-highlight-line').forEach(l => l.classList.remove('shiki-highlight-line'))
-
-  // Find and highlight the line
-  const lineEl = el.querySelector(`[data-line="${line}"]`)
-  if (lineEl) {
-    lineEl.classList.add('shiki-highlight-line')
-    lineEl.scrollIntoView({ block: 'center', behavior: 'smooth' })
-  }
+  // Keep the UI in sync with live config edits. Payload is the same shape
+  // as the initial `window.__MAIZZLE_CONFIG__` inject — we replace it and
+  // derive per-feature flags from there.
+  ;(import.meta as any).hot.on('maizzle:config-updated', (data: Record<string, unknown>) => {
+    ;(window as any).__MAIZZLE_CONFIG__ = data
+    const wasDisabled = compatibilityDisabled.value
+    const nowDisabled = data?.checks === false
+    compatibilityDisabled.value = nowDisabled
+    if (nowDisabled) {
+      compatibilityIssues.value = []
+      if (activeTab.value === 'compatibility') activeTab.value = 'stats'
+    } else if (wasDisabled) {
+      fetchCompatibility()
+    }
+  })
 }
 
 async function goToCompiledLine(line: number) {
@@ -536,11 +575,13 @@ const bottomPanelOpen = ref(false)
 const tabsPanelHeight = ref(40)
 const activeTab = ref<string | undefined>(undefined)
 
+const defaultTab = () => compatibilityDisabled.value ? 'stats' : 'compatibility'
+
 function toggleBottomPanel() {
   bottomPanelOpen.value = !bottomPanelOpen.value
   if (bottomPanelOpen.value) {
     tabsPanelHeight.value = 300
-    if (!activeTab.value) activeTab.value = 'compatibility'
+    if (!activeTab.value) activeTab.value = defaultTab()
   } else {
     tabsPanelHeight.value = 40
     activeTab.value = undefined
@@ -563,35 +604,39 @@ function onTabClick(tab: string) {
 
 const tabsDragging = ref(false)
 
-function onTabsDragStart(e: MouseEvent) {
+function onTabsDragStart(e: MouseEvent | TouchEvent) {
   e.preventDefault()
   tabsDragging.value = true
-  const startY = e.clientY
+  const isTouch = e.type === 'touchstart'
+  const startY = isTouch ? (e as TouchEvent).touches[0].clientY : (e as MouseEvent).clientY
   const startHeight = tabsPanelHeight.value
 
   const rootEl = containerEl.value?.closest('.relative.h-full') as HTMLElement | null
   const maxHeight = rootEl ? rootEl.getBoundingClientRect().height : Infinity
 
-  const onMouseMove = (e: MouseEvent) => {
-    const newHeight = Math.max(40, Math.min(maxHeight, startHeight + startY - e.clientY))
+  const onMove = (e: MouseEvent | TouchEvent) => {
+    const clientY = e.type === 'touchmove' ? (e as TouchEvent).touches[0].clientY : (e as MouseEvent).clientY
+    const newHeight = Math.max(40, Math.min(maxHeight, startHeight + startY - clientY))
     tabsPanelHeight.value = newHeight
     bottomPanelOpen.value = newHeight > 40
 
     if (!bottomPanelOpen.value) {
       activeTab.value = undefined
     } else if (!activeTab.value) {
-      activeTab.value = 'compatibility'
+      activeTab.value = defaultTab()
     }
   }
 
-  const onMouseUp = () => {
+  const onEnd = () => {
     tabsDragging.value = false
-    document.removeEventListener('mousemove', onMouseMove)
-    document.removeEventListener('mouseup', onMouseUp)
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onEnd)
+    document.removeEventListener('touchmove', onMove)
+    document.removeEventListener('touchend', onEnd)
   }
 
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
+  document.addEventListener(isTouch ? 'touchmove' : 'mousemove', onMove)
+  document.addEventListener(isTouch ? 'touchend' : 'mouseup', onEnd)
 }
 
 const stripeBg = {
@@ -722,20 +767,18 @@ const stripeBg = {
         <div
           class="relative h-0 cursor-row-resize before:absolute before:top-0 before:left-0 before:right-0 before:h-3.25 before:content-['']"
           @mousedown="onTabsDragStart"
+          @touchstart.prevent="onTabsDragStart"
         />
         <Tabs :model-value="activeTab" class="flex flex-col min-h-0 h-full">
           <div class="flex items-center justify-between min-h-10 pl-2 pr-3 shrink-0" :class="bottomPanelOpen ? 'border-b' : ''">
             <TabsList class="h-full bg-transparent! rounded-none! p-0 gap-1">
-              <TabsTrigger value="compatibility" class="text-xs font-normal px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent select-none data-[state=active]:border-gray-400 data-[state=active]:dark:border-gray-600 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent" @click="onTabClick('compatibility')">
-                Compatibility
-              </TabsTrigger>
-              <TabsTrigger value="lint" class="text-xs font-normal px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent select-none data-[state=active]:border-gray-400 data-[state=active]:dark:border-gray-600 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent" @click="onTabClick('lint')">
-                Linter
+              <TabsTrigger v-if="!compatibilityDisabled" value="compatibility" class="text-xs font-normal px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent select-none data-[state=active]:border-gray-400 data-[state=active]:dark:border-gray-600 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent dark:bg-transparent! dark:hover:bg-transparent!" @click="onTabClick('compatibility')">
+                Checks
               </TabsTrigger>
-              <TabsTrigger value="stats" class="text-xs font-normal px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent select-none data-[state=active]:border-gray-400 data-[state=active]:dark:border-gray-600 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent" @click="onTabClick('stats')">
+              <TabsTrigger value="stats" class="text-xs font-normal px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent select-none data-[state=active]:border-gray-400 data-[state=active]:dark:border-gray-600 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent dark:bg-transparent! dark:hover:bg-transparent!" @click="onTabClick('stats')">
                 Stats
               </TabsTrigger>
-              <TabsTrigger value="test" class="text-xs font-normal px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent select-none data-[state=active]:border-gray-400 data-[state=active]:dark:border-gray-600 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent" @click="onTabClick('test')">
+              <TabsTrigger value="test" class="text-xs font-normal px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent select-none data-[state=active]:border-gray-400 data-[state=active]:dark:border-gray-600 data-[state=active]:bg-transparent data-[state=inactive]:bg-transparent dark:bg-transparent! dark:hover:bg-transparent!" @click="onTabClick('test')">
                 Test
               </TabsTrigger>
             </TabsList>
@@ -749,7 +792,7 @@ const stripeBg = {
                 <button
                   v-for="cat in activeCompatibilityCategories"
                   :key="cat"
-                  class="px-2 py-0.5 text-[11px] rounded-full cursor-pointer transition-colors"
+                  class="px-2 py-0.5 text-[11px] rounded-full cursor-default transition-colors"
                   :class="compatibilityCategory === cat
                     ? 'bg-gray-900 text-white dark:bg-gray-600 dark:text-gray-100'
                     : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10'"
@@ -760,48 +803,45 @@ const stripeBg = {
                 </button>
               </div>
               <ScrollArea class="h-full flex-1 min-h-0 pl-5">
-                <p v-if="compatibilityLoading" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">Checking compatibility...</p>
+                <p v-if="compatibilityLoading" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">Running checks...</p>
                 <p v-else-if="compatibilityError" class="pr-4 py-3 text-xs text-red-500 dark:text-red-400">{{ compatibilityError }}</p>
-                <p v-else-if="compatibilityIssues.length === 0" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">No compatibility issues found.</p>
+                <p v-else-if="compatibilityIssues.length === 0" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">No issues found.</p>
                 <ul v-else class="text-xs divide-y">
                   <li
                     v-for="(issue, i) in filteredCompatibilityIssues"
                     :key="i"
-                    class="pr-4 py-1.5 hover:bg-gray-50 dark:hover:bg-white/5"
-                  >
-                    <div class="flex items-center gap-2">
-                      <a v-if="issue.url" :href="issue.url" target="_blank" rel="noopener" class="font-medium hover:underline shrink-0" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
-                        {{ issue.title }}
-                      </a>
-                      <span v-else class="font-medium shrink-0" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
-                        {{ issue.title }}
-                      </span>
-                      <span class="text-gray-400 dark:text-gray-600 shrink-0">&middot;</span>
-                      <span class="text-gray-500 dark:text-gray-400 truncate">{{ issue.type === 'error' ? 'Not supported' : 'Partial support' }} in {{ issue.clients.map((c: any) => c.name).join(', ') }}</span>
-                      <button v-if="issue.line" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 cursor-pointer tabular-nums shrink-0 ml-auto" @click="goToCompiledLine(issue.line!)">L{{ issue.line }}</button>
-                    </div>
-                  </li>
-                </ul>
-              </ScrollArea>
-            </TabsContent>
-            <TabsContent value="lint" class="mt-0 h-full">
-              <ScrollArea class="h-full pl-5">
-                <p v-if="lintLoading" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">Linting...</p>
-                <p v-else-if="lintIssues.length === 0" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">No issues found.</p>
-                <ul v-else class="text-xs divide-y">
-                  <li
-                    v-for="(issue, i) in lintIssues"
-                    :key="i"
-                    class="pr-4 py-2 hover:bg-gray-50 dark:hover:bg-white/5"
+                    class="pr-4 py-2"
                   >
-                    <div class="flex items-start justify-between gap-4">
+                    <div class="flex items-center justify-between gap-4">
                       <div>
-                        <span class="font-medium" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
+                        <a v-if="issue.url" :href="issue.url" target="_blank" rel="noopener" class="font-medium hover:underline" :class="issueColorClass(issue)">
+                          {{ issue.title }}
+                        </a>
+                        <span v-else class="font-medium" :class="issueColorClass(issue)">
                           {{ issue.title }}
                         </span>
-                        <div class="text-gray-500 dark:text-gray-400 mt-0.5">{{ issue.message }}</div>
+                        <div class="text-gray-500 dark:text-gray-400 mt-0.5">
+                          <template v-if="issue.kind === 'lint'">
+                            <template v-for="(seg, j) in messageSegments(issue.message)" :key="j">
+                              <code v-if="seg.code" class="px-1 py-0.5 rounded bg-gray-100 dark:bg-white/10 font-mono text-[11px]">{{ seg.text }}</code>
+                              <template v-else>{{ seg.text }}</template>
+                            </template>
+                          </template>
+                          <template v-else>
+                            {{ supportPrefix(issue) }}
+                            <template v-if="(issue.affectedClients?.length ?? 0) <= 4 || expandedIssueKeys.has(issueKey(issue, i))">
+                              {{ (issue.affectedClients ?? []).join(', ') }}
+                            </template>
+                            <template v-else>
+                              {{ issue.affectedClients!.slice(0, 4).join(', ') }}
+                              <button class="underline cursor-pointer hover:text-gray-700 dark:hover:text-gray-200" @click="expandedIssueKeys.add(issueKey(issue, i)); expandedIssueKeys = new Set(expandedIssueKeys)">
+                                + {{ issue.affectedClients!.length - 4 }} others
+                              </button>
+                            </template>
+                          </template>
+                        </div>
                       </div>
-                      <button v-if="issue.line" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 cursor-pointer tabular-nums shrink-0" @click="goToLine(issue.line!)">L{{ issue.line }}</button>
+                      <button v-if="issue.line" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 cursor-pointer tabular-nums shrink-0" @click="openInEditor(issue.file, issue.line!)">{{ isCurrentFile(issue) ? `L${issue.line}` : `${componentName(issue.file)}:${issue.line}` }}</button>
                     </div>
                   </li>
                 </ul>
@@ -811,35 +851,35 @@ const stripeBg = {
                 <ScrollArea class="h-full pl-5">
                 <p v-if="statsLoading" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">Loading stats...</p>
                 <p v-else-if="!stats" class="pr-4 py-3 text-xs text-gray-500 dark:text-gray-400">No stats available.</p>
-                <div v-else class="pr-4 py-3 flex items-center gap-6 text-xs">
-                  <div class="flex items-center gap-1.5">
-                    <span class="text-gray-500 dark:text-gray-400">Size</span>
-                    <span
-                      class="font-medium tabular-nums"
-                      :class="stats.size.bytes > 102400 ? 'text-red-600' : stats.size.bytes > 51200 ? 'text-amber-600' : 'text-gray-900 dark:text-gray-300'"
-                    >{{ stats.size.formatted }}</span>
-                    <TooltipProvider :delay-duration="0">
-                      <Tooltip>
-                        <TooltipTrigger as-child>
-                          <button type="button">
-                            <Info class="size-3 text-gray-400 dark:text-gray-500" />
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent class="max-w-60">
-                          Compiled HTML size, excludes image files. Gmail clips content at ~100KB.
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  </div>
-                  <div class="flex items-center gap-1.5">
-                    <span class="text-gray-500 dark:text-gray-400">Images</span>
-                    <span class="font-medium tabular-nums">{{ stats.images }}</span>
-                  </div>
-                  <div class="flex items-center gap-1.5">
-                    <span class="text-gray-500 dark:text-gray-400">Links</span>
-                    <span class="font-medium tabular-nums">{{ stats.links }}</span>
-                  </div>
-                </div>
+                <ul v-else class="text-xs divide-y divide-gray-200 dark:divide-white/10">
+                  <li class="pr-4 py-2">
+                    <div class="flex items-center justify-between gap-4">
+                      <div>
+                        <span class="font-medium" :class="stats.size.bytes > 102400 ? 'text-red-600' : stats.size.bytes > 51200 ? 'text-amber-600' : 'text-gray-900 dark:text-gray-300'">Size</span>
+                        <div class="text-gray-500 dark:text-gray-400 mt-0.5">Compiled HTML size. Gmail clips emails larger than ~100KB.</div>
+                      </div>
+                      <span class="font-medium tabular-nums shrink-0" :class="stats.size.bytes > 102400 ? 'text-red-600' : stats.size.bytes > 51200 ? 'text-amber-600' : 'text-gray-900 dark:text-gray-300'">{{ stats.size.formatted }}</span>
+                    </div>
+                  </li>
+                  <li class="pr-4 py-2">
+                    <div class="flex items-center justify-between gap-4">
+                      <div>
+                        <span class="font-medium text-gray-900 dark:text-gray-300">Images</span>
+                        <div class="text-gray-500 dark:text-gray-400 mt-0.5">Total from &lt;img&gt; tags and CSS background images.</div>
+                      </div>
+                      <span class="font-medium tabular-nums shrink-0">{{ stats.images }}</span>
+                    </div>
+                  </li>
+                  <li class="pr-4 py-2">
+                    <div class="flex items-center justify-between gap-4">
+                      <div>
+                        <span class="font-medium text-gray-900 dark:text-gray-300">Links</span>
+                        <div class="text-gray-500 dark:text-gray-400 mt-0.5">Total &lt;a&gt; tags with an href attribute.</div>
+                      </div>
+                      <span class="font-medium tabular-nums shrink-0">{{ stats.links }}</span>
+                    </div>
+                  </li>
+                </ul>
               </ScrollArea>
             </TabsContent>
             <TabsContent value="test" class="mt-0 h-full">
@@ -847,19 +887,19 @@ const stripeBg = {
                 <div class="pr-4 py-3 max-w-md">
                   <div class="space-y-2">
                     <div class="flex items-center gap-2">
-                      <label class="text-xs text-gray-500 dark:text-gray-400 w-12 shrink-0">To</label>
+                      <label for="email-to" class="text-xs text-gray-500 dark:text-gray-400 w-12 shrink-0 cursor-pointer">To</label>
                       <TagsInput v-model="emailTo" delimiter=" " add-on-paste add-on-blur class="flex-1 min-h-7 gap-1 px-2 py-1">
                         <TagsInputItem v-for="item in emailTo" :key="item" :value="item" class="h-5 text-xs rounded">
                           <TagsInputItemText class="px-1.5 py-0 text-xs" />
                           <TagsInputItemDelete class="size-3.5" />
                         </TagsInputItem>
-                        <TagsInputInput class="text-xs min-h-5 px-0.5" placeholder="Add emails..." />
+                        <TagsInputInput id="email-to" class="text-xs min-h-5 px-0.5" placeholder="Add emails..." />
                       </TagsInput>
                     </div>
                     <div class="flex items-center gap-2">
-                      <label class="text-xs text-gray-500 dark:text-gray-400 w-12 shrink-0">Subject</label>
+                      <label for="email-subject" class="text-xs text-gray-500 dark:text-gray-400 w-12 shrink-0 cursor-pointer">Subject</label>
                       <div class="flex-1 flex items-center gap-3">
-                        <Input v-model="emailSubject" :placeholder="String(route.params.template)" class="flex-1 h-7 text-xs! px-2" />
+                        <Input id="email-subject" v-model="emailSubject" :placeholder="String(route.params.template)" class="flex-1 h-7 text-xs! px-2" />
                         <label class="flex items-center gap-1.5 cursor-pointer select-none shrink-0">
                           <Checkbox v-model="emailPreventThreading" :default-checked="true" class="size-3.5" />
                           <span class="text-xs text-gray-500 dark:text-gray-400">Prevent threading</span>

package/dist/transformers/addAttributes.mjs

@@ -44,18 +44,22 @@ function addAttributes(dom, config = {}) {
 	const attributesToAdd = defu(typeof addConfig === "object" ? addConfig : {}, DEFAULT_ATTRIBUTES);
 	if (Object.keys(attributesToAdd).length === 0) return dom;
 	for (const [selectorPattern, attributes] of Object.entries(attributesToAdd)) {
+		if (attributes === false) continue;
 		const selectors = selectorPattern.split(",").map((s) => s.trim());
 		walk(dom, (node) => {
 			const el = node;
 			if (!el.name) return;
 			if (selectors.some((selector) => elementMatches(el, selector))) {
 				if (!el.attribs) el.attribs = {};
-				for (const [attrName, attrValue] of Object.entries(attributes)) if (attrName === "class" && el.attribs.class) {
-					const existingClasses = el.attribs.class.split(/\s+/).filter(Boolean);
-					const newClasses = String(attrValue).split(/\s+/).filter(Boolean);
-					const mergedClasses = [...new Set([...existingClasses, ...newClasses])];
-					if (mergedClasses.join(" ") !== el.attribs.class) el.attribs.class = mergedClasses.join(" ");
-				} else if (!(attrName in el.attribs)) el.attribs[attrName] = String(attrValue);
+				for (const [attrName, attrValue] of Object.entries(attributes)) {
+					if (attrValue === false) continue;
+					if (attrName === "class" && el.attribs.class) {
+						const existingClasses = el.attribs.class.split(/\s+/).filter(Boolean);
+						const newClasses = String(attrValue).split(/\s+/).filter(Boolean);
+						const mergedClasses = [...new Set([...existingClasses, ...newClasses])];
+						if (mergedClasses.join(" ") !== el.attribs.class) el.attribs.class = mergedClasses.join(" ");
+					} else if (!(attrName in el.attribs)) el.attribs[attrName] = String(attrValue);
+				}
 			}
 		});
 	}

package/dist/transformers/addAttributes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"addAttributes.mjs","names":["merge"],"sources":["../../src/transformers/addAttributes.ts"],"sourcesContent":["import { defu as merge } from 'defu'\nimport type { ChildNode, Element } from 'domhandler'\nimport { walk } from '../utils/ast/index.ts'\nimport type { AttributesConfig } from '../types/config.ts'\n\n/**\n * Default attributes to add to elements.\n */\nconst DEFAULT_ATTRIBUTES: Record<string, Record<string, string | boolean | number>> = {\n  table: {\n    cellpadding: 0,\n    cellspacing: 0,\n    role: 'none',\n  },\n  img: {\n    alt: '',\n  },\n}\n\n/**\n * Add attributes transformer.\n *\n * Automatically adds attributes to HTML elements based on CSS selectors.\n *\n * Default attributes (can be disabled by setting `attributes.add` to false):\n * - table: cellpadding=\"0\", cellspacing=\"0\", role=\"none\"\n * - img: alt=\"\"\n *\n * Supports tag, class, id, and attribute selectors.\n * Multiple selectors can be specified by comma-separating them.\n *\n * Examples:\n * ```js\n * attributes: {\n *   add: {\n *     div: { role: 'article' },\n *     '.test': { editable: true },\n *     '#header': { 'data-id': 'main' },\n *     'div, p': { class: 'content' },\n *   }\n * }\n * ```\n */\nexport function addAttributes(dom: ChildNode[], config: AttributesConfig = {}): ChildNode[] {\n  const addConfig = config.add\n\n  // Disabled when explicitly set to false\n  if (addConfig === false) {\n    return dom\n  }\n\n  // Deep merge user attributes on top of defaults using defu\n  const userAttributes = typeof addConfig === 'object' ? addConfig : {}\n  const attributesToAdd = merge(userAttributes, DEFAULT_ATTRIBUTES) as Record<string, Record<string, string | boolean | number>>\n\n  if (Object.keys(attributesToAdd).length === 0) {\n    return dom\n  }\n\n  // Process each selector pattern\n  for (const [selectorPattern, attributes] of Object.entries(attributesToAdd)) {\n    // Split by comma for multiple selectors\n    const selectors = selectorPattern.split(',').map(s => s.trim())\n\n    walk(dom, (node) => {\n      const el = node as Element\n      if (!el.name) return\n\n      // Check if element matches any selector in the pattern\n      const matches = selectors.some(selector => elementMatches(el, selector))\n\n      if (matches) {\n        // Initialize attribs if needed\n        if (!el.attribs) {\n          el.attribs = {}\n        }\n\n        for (const [attrName, attrValue] of Object.entries(attributes)) {\n          // Special handling for class - merge instead of replace\n          if (attrName === 'class' && el.attribs.class) {\n            const existingClasses = el.attribs.class.split(/\\s+/).filter(Boolean)\n            const newClasses = String(attrValue).split(/\\s+/).filter(Boolean)\n            const mergedClasses = [...new Set([...existingClasses, ...newClasses])]\n            if (mergedClasses.join(' ') !== el.attribs.class) {\n              el.attribs.class = mergedClasses.join(' ')\n            }\n          } else {\n            // Only add attribute if not already present\n            if (!(attrName in el.attribs)) {\n              el.attribs[attrName] = String(attrValue)\n            }\n          }\n        }\n      }\n    })\n  }\n\n  return dom\n}\n\n/**\n * Check if an element matches a CSS selector.\n * Supports: tag, .class, #id, [attribute], [attribute=value]\n */\nfunction elementMatches(el: Element, selector: string): boolean {\n  // Remove whitespace\n  selector = selector.trim()\n\n  // Check for attribute selector [attr] or [attr=value]\n  const attrMatch = selector.match(/^\\[([^\\]=]+)(?:=([^\\]]*))?\\]$/)\n  if (attrMatch) {\n    const [, attrName, attrValue] = attrMatch\n    if (attrValue === undefined) {\n      // Just checking if attribute exists\n      return attrName in (el.attribs || {})\n    } else {\n      // Check if attribute has specific value\n      return el.attribs?.[attrName] === attrValue\n    }\n  }\n\n  // Check for class selector .class\n  if (selector.startsWith('.')) {\n    const className = selector.slice(1)\n    const classes = el.attribs?.class?.split(/\\s+/) || []\n    return classes.includes(className)\n  }\n\n  // Check for id selector #id\n  if (selector.startsWith('#')) {\n    const id = selector.slice(1)\n    return el.attribs?.id === id\n  }\n\n  // Check for tag selector (possibly with attribute)\n  // Split tag from attribute if present, e.g., \"div[role=alert]\"\n  const tagAttrMatch = selector.match(/^([a-z][a-z0-9]*)\\[([^\\]]+)\\]$/i)\n  if (tagAttrMatch) {\n    const [, tagName, attrPart] = tagAttrMatch\n    if (el.name !== tagName) return false\n\n    // Parse attribute part: could be \"attr\" or \"attr=value\"\n    const attrEqMatch = attrPart.match(/^([^=]+)(?:=(.*))?$/)\n    if (attrEqMatch) {\n      const [, attrName, attrValue] = attrEqMatch\n      if (attrValue === undefined) {\n        return attrName in (el.attribs || {})\n      } else {\n        return el.attribs?.[attrName] === attrValue\n      }\n    }\n    return false\n  }\n\n  // Simple tag selector\n  return el.name === selector\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,qBAAgF;CACpF,OAAO;EACL,aAAa;EACb,aAAa;EACb,MAAM;EACP;CACD,KAAK,EACH,KAAK,IACN;CACF;;;;;;;;;;;;;;;;;;;;;;;;;AA0BD,SAAgB,cAAc,KAAkB,SAA2B,EAAE,EAAe;CAC1F,MAAM,YAAY,OAAO;AAGzB,KAAI,cAAc,MAChB,QAAO;CAKT,MAAM,kBAAkBA,KADD,OAAO,cAAc,WAAW,YAAY,EAAE,EACvB,mBAAmB;AAEjE,KAAI,OAAO,KAAK,gBAAgB,CAAC,WAAW,EAC1C,QAAO;AAIT,MAAK,MAAM,CAAC,iBAAiB,eAAe,OAAO,QAAQ,gBAAgB,EAAE;EAE3E,MAAM,YAAY,gBAAgB,MAAM,IAAI,CAAC,KAAI,MAAK,EAAE,MAAM,CAAC;AAE/D,OAAK,MAAM,SAAS;GAClB,MAAM,KAAK;AACX,OAAI,CAAC,GAAG,KAAM;AAKd,OAFgB,UAAU,MAAK,aAAY,eAAe,IAAI,SAAS,CAAC,EAE3D;AAEX,QAAI,CAAC,GAAG,QACN,IAAG,UAAU,EAAE;AAGjB,SAAK,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,WAAW,CAE5D,KAAI,aAAa,WAAW,GAAG,QAAQ,OAAO;KAC5C,MAAM,kBAAkB,GAAG,QAAQ,MAAM,MAAM,MAAM,CAAC,OAAO,QAAQ;KACrE,MAAM,aAAa,OAAO,UAAU,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;KACjE,MAAM,gBAAgB,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,iBAAiB,GAAG,WAAW,CAAC,CAAC;AACvE,SAAI,cAAc,KAAK,IAAI,KAAK,GAAG,QAAQ,MACzC,IAAG,QAAQ,QAAQ,cAAc,KAAK,IAAI;eAIxC,EAAE,YAAY,GAAG,SACnB,IAAG,QAAQ,YAAY,OAAO,UAAU;;IAKhD;;AAGJ,QAAO;;;;;;AAOT,SAAS,eAAe,IAAa,UAA2B;AAE9D,YAAW,SAAS,MAAM;CAG1B,MAAM,YAAY,SAAS,MAAM,gCAAgC;AACjE,KAAI,WAAW;EACb,MAAM,GAAG,UAAU,aAAa;AAChC,MAAI,cAAc,OAEhB,QAAO,aAAa,GAAG,WAAW,EAAE;MAGpC,QAAO,GAAG,UAAU,cAAc;;AAKtC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,YAAY,SAAS,MAAM,EAAE;AAEnC,UADgB,GAAG,SAAS,OAAO,MAAM,MAAM,IAAI,EAAE,EACtC,SAAS,UAAU;;AAIpC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,KAAK,SAAS,MAAM,EAAE;AAC5B,SAAO,GAAG,SAAS,OAAO;;CAK5B,MAAM,eAAe,SAAS,MAAM,kCAAkC;AACtE,KAAI,cAAc;EAChB,MAAM,GAAG,SAAS,YAAY;AAC9B,MAAI,GAAG,SAAS,QAAS,QAAO;EAGhC,MAAM,cAAc,SAAS,MAAM,sBAAsB;AACzD,MAAI,aAAa;GACf,MAAM,GAAG,UAAU,aAAa;AAChC,OAAI,cAAc,OAChB,QAAO,aAAa,GAAG,WAAW,EAAE;OAEpC,QAAO,GAAG,UAAU,cAAc;;AAGtC,SAAO;;AAIT,QAAO,GAAG,SAAS"}
+{"version":3,"file":"addAttributes.mjs","names":["merge"],"sources":["../../src/transformers/addAttributes.ts"],"sourcesContent":["import { defu as merge } from 'defu'\nimport type { ChildNode, Element } from 'domhandler'\nimport { walk } from '../utils/ast/index.ts'\nimport type { AttributesConfig } from '../types/config.ts'\n\n/**\n * Default attributes to add to elements.\n */\nconst DEFAULT_ATTRIBUTES: Record<string, Record<string, string | boolean | number>> = {\n  table: {\n    cellpadding: 0,\n    cellspacing: 0,\n    role: 'none',\n  },\n  img: {\n    alt: '',\n  },\n}\n\n/**\n * Add attributes transformer.\n *\n * Automatically adds attributes to HTML elements based on CSS selectors.\n *\n * Default attributes (can be disabled by setting `attributes.add` to false):\n * - table: cellpadding=\"0\", cellspacing=\"0\", role=\"none\"\n * - img: alt=\"\"\n *\n * Supports tag, class, id, and attribute selectors.\n * Multiple selectors can be specified by comma-separating them.\n *\n * Examples:\n * ```js\n * attributes: {\n *   add: {\n *     div: { role: 'article' },\n *     '.test': { editable: true },\n *     '#header': { 'data-id': 'main' },\n *     'div, p': { class: 'content' },\n *   }\n * }\n * ```\n */\nexport function addAttributes(dom: ChildNode[], config: AttributesConfig = {}): ChildNode[] {\n  const addConfig = config.add\n\n  // Disabled when explicitly set to false\n  if (addConfig === false) {\n    return dom\n  }\n\n  // Deep merge user attributes on top of defaults using defu\n  const userAttributes = typeof addConfig === 'object' ? addConfig : {}\n  const attributesToAdd = merge(userAttributes, DEFAULT_ATTRIBUTES) as Record<string, false | Record<string, false | string | boolean | number>>\n\n  if (Object.keys(attributesToAdd).length === 0) {\n    return dom\n  }\n\n  // Process each selector pattern\n  for (const [selectorPattern, attributes] of Object.entries(attributesToAdd)) {\n    // User opted out of this selector entirely (e.g. `table: false`)\n    if (attributes === false) continue\n    // Split by comma for multiple selectors\n    const selectors = selectorPattern.split(',').map(s => s.trim())\n\n    walk(dom, (node) => {\n      const el = node as Element\n      if (!el.name) return\n\n      // Check if element matches any selector in the pattern\n      const matches = selectors.some(selector => elementMatches(el, selector))\n\n      if (matches) {\n        // Initialize attribs if needed\n        if (!el.attribs) {\n          el.attribs = {}\n        }\n\n        for (const [attrName, attrValue] of Object.entries(attributes)) {\n          // User opted out of this specific attribute (e.g. `role: false`)\n          if (attrValue === false) continue\n          // Special handling for class - merge instead of replace\n          if (attrName === 'class' && el.attribs.class) {\n            const existingClasses = el.attribs.class.split(/\\s+/).filter(Boolean)\n            const newClasses = String(attrValue).split(/\\s+/).filter(Boolean)\n            const mergedClasses = [...new Set([...existingClasses, ...newClasses])]\n            if (mergedClasses.join(' ') !== el.attribs.class) {\n              el.attribs.class = mergedClasses.join(' ')\n            }\n          } else {\n            // Only add attribute if not already present\n            if (!(attrName in el.attribs)) {\n              el.attribs[attrName] = String(attrValue)\n            }\n          }\n        }\n      }\n    })\n  }\n\n  return dom\n}\n\n/**\n * Check if an element matches a CSS selector.\n * Supports: tag, .class, #id, [attribute], [attribute=value]\n */\nfunction elementMatches(el: Element, selector: string): boolean {\n  // Remove whitespace\n  selector = selector.trim()\n\n  // Check for attribute selector [attr] or [attr=value]\n  const attrMatch = selector.match(/^\\[([^\\]=]+)(?:=([^\\]]*))?\\]$/)\n  if (attrMatch) {\n    const [, attrName, attrValue] = attrMatch\n    if (attrValue === undefined) {\n      // Just checking if attribute exists\n      return attrName in (el.attribs || {})\n    } else {\n      // Check if attribute has specific value\n      return el.attribs?.[attrName] === attrValue\n    }\n  }\n\n  // Check for class selector .class\n  if (selector.startsWith('.')) {\n    const className = selector.slice(1)\n    const classes = el.attribs?.class?.split(/\\s+/) || []\n    return classes.includes(className)\n  }\n\n  // Check for id selector #id\n  if (selector.startsWith('#')) {\n    const id = selector.slice(1)\n    return el.attribs?.id === id\n  }\n\n  // Check for tag selector (possibly with attribute)\n  // Split tag from attribute if present, e.g., \"div[role=alert]\"\n  const tagAttrMatch = selector.match(/^([a-z][a-z0-9]*)\\[([^\\]]+)\\]$/i)\n  if (tagAttrMatch) {\n    const [, tagName, attrPart] = tagAttrMatch\n    if (el.name !== tagName) return false\n\n    // Parse attribute part: could be \"attr\" or \"attr=value\"\n    const attrEqMatch = attrPart.match(/^([^=]+)(?:=(.*))?$/)\n    if (attrEqMatch) {\n      const [, attrName, attrValue] = attrEqMatch\n      if (attrValue === undefined) {\n        return attrName in (el.attribs || {})\n      } else {\n        return el.attribs?.[attrName] === attrValue\n      }\n    }\n    return false\n  }\n\n  // Simple tag selector\n  return el.name === selector\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,qBAAgF;CACpF,OAAO;EACL,aAAa;EACb,aAAa;EACb,MAAM;EACP;CACD,KAAK,EACH,KAAK,IACN;CACF;;;;;;;;;;;;;;;;;;;;;;;;;AA0BD,SAAgB,cAAc,KAAkB,SAA2B,EAAE,EAAe;CAC1F,MAAM,YAAY,OAAO;AAGzB,KAAI,cAAc,MAChB,QAAO;CAKT,MAAM,kBAAkBA,KADD,OAAO,cAAc,WAAW,YAAY,EAAE,EACvB,mBAAmB;AAEjE,KAAI,OAAO,KAAK,gBAAgB,CAAC,WAAW,EAC1C,QAAO;AAIT,MAAK,MAAM,CAAC,iBAAiB,eAAe,OAAO,QAAQ,gBAAgB,EAAE;AAE3E,MAAI,eAAe,MAAO;EAE1B,MAAM,YAAY,gBAAgB,MAAM,IAAI,CAAC,KAAI,MAAK,EAAE,MAAM,CAAC;AAE/D,OAAK,MAAM,SAAS;GAClB,MAAM,KAAK;AACX,OAAI,CAAC,GAAG,KAAM;AAKd,OAFgB,UAAU,MAAK,aAAY,eAAe,IAAI,SAAS,CAAC,EAE3D;AAEX,QAAI,CAAC,GAAG,QACN,IAAG,UAAU,EAAE;AAGjB,SAAK,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,WAAW,EAAE;AAE9D,SAAI,cAAc,MAAO;AAEzB,SAAI,aAAa,WAAW,GAAG,QAAQ,OAAO;MAC5C,MAAM,kBAAkB,GAAG,QAAQ,MAAM,MAAM,MAAM,CAAC,OAAO,QAAQ;MACrE,MAAM,aAAa,OAAO,UAAU,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;MACjE,MAAM,gBAAgB,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,iBAAiB,GAAG,WAAW,CAAC,CAAC;AACvE,UAAI,cAAc,KAAK,IAAI,KAAK,GAAG,QAAQ,MACzC,IAAG,QAAQ,QAAQ,cAAc,KAAK,IAAI;gBAIxC,EAAE,YAAY,GAAG,SACnB,IAAG,QAAQ,YAAY,OAAO,UAAU;;;IAKhD;;AAGJ,QAAO;;;;;;AAOT,SAAS,eAAe,IAAa,UAA2B;AAE9D,YAAW,SAAS,MAAM;CAG1B,MAAM,YAAY,SAAS,MAAM,gCAAgC;AACjE,KAAI,WAAW;EACb,MAAM,GAAG,UAAU,aAAa;AAChC,MAAI,cAAc,OAEhB,QAAO,aAAa,GAAG,WAAW,EAAE;MAGpC,QAAO,GAAG,UAAU,cAAc;;AAKtC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,YAAY,SAAS,MAAM,EAAE;AAEnC,UADgB,GAAG,SAAS,OAAO,MAAM,MAAM,IAAI,EAAE,EACtC,SAAS,UAAU;;AAIpC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,KAAK,SAAS,MAAM,EAAE;AAC5B,SAAO,GAAG,SAAS,OAAO;;CAK5B,MAAM,eAAe,SAAS,MAAM,kCAAkC;AACtE,KAAI,cAAc;EAChB,MAAM,GAAG,SAAS,YAAY;AAC9B,MAAI,GAAG,SAAS,QAAS,QAAO;EAGhC,MAAM,cAAc,SAAS,MAAM,sBAAsB;AACzD,MAAI,aAAa;GACf,MAAM,GAAG,UAAU,aAAa;AAChC,OAAI,cAAc,OAChB,QAAO,aAAa,GAAG,WAAW,EAAE;OAEpC,QAAO,GAAG,UAAU,cAAc;;AAGtC,SAAO;;AAIT,QAAO,GAAG,SAAS"}

package/dist/transformers/inlineCSS.mjs

@@ -28,8 +28,8 @@ function inlineCSS(dom, config = {}) {
 	walk(dom, (node) => {
 		const el = node;
 		if (el.name === "style" && el.attribs) {
-			if (el.attribs.embed && !("data-embed" in el.attribs)) el.attribs["data-embed"] = "";
-			if (el.attribs["data-embed"] && !("embed" in el.attribs)) el.attribs.embed = "";
+			if ("embed" in el.attribs && !("data-embed" in el.attribs)) el.attribs["data-embed"] = "";
+			if ("data-embed" in el.attribs && !("embed" in el.attribs)) el.attribs.embed = "";
 			if ("data-embed" in el.attribs) el.attribs["data-maizzle-embed"] = "";
 		}
 	});