{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "coming-soon", "title": "Coming Soon", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/coming-soon/coming-soon.component.ts", "content": "// Interactive launch and maintenance workbench with high-impact countdown, VIP early\n// access waitlist queue allocator, live launch roadmap progress tracker, and feature\n// sneak-peek previews. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, computed, Input, OnDestroy, OnInit, signal } from '@angular/core'\nimport {\n Activity,\n ArrowRight,\n ArrowUpRight,\n Bot,\n Check,\n CheckCircle2,\n Copy,\n LucideAngularModule,\n Palette,\n Rocket,\n ShieldCheck,\n Terminal,\n Zap,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nfunction pad(value: number): string {\n return String(value).padStart(2, '0')\n}\n\nexport interface ComingSoonMilestone {\n id: string\n title: string\n category: string\n status: 'completed' | 'in_progress' | 'scheduled'\n completionPercent: number\n date: string\n}\n\nconst initialMilestones: ComingSoonMilestone[] = [\n {\n id: 'm1',\n title: 'Dual-Framework Compiler & Monorepo Architecture',\n category: 'Core Infra',\n status: 'completed',\n completionPercent: 100,\n date: 'Aug 15, 2026',\n },\n {\n id: 'm2',\n title: 'Tailwind CSS v4 OKLCH Dynamic Theming Engine',\n category: 'Design System',\n status: 'completed',\n completionPercent: 100,\n date: 'Aug 18, 2026',\n },\n {\n id: 'm3',\n title: 'Zero-Lockin Code Distribution Registry & CLI',\n category: 'DX & Tooling',\n status: 'completed',\n completionPercent: 100,\n date: 'Aug 21, 2026',\n },\n {\n id: 'm4',\n title: 'Multi-Region Edge Registry Cache & Global SLA Testing',\n category: 'Infrastructure',\n status: 'in_progress',\n completionPercent: 88,\n date: 'Target: 3 Days',\n },\n {\n id: 'm5',\n title: 'Public V2.0 Global General Availability Rollout',\n category: 'Release',\n status: 'scheduled',\n completionPercent: 0,\n date: 'Target: 7 Days',\n },\n]\n\nexport interface FeatureTeaser {\n id: string\n badge: string\n title: string\n description: string\n icon: LucideIconData\n statLabel: string\n statValue: string\n codeSnippet: string\n}\n\nconst teasers: FeatureTeaser[] = [\n {\n id: 'agentic',\n badge: 'Flagship AI',\n title: 'Autonomous Multi-Agent Orchestrator',\n description: 'Decompose complex workflow DAGs into parallel subagent execution with real-time vector memory.',\n icon: Bot,\n statLabel: 'DAG Execution Speed',\n statValue: '120ms P99',\n codeSnippet: 'npx shadcn-vue@latest add @uipkge/ai-agent-orchestrator',\n },\n {\n id: 'design',\n badge: 'Design Engineering',\n title: 'Tailwind v4 OKLCH Fluid Theme Tokens',\n description: 'Perceptually uniform color spaces with automatic high-contrast dark mode switching & zero CSS bloat.',\n icon: Palette,\n statLabel: 'Bundle Size Overhead',\n statValue: '0.00 kB',\n codeSnippet: 'npx shadcn-vue@latest add @uipkge/theme-customize',\n },\n {\n id: 'edge',\n badge: 'Ultra Low Latency',\n title: 'Cloudflare Workers Multi-Region Cache',\n description: 'Global component manifest resolution with smart geo-routing and edge-cached JSON trees.',\n icon: Zap,\n statLabel: 'Global Median Latency',\n statValue: '8.4ms',\n codeSnippet: 'curl -s https://uipkge.dev/r/vue/init.json',\n },\n]\n\nconst roleOptions = [\n { id: 'frontend', label: 'Frontend / UI' },\n { id: 'architect', label: 'Tech Lead / Arch' },\n { id: 'founder', label: 'CTO / Founder' },\n] as const\n\nexport type WaitlistRole = (typeof roleOptions)[number]['id']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-coming-soon, [ui-coming-soon]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n \n
\n \n \n
\n
\n
\n UIPKGE Engine\n \n {{ productVersion }}\n \n
\n

Dual-framework registry & visual workbench suite

\n
\n \n\n \n
\n
\n \n Staging Infrastructure: 99.99% Operational\n \n
\n \n Live Status \n \n
\n \n\n \n
\n \n
\n \n \n V2.0 General Availability Launch Matrix\n \n

\n Production-grade design engineering workbenches.\n

\n

\n We are deploying 281+ production-grade primitives and composed workbenches with zero package dependencies.\n Own your source code with complete architectural freedom.\n

\n
\n\n \n
\n @for (unit of units(); track unit.label) {\n \n
\n {{ unit.value }}\n
\n
\n {{ unit.label }}\n
\n
\n
\n }\n \n\n \n
\n
\n
\n
\n

\n \n Early Access Allocation\n

\n \n Batch #2 Opening Soon\n \n
\n

\n Request priority invite access. Get instant sandbox access to all 281+ blocks before general public\n launch.\n

\n
\n\n
\n @if (!submitted()) {\n
\n \n
\n \n
\n @for (r of roles; track r.id) {\n \n {{ r.label }}\n \n }\n
\n
\n\n \n
\n
\n \n
\n \n
\n

\n No spam. You will only receive your single cryptographic invite token.\n

\n
\n } @else {\n
\n
\n \n
\n
\n

You are #{{ queuePosition() }} in queue!

\n

\n Invitation tokens for Batch #2 will be delivered to\n {{ email() }}.\n

\n
\n\n
\n Move up 5 spots per teammate invite:\n \n @if (copiedReferral()) {\n \n } @else {\n \n }\n {{ copiedReferral() ? 'Copied Link' : 'Copy Invite Link' }}\n \n
\n
\n }\n
\n
\n
\n\n \n
\n
\n
\n

\n \n Incoming Flagship Capabilities\n

\n

Sneak peek preview of the upcoming architecture release

\n
\n\n \n
\n @for (t of teasersList; track t.id; let idx = $index) {\n \n {{ t.badge }}\n \n }\n
\n
\n\n \n
\n
\n
\n
\n
\n \n
\n \n {{ activeTeaser().badge }}\n \n
\n\n

{{ activeTeaser().title }}

\n

\n {{ activeTeaser().description }}\n

\n\n
\n
\n

{{ activeTeaser().statLabel }}

\n

\n {{ activeTeaser().statValue }}\n

\n
\n
\n
\n

Framework Support

\n

Vue 3.5 & React 19 Parity

\n
\n
\n
\n\n \n
\n
\n
\n \n Direct CLI Command\n \n \n @if (copiedCli()) {\n \n } @else {\n \n }\n {{ copiedCli() ? 'Copied' : 'Copy' }}\n \n
\n \n {{ activeTeaser().codeSnippet }}\n
\n
\n\n \n \n Transitive dependencies, OKLCH styles & TS types included.\n
\n
\n
\n \n \n\n \n
\n
\n
\n

\n \n V2.0 Launch Milestones & Engineering Progress\n

\n

Transparent real-time build and release status

\n
\n
\n Overall Readiness: {{ overallReadiness() }}%\n
\n
\n
\n\n
\n @for (m of milestones; track m.id) {\n \n
\n \n {{ milestoneLabel(m.status) }}\n \n {{ m.date }}\n
\n\n
\n

{{ m.title }}

\n

{{ m.category }}

\n
\n\n
\n
\n Progress\n {{ m.completionPercent }}%\n
\n
\n
\n
\n }\n
\n \n \n\n \n \n
\n © {{ currentYear }} UIPKGE. Open source under MIT License.\n
\n
\n \n GitHub\n \n
\n \n Registry Docs\n \n
\n \n Status Page\n \n
\n \n
\n `,\n})\nexport class UiComingSoonComponent implements OnInit, OnDestroy {\n protected readonly Activity = Activity\n protected readonly ArrowRight = ArrowRight\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly Rocket = Rocket\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Terminal = Terminal\n protected readonly Zap = Zap\n\n protected readonly milestones = initialMilestones\n protected readonly teasersList = teasers\n protected readonly roles = roleOptions\n\n @Input() targetIso = ''\n @Input() statusUrl = 'https://status.uipkge.dev'\n @Input() productVersion = 'v2.0 Beta'\n @Input('class') className?: string\n\n readonly days = signal('00')\n readonly hours = signal('00')\n readonly minutes = signal('00')\n readonly seconds = signal('00')\n readonly activeTeaserIndex = signal(0)\n\n // Waitlist form state\n readonly email = signal('')\n readonly role = signal('frontend')\n readonly submitted = signal(false)\n readonly queuePosition = signal(null)\n readonly copiedReferral = signal(false)\n readonly copiedCli = signal(false)\n\n private deadline = 0\n private timer: ReturnType | undefined\n private copyTimers: ReturnType[] = []\n\n readonly units = computed(() => [\n { label: 'Days', value: this.days() },\n { label: 'Hours', value: this.hours() },\n { label: 'Minutes', value: this.minutes() },\n { label: 'Seconds', value: this.seconds() },\n ])\n\n readonly overallReadiness = computed(() =>\n Math.round(initialMilestones.reduce((acc, m) => acc + m.completionPercent, 0) / initialMilestones.length),\n )\n\n readonly activeTeaser = computed(() => teasers[this.activeTeaserIndex()] ?? teasers[0])\n\n get currentYear(): number {\n return new Date().getFullYear()\n }\n\n get rootClass(): string {\n return cn(\n 'bg-background relative flex min-h-screen flex-col justify-between overflow-hidden px-4 py-16 sm:px-6 lg:px-8',\n this.className,\n )\n }\n\n ngOnInit(): void {\n this.deadline = this.targetIso ? new Date(this.targetIso).getTime() : Date.now() + 7 * 24 * 60 * 60 * 1000\n this.tick()\n this.timer = setInterval(() => this.tick(), 1000)\n }\n\n ngOnDestroy(): void {\n clearInterval(this.timer)\n this.copyTimers.forEach((t) => clearTimeout(t))\n }\n\n tick(): void {\n const diff = Math.max(0, this.deadline - Date.now())\n this.days.set(pad(Math.floor(diff / 86_400_000)))\n this.hours.set(pad(Math.floor((diff % 86_400_000) / 3_600_000)))\n this.minutes.set(pad(Math.floor((diff % 3_600_000) / 60_000)))\n this.seconds.set(pad(Math.floor((diff % 60_000) / 1000)))\n }\n\n onWaitlistSubmit(event: Event): void {\n event.preventDefault()\n this.handleWaitlistSubmit()\n }\n\n handleWaitlistSubmit(): void {\n if (!this.email()) return\n const randomPos = Math.floor(Math.random() * 80) + 120\n this.queuePosition.set(randomPos)\n this.submitted.set(true)\n }\n\n copyReferral(): void {\n void navigator.clipboard?.writeText(`https://uipkge.dev/invite?ref=queue_${this.queuePosition()}`)\n this.copiedReferral.set(true)\n this.copyTimers.push(setTimeout(() => this.copiedReferral.set(false), 2000))\n }\n\n copyTeaserSnippet(snippet: string): void {\n void navigator.clipboard?.writeText(snippet)\n this.copiedCli.set(true)\n this.copyTimers.push(setTimeout(() => this.copiedCli.set(false), 2000))\n }\n\n roleClass(id: WaitlistRole): string {\n return cn(\n 'rounded-lg border px-2.5 py-1.5 text-center text-xs font-medium transition-colors',\n this.role() === id\n ? 'border-primary bg-primary/10 text-primary font-semibold shadow-xs'\n : 'border-border bg-background text-muted-foreground hover:text-foreground',\n )\n }\n\n teaserTabClass(idx: number): string {\n return cn(\n 'rounded-md px-3 py-1 text-xs font-medium transition-colors',\n this.activeTeaserIndex() === idx\n ? 'bg-background text-foreground font-semibold shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n milestoneBadgeClass(status: ComingSoonMilestone['status']): string {\n return cn(\n 'px-2 py-0.5 font-mono text-xs',\n status === 'completed' && 'border-success/20 bg-success/10 text-success',\n status === 'in_progress' && 'border-warning/20 bg-warning/10 text-warning',\n status === 'scheduled' && 'bg-muted text-muted-foreground border-border',\n )\n }\n\n milestoneLabel(status: ComingSoonMilestone['status']): string {\n if (status === 'completed') return 'Completed'\n if (status === 'in_progress') return 'In Progress'\n return 'Scheduled'\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/coming-soon/coming-soon.component.ts" }, { "path": "packages/registry-angular/blocks/coming-soon/index.ts", "content": "export {\n UiComingSoonComponent,\n type ComingSoonMilestone,\n type FeatureTeaser,\n type WaitlistRole,\n} from './coming-soon.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/coming-soon/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Interactive launch and maintenance workbench with high-impact countdown, VIP early access waitlist queue allocator, live launch roadmap progress tracker, and feature sneak-peek previews.", "categories": [ "marketing" ] }