{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "stats-band",
  "title": "Stats Band",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/stats-band/StatsBand.svelte",
      "content": "<script lang=\"ts\">\n  import type { Component } from 'svelte'\n  import { Check, Clock, Copy, Globe, ShieldCheck, TrendingUp, Users, Zap } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { cn } from '$lib/utils'\n\n  interface Props {\n    variant?: 'plain' | 'bordered'\n  }\n\n  let { variant = 'bordered' }: Props = $props()\n\n  type Timeframe = 'realtime' | '24h' | '7d' | '30d'\n\n  let selectedTimeframe: Timeframe = $state('realtime')\n  let activeStatIndex: number | null = $state(null)\n  let copied = $state(false)\n\n  interface MetricData {\n    id: string\n    label: string\n    subtitle: string\n    values: Record<Timeframe, { main: string; change: string; isPositive: boolean; note: string }>\n    icon: Component\n    breakdown: { region: string; val: string; status: string }[]\n  }\n\n  const timeframes: { id: Timeframe; label: string }[] = [\n    { id: 'realtime', label: 'Live P99' },\n    { id: '24h', label: '24H' },\n    { id: '7d', label: '7D' },\n    { id: '30d', label: '30D' },\n  ]\n\n  const stats: MetricData[] = [\n    {\n      id: 'uptime',\n      label: 'Platform Availability',\n      subtitle: 'Multi-region Active-Active SLA',\n      icon: ShieldCheck,\n      values: {\n        realtime: { main: '100.00%', change: '0 incident in 90d', isPositive: true, note: 'Zero degradation' },\n        '24h': { main: '99.95%', change: '+0.001%', isPositive: true, note: '100% healthy' },\n        '7d': { main: '99.995%', change: '+0.005%', isPositive: true, note: 'Target > 99.99%' },\n        '30d': { main: '99.988%', change: '+0.02%', isPositive: true, note: 'Statutory SLA met' },\n      },\n      breakdown: [\n        { region: 'us-east-1 (N. Virginia)', val: '100.0%', status: 'Operational' },\n        { region: 'eu-west-1 (Frankfurt)', val: '100.0%', status: 'Operational' },\n        { region: 'ap-southeast-1 (Singapore)', val: '100.0%', status: 'Operational' },\n        { region: 'sa-east-1 (São Paulo)', val: '99.99%', status: 'Operational' },\n      ],\n    },\n    {\n      id: 'throughput',\n      label: 'Component Installs & Pulls',\n      subtitle: 'Daily registry resolutions',\n      icon: Zap,\n      values: {\n        realtime: { main: '1.42M', change: '+34.2k / hr', isPositive: true, note: 'Peak throughput' },\n        '24h': { main: '3.89M', change: '+22.4% vs prev', isPositive: true, note: '320k unique repos' },\n        '7d': { main: '26.4M', change: '+18.8%', isPositive: true, note: '1.4k new teams' },\n        '30d': { main: '104.2M', change: '+41.0%', isPositive: true, note: 'Global scale' },\n      },\n      breakdown: [\n        { region: 'Svelte 5 / SvelteKit Core', val: '58.2%', status: 'Dominant' },\n        { region: 'React 19 / Next.js Mirror', val: '41.8%', status: 'Growing' },\n        { region: 'Direct CLI Installations', val: '88.4%', status: 'Automated' },\n        { region: 'Manual Source Downloads', val: '11.6%', status: 'Direct' },\n      ],\n    },\n    {\n      id: 'latency',\n      label: 'Global Edge P99 Latency',\n      subtitle: 'Cloudflare Workers cache hits',\n      icon: Clock,\n      values: {\n        realtime: { main: '12ms', change: '-4ms reduction', isPositive: true, note: 'Global median: 8ms' },\n        '24h': { main: '14ms', change: '-2ms vs baseline', isPositive: true, note: '99.9% cache hit' },\n        '7d': { main: '16ms', change: '-12ms optimization', isPositive: true, note: 'Zero edge cold-starts' },\n        '30d': { main: '18ms', change: '-24ms', isPositive: true, note: 'V4 pipeline rollout' },\n      },\n      breakdown: [\n        { region: 'North America (Edge)', val: '9ms', status: 'Fastest' },\n        { region: 'Europe (Edge)', val: '11ms', status: 'Optimal' },\n        { region: 'Asia-Pacific (Edge)', val: '14ms', status: 'Optimal' },\n        { region: 'Latin America (Edge)', val: '18ms', status: 'Optimal' },\n      ],\n    },\n    {\n      id: 'satisfaction',\n      label: 'Enterprise Developer NPS',\n      subtitle: 'Surveyed across 450+ companies',\n      icon: Users,\n      values: {\n        realtime: { main: '+78', change: 'Top 1% dev tools', isPositive: true, note: 'Verified feedback' },\n        '24h': { main: '4.94 / 5', change: '99.2% positive', isPositive: true, note: 'From 1,240 ratings' },\n        '7d': { main: '+76', change: '+4 pts vs qtr', isPositive: true, note: '98% retention' },\n        '30d': { main: '+74', change: '+12 pts YoY', isPositive: true, note: 'Industry benchmark' },\n      },\n      breakdown: [\n        { region: 'Code Quality & Typing', val: '99.6%', status: '5 Stars' },\n        { region: 'Zero-Lockin Ownership', val: '98.8%', status: '5 Stars' },\n        { region: 'Visual Design Aesthetics', val: '99.2%', status: '5 Stars' },\n        { region: 'Documentation & Demos', val: '97.4%', status: '4.9 Stars' },\n      ],\n    },\n  ]\n\n  function copyStatsPayload() {\n    navigator.clipboard.writeText(JSON.stringify(stats, null, 2))\n    copied = true\n    setTimeout(() => (copied = false), 2000)\n  }\n</script>\n\n<section\n  data-slot=\"stats-band\"\n  class={cn(\n    'bg-card relative w-full overflow-hidden',\n    variant === 'bordered' ? 'border-border rounded-2xl border shadow-xs' : '',\n  )}\n>\n  <!-- Top Telemetry Header Bar -->\n  <div\n    class=\"border-border bg-muted/20 flex flex-col justify-between gap-4 border-b px-6 py-4 sm:flex-row sm:items-center\"\n  >\n    <div class=\"flex items-center gap-2.5\">\n      <div class=\"bg-success flex size-2.5 rounded-full\"></div>\n      <span class=\"text-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n        Real-time Telemetry & Performance Matrix\n      </span>\n      <Badge\n        variant=\"outline\"\n        class=\"border-success/20 bg-success/10 text-success text-success hidden font-mono text-xs sm:inline-flex\"\n      >\n        All Systems Operational\n      </Badge>\n    </div>\n\n    <div class=\"flex items-center gap-2 self-end sm:self-auto\">\n      <!-- Timeframe Selectors -->\n      <div class=\"bg-background border-border flex items-center rounded-lg border p-0.5\">\n        {#each timeframes as tf (tf.id)}\n          <button\n            type=\"button\"\n            class={cn(\n              'rounded px-2.5 py-1 font-mono text-xs transition-colors',\n              selectedTimeframe === tf.id\n                ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                : 'text-muted-foreground hover:text-foreground',\n            )}\n            onclick={() => (selectedTimeframe = tf.id)}\n          >\n            {tf.label}\n          </button>\n        {/each}\n      </div>\n\n      <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1.5 px-2 font-mono text-xs\" onclick={copyStatsPayload}>\n        {#if copied}\n          <Check class=\"text-success size-3\" />\n        {:else}\n          <Copy class=\"size-3\" />\n        {/if}\n        <span>{copied ? 'Copied' : 'JSON'}</span>\n      </Button>\n    </div>\n  </div>\n\n  <!-- 4-Column KPI Metric Cards -->\n  <div class=\"divide-border grid grid-cols-1 divide-y sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4\">\n    {#each stats as item, idx (item.id)}\n      {@const ItemIcon = item.icon}\n      <div\n        class={cn(\n          'hover:bg-muted/30 group relative cursor-pointer p-6 transition-colors',\n          activeStatIndex === idx ? 'bg-muted/40 ring-primary/30 ring-1 ring-inset' : '',\n        )}\n        onclick={() => (activeStatIndex = activeStatIndex === idx ? null : idx)}\n        onkeydown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            activeStatIndex = activeStatIndex === idx ? null : idx\n          }\n        }}\n        role=\"button\"\n        tabindex=\"0\"\n      >\n        <div class=\"flex items-start justify-between\">\n          <p class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">{item.label}</p>\n          <ItemIcon class=\"text-muted-foreground group-hover:text-primary size-4 transition-colors\" />\n        </div>\n\n        <div class=\"mt-3 flex items-baseline gap-2\">\n          <span class=\"text-foreground font-mono text-3xl font-bold tracking-tight\">\n            {item.values[selectedTimeframe].main}\n          </span>\n        </div>\n\n        <p class=\"text-muted-foreground mt-1 line-clamp-1 text-xs\">\n          {item.subtitle}\n        </p>\n\n        <div class=\"border-border/60 mt-4 flex items-center justify-between border-t pt-3\">\n          <span class=\"text-success inline-flex items-center gap-1 font-mono text-xs font-medium\">\n            <TrendingUp class=\"size-3\" />\n            {item.values[selectedTimeframe].change}\n          </span>\n          <span class=\"text-muted-foreground font-mono text-xs\">\n            {item.values[selectedTimeframe].note}\n          </span>\n        </div>\n      </div>\n    {/each}\n  </div>\n\n  <!-- Telemetry Regional Drilldown Drawer when a card is selected -->\n  {#if activeStatIndex !== null}\n    {@const active = stats[activeStatIndex]}\n    <div class=\"bg-muted/20 border-border space-y-4 border-t p-6\">\n      <div class=\"flex items-center justify-between\">\n        <div class=\"flex items-center gap-2\">\n          <Globe class=\"text-primary size-4\" />\n          <span class=\"text-foreground text-xs font-semibold\">\n            Regional Telemetry & Infrastructure Breakdown: {active?.label}\n          </span>\n        </div>\n        <Button variant=\"ghost\" size=\"sm\" class=\"h-6 text-xs\" onclick={() => (activeStatIndex = null)}>\n          Close Breakdown\n        </Button>\n      </div>\n\n      <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n        {#each active?.breakdown ?? [] as sub (sub.region)}\n          <div\n            class=\"border-border bg-background flex items-center justify-between rounded-lg border p-3 shadow-xs\"\n          >\n            <div>\n              <p class=\"text-foreground text-xs font-medium\">{sub.region}</p>\n              <p class=\"text-muted-foreground mt-0.5 font-mono text-xs\">{sub.status}</p>\n            </div>\n            <span class=\"text-success font-mono text-xs font-bold\">{sub.val}</span>\n          </div>\n        {/each}\n      </div>\n    </div>\n  {/if}\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/stats-band/StatsBand.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json"
  ],
  "description": "Interactive live telemetry and performance matrix band with multi-timeframe switching, real-time SLA verification, regional cluster drilldown, and JSON export.",
  "categories": [
    "marketing"
  ]
}