// components.jsx — small UI primitives for Lumera const Eyebrow = ({ children, style, color }) => (
{children}
); const Rule = ({ tick = true, margin = "var(--s-7) auto", width = "100%", maxWidth = "100%", color = "var(--line)" }) => (
{tick && }
); const Button = ({ children, variant = "primary", onClick, style, full, type = "button" }) => { const base = { fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", padding: "16px 28px", border: "1px solid var(--ink)", background: "var(--ink)", color: "var(--paper)", cursor: "pointer", transition: "opacity 180ms var(--ease-quiet), background 180ms var(--ease-quiet)", width: full ? "100%" : "auto", }; const ghost = { ...base, background: "transparent", color: "var(--ink)" }; const quiet = { fontFamily: "var(--font-sans)", fontSize: "11px", fontWeight: 400, letterSpacing: "0.18em", textTransform: "uppercase", padding: "6px 0", border: 0, borderBottom: "1px solid var(--ink)", background: "transparent", color: "var(--ink)", cursor: "pointer", }; const onDark = { ...base, background: "var(--paper)", color: "var(--ink)", border: "1px solid var(--paper)" }; const ghostOnDark = { ...ghost, color: "var(--paper)", border: "1px solid var(--paper)" }; const quietOnDark = { ...quiet, color: "var(--paper)", borderBottomColor: "var(--paper)" }; const map = { primary: base, ghost, quiet, onDark, ghostOnDark, quietOnDark }; const s = { ...map[variant], ...style }; return ( ); }; const ArrowLink = ({ children, onClick, style, color }) => ( ); // inject hover style once if (typeof document !== "undefined" && !document.getElementById("lumera-arrow-style")) { const s = document.createElement("style"); s.id = "lumera-arrow-style"; s.textContent = ".lumera-arrow:hover .lumera-arrow-glyph { transform: translateX(6px); }"; document.head.appendChild(s); } const Nav = ({ onNav, onOpenBag, bagCount = 0, scrolled = false, current = "home" }) => { const linkStyle = (active) => ({ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: active ? "var(--champagne-d)" : "var(--ink)", cursor: "pointer", background: "transparent", border: 0, padding: "8px 0", transition: "color 180ms var(--ease-quiet)", }); const hover = e => e.currentTarget.style.color = "var(--champagne-d)"; const out = (active) => e => e.currentTarget.style.color = active ? "var(--champagne-d)" : "var(--ink)"; return (
); }; const Footer = ({ onNav }) => { const colTitle = { fontFamily: "var(--font-sans)", fontSize: "10px", fontWeight: 400, letterSpacing: "0.22em", textTransform: "uppercase", color: "#BFB5A3", margin: "0 0 22px" }; const liStyle = { fontFamily: "var(--font-sans)", fontSize: "13px", letterSpacing: "0.02em", color: "var(--paper)", padding: "6px 0", cursor: "pointer", listStyle: "none", opacity: 0.92 }; return ( ); }; const ProductCard = ({ product, onClick, onAdd, compact = false }) => { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => onClick && onClick(product)}>
{product.name} {onAdd && ( )}
{product.concern}

{product.name}

{product.descriptor}

${product.price} {product.size}
); }; const JournalCard = ({ entry }) => (
{entry.eyebrow}

{entry.title}

{entry.dek}

The Lumera Letter · {entry.date}
); const BagDrawer = ({ open, items, onClose, onRemove }) => { const subtotal = items.reduce((s, it) => s + it.product.price * it.qty, 0); return (
); }; // Reveal — fades in element when scrolled into view. // Uses React state (not classList) so it survives App re-renders. const Reveal = ({ children, style, as: As = "div", delay = 0 }) => { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; // Failsafe — reveal within 700ms even if IO never fires (iframe sandboxes // sometimes swallow it). The slow CSS transition still gives a graceful fade. const failsafe = setTimeout(() => setShown(true), 700); if (typeof IntersectionObserver === "undefined") { setShown(true); return () => clearTimeout(failsafe); } const io = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting) { setShown(true); io.unobserve(el); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }); io.observe(el); return () => { io.disconnect(); clearTimeout(failsafe); }; }, []); return ( {children} ); }; window.Eyebrow = Eyebrow; window.Rule = Rule; window.Button = Button; window.ArrowLink = ArrowLink; window.Nav = Nav; window.Footer = Footer; window.ProductCard = ProductCard; window.JournalCard = JournalCard; window.BagDrawer = BagDrawer; window.Reveal = Reveal;