{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "email-template-previewer",
  "title": "Email Template Previewer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/email-template-previewer/EmailTemplatePreviewer.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport {\n  ArrowRight,\n  Check,\n  CheckCircle2,\n  Code2,\n  Copy,\n  FileCode,\n  Flame,\n  Inbox,\n  Layers,\n  Lock,\n  Mail,\n  Monitor,\n  Palette,\n  Send,\n  ShieldCheck,\n  Smartphone,\n  Terminal,\n  Zap,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  className?: string\n}\n\nconst props = defineProps<Props>()\n\ntype ViewportMode = 'desktop' | 'mobile' | 'raw'\nconst viewport = ref<ViewportMode>('desktop')\n\nconst subject = ref('🚀 Introducing UIPKGE 2.0: The unbundled UI registry')\nconst previewText = ref('Explore 300+ production components with zero npm dependencies. Native Vue 3 & React code.')\nconst senderName = ref('UIPKGE Team')\nconst senderEmail = ref('updates@uipkge.dev')\nconst recipientEmail = ref('subscriber@example.com')\n\n// Test email modal state\nconst isTestModalOpen = ref(false)\nconst testTargetEmail = ref('alex.developer@company.com')\nconst selectedClient = ref<'all' | 'gmail' | 'apple' | 'outlook'>('all')\nconst isSendingTest = ref(false)\nconst testSentSuccess = ref(false)\n\n// Export copy feedback\nconst isCopied = ref(false)\n\nconst subjectCharCount = computed(() => subject.value.length)\nconst preheaderCharCount = computed(() => previewText.value.length)\n\nconst emojiCount = computed(() => {\n  const matches = subject.value.match(/\\p{Extended_Pictographic}/gu)\n  return matches ? matches.length : 0\n})\n\nconst subjectStatus = computed(() => {\n  const len = subjectCharCount.value\n  if (len >= 30 && len <= 60) return { label: 'Optimal length', variant: 'success' as const }\n  if (len < 30) return { label: 'Short subject', variant: 'info' as const }\n  return { label: 'Long subject (may truncate)', variant: 'warning' as const }\n})\n\nconst rawHtmlOutput = computed(() => {\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <title>${subject.value.replace(/\"/g, '&quot;')}</title>\n  <!--[if mso]>\n  <noscript>\n    <xml>\n      <o:OfficeDocumentSettings>\n        <o:PixelsPerInch>96</o:PixelsPerInch>\n      </o:OfficeDocumentSettings>\n    </xml>\n  </noscript>\n  <![endif]-->\n  <style>\n    body { margin:0; padding:0; background-color:#09090b; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:#fafafa; }\n    table { border-collapse:collapse; }\n    .email-container { max-width:600px; margin:0 auto; background-color:#18181b; border:1px solid #27272a; border-radius:12px; overflow:hidden; }\n    .cta-btn { display:inline-block; background-color:#ffffff; color:#09090b; font-weight:600; padding:12px 28px; border-radius:8px; text-decoration:none; }\n  </style>\n</head>\n<body style=\"margin:0; padding:0; background-color:#09090b; color:#fafafa;\">\n  <!-- Preheader text snippet -->\n  <div style=\"display:none; max-height:0px; overflow:hidden; font-size:1px; line-height:1px; color:#fff; opacity:0;\">\n    ${previewText.value.replace(/\"/g, '&quot;')}\n  </div>\n\n  <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"background-color:#09090b;\">\n    <tr>\n      <td align=\"center\" style=\"padding:40px 16px;\">\n        <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"max-width:600px; background-color:#18181b; border:1px solid #27272a; border-radius:12px; overflow:hidden;\">\n          <!-- Header Logo Banner -->\n          <tr>\n            <td style=\"padding:24px 32px; border-bottom:1px solid #27272a;\">\n              <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n                <tr>\n                  <td align=\"left\" style=\"font-weight:700; font-size:18px; color:#ffffff; letter-spacing:-0.02em;\">\n                    ⚡ UIPKGE\n                  </td>\n                  <td align=\"right\" style=\"font-size:12px; color:#a1a1aa;\">\n                    Changelog #24\n                  </td>\n                </tr>\n              </table>\n            </td>\n          </tr>\n\n          <!-- Hero Section -->\n          <tr>\n            <td style=\"padding:36px 32px 20px 32px;\">\n              <span style=\"display:inline-block; padding:4px 10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; background-color:rgba(255,255,255,0.08); color:#a1a1aa; border-radius:9999px; margin-bottom:16px;\">\n                Major Release\n              </span>\n              <h1 style=\"margin:0 0 16px 0; font-size:26px; font-weight:700; line-height:1.25; color:#ffffff; letter-spacing:-0.03em;\">\n                Ship polished UIs in minutes\n              </h1>\n              <p style=\"margin:0 0 24px 0; font-size:15px; line-height:1.6; color:#a1a1aa;\">\n                We completely rebuilt the registry engine. Zero npm dependencies, 100% code ownership, and full native support for Vue 3 and React with modern OKLCH tokens.\n              </p>\n            </td>\n          </tr>\n\n          <!-- Code Snippet Card -->\n          <tr>\n            <td style=\"padding:0 32px 24px 32px;\">\n              <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"background-color:#09090b; border:1px solid #27272a; border-radius:8px;\">\n                <tr>\n                  <td style=\"padding:10px 16px; border-bottom:1px solid #27272a; font-family:monospace; font-size:11px; color:#71717a;\">\n                    Terminal &bull; Quick Install\n                  </td>\n                </tr>\n                <tr>\n                  <td style=\"padding:14px 16px; font-family:monospace; font-size:13px; color:#38bdf8;\">\n                    npx shadcn-vue add @uipkge/button\n                  </td>\n                </tr>\n              </table>\n            </td>\n          </tr>\n\n          <!-- Primary CTA Button -->\n          <tr>\n            <td align=\"center\" style=\"padding:12px 32px 32px 32px;\">\n              <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n                <tr>\n                  <td align=\"center\" style=\"border-radius:8px; background-color:#ffffff;\">\n                    <a href=\"https://uipkge.dev\" target=\"_blank\" style=\"font-size:14px; font-weight:600; color:#09090b; text-decoration:none; padding:12px 32px; display:inline-block; border-radius:8px;\">\n                      Explore Components &rarr;\n                    </a>\n                  </td>\n                </tr>\n              </table>\n            </td>\n          </tr>\n\n          <!-- Highlights List -->\n          <tr>\n            <td style=\"padding:24px 32px; border-top:1px solid #27272a; background-color:rgba(255,255,255,0.02);\">\n              <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n                <tr>\n                  <td style=\"padding:8px 0;\">\n                    <strong style=\"color:#ffffff; font-size:14px;\">⚡ Zero Dependency Footprint:</strong>\n                    <span style=\"color:#a1a1aa; font-size:14px;\"> Components live directly in your code.</span>\n                  </td>\n                </tr>\n                <tr>\n                  <td style=\"padding:8px 0;\">\n                    <strong style=\"color:#ffffff; font-size:14px;\">🎨 OKLCH Dark Mode Tokens:</strong>\n                    <span style=\"color:#a1a1aa; font-size:14px;\"> Fluid WCAG AA contrast calibrated for all themes.</span>\n                  </td>\n                </tr>\n                <tr>\n                  <td style=\"padding:8px 0;\">\n                    <strong style=\"color:#ffffff; font-size:14px;\">🧩 Dual-Framework Registry:</strong>\n                    <span style=\"color:#a1a1aa; font-size:14px;\"> Full TypeScript parity for Vue 3 and React.</span>\n                  </td>\n                </tr>\n              </table>\n            </td>\n          </tr>\n\n          <!-- Footer -->\n          <tr>\n            <td style=\"padding:28px 32px; border-top:1px solid #27272a; text-align:center;\">\n              <p style=\"margin:0 0 10px 0; font-size:12px; color:#71717a;\">\n                UIPKGE Inc. &bull; 548 Market St, Suite 29314, San Francisco, CA 94104\n              </p>\n              <p style=\"margin:0; font-size:12px; color:#71717a;\">\n                <a href=\"https://uipkge.dev\" style=\"color:#a1a1aa; text-decoration:underline;\">Docs</a> &bull;\n                <a href=\"https://github.com/uipkge\" style=\"color:#a1a1aa; text-decoration:underline;\">GitHub</a> &bull;\n                <a href=\"#unsubscribe\" style=\"color:#a1a1aa; text-decoration:underline;\">Unsubscribe</a>\n              </p>\n            </td>\n          </tr>\n        </table>\n      </td>\n    </tr>\n  </table>\n</body>\n</html>`\n})\n\nasync function copyHtmlToClipboard() {\n  try {\n    await navigator.clipboard.writeText(rawHtmlOutput.value)\n    isCopied.value = true\n    setTimeout(() => {\n      isCopied.value = false\n    }, 2000)\n  } catch (err) {\n    console.error('Failed to copy HTML: ', err)\n  }\n}\n\nfunction handleSendTest() {\n  if (!testTargetEmail.value) return\n  isSendingTest.value = true\n  testSentSuccess.value = false\n\n  setTimeout(() => {\n    isSendingTest.value = false\n    testSentSuccess.value = true\n    setTimeout(() => {\n      testSentSuccess.value = false\n      isTestModalOpen.value = false\n    }, 2000)\n  }, 700)\n}\n</script>\n\n<template>\n  <div data-slot=\"email-template-previewer\" :class=\"cn('w-full space-y-6', props.className)\">\n    <!-- Top Toolbar Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <CardTitle class=\"text-lg font-semibold tracking-tight\">Marketing Email Designer</CardTitle>\n              <Badge variant=\"outline\" class=\"text-muted-foreground gap-1 border-dashed\">\n                <Send class=\"text-primary size-3\" />\n                Resend Engine\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Live viewport rendering, deliverability telemetry, and RFC-compliant HTML generator.\n            </CardDescription>\n          </div>\n\n          <!-- Viewport Switcher & Primary Actions -->\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <!-- Viewport Switcher -->\n            <div\n              class=\"bg-muted/80 border-border inline-flex max-w-full items-center overflow-x-auto rounded-lg border p-1 shadow-xs\"\n            >\n              <Button\n                type=\"button\"\n                size=\"xs\"\n                :variant=\"viewport === 'desktop' ? 'default' : 'ghost'\"\n                class=\"gap-1.5 text-xs font-medium\"\n                @click=\"viewport = 'desktop'\"\n              >\n                <Monitor class=\"size-3.5\" />\n                <span>Desktop 600px</span>\n              </Button>\n              <Button\n                type=\"button\"\n                size=\"xs\"\n                :variant=\"viewport === 'mobile' ? 'default' : 'ghost'\"\n                class=\"gap-1.5 text-xs font-medium\"\n                @click=\"viewport = 'mobile'\"\n              >\n                <Smartphone class=\"size-3.5\" />\n                <span>Mobile 375px</span>\n              </Button>\n              <Button\n                type=\"button\"\n                size=\"xs\"\n                :variant=\"viewport === 'raw' ? 'default' : 'ghost'\"\n                class=\"gap-1.5 text-xs font-medium\"\n                @click=\"viewport = 'raw'\"\n              >\n                <Code2 class=\"size-3.5\" />\n                <span>Raw HTML</span>\n              </Button>\n            </div>\n\n            <!-- Send Test Dialog Modal -->\n            <Dialog v-model:open=\"isTestModalOpen\">\n              <DialogTrigger as-child>\n                <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\">\n                  <Send class=\"text-primary size-3.5\" />\n                  <span>Send Test Email</span>\n                </Button>\n              </DialogTrigger>\n              <DialogContent class=\"sm:max-w-md\">\n                <DialogHeader>\n                  <DialogTitle class=\"flex items-center gap-2 text-base\">\n                    <Mail class=\"text-primary size-4\" />\n                    Dispatch Test Preview\n                  </DialogTitle>\n                  <DialogDescription class=\"text-xs\">\n                    Send a live test message to your inbox to inspect rendering across email clients.\n                  </DialogDescription>\n                </DialogHeader>\n\n                <div class=\"space-y-4 py-2\">\n                  <div class=\"space-y-1.5\">\n                    <label class=\"text-muted-foreground text-xs font-medium\">Recipient Address</label>\n                    <Input\n                      v-model=\"testTargetEmail\"\n                      type=\"email\"\n                      placeholder=\"you@company.com\"\n                      class=\"text-xs\"\n                      :disabled=\"isSendingTest\"\n                    />\n                  </div>\n\n                  <div class=\"space-y-1.5\">\n                    <label class=\"text-muted-foreground text-xs font-medium\">Target Preview Profile</label>\n                    <div class=\"grid grid-cols-2 gap-2\">\n                      <Button\n                        type=\"button\"\n                        size=\"xs\"\n                        :variant=\"selectedClient === 'all' ? 'default' : 'outline'\"\n                        class=\"justify-start text-xs\"\n                        @click=\"selectedClient = 'all'\"\n                      >\n                        🌐 All Clients\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"xs\"\n                        :variant=\"selectedClient === 'gmail' ? 'default' : 'outline'\"\n                        class=\"justify-start text-xs\"\n                        @click=\"selectedClient = 'gmail'\"\n                      >\n                        ✉️ Gmail (Web)\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"xs\"\n                        :variant=\"selectedClient === 'apple' ? 'default' : 'outline'\"\n                        class=\"justify-start text-xs\"\n                        @click=\"selectedClient = 'apple'\"\n                      >\n                        🍏 Apple Mail (iOS)\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"xs\"\n                        :variant=\"selectedClient === 'outlook' ? 'default' : 'outline'\"\n                        class=\"justify-start text-xs\"\n                        @click=\"selectedClient = 'outlook'\"\n                      >\n                        💼 Outlook 365\n                      </Button>\n                    </div>\n                  </div>\n\n                  <div\n                    v-if=\"testSentSuccess\"\n                    class=\"border-success/30 bg-success/10 text-success flex items-center gap-2 rounded-md border p-2.5 text-xs font-medium\"\n                  >\n                    <CheckCircle2 class=\"size-4 shrink-0\" />\n                    <span>Test email dispatched to {{ testTargetEmail }}!</span>\n                  </div>\n                </div>\n\n                <DialogFooter class=\"gap-2 sm:gap-0\">\n                  <Button variant=\"outline\" size=\"sm\" :disabled=\"isSendingTest\" @click=\"isTestModalOpen = false\">\n                    Cancel\n                  </Button>\n                  <Button size=\"sm\" class=\"gap-1.5\" :disabled=\"isSendingTest\" @click=\"handleSendTest\">\n                    <Send class=\"size-3.5\" />\n                    <span>{{ isSendingTest ? 'Sending...' : 'Send Test' }}</span>\n                  </Button>\n                </DialogFooter>\n              </DialogContent>\n            </Dialog>\n\n            <!-- Export HTML Button -->\n            <Button variant=\"default\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"copyHtmlToClipboard\">\n              <Check v-if=\"isCopied\" class=\"text-success size-3.5\" />\n              <Copy v-else class=\"size-3.5\" />\n              <span>{{ isCopied ? 'Copied HTML!' : 'Export HTML' }}</span>\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <Separator />\n\n      <!-- Subject & Preheader Inputs with Character & Emoji Analyzers -->\n      <CardContent class=\"pt-4\">\n        <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n          <!-- Subject Line Section -->\n          <div class=\"space-y-1.5\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <label class=\"text-foreground font-medium\">Subject Line</label>\n              <div class=\"flex items-center gap-1.5\">\n                <Badge :variant=\"subjectStatus.variant\" class=\"h-5 px-1.5 text-xs font-normal\">\n                  {{ subjectCharCount }}/60 chars\n                </Badge>\n                <Badge variant=\"outline\" class=\"text-muted-foreground h-5 gap-1 px-1.5 text-xs font-normal\">\n                  <Flame class=\"text-warning size-3\" />\n                  <span>{{ emojiCount }} emoji</span>\n                </Badge>\n              </div>\n            </div>\n            <Input v-model=\"subject\" class=\"text-xs\" placeholder=\"Enter campaign subject line...\" />\n          </div>\n\n          <!-- Preheader Section -->\n          <div class=\"space-y-1.5\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <label class=\"text-foreground font-medium\">Preview Text / Preheader</label>\n              <Badge variant=\"secondary\" class=\"text-muted-foreground h-5 px-1.5 text-xs font-normal\">\n                {{ preheaderCharCount }}/90 chars\n              </Badge>\n            </div>\n            <Input v-model=\"previewText\" class=\"text-xs\" placeholder=\"Secondary snippet shown in mail list...\" />\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 2-Column Preview Workspace -->\n    <div class=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Email Canvas Container -->\n      <div class=\"flex flex-col items-center lg:col-span-8\">\n        <div\n          class=\"border-border bg-muted/30 relative flex min-h-[720px] w-full flex-col items-center justify-start overflow-hidden rounded-xl border p-4 sm:p-6\"\n        >\n          <!-- RAW HTML VIEW -->\n          <div v-if=\"viewport === 'raw'\" class=\"w-full space-y-3\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <FileCode class=\"text-muted-foreground size-4\" />\n                <span class=\"text-foreground font-mono text-xs font-semibold\">template.compiled.html</span>\n                <Badge variant=\"secondary\" class=\"h-4.5 text-xs\">14.2 KB</Badge>\n              </div>\n              <Button variant=\"outline\" size=\"xs\" class=\"gap-1 text-xs\" @click=\"copyHtmlToClipboard\">\n                <Check v-if=\"isCopied\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ isCopied ? 'Copied' : 'Copy Source' }}</span>\n              </Button>\n            </div>\n            <pre\n              class=\"border-border bg-muted/70 text-foreground max-h-[640px] overflow-auto rounded-lg border p-4 font-mono text-xs leading-relaxed\"\n            ><code>{{ rawHtmlOutput }}</code></pre>\n          </div>\n\n          <!-- DESKTOP / MOBILE EMAIL PREVIEW CANVAS -->\n          <div\n            v-else\n            :class=\"\n              cn(\n                'w-full transition-[max-width] duration-300 ease-in-out',\n                viewport === 'desktop' ? 'max-w-[600px]' : 'max-w-[375px]',\n              )\n            \"\n          >\n            <!-- Email Window Envelope Frame -->\n            <div class=\"border-border bg-card overflow-hidden rounded-xl border shadow-sm\">\n              <!-- Window Chrome Bar -->\n              <div class=\"border-border bg-muted/50 flex items-center justify-between border-b px-4 py-2.5\">\n                <div class=\"flex items-center gap-1.5\">\n                  <div class=\"bg-destructive/80 size-2.5 rounded-full\" />\n                  <div class=\"bg-warning/80 size-2.5 rounded-full\" />\n                  <div class=\"bg-success/80 size-2.5 rounded-full\" />\n                </div>\n                <div class=\"text-muted-foreground flex items-center gap-1.5 font-mono text-xs\">\n                  <Inbox class=\"size-3\" />\n                  <span>UIPKGE Inbox Preview · {{ viewport === 'desktop' ? '600px' : '375px' }}</span>\n                </div>\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-border text-muted-foreground h-4.5 gap-1 px-1.5 text-xs font-normal\"\n                >\n                  <Lock class=\"text-success size-2.5\" />\n                  TLS 1.3\n                </Badge>\n              </div>\n\n              <!-- Envelope Metadata Readout -->\n              <div class=\"border-border bg-card/60 space-y-2 border-b p-4 text-xs\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      class=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-full font-bold\"\n                    >\n                      U\n                    </div>\n                    <div>\n                      <div class=\"flex items-center gap-1.5\">\n                        <span class=\"text-foreground font-semibold\">{{ senderName }}</span>\n                        <span class=\"text-muted-foreground\">&lt;{{ senderEmail }}&gt;</span>\n                      </div>\n                      <div class=\"text-muted-foreground text-xs\">To: {{ recipientEmail }}</div>\n                    </div>\n                  </div>\n                  <span class=\"text-muted-foreground text-xs\">Aug 21, 2026, 10:00 AM</span>\n                </div>\n\n                <div class=\"pt-1\">\n                  <div class=\"text-foreground text-sm font-semibold tracking-tight\">{{ subject }}</div>\n                  <div class=\"text-muted-foreground line-clamp-1 text-xs\">{{ previewText }}</div>\n                </div>\n              </div>\n\n              <!-- Rendered Email Body -->\n              <div class=\"bg-card space-y-6 p-6 sm:p-8\">\n                <!-- Header Logo Banner -->\n                <div class=\"border-border flex items-center justify-between border-b pb-4\">\n                  <div class=\"flex items-center gap-2\">\n                    <div class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n                      <Zap class=\"size-3.5 fill-current\" />\n                    </div>\n                    <span class=\"text-foreground text-sm font-bold tracking-tight\">UIPKGE</span>\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">Changelog #24</Badge>\n                </div>\n\n                <!-- Hero Section -->\n                <div class=\"space-y-3\">\n                  <Badge\n                    variant=\"outline\"\n                    class=\"text-primary border-primary/30 text-xs font-semibold tracking-wider uppercase\"\n                  >\n                    Major Release\n                  </Badge>\n                  <h1 class=\"text-foreground text-2xl leading-tight font-bold tracking-tight sm:text-3xl\">\n                    Ship polished UIs in minutes\n                  </h1>\n                  <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                    We completely rebuilt the registry engine. Zero npm dependencies, 100% code ownership, and full\n                    native support for Vue 3 and React with modern OKLCH tokens.\n                  </p>\n                </div>\n\n                <!-- Featured Screenshot / Product Mock Card -->\n                <div class=\"border-border bg-muted/40 overflow-hidden rounded-lg border\">\n                  <div class=\"border-border bg-muted/60 flex items-center justify-between gap-2 border-b px-3.5 py-2\">\n                    <div class=\"text-muted-foreground flex min-w-0 items-center gap-1.5 font-mono text-xs\">\n                      <Terminal class=\"text-primary size-3 shrink-0\" />\n                      <span class=\"truncate\">components/ui/button.vue</span>\n                    </div>\n                    <span class=\"text-success shrink-0 font-mono text-xs font-medium\">TypeScript</span>\n                  </div>\n                  <div class=\"space-y-3 p-4\">\n                    <div\n                      class=\"border-border bg-background text-muted-foreground rounded-md border p-2.5 font-mono text-xs\"\n                    >\n                      <span class=\"text-primary font-semibold\">$</span> npx shadcn-vue add @uipkge/button\n                    </div>\n\n                    <!-- Mini UI Preview inside email -->\n                    <div\n                      class=\"bg-card border-border flex flex-wrap items-center justify-center gap-2 rounded-md border p-3\"\n                    >\n                      <Button size=\"xs\" variant=\"default\">Primary</Button>\n                      <Button size=\"xs\" variant=\"secondary\">Secondary</Button>\n                      <Button size=\"xs\" variant=\"outline\">Outline</Button>\n                      <Button size=\"xs\" variant=\"destructive\">Delete</Button>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Primary CTA Button -->\n                <div class=\"flex flex-col items-center justify-center space-y-2 pt-2 text-center\">\n                  <Button size=\"lg\" class=\"w-full px-8 font-semibold shadow-xs sm:w-auto\">\n                    <span>Explore Components</span>\n                    <ArrowRight class=\"size-4\" />\n                  </Button>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Free & open source · MIT License · 300+ Primitives & Blocks\n                  </p>\n                </div>\n\n                <Separator />\n\n                <!-- 3 Highlight Bullet Points with Icons -->\n                <div class=\"space-y-3.5\">\n                  <div class=\"flex items-start gap-3\">\n                    <div\n                      class=\"bg-primary/10 text-primary mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full\"\n                    >\n                      <Zap class=\"size-3.5\" />\n                    </div>\n                    <div class=\"space-y-0.5\">\n                      <h4 class=\"text-foreground text-xs font-semibold\">Zero Dependency Footprint</h4>\n                      <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                        Every component lives directly in your codebase. No semver conflicts or registry lock-in.\n                      </p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-start gap-3\">\n                    <div\n                      class=\"bg-primary/10 text-primary mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full\"\n                    >\n                      <Palette class=\"size-3.5\" />\n                    </div>\n                    <div class=\"space-y-0.5\">\n                      <h4 class=\"text-foreground text-xs font-semibold\">OKLCH Dark Mode Tokens</h4>\n                      <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                        Calibrated light & dark surfaces with verified WCAG AA contrast and fluid spring physics.\n                      </p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-start gap-3\">\n                    <div\n                      class=\"bg-primary/10 text-primary mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full\"\n                    >\n                      <Layers class=\"size-3.5\" />\n                    </div>\n                    <div class=\"space-y-0.5\">\n                      <h4 class=\"text-foreground text-xs font-semibold\">Dual-Framework Registry</h4>\n                      <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                        First-class TypeScript support for both Vue 3 (Reka UI) and React (Radix UI).\n                      </p>\n                    </div>\n                  </div>\n                </div>\n\n                <Separator />\n\n                <!-- Email Footer -->\n                <div class=\"text-muted-foreground space-y-3 pt-2 text-center text-xs\">\n                  <div class=\"flex flex-wrap items-center justify-center gap-3 font-medium\">\n                    <span class=\"hover:text-foreground cursor-pointer transition-colors\">Documentation</span>\n                    <span>·</span>\n                    <span class=\"hover:text-foreground cursor-pointer transition-colors\">GitHub</span>\n                    <span>·</span>\n                    <span class=\"hover:text-foreground cursor-pointer transition-colors\">Discord</span>\n                    <span>·</span>\n                    <span class=\"hover:text-foreground cursor-pointer transition-colors\">Preferences</span>\n                  </div>\n                  <p class=\"text-xs\">UIPKGE Inc. · 548 Market St, Suite 29314, San Francisco, CA 94104</p>\n                  <p class=\"text-xs\">\n                    You received this email because you subscribed to UIPKGE updates.\n                    <span class=\"hover:text-foreground cursor-pointer underline\">Unsubscribe anytime</span>.\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column: Quality & Deliverability Inspector (w-72 / col-span-4) -->\n      <div class=\"space-y-4 lg:col-span-4\">\n        <!-- Card 1: Spam Score Analyzer -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"text-sm font-semibold tracking-tight\">Spam Score Analyzer</CardTitle>\n              <ShieldCheck class=\"text-success size-4\" />\n            </div>\n            <CardDescription class=\"text-xs\"\n              >Predictive inbox delivery rating based on content heuristics.</CardDescription\n            >\n          </CardHeader>\n          <CardContent class=\"space-y-3.5\">\n            <!-- Score Meter Display -->\n            <div class=\"border-success/20 bg-success/10 rounded-lg border p-3\">\n              <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <span class=\"text-success text-2xl font-bold tracking-tight\">0.4</span>\n                <span class=\"text-muted-foreground text-xs font-medium\">/ 10.0 scale</span>\n              </div>\n              <div class=\"text-success mt-1.5 flex items-center gap-1.5 text-xs font-medium\">\n                <CheckCircle2 class=\"size-3.5\" />\n                <span>Excellent inbox probability</span>\n              </div>\n              <!-- Gauge Meter Bar -->\n              <div class=\"bg-muted mt-2.5 h-1.5 w-full overflow-hidden rounded-full\">\n                <div class=\"bg-success h-full w-[96%] rounded-full\" />\n              </div>\n            </div>\n\n            <!-- Checklist checks -->\n            <div class=\"space-y-2 text-xs\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  Spam trigger words\n                </span>\n                <span class=\"text-foreground font-medium\">0 detected</span>\n              </div>\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  Text-to-image ratio\n                </span>\n                <span class=\"text-foreground font-medium\">92% text (Safe)</span>\n              </div>\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  RFC 8058 Unsubscribe\n                </span>\n                <span class=\"text-foreground font-medium\">Included</span>\n              </div>\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  Valid HTTPS links\n                </span>\n                <span class=\"text-foreground font-medium\">6 links checked</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Card 2: Domain Authentication Badges -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <CardTitle class=\"text-sm font-semibold tracking-tight\">Domain Authentication</CardTitle>\n            <CardDescription class=\"text-xs\">Security headers verified against DNS records.</CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-2.5\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">SPF Record</span>\n              <Badge variant=\"success\" class=\"h-5 px-2 text-xs\">Pass</Badge>\n            </div>\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">DKIM Signature</span>\n              <Badge variant=\"success\" class=\"h-5 px-2 text-xs\">Pass (2048-bit)</Badge>\n            </div>\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">DMARC Policy</span>\n              <Badge variant=\"success\" class=\"h-5 px-2 text-xs\">Pass (p=reject)</Badge>\n            </div>\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">TLS Handshake</span>\n              <Badge variant=\"outline\" class=\"text-foreground h-5 px-2 text-xs\">TLS 1.3 Active</Badge>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Card 3: Dark Mode & Accessibility -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <CardTitle class=\"text-sm font-semibold tracking-tight\">Contrast & Dark Mode</CardTitle>\n            <CardDescription class=\"text-xs\">Client dark mode and WCAG contrast conformance.</CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-2.5 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Dark Mode Contrast</span>\n              <Badge variant=\"success\" class=\"h-5 px-2 text-xs\">100% WCAG AA</Badge>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Text Contrast Ratio</span>\n              <span class=\"text-foreground font-semibold\">14.8:1 (AAA)</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Plaintext Fallback</span>\n              <span class=\"text-foreground font-medium\">Auto-generated</span>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Card 4: Email Telemetry -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <CardTitle class=\"text-sm font-semibold tracking-tight\">Email Telemetry</CardTitle>\n            <CardDescription class=\"text-xs\">Reading metrics and payload optimization.</CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-2.5 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Estimated Reading Time</span>\n              <span class=\"text-foreground font-medium\">45 sec · 185 words</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Payload Size</span>\n              <span class=\"text-foreground font-medium\">14.2 KB (102 KB safe)</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Inline Assets</span>\n              <span class=\"text-foreground font-medium\">1 Vector SVG</span>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/EmailTemplatePreviewer.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/dialog.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Resend and Klaviyo style marketing email designer preview with viewport switcher, subject line tester, deliverability & spam score analyzer, and live test dispatch modal.",
  "categories": [
    "marketing",
    "preview",
    "app"
  ]
}