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

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

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { ChevronUp, ChevronDown, Check } from 'lucide-vue-next'
+import { ChevronUp, ChevronDown, Check, Info } from 'lucide-vue-next'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@/components/ui/resizable'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+} from '@/components/ui/tags-input'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
 import stripesUrl from '../stripes.svg'
 
@@ -24,9 +30,16 @@ interface Device {
   height: number
 }
 
+interface Template {
+  name: string
+  path: string
+  href: string
+}
+
 const props = defineProps<{
   device?: Device | null
   resetKey?: number
+  templates?: Template[]
 }>()
 
 const viewMode = defineModel<'preview' | 'source'>('viewMode', { default: 'preview' })
@@ -40,45 +53,45 @@ const sourceView = ref<'compiled' | 'vue' | 'plaintext'>('compiled')
 const copied = ref(false)
 
 const iframeEl = ref<HTMLIFrameElement>()
+const compiledSourceEl = ref<HTMLElement>()
 const vueSourceEl = ref<HTMLElement>()
 const containerEl = ref<HTMLElement>()
-const previewEl = ref<InstanceType<typeof ResizablePanel>>()
-const leftPanel = ref<InstanceType<typeof ResizablePanel>>()
-const rightPanel = ref<InstanceType<typeof ResizablePanel>>()
-const topPanel = ref<InstanceType<typeof ResizablePanel>>()
-const bottomPanel = ref<InstanceType<typeof ResizablePanel>>()
+const wrapperEl = ref<HTMLElement>()
 
 const panelWidth = defineModel<number>('panelWidth', { default: 0 })
 const panelHeight = defineModel<number>('panelHeight', { default: 0 })
 const isDragging = defineModel<boolean>('isDragging', { default: false })
 const isFullSize = defineModel<boolean>('isFullSize', { default: true })
 
-const sideSizes = ref({ left: 0, right: 0, top: 0, bottom: 0 })
+// Custom resizable: width/height of the iframe wrapper (null = fill container)
+const iframeWidth = ref<number | null>(null)
+const iframeHeight = ref<number | null>(null)
+const iframeContentHeight = ref<number | null>(null)
 
