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

package/dist/server/linter.mjs

@@ -0,0 +1,200 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { glob } from "tinyglobby";
+
+//#region src/server/linter.ts
+async function serveLint(url, config, res) {
+	const templateSlug = url.replace("/__maizzle/lint/", "").replace(/\?.*$/, "");
+	const match = (await glob(config.content ?? ["emails/**/*.vue"])).find((t) => t.replace(/\.(vue|md)$/, "") === templateSlug);
+	if (!match) {
+		res.statusCode = 404;
+		res.end(JSON.stringify({ error: "Template not found" }));
+		return;
+	}
+	try {
+		const source = readFileSync(resolve(match), "utf-8");
+		const templateMatch = source.match(/<template\b[^>]*>([\s\S]*)<\/template>/);
+		const issues = lintHtml(templateMatch ? templateMatch[1] : source, templateMatch ? source.slice(0, source.indexOf(templateMatch[0]) + templateMatch[0].indexOf(templateMatch[1])).split("\n").length - 1 : 0);
+		res.setHeader("Content-Type", "application/json");
+		res.end(JSON.stringify(issues));
+	} catch (error) {
+		res.statusCode = 500;
+		res.end(JSON.stringify({ error: error.message }));
+	}
+}
+function lintHtml(html, lineOffset = 0) {
+	const issues = [];
+	const lines = html.split("\n");
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		const lineNum = i + 1 + lineOffset;
+		const imgMatches = [...line.matchAll(/<img\b[^>]*?>/gi)];
+		for (const match of imgMatches) {
+			const tag = match[0];
+			if (!/\balt\s*=/i.test(tag)) issues.push({
+				type: "warning",
+				title: "Missing alt text",
+				message: "Image is missing the alt attribute",
+				line: lineNum
+			});
+		}
+		for (const match of imgMatches) {
+			const srcMatch = match[0].match(/\bsrc\s*=\s*["']([^"']*)["']/i);
+			if (!srcMatch) issues.push({
+				type: "error",
+				title: "Missing image src",
+				message: "Image tag has no src attribute",
+				line: lineNum
+			});
+			else if (!srcMatch[1].trim()) issues.push({
+				type: "error",
+				title: "Empty image src",
+				message: "Image src attribute is empty",
+				line: lineNum
+			});
+			else if (srcMatch[1].trim().startsWith("http:")) issues.push({
+				type: "warning",
+				title: "Insecure image src",
+				message: "Image loads over HTTP instead of HTTPS",
+				line: lineNum
+			});
+		}
+		const linkMatches = [...line.matchAll(/<a\b[^>]*?>/gi)];
+		for (const match of linkMatches) {
+			const hrefMatch = match[0].match(/\bhref\s*=\s*["']([^"']*)["']/i);
+			if (!hrefMatch) issues.push({
+				type: "error",
+				title: "Missing link href",
+				message: "Anchor tag has no href attribute",
+				line: lineNum
+			});
+			else {
+				const href = hrefMatch[1].trim();
+				if (!href) issues.push({
+					type: "warning",
+					title: "Empty link href",
+					message: "Link href attribute is empty",
+					line: lineNum
+				});
+				else if (href === "#" || href === "/") issues.push({
+					type: "warning",
+					title: "Placeholder link",
+					message: `Link href is "${href}"`,
+					line: lineNum
+				});
+				else if (href.startsWith("http:")) issues.push({
+					type: "warning",
+					title: "Insecure link",
+					message: "Link uses HTTP instead of HTTPS",
+					line: lineNum
+				});
+				else if (href.startsWith("http") && !/^https?:\/\/.+\..+/i.test(href)) issues.push({
+					type: "warning",
+					title: "Invalid link",
+					message: `Link href "${href}" looks malformed`,
+					line: lineNum
+				});
+			}
+		}
+		const resourceMatches = [...line.matchAll(/<(?:link|script|source)\b[^>]*?>/gi)];
+		for (const match of resourceMatches) {
+			const attrMatch = match[0].match(/\b(?:href|src)\s*=\s*["']([^"']*)["']/i);
+			if (attrMatch && attrMatch[1].trim().startsWith("http:")) issues.push({
+				type: "warning",
+				title: "Insecure resource",
+				message: "Resource loads over HTTP instead of HTTPS",
+				line: lineNum
+			});
+		}
+		const urlMatches = [...line.matchAll(/url\s*\(\s*["']?(http:[^"')]+)["']?\s*\)/gi)];
+		for (const _match of urlMatches) issues.push({
+			type: "warning",
+			title: "Insecure CSS url()",
+			message: "CSS url() loads over HTTP instead of HTTPS",
+			line: lineNum
+		});
+	}
+	const voidElements = new Set([
+		"area",
+		"base",
+		"br",
+		"col",
+		"embed",
+		"hr",
+		"img",
+		"input",
+		"link",
+		"meta",
+		"param",
+		"source",
+		"track",
+		"wbr"
+	]);
+	const trackedTags = new Set([
+		"a",
+		"b",
+		"body",
+		"div",
+		"em",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"head",
+		"html",
+		"i",
+		"li",
+		"ol",
+		"p",
+		"span",
+		"strong",
+		"style",
+		"table",
+		"tbody",
+		"td",
+		"tfoot",
+		"th",
+		"thead",
+		"title",
+		"tr",
+		"u",
+		"ul"
+	]);
+	const stack = [];
+	const strippedLines = html.replace(/<!--[\s\S]*?-->/g, (m) => "\n".repeat((m.match(/\n/g) || []).length)).replace(/<(style|script)\b[^>]*>[\s\S]*?<\/\1>/gi, (m) => "\n".repeat((m.match(/\n/g) || []).length)).split("\n");
+	for (let i = 0; i < strippedLines.length; i++) {
+		const line = strippedLines[i];
+		const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9]*)\b[^>]*\/?>/g;
+		let m;
+		while ((m = tagRegex.exec(line)) !== null) {
+			const fullMatch = m[0];
+			const tagName = m[1].toLowerCase();
+			if (!trackedTags.has(tagName) || voidElements.has(tagName)) continue;
+			if (fullMatch.endsWith("/>")) continue;
+			if (fullMatch.startsWith("</")) {
+				const lastOpen = stack.findLastIndex((s) => s.tag === tagName);
+				if (lastOpen !== -1) stack.splice(lastOpen, 1);
+			} else stack.push({
+				tag: tagName,
+				line: i + 1 + lineOffset
+			});
+		}
+	}
+	for (const unclosed of stack) issues.push({
+		type: "error",
+		title: "Unclosed tag",
+		message: `<${unclosed.tag}> tag is not closed`,
+		line: unclosed.line
+	});
+	issues.sort((a, b) => {
+		if (a.type !== b.type) return a.type === "error" ? -1 : 1;
+		return (a.line ?? 0) - (b.line ?? 0);
+	});
+	return issues;
+}
+
+//#endregion
+export { serveLint };
+//# sourceMappingURL=linter.mjs.map

