);
}
// ─────────────────────────────────────────────────────────────────────────────
// Segmented progress ring (categories) — used in dashboard wallet
// ─────────────────────────────────────────────────────────────────────────────
function ProgressRing({ size = 132, stroke = 9, segments }) {
// segments: [{value, color}], sum should not exceed total
const total = segments.reduce((s, x) => s + x.total, 0);
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
let offset = 0;
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Tab Bar (5 tabs with center FAB)
// • Every tab is M.button so it gets physical tap feedback.
// • The center FAB scales further (deeper press feels heavier — matches
// the visual weight of the dark circle).
// • Active state's icon stroke shift is animated via the surrounding
// color transition we set in CSS.
// ─────────────────────────────────────────────────────────────────────────────
function TabBar({ active, onChange, lang, onLog }) {
const tab = (id, icon, labelKey) => (
onChange(id)}
whileTap={{ scale: 0.92 }}
transition={{ duration: 0.14, ease: window.VITAL_SPRING ? window.VITAL_SPRING.bounce : undefined }}
aria-label={L(STR[labelKey], lang)}
aria-current={active === id ? 'page' : undefined}
>
{L(STR[labelKey], lang)}
);
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Bottom sheet (mobile) / centered modal (≥768)
//
// Exit-animation strategy:
// The parent typically renders us conditionally — when it sets us to
// null we'd unmount instantly, killing any exit animation. To avoid
// forcing the parent to wrap us in , the Sheet
// intercepts onClose: on user-initiated close (backdrop / x button /
// Esc) it sets `closing=true`, lets the CSS exit animation play
// (~240ms), THEN calls the supplied onClose. This means every code
// path that closes the sheet flows through the same animation, with
// zero changes upstream.
//
// prefers-reduced-motion users skip the wait — the CSS animation
// collapses to ~0s via the global @media block in styles.css.
// ─────────────────────────────────────────────────────────────────────────────
function Sheet({ open, onClose, children, title }) {
const [closing, setClosing] = useState(false);
const reduced = useReducedMotion ? useReducedMotion() : false;
const closeRef = useRef(onClose);
closeRef.current = onClose;
const playClose = useCallback(() => {
if (closing) return;
if (reduced) { onClose && onClose(); return; }
setClosing(true);
setTimeout(() => {
setClosing(false);
closeRef.current && closeRef.current();
}, 240);
}, [closing, reduced, onClose]);
// Escape key dismisses
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === 'Escape') playClose(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open, playClose]);
if (!open) return null;
return (
{title && (
{title}
)}
{children}
);
}
// ─────────────────────────────────────────────────────────────────────────────
// Header (replaces nav bar — light, custom)
// ─────────────────────────────────────────────────────────────────────────────
function ScreenHeader({ title, eyebrow, actions, onBack, lang }) {
return (