// Shared icons, components, and API client for the Emulated.vip panel. // ============ Icons (inline SVG, currentColor) ============ const Ico = { Dash: (p) => , Box: (p) => , Key: (p) => , Users: (p) => , Money: (p) => , Trophy: (p) => , List: (p) => , Code: (p) => , Shield: (p) => , Cpu: (p) => , Down: (p) => , Book: (p) => , Chat: (p) => , Bell: (p) => , Search: (p) => , Plus: (p) => , Settings: (p) => , Out: (p) => , Discord: (p) => , Eye: (p) => , Edit: (p) => , Trash: (p) => , Copy: (p) => , Check: (p) => , Up: (p) => , Zap: (p) => , Lock: (p) => , Arrow: (p) => , Refresh: (p) => , Crown: (p) => , Btc: (p) => , Paypal: (p) => , Stripe: (p) => , Heart: (p) => , Globe: (p) => , Reset: (p) => , Filter: (p) => , }; // ============ API client ============ const api = { async req(method, path, body) { const opts = { method, headers: { 'Content-Type': 'application/json' }, credentials: 'same-origin' }; if (body !== undefined) opts.body = JSON.stringify(body); const r = await fetch(path, opts); const ct = r.headers.get('content-type') || ''; const data = ct.includes('json') ? await r.json() : await r.text(); if (!r.ok) throw new Error((data && data.error) || `HTTP ${r.status}`); return data; }, get: (p) => api.req('GET', p), post: (p,b) => api.req('POST', p, b||{}), put: (p,b) => api.req('PUT', p, b||{}), patch: (p,b) => api.req('PATCH', p, b||{}), del: (p) => api.req('DELETE', p), async upload(path, file, fields) { const fd = new FormData(); fd.append('file', file); for (const [k,v] of Object.entries(fields||{})) fd.append(k, v); const r = await fetch(path, { method:'POST', body: fd, credentials: 'same-origin' }); if (!r.ok) { const t = await r.text(); throw new Error(t || `HTTP ${r.status}`); } return await r.json(); }, }; // ============ Hook: GET an endpoint with refresh + loading ============ function useApi(path, deps=[]) { const [data, setData] = React.useState(null); const [error, setError] = React.useState(null); const [loading, setLoading] = React.useState(true); const [tick, setTick] = React.useState(0); React.useEffect(() => { if (!path) return; let cancelled = false; setLoading(true); api.get(path).then(d => { if(!cancelled){ setData(d); setError(null); setLoading(false); } }) .catch(e => { if(!cancelled){ setError(e.message); setLoading(false); } }); return () => { cancelled = true; }; }, [path, tick, ...deps]); return { data, error, loading, refresh: () => setTick(t=>t+1), setData }; } // ============ Toast (simple top-right) ============ const toastState = { listeners: [] }; function toast(msg, kind='ok') { toastState.listeners.forEach(fn => fn({ id: Date.now()+Math.random(), msg, kind })); } function ToastHost() { const [items, setItems] = React.useState([]); React.useEffect(() => { const fn = (t) => { setItems(prev => [...prev, t]); setTimeout(() => setItems(prev => prev.filter(x => x.id !== t.id)), 3800); }; toastState.listeners.push(fn); return () => { toastState.listeners = toastState.listeners.filter(x => x !== fn); }; }, []); return (
{items.map(t => (
{t.msg}
))}
); } // ============ Decorative ring SVGs ============ function RingsBg({ density = 8, opacity = 0.45 }) { const items = []; const rng = (i) => Math.sin(i * 9301 + 49297) * 0.5 + 0.5; for (let i = 0; i < density; i++) { const x = rng(i) * 100; const y = rng(i + 100) * 100; const r = 80 + rng(i + 200) * 220; const rot = rng(i + 300) * 60 - 30; items.push( ); } return
{items}
; } // ============ Logo ============ function Logo({ size = 28 }) { return Emulated.vip{ e.currentTarget.style.display='none'; }} style={{ filter: 'drop-shadow(0 0 12px rgba(255,184,0,0.4))' }}/>; } // ============ Avatar ============ function Avatar({ name, size = 28 }) { const safe = name || '?'; const letters = safe.split(/[\s_.-]/).filter(Boolean).slice(0, 2).map(s => s[0]).join("").toUpperCase() || '?'; let h = 0; for (let i = 0; i < safe.length; i++) h = (h * 31 + safe.charCodeAt(i)) >>> 0; const hue = h % 360; const bg = `linear-gradient(135deg, oklch(60% 0.15 ${hue}), oklch(45% 0.12 ${(hue + 40) % 360}))`; return
{letters}
; } // ============ Spark ============ function Spark({ data, color = "var(--accent)", height = 60 }) { if (!data || !data.length) data = [0,0]; const w = 200, h = height, pad = 6; const min = Math.min(...data), max = Math.max(...data); const range = max - min || 1; const pts = data.map((v, i) => { const x = pad + (i / (data.length - 1)) * (w - pad * 2); const y = h - pad - ((v - min) / range) * (h - pad * 2); return `${x},${y}`; }).join(" "); const area = `${pad},${h} ${pts} ${w - pad},${h}`; const id = `g-${Math.random().toString(36).slice(2, 8)}`; return ( ); } // ============ Bar chart ============ function Bars({ data, color = "var(--accent)", height = 140, labels }) { if (!data || !data.length) return null; const max = Math.max(...data) || 1; return (
{data.map((v, i) => (
{labels && {labels[i]}}
))}
); } // ============ Stat tile ============ function Stat({ label, value, delta, deltaDir = "up", icon, spark }) { return (
{icon &&
{icon}
}
{label}
{value}
{delta &&
{deltaDir === 'up' ? '↑' : '↓'} {delta}
} {spark &&
}
); } // ============ Modal ============ function Modal({ open, onClose, title, children, width=520, closeOnBackdrop=true }) { const downOnBackdrop = React.useRef(false); if (!open) return null; return (
{ downOnBackdrop.current = e.target === e.currentTarget; }} onClick={e => { if (closeOnBackdrop && downOnBackdrop.current && e.target === e.currentTarget) onClose?.(); downOnBackdrop.current = false; }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'grid', placeItems: 'center', padding: 24, }} >
e.stopPropagation()} className="card" style={{ width: '100%', maxWidth: width, maxHeight: '90vh', overflow: 'auto' }}>