-function updateFullSize() {
-  isFullSize.value = sideSizes.value.left < 0.5
-    && sideSizes.value.right < 0.5
-    && sideSizes.value.top < 0.5
-    && sideSizes.value.bottom < 0.5
-}
-
-async function copySource() {
+function copySource() {
+  let text: string
   if (sourceView.value === 'compiled') {
-    await navigator.clipboard.writeText(srcdoc.value)
+    text = srcdoc.value
   } else if (sourceView.value === 'plaintext') {
-    await navigator.clipboard.writeText(plaintextContent.value)
+    text = plaintextContent.value
   } else {
     const el = document.createElement('div')
     el.innerHTML = vueSourceHtml.value
-    await navigator.clipboard.writeText(el.textContent || '')
+    text = el.textContent || ''
   }
-  copied.value = true
-  setTimeout(() => { copied.value = false }, 2000)
+
+  const blob = new Blob([text], { type: 'text/plain' })
+  const item = new ClipboardItem({ 'text/plain': blob })
+  navigator.clipboard.write([item]).then(() => {
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  })
 }
 
 interface CompatibilityIssue {
   type: 'error' | 'warning'
   title: string
+  category: string
   clients: Array<{ name: string, notes: string[] }>
   url?: string
   line?: number
@@ -99,14 +112,111 @@ interface TemplateStats {
 
 const compatibilityIssues = ref<CompatibilityIssue[]>([])
 const compatibilityLoading = ref(false)
+const compatibilityError = ref('')
+const compatibilityCategory = ref('')
+const compatibilityCategories = ['css', 'html', 'image', 'others'] as const
+const activeCompatibilityCategories = computed(() =>
+  compatibilityCategories.filter(cat => compatibilityIssues.value.some(i => i.category === cat))
+)
+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)
 
+// Email test state
+const emailTo = ref<string[]>([])
+const emailSubject = ref('')
+const emailSending = ref(false)
+const emailPreventThreading = ref(true)
+const emailResult = ref<{ success: boolean; message: string; previewUrl?: string } | null>(null)
+
+async function fetchEmailConfig() {
+  try {
+    const res = await fetch('/__maizzle/email-config')
+    const data = await res.json()
+    if (data.to?.length && !emailTo.value.length) emailTo.value = data.to
+    if (data.subject && !emailSubject.value) emailSubject.value = data.subject
+  } catch {}
+}
+
+async function sendTestEmail() {
+  if (!emailTo.value.length) return
+  emailSending.value = true
+  emailResult.value = null
+
+  try {
+    const res = await fetch(`/__maizzle/email/${route.params.template}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        to: emailTo.value,
+        subject: (() => {
+          let subj = emailSubject.value || String(route.params.template)
+          if (emailPreventThreading.value) {
+            subj += ` | ${new Date().toISOString().slice(0, 19)}`
+          }
+          return subj
+        })(),
+      }),
+    })
+    emailResult.value = await res.json()
+  } catch (error: any) {
+    emailResult.value = { success: false, message: error.message }
+  } finally {
+    emailSending.value = false
+  }
+}
+
+let renderedHtml = ''
+
+function updateIframeContentHeight() {
+  const iframe = iframeEl.value
+  const doc = iframe?.contentDocument
+  if (!iframe || !doc?.documentElement) return
+
+  // Hide iframe body overflow — scrolling is handled by the outer ScrollArea
+  if (doc.body) doc.body.style.overflow = 'hidden'
+
+  // Save scroll position of the ScrollArea viewport
+  const viewport = wrapperEl.value?.querySelector('[data-slot="scroll-area-viewport"]')
+  const scrollTop = viewport?.scrollTop ?? 0
+
+  // Temporarily collapse to measure true content height
+  iframe.style.height = '0'
+  iframeContentHeight.value = doc.documentElement.scrollHeight
+  iframe.style.height = `${iframeContentHeight.value}px`
+
+  // Restore scroll position
+  if (viewport) {
+    viewport.scrollTop = scrollTop
+  }
+}
+
 async function fetchTemplate() {
   const res = await fetch(`/__maizzle/render/${route.params.template}`)
-  srcdoc.value = await res.text()
+  renderedHtml = await res.text()
+
+  const iframe = iframeEl.value
+  const doc = iframe?.contentDocument
+
+  // 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'
+    await nextTick()
+    updateIframeContentHeight()
+  } else {
+    // Fallback for initial load
+    srcdoc.value = renderedHtml
+  }
 }
 
 async function fetchSource() {
@@ -138,9 +248,22 @@ async function fetchStats() {
 
 async function fetchCompatibility() {
   compatibilityLoading.value = true
+  compatibilityError.value = ''
   try {
-    const res = await fetch(`/__maizzle/compatibility/${route.params.template}`)
-    compatibilityIssues.value = await res.json()
+    const res = await fetch('/__maizzle/compatibility', {
+      method: 'POST',
+      body: renderedHtml,
+    })
+    const data = await res.json()
+    if (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 || ''
+    }
   } catch {
     compatibilityIssues.value = []
   } finally {
@@ -151,8 +274,11 @@ async function fetchCompatibility() {
 async function fetchLint() {
   lintLoading.value = true
   try {
-    const res = await fetch(`/__maizzle/lint/${route.params.template}`)
-    lintIssues.value = await res.json()
+    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 {
@@ -165,18 +291,24 @@ watch(() => route.params.template, () => {
   vueSourceHtml.value = ''
   plaintextContent.value = ''
   compatibilityIssues.value = []
+  compatibilityError.value = ''
   lintIssues.value = []
   stats.value = null
+  emailResult.value = null
   sourceView.value = 'compiled'
-  fetchTemplate()
-  fetchCompatibility()
+  fetchTemplate().then(fetchCompatibility)
   fetchLint()
   fetchStats()
+  fetchEmailConfig()
   if (viewMode.value === 'source') fetchSource()
 }, { immediate: true })
 
 watch(viewMode, (mode) => {
-  if (mode === 'source' && !sourceHtml.value) fetchSource()
+  if (mode === 'source') {
+    if (sourceView.value === 'compiled' && !sourceHtml.value) fetchSource()
+    if (sourceView.value === 'vue' && !vueSourceHtml.value) fetchVueSource()
+    if (sourceView.value === 'plaintext' && !plaintextContent.value) fetchPlaintext()
+  }
 })
 
 watch(sourceView, (view) => {
@@ -187,15 +319,16 @@ watch(sourceView, (view) => {
 
 if ((import.meta as any).hot) {
   ;(import.meta as any).hot.on('maizzle:template-updated', () => {
-    fetchTemplate()
-    fetchCompatibility()
+    fetchTemplate().then(fetchCompatibility)
     fetchLint()
     fetchStats()
-    // Clear non-active source views so they re-fetch when switched to
-    if (sourceView.value !== 'compiled') sourceHtml.value = ''
-    if (sourceView.value !== 'vue') vueSourceHtml.value = ''
-    if (sourceView.value !== 'plaintext') plaintextContent.value = ''
 
+    // Always clear all source views so they re-fetch when switched to
+    sourceHtml.value = ''
+    vueSourceHtml.value = ''
+    plaintextContent.value = ''
+
+    // Re-fetch the active source view immediately if currently visible
     if (viewMode.value === 'source') {
       if (sourceView.value === 'compiled') fetchSource()
       if (sourceView.value === 'vue') fetchVueSource()
@@ -231,74 +364,112 @@ async function goToLine(line: number) {
   }
 }
 
-// Track which axis is being user-dragged so we can sync the opposite panel
-let hDragging = false
-let vDragging = false
+async function goToCompiledLine(line: number) {
+  viewMode.value = 'source'
+  sourceView.value = 'compiled'
 
-const emit = defineEmits<{ 'clear-device': [] }>()
+  if (!sourceHtml.value) {
+    await fetchSource()
+  }
 
-function onHDragStart() { hDragging = true; isDragging.value = true; emit('clear-device') }
-function onHDragEnd() { setTimeout(() => { hDragging = false }, 50); isDragging.value = false }
-function onVDragStart() { vDragging = true; isDragging.value = true; emit('clear-device') }
-function onVDragEnd() { setTimeout(() => { vDragging = false }, 50); isDragging.value = false }
+  await nextTick()
 
-function onHorizontalLayout(sizes: number[]) {
-  if (!hDragging) return
+  const el = compiledSourceEl.value
+  if (!el) return
 
-  const [left, , right] = sizes
-  if (Math.abs(left - right) < 0.5) return
+  el.querySelectorAll('.shiki-highlight-line').forEach(l => l.classList.remove('shiki-highlight-line'))
 
-  hDragging = false
-  const side = Math.max(left, right)
-  if (left < side) leftPanel.value?.resize(side)
-  if (right < side) rightPanel.value?.resize(side)
+  const lineEl = el.querySelector(`[data-line="${line}"]`)
+  if (lineEl) {
+    lineEl.classList.add('shiki-highlight-line')
+    lineEl.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  }
 }
 
-function onVerticalLayout(sizes: number[]) {
-  if (!vDragging) return
+const emit = defineEmits<{ 'clear-device': [] }>()
+
+type Edge = 'left' | 'right' | 'top' | 'bottom'
 
-  const [top, , bottom] = sizes
-  if (Math.abs(top - bottom) < 0.5) return
+function onEdgeDrag(e: MouseEvent | TouchEvent, edge: Edge) {
+  e.preventDefault()
+  isDragging.value = true
+  emit('clear-device')
+
+  const container = containerEl.value
+  if (!container) return
+
+  const isTouch = e.type === 'touchstart'
+  const startPoint = isTouch ? (e as TouchEvent).touches[0] : (e as MouseEvent)
+  const startX = startPoint.clientX
+  const startY = startPoint.clientY
+  const rect = container.getBoundingClientRect()
+  const gutter = 40 // 20px padding on each side
+  const maxW = rect.width - gutter
+  const maxH = rect.height - gutter
+  const startW = iframeWidth.value ?? maxW
+  const startH = iframeHeight.value ?? maxH
+
+  const isHorizontal = edge === 'left' || edge === 'right'
+  const sign = (edge === 'left' || edge === 'top') ? -1 : 1
+
+  const onMove = (ev: MouseEvent | TouchEvent) => {
+    const point = ev.type === 'touchmove' ? (ev as TouchEvent).touches[0] : (ev as MouseEvent)
+    if (isHorizontal) {
+      // Symmetric: each side moves by the delta, so total change is 2x
+      const delta = (point.clientX - startX) * sign
+      iframeWidth.value = Math.max(200, Math.min(maxW, startW + delta * 2))
+    } else {
+      const delta = (point.clientY - startY) * sign
+      iframeHeight.value = Math.max(100, Math.min(maxH, startH + delta * 2))
+    }
+  }
 
-  vDragging = false
-  const side = Math.max(top, bottom)
-  if (top < side) topPanel.value?.resize(side)
-  if (bottom < side) bottomPanel.value?.resize(side)
+  const onUp = () => {
+    isDragging.value = false
+    updateFullSize()
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+    document.removeEventListener('touchmove', onMove)
+    document.removeEventListener('touchend', onUp)
+  }
+
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+  document.addEventListener('touchmove', onMove, { passive: false })
+  document.addEventListener('touchend', onUp)
 }
 
-function applyDeviceSize(device: Device | null | undefined) {
-  const el = containerEl.value
-  if (!el) return
+function updateFullSize() {
+  const container = containerEl.value
+  if (!container) return
+  const rect = container.getBoundingClientRect()
+  const gutter = 40
+  isFullSize.value = (iframeWidth.value === null || iframeWidth.value >= rect.width - gutter - 2)
+    && (iframeHeight.value === null || iframeHeight.value >= rect.height - gutter - 2)
+}
 
+function applyDeviceSize(device: Device | null | undefined) {
   if (!device) {
-    if (!hDragging && !vDragging) {
-      leftPanel.value?.resize(0)
-      rightPanel.value?.resize(0)
-      topPanel.value?.resize(0)
-      bottomPanel.value?.resize(0)
-    }
+    iframeWidth.value = null
+    iframeHeight.value = null
+    updateFullSize()
     return
   }
 
-  const rect = el.getBoundingClientRect()
-  if (!rect.width || !rect.height) return
-
-  const handleSize = 16
-  const hPanelSpace = rect.width - handleSize * 2
-  const vPanelSpace = rect.height - handleSize * 2
-
-  const hSide = Math.max(0, ((hPanelSpace - device.width) / 2) / hPanelSpace * 100)
-  const vSide = Math.max(0, ((vPanelSpace - device.height) / 2) / vPanelSpace * 100)
+  const container = containerEl.value
+  if (!container) return
+  const rect = container.getBoundingClientRect()
+  const gutter = 40
 
-  leftPanel.value?.resize(hSide)
-  rightPanel.value?.resize(hSide)
-  topPanel.value?.resize(vSide)
-  bottomPanel.value?.resize(vSide)
+  iframeWidth.value = Math.min(device.width, rect.width - gutter)
+  iframeHeight.value = Math.min(device.height, rect.height - gutter)
+  updateFullSize()
 }
 
 watch(() => props.device, (device) => {
   if (viewMode.value === 'source') return
-  applyDeviceSize(device)
+  // Only apply when a device is selected, not when cleared (drag start clears device)
+  if (device) applyDeviceSize(device)
 })
 
 watch(() => props.resetKey, () => {
@@ -333,9 +504,9 @@ function forwardIframeKeys(iframe: HTMLIFrameElement) {
 }
 
 onMounted(() => {
-  const el = iframeEl.value
-  if (el) {
-    const rect = el.getBoundingClientRect()
+  const wrapper = wrapperEl.value
+  if (wrapper) {
+    const rect = wrapper.getBoundingClientRect()
     panelWidth.value = Math.round(rect.width)
     panelHeight.value = Math.round(rect.height)
     observer = new ResizeObserver((entries) => {
@@ -343,8 +514,13 @@ onMounted(() => {
         panelWidth.value = Math.round(entry.contentRect.width)
         panelHeight.value = Math.round(entry.contentRect.height)
       }
+      updateIframeContentHeight()
     })
-    observer.observe(el)
+    observer.observe(wrapper)
+  }
+
+  const el = iframeEl.value
+  if (el) {
     el.addEventListener('load', () => forwardIframeKeys(el))
   }
 })
@@ -360,7 +536,7 @@ const activeTab = ref<string | undefined>(undefined)
 function toggleBottomPanel() {
   bottomPanelOpen.value = !bottomPanelOpen.value
   if (bottomPanelOpen.value) {
-    tabsPanelHeight.value = 200
+    tabsPanelHeight.value = 300
     if (!activeTab.value) activeTab.value = 'compatibility'
   } else {
     tabsPanelHeight.value = 40
@@ -378,7 +554,7 @@ function onTabClick(tab: string) {
   activeTab.value = tab
   if (!bottomPanelOpen.value) {
     bottomPanelOpen.value = true
-    tabsPanelHeight.value = 200
+    tabsPanelHeight.value = 300
   }
 }
 
@@ -390,8 +566,11 @@ function onTabsDragStart(e: MouseEvent) {
   const startY = e.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, startHeight + startY - e.clientY)
+    const newHeight = Math.max(40, Math.min(maxHeight, startHeight + startY - e.clientY))
     tabsPanelHeight.value = newHeight
     bottomPanelOpen.value = newHeight > 40
 
@@ -420,187 +599,298 @@ const stripeBg = {
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <div class="relative flex-1 min-h-0">
+  <div class="relative h-full">
+    <div class="absolute inset-0 bottom-10 overflow-hidden">
       <!-- Source code view -->
       <div v-show="viewMode === 'source'" class="absolute inset-0 min-w-0 overflow-hidden">
         <div class="absolute top-3 left-6 z-10">
           <DropdownMenu :modal="false">
-            <DropdownMenuTrigger class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2.5 h-7 text-xs font-medium text-gray-300 hover:bg-white/15 transition-colors">
+            <DropdownMenuTrigger class="inline-flex items-center gap-1 rounded-md bg-[#27212e]/80 dark:bg-gray-950/80 backdrop-blur-md border border-white/10 px-2.5 h-7 text-xs font-medium text-gray-300 hover:bg-[#27212e] dark:hover:bg-gray-950 transition-colors">
               {{ sourceView === 'compiled' ? 'HTML' : sourceView === 'vue' ? 'Source' : 'Plaintext' }}
               <ChevronDown class="size-3 opacity-50" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" class="min-w-0 bg-white/10 backdrop-blur-md border-white/10">
-              <DropdownMenuItem class="text-xs font-medium text-gray-300 hover:text-white focus:bg-white/10 focus:text-white" @click="sourceView = 'vue'">
-                <Check v-if="sourceView === 'vue'" class="size-3.5" />
-                <span :class="sourceView === 'vue' ? '' : 'pl-5.5'">Source</span>
+            <DropdownMenuContent align="start" class="min-w-32 bg-[#27212e]/80 dark:bg-gray-950/80 backdrop-blur-md border-white/10">
+              <DropdownMenuItem class="text-xs font-medium text-gray-400 focus:text-gray-200 focus:bg-white/10" @click="sourceView = 'vue'">
+                <Check v-if="sourceView === 'vue'" class="size-3 text-gray-200" />
+                <span :class="[sourceView === 'vue' ? 'text-gray-200' : 'pl-5']">Source</span>
               </DropdownMenuItem>
-              <DropdownMenuItem class="text-xs font-medium text-gray-300 hover:text-white focus:bg-white/10 focus:text-white" @click="sourceView = 'compiled'">
-                <Check v-if="sourceView === 'compiled'" class="size-3.5" />
-                <span :class="sourceView === 'compiled' ? '' : 'pl-5.5'">HTML</span>
+              <DropdownMenuItem class="text-xs font-medium text-gray-400 focus:text-gray-200 focus:bg-white/10" @click="sourceView = 'compiled'">
+                <Check v-if="sourceView === 'compiled'" class="size-3 text-gray-200" />
+                <span :class="[sourceView === 'compiled' ? 'text-gray-200' : 'pl-5']">HTML</span>
               </DropdownMenuItem>
-              <DropdownMenuItem class="text-xs font-medium text-gray-300 hover:text-white focus:bg-white/10 focus:text-white" @click="sourceView = 'plaintext'">
-                <Check v-if="sourceView === 'plaintext'" class="size-3.5" />
-                <span :class="sourceView === 'plaintext' ? '' : 'pl-5.5'">Plaintext</span>
+              <DropdownMenuItem class="text-xs font-medium text-gray-400 focus:text-gray-200 focus:bg-white/10" @click="sourceView = 'plaintext'">
+                <Check v-if="sourceView === 'plaintext'" class="size-3 text-gray-200" />
+                <span :class="[sourceView === 'plaintext' ? 'text-gray-200' : 'pl-5']">Plaintext</span>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
         <button
-          class="absolute top-3 right-6 z-10 inline-flex items-center justify-center rounded-md px-2.5 h-8 bg-transparent hover:bg-transparent group disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+          class="absolute top-3 right-[26px] z-10 inline-flex items-center justify-center rounded-md size-7 bg-[#27212e]/80 dark:bg-gray-950/80 backdrop-blur-md border border-white/10 hover:bg-[#27212e] dark:hover:bg-gray-950 group disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           :disabled="copied"
           @click="copySource"
         >
-          <svg v-if="!copied" class="size-5 text-gray-400 group-hover:text-gray-300" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" /><path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" /></svg>
-          <svg v-else class="size-5 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+          <svg v-if="!copied" class="size-3.5 text-gray-400 group-hover:text-gray-300" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" /><path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" /></svg>
+          <svg v-else class="size-3.5 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
         </button>
-        <div
-          v-show="sourceView === 'compiled'"
-          class="shiki-line-numbers h-full overflow-auto [&_pre]:p-6 [&_pre]:pt-14 [&_pre]:text-base [&_pre]:leading-6 [&_pre]:min-h-full [&_pre]:overflow-x-auto"
-          v-html="sourceHtml"
-        />
-        <div
-          ref="vueSourceEl"
-          v-show="sourceView === 'vue'"
-          class="shiki-line-numbers h-full overflow-auto [&_pre]:p-6 [&_pre]:pt-14 [&_pre]:text-base [&_pre]:leading-6 [&_pre]:min-h-full [&_pre]:overflow-x-auto"
-          v-html="vueSourceHtml"
-        />
-        <pre
-          v-show="sourceView === 'plaintext'"
-          class="h-full overflow-auto p-6 pt-14 text-sm leading-6 min-h-full text-gray-300 bg-[#27212e] whitespace-pre-wrap break-words"
-        >{{ plaintextContent }}</pre>
+        <ScrollArea v-show="sourceView === 'compiled'" 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">
+          <div
+            ref="compiledSourceEl"
+            class="flex-1 bg-[#27212e] dark:bg-gray-950 shiki-line-numbers [&_pre]:p-6 [&_pre]:pt-14 [&_pre]:text-base [&_pre]:leading-6 [&_pre]:min-h-full dark:[&_pre]:bg-gray-950!"
+            v-html="sourceHtml"
+          />
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+        <ScrollArea v-show="sourceView === 'vue'" 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">
+          <div
+            ref="vueSourceEl"
+            class="flex-1 bg-[#27212e] dark:bg-gray-950 shiki-line-numbers [&_pre]:p-6 [&_pre]:pt-14 [&_pre]:text-base [&_pre]:leading-6 [&_pre]:min-h-full dark:[&_pre]:bg-gray-950!"
+            v-html="vueSourceHtml"
+          />
+          <ScrollBar orientation="horizontal" />
+        </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
+            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>
       </div>
 
+      <!-- Blocks iframe from stealing pointer events while dragging tabs -->
+      <div v-if="tabsDragging" class="fixed inset-0 z-50" />
+
       <!-- Preview view -->
       <div v-show="viewMode !== 'source'" class="absolute inset-0">
         <div class="relative h-full opacity-5" :style="stripeBg" />
       </div>
 
-      <div v-show="viewMode !== 'source'" ref="containerEl" class="absolute inset-0 z-10 flex flex-col">
-        <div class="flex-1 min-h-0">
-          <ResizablePanelGroup direction="vertical" class="h-full" @layout="onVerticalLayout">
-            <ResizablePanel ref="topPanel" :default-size="0" @resize="(s: number) => { sideSizes.top = s; updateFullSize() }" />
-            <ResizableHandle class="h-4! bg-gray-50 hover:bg-gray-100 dark:bg-white/5 dark:hover:bg-white/10 transition-colors after:hidden!" @dragging="(v: boolean) => v ? onVDragStart() : onVDragEnd()" />
-            <ResizablePanel :default-size="100" :min-size="20">
-              <ResizablePanelGroup direction="horizontal" class="h-full" @layout="onHorizontalLayout">
-                <ResizablePanel ref="leftPanel" :default-size="0" @resize="(s: number) => { sideSizes.left = s; updateFullSize() }" />
-                <ResizableHandle class="w-4 bg-gray-50 hover:bg-gray-100 dark:bg-white/5 dark:hover:bg-white/10 transition-colors after:hidden!" @dragging="(v: boolean) => v ? onHDragStart() : onHDragEnd()" />
-                <ResizablePanel ref="previewEl" :default-size="100" :min-size="20">
-                  <iframe
-                    ref="iframeEl"
-                    :srcdoc="srcdoc"
-                    class="h-full w-full border-0 bg-white"
-                  />
-                </ResizablePanel>
-                <ResizableHandle class="w-4 bg-gray-50 hover:bg-gray-100 dark:bg-white/5 dark:hover:bg-white/10 transition-colors after:hidden!" @dragging="(v: boolean) => v ? onHDragStart() : onHDragEnd()" />
-                <ResizablePanel ref="rightPanel" :default-size="0" @resize="(s: number) => { sideSizes.right = s; updateFullSize() }" />
-              </ResizablePanelGroup>
-            </ResizablePanel>
-            <ResizableHandle class="h-4! bg-gray-50 hover:bg-gray-100 dark:bg-white/5 dark:hover:bg-white/10 transition-colors after:hidden!" @dragging="(v: boolean) => v ? onVDragStart() : onVDragEnd()" />
-            <ResizablePanel ref="bottomPanel" :default-size="0" @resize="(s: number) => { sideSizes.bottom = s; updateFullSize() }" />
-          </ResizablePanelGroup>
+      <div v-show="viewMode !== 'source'" ref="containerEl" class="absolute inset-0 z-10 flex items-center justify-center">
+        <!-- Blocks iframe from stealing pointer events while dragging -->
+        <div v-if="isDragging" class="absolute inset-0 z-20" />
+        <div
+          class="relative"
+          :style="{
+            width: iframeWidth != null ? `${iframeWidth + 40}px` : '100%',
+            height: iframeHeight != null ? `${iframeHeight + 40}px` : '100%',
+            transition: isDragging ? 'none' : 'width 0.2s ease, height 0.2s ease',
+          }"
+        >
+          <!-- Top handle -->
+          <div class="group hidden min-[430px]:flex absolute top-0 left-5 right-5 h-5 items-center justify-center cursor-ns-resize" @mousedown="onEdgeDrag($event, 'top')" @touchstart.prevent="onEdgeDrag($event, 'top')">
+            <div class="h-1 w-12 rounded-full bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 group-active:bg-gray-500 dark:group-hover:bg-gray-500 dark:group-active:bg-gray-400 transition-colors" />
+          </div>
+          <!-- Bottom handle -->
+          <div class="group hidden min-[430px]:flex absolute bottom-0 left-5 right-5 h-5 items-center justify-center cursor-ns-resize" @mousedown="onEdgeDrag($event, 'bottom')" @touchstart.prevent="onEdgeDrag($event, 'bottom')">
+            <div class="h-1 w-12 rounded-full bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 group-active:bg-gray-500 dark:group-hover:bg-gray-500 dark:group-active:bg-gray-400 transition-colors" />
+          </div>
+          <!-- Left handle -->
+          <div class="group hidden min-[430px]:flex absolute left-0 top-5 bottom-5 w-5 items-center justify-center cursor-ew-resize" @mousedown="onEdgeDrag($event, 'left')" @touchstart.prevent="onEdgeDrag($event, 'left')">
+            <div class="w-1 h-12 rounded-full bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 group-active:bg-gray-500 dark:group-hover:bg-gray-500 dark:group-active:bg-gray-400 transition-colors" />
+          </div>
+          <!-- Right handle -->
+          <div class="group hidden min-[430px]:flex absolute right-0 top-5 bottom-5 w-5 items-center justify-center cursor-ew-resize" @mousedown="onEdgeDrag($event, 'right')" @touchstart.prevent="onEdgeDrag($event, 'right')">
+            <div class="w-1 h-12 rounded-full bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 group-active:bg-gray-500 dark:group-hover:bg-gray-500 dark:group-active:bg-gray-400 transition-colors" />
+          </div>
+          <!-- Iframe -->
+          <div ref="wrapperEl" class="absolute inset-0 min-[430px]:inset-5 border border-gray-200 dark:border-gray-800">
+            <ScrollArea class="h-full w-full bg-white dark:bg-gray-950">
+              <iframe
+                ref="iframeEl"
+                :srcdoc="srcdoc"
+                @load="updateIframeContentHeight"
+                class="w-full border-0 bg-white dark:bg-gray-950"
+                :style="{ height: iframeContentHeight ? `${iframeContentHeight}px` : '100%' }"
+              />
+            </ScrollArea>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- Tabs panel (always visible) -->
+    <!-- Tabs panel (overlay) -->
     <div
-      class="shrink-0 bg-white dark:bg-gray-950 overflow-hidden"
-      :class="!tabsDragging ? 'transition-[height] duration-200 ease-in-out' : ''"
+      class="absolute bottom-0 left-0 right-0 z-20 overflow-hidden border-t border-gray-200 dark:border-gray-800/50"
+      :class="[
+        !tabsDragging ? 'transition-[height] duration-200 ease-in-out' : '',
+        'bg-white dark:bg-gray-950',
+      ]"
       :style="{ height: `${tabsPanelHeight}px` }"
     >
         <div
-          class="relative h-px bg-gray-200 dark:bg-gray-800 cursor-row-resize before:absolute before:-top-2 before:left-0 before:right-0 before:h-5 before:content-['']"
+          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"
         />
         <Tabs :model-value="activeTab" class="flex flex-col min-h-0 h-full">
-          <div class="flex items-center justify-between min-h-10 px-4 shrink-0" :class="bottomPanelOpen ? 'border-b' : ''">
+          <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 px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent 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')">
+              <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 px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent 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')">
+              <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>
-              <TabsTrigger value="stats" class="text-xs px-3 h-full rounded-none! border-0! shadow-none! border-b! border-transparent 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" @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')">
+                Test
+              </TabsTrigger>
             </TabsList>
             <Button variant="ghost" size="icon" class="h-7 w-7 hover:bg-transparent!" @click="toggleBottomPanel">
-              <ChevronUp v-if="!bottomPanelOpen" class="size-4" />
-              <ChevronDown v-else class="size-4" />
+              <ChevronUp v-if="!bottomPanelOpen" class="size-4 dark:text-gray-400" :stroke-width="1" />
+              <ChevronDown v-else class="size-4 dark:text-gray-400" :stroke-width="1" />
             </Button>
           </div>
-          <div class="flex-1 overflow-auto">
-            <TabsContent value="compatibility" class="mt-0">
-              <p v-if="compatibilityLoading" class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">Checking compatibility...</p>
-              <p v-else-if="compatibilityIssues.length === 0" class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">No compatibility issues found.</p>
-              <ul v-else class="text-xs divide-y">
-                <li
-                  v-for="(issue, i) in compatibilityIssues"
-                  :key="i"
-                  class="px-4 py-2 hover:bg-gray-50 dark:hover:bg-white/5"
+          <div class="flex-1 min-h-0">
+            <TabsContent value="compatibility" class="mt-0 h-full flex flex-col"><div v-if="!compatibilityLoading && !compatibilityError && compatibilityIssues.length > 0" class="flex gap-1 pl-3 pr-4 py-2 border-b border-gray-200 dark:border-white/10 shrink-0">
+                <button
+                  v-for="cat in activeCompatibilityCategories"
+                  :key="cat"
+                  class="px-2 py-0.5 text-[11px] rounded-full cursor-pointer 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'"
+                  @click="compatibilityCategory = cat"
                 >
-                  <div class="flex items-start justify-between gap-4">
-                    <div>
-                      <a v-if="issue.url" :href="issue.url" target="_blank" rel="noopener" class="font-medium hover:underline" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
+                  {{ cat === 'css' ? 'CSS' : cat === 'html' ? 'HTML' : cat.charAt(0).toUpperCase() + cat.slice(1) }}
+                  <span class="ml-0.5 tabular-nums">{{ compatibilityIssues.filter(i => i.category === cat).length }}</span>
+                </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-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>
+                <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" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
+                      <span v-else class="font-medium shrink-0" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
                         {{ issue.title }}
                       </span>
-                      <div class="text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
-                        <div v-for="client in issue.clients" :key="client.name">
-                          <span class="text-gray-700 dark:text-gray-300">{{ client.name }}</span><span v-if="client.notes.length">: {{ client.notes.join('. ') }}</span>
-                        </div>
+                      <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>
+                        <span class="font-medium" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
+                          {{ issue.title }}
+                        </span>
+                        <div class="text-gray-500 dark:text-gray-400 mt-0.5">{{ issue.message }}</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>
                     </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>
+                  </li>
+                </ul>
+              </ScrollArea>
+            </TabsContent>
+            <TabsContent value="stats" class="mt-0 h-full">
+                <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>
-                </li>
-              </ul>
+                </div>
+              </ScrollArea>
             </TabsContent>
-            <TabsContent value="lint" class="mt-0">
-              <p v-if="lintLoading" class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">Linting...</p>
-              <p v-else-if="lintIssues.length === 0" class="px-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="px-4 py-2 hover:bg-gray-50 dark:hover:bg-white/5"
-                >
-                  <div class="flex items-start justify-between gap-4">
-                    <div>
-                      <span class="font-medium" :class="issue.type === 'error' ? 'text-red-600' : 'text-amber-600'">
-                        {{ issue.title }}
-                      </span>
-                      <div class="text-gray-500 dark:text-gray-400 mt-0.5">{{ issue.message }}</div>
+            <TabsContent value="test" class="mt-0 h-full">
+              <ScrollArea class="h-full pl-5">
+                <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>
+                      <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..." />
+                      </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>
+                      <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" />
+                        <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>
+                        </label>
+                      </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>
                   </div>
-                </li>
-              </ul>
-            </TabsContent>
-            <TabsContent value="stats" class="mt-0">
-              <p v-if="statsLoading" class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">Loading stats...</p>
-              <p v-else-if="!stats" class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">No stats available.</p>
-              <div v-else class="px-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-100'"
-                  >{{ stats.size.formatted }}</span>
-                </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 class="flex items-center gap-3 mt-3">
+                    <Button
+                      size="sm"
+                      class="h-7 text-xs px-3"
+                      :disabled="!emailTo.length || emailSending"
+                      @click="sendTestEmail"
+                    >
+                      <svg v-if="emailSending" class="size-3.5 animate-spin [animation-duration:0.6s]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" /></svg>
+                      {{ emailSending ? 'Sending' : 'Send' }}
+                    </Button>
+                  </div>
+                  <div v-if="emailResult" class="mt-2">
+                    <p class="text-xs" :class="emailResult.success ? 'text-gray-950 dark:text-white' : 'text-red-600'">
+                      {{ emailResult.message }}
+                      <a
+                        v-if="emailResult.previewUrl"
+                        :href="emailResult.previewUrl"
+                        target="_blank"
+                        rel="noopener"
+                        class="text-gray-500 dark:text-gray-400 hover:underline"
+                      >
+                        (view)
+                      </a>
+                    </p>
+                  </div>
                 </div>
-              </div>
+              </ScrollArea>
             </TabsContent>
           </div>
         </Tabs>