/* ============================================================
Chrome for the dev build — nav, footer, theme, routing.
Self-contained on purpose: production src/chrome.jsx is not
loaded here, so the two page sets can diverge without either
breaking the other. Design tokens are the shared part.
============================================================ */
const { useState: cState, useEffect: cEffect } = React;
function useTheme2() {
const read = () => (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light');
const [theme, setTheme] = cState(read);
cEffect(() => {
const onChange = () => setTheme(read());
window.addEventListener('gd-theme-change', onChange);
return () => window.removeEventListener('gd-theme-change', onChange);
}, []);
const toggle = () => {
const next = theme === 'dark' ? 'light' : 'dark';
if (next === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
else document.documentElement.removeAttribute('data-theme');
try { localStorage.setItem('gd-theme-v2', next); } catch (e) {}
window.dispatchEvent(new Event('gd-theme-change'));
};
return [theme, toggle];
}
function ThemeToggle2() {
const [theme, toggle] = useTheme2();
const dark = theme === 'dark';
return (
);
}
function useRoute2() {
const [route, setRoute] = cState(() => window.location.hash.replace(/^#/, '') || '/');
cEffect(() => {
const onHash = () => setRoute(window.location.hash.replace(/^#/, '') || '/');
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return route;
}
/* The same files serve the dev build (dev.html) and, once released, the
site itself (index.html). Everything that marks a screenshot as "not
the live site" keys off the file name, so a release changes no code. */
const IS_DEV_BUILD = /dev\.html$/i.test(window.location.pathname);
/* Ribbon so a dev screenshot can never be mistaken for the live site. */
function DevRibbon() {
return (
DEV BUILD · NOT PUBLISHED · NOINDEXPRODUCT COMMUNICATION REBUILD · 03 SEP 2026
);
}
/* One page, four anchors. Hash routing owns "#/…", so in-page jumps run
through a scroll handler instead of an href — otherwise the router
would read "#approach" as a route and answer with a 404. */
const SECTIONS = [
{ id: 'home', label: 'Home' },
{ id: 'what', label: 'What we do' },
{ id: 'how', label: 'How it works' },
{ id: 'cases', label: 'Case Studies' },
{ id: 'team', label: 'Team' },
]
function scrollToId(id) {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
/* Section links live on the landing page. From a deep page (a case study,
/verify, /limits) the section does not exist yet, so the click has to
route home first and scroll once the landing page has rendered —
otherwise the nav looks dead and the reader is stuck. */
function goToSection(id) {
const onLanding = (window.location.hash.replace(/^#/, '') || '/') === '/';
if (onLanding) {
scrollToId(id);
return;
}
window.location.hash = '/';
window.requestAnimationFrame(() => window.requestAnimationFrame(() => {
if (id === 'home') window.scrollTo({ top: 0 });
else scrollToId(id);
}));
}
/* Scroll-spy: the nav marks the section the reader is actually in. */
function useActiveSection() {
const route = useRoute2();
const [active, setActive] = cState('home');
/* A deep page belongs to the menu entry that leads there — otherwise
the bar claims you are on "Home" while you are reading a case. */
const deep = route !== '/';
cEffect(() => {
if (deep || !('IntersectionObserver' in window)) return;
const obs = new IntersectionObserver(
entries => {
const visible = entries.filter(e => e.isIntersecting)
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
if (visible) setActive(visible.target.id);
},
{ rootMargin: '-45% 0px -45% 0px', threshold: [0, 0.25, 0.5, 1] }
);
SECTIONS.forEach(s => {
const el = document.getElementById(s.id);
if (el) obs.observe(el);
});
return () => obs.disconnect();
}, [deep]);
return deep ? (route.startsWith('/case') ? 'cases' : '') : active;
}
function Nav2() {
const active = useActiveSection();
const { CONTACT } = window.GD;
return (
);
}
/* ---------------------------------------------------------------
Source — the 0/1 rule made visible. Any number on a page can be
unfolded down to the artifact it came from. Collapsed by default
so the page stays readable; present on every claim so nobody has
to take one on trust. */
/* Internal references — file paths, run outputs, chapter numbers of our
own documents — never reach a page (Mo, 17.09.). Public sources may.
This is the last line of defence; the register itself is not served. */
const INTERNAL_REF = /\.(md|json|parquet|py|csv|jsx|txt)\b|(^|[\s(—·,])(out|docs|mece|src|devsrc|configs|preprocessing|premium_oem|_massnahmen|_experiments)\/|Heftchen|Kap\.\s*\d|[A-Za-z]:\\/;
function Source({ children }) {
const [open, setOpen] = cState(false);
const text = React.Children.toArray(children).map(c => (typeof c === 'string' ? c : '')).join(' ');
if (!text.trim() || INTERNAL_REF.test(text)) return null;
return (
{open && (
{children}
)}
);
}
/* Status chip — the only place colour carries meaning, and it never
travels alone: every chip is followed by words. */
function Chip({ tone = 'grey', children }) {
const tones = {
green: { bg: 'rgba(34,197,94,0.12)', fg: '#16A34A', bd: 'rgba(34,197,94,0.35)' },
amber: { bg: 'rgba(245,158,11,0.14)', fg: '#B45309', bd: 'rgba(245,158,11,0.38)' },
grey: { bg: 'rgb(var(--c-off))', fg: 'rgb(var(--c-mute))', bd: 'rgb(var(--c-line))' },
cyan: { bg: 'rgba(34,211,238,0.12)', fg: '#0891B2', bd: 'rgba(34,211,238,0.4)' },
};
const t = tones[tone] || tones.grey;
return (
{children}
);
}
function Eyebrow({ children }) {
return
{children}
;
}
function Section({ id, tone = 'paper', children, className = '' }) {
return (
{children}
);
}
/* ---------------------------------------------------------------
Figure — a diagram is not body text, so it does not look like
body text (Mo, 15.09.): its own surface, a hairline frame, a faint
grid, and a mono caption that says what it is. Sections that carry
a figure run on the off tone, so the paper panel always lifts off
the page. */
function Figure({ label, note, children }) {
return (
{label}
{note && {note}}
{children}
);
}
function Footer2() {
return (
);
}
/* Page. `fill` is for the pages that must not scroll at all (Mo, 16.09.:
the case study has to sit on one laptop screen): the shell takes exactly
the viewport height, main becomes the only flexible row, and the footer
stays off — a footer below the fold would reintroduce the scrollbar. */
function Page({ children, fill = false }) {
return (
{IS_DEV_BUILD && }
{children}
{!fill && }
);
}
/* The Impressum and the Datenschutzerklärung are the production files
under src/ — one legal text, kept in one place. Those pages ask for the
production chrome by name; here the names resolve to ours. */
function PublicNav() {
return <>{IS_DEV_BUILD && };
}
function Footer() { return ; }
window.useRoute2 = useRoute2;
window.Page = Page;
window.Section = Section;
window.Eyebrow = Eyebrow;
window.Chip = Chip;
window.Source = Source;
window.Figure = Figure;