{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "social-proof-stat-counter-stream",
  "title": "Social Proof Stat Counter Stream",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/social-proof-stat-counter-stream/SocialProofStatCounterStream.vue",
      "content": "<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { Activity, ArrowRight, CheckCircle2, Cpu, Globe2, Radio, Server } from 'lucide-vue-next'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface StatItem {\n  id: string\n  label: string\n  currentValue: number\n  suffix: string\n  description: string\n}\n\nexport interface RegionLatency {\n  city: string\n  latencyMs: number\n}\n\nexport interface SocialProofStatCounterStreamProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<SocialProofStatCounterStreamProps>(), {\n  title: 'Real-time telemetry stream across global edge infrastructure.',\n  description:\n    'Continuously aggregated metrics verifying zero-latency invocation throughput and multi-region synchronization.',\n})\n\nconst invocations = ref(48291040)\nconst activeClones = ref(128450)\nconst parityPercentage = ref(100)\nconst edgeRegionsCount = ref(36)\n\nconst latencies = ref<RegionLatency[]>([\n  { city: 'San Jose (SJC)', latencyMs: 8 },\n  { city: 'Frankfurt (FRA)', latencyMs: 11 },\n  { city: 'Tokyo (NRT)', latencyMs: 9 },\n  { city: 'Singapore (SIN)', latencyMs: 12 },\n  { city: 'London (LHR)', latencyMs: 10 },\n  { city: 'Sydney (SYD)', latencyMs: 14 },\n])\n\nlet tickerInterval: any = null\n\nonMounted(() => {\n  tickerInterval = setInterval(() => {\n    invocations.value += Math.floor(Math.random() * 12) + 3\n    // Jitter latencies +/- 1ms\n    const randomIdx = Math.floor(Math.random() * latencies.value.length)\n    const current = latencies.value[randomIdx].latencyMs\n    const delta = Math.random() > 0.5 ? 1 : -1\n    latencies.value[randomIdx].latencyMs = Math.max(5, Math.min(22, current + delta))\n  }, 1200)\n})\n\nonUnmounted(() => {\n  if (tickerInterval) clearInterval(tickerInterval)\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"social-proof-stat-counter-stream\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#telemetry-stream\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <Radio class=\"text-primary size-3.5 animate-pulse\" />\n          <span>Live Infrastructure Telemetry</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          {{ title }}\n        </h2>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n      </div>\n\n      <!-- KPI Stat Counter Grid -->\n      <div class=\"mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <!-- Stat Card 1 -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardContent class=\"space-y-2 p-6\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"font-medium\">Total Edge Invocations</span>\n              <Activity class=\"text-primary size-4\" />\n            </div>\n            <div class=\"text-foreground font-mono text-3xl font-bold tracking-tight\">\n              {{ invocations.toLocaleString() }}\n            </div>\n            <div class=\"text-success flex items-center gap-1 text-xs font-medium\">\n              <span class=\"bg-success size-1.5 rounded-full\" />\n              <span>Streaming live</span>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Stat Card 2 -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardContent class=\"space-y-2 p-6\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"font-medium\">Direct Registry Pulls</span>\n              <Cpu class=\"text-primary size-4\" />\n            </div>\n            <div class=\"text-foreground font-mono text-3xl font-bold tracking-tight\">\n              {{ activeClones.toLocaleString() }}+\n            </div>\n            <div class=\"text-muted-foreground text-xs\">Across shadcn & shadcn-vue</div>\n          </CardContent>\n        </Card>\n\n        <!-- Stat Card 3 -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardContent class=\"space-y-2 p-6\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"font-medium\">Dual-Framework Parity</span>\n              <CheckCircle2 class=\"text-success size-4\" />\n            </div>\n            <div class=\"text-foreground font-mono text-3xl font-bold tracking-tight\">{{ parityPercentage }}%</div>\n            <div class=\"text-success text-xs font-medium\">1:1 Vue & React token sync</div>\n          </CardContent>\n        </Card>\n\n        <!-- Stat Card 4 -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardContent class=\"space-y-2 p-6\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span class=\"font-medium\">Global Edge Locations</span>\n              <Globe2 class=\"text-primary size-4\" />\n            </div>\n            <div class=\"text-foreground font-mono text-3xl font-bold tracking-tight\">{{ edgeRegionsCount }} PoPs</div>\n            <div class=\"text-muted-foreground text-xs\">Anycast routed worldwide</div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Regional Latency Live Ticker Band -->\n      <div class=\"border-border bg-muted/30 mt-8 rounded-xl border p-4\">\n        <div class=\"flex flex-wrap items-center justify-between gap-4\">\n          <div class=\"text-muted-foreground flex items-center gap-2 text-xs font-bold tracking-wider uppercase\">\n            <Server class=\"text-primary size-4\" />\n            <span>Real-time Global Edge Round-Trip Latency</span>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-3\">\n            <div\n              v-for=\"reg in latencies\"\n              :key=\"reg.city\"\n              class=\"border-border bg-background inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 font-mono text-xs\"\n            >\n              <span class=\"text-muted-foreground\">{{ reg.city }}:</span>\n              <span class=\"text-success font-bold\">{{ reg.latencyMs }}ms</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/social-proof-stat-counter-stream/SocialProofStatCounterStream.vue"
    },
    {
      "path": "packages/registry-vue/blocks/social-proof-stat-counter-stream/index.ts",
      "content": "export { default as SocialProofStatCounterStream } from './SocialProofStatCounterStream.vue'\nexport type { RegionLatency, SocialProofStatCounterStreamProps, StatItem } from './SocialProofStatCounterStream.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/social-proof-stat-counter-stream/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Live infrastructure telemetry and animated metric counter stream with real-time global edge round-trip latency ticker.",
  "categories": [
    "marketing",
    "feature"
  ]
}