{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "email-campaign-composer", "title": "Email Campaign Composer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/email-campaign-composer/email-campaign-composer.component.ts", "content": "// High-craft marketing email broadcast designer, audience segment selector, AI subject line\n// optimizer, A/B testing split, live multi-device newsletter preview, and deliverability\n// scorecard. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n ArrowRight,\n Calendar,\n Check,\n CheckCircle2,\n Eye,\n Flame,\n Inbox,\n Lock,\n LucideAngularModule,\n Mail,\n Monitor,\n Send,\n ShieldCheck,\n Smartphone,\n Sparkles,\n Split,\n Terminal,\n UserCheck,\n Users,\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 {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\n\nexport type CampaignViewport = 'desktop' | 'mobile'\nexport type CampaignClient = 'all' | 'gmail' | 'apple' | 'outlook'\nexport type ScheduleTiming = 'optimal' | 'immediate'\n\ninterface AudienceSegment {\n id: string\n label: string\n count: number\n formattedCount: string\n openRate: string\n clickRate: string\n deliverability: string\n}\n\nconst AUDIENCE_OPTIONS: AudienceSegment[] = [\n {\n id: 'active-devs',\n label: 'All Active Developers (42,500 subscribers)',\n count: 42500,\n formattedCount: '42.5k',\n openRate: '38.4%',\n clickRate: '12.2%',\n deliverability: '99.9%',\n },\n {\n id: 'tech-leads',\n label: 'Enterprise Tech Leads (8,200 subscribers)',\n count: 8200,\n formattedCount: '8.2k',\n openRate: '46.1%',\n clickRate: '18.5%',\n deliverability: '99.8%',\n },\n {\n id: 'free-users',\n label: 'Free Plan Users (28,000 subscribers)',\n count: 28000,\n formattedCount: '28.0k',\n openRate: '31.2%',\n clickRate: '8.9%',\n deliverability: '99.7%',\n },\n]\n\nconst AI_SUGGESTIONS = [\n { text: '🚀 Introducing UIPKGE 2.0: The unbundled UI registry', score: 94, tag: 'High Open Rate Impact' },\n { text: 'Ship polished UIs 10x faster with UIPKGE 2.0 ⚡', score: 92, tag: 'Strong Action Verb' },\n { text: 'Zero npm dependencies: How UIPKGE 2.0 changes frontend dev', score: 89, tag: 'Curiosity Spike' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-email-campaign-composer, [ui-email-campaign-composer]',\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 UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n

{{ campaignName }}

\n \n \n Draft Saved · {{ currentAudience().formattedCount }} Recipients\n \n
\n

\n Configure campaign targeting, optimize open rates with AI scoring, and preview live multi-device inbox\n rendering.\n

\n
\n\n
\n \n \n Send Test Proof\n \n\n \n \n Schedule Broadcast\n \n
\n
\n
\n
\n\n \n
\n \n
\n
\n
\n
\n
\n
\n \n
\n

Audience Segment

\n
\n \n \n Verified List\n \n
\n

\n Select subscriber segment to calculate deliverability pacing and personalization tags.\n

\n
\n
\n
\n \n \n span]:truncate [&>svg]:shrink-0\"\n aria-label=\"Select Audience Segment\"\n >\n \n \n \n @for (aud of audienceOptions; track aud.id) {\n \n {{ aud.label }}\n \n }\n \n \n
\n\n
\n
\n
Recipients
\n
\n {{ currentAudience().formattedCount }}\n
\n
\n
\n
Avg Open Rate
\n
\n {{ currentAudience().openRate }}\n
\n
\n
\n
Avg CTR
\n
\n {{ currentAudience().clickRate }}\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n
\n

Subject Line & AI Scorer

\n
\n \n \n 94 / 100 · High Open Rate Impact\n \n
\n

\n AI predictive heuristic analyzing urgency, sentiment, character count, and spam filter risk.\n

\n
\n\n
\n
\n
\n
\n \n A/B Subject Variant Testing\n
\n

Test 2 subject lines with 50/50 subscriber split

