);
}
/* ────── Country selector — top-left of the pitch strip.
Changes the shipping-caveat shown on retailer rows and persists via
localStorage. v0.1 has no feed-level re-routing; this is a reader hint. */
function CountrySelector() {
const [code, setCode] = useState(() => FMF.country?.get?.() || "US");
useEffect(() => {
const on = () => setCode(FMF.country.get());
window.addEventListener("fmf:country-changed", on);
return () => window.removeEventListener("fmf:country-changed", on);
}, []);
const meta = FMF.COUNTRIES.find(c => c.code === code) || FMF.COUNTRIES[0];
// Show the ISO-style country code rather than a flag emoji — Windows has no
// colour flag-emoji support, so flags on that platform render as letter pairs
// that don't line up with the site's mono typography. Two uppercase letters
// are universal, crisp, and match the editorial voice.
const shortCode = meta.code === "OTHER" ? "WW" : meta.code;
return (
);
}
/* ────── Collections (Have + Want) — client-side account helpers.
Two independent sets per slug. §6-compliant: localStorage only. */
function useCollectionsTotal() {
const [n, setN] = useState(() => FMF.collections?.totalCount?.() ?? 0);
useEffect(() => {
const on = () => setN(FMF.collections.totalCount());
window.addEventListener("fmf:collections-changed", on);
window.addEventListener("storage", on);
return () => {
window.removeEventListener("fmf:collections-changed", on);
window.removeEventListener("storage", on);
};
}, []);
return n;
}
function useInCollection(type, slug) {
const [inIt, setIn] = useState(() => FMF.collections?.has?.(type, slug) ?? false);
useEffect(() => {
const on = () => setIn(FMF.collections.has(type, slug));
window.addEventListener("fmf:collections-changed", on);
return () => window.removeEventListener("fmf:collections-changed", on);
}, [type, slug]);
return inIt;
}
function AccountCount() {
const n = useCollectionsTotal();
if (!n) return null;
return · {n};
}
/* Pair of collection buttons — "I have" + "I want". Replaces the single Save
button. Active state when the fragrance is in that collection. */
function CollectionButtons({ slug }) {
const have = useInCollection("have", slug);
const want = useInCollection("want", slug);
return (
);
}
/* Bookmark icon — compact save control that toggles the `want` collection.
Used at the top-right of the detail masthead as the primary save affordance.
Deliberately icon-only; aria-label carries the verbal intent. */
function BookmarkButton({ slug, className = "" }) {
const saved = useInCollection("want", slug);
return (
);
}
/* Legacy shim — any caller still using now toggles `want`. */
function WishlistButton({ slug, label }) {
const saved = useInCollection("want", slug);
return (
);
}
/* ────── Footer — with "What we won't do" as explicit signed link on every page ────── */
function Footer() {
return (
);
}
/* ────── Bottle — v1 image system.
Delegates to FMF.media.renderSvg, which is battle-tested against 20 failure
modes (see src/media.js header). Contract: same input → same output, forever.
Callers pass either `slug`, or a full `frag` object, or a `mediaId`. */
function Bottle({ mediaId, slug, frag, photo, label, style, className, showCredit = false, showLabel = true }) {
// Prefer explicit mediaId, then frag object, then slug. photo prop is ignored (legacy).
const input = mediaId || frag || slug || label || "unknown";
// Real-photo resolution: if a bottle photo exists for this slug (ingested
// from doevent/perfume on Hugging Face, MIT-licensed), render the .
// Otherwise fall back to the typographic SVG placeholder (§11-compliant).
// onError swaps back to the placeholder if the file is missing at runtime —
// no broken-image icons, ever.
const resolveSlug = typeof frag === "object" && frag ? frag.slug : (typeof slug === "string" ? slug : null);
// Brand + name hints let FMF.bottlePhoto's Pass 3 fuzzy-resolve slugs that
// don't exist exactly in the ingested catalog (e.g. smells-like entries,
// flankers authored before the expansion ran).
const brandHint = (typeof frag === "object" && frag) ? frag.brand : undefined;
const nameHint = (typeof frag === "object" && frag) ? frag.name : undefined;
const photoRecord = resolveSlug && FMF.bottlePhoto
? FMF.bottlePhoto(resolveSlug, (brandHint && nameHint) ? { brand: brandHint, name: nameHint } : undefined)
: null;
const [photoBroken, setPhotoBroken] = React.useState(false);
if (photoRecord && !photoBroken) {
return (
setPhotoBroken(true)}
className={className}
style={{
width: "100%",
height: "100%",
objectFit: "contain",
display: "block",
/* Subtle editorial treatment: warm multiply so photos feel of-a-piece
with the paper surface, not as sterile product shots. */
mixBlendMode: "multiply",
}}
/>
{showCredit && (
bottle via {photoRecord.src} · {photoRecord.license}
)}
);
}
const svg = FMF.media.renderSvg(input, { showLabel });
return (
{showCredit && (
typeset placeholder
)}
);
}
/* ────── Cite — the runtime refusal marker.
Every load-bearing datapoint on the site can cite the refusal that governs
it. Hover reveals which check ran; click jumps to that refusal on /refusals.
This is what makes the refusals the algorithm, not a page. */
function Cite({ n, check, result = "pass" }) {
const refusal = (window.FMF?.REFUSALS || []).find(r => r.n === n);
if (!refusal) return null;
const tip = (refusal.checks && refusal.checks[check]) || refusal.title;
return (
§{n}
);
}
/* ────── Prov — price provenance wrapper.
Wraps an inline price value in a dotted-underlined span that reveals a
full audit card on hover or focus. Every number that readers might
second-guess gets a paper trail. The card lists fetched-at, source URL,
HTTP status, parser version, signer, and §N check. Keyboard-accessible. */
function Prov({ children, row, frag, anchor = "left", style, className = "" }) {
const retailer = row?.retailerObj || row?.retailer || null;
const prov = window.FMF?.provenance ? window.FMF.provenance(retailer, frag, row) : null;
if (!prov) return {children};
const cls = `prov ${anchor === "right" ? "prov--right" : ""} ${className}`.trim();
return (
{children}
fetched{prov.fetchedAt}source{prov.source}http{prov.status}parser{prov.parserVersion}signer{prov.signer}check {prov.check}
);
}
/* ────── InvariantHeartbeat — the site's pulse.
Re-verifies the Aventus landed-price formula every 10 seconds, live. Ticker
updates once per second. If the invariant ever fails, the whole document
grayscales and this strip flips to oxblood FAIL. Sacred alarm. */
function InvariantHeartbeat() {
const [now, setNow] = useState(() => Date.now());
const [verifiedAt, setVerifiedAt] = useState(() => Date.now());
const [ok, setOk] = useState(() => runInvariant());
useEffect(() => {
const verifyId = setInterval(() => {
const pass = runInvariant();
setOk(pass);
setVerifiedAt(Date.now());
document.body.classList.toggle("invariant-fail", pass === false);
}, 10000);
const tickId = setInterval(() => setNow(Date.now()), 1000);
return () => { clearInterval(verifyId); clearInterval(tickId); };
}, []);
const ago = Math.max(0, Math.floor((now - verifiedAt) / 1000));
const status = ok === null ? "—" : ok ? "PASS" : "FAIL";
const statusCls = ok === null ? "invariant__meta" : ok ? "invariant__pass" : "invariant__fail";
return (
);
}
function runInvariant() {
try {
if (!window.FMF?.AVENTUS || !window.FMF.retailerById) return null;
const a = window.FMF.AVENTUS.prices.find(p => p.retailer === "fragrancex");
const r = window.FMF.retailerById("fragrancex");
const c = window.FMF.computeLanded({
landed: a.sticker, coupon: a.coupon,
shippingUsd: r.shippingUsd, taxRatePct: r.taxRatePct,
});
return c.totalR === 337.08;
} catch { return false; }
}
/* ────── PerfBudget — visible evidence of restraint.
One mono line above the invariant heartbeat showing live page metrics:
bytes transferred, first contentful paint, DOM node count, cookies set.
This is the site auditing itself. Updates every 30s. */
function PerfBudget() {
const [m, setM] = useState(null);
useEffect(() => {
const compute = () => {
try {
const nav = performance.getEntriesByType("navigation")[0];
const fcp = performance.getEntriesByType("paint").find(p => p.name === "first-contentful-paint")?.startTime;
const resources = performance.getEntriesByType("resource");
const totalBytes = resources.reduce((s, r) => s + (r.transferSize || 0), 0) + (nav?.transferSize || 0);
const kb = Math.max(1, Math.round(totalBytes / 1024));
const ms = fcp ? Math.round(fcp) : Math.round(performance.now());
const nodes = document.getElementsByTagName("*").length;
const cookies = document.cookie ? document.cookie.split(";").filter(Boolean).length : 0;
setM({ kb, ms, nodes, cookies });
} catch (e) { setM(null); }
};
compute();
const id = setInterval(compute, 30000);
return () => clearInterval(id);
}, []);
if (!m) return null;
return (
This page{m.kb.toLocaleString()} kb{m.ms.toLocaleString()} ms · first paint{m.nodes.toLocaleString()} nodes
{m.cookies} cookie{m.cookies === 1 ? "" : "s"}
);
}
/* ────── PrintHeader / PrintFooter — paper-only editorial chrome.
Hidden on screen (.print-only{display:none}); rendered via @media print.
Header: issue masthead + date-of-print. Footer: refusals-in-force strip,
the URL being printed, and the editor signature. Every paper copy is
audit-ready from the moment it leaves the printer. */
function PrintHeader() {
const [printed] = useState(() => new Date().toISOString().slice(0, 10));
return (
);
}
function PrintFooter() {
const [href] = useState(() => (typeof location !== "undefined" ? location.href : ""));
// Render the full refusal list from FMF.REFUSALS — stays in sync as new
// refusals are adopted. Each refusal renders as `§N short-title`.
const shortTitle = (r) => r.title
.replace(/^We do not /, "no ")
.replace(/^No /, "no ")
.replace(/^When .*/, r.id.replace(/-/g, " "))
.replace(/^If .*/, r.id.replace(/-/g, " "))
.replace(/\.$/, "")
.toLowerCase();
const list = (window.FMF?.REFUSALS || []).map(r => `§${r.n} ${shortTitle(r)}`).join(" · ");
return (
);
}
Object.assign(window, { Stat, DataStat, Nav, Footer, Bottle, Cite, InvariantHeartbeat, Prov, PrintHeader, PrintFooter, PerfBudget, WishlistButton, AccountCount, CollectionButtons, useInCollection, useCollectionsTotal });