// Quark Finance — primitives.jsx // Ambient background, particle field, glass surfaces, sidebar, generic charts. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ───────────────────────────────────────────────────────────── // Ambient nebula background — multiple radial gradients drifting slowly // ───────────────────────────────────────────────────────────── function QAmbient({ intensity = 1 }) { return (
{/* fine grid */} {/* noise */}
); } // Particle field (pure SVG, deterministic) function QParticles({ count = 24, seed = 1 }) { const points = useMemo(() => { const arr = []; let s = seed * 9301; const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; for (let i = 0; i < count; i++) { arr.push({ x: rnd() * 100, y: rnd() * 100, r: 0.5 + rnd() * 1.4, d: 4 + rnd() * 8, // animation duration s delay: rnd() * 6, c: rnd() > 0.7 ? 'var(--q-accent-cyan)' : 'var(--q-violet-300)', }); } return arr; }, [count, seed]); return ( {points.map((p, i) => ( ))} ); } // ───────────────────────────────────────────────────────────── // Sidebar // ───────────────────────────────────────────────────────────── const SIDEBAR_ITEMS = [ { key: 'dashboard', label: 'Dashboard', icon: 'home' }, { key: 'timeline', label: 'Timeline', icon: 'timeline' }, { key: 'copilot', label: 'AI Copilot', icon: 'spark', glow: true }, { key: 'wallets', label: 'Wallets', icon: 'wallet' }, { key: 'analytics', label: 'Analytics', icon: 'chart' }, { key: 'predictions', label: 'Predictions', icon: 'forecast' }, { key: 'twin', label: 'Digital Twin', icon: 'twin' }, { key: 'missions', label: 'Missions', icon: 'flag' }, { key: 'radar', label: 'Risk Radar', icon: 'radar' }, { key: 'insights', label: 'Quantum Insights', icon: 'graph' }, { key: 'security', label: 'Security', icon: 'lock' }, { key: 'models', label: 'AI Models', icon: 'cpu' }, { key: 'settings', label: 'Settings', icon: 'gear' }, ]; function QIcon({ name, size = 16 }) { const stroke = 'currentColor'; const sw = 1.5; const common = { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (name) { case 'home': return ; case 'timeline': return ; case 'spark': return ; case 'wallet': return ; case 'chart': return ; case 'forecast': return ; case 'twin': return ; case 'flag': return ; case 'radar': return ; case 'graph': return ; case 'cpu': return ; case 'gear': return ; case 'search': return ; case 'bell': return ; case 'plus': return ; case 'send': return ; case 'arrow-up': return ; case 'arrow-down': return ; case 'arrow-right': return ; case 'check': return ; case 'warn': return ; case 'lock': return ; case 'sparkle': return ; case 'orbit': return ; default: return ; } } function QSidebar({ active = 'dashboard', onNav, collapsed = false }) { const tr = (typeof window.useTr === 'function') ? window.useTr() : (s)=>s; return ( ); } // Quark Q logo — circle with orbit and core function QLogo({ size = 28 }) { return ( ); } // ───────────────────────────────────────────────────────────── // QLoadingScreen — fullscreen atom animation between auth/onboarding/app // ───────────────────────────────────────────────────────────── function QLoadingScreen({ message, sublabel, onDone, duration = 1400 }) { const tr = (typeof window.useTr === 'function') ? window.useTr() : (s)=>s; const [tick, setTick] = useState(0); useEffect(() => { if (!onDone) return; const t = setTimeout(onDone, duration); return () => clearTimeout(t); }, [onDone, duration]); useEffect(() => { const i = setInterval(() => setTick(t => (t + 1) % 4), 380); return () => clearInterval(i); }, []); // Atom geometry — three rotated orbits + nucleus const CX = 110, CY = 110; const ORBITS = [ { rx: 90, ry: 32, rot: 0, dur: 3.2, color: '#C084FF' }, { rx: 90, ry: 32, rot: 60, dur: 4.0, color: '#6DF3FF' }, { rx: 90, ry: 32, rot: 120, dur: 4.8, color: '#FF7AE6' }, ]; const rotPath = (rx, ry, rotDeg) => { const a = rotDeg * Math.PI / 180; const x0 = (CX + rx * Math.cos(a)).toFixed(2); const y0 = (CY + rx * Math.sin(a)).toFixed(2); const x1 = (CX - rx * Math.cos(a)).toFixed(2); const y1 = (CY - rx * Math.sin(a)).toFixed(2); return `M ${x0} ${y0} A ${rx} ${ry} ${rotDeg} 1 1 ${x1} ${y1} A ${rx} ${ry} ${rotDeg} 1 1 ${x0} ${y0}`; }; return (
{/* outer halo */}
{ORBITS.map((o, i) => ( ))} {/* expanding rings */} {[0,1,2].map(i => ( ))} {/* orbit paths */} {ORBITS.map((o, i) => ( ))} {/* glow halo */} {/* nucleus */} {/* electrons travelling along the orbits */} {ORBITS.map((o, i) => ( ))} {/* label */}
QUARK · {tr('SYNTHESIZING')}{'.'.repeat(tick)}
{message && (
{tr(message)}
)} {sublabel && (
{tr(sublabel)}
)}
); } window.QLoadingScreen = QLoadingScreen; // Topbar function QTopbar({ title, subtitle, breadcrumb, actions }) { const tr = (typeof window.useTr === 'function') ? window.useTr() : (s)=>s; const trStr = (s) => (typeof s === 'string' ? tr(s) : s); return (
{breadcrumb && (
{trStr(breadcrumb)}
)}

