@kadal/deck 0.0.0-stage → 0.1.0

package/dist/react/ScrollView.js

@@ -0,0 +1,128 @@
+import { key } from "../core/navigation.js";
+import { useDeck } from "./context.js";
+import { useNav } from "./hooks.js";
+import { BackgroundLayer } from "./Backgrounds.js";
+import { SlideFrame } from "./SlideFrame.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/ScrollView.tsx
+/**
+* The scroll view (reveal.js 5): the deck flattened into one page you read by scrolling, every
+* slide scaled to the viewport width, clicks revealed as you scroll through a slide's stretch of
+* page. Switched on by `view: scroll`, `?view=scroll`, or a narrow viewport. The custom scrollbar
+* marks each slide's segment.
+*/
+function ScrollView() {
+	const deck = useDeck();
+	const root = useRef(null);
+	const [vw, setVw] = useState(() => typeof window === "undefined" ? 1920 : window.innerWidth);
+	const [vh, setVh] = useState(() => typeof window === "undefined" ? 1080 : window.innerHeight);
+	const [clicks, setClicks] = useState({});
+	const [current, setCurrent] = useState(0);
+	const totals = useNav((s) => s.totals);
+	useEffect(() => {
+		const onResize = () => {
+			setVw(window.innerWidth);
+			setVh(window.innerHeight);
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, []);
+	const scale = vw / deck.config.width;
+	const slideH = deck.config.height * scale;
+	const flat = deck.columns.flatMap((c) => c.slides.map((meta, v) => ({
+		meta,
+		h: c.h,
+		v
+	})));
+	const segment = (k) => Math.max(slideH, vh) + (totals[k] ?? 0) * vh * .6;
+	useEffect(() => {
+		const el = root.current;
+		if (!el) return;
+		const onScroll = () => {
+			const top = el.scrollTop;
+			let y = 0;
+			const next = {};
+			let cur = 0;
+			flat.forEach((s, i) => {
+				const k = key(s.h, s.v);
+				const seg = segment(k);
+				const t = totals[k] ?? 0;
+				if (top >= y - vh / 2 && top < y + seg - vh / 2) cur = i;
+				const progress = Math.min(1, Math.max(0, (top - y + vh * .35) / Math.max(1, seg - Math.max(slideH, vh) + vh * .6)));
+				next[k] = t ? Math.min(t, Math.floor(progress * (t + 1))) : 0;
+				y += seg;
+			});
+			setClicks(next);
+			setCurrent(cur);
+		};
+		onScroll();
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => el.removeEventListener("scroll", onScroll);
+	}, [
+		flat.length,
+		vh,
+		slideH,
+		totals
+	]);
+	useEffect(() => {
+		const s = flat[current];
+		if (s) deck.nav.update((st) => st.h === s.h && st.v === s.v ? st : {
+			...st,
+			h: s.h,
+			v: s.v,
+			click: 0,
+			direction: "none"
+		});
+	}, [
+		current,
+		deck.nav,
+		flat
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "deck-scroll",
+		"data-snap": deck.config.scrollSnap || void 0,
+		children: [flat.map((s, i) => {
+			const k = key(s.h, s.v);
+			const options = deck.options.get(k);
+			return /* @__PURE__ */ jsx("section", {
+				className: ["deck-scroll-segment", i === current ? "is-current" : ""].join(" "),
+				style: { height: segment(k) },
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "deck-scroll-sticky",
+					style: { height: Math.min(vh, slideH) },
+					children: [/* @__PURE__ */ jsx(BackgroundLayer, {
+						bg: options.background,
+						active: i === current
+					}), /* @__PURE__ */ jsx("div", {
+						className: "deck-scroll-canvas",
+						style: {
+							width: deck.config.width,
+							height: deck.config.height,
+							transform: `scale(${scale})`
+						},
+						children: /* @__PURE__ */ jsx(SlideFrame, {
+							meta: s.meta,
+							options,
+							h: s.h,
+							v: s.v,
+							active: i === current,
+							click: clicks[k] ?? 0,
+							className: "is-scroll"
+						})
+					})]
+				})
+			}, k);
+		}), deck.config.scrollProgress !== false ? /* @__PURE__ */ jsx("div", {
+			className: "deck-scrollbar",
+			"data-mode": deck.config.scrollProgress === true ? "always" : "auto",
+			children: flat.map((s, i) => /* @__PURE__ */ jsx("span", {
+				className: i === current ? "is-current" : "",
+				style: { flexGrow: 1 + (totals[key(s.h, s.v)] ?? 0) * .5 }
+			}, key(s.h, s.v)))
+		}) : null]
+	});
+}
+//#endregion
+export { ScrollView };

