{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "email-campaign-composer",
  "title": "Email Campaign Composer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/email-campaign-composer/EmailCampaignComposer.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\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-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 { 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\ninterface Props {\n  className?: string\n}\n\nconst props = defineProps<Props>()\n\n// Campaign state\nconst campaignName = ref('Product Launch: UIPKGE 2.0 Global Release')\nconst selectedAudience = ref('active-devs')\n\n// Subject line & Preheader state\nconst subjectA = ref('🚀 Introducing UIPKGE 2.0: The unbundled UI registry')\nconst subjectB = ref('Ship polished UIs 10x faster with UIPKGE 2.0 ⚡')\nconst previewText = ref('370+ production components with zero npm dependencies. Native Vue 3 & React code.')\nconst senderName = ref('UIPKGE Team')\nconst senderEmail = ref('updates@uipkge.dev')\nconst replyToEmail = ref('support@uipkge.dev')\n\n// A/B testing state\nconst isAbTestEnabled = ref(false)\nconst activePreviewVariant = ref<'A' | 'B'>('A')\n\n// Viewport state\ntype ViewportMode = 'desktop' | 'mobile'\nconst viewport = ref<ViewportMode>('desktop')\n\n// Test Proof Dialog 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// Schedule Broadcast Dialog state\nconst isScheduleModalOpen = ref(false)\nconst scheduleTiming = ref<'optimal' | 'immediate' | 'custom'>('optimal')\nconst isScheduling = ref(false)\nconst scheduleSuccess = ref(false)\n\n// Audience segment metadata\nconst audienceOptions = [\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 currentAudience = computed(() => {\n  return audienceOptions.find((item) => item.id === selectedAudience.value) ?? audienceOptions[0]\n})\n\n// Subject analysis\nconst currentActiveSubject = computed(() => {\n  if (isAbTestEnabled.value && activePreviewVariant.value === 'B') {\n    return subjectB.value\n  }\n  return subjectA.value\n})\n\nconst subjectCharCount = computed(() => currentActiveSubject.value.length)\nconst preheaderCharCount = computed(() => previewText.value.length)\n\nconst emojiCount = computed(() => {\n  const matches = currentActiveSubject.value.match(/\\p{Extended_Pictographic}/gu)\n  return matches ? matches.length : 0\n})\n\n// AI suggestions list\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\nfunction applyAiSubject(text: string) {\n  if (isAbTestEnabled.value && activePreviewVariant.value === 'B') {\n    subjectB.value = text\n  } else {\n    subjectA.value = text\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    }, 1800)\n  }, 800)\n}\n\nfunction handleScheduleBroadcast() {\n  isScheduling.value = true\n  scheduleSuccess.value = false\n\n  setTimeout(() => {\n    isScheduling.value = false\n    scheduleSuccess.value = true\n    setTimeout(() => {\n      scheduleSuccess.value = false\n      isScheduleModalOpen.value = false\n    }, 1800)\n  }, 900)\n}\n</script>\n\n<template>\n  <div data-slot=\"email-campaign-composer\" :class=\"cn('w-full space-y-6', props.className)\">\n    <!-- Top Header Bar -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Campaign Title & Status Badge -->\n          <div class=\"space-y-1.5\">\n            <div class=\"flex flex-wrap items-center gap-2.5\">\n              <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg shadow-xs\">\n                <Mail class=\"size-4\" />\n              </div>\n              <h2 class=\"text-foreground text-lg font-semibold tracking-tight sm:text-xl\">\n                {{ campaignName }}\n              </h2>\n              <!-- Status Badge: Blue info styled -->\n              <Badge\n                variant=\"outline\"\n                class=\"border-info/30 bg-info/10 text-info gap-1.5 px-2.5 py-0.5 text-xs font-medium\"\n              >\n                <span class=\"bg-info size-1.5 rounded-full\" />\n                <span>Draft Saved · {{ currentAudience.formattedCount }} Recipients</span>\n              </Badge>\n            </div>\n            <p class=\"text-muted-foreground text-xs\">\n              Configure campaign targeting, optimize open rates with AI scoring, and preview live multi-device inbox\n              rendering.\n            </p>\n          </div>\n\n          <!-- Top Actions: Send Test Proof & Schedule Broadcast -->\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <!-- Send Test Proof Dialog -->\n            <Dialog v-model:open=\"isTestModalOpen\">\n              <DialogTrigger as-child>\n                <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\">\n                  <Mail class=\"text-muted-foreground size-3.5\" />\n                  <span>Send Test Proof</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 Proof\n                  </DialogTitle>\n                  <DialogDescription class=\"text-xs\">\n                    Send a full fidelity rendering test to inspect subject line, preheader, and layout across email\n                    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\">Proof Recipient Address</label>\n                    <Input\n                      v-model=\"testTargetEmail\"\n                      type=\"email\"\n                      placeholder=\"alex.developer@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\">Email Client Engine Simulation</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 font-medium\"\n                        @click=\"selectedClient = 'all'\"\n                      >\n                        🌐 All Clients (Auto)\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"xs\"\n                        :variant=\"selectedClient === 'gmail' ? 'default' : 'outline'\"\n                        class=\"justify-start text-xs font-medium\"\n                        @click=\"selectedClient = 'gmail'\"\n                      >\n                        ✉️ Gmail (Web/App)\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"xs\"\n                        :variant=\"selectedClient === 'apple' ? 'default' : 'outline'\"\n                        class=\"justify-start text-xs font-medium\"\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 font-medium\"\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 proof 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 ? 'Dispatching...' : 'Send Test Proof' }}</span>\n                  </Button>\n                </DialogFooter>\n              </DialogContent>\n            </Dialog>\n\n            <!-- Schedule Broadcast Dialog -->\n            <Dialog v-model:open=\"isScheduleModalOpen\">\n              <DialogTrigger as-child>\n                <Button size=\"sm\" class=\"gap-1.5 text-xs font-medium shadow-xs\">\n                  <Send class=\"size-3.5 fill-current\" />\n                  <span>Schedule Broadcast</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                    <Calendar class=\"text-primary size-4\" />\n                    Schedule Email Broadcast\n                  </DialogTitle>\n                  <DialogDescription class=\"text-xs\">\n                    Queue this broadcast for {{ currentAudience.count.toLocaleString() }} verified subscribers with\n                    deliverability rate limit guardrails.\n                  </DialogDescription>\n                </DialogHeader>\n\n                <div class=\"space-y-4 py-2\">\n                  <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3 text-xs\">\n                    <div class=\"flex flex-wrap items-center justify-between\">\n                      <span class=\"text-muted-foreground\">Audience Target</span>\n                      <span class=\"text-foreground font-medium\">{{ currentAudience.label }}</span>\n                    </div>\n                    <div class=\"flex flex-wrap items-center justify-between\">\n                      <span class=\"text-muted-foreground\">Estimated Reach</span>\n                      <span class=\"text-foreground font-semibold\"\n                        >{{ currentAudience.count.toLocaleString() }} recipients</span\n                      >\n                    </div>\n                    <div class=\"flex flex-wrap items-center justify-between\">\n                      <span class=\"text-muted-foreground\">Spam Safety Score</span>\n                      <Badge variant=\"success\" class=\"h-4.5 px-1.5 text-xs font-normal\">0.2 / 10.0 (Safe)</Badge>\n                    </div>\n                  </div>\n\n                  <div class=\"space-y-2\">\n                    <label class=\"text-muted-foreground text-xs font-medium\">Broadcast Timing</label>\n                    <div class=\"grid grid-cols-1 gap-2\">\n                      <button\n                        type=\"button\"\n                        class=\"border-border hover:border-primary/50 flex flex-wrap items-center justify-between rounded-lg border p-3 text-left text-xs transition-colors\"\n                        :class=\"scheduleTiming === 'optimal' ? 'border-primary bg-primary/5' : 'bg-card'\"\n                        @click=\"scheduleTiming = 'optimal'\"\n                      >\n                        <div class=\"space-y-0.5\">\n                          <div class=\"text-foreground font-medium\">✨ AI Optimal Send Time (Recommended)</div>\n                          <div class=\"text-muted-foreground text-xs\">\n                            Tuesday, Aug 25 @ 9:00 AM EDT (+18% projected opens)\n                          </div>\n                        </div>\n                        <div\n                          class=\"flex size-4 items-center justify-center rounded-full border\"\n                          :class=\"\n                            scheduleTiming === 'optimal'\n                              ? 'border-primary bg-primary text-primary-foreground'\n                              : 'border-border'\n                          \"\n                        >\n                          <div v-if=\"scheduleTiming === 'optimal'\" class=\"size-1.5 rounded-full bg-white\" />\n                        </div>\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        class=\"border-border hover:border-primary/50 flex flex-wrap items-center justify-between rounded-lg border p-3 text-left text-xs transition-colors\"\n                        :class=\"scheduleTiming === 'immediate' ? 'border-primary bg-primary/5' : 'bg-card'\"\n                        @click=\"scheduleTiming = 'immediate'\"\n                      >\n                        <div class=\"space-y-0.5\">\n                          <div class=\"text-foreground font-medium\">⚡ Send Immediately</div>\n                          <div class=\"text-muted-foreground text-xs\">\n                            Dispatch immediately with warm-up concurrency pacing\n                          </div>\n                        </div>\n                        <div\n                          class=\"flex size-4 items-center justify-center rounded-full border\"\n                          :class=\"\n                            scheduleTiming === 'immediate'\n                              ? 'border-primary bg-primary text-primary-foreground'\n                              : 'border-border'\n                          \"\n                        >\n                          <div v-if=\"scheduleTiming === 'immediate'\" class=\"size-1.5 rounded-full bg-white\" />\n                        </div>\n                      </button>\n                    </div>\n                  </div>\n\n                  <div\n                    v-if=\"scheduleSuccess\"\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>Broadcast successfully queued for dispatch!</span>\n                  </div>\n                </div>\n\n                <DialogFooter class=\"gap-2 sm:gap-0\">\n                  <Button variant=\"outline\" size=\"sm\" :disabled=\"isScheduling\" @click=\"isScheduleModalOpen = false\">\n                    Cancel\n                  </Button>\n                  <Button size=\"sm\" class=\"gap-1.5\" :disabled=\"isScheduling\" @click=\"handleScheduleBroadcast\">\n                    <Send class=\"size-3.5\" />\n                    <span>{{ isScheduling ? 'Scheduling...' : 'Confirm & Schedule' }}</span>\n                  </Button>\n                </DialogFooter>\n              </DialogContent>\n            </Dialog>\n          </div>\n        </div>\n      </CardHeader>\n    </Card>\n\n    <!-- 2-Column Campaign Studio Grid -->\n    <div class=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n      <!-- LEFT PANEL: Campaign Setup & Audience (45% -> lg:col-span-5) -->\n      <div class=\"space-y-5 lg:col-span-5\">\n        <!-- 1. Audience Segment Selector Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                  <Users class=\"size-3.5\" />\n                </div>\n                <CardTitle class=\"text-sm font-semibold tracking-tight\">Audience Segment</CardTitle>\n              </div>\n              <Badge variant=\"secondary\" class=\"h-5 gap-1 px-2 text-xs font-normal\">\n                <UserCheck class=\"text-success size-3\" />\n                Verified List\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Select subscriber segment to calculate deliverability pacing and personalization tags.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-3.5 pt-0\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Target Segment</label>\n              <Select v-model=\"selectedAudience\">\n                <SelectTrigger\n                  class=\"h-9 w-full text-xs font-medium [&>span]:truncate [&>svg]:shrink-0\"\n                  aria-label=\"Select Audience Segment\"\n                >\n                  <SelectValue placeholder=\"Select audience segment\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem v-for=\"aud in audienceOptions\" :key=\"aud.id\" :value=\"aud.id\">\n                    <span>{{ aud.label }}</span>\n                  </SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <!-- Audience Telemetry Badges Grid -->\n            <div class=\"grid grid-cols-3 gap-2 pt-1\">\n              <div class=\"border-border bg-muted/40 rounded-lg border p-2.5 text-center\">\n                <div class=\"text-muted-foreground text-xs font-medium\">Recipients</div>\n                <div class=\"text-foreground mt-0.5 text-sm font-bold tracking-tight\">\n                  {{ currentAudience.formattedCount }}\n                </div>\n              </div>\n              <div class=\"border-border bg-muted/40 rounded-lg border p-2.5 text-center\">\n                <div class=\"text-muted-foreground text-xs font-medium\">Avg Open Rate</div>\n                <div class=\"text-foreground text-success mt-0.5 text-sm font-bold tracking-tight\">\n                  {{ currentAudience.openRate }}\n                </div>\n              </div>\n              <div class=\"border-border bg-muted/40 rounded-lg border p-2.5 text-center\">\n                <div class=\"text-muted-foreground text-xs font-medium\">Avg CTR</div>\n                <div class=\"text-foreground text-info mt-0.5 text-sm font-bold tracking-tight\">\n                  {{ currentAudience.clickRate }}\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- 2. Subject Line & AI Optimizer Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                  <Sparkles class=\"size-3.5\" />\n                </div>\n                <CardTitle class=\"text-sm font-semibold tracking-tight\">Subject Line & AI Scorer</CardTitle>\n              </div>\n              <!-- AI Subject Scorer Green Badge -->\n              <Badge\n                variant=\"outline\"\n                class=\"border-success/30 bg-success/10 text-success gap-1 px-2 text-xs font-medium\"\n              >\n                <Sparkles class=\"text-success size-3\" />\n                <span>94 / 100 · High Open Rate Impact</span>\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              AI predictive heuristic analyzing urgency, sentiment, character count, and spam filter risk.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4 pt-0\">\n            <!-- A/B Subject Variant Switcher -->\n            <div class=\"border-border bg-muted/30 flex flex-wrap items-center justify-between rounded-lg border p-3\">\n              <div class=\"space-y-0.5\">\n                <div class=\"text-foreground flex items-center gap-1.5 text-xs font-medium\">\n                  <Split class=\"text-primary size-3.5\" />\n                  <span>A/B Subject Variant Testing</span>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">Test 2 subject lines with 50/50 subscriber split</p>\n              </div>\n              <Switch id=\"vue-ab-toggle\" v-model=\"isAbTestEnabled\" />\n            </div>\n\n            <!-- Subject Input Variant A -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center justify-between text-xs\">\n                <label class=\"text-foreground font-medium\">\n                  Subject Line {{ isAbTestEnabled ? '(Variant A · 50%)' : '' }}\n                </label>\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"text-muted-foreground font-mono text-xs\">{{ subjectA.length }}/60 chars</span>\n                  <Badge variant=\"outline\" class=\"text-muted-foreground h-4.5 gap-1 px-1.5 text-xs font-normal\">\n                    <Flame class=\"text-warning size-2.5\" />\n                    <span>{{ emojiCount }} emoji</span>\n                  </Badge>\n                </div>\n              </div>\n              <Input v-model=\"subjectA\" class=\"text-xs\" placeholder=\"Enter campaign subject line...\" />\n            </div>\n\n            <!-- Subject Input Variant B (Visible if A/B Enabled) -->\n            <div v-if=\"isAbTestEnabled\" class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center justify-between text-xs\">\n                <label class=\"text-foreground font-medium\">Subject Line (Variant B · 50%)</label>\n                <span class=\"text-muted-foreground font-mono text-xs\">{{ subjectB.length }}/60 chars</span>\n              </div>\n              <Input v-model=\"subjectB\" class=\"text-xs\" placeholder=\"Enter alternate subject line B...\" />\n              <div class=\"flex items-center gap-1 pt-1\">\n                <Button\n                  type=\"button\"\n                  size=\"xs\"\n                  :variant=\"activePreviewVariant === 'A' ? 'default' : 'outline'\"\n                  class=\"text-xs font-medium\"\n                  @click=\"activePreviewVariant = 'A'\"\n                >\n                  Preview Variant A\n                </Button>\n                <Button\n                  type=\"button\"\n                  size=\"xs\"\n                  :variant=\"activePreviewVariant === 'B' ? 'default' : 'outline'\"\n                  class=\"text-xs font-medium\"\n                  @click=\"activePreviewVariant = 'B'\"\n                >\n                  Preview Variant B\n                </Button>\n              </div>\n            </div>\n\n            <!-- AI Subject Score Breakdown Metrics -->\n            <div class=\"border-border bg-muted/20 space-y-2 rounded-lg border p-3 text-xs\">\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3\" />\n                  Sentiment Tone\n                </span>\n                <span class=\"text-foreground font-medium\">Positive (98%)</span>\n              </div>\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3\" />\n                  Urgency & Relevance\n                </span>\n                <span class=\"text-foreground font-medium\">High (91%)</span>\n              </div>\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3\" />\n                  Spam Keyword Risk\n                </span>\n                <span class=\"text-foreground text-success font-medium\">Very Low (0.1%)</span>\n              </div>\n            </div>\n\n            <!-- 1-Click AI Subject Line Suggestions -->\n            <div class=\"space-y-2\">\n              <span class=\"text-muted-foreground flex items-center gap-1 text-xs font-medium\">\n                <Sparkles class=\"text-primary size-3\" />\n                AI Optimization Suggestions (Click to apply):\n              </span>\n              <div class=\"space-y-1.5\">\n                <button\n                  v-for=\"(suggestion, idx) in aiSuggestions\"\n                  :key=\"idx\"\n                  type=\"button\"\n                  class=\"border-border hover:border-primary/40 hover:bg-muted/50 flex w-full items-center justify-between rounded-md border p-2 text-left text-xs transition-colors\"\n                  @click=\"applyAiSubject(suggestion.text)\"\n                >\n                  <span class=\"text-foreground truncate font-medium\">{{ suggestion.text }}</span>\n                  <Badge variant=\"secondary\" class=\"text-success ml-2 shrink-0 font-mono text-xs\">\n                    {{ suggestion.score }}/100\n                  </Badge>\n                </button>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- 3. Preview Text / Preheader -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center justify-between text-xs\">\n                <label class=\"text-foreground font-medium\">Preview Text / Preheader</label>\n                <span class=\"text-muted-foreground font-mono text-xs\">{{ preheaderCharCount }}/90 chars</span>\n              </div>\n              <Input\n                v-model=\"previewText\"\n                class=\"text-xs\"\n                placeholder=\"Secondary snippet displayed in subscriber inbox lists...\"\n              />\n            </div>\n\n            <Separator />\n\n            <!-- 4. Sender Identity -->\n            <div class=\"space-y-3\">\n              <label class=\"text-foreground text-xs font-medium\">Sender Identity</label>\n              <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n                <div class=\"space-y-1\">\n                  <span class=\"text-muted-foreground text-xs\">Sender Display Name</span>\n                  <Input v-model=\"senderName\" class=\"text-xs\" placeholder=\"UIPKGE Team\" />\n                </div>\n                <div class=\"space-y-1\">\n                  <span class=\"text-muted-foreground text-xs\">From Address</span>\n                  <Input v-model=\"senderEmail\" class=\"text-xs\" placeholder=\"updates@uipkge.dev\" />\n                </div>\n              </div>\n              <div\n                class=\"border-success/20 bg-success/5 text-success flex flex-wrap items-center justify-between rounded-md border px-2.5 py-1.5 text-xs\"\n              >\n                <div class=\"flex items-center gap-1.5\">\n                  <ShieldCheck class=\"size-3.5 shrink-0\" />\n                  <span>Domain verified: <strong>mail.uipkge.dev</strong> (SPF & DKIM valid)</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-success/30 text-success h-4.5 px-1.5 text-xs\"> TLS 1.3 </Badge>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- RIGHT PANEL: Live Multi-Device Email Preview (55% -> lg:col-span-7) -->\n      <div class=\"space-y-5 lg:col-span-7\">\n        <!-- Live Email Canvas Container Card -->\n        <Card class=\"border-border bg-card overflow-hidden shadow-xs\">\n          <CardHeader class=\"border-border bg-muted/20 border-b pb-3\">\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <Eye class=\"text-primary size-4\" />\n                <CardTitle class=\"text-sm font-semibold tracking-tight\">Live Newsletter Preview</CardTitle>\n                <Badge v-if=\"isAbTestEnabled\" variant=\"secondary\" class=\"text-xs font-normal\">\n                  Showing Variant {{ activePreviewVariant }}\n                </Badge>\n              </div>\n\n              <!-- Device Viewport Toggle (Desktop 600px vs Mobile 375px) -->\n              <div class=\"bg-muted border-border inline-flex items-center rounded-lg border p-1 shadow-xs\">\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              </div>\n            </div>\n          </CardHeader>\n\n          <!-- Rendered Newsletter Preview Canvas -->\n          <CardContent class=\"bg-muted/30 flex min-h-[580px] flex-col items-center justify-start p-4 sm:p-6\">\n            <div\n              :class=\"\n                cn(\n                  'w-full transition-[max-width] duration-300 ease-in-out',\n                  viewport === 'desktop' ? 'max-w-[580px]' : 'max-w-[360px]',\n                )\n              \"\n            >\n              <!-- Window Chrome Bar Frame -->\n              <div class=\"border-border bg-card overflow-hidden rounded-xl border shadow-sm\">\n                <!-- Top Chrome Bar -->\n                <div class=\"border-border bg-muted/60 flex flex-wrap 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 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/70 space-y-2 border-b p-4 text-xs\">\n                  <div class=\"flex flex-wrap 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: alex.developer@enterprise.com</div>\n                      </div>\n                    </div>\n                    <span class=\"text-muted-foreground text-xs\">Aug 21, 2026</span>\n                  </div>\n\n                  <div class=\"space-y-0.5 pt-1\">\n                    <div class=\"text-foreground text-sm font-semibold tracking-tight\">\n                      {{ currentActiveSubject }}\n                    </div>\n                    <div class=\"text-muted-foreground line-clamp-1 text-xs\">\n                      {{ previewText }}\n                    </div>\n                  </div>\n                </div>\n\n                <!-- High-Fidelity Rendered Email Newsletter Body -->\n                <div class=\"bg-card space-y-5 p-5 sm:p-7\">\n                  <!-- Logo Banner -->\n                  <div class=\"border-border flex flex-wrap items-center justify-between border-b pb-3.5\">\n                    <div class=\"flex items-center gap-2\">\n                      <div\n                        class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\"\n                      >\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 · Release 2.0</Badge>\n                  </div>\n\n                  <!-- Hero Headline & Description -->\n                  <div class=\"space-y-2.5\">\n                    <Badge\n                      variant=\"outline\"\n                      class=\"text-primary border-primary/30 text-xs font-semibold tracking-wider uppercase\"\n                    >\n                      Major Product Release\n                    </Badge>\n                    <h3 class=\"text-foreground text-xl leading-tight font-bold tracking-tight sm:text-2xl\">\n                      Ship polished UIs in minutes\n                    </h3>\n                    <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                      We completely rebuilt the registry engine. 370+ production components with zero npm dependencies,\n                      100% code ownership, and full native support for Vue 3 and React with modern OKLCH tokens.\n                    </p>\n                  </div>\n\n                  <!-- Product Visual with Code Snippet & Callout Pills -->\n                  <div class=\"border-border bg-muted/40 overflow-hidden rounded-lg border\">\n                    <div\n                      class=\"border-border bg-muted/60 flex flex-wrap items-center justify-between border-b px-3.5 py-2\"\n                    >\n                      <div class=\"text-muted-foreground flex items-center gap-1.5 font-mono text-xs\">\n                        <Terminal class=\"text-primary size-3\" />\n                        <span>components/ui/button.vue</span>\n                      </div>\n                      <span class=\"text-success font-mono text-xs font-medium\">TypeScript</span>\n                    </div>\n                    <div class=\"space-y-3 p-3.5\">\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 Interactive UI Demo 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\">Destructive</Button>\n                      </div>\n\n                      <!-- 3 Callout Pills -->\n                      <div class=\"flex flex-wrap items-center justify-center gap-1.5 pt-1\">\n                        <Badge variant=\"secondary\" class=\"text-xs font-normal\">⚡ Zero npm dependencies</Badge>\n                        <Badge variant=\"secondary\" class=\"text-xs font-normal\">🎨 OKLCH Dark Mode</Badge>\n                        <Badge variant=\"secondary\" class=\"text-xs font-normal\">🧩 Vue 3 + React Parity</Badge>\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-1 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=\"ml-1 size-4\" />\n                    </Button>\n                    <p class=\"text-muted-foreground text-xs\">\n                      Free & Open Source · MIT License · 370+ Primitives & Blocks\n                    </p>\n                  </div>\n\n                  <Separator />\n\n                  <!-- Unsubscribe & Footer Details -->\n                  <div class=\"text-muted-foreground space-y-2.5 pt-1 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 (RFC 8058)</span\n                      >.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Deliverability & Inbox Placement Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-success/10 text-success flex size-7 items-center justify-center rounded-md\">\n                  <ShieldCheck class=\"size-4\" />\n                </div>\n                <CardTitle class=\"text-sm font-semibold tracking-tight\"\n                  >Deliverability & Inbox Placement Scorecard</CardTitle\n                >\n              </div>\n              <Badge variant=\"outline\" class=\"border-success/30 text-success h-5 px-2 text-xs\">\n                99.8% Inbox Probability\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Heuristic spam risk evaluation, DNS authentication compliance, and subscriber engagement telemetry.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4 pt-0\">\n            <!-- 3 Core Scorecard Metrics -->\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n              <!-- Metric 1: Spam Score -->\n              <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                <div class=\"flex flex-wrap items-center justify-between text-xs\">\n                  <span class=\"text-muted-foreground\">Spam Score</span>\n                  <Badge variant=\"success\" class=\"h-4.5 px-1 text-xs\">Optimal</Badge>\n                </div>\n                <div class=\"mt-1 flex items-baseline gap-1\">\n                  <span class=\"text-success text-xl font-bold tracking-tight\">0.2</span>\n                  <span class=\"text-muted-foreground text-xs\">/ 10.0</span>\n                </div>\n                <div class=\"bg-muted mt-2 h-1.5 w-full overflow-hidden rounded-full\">\n                  <div class=\"bg-success h-full w-[98%] rounded-full\" />\n                </div>\n              </div>\n\n              <!-- Metric 2: Domain Auth -->\n              <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                <div class=\"flex flex-wrap items-center justify-between text-xs\">\n                  <span class=\"text-muted-foreground\">Auth Headers</span>\n                  <Badge variant=\"success\" class=\"h-4.5 px-1 text-xs\">100% Pass</Badge>\n                </div>\n                <div class=\"mt-1 space-y-0.5 text-xs\">\n                  <div class=\"flex justify-between\">\n                    <span class=\"text-muted-foreground\">SPF / DKIM</span>\n                    <span class=\"text-foreground font-medium\">Valid (2048-bit)</span>\n                  </div>\n                  <div class=\"flex justify-between\">\n                    <span class=\"text-muted-foreground\">DMARC</span>\n                    <span class=\"text-foreground font-medium\">p=reject</span>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Metric 3: Reading Time -->\n              <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                <div class=\"flex flex-wrap items-center justify-between text-xs\">\n                  <span class=\"text-muted-foreground\">Reading Time</span>\n                  <span class=\"text-foreground font-mono font-medium\">185 words</span>\n                </div>\n                <div class=\"mt-1 flex items-baseline gap-1\">\n                  <span class=\"text-foreground text-xl font-bold tracking-tight\">45</span>\n                  <span class=\"text-muted-foreground text-xs\">seconds</span>\n                </div>\n                <div class=\"text-muted-foreground mt-1 text-xs\">Payload size: 14.2 KB (Safe)</div>\n              </div>\n            </div>\n\n            <!-- Detailed Checklist Row -->\n            <div class=\"grid grid-cols-1 gap-2 text-xs sm:grid-cols-2\">\n              <div\n                class=\"border-border/80 bg-muted/20 flex flex-wrap items-center justify-between rounded-md border px-3 py-2\"\n              >\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  Primary Tab Placement\n                </span>\n                <span class=\"text-foreground font-medium\">99.8% (Gmail / Apple)</span>\n              </div>\n              <div\n                class=\"border-border/80 bg-muted/20 flex flex-wrap items-center justify-between rounded-md border px-3 py-2\"\n              >\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  RFC 8058 One-Click\n                </span>\n                <span class=\"text-foreground font-medium\">Compliant</span>\n              </div>\n              <div\n                class=\"border-border/80 bg-muted/20 flex flex-wrap items-center justify-between rounded-md border px-3 py-2\"\n              >\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  Dark Mode Contrast\n                </span>\n                <span class=\"text-foreground font-medium\">100% WCAG AAA</span>\n              </div>\n              <div\n                class=\"border-border/80 bg-muted/20 flex flex-wrap items-center justify-between rounded-md border px-3 py-2\"\n              >\n                <span class=\"text-muted-foreground flex items-center gap-1.5\">\n                  <Check class=\"text-success size-3.5\" />\n                  HTTPS Asset Links\n                </span>\n                <span class=\"text-foreground font-medium\">6 Valid Links</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/EmailCampaignComposer.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/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/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"
  ]
}