{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "email-campaign-composer", "title": "Email Campaign Composer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/email-campaign-composer/EmailCampaignComposer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowRight,\n Calendar,\n Check,\n CheckCircle2,\n Eye,\n Flame,\n Inbox,\n Lock,\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-react'\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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { cn } from '@/lib/utils'\n\nexport interface EmailCampaignComposerProps {\n className?: string\n}\n\ntype ViewportMode = 'desktop' | 'mobile'\ntype ClientOption = 'all' | 'gmail' | 'apple' | 'outlook'\ntype ScheduleTiming = 'optimal' | 'immediate' | 'custom'\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 audienceOptions: 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 aiSuggestions = [\n {\n text: '🚀 Introducing UIPKGE 2.0: The unbundled UI registry',\n score: 94,\n tag: 'High Open Rate Impact',\n },\n {\n text: 'Ship polished UIs 10x faster with UIPKGE 2.0 ⚡',\n score: 92,\n tag: 'Strong Action Verb',\n },\n {\n text: 'Zero npm dependencies: How UIPKGE 2.0 changes frontend dev',\n score: 89,\n tag: 'Curiosity Spike',\n },\n]\n\nexport function EmailCampaignComposer({ className }: EmailCampaignComposerProps) {\n // Campaign state\n const [campaignName] = React.useState('Product Launch: UIPKGE 2.0 Global Release')\n const [selectedAudience, setSelectedAudience] = React.useState('active-devs')\n\n // Subject line & Preheader state\n const [subjectA, setSubjectA] = React.useState('🚀 Introducing UIPKGE 2.0: The unbundled UI registry')\n const [subjectB, setSubjectB] = React.useState('Ship polished UIs 10x faster with UIPKGE 2.0 ⚡')\n const [previewText, setPreviewText] = React.useState(\n '370+ production components with zero npm dependencies. Native Vue 3 & React code.',\n )\n const senderName = 'UIPKGE Team'\n const senderEmail = 'updates@uipkge.dev'\n\n // A/B testing state\n const [isAbTestEnabled, setIsAbTestEnabled] = React.useState(false)\n const [activePreviewVariant, setActivePreviewVariant] = React.useState<'A' | 'B'>('A')\n\n // Viewport state\n const [viewport, setViewport] = React.useState('desktop')\n\n // Test Proof Dialog state\n const [isTestModalOpen, setIsTestModalOpen] = React.useState(false)\n const [testTargetEmail, setTestTargetEmail] = React.useState('alex.developer@company.com')\n const [selectedClient, setSelectedClient] = React.useState('all')\n const [isSendingTest, setIsSendingTest] = React.useState(false)\n const [testSentSuccess, setTestSentSuccess] = React.useState(false)\n\n // Schedule Broadcast Dialog state\n const [isScheduleModalOpen, setIsScheduleModalOpen] = React.useState(false)\n const [scheduleTiming, setScheduleTiming] = React.useState('optimal')\n const [isScheduling, setIsScheduling] = React.useState(false)\n const [scheduleSuccess, setScheduleSuccess] = React.useState(false)\n\n const currentAudience = React.useMemo(() => {\n return audienceOptions.find((item) => item.id === selectedAudience) ?? audienceOptions[0]\n }, [selectedAudience])\n\n const currentActiveSubject = React.useMemo(() => {\n if (isAbTestEnabled && activePreviewVariant === 'B') {\n return subjectB\n }\n return subjectA\n }, [isAbTestEnabled, activePreviewVariant, subjectA, subjectB])\n\n const emojiCount = React.useMemo(() => {\n const matches = currentActiveSubject.match(/\\p{Extended_Pictographic}/gu)\n return matches ? matches.length : 0\n }, [currentActiveSubject])\n\n const applyAiSubject = (text: string) => {\n if (isAbTestEnabled && activePreviewVariant === 'B') {\n setSubjectB(text)\n } else {\n setSubjectA(text)\n }\n }\n\n const handleSendTest = () => {\n if (!testTargetEmail) return\n setIsSendingTest(true)\n setTestSentSuccess(false)\n\n setTimeout(() => {\n setIsSendingTest(false)\n setTestSentSuccess(true)\n setTimeout(() => {\n setTestSentSuccess(false)\n setIsTestModalOpen(false)\n }, 1800)\n }, 800)\n }\n\n const handleScheduleBroadcast = () => {\n setIsScheduling(true)\n setScheduleSuccess(false)\n\n setTimeout(() => {\n setIsScheduling(false)\n setScheduleSuccess(true)\n setTimeout(() => {\n setScheduleSuccess(false)\n setIsScheduleModalOpen(false)\n }, 1800)\n }, 900)\n }\n\n return (\n
\n {/* Top Header Bar */}\n \n \n
\n {/* Campaign Title & Status Badge */}\n
\n
\n
\n \n
\n

{campaignName}

\n {/* Status Badge: Blue info styled */}\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 {/* Top Actions: Send Test Proof & Schedule Broadcast */}\n
\n {/* Send Test Proof Dialog */}\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\n clients.\n \n \n\n
\n
\n \n setTestTargetEmail(e.target.value)}\n type=\"email\"\n placeholder=\"alex.developer@company.com\"\n className=\"text-xs\"\n disabled={isSendingTest}\n />\n
\n\n
\n \n
\n setSelectedClient('all')}\n >\n 🌐 All Clients (Auto)\n \n setSelectedClient('gmail')}\n >\n ✉️ Gmail (Web/App)\n \n setSelectedClient('apple')}\n >\n 🍏 Apple Mail (iOS)\n \n setSelectedClient('outlook')}\n >\n 💼 Outlook 365\n \n
\n
\n\n {testSentSuccess && (\n
\n \n Test proof dispatched to {testTargetEmail}!\n
\n )}\n
\n\n \n setIsTestModalOpen(false)}\n >\n Cancel\n \n \n \n \n \n\n {/* Schedule Broadcast Dialog */}\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 \n {currentAudience.count.toLocaleString()} recipients\n \n
\n
\n Spam Safety Score\n \n 0.2 / 10.0 (Safe)\n \n
\n
\n\n
\n \n
\n setScheduleTiming('optimal')}\n >\n
\n
✨ AI Optimal Send Time (Recommended)
\n
\n Tuesday, Aug 25 @ 9:00 AM EDT (+18% projected opens)\n
\n
\n \n {scheduleTiming === 'optimal' &&
}\n
\n \n\n setScheduleTiming('immediate')}\n >\n
\n
⚡ Send Immediately
\n
\n Dispatch immediately with warm-up concurrency pacing\n
\n
\n \n {scheduleTiming === 'immediate' &&
}\n
\n \n
\n
\n\n {scheduleSuccess && (\n
\n \n Broadcast successfully queued for dispatch!\n
\n )}\n
\n\n \n setIsScheduleModalOpen(false)}\n >\n Cancel\n \n \n \n \n \n
\n
\n \n \n\n {/* 2-Column Campaign Studio Grid */}\n
\n {/* LEFT PANEL: Campaign Setup & Audience (45% -> lg:col-span-5) */}\n
\n {/* 1. Audience Segment Selector Card */}\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
\n\n {/* Audience Telemetry Badges Grid */}\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 {/* 2. Subject Line & AI Optimizer Card */}\n \n \n
\n
\n
\n \n
\n Subject Line & AI Scorer\n
\n {/* AI Subject Scorer Green Badge */}\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 {/* A/B Subject Variant Switcher */}\n
\n
\n
\n \n A/B Subject Variant Testing\n
\n

