// OnCatch illustration library — editorial line-on-paper SVGs.
// Aesthetic: technical-manual / risograph / blueprint. Brand palette only.
// Every illustration is data-driven and earns its place — no decorative slop.
// ============================================================
// 1. NetCatch — the "catching bugs" hero motif
// A net diagram catching geometric "bugs" (squares, dots).
// Used in home-page A's hero stage and as a brand glyph.
// ============================================================
const NetCatch = ({ width = 560, height = 360 }) => (
);
// ============================================================
// 2. WidgetAnatomy — exploded view of the embedded widget
// Shows: shadow-DOM boundary, form fields, attachment slot
// ============================================================
const WidgetAnatomy = ({ width = 560, height = 360 }) => (
);
// ============================================================
// 3. TriageFlow — the report's journey, as an annotated timeline
// ============================================================
const TriageFlow = ({ width = 920, height = 220 }) => {
// Sub-labels kept short so each fits in the ~170px space between dots
// (longer phrasing was overlapping into the next stop).
const stops = [
{ x: 80, label: "Reporter\nclicks icon", sub: "0s" },
{ x: 250, label: "Submit form", sub: "+30s · redacted" },
{ x: 420, label: "Token-gated\ningestion",sub: "+50ms · origin OK" },
{ x: 590, label: "Admin queue", sub: "real-time" },
{ x: 760, label: "Pushed to\ntracker", sub: "→ jira / linear / etc." },
];
return (
);
};
// ============================================================
// 4. DataMap — what flows where (trust diagram)
// ============================================================
const DataMap = ({ width = 920, height = 360 }) => (
);
// ============================================================
// 5. BundleAnatomy — pie/bar showing 75 KB breakdown
// ============================================================
const BundleAnatomy = ({ width = 360, height = 240 }) => {
// bytes (illustrative): ui 32k, capture 18k, network 12k, redaction 8k, init 5k
const segments = [
{ label: "UI / shadow DOM", kb: 32, cls: "fill-accent" },
{ label: "Screenshot capture", kb: 18, cls: "fill-ink" },
{ label: "Network / submit", kb: 12, cls: "fill-teal" },
{ label: "Redaction", kb: 8, cls: "fill-paper-2" },
{ label: "Init + boot", kb: 5, cls: "fill-rule" },
];
const total = segments.reduce((a, b) => a + b.kb, 0); // 75
let acc = 0;
return (
);
};
// ============================================================
// 6. RetentionTimeline — horizontal calendar of retention periods
// ============================================================
const RetentionTimeline = ({ width = 760, height = 280 }) => {
const rows = [
{ label: "Submissions (text)", days: 730, cls: "fill-ink" },
{ label: "Screenshots", days: 365, cls: "fill-accent" },
{ label: "Screen recordings", days: 90, cls: "fill-teal" },
{ label: "Audit logs", days: 365, cls: "fill-muted" },
{ label: "Auth logs", days: 365, cls: "fill-muted" },
{ label: "Webhook DLQ", days: 30, cls: "fill-rule" },
];
const max = 730;
const labelCol = 180;
const trackW = width - labelCol - 80;
return (
);
};
// ============================================================
// 7. SubprocessorMap — concentric circles, OnPath at center
// ============================================================
const SubprocessorMap = ({ width = 560, height = 420 }) => {
const subs = [
{ name: "Supabase", role: "DB · storage · auth", angle: 0 },
{ name: "Vercel", role: "Hosting · CDN", angle: 60 },
{ name: "Resend", role: "Transactional email", angle: 120 },
{ name: "Cloudflare", role: "Turnstile · DNS", angle: 180 },
{ name: "GitHub", role: "Source · CI", angle: 240 },
{ name: "Sentry*", role: "Errors · planned", angle: 300, planned: true },
];
const cx = width / 2, cy = height / 2 + 10, r = 150;
return (
);
};
// ============================================================
// 8. PrivacyControls — checklist diagram of what stays in-browser vs server
// ============================================================
const StorageMap = ({ width = 560, height = 320 }) => {
const browser = [
"icon position",
"form draft",
"name / email prefill",
"devtools warning ack",
];
const server = [
"submitted reports (text)",
"screenshots / recordings",
"redacted console logs",
"browser metadata",
];
const cell = (items, title, x, fillCls) => (
{title}
{items.map((it, i) => (
{it}
))}
);
return (
);
};
// ============================================================
// 9. SmallSpotIcons — line glyphs used in trust grid, integrations, etc.
// ============================================================
const Glyph = ({ kind, size = 56 }) => {
const s = size;
switch (kind) {
case "shield":
return (
);
case "lock":
return (
);
case "redact":
return (
);
case "isolate":
return (
);
case "rate":
return (
);
case "webhook":
return (
);
case "queue":
return (
);
case "doc":
return (
);
case "globe":
return (
);
case "eye":
return (
);
case "clock":
return (
);
case "stamp":
return (
);
default:
return null;
}
};
// ============================================================
// 10. Banner — wide editorial illustration combining several motifs
// Width tightened to 880 (was 1200) so the queue sits closer to the sites,
// reducing the dead whitespace between them. The viewBox scales to fit the
// container CSS, so visual size at the page is unchanged — only proportions
// inside tighten.
// ============================================================
const HomeBanner = ({ width = 880, height = 280 }) => {
// Queue panel position — pulled left so it sits visibly close to the sites
const queueX = width - 360; // 520 with width=880
const arcEndX = queueX + 14; // 534 — lands just inside the queue's left edge
return (
);
};
Object.assign(window, {
NetCatch, WidgetAnatomy, TriageFlow, DataMap, BundleAnatomy,
RetentionTimeline, SubprocessorMap, StorageMap, Glyph, HomeBanner,
});