s.setNav(null)} style={{
position:'absolute', inset:0, zIndex:80,
background: open ? 'rgba(0,0,0,0.45)' : 'transparent',
opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
transition: 'opacity .25s',
}}/>
);
}
// ─── Custom cursor (desktop only) ─────────────────────────────
function CustomCursor() {
const wrapRef = useRef(null);
const dotRef = useRef(null);
const verRef = useRef(null);
useEffect(() => {
const wrap = wrapRef.current;
const dot = dotRef.current;
const ver = verRef.current;
if (!wrap || !dot || !ver) return;
let raf = 0; let pending = false; let lastX = 0, lastY = 0; let lastTarget = null;
let curActive = false;
const apply = () => {
pending = false;
wrap.style.transform = `translate3d(${lastX}px, ${lastY}px, 0)`;
const t = lastTarget && lastTarget.closest && lastTarget.closest('[data-cursor-label]');
setActiveDOM(!!t);
};
const setActiveDOM = (next) => {
if (next === curActive) return;
curActive = next;
if (next) {
dot.style.transform = 'translate(-50%,-50%) scale(0)';
dot.style.opacity = '0';
ver.style.transform = 'translate(-50%,-50%) scale(1)';
ver.style.opacity = '1';
} else {
dot.style.transform = 'translate(-50%,-50%) scale(1)';
dot.style.opacity = '1';
ver.style.transform = 'translate(-50%,-50%) scale(0.28)';
ver.style.opacity = '0';
}
};
const onMove = (e) => {
lastX = e.clientX;
lastY = e.clientY;
lastTarget = e.target;
if (!pending) {
pending = true;
raf = requestAnimationFrame(apply);
}
};
document.addEventListener('mousemove', onMove, { passive: true });
return () => {
document.removeEventListener('mousemove', onMove);
cancelAnimationFrame(raf);
};
}, []);
return (
);
}
// ─── Cart Drawer ────────────────────────────────────────────────────
function CartDrawer() {
const s = useStore();
const subtotal = s.cart.reduce((sum, it) => sum + it.price * it.qty, 0);
return (
<>
s.setCartOpen(false)} style={{
position:'absolute', inset:0, zIndex:80,
background: s.cartOpen ? 'rgba(0,0,0,0.45)' : 'transparent',
opacity: s.cartOpen ? 1 : 0, pointerEvents: s.cartOpen ? 'auto' : 'none',
transition: 'opacity .25s',
}}/>
);
}
const qtyBtn = {
width:24, height:24, border:`1px solid ${C.border}`, background:'#fff',
cursor:'pointer', fontFamily:'JetBrains Mono, monospace', fontSize:13, lineHeight:1,
};
// ─── Chat FAB ───────────────────────────────────────────────────────
function ChatFAB({ mobile }) {
const s = useStore();
const btnRef = useRef(null);
const [hideAtFooter, setHideAtFooter] = useState(false);
useEffect(() => {
// Find OUR own scroller (each App instance has its own data-app-root + data-app-scroll)
const btn = btnRef.current;
if (!btn) return;
const root = btn.closest('[data-app-root]');
const scroller = root ? root.querySelector('[data-app-scroll]') : null;
if (!scroller) return;
const findFooter = () => scroller.querySelector('footer');
const check = () => {
const f = findFooter();
if (!f) return;
const fr = f.getBoundingClientRect();
const sr = scroller.getBoundingClientRect();
const footerInView = fr.top < sr.bottom - (mobile ? 60 : 24);
setHideAtFooter(footerInView);
};
scroller.addEventListener('scroll', check, { passive: true });
window.addEventListener('resize', check, { passive: true });
const raf = requestAnimationFrame(check);
return () => {
scroller.removeEventListener('scroll', check);
window.removeEventListener('resize', check);
cancelAnimationFrame(raf);
};
}, [mobile, s.route]);
const hideFab = hideAtFooter || (mobile && s.chatOpen);
return (
);
}
function ChatPanel({ mobile }) {
const s = useStore();
const open = s.chatOpen;
const w = mobile ? '100%' : 380;
return (
);
}
function ChatBubble({ who, text, time }) {
const isAgent = who === 'agent';
return (
);
}
Object.assign(window, {
StoreCtx, useStore, C, Icon, iconBtn,
Wordmark, Marquee, Header, MobileBottomNav, SectionRule, Footer, FooterCopyright, MobileMenuDrawer, CustomCursor,
CartDrawer, ChatFAB, ChatBubble,
});