// Mean It — auto-demo helpers: virtual cursor, tour callouts, typed text.
function VirtualCursor({ x, y, clicking }) {
return (
);
}
function TourCallout({ x, y, text, side = 'top' }) {
// side: 'top' = callout above target (arrow on bottom)
// 'bottom' = callout below target (arrow on top)
const above = side === 'top';
return (
);
}
function TypedText({ text, speed = 12, startDelay = 0, onDone, className, style, showCaret = true }) {
const [shown, setShown] = React.useState(0);
React.useEffect(() => {
let i = 0, timer;
setShown(0);
const tick = () => {
i++;
setShown(i);
if (i < text.length) timer = setTimeout(tick, speed);
else if (onDone) onDone();
};
const start = setTimeout(tick, startDelay);
return () => { clearTimeout(start); clearTimeout(timer); };
}, [text, speed, startDelay]);
const done = shown >= text.length;
const visible = text.slice(0, shown);
const lines = visible.split('\n');
return (
{lines.map((line, i) => (
{line}
{i < lines.length - 1 &&
}
))}
{showCaret && !done && (
)}
);
}
// helpers used by PickMoment etc.
function rectCenter(el) {
if (!el) return null;
const r = el.getBoundingClientRect();
return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
}
function rectTop(el, offset = 0) {
if (!el) return null;
const r = el.getBoundingClientRect();
return { x: r.left + r.width / 2, y: r.top + offset };
}
Object.assign(window, { VirtualCursor, TourCallout, TypedText, rectCenter, rectTop });