// ============ UI primitives ============
const { useState, useEffect, useRef, useMemo } = React;
// Intersection-based reveal
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {} }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const show = () => {
setTimeout(() => { if (el) el.classList.add("reveal-in"); }, delay * 1000);
};
const rect = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (rect.top < vh + 600) {
show();
return;
}
const io = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { show(); io.disconnect(); } },
{ threshold: 0.05 }
);
io.observe(el);
return () => io.disconnect();
}, [delay]);
return (
{children}
);
}
// Textured image placeholder. Tone: coffee|cream|leaf|dark|accent|bean
function Placeholder({ tone = "coffee", label, className = "", style = {} }) {
return (
{label && {label}}
);
}
// Decorative steam SVG (subtle, no emoji)
function Steam({ style = {} }) {
return (
);
}
// Delicate organic leaf/branch SVG (hand-drawn feel)
function LeafBranch({ className = "", style = {} }) {
return (
);
}
// Tiny coffee bean SVG
function Bean({ className = "", style = {} }) {
return (
);
}
// Circular rotating text (for hero stamp)
function CircleText({ text, radius = 48, fontSize = 10, className = "" }) {
const id = useMemo(() => "ct-" + Math.random().toString(36).slice(2, 8), []);
const size = (radius + fontSize + 4) * 2;
return (
);
}
// Arrow glyph
function Arrow({ className = "arrow" }) {
return (
);
}
Object.assign(window, { Reveal, Placeholder, Steam, LeafBranch, Bean, CircleText, Arrow });