/* ============================================================ Poket Library - Shared components (React, via Babel) Exported to window for use across Home & Products pages. ============================================================ */ const { useState, useEffect, useRef, useCallback, createContext, useContext } = React; /* ---------- Context ---------- */ const PoketCtx = createContext(null); const usePoket = () => useContext(PoketCtx); function PoketProvider({ children }) { const [lang, setLangState] = useState(() => window.PL_I18N.detectLang()); useEffect(() => { window.PL_I18N.setLang(lang); }, [lang]); const setLang = useCallback((code) => setLangState(window.PL_I18N.setLang(code)), []); const t = window.PL_I18N.makeT(lang); return React.createElement(PoketCtx.Provider, { value: { lang, setLang, t } }, children); } /* ============================================================ Icons — line, 2px, rounded ============================================================ */ const Ico = { arrow: (p) => (), download: (p) => (), chevron: (p) => (), globe: (p) => (), menu: (p) => (), close: (p) => (), check: (p) => (), // categories relationships: (p) => (), money: (p) => (), switzerland: (p) => (), mind: (p) => (), templates: (p) => (), work: (p) => (), // steps compass: (p) => (), cloud: (p) => (), checkCircle: (p) => (), // values speech: (p) => (), file: (p) => (), sparkle: (p) => (), bolt: (p) => (), heart: (p) => (), layers: (p) => () }; /* ============================================================ Reveal-on-scroll ============================================================ */ function Reveal({ as = "div", delay = 0, className = "", children, ...rest }) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setSeen(true); return; } const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }); }, { threshold: 0.14, rootMargin: "0px 0px -8% 0px" }); io.observe(el); return () => io.disconnect(); }, []); return React.createElement(as, { ref, className: `reveal ${seen ? "in" : ""} ${className}`.trim(), "data-delay": delay || undefined, ...rest }, children); } /* ============================================================ Logo ============================================================ */ function Logo({ footer = false }) { return ( Poket Library ); } /* ============================================================ Language selector ============================================================ */ function LangSelector() { const { lang, setLang } = usePoket(); const [open, setOpen] = useState(false); const wrap = useRef(null); useEffect(() => { const onDoc = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); }; document.addEventListener("click", onDoc); return () => document.removeEventListener("click", onDoc); }, []); const langs = window.PL_I18N.SUPPORTED; return (
{open && (
{langs.map((code) => ( ))}
)}
); } /* ============================================================ Header ============================================================ */ function Header() { const { t } = usePoket(); const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const nav = [ { href: "index.html#categories", label: t("nav.categories") }, { href: "index.html#how", label: t("nav.how") }, { href: "index.html#about", label: t("nav.about") } ]; return (
{t("cta.explore")}
); } /* ============================================================ CSS Product Cover (collection look) ============================================================ */ function Cover({ product, style }) { const { lang } = usePoket(); const cat = window.PL_DATA.categories.find((c) => c.key === product.category); return (
p poket library
{cat.name[lang]}
{product.title[lang]}
{product.promise[lang].split(/[.—]/)[0]}.
{product.num}
); } /* ============================================================ Product card ============================================================ */ function ProductCard({ product }) { const { lang, t } = usePoket(); const cat = window.PL_DATA.categories.find((c) => c.key === product.category); const comingSoon = !product.available; const external = !comingSoon && product.url && /^https?:/.test(product.url); const inner = (
{comingSoon && {t("cta.soon")}}
{cat.name[lang]}

{product.title[lang]}

{product.promise[lang]}

{product.formats.map((f) => ({t("formats." + f)}))}
{!comingSoon && (
{product.price ? {product.price} : } {t("cta.discover")}
)}
); if (comingSoon) { return
{inner}
; } if (external) { return {inner}; } return {inner}; } /* ============================================================ Category card ============================================================ */ function CategoryCard({ category }) { const { lang, t } = usePoket(); const Icon = Ico[category.icon]; return (
{Icon ? : null}

{category.name[lang]}

{category.copy[lang]}

{t("cats.explore")} ); } /* ============================================================ Footer ============================================================ */ function Footer() { const { lang, setLang, t } = usePoket(); const cats = window.PL_DATA.categories; return ( ); } /* ============================================================ Legal / support page (multilingual, driven by PL_LEGAL) ============================================================ */ function autoLink(text) { // turn email addresses into mailto links const re = /([A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,})/g; const parts = String(text).split(re); return parts.map((part, i) => re.test(part) ? React.createElement("a", { key: i, href: "mailto:" + part }, part) : part ); } function LegalPage({ page }) { const { lang } = usePoket(); const data = (window.PL_LEGAL[page] && (window.PL_LEGAL[page][lang] || window.PL_LEGAL[page].en)) || {}; const ui = window.PL_LEGAL.ui[lang] || window.PL_LEGAL.ui.en; useEffect(() => { document.title = (data.title || "Poket Library") + " — Poket Library"; }, [lang, page]); return (
{data.eyebrow}

{data.title}

{data.updated}

{data.intro &&

{autoLink(data.intro)}

} {(data.sections || []).map((s, i) => (

{s.h}

{(s.p || []).map((para, j) => (

{autoLink(para)}

))} {s.list && (
    {s.list.map((li, k) => (
  • {autoLink(li)}
    • ))}
)} ))}

{ui.back}

); } /* ---------- export ---------- */ Object.assign(window, { PoketCtx, usePoket, PoketProvider, Ico, Reveal, Logo, LangSelector, Header, Footer, Cover, ProductCard, CategoryCard, LegalPage });