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

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

@@ -1,7 +1,7 @@
 <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, ExternalLink } from 'lucide-vue-next'
+import { ChevronUp, ChevronDown, Check, Info } from 'lucide-vue-next'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,6 +20,7 @@ import {
   TagsInputItemDelete,
   TagsInputItemText,
 } from '@/components/ui/tags-input'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
 import stripesUrl from '../stripes.svg'
 
@@ -29,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' })
@@ -60,23 +68,30 @@ const iframeWidth = ref<number | null>(null)
 const iframeHeight = ref<number | null>(null)
 const iframeContentHeight = ref<number | null>(null)
 
-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
@@ -98,6 +113,15 @@ 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)
@@ -236,6 +260,9 @@ async function fetchCompatibility() {
       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 = []
@@ -247,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 {
@@ -360,7 +390,7 @@ const emit = defineEmits<{ 'clear-device': [] }>()
 
 type Edge = 'left' | 'right' | 'top' | 'bottom'
 
-function onEdgeDrag(e: MouseEvent, edge: Edge) {
+function onEdgeDrag(e: MouseEvent | TouchEvent, edge: Edge) {
   e.preventDefault()
   isDragging.value = true
   emit('clear-device')
@@ -368,8 +398,10 @@ function onEdgeDrag(e: MouseEvent, edge: Edge) {
   const container = containerEl.value
   if (!container) return
 
-  const startX = e.clientX
-  const startY = e.clientY
+  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
@@ -380,13 +412,14 @@ function onEdgeDrag(e: MouseEvent, edge: Edge) {
   const isHorizontal = edge === 'left' || edge === 'right'
   const sign = (edge === 'left' || edge === 'top') ? -1 : 1
 
-  const onMove = (ev: MouseEvent) => {
+  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 = (ev.clientX - startX) * sign
+      const delta = (point.clientX - startX) * sign
       iframeWidth.value = Math.max(200, Math.min(maxW, startW + delta * 2))
     } else {
-      const delta = (ev.clientY - startY) * sign
+      const delta = (point.clientY - startY) * sign
       iframeHeight.value = Math.max(100, Math.min(maxH, startH + delta * 2))
     }
   }
@@ -396,10 +429,14 @@ function onEdgeDrag(e: MouseEvent, edge: Edge) {
     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 updateFullSize() {
@@ -568,53 +605,53 @@ const stripeBg = {
       <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/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">
+            <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-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>
+            <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-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 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-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 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-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"
+          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>
-        <ScrollArea v-show="sourceView === 'compiled'" class="h-full">
+        <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="shiki-line-numbers [&_pre]:p-6 [&_pre]:pt-14 [&_pre]:text-base [&_pre]:leading-6 [&_pre]:min-h-full dark:[&_pre]:bg-gray-950!"
+            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">
+        <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="shiki-line-numbers [&_pre]:p-6 [&_pre]:pt-14 [&_pre]:text-base [&_pre]:leading-6 [&_pre]:min-h-full dark:[&_pre]:bg-gray-950!"
+            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">
+        <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 min-h-full text-gray-300 bg-[#27212e] dark:bg-gray-950 whitespace-pre-wrap break-words"
+            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>
@@ -639,23 +676,23 @@ const stripeBg = {
           }"
         >
           <!-- 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="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 absolute bottom-0 left-5 right-5 h-5 flex items-center justify-center cursor-ns-resize" @mousedown="onEdgeDrag($event, 'bottom')">
+          <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 absolute left-0 top-5 bottom-5 w-5 flex items-center justify-center cursor-ew-resize" @mousedown="onEdgeDrag($event, 'left')">
+          <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 absolute right-0 top-5 bottom-5 w-5 flex items-center justify-center cursor-ew-resize" @mousedown="onEdgeDrag($event, 'right')">
+          <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-5 border border-gray-200 dark:border-gray-800">
+          <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"
@@ -684,7 +721,7 @@ const stripeBg = {
           @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 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
@@ -705,128 +742,156 @@ const stripeBg = {
             </Button>
           </div>
           <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
-                  v-for="(issue, i) in compatibilityIssues"
-                  :key="i"
-                  class="px-4 py-2 hover:bg-gray-50 dark:hover:bg-white/5"
+            <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="goToCompiledLine(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>
-                </li>
-              </ul>
-            </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">
-                <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>
-                    </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 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>
-                </li>
-              </ul>
-            </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">
-                <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>
-                </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>
-            </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 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 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>
+              </ScrollArea>
+            </TabsContent>
+            <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>
                   </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"
+                  <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"
                     >
-                      View <ExternalLink class="size-3" />
-                    </a>
-                  </p>
+                      <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>
+              </ScrollArea>
+            </TabsContent>
           </div>
         </Tabs>
       </div>

package/dist/transformers/index.d.mts

@@ -19,16 +19,17 @@ import { MaizzleConfig } from "../types/config.mjs";
  * 4.  CSS inliner
  * 5.  Remove attributes
  * 6.  Shorthand CSS
- * 7.  Add attributes
- * 8.  Filters
- * 9.  Base URL
- * 10. URL query
- * 11. Purge CSS (serializes/parses internally around email-comb)
- * 12. Entities
+ * 7.  Six-digit HEX
+ * 8.  Add attributes
+ * 9.  Filters
+ * 10. Base URL
+ * 11. URL query
+ * 12. Purge CSS (serializes/parses internally around email-comb)
+ * 13. Entities
  * + Vue-generated comments stripped here (on serialized string)
- * 13. Replace strings
- * 14. Prettify
- * 15. Minify
+ * 14. Replace strings
+ * 15. Prettify
+ * 16. Minify
  */
 declare function runTransformers(html: string, config: MaizzleConfig, filePath?: string, doctype?: string): Promise<string>;
 //#endregion

package/dist/transformers/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/transformers/index.ts"],"mappings":";;;;;AAgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAsB,eAAA,CACpB,IAAA,UACA,MAAA,EAAQ,aAAA,EACR,QAAA,WACA,OAAA,YACC,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/transformers/index.ts"],"mappings":";;;;;AAkDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAsB,eAAA,CACpB,IAAA,UACA,MAAA,EAAQ,aAAA,EACR,QAAA,WACA,OAAA,YACC,OAAA"}

package/dist/transformers/index.mjs

@@ -8,6 +8,7 @@ import { attributeToStyle } from "./attributeToStyle.mjs";
 import { inlineCSS } from "./inlineCSS.mjs";
 import { removeAttributes } from "./removeAttributes.mjs";
 import { shorthandCSS } from "./shorthandCSS.mjs";
+import { sixHex } from "./sixHex.mjs";
 import { addAttributes } from "./addAttributes.mjs";
 import { filters } from "./filters/index.mjs";
 import { base } from "./base.mjs";
@@ -37,16 +38,17 @@ import { minify } from "./minify.mjs";
 * 4.  CSS inliner
 * 5.  Remove attributes
 * 6.  Shorthand CSS
-* 7.  Add attributes
-* 8.  Filters
-* 9.  Base URL
-* 10. URL query
-* 11. Purge CSS (serializes/parses internally around email-comb)
-* 12. Entities
+* 7.  Six-digit HEX
+* 8.  Add attributes
+* 9.  Filters
+* 10. Base URL
+* 11. URL query
+* 12. Purge CSS (serializes/parses internally around email-comb)
+* 13. Entities
 * + Vue-generated comments stripped here (on serialized string)
-* 13. Replace strings
-* 14. Prettify
-* 15. Minify
+* 14. Replace strings
+* 15. Prettify
+* 16. Minify
 */
 async function runTransformers(html, config, filePath, doctype) {
 	let dom = parse(html);
@@ -57,6 +59,7 @@ async function runTransformers(html, config, filePath, doctype) {
 	dom = inlineCSS(dom, config.css);
 	dom = removeAttributes(dom, config.html?.attributes);
 	dom = shorthandCSS(dom, config.css);
+	dom = sixHex(dom, config.css);
 	dom = addAttributes(dom, config.html?.attributes);
 	dom = filters(dom, config.filters);
 	dom = base(dom, config.url);