/* Letter.jsx — stretched-glyph column header.
The middle slice scales horizontally with the column width;
left and right edges stay fixed-size. */
function Letter({ ch, color = "#1C1C1C" }) {
// Geometry: each letter rendered as 3 SVGs side-by-side — left edge,
// middle (preserveAspectRatio=none stretch), right edge.
// Heights normalised to 150px header zone, with 16px margin.
const STROKE = 22; // bar thickness
const H = 130;
const LEFT_W = 26;
const RIGHT_W = 26;
const variants = {
B: {
left: ,
mid: ,
right: ,
},
O: {
left: ,
mid: ,
right: ,
},
D: {
left: ,
mid: ,
right: ,
},
E: {
left: ,
mid: ,
right: ,
},
};
const v = variants[ch];
if (!v) return null;
return (
{v.left}
{v.mid}
{v.right}
);
}
window.Letter = Letter;