=100 ? ' done' : '')} style={{width: Math.min(100, value||0) + '%'}}/>
);
}
// Small search-suggest dropdown
function Select({ value, onChange, options, placeholder }) {
return (
);
}
// AOX brand wordmark — PNG asset, theme-aware.
// size: 'sm' (topbar ~20px) | 'md' (28px) | 'lg' (login ~44px)
function AoxLogo({ size = 'md' }) {
const [theme, setTheme] = useState(() => document.documentElement.dataset.theme || '');
useEffect(() => {
const el = document.documentElement;
const obs = new MutationObserver(() => setTheme(el.dataset.theme || ''));
obs.observe(el, { attributes: true, attributeFilter: ['data-theme'] });
return () => obs.disconnect();
}, []);
const heights = { sm: 20, md: 28, lg: 44 };
const src = theme === 'dark' ? '/assets/aox-logo-white.png' : '/assets/aox-logo-black.png';
return (
);
}
// Odometer-style rolling number. Each mount animates from random digits to
// `target`, locking left-to-right (hundreds first, then tens, then ones) with
// ease-out-cubic over `duration`, then a 200ms bounce on the final frame.
// prefers-reduced-motion → render the target directly.
function RollingNumber({ target, duration = 800, delay = 0 }) {
const safeTarget = Math.max(0, Math.floor(Number(target) || 0));
const reduceMotion = typeof window !== 'undefined' &&
window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const [display, setDisplay] = useState(reduceMotion ? safeTarget : 0);
const [bounce, setBounce] = useState(false);
const ranRef = useRef(false);
useEffect(() => {
if (reduceMotion) { setDisplay(safeTarget); return; }
// Animate on every mount + target change (user wants re-play on tab switch).
ranRef.current = false;
let raf = 0;
const start = performance.now() + delay;
const targetStr = String(safeTarget);
const digits = Math.max(1, targetStr.length);
const padded = targetStr.padStart(digits, '0');
const tick = (now) => {
const elapsed = now - start;
if (elapsed < 0) { raf = requestAnimationFrame(tick); return; }
const progress = Math.min(elapsed / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3); // ease-out-cubic
let out = '';
for (let i = 0; i < digits; i++) {
// Lock left-to-right: digit i settles when eased >= (i+1)/digits.
const lockAt = (i + 1) / digits;
out += eased >= lockAt ? padded[i] : String(Math.floor(Math.random() * 10));
}
setDisplay(Number(out));
if (progress < 1) {
raf = requestAnimationFrame(tick);
} else if (!ranRef.current) {
ranRef.current = true;
setDisplay(safeTarget);
setBounce(true);
setTimeout(() => setBounce(false), 220);
}
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [safeTarget, duration, delay, reduceMotion]);
return (
{display}
);
}
Object.assign(window, { Icon, StatusPill, RiskPill, PhaseTag, TrackTag, Avatar, Progress, Select, AoxLogo, RollingNumber, useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect });