); const Grid = ({ dark, fade = "linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 70%,transparent 100%)", }) => (

); const Eyebrow = ({ children, color = "var(--blue-500)", rule = true }) => (

{rule && ( )} {children}

); /* The mark is used exactly as supplied — never recolored, cropped or boxed. DEXILION beside it is live text in Orbitron, cap height matched. */ const Wordmark = ({ inverse, size = 20 }) => (

{window.SITE.brand.name} ); const Shell = ({ children, maxWidth = "var(--container-max)", style }) => (

{children}

); /* Unwritten copy renders as a visible placeholder rather than as prose, so an unfinished claim can never be mistaken for a finished one. */ const isTodo = (v) => typeof v === "string" && /^todo\b/i.test(v.trim()); const tx = (v, key) => isTodo(v) ? ( {v} ) : ( v ); /* Labelled image placeholder — the design system ships these instead of decorative stand-ins, so a missing photo reads as a missing photo. */ const ImageSlot = ({ label, src, ratio = "4 / 3", pos, dark, style }) => (

{src && (

)} {label}

); /* ----------------------------------------------------------------- header -- */ function SiteHeader({ active }) { const [open, setOpen] = React.useState(false); const items = window.SITE.nav; const link = (it, extra) => ( {it.label} ); return (

{/*

*/}

{open && ( )}

); } /* ----------------------------------------------------- inner-page masthead -- */ /* No dither field here: the boid erosion texture is reserved for the single largest dark surface on the site, the home hero. Inner mastheads carry the engineering grid and grain instead. */ function PageHero({ eyebrow, headline, lede, children }) { return (

{eyebrow}

{headline}

{lede && (

{tx(lede)}

)} {children}

); } /* ------------------------------------------------------------ editorial list -- */ /* The brand's default for "here are our N things": a sticky heading column, hairline-divided numbered rows, gold wash and an arrow on hover. */ function EditorialList({ eyebrow, heading, headingLine2, lede, action, rows, href, }) { const [open, setOpen] = React.useState(0); return (

{eyebrow}

{heading} {headingLine2 && (
{headingLine2} )}

{lede && (

{tx(lede)}

)} {action && (

)}

{rows.map((r, i) => { const on = open === i; const rowHref = r.href || href; return (

setOpen(i)} onClick={() => { if (rowHref) window.location.href = rowHref; }} style={{ borderBottom: "1px solid var(--paper-200)", padding: "26px 20px", display: "grid", gridTemplateColumns: "52px 1fr auto", gap: "20px", alignItems: "start", cursor: rowHref ? "pointer" : "default", background: on ? "linear-gradient(90deg,rgba(253,225,45,.10),transparent 60%)" : "transparent", transition: "background var(--dur-base) var(--ease-standard)", }} >

{String(i + 1).padStart(2, "0")}

{r.icon && ( )} {tx(r.title)}

{tx(r.summary)}

{r.points && (

)} {r.meta && (

{tx(r.meta)}

)}

{href && ( )}

); })}

); } /* ------------------------------------------------------------ contact form -- */ function ContactForm() { // const c = window.SITE.contact; // const [state, setState] = React.useState("idle"); // const submit = (e) => { // e.preventDefault(); // if (!c.formEndpoint) { // setState("unconfigured"); // return; // } // setState("sending"); // const data = Object.fromEntries(new FormData(e.target).entries()); // fetch(c.formEndpoint, { // method: "POST", // headers: { // "Content-Type": "application/json", // Accept: "application/json", // }, // body: JSON.stringify(data), // }) // .then((r) => setState(r.ok ? "sent" : "error")) // .catch(() => setState("error")); // }; // if (state === "sent") // return ( //

// //

// {c.success.title} //

// {tx(c.success.body)} //

// ); return ( ); } /* -------------------------------------------------------- conversion band -- */ /* One full-bleed gradient band per page — the design system's only sanctioned use of --gradient-brand. `form` renders the request form inside it. */ function ConversionBand({ form = false }) { const c = window.SITE.contact; return (

{c.eyebrow}

{c.headline}

{tx(c.lede)}

{" "} {tx(c.responseNote)}

{form ? ( ) : ( )}

); } /* ----------------------------------------------------------------- footer -- */ function SiteFooter() { const f = window.SITE.footer; return ( ); } /* ------------------------------------------------------------- mounting -- */ /* Every page ends with mountPage(). The deployed HTML ships with the page already rendered into #root (tools/prerender.js, so crawlers see the copy without running React), and hydrating adopts that markup instead of throwing it away. Served straight from the repo — local dev — #root is empty and we render from scratch. */ function mountPage(element) { const container = document.getElementById("root"); if (container.dataset.prerendered) ReactDOM.hydrateRoot(container, element); else ReactDOM.createRoot(container).render(element); } Object.assign(window, { mountPage, Ico, Grain, Grid, Eyebrow, Wordmark, Shell, tx, isTodo, ImageSlot, SiteHeader, PageHero, EditorialList, ContactForm, ConversionBand, SiteFooter, }); })();