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:T2e1c,"use client"; import { useEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type CSSProperties, } from "react"; import { cn } from "@/lib/utils"; const DEFAULT_DURATION = 500; const DIGIT_CELLS = Array.from({ length: 10 }, (_, i) => i); let supportsRoll: boolean | undefined; const subscribeToNothing = () => () => {}; const notEnhanced = () => false; let rollPropertyRegistered = false; const readSupportsRoll = () => (supportsRoll ??= typeof CSS !== "undefined" && typeof CSS.registerProperty === "function" && CSS.supports( "transform", "translateY(clamp(-1lh, calc((mod(7.5, 10) - 5) * 1lh), 1lh))", )); const registerRollProperty = () => { if (rollPropertyRegistered) return; rollPropertyRegistered = true; try { CSS.registerProperty({ name: "--aui-number-roll-pos", syntax: "", inherits: true, initialValue: "0", }); } catch { /* Already registered by another copy of this component. */ } }; /* Cached because Intl.NumberFormat construction is expensive and inline format/locales props change identity on every parent render. */ const formatterCache = new Map(); const getFormatter = ( locales: Intl.LocalesArgument, format: Intl.NumberFormatOptions | undefined, ) => { const key = `${String(locales)}\u0000${JSON.stringify(format)}`; let formatter = formatterCache.get(key); if (!formatter) { formatter = new Intl.NumberFormat(locales, format); formatterCache.set(key, formatter); } return formatter; }; type DigitPart = { type: "digit"; key: string; digit: number }; type SymbolPart = { type: "symbol"; key: string; value: string }; type Part = DigitPart | SymbolPart; type RenderedPart = Part & { exiting?: boolean; entered?: boolean }; const toParts = ( value: number, formatter: Intl.NumberFormat, prefix: string | undefined, suffix: string | undefined, ): Part[] => { type Atom = | { kind: "integer"; digit: number } | { kind: "group"; value: string } | { kind: "fraction"; digit: number } | { kind: "symbol"; type: string; value: string }; const atoms: Atom[] = []; if (prefix) atoms.push({ kind: "symbol", type: "prefix", value: prefix }); for (const part of formatter.formatToParts(value)) { if (part.type === "integer" || part.type === "fraction") { for (const char of part.value) { const digit = char.charCodeAt(0) - 48; if (digit >= 0 && digit <= 9) { atoms.push({ kind: part.type, digit }); } else { atoms.push({ kind: "symbol", type: part.type, value: char }); } } } else if (part.type === "group") { atoms.push({ kind: "group", value: part.value }); } else { const type = part.type === "minusSign" || part.type === "plusSign" ? "sign" : part.type; atoms.push({ kind: "symbol", type, value: part.value }); } } if (suffix) atoms.push({ kind: "symbol", type: "suffix", value: suffix }); const counts = new Map(); const nextKey = (type: string) => { const count = counts.get(type) ?? 0; counts.set(type, count + 1); return `${type}:${count}`; }; /* Integer digits and group separators are keyed right to left so the ones digit is always int:0. When the digit count changes (999 -> 1,000), the surviving places keep their identity and only the new leading parts enter, instead of every column being re-assigned a new meaning. */ const parts: Part[] = new Array(atoms.length); for (let i = atoms.length - 1; i >= 0; i--) { const atom = atoms[i]!; if (atom.kind === "integer") { parts[i] = { type: "digit", key: nextKey("int"), digit: atom.digit }; } else if (atom.kind === "group") { parts[i] = { type: "symbol", key: nextKey("group"), value: atom.value }; } } for (let i = 0; i < atoms.length; i++) { const atom = atoms[i]!; if (atom.kind === "fraction") { parts[i] = { type: "digit", key: nextKey("fraction"), digit: atom.digit }; } else if (atom.kind === "symbol") { parts[i] = { type: "symbol", key: `${nextKey(atom.type)}:${atom.value}`, value: atom.value, }; } } return parts; }; const merge = (prev: RenderedPart[], next: Part[]): RenderedPart[] => { const nextKeys = new Set(next.map((part) => part.key)); const prevKeys = new Set(prev.map((part) => part.key)); const out: RenderedPart[] = []; let i = 0; const emitExited = (until: string | undefined) => { while (i < prev.length && prev[i]!.key !== until) { const old = prev[i++]!; if (!nextKeys.has(old.key)) { out.push(old.exiting ? old : { ...old, exiting: true }); } } }; for (const part of next) { if (prevKeys.has(part.key)) { emitExited(part.key); i++; out.push(part); } else { out.push({ ...part, entered: true }); } } emitExited(undefined); return out; }; const rollDelta = (from: number, to: number, dir: number) => { const up = (((to - from) % 10) + 10) % 10; if (dir > 0) return up; if (dir < 0) return up - 10; return up > 5 ? up - 10 : up; }; function NumberRollDigit({ digit, dir }: { digit: number; dir: number }) { const [state, setState] = useState({ digit, roll: digit }); if (state.digit !== digit) { setState({ digit, roll: state.roll + rollDelta(state.digit, digit, dir) }); } return ( {/* Digit glyphs render through ::before so find-in-page and copy never see the strip. overflow-clip (not hidden) keeps the inline-block's baseline on the text instead of the box bottom edge. */} {DIGIT_CELLS.map((cell) => ( ))} ); } function NumberRollPart({ part, dir }: { part: RenderedPart; dir: number }) { return ( 0 ? "35%" : "-35%", } as CSSProperties } > {part.type === "digit" ? ( ) : ( {part.value} )} ); } export type NumberRollProps = Omit< ComponentProps<"span">, "children" | "prefix" > & { value: number; format?: Intl.NumberFormatOptions; locales?: Intl.LocalesArgument; prefix?: string; suffix?: string; trend?: "auto" | "up" | "down"; duration?: number; }; /** * Animated number that rolls digits odometer-style when the value changes. Formatting is driven by `Intl.NumberFormat`, so compact notation ("1.1K"), currencies, percentages, and locale-specific output animate gracefully: digits spin in place while entering and exiting characters slide and fade. Renders the plain formatted value on the server and in browsers without CSS `mod()` support; when server rendering, pass an explicit `locales` so the server and client format identically. * * ```tsx * * ``` */ function NumberRoll({ value, format, locales, prefix, suffix, trend = "auto", duration = DEFAULT_DURATION, className, style, ...props }: NumberRollProps) { const enhanced = useSyncExternalStore( subscribeToNothing, readSupportsRoll, notEnhanced, ); useEffect(() => { if (enhanced) registerRollProperty(); }, [enhanced]); const formatter = getFormatter(locales, format); const parts = useMemo( () => toParts(value, formatter, prefix, suffix), [value, formatter, prefix, suffix], ); const formatted = `${prefix ?? ""}${formatter.format(value)}${suffix ?? ""}`; const [display, setDisplay] = useState<{ value: number; formatted: string; rendered: RenderedPart[]; dir: number; }>(() => ({ value, formatted, rendered: parts, dir: 0 })); if (display.formatted !== formatted) { setDisplay({ value, formatted, rendered: merge(display.rendered, parts), dir: trend === "up" ? 1 : trend === "down" ? -1 : Math.sign(value - display.value), }); } /* Each exiting part gets its own removal timer so a new exit batch does not extend the lifetime of parts already mid-exit. The body is idempotent, so extra runs from unrelated display changes are no-ops. */ const exitTimers = useRef(new Map>()); const lastDuration = useRef(duration); useEffect(() => { const timers = exitTimers.current; if (lastDuration.current !== duration) { lastDuration.current = duration; for (const timer of timers.values()) clearTimeout(timer); timers.clear(); } const exiting = new Set( display.rendered.filter((part) => part.exiting).map((part) => part.key), ); for (const [key, timer] of timers) { if (!exiting.has(key)) { clearTimeout(timer); timers.delete(key); } } for (const key of exiting) { if (timers.has(key)) continue; timers.set( key, setTimeout(() => { timers.delete(key); setDisplay((current) => ({ ...current, rendered: current.rendered.filter( (part) => !(part.exiting && part.key === key), ), })); }, duration), ); } }, [display.rendered, duration]); useEffect(() => { const timers = exitTimers.current; return () => { for (const timer of timers.values()) clearTimeout(timer); timers.clear(); }; }, []); return ( {formatted} {enhanced ? ( {display.rendered.map((part) => ( ))} ) : ( {formatted} )} ); } export { NumberRoll }; 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":"components/ui/number-roll.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]