{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-proof-stat-counter-stream",
  "title": "Social Proof Stat Counter Stream",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/social-proof-stat-counter-stream/SocialProofStatCounterStream.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Activity, ArrowRight, CheckCircle2, Cpu, Globe2, Radio, Server } from 'lucide-react'\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  className?: string\n}\n\nexport function SocialProofStatCounterStream({\n  title = 'Real-time telemetry stream across global edge infrastructure.',\n  description = 'Continuously aggregated metrics verifying zero-latency invocation throughput and multi-region synchronization.',\n  className,\n}: SocialProofStatCounterStreamProps) {\n  const [invocations, setInvocations] = React.useState(48291040)\n  const [activeClones, setActiveClones] = React.useState(128450)\n  const [parityPercentage, setParityPercentage] = React.useState(100)\n  const [edgeRegionsCount, setEdgeRegionsCount] = React.useState(36)\n\n  const [latencies, setLatencies] = React.useState<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\n  React.useEffect(() => {\n    const tickerInterval = setInterval(() => {\n      setInvocations((prev) => prev + Math.floor(Math.random() * 12) + 3)\n      setLatencies((prev) => {\n        const next = [...prev]\n        const randomIdx = Math.floor(Math.random() * next.length)\n        const current = next[randomIdx].latencyMs\n        const delta = Math.random() > 0.5 ? 1 : -1\n        next[randomIdx] = {\n          ...next[randomIdx],\n          latencyMs: Math.max(5, Math.min(22, current + delta)),\n        }\n        return next\n      })\n    }, 1200)\n\n    return () => clearInterval(tickerInterval)\n  }, [])\n\n  return (\n    <section\n      data-slot=\"social-proof-stat-counter-stream\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#telemetry-stream\"\n            className=\"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 className=\"text-primary size-3.5 animate-pulse\" />\n            <span>Live Infrastructure Telemetry</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n        </div>\n\n        {/* KPI Stat Counter Grid */}\n        <div className=\"mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          {/* Stat Card 1 */}\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardContent className=\"space-y-2 p-6\">\n              <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span className=\"font-medium\">Total Edge Invocations</span>\n                <Activity className=\"text-primary size-4\" />\n              </div>\n              <div className=\"text-foreground font-mono text-3xl font-bold tracking-tight\">\n                {invocations.toLocaleString()}\n              </div>\n              <div className=\"text-success flex items-center gap-1 text-xs font-medium\">\n                <span className=\"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 className=\"border-border bg-card shadow-xs\">\n            <CardContent className=\"space-y-2 p-6\">\n              <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span className=\"font-medium\">Direct Registry Pulls</span>\n                <Cpu className=\"text-primary size-4\" />\n              </div>\n              <div className=\"text-foreground font-mono text-3xl font-bold tracking-tight\">\n                {activeClones.toLocaleString()}+\n              </div>\n              <div className=\"text-muted-foreground text-xs\">Across shadcn & shadcn-vue</div>\n            </CardContent>\n          </Card>\n\n          {/* Stat Card 3 */}\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardContent className=\"space-y-2 p-6\">\n              <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span className=\"font-medium\">Dual-Framework Parity</span>\n                <CheckCircle2 className=\"text-success size-4\" />\n              </div>\n              <div className=\"text-foreground font-mono text-3xl font-bold tracking-tight\">{parityPercentage}%</div>\n              <div className=\"text-success text-xs font-medium\">1:1 Vue & React token sync</div>\n            </CardContent>\n          </Card>\n\n          {/* Stat Card 4 */}\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardContent className=\"space-y-2 p-6\">\n              <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span className=\"font-medium\">Global Edge Locations</span>\n                <Globe2 className=\"text-primary size-4\" />\n              </div>\n              <div className=\"text-foreground font-mono text-3xl font-bold tracking-tight\">{edgeRegionsCount} PoPs</div>\n              <div className=\"text-muted-foreground text-xs\">Anycast routed worldwide</div>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Regional Latency Live Ticker Band */}\n        <div className=\"border-border bg-muted/30 mt-8 rounded-xl border p-4\">\n          <div className=\"flex flex-wrap items-center justify-between gap-4\">\n            <div className=\"text-muted-foreground flex items-center gap-2 text-xs font-bold tracking-wider uppercase\">\n              <Server className=\"text-primary size-4\" />\n              <span>Real-time Global Edge Round-Trip Latency</span>\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-3\">\n              {latencies.map((reg) => (\n                <div\n                  key={reg.city}\n                  className=\"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 className=\"text-muted-foreground\">{reg.city}:</span>\n                  <span className=\"text-success font-bold\">{reg.latencyMs}ms</span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/social-proof-stat-counter-stream/SocialProofStatCounterStream.tsx"
    },
    {
      "path": "packages/registry-react/blocks/social-proof-stat-counter-stream/index.ts",
      "content": "export { SocialProofStatCounterStream } from './SocialProofStatCounterStream'\nexport type { RegionLatency, SocialProofStatCounterStreamProps, StatItem } from './SocialProofStatCounterStream'\n",
      "type": "registry:block",
      "target": "~/components/blocks/social-proof-stat-counter-stream/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Live infrastructure telemetry and animated metric counter stream with real-time global edge round-trip latency ticker.",
  "categories": [
    "marketing",
    "feature"
  ]
}