package/dist/react/SlideFrame.d.ts

@@ -0,0 +1,51 @@
+import { SlideMeta, SlideOptions } from "../core/model.js";
+import { key } from "../core/navigation.js";
+import { ComponentType, ReactNode } from "react";
+//#region src/react/SlideFrame.d.ts
+/**
+ * One mounted slide: loads its module lazily, gives it a click registry, wraps it in its layout,
+ * and reports its click total to the navigation store. Neighbouring slides are mounted hidden so
+ * their media is ready (reveal.js's `viewDistance`); the presenter's next-slide preview, the
+ * overview and print pages mount slides in `preview` mode, where nothing autoplays.
+ */
+export interface SlideFrameProps {
+  meta: SlideMeta;
+  options: SlideOptions;
+  h: number;
+  v: number;
+  active: boolean;
+  /** The click to render; defaults to the nav click when active, all clicks when past, 0 when future. */
+  click: number;
+  preview?: boolean;
+  /**
+   * When to give embedded pages their `src`: `lazy` (the default) only while the slide is the
+   * active one; `load` also on a mirror that is never "active" — the audience's copy — a beat
+   * later at a random moment, so a room full of phones does not hit the embedded site at once.
+   */
+  frames?: "lazy" | "load";
+  /** The slide a press lands on next: its embedded pages load now, hidden, and stay loaded. */
+  prefetch?: boolean;
+  /**
+   * Whether the slide's glossary terms answer to the pointer and to reveals from the room. On by
+   * default wherever the slide is real; a preview is inert — except the audience's mirror, which
+   * is a preview in every other respect and turns this on.
+   */
+  terms?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
+}
+/**
+ * A slide's module, once.
+ *
+ * A REJECTION is deliberately not kept. The cache used to hold whatever the first attempt
+ * returned, so a slide that failed once failed for the life of the window: navigating back to it
+ * handed out the same rejected promise, and the only way out was to close the window and open a
+ * new one. A chunk can fail for reasons that pass — a dropped connection, or a window left open
+ * across a deploy, which is the usual one.
+ */
+export declare function loadSlide(meta: SlideMeta): Promise<{
+  default: ComponentType<Record<string, unknown>>;
+}>;
+export declare function SlideFrame({ meta, options, h, v, active, click, preview, frames, prefetch, terms, className, style, children }: SlideFrameProps): import("react").JSX.Element;
+//#endregion

package/dist/react/SlideFrame.js

