50: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"] 51: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"] 52:T4414,'use client'; import { animate, cubicBezier, useInView } from 'motion/react'; import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties } from 'react'; type Easing = 'easeOut' | 'linear' | 'expo' | 'spring'; interface CountUpProps { to: number; from?: number; direction?: 'up' | 'down'; delay?: number; duration?: number; className?: string; style?: CSSProperties; startWhen?: boolean; separator?: string; prefix?: string; suffix?: string; mode?: 'count' | 'roll'; easing?: Easing; decimals?: number; format?: 'standard' | 'compact'; trigger?: 'view' | 'load'; replayOnHover?: boolean; onStart?: () => void; onEnd?: () => void; } type Column = { slot: number; index: number; place: number; from: number; to: number; enter: boolean; leave: boolean; delta: number; }; type Mark = { char: string; enter?: boolean; leave?: boolean; follow?: number }; type Slot = Column | Mark; type Roll = { slots: Slot[]; columns: Column[]; label: string }; type Play = { id: number; from: number; to: number; spin: boolean; wait?: boolean }; type Live = { formatValue: (value: number) => string; onStart?: () => void; onEnd?: () => void; model: Roll | null; mode: 'count' | 'roll'; easing: Easing; duration: number; delay: number; }; const CELL = 1.2; const STAGGER = 0.07; const UNITS: [number, string][] = [ [1e12, 'T'], [1e9, 'B'], [1e6, 'M'], [1e3, 'K'] ]; const SLOT_STYLE: CSSProperties = { display: 'inline-block', height: `${CELL}em`, lineHeight: `${CELL}em` }; const SR_ONLY: CSSProperties = { position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', border: 0 }; const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; const clamp01 = (value: number) => Math.min(1, Math.max(0, value)); const smooth = (edge0: number, edge1: number, value: number) => { const t = clamp01((value - edge0) / (edge1 - edge0)); return t * t * (3 - 2 * t); }; const mod10 = (value: number) => ((value % 10) + 10) % 10; const makeSpring = (overshoot: number) => { const log = Math.log(Math.min(0.5, Math.max(0.001, overshoot))); const zeta = -log / Math.sqrt(Math.PI * Math.PI + log * log); const damped = Math.PI / 0.52; const natural = damped / Math.sqrt(1 - zeta * zeta); const raw = (t: number) => 1 - Math.exp(-zeta * natural * t) * (Math.cos(damped * t) + ((zeta * natural) / damped) * Math.sin(damped * t)); const residual = 1 - raw(1); return (t: number) => (t >= 1 ? 1 : raw(t) + residual * t * t * t); }; const EASINGS: Record number> = { linear: t => t, easeOut: cubicBezier(0.33, 1, 0.68, 1), expo: t => (t >= 1 ? 1 : (1 - Math.pow(2, -10 * t)) / (1 - Math.pow(2, -10))), spring: makeSpring(0.06) }; const getDecimalPlaces = (num: number): number => { const str = num.toString(); if (str.includes('.')) { const decimals = str.split('.')[1]; if (parseInt(decimals) !== 0) { return decimals.length; } } return 0; }; const unitFor = (value: number): [number, string] => UNITS.find(([size]) => Math.abs(value) >= size * 0.9995) || [1, '']; const scaleFor = (value: number, compact: boolean, decimals: number | undefined, places: number) => { if (!compact) return { size: 1, label: '', digits: places }; const [size, label] = unitFor(value); const digits = decimals ?? (label ? (Math.abs(value) / size < 100 ? 1 : 0) : places); return { size, label, digits }; }; const splitNumber = (value: number, digits: number, size: number) => { const fixed = (Math.abs(value) / size).toFixed(digits); const [int, frac = ''] = fixed.split('.'); return { negative: value < 0 && Number(fixed) !== 0, int, frac }; }; const group = (int: string, separator: string) => (separator ? int.replace(/\B(?=(\d{3})+(?!\d))/g, separator) : int); const buildRoll = ( a: number, b: number, spin: boolean, { compact, decimals, places, separator }: { compact: boolean; decimals: number | undefined; places: number; separator: string } ): Roll => { const { size, label, digits } = scaleFor(b, compact, decimals, places); const pa = splitNumber(a, digits, size); const pb = splitNumber(b, digits, size); const length = Math.max(pa.int.length, pb.int.length); const slots: Slot[] = []; const columns: Column[] = []; if (pa.negative || pb.negative) slots.push({ char: '-', enter: !pa.negative, leave: !pb.negative }); const digitAt = (parts: { int: string; frac: string }, place: number) => { if (place < 0) return Number(parts.frac[-place - 1]); const index = parts.int.length - 1 - place; return index >= 0 ? Number(parts.int[index]) : null; }; for (let place = length - 1; place >= -digits; place--) { if (place === -1) slots.push({ char: '.' }); const start = digitAt(pa, place); const end = digitAt(pb, place); const column: Column = { slot: slots.length, index: columns.length, place, from: start ?? 0, to: end ?? 0, enter: start === null, leave: end === null, delta: 0 }; slots.push(column); columns.push(column); if (separator && place > 0 && place % 3 === 0) slots.push({ char: separator, follow: column.index }); } const up = spin || b >= a; columns.forEach((column, index) => { const rank = columns.length - 1 - index; const base = up ? mod10(column.to - column.from) : -mod10(column.from - column.to); const turns = spin ? Math.max(1, 3 - rank) : Math.min(Math.floor(Math.abs(b - a) / (size * 10 ** (column.place + 1))), Math.max(0, 3 - rank)); column.delta = base + (up ? 10 : -10) * turns; }); return { slots, columns, label }; }; export default function CountUp({ to, from = 0, direction = 'up', delay = 0, duration = 2, className = '', style, startWhen = true, separator = '', prefix = '', suffix = '', mode = 'count', easing = 'easeOut', decimals, format = 'standard', trigger = 'view', replayOnHover = false, onStart, onEnd }: CountUpProps) { const ref = useRef(null); const textRef = useRef(null); const slotRefs = useRef<(HTMLSpanElement | null)[]>([]); const filterRefs = useRef<(SVGFEGaussianBlurElement | null)[]>([]); const uid = useId().replace(/[^\w-]/g, ''); const startValue = direction === 'down' ? to : from; const endValue = direction === 'down' ? from : to; const valueRef = useRef(startValue); const startedRef = useRef(false); const runningRef = useRef(false); const [play, setPlay] = useState(null); const isInView = useInView(ref, { once: true, margin: '0px' }); const active = trigger === 'load' || isInView; const compact = format === 'compact'; const places = decimals ?? Math.max(getDecimalPlaces(from), getDecimalPlaces(to)); const formatValue = useCallback( (latest: number) => { const { size, label, digits } = scaleFor(latest, compact, decimals, places); const parts = splitNumber(latest, digits, size); const body = `${parts.negative ? '-' : ''}${group(parts.int, separator)}${parts.frac ? `.${parts.frac}` : ''}`; return `${prefix}${body}${label}${suffix}`; }, [compact, decimals, places, separator, prefix, suffix] ); const model = useMemo(() => { if (mode !== 'roll') return null; const a = play ? play.from : startValue; const b = play ? play.to : endValue; return buildRoll(a, b, !!play?.spin, { compact, decimals, places, separator }); }, [mode, play, startValue, endValue, compact, decimals, places, separator]); const [initialText] = useState(() => formatValue(startValue)); const latestRef = useRef(null); useIsoLayoutEffect(() => { latestRef.current = { formatValue, onStart, onEnd, model, mode, easing, duration: Math.max(0, duration), delay }; }); useIsoLayoutEffect(() => { if (!startedRef.current) valueRef.current = startValue; if (mode === 'count' && !runningRef.current && textRef.current) { textRef.current.textContent = formatValue(valueRef.current); } }, [mode, startValue, formatValue]); useEffect(() => { if (!active || !startWhen) return; startedRef.current = true; setPlay(previous => ({ id: (previous?.id || 0) + 1, from: valueRef.current, to: endValue, spin: false, wait: true })); }, [active, startWhen, endValue]); useEffect(() => { const live = latestRef.current; if (!play || !live) return undefined; const ease = EASINGS[live.easing] || EASINGS.easeOut; const total = live.duration; const progress = (t: number) => (total > 0 ? clamp01(t / total) : 1); let render: (t: number) => void; if (live.mode === 'roll' && live.model && ref.current) { const { columns: layout, slots } = live.model; const fontSize = parseFloat(getComputedStyle(ref.current).fontSize) || 16; const cell = CELL * fontSize; const stagger = layout.length > 1 ? Math.min(STAGGER, (total * 0.4) / (layout.length - 1)) : 0; const span = Math.max(0.001, total - stagger * (layout.length - 1)); const columns = layout.map(column => { const box = slotRefs.current[column.slot]; const strip = box?.firstChild as HTMLSpanElement | null; return { ...column, box, strip, blur: filterRefs.current[column.index], cells: strip ? Array.from(strip.childNodes, node => node.firstChild) : ([] as (ChildNode | null)[]), width: box ? box.scrollWidth : 0, ease: live.easing === 'spring' ? makeSpring(Math.min(0.12, Math.max(0.01, 0.35 / Math.max(1, Math.abs(column.delta))))) : ease, base: Math.floor(column.from), sigma: 0, presence: column.enter ? 0 : 1 }; }); const marks = slots .map((slot, index) => ({ ...slot, node: slotRefs.current[index] })) .filter( (slot): slot is Mark & { node: HTMLSpanElement } => 'char' in slot && !!slot.node && (!!slot.enter || !!slot.leave || slot.follow !== undefined) ) .map(slot => ({ ...slot, width: slot.node.scrollWidth })); const fade = (node: HTMLSpanElement | null | undefined, width: number, presence: number, settled: boolean) => { if (!node) return; node.style.width = settled ? '' : `${(presence * width).toFixed(2)}px`; node.style.opacity = settled ? '' : presence.toFixed(3); }; render = (t: number) => { columns.forEach((column, index) => { if (!column.strip) return; const u = clamp01((t - index * stagger) / span); const pos = column.from + column.delta * column.ease(u); const base = Math.floor(pos); if (base !== column.base) { column.base = base; column.cells.forEach((node, offset) => { if (node) node.nodeValue = String(mod10(base + offset - 1)); }); } column.strip.style.transform = `translateY(${(-(1 + pos - base) * CELL).toFixed(4)}em)`; const u0 = Math.max(0, u - 0.004); const u1 = Math.min(1, u + 0.004); const speed = u1 > u0 ? (Math.abs(column.delta) * Math.abs(column.ease(u1) - column.ease(u0))) / (u1 - u0) / span : 0; const sigma = u > 0 && u < 1 ? Math.min(cell * 0.05, (speed * cell) / 600) : 0; if (Math.abs(sigma - column.sigma) > 0.05 || (sigma === 0 && column.sigma !== 0)) { column.sigma = sigma; if (sigma > 0.2 && column.blur) { column.blur.setAttribute('stdDeviation', `0 ${sigma.toFixed(2)}`); column.strip.style.filter = `url(#${uid}-${index})`; } else { column.strip.style.filter = ''; } } if (column.enter || column.leave) { column.presence = column.enter ? smooth(0, 0.45, u) : 1 - smooth(0.55, 1, u); fade(column.box, column.width, column.presence, column.enter && u >= 1); } }); const overall = progress(t); marks.forEach(mark => { if (mark.follow !== undefined) { const column = columns[mark.follow]; if (column && (column.enter || column.leave)) fade(mark.node, mark.width, column.presence, column.enter && column.presence >= 1); } else { const presence = mark.enter ? smooth(0, 0.3, overall) : 1 - smooth(0.7, 1, overall); fade(mark.node, mark.width, presence, !!mark.enter && overall >= 1); } }); valueRef.current = play.from + (play.to - play.from) * ease(overall); }; } else { render = (t: number) => { const value = play.from + (play.to - play.from) * ease(progress(t)); valueRef.current = value; if (textRef.current) textRef.current.textContent = latestRef.current?.formatValue(value) ?? ''; }; } runningRef.current = true; if (typeof live.onStart === 'function') live.onStart(); const finish = () => { render(Infinity); valueRef.current = play.to; runningRef.current = false; latestRef.current?.onEnd?.(); }; if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) { finish(); return undefined; } const controls = animate(0, total, { duration: total, delay: play.wait ? live.delay : 0, ease: 'linear', onUpdate: render, onComplete: finish }); return () => { controls.stop(); runningRef.current = false; }; }, [play, uid]); const replay = () => { if (!replayOnHover || runningRef.current || !startedRef.current) return; setPlay(previous => mode === 'roll' ? { id: (previous?.id || 0) + 1, from: valueRef.current, to: valueRef.current, spin: true } : { id: (previous?.id || 0) + 1, from: startValue, to: endValue, spin: false } ); }; const finalText = formatValue(play ? play.to : endValue); return ( {model ? ( <> {prefix && {prefix}} {model.slots.map((slot, index) => { const hidden = 'char' in slot ? slot.enter || (slot.follow !== undefined && model.columns[slot.follow].enter) : slot.enter; const collapsed = hidden ? { width: 0, opacity: 0 } : null; if ('char' in slot) { return ( { slotRefs.current[index] = node; }} style={{ ...SLOT_STYLE, overflow: 'hidden', ...collapsed }} > {slot.char} ); } return ( { slotRefs.current[index] = node; }} style={{ ...SLOT_STYLE, position: 'relative', overflow: 'hidden', ...collapsed }} > {[-1, 0, 1, 2].map(offset => ( {mod10(slot.from + offset)} ))} ); })} {model.label && {model.label}} {suffix && {suffix}} {finalText} ) : ( {initialText} )} ); } 4f:["$","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@^12.23.12",{"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@^12.23.12"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"CountUp/CountUp.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]