/* Chrome shared by every page. Exposes window.FX. Loaded after content.js. */
(function () {
const DS = window.GlacierDesignSystem_b5cdbc;
const { GrainField, Button, IconButton, Icon, Label, Divider, MetaRow, ImagePlate, NavBar, Badge, TabSwitch } = DS;
const F = window.FRAGMENT;
const PAGES = {
Home: "index.html",
Work: "work.html",
// Studio + CV / Blog became one About page (2026-10-02); the old URLs
// redirect to it (vercel.json).
About: "about.html",
// Fragment link hidden from the nav for now (2026-10-02).
};
const go = (u) => window.open(u, "_blank", "noopener");
function Sec({ children, style, id, label, className }) {
return (
{children}
);
}
/* Eyebrow row + display heading. `tone="dark"` on light (rime) sections. */
function SectionHead({ eyebrow, caption, title, tone, id, maxWidth = "22ch", style }) {
const light = tone === "dark";
return (
{caption && (
{caption}
)}
{title && (
{title}
)}
);
}
/* ── Responsive switch ────────────────────────────────────────────────
The Glacier bundle styles NavBar with INLINE styles, which a media
query cannot reach without a wall of !important. So below 768px we
don't fight it — we render a different component entirely. Desktop
keeps the design-system capsule untouched. */
function useMediaQuery(q) {
const [hit, setHit] = React.useState(() => window.matchMedia(q).matches);
React.useEffect(() => {
const mq = window.matchMedia(q);
const on = (e) => setHit(e.matches);
mq.addEventListener("change", on);
setHit(mq.matches);
return () => mq.removeEventListener("change", on);
}, [q]);
return hit;
}
/* Phone navigation: a 48px glass bar that opens a full-height sheet.
Four destinations and a CTA cannot sit on one 375px line — so they
don't try. The bar carries identity and one control; the sheet
carries the choice, at a type size worth tapping. */
function MobileNav({ active }) {
const items = Object.keys(PAGES);
const [open, setOpen] = React.useState(false);
const toggle = React.useRef(null);
const sheet = React.useRef(null);
const close = React.useCallback(() => {
setOpen(false);
if (toggle.current) toggle.current.focus();
}, []);
React.useEffect(() => {
// `inert` rather than `hidden`: the sheet stays mounted so it can
// transition, but never takes focus or reads out while closed.
if (sheet.current) {
if (open) sheet.current.removeAttribute("inert");
else sheet.current.setAttribute("inert", "");
}
if (!open) return;
const prev = document.body.style.overflow;
const prevHtml = document.documentElement.style.overflow;
document.body.style.overflow = "hidden";
document.documentElement.style.overflow = "hidden";
const onKey = (e) => { if (e.key === "Escape") close(); };
document.addEventListener("keydown", onKey);
return () => {
document.body.style.overflow = prev;
document.documentElement.style.overflow = prevHtml;
document.removeEventListener("keydown", onKey);
};
}, [open, close]);
/* The bar is fixed, so it survives a 16,000px page — but it tucks away
while the visitor is reading downward and returns the moment they
reverse. Never hidden while the sheet is open. */
const [tucked, setTucked] = React.useState(false);
React.useEffect(() => {
let last = window.scrollY;
let frame = 0;
const onScroll = () => {
if (frame) return;
frame = requestAnimationFrame(() => {
frame = 0;
const y = window.scrollY;
const dy = y - last;
if (Math.abs(dy) > 6) {
setTucked(y > 160 && dy > 0);
last = y;
}
});
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(frame); };
}, []);
const pad = (i) => String(i + 1).padStart(2, "0");
return (
);
}
/* Sound orb — the site's music control, on every page (it rides with
Nav). A glass sphere like the ones in the orbit artwork, with the record
turning inside it while the slow-jazz track plays.
Across pages: the position and on/off state are kept in sessionStorage,
so the next page picks the track up where it left off. Autoplay is
attempted (unless the visitor switched it off); browsers usually refuse
until the page has been interacted with, and then the orb pulses "Tap to
play". Only this control starts sound (WCAG 1.4.2). */
function SoundOrb() {
const audio = F.hero && F.hero.audio;
const ref = React.useRef(null);
const [playing, setPlaying] = React.useState(false);
const [ask, setAsk] = React.useState(false);
const [missing, setMissing] = React.useState(false);
const KEY = "gx-audio-pos";
React.useEffect(() => {
const a = ref.current;
if (!a) return undefined;
a.volume = 0.6;
let off = false, pos = null;
try { off = window.localStorage.getItem("gx-audio") === "off"; pos = JSON.parse(window.sessionStorage.getItem(KEY) || "null"); } catch (e) { /* storage blocked */ }
const resume = () => { if (pos && pos.t) { try { a.currentTime = pos.t; } catch (e) { /* not seekable yet */ } } };
if (a.readyState >= 1) resume(); else a.addEventListener("loadedmetadata", resume, { once: true });
if (!off) { const p = a.play(); if (p && p.catch) p.catch(() => setAsk(true)); }
const save = () => { try { window.sessionStorage.setItem(KEY, JSON.stringify({ t: a.currentTime })); } catch (e) { /* storage blocked */ } };
const iv = setInterval(save, 2000);
window.addEventListener("pagehide", save);
return () => { clearInterval(iv); window.removeEventListener("pagehide", save); };
}, []);
// The orbit (home only) turns a little faster with the music.
React.useEffect(() => {
const sync = () => { if (window.__gxOrbit) window.__gxOrbit.params.speed = playing ? 1.25 : 1; };
sync();
window.addEventListener("gx-orbit:live", sync);
return () => window.removeEventListener("gx-orbit:live", sync);
}, [playing]);
if (!audio || !audio.src || missing) return null;
const toggle = () => {
const a = ref.current;
if (!a) return;
if (a.paused) a.play().catch(() => setAsk(true)); else a.pause();
try { window.localStorage.setItem("gx-audio", a.paused ? "on" : "off"); } catch (e) { /* storage blocked */ }
};
// Portalled to : Nav sits inside a GrainField, which is its own
// stacking context, so a fixed child there slid under later sections.
return ReactDOM.createPortal((
), document.body);
}
function Nav({ active }) {
return (
);
}
function NavInner({ active }) {
const items = Object.keys(PAGES);
const phone = useMediaQuery("(max-width:767px)");
if (phone) return ;
return (
{F.nav.brand}}
items={items}
active={active}
onSelect={(it) => { if (it === "Fragment") go(PAGES[it]); else if (it !== active) window.location.href = PAGES[it]; }}
action={null} /* no CTA in the menu (2026-10-02) */
/>
);
}
/* The address used to be a 64px display headline linking straight to
Gmail's compose URL. Two problems: it shouted louder than any project
title, and it assumed the visitor's mail lives at google.com — in a
Teams/Outlook shop that link is a dead end.
Now it is a line of mono that copies on click, says so, and offers the
OS mail handler as the alternative. Clipboard access throws on insecure
origins and inside some in-app browsers, so there is a execCommand
fallback and, failing both, the text is selected for a manual copy. */
function CopyEmail() {
const [status, setStatus] = React.useState(null); // null | "ok" | "manual"
const timer = React.useRef(0);
const textRef = React.useRef(null);
React.useEffect(() => () => clearTimeout(timer.current), []);
const announce = (next) => {
setStatus(next);
clearTimeout(timer.current);
timer.current = setTimeout(() => setStatus(null), 2600);
};
const copy = async () => {
const value = F.identity.email;
try {
await navigator.clipboard.writeText(value);
announce("ok");
return;
} catch (e) { /* insecure origin, denied, or no API */ }
try {
const ta = document.createElement("textarea");
ta.value = value;
ta.setAttribute("readonly", "");
ta.style.cssText = "position:fixed;top:-1000px;opacity:0";
document.body.appendChild(ta);
ta.select();
const ok = document.execCommand("copy");
document.body.removeChild(ta);
announce(ok ? "ok" : "manual");
} catch (e) {
announce("manual");
}
if (status === "manual" && textRef.current) {
const r = document.createRange();
r.selectNodeContents(textRef.current);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
}
};
return (