{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "coming-soon", "title": "Coming Soon", "type": "registry:page", "files": [ { "path": "packages/registry-react/blocks/coming-soon/ComingSoon.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n ArrowRight,\n ArrowUpRight,\n Bot,\n Check,\n CheckCircle2,\n Copy,\n Palette,\n Rocket,\n ShieldCheck,\n Terminal,\n Zap,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport interface ComingSoonProps {\n targetIso?: string\n statusUrl?: string\n productVersion?: string\n}\n\nfunction pad(value: number) {\n return String(value).padStart(2, '0')\n}\n\ninterface Milestone {\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: Milestone[] = [\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\ninterface FeatureTeaser {\n id: string\n badge: string\n title: string\n description: string\n icon: React.ElementType\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\nexport function ComingSoon({\n targetIso = '',\n statusUrl = 'https://status.uipkge.dev',\n productVersion = 'v2.0 Beta',\n}: ComingSoonProps) {\n const [remaining, setRemaining] = React.useState({ days: '00', hours: '00', minutes: '00', seconds: '00' })\n const [activeTeaserIndex, setActiveTeaserIndex] = React.useState(0)\n\n // Waitlist Form State\n const [email, setEmail] = React.useState('')\n const [role, setRole] = React.useState<'frontend' | 'architect' | 'founder'>('frontend')\n const [submitted, setSubmitted] = React.useState(false)\n const [queuePosition, setQueuePosition] = React.useState(null)\n const [copiedReferral, setCopiedReferral] = React.useState(false)\n const [copiedCli, setCopiedCli] = React.useState(false)\n\n // Countdown timer logic\n React.useEffect(() => {\n const deadline = targetIso ? new Date(targetIso).getTime() : Date.now() + 7 * 24 * 60 * 60 * 1000\n\n function tick() {\n const diff = Math.max(0, deadline - Date.now())\n setRemaining({\n days: pad(Math.floor(diff / 86_400_000)),\n hours: pad(Math.floor((diff % 86_400_000) / 3_600_000)),\n minutes: pad(Math.floor((diff % 3_600_000) / 60_000)),\n seconds: pad(Math.floor((diff % 60_000) / 1000)),\n })\n }\n\n tick()\n const timer = window.setInterval(tick, 1000)\n return () => window.clearInterval(timer)\n }, [targetIso])\n\n const handleWaitlistSubmit = (e: React.FormEvent) => {\n e.preventDefault()\n if (!email) return\n // Simulated VIP queue calculation\n const randomPos = Math.floor(Math.random() * 80) + 120\n setQueuePosition(randomPos)\n setSubmitted(true)\n }\n\n const copyReferral = () => {\n navigator.clipboard.writeText(`https://uipkge.dev/invite?ref=queue_${queuePosition}`)\n setCopiedReferral(true)\n setTimeout(() => setCopiedReferral(false), 2000)\n }\n\n const copyTeaserSnippet = (snippet: string) => {\n navigator.clipboard.writeText(snippet)\n setCopiedCli(true)\n setTimeout(() => setCopiedCli(false), 2000)\n }\n\n const units = [\n { label: 'Days', value: remaining.days },\n { label: 'Hours', value: remaining.hours },\n { label: 'Minutes', value: remaining.minutes },\n { label: 'Seconds', value: remaining.seconds },\n ]\n\n const overallReadiness = Math.round(\n initialMilestones.reduce((acc, m) => acc + m.completionPercent, 0) / initialMilestones.length,\n )\n\n return (\n \n {/* Top Telemetry & Status Bar */}\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 {/* Global SLA Readiness Pill */}\n
\n
\n \n Staging Infrastructure: 99.99% Operational\n \n \n \n Live Status \n \n
\n
\n\n {/* Main Hero & Countdown Body */}\n
\n {/* Headline & Subtitle */}\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 {/* High-Impact Digital Countdown Grid */}\n
\n {units.map((unit) => (\n \n
\n {unit.value}\n
\n
\n {unit.label}\n
\n
\n \n ))}\n
\n\n {/* Early Access & Queue Tracker Section */}\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 {!submitted ? (\n
\n {/* Role Selector Tabs */}\n
\n \n
\n {[\n { id: 'frontend', label: 'Frontend / UI' },\n { id: 'architect', label: 'Tech Lead / Arch' },\n { id: 'founder', label: 'CTO / Founder' },\n ].map((r) => (\n setRole(r.id as any)}\n >\n {r.label}\n \n ))}\n
\n
\n\n {/* Email Input & Submit */}\n
\n
\n setEmail(e.target.value)}\n required\n className=\"h-10 font-mono text-xs\"\n />\n
\n \n
\n

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

\n
\n ) : (\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 \n Move up 5 spots per teammate invite:\n \n \n {copiedReferral ? : }\n {copiedReferral ? 'Copied Link' : 'Copy Invite Link'}\n \n
\n
\n )}\n \n \n
\n\n {/* Interactive Feature Sneak-Peek Carousel & Terminal Preview */}\n
\n
\n
\n

\n \n Incoming Flagship Capabilities\n

\n

Sneak peek preview of the upcoming architecture release

\n
\n\n {/* Teaser Navigation Tabs */}\n
\n {teasers.map((t, idx) => (\n setActiveTeaserIndex(idx)}\n >\n {t.badge}\n \n ))}\n
\n
\n\n {/* Active Teaser Card */}\n {(() => {\n const active = teasers[activeTeaserIndex]\n const Icon = active.icon\n return (\n \n
\n
\n
\n
\n \n
\n \n {active.badge}\n \n
\n\n

{active.title}

\n

{active.description}

\n\n
\n
\n

{active.statLabel}

\n

{active.statValue}

\n
\n \n
\n

Framework Support

\n

Vue 3.5 & React 19 Parity

\n
\n
\n
\n\n {/* Terminal Snippet Box */}\n
\n
\n
\n \n Direct CLI Command\n \n copyTeaserSnippet(active.codeSnippet)}\n >\n {copiedCli ? : }\n {copiedCli ? 'Copied' : 'Copy'}\n \n
\n
\n {active.codeSnippet}\n
\n
\n\n
\n \n Transitive dependencies, OKLCH styles & TS types included.\n
\n
\n
\n \n )\n })()}\n
\n\n {/* Launch Readiness Milestones Tracker */}\n
\n
\n
\n

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

\n

Transparent real-time build and release status

\n
\n
\n \n Overall Readiness: {overallReadiness}%\n \n \n
\n
\n\n
\n {initialMilestones.map((m) => (\n \n
\n \n {m.status === 'completed' ? 'Completed' : m.status === 'in_progress' ? 'In Progress' : 'Scheduled'}\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 {/* Footer */}\n \n \n )\n}\nexport default ComingSoon\n", "type": "registry:page", "target": "~/components/blocks/ComingSoon.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/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" ] }