Test 2 subject lines with 50/50 subscriber split

\n
\n setIsAbTestEnabled(val)}\n />\n
\n\n {/* Subject Input Variant A */}\n
\n
\n \n
\n {subjectA.length}/60 chars\n \n \n {emojiCount} emoji\n \n
\n
\n setSubjectA(e.target.value)}\n className=\"text-xs\"\n placeholder=\"Enter campaign subject line...\"\n />\n
\n\n {/* Subject Input Variant B (Visible if A/B Enabled) */}\n {isAbTestEnabled && (\n
\n
\n \n {subjectB.length}/60 chars\n
\n setSubjectB(e.target.value)}\n className=\"text-xs\"\n placeholder=\"Enter alternate subject line B...\"\n />\n
\n setActivePreviewVariant('A')}\n >\n Preview Variant A\n \n setActivePreviewVariant('B')}\n >\n Preview Variant B\n \n
\n
\n )}\n\n {/* AI Subject Score Breakdown Metrics */}\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 {/* 1-Click AI Subject Line Suggestions */}\n
\n \n \n AI Optimization Suggestions (Click to apply):\n \n
\n {aiSuggestions.map((suggestion, idx) => (\n applyAiSubject(suggestion.text)}\n >\n {suggestion.text}\n \n {suggestion.score}/100\n \n \n ))}\n
\n
\n\n \n\n {/* 3. Preview Text / Preheader */}\n
\n
\n \n {previewText.length}/90 chars\n
\n setPreviewText(e.target.value)}\n className=\"text-xs\"\n placeholder=\"Secondary snippet displayed in subscriber inbox lists...\"\n />\n
\n\n \n\n {/* 4. Sender Identity */}\n
\n \n
\n
\n Sender Display Name\n \n
\n
\n From Address\n \n
\n
\n
\n
\n \n \n Domain verified: mail.uipkge.dev (SPF & DKIM valid)\n \n
\n \n TLS 1.3\n \n
\n
\n \n \n
\n\n {/* RIGHT PANEL: Live Multi-Device Email Preview (55% -> lg:col-span-7) */}\n
\n {/* Live Email Canvas Container Card */}\n \n \n
\n
\n \n Live Newsletter Preview\n {isAbTestEnabled && (\n \n Showing Variant {activePreviewVariant}\n \n )}\n
\n\n {/* Device Viewport Toggle (Desktop 600px vs Mobile 375px) */}\n
\n setViewport('desktop')}\n >\n \n Desktop 600px\n \n setViewport('mobile')}\n >\n \n Mobile 375px\n \n
\n
\n \n\n {/* Rendered Newsletter Preview Canvas */}\n \n \n {/* Window Chrome Bar Frame */}\n
\n {/* Top Chrome Bar */}\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 {/* Envelope Metadata Readout */}\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
{currentActiveSubject}
\n
{previewText}
\n
\n
\n\n {/* High-Fidelity Rendered Email Newsletter Body */}\n
\n {/* Logo Banner */}\n
\n
\n
\n \n
\n UIPKGE\n
\n \n Changelog #24 · Release 2.0\n \n
\n\n {/* Hero Headline & Description */}\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 {/* Product Visual with Code Snippet & Callout Pills */}\n
\n
\n
\n \n components/ui/button.tsx\n
\n TypeScript\n
\n
\n
\n $ npx shadcn add @uipkge/button\n
\n\n {/* Mini Interactive UI Demo inside Email */}\n
\n \n \n \n \n
\n\n {/* 3 Callout Pills */}\n
\n \n ⚡ Zero npm dependencies\n \n \n 🎨 OKLCH Dark Mode\n \n \n 🧩 Vue 3 + React Parity\n \n
\n
\n
\n\n {/* Primary CTA Button */}\n
\n \n

\n Free & Open Source · MIT License · 370+ Primitives & Blocks\n

\n
\n\n \n\n {/* Unsubscribe & Footer Details */}\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 {' '}\n Unsubscribe anytime (RFC 8058)\n \n .\n

\n
\n
\n
\n
\n \n \n\n {/* Deliverability & Inbox Placement Card */}\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 {/* 3 Core Scorecard Metrics */}\n
\n {/* Metric 1: Spam Score */}\n
\n
\n Spam Score\n \n Optimal\n \n
\n
\n 0.2\n / 10.0\n
\n
\n
\n
\n
\n\n {/* Metric 2: Domain Auth */}\n
\n
\n Auth Headers\n \n 100% Pass\n \n
\n
\n
\n SPF / DKIM\n Valid (2048-bit)\n
\n
\n DMARC\n p=reject\n
\n
\n
\n\n {/* Metric 3: Reading Time */}\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 {/* Detailed Checklist Row */}\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\nexport default EmailCampaignComposer\n", "type": "registry:block", "target": "~/components/blocks/EmailCampaignComposer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }