// Primitivas editoriales: trazos a mano, sellos, papel con borde dentado
const useInView = (threshold = 0.35) => {
const ref = React.useRef(null);
const [seen, setSeen] = React.useState(false);
React.useEffect(() => {
if (!ref.current || seen) return;
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold });
io.observe(ref.current);
return () => io.disconnect();
}, [seen, threshold]);
return [ref, seen];
};
const HandUnderline = ({ children, color = 'var(--olive)', show = true }) => (
{children}
{show && (
)}
);
const HandCircle = ({ show, color = 'var(--bad)', pad = 6, width = 2.4 }) => show ? (
) : null;
const HandStrike = ({ show = true, color = 'var(--bad)' }) => show ? (
) : null;
const HandArrow = ({ color = 'var(--ink)', style }) => (
);
const Stamp = ({ children, color = 'var(--bad)', rotate = -8, size = 1, style }) => (
{children}
);
const zigzag = (n = 26, h = 8) => {
const pts = ['0 0', '100% 0'];
for (let i = n; i >= 0; i--) pts.push(`${(i / n * 100).toFixed(3)}% ${i % 2 ? `calc(100% - ${h}px)` : '100%'}`);
return `polygon(${pts.join(', ')})`;
};
const Receipt = ({ children, pad = '28px 28px 38px', bg = 'var(--paper)', teeth = 26, style }) => (
{children}
);
const Leader = ({ label, value, size = 40 }) => (
{label}
{value}
);
// Reemplaza el encabezado de sección compartido (lo usan también Módulos y Sistema)
const EdHead = ({ eyebrow, title, blurb, center, maxWidth, light }) => (
{eyebrow}
{title}
{blurb && {blurb}
}
);
Object.assign(window, { useInView, HandUnderline, HandCircle, HandStrike, HandArrow, Stamp, Receipt, Leader, SectionHead: EdHead });