4e: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/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"],"RegistryDependencies"] 4f: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"] 50:T217a,"use client"; import { AlertTriangleIcon, OctagonAlertIcon, RotateCcwIcon } from "lucide-react"; import { motion, useReducedMotion, useSpring, useTransform } from "motion/react"; import { type ReactNode, useEffect, useMemo, useRef, useState } from "react"; import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export interface QuotaPart { label: string; value: number; } export interface QuotaRingProps { label: string; used: number; limit: number; unit?: string; breakdown?: QuotaPart[]; resetsAt?: Date | string | number; warnAt?: number; criticalAt?: number; locale?: string; className?: string; } type Level = "ok" | "warn" | "critical"; const LEVEL: Record = { ok: { stroke: "stroke-foreground/80", text: "text-foreground" }, warn: { stroke: "stroke-warning", text: "text-warning-foreground" }, critical: { stroke: "stroke-destructive", text: "text-destructive-foreground" }, }; const SIZE = 40; const STROKE = 4; const R = (SIZE - STROKE) / 2; const CIRC = 2 * Math.PI * R; function useNow(active: boolean, every = 1000) { const [now, setNow] = useState(null); useEffect(() => { setNow(Date.now()); if (!active) return; const id = setInterval(() => setNow(Date.now()), every); return () => clearInterval(id); }, [active, every]); return now; } function until(target: number, now: number, withSeconds: boolean) { const s = Math.max(0, Math.floor((target - now) / 1000)); const d = Math.floor(s / 86400); const h = Math.floor((s % 86400) / 3600); const m = Math.floor((s % 3600) / 60); const sec = s % 60; const pad = (n: number) => String(n).padStart(2, "0"); if (!withSeconds) return d ? `${d}d ${h}h` : h ? `${h}h ${m}m` : `${m}m`; return d ? `${d}d ${pad(h)}h ${pad(m)}m ${pad(sec)}s` : `${pad(h)}h ${pad(m)}m ${pad(sec)}s`; } function Countdown({ target }: { target: number }) { const now = useNow(true); return {now === null ? "–" : until(target, now, true)}; } export function QuotaRing({ label, used, limit, unit = "", breakdown = [], resetsAt, warnAt = 0.75, criticalAt = 0.9, locale = "en-US", className, }: QuotaRingProps) { const reduce = useReducedMotion(); const ratio = limit > 0 ? used / limit : 0; const level: Level = ratio >= criticalAt ? "critical" : ratio >= warnAt ? "warn" : "ok"; const tone = LEVEL[level]; const num = useMemo(() => new Intl.NumberFormat(locale), [locale]); const compact = useMemo(() => new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }), [locale]); const target = resetsAt === undefined ? null : new Date(resetsAt).getTime(); const [pulse, setPulse] = useState(0); const lastLevel = useRef(level); useEffect(() => { if (lastLevel.current !== level && level !== "ok") setPulse((p) => p + 1); lastLevel.current = level; }, [level]); const progress = useSpring(0, { stiffness: 120, damping: 20 }); useEffect(() => { const v = Math.min(1, ratio); if (reduce) progress.jump(v); else progress.set(v); }, [ratio, reduce, progress]); const dash = useTransform(progress, (p) => `${(p * CIRC).toFixed(2)} ${CIRC.toFixed(2)}`); const pct = Math.round(ratio * 100); const u = unit ? ` ${unit}` : ""; return ( } > {pct > 999 ? "999+" : pct} {label} {level === "warn" ? : null} {level === "critical" ? : null} {compact.format(used)} {" "} / {compact.format(limit)} {unit ? {unit} : null}

{label} {pct}%

{num.format(used)} of {num.format(limit)} {u} used {used > limit ? ` · ${num.format(used - limit)}${u} over` : ` · ${num.format(limit - used)}${u} left`}

{breakdown.length ? (

{breakdown.map((p) => (

{p.label} {num.format(p.value)} {u}

))}

) : null} {target !== null ? (

Resets in

) : null}

); } export function QuotaRingGroup({ children, className }: { children: ReactNode; className?: string }) { return (

{children}

); } 4d:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@devl","registryDependencies":["utils","https://coss.com/ui/r/tooltip.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/devl/quota-ring.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]