"use client"; import type { HTMLAttributes } from "react"; import { useRef, useSyncExternalStore } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; gsap.registerPlugin(useGSAP); export type MarketPosition = { symbol: string; name: string; value: number; change: number }; type MarketPulseCardProps = HTMLAttributes & { positions: MarketPosition[]; currency?: string; title?: string; /** Rendered as "Updated {updatedAt}" only when provided. */ updatedAt?: string; /** Forces the static presentation regardless of the OS setting. */ reducedMotion?: boolean; }; const subscribeNoop = () => () => {}; export function MarketPulseCard({ positions, currency = "USD", title = "Portfolio value", updatedAt, reducedMotion = false, className = "", ...props }: MarketPulseCardProps) { const root = useRef(null); // True when the card mounts on the client; false while hydrating server HTML that is already painted. const mountedOnClient = useSyncExternalStore(subscribeNoop, () => true, () => false); const canAnimate = useRef(mountedOnClient); const total = positions.reduce((sum, position) => sum + position.value, 0); const format = new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 0 }); // Rows render visible (no JS, reduced motion, hydration). The hidden start state is set // in useGSAP's layout effect, before the browser paints a client-side mount. useGSAP(() => { const animate = canAnimate.current; canAnimate.current = true; if (!animate || reducedMotion || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; gsap.fromTo("[data-market-row]", { autoAlpha: 0, x: -10 }, { autoAlpha: 1, x: 0, stagger: 0.07, duration: 0.38, ease: "power2.out" }); }, { scope: root, dependencies: [positions.length, reducedMotion], revertOnUpdate: true }); return (

{title}

{format.format(total)}

{updatedAt ?

Updated {updatedAt}

: null}

{position.symbol} {position.name} {format.format(position.value)} = 0 ? "text-emerald-300" : "text-rose-300") + " text-xs tabular-nums"}> {position.change >= 0 ? "+" : ""}{position.change.toFixed(2)}%

); }

Retirement account

Retirement account