package/dist/server/linter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"linter.mjs","names":[],"sources":["../../src/server/linter.ts"],"sourcesContent":["import { readFileSync } from 'node:fs'\nimport { resolve } from 'node:path'\nimport { glob } from 'tinyglobby'\nimport type { MaizzleConfig } from '../types/index.ts'\n\ninterface LintIssue {\n  type: 'error' | 'warning'\n  title: string\n  message: string\n  line?: number\n}\n\nexport async function serveLint(url: string, config: MaizzleConfig, res: any) {\n  const templateSlug = url.replace('/__maizzle/lint/', '').replace(/\\?.*$/, '')\n\n  const contentPatterns = config.content ?? ['emails/**/*.vue']\n  const templates = await glob(contentPatterns)\n  const match = templates.find(t => t.replace(/\\.(vue|md)$/, '') === templateSlug)\n\n  if (!match) {\n    res.statusCode = 404\n    res.end(JSON.stringify({ error: 'Template not found' }))\n    return\n  }\n\n  try {\n    const source = readFileSync(resolve(match), 'utf-8')\n\n    // Extract only the <template> block for linting\n    const templateMatch = source.match(/<template\\b[^>]*>([\\s\\S]*)<\\/template>/)\n    const html = templateMatch ? templateMatch[1] : source\n\n    // Calculate the offset of the <template> content within the source file\n    const templateOffset = templateMatch\n      ? source.slice(0, source.indexOf(templateMatch[0]) + templateMatch[0].indexOf(templateMatch[1])).split('\\n').length - 1\n      : 0\n\n    const issues = lintHtml(html, templateOffset)\n\n    res.setHeader('Content-Type', 'application/json')\n    res.end(JSON.stringify(issues))\n  } catch (error: any) {\n    res.statusCode = 500\n    res.end(JSON.stringify({ error: error.message }))\n  }\n}\n\nfunction lintHtml(html: string, lineOffset = 0): LintIssue[] {\n  const issues: LintIssue[] = []\n  const lines = html.split('\\n')\n\n  for (let i = 0; i < lines.length; i++) {\n    const line = lines[i]\n    const lineNum = i + 1 + lineOffset\n\n    // Images missing alt text\n    const imgMatches = [...line.matchAll(/<img\\b[^>]*?>/gi)]\n    for (const match of imgMatches) {\n      const tag = match[0]\n      if (!/\\balt\\s*=/i.test(tag)) {\n        issues.push({\n          type: 'warning',\n          title: 'Missing alt text',\n          message: 'Image is missing the alt attribute',\n          line: lineNum,\n        })\n      }\n    }\n\n    // Images with empty or missing src\n    for (const match of imgMatches) {\n      const tag = match[0]\n      const srcMatch = tag.match(/\\bsrc\\s*=\\s*[\"']([^\"']*)[\"']/i)\n      if (!srcMatch) {\n        issues.push({\n          type: 'error',\n          title: 'Missing image src',\n          message: 'Image tag has no src attribute',\n          line: lineNum,\n        })\n      } else if (!srcMatch[1].trim()) {\n        issues.push({\n          type: 'error',\n          title: 'Empty image src',\n          message: 'Image src attribute is empty',\n          line: lineNum,\n        })\n      } else if (srcMatch[1].trim().startsWith('http:')) {\n        issues.push({\n          type: 'warning',\n          title: 'Insecure image src',\n          message: 'Image loads over HTTP instead of HTTPS',\n          line: lineNum,\n        })\n      }\n    }\n\n    // Links: missing href, empty href, placeholder href\n    const linkMatches = [...line.matchAll(/<a\\b[^>]*?>/gi)]\n    for (const match of linkMatches) {\n      const tag = match[0]\n      const hrefMatch = tag.match(/\\bhref\\s*=\\s*[\"']([^\"']*)[\"']/i)\n\n      if (!hrefMatch) {\n        issues.push({\n          type: 'error',\n          title: 'Missing link href',\n          message: 'Anchor tag has no href attribute',\n          line: lineNum,\n        })\n      } else {\n        const href = hrefMatch[1].trim()\n        if (!href) {\n          issues.push({\n            type: 'warning',\n            title: 'Empty link href',\n            message: 'Link href attribute is empty',\n            line: lineNum,\n          })\n        } else if (href === '#' || href === '/') {\n          issues.push({\n            type: 'warning',\n            title: 'Placeholder link',\n            message: `Link href is \"${href}\"`,\n            line: lineNum,\n          })\n        } else if (href.startsWith('http:')) {\n          issues.push({\n            type: 'warning',\n            title: 'Insecure link',\n            message: 'Link uses HTTP instead of HTTPS',\n            line: lineNum,\n          })\n        } else if (href.startsWith('http') && !/^https?:\\/\\/.+\\..+/i.test(href)) {\n          issues.push({\n            type: 'warning',\n            title: 'Invalid link',\n            message: `Link href \"${href}\" looks malformed`,\n            line: lineNum,\n          })\n        }\n      }\n    }\n\n    // Insecure resources (<link href>, <script src>, <source src>)\n    const resourceMatches = [...line.matchAll(/<(?:link|script|source)\\b[^>]*?>/gi)]\n    for (const match of resourceMatches) {\n      const tag = match[0]\n      const attrMatch = tag.match(/\\b(?:href|src)\\s*=\\s*[\"']([^\"']*)[\"']/i)\n      if (attrMatch && attrMatch[1].trim().startsWith('http:')) {\n        issues.push({\n          type: 'warning',\n          title: 'Insecure resource',\n          message: 'Resource loads over HTTP instead of HTTPS',\n          line: lineNum,\n        })\n      }\n    }\n\n    // Insecure CSS url() references\n    const urlMatches = [...line.matchAll(/url\\s*\\(\\s*[\"']?(http:[^\"')]+)[\"']?\\s*\\)/gi)]\n    for (const _match of urlMatches) {\n      issues.push({\n        type: 'warning',\n        title: 'Insecure CSS url()',\n        message: 'CSS url() loads over HTTP instead of HTTPS',\n        line: lineNum,\n      })\n    }\n  }\n\n  // Check for unclosed tags (block-level and common inline elements)\n  const voidElements = new Set([\n    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',\n    'link', 'meta', 'param', 'source', 'track', 'wbr',\n  ])\n\n  const trackedTags = new Set([\n    'a', 'b', 'body', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',\n    'head', 'html', 'i', 'li', 'ol', 'p', 'span', 'strong', 'style',\n    'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'title', 'tr', 'u', 'ul',\n  ])\n\n  const stack: Array<{ tag: string, line: number }> = []\n\n  // Strip comments and content inside <style>/<script> to avoid false matches\n  const stripped = html\n    .replace(/<!--[\\s\\S]*?-->/g, (m) => '\\n'.repeat((m.match(/\\n/g) || []).length))\n    .replace(/<(style|script)\\b[^>]*>[\\s\\S]*?<\\/\\1>/gi, (m) => '\\n'.repeat((m.match(/\\n/g) || []).length))\n\n  const strippedLines = stripped.split('\\n')\n\n  for (let i = 0; i < strippedLines.length; i++) {\n    const line = strippedLines[i]\n    const tagRegex = /<\\/?([a-zA-Z][a-zA-Z0-9]*)\\b[^>]*\\/?>/g\n    let m\n\n    while ((m = tagRegex.exec(line)) !== null) {\n      const fullMatch = m[0]\n      const tagName = m[1].toLowerCase()\n\n      if (!trackedTags.has(tagName) || voidElements.has(tagName)) continue\n      if (fullMatch.endsWith('/>')) continue\n\n      if (fullMatch.startsWith('</')) {\n        // Closing tag\n        const lastOpen = stack.findLastIndex(s => s.tag === tagName)\n        if (lastOpen !== -1) {\n          stack.splice(lastOpen, 1)\n        }\n      } else {\n        // Opening tag\n        stack.push({ tag: tagName, line: i + 1 + lineOffset })\n      }\n    }\n  }\n\n  for (const unclosed of stack) {\n    issues.push({\n      type: 'error',\n      title: 'Unclosed tag',\n      message: `<${unclosed.tag}> tag is not closed`,\n      line: unclosed.line,\n    })\n  }\n\n  // Sort: errors first, then warnings, then by line\n  issues.sort((a, b) => {\n    if (a.type !== b.type) return a.type === 'error' ? -1 : 1\n    return (a.line ?? 0) - (b.line ?? 0)\n  })\n\n  return issues\n}\n"],"mappings":"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"}