@@ -0,0 +1,323 @@
+import { setTotal } from "../core/navigation.js";
+import { SlideContext, useDeck } from "./context.js";
+import { createClickRegistry } from "../core/clicks.js";
+import { layoutFor } from "./layouts.js";
+import { MDXProvider } from "./mdx.js";
+import { Component, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/SlideFrame.tsx
+const modules = /* @__PURE__ */ new Map();
+const magicModules = /* @__PURE__ */ new Map();
+/**
+* A slide's module, once.
+*
+* A REJECTION is deliberately not kept. The cache used to hold whatever the first attempt
+* returned, so a slide that failed once failed for the life of the window: navigating back to it
+* handed out the same rejected promise, and the only way out was to close the window and open a
+* new one. A chunk can fail for reasons that pass — a dropped connection, or a window left open
+* across a deploy, which is the usual one.
+*/
+function loadSlide(meta) {
+	const cached = modules.get(meta.index);
+	if (cached) return cached;
+	const pending = meta.load().catch((error) => {
+		if (modules.get(meta.index) === pending) modules.delete(meta.index);
+		throw error;
+	});
+	modules.set(meta.index, pending);
+	return pending;
+}
+/**
+* The shape of "this chunk is not on the server any more": the window was open when a new build
+* went out, so the name it is asking for no longer exists and the host answers with the index
+* page instead. Safari words it as a MIME type, Chrome and Firefox as a failed import.
+*/
+const STALE_BUILD = /MIME type|dynamically imported module|Importing a module script failed/i;
+/**
+* Reload once to pick up the new build — never twice in a minute, or a slide that is genuinely
+* broken becomes a window that reloads for ever.
+*/
+function recoverFromStaleBuild() {
+	try {
+		const key = "deck.stale-reload";
+		const last = Number(sessionStorage.getItem(key) ?? 0);
+		if (Date.now() - last < 6e4) return false;
+		sessionStorage.setItem(key, String(Date.now()));
+	} catch {
+		return false;
+	}
+	window.location.reload();
+	return true;
+}
+function loadMagic(meta) {
+	if (!meta.loadMagic) return null;
+	const cached = magicModules.get(meta.index);
+	if (cached) return cached;
+	const pending = meta.loadMagic().catch((error) => {
+		if (magicModules.get(meta.index) === pending) magicModules.delete(meta.index);
+		throw error;
+	});
+	magicModules.set(meta.index, pending);
+	return pending;
+}
+/** One broken slide shows its error in place instead of taking the whole deck down. */
+var SlideBoundary = class extends Component {
+	state = { error: null };
+	static getDerivedStateFromError(e) {
+		return { error: e instanceof Error ? e.message : String(e) };
+	}
+	componentDidCatch(_e, _info) {}
+	componentDidUpdate(prev) {
+		if (prev.resetKey !== this.props.resetKey && this.state.error) this.setState({ error: null });
+	}
+	render() {
+		if (this.state.error) return /* @__PURE__ */ jsxs("div", {
+			className: "deck-slide-error",
+			children: [/* @__PURE__ */ jsxs("strong", { children: [
+				"Slide ",
+				this.props.index + 1,
+				" failed to render"
+			] }), /* @__PURE__ */ jsx("pre", { children: this.state.error })]
+		});
+		return this.props.children;
+	}
+};
+/**
+* One embedded page at a time, per host.
+*
+* The slide you are on loads its page first and the slide AHEAD waits for it, because two loads of
+* the same host at once is how a small server gets pushed past a limit — and the frame that loses
+* is left showing an error page for the rest of the talk, which nothing out here can detect. It
+* adds up faster than it looks: the presenter view and the share window each load their own copy,
+* so one arrival at a live slide could be four requests landing together.
+*/
+const loadingHosts = /* @__PURE__ */ new Set();
+function hostOf(src) {
+	try {
+		return new URL(src, window.location.href).origin;
+	} catch {
+		return src;
+	}
+}
+function startFrame(frame, src) {
+	const host = hostOf(src);
+	loadingHosts.add(host);
+	const free = () => {
+		loadingHosts.delete(host);
+		frame.removeEventListener("load", free);
+		frame.removeEventListener("error", free);
+	};
+	frame.addEventListener("load", free);
+	frame.addEventListener("error", free);
+	setTimeout(free, 1e4);
+	frame.setAttribute("src", src);
+}
+/** The slide ahead: start when the host is quiet, or once waiting has stopped being worth it. */
+function startFrameWhenHostIsFree(frame, src, timers, waited = 0) {
+	if (!loadingHosts.has(hostOf(src)) || waited >= 9e3) {
+		startFrame(frame, src);
+		return;
+	}
+	timers.push(setTimeout(() => startFrameWhenHostIsFree(frame, src, timers, waited + 600), 600));
+}
+function SlideFrame({ meta, options, h, v, active, click, preview = false, frames = "lazy", prefetch = false, terms = !preview, className, style, children }) {
+	const deck = useDeck();
+	const [Component, setComponent] = useState(null);
+	const [magic, setMagic] = useState(null);
+	const [failed, setFailed] = useState(null);
+	const registry = useMemo(() => createClickRegistry(options.clicksStart), [options.clicksStart, meta.index]);
+	const root = useRef(null);
+	useEffect(() => {
+		let alive = true;
+		loadSlide(meta).then((m) => alive && setComponent(() => m.default)).catch((error) => {
+			if (!alive) return;
+			const message = error instanceof Error ? error.message : String(error);
+			if (STALE_BUILD.test(message) && deck.mode !== "presenter" && recoverFromStaleBuild()) return;
+			setFailed(message);
+		});
+		const mm = loadMagic(meta);
+		if (mm) mm.then((m) => alive && setMagic(m.default)).catch(() => {});
+		return () => {
+			alive = false;
+		};
+	}, [meta, deck.mode]);
+	useEffect(() => {
+		if (preview) return;
+		const report = (total) => {
+			const t = options.clicks ?? total;
+			deck.nav.update((s) => setTotal(s, h, v, t));
+		};
+		report(registry.total());
+		return registry.onChange(report);
+	}, [
+		registry,
+		deck.nav,
+		h,
+		v,
+		options.clicks,
+		preview
+	]);
+	useEffect(() => {
+		const el = root.current;
+		if (!el) return;
+		const timers = [];
+		for (const node of el.querySelectorAll("[data-src]")) {
+			const isIframe = node.tagName === "IFRAME";
+			const ahead = prefetch && !preview;
+			if (isIframe && !active && !ahead && frames !== "load" && node.dataset.preload === void 0) continue;
+			const src = node.dataset.src;
+			if (!src || node.getAttribute("src") === src) continue;
+			if (!isIframe) {
+				node.setAttribute("src", src);
+				continue;
+			}
+			const frame = node;
+			if (active && !preview) timers.push(setTimeout(() => startFrame(frame, src), 750));
+			else if (!active && ahead) timers.push(setTimeout(() => startFrameWhenHostIsFree(frame, src, timers), 1500));
+			else if (frames === "load") timers.push(setTimeout(() => startFrame(frame, src), 300 + Math.random() * 2200));
+		}
+		if (preview) return () => timers.forEach(clearTimeout);
+		const media = el.querySelectorAll("video, audio");
+		if (active) {
+			for (const m of media) if (deck.config.autoPlayMedia === true || deck.config.autoPlayMedia !== false && m.dataset.autoplay !== void 0) m.play().catch(() => {});
+		} else {
+			for (const m of media) {
+				if (m.dataset.ignore !== void 0) continue;
+				m.pause();
+				if (m.dataset.autoplay !== void 0) m.currentTime = 0;
+			}
+			if (!prefetch) {
+				for (const f of el.querySelectorAll("iframe[data-src]")) if (f.dataset.preload === void 0 && f.getAttribute("src")) f.removeAttribute("src");
+			}
+		}
+		return () => timers.forEach(clearTimeout);
+	}, [
+		active,
+		preview,
+		frames,
+		prefetch,
+		Component,
+		deck.config.autoPlayMedia
+	]);
+	useEffect(() => {
+		if (!deck.config.autoFit || !Component) return;
+		const host = root.current;
+		if (!host) return;
+		const el = host.querySelector(".deck-layout");
+		if (!el || /deck-layout-(image|iframe|full|none)/.test(el.className)) return;
+		let raf = 0;
+		const fit = () => {
+			el.classList.remove("is-fitted");
+			el.style.removeProperty("--deck-fit");
+			const need = el.scrollHeight;
+			const have = el.clientHeight;
+			if (need > have + 2) {
+				el.style.setProperty("--deck-fit", Math.max(.45, have / need * .985).toFixed(3));
+				el.classList.add("is-fitted");
+			}
+		};
+		const schedule = () => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(fit);
+		};
+		schedule();
+		document.fonts?.ready.then(schedule).catch(() => {});
+		const onLoad = (e) => {
+			if (e.target?.tagName === "IMG") schedule();
+		};
+		host.addEventListener("load", onLoad, true);
+		const ro = new ResizeObserver(schedule);
+		ro.observe(host);
+		return () => {
+			cancelAnimationFrame(raf);
+			host.removeEventListener("load", onLoad, true);
+			ro.disconnect();
+		};
+	}, [
+		Component,
+		click,
+		active,
+		preview,
+		deck.config.autoFit
+	]);
+	const value = useMemo(() => ({
+		meta,
+		options,
+		h,
+		v,
+		active,
+		click,
+		registry,
+		magic,
+		preview,
+		terms
+	}), [
+		meta,
+		options,
+		h,
+		v,
+		active,
+		click,
+		registry,
+		magic,
+		preview,
+		terms
+	]);
+	const Layout = layoutFor(options.layout, deck.components);
+	const stateClasses = options.state.map((s) => `state-${s}`).join(" ");
+	return /* @__PURE__ */ jsx(SlideContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsxs("section", {
+			ref: root,
+			className: [
+				"deck-slide",
+				`layout-${options.layout}`,
+				options.className,
+				stateClasses,
+				className
+			].filter(Boolean).join(" "),
+			"data-h": h,
+			"data-v": v,
+			"data-index": meta.index,
+			"data-id": meta.id,
+			"data-layout": options.layout,
+			"data-active": active ? "true" : void 0,
+			"data-click": click,
+			"data-color-scheme": options.colorScheme ?? void 0,
+			"aria-hidden": active ? void 0 : true,
+			style: {
+				...style,
+				...options.zoom !== 1 ? { zoom: options.zoom } : null
+			},
+			children: [failed ? /* @__PURE__ */ jsxs("div", {
+				className: "deck-slide-error",
+				children: [
+					/* @__PURE__ */ jsxs("strong", { children: [
+						"Slide ",
+						meta.index + 1,
+						" failed to load"
+					] }),
+					/* @__PURE__ */ jsx("pre", { children: failed }),
+					/* @__PURE__ */ jsx("div", {
+						className: "deck-slide-error-actions",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => window.location.reload(),
+							children: "Reload the deck"
+						})
+					})
+				]
+			}) : Component ? /* @__PURE__ */ jsx(SlideBoundary, {
+				index: meta.index,
+				resetKey: Component,
+				children: /* @__PURE__ */ jsx(MDXProvider, { children: /* @__PURE__ */ jsx(Layout, {
+					frontmatter: meta.frontmatter,
+					options,
+					children: /* @__PURE__ */ jsx(Component, { frontmatter: meta.frontmatter })
+				}) })
+			}) : /* @__PURE__ */ jsx("div", { className: "deck-slide-loading" }), children]
+		})
+	});
+}
+//#endregion
+export { SlideFrame, loadMagic, loadSlide };

