61:I[707087,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"RegistryDependencies"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T4a9f,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface UsageSeries { id: string; label: string; color: string; /** One value per day so far this cycle. */ values: number[]; } export interface UsageMetric { id: string; label: string; unit: string; /** Plan limit for the whole cycle. */ limit: number; /** Price per unit above the limit. */ overagePrice?: number; series: UsageSeries[]; } export interface UsageChartProps { title?: string; metrics?: UsageMetric[]; /** First day of the billing cycle, YYYY-MM-DD. */ cycleStart?: string; /** Days in the cycle. */ cycleDays?: number; currency?: string; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", grid: "rgba(255,255,255,0.06)", ghost: "rgba(255,255,255,0.05)", on: "#F5F4F1", onText: "#0A0A0A", amber: "#FBBF24", red: "#F87171", green: "#4ADE80", tip: "#1C1C1C", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", grid: "rgba(10,10,10,0.06)", ghost: "rgba(10,10,10,0.04)", on: "#0A0A0A", onText: "#FAFAF8", amber: "#B45309", red: "#DC2626", green: "#15803D", tip: "#FFFFFF", ring: "rgba(10,10,10,0.5)" }, }; function rng(seed: number) { let s = seed; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; } const gen = (seed: number, n: number, base: number, growth: number, weekendDip = 0.35) => { const r = rng(seed); return Array.from({ length: n }, (_, i) => { const weekday = (i + 6) % 7; const dip = weekday >= 5 ? 1 - weekendDip : 1; return Math.round(base * (1 + growth * (i / n)) * dip * (0.85 + r() * 0.3)); }); }; const DAYS_SO_FAR = 22; const DEFAULT_METRICS: UsageMetric[] = [ { id: "requests", label: "API requests", unit: "requests", limit: 5_000_000, overagePrice: 0.00002, series: [ { id: "search", label: "/search", color: "#FB923C", values: gen(11, DAYS_SO_FAR, 92_000, 0.5) }, { id: "events", label: "/events", color: "#60A5FA", values: gen(23, DAYS_SO_FAR, 64_000, 0.35) }, { id: "users", label: "/users", color: "#A78BFA", values: gen(37, DAYS_SO_FAR, 30_000, 0.2) }, { id: "other", label: "Other", color: "#6B7280", values: gen(41, DAYS_SO_FAR, 14_000, 0.1) }, ], }, { id: "compute", label: "Compute", unit: "hours", limit: 1_200, overagePrice: 0.12, series: [ { id: "workers", label: "Workers", color: "#2DD4BF", values: gen(5, DAYS_SO_FAR, 24, 0.1, 0.1) }, { id: "jobs", label: "Scheduled jobs", color: "#F472B6", values: gen(9, DAYS_SO_FAR, 12, 0.05, 0.05) }, { id: "preview", label: "Preview builds", color: "#FBBF24", values: gen(15, DAYS_SO_FAR, 8, 0.2, 0.6) }, ], }, { id: "bandwidth", label: "Bandwidth", unit: "GB", limit: 1_000, overagePrice: 0.08, series: [ { id: "cdn", label: "CDN", color: "#4ADE80", values: gen(3, DAYS_SO_FAR, 22, 0.15) }, { id: "api", label: "API responses", color: "#93C5FD", values: gen(7, DAYS_SO_FAR, 6, 0.1) }, ], }, ]; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; function dayLabel(start: string, offset: number) { const [y, m, d] = start.split("-").map(Number); const dt = new Date(Date.UTC(y, m - 1, d) + offset * 864e5); return `${dt.getUTCDate()} ${MONTHS[dt.getUTCMonth()]}`; } function compact(n: number) { if (n >= 1e6) return `${(n / 1e6).toFixed(n >= 1e7 ? 0 : 2)}M`; if (n >= 1e3) return `${(n / 1e3).toFixed(n >= 1e4 ? 0 : 1)}k`; return n.toLocaleString("en-US", { maximumFractionDigits: 1 }); } export function UsageChart({ title = "Usage", metrics = DEFAULT_METRICS, cycleStart = "2026-10-10", cycleDays = 31, currency = "$", theme = "dark", className }: UsageChartProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [metricId, setMetricId] = React.useState(metrics[0].id); const [hidden, setHidden] = React.useState([]); const [hover, setHover] = React.useState(null); const [view, setView] = React.useState<"daily" | "cumulative">("daily"); const metric = metrics.find((m) => m.id === metricId) ?? metrics[0]; const visible = metric.series.filter((s) => !hidden.includes(s.id)); const days = metric.series[0]?.values.length ?? 0; const totals = Array.from({ length: days }, (_, i) => metric.series.reduce((s, x) => s + x.values[i], 0)); const used = totals.reduce((a, b) => a + b, 0); const recent = totals.slice(-7); const avg = recent.reduce((a, b) => a + b, 0) / Math.max(1, recent.length); const projected = used + avg * (cycleDays - days); const overDay = (() => { let run = used; if (run >= metric.limit) return days - 1; for (let d = days; d < cycleDays; d++) { run += avg; if (run >= metric.limit) return d; } return null; })(); const overage = Math.max(0, projected - metric.limit) * (metric.overagePrice ?? 0); const pctUsed = (used / metric.limit) * 100; const status = overDay !== null ? "over" : projected > metric.limit * 0.85 ? "close" : "ok"; // Chart geometry const W = 720; const H = 220; const slot = W / cycleDays; const barW = Math.max(4, slot * 0.62); const cumulative = view === "cumulative"; const cum: number[] = []; totals.forEach((t, i) => cum.push((cum[i - 1] ?? 0) + t)); const visTotals = Array.from({ length: days }, (_, i) => visible.reduce((s, x) => s + x.values[i], 0)); const maxDaily = Math.max(...totals, avg) * 1.15; const maxY = cumulative ? Math.max(metric.limit, projected) * 1.08 : maxDaily; const y = (v: number) => H - (v / maxY) * H; const limitY = y(metric.limit); const projLine = cumulative ? `M${(days - 0.5) * slot},${y(used)} L${(cycleDays - 0.5) * slot},${y(projected)}` : ""; const cumLine = cum.map((v, i) => `${i ? "L" : "M"}${(i + 0.5) * slot},${y(v)}`).join(" "); const move = (e: React.PointerEvent) => { const r = e.currentTarget.getBoundingClientRect(); const i = Math.floor(((e.clientX - r.left) / r.width) * cycleDays); setHover(i >= 0 && i < days ? i : null); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const statusColor = status === "over" ? p.red : status === "close" ? p.amber : p.green; return (

{title}

Cycle {dayLabel(cycleStart, 0)} – {dayLabel(cycleStart, cycleDays - 1)} · day {days} of {cycleDays}

{metrics.map((m) => ( ))}

{(["daily", "cumulative"] as const).map((v) => ( ))}

{/* Summary */}

Used this cycle

{compact(used)} / {compact(metric.limit)} {metric.unit}

Projected by cycle end

{compact(projected)} {Math.round((projected / metric.limit) * 100)}%

Estimated overage

{currency} {overage.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{/* Chart */}

{cumulative ? `Limit ${compact(metric.limit)}` : `Daily budget ${compact(metric.limit / cycleDays)}`} {hover !== null && (

{dayLabel(cycleStart, hover)}

{cumulative ? (

Total so far {compact(cum[hover])}

) : ( <> {visible.map((s) => (

{s.label} {compact(s.values[hover])}

))}

Total {compact(visTotals[hover])}

)} )}

{dayLabel(cycleStart, 0)} Today · {dayLabel(cycleStart, days - 1)} {dayLabel(cycleStart, cycleDays - 1)}

{/* Legend */}

); } export default UsageChart; 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/usage-chart/usage-chart.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]