setDrawer(false)}/>
);
}
function TnFooter() {
const [email, setEmail] = React.useState('');
const [sent, setSent] = React.useState(false);
return (
);
}
function TnPilotModal({ open, onClose }) {
const [sent, setSent] = React.useState(false);
const [submitting, setSubmitting] = React.useState(false);
const [error, setError] = React.useState(null);
React.useEffect(() => { if (open) { setSent(false); setError(null); } }, [open]);
if (!open) return null;
return (
e.stopPropagation()} role="dialog" aria-labelledby="pilot-title">
{!sent ? (
<>
Book a demo
See your protocol in USDM.
30-minute working session. No slideware. We start with your CRF and show you exactly what the agents do.
) : (
You're in the queue.
Expect a reply within one business day. We'll send a calendar link and a short pre-read.
)}
);
}
// Consent banner + PostHog loader
function TnConsentBanner() {
const [show, setShow] = React.useState(false);
const getConsent = () => {
try {
const cookie = document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith('tn-consent='));
if (cookie) return cookie.split('=')[1];
return localStorage.getItem('tn-consent');
} catch { return null; }
};
const setConsent = (val) => {
try { document.cookie = `tn-consent=${val};max-age=31536000;path=/;SameSite=Lax`; } catch {}
try { localStorage.setItem('tn-consent', val); } catch {}
};
React.useEffect(() => {
const existing = getConsent();
if (!existing) setTimeout(() => setShow(true), 900);
else if (existing === 'accepted') window.tnEnableAnalytics?.();
}, []);
if (!show) return null;
const accept = () => { setConsent('accepted'); window.tnEnableAnalytics?.(); setShow(false); };
const decline = () => { setConsent('declined'); setShow(false); };
return (
We use PostHog for product analytics.
No third-party ad trackers. No session replay without consent. Read our privacy policy.
);
}
// Tweaks panel — generic; each page passes its own schema
function TnTweaks({ schema, state, setState }) {
const [ready, setReady] = React.useState(false);
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const onMsg = e => {
if (e.data?.type === '__activate_edit_mode') setOpen(true);
if (e.data?.type === '__deactivate_edit_mode') setOpen(false);
};
window.addEventListener('message', onMsg);
setReady(true);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', onMsg);
}, []);
if (!ready || !open || !schema) return null;
return (
Tweaks
{schema.map(field => {
const val = state[field.key];
if (field.type === 'segmented') {
return (
{field.options.map(o => (
))}
);
}
if (field.type === 'select') {
return (
);
}
if (field.type === 'text') {
return (
setState(s => ({ ...s, [field.key]: e.target.value }))}/>
);
}
return null;
})}
);
}
// Reveal observer — call once per page
function useReveal(deps = []) {
React.useEffect(() => {
const obs = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } }), { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.tn-reveal:not(.visible)').forEach(el => obs.observe(el));
return () => obs.disconnect();
}, deps);
}
// Simple orbs + constellation canvas backdrop
// subtle=true reduces opacity for interior page headers
function TnOrbs({ subtle = false }) {
return
;
}
// Tour lightbox — renders children in a centered modal overlay
function TnTourModal({ open, onClose, children }) {
React.useEffect(() => {
if (!open) return;
const onKey = e => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}
role="dialog"
aria-label="Platform tour"
>
Platform tour · Protocol → Submission
{children}
);
}
function TnConstellation() {
const ref = React.useRef(null);
React.useEffect(() => {
const canvas = ref.current; if (!canvas) return;
const ctx = canvas.getContext('2d');
let raf, nodes = [];
const resize = () => {
const dpr = window.devicePixelRatio || 1;
const r = canvas.getBoundingClientRect();
canvas.width = r.width * dpr; canvas.height = r.height * dpr;
ctx.scale(dpr, dpr);
};
const MARGIN = 60, DIST = 120, DIST2 = DIST * DIST;
const seed = () => {
const r = canvas.getBoundingClientRect();
nodes = Array.from({ length: 38 }, () => ({
x: MARGIN + Math.random() * (r.width - MARGIN * 2),
y: MARGIN + Math.random() * (r.height - MARGIN * 2),
vx: (Math.random() - .5) * .12, vy: (Math.random() - .5) * .12,
pink: Math.random() < .5,
}));
};
const loop = () => {
const r = canvas.getBoundingClientRect();
ctx.clearRect(0, 0, r.width, r.height);
for (const n of nodes) {
n.x += n.vx; n.y += n.vy;
if (n.x < MARGIN || n.x > r.width - MARGIN) n.vx *= -1;
if (n.y < MARGIN || n.y > r.height - MARGIN) n.vy *= -1;
}
const FADE = 300;
const edgeFade = (n) => Math.min(n.x / FADE, (r.width - n.x) / FADE, n.y / FADE, (r.height - n.y) / FADE, 1);
ctx.lineWidth = 1;
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const a = nodes[i], b = nodes[j];
const dx = a.x - b.x, dy = a.y - b.y, d2 = dx*dx + dy*dy;
if (d2 < DIST2 && d2 > 9) { // d2>9 prevents degenerate gradient when nodes overlap
const fade = Math.min(edgeFade(a), edgeFade(b));
ctx.globalAlpha = (1 - d2 / DIST2) * 0.5 * fade;
const g = ctx.createLinearGradient(a.x, a.y, b.x, b.y);
g.addColorStop(0, 'rgb(255,107,157)');
g.addColorStop(1, 'rgb(18,194,233)');
ctx.strokeStyle = g;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
for (const n of nodes) {
ctx.globalAlpha = edgeFade(n) * 0.6;
ctx.fillStyle = n.pink ? 'rgb(255,107,157)' : 'rgb(18,194,233)';
ctx.beginPath(); ctx.arc(n.x, n.y, 1.5, 0, Math.PI*2); ctx.fill();
}
raf = requestAnimationFrame(loop);
};
resize(); seed(); loop();
const onResize = () => { resize(); seed(); };
window.addEventListener('resize', onResize);
return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); };
}, []);
return
;
}
// Page shell — nav + main + footer + modal + consent + tweaks
function TnPage({ path, onDarkNav = false, tweakSchema, tweakInitial, children }) {
const [pilot, setPilot] = React.useState(false);
const [tweaks, setTweaks] = React.useState(() => {
try { const saved = JSON.parse(localStorage.getItem(`tn-tweaks-${path}`) || 'null'); return { ...(tweakInitial||{}), ...(saved||{}) }; }
catch { return tweakInitial || {}; }
});
React.useEffect(() => {
if (tweakInitial) localStorage.setItem(`tn-tweaks-${path}`, JSON.stringify(tweaks));
}, [tweaks, path]);
useReveal([tweaks]);
return (
<>
setPilot(true)} currentPath={path} onDark={onDarkNav}/>
{typeof children === 'function' ? children({ tweaks, openPilot: () => setPilot(true) }) : children}
setPilot(false)}/>
{tweakSchema && }
);
}
Object.assign(window, {
TnIcon, TnMark, TnNav, TnFooter, TnPilotModal, TnConsentBanner, TnTweaks,
TnPage, TnOrbs, TnConstellation, TnTourModal, useReveal, NAV_LINKS,
});