// ---- shared components & icons ----
const { useState, useEffect, useRef, useCallback } = React;
// Simple stroke icon set (1.6 weight). Decorative, kept geometric.
function Icon({ name, ...p }) {
const paths = {
leaf: <>,
calendar: <>,
sun: <>,
hand: <>,
pin: <>,
mail: <>,
phone: <>,
clock: <>,
arrow: <>,
arrowdown: <>,
check: <>,
x: <>,
instagram: <>,
sprout: <>,
};
return (
);
}
// Brand mark — a stylised custard-apple / leaf glyph
function Mark() {
return ;
}
// Reveal-on-scroll wrapper. Scroll-position based (IntersectionObserver is
// unreliable in the preview iframe) and animated with the Web Animations API
// (CSS transitions can stick at the start value in this engine).
function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
let done = false;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const reveal = () => {
if (done || !el) return;
done = true;
el.classList.add("in"); // static visible state (no CSS transition involved)
if (!reduce && el.animate) {
// Decorative entrance. fill:backwards holds the hidden frame during the
// delay; a timer finishes it so a frozen timeline can never pin it hidden.
let a;
try {
a = el.animate(
[
{ opacity: 0, transform: "translateY(24px)" },
{ opacity: 1, transform: "none" },
],
{ duration: 850, delay, easing: "cubic-bezier(.22,.61,.36,1)", fill: "backwards" }
);
} catch (e) { a = null; }
if (a) setTimeout(() => { try { a.finish(); } catch (e) {} }, delay + 950);
}
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
};
const check = () => {
if (done || !el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.9 && r.bottom > 0) reveal();
};
const t = setTimeout(check, 60);
window.addEventListener("scroll", check, { passive: true });
window.addEventListener("resize", check);
return () => {
clearTimeout(t);
window.removeEventListener("scroll", check);
window.removeEventListener("resize", check);
};
}, []);
const Tag = as;
return (
{children}
);
}
function Eyebrow({ children, center }) {
return {children};
}
// striped placeholder background for image-slots (author-side hint)
function slotImg(id, ph, attrs = {}) {
return React.createElement("image-slot", {
id, placeholder: ph, ...attrs,
});
}
Object.assign(window, { Icon, Mark, Reveal, Eyebrow, slotImg });