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

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,9 +20,9 @@ import {
   TagsInputItemDelete,
   TagsInputItemText,
 } from '@/components/ui/tags-input'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
 import stripesUrl from '../stripes.svg'
+import { applyColorInversion, undoColorInversion } from '@/lib/emulated-dark-mode'
 
 interface Device {
   name: string
@@ -43,6 +43,7 @@ const props = defineProps<{
 }>()
 
 const viewMode = defineModel<'preview' | 'source'>('viewMode', { default: 'preview' })
+const darkMode = defineModel<boolean>('darkMode', { default: false })
 
 const route = useRoute()
 const srcdoc = ref('')
@@ -71,7 +72,9 @@ const iframeContentHeight = ref<number | null>(null)
 function copySource() {
   let text: string
   if (sourceView.value === 'compiled') {
-    text = srcdoc.value
+    // `renderedHtml` holds the raw compiled HTML (srcdoc is only populated
+    // for the initial iframe load; subsequent renders use doc.write).
+    text = renderedHtml || srcdoc.value
   } else if (sourceView.value === 'plaintext') {
     text = plaintextContent.value
   } else {
@@ -80,28 +83,59 @@ function copySource() {
     text = el.textContent || ''
   }
 
-  const blob = new Blob([text], { type: 'text/plain' })
-  const item = new ClipboardItem({ 'text/plain': blob })
-  navigator.clipboard.write([item]).then(() => {
+  navigator.clipboard.writeText(text).then(() => {
     copied.value = true
     setTimeout(() => { copied.value = false }, 2000)
+  }).catch((err) => {
+    console.error('Copy failed:', err)
   })
 }
 
-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 +144,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 +162,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)
 
@@ -196,6 +234,19 @@ function updateIframeContentHeight() {
   }
 }
 
+function onIframeLoad() {
+  updateIframeContentHeight()
+  const iframe = iframeEl.value
+  if (darkMode.value && iframe) applyColorInversion(iframe)
+}
+
+watch(darkMode, (on) => {
+  const iframe = iframeEl.value
+  if (!iframe) return
+  if (on) applyColorInversion(iframe)
+  else undoColorInversion(iframe)
+})
+
 async function fetchTemplate() {
   const res = await fetch(`/__maizzle/render/${route.params.template}`)
   renderedHtml = await res.text()
@@ -211,6 +262,7 @@ async function fetchTemplate() {
     doc.close()
     // Hide iframe body overflow — scrolling is handled by the outer ScrollArea
     if (doc.body) doc.body.style.overflow = 'hidden'
+    if (darkMode.value && iframe) applyColorInversion(iframe)
     await nextTick()
     updateIframeContentHeight()
   } else {
@@ -247,22 +299,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 +331,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 +354,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 +387,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 +403,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) {
@@ -501,6 +558,7 @@ function forwardIframeKeys(iframe: HTMLIFrameElement) {
         metaKey: e.metaKey,
         shiftKey: e.shiftKey,
         altKey: e.altKey,
+        bubbles: true,
       }))
     })
   } catch {}
@@ -536,11 +594,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 +623,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 = {
@@ -700,7 +764,7 @@ const stripeBg = {
               <iframe
                 ref="iframeEl"
                 :srcdoc="srcdoc"
-                @load="updateIframeContentHeight"
+                @load="onIframeLoad"
                 class="w-full border-0 bg-white dark:bg-gray-950"
                 :style="{ height: iframeContentHeight ? `${iframeContentHeight}px` : '100%' }"
               />
@@ -722,20 +786,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 +811,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 +822,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"
+                    class="pr-4 py-2"
                   >
-                    <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"
-                  >
-                    <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 +870,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 +906,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);
+				}
 			}
 		});
 	}