// layout.jsx — Header, TrustAnchorStrip, Footer const { useMemo } = React; function formatDate(dateStr) { const d = new Date(dateStr + 'T00:00:00'); return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } // ─── Icons ───────────────────────────────────────────────────────────────── // Brand mark — the ping. Full six-arc mark for the header (28px+), // simplified one-ring variant for small sizes (footer, ≤20px). function PingMark({ size = 19, variant = 'simple' }) { const common = { width: size, height: size, viewBox: '0 0 64 64', fill: 'none', 'aria-hidden': true, style: { color: 'var(--color-primary)', flexShrink: 0 }, }; if (variant === 'full') { return ( ); } return ( ); } function MoonIcon() { return ( ); } function SunIcon() { return ( ); } // ─── Header ──────────────────────────────────────────────────────────────── function Header({ theme, onThemeToggle, lastUpdated }) { const headerBg = theme === 'dark' ? 'rgba(19, 22, 32, 0.92)' : 'rgba(255, 255, 255, 0.92)'; return (
{/* Wordmark — matches home page */} Frontier Watch {/* Breadcrumb */} / Signals {/* Spacer */}
{/* Last updated */} {lastUpdated ? `Updated ${formatDate(lastUpdated)}` : ''} {/* Theme toggle */} {/* Subscribe CTA */} Subscribe
); } // ─── Trust Anchor Strip ───────────────────────────────────────────────────── const DOMAIN_ABBREV = { 'Artificial Intelligence': 'AI', 'Semiconductors': 'Semiconductors', 'Quantum Computing': 'Quantum', }; function TrustAnchorStrip({ signals, lastUpdated }) { const stats = useMemo(() => { const activeCount = signals.filter(s => s.status === 'active' || s.status === 'developing').length; const closedCount = signals.filter(s => s.status === 'resolved' || s.status === 'invalidated').length; const domains = [...new Set(signals.map(s => s.domain))]; const domainsShort = domains.map(d => DOMAIN_ABBREV[d] || d); return { activeCount, closedCount, totalCount: signals.length, domains, domainsShort }; }, [signals]); return (
{/* Stats group — fills available space; wraps instead of overflowing */}
{/* Stat 1 */}
{stats.activeCount} Active Signal{stats.activeCount !== 1 ? 's' : ''}
Tracking frontier tech
{stats.totalCount} signals since April 2026
{/* Stat 2 */}
{stats.domains.length} Domain{stats.domains.length !== 1 ? 's' : ''} Covered
{stats.domainsShort.join(' · ')}
Confidence-scored, source-cited
{/* Stat 3 — the proof stat */}
{stats.closedCount} Outcome{stats.closedCount !== 1 ? 's' : ''} Recorded
Invalidated calls stay public too
{lastUpdated ? `Last update: ${formatDate(lastUpdated)}` : 'Last update: —'}
{/* Editorial context — visual styling lives in the page stylesheet so media queries can restyle it when it wraps below the stats */}
A signal is a specific, forward-looking observation with a material strategic implication for technology strategy professionals. Confidence-scored. Source-cited. Outcomes tracked publicly.
); } // ─── Footer ──────────────────────────────────────────────────────────────── function Footer() { return ( ); } // ─── Exports ─────────────────────────────────────────────────────────────── Object.assign(window, { Header, TrustAnchorStrip, Footer, formatDate });