\n
\n \n
\n\n
\n
\n \n
\n {{ subjectA().length }}/60 chars\n \n \n {{ emojiCount() }} emoji\n \n
\n
\n \n
\n\n @if (isAbTestEnabled()) {\n
\n
\n \n {{ subjectB().length }}/60 chars\n
\n \n
\n \n Preview Variant A\n \n \n Preview Variant B\n \n
\n
\n }\n\n
\n
\n \n \n Sentiment Tone\n \n Positive (98%)\n
\n
\n \n \n Urgency & Relevance\n \n High (91%)\n
\n
\n \n \n Spam Keyword Risk\n \n Very Low (0.1%)\n
\n
\n\n
\n \n \n AI Optimization Suggestions (Click to apply):\n \n
\n @for (suggestion of aiSuggestions; track suggestion.text) {\n \n {{ suggestion.text }}\n \n {{ suggestion.score }}/100\n \n \n }\n
\n
\n\n
\n\n
\n
\n \n {{ previewText().length }}/90 chars\n
\n \n
\n\n
\n\n
\n \n
\n
\n Sender Display Name\n \n
\n
\n From Address\n \n
\n
\n \n
\n \n Domain verified: mail.uipkge.dev (SPF & DKIM valid)\n
\n \n TLS 1.3\n \n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n

Live Newsletter Preview

\n @if (isAbTestEnabled()) {\n \n Showing Variant {{ activePreviewVariant() }}\n \n }\n
\n\n
\n \n \n Desktop 600px\n \n \n \n Mobile 375px\n \n
\n
\n
\n\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n UIPKGE 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: alex.developer@enterprise.com
\n
\n
\n Aug 21, 2026\n
\n\n
\n
\n {{ currentActiveSubject() }}\n
\n
{{ previewText() }}
\n
\n
\n\n
\n
\n
\n \n \n
\n UIPKGE\n
\n Changelog #24 · Release 2.0\n
\n\n
\n \n Major Product Release\n \n

\n Ship polished UIs in minutes\n

\n

\n We completely rebuilt the registry engine. 370+ production components with zero npm\n dependencies, 100% code ownership, and full native support for Vue 3 and React with modern OKLCH\n 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 ⚡ Zero npm dependencies\n 🎨 OKLCH Dark Mode\n 🧩 Vue 3 + React Parity\n
\n
\n
\n\n
\n \n

\n Free & Open Source · MIT License · 370+ Primitives & Blocks\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 \n Unsubscribe anytime (RFC 8058).\n

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

\n Deliverability & Inbox Placement Scorecard\n

\n
\n \n 99.8% Inbox Probability\n \n
\n

\n Heuristic spam risk evaluation, DNS authentication compliance, and subscriber engagement telemetry.\n

\n
\n\n
\n
\n
\n
\n Spam Score\n Optimal\n
\n
\n 0.2\n / 10.0\n
\n
\n
\n
\n
\n\n
\n
\n Auth Headers\n 100% Pass\n
\n
\n
\n SPF / DKIM\n Valid (2048-bit)\n
\n
\n DMARC\n p=reject\n
\n
\n
\n\n
\n
\n Reading Time\n 185 words\n
\n
\n 45\n seconds\n
\n
Payload size: 14.2 KB (Safe)
\n
\n
\n\n
\n \n \n \n Primary Tab Placement\n \n 99.8% (Gmail / Apple)\n
\n \n \n \n RFC 8058 One-Click\n \n Compliant\n
\n \n \n \n Dark Mode Contrast\n \n 100% WCAG AAA\n
\n \n \n \n HTTPS Asset Links\n \n 6 Valid Links\n \n \n \n \n \n \n\n \n \n \n
\n

\n \n Dispatch Test Proof\n

\n

\n Send a full fidelity rendering test to inspect subject line, preheader, and layout across email clients.\n

\n
\n\n
\n
\n \n \n
\n\n
\n \n
\n \n 🌐 All Clients (Auto)\n \n \n ✉️ Gmail (Web/App)\n \n \n 🍏 Apple Mail (iOS)\n \n \n 💼 Outlook 365\n \n
\n
\n\n @if (testSentSuccess()) {\n \n \n Test proof dispatched to {{ testTargetEmail() }}!\n
\n }\n \n\n
\n \n Cancel\n \n \n
\n \n \n\n \n \n \n
\n

\n \n Schedule Email Broadcast\n

\n

\n Queue this broadcast for {{ currentAudience().count.toLocaleString() }} verified subscribers with\n deliverability rate limit guardrails.\n

