{PORTAL_SKYLINE.map(([x, w, h, c], i) => (
))}
);
}
function LazyView({ files, isLoaded, variant, readySelector, onClose, children }) {
const T = DESK_TEXT.portal[variant];
const [phase, setPhase] = useState(isLoaded ? "build" : "load"); /* load -> build -> reveal -> done */
const [failed, setFailed] = useState(false);
const hostRef = useRef(null);
const t0 = useRef(performance.now());
const closeRef = useRef(onClose); closeRef.current = onClose;
/* The page grows back to full size; the clip stays on until it has, so nothing outside the view flashes in */
const unshrink = () => {
const html = document.documentElement;
if (!html.classList.contains("sl-portal-desk")) return;
html.classList.remove("sl-portal-desk"); html.classList.add("sl-portal-clip");
setTimeout(() => { if (!html.classList.contains("sl-portal-desk")) html.classList.remove("sl-portal-clip"); }, 760);
};
/* Desk: shrink the page into a screen. Only what is in view is kept (clip-path), scaled around the middle
of the viewport. Undone once the desk covers the page, or right away if the visitor backs out. */
useEffect(() => {
if (variant !== "desk") return;
const html = document.documentElement, root = document.getElementById("root");
window.scrollTo({ top: window.scrollY, behavior: "instant" }); /* stop a smooth scroll still under way */
const place = () => {
const y = window.scrollY, vh = window.innerHeight, rest = Math.max(0, root.offsetHeight - y - vh);
root.style.setProperty("--sl-portal-y", y + vh / 2 + "px");
root.style.setProperty("--sl-portal-scroll", y + "px");
root.style.setProperty("--sl-portal-clip", "inset(" + y + "px 0 " + rest + "px 0 round 22px)");
};
root.style.setProperty("--sl-portal-bg", getComputedStyle(document.body).backgroundColor); /* the page keeps its own background */
place();
html.classList.add("sl-portal-desk");
/* If the page still moves (an ending smooth scroll, scroll anchoring), the screen follows it */
window.addEventListener("scroll", place, { passive: true });
return () => { window.removeEventListener("scroll", place); unshrink(); };
}, []);
useEffect(() => { if (variant === "desk" && phase === "done") unshrink(); }, [phase]);
/* Fetch and compile the code */
useEffect(() => {
if (phase !== "load") return;
let alive = true;
slLoad(files).then(() => { if (alive) setPhase("build"); }).catch((e) => {
console.error("[lazy-load]", e);
if (!alive) return;
setFailed(true); setTimeout(() => closeRef.current(), 1800);
});
return () => { alive = false; };
}, []);
/* Wait for the view to report ready, then reveal it */
useEffect(() => {
if (phase !== "build") return;
const host = hostRef.current;
let timer = 0;
const check = () => {
if (!host || !host.querySelector(readySelector)) return false;
mo.disconnect();
timer = setTimeout(() => setPhase("reveal"), Math.max(0, PORTAL_MIN_MS - (performance.now() - t0.current)));
return true;
};
const mo = new MutationObserver(check);
if (!check()) mo.observe(host, { subtree: true, childList: true, attributes: true, attributeFilter: ["class"] });
return () => { mo.disconnect(); clearTimeout(timer); };
}, [phase]);
useEffect(() => {
if (phase !== "reveal") return;
const t = setTimeout(() => setPhase("done"), 700);
return () => clearTimeout(t);
}, [phase]);
/* Esc backs out while the transition is showing (the view handles it after that) */
useEffect(() => {
if (phase === "done" || phase === "reveal") return;
const onKey = (e) => { if (e.key === "Escape") closeRef.current(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [phase]);
const shown = phase === "reveal" || phase === "done";
return (