{trStr(title)}

{subtitle &&
{trStr(subtitle)}
}
{actions}
MR
); } // KPI tile function QKpi({ label, value, delta, deltaLabel, accent = 'violet', sparkline, suffix }) { const accentMap = { violet: 'var(--q-violet-300)', cyan: 'var(--q-accent-cyan)', pink: 'var(--q-accent-pink)', emerald: 'var(--q-accent-emerald)', coral: 'var(--q-accent-coral)', }; const positive = delta && !String(delta).startsWith('-'); const tr = (typeof window.useTr === 'function') ? window.useTr() : (s)=>s; const trStr = (s) => (typeof s === 'string' ? tr(s) : s); return (
{trStr(label)}
{value} {suffix && {suffix}}
{delta && (
{delta} {trStr(deltaLabel)}
)} {sparkline &&
{sparkline}
}
); } // Sparkline (deterministic from points array) function QSparkline({ points, color = 'var(--q-violet-400)', height = 28, fill = true, width = 120 }) { if (!points || points.length < 2) return null; const min = Math.min(...points), max = Math.max(...points); const range = max - min || 1; const w = width, h = height; const xs = points.map((_, i) => (i / (points.length - 1)) * w); const ys = points.map(p => h - ((p - min) / range) * (h - 4) - 2); // smooth-ish path via quadratic let d = `M ${xs[0]} ${ys[0]}`; for (let i = 1; i < xs.length; i++) { const cx = (xs[i - 1] + xs[i]) / 2; d += ` Q ${cx} ${ys[i - 1]} ${xs[i]} ${ys[i]}`; } const fillD = d + ` L ${xs[xs.length - 1]} ${h} L ${xs[0]} ${h} Z`; return ( {fill && ( <> )} ); } // Generic glass section header function QSectionHead({ eyebrow, title, action, ai }) { const tr = (typeof window.useTr === 'function') ? window.useTr() : (s)=>s; const trStr = (s) => (typeof s === 'string' ? tr(s) : s); return (
{eyebrow &&
{trStr(eyebrow)}
}

{trStr(title)}

{ai && ( AI )}
{action}
); } Object.assign(window, { QAmbient, QParticles, QSidebar, QTopbar, QIcon, QLogo, QKpi, QSparkline, QSectionHead, SIDEBAR_ITEMS, });