{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "coming-soon",
  "title": "Coming Soon",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/coming-soon/ComingSoon.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export 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\n  export interface ComingSoonTeaser {\n    id: string\n    badge: string\n    title: string\n    description: string\n    icon: Component\n    statLabel: string\n    statValue: string\n    codeSnippet: string\n  }\n\n  export type WaitlistRole = 'frontend' | 'architect' | 'founder'\n\n  export interface ComingSoonProps {\n    targetIso?: string\n    statusUrl?: string\n    productVersion?: string\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { onDestroy, onMount } from 'svelte'\n  import {\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/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Input } from '$lib/components/ui/input'\n  import { Progress } from '$lib/components/ui/progress'\n  import { Separator } from '$lib/components/ui/separator'\n\n  let {\n    targetIso = '',\n    statusUrl = 'https://status.uipkge.dev',\n    productVersion = 'v2.0 Beta',\n    class: className,\n  }: ComingSoonProps = $props()\n\n  function pad(value: number) {\n    return String(value).padStart(2, '0')\n  }\n\n  const initialMilestones: ComingSoonMilestone[] = [\n    {\n      id: 'm1',\n      title: 'Multi-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\n  const teasers: ComingSoonTeaser[] = [\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-svelte@latest add https://uipkge.dev/r/svelte/ai-agent-orchestrator.json',\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      statLabel: 'Bundle Size Overhead',\n      statValue: '0.00 kB',\n      codeSnippet: 'npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/theme-customize.json',\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/svelte/init.json',\n    },\n  ]\n\n  const ROLES: { id: WaitlistRole; label: string }[] = [\n    { id: 'frontend', label: 'Frontend / UI' },\n    { id: 'architect', label: 'Tech Lead / Arch' },\n    { id: 'founder', label: 'CTO / Founder' },\n  ]\n\n  const deadline = targetIso ? new Date(targetIso).getTime() : Date.now() + 7 * 24 * 60 * 60 * 1000\n\n  let days = $state('00')\n  let hours = $state('00')\n  let minutes = $state('00')\n  let seconds = $state('00')\n  let activeTeaserIndex = $state(0)\n\n  // Waitlist form state\n  let email = $state('')\n  let role: WaitlistRole = $state('frontend')\n  let submitted = $state(false)\n  let queuePosition: number | null = $state(null)\n  let copiedReferral = $state(false)\n  let copiedCli = $state(false)\n\n  function tick() {\n    const diff = Math.max(0, deadline - Date.now())\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  let timer: ReturnType<typeof setInterval> | undefined\n\n  onMount(() => {\n    tick()\n    timer = setInterval(tick, 1000)\n  })\n\n  onDestroy(() => {\n    if (timer) clearInterval(timer)\n  })\n\n  function handleWaitlistSubmit(e: SubmitEvent) {\n    e.preventDefault()\n    if (!email) return\n    const randomPos = Math.floor(Math.random() * 80) + 120\n    queuePosition = randomPos\n    submitted = true\n  }\n\n  function copyReferral() {\n    navigator.clipboard.writeText(`https://uipkge.dev/invite?ref=queue_${queuePosition}`)\n    copiedReferral = true\n    setTimeout(() => (copiedReferral = false), 2000)\n  }\n\n  function copyTeaserSnippet(snippet: string) {\n    navigator.clipboard.writeText(snippet)\n    copiedCli = true\n    setTimeout(() => (copiedCli = false), 2000)\n  }\n\n  const units = $derived([\n    { label: 'Days', value: days },\n    { label: 'Hours', value: hours },\n    { label: 'Minutes', value: minutes },\n    { label: 'Seconds', value: seconds },\n  ])\n\n  const overallReadiness = $derived(\n    Math.round(initialMilestones.reduce((acc, m) => acc + m.completionPercent, 0) / initialMilestones.length),\n  )\n\n  const activeTeaser = $derived(teasers[activeTeaserIndex])\n  const ActiveTeaserIcon = $derived(activeTeaser.icon)\n</script>\n\n<section\n  data-slot=\"coming-soon\"\n  class={[\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    className,\n  ]}\n>\n  <!-- Top Telemetry & Status Bar -->\n  <div\n    class=\"border-border/70 mx-auto flex w-full max-w-6xl flex-col items-center justify-between gap-4 border-b pb-12 sm:flex-row\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <div\n        class=\"bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-xl font-bold shadow-xs\"\n      >\n        <Rocket class=\"size-5\" />\n      </div>\n      <div>\n        <div class=\"flex items-center gap-2\">\n          <span class=\"text-foreground text-sm font-semibold tracking-tight\">UIPKGE Engine</span>\n          <Badge variant=\"outline\" class=\"border-primary/30 text-primary px-1.5 py-0.5 font-mono text-xs\">\n            {productVersion}\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs\">Multi-framework registry & visual workbench suite</p>\n      </div>\n    </div>\n\n    <!-- Global SLA Readiness Pill -->\n    <div class=\"bg-muted/40 border-border flex items-center gap-3 rounded-full border px-3.5 py-1.5\">\n      <div class=\"bg-success flex size-2 animate-pulse rounded-full\"></div>\n      <span class=\"text-muted-foreground font-mono text-xs\">\n        Staging Infrastructure: <strong class=\"text-foreground font-semibold\">99.99% Operational</strong>\n      </span>\n      <Separator orientation=\"vertical\" class=\"h-3.5\" />\n      <a\n        href={statusUrl}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        class=\"text-primary inline-flex items-center gap-1 font-mono text-xs hover:underline\"\n      >\n        Live Status <ArrowUpRight class=\"size-3\" />\n      </a>\n    </div>\n  </div>\n\n  <!-- Main Hero & Countdown Body -->\n  <div class=\"mx-auto my-auto w-full max-w-6xl space-y-16 py-10\">\n    <!-- Headline & Subtitle -->\n    <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n      <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n        <Rocket class=\"text-primary size-3.5\" />\n        V2.0 General Availability Launch Matrix\n      </Badge>\n      <h1 class=\"text-foreground text-4xl leading-[1.1] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n        Production-grade design engineering workbenches.\n      </h1>\n      <p class=\"text-muted-foreground mx-auto max-w-2xl text-base leading-relaxed sm:text-lg\">\n        We are deploying 281+ production-grade primitives and composed workbenches with zero package dependencies. Own\n        your source code with complete architectural freedom.\n      </p>\n    </div>\n\n    <!-- High-Impact Digital Countdown Grid -->\n    <div class=\"mx-auto grid max-w-2xl grid-cols-2 gap-4 sm:grid-cols-4\">\n      {#each units as unit (unit.label)}\n        <Card\n          class=\"border-border bg-card/70 group hover:border-primary/40 relative overflow-hidden p-5 text-center shadow-xs backdrop-blur-xs transition-colors\"\n        >\n          <div class=\"text-foreground font-mono text-4xl font-bold tracking-tight tabular-nums sm:text-5xl\">\n            {unit.value}\n          </div>\n          <div class=\"text-muted-foreground mt-2 font-mono text-xs font-medium tracking-widest uppercase\">\n            {unit.label}\n          </div>\n          <div class=\"bg-primary/20 group-hover:bg-primary absolute right-0 bottom-0 left-0 h-0.5 transition-colors\"></div>\n        </Card>\n      {/each}\n    </div>\n\n    <!-- Early Access & Queue Tracker Section -->\n    <div class=\"mx-auto w-full max-w-xl\">\n      <Card class=\"border-border bg-card overflow-hidden shadow-sm\">\n        <CardHeader class=\"pb-4\">\n          <div class=\"flex items-center justify-between\">\n            <CardTitle class=\"flex items-center gap-2 text-base font-semibold\">\n              <ShieldCheck class=\"text-primary size-4\" />\n              Early Access Allocation\n            </CardTitle>\n            <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n              Batch #2 Opening Soon\n            </Badge>\n          </div>\n          <CardDescription class=\"text-xs\">\n            Request priority invite access. Get instant sandbox access to all 281+ blocks before general public launch.\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent>\n          {#if !submitted}\n            <form class=\"space-y-4\" onsubmit={handleWaitlistSubmit}>\n              <!-- Role Selector Tabs -->\n              <div class=\"space-y-1.5\">\n                <span class=\"text-foreground text-xs font-medium\">Your Primary Engineering Focus</span>\n                <div class=\"grid grid-cols-3 gap-2\">\n                  {#each ROLES as r (r.id)}\n                    <button\n                      type=\"button\"\n                      class={[\n                        'rounded-lg border px-2.5 py-1.5 text-center text-xs font-medium transition-colors',\n                        role === r.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                      onclick={() => (role = r.id)}\n                    >\n                      {r.label}\n                    </button>\n                  {/each}\n                </div>\n              </div>\n\n              <!-- Email Input & Submit -->\n              <div class=\"flex flex-col gap-2 sm:flex-row\">\n                <div class=\"relative flex-1\">\n                  <Input\n                    bind:value={email}\n                    type=\"email\"\n                    placeholder=\"you@company.com\"\n                    required\n                    class=\"h-10 font-mono text-xs\"\n                  />\n                </div>\n                <Button type=\"submit\" class=\"h-10 gap-1.5 px-5 text-xs font-semibold\">\n                  <span>Reserve Spot</span>\n                  <ArrowRight class=\"size-3.5\" />\n                </Button>\n              </div>\n              <p class=\"text-muted-foreground text-center text-xs\">\n                No spam. You will only receive your single cryptographic invite token.\n              </p>\n            </form>\n          {:else}\n            <div class=\"bg-muted/40 border-border space-y-4 rounded-xl border p-4 text-center\">\n              <div class=\"bg-success/10 text-success mx-auto flex size-10 items-center justify-center rounded-full\">\n                <Check class=\"size-5\" />\n              </div>\n              <div class=\"space-y-1\">\n                <p class=\"text-foreground text-sm font-semibold\">You are #{queuePosition} in queue!</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  Invitation tokens for Batch #2 will be delivered to\n                  <strong class=\"text-foreground font-mono\">{email}</strong>.\n                </p>\n              </div>\n\n              <div class=\"border-border flex flex-col items-center justify-between gap-3 border-t pt-2 sm:flex-row\">\n                <span class=\"text-muted-foreground font-mono text-xs\">Move up 5 spots per teammate invite:</span>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 font-mono text-xs\" onclick={copyReferral}>\n                  {#if copiedReferral}\n                    <Check class=\"text-success size-3\" />\n                  {:else}\n                    <Copy class=\"size-3\" />\n                  {/if}\n                  <span>{copiedReferral ? 'Copied Link' : 'Copy Invite Link'}</span>\n                </Button>\n              </div>\n            </div>\n          {/if}\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Interactive Feature Sneak-Peek Carousel & Terminal Preview -->\n    <div class=\"space-y-6\">\n      <div class=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n        <div>\n          <h2 class=\"text-foreground flex items-center gap-2 text-lg font-semibold tracking-tight\">\n            <Zap class=\"text-primary size-4\" />\n            Incoming Flagship Capabilities\n          </h2>\n          <p class=\"text-muted-foreground text-xs\">Sneak peek preview of the upcoming architecture release</p>\n        </div>\n\n        <!-- Teaser Navigation Tabs -->\n        <div class=\"bg-muted/40 border-border flex items-center gap-1.5 rounded-lg border p-1\">\n          {#each teasers as t, idx (t.id)}\n            <button\n              type=\"button\"\n              class={[\n                'rounded-md px-3 py-1 text-xs font-medium transition-colors',\n                activeTeaserIndex === idx\n                  ? 'bg-background text-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              ]}\n              onclick={() => (activeTeaserIndex = idx)}\n            >\n              {t.badge}\n            </button>\n          {/each}\n        </div>\n      </div>\n\n      <!-- Active Teaser Card -->\n      <Card class=\"border-border bg-card overflow-hidden\">\n        <div class=\"divide-border grid grid-cols-1 divide-y lg:grid-cols-12 lg:divide-x lg:divide-y-0\">\n          <div class=\"space-y-4 p-6 sm:p-8 lg:col-span-7\">\n            <div class=\"flex items-center gap-2.5\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <ActiveTeaserIcon class=\"size-5\" />\n              </div>\n              <Badge variant=\"secondary\" class=\"font-mono text-xs\">\n                {activeTeaser.badge}\n              </Badge>\n            </div>\n\n            <h3 class=\"text-foreground text-xl font-bold tracking-tight\">{activeTeaser.title}</h3>\n            <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n              {activeTeaser.description}\n            </p>\n\n            <div class=\"flex items-center gap-6 pt-2\">\n              <div>\n                <p class=\"text-muted-foreground font-mono text-xs\">{activeTeaser.statLabel}</p>\n                <p class=\"text-foreground mt-0.5 font-mono text-xl font-bold\">\n                  {activeTeaser.statValue}\n                </p>\n              </div>\n              <Separator orientation=\"vertical\" class=\"h-8\" />\n              <div>\n                <p class=\"text-muted-foreground font-mono text-xs\">Framework Support</p>\n                <p class=\"text-success mt-1 text-xs font-semibold\">Svelte 5 · Vue 3.5 · React 19 Parity</p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Terminal Snippet Box -->\n          <div class=\"bg-muted/20 flex flex-col justify-between space-y-4 p-6 lg:col-span-5\">\n            <div class=\"space-y-2\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground flex items-center gap-1.5 font-mono text-xs font-medium\">\n                  <Terminal class=\"size-3.5\" /> Direct CLI Command\n                </span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  class=\"h-7 gap-1.5 px-2 font-mono text-xs\"\n                  onclick={() => copyTeaserSnippet(activeTeaser.codeSnippet)}\n                >\n                  {#if copiedCli}\n                    <Check class=\"text-success size-3\" />\n                  {:else}\n                    <Copy class=\"size-3\" />\n                  {/if}\n                  <span>{copiedCli ? 'Copied' : 'Copy'}</span>\n                </Button>\n              </div>\n              <div\n                class=\"bg-background border-border text-foreground selection:bg-primary/20 overflow-x-auto rounded-lg border p-3 font-mono text-xs\"\n              >\n                <code>{activeTeaser.codeSnippet}</code>\n              </div>\n            </div>\n\n            <div\n              class=\"border-border/80 bg-background/50 text-muted-foreground flex items-center gap-2 rounded-lg border p-3 text-xs\"\n            >\n              <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n              <span>Transitive dependencies, OKLCH styles & TS types included.</span>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n\n    <!-- Launch Readiness Milestones Tracker -->\n    <div class=\"border-border/70 space-y-6 border-t pt-4\">\n      <div class=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n        <div>\n          <h2 class=\"text-foreground flex items-center gap-2 text-lg font-semibold tracking-tight\">\n            <Activity class=\"text-primary size-4\" />\n            V2.0 Launch Milestones & Engineering Progress\n          </h2>\n          <p class=\"text-muted-foreground text-xs\">Transparent real-time build and release status</p>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <span class=\"text-foreground font-mono text-xs font-semibold\">Overall Readiness: {overallReadiness}%</span>\n          <Progress value={overallReadiness} class=\"h-2 w-28\" />\n        </div>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3\">\n        {#each initialMilestones as m (m.id)}\n          <div\n            class=\"border-border bg-card hover:border-primary/30 flex flex-col justify-between space-y-3 rounded-xl border p-4 shadow-xs transition-colors\"\n          >\n            <div class=\"flex items-start justify-between gap-2\">\n              <Badge\n                variant=\"outline\"\n                class={[\n                  'px-2 py-0.5 font-mono text-xs',\n                  m.status === 'completed' && 'border-success/20 bg-success/10 text-success',\n                  m.status === 'in_progress' && 'border-warning/20 bg-warning/10 text-warning',\n                  m.status === 'scheduled' && 'bg-muted text-muted-foreground border-border',\n                ]}\n              >\n                {m.status === 'completed' ? 'Completed' : m.status === 'in_progress' ? 'In Progress' : 'Scheduled'}\n              </Badge>\n              <span class=\"text-muted-foreground font-mono text-xs\">{m.date}</span>\n            </div>\n\n            <div>\n              <p class=\"text-foreground text-xs leading-snug font-semibold\">{m.title}</p>\n              <p class=\"text-muted-foreground mt-1 font-mono text-xs\">{m.category}</p>\n            </div>\n\n            <div class=\"space-y-1 pt-1\">\n              <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n                <span>Progress</span>\n                <span>{m.completionPercent}%</span>\n              </div>\n              <Progress value={m.completionPercent} class=\"h-1.5\" />\n            </div>\n          </div>\n        {/each}\n      </div>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <footer\n    class=\"border-border text-muted-foreground mx-auto flex w-full max-w-6xl flex-col items-center justify-between gap-4 border-t pt-8 text-xs sm:flex-row\"\n  >\n    <div class=\"flex items-center gap-2\">\n      <span>&copy; {new Date().getFullYear()} UIPKGE. Open source under MIT License.</span>\n    </div>\n    <div class=\"flex items-center gap-4\">\n      <a\n        href=\"https://github.com/uday-a/uipkge-registry\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        class=\"hover:text-foreground transition-colors\"\n      >\n        GitHub\n      </a>\n      <Separator orientation=\"vertical\" class=\"h-3\" />\n      <a href=\"https://uipkge.dev\" target=\"_blank\" rel=\"noreferrer\" class=\"hover:text-foreground transition-colors\">\n        Registry Docs\n      </a>\n      <Separator orientation=\"vertical\" class=\"h-3\" />\n      <a href={statusUrl} target=\"_blank\" rel=\"noreferrer\" class=\"hover:text-foreground transition-colors\">\n        Status Page\n      </a>\n    </div>\n  </footer>\n</section>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/coming-soon/ComingSoon.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/progress.json",
    "https://uipkge.dev/r/svelte/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"
  ]
}