); } // ─── Pill — small, used sparingly. No uppercase. ────────────────── function Pill({ children, tone = 'neutral', style = {} }) { const tones = { neutral: { bg: 'var(--surface-2)', fg: 'var(--fg-mid)' }, accent: { bg: 'var(--accent)', fg: 'var(--accent-fg)' }, pos: { bg: 'var(--pos-soft)', fg: 'var(--pos)' }, neg: { bg: 'var(--neg-soft)', fg: 'var(--neg)' }, warn: { bg: 'rgba(250,204,21,0.12)', fg: 'var(--warn)' }, ghost: { bg: 'var(--surface-1)', fg: 'var(--fg-dim)' }, }; const t = tones[tone] || tones.neutral; return ( {children} ); } // ─── Card / surface — flat, no border (TR style) ───────────────── function Card({ children, style = {}, onClick, padded = true, dim = false }) { return (

{children}

); } // ─── Button ─────────────────────────────────────────────────────── function Button({ children, onClick, variant = 'primary', size = 'lg', icon, disabled, style = {} }) { const sizes = { sm: { h: 36, px: 14, fs: 14, gap: 6, br: 10 }, md: { h: 44, px: 16, fs: 14, gap: 8, br: 12 }, lg: { h: 52, px: 20, fs: 15, gap: 8, br: 26 }, // pill on lg }; const s = sizes[size]; const variants = { primary: { bg: 'var(--accent)', fg: 'var(--accent-fg)' }, secondary: { bg: 'var(--surface-2)', fg: 'var(--fg)' }, ghost: { bg: 'transparent', fg: 'var(--fg)' }, outline: { bg: 'transparent', fg: 'var(--fg)', bd: 'var(--line)' }, danger: { bg: 'transparent', fg: 'var(--neg)' }, }; const v = variants[variant]; return ( ); } // ─── Header (top of each screen) — TR style ────────────────────── // Compact with optional large hero title underneath. function Header({ title, left, right, sub, large }) { return (

{left ||

}

{!large && title && (

{title}

)}

{right}

{large && (

{title}

{sub &&

{sub}

}

)}

); } // ─── Sheet (bottom modal) ───────────────────────────────────────── function Sheet({ open, onClose, children, title, height = 'auto', maxHeight = '88%' }) { if (!open) return null; return (

{title && (

{title}

)}

{children}

); } // ─── Time-range scrubber — TR's "1T 1W 1M 1J Max" ──────────────── function TimeRange({ value, onChange, options }) { const opts = options || [ { value: '1T', label: '1T' }, { value: '1W', label: '1W' }, { value: '1M', label: '1M' }, { value: '6M', label: '6M' }, { value: '1J', label: '1J' }, { value: 'Max', label: 'Max' }, ]; return (

{opts.map(o => { const active = o.value === value; return ( ); })}

); } // ─── Segmented control (for filters etc.) ──────────────────────── function SegControl({ options, value, onChange, full = true }) { return (

{options.map(o => { const active = o.value === value; return ( ); })}

); } // ─── NumPad — numeric keyboard for amount input ─────────────────── function NumPad({ onPress }) { const keys = ['1','2','3','4','5','6','7','8','9',',','0','⌫']; return (

{keys.map(k => ( ))}

); } // ─── MoneyDisplay — large EUR display, TR-style ───────────────── // Whole-euro is bold; cents are smaller and dimmer; "€" trailing. function MoneyDisplay({ amount, big = false, mid = false, color, decimals = 2, dim = false }) { const safe = (amount || 0); const [eur, cents] = safe.toFixed(decimals).split('.'); const formattedEur = parseInt(eur, 10).toLocaleString('de-DE'); const fs = big ? 56 : mid ? 32 : 24; const main = color || (dim ? 'var(--fg-mid)' : 'var(--fg)'); const subcolor = color || (dim ? 'var(--fg-dim)' : 'var(--fg-mid)'); return ( {formattedEur} ,{cents} € ); } // ─── Field row — used inside lists ──────────────────────────────── function FieldRow({ label, value, sub, right, onClick, last = false }) { return (

{label}

{value !== undefined && (

{value}

)} {sub &&

{sub}

}

{right}

); } // ─── Toast system ───────────────────────────────────────────────── const ToastCtx = createContext(null); function ToastHost({ children }) { const [toasts, setToasts] = useState([]); const push = useCallback((msg, opts = {}) => { const id = Math.random().toString(36).slice(2); setToasts(t => [...t, { id, msg, tone: opts.tone || 'default' }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2400); }, []); return ( {children}

{toasts.map(t => (

{t.msg}

))}

); } function useToast() { return useContext(ToastCtx); } // ─── Spacer ─────────────────────────────────────────────────────── function Spacer({ h = 16 }) { return

; } // ─── Section title — TR style: small bold white with chevron ──── function SectionTitle({ children, right, onMore, style = {} }) { return (

{children} {onMore && }

