// whiteboards.jsx — six hand-drawn marker companion sketches.
// Wobble filter on every freehand stroke; text rendered crisp (outside the filter group).
// Palette: red #FF2417, ink #1F201B, dotted 3 3. Surface handled by .whiteboard wrapper.
const RED = "#FF2417";
const INK = "#1F201B";
const GRN = "#7AF58C";
function Wobble({ id, scale = 1.1 }) {
return (
);
}
// hand-drawn arrow: shaft + two head strokes, all inside a wobble group by caller
function arrow(x1, y1, x2, y2, color = RED, w = 1.8) {
const ang = Math.atan2(y2 - y1, x2 - x1);
const hl = 9;
const a1 = ang + Math.PI - 0.5, a2 = ang + Math.PI + 0.5;
return (
);
}
function pageIcon(x, y, w, h, color = INK) {
const fold = 12;
return (
);
}
/* ---------------------------------------------------------------- wb-channels */
function WBChannels() {
const topTicks = [180, 300, 420, 540, 645];
const botTicks = [];
for (let x = 180; x <= 645; x += 24) botTicks.push(x);
return (
);
}
/* ------------------------------------------------------------- wb-checkpoint1 */
function WBCheckpoint1() {
const gates = [
{ x: 250, label: "Firewall (WAF)" },
{ x: 380, label: "CDN bot mgmt" },
{ x: 510, label: "Robots.txt" },
];
function bot(x, y, s = 1) {
return (
);
}
return (
);
}
/* ------------------------------------------------------------- wb-checkpoint3 */
function WBCheckpoint3() {
const wall = [];
for (let i = 0; i < 16; i++) wall.push(70 + i * 13);
const sections = [80, 142, 204, 266]; // y of each H2 (4 shown, repeated visual rhythm)
return (
);
}
/* --------------------------------------------------------------- wb-freshness */
function WBFreshness() {
const cols = [];
for (let i = 0; i < 13; i++) cols.push(120 + i * 36);
// decay curve points
const curve = "M 120 110 Q 300 120 420 150 Q 520 180 560 250 Q 600 300 660 318";
return (
);
}
/* ------------------------------------------------------------- wb-specificity */
function WBSpecificity() {
return (
);
}
/* ---------------------------------------------------------------------- wb-sbc */
function WBSBC() {
return (
);
}
Object.assign(window, {
WBChannels, WBCheckpoint1, WBCheckpoint3, WBFreshness, WBSpecificity, WBSBC,
});