// Shared visual atoms
const Crosshair = ({ size = 10, color = '#8BAFC7', style }) => (
);
const Tick = ({ children, color = '#4E6A82' }) => (
{children}
);
// Section eyebrow label, like a chart axis
const Eyebrow = ({ id, title, right }) => (
{id}
{title}
{right && {right}}
);
// Instrument-panel readout block
const Readout = ({ label, value, sub, accent = '#E6ECF2', size = 32 }) => (
{label}
{value}
{sub && (
{sub}
)}
);
// Confidence pill
const Confidence = ({ level = 'high' }) => {
const map = {
high: { label: 'HIGH CONFIDENCE', color: '#74ADD1' },
candidate: { label: 'CANDIDATE FINDING', color: '#FDAE61' },
speculative: { label: 'SPECULATIVE', color: '#D73027' },
};
const c = map[level];
return (
{c.label}
);
};
// Small horizontal ruler with mono tick labels
const HRule = ({ children, color = '#1B2740' }) => (
{children && {children}}
);
// Legend for the diverging temperature scale
const TempLegend = ({ width = 280, height = 8, min = -5, max = 5, ticks = [-5, -2.5, 0, 2.5, 5] }) => {
const stops = [];
for (let i = 0; i <= 40; i++) {
const t = i / 40;
const v = min + (max - min) * t;
stops.push(`${window.anomalyColor(v)} ${(t * 100).toFixed(1)}%`);
}
return (
{ticks.map(t => (
{t > 0 ? `+${t}` : t}°
))}
);
};
// Animated scanning line for "live" panels
const ScanLine = ({ color = 'rgba(139,175,199,0.10)' }) => (
);
Object.assign(window, { Crosshair, Tick, Eyebrow, Readout, Confidence, HRule, TempLegend, ScanLine });