// EUMORPH — system primitives: wordmark, redaction, bottles, chrome, footer const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM, useCallback: useC } = React; // ---------- ISSUE — single source of truth for issue/volume/date stamps ---------- // Read from across the site so footer, hero running-head, the journal, // and the membership card never drift apart. const ISSUE = { number: 47, volume: "III", weekOf: "16 March 2026", // the Monday the issue ships monthLabel: "March 2026", yearStart: "spring 2024", // when Eumorph started publishing }; window.EUMORPH_ISSUE = ISSUE; // ---------- WORDMARK ---------- function Wordmark({ size = "nav", showIPA = true }) { return ( eu·morph {showIPA && /ˈyoō-môrf/} ); } // Stacked logo lockup — wordmark + IPA tucked underneath, always visible function WordmarkStack({ size = "hero" }) { return ( eu·morph /ˈyoō-môrf/ · adj. · well-formed ); } // ---------- REDACTION (now: just renders brand text) ---------- function Redact({ children }) { return {children}; } // ---------- BOTTLE SVGs (six recognizable archetypes) ---------- function Bottle({ kind = "cream", color = "#3B2F26", height = 160 }) { // SVGs are authored on a 100×160 grid — keep aspect when the caller asks // for a different height (otherwise the bottle floats lonely in a tall card) const h = height; const w = Math.round(height * (100 / 160)); const cx = 50; const bottles = { cream: ( ), serum: ( ), fragrance: ( No. ), tube: ( ), apothecary: ( P50 ), pump: ( ), }; return {bottles[kind] || bottles.cream}; } // Map product → bottle archetype + color function bottleFor(p) { if (!p) return { kind: "cream", color: "#3B2F26" }; const line = (p.line || "").toLowerCase(); if (line.includes("fragrance") || line.includes("eau") || line.includes("perfume")) return { kind: "fragrance", color: p.accent || "#5A3520" }; if (line.includes("serum")) return { kind: "serum", color: p.accent || "#3B2F26" }; if (line.includes("treatment") || line.includes("lotion")) return { kind: "apothecary", color: p.accent || "#5A3520" }; if (line.includes("hair") || line.includes("body") || line.includes("oil")) return { kind: "pump", color: p.accent || "#3B2F26" }; if (line.includes("balm") || line.includes("cleanser")) return { kind: "tube", color: p.accent || "#3B2F26" }; return { kind: "cream", color: p.accent || "#3B2F26" }; } // ---------- CIRCLE PEEK — nav button with auto-open arrival teaser ---------- function CirclePeek({ go, route }) { const [open, setOpen] = useS(false); const [armed, setArmed] = useS(false); // true while the auto-open teaser is showing const closeTimer = useR(null); const PEEK_KEY = "eumorph.circle.peek.shown.v2"; // Auto-open ~1.2s after arrival on the home page only — nowhere // else does it make narrative sense, and it blocks the topbar over // an unrelated screen otherwise. Closes on any scroll, click anywhere // outside, or after a generous timeout. useE(() => { if (route !== "home") return; // only on the issue cover let t; try { if (localStorage.getItem(PEEK_KEY)) return; } catch (e) {} t = setTimeout(() => { setOpen(true); setArmed(true); try { localStorage.setItem(PEEK_KEY, "1"); } catch (e) {} }, 1200); return () => clearTimeout(t); }, [route]); // While armed, dismiss on scroll / outside-click / esc useE(() => { if (!armed) return; const onScroll = () => { if (window.scrollY > 30) { setOpen(false); setArmed(false); } }; const onKey = (e) => { if (e.key === "Escape") { setOpen(false); setArmed(false); } }; const onClick = (e) => { if (!e.target.closest(".circle-peek-wrap")) { setOpen(false); setArmed(false); } }; window.addEventListener("scroll", onScroll, { passive: true }); document.addEventListener("keydown", onKey); document.addEventListener("click", onClick); // Failsafe: close after 12s even if user is idle const fail = setTimeout(() => { setOpen(false); setArmed(false); }, 12000); return () => { window.removeEventListener("scroll", onScroll); document.removeEventListener("keydown", onKey); document.removeEventListener("click", onClick); clearTimeout(fail); }; }, [armed]); const onEnter = () => { if (closeTimer.current) clearTimeout(closeTimer.current); setOpen(true); }; const onLeave = () => { if (armed) return; // armed-mode controls its own close closeTimer.current = setTimeout(() => setOpen(false), 180); }; const goToCircle = (e) => { e.preventDefault(); setOpen(false); setArmed(false); go("the-circle"); }; const dismiss = (e) => { e.stopPropagation(); setOpen(false); setArmed(false); }; return (
C Circle $50/yr
C The Circle · since 2024

$50, locked.

A flat annual rate, kept at the price of the day you join. Not a coupon — a contract.

Read the contract →
Six things, kept. Cancel any time, in one line.
); } // ---------- TOPBAR ---------- function TopBar({ route, go, bagCount, onTalkCecile }) { const navItems = [ { k: "this-week", label: "This week" }, { k: "her-shelf", label: "Her shelf" }, { k: "in-residence", label: "On the shelf" }, { k: "the-file", label: "The file" }, ]; return (
{ e.preventDefault(); go("home"); }}>
{ e.preventDefault(); onTalkCecile && onTalkCecile(); }}> Cécile { e.preventDefault(); go("account"); }}>Account { e.preventDefault(); go("cart"); }} className="bag-pill"> Bag · {bagCount || 0}
); } // ---------- ARRIVAL RIBBON (only when actually arrived) ---------- function ArrivalRibbon({ arrival, onDismiss }) { if (!arrival || arrival.kind === "cold") return null; const echoes = { warm: "You arrived from a conversation. Picking up where it left off.", agent: "Hello agent. Structured catalog at /catalog.json. Checkout via /api/order.", }; return (
{arrival.kind === "warm" && <>via {arrival.via || "Claude"} · {arrival.time || "just now"}} {arrival.kind === "agent" && <>agent session · {arrival.via || "machine-readable"}} "{arrival.query || echoes[arrival.kind]}" dismiss ✕
); } // ---------- FOOTER ---------- function Footer({ go }) { return ( ); } // ---------- CHAPTER MARK — section opener ---------- // Renders like: ─── I ───────────── THE HOUSE OF THE WEEK · §01 function ChapterMark({ numeral, label, sub, folio }) { return (
{numeral} {label} {sub && {sub}} {folio && {folio}}
); } // ---------- RUNNING HEAD — page-top issue stamp ---------- function RunningHead({ left, right }) { return (
{left} {right}
); } Object.assign(window, { Wordmark, WordmarkStack, Redact, Bottle, bottleFor, TopBar, ArrivalRibbon, Footer, ChapterMark, RunningHead });