{children}

); }; // ─── CMD-K MODAL ───────────────────────────────────────────────────────────── const CmdKModal = ({ open, onClose, trackedUsers, setPage, onOpenUser }) => { const [query, setQuery] = useState(''); const [idx, setIdx] = useState(0); useEffect(() => { if (!open) setQuery(''); }, [open]); const results = query.trim() ? trackedUsers.filter(u => u.username.toLowerCase().includes(query.toLowerCase()) || u.robloxId.includes(query)) : trackedUsers; const nav = [ { label: 'Dashboard', icon: 'Dashboard', action: () => { setPage('dashboard'); onClose(); } }, { label: 'Tracking', icon: 'Tracking', action: () => { setPage('tracking'); onClose(); } }, { label: 'Analytics', icon: 'Analytics', action: () => { setPage('analytics'); onClose(); } }, { label: 'Alerts', icon: 'Alerts', action: () => { setPage('alerts'); onClose(); } }, { label: 'Settings', icon: 'Settings', action: () => { setPage('settings'); onClose(); } }, ]; const items = query.trim() ? results.map(u => ({ type: 'user', data: u, label: u.username, sub: u.status, action: () => { onOpenUser(u); onClose(); } })) : [...nav.map(n => ({ type: 'nav', label: n.label, icon: n.icon, action: n.action })), ...trackedUsers.slice(0, 3).map(u => ({ type: 'user', data: u, label: u.username, sub: u.status, action: () => { onOpenUser(u); onClose(); } }))]; useEffect(() => { setIdx(0); }, [query]); useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') { onClose(); return; } if (e.key === 'ArrowDown') { e.preventDefault(); setIdx(i => Math.min(i + 1, items.length - 1)); } if (e.key === 'ArrowUp') { e.preventDefault(); setIdx(i => Math.max(i - 1, 0)); } if (e.key === 'Enter' && items[idx]) { items[idx].action(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, idx, items]); if (!open) return null; return (

setQuery(e.target.value)} placeholder="Search users, navigate..." style={{ flex: 1, background: 'none', border: 'none', outline: 'none', color: 'var(--t1)', fontSize: 14.5, fontFamily: 'var(--font)' }} /> ESC

{items.length === 0 ? (

No results for "{query}"

) : items.map((item, i) => { const active = i === idx; const I = item.icon ? Icon[item.icon] : null; return (

setIdx(i)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 14px', cursor: 'pointer', background: active ? 'var(--p-dim)' : 'transparent', borderLeft: `2px solid ${active ? 'var(--p5)' : 'transparent'}`, transition: 'all 0.1s' }}> {item.type === 'user' ? ( <>

{item.label}

{item.sub} ) : ( <>{I && }
{item.label}
page )}

); })}

{[['↑↓','navigate'],['↵','select'],['esc','close']].map(([k,l]) => ( {k} {l} ))}

); }; // ─── TOAST ──────────────────────────────────────────────────────────────────── const ToastContainer = ({ toasts, removeToast }) => (
{toasts.map(t => (
{t.type === 'success' ? : t.type === 'error' ? : } {t.msg}
))}
); // ─── NOTIFICATION DROPDOWN ──────────────────────────────────────────────────── const NotifDropdown = ({ alerts, onClear, onClose }) => { const ref = useRef(null); useEffect(() => { const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); }; setTimeout(() => document.addEventListener('mousedown', handler), 0); return () => document.removeEventListener('mousedown', handler); }, []); return (

Alerts {alerts.length > 0 && }
{alerts.length === 0 ?
No recent alerts
: alerts.slice(0, 6).map((a, i) => (

{a.user} {a.event}

{a.time}

))}
); }; // ─── LOGO GLYPH (vector copy of brand mark: arrows + rings + pin + nodes) ───── const LogoGlyph = ({ size = 18, glow = true }) => ( ); const LogoMark = ({ size = 28, plain = false }) => { if (plain) return ; return (

); }; // ─── SIDEBAR ────────────────────────────────────────────────────────────────── const NAV_ITEMS = [ { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard' }, { id: 'tracking', label: 'Tracking', icon: 'Tracking' }, { id: 'analytics', label: 'Analytics', icon: 'Analytics' }, { id: 'alerts', label: 'Alerts', icon: 'Alerts' }, { id: 'pricing', label: 'Pricing', icon: 'Pricing' }, { id: 'settings', label: 'Settings', icon: 'Settings' }, ]; const ADMIN_CLERK_USER_ID = 'user_3F7kNkUoyAB2qYly99EqxUv0vIF'; const Sidebar = ({ page, setPage, collapsed, user, alertCount = 0 }) => { const isAdmin = user && user.id && ADMIN_CLERK_USER_ID && user.id === ADMIN_CLERK_USER_ID; const w = collapsed ? 58 : 220; return (

{!collapsed &&
RoStealth
rostealth.site
}

{[...NAV_ITEMS, ...(isAdmin ? [{ id:'admin', label:'Admin', icon:'Shield' }] : [])].map(item => { const active = page === item.id; const I = Icon[item.icon]; const showBadge = item.id === 'alerts' && alertCount > 0; const isAdminItem = item.id === 'admin'; return ( ); })}

{!collapsed &&
{user.username}
Pro
}

); }; // ─── TOPBAR ─────────────────────────────────────────────────────────────────── const TopBar = ({ page, collapsed, setCollapsed, onLogout, user, alertCount, alerts, onClearAlerts, onCmdK }) => { const labels = { dashboard: 'Dashboard', tracking: 'Tracking', analytics: 'Analytics', alerts: 'Alerts', pricing: 'Pricing', settings: 'Settings', admin: 'Admin' }; const [showNotif, setShowNotif] = useState(false); return (
{labels[page] || 'Dashboard'}
{showNotif && setShowNotif(false)} />}

); }; // ─── UPGRADE NUDGE ──────────────────────────────────────────────────────────── const UpgradeBanner = ({ onUpgrade }) => (

You're on Free

Unlimited tracking, real-time updates & Discord alerts on Pro.

); const StatCard = ({ label, value, sub, accent }) => (

{label}

{value}
{sub &&
{sub}
}
); Object.assign(window, { Icon, Btn, Badge, GlowDot, StatusDot, Avatar, Card, Input, Drawer, CmdKModal, ToastContainer, NotifDropdown, LogoMark, LogoGlyph, Sidebar, TopBar, UpgradeBanner, StatCard });