@kadal/deck 0.0.0-stage → 0.1.0

package/dist/presenter/index.js

@@ -0,0 +1,1211 @@
+import { roomIdOf } from "../core/model.js";
+import { initialNav, key, next, progressOf } from "../core/navigation.js";
+import { createStore, useStore } from "../core/store.js";
+import { useDeck } from "../react/context.js";
+import { useActions, useCurrentSlide, useNav, useUi } from "../react/hooks.js";
+import { BackgroundLayer } from "../react/Backgrounds.js";
+import { HintLayer } from "../react/Hints.js";
+import { ConfettiLayer } from "../react/ConfettiLayer.js";
+import { ThemeMenu } from "../react/ThemeMenu.js";
+import { Icon } from "../components/bling.js";
+import { useLiveOptional, useRoomStatus } from "../live/context.js";
+import { Pace, Presence, QrJoin } from "../live/components.js";
+import { SlideFrame, loadSlide } from "../react/SlideFrame.js";
+import { Toast } from "../react/chrome.js";
+import { Stage } from "../react/Stage.js";
+import { DrawingLayer } from "../draw/DrawingLayer.js";
+import { copyText, shareLink } from "../live/analytics.js";
+import { PointerLayer } from "../live/LiveProvider.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/presenter/index.tsx
+/**
+* ─────────────────────────────────────────────────────────────────────────────
+* THE PRESENTER VIEW  —  /<slug>/presenter
+* ─────────────────────────────────────────────────────────────────────────────
+*
+* What the speaker sees: the current slide live, the next step, the notes with [click] markers,
+* a timer with pacing, the clock, the drawing and pointer tools, and the room — who is watching,
+* the pace they want, their questions, the polls to open. Opened with `S` from the deck; both
+* windows stay in step through a BroadcastChannel, and the room follows the presenter.
+*
+* Layouts (toggle with L): notes-right (default), notes-left, next-big.
+* ─────────────────────────────────────────────────────────────────────────────
+*/
+function PresenterPage() {
+	const deck = useDeck();
+	const live = useLiveOptional();
+	const gate = usePresenterGate();
+	const [layout, setLayout] = useState(() => {
+		try {
+			return localStorage.getItem("deck.presenter.layout") ?? "notes-right";
+		} catch {
+			return "notes-right";
+		}
+	});
+	const [mirror, setMirror] = useState(false);
+	const [roomOpen, setRoomOpen] = useState(() => {
+		try {
+			return localStorage.getItem("deck.presenter.room") !== "closed";
+		} catch {
+			return true;
+		}
+	});
+	useEffect(() => {
+		try {
+			localStorage.setItem("deck.presenter.layout", layout);
+			localStorage.setItem("deck.presenter.room", roomOpen ? "open" : "closed");
+		} catch {}
+	}, [layout, roomOpen]);
+	useEffect(() => {
+		const onKey = (e) => {
+			if (e.code === "KeyL" && !e.metaKey && !e.ctrlKey) setLayout((l) => l === "notes-right" ? "notes-left" : l === "notes-left" ? "next-big" : "notes-right");
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, []);
+	if (live && gate.required && !gate.ok) return /* @__PURE__ */ jsx(PresenterLogin, { gate });
+	return /* @__PURE__ */ jsxs("div", {
+		className: `deck-presenter layout-${layout} room-${roomOpen ? "open" : "collapsed"}`,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "deck-presenter-bar",
+				children: [
+					/* @__PURE__ */ jsx("strong", { children: deck.config.title }),
+					/* @__PURE__ */ jsx(PresenterTimer, {}),
+					/* @__PURE__ */ jsx(Clock, {}),
+					/* @__PURE__ */ jsx("span", { className: "deck-presenter-spacer" }),
+					/* @__PURE__ */ jsx(PresenterTools, {
+						mirror,
+						setMirror
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("main", {
+				className: "deck-presenter-main",
+				children: [
+					/* @__PURE__ */ jsxs("section", {
+						className: "deck-presenter-current",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "deck-presenter-label",
+							children: "Current"
+						}), mirror ? /* @__PURE__ */ jsx(ScreenMirror, {}) : /* @__PURE__ */ jsx(LiveStage, {})]
+					}),
+					/* @__PURE__ */ jsxs("section", {
+						className: "deck-presenter-next",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "deck-presenter-label",
+							children: "Next"
+						}), /* @__PURE__ */ jsx(NextPreview, {})]
+					}),
+					/* @__PURE__ */ jsxs("section", {
+						className: "deck-presenter-notes",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "deck-presenter-label",
+							children: "Notes"
+						}), /* @__PURE__ */ jsx(NotesPanel, {})]
+					}),
+					/* @__PURE__ */ jsx("aside", {
+						className: "deck-presenter-room",
+						children: /* @__PURE__ */ jsx(RoomPanel, {
+							open: roomOpen,
+							setOpen: setRoomOpen
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Toast, {}),
+			/* @__PURE__ */ jsx(HintLayer, {})
+		]
+	});
+}
+function usePresenterGate() {
+	const deck = useDeck();
+	const api = deck.config.live.api;
+	const [state, setState] = useState({
+		ok: false,
+		required: !!api,
+		checking: !!api,
+		error: null
+	});
+	const url = `${api}/decks/${encodeURIComponent(roomIdOf(deck.config))}/presenter`;
+	useEffect(() => {
+		if (!api) return;
+		let alive = true;
+		fetch(url, { credentials: "include" }).then(async (r) => {
+			const j = await r.json().catch(() => ({}));
+			if (alive) setState({
+				ok: !!j.ok,
+				required: j.required !== false,
+				checking: false,
+				error: null
+			});
+		}).catch(() => alive && setState({
+			ok: true,
+			required: false,
+			checking: false,
+			error: null
+		}));
+		return () => {
+			alive = false;
+		};
+	}, [api, url]);
+	const login = async (passcode) => {
+		setState((s) => ({
+			...s,
+			checking: true,
+			error: null
+		}));
+		const r = await fetch(`${url}/login`, {
+			method: "POST",
+			credentials: "include",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ passcode })
+		});
+		if (r.ok) {
+			setState({
+				ok: true,
+				required: true,
+				checking: false,
+				error: null
+			});
+			window.location.reload();
+		} else setState((s) => ({
+			...s,
+			checking: false,
+			error: r.status === 401 ? "That passcode is wrong." : `The host answered ${r.status}.`
+		}));
+	};
+	return {
+		...state,
+		login
+	};
+}
+function PresenterLogin({ gate }) {
+	const [code, setCode] = useState("");
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-gate",
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				gate.login(code);
+			},
+			children: [
+				/* @__PURE__ */ jsx("h1", { children: "Presenter" }),
+				/* @__PURE__ */ jsx("p", { children: "This deck's presenter view is protected. Enter the passcode set for the deck on the host." }),
+				/* @__PURE__ */ jsx("input", {
+					type: "password",
+					value: code,
+					onChange: (e) => setCode(e.target.value),
+					placeholder: "Passcode",
+					autoFocus: true,
+					disabled: gate.checking
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: gate.checking || !code,
+					children: gate.checking ? "Checking…" : "Open the presenter view"
+				}),
+				gate.error ? /* @__PURE__ */ jsx("p", {
+					className: "deck-gate-error",
+					children: gate.error
+				}) : null
+			]
+		})
+	});
+}
+/** Fit the authored canvas into a box: scale to the shorter side, centre the rest. */
+function useFit(box, width, height) {
+	const [fit, setFit] = useState({
+		scale: .2,
+		left: 0,
+		top: 0
+	});
+	useEffect(() => {
+		const el = box.current;
+		if (!el) return;
+		const measure = () => {
+			const scale = Math.min(el.clientWidth / width, el.clientHeight / height);
+			setFit({
+				scale,
+				left: (el.clientWidth - width * scale) / 2,
+				top: (el.clientHeight - height * scale) / 2
+			});
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		box,
+		width,
+		height
+	]);
+	return fit;
+}
+function LiveStage() {
+	const deck = useDeck();
+	useStore(deck.layout);
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-presenter-stage",
+		children: /* @__PURE__ */ jsx(ScaledStage, {})
+	});
+}
+/** The real stage, scaled into a box: it is the same runtime the audience sees. */
+function ScaledStage() {
+	const deck = useDeck();
+	const live = useLiveOptional();
+	const box = useRef(null);
+	const fit = useFit(box, deck.config.width, deck.config.height);
+	const { h, v } = useNav((s) => ({
+		h: s.h,
+		v: s.v
+	}));
+	const bg = deck.options.get(key(h, v))?.background ?? null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: box,
+		className: "deck-presenter-box",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "deck-presenter-canvas",
+			style: {
+				width: deck.config.width,
+				height: deck.config.height,
+				transform: `translate(${fit.left}px, ${fit.top}px) scale(${fit.scale})`
+			},
+			children: [
+				/* @__PURE__ */ jsx(BackgroundLayer, {
+					bg,
+					active: true
+				}),
+				/* @__PURE__ */ jsx(PresenterInnerStage, {}),
+				live ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DrawingLayer, { inCanvas: true }), /* @__PURE__ */ jsx(PointerLayer, { inCanvas: true })] }) : /* @__PURE__ */ jsx(DrawingLayer, { inCanvas: true }),
+				/* @__PURE__ */ jsx(ConfettiLayer, { inCanvas: true })
+			]
+		})
+	});
+}
+/** The stage without the viewport layout: the presenter box supplies the scale. */
+function PresenterInnerStage() {
+	const deck = useDeck();
+	useEffect(() => {
+		deck.layout.set({
+			scale: 1,
+			width: deck.config.width,
+			height: deck.config.height,
+			left: 0,
+			top: 0
+		});
+	}, [
+		deck.layout,
+		deck.config.width,
+		deck.config.height
+	]);
+	return /* @__PURE__ */ jsx(Stage, {});
+}
+function NextPreview() {
+	const deck = useDeck();
+	const nav = useNav((s) => ({
+		h: s.h,
+		v: s.v,
+		click: s.click,
+		totals: s.totals
+	}));
+	const next$1 = useMemo(() => {
+		const state = {
+			...initialNav(),
+			...nav
+		};
+		const moved = next(state, deck.columns, deck.config);
+		if (moved === state) return null;
+		return {
+			h: moved.h,
+			v: moved.v,
+			click: moved.click,
+			sameSlide: moved.h === nav.h && moved.v === nav.v
+		};
+	}, [
+		nav,
+		deck.columns,
+		deck.config
+	]);
+	const box = useRef(null);
+	const fit = useFit(box, deck.config.width, deck.config.height);
+	if (!next$1) return /* @__PURE__ */ jsx("div", {
+		ref: box,
+		className: "deck-presenter-box is-end",
+		children: /* @__PURE__ */ jsx("span", { children: "End of the deck" })
+	});
+	const meta = deck.columns[next$1.h].slides[next$1.v];
+	const options = deck.options.get(key(next$1.h, next$1.v));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: "deck-presenter-box",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "deck-presenter-canvas",
+			style: {
+				width: deck.config.width,
+				height: deck.config.height,
+				transform: `translate(${fit.left}px, ${fit.top}px) scale(${fit.scale})`
+			},
+			children: [/* @__PURE__ */ jsx(BackgroundLayer, {
+				bg: options.background,
+				active: false
+			}), /* @__PURE__ */ jsx(SlideFrame, {
+				meta,
+				options,
+				h: next$1.h,
+				v: next$1.v,
+				active: false,
+				click: next$1.click,
+				preview: true,
+				className: next$1.sameSlide ? "is-mirror" : "is-tile"
+			}, `${next$1.h},${next$1.v}`)]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "deck-presenter-next-label",
+			children: next$1.sameSlide ? `Step ${next$1.click}` : `Slide ${next$1.h + 1}${next$1.v ? `.${next$1.v + 1}` : ""}${meta.title ? ` · ${meta.title}` : ""}`
+		})]
+	});
+}
+/** Notes, with `[click]` markers splitting them into the segments the clicks reveal. */
+function NotesPanel() {
+	const { meta } = useCurrentSlide();
+	const click = useNav((s) => s.click);
+	const [Notes, setNotes] = useState(null);
+	const root = useRef(null);
+	const [fontSize, setFontSize] = useState(() => {
+		try {
+			return Number(localStorage.getItem("deck.notes.size") ?? 20);
+		} catch {
+			return 20;
+		}
+	});
+	useEffect(() => {
+		let alive = true;
+		setNotes(null);
+		if (!meta?.loadNotes) return;
+		loadSlide(meta);
+		meta.loadNotes().then((m) => alive && setNotes(() => m.default));
+		return () => {
+			alive = false;
+		};
+	}, [meta]);
+	useEffect(() => {
+		const el = root.current;
+		if (!el) return;
+		const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+		const nodes = [];
+		while (walker.nextNode()) nodes.push(walker.currentNode);
+		let segment = 0;
+		for (const node of nodes) {
+			if (!node.data.includes("[click]")) {
+				wrap(node, segment);
+				continue;
+			}
+			const parts = node.data.split("[click]");
+			const frag = document.createDocumentFragment();
+			parts.forEach((p, i) => {
+				if (i > 0) {
+					segment++;
+					const marker = document.createElement("span");
+					marker.className = "deck-click-marker";
+					marker.dataset.segment = String(segment);
+					marker.textContent = String(segment);
+					frag.appendChild(marker);
+				}
+				if (p) {
+					const span = document.createElement("span");
+					span.className = "deck-notes-segment";
+					span.dataset.segment = String(segment);
+					span.textContent = p;
+					frag.appendChild(span);
+				}
+			});
+			node.replaceWith(frag);
+		}
+		function wrap(n, seg) {
+			if (!n.data.trim() || n.parentElement?.classList.contains("deck-notes-segment")) return;
+			const span = document.createElement("span");
+			span.className = "deck-notes-segment";
+			span.dataset.segment = String(seg);
+			n.replaceWith(span);
+			span.appendChild(n);
+		}
+	}, [Notes]);
+	useEffect(() => {
+		const el = root.current;
+		if (!el) return;
+		for (const s of el.querySelectorAll("[data-segment]")) {
+			const seg = Number(s.dataset.segment);
+			s.classList.toggle("is-current", seg === click);
+			s.classList.toggle("is-past", seg < click);
+		}
+		el.querySelector(`.deck-notes-segment.is-current`)?.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [click, Notes]);
+	useEffect(() => {
+		try {
+			localStorage.setItem("deck.notes.size", String(fontSize));
+		} catch {}
+	}, [fontSize]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-notes-panel",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "deck-notes-tools",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setFontSize((s) => Math.max(12, s - 2)),
+				"aria-label": "Smaller notes",
+				children: "A−"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setFontSize((s) => Math.min(48, s + 2)),
+				"aria-label": "Larger notes",
+				children: "A+"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: root,
+			className: "deck-notes-body",
+			style: { fontSize },
+			children: Notes ? /* @__PURE__ */ jsx(Notes, {}) : /* @__PURE__ */ jsx("p", {
+				className: "deck-muted",
+				children: "No notes for this slide."
+			})
+		})]
+	});
+}
+function pad(n) {
+	return String(n).padStart(2, "0");
+}
+/** Elapsed time since the view opened, with pacing against `defaultTiming` or `totalTime`. */
+function PresenterTimer() {
+	const deck = useDeck();
+	/**
+	* Kept for the life of this TAB, not this page load, so reloading — to pick up a new build, or
+	* to get past a slide that would not load — does not quietly set the talk back to zero. A new
+	* window is a new talk and starts again, which is what sessionStorage already means.
+	*/
+	const startKey = `deck.presenter.start.${deck.config.slug || "deck"}`;
+	const [start, setStart] = useState(() => {
+		try {
+			const saved = Number(sessionStorage.getItem(startKey));
+			if (saved > 0) return saved;
+			sessionStorage.setItem(startKey, String(Date.now()));
+		} catch {}
+		return Date.now();
+	});
+	/** Reset writes through, or a reload would bring the old start back. */
+	const restart = (at) => {
+		try {
+			sessionStorage.setItem(startKey, String(at));
+		} catch {}
+		setStart(at);
+	};
+	const [now, setNow] = useState(Date.now());
+	const nav = useNav((s) => ({
+		h: s.h,
+		v: s.v
+	}));
+	useEffect(() => {
+		const t = setInterval(() => setNow(Date.now()), 500);
+		return () => clearInterval(t);
+	}, []);
+	const elapsed = Math.floor((now - start) / 1e3);
+	const total = deck.columns.reduce((n, c) => n + c.slides.length, 0);
+	const flat = progressOf({
+		...initialNav(),
+		...nav
+	}, deck.columns) * (total - 1);
+	let expected = null;
+	if (deck.config.totalTime) expected = deck.config.totalTime / total * flat;
+	else if (deck.config.defaultTiming) {
+		let sum = 0;
+		let i = 0;
+		for (const c of deck.columns) for (let v = 0; v < c.slides.length; v++) {
+			if (i >= flat) break;
+			sum += deck.options.get(key(c.h, v))?.timing ?? deck.config.defaultTiming;
+			i++;
+		}
+		expected = sum;
+	}
+	const pace = expected === null ? null : elapsed - expected;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: ["deck-presenter-timer", pace === null ? "" : pace > 30 ? "is-behind" : pace < -30 ? "is-ahead" : "is-ok"].join(" "),
+		onClick: () => restart(Date.now()),
+		title: "Click to reset",
+		children: [
+			pad(Math.floor(elapsed / 3600)),
+			":",
+			pad(Math.floor(elapsed % 3600 / 60)),
+			":",
+			pad(elapsed % 60),
+			pace !== null ? /* @__PURE__ */ jsx("small", { children: pace > 0 ? `+${Math.round(pace / 60)}m` : `${Math.round(pace / 60)}m` }) : null
+		]
+	});
+}
+function Clock() {
+	const [now, setNow] = useState(/* @__PURE__ */ new Date());
+	useEffect(() => {
+		const t = setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
+		return () => clearInterval(t);
+	}, []);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "deck-presenter-clock",
+		children: [
+			pad(now.getHours()),
+			":",
+			pad(now.getMinutes())
+		]
+	});
+}
+function PresenterTools({ mirror, setMirror }) {
+	const deck = useDeck();
+	const actions = useActions();
+	const live = useLiveOptional();
+	const ui = useUi((s) => ({
+		drawing: s.drawing,
+		pointer: s.pointer,
+		spotlight: s.spotlight,
+		scheme: s.colorScheme,
+		termSync: s.termSync,
+		projectorOpen: s.projectorOpen
+	}));
+	const paused = useNav((s) => s.paused);
+	const notesPublic = useStore(live?.client.state ?? noStore, (s) => s ? s.notesPublic : false);
+	const started = useStore(live?.client.state ?? noStore, (s) => s ? s.startedAt : null);
+	const [rec, setRec] = useState(null);
+	const [camera, setCamera] = useState(false);
+	const toggle = (key) => deck.ui.update((s) => ({
+		...s,
+		[key]: !s[key]
+	}));
+	const record = async () => {
+		if (rec) {
+			rec.stop();
+			setRec(null);
+			return;
+		}
+		try {
+			const screen = await navigator.mediaDevices.getDisplayMedia({
+				video: true,
+				audio: true
+			});
+			let mic = null;
+			try {
+				mic = await navigator.mediaDevices.getUserMedia({ audio: true });
+			} catch {
+				mic = null;
+			}
+			const tracks = [
+				...screen.getVideoTracks(),
+				...screen.getAudioTracks(),
+				...mic?.getAudioTracks() ?? []
+			];
+			const stream = new MediaStream(tracks);
+			const r = new MediaRecorder(stream, { mimeType: MediaRecorder.isTypeSupported("video/webm;codecs=vp9") ? "video/webm;codecs=vp9" : "video/webm" });
+			const chunks = [];
+			r.ondataavailable = (e) => e.data.size && chunks.push(e.data);
+			r.onstop = () => {
+				for (const t of tracks) t.stop();
+				const blob = new Blob(chunks, { type: "video/webm" });
+				const a = document.createElement("a");
+				a.href = URL.createObjectURL(blob);
+				a.download = `${deck.config.slug || "deck"}-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 16).replace(/[:T]/g, "-")}.webm`;
+				a.click();
+			};
+			r.start(1e3);
+			setRec(r);
+		} catch {
+			actions.toast("Recording was not allowed");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-presenter-tools",
+		role: "toolbar",
+		children: [
+			/* @__PURE__ */ jsx(ThemeMenu, { compact: true }),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: ui.drawing ? "is-on" : "",
+				onClick: () => toggle("drawing"),
+				title: "Draw (C)",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "pencil" }), " Draw"]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: ui.pointer ? "is-on" : "",
+				onClick: () => toggle("pointer"),
+				title: "Laser pointer (X)",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "mouse-pointer-2" }), " Pointer"]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: ui.spotlight ? "is-on" : "",
+				onClick: () => toggle("spotlight"),
+				title: "Spotlight follows the pointer",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "flashlight" }), " Spotlight"]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: paused ? "is-on" : "",
+				onClick: () => actions.togglePause(),
+				title: "Black out the audience screen (B)",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "monitor-off" }), " Blackout"]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.toggleColorScheme(),
+				title: "Dark or light (D)",
+				"aria-label": "Dark or light",
+				children: /* @__PURE__ */ jsx(Icon, { name: ui.scheme === "dark" ? "moon" : "sun" })
+			}),
+			live ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: notesPublic ? "is-on" : "",
+					onClick: () => live.client.send({
+						type: "notes:public",
+						on: !notesPublic
+					}),
+					title: "Let the audience page show your notes",
+					children: [/* @__PURE__ */ jsx(Icon, { name: "notebook-text" }), " Share notes"]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: ui.termSync ? "is-on" : "",
+					onClick: () => actions.toggleTermSync(),
+					title: "Definitions you open on a term also open on every screen",
+					children: [/* @__PURE__ */ jsx(Icon, { name: "book-open-text" }), " Share terms"]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						live.client.send({ type: "confetti" });
+						window.dispatchEvent(new CustomEvent("deck:confetti"));
+					},
+					title: "Confetti on every screen",
+					children: [/* @__PURE__ */ jsx(Icon, { name: "party-popper" }), " Confetti"]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: started ? "is-on" : "",
+					onClick: () => live.client.send({
+						type: "session",
+						action: started ? "end" : "start"
+					}),
+					title: "Mark the session for the stats",
+					children: [
+						/* @__PURE__ */ jsx(Icon, { name: started ? "radio" : "play" }),
+						" ",
+						started ? "Live" : "Start session"
+					]
+				})
+			] }) : null,
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: ui.projectorOpen ? "is-on" : "",
+				onClick: () => actions.toggleProjector(),
+				title: "A window showing nothing but this deck, following you — share THAT window on a call",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "projector" }), " Share window"]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: camera ? "is-on" : "",
+				onClick: () => setCamera((c) => !c),
+				title: "Camera view",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "video" }), " Camera"]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: rec ? "is-on is-rec" : "",
+				onClick: record,
+				title: "Record the screen",
+				children: [
+					/* @__PURE__ */ jsx(Icon, { name: rec ? "square" : "circle" }),
+					" ",
+					rec ? "Stop" : "Record"
+				]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: mirror ? "is-on" : "",
+				onClick: () => setMirror(!mirror),
+				title: "Mirror a screen or window here",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "screen-share" }), " Mirror"]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: async () => {
+					const n = deck.nav.get();
+					const url = await shareLink(deck.config.live.api, roomIdOf(deck.config), deck.base, {
+						h: n.h,
+						v: n.v,
+						click: n.click
+					});
+					actions.toast(await copyText(url) ? `Copied ${url}` : url);
+				},
+				title: "Copy a short link to this slide",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "link" }), " Link"]
+			}),
+			/* @__PURE__ */ jsxs("a", {
+				className: "deck-presenter-link",
+				href: `${deck.base}stats`,
+				target: "_blank",
+				rel: "noreferrer",
+				children: [/* @__PURE__ */ jsx(Icon, { name: "chart-column" }), " Stats"]
+			}),
+			camera ? /* @__PURE__ */ jsx(CameraView, { onClose: () => setCamera(false) }) : null
+		]
+	});
+}
+const noStore = createStore(null);
+/** A draggable camera window (Slidev's camera view), for recording with a face. */
+function CameraView({ onClose }) {
+	const video = useRef(null);
+	const [pos, setPos] = useState({
+		x: 24,
+		y: 80
+	});
+	useEffect(() => {
+		let stream = null;
+		navigator.mediaDevices.getUserMedia({
+			video: {
+				width: 640,
+				height: 480
+			},
+			audio: false
+		}).then((s) => {
+			stream = s;
+			if (video.current) video.current.srcObject = s;
+		}).catch(() => onClose());
+		return () => stream?.getTracks().forEach((t) => t.stop());
+	}, [onClose]);
+	const drag = (e) => {
+		const start = {
+			x: e.clientX - pos.x,
+			y: e.clientY - pos.y
+		};
+		const move = (ev) => setPos({
+			x: ev.clientX - start.x,
+			y: ev.clientY - start.y
+		});
+		const up = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-camera",
+		style: {
+			left: pos.x,
+			top: pos.y
+		},
+		onPointerDown: drag,
+		children: [/* @__PURE__ */ jsx("video", {
+			ref: video,
+			autoPlay: true,
+			muted: true,
+			playsInline: true
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onClose,
+			"aria-label": "Close camera",
+			children: "×"
+		})]
+	});
+}
+/** Show another screen or window inside the presenter view (Slidev's screen mirror). */
+function ScreenMirror() {
+	const video = useRef(null);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		let stream = null;
+		navigator.mediaDevices.getDisplayMedia({
+			video: true,
+			audio: false
+		}).then((s) => {
+			stream = s;
+			if (video.current) video.current.srcObject = s;
+		}).catch(() => setError("Mirroring was not allowed"));
+		return () => stream?.getTracks().forEach((t) => t.stop());
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-presenter-box",
+		children: error ? /* @__PURE__ */ jsx("span", { children: error }) : /* @__PURE__ */ jsx("video", {
+			ref: video,
+			autoPlay: true,
+			muted: true,
+			playsInline: true,
+			style: {
+				width: "100%",
+				height: "100%",
+				objectFit: "contain"
+			}
+		})
+	});
+}
+/** The room: join code, who is watching, pace, questions, the polls and quizzes on the deck. */
+function RoomPanel({ open, setOpen }) {
+	const live = useLiveOptional();
+	const status = useRoomStatus();
+	const state = useStore(live?.client.state ?? noStore, (s) => s);
+	const [tab, setTab] = useState("room");
+	if (!live) return /* @__PURE__ */ jsx("div", {
+		className: "deck-room-panel",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "deck-muted",
+			children: "This deck is not connected to a host, so there is no live room. Presenting still works on this screen."
+		})
+	});
+	const questions = [...state?.questions ?? []].sort((a, b) => Number(a.answered) - Number(b.answered) || b.votes - a.votes);
+	const counts = {
+		room: state?.presence.hands ?? 0,
+		questions: questions.filter((q) => !q.answered).length,
+		polls: Object.values(state?.polls ?? {}).filter((p) => p.open).length + Object.values(state?.quizzes ?? {}).filter((q) => q.open).length
+	};
+	const icons = {
+		room: "users",
+		questions: "message-square",
+		polls: "chart-bar"
+	};
+	if (!open) return /* @__PURE__ */ jsxs("div", {
+		className: "deck-room-panel is-rail",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "deck-room-toggle",
+				onClick: () => setOpen(true),
+				title: "Open the room panel",
+				"aria-label": "Open the room panel",
+				children: /* @__PURE__ */ jsx(Icon, { name: "panel-right-open" })
+			}),
+			[
+				"room",
+				"questions",
+				"polls"
+			].map((t) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: ["deck-room-rail-item", tab === t ? "is-on" : ""].join(" "),
+				onClick: () => {
+					setTab(t);
+					setOpen(true);
+				},
+				title: `${t[0].toUpperCase()}${t.slice(1)}${counts[t] ? ` · ${counts[t]}` : ""}`,
+				"aria-label": t,
+				children: [/* @__PURE__ */ jsx(Icon, { name: icons[t] }), counts[t] ? /* @__PURE__ */ jsx("em", { children: counts[t] }) : null]
+			}, t)),
+			/* @__PURE__ */ jsx("span", {
+				className: ["deck-room-dot", `is-${status}`].join(" "),
+				title: status
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-room-panel",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "deck-room-tabs",
+				children: [
+					[
+						"room",
+						"questions",
+						"polls"
+					].map((t) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: tab === t ? "is-on" : "",
+						onClick: () => setTab(t),
+						children: [t, counts[t] ? /* @__PURE__ */ jsx("em", { children: counts[t] }) : null]
+					}, t)),
+					/* @__PURE__ */ jsx("span", {
+						className: ["deck-room-status", `is-${status}`].join(" "),
+						children: status
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "deck-room-toggle",
+						onClick: () => setOpen(false),
+						title: "Collapse the room panel",
+						"aria-label": "Collapse the room panel",
+						children: /* @__PURE__ */ jsx(Icon, { name: "panel-right-close" })
+					})
+				]
+			}),
+			tab === "room" ? /* @__PURE__ */ jsxs("div", {
+				className: "deck-room-body",
+				children: [
+					/* @__PURE__ */ jsx(QrJoin, {
+						size: 160,
+						caption: ""
+					}),
+					/* @__PURE__ */ jsx(Presence, {}),
+					/* @__PURE__ */ jsx(Pace, {}),
+					/* @__PURE__ */ jsx(ReactionTotals, { totals: state?.reactions ?? {} })
+				]
+			}) : null,
+			tab === "questions" ? /* @__PURE__ */ jsx("ul", {
+				className: "deck-room-questions",
+				children: questions.length ? questions.map((q) => /* @__PURE__ */ jsxs("li", {
+					className: q.answered ? "is-answered" : "",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "deck-question-votes",
+							children: ["▲ ", q.votes]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "deck-question-text",
+							children: q.text
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "deck-question-actions",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => live.client.send({
+									type: "qa:answered",
+									id: q.id,
+									answered: !q.answered
+								}),
+								children: q.answered ? "reopen" : "answered"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => live.client.send({
+									type: "qa:delete",
+									id: q.id
+								}),
+								children: "delete"
+							})]
+						})
+					]
+				}, q.id)) : /* @__PURE__ */ jsx("li", {
+					className: "deck-muted",
+					children: "No questions yet."
+				})
+			}) : null,
+			tab === "polls" ? /* @__PURE__ */ jsxs("ul", {
+				className: "deck-room-polls",
+				children: [[...Object.values(state?.polls ?? {}).map((p) => ({
+					kind: "poll",
+					id: p.def.id,
+					q: p.def.question,
+					open: p.open,
+					n: p.total
+				})), ...Object.values(state?.quizzes ?? {}).map((q) => ({
+					kind: "quiz",
+					id: q.def.id,
+					q: q.def.question,
+					open: q.open,
+					n: q.counts.reduce((a, b) => a + b, 0)
+				}))].map((p) => /* @__PURE__ */ jsxs("li", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "deck-poll-kind",
+						children: p.kind
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "deck-question-text",
+						children: p.q
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "deck-muted",
+						children: p.n
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => live.client.send(p.kind === "poll" ? {
+							type: "poll:open",
+							id: p.id,
+							open: !p.open
+						} : {
+							type: "quiz:open",
+							id: p.id,
+							open: !p.open
+						}),
+						children: p.open ? "close" : "open"
+					})
+				] }, `${p.kind}:${p.id}`)), !Object.keys(state?.polls ?? {}).length && !Object.keys(state?.quizzes ?? {}).length ? /* @__PURE__ */ jsx("li", {
+					className: "deck-muted",
+					children: "Polls and quizzes register when their slide is shown."
+				}) : null]
+			}) : null
+		]
+	});
+}
+function ReactionTotals({ totals }) {
+	const entries = Object.entries(totals).sort((a, b) => b[1] - a[1]);
+	if (!entries.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-reaction-totals",
+		children: entries.map(([e, n]) => /* @__PURE__ */ jsxs("span", { children: [
+			e,
+			" ",
+			n
+		] }, e))
+	});
+}
+function NotesPage() {
+	const deck = useDeck();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-notes-page",
+		children: [/* @__PURE__ */ jsxs("h1", { children: [deck.config.title, " — notes"] }), deck.columns.flatMap((c) => c.slides.map((meta, v) => /* @__PURE__ */ jsx(NotesEntry, {
+			meta,
+			label: `${c.h + 1}${v ? `.${v + 1}` : ""}`,
+			href: `${deck.base}#/${c.h}${v ? `/${v}` : ""}`
+		}, `${c.h},${v}`)))]
+	});
+}
+function NotesEntry({ meta, label, href }) {
+	const [Notes, setNotes] = useState(null);
+	useEffect(() => {
+		let alive = true;
+		meta.loadNotes?.().then((m) => alive && setNotes(() => m.default));
+		return () => {
+			alive = false;
+		};
+	}, [meta]);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "deck-notes-entry",
+		children: [/* @__PURE__ */ jsx("h2", { children: /* @__PURE__ */ jsxs("a", {
+			href,
+			children: [
+				label,
+				" ",
+				meta.title ?? ""
+			]
+		}) }), Notes ? /* @__PURE__ */ jsx(Notes, {}) : /* @__PURE__ */ jsx("p", {
+			className: "deck-muted",
+			children: "—"
+		})]
+	});
+}
+function StatsPage() {
+	const deck = useDeck();
+	const api = deck.config.live.api;
+	const [stats, setStats] = useState(null);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		if (!api) return;
+		fetch(`${api}/decks/${encodeURIComponent(roomIdOf(deck.config))}/stats`, { credentials: "include" }).then(async (r) => r.ok ? setStats(await r.json()) : setError(r.status === 401 ? "Sign in on the presenter page first." : `The host answered ${r.status}.`)).catch((e) => setError(String(e)));
+	}, [api, deck.config]);
+	if (!api) return /* @__PURE__ */ jsx("div", {
+		className: "deck-stats-page",
+		children: "This deck has no host, so there are no stats."
+	});
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "deck-stats-page",
+		children: error
+	});
+	if (!stats) return /* @__PURE__ */ jsx("div", {
+		className: "deck-stats-page",
+		children: "Loading…"
+	});
+	const maxDwell = Math.max(1, ...stats.slides.map((s) => s.dwellMs));
+	const titleOf = (slide) => {
+		const [h, v] = slide.split(",").map(Number);
+		return deck.columns[h]?.slides[v]?.title ?? "";
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-stats-page",
+		children: [
+			/* @__PURE__ */ jsxs("h1", { children: [deck.config.title, " — stats"] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "deck-stats-cards",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: stats.views }), /* @__PURE__ */ jsx("span", { children: "views" })] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: stats.viewers }), /* @__PURE__ */ jsx("span", { children: "distinct viewers" })] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: stats.sessions.length }), /* @__PURE__ */ jsx("span", { children: "live sessions" })] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: stats.questions.length }), /* @__PURE__ */ jsx("span", { children: "questions asked" })] })
+				]
+			}),
+			/* @__PURE__ */ jsx("h2", { children: "Time per slide" }),
+			/* @__PURE__ */ jsx("table", {
+				className: "deck-stats-table",
+				children: /* @__PURE__ */ jsx("tbody", { children: stats.slides.map((s) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsxs("td", {
+						className: "deck-stats-slide",
+						children: [
+							s.slide.replace(",0", "").replace(",", "."),
+							" ",
+							titleOf(s.slide)
+						]
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "deck-stats-bar",
+						children: /* @__PURE__ */ jsx("i", { style: { width: `${s.dwellMs / maxDwell * 100}%` } })
+					}),
+					/* @__PURE__ */ jsxs("td", {
+						className: "deck-stats-num",
+						children: [Math.round(s.dwellMs / 1e3), "s"]
+					}),
+					/* @__PURE__ */ jsxs("td", {
+						className: "deck-stats-num",
+						children: [s.views, " views"]
+					})
+				] }, s.slide)) })
+			}),
+			/* @__PURE__ */ jsx("h2", { children: "Sessions" }),
+			/* @__PURE__ */ jsx("table", {
+				className: "deck-stats-table",
+				children: /* @__PURE__ */ jsxs("tbody", { children: [stats.sessions.map((s) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("td", { children: new Date(s.startedAt).toLocaleString() }),
+					/* @__PURE__ */ jsx("td", {
+						className: "deck-stats-num",
+						children: s.endedAt ? `${Math.round((s.endedAt - s.startedAt) / 6e4)} min` : "live"
+					}),
+					/* @__PURE__ */ jsxs("td", {
+						className: "deck-stats-num",
+						children: ["peak ", s.peak]
+					}),
+					/* @__PURE__ */ jsxs("td", {
+						className: "deck-stats-num",
+						children: [s.questions, " questions"]
+					}),
+					/* @__PURE__ */ jsxs("td", {
+						className: "deck-stats-num",
+						children: [s.reactions, " reactions"]
+					})
+				] }, s.id)), !stats.sessions.length ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					className: "deck-muted",
+					children: "No live session yet — press “Start session” in the presenter view."
+				}) }) : null] })
+			}),
+			/* @__PURE__ */ jsx("h2", { children: "Reactions" }),
+			/* @__PURE__ */ jsx(ReactionTotals, { totals: stats.reactions }),
+			/* @__PURE__ */ jsx("h2", { children: "Questions" }),
+			/* @__PURE__ */ jsx("ul", {
+				className: "deck-room-questions",
+				children: stats.questions.map((q, i) => /* @__PURE__ */ jsxs("li", {
+					className: q.answered ? "is-answered" : "",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "deck-question-votes",
+						children: ["▲ ", q.votes]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "deck-question-text",
+						children: q.text
+					})]
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("h2", { children: "Exports" }),
+			/* @__PURE__ */ jsxs("ul", {
+				className: "deck-stats-exports",
+				children: [stats.exports.map((e) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+					href: `${api}/decks/${encodeURIComponent(roomIdOf(deck.config))}/exports/${encodeURIComponent(e.key)}`,
+					children: [
+						e.kind,
+						" · ",
+						new Date(e.at).toLocaleString(),
+						" · ",
+						Math.round(e.size / 1024),
+						" KB"
+					]
+				}) }, e.key)), !stats.exports.length ? /* @__PURE__ */ jsx("li", {
+					className: "deck-muted",
+					children: "Run `bun run export --upload` in the deck to archive a PDF here."
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { NotesPage, NotesPanel, PresenterPage, StatsPage };