{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "stats-band",
  "title": "Stats Band",
  "type": "registry:block",
  "description": "Interactive live telemetry and performance matrix band with multi-timeframe switching, real-time SLA verification, regional cluster drilldown, and JSON export.",
  "categories": [
    "marketing"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/stats-band/stats-band.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { Check, Clock, Copy, Globe, ShieldCheck, TrendingUp, Users, Zap, type IconNode } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\n\ntype Timeframe = 'realtime' | '24h' | '7d' | '30d'\n\ninterface MetricData {\n  id: string\n  label: string\n  subtitle: string\n  values: Record<Timeframe, { main: string; change: string; isPositive: boolean; note: string }>\n  icon: IconNode\n  iconName: string\n  breakdown: { region: string; val: string; status: string }[]\n}\n\n// `iconName` beside each icon node: lucide nodes don't carry their kebab-case\n// name, which icon() needs for the lucide-<name> class.\nconst stats: MetricData[] = [\n  {\n    id: 'uptime',\n    label: 'Platform Availability',\n    subtitle: 'Multi-region Active-Active SLA',\n    icon: ShieldCheck,\n    iconName: 'shield-check',\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    iconName: '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: 'Vue 3.5 / Nuxt 4 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    iconName: '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    iconName: '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\nconst 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/**\n * <uip-stats-band> — the registry StatsBand block as a web component.\n *\n * Class strings are React's StatsBand verbatim. React state (useState) becomes\n * @state fields. `variant` mirrors React's prop (default 'bordered').\n * NOTE: React's demo renders the \"Plain\" story with no variant, which falls\n * back to the same 'bordered' default — preserved here 1:1.\n */\nexport class UipStatsBand extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    variant: { reflect: true },\n    selectedTimeframe: { state: true },\n    activeStatIndex: { state: true },\n    copied: { state: true },\n  }\n\n  variant: 'plain' | 'bordered' = 'bordered'\n  private selectedTimeframe: Timeframe = 'realtime'\n  private activeStatIndex: number | null = null\n  private copied = false\n  private timer?: number\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'stats-band')\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this.timer) window.clearTimeout(this.timer)\n  }\n\n  private copyStatsPayload() {\n    try {\n      void navigator.clipboard?.writeText(JSON.stringify(stats, null, 2))\n    } catch {\n      // Clipboard unavailable (permissions, insecure context): still flash Copied.\n    }\n    this.copied = true\n    if (this.timer) window.clearTimeout(this.timer)\n    this.timer = window.setTimeout(() => {\n      this.copied = false\n    }, 2000)\n  }\n\n  render() {\n    return html`\n      <section\n        data-slot=\"stats-band\"\n        class=${cn(\n          'bg-card relative w-full overflow-hidden',\n          this.variant === 'bordered' ? 'border-border rounded-2xl border shadow-xs' : '',\n        )}\n      >\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 animate-pulse 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            <!-- Plain span carries the responsive class: display utilities\n                 can't go on the uip-badge host (its :host display wins). -->\n            <span class=\"hidden sm:contents\">\n              <uip-badge\n                variant=\"outline\"\n                class=\"border-success/20 bg-success/10 text-success text-success font-mono text-xs\"\n              >\n                All Systems Operational\n              </uip-badge>\n            </span>\n          </div>\n\n          <div class=\"flex items-center gap-2 self-end sm:self-auto\">\n            <div class=\"bg-background border-border flex items-center rounded-lg border p-0.5\">\n              ${timeframes.map(\n                (tf) => html`<button\n                  type=\"button\"\n                  class=${cn(\n                    'rounded px-2.5 py-1 font-mono text-xs transition-colors',\n                    this.selectedTimeframe === tf.id\n                      ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )}\n                  @click=${() => {\n                    this.selectedTimeframe = tf.id\n                  }}\n                >\n                  ${tf.label}\n                </button>`,\n              )}\n            </div>\n\n            <uip-button\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"h-7 gap-1.5 px-2 font-mono text-xs\"\n              @click=${this.copyStatsPayload}\n            >\n              ${this.copied ? icon(Check, 'check', 'text-success size-3') : icon(Copy, 'copy', 'size-3')}\n              <span>${this.copied ? 'Copied' : 'JSON'}</span>\n            </uip-button>\n          </div>\n        </div>\n\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          ${stats.map((item, idx) => {\n            const isSelected = this.activeStatIndex === idx\n            return html`\n              <div\n                class=${cn(\n                  'hover:bg-muted/30 group relative cursor-pointer p-6 transition-colors',\n                  isSelected ? 'bg-muted/40 ring-primary/30 ring-1 ring-inset' : '',\n                )}\n                @click=${() => {\n                  this.activeStatIndex = isSelected ? null : idx\n                }}\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                  ${icon(item.icon, item.iconName, '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[this.selectedTimeframe].main}\n                  </span>\n                </div>\n\n                <p class=\"text-muted-foreground mt-1 line-clamp-1 text-xs\">${item.subtitle}</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                    ${icon(TrendingUp, 'trending-up', 'size-3')} ${item.values[this.selectedTimeframe].change}\n                  </span>\n                  <span class=\"text-muted-foreground font-mono text-xs\">${item.values[this.selectedTimeframe].note}</span>\n                </div>\n              </div>\n            `\n          })}\n        </div>\n\n        ${this.activeStatIndex !== null\n          ? html`\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                    ${icon(Globe, 'globe', 'text-primary size-4')}\n                    <span class=\"text-foreground text-xs font-semibold\">\n                      Regional Telemetry & Infrastructure Breakdown: ${stats[this.activeStatIndex].label}\n                    </span>\n                  </div>\n                  <uip-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    class=\"h-6 text-xs\"\n                    @click=${() => {\n                      this.activeStatIndex = null\n                    }}\n                  >\n                    Close Breakdown\n                  </uip-button>\n                </div>\n\n                <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n                  ${stats[this.activeStatIndex].breakdown.map(\n                    (sub) => html`\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                    `,\n                  )}\n                </div>\n              </div>\n            `\n          : ''}\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-stats-band') || customElements.define('uip-stats-band', UipStatsBand)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-stats-band': UipStatsBand\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/stats-band/stats-band.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}