{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "coming-soon",
  "title": "Coming Soon",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/coming-soon/ComingSoon.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\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-vue-next'\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'\n\ninterface Props {\n  targetIso?: string\n  statusUrl?: string\n  productVersion?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  targetIso: '',\n  statusUrl: 'https://status.uipkge.dev',\n  productVersion: 'v2.0 Beta',\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: any\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 deadline = props.targetIso ? new Date(props.targetIso).getTime() : Date.now() + 7 * 24 * 60 * 60 * 1000\n\nconst days = ref('00')\nconst hours = ref('00')\nconst minutes = ref('00')\nconst seconds = ref('00')\nconst activeTeaserIndex = ref(0)\n\n// Waitlist form state\nconst email = ref('')\nconst role = ref<'frontend' | 'architect' | 'founder'>('frontend')\nconst submitted = ref(false)\nconst queuePosition = ref<number | null>(null)\nconst copiedReferral = ref(false)\nconst copiedCli = ref(false)\n\nfunction tick() {\n  const diff = Math.max(0, deadline - Date.now())\n  days.value = pad(Math.floor(diff / 86_400_000))\n  hours.value = pad(Math.floor((diff % 86_400_000) / 3_600_000))\n  minutes.value = pad(Math.floor((diff % 3_600_000) / 60_000))\n  seconds.value = pad(Math.floor((diff % 60_000) / 1000))\n}\n\nlet timer: ReturnType<typeof setInterval> | undefined\n\nonMounted(() => {\n  tick()\n  timer = setInterval(tick, 1000)\n})\n\nonUnmounted(() => {\n  if (timer) clearInterval(timer)\n})\n\nfunction handleWaitlistSubmit() {\n  if (!email.value) return\n  const randomPos = Math.floor(Math.random() * 80) + 120\n  queuePosition.value = randomPos\n  submitted.value = true\n}\n\nfunction copyReferral() {\n  navigator.clipboard.writeText(`https://uipkge.dev/invite?ref=queue_${queuePosition.value}`)\n  copiedReferral.value = true\n  setTimeout(() => (copiedReferral.value = false), 2000)\n}\n\nfunction copyTeaserSnippet(snippet: string) {\n  navigator.clipboard.writeText(snippet)\n  copiedCli.value = true\n  setTimeout(() => (copiedCli.value = false), 2000)\n}\n\nconst units = computed(() => [\n  { label: 'Days', value: days.value },\n  { label: 'Hours', value: hours.value },\n  { label: 'Minutes', value: minutes.value },\n  { label: 'Seconds', value: seconds.value },\n])\n\nconst overallReadiness = computed(() =>\n  Math.round(initialMilestones.reduce((acc, m) => acc + m.completionPercent, 0) / initialMilestones.length),\n)\n</script>\n\n<template>\n  <section\n    data-slot=\"coming-soon\"\n    class=\"bg-background relative flex min-h-screen flex-col justify-between overflow-hidden px-4 py-16 sm:px-6 lg:px-8\"\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              {{ props.productVersion }}\n            </Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">Dual-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\" />\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=\"props.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        <Card\n          v-for=\"unit in units\"\n          :key=\"unit.label\"\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\" />\n        </Card>\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\n              launch.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent>\n            <form v-if=\"!submitted\" class=\"space-y-4\" @submit.prevent=\"handleWaitlistSubmit\">\n              <!-- Role Selector Tabs -->\n              <div class=\"space-y-1.5\">\n                <label class=\"text-foreground text-xs font-medium\">Your Primary Engineering Focus</label>\n                <div class=\"grid grid-cols-3 gap-2\">\n                  <button\n                    v-for=\"r in [\n                      { id: 'frontend', label: 'Frontend / UI' },\n                      { id: 'architect', label: 'Tech Lead / Arch' },\n                      { id: 'founder', label: 'CTO / Founder' },\n                    ]\"\n                    :key=\"r.id\"\n                    type=\"button\"\n                    class=\"rounded-lg border px-2.5 py-1.5 text-center text-xs font-medium transition-colors\"\n                    :class=\"\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                    @click=\"role = r.id as any\"\n                  >\n                    {{ r.label }}\n                  </button>\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                    v-model=\"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\n            <div v-else 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                  >.\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\" @click=\"copyReferral\">\n                  <Check v-if=\"copiedReferral\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                  <span>{{ copiedReferral ? 'Copied Link' : 'Copy Invite Link' }}</span>\n                </Button>\n              </div>\n            </div>\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            <button\n              v-for=\"(t, idx) in teasers\"\n              :key=\"t.id\"\n              type=\"button\"\n              class=\"rounded-md px-3 py-1 text-xs font-medium transition-colors\"\n              :class=\"\n                activeTeaserIndex === idx\n                  ? 'bg-background text-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground'\n              \"\n              @click=\"activeTeaserIndex = idx\"\n            >\n              {{ t.badge }}\n            </button>\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                  <component :is=\"teasers[activeTeaserIndex].icon\" class=\"size-5\" />\n                </div>\n                <Badge variant=\"secondary\" class=\"font-mono text-xs\">\n                  {{ teasers[activeTeaserIndex].badge }}\n                </Badge>\n              </div>\n\n              <h3 class=\"text-foreground text-xl font-bold tracking-tight\">{{ teasers[activeTeaserIndex].title }}</h3>\n              <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                {{ teasers[activeTeaserIndex].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\">{{ teasers[activeTeaserIndex].statLabel }}</p>\n                  <p class=\"text-foreground mt-0.5 font-mono text-xl font-bold\">\n                    {{ teasers[activeTeaserIndex].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\">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                    @click=\"copyTeaserSnippet(teasers[activeTeaserIndex].codeSnippet)\"\n                  >\n                    <Check v-if=\"copiedCli\" class=\"text-success size-3\" />\n                    <Copy v-else class=\"size-3\" />\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>{{ teasers[activeTeaserIndex].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\"\n              >Overall Readiness: {{ overallReadiness }}%</span\n            >\n            <Progress :model-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          <div\n            v-for=\"m in initialMilestones\"\n            :key=\"m.id\"\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=\"px-2 py-0.5 font-mono text-xs\"\n                :class=\"[\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 :model-value=\"m.completionPercent\" class=\"h-1.5\" />\n            </div>\n          </div>\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\"\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=\"props.statusUrl\" target=\"_blank\" rel=\"noreferrer\" class=\"hover:text-foreground transition-colors\">\n          Status Page\n        </a>\n      </div>\n    </footer>\n  </section>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/ComingSoon.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/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"
  ]
}