- {book.title}
) : null;
return (
{mode === 'book' ? 'This session' : 'Your typing'}
a small portrait {headerSuffix}
close
{!hasData ? (
);
}
function EmptyState({ faint, soft, mode }) {
return (
Not enough data yet
{mode === 'book'
? 'Start typing this passage. The portrait will fill in as you go.'
: 'Type a passage or two and this page will fill itself. The portrait is built from your real keystrokes, not averages.'}
);
}
// ─── HOME BODY ───────────────────────────────────────────────────────────────
function HomeBody({ m, accent, text, soft, faint, rule, isDark }) {
return (
);
}
// ─── BOOK BODY ───────────────────────────────────────────────────────────────
function BookBody({ m, accent, text, soft, faint, rule }) {
return (
);
}
// ═══ Shared primitives ═══════════════════════════════════════════════════════
function SectionTitle({ children, color }) {
return (
{children}
);
}
function Stat({ label, value, soft, faint }) {
return (
);
}
// ═══ Sections ═══════════════════════════════════════════════════════════════
function SectionPulse({ pulse, title, subtitle, accent, text, soft, faint, rule, fullWidth }) {
const data = (pulse || []).filter(d => d > 0 && d < 1500);
return (
{title}
{data.length < 10 ? (
{subtitle.startsWith('Live') ? 'Type a few characters to see your rhythm appear.' : 'No recent session captured.'}
) : (
{data.length} keystrokes
{subtitle}
)}
);
}
// Cross-book summary (home)
function SectionSummary({ summary, accent, text, soft, faint, rule }) {
const minutes = Math.round(summary.totalMs / 60000);
return (
Across all sessions
{summary.totalChars.toLocaleString()} characters typed.{' '}
{summary.avgAccuracy}% of them were correct on the first try.
);
}
// Book-mode summary: this book lifetime + this-session live stats
function SectionBookSummary({ book, session, accent, text, soft, faint, rule }) {
// session live stats: pull WPM/accuracy if any chars typed
const liveChars = session?.totalChars || 0;
const liveErr = session?.totalErrors || 0;
const liveMs = session?.totalMs || 0;
const liveWpm = liveMs > 0 ? Math.round((liveChars / 5) / (liveMs / 60000)) : 0;
const liveAcc = liveChars > 0 ? Math.round(((liveChars - liveErr) / liveChars) * 100) : 100;
return (
);
}
function SectionHands({ hands, accent, text, soft, faint, rule }) {
if (!hands) {
return (
Your hands
Type a bit more and we can compare your hands.
);
}
const max = Math.max(hands.left, hands.right);
const lpct = (hands.left / max) * 100;
const rpct = (hands.right / max) * 100;
const slower = hands.left < hands.right ? 'left' : 'right';
const gap = Math.abs(hands.left - hands.right);
const gapPct = max > 0 ? Math.round((gap / max) * 100) : 0;
return (
The hand that's slower
Your {slower} hand types {gapPct}% slower than your other.
);
}
function HandBar({ label, cpm, pct, accent, soft, faint, highlight }) {
return (
);
}
function SectionBigrams({ slowest, fastest, accent, text, soft, faint, rule }) {
if (!slowest && !fastest) {
return (
Your stumble
More typing needed to find your tricky pair.
);
}
return (
Your slowest letter pair
{slowest && (
{slowest.pair}
{Math.round(slowest.avg)}ms avg
typed {slowest.count}×
)}
{fastest && (
Fastest:
{fastest.pair}
{Math.round(fastest.avg)}MS
)}
);
}
function SectionFingerprint({ fp, accent, text, soft, faint, rule }) {
const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
const maxRate = Math.max(0.01, ...letters.map(ch => fp[ch].rate));
const totalErr = letters.reduce((s, ch) => s + fp[ch].errors, 0);
return (
Error fingerprint
{letters.map(ch => {
const cell = fp[ch];
const intensity = maxRate > 0 ? cell.rate / maxRate : 0;
const hasData = cell.count >= 3;
return (
{ch.toUpperCase()}
);
})}
{totalErr === 0
? 'No errors recorded yet.'
: `${totalErr.toLocaleString()} mistypes - darker cells are the letters you miss most.`}
);
}
function SectionPause({ pauseChar, accent, text, soft, faint, rule }) {
if (!pauseChar) {
return (
Where you pause
Not enough pauses to read yet.
);
}
const display = pauseChar.char === ' ' ? '␣' : pauseChar.char;
return (
The letter you pause longest before
{display}
{Math.round(pauseChar.avg)}ms on average
across {pauseChar.count} times
Often this is the letter your fingers brace for - the start of a word, or the breath before a comma.
);
}
function SectionOverTime({ overTime, accent, text, soft, faint, rule }) {
const series = overTime || [];
return (
How you've gotten faster
{series.length < 3 ? (
A few sessions in and a curve appears here.
) : (
s.wpm)} stroke={accent} height={92}
yMin={Math.max(0, Math.min(...series.map(s => s.wpm)) - 10)}
yMax={Math.max(...series.map(s => s.wpm)) + 10}
rule={rule} />
{new Date(series[0].ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
{series.length} sessions
{new Date(series[series.length - 1].ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
)}
);
}
// ─── Tiny visualizations ────────────────────────────────────────────────────
function Sparkline({ values, stroke = 'currentColor', height = 60, max }) {
if (!values || values.length === 0) return null;
const w = 100;
const lim = max || Math.max(...values, 1);
const step = w / Math.max(values.length - 1, 1);
return (
{values.map((v, i) => {
const h = (Math.min(v, lim) / lim) * height;
return
);
}
function Lineline({ values, stroke = 'currentColor', height = 80, yMin = 0, yMax = 100, rule = '#ccc' }) {
if (!values || values.length === 0) return null;
const w = 100;
const range = Math.max(1, yMax - yMin);
const step = w / Math.max(values.length - 1, 1);
const points = values.map((v, i) => {
const x = i * step;
const y = height - ((v - yMin) / range) * height;
return `${x},${y}`;
}).join(' ');
return (
);
}
Object.assign(window, { Dashboard });