// lib.jsx — shared hooks, components, icons for Store Craft Studio
const { useState, useEffect, useRef, useCallback } = React;
/* Robust enter-view detection: IntersectionObserver + rect polling +
scroll/resize listeners. Polling catches programmatic scroll (which
doesn't dispatch scroll events). Fires once, then cleans up. */
function useInView(opts) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
let done = false;
let io, poll;
const cleanup = () => {
if (io) io.disconnect();
if (poll) clearInterval(poll);
window.removeEventListener('scroll', check);
window.removeEventListener('resize', check);
};
const fire = () => { if (done) return; done = true; setInView(true); cleanup(); };
const check = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.9 && r.bottom > 0) fire();
};
if (typeof IntersectionObserver !== 'undefined') {
io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) fire(); });
}, { threshold: 0.12, rootMargin: '0px 0px -6% 0px', ...(opts || {}) });
io.observe(el);
}
check();
poll = setInterval(check, 200);
window.addEventListener('scroll', check, { passive: true });
window.addEventListener('resize', check);
return cleanup;
}, []);
return [ref, inView];
}
/* Reveal wrapper */
function Reveal({ children, delay = 0, as = 'div', className = '', style = {}, ...rest }) {
const [ref, inView] = useInView();
const Tag = as;
return (
{children}
);
}
/* Animated number counter — fires once when scrolled into view. */
function Counter({ to, prefix = '', suffix = '', decimals = 0, duration = 1600 }) {
const [ref, inView] = useInView();
const started = useRef(false);
const [val, setVal] = useState(0);
useEffect(() => {
if (!inView || started.current) return;
started.current = true;
const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { setVal(to); return; }
const t0 = performance.now();
let timer;
const step = () => {
const p = Math.min((performance.now() - t0) / duration, 1);
setVal(to * (1 - Math.pow(1 - p, 3)));
if (p < 1) timer = setTimeout(step, 16);
else setVal(to);
};
step();
return () => clearTimeout(timer);
}, [inView]);
const display = val.toLocaleString('en-US', {
minimumFractionDigits: decimals, maximumFractionDigits: decimals
});
return {prefix}{display}{suffix};
}
/* Brand logo lockup — cart + mark recreated as SVG (matches uploaded logo) */
function CartMark({ size = 34, color = 'currentColor' }) {
return (
);
}
function Logo({ light = false, mark = false }) {
const ink = light ? '#fff' : 'var(--ink)';
if (mark) return ;
return (
StoreCraftStudio
);
}
/* Small inline icons */
const Icon = {
arrow: (p) => ,
arrowUR: (p) => ,
check: (p) => ,
plus: (p) => ,
star: (p) => ,
bolt: (p) => ,
code: (p) => ,
cart: (p) => ,
gauge: (p) => ,
layers: (p) => ,
swap: (p) => ,
trend: (p) => ,
phone: (p) => ,
mail: (p) => ,
pin: (p) => ,
calendar: (p) => ,
linkedin: (p) => ,
twitter: (p) => ,
github: (p) => ,
};
Object.assign(window, { useInView, Reveal, Counter, CartMark, Logo, Icon });