// Agent Builder UI kit — shared primitives
const { useState, useEffect, useRef } = React;
// Signature pixel arrow (two layers animate on hover via CSS)
function PixelArrow() {
const rects = (
);
return (
);
}
// Primary CTA — lowercase label is the brand convention
function CTAButton({ children, onClick, href = "#" }) {
return (
{ if (onClick) { e.preventDefault(); onClick(e); } }}>
{children}
);
}
function Eyebrow({ children, center }) {
return {children};
}
// soft-ring mint check used throughout
function Check({ size = 19 }) {
return (
);
}
// IntersectionObserver reveal wrapper
function Reveal({ children, as = "div", className = "", style, delay = 0 }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
// Reveal immediately anything already within (or near) the viewport on mount —
// robust even in hidden iframes where IntersectionObserver never fires.
const vh = window.innerHeight || document.documentElement.clientHeight || 800;
const r = el.getBoundingClientRect();
if (r.top < vh * 1.05 && r.bottom > -40) { setSeen(true); return; }
const io = new IntersectionObserver((ents) => {
ents.forEach((en) => { if (en.isIntersecting) { setSeen(true); io.disconnect(); } });
}, { threshold: 0.12 });
io.observe(el);
// Safety net: if IO hasn't fired (e.g. hidden iframe), reveal on scroll proximity.
const onScroll = () => {
const rr = el.getBoundingClientRect();
if (rr.top < (window.innerHeight || 800) * 1.05) { setSeen(true); io.disconnect(); window.removeEventListener("scroll", onScroll); }
};
window.addEventListener("scroll", onScroll, { passive: true });
// Final safety net: never leave content permanently hidden (print, export,
// short viewports, throttled/hidden iframes where CSS transitions pause).
// Force visibility via inline style so it does not depend on a transition.
const t = setTimeout(() => {
setSeen(true);
const node = ref.current;
if (node) { node.style.opacity = "1"; node.style.transform = "none"; }
io.disconnect();
}, 1500);
return () => { io.disconnect(); window.removeEventListener("scroll", onScroll); clearTimeout(t); };
}, []);
const Tag = as;
return (
{children}
);
}
function SectionHead({ eyebrow, title, lede, center }) {
return (
{eyebrow}
{lede && {lede}
}
);
}
// Abstract glossy thumbnail used across the blog (feed + article cover)
const ArtGlyph = {
spark: ,
chat: ,
shield: ,
graph: ,
flow: ,
globe: ,
book: ,
playbook: ,
template: ,
};
function ArtThumb({ hue = "h-blue", glyph = "spark", className = "", img = null, alt = "" }) {
return (
{img &&
}
{ArtGlyph[glyph]}