package/dist/react/Stage.js

@@ -0,0 +1,151 @@
+import { key } from "../core/navigation.js";
+import { useDeck } from "./context.js";
+import { useLayout, useNav } from "./hooks.js";
+import { transitionMs } from "./Backgrounds.js";
+import { SlideFrame } from "./SlideFrame.js";
+import { animateFrom, snapshot } from "./AutoAnimate.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/Stage.tsx
+/**
+* The stage: the authored canvas, scaled to the viewport, holding the slides near the current one.
+* The current slide is `present`; its neighbours are mounted hidden within `viewDistance` so their
+* media is ready; the slide just left stays mounted as `leaving` for the length of the transition.
+* Transitions and directions are CSS classes the base stylesheet animates.
+*/
+function Stage() {
+	const deck = useDeck();
+	const layout = useLayout();
+	const { h, v, click, direction, seq, overview } = useNav((s) => ({
+		h: s.h,
+		v: s.v,
+		click: s.click,
+		direction: s.direction,
+		seq: s.seq,
+		overview: s.overview
+	}));
+	const stageRef = useRef(null);
+	const [leaving, setLeaving] = useState(null);
+	const lastPos = useRef({
+		h,
+		v
+	});
+	const lastClick = useRef(click);
+	const autoSnap = useRef(null);
+	const lastOptions = useRef(deck.options.get(key(h, v)) ?? null);
+	const current = deck.options.get(key(h, v)) ?? null;
+	const transition = current?.transition ?? deck.config.transition;
+	const speed = current?.transitionSpeed ?? deck.config.transitionSpeed;
+	const distance = typeof window !== "undefined" && window.innerWidth < 600 ? deck.config.mobileViewDistance : deck.config.viewDistance;
+	useLayoutEffect(() => {
+		const prev = lastPos.current;
+		if (prev.h === h && prev.v === v) {
+			lastClick.current = click;
+			return;
+		}
+		const leavingClick = lastClick.current;
+		lastClick.current = click;
+		const prevOptions = lastOptions.current;
+		const prevEl = stageRef.current?.querySelector(`.deck-slide[data-h="${prev.h}"][data-v="${prev.v}"]`);
+		const canAuto = deck.config.autoAnimate && prevOptions?.autoAnimate && current?.autoAnimate && (prevOptions.autoAnimateId ?? null) === (current.autoAnimateId ?? null) && Math.abs(prev.h - h) + Math.abs(prev.v - v) === 1;
+		autoSnap.current = canAuto && prevEl ? snapshot(prevEl) : null;
+		setLeaving({
+			h: prev.h,
+			v: prev.v,
+			seq,
+			click: leavingClick
+		});
+		lastPos.current = {
+			h,
+			v
+		};
+		lastOptions.current = current;
+	}, [
+		h,
+		v,
+		click,
+		seq,
+		current,
+		deck.config.autoAnimate
+	]);
+	useEffect(() => {
+		if (!leaving) return;
+		const t = setTimeout(() => setLeaving(null), transitionMs(speed) + 50);
+		return () => clearTimeout(t);
+	}, [leaving, speed]);
+	useEffect(() => {
+		const snap = autoSnap.current;
+		if (!snap) return;
+		autoSnap.current = null;
+		const el = stageRef.current?.querySelector(`.deck-slide[data-h="${h}"][data-v="${v}"]`);
+		if (!el) return;
+		const frame = requestAnimationFrame(() => {
+			animateFrom(snap, el, {
+				duration: current?.autoAnimate ? deck.config.autoAnimateDuration : 0,
+				easing: deck.config.autoAnimateEasing,
+				unmatched: deck.config.autoAnimateUnmatched,
+				scale: layout.scale
+			});
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		h,
+		v,
+		seq
+	]);
+	const frames = [];
+	deck.columns.forEach((col, ch) => {
+		col.slides.forEach((_s, cv) => {
+			const dh = ch - h;
+			if (Math.abs(dh) > distance) return;
+			if (dh !== 0 && cv > 0 && !(leaving && leaving.h === ch && leaving.v === cv)) return;
+			const isPresent = ch === h && cv === v;
+			const isLeaving = !!leaving && leaving.h === ch && leaving.v === cv && !isPresent;
+			if (!isPresent && !isLeaving && ch === h && Math.abs(cv - v) > 1) return;
+			const role = isPresent ? "present" : isLeaving ? "leaving" : dh < 0 ? "past" : dh > 0 ? "future" : cv < v ? "above" : "below";
+			frames.push({
+				h: ch,
+				v: cv,
+				role
+			});
+		});
+	});
+	const autoAnimating = !!leaving && autoSnapWas(leaving, current);
+	const stageStyle = {
+		width: deck.config.width,
+		height: deck.config.height,
+		transform: `translate(${layout.left}px, ${layout.top}px) scale(${layout.scale})`
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: stageRef,
+		className: "deck-stage",
+		style: stageStyle,
+		"data-transition": autoAnimating || seq === 0 ? "none" : transition,
+		"data-speed": speed,
+		"data-direction": direction,
+		"data-overview": overview || void 0,
+		children: frames.map((f) => {
+			const meta = deck.columns[f.h].slides[f.v];
+			const options = deck.options.get(key(f.h, f.v));
+			const isPresent = f.role === "present";
+			const total = deck.nav.get().totals[key(f.h, f.v)] ?? 0;
+			const frameClick = isPresent ? click : f.role === "leaving" ? leaving?.click ?? 0 : f.role === "past" || f.role === "above" ? total : 0;
+			const prefetch = f.role === "below" && f.v === v + 1 || f.role === "future" && f.h === h + 1;
+			return /* @__PURE__ */ jsx(SlideFrame, {
+				meta,
+				options,
+				h: f.h,
+				v: f.v,
+				active: isPresent,
+				click: frameClick,
+				prefetch,
+				className: `is-${f.role}`
+			}, `${f.h},${f.v}`);
+		})
+	});
+}
+function autoSnapWas(_leaving, current) {
+	return !!current?.autoAnimate;
+}
+//#endregion
+export { Stage };

package/dist/react/ThemeMenu.d.ts

@@ -0,0 +1,5 @@
+//#region src/react/ThemeMenu.d.ts
+export declare function ThemeMenu({ compact }: {
+  compact?: boolean;
+}): import("react").JSX.Element;
+//#endregion