/* Shared atoms */
const { useEffect, useRef, useState, useCallback } = React;
function Reveal({ as = "div", delay = 0, className = "", style = {}, children, ...rest }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { el.classList.add("is-in"); io.unobserve(el); }
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
io.observe(el);
// Safety net: never let content stay invisible if IO doesn't fire
// (html-to-image capture, print, odd browsers).
const fallback = setTimeout(() => el && el.classList.add("is-in"), 1600);
return () => { io.disconnect(); clearTimeout(fallback); };
}, []);
const Tag = as;
return (
{children}
);
}
function Slot({ caption, ratio = "3 / 4", style = {}, className = "", children }) {
return (
{caption}
{children}
);
}
function Wordmark({ size = 18, color = "currentColor" }) {
const h = Math.round(size * 1.15);
return (
);
}
/* Inline glyphs */
const I = {
Arrow: (p) => ,
Star: (p) => ,
Close: (p) => ,
Play: (p) => ,
Pin: (p) => ,
};
/* Edition stamp — rotated, foil-y */
function EditionStamp({ label = "Edition 01", number = "MMXXVI", angle = -7 }) {
return (
★ {label} ★
{number}
);
}
Object.assign(window, { Reveal, Slot, Wordmark, I, EditionStamp, ShatterLines });
/* Brand pattern from the packaging — gold lines on black (dark mode)
or gold/dark on white (light mode). Replaces the synthetic SVG. */
function ShatterLines({ mode, opacity, stroke, lines, seed, ...rest }) {
// Auto-detect light vs dark from the optional stroke hint, default light
const isDark = mode === "dark" || (stroke && stroke.includes("239"));
const src = isDark ? "uploads/black-box-web.png" : "uploads/white-box-web.png";
const op = opacity ?? (isDark ? 0.25 : 0.18);
return (
);
}