@maizzle/framework 6.0.0-rc.8 → 6.0.0

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'
 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('')
@@ -52,26 +53,61 @@ const plaintextContent = ref('')
 const sourceView = ref<'compiled' | 'vue' | 'plaintext'>('compiled')
 const copied = ref(false)
 
+/**
+ * Source views (Compiled HTML, Vue source, Plaintext) refresh lazily. On a
+ * save we only refetch the view currently on screen and bump
+ * `sourcesGeneration` to mark the others stale. Switching to a stale view
+ * keeps its previous content visible while a background refetch replaces it
+ * in place — so panels never flash empty. Each fetch stamps the generation
+ * it was initiated at so a save mid-fetch correctly leaves the view stale.
+ */
+const sourcesGeneration = ref(0)
+const compiledGen = ref(-1)
+const vueGen = ref(-1)
+const plaintextGen = ref(-1)
+
+function refreshSourceView(view: 'compiled' | 'vue' | 'plaintext') {
+  if (view === 'compiled' && (!sourceHtml.value || compiledGen.value < sourcesGeneration.value)) fetchSource()
+  if (view === 'vue' && (!vueSourceHtml.value || vueGen.value < sourcesGeneration.value)) fetchVueSource()
+  if (view === 'plaintext' && (!plaintextContent.value || plaintextGen.value < sourcesGeneration.value)) fetchPlaintext()
+}
+
 const iframeEl = ref<HTMLIFrameElement>()
 const compiledSourceEl = ref<HTMLElement>()
 const vueSourceEl = ref<HTMLElement>()
+const plaintextEl = ref<HTMLElement>()
 const containerEl = ref<HTMLElement>()
 const wrapperEl = ref<HTMLElement>()
 
 const panelWidth = defineModel<number>('panelWidth', { default: 0 })
 const panelHeight = defineModel<number>('panelHeight', { default: 0 })
+/**
+ * Container's available area, exposed to the toolbar so size inputs can
+ * clamp typed values without paying a layout-recalc cost on
+ * every drag tick. Kept in sync via a ResizeObserver.
+ */
+const maxIframeWidth = defineModel<number>('maxIframeWidth', { default: 0 })
+const maxIframeHeight = defineModel<number>('maxIframeHeight', { default: 0 })
 const isDragging = defineModel<boolean>('isDragging', { default: false })
 const isFullSize = defineModel<boolean>('isFullSize', { default: true })
 
-// Custom resizable: width/height of the iframe wrapper (null = fill container)
-const iframeWidth = ref<number | null>(null)
-const iframeHeight = ref<number | null>(null)
+/**
+ * Custom resizable: width/height of the iframe wrapper (null = fill the
+ * container). Exposed as v-models so the toolbar's size indicator
+ * can drive these too, alongside the drag handles.
+ */
+const iframeWidth = defineModel<number | null>('iframeWidth', { default: null })
+const iframeHeight = defineModel<number | null>('iframeHeight', { default: null })
 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 +116,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 +177,18 @@ 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 +197,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)
 
