@maizzle/framework 6.0.0-rc.6 → 6.0.0-rc.7

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

@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { ChevronUp, ChevronDown, Check } from 'lucide-vue-next'
+import { ChevronUp, ChevronDown, Check, ExternalLink } 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 stripesUrl from '../stripes.svg'
 
@@ -40,27 +45,20 @@ 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 })
-
-function updateFullSize() {
-  isFullSize.value = sideSizes.value.left < 0.5
-    && sideSizes.value.right < 0.5
-    && sideSizes.value.top < 0.5
-    && sideSizes.value.bottom < 0.5
-}
+// 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)
 
 async function copySource() {
   if (sourceView.value === 'compiled') {
@@ -99,14 +97,102 @@ interface TemplateStats {
 
 const compatibilityIssues = ref<CompatibilityIssue[]>([])
 const compatibilityLoading = ref(false)
+const compatibilityError = ref('')
 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 +224,19 @@ 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
+    }
   } catch {
     compatibilityIssues.value = []
   } finally {
@@ -165,13 +261,15 @@ 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 })
 
@@ -191,8 +289,7 @@ 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()
 
@@ -237,74 +334,105 @@ 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': [] }>()
 
-  const [top, , bottom] = sizes
-  if (Math.abs(top - bottom) < 0.5) return
+type Edge = 'left' | 'right' | 'top' | 'bottom'
 
-  vDragging = false
-  const side = Math.max(top, bottom)
-  if (top < side) topPanel.value?.resize(side)
-  if (bottom < side) bottomPanel.value?.resize(side)
-}
+function onEdgeDrag(e: MouseEvent, edge: Edge) {
+  e.preventDefault()
+  isDragging.value = true
+  emit('clear-device')
 
-function applyDeviceSize(device: Device | null | undefined) {
-  const el = containerEl.value
-  if (!el) return
+  const container = containerEl.value
+  if (!container) return
 
-  if (!device) {
-    if (!hDragging && !vDragging) {
-      leftPanel.value?.resize(0)
-      rightPanel.value?.resize(0)
-      topPanel.value?.resize(0)
-      bottomPanel.value?.resize(0)
+  const startX = e.clientX
+  const startY = e.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) => {
+    if (isHorizontal) {
+      // Symmetric: each side moves by the delta, so total change is 2x
+      const delta = (ev.clientX - startX) * sign
+      iframeWidth.value = Math.max(200, Math.min(maxW, startW + delta * 2))
+    } else {
+      const delta = (ev.clientY - startY) * sign
+      iframeHeight.value = Math.max(100, Math.min(maxH, startH + delta * 2))
     }
-    return
   }
 
-  const rect = el.getBoundingClientRect()
-  if (!rect.width || !rect.height) return
+  const onUp = () => {
+    isDragging.value = false
+    updateFullSize()
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+  }
+
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+}
+
+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)
+}
 
-  const handleSize = 16
-  const hPanelSpace = rect.width - handleSize * 2
-  const vPanelSpace = rect.height - handleSize * 2
+function applyDeviceSize(device: Device | null | undefined) {
+  if (!device) {
+    iframeWidth.value = null
+    iframeHeight.value = null
+    updateFullSize()
+    return
+  }
 
-  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, () => {
@@ -339,9 +467,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) => {
@@ -349,8 +477,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))
   }
 })
@@ -366,7 +499,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
@@ -384,7 +517,7 @@ function onTabClick(tab: string) {
   activeTab.value = tab
   if (!bottomPanelOpen.value) {
     bottomPanelOpen.value = true
-    tabsPanelHeight.value = 200
+    tabsPanelHeight.value = 300
   }
 }
 
@@ -396,8 +529,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
 