package/dist/server/ui/App.vue

@@ -0,0 +1,360 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch, watchEffect } from 'vue'
+import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
+import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, X } from 'lucide-vue-next'
+import logoUrl from '@/logo.svg'
+import logoGradientUrl from '@/logo-gradient.svg'
+import { Kbd } from '@/components/ui/kbd'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarInput,
+} from '@/components/ui/sidebar'
+
+
+interface Template {
+  name: string
+  path: string
+  href: string
+}
+
+const route = useRoute()
+
+watchEffect(() => {
+  const slug = route.path === '/' ? '' : route.path.split('/').pop()
+  document.title = slug ? `Maizzle Dev - ${slug}.vue` : 'Maizzle Dev'
+})
+
+const templates = ref<Template[]>([])
+const search = ref('')
+const loading = ref(true)
+const viewMode = ref<'preview' | 'source'>('preview')
+const sidebarOpen = ref(localStorage.getItem('maizzle:sidebar') !== 'closed')
+
+interface DevicePreset {
+  name: string
+  width: number
+  height: number
+}
+
+const devicePresets: DevicePreset[] = [
+  { name: 'iPhone 17 Pro', width: 390, height: 844 },
+  { name: 'iPhone 17 Pro Max', width: 430, height: 932 },
+  { name: 'iPad Pro 11"', width: 834, height: 1194 },
+  { name: 'iPad Pro 12.9"', width: 1024, height: 1366 },
+  { name: 'Galaxy S26 Ultra', width: 412, height: 915 },
+  { name: 'Pixel 9 Pro', width: 393, height: 873 },
+  { name: 'Redmi Note 13 Lite', width: 360, height: 800 },
+]
+
+const selectedDevice = ref<DevicePreset | null>(null)
+const panelWidth = ref(0)
+const panelHeight = ref(0)
+const isDragging = ref(false)
+const isFullSize = ref(true)
+const resetKey = ref(0)
+
+function selectDevice(device: DevicePreset) {
+  selectedDevice.value = device
+  viewMode.value = 'preview'
+}
+
+watch(sidebarOpen, (open) => {
+  localStorage.setItem('maizzle:sidebar', open ? 'open' : 'closed')
+})
+
+async function fetchTemplates() {
+  const res = await fetch('/__maizzle/templates')
+  templates.value = await res.json()
+  loading.value = false
+}
+
+onMounted(fetchTemplates)
+
+if ((import.meta as any).hot) {
+  (import.meta as any).hot.on('maizzle:templates-changed', fetchTemplates)
+}
+
+const grouped = computed(() => {
+  const filtered = templates.value.filter(t =>
+    t.name.toLowerCase().includes(search.value.toLowerCase())
+    || t.path.toLowerCase().includes(search.value.toLowerCase())
+  )
+
+  const groups: Record<string, Template[]> = {}
+
+  for (const t of filtered) {
+    const parts = t.path.split('/')
+    const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
+    if (!groups[dir]) groups[dir] = []
+    groups[dir].push(t)
+  }
+
+  return groups
+})
+
+const filteredCount = computed(() => {
+  return Object.values(grouped.value).reduce((sum, items) => sum + items.length, 0)
+})
+
+const isActive = (href: string) => route.path === href
+
+const isPreviewRoute = computed(() => route.path !== '/')
+
+// Command palette
+const router = useRouter()
+const commandOpen = ref(false)
+
+const commandGrouped = computed(() => {
+  const groups: Record<string, Template[]> = {}
+
+  for (const t of templates.value) {
+    const parts = t.path.split('/')
+    const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
+    if (!groups[dir]) groups[dir] = []
+    groups[dir].push(t)
+  }
+
+  return groups
+})
+
+function getFileName(path: string) {
+  return path.split('/').pop() || path
+}
+
+function onCommandSelect(href: string) {
+  commandOpen.value = false
+  router.push(href)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault()
+    commandOpen.value = !commandOpen.value
+    return
+  }
+
+  if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+    e.preventDefault()
+    sidebarOpen.value = !sidebarOpen.value
+    return
+  }
+
+  if (e.key === '/' && !isInputFocused()) {
+    e.preventDefault()
+    commandOpen.value = true
+  }
+}
+
+function isInputFocused() {
+  const el = document.activeElement
+  if (!el) return false
+  const tag = el.tagName.toLowerCase()
+  return tag === 'input' || tag === 'textarea' || (el as HTMLElement).isContentEditable
+}
+
+onMounted(() => document.addEventListener('keydown', onKeydown))
+onUnmounted(() => document.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <SidebarProvider v-model:open="sidebarOpen">
+    <Sidebar collapsible="offcanvas" class="border-r border-gray-200 dark:border-gray-800">
+      <SidebarHeader class="h-12 flex-row items-center justify-between border-b border-gray-200 dark:border-gray-800 px-4">
+        <RouterLink to="/" class="flex items-center gap-2">
+          <img :src="logoUrl" alt="Maizzle" class="h-4 dark:hidden">
+          <img :src="logoGradientUrl" alt="Maizzle" class="hidden h-4 dark:block">
+        </RouterLink>
+        <SidebarTrigger class="-mr-1" />
+      </SidebarHeader>
+
+      <div class="px-3 pt-3 pb-1">
+        <div class="relative flex items-center">
+          <SidebarInput
+            v-model="search"
+            placeholder="Search emails..."
+            class="text-xs! pr-7"
+            @keydown.esc="search && (search = '')"
+          />
+          <button
+            v-if="search"
+            class="absolute right-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            @click="search = ''"
+          >
+            <X class="size-3.5" />
+          </button>
+        </div>
+      </div>
+
+      <SidebarContent>
+        <ScrollArea class="flex-1">
+          <SidebarGroup v-if="loading">
+            <p class="px-2 py-4 text-xs text-gray-500 dark:text-gray-400">Loading emails...</p>
+          </SidebarGroup>
+
+          <SidebarGroup v-else-if="filteredCount === 0">
+            <p class="px-2 py-4 text-xs text-gray-500 dark:text-gray-400">No emails found.</p>
+          </SidebarGroup>
+
+          <SidebarGroup v-for="(items, dir) in grouped" :key="dir" v-else>
+            <SidebarGroupLabel>{{ dir }}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem v-for="t in items" :key="t.path">
+                  <SidebarMenuButton
+                    as-child
+                    size="sm"
+                    :is-active="isActive(t.href)"
+                  >
+                    <RouterLink :to="t.href" class="truncate">
+                      <svg class="size-3 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+                        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+                      </svg>
+                      <span class="truncate">{{ t.name }}</span>
+                    </RouterLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </ScrollArea>
+      </SidebarContent>
+
+      <SidebarFooter class="h-10 justify-center border-t border-gray-200 dark:border-gray-800">
+        <p class="text-[10px] text-gray-500 dark:text-gray-400">{{ templates.length }} email{{ templates.length !== 1 ? 's' : '' }}</p>
+      </SidebarFooter>
+    </Sidebar>
+
+    <SidebarInset>
+      <!-- Header toolbar -->
+      <header class="grid h-12 grid-cols-[1fr_auto_1fr] items-center border-b px-4">
+        <div>
+          <Transition
+            enter-from-class="opacity-0"
+            enter-active-class="transition-opacity duration-150 delay-200"
+            leave-active-class="transition-opacity duration-0"
+            leave-to-class="opacity-0"
+          >
+            <SidebarTrigger v-show="!sidebarOpen" />
+          </Transition>
+        </div>
+
+        <!-- View mode toggles (centered) -->
+        <ToggleGroup v-if="isPreviewRoute" v-model="viewMode" type="single" variant="outline" size="sm">
+          <ToggleGroupItem value="preview">
+            <Monitor class="size-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="source">
+            <CodeXml class="size-4" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+        <div v-else />
+
+        <div class="flex items-center justify-end gap-3">
+          <span
+            v-if="isPreviewRoute && (!isFullSize || selectedDevice) && panelWidth"
+            class="text-xs font-medium tabular-nums text-gray-500 dark:text-gray-400 select-none"
+          >
+            {{ panelWidth }} &times; {{ panelHeight }}
+          </span>
+          <DropdownMenu v-if="isPreviewRoute">
+            <DropdownMenuTrigger as-child>
+              <Button variant="outline" size="sm" class="gap-1.5">
+                <Smartphone class="size-4" />
+                <span v-if="selectedDevice" class="text-xs">{{ selectedDevice.name }}</span>
+                <ChevronDown class="size-3 opacity-50" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem @click="selectedDevice = null; viewMode = 'preview'; resetKey++">
+                <Check v-if="!selectedDevice" class="size-3.5" />
+                <span :class="!selectedDevice ? '' : 'pl-5.5'">Responsive</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                v-for="device in devicePresets"
+                :key="device.name"
+                @click="selectDevice(device)"
+              >
+                <Check v-if="selectedDevice?.name === device.name" class="size-3.5" />
+                <span :class="selectedDevice?.name === device.name ? '' : 'pl-5.5'">{{ device.name }}</span>
+                <span class="ml-auto text-xs text-gray-500 dark:text-gray-400 tabular-nums">{{ device.width }}&times;{{ device.height }}</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </header>
+
+      <!-- Main content -->
+      <div class="flex-1 overflow-hidden">
+        <RouterView v-slot="{ Component }">
+          <component :is="Component" v-model:view-mode="viewMode" :device="selectedDevice" :reset-key="resetKey" v-model:panel-width="panelWidth" v-model:panel-height="panelHeight" v-model:is-dragging="isDragging" v-model:is-full-size="isFullSize" @clear-device="selectedDevice = null" />
+        </RouterView>
+      </div>
+    </SidebarInset>
+
+    <CommandDialog v-model:open="commandOpen" title="Search emails" description="Search and navigate to an email">
+      <CommandInput placeholder="Search emails..." />
+      <CommandList>
+        <CommandEmpty>No emails found.</CommandEmpty>
+        <CommandGroup v-for="(items, dir) in commandGrouped" :key="dir" :heading="String(dir)">
+          <CommandItem
+            v-for="t in items"
+            :key="t.path"
+            :value="t.path"
+            @select="onCommandSelect(t.href)"
+          >
+            <svg class="size-3 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+              <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+            </svg>
+            <span>{{ getFileName(t.path) }}</span>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+      <div class="flex items-center gap-4 border-t px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
+        <span class="inline-flex items-center gap-1">
+          <Kbd><ArrowUp class="size-3" /></Kbd>
+          <Kbd><ArrowDown class="size-3" /></Kbd>
+          Navigate
+        </span>
+        <span class="inline-flex items-center gap-1">
+          <Kbd><CornerDownLeft class="size-3" /></Kbd>
+          Open
+        </span>
+        <span class="inline-flex items-center gap-1">
+          <Kbd>Esc</Kbd>
+          Close
+        </span>
+      </div>
+    </CommandDialog>
+  </SidebarProvider>
+</template>

package/dist/server/ui/components/ui/button/Button.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/server/ui/components/ui/button/index.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>