);
}
// ============================================================
// 3. PROCESS RIBBON — 3 (or N) step horizontal flow with
// connectors. Used to visualize the One-Touch protocol or
// pilot scope.
// ============================================================
function ProcessRibbon({ steps = [], theme = 'light' }) {
const t = vcTheme(theme);
if (!steps.length) return null;
return (
{steps.map((s, i) => (
{/* Inline number + duration with a gap (not space-between) so they
never collide into "01MINUTES" in narrow boxes; the duration
wraps below only if there's truly no room. No extra height in
the common case. */}
0{i+1}
{s.duration && {s.duration}}
{s.label}
{s.detail &&
{s.detail}
}
{i < steps.length - 1 && (
)}
))}
);
}
// ============================================================
// 4. COVERAGE MATRIX — small grid of zones treated.
// items: ['Air', 'High-touch surfaces', ...] — each rendered
// as a filled cell. Visual answer to "What does it touch?"
// ============================================================
function CoverageMatrix({ items = [], theme = 'light', title = 'Single-cycle coverage' }) {
const t = vcTheme(theme);
return (
{title}
{items.slice(0, 6).map((label, i) => (
{label}
))}
);
}
// ============================================================
// 5. DECAY CURVE — exponential pathogen-decay sparkline.
// Pure SVG. Goes from a peak label down to a floor over a
// given duration label. Visual shorthand for "log reduction
// over one cycle".
// ============================================================
function DecayCurve({
fromLabel = '10⁶',
toLabel = '< 1',
durationLabel = 'one cycle',
theme = 'light',
height = 110,
width = 320,
onEditFromLabel,
onEditToLabel,
onEditDurationLabel
}) {
const t = vcTheme(theme);
// Exponential decay y = e^(-kx)
const k = 5;
const pts = [];
const padL = 36, padR = 18, padT = 14, padB = 22;
const W = width - padL - padR;
const H = height - padT - padB;
for (let i = 0; i <= 40; i++) {
const x = i / 40;
const y = Math.exp(-k * x);
pts.push([padL + x * W, padT + (1 - y) * H]);
}
const path = 'M ' + pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' L ');
const areaPath = path + ` L ${padL + W},${padT + H} L ${padL},${padT + H} Z`;
// gridlines (log decades)
const gridY = [0.25, 0.5, 0.75];
// Edit controls render only when callbacks are provided. They live
// OUTSIDE the