// Shared visual atoms for The Crossing
function SeriesMark() {
return (
One Hundred Years
A reporting series
);
}
const Tick = ({ children, color = '#5A4E3A' }) => (
{children}
);
const Eyebrow = ({ id, title, right }) => (
{id}
{title}
{right && {right}}
);
const Readout = ({ label, value, sub, accent = '#D4C8B8', size = 32 }) => (
{label}
{value}
{sub && (
{sub}
)}
);
const Confidence = ({ level = 'high' }) => {
const map = {
high: { label: 'HIGH CONFIDENCE', color: '#C9A84C' },
candidate: { label: 'CANDIDATE', color: '#FDAE61' },
speculative: { label: 'SPECULATIVE', color: '#C0392B' },
};
const c = map[level];
return (
{c.label}
);
};
const HRule = ({ children, color = '#2A2218' }) => (
{children && {children}}
);
// Country names in small caps (per spec)
const SmallCaps = ({ children }) => (
{children}
);
// Ellis Island manifest row
const ManifestRow = ({ record, highlight }) => (
{record.name}
{record.origin}
{record.age}
{record.year}
{record.destination}
);
// Era label badge
const EraLabel = ({ era }) => (
{era.label}
);
// Number formatting
const fmt = (n) => {
if (n == null) return '—';
if (Math.abs(n) >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
if (Math.abs(n) >= 10_000) return (n / 1000).toFixed(1) + 'k';
if (Math.abs(n) >= 1000) return n.toLocaleString();
return n.toString();
};
const LiveReadout = ({ label, value, color = '#D4C8B8', pulse }) => (
{label}
{value}
{pulse && }
);
Object.assign(window, {
SeriesMark, Tick, Eyebrow, Readout, Confidence, HRule,
SmallCaps, ManifestRow, EraLabel, fmt, LiveReadout,
});