{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "newsletter-signup",
  "title": "Newsletter Signup",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/newsletter-signup/NewsletterSignup.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, BellRing, BookOpen, Check, Mail, Send } 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 { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\ninterface Props {\n  variant?: 'centered' | 'split'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'split',\n})\n\ninterface ChannelOption {\n  id: string\n  title: string\n  frequency: string\n  description: string\n  badge: string\n}\n\nconst channels: ChannelOption[] = [\n  {\n    id: 'architecture',\n    title: 'Architecture & Token Deep Dives',\n    frequency: 'Bi-Weekly',\n    description: 'Technical breakdowns on OKLCH color science, headless AST transformers, and zero-lockin paradigms.',\n    badge: 'Flagship',\n  },\n  {\n    id: 'releases',\n    title: 'Registry Ship Notes & RFCs',\n    frequency: 'Monthly',\n    description: 'Direct changelogs, new workbench releases, breaking primitive refactors, and roadmap discussions.',\n    badge: 'Changelog',\n  },\n  {\n    id: 'security',\n    title: 'Security & Dependency Bulletins',\n    frequency: 'As-Needed',\n    description: 'Zero-day vulnerability alerts, upstream headless primitive fixes, and patch notifications.',\n    badge: 'Critical',\n  },\n]\n\nconst recentIssues = [\n  {\n    id: 48,\n    date: 'Aug 2026',\n    title: 'The Death of Monolithic npm UI Packages',\n    reads: '4 min read',\n    tags: ['Architecture', 'Registry', 'AST'],\n    snippet:\n      'Why the next decade of frontend engineering belongs to unbundled registries where the consumer owns the source code.',\n  },\n  {\n    id: 47,\n    date: 'Jul 2026',\n    title: 'OKLCH Theming in Tailwind CSS v4',\n    reads: '6 min read',\n    tags: ['Tailwind v4', 'Color Science', 'Tokens'],\n    snippet:\n      'Mastering perceptual lightness, chroma gamut mapping, and dynamic theme switching without runtime CSS bloat.',\n  },\n]\n\nconst email = ref('')\nconst selectedChannel = ref('architecture')\nconst submitted = ref(false)\nconst activePreviewIssue = ref(0)\nconst isSubmitting = ref(false)\n\nfunction handleSubmit() {\n  if (!email.value || !email.value.includes('@')) return\n  isSubmitting.value = true\n  setTimeout(() => {\n    isSubmitting.value = false\n    submitted.value = true\n  }, 400)\n}\n</script>\n\n<template>\n  <section data-slot=\"newsletter-signup\" class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 lg:px-8\">\n    <div class=\"mx-auto max-w-6xl space-y-10\">\n      <!-- Section Header -->\n      <div class=\"max-w-3xl space-y-3\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Mail class=\"text-primary size-3.5\" />\n          Engineering Dispatch & Architecture Radar\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">Ship notes, not marketing fluff.</h2>\n        <p class=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">\n          Join 18,400+ frontend architects, design engineers, and systems builders. Plain-text insights into component\n          architecture, token systems, and dual-framework engineering.\n        </p>\n      </div>\n\n      <!-- Main Layout -->\n      <div class=\"grid grid-cols-1 items-start gap-8 lg:grid-cols-12\">\n        <!-- Left Column: Channel Selector & Live Dispatch Form (7 Cols) -->\n        <div class=\"space-y-6 lg:col-span-7\">\n          <Card class=\"border-border bg-card overflow-hidden shadow-sm\">\n            <CardHeader class=\"bg-muted/20 border-border/60 border-b pb-4\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"flex items-center gap-2 text-base font-semibold\">\n                  <BellRing class=\"text-primary size-4\" />\n                  Select Dispatch Track\n                </CardTitle>\n                <span class=\"text-muted-foreground font-mono text-xs\">Zero Spam Guarantee</span>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Choose the telemetry streams you want delivered to your inbox.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent class=\"space-y-5 p-6\">\n              <!-- Channel Radio Cards -->\n              <div class=\"space-y-2.5\">\n                <div\n                  v-for=\"ch in channels\"\n                  :key=\"ch.id\"\n                  class=\"group cursor-pointer rounded-xl border p-3.5 transition-colors\"\n                  :class=\"\n                    selectedChannel === ch.id\n                      ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                      : 'border-border bg-background hover:bg-muted/40'\n                  \"\n                  @click=\"selectedChannel = ch.id\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <div class=\"flex items-center gap-2\">\n                      <div\n                        class=\"flex size-3.5 items-center justify-center rounded-full border transition-colors\"\n                        :class=\"selectedChannel === ch.id ? 'border-primary bg-primary' : 'border-muted-foreground/40'\"\n                      >\n                        <div v-if=\"selectedChannel === ch.id\" class=\"bg-primary-foreground size-1.5 rounded-full\" />\n                      </div>\n                      <span class=\"text-foreground text-xs font-semibold\">{{ ch.title }}</span>\n                    </div>\n                    <Badge variant=\"outline\" class=\"font-mono text-xs\">\n                      {{ ch.frequency }}\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground mt-1.5 pl-5.5 text-xs leading-relaxed\">\n                    {{ ch.description }}\n                  </p>\n                </div>\n              </div>\n\n              <Separator />\n\n              <!-- Dispatch Subscription Input -->\n              <form v-if=\"!submitted\" class=\"space-y-3\" @submit.prevent=\"handleSubmit\">\n                <div class=\"flex flex-col gap-2 sm:flex-row\">\n                  <Input\n                    v-model=\"email\"\n                    type=\"email\"\n                    placeholder=\"architect@company.com\"\n                    required\n                    class=\"h-10 flex-1 font-mono text-xs\"\n                    aria-label=\"Email address for dispatch\"\n                  />\n                  <Button type=\"submit\" :disabled=\"isSubmitting\" class=\"h-10 gap-1.5 px-5 text-xs font-semibold\">\n                    <span>Subscribe to Stream</span>\n                    <Send class=\"size-3.5\" />\n                  </Button>\n                </div>\n                <div class=\"text-muted-foreground flex items-center justify-between pt-1 font-mono text-xs\">\n                  <span>Plain text &bull; 1-click unsubscribe</span>\n                  <span class=\"text-success font-semibold\">18,412 Active Subscribers</span>\n                </div>\n              </form>\n\n              <!-- Subscription Success View -->\n              <div v-else class=\"border-success/20 bg-success/10 space-y-2 rounded-xl border p-5 text-center\">\n                <div class=\"bg-success/20 text-success mx-auto flex size-9 items-center justify-center rounded-full\">\n                  <Check class=\"size-5\" />\n                </div>\n                <p class=\"text-foreground text-sm font-semibold\">Dispatches Activated!</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  Verification sent to <strong class=\"text-foreground font-mono\">{{ email }}</strong\n                  >. Check your inbox to confirm delivery.\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n\n        <!-- Right Column: Recent Issue Sampler & Archives (5 Cols) -->\n        <div class=\"space-y-4 lg:col-span-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground flex items-center gap-1.5 font-mono text-xs tracking-wider uppercase\">\n              <BookOpen class=\"text-primary size-3.5\" /> Archive Sampler\n            </p>\n            <span class=\"text-muted-foreground font-mono text-xs\"\n              >Issue #{{ recentIssues[activePreviewIssue].id }}</span\n            >\n          </div>\n\n          <!-- Interactive Issue Cards -->\n          <div class=\"space-y-3\">\n            <div\n              v-for=\"(issue, idx) in recentIssues\"\n              :key=\"issue.id\"\n              class=\"bg-card cursor-pointer rounded-xl border p-4 transition-colors\"\n              :class=\"\n                activePreviewIssue === idx ? 'border-primary/50 shadow-xs' : 'border-border hover:border-border/80'\n              \"\n              @click=\"activePreviewIssue = idx\"\n            >\n              <div class=\"text-muted-foreground mb-1.5 flex items-center justify-between font-mono text-xs\">\n                <span>{{ issue.date }} &bull; Issue #{{ issue.id }}</span>\n                <span class=\"text-foreground font-medium\">{{ issue.reads }}</span>\n              </div>\n              <h3 class=\"text-foreground mb-1.5 text-sm leading-snug font-bold\">{{ issue.title }}</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ issue.snippet }}</p>\n\n              <div class=\"mt-3 flex flex-wrap gap-1.5\">\n                <Badge v-for=\"tag in issue.tags\" :key=\"tag\" variant=\"secondary\" class=\"px-1.5 py-0 font-mono text-xs\">\n                  #{{ tag }}\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          <!-- RSS / Mastodon / CLI note -->\n          <div\n            class=\"border-border bg-muted/20 text-muted-foreground flex items-center justify-between rounded-lg border p-3.5 text-xs\"\n          >\n            <span class=\"font-mono\">Prefer RSS feeds?</span>\n            <a\n              href=\"https://uipkge.dev/rss.xml\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              class=\"text-primary inline-flex items-center gap-1 font-mono hover:underline\"\n            >\n              uipkge.dev/rss.xml <ArrowRight class=\"size-3\" />\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/NewsletterSignup.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/input.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Engineering dispatch and release radar workbench with channel tracks (Architecture, Releases, Security), live archive previews, and subscriber metrics.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "newsletter"
}