\n
\n\n
\n
\n
\n Audience Target\n {{ currentAudience().label }}\n
\n
\n Estimated Reach\n {{ currentAudience().count.toLocaleString() }} recipients\n
\n
\n Spam Safety Score\n 0.2 / 10.0 (Safe)\n
\n
\n\n
\n \n
\n \n\n \n
\n
\n\n @if (scheduleSuccess()) {\n \n \n Broadcast successfully queued for dispatch!\n
\n }\n \n\n
\n \n Cancel\n \n \n
\n \n \n \n `,\n})\nexport class UiEmailCampaignComposerComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Eye = Eye\n protected readonly Flame = Flame\n protected readonly Inbox = Inbox\n protected readonly Lock = Lock\n protected readonly Mail = Mail\n protected readonly Monitor = Monitor\n protected readonly Send = Send\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Smartphone = Smartphone\n protected readonly Sparkles = Sparkles\n protected readonly Split = Split\n protected readonly Terminal = Terminal\n protected readonly UserCheck = UserCheck\n protected readonly Users = Users\n protected readonly Zap = Zap\n\n protected readonly audienceOptions = AUDIENCE_OPTIONS\n protected readonly aiSuggestions = AI_SUGGESTIONS\n protected readonly campaignName = 'Product Launch: UIPKGE 2.0 Global Release'\n protected readonly senderName = 'UIPKGE Team'\n protected readonly senderEmail = 'updates@uipkge.dev'\n\n @Input('class') className?: string\n\n readonly selectedAudience = signal('active-devs')\n readonly subjectA = signal('🚀 Introducing UIPKGE 2.0: The unbundled UI registry')\n readonly subjectB = signal('Ship polished UIs 10x faster with UIPKGE 2.0 ⚡')\n readonly previewText = signal('370+ production components with zero npm dependencies. Native Vue 3 & React code.')\n readonly isAbTestEnabled = signal(false)\n readonly activePreviewVariant = signal<'A' | 'B'>('A')\n readonly viewport = signal('desktop')\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\n readonly isScheduleModalOpen = signal(false)\n readonly scheduleTiming = signal('optimal')\n readonly isScheduling = signal(false)\n readonly scheduleSuccess = signal(false)\n\n private timers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n readonly currentAudience = computed(\n () => AUDIENCE_OPTIONS.find((item) => item.id === this.selectedAudience()) ?? AUDIENCE_OPTIONS[0]!,\n )\n\n readonly currentActiveSubject = computed(() => {\n if (this.isAbTestEnabled() && this.activePreviewVariant() === 'B') return this.subjectB()\n return this.subjectA()\n })\n\n readonly emojiCount = computed(() => {\n const matches = this.currentActiveSubject().match(/\\p{Extended_Pictographic}/gu)\n return matches ? matches.length : 0\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-[580px]' : 'max-w-[360px]',\n )\n }\n\n timingCardClass(kind: ScheduleTiming): string {\n return cn(\n 'border-border hover:border-primary/50 focus-visible:ring-ring flex flex-wrap items-center justify-between rounded-lg border p-3 text-left text-xs transition-colors outline-none focus-visible:ring-2',\n this.scheduleTiming() === kind ? 'border-primary bg-primary/5' : 'bg-card',\n )\n }\n\n timingRadioClass(kind: ScheduleTiming): string {\n return cn(\n 'flex size-4 items-center justify-center rounded-full border',\n this.scheduleTiming() === kind ? 'border-primary bg-primary text-primary-foreground' : 'border-border',\n )\n }\n\n applyAiSubject(text: string): void {\n if (this.isAbTestEnabled() && this.activePreviewVariant() === 'B') this.subjectB.set(text)\n else this.subjectA.set(text)\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 }, 1800),\n )\n }, 800),\n )\n }\n\n handleScheduleBroadcast(): void {\n this.isScheduling.set(true)\n this.scheduleSuccess.set(false)\n this.timers.push(\n setTimeout(() => {\n this.isScheduling.set(false)\n this.scheduleSuccess.set(true)\n this.timers.push(\n setTimeout(() => {\n this.scheduleSuccess.set(false)\n this.isScheduleModalOpen.set(false)\n }, 1800),\n )\n }, 900),\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/email-campaign-composer/email-campaign-composer.component.ts" }, { "path": "packages/registry-angular/blocks/email-campaign-composer/index.ts", "content": "export {\n UiEmailCampaignComposerComponent,\n type CampaignClient,\n type CampaignViewport,\n type ScheduleTiming,\n} from './email-campaign-composer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/email-campaign-composer/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/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json" ], "description": "High-craft marketing email broadcast designer, audience segment selector, AI subject line optimizer, A/B testing split, live multi-device newsletter preview, and deliverability scorecard.", "categories": [ "marketing", "app", "dashboard" ] }