{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "email-template-previewer", "title": "Email Template Previewer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/email-template-previewer/email-template-previewer.component.ts", "content": "// Resend and Klaviyo style marketing email designer preview with viewport switcher, subject\n// line tester, deliverability & spam score analyzer, and live test dispatch modal.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n ArrowRight,\n Check,\n CheckCircle2,\n Code2,\n Copy,\n FileCode,\n Flame,\n Inbox,\n Layers,\n Lock,\n LucideAngularModule,\n Mail,\n Monitor,\n Palette,\n Send,\n ShieldCheck,\n Smartphone,\n Terminal,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type PreviewerViewport = 'desktop' | 'mobile' | 'raw'\nexport type PreviewerClient = 'all' | 'gmail' | 'apple' | 'outlook'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-email-template-previewer, [ui-email-template-previewer]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n

Marketing Email Designer

\n \n \n Resend Engine\n \n
\n

\n Live viewport rendering, deliverability telemetry, and RFC-compliant HTML generator.\n

\n
\n\n
\n \n \n \n Desktop 600px\n \n \n \n Mobile 375px\n \n \n \n Raw HTML\n \n
\n\n \n\n \n
\n
\n
\n\n
\n\n
\n
\n
\n
\n \n
\n \n {{ subjectCharCount() }}/60 chars\n \n \n \n {{ emojiCount() }} emoji\n \n
\n
\n \n
\n\n
\n
\n \n \n {{ preheaderCharCount() }}/90 chars\n \n
\n \n
\n
\n
\n
\n\n \n
\n
\n \n @if (viewport() === 'raw') {\n
\n
\n
\n \n template.compiled.html\n 14.2 KB\n
\n \n
\n {{ rawHtmlOutput() }}\n
\n } @else {\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n UIPKGE Inbox Preview · {{ viewport() === 'desktop' ? '600px' : '375px' }}\n
\n \n \n TLS 1.3\n \n
\n\n
\n
\n
\n \n U\n
\n
\n
\n {{ senderName }}\n <{{ senderEmail }}>\n
\n
To: {{ recipientEmail }}
\n
\n
\n Aug 21, 2026, 10:00 AM\n
\n\n
\n
{{ subject() }}
\n
{{ previewText() }}
\n
\n
\n\n
\n
\n
\n \n \n
\n UIPKGE\n
\n Changelog #24\n
\n\n
\n \n Major Release\n \n

\n Ship polished UIs in minutes\n

\n

\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

\n
\n\n
\n \n
\n \n components/ui/button.tsx\n
\n TypeScript\n
\n
\n \n $ npx shadcn add @uipkge/button\n
\n\n \n \n \n \n \n
\n
\n
\n\n
\n \n

\n Free & open source · MIT License · 300+ Primitives & Blocks\n

\n
\n\n
\n\n
\n
\n \n \n
\n
\n

Zero Dependency Footprint

\n

\n Every component lives directly in your codebase. No semver conflicts or registry lock-in.\n

\n
\n
\n\n
\n \n \n
\n
\n

OKLCH Dark Mode Tokens

\n

\n Calibrated light & dark surfaces with verified WCAG AA contrast and fluid spring physics.\n

\n
\n
\n\n
\n \n \n
\n
\n

Dual-Framework Registry

\n

\n First-class TypeScript support for both Vue 3 (Reka UI) and React (Radix UI).\n

\n
\n \n \n\n
\n\n
\n
\n Documentation\n ·\n GitHub\n ·\n Discord\n ·\n Preferences\n
\n

UIPKGE Inc. · 548 Market St, Suite 29314, San Francisco, CA 94104

\n

\n You received this email because you subscribed to UIPKGE updates.\n Unsubscribe anytime.\n

\n
\n \n \n \n }\n \n \n\n \n
\n
\n
\n
\n

Spam Score Analyzer

\n \n
\n

Predictive inbox delivery rating based on content heuristics.

\n
\n
\n
\n
\n 0.4\n / 10.0 scale\n
\n
\n \n Excellent inbox probability\n
\n
\n
\n
\n
\n\n
\n
\n \n \n Spam trigger words\n \n 0 detected\n
\n
\n \n \n Text-to-image ratio\n \n 92% text (Safe)\n
\n
\n \n \n RFC 8058 Unsubscribe\n \n Included\n
\n
\n \n \n Valid HTTPS links\n \n 6 links checked\n
\n
\n
\n
\n\n
\n
\n

Domain Authentication

\n

Security headers verified against DNS records.

\n
\n
\n
\n SPF Record\n Pass\n
\n
\n DKIM Signature\n Pass (2048-bit)\n
\n
\n DMARC Policy\n Pass (p=reject)\n
\n
\n TLS Handshake\n TLS 1.3 Active\n
\n
\n
\n\n
\n
\n

Contrast & Dark Mode

\n

Client dark mode and WCAG contrast conformance.

\n
\n
\n
\n Dark Mode Contrast\n 100% WCAG AA\n
\n
\n Text Contrast Ratio\n 14.8:1 (AAA)\n
\n
\n Plaintext Fallback\n Auto-generated\n
\n
\n
\n\n
\n
\n

Email Telemetry

\n

Reading metrics and payload optimization.

\n
\n
\n
\n Estimated Reading Time\n 45 sec · 185 words\n
\n
\n Payload Size\n 14.2 KB (102 KB safe)\n
\n
\n Inline Assets\n 1 Vector SVG\n
\n
\n
\n
\n \n\n \n \n \n
\n

\n \n Dispatch Test Preview\n

\n

\n Send a live test message to your inbox to inspect rendering across email clients.\n

\n
\n\n
\n
\n \n \n
\n\n
\n \n
\n \n 🌐 All Clients\n \n \n ✉️ Gmail (Web)\n \n \n 🍏 Apple Mail (iOS)\n \n \n 💼 Outlook 365\n \n
\n
\n\n @if (testSentSuccess()) {\n \n \n Test email dispatched to {{ testTargetEmail() }}!\n
\n }\n \n\n
\n \n Cancel\n \n \n
\n \n \n \n `,\n})\nexport class UiEmailTemplatePreviewerComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Code2 = Code2\n protected readonly Copy = Copy\n protected readonly FileCode = FileCode\n protected readonly Flame = Flame\n protected readonly Inbox = Inbox\n protected readonly Layers = Layers\n protected readonly Lock = Lock\n protected readonly Mail = Mail\n protected readonly Monitor = Monitor\n protected readonly Palette = Palette\n protected readonly Send = Send\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Smartphone = Smartphone\n protected readonly Terminal = Terminal\n protected readonly Zap = Zap\n\n protected readonly senderName = 'UIPKGE Team'\n protected readonly senderEmail = 'updates@uipkge.dev'\n protected readonly recipientEmail = 'subscriber@example.com'\n\n @Input('class') className?: string\n\n readonly viewport = signal('desktop')\n readonly subject = signal('🚀 Introducing UIPKGE 2.0: The unbundled UI registry')\n readonly previewText = signal(\n 'Explore 300+ production components with zero npm dependencies. Native Vue 3 & React code.',\n )\n\n readonly isTestModalOpen = signal(false)\n readonly testTargetEmail = signal('alex.developer@company.com')\n readonly selectedClient = signal('all')\n readonly isSendingTest = signal(false)\n readonly testSentSuccess = signal(false)\n readonly isCopied = signal(false)\n\n private timers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n readonly subjectCharCount = computed(() => this.subject().length)\n readonly preheaderCharCount = computed(() => this.previewText().length)\n\n readonly emojiCount = computed(() => {\n const matches = this.subject().match(/\\p{Extended_Pictographic}/gu)\n return matches ? matches.length : 0\n })\n\n readonly subjectStatus = computed(() => {\n const count = this.subjectCharCount()\n if (count >= 30 && count <= 60) return { label: 'Optimal length', variant: 'success' as const }\n if (count < 30) return { label: 'Short subject', variant: 'info' as const }\n return { label: 'Long subject (may truncate)', variant: 'warning' as const }\n })\n\n readonly rawHtmlOutput = computed(() => {\n const subject = this.subject().replace(/\"/g, '"')\n const preview = this.previewText().replace(/\"/g, '"')\n return `\n\n\n \n \n \n ${subject}\n \n \n\n\n \n
\n ${preview}\n
\n\n \n \n \n \n
\n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n
\n \n \n \n \n \n
\n ⚡ UIPKGE\n \n Changelog #24\n
\n
\n \n Major Release\n \n

\n Ship polished UIs in minutes\n

\n

\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

\n
\n \n \n \n \n \n \n \n
\n Terminal • Quick Install\n
\n npx shadcn-vue add @uipkge/button\n
\n
\n \n \n \n \n
\n \n Explore Components →\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n
\n ⚡ Zero Dependency Footprint:\n Components live directly in your code.\n
\n 🎨 OKLCH Dark Mode Tokens:\n Fluid WCAG AA contrast calibrated for all themes.\n
\n 🧩 Dual-Framework Registry:\n Full TypeScript parity for Vue 3 and React.\n
\n
\n

\n UIPKGE Inc. • 548 Market St, Suite 29314, San Francisco, CA 94104\n

\n

\n Docs •\n GitHub •\n Unsubscribe\n

\n
\n
\n\n`\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n get previewCanvasClass(): string {\n return cn(\n 'w-full transition-[max-width] duration-300 ease-in-out',\n this.viewport() === 'desktop' ? 'max-w-[600px]' : 'max-w-[375px]',\n )\n }\n\n async copyHtmlToClipboard(): Promise {\n try {\n await navigator.clipboard.writeText(this.rawHtmlOutput())\n this.isCopied.set(true)\n this.timers.push(\n setTimeout(() => {\n this.isCopied.set(false)\n }, 2000),\n )\n } catch {\n // Clipboard unavailable (jsdom): leave the button state untouched.\n }\n }\n\n handleSendTest(): void {\n if (!this.testTargetEmail()) return\n this.isSendingTest.set(true)\n this.testSentSuccess.set(false)\n this.timers.push(\n setTimeout(() => {\n this.isSendingTest.set(false)\n this.testSentSuccess.set(true)\n this.timers.push(\n setTimeout(() => {\n this.testSentSuccess.set(false)\n this.isTestModalOpen.set(false)\n }, 2000),\n )\n }, 700),\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/email-template-previewer/email-template-previewer.component.ts" }, { "path": "packages/registry-angular/blocks/email-template-previewer/index.ts", "content": "export {\n UiEmailTemplatePreviewerComponent,\n type PreviewerClient,\n type PreviewerViewport,\n} from './email-template-previewer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/email-template-previewer/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/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" ] }