{right &&

{right}

}

); } // ─── Live ticker dot ────────────────────────────────────────────── function LiveDot({ size = 6, color = 'var(--pos)' }) { return ( ); } // ─── Random walk generator — seeded, stable across renders ─────── // Used by Sparkline (Portfolio cards) and Chart (basket detail). // Returns { linePath, fillPath, lastX, lastY, ys, min, max }. function makeWalk(seedStr, opts = {}) { const { W = 80, H = 100, N = 180, drift = 0, // per-step nominal drift vol = 1.4, // sigma of gaussian step jumps = 8, // count of random-direction jumps jumpSize = 4.0, // magnitude of each jump mr = 0.01, // mean-reversion strength toward target targetEnd = 0, // where the walk should drift toward (Δy from start) startY = 50, spline = 0.12, // Catmull-Rom tension; lower = more chaotic } = opts; // Stable seed from string let h = 2166136261; for (let i = 0; i < seedStr.length; i++) h = Math.imul(h ^ seedStr.charCodeAt(i), 16777619); let s = h >>> 0; const rand = () => { s = (s + 0x6D2B79F5) >>> 0; let t = s; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const gauss = () => { let u = 0, v = 0; while (u === 0) u = rand(); while (v === 0) v = rand(); const g = Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v); return Math.max(-3, Math.min(3, g)); }; const jumpAt = new Set(); for (let k = 0; k < jumps; k++) jumpAt.add(Math.floor(rand() * N)); const ys = []; let y = startY; let lo = y, hi = y; for (let i = 0; i <= N; i++) { const target = startY + (i / N) * targetEnd; let step = gauss() * vol + drift + (target - y) * mr; if (jumpAt.has(i)) step += gauss() * jumpSize; y = Math.max(6, Math.min(94, y + step)); if (y < lo) lo = y; if (y > hi) hi = y; ys.push(y); } // Force the final point to match targetEnd direction (so sign matches caller's intent) // by gently nudging the last 12% toward startY+targetEnd const endTarget = startY + targetEnd; const tail = Math.floor(N * 0.12); for (let i = N - tail; i <= N; i++) { const k = (i - (N - tail)) / tail; ys[i] = ys[i] * (1 - k * 0.6) + endTarget * (k * 0.6); } const xs = ys.map((_, i) => (i / N) * W); const cmd = [`M ${xs[0].toFixed(2)} ${ys[0].toFixed(2)}`]; for (let i = 0; i < ys.length - 1; i++) { const p0 = i === 0 ? [xs[0], ys[0]] : [xs[i - 1], ys[i - 1]]; const p1 = [xs[i], ys[i]]; const p2 = [xs[i + 1], ys[i + 1]]; const p3 = i + 2 < ys.length ? [xs[i + 2], ys[i + 2]] : p2; const t = spline; const cp1x = p1[0] + (p2[0] - p0[0]) * t; const cp1y = p1[1] + (p2[1] - p0[1]) * t; const cp2x = p2[0] - (p3[0] - p1[0]) * t; const cp2y = p2[1] - (p3[1] - p1[1]) * t; cmd.push(`C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2[0].toFixed(2)} ${p2[1].toFixed(2)}`); } const linePath = cmd.join(' '); const lastX = xs[xs.length - 1]; const lastY = ys[ys.length - 1]; const fillPath = `${linePath} L ${lastX.toFixed(2)} ${H} L 0 ${H} Z`; return { linePath, fillPath, lastX, lastY, ys, min: lo, max: hi }; } // ─── Sparkline — compact inline chart ──────────────────────────── function Sparkline({ seed, sign = 1, width = 64, height = 22, color }) { const path = React.useMemo(() => makeWalk(String(seed), { W: 80, H: 40, N: 60, drift: sign >= 0 ? 0.10 : -0.10, vol: 0.85, jumps: 3, jumpSize: 1.8, mr: 0.01, targetEnd: sign >= 0 ? -14 : 14, // positive sign → ends higher (lower y) startY: 22, spline: 0.15, }), [seed, sign]); const stroke = color || (sign >= 0 ? 'var(--pos)' : 'var(--neg)'); return ( ); } // ─── Chart — larger version with fill + dotted midline + end dot ── function Chart({ seed, sign = 1, height = 110, color, fillOpacity = 0.10 }) { const path = React.useMemo(() => makeWalk(String(seed), { W: 80, H: 100, N: 220, drift: sign >= 0 ? 0.020 : -0.018, vol: 1.45, jumps: 12, jumpSize: 4.0, mr: 0.008, targetEnd: sign >= 0 ? -22 : 18, startY: sign >= 0 ? 62 : 42, spline: 0.10, }), [seed, sign]); const stroke = color || (sign >= 0 ? 'var(--pos)' : 'var(--neg)'); const fillId = 'ch_' + String(seed).replace(/[^a-z0-9]/gi, ''); return ( ); } // ─── Return — seeded plausible % for 3/6/12mo periods ───────────── // Returns a stable, sign-biased number based on a seed string. function seededReturn(seedStr, range = [-8, 8]) { let h = 2166136261; for (let i = 0; i < seedStr.length; i++) h = Math.imul(h ^ seedStr.charCodeAt(i), 16777619); const r = ((h >>> 0) % 10000) / 10000; return range[0] + r * (range[1] - range[0]); } Object.assign(window, { Icon, Bar, Pill, Card, Button, AssetGlyph, BasketGlyph, Sheet, FieldRow, Header, Spacer, NumPad, MoneyDisplay, SegControl, TimeRange, ToastHost, useToast, SectionTitle, LiveDot, Delta, DeltaEur, brandFor, makeWalk, Sparkline, Chart, seededReturn, });