@kadal/deck 0.0.0-stage → 0.1.0

package/dist/audience/index.js

@@ -0,0 +1,680 @@
+import { roomIdOf } from "../core/model.js";
+import { key, next, prev } from "../core/navigation.js";
+import { createStore, useStore } from "../core/store.js";
+import { createSwipeTracker } from "../core/touch.js";
+import { useDeck } from "../react/context.js";
+import { useActions, useNav } from "../react/hooks.js";
+import { BackgroundLayer } from "../react/Backgrounds.js";
+import { ConfettiLayer } from "../react/ConfettiLayer.js";
+import { ThemeMenu } from "../react/ThemeMenu.js";
+import { closeTerm } from "../react/terms.js";
+import { Icon } from "../components/bling.js";
+import { TermReadout } from "../components/Term.js";
+import { useLiveOptional, useRoomStatus } from "../live/context.js";
+import { EMPTY_ROOM, REACTIONS } from "../live/protocol.js";
+import { Poll, Quiz, nickname } from "../live/components.js";
+import { SlideFrame, loadSlide } from "../react/SlideFrame.js";
+import { DrawingLayer } from "../draw/DrawingLayer.js";
+import { copyText, shareLink } from "../live/analytics.js";
+import { PointerLayer, slideLabel } from "../live/LiveProvider.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/audience/index.tsx
+const noRoom = createStore(EMPTY_ROOM);
+/**
+* ─────────────────────────────────────────────────────────────────────────────
+* THE AUDIENCE PAGE  —  /<slug>/join
+* ─────────────────────────────────────────────────────────────────────────────
+*
+* What a phone shows after scanning the code: the slide the presenter is on (the real slide,
+* scaled), the reactions, an ask box with upvotes, whatever poll or quiz is open, pace buttons,
+* a raised hand, the presenter's notes when shared, and bookmarks kept on the phone. Nothing
+* requires an account; a nickname is optional and only used for the quiz leaderboard.
+* ─────────────────────────────────────────────────────────────────────────────
+*/
+function AudiencePage() {
+	const deck = useDeck();
+	const live = useLiveOptional();
+	const status = useRoomStatus();
+	const room = useStore(live?.client.state ?? noRoom);
+	const [name, setName] = useState(nickname());
+	const [tab, setTab] = useState("follow");
+	const [question, setQuestion] = useState("");
+	const [pace, setPace] = useState(0);
+	const [hand, setHand] = useState(false);
+	const [bookmarks, setBookmarks] = useState(() => {
+		try {
+			return JSON.parse(localStorage.getItem(`deck.bookmarks.${deck.config.slug}`) ?? "[]");
+		} catch {
+			return [];
+		}
+	});
+	const [mine, setMine] = useState(/* @__PURE__ */ new Set());
+	const [voted, setVoted] = useState(/* @__PURE__ */ new Set());
+	const [flash, setFlash] = useState([]);
+	const [toast, setToast] = useState(null);
+	const [expanded, setExpanded] = useState(false);
+	const collapse = useCallback(() => setExpanded(false), []);
+	useEffect(() => {
+		try {
+			localStorage.setItem("deck.name", name);
+		} catch {}
+	}, [name]);
+	useEffect(() => {
+		try {
+			localStorage.setItem(`deck.bookmarks.${deck.config.slug}`, JSON.stringify(bookmarks));
+		} catch {}
+	}, [bookmarks, deck.config.slug]);
+	useEffect(() => {
+		if (!live) return;
+		return live.client.on((m) => {
+			if (m.type === "react") {
+				const id = Date.now() + Math.random();
+				setFlash((f) => [...f.slice(-12), {
+					id,
+					emoji: m.emoji
+				}]);
+				setTimeout(() => setFlash((f) => f.filter((x) => x.id !== id)), 1500);
+			}
+		});
+	}, [live]);
+	const actions = useActions();
+	const pos = useNav((s) => ({
+		h: s.h,
+		v: s.v,
+		click: s.click,
+		follow: s.follow,
+		presenter: s.presenter
+	}));
+	const presenting = room.presence.presenter;
+	const browse = useBrowse(() => setExpanded(true));
+	const here = deck.nav.get();
+	const canPrev = prev(here, deck.columns, deck.config) !== here;
+	const canNext = next(here, deck.columns, deck.config) !== here;
+	const meta = deck.columns[pos.h]?.slides[pos.v] ?? null;
+	const options = meta ? deck.options.get(key(pos.h, pos.v)) : null;
+	const slideKey = key(pos.h, pos.v);
+	useEffect(() => closeTerm(deck, "local"), [
+		deck,
+		pos.h,
+		pos.v,
+		pos.click
+	]);
+	const openPolls = Object.values(room.polls).filter((p) => p.open);
+	const openQuizzes = Object.values(room.quizzes).filter((q) => q.open || q.revealed);
+	const questions = [...room.questions].sort((a, b) => Number(a.answered) - Number(b.answered) || b.votes - a.votes || a.at - b.at);
+	const react = (emoji) => {
+		live?.client.send({
+			type: "react",
+			emoji
+		});
+		if (navigator.vibrate) navigator.vibrate(10);
+	};
+	const ask = () => {
+		const text = question.trim();
+		if (!text || !live) return;
+		live.client.send({
+			type: "qa:ask",
+			text,
+			slide: slideKey
+		});
+		setQuestion("");
+		setTab("ask");
+	};
+	const vote = (id) => {
+		if (voted.has(id) || !live) return;
+		live.client.send({
+			type: "qa:vote",
+			id
+		});
+		setVoted((v) => new Set(v).add(id));
+	};
+	const setPaceValue = (v) => {
+		const next = pace === v ? 0 : v;
+		setPace(next);
+		live?.client.send({
+			type: "pace",
+			value: next
+		});
+	};
+	const toggleHand = () => {
+		setHand((h) => {
+			live?.client.send({
+				type: "hand",
+				up: !h
+			});
+			return !h;
+		});
+	};
+	const bookmark = () => setBookmarks((b) => b.includes(slideKey) ? b.filter((k) => k !== slideKey) : [...b, slideKey]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-audience",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "deck-audience-head",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: deck.config.title }), /* @__PURE__ */ jsx("span", {
+						className: ["deck-audience-status", `is-${status}`].join(" "),
+						children: status === "open" ? room.presence.presenter ? "live" : "waiting for the presenter" : status
+					})] }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "deck-audience-count",
+						children: [room.presence.viewers, " here"]
+					}),
+					/* @__PURE__ */ jsx(ThemeMenu, { compact: true })
+				]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "deck-audience-slide",
+				children: [
+					meta && options ? /* @__PURE__ */ jsxs("div", {
+						className: "deck-audience-tap",
+						"data-term-cards": "off",
+						...browse,
+						children: [
+							/* @__PURE__ */ jsx(AudienceSlide, {
+								meta,
+								options,
+								h: pos.h,
+								v: pos.v,
+								click: pos.click,
+								bg: options.background
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "deck-audience-step is-prev",
+								onClick: () => actions.prev(),
+								disabled: !canPrev,
+								"aria-label": "Back",
+								children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "deck-audience-step is-next",
+								onClick: () => actions.next(),
+								disabled: !canNext,
+								"aria-label": "Forward",
+								children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" })
+							})
+						]
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "deck-audience-empty",
+						children: "The deck will appear here when it starts."
+					}),
+					presenting && !pos.follow ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "deck-audience-follow",
+						onClick: () => actions.setFollow(true),
+						children: [
+							/* @__PURE__ */ jsx(Icon, { name: "play" }),
+							/* @__PURE__ */ jsx("span", { children: "Follow the presenter" }),
+							pos.presenter ? /* @__PURE__ */ jsxs("small", { children: ["they are on ", slideLabel(deck, pos.presenter.h, pos.presenter.v)] }) : null
+						]
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "deck-audience-slide-bar",
+						children: [
+							/* @__PURE__ */ jsxs("span", { children: [
+								"Slide ",
+								pos.h + 1,
+								pos.v ? `.${pos.v + 1}` : "",
+								" of",
+								" ",
+								deck.columns.reduce((n, c) => n + c.slides.length, 0)
+							] }),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: bookmarks.includes(slideKey) ? "is-on" : "",
+								onClick: bookmark,
+								"aria-label": "Bookmark this slide",
+								children: /* @__PURE__ */ jsx(Icon, { name: bookmarks.includes(slideKey) ? "bookmark-check" : "bookmark" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "deck-audience-share",
+								onClick: async () => {
+									const url = await shareLink(deck.config.live.api, roomIdOf(deck.config), deck.base, {
+										h: pos.h,
+										v: pos.v
+									});
+									setToast(await copyText(url) ? "Link copied" : url);
+									setTimeout(() => setToast(null), 2e3);
+								},
+								"aria-label": "Copy a link to this slide",
+								children: /* @__PURE__ */ jsx(Icon, { name: "link" })
+							}),
+							toast ? /* @__PURE__ */ jsx("span", {
+								className: "deck-audience-toast",
+								children: toast
+							}) : null,
+							/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "deck-audience-expand",
+								onClick: () => setExpanded(true),
+								disabled: !meta,
+								"aria-label": "Expand the slide to full screen",
+								children: [/* @__PURE__ */ jsx(Icon, { name: "maximize-2" }), " Expand"]
+							}),
+							/* @__PURE__ */ jsxs("a", {
+								href: `${deck.base}?at#/${pos.h}${pos.v ? `/${pos.v}` : ""}`,
+								target: "_blank",
+								rel: "noreferrer",
+								children: ["Open full ", /* @__PURE__ */ jsx(Icon, { name: "external-link" })]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(TermReadout, {}),
+					/* @__PURE__ */ jsx("div", {
+						className: "deck-audience-flash",
+						"aria-hidden": true,
+						children: flash.map((f) => /* @__PURE__ */ jsx("span", { children: f.emoji }, f.id))
+					})
+				]
+			}),
+			expanded && meta && options ? /* @__PURE__ */ jsx(FullMirror, {
+				onClose: collapse,
+				onReact: react,
+				flash,
+				browse,
+				children: /* @__PURE__ */ jsx(AudienceSlide, {
+					meta,
+					options,
+					h: pos.h,
+					v: pos.v,
+					click: pos.click,
+					bg: options.background,
+					fit: "contain"
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("section", {
+				className: "deck-audience-react",
+				children: REACTIONS.map((e) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => react(e),
+					"aria-label": `React ${e}`,
+					children: e
+				}, e))
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				className: "deck-audience-tabs",
+				children: [
+					"follow",
+					"ask",
+					"polls",
+					"notes",
+					"mine"
+				].map((t) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: tab === t ? "is-on" : "",
+					onClick: () => setTab(t),
+					children: [
+						t === "follow" ? "pace" : t,
+						t === "ask" && questions.length ? /* @__PURE__ */ jsx("em", { children: questions.length }) : null,
+						t === "polls" && openPolls.length + openQuizzes.length ? /* @__PURE__ */ jsx("em", { children: openPolls.length + openQuizzes.length }) : null
+					]
+				}, t))
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "deck-audience-panel",
+				children: [
+					tab === "follow" ? /* @__PURE__ */ jsxs("div", {
+						className: "deck-audience-pace",
+						children: [
+							/* @__PURE__ */ jsx("p", { children: "How is the pace for you?" }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "deck-audience-pace-buttons",
+								children: [
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: pace === -1 ? "is-on" : "",
+										onClick: () => setPaceValue(-1),
+										children: "🐢 Slower"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: pace === 0 ? "is-on" : "",
+										onClick: () => setPaceValue(0),
+										children: "👍 Just right"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: pace === 1 ? "is-on" : "",
+										onClick: () => setPaceValue(1),
+										children: "🐇 Faster"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: ["deck-audience-hand", hand ? "is-on" : ""].join(" "),
+								onClick: toggleHand,
+								children: hand ? "✋ Hand raised — tap to lower" : "🙋 Raise a hand"
+							}),
+							/* @__PURE__ */ jsxs("label", {
+								className: "deck-audience-name",
+								children: ["Your name for the leaderboard", /* @__PURE__ */ jsx("input", {
+									value: name,
+									onChange: (e) => setName(e.target.value.slice(0, 24)),
+									placeholder: "optional"
+								})]
+							})
+						]
+					}) : null,
+					tab === "ask" ? /* @__PURE__ */ jsxs("div", {
+						className: "deck-audience-ask",
+						children: [/* @__PURE__ */ jsxs("form", {
+							onSubmit: (e) => {
+								e.preventDefault();
+								ask();
+							},
+							children: [/* @__PURE__ */ jsx("textarea", {
+								value: question,
+								onChange: (e) => setQuestion(e.target.value.slice(0, 280)),
+								placeholder: "Ask the presenter…",
+								rows: 2
+							}), /* @__PURE__ */ jsx("button", {
+								type: "submit",
+								disabled: !question.trim() || status !== "open",
+								children: "Ask"
+							})]
+						}), /* @__PURE__ */ jsxs("ul", {
+							className: "deck-audience-questions",
+							children: [questions.map((q) => /* @__PURE__ */ jsxs("li", {
+								className: q.answered ? "is-answered" : "",
+								children: [
+									/* @__PURE__ */ jsxs("button", {
+										type: "button",
+										className: ["deck-vote", voted.has(q.id) ? "is-on" : ""].join(" "),
+										onClick: () => vote(q.id),
+										disabled: q.answered,
+										children: ["▲ ", q.votes]
+									}),
+									/* @__PURE__ */ jsx("span", { children: q.text }),
+									q.answered ? /* @__PURE__ */ jsx("em", { children: "answered" }) : null
+								]
+							}, q.id)), !questions.length ? /* @__PURE__ */ jsx("li", {
+								className: "deck-muted",
+								children: "Be the first to ask."
+							}) : null]
+						})]
+					}) : null,
+					tab === "polls" ? /* @__PURE__ */ jsxs("div", {
+						className: "deck-audience-polls",
+						children: [
+							openPolls.map((p) => /* @__PURE__ */ jsx(Poll, {
+								id: p.def.id,
+								question: p.def.question,
+								options: p.def.options,
+								kind: p.def.kind,
+								scale: p.def.scale
+							}, p.def.id)),
+							openQuizzes.map((q) => /* @__PURE__ */ jsx(Quiz, {
+								id: q.def.id,
+								question: q.def.question,
+								options: q.def.options,
+								correct: q.def.correct,
+								seconds: q.def.seconds
+							}, q.def.id)),
+							!openPolls.length && !openQuizzes.length ? /* @__PURE__ */ jsx("p", {
+								className: "deck-muted",
+								children: "Nothing to vote on right now. Polls appear here the moment the presenter opens one."
+							}) : null
+						]
+					}) : null,
+					tab === "notes" ? /* @__PURE__ */ jsx("div", {
+						className: "deck-audience-notes",
+						children: room.notesPublic || deck.config.audienceNotes ? /* @__PURE__ */ jsx(AudienceNotes, { meta }) : /* @__PURE__ */ jsx("p", {
+							className: "deck-muted",
+							children: "The presenter has not shared the notes."
+						})
+					}) : null,
+					tab === "mine" ? /* @__PURE__ */ jsxs("div", {
+						className: "deck-audience-mine",
+						children: [
+							/* @__PURE__ */ jsx("h3", { children: "Bookmarks" }),
+							/* @__PURE__ */ jsxs("ul", { children: [bookmarks.map((k) => {
+								const [h, v] = k.split(",").map(Number);
+								const m = deck.columns[h]?.slides[v];
+								return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+									href: `${deck.base}#/${h}${v ? `/${v}` : ""}`,
+									target: "_blank",
+									rel: "noreferrer",
+									children: [
+										h + 1,
+										v ? `.${v + 1}` : "",
+										" ",
+										m?.title ?? ""
+									]
+								}) }, k);
+							}), !bookmarks.length ? /* @__PURE__ */ jsx("li", {
+								className: "deck-muted",
+								children: "Tap the bookmark on a slide to keep it."
+							}) : null] }),
+							/* @__PURE__ */ jsxs("p", {
+								className: "deck-muted",
+								children: [
+									"Explore the whole deck at your own pace:",
+									" ",
+									/* @__PURE__ */ jsx("a", {
+										href: `${deck.base}?view=scroll`,
+										target: "_blank",
+										rel: "noreferrer",
+										children: "open it as a page ↗"
+									})
+								]
+							})
+						]
+					}) : null
+				]
+			})
+		]
+	});
+}
+/**
+* The followed slide, stage-exact: the deck's `width × height` scaled uniformly, backgrounds
+* clipped to the same box, auto-fit applied as on the projector. `fit="width"` (the strip on
+* the join page) keeps the deck's ratio and follows the column; `fit="contain"` (full screen)
+* centres the stage in whatever box it gets, with bars on the two sides that are left over.
+*/
+function AudienceSlide({ meta, options, h, v, click, bg, fit = "width" }) {
+	const deck = useDeck();
+	const live = useLiveOptional();
+	const box = useRef(null);
+	const [place, setPlace] = useState({
+		scale: .2,
+		left: 0,
+		top: 0
+	});
+	/**
+	* Whether this screen can carry the slide's embedded pages live.
+	*
+	* A laptop in the room can; a phone cannot, and should not be asked to. The mirror is a few
+	* hundred pixels of someone else's slide, and a live page in it is a second copy of whatever the
+	* presenter is already running — a map holding its own WebGL context, on a device that will drop
+	* the whole tab rather than go over its budget. The poster says the same thing for the cost of
+	* an image, and every slide that embeds a page tells the room how to open it for themselves.
+	*/
+	const roomy = typeof window !== "undefined" && (window.matchMedia?.("(min-width: 900px)").matches ?? true);
+	const paused = useNav((s) => s.paused);
+	useEffect(() => {
+		const el = box.current;
+		if (!el) return;
+		const measure = () => {
+			const { width, height } = deck.config;
+			const scale = fit === "contain" ? Math.min(el.clientWidth / width, el.clientHeight / height) : el.clientWidth / width;
+			setPlace({
+				scale,
+				left: (el.clientWidth - width * scale) / 2,
+				top: fit === "contain" ? (el.clientHeight - height * scale) / 2 : 0
+			});
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [deck.config, fit]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: ["deck-audience-canvas-box", `fit-${fit}`].join(" "),
+		style: fit === "width" ? { aspectRatio: `${deck.config.width} / ${deck.config.height}` } : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "deck-audience-canvas",
+			style: {
+				width: deck.config.width,
+				height: deck.config.height,
+				transform: `translate(${place.left}px, ${place.top}px) scale(${place.scale})`
+			},
+			children: [
+				/* @__PURE__ */ jsx(BackgroundLayer, {
+					bg,
+					active: true
+				}),
+				/* @__PURE__ */ jsx(SlideFrame, {
+					meta,
+					options,
+					h,
+					v,
+					active: true,
+					click,
+					preview: true,
+					terms: true,
+					frames: roomy ? "load" : void 0,
+					className: "is-mirror"
+				}, `${h},${v}`),
+				/* @__PURE__ */ jsx(DrawingLayer, { inCanvas: true }),
+				live ? /* @__PURE__ */ jsx(PointerLayer, { inCanvas: true }) : null,
+				/* @__PURE__ */ jsx(ConfettiLayer, { inCanvas: true })
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "deck-pause-curtain is-audience",
+			"data-on": paused || void 0,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("span", { children: "Paused" })
+		})]
+	});
+}
+/**
+* The slide filling the screen — a phone turned sideways — with the reactions floating at the
+* bottom. Goes truly full screen where the browser allows it and asks for landscape; a tap on
+* the bars, the close button, Escape, or the browser's own exit comes back.
+*
+* Full screen is requested once, on mount. The page above re-renders on every reaction and
+* every room update, so the callbacks are read through refs — an effect keyed on them would
+* tear full screen down and race to rebuild it on each click.
+*/
+function FullMirror({ children, onClose, onReact, flash, browse }) {
+	const root = useRef(null);
+	const close = useRef(onClose);
+	close.current = onClose;
+	useEffect(() => {
+		const el = root.current;
+		if (!el) return;
+		let entered = false;
+		el.requestFullscreen?.().then(() => {
+			entered = true;
+			screen.orientation?.lock?.("landscape").catch(() => {});
+		}, () => {});
+		const onChange = () => {
+			if (entered && !document.fullscreenElement) close.current();
+		};
+		const onKey = (e) => {
+			if (e.key === "Escape") close.current();
+		};
+		document.addEventListener("fullscreenchange", onChange);
+		window.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("fullscreenchange", onChange);
+			window.removeEventListener("keydown", onKey);
+			if (document.fullscreenElement === el) document.exitFullscreen?.().catch(() => {});
+		};
+	}, []);
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "deck-audience-full",
+		role: "dialog",
+		"aria-label": "The slide, full screen",
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onClose();
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "deck-audience-full-stage",
+				...browse,
+				children
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "deck-audience-full-close",
+				onClick: onClose,
+				"aria-label": "Back to the join page",
+				children: "×"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "deck-audience-full-react",
+				children: REACTIONS.map((e) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onReact(e),
+					"aria-label": `React ${e}`,
+					children: e
+				}, e))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "deck-audience-flash",
+				"aria-hidden": true,
+				children: flash.map((f) => /* @__PURE__ */ jsx("span", { children: f.emoji }, f.id))
+			})
+		]
+	}), document.body);
+}
+/**
+* Moving through the deck with a thumb: a horizontal swipe turns the page, a vertical one moves
+* within a stack, and a press that went nowhere opens the slide full screen — the gesture this
+* page has always had. The deck's own swipe tracker is bound to the play view alone, so the phone
+* gets its own here. Anything on the slide that takes a press of its own keeps it.
+*/
+function useBrowse(onTap) {
+	const actions = useActions();
+	const swipe = useMemo(() => createSwipeTracker(), []);
+	const from = useRef(null);
+	const spare = (t) => !!t?.closest?.("button, a, iframe, input, textarea, select");
+	return {
+		onPointerDown: (e) => {
+			if (spare(e.target)) return;
+			from.current = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			swipe.start(e.clientX, e.clientY, e.timeStamp);
+		},
+		onPointerUp: (e) => {
+			const start = from.current;
+			from.current = null;
+			if (!start || spare(e.target)) return;
+			const dir = swipe.end(e.clientX, e.clientY, e.timeStamp);
+			if (dir === "left") actions.next();
+			else if (dir === "right") actions.prev();
+			else if (!dir && Math.hypot(e.clientX - start.x, e.clientY - start.y) < 10) onTap();
+		}
+	};
+}
+function AudienceNotes({ meta }) {
+	const [Notes, setNotes] = useState(null);
+	const memo = useMemo(() => meta, [meta]);
+	useEffect(() => {
+		let alive = true;
+		setNotes(null);
+		if (!memo?.loadNotes) return;
+		loadSlide(memo);
+		memo.loadNotes().then((m) => alive && setNotes(() => m.default));
+		return () => {
+			alive = false;
+		};
+	}, [memo]);
+	return Notes ? /* @__PURE__ */ jsx(Notes, {}) : /* @__PURE__ */ jsx("p", {
+		className: "deck-muted",
+		children: "No notes on this slide."
+	});
+}
+//#endregion
+export { AudiencePage };