@@ -187,7 +260,11 @@ function updateIframeContentHeight() {
 
   // Temporarily collapse to measure true content height
   iframe.style.height = '0'
-  iframeContentHeight.value = doc.documentElement.scrollHeight
+  const contentHeight = doc.documentElement.scrollHeight
+  // Fill the preview viewport when the email is shorter than it; grow past it
+  // (and let the ScrollArea scroll) when the email is taller.
+  const availableHeight = viewport?.clientHeight ?? 0
+  iframeContentHeight.value = Math.max(contentHeight, availableHeight)
   iframe.style.height = `${iframeContentHeight.value}px`
 
   // Restore scroll position
@@ -196,6 +273,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()
@@ -203,14 +293,17 @@ async function fetchTemplate() {
   const iframe = iframeEl.value
   const doc = iframe?.contentDocument
 
-  // Write directly into the iframe document to avoid a full reload,
-  // which preserves scroll position natively.
+  /**
+   * Write directly into the iframe document to avoid a full reload,
+   * which preserves scroll position natively.
+   */
   if (doc) {
     doc.open()
     doc.write(renderedHtml)
     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 {
@@ -219,19 +312,58 @@ async function fetchTemplate() {
   }
 }
 
+const sourceLoading = ref(false)
+const vueSourceLoading = ref(false)
+const plaintextLoading = ref(false)
+
 async function fetchSource() {
-  const res = await fetch(`/__maizzle/source/${route.params.template}`)
-  sourceHtml.value = await res.text()
+  if (sourceLoading.value) return
+  sourceLoading.value = true
+  const gen = sourcesGeneration.value
+  try {
+    const res = await fetch(`/__maizzle/source/${route.params.template}`)
+    sourceHtml.value = await res.text()
+    compiledGen.value = gen
+  } finally {
+    sourceLoading.value = false
+  }
 }
 
 async function fetchVueSource() {
-  const res = await fetch(`/__maizzle/vue-source/${route.params.template}`)
-  vueSourceHtml.value = await res.text()
+  if (vueSourceLoading.value) return
+  vueSourceLoading.value = true
+  const gen = sourcesGeneration.value
+  try {
+    const res = await fetch(`/__maizzle/vue-source/${route.params.template}`)
+    vueSourceHtml.value = await res.text()
+    vueGen.value = gen
+  } finally {
+    vueSourceLoading.value = false
+  }
 }
 
 async function fetchPlaintext() {
-  const res = await fetch(`/__maizzle/plaintext/${route.params.template}`)
-  plaintextContent.value = await res.text()
+  if (plaintextLoading.value) return
+  plaintextLoading.value = true
+  const gen = sourcesGeneration.value
+  try {
+    const res = await fetch(`/__maizzle/plaintext/${route.params.template}`)
+    plaintextContent.value = await res.text()
+    plaintextGen.value = gen
+  } finally {
+    plaintextLoading.value = false
+  }
+}
+
+/**
+ * Warm the three source views in the background so switching from the
+ * preview is instant. Single-flight guards above prevent duplication
+ * with any in-flight fetch from a view-switch watcher.
+ */
+function prefetchSources() {
+  if (!sourceHtml.value) fetchSource()
+  if (!vueSourceHtml.value) fetchVueSource()
+  if (!plaintextContent.value) fetchPlaintext()
 }
 
 async function fetchStats() {
@@ -247,22 +379,33 @@ 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 +414,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,76 +437,98 @@ 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().then(prefetchSources)
+  fetchCompatibility()
   fetchStats()
   fetchEmailConfig()
   if (viewMode.value === 'source') fetchSource()
 }, { immediate: true })
 
-watch(viewMode, (mode) => {
-  if (mode === 'source') {
-    if (sourceView.value === 'compiled' && !sourceHtml.value) fetchSource()
-    if (sourceView.value === 'vue' && !vueSourceHtml.value) fetchVueSource()
-    if (sourceView.value === 'plaintext' && !plaintextContent.value) fetchPlaintext()
+// 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(sourceView, (view) => {
-  if (view === 'vue' && !vueSourceHtml.value) fetchVueSource()
-  if (view === 'compiled' && !sourceHtml.value) fetchSource()
-  if (view === 'plaintext' && !plaintextContent.value) fetchPlaintext()
+watch(viewMode, (mode) => {
+  if (mode === 'source') refreshSourceView(sourceView.value)
 })
 
-if ((import.meta as any).hot) {
-  ;(import.meta as any).hot.on('maizzle:template-updated', () => {
-    fetchTemplate().then(fetchCompatibility)
-    fetchLint()
-    fetchStats()
-
-    // Always clear all source views so they re-fetch when switched to
-    sourceHtml.value = ''
-    vueSourceHtml.value = ''
-    plaintextContent.value = ''
+watch(sourceView, (view) => {
+  refreshSourceView(view)
+})
 
-    // Re-fetch the active source view immediately if currently visible
-    if (viewMode.value === 'source') {
-      if (sourceView.value === 'compiled') fetchSource()
-      if (sourceView.value === 'vue') fetchVueSource()
-      if (sourceView.value === 'plaintext') fetchPlaintext()
-    }
-  })
+/**
+ * Preserve scrollTop across in-place content updates (HMR refetch).
+ * Vue's default `flush: 'pre'` runs the watcher BEFORE the DOM is
+ * updated — so we read the current scrollTop, then restore it on the
+ * next tick after the new content has rendered. Skip the case where
+ * the value transitions from empty (first paint / route change) so a
+ * fresh template doesn't snap to a stale offset.
+ */
+function viewportFor(el: HTMLElement | undefined): HTMLElement | null {
+  return (el?.closest('[data-slot="scroll-area-viewport"]') as HTMLElement | null) ?? null
 }
 
-
-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()
+function preserveScroll(getEl: () => HTMLElement | undefined) {
+  return async (newVal: string, oldVal: string) => {
+    if (!oldVal || !newVal) return
+    const vp = viewportFor(getEl())
+    if (!vp) return
+    const top = vp.scrollTop
+    await nextTick()
+    vp.scrollTop = top
   }
+}
 
-  await nextTick()
+watch(sourceHtml, preserveScroll(() => compiledSourceEl.value))
+watch(vueSourceHtml, preserveScroll(() => vueSourceEl.value))
+watch(plaintextContent, preserveScroll(() => plaintextEl.value))
 
-  const el = vueSourceEl.value
-  if (!el) return
+if ((import.meta as any).hot) {
+  ;(import.meta as any).hot.on('maizzle:template-updated', () => {
+    fetchCompatibility()
+    fetchStats()
 
-  // Remove previous highlight
-  el.querySelectorAll('.shiki-highlight-line').forEach(l => l.classList.remove('shiki-highlight-line'))
+    /**
+     * Refetch in place — don't clear the previous values first. v-html
+     * replaces the highlighted block atomically when the new content
+     * arrives, and the ScrollArea viewport keeps its scrollTop as
+     * long as the new content's height is similar. Plaintext
+     * interpolation updates a single text node, so scroll
+     * is naturally preserved.
+     *
+     * Only the preview iframe and the currently-visible source view
+     * refresh eagerly; hidden source views are marked stale (via the
+     * generation bump) and refresh on next switch, keeping their old
+     * content on screen until then so panels never flash empty.
+     */
+    fetchTemplate()
+    sourcesGeneration.value++
+    if (viewMode.value === 'source') refreshSourceView(sourceView.value)
+  })
 
-  // 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) {
@@ -412,6 +579,8 @@ function onEdgeDrag(e: MouseEvent | TouchEvent, edge: Edge) {
   const isHorizontal = edge === 'left' || edge === 'right'
   const sign = (edge === 'left' || edge === 'top') ? -1 : 1
 
+  document.documentElement.style.cursor = isHorizontal ? 'ew-resize' : 'ns-resize'
+
   const onMove = (ev: MouseEvent | TouchEvent) => {
     const point = ev.type === 'touchmove' ? (ev as TouchEvent).touches[0] : (ev as MouseEvent)
     if (isHorizontal) {
@@ -426,6 +595,7 @@ function onEdgeDrag(e: MouseEvent | TouchEvent, edge: Edge) {
 
   const onUp = () => {
     isDragging.value = false
+    document.documentElement.style.cursor = ''
     updateFullSize()
     document.removeEventListener('mousemove', onMove)
     document.removeEventListener('mouseup', onUp)
@@ -448,6 +618,7 @@ function updateFullSize() {
     && (iframeHeight.value === null || iframeHeight.value >= rect.height - gutter - 2)
 }
 
+
 function applyDeviceSize(device: Device | null | undefined) {
   if (!device) {
     iframeWidth.value = null
@@ -484,6 +655,7 @@ watch(viewMode, async (mode) => {
 })
 
 let observer: ResizeObserver | null = null
+let containerObserver: ResizeObserver | null = null
 
 function forwardIframeKeys(iframe: HTMLIFrameElement) {
   try {
@@ -498,6 +670,7 @@ function forwardIframeKeys(iframe: HTMLIFrameElement) {
         metaKey: e.metaKey,
         shiftKey: e.shiftKey,
         altKey: e.altKey,
+        bubbles: true,
       }))
     })
   } catch {}
@@ -519,6 +692,21 @@ onMounted(() => {
     observer.observe(wrapper)
   }
 
+  const container = containerEl.value
+  if (container) {
+    const gutter = 40
+    const rect = container.getBoundingClientRect()
+    maxIframeWidth.value = Math.max(0, Math.round(rect.width - gutter))
+    maxIframeHeight.value = Math.max(0, Math.round(rect.height - gutter))
+    containerObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        maxIframeWidth.value = Math.max(0, Math.round(entry.contentRect.width - gutter))
+        maxIframeHeight.value = Math.max(0, Math.round(entry.contentRect.height - gutter))
+      }
+    })
+    containerObserver.observe(container)
+  }
+
   const el = iframeEl.value
   if (el) {
     el.addEventListener('load', () => forwardIframeKeys(el))
@@ -527,17 +715,20 @@ onMounted(() => {
 
 onUnmounted(() => {
   observer?.disconnect()
+  containerObserver?.disconnect()
 })
 
 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
@@ -560,35 +751,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 = {
@@ -651,6 +846,7 @@ const stripeBg = {
         </ScrollArea>
         <ScrollArea v-show="sourceView === 'plaintext'" class="h-full [&_[data-slot=scroll-area-viewport]>div]:flex [&_[data-slot=scroll-area-viewport]>div]:flex-col [&_[data-slot=scroll-area-viewport]>div]:min-h-full">
           <pre
+            ref="plaintextEl"
             class="p-6 pt-14 text-sm leading-6 flex-1 text-gray-300 bg-[#27212e] dark:bg-gray-950 whitespace-pre-wrap break-words"
           >{{ plaintextContent }}</pre>
         </ScrollArea>
@@ -697,7 +893,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%' }"
               />
@@ -719,20 +915,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>
@@ -746,7 +940,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'"
@@ -757,48 +951,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>
@@ -808,35 +999,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">
@@ -844,19 +1035,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>