{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "coming-soon", "title": "Coming Soon", "type": "registry:page", "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" ], "files": [ { "path": "packages/elements-lit/src/blocks/coming-soon/coming-soon.ts", "content": "import { LitElement, css, html } from 'lit'\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 type IconNode,\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/input/input'\nimport type { UipInput } from '../../components/input/input'\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: IconNode\n iconName: string\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 iconName: '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:\n 'Perceptually uniform color spaces with automatic high-contrast dark mode switching & zero CSS bloat.',\n icon: Palette,\n iconName: '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 iconName: 'zap',\n statLabel: 'Global Median Latency',\n statValue: '8.4ms',\n codeSnippet: 'curl -s https://uipkge.dev/r/vue/init.json',\n },\n]\n\n// Card chrome follows the registry Card verbatim (see the login-01 block:\n// surfaces stay plain divs so per-card classes like the zinc terminal paint\n// land on the painted box). Defaults resolved from cardVariants + the React\n// part classes; per-card className merged the way cn() would.\nconst countdownCardClass =\n 'bg-card/70 text-card-foreground rounded-xl border border-border group hover:border-primary/40 relative overflow-hidden p-5 text-center shadow-xs backdrop-blur-xs transition-colors duration-150'\nconst plainCardClass =\n 'bg-card text-card-foreground rounded-xl border border-border overflow-hidden shadow-sm transition-colors duration-150'\n\n/**\n * — the registry ComingSoon block as a web component.\n *\n * Class strings are React's ComingSoon verbatim. React state (useState)\n * becomes @state fields; the 1s countdown interval starts in\n * `connectedCallback` (recomputed when `target-iso` changes) and is cleared\n * in `disconnectedCallback`, as are the copy-label timeouts. The waitlist\n * form is fully internal like React (no callbacks).\n */\nexport class UipComingSoon 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 targetIso: { attribute: 'target-iso' },\n statusUrl: { attribute: 'status-url' },\n productVersion: { attribute: 'product-version' },\n remaining: { state: true },\n activeTeaserIndex: { state: true },\n email: { state: true },\n audience: { state: true },\n submitted: { state: true },\n queuePosition: { state: true },\n copiedReferral: { state: true },\n copiedCli: { state: true },\n }\n\n targetIso = ''\n statusUrl = 'https://status.uipkge.dev'\n productVersion = 'v2.0 Beta'\n private remaining = { days: '00', hours: '00', minutes: '00', seconds: '00' }\n private activeTeaserIndex = 0\n private email = ''\n private audience: 'frontend' | 'architect' | 'founder' = 'frontend'\n private submitted = false\n private queuePosition: number | null = null\n private copiedReferral = false\n private copiedCli = false\n private deadline = 0\n private timer?: number\n private copyTimer?: 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', 'coming-soon')\n this.resetDeadline()\n this.tick()\n this.timer = window.setInterval(() => this.tick(), 1000)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.timer) window.clearInterval(this.timer)\n if (this.copyTimer) window.clearTimeout(this.copyTimer)\n }\n\n protected updated(changed: Map) {\n if (changed.has('targetIso')) this.resetDeadline()\n }\n\n private resetDeadline() {\n this.deadline = this.targetIso ? new Date(this.targetIso).getTime() : Date.now() + 7 * 24 * 60 * 60 * 1000\n }\n\n private tick() {\n const diff = Math.max(0, this.deadline - Date.now())\n this.remaining = {\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 private flashCopy(which: 'referral' | 'cli') {\n if (which === 'referral') this.copiedReferral = true\n else this.copiedCli = true\n if (this.copyTimer) window.clearTimeout(this.copyTimer)\n this.copyTimer = window.setTimeout(() => {\n this.copiedReferral = false\n this.copiedCli = false\n }, 2000)\n }\n\n private copyText(text: string, which: 'referral' | 'cli') {\n try {\n navigator.clipboard?.writeText(text)?.catch(() => {})\n } catch {\n // Clipboard unavailable (insecure context): still flash the label.\n }\n this.flashCopy(which)\n }\n\n private handleWaitlistSubmit(e: Event) {\n e.preventDefault()\n if (!this.email) return\n // Simulated VIP queue calculation\n this.queuePosition = Math.floor(Math.random() * 80) + 120\n this.submitted = true\n }\n\n private progressTrack(value: number, trackClass: string) {\n const clamped = Math.min(100, Math.max(0, value))\n return html`= 100 ? 'complete' : 'loading'}\n data-value=${clamped}\n data-max=\"100\"\n class=${trackClass}\n >\n = 100 ? 'complete' : 'loading'}\n data-value=${clamped}\n data-max=\"100\"\n class=\"bg-primary h-full w-full flex-1 transition-transform duration-500 ease-out motion-reduce:transition-none\"\n style=${`transform: translateX(-${100 - clamped}%)`}\n >\n `\n }\n\n render() {\n const units = [\n { label: 'Days', value: this.remaining.days },\n { label: 'Hours', value: this.remaining.hours },\n { label: 'Minutes', value: this.remaining.minutes },\n { label: 'Seconds', value: this.remaining.seconds },\n ]\n const overallReadiness = Math.round(\n initialMilestones.reduce((acc, m) => acc + m.completionPercent, 0) / initialMilestones.length,\n )\n const active = teasers[this.activeTeaserIndex]\n const year = new Date().getFullYear()\n return html`\n \n \n
\n \n ${icon(Rocket, 'rocket', 'size-5')}\n
\n
\n
\n UIPKGE Engine\n \n ${this.productVersion}\n \n
\n

Dual-framework registry & visual workbench suite

\n
\n \n\n
\n
\n \n Staging Infrastructure: 99.99% Operational\n \n
\n \n Live Status ${icon(ArrowUpRight, 'arrow-up-right', 'size-3')}\n \n \n \n\n
\n
\n \n ${icon(Rocket, 'rocket', 'text-primary size-3.5')} 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 ${units.map(\n (unit) => html`
\n
\n ${unit.value}\n
\n
\n ${unit.label}\n
\n
\n
`,\n )}\n
\n\n
\n
\n \n
\n \n ${icon(ShieldCheck, 'shield-check', 'text-primary size-4')} 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 ${!this.submitted\n ? html`
\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(\n (r) => html` {\n this.audience = r.id as 'frontend' | 'architect' | 'founder'\n }}\n >\n ${r.label}\n `,\n )}\n
\n
\n\n
\n
\n {\n this.email = (e.target as UipInput).value\n }}\n >\n
\n \n Reserve Spot\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n
\n

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

\n
`\n : html`
\n
\n ${icon(Check, 'check', 'size-5')}\n
\n
\n

You are #${this.queuePosition} in queue!

\n

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

\n
\n\n \n \n Move up 5 spots per teammate invite:\n \n \n this.copyText(`https://uipkge.dev/invite?ref=queue_${this.queuePosition}`, 'referral')}\n >\n ${this.copiedReferral\n ? icon(Check, 'check', 'text-success size-3')\n : icon(Copy, 'copy', 'size-3')}\n ${this.copiedReferral ? 'Copied Link' : 'Copy Invite Link'}\n \n
\n
`}\n
\n
\n \n\n
\n
\n
\n

\n ${icon(Zap, 'zap', 'text-primary size-4')} Incoming Flagship Capabilities\n

\n

Sneak peek preview of the upcoming architecture release

\n
\n\n
\n ${teasers.map(\n (t, idx) => html` {\n this.activeTeaserIndex = idx\n }}\n >\n ${t.badge}\n `,\n )}\n
\n
\n\n
\n
\n
\n
\n
${icon(active.icon, active.iconName, 'size-5')}
\n ${active.badge}\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
\n
\n
\n \n ${icon(Terminal, 'terminal', 'size-3.5')} Direct CLI Command\n \n this.copyText(active.codeSnippet, 'cli')}\n >\n ${this.copiedCli ? icon(Check, 'check', 'text-success size-3') : icon(Copy, 'copy', 'size-3')}\n ${this.copiedCli ? 'Copied' : 'Copy'}\n \n
\n \n ${active.codeSnippet}\n
\n
\n\n \n ${icon(CheckCircle2, 'circle-check-big', 'text-success size-3.5 shrink-0')}\n Transitive dependencies, OKLCH styles & TS types included.\n
\n
\n \n \n \n\n
\n
\n
\n

\n ${icon(Activity, 'activity', 'text-primary size-4')} V2.0 Launch Milestones & Engineering Progress\n

\n

Transparent real-time build and release status

\n
\n
\n \n Overall Readiness: ${overallReadiness}%\n \n ${this.progressTrack(overallReadiness, 'bg-primary/20 relative h-2 w-28 overflow-hidden rounded-full')}\n
\n
\n\n
\n ${initialMilestones.map(\n (m) => html`\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 ${this.progressTrack(m.completionPercent, 'bg-primary/20 relative h-1.5 w-full overflow-hidden rounded-full')}\n
\n
`,\n )}\n
\n \n \n\n \n
\n © ${year} 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 }\n}\n\ncustomElements.get('uip-coming-soon') || customElements.define('uip-coming-soon', UipComingSoon)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-coming-soon': UipComingSoon\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/coming-soon/coming-soon.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json" ] }