e.stopPropagation()} style={{ width: '100%', background: 'var(--surface)', borderTopLeftRadius: 24, borderTopRightRadius: 24, borderTop: '1px solid var(--line-2)', boxShadow: '0 -20px 50px -20px rgba(0,0,0,0.6)', maxHeight: maxH, display: 'flex', flexDirection: 'column', transform: open ? `translateY(${drag}px)` : 'translateY(100%)', transition: drag ? 'none' : 'transform .3s cubic-bezier(.22,.61,.36,1)', paddingBottom: 'env(safe-area-inset-bottom, 12px)', }}>

{title && (

{title}

)}

{children}

); } /* ---------------- swipe hook ---------------- */ function useSwipe({ onLeft, onRight, threshold = 56 }) { const s = useRef(null); return { onTouchStart: (e) => { s.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }, onTouchEnd: (e) => { if (!s.current) return; const dx = e.changedTouches[0].clientX - s.current.x; const dy = e.changedTouches[0].clientY - s.current.y; if (Math.abs(dx) > threshold && Math.abs(dx) > Math.abs(dy) * 1.4) { if (dx < 0) onLeft && onLeft(); else onRight && onRight(); } s.current = null; }, }; } /* ---------------- ticker tape ---------------- */ function fmtPrice(p) { if (p >= 1000) return '$' + p.toLocaleString('en-US', { maximumFractionDigits: 0 }); if (p >= 1) return '$' + p.toFixed(2); if (p >= 0.001) return '$' + p.toFixed(3); return '$' + p.toExponential(1).replace('e-', 'e‑'); } function TickerTape() { const { ticker } = window.DB; const [rows, setRows] = useState(() => ticker.map(t => ({ ...t, prev: t.price }))); useEffect(() => { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) return; const id = setInterval(() => { setRows(rs => rs.map(t => { if (Math.random() > 0.5) return t; // only some tick each cycle const drift = (Math.random() - 0.48) * 0.012; const np = Math.max(t.price * 0.5, t.price * (1 + drift)); return { ...t, prev: t.price, price: np, chg: +(t.chg + drift * 100).toFixed(1) }; })); }, 1800); return () => clearInterval(id); }, []); const row = (key) => (

{rows.concat(rows).map((t, i) => { const pos = t.chg >= 0; const up = t.price >= t.prev; return (

{t.sym} {fmtPrice(t.price)} {pos ? '▲' : '▼'} {Math.abs(t.chg).toFixed(1)}%

); })}

); return (

{row(0)}{row(1)}

); } /* ---------------- kinetic headline (WAAPI clip reveal per line) ---------------- */ function Kinetic({ lines, style, lineStyle }) { const [ioRef, seen] = useInView({ threshold: 0.2 }); const h1Ref = useRef(null); const played = useRef(false); const setRef = (n) => { h1Ref.current = n; ioRef.current = n; }; useEffect(() => { if (seen && h1Ref.current && !played.current) { played.current = true; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) return; const spans = h1Ref.current.querySelectorAll('.kin-line > span'); spans.forEach((s, i) => { if (!s.animate) return; s.animate( [{ opacity: 0, transform: 'translateY(115%) rotate(3deg)' }, { opacity: 1, transform: 'translateY(0) rotate(0)' }], { duration: 880, easing: 'cubic-bezier(.16,1,.3,1)', delay: 90 + i * 110, fill: 'forwards' } ); }); } }, [seen]); return (

{lines.map((ln, i) => ( {ln} ))}

); } /* ---------------- section label (technical numbering) ---------------- */ function SectionLabel({ n, children, right }) { return (

{n} {children} {right}

); } /* ---------------- page header (eyebrow + display title) ---------------- */ function PageHead({ n, title, sub, right }) { return (

{n &&

{n}

}

{title}

{sub &&

{sub}

}

{right}

); } /* ---------------- magnetic wrapper ---------------- */ function Magnetic({ children, strength = 0.32, style }) { const ref = useRef(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const x = (e.clientX - r.left - r.width / 2) * strength; const y = (e.clientY - r.top - r.height / 2) * strength; el.style.transform = `translate(${x}px, ${y}px)`; }; const reset = () => { if (ref.current) ref.current.style.transform = 'translate(0,0)'; }; return (

{children}

); } /* ---------------- spotlight handlers (attach to a .spot element) ---------------- */ function spotlight(e) { const el = e.currentTarget; const r = el.getBoundingClientRect(); el.style.setProperty('--mx', ((e.clientX - r.left) / r.width) * 100 + '%'); el.style.setProperty('--my', ((e.clientY - r.top) / r.height) * 100 + '%'); } /* ---------------- portal (escape stacking contexts) ---------------- */ function Portal({ children }) { const el = useRef(null); if (!el.current) { el.current = document.createElement('div'); el.current.setAttribute('data-portal', ''); } useEffect(() => { document.body.appendChild(el.current); return () => { try { document.body.removeChild(el.current); } catch (e) {} }; }, []); return ReactDOM.createPortal(children, el.current); } /* ---------------- skeleton + fake-load ---------------- */ function Skel({ w = '100%', h = 14, r = 8, style }) { return ; } function useFakeLoad(ms = 600) { const [loading, setLoading] = useState(true); useEffect(() => { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) { setLoading(false); return; } const t = setTimeout(() => setLoading(false), ms); return () => clearTimeout(t); }, []); return loading; } Object.assign(window, { Mark, Logo, Icon, ICONS, WalletBrandIcon, Sparkline, AreaChart, WeightRing, TokenDot, TokenStack, KolAvatar, Btn, Chip, Card, Stat, Pct, EstimateBadge, ChainBadge, fmtUsd, fmtCompact, fmtPct, sign, useIsMobile, useTheme, ThemeToggle, applyTheme, Reveal, CountUp, useCountUp, BottomSheet, useSwipe, TickerTape, Kinetic, SectionLabel, PageHead, Magnetic, spotlight, fmtPrice, useInView, Skel, useFakeLoad, Portal, });