@@ -426,120 +562,152 @@ 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-white/80 dark:bg-white/10 backdrop-blur-md px-2.5 h-7 text-xs font-medium text-gray-600 dark:text-gray-300 hover:bg-white/90 dark:hover:bg-white/15 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-white/80 dark:bg-gray-900/80 backdrop-blur-md dark:border-white/10">
+              <DropdownMenuItem class="text-xs font-medium text-gray-600 dark:text-gray-400 focus:text-gray-900 dark:focus:text-gray-200 dark:focus:bg-white/10" @click="sourceView = 'vue'">
+                <Check v-if="sourceView === 'vue'" class="size-3 text-gray-900 dark:text-gray-200" />
+                <span :class="[sourceView === 'vue' ? 'text-gray-900 dark: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-600 dark:text-gray-400 focus:text-gray-900 dark:focus:text-gray-200 dark:focus:bg-white/10" @click="sourceView = 'compiled'">
+                <Check v-if="sourceView === 'compiled'" class="size-3 text-gray-900 dark:text-gray-200" />
+                <span :class="[sourceView === 'compiled' ? 'text-gray-900 dark: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-600 dark:text-gray-400 focus:text-gray-900 dark:focus:text-gray-200 dark:focus:bg-white/10" @click="sourceView = 'plaintext'">
+                <Check v-if="sourceView === 'plaintext'" class="size-3 text-gray-900 dark:text-gray-200" />
+                <span :class="[sourceView === 'plaintext' ? 'text-gray-900 dark: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-3 z-10 inline-flex items-center justify-center rounded-md size-9 backdrop-blur-sm bg-white/10 hover:bg-white/20 group disabled:opacity-50 disabled:cursor-not-allowed transition-all"
           :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>
         </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">
+          <div
+            ref="compiledSourceEl"
+            class="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">
+          <div
+            ref="vueSourceEl"
+            class="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">
+          <pre
+            class="p-6 pt-14 text-sm leading-6 min-h-full 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 absolute top-0 left-5 right-5 h-5 flex items-center justify-center cursor-ns-resize" @mousedown="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 absolute bottom-0 left-5 right-5 h-5 flex items-center justify-center cursor-ns-resize" @mousedown="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 absolute left-0 top-5 bottom-5 w-5 flex items-center justify-center cursor-ew-resize" @mousedown="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 absolute right-0 top-5 bottom-5 w-5 flex items-center justify-center cursor-ew-resize" @mousedown="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-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' : ''">
             <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">
+          <div class="flex-1 min-h-0">
+            <TabsContent value="compatibility" class="mt-0 h-full"><ScrollArea class="h-full">
               <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="compatibilityError" class="px-4 py-3 text-xs text-red-500 dark:text-red-400">{{ compatibilityError }}</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
@@ -561,12 +729,12 @@ const stripeBg = {
                         </div>
                       </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="goToCompiledLine(issue.line!)">L{{ issue.line }}</button>
                   </div>
                 </li>
               </ul>
-            </TabsContent>
-            <TabsContent value="lint" class="mt-0">
+            </ScrollArea></TabsContent>
+            <TabsContent value="lint" class="mt-0 h-full"><ScrollArea class="h-full">
               <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">
@@ -586,8 +754,8 @@ const stripeBg = {
                   </div>
                 </li>
               </ul>
-            </TabsContent>
-            <TabsContent value="stats" class="mt-0">
+            </ScrollArea></TabsContent>
+            <TabsContent value="stats" class="mt-0 h-full"><ScrollArea class="h-full">
               <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">
@@ -595,7 +763,7 @@ const stripeBg = {
                   <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'"
+                    :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>
                 <div class="flex items-center gap-1.5">
@@ -607,7 +775,58 @@ const stripeBg = {
                   <span class="font-medium tabular-nums">{{ stats.links }}</span>
                 </div>
               </div>
-            </TabsContent>
+            </ScrollArea></TabsContent>
+            <TabsContent value="test" class="mt-0 h-full"><ScrollArea class="h-full">
+              <div class="px-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 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>
+                </div>
+                <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="inline-flex items-center gap-0.5 text-gray-500 dark:text-gray-400 hover:underline ml-1"
+                    >
+                      View <ExternalLink class="size-3" />
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </ScrollArea></TabsContent>
           </div>
         </Tabs>
       </div>