// Shared visual atoms for The Black Box
const SeriesMark = () => (
One Hundred Years
A reporting series
);
const Tick = ({ children, color = 'var(--ink-dimmer)' }) => (
{children}
);
const Eyebrow = ({ id, title, right }) => (
{id}
{title}
{right && {right}}
);
const Readout = ({ label, value, sub, accent = 'var(--ink)', size = 32 }) => (
{label}
{value}
{sub && (
{sub}
)}
);
const Confidence = ({ level = 'high' }) => {
const map = {
high: { label: 'HIGH CONFIDENCE', color: 'var(--blue)' },
candidate: { label: 'CANDIDATE FINDING', color: 'var(--amber)' },
speculative: { label: 'SPECULATIVE', color: 'var(--red)' },
};
const c = map[level];
return (
{c.label}
);
};
const HRule = ({ children, color = 'var(--line)' }) => (
{children && {children}}
);
// NTSB probable cause blockquote
const NTSBQuote = ({ children, flight }) => (
{flight && (
{flight} — Probable Cause
)}
{children}
{flight}
{year}
{fatalities} fatal
{cause}
);
// Lucide icon wrapper — renders an SVG icon from the lucide global
function Icon({ name, size = 16, color = 'currentColor', strokeWidth = 1.5, style = {} }) {
const ref = React.useRef(null);
React.useEffect(() => {
if (ref.current && window.lucide) {
const iconData = window.lucide.icons[name];
if (iconData) {
const [, attrs, children] = iconData;
ref.current.innerHTML = '';
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
Object.entries({ ...attrs, width: size, height: size, stroke: color, 'stroke-width': strokeWidth, fill: 'none', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }).forEach(([k, v]) => svg.setAttribute(k, String(v)));
children.forEach(([tag, childAttrs]) => {
const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
Object.entries(childAttrs || {}).forEach(([k, v]) => el.setAttribute(k, String(v)));
svg.appendChild(el);
});
ref.current.appendChild(svg);
}
}
}, [name, size, color, strokeWidth]);
return ;
}
Object.assign(window, { SeriesMark, Tick, Eyebrow, Readout, Confidence, HRule, NTSBQuote, AccidentCard, Icon });