{title}

{children}
); } // ============ Helpers ============ const fmtMoney = (n) => '$' + (Number(n)||0).toFixed(2); const fmtTime = (sec) => { if (!sec) return '—'; const d = new Date(sec*1000); const now = Date.now(); const diff = (now - d.getTime())/1000; if (diff < 60) return 'just now'; if (diff < 3600) return `${Math.floor(diff/60)}m ago`; if (diff < 86400) return `${Math.floor(diff/3600)}h ago`; if (diff < 86400*7) return `${Math.floor(diff/86400)}d ago`; return d.toISOString().slice(0,10); }; const fmtDate = (sec) => sec ? new Date(sec*1000).toISOString().slice(0,10) : '—'; const RANK_COLORS = { Diamond: '#b9f2ff', Platinum: '#90e0ef', Gold: '#FFB800', Silver: '#c0c0c0', Bronze: '#cd7f32' }; const DURATIONS = ["1 Day", "1 Week", "1 Month", "Lifetime"]; // ============ Copy button (clipboard with toast) ============ function CopyBtn({ value, label='Copy', size='sm', icon=true, kind='', successMsg='Copied' }) { const [done, setDone] = React.useState(false); const copy = async (e) => { e?.stopPropagation(); try { await navigator.clipboard.writeText(value); setDone(true); setTimeout(()=>setDone(false), 1200); toast(successMsg); } catch { toast('Copy failed','err'); } }; return ( ); } // ============ Keys reveal modal (post-generation) ============ function KeysReveal({ open, batchId, keys, cost, balanceAfter, productName, duration, onClose }) { if (!open) return null; const text = (keys||[]).join('\n'); const csv = (keys||[]).join('\n'); const download = (ext='txt') => { const blob = new Blob([ext==='csv'?csv:text], { type: ext==='csv'?'text/csv':'text/plain' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `batch-${batchId||Date.now()}.${ext}`; a.click(); URL.revokeObjectURL(a.href); }; return (
success {productName && {productName}} {duration && {duration}} {batchId && BATCH-{String(batchId).padStart(5,'0')}}
{cost !== undefined && cost {fmtMoney(cost)}} {balanceAfter !== undefined && balance {fmtMoney(balanceAfter)}}
{(keys||[]).map((k, i) => (
{String(i+1).padStart(3,'0')} {k}
))}
Keep these safe — anyone with a key can activate it. You can always get them back from the batch row.
); } // ============ Empty state ============ function EmptyState({ icon, title, desc, action }) { return (
{icon &&
{React.cloneElement(icon, { width: 24, height: 24 })}
}
{title}
{desc &&
{desc}
} {action}
); } // ============ NumberInput — stepper + presets, no fiddly browser arrows ============ function NumberInput({ value, onChange, min, max, step=1, presets=[], prefix, suffix, placeholder, style={}, disabled }) { const clamp = (v) => { let n = +v; if (isNaN(n)) n = min ?? 0; if (min !== undefined && n < min) n = min; if (max !== undefined && n > max) n = max; // Snap to step for ints if (step >= 1 && Number.isInteger(step)) n = Math.round(n/step)*step; return n; }; const bump = (d) => onChange(clamp((+value||0) + d*step)); return (
{prefix && {prefix}} { const raw = e.target.value.replace(/[^0-9.\-]/g,''); onChange(raw === '' ? '' : (step < 1 ? +raw : (raw === '-' ? '-' : +raw))); }} onBlur={()=>onChange(clamp(value))} style={{ borderRadius: 0, textAlign: 'center', fontSize: 15, fontWeight: 700, paddingLeft: prefix?22:10, paddingRight: suffix?28:10 }} /> {suffix && {suffix}}
{presets.length > 0 && (
{presets.map(p => ( !disabled && onChange(p)}>{prefix||''}{p}{suffix||''} ))}
)}
); } // Make available globally Object.assign(window, { Ico, RingsBg, Logo, Avatar, Spark, Bars, Stat, Modal, ToastHost, CopyBtn, KeysReveal, EmptyState, NumberInput, api, useApi, toast, fmtMoney, fmtTime, fmtDate, RANK_COLORS, DURATIONS, });