{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "newsletter", "title": "Newsletter", "type": "registry:block", "description": "Newsletter growth quartet: a slim inline signup band, a filterable issue archive with featured spotlight, centered and split signup forms, and a split section pairing the pitch with a preview of the last issue.", "categories": [ "marketing", "media", "app" ], "files": [ { "path": "packages/elements-lit/src/blocks/newsletter/newsletter.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport {\n ArrowRight,\n BellRing,\n BookOpen,\n Bookmark,\n Calendar,\n Check,\n Clock,\n Heart,\n Mail,\n MessageSquare,\n Newspaper,\n Rss,\n Search,\n Send,\n Users,\n X,\n Zap,\n} from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/separator/separator'\n\nexport type NewsletterVariant = 'inline-band' | 'archive' | 'signup-centered' | 'signup-split' | 'split-preview'\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 signupIssues = [\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 lastIssue = {\n subject: 'Why we version metric definitions instead of dashboards',\n date: 'Feb 18, 2026',\n readTime: '9 min',\n opening:\n 'Dashboards are the output. The definition is the thing teams argue about, so that is what belongs under review — with a diff, an owner, and a revert path. This issue walks through what changed when we moved ours into the repo.',\n}\n\nconst archiveCategories = ['All Issues', 'Architecture', 'Design Tokens', 'Performance', 'Interviews'] as const\n\ninterface ArchiveIssue {\n id: string\n issueNumber: number\n volumeDate: string\n title: string\n excerpt: string\n category: 'Architecture' | 'Design Tokens' | 'Performance' | 'Interviews'\n tags: string[]\n readTime: string\n date: string\n commentsCount: number\n likesCount: number\n featured?: boolean\n}\n\nconst featuredIssue: ArchiveIssue = {\n id: 'issue-43',\n issueNumber: 43,\n volumeDate: 'Aug 2026',\n title: 'The Death of npm Component Libraries: Why Unbundled Registry Architecture Won',\n excerpt:\n 'How unbundled UI registries replaced monolithic node_modules packages, eliminated dependency hell, and gave full code ownership back to frontend engineering teams across the industry.',\n category: 'Architecture',\n tags: ['#architecture', '#registries', '#future-of-web', '#tooling'],\n readTime: '9 min read',\n date: 'Aug 25, 2026',\n commentsCount: 128,\n likesCount: 1420,\n featured: true,\n}\n\nconst archiveIssues: ArchiveIssue[] = [\n {\n id: 'issue-42',\n issueNumber: 42,\n volumeDate: 'Aug 2026',\n title: 'Why Zero-Dependency Registries Are Winning',\n excerpt:\n 'A deep dive into why enterprise engineering teams are abandoning monolithic UI packages in favor of composable own-your-code registry models that eliminate breaking upgrade cascades.',\n category: 'Architecture',\n tags: ['#architecture', '#web-performance', '#dx'],\n readTime: '6 min read',\n date: 'Aug 18, 2026',\n commentsCount: 84,\n likesCount: 642,\n },\n {\n id: 'issue-41',\n issueNumber: 41,\n volumeDate: 'Aug 2026',\n title: 'Mastering Tailwind v4: OKLCH Colors & Dynamic Themes',\n excerpt:\n 'How modern CSS color spaces and inline theme definitions unlock mathematically perceptually uniform light/dark transitions without CSS variables explosion.',\n category: 'Design Tokens',\n tags: ['#design-tokens', '#css', '#theming'],\n readTime: '8 min read',\n date: 'Aug 11, 2026',\n commentsCount: 56,\n likesCount: 519,\n },\n {\n id: 'issue-40',\n issueNumber: 40,\n volumeDate: 'Aug 2026',\n title: 'Zero-CLS Island Hydration in Modern Web Frameworks',\n excerpt:\n 'Eliminating Cumulative Layout Shift when server-rendered islands hydrate in Astro and Nuxt. Practical patterns distilled from serving 1M+ monthly pageviews.',\n category: 'Performance',\n tags: ['#performance', '#core-web-vitals', '#astro'],\n readTime: '5 min read',\n date: 'Aug 04, 2026',\n commentsCount: 92,\n likesCount: 730,\n },\n {\n id: 'issue-39',\n issueNumber: 39,\n volumeDate: 'Jul 2026',\n title: 'Interview: Building High-Craft Interfaces with Paco Coursey',\n excerpt:\n 'The creator of cmdk and sonner breaks down spring physics, popover placement math, and why 60fps micro-interactions define software brand trust.',\n category: 'Interviews',\n tags: ['#interviews', '#craft', '#animation'],\n readTime: '11 min read',\n date: 'Jul 28, 2026',\n commentsCount: 147,\n likesCount: 1205,\n },\n {\n id: 'issue-38',\n issueNumber: 38,\n volumeDate: 'Jul 2026',\n title: 'Building Resilient Component APIs with Polymorphic Slots',\n excerpt:\n 'Why the asChild composition pattern beat standard prop drilling for accessible primitives, and how Reka UI implements headless polymorphism without DOM overhead.',\n category: 'Architecture',\n tags: ['#architecture', '#vue', '#reka-ui'],\n readTime: '7 min read',\n date: 'Jul 21, 2026',\n commentsCount: 63,\n likesCount: 488,\n },\n {\n id: 'issue-37',\n issueNumber: 37,\n volumeDate: 'Jul 2026',\n title: 'Designing for Multi-Tenant White-Labeling at Scale',\n excerpt:\n 'Architecting a headless token graph that dynamically maps corporate brand identities and custom color palettes across 500+ enterprise subdomains in real time.',\n category: 'Design Tokens',\n tags: ['#design-tokens', '#architecture', '#enterprise'],\n readTime: '9 min read',\n date: 'Jul 14, 2026',\n commentsCount: 71,\n likesCount: 610,\n },\n]\n\n/**\n * — the registry Newsletter block collection as a web component.\n *\n * One block, one install unit: `variant` selects the section ('inline-band' |\n * 'archive' | 'signup-centered' | 'signup-split' | 'split-preview'); the\n * archive takes `publication-name`, `subtitle` and `subscriber-count`.\n * Class strings are React's verbatim per file. React state (useState) becomes\n * @state fields; every form dispatches a `subscribe` CustomEvent (detail:\n * { email }, bubbles, composed) — React has no submit callback. The search\n * field's prefix icon moves into 's prefix slot (same visual\n * result, no overlay positioning to maintain).\n *\n * NOTE: React's `variant` prop on NewsletterSignup ('centered' | 'split')\n * never changes its output — both stories render the same channel-selector\n * layout. Preserved here 1:1.\n */\nexport class UipNewsletter extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n variant: { reflect: true },\n publicationName: { attribute: 'publication-name' },\n subtitle: {},\n subscriberCount: { attribute: 'subscriber-count' },\n inlineEmail: { state: true },\n inlineDone: { state: true },\n archiveEmail: { state: true },\n archiveDone: { state: true },\n archiveQuery: { state: true },\n archiveCategory: { state: true },\n signupEmail: { state: true },\n signupChannel: { state: true },\n signupDone: { state: true },\n signupPreview: { state: true },\n signupSubmitting: { state: true },\n previewEmail: { state: true },\n previewDone: { state: true },\n }\n\n variant: NewsletterVariant = 'inline-band'\n publicationName = 'The Unbundled Engineer'\n subtitle = 'Weekly architectural teardowns of modern design systems, web performance, and component registries.'\n subscriberCount = '42,500+ Subscribers · Top 1% on Substack'\n private inlineEmail = ''\n private inlineDone = false\n private archiveEmail = ''\n private archiveDone = false\n private archiveQuery = ''\n private archiveCategory = 'All Issues'\n private signupEmail = ''\n private signupChannel = 'architecture'\n private signupDone = false\n private signupPreview = 0\n private signupSubmitting = false\n private previewEmail = ''\n private previewDone = false\n private timer?: number\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'newsletter')\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.timer) window.clearTimeout(this.timer)\n }\n\n private emitSubscribe(email: string) {\n this.dispatchEvent(new CustomEvent('subscribe', { detail: { email }, bubbles: true, composed: true }))\n }\n\n private get filteredIssues() {\n const query = this.archiveQuery.trim().toLowerCase()\n return archiveIssues.filter((issue) => {\n const matchesCategory = this.archiveCategory === 'All Issues' || issue.category === this.archiveCategory\n const matchesSearch =\n !query ||\n issue.title.toLowerCase().includes(query) ||\n issue.excerpt.toLowerCase().includes(query) ||\n issue.tags.some((tag) => tag.toLowerCase().includes(query)) ||\n `issue #${issue.issueNumber}`.toLowerCase().includes(query)\n return matchesCategory && matchesSearch\n })\n }\n\n private categoryCount(cat: string) {\n if (cat === 'All Issues') return archiveIssues.length\n return archiveIssues.filter((issue) => issue.category === cat).length\n }\n\n private clearArchiveFilters() {\n this.archiveQuery = ''\n this.archiveCategory = 'All Issues'\n }\n\n render() {\n switch (this.variant) {\n case 'archive':\n return this.renderArchive()\n case 'signup-centered':\n case 'signup-split':\n return this.renderSignup()\n case 'split-preview':\n return this.renderSplitPreview()\n default:\n return this.renderInlineBand()\n }\n }\n\n private renderInlineBand() {\n return html`\n
\n
\n
\n
\n ${icon(Mail, 'mail', 'text-muted-foreground size-4')}\n Monthly\n
\n

\n Engineering notes on metric modelling, access control, and warehouse cost.\n

\n

\n Read by 8,400 data and finance engineers. One email a month, no product announcements.\n

\n
\n\n {\n e.preventDefault()\n if (!this.inlineEmail.trim()) return\n this.inlineDone = true\n this.emitSubscribe(this.inlineEmail)\n }}\n >\n
\n {\n this.inlineEmail = (e.target as UipInput).value\n }}\n >\n Subscribe\n
\n

\n ${this.inlineDone\n ? html`\n ${icon(Check, 'check', 'size-3')} Check your inbox to confirm.\n `\n : html`Unsubscribe in one click. We never share the list.`}\n

\n \n
\n
\n `\n }\n\n private renderSignup() {\n return html`\n \n
\n
\n \n ${icon(Mail, 'mail', 'text-primary size-3.5')} Engineering Dispatch & Architecture Radar\n \n

\n Ship notes, not marketing fluff.\n

\n

\n Join 18,400+ frontend architects, design engineers, and systems builders. Plain-text insights into\n component architecture, token systems, and dual-framework engineering.\n

\n
\n\n
\n
\n \n \n
\n \n ${icon(BellRing, 'bell-ring', 'text-primary size-4')} Select Dispatch Track\n \n Zero Spam Guarantee\n
\n \n Choose the telemetry streams you want delivered to your inbox.\n \n \n\n \n
\n ${channels.map((ch) => {\n const isSelected = this.signupChannel === ch.id\n return html`\n {\n this.signupChannel = ch.id\n }}\n >\n
\n
\n \n ${isSelected\n ? html`
`\n : nothing}\n
\n ${ch.title}\n
\n ${ch.frequency}\n
\n

${ch.description}

\n
\n `\n })}\n
\n\n \n\n ${!this.signupDone\n ? html`\n {\n e.preventDefault()\n if (!this.signupEmail || !this.signupEmail.includes('@')) return\n this.signupSubmitting = true\n const email = this.signupEmail\n this.timer = window.setTimeout(() => {\n this.signupSubmitting = false\n this.signupDone = true\n this.emitSubscribe(email)\n }, 400)\n }}\n >\n
\n {\n this.signupEmail = (e.target as UipInput).value\n }}\n >\n \n Subscribe to Stream\n ${icon(Send, 'send', 'size-3.5')}\n \n
\n
\n Plain text • 1-click unsubscribe\n 18,412 Active Subscribers\n
\n \n `\n : html`\n
\n
\n ${icon(Check, 'check', 'size-5')}\n
\n

Dispatches Activated!

\n

\n Verification sent to ${this.signupEmail}.\n Check your inbox to confirm delivery.\n

\n
\n `}\n \n \n
\n\n
\n
\n

\n ${icon(BookOpen, 'book-open', 'text-primary size-3.5')} Archive Sampler\n

\n \n Issue #${signupIssues[this.signupPreview].id}\n \n
\n\n
\n ${signupIssues.map(\n (issue, idx) => html`\n {\n this.signupPreview = idx\n }}\n >\n
\n ${issue.date} • Issue #${issue.id} \n ${issue.reads}\n
\n

${issue.title}

\n

${issue.snippet}

\n\n
\n ${issue.tags.map(\n (tag) => html`\n #${tag}\n `,\n )}\n
\n
\n `,\n )}\n
\n\n \n Prefer RSS feeds?\n \n uipkge.dev/rss.xml ${icon(ArrowRight, 'arrow-right', 'size-3')}\n \n \n \n \n \n \n `\n }\n\n private renderSplitPreview() {\n return html`\n
\n
\n
\n
\n \n ${icon(Mail, 'mail', 'size-3')} Monthly\n \n

\n Notes from the people who build it\n

\n

\n One email a month on metric modelling, access control, and warehouse cost. No product announcements.\n

\n\n {\n e.preventDefault()\n if (!this.previewEmail.trim()) return\n this.previewDone = true\n this.emitSubscribe(this.previewEmail)\n }}\n >\n
\n {\n this.previewEmail = (e.target as UipInput).value\n }}\n >\n Subscribe\n
\n

\n ${this.previewDone\n ? html`\n ${icon(Check, 'check', 'size-3')} Check your inbox to confirm.\n `\n : html`8,400 subscribers · unsubscribe in one click.`}\n

\n \n
\n\n \n \n
\n Last issue\n ${lastIssue.date} · ${lastIssue.readTime} \n
\n\n

${lastIssue.subject}

\n\n \n\n

${lastIssue.opening}

\n\n Read the full issue\n \n \n
\n
\n
\n `\n }\n\n private renderArchive() {\n const filtered = this.filteredIssues\n return html`\n
\n
\n \n ${icon(Users, 'users', 'size-3.5 shrink-0')}\n ${this.subscriberCount}\n
\n\n

\n ${this.publicationName}\n

\n\n

${this.subtitle}

\n\n
\n ${!this.archiveDone\n ? html`\n
\n {\n e.preventDefault()\n if (!this.archiveEmail || !this.archiveEmail.includes('@')) return\n this.archiveDone = true\n this.emitSubscribe(this.archiveEmail)\n }}\n >\n {\n this.archiveEmail = (e.target as UipInput).value\n }}\n >\n \n Subscribe for Free\n \n \n \n Free weekly issues\n Zero spam\n 1-click unsubscribe\n

\n
\n `\n : html`\n \n ${icon(Check, 'check', 'size-4 shrink-0')}\n You’re subscribed! Check your inbox for confirmation.\n
\n `}\n \n \n\n
\n
\n \n Pinned Spotlight Edition\n \n \n ${icon(Zap, 'zap', 'size-3')} Latest Release\n \n
\n\n \n
\n
\n
\n
\n \n Issue #${featuredIssue.issueNumber} · ${featuredIssue.volumeDate}\n \n ${featuredIssue.category}\n \n ${icon(Clock, 'clock', 'size-3')} ${featuredIssue.readTime}\n \n
\n\n \n ${featuredIssue.title}\n \n\n

${featuredIssue.excerpt}

\n
\n\n
\n
\n ${featuredIssue.tags.map(\n (tag) => html`\n ${tag}\n `,\n )}\n
\n\n
\n
\n \n ${icon(Calendar, 'calendar', 'size-3.5')} ${featuredIssue.date}\n \n \n ${icon(MessageSquare, 'message-square', 'size-3.5')} ${featuredIssue.commentsCount} comments\n \n \n ${icon(Heart, 'heart', 'size-3.5')} ${featuredIssue.likesCount}\n \n
\n\n \n Read Issue\n ${icon(ArrowRight, 'arrow-right', 'size-3.5 transition-transform group-hover:translate-x-0.5')}\n \n
\n
\n
\n\n
\n
\n
\n
\n \n \n \n
\n registry-teardown.ts\n
\n
\n
// Own your component code
\n
$ npx shadcn@latest add @uipkge/card
\n
✔ Fetched raw TypeScript TSX
\n
✔ Merged local Tailwind v4 tokens
\n
// Zero runtime package lock-in
\n
\n
\n \n Zero npm deps\n \n \n Tailwind v4\n \n \n OKLCH\n \n
\n
\n
\n
\n \n
\n\n
\n
\n
\n {\n this.archiveQuery = (e.target as UipInput).value\n }}\n >\n ${icon(Search, 'search', 'size-4')}\n \n
\n\n
\n Showing ${filtered.length} ${filtered.length === 1 ? 'edition' : 'editions'} \n ${this.archiveQuery || this.archiveCategory !== 'All Issues'\n ? html`\n Reset filters ${icon(X, 'x', 'size-3')}\n `\n : nothing}\n
\n
\n\n
\n ${archiveCategories.map((cat) => {\n const isSelected = this.archiveCategory === cat\n return html`\n {\n this.archiveCategory = cat\n }}\n >\n ${cat}\n \n ${this.categoryCount(cat)}\n \n \n `\n })}\n
\n
\n\n
\n ${filtered.length > 0\n ? html`\n
\n ${filtered.map(\n (issue) => html`\n \n \n
\n \n Issue #${issue.issueNumber} · ${issue.volumeDate}\n \n \n ${icon(Clock, 'clock', 'size-3')} ${issue.readTime}\n \n
\n\n \n ${issue.title}\n \n\n \n ${issue.excerpt}\n \n \n\n \n
\n ${issue.tags.map(\n (tag) => html`\n ${tag}\n `,\n )}\n
\n \n\n \n
\n \n ${icon(Calendar, 'calendar', 'size-3.5')} ${issue.date}\n \n \n ${icon(MessageSquare, 'message-square', 'size-3.5')} ${issue.commentsCount}\n \n \n ${icon(Heart, 'heart', 'size-3.5')} ${issue.likesCount}\n \n
\n\n \n Read Issue\n ${icon(ArrowRight, 'arrow-right', 'size-3.5 transition-transform group-hover:translate-x-0.5')}\n \n \n \n `,\n )}\n
\n `\n : html`\n
\n ${icon(Newspaper, 'newspaper', 'text-muted-foreground/60 mx-auto size-8')}\n

No issues found

\n

\n No newsletter issues matched “${this.archiveQuery}” in ${this.archiveCategory}.\n

\n
\n \n Clear search & filters\n \n
\n
\n `}\n
\n\n \n
\n

Never miss a teardown

\n

\n Published every Tuesday morning. Zero sponsor promotions, purely deep technical architecture.\n

\n
\n\n
\n \n ${icon(Rss, 'rss', 'size-3.5')} RSS Feed\n \n {\n const input = this.renderRoot.querySelector('#newsletter-archive-email-lit')\n input?.focus()\n }}\n >\n ${icon(Bookmark, 'bookmark', 'size-3.5')} Join Newsletter\n \n
\n \n \n `\n }\n}\n\ncustomElements.get('uip-newsletter') || customElements.define('uip-newsletter', UipNewsletter)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-newsletter': UipNewsletter\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/newsletter/newsletter.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/card.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/separator.json" ] }