// Shared components + data
// Note: do not destructure hooks at module scope — page scripts also do, and Babel concatenates them.
const TWEAKS_DEFAULTS_BASE = {
"theme": "light",
"accent": "purple",
"headline": "serif"
};
const ACCENTS = {
purple: { light: "#5B3A9C", dark: "#C5A8FF" },
green: { light: "#1F6A3A", dark: "#6FE197" },
amber: { light: "#8B5A1A", dark: "#F0C674" },
cobalt: { light: "#1F4FA8", dark: "#8AB6FF" },
};
// 3-year weekly data (157 pts, weekly ~Apr 2023 → Apr 18 2026)
const supplyTrend3Y = [
// Q2 2023
2.1,2.12,2.15,2.18,2.2,2.22,2.25,2.28,2.3,2.33,2.36,2.38,2.4,
// Q3 2023
2.42,2.45,2.48,2.52,2.55,2.58,2.62,2.65,2.7,2.75,2.8,2.85,2.9,
// Q4 2023 — DeFi + memecoin season ignites
2.95,3.05,3.2,3.4,3.65,3.9,4.1,4.25,4.4,4.5,4.58,4.62,4.65,
// Q1 2024 — explosive growth
4.8,5.1,5.5,5.9,6.3,6.6,6.9,7.1,7.2,7.3,7.38,7.42,7.45,
// Q2 2024 — consolidation
7.5,7.48,7.52,7.58,7.55,7.6,7.65,7.62,7.68,7.72,7.75,7.78,7.8,
// Q3 2024 — steady rise
7.85,7.9,8.0,8.05,8.1,8.15,8.2,8.28,8.35,8.42,8.5,8.55,8.6,
// Q4 2024 — post-election bull run
8.75,9.1,9.5,9.9,10.3,10.7,11.1,11.4,11.7,12.0,12.2,12.4,12.5,
// Q1 2025
12.4,12.6,12.72,12.8,12.75,12.88,12.95,12.92,13.0,13.08,13.14,13.2,13.25,
// Q2 2025
13.22,13.3,13.38,13.42,13.4,13.48,13.52,13.5,13.56,13.62,13.66,13.7,13.72,
// Q3 2025
13.8,13.9,14.02,14.08,14.12,14.18,14.24,14.32,14.42,14.52,14.62,14.72,14.82,
// Q4 2025
14.95,15.1,15.22,15.32,15.42,15.52,15.62,15.72,15.82,15.92,16.02,16.12,16.22,
// Q1 2026 — ATH then pullback
16.3,16.4,16.5,16.6,16.7,16.8,16.75,16.62,16.48,16.32,16.22,16.16,16.23,
// Apr 14 2026
16.23
];
const solPrice3Y = [
// Q2 2023
22,21.5,20.8,21.2,22.5,23.8,24.5,25.1,24.8,25.5,26.2,25.8,24.5,
// Q3 2023
23.8,22.5,21.8,22.2,21.5,20.8,21.2,22.0,23.5,25.0,26.8,28.5,30.2,
// Q4 2023 — break-out
29.5,31.0,35.0,42.0,52.0,55.0,60.0,65.0,70.0,80.0,95.0,105,115,
// Q1 2024 — ATH cycle
120,125,135,145,155,165,175,185,200,210,195,180,165,
// Q2 2024 — correction
158,152,148,145,142,140,138,135,133,132,130,132,135,
// Q3 2024 — base building
138,142,148,152,155,150,145,140,135,132,130,135,138,
// Q4 2024 — election rally
145,155,168,180,195,215,235,248,255,250,245,240,235,
// Q1 2025 — profit taking
230,222,215,208,200,193,186,180,175,170,165,160,155,
// Q2 2025 — recovery
152,150,148,152,155,158,162,165,168,170,172,175,178,
// Q3 2025 — new push
182,188,195,202,210,218,225,232,238,242,246,250,252,
// Q4 2025 — distribution
255,258,260,256,252,248,244,240,236,232,228,224,220,
// Q1 2026 — downtrend
215,208,200,192,185,178,172,167,162,158,155,153,153,
// Apr 14 2026
153
];
const tvlSeries3Y = [
// Q2 2023
0.82,0.84,0.85,0.87,0.88,0.9,0.92,0.95,0.98,1.0,1.02,1.05,1.08,
// Q3 2023
1.1,1.12,1.15,1.18,1.2,1.22,1.25,1.28,1.3,1.32,1.35,1.38,1.4,
// Q4 2023
1.45,1.5,1.6,1.75,1.9,2.1,2.3,2.5,2.7,2.85,3.0,3.1,3.2,
// Q1 2024
3.4,3.6,3.8,4.0,4.15,4.3,4.4,4.5,4.6,4.65,4.68,4.7,4.72,
// Q2 2024
4.7,4.65,4.6,4.55,4.5,4.48,4.45,4.42,4.4,4.42,4.45,4.48,4.5,
// Q3 2024
4.52,4.55,4.58,4.6,4.62,4.65,4.68,4.7,4.72,4.75,4.78,4.8,4.82,
// Q4 2024
4.85,4.9,4.95,5.0,5.05,5.1,5.15,5.2,5.25,5.3,5.35,5.4,5.45,
// Q1 2025
5.42,5.45,5.48,5.5,5.48,5.5,5.52,5.5,5.52,5.54,5.55,5.56,5.57,
// Q2 2025
5.55,5.56,5.57,5.56,5.57,5.58,5.57,5.58,5.59,5.6,5.61,5.62,5.62,
// Q3 2025
5.63,5.64,5.65,5.64,5.65,5.66,5.65,5.66,5.67,5.68,5.69,5.7,5.7,
// Q4 2025
5.7,5.7,5.71,5.7,5.71,5.72,5.71,5.72,5.72,5.72,5.72,5.72,5.72,
// Q1 2026
5.72,5.72,5.72,5.72,5.72,5.72,5.72,5.7,5.68,5.68,5.68,5.7,5.72,
// Apr 14 2026
5.72
];
// Legacy short series (kept for quarterly report pages)
const supplyTrend = supplyTrend3Y.slice(-29);
const solPrice90 = solPrice3Y.slice(-29);
const tvlSeries = tvlSeries3Y.slice(-29);
const dates = ["Jan 18","Feb 1","Feb 15","Mar 1","Mar 15","Apr 1","Apr 18"];
// Generate x-axis date labels for a given number of weekly data points
function generateDateLabels(numPoints, numLabels) {
const end = new Date('2026-04-18');
const daysPerPoint = (3 * 365 + 1) / 156; // ~7 days
const totalDays = (numPoints - 1) * daysPerPoint;
const showYear = totalDays > 400;
const n = numLabels != null ? numLabels : 6;
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const labels = [];
for (let i = 0; i <= n; i++) {
const pointIdx = Math.round((numPoints - 1) * (i / n));
const daysAgo = (numPoints - 1 - pointIdx) * daysPerPoint;
const d = new Date(end.getTime() - daysAgo * 86400000);
if (showYear) {
labels.push(`${months[d.getMonth()]} '${String(d.getFullYear()).slice(2)}`);
} else {
labels.push(`${months[d.getMonth()]} ${d.getDate()}`);
}
}
return labels;
}
function LineChart({ data, yMin, yMax, height, yLabel, accent, dateLabels }) {
const ref = React.useRef(null);
const [dim, setDim] = React.useState({ w: 900, h: height || 280 });
const [hover, setHover] = React.useState(null);
React.useEffect(() => {
if (!ref.current) return;
const obs = new ResizeObserver(entries => {
for (const e of entries) setDim({ w: e.contentRect.width, h: height || 280 });
});
obs.observe(ref.current);
return () => obs.disconnect();
}, [height]);
const { w, h } = dim;
const pad = { t: 24, r: 24, b: 30, l: 52 };
const iw = w - pad.l - pad.r, ih = h - pad.t - pad.b;
const min = yMin, max = yMax;
const pts = data.map((v, i) =>
v != null
? [pad.l + (i / (data.length - 1)) * iw, pad.t + ih - ((v - min) / (max - min)) * ih]
: null
);
// Build line path with gap support for null values
let pathStr = '';
data.forEach((v, i) => {
if (v == null || !pts[i]) return;
const [x, y] = pts[i];
const prevOk = i > 0 && data[i - 1] != null;
pathStr += `${prevOk ? 'L' : 'M'}${x.toFixed(1)},${y.toFixed(1)} `;
});
// Area fill — only for contiguous segments
const areaSegments = [];
let seg = [];
data.forEach((v, i) => {
if (v == null || !pts[i]) {
if (seg.length) { areaSegments.push(seg); seg = []; }
} else {
seg.push(pts[i]);
}
});
if (seg.length) areaSegments.push(seg);
const range = max - min;
const yTicks = [min, min + range * 0.33, min + range * 0.66, max].map(v => Math.round(v * 10) / 10);
const color = accent || 'var(--accent)';
const handleMouseMove = React.useCallback((e) => {
const svgEl = e.currentTarget;
const rect = svgEl.getBoundingClientRect();
const scaleX = w / rect.width;
const mouseX = (e.clientX - rect.left) * scaleX;
let closestIdx = -1, minDist = Infinity;
data.forEach((v, i) => {
if (v == null || !pts[i]) return;
const dist = Math.abs(pts[i][0] - mouseX);
if (dist < minDist) { minDist = dist; closestIdx = i; }
});
if (closestIdx >= 0) {
setHover({ index: closestIdx, x: pts[closestIdx][0], y: pts[closestIdx][1], value: data[closestIdx] });
}
}, [w, data, pts]);
// Last valid point for the live dot
const lastValidIdx = data.reduce((acc, v, i) => v != null ? i : acc, -1);
const lastPt = lastValidIdx >= 0 ? pts[lastValidIdx] : null;
// Tooltip positioning: flip left when near right edge
const ttW = 100, ttH = 36, ttPad = 10;
const ttX = hover ? (hover.x + ttPad + ttW > w - pad.r ? hover.x - ttPad - ttW : hover.x + ttPad) : 0;
const ttY = hover ? Math.max(pad.t, Math.min(hover.y - ttH / 2, pad.t + ih - ttH)) : 0;
const xLabels = dateLabels || dates;
return (
{w > 0 && (
)}
{w > 0 && (
)}
);
}
const PIE_COLORS = ['#9945FF', '#14F195', '#F59E0B', '#3B82F6', '#EF4444', '#EC4899'];
function PieChart({ data }) {
const W = 240, H = 240;
const cx = W / 2, cy = H / 2, r = 88, rInner = 50;
const total = data.reduce((s, d) => s + d.value, 0);
let angle = -Math.PI / 2;
const slices = data.map((d, i) => {
const sweep = (d.value / total) * 2 * Math.PI;
const x1 = cx + r * Math.cos(angle), y1 = cy + r * Math.sin(angle);
const x2 = cx + r * Math.cos(angle + sweep), y2 = cy + r * Math.sin(angle + sweep);
const xi1 = cx + rInner * Math.cos(angle), yi1 = cy + rInner * Math.sin(angle);
const xi2 = cx + rInner * Math.cos(angle + sweep), yi2 = cy + rInner * Math.sin(angle + sweep);
const large = sweep > Math.PI ? 1 : 0;
const path = `M${xi1.toFixed(2)},${yi1.toFixed(2)} L${x1.toFixed(2)},${y1.toFixed(2)} A${r},${r} 0 ${large},1 ${x2.toFixed(2)},${y2.toFixed(2)} L${xi2.toFixed(2)},${yi2.toFixed(2)} A${rInner},${rInner} 0 ${large},0 ${xi1.toFixed(2)},${yi1.toFixed(2)} Z`;
const midAngle = angle + sweep / 2;
angle += sweep;
return { ...d, path, midAngle, sweep, color: PIE_COLORS[i] };
});
const [hovered, setHovered] = React.useState(null);
const hov = hovered !== null ? slices[hovered] : null;
const callout = hov ? (() => {
const lR1 = r + 10, lR2 = r + 22, tR = r + 28;
const lx1 = cx + lR1 * Math.cos(hov.midAngle), ly1 = cy + lR1 * Math.sin(hov.midAngle);
const lx2 = cx + lR2 * Math.cos(hov.midAngle), ly2 = cy + lR2 * Math.sin(hov.midAngle);
const tx = cx + tR * Math.cos(hov.midAngle), ty = cy + tR * Math.sin(hov.midAngle);
const anchor = tx > cx ? 'start' : 'end';
return { lx1, ly1, lx2, ly2, tx, ty, anchor };
})() : null;
return (
{slices.map((s, i) => (
setHovered(i)}
onMouseLeave={() => setHovered(null)}
>
{s.label}
{s.value.toFixed(1)}%
))}
);
}
const LLM_ICONS = {
chatgpt: (
),
claude: (
),
copy: (
),
markdown: (
),
};
function LLMMenu() {
const [open, setOpen] = React.useState(false);
const [copied, setCopied] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', close);
return () => document.removeEventListener('mousedown', close);
}, []);
const prompt = encodeURIComponent('Ask questions about this page: ' + window.location.href);
const copyPage = (e) => {
e.preventDefault();
navigator.clipboard.writeText(window.location.href).then(() => {
setCopied(true);
setTimeout(() => { setCopied(false); setOpen(false); }, 1200);
}).catch(() => setOpen(false));
};
return (
{open && (
)}
);
}
function TopNav({ tweaks, setTweaks, onTweak, current }) {
const [navOpen, setNavOpen] = React.useState(false);
const toggleTheme = () => {
const next = tweaks.theme === 'dark' ? 'light' : 'dark';
setTweaks({...tweaks, theme: next});
window.parent.postMessage({type:'__edit_mode_set_keys', edits:{theme:next}}, '*');
};
const handleAnchor = (id) => (e) => {
const el = document.getElementById(id);
if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth' }); }
};
return (
);
}
function FooterBar() {
const handleAnchor = (id) => (e) => {
const el = document.getElementById(id);
if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth' }); }
};
return (
);
}
function EmailModal({ open, onClose, source }) {
const [email, setEmail] = React.useState('');
const [status, setStatus] = React.useState('idle');
const submit = async (e) => {
e.preventDefault();
setStatus('loading');
try {
const res = await fetch('/api/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: email.trim(), source: source || 'Home' }),
});
if (res.ok) {
setStatus('success');
setTimeout(onClose, 2000);
} else {
setStatus('error');
}
} catch {
setStatus('error');
}
};
React.useEffect(() => {
if (open) { setEmail(''); setStatus('idle'); }
}, [open]);
if (!open) return null;
return (
e.target === e.currentTarget && onClose()}
>
Quarterly research
New reports, straight to your inbox.
No spam. One email per quarter, the moment a new report drops.
{status === 'success' ? (
✓ You're on the list.
) : (
<>
{status === 'error' && (
Something went wrong. Please try again.
)}
)}
Tweaks
Theme
Accent
Headline font
);
}
function useTweaks(defaults) {
const init = React.useMemo(() => {
try {
const saved = JSON.parse(localStorage.getItem('ssa-tweaks') || '{}');
return { ...defaults, ...saved };
} catch { return defaults; }
}, []);
const [tweaks, _setTweaks] = React.useState(init);
const [open, setOpen] = React.useState(false);
const setTweaks = React.useCallback((next) => {
_setTweaks(next);
try { localStorage.setItem('ssa-tweaks', JSON.stringify(next)); } catch {}
window.parent.postMessage({type:'__edit_mode_set_keys', edits: next}, '*');
}, []);
React.useEffect(() => {
const onMsg = (e) => {
if (!e.data) return;
if (e.data.type === '__activate_edit_mode') setOpen(true);
if (e.data.type === '__deactivate_edit_mode') setOpen(false);
};
window.addEventListener('message', onMsg);
window.parent.postMessage({type:'__edit_mode_available'}, '*');
return () => window.removeEventListener('message', onMsg);
}, []);
React.useEffect(() => {
const root = document.documentElement;
root.setAttribute('data-theme', tweaks.theme === 'dark' ? 'dark' : 'light');
const a = ACCENTS[tweaks.accent] || ACCENTS.purple;
const c = tweaks.theme === 'dark' ? a.dark : a.light;
root.style.setProperty('--accent', c);
root.style.setProperty('--accent-2', c);
document.querySelectorAll('h1.headline, h2.section-title, .rf-title, .def-title, .up-t, .method-t, .chart-title, .card h3, .cta-block h3, .live-title, .report-headline, .tldr-big, .report-body h2, .tldr-pt-t, .about-t, .chart-inline-title, .appendix h3').forEach(e => {
if (tweaks.headline === 'sans') {
e.style.fontFamily = '"Inter", sans-serif';
e.style.fontWeight = '700';
e.style.letterSpacing = '-0.02em';
} else {
e.style.fontFamily = '';
e.style.fontWeight = '';
e.style.letterSpacing = '';
}
});
}, [tweaks]);
return { tweaks, setTweaks, open, setOpen };
}
// Expose globally
Object.assign(window, {
TWEAKS_DEFAULTS_BASE, ACCENTS,
supplyTrend, solPrice90, tvlSeries, dates,
supplyTrend3Y, solPrice3Y, tvlSeries3Y,
generateDateLabels,
LineChart, BarChart, PieChart,
TopNav, FooterBar, TweaksPanel, useTweaks, EmailModal
});