52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2a6f,"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react"; export interface StatItem { label: string; value: number; prefix?: string; suffix?: string; decimals?: number; /** Change vs. previous period, in %. */ delta?: number; /** Set when a drop is good news (churn, latency). */ invert?: boolean; /** Sparkline points, any scale. */ data: number[]; /** Small caption under the chart, e.g. "vs. last 30 days". */ caption?: string; } export interface StatsCarouselProps { stats: StatItem[]; /** Advance automatically. Pauses on hover and focus. */ autoPlay?: boolean; /** Ms between slides. */ interval?: number; /** Ms for the count-up and sparkline draw. */ duration?: number; /** Card width in px. */ cardWidth?: number; /** Px between cards. */ gap?: number; /** Accent for metrics moving the right way. */ positiveColor?: string; /** Accent for metrics moving the wrong way. */ negativeColor?: string; className?: string; } const W = 240; const H = 64; function sparkPath(data: number[]) { const min = Math.min(...data); const max = Math.max(...data); const span = max - min || 1; const pts = data.map((d, i) => [(i / Math.max(1, data.length - 1)) * W, H - 4 - ((d - min) / span) * (H - 8)]); // Smooth with midpoint quadratic curves. let line = `M${pts[0][0]},${pts[0][1]}`; for (let i = 1; i < pts.length; i++) { const [px, py] = pts[i - 1]; const [x, y] = pts[i]; line += ` Q${px},${py} ${(px + x) / 2},${(py + y) / 2}`; } const [lx, ly] = pts[pts.length - 1]; line += ` T${lx},${ly}`; return { line, area: `${line} L${W},${H} L0,${H} Z`, end: [lx, ly] as const }; } const fmt = (n: number, decimals: number) => n.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }); function StatCard({ stat, active, duration, color, index, total, }: { stat: StatItem; active: boolean; duration: number; color: string; index: number; total: number; }) { const num = useRef(null); const gid = useId().replace(/:/g, ""); const { line, area, end } = sparkPath(stat.data.length > 1 ? stat.data : [0, 0]); const decimals = stat.decimals ?? 0; const up = (stat.delta ?? 0) >= 0; useEffect(() => { const el = num.current; if (!el || !active) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { el.textContent = fmt(stat.value, decimals); return; } let raf = 0; const t0 = performance.now(); const tick = (now: number) => { const p = Math.min((now - t0) / duration, 1); el.textContent = fmt(stat.value * (1 - Math.pow(1 - p, 4)), decimals); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [active, stat.value, decimals, duration]); const draw = active ? `stroke-dashoffset ${duration}ms cubic-bezier(.3,.7,.2,1) 120ms` : "stroke-dashoffset .3s"; return (

{stat.label}

{stat.delta !== undefined && ( {Math.abs(stat.delta).toFixed(1)}% )}

{stat.prefix} {fmt(stat.value, decimals)} {stat.suffix && {stat.suffix}}

{stat.caption &&

{stat.caption}

}

); } export function StatsCarousel({ stats, autoPlay = true, interval = 3200, duration = 1400, cardWidth = 280, gap = 20, positiveColor = "#a3e635", negativeColor = "#fb7185", className, }: StatsCarouselProps) { const [index, setIndex] = useState(0); const [paused, setPaused] = useState(false); const n = stats.length; const current = n ? ((index % n) + n) % n : 0; const go = (i: number) => setIndex(((i % n) + n) % n); useEffect(() => { if (!autoPlay || paused || n < 2) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const id = window.setTimeout(() => setIndex((i) => (i + 1) % n), interval); return () => window.clearTimeout(id); }, [autoPlay, paused, interval, n, current]); const onKey = (e: KeyboardEvent) => { if (e.key === "ArrowRight") go(current + 1); else if (e.key === "ArrowLeft") go(current - 1); else return; e.preventDefault(); }; return (

setPaused(true)} onPointerLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget) && setPaused(false)} onKeyDown={onKey} >

{stats.map((s, i) => { const active = i === current; const good = (s.delta ?? 0) >= 0 !== !!s.invert; // Signed circular distance from the current card, so both sides stay filled and the loop is seamless. let off = (((i - current) % n) + n) % n; if (off > n / 2) off -= n; const far = Math.abs(off) > 2; return (

!active && go(i)} className="absolute left-1/2 top-0 motion-reduce:!transition-none" style={{ width: cardWidth, height: 212, marginLeft: -cardWidth / 2, zIndex: 10 - Math.abs(off), visibility: far ? "hidden" : undefined, opacity: far ? 0 : active ? 1 : 0.4, transform: `translateX(${off * (cardWidth + gap)}px) scale(${active ? 1 : 0.9})`, filter: active ? "none" : "saturate(.4)", // Far cards jump instantly (they are off-stage), so nothing visibly slides across the row. transition: far ? "opacity .3s, visibility .3s" : "opacity .6s, transform .7s cubic-bezier(.65,0,.2,1), filter .6s", cursor: active ? "default" : "pointer", }} >

); })}

{stats.map((s, i) => (

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/ui/stats-carousel.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]