@kadal/deck 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { DEFAULT_GLOSSARY, GlossaryEntry, GlossaryOptions, TermMatcher, buildMatcher, inlineHtml, termId } from "./glossary/model.js";
+import { Column, DEFAULT_CONFIG, DeckConfig, DeckConfigInput, DeckManifest, HostOverride, SlideBackground, SlideMeta, SlideOptions, Transition, columnsOf, readHostOverride, resolveBackground, resolveConfig, resolveSlideOptions, roomIdOf, withHostOverride } from "./core/model.js";
+import { Direction, NavState, Position, navigation_d_exports } from "./core/navigation.js";
+import { Store, createStore, useStore } from "./core/store.js";
+import { DeckActions, DeckContext, DeckRuntime, SlideContext, SlideContextValue, TermReveal, UiState, ViewMode, useDeck, useSlide, useSlideOptional } from "./react/context.js";
+import { Deck, DeckProps } from "./react/Deck.js";
+import { DECK_RENDERER, DeckRenderer, IslandMount, IslandProps, RenderContext, RendererLoader, loadRenderer, registerLazyRenderer, registerRenderer, resolveRenderer, resolveRendererAsync } from "./renderers/contract.js";
+import { ClientStrategy, Island, IslandLoader } from "./renderers/Island.js";
+import { registerBuiltinRenderers } from "./renderers/index.js";
+import { useMDXComponents } from "./react/mdx.js";
+import { useActions, useClick, useClickIndex, useConfig, useCurrentSlide, useLayout, useNav, useUi } from "./react/hooks.js";
+import { SlideFrame, loadSlide } from "./react/SlideFrame.js";
+import { BackgroundLayer, backgroundComponent, registerBackground } from "./react/Backgrounds.js";
+import { LAYOUTS, LayoutProps } from "./react/layouts.js";
+import { After, Click, Clicks, Fragment, Li, Ol, Ul } from "./components/Click.js";
+import { Code, MagicMove } from "./components/Code.js";
+import { Absolute, Anchor, Arrow, Audio, Badge, Callout, Center, Col, Cols, Confetti, Counter, Encrypted, FitText, Frame, Grid, Iframe, Image, Kbd, Link, Mark, Mermaid, Notes, Qr, Spacer, Stack, Stretch, Tex, Timer, Toc, Transform, Tweet, Typewriter, Video, Youtube } from "./components/content.js";
+import { Motion } from "./components/Motion.js";
+import { Term, TermProps, TermReadout, Terms } from "./components/Term.js";
+import { Sketch, SketchProps, SketchStep } from "./components/Sketch.js";
+import { Background } from "./components/Background.js";
+import { Leaderboard, Pace, Poll, Presence, QrJoin, Questions, Quiz, Reactions, WordCloud } from "./live/components.js";
+import { Blob, Chip, Divider, Glass, Glow, GradientText, Halo, Icon, Ribbon, Shimmer, Tilt } from "./components/bling.js";
+import "./components/index.js";
+import { closeTerm, openTerm } from "./react/terms.js";
+import { KEY_BINDINGS, KeyAction } from "./core/keyboard.js";
+import { formatHash, parseFlags, parseHash } from "./core/hash.js";
+import { HintLayer } from "./react/Hints.js";
+import { ThemeMenu } from "./react/ThemeMenu.js";
+import { FrameShell } from "./react/Frame.js";
+export { Absolute, After, Anchor, Arrow, Audio, Background, BackgroundLayer, Badge, Blob, Callout, Center, Chip, Click, Clicks, type ClientStrategy, Code, Col, Cols, type Column, Confetti, Counter, DECK_RENDERER, DEFAULT_CONFIG, DEFAULT_GLOSSARY, Deck, type DeckActions, type DeckConfig, type DeckConfigInput, DeckContext, type DeckManifest, type DeckProps, type DeckRenderer, type DeckRuntime, type Direction, Divider, Encrypted, FitText, Fragment, Frame, FrameShell, Glass, type GlossaryEntry, type GlossaryOptions, Glow, GradientText, Grid, Halo, HintLayer, type HostOverride, Icon, Iframe, Image, Island, type IslandLoader, type IslandMount, type IslandProps, KEY_BINDINGS, Kbd, type KeyAction, LAYOUTS, type LayoutProps, Leaderboard, Li, Link, MagicMove, Mark, Tex as Math, Mermaid, Motion, type NavState, Notes, Ol, Pace, Poll, type Position, Presence, Qr, QrJoin, Questions, Quiz, Reactions, type RenderContext, type RendererLoader, Ribbon, Shimmer, Sketch, type SketchProps, type SketchStep, type SlideBackground, SlideContext, type SlideContextValue, SlideFrame, type SlideMeta, type SlideOptions, Spacer, Stack, type Store, Stretch, Term, type TermMatcher, type TermProps, TermReadout, type TermReveal, Terms, Tex, ThemeMenu, Tilt, Timer, Toc, Transform, type Transition, Tweet, Typewriter, type UiState, Ul, Video, type ViewMode, WordCloud, Youtube, backgroundComponent, buildMatcher, closeTerm, columnsOf, createStore, formatHash, inlineHtml, Li as li, loadRenderer, loadSlide, navigation_d_exports as navigation, Ol as ol, openTerm, parseFlags, parseHash, readHostOverride, registerBackground, registerBuiltinRenderers, registerLazyRenderer, registerRenderer, resolveBackground, resolveConfig, resolveRenderer, resolveRendererAsync, resolveSlideOptions, roomIdOf, termId, Ul as ul, useActions, useClick, useClickIndex, useConfig, useCurrentSlide, useDeck, useLayout, useMDXComponents, useNav, useSlide, useSlideOptional, useStore, useUi, withHostOverride };

package/dist/index.js

@@ -0,0 +1,30 @@
+import { DEFAULT_GLOSSARY, buildMatcher, inlineHtml, termId } from "./glossary/model.js";
+import { DEFAULT_CONFIG, columnsOf, readHostOverride, resolveBackground, resolveConfig, resolveSlideOptions, roomIdOf, withHostOverride } from "./core/model.js";
+import { formatHash, parseFlags, parseHash } from "./core/hash.js";
+import { KEY_BINDINGS } from "./core/keyboard.js";
+import { navigation_exports } from "./core/navigation.js";
+import { createStore, useStore } from "./core/store.js";
+import { DeckContext, SlideContext, useDeck, useSlide, useSlideOptional } from "./react/context.js";
+import { useActions, useClick, useClickIndex, useConfig, useCurrentSlide, useLayout, useNav, useUi } from "./react/hooks.js";
+import { BackgroundLayer, backgroundComponent, registerBackground } from "./react/Backgrounds.js";
+import { HintLayer } from "./react/Hints.js";
+import { ThemeMenu } from "./react/ThemeMenu.js";
+import { FrameShell } from "./react/Frame.js";
+import { LAYOUTS } from "./react/layouts.js";
+import { After, Click, Clicks, Fragment, Li, Ol, Ul } from "./components/Click.js";
+import { Code, MagicMove } from "./components/Code.js";
+import { Absolute, Anchor, Arrow, Audio, Badge, Callout, Center, Col, Cols, Confetti, Counter, Encrypted, FitText, Frame, Grid, Iframe, Image, Kbd, Link, Mark, Mermaid, Notes, Qr, Spacer, Stack, Stretch, Tex, Timer, Toc, Transform, Tweet, Typewriter, Video, Youtube } from "./components/content.js";
+import { Motion } from "./components/Motion.js";
+import { closeTerm, openTerm } from "./react/terms.js";
+import { Blob, Chip, Divider, Glass, Glow, GradientText, Halo, Icon, Ribbon, Shimmer, Tilt } from "./components/bling.js";
+import { Term, TermReadout, Terms } from "./components/Term.js";
+import { Sketch } from "./components/Sketch.js";
+import { Background } from "./components/Background.js";
+import { Leaderboard, Pace, Poll, Presence, QrJoin, Questions, Quiz, Reactions, WordCloud } from "./live/components.js";
+import { useMDXComponents } from "./react/mdx.js";
+import { SlideFrame, loadSlide } from "./react/SlideFrame.js";
+import { Deck } from "./react/Deck.js";
+import { DECK_RENDERER, loadRenderer, registerLazyRenderer, registerRenderer, resolveRenderer, resolveRendererAsync } from "./renderers/contract.js";
+import { Island } from "./renderers/Island.js";
+import { registerBuiltinRenderers } from "./renderers/index.js";
+export { Absolute, After, Anchor, Arrow, Audio, Background, BackgroundLayer, Badge, Blob, Callout, Center, Chip, Click, Clicks, Code, Col, Cols, Confetti, Counter, DECK_RENDERER, DEFAULT_CONFIG, DEFAULT_GLOSSARY, Deck, DeckContext, Divider, Encrypted, FitText, Fragment, Frame, FrameShell, Glass, Glow, GradientText, Grid, Halo, HintLayer, Icon, Iframe, Image, Island, KEY_BINDINGS, Kbd, LAYOUTS, Leaderboard, Li, Link, MagicMove, Mark, Tex as Math, Mermaid, Motion, Notes, Ol, Pace, Poll, Presence, Qr, QrJoin, Questions, Quiz, Reactions, Ribbon, Shimmer, Sketch, SlideContext, SlideFrame, Spacer, Stack, Stretch, Term, TermReadout, Terms, Tex, ThemeMenu, Tilt, Timer, Toc, Transform, Tweet, Typewriter, Ul, Video, WordCloud, Youtube, backgroundComponent, buildMatcher, closeTerm, columnsOf, createStore, formatHash, inlineHtml, Li as li, loadRenderer, loadSlide, navigation_exports as navigation, Ol as ol, openTerm, parseFlags, parseHash, readHostOverride, registerBackground, registerBuiltinRenderers, registerLazyRenderer, registerRenderer, resolveBackground, resolveConfig, resolveRenderer, resolveRendererAsync, resolveSlideOptions, roomIdOf, termId, Ul as ul, useActions, useClick, useClickIndex, useConfig, useCurrentSlide, useDeck, useLayout, useMDXComponents, useNav, useSlide, useSlideOptional, useStore, useUi, withHostOverride };

package/dist/live/LiveProvider.d.ts

@@ -0,0 +1,20 @@
+import "../react/context.js";
+import { ReactNode } from "react";
+//#region src/live/LiveProvider.d.ts
+/**
+ * Put `<LiveProvider />` inside `<Deck>` and the deck joins its room: the presenter window pushes
+ * its position, pointer and drawings; the play window and the audience follow (or explore, then
+ * catch up); reactions float up on every screen; questions and polls flow both ways. Without a
+ * backend the provider stays quiet and the deck works exactly as before.
+ */
+export declare function LiveProvider({ children }: {
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The laser pointer and spotlight: published by the presenter, drawn by everyone. `inCanvas`
+ * renders it inside a scaled stage canvas (the presenter's current-slide box) in stage pixels.
+ */
+export declare function PointerLayer({ inCanvas }?: {
+  inCanvas?: boolean;
+}): import("react").JSX.Element;
+//#endregion

package/dist/live/LiveProvider.js

@@ -0,0 +1,450 @@
+import { roomIdOf } from "../core/model.js";
+import { formatSlideNumber, goto, key } from "../core/navigation.js";
+import { useStore } from "../core/store.js";
+import { useDeck } from "../react/context.js";
+import { useActions, useLayout, useNav, useUi } from "../react/hooks.js";
+import { closeTerm, openTerm } from "../react/terms.js";
+import { Icon } from "../components/bling.js";
+import { LiveContext, useLiveOptional } from "./context.js";
+import { DrawingLayer } from "../draw/DrawingLayer.js";
+import { RoomClient, viewerId } from "./client.js";
+import { Analytics } from "./analytics.js";
+import { turnstileToken } from "./turnstile.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/live/LiveProvider.tsx
+/**
+* Put `<LiveProvider />` inside `<Deck>` and the deck joins its room: the presenter window pushes
+* its position, pointer and drawings; the play window and the audience follow (or explore, then
+* catch up); reactions float up on every screen; questions and polls flow both ways. Without a
+* backend the provider stays quiet and the deck works exactly as before.
+*/
+function LiveProvider({ children }) {
+	const deck = useDeck();
+	const api = deck.config.live.api;
+	const room = roomIdOf(deck.config);
+	const value = useMemo(() => {
+		if (!api || deck.mode === "print") return null;
+		const siteKey = deck.config.live.turnstile;
+		return {
+			client: new RoomClient({
+				api,
+				room,
+				role: deck.mode === "presenter" ? "presenter" : "viewer",
+				viewer: viewerId(),
+				token: siteKey && deck.mode !== "presenter" ? () => turnstileToken(siteKey) : void 0
+			}),
+			joinUrl: typeof window === "undefined" ? "" : `${window.location.origin}${deck.base}join`
+		};
+	}, [
+		api,
+		room,
+		deck.mode,
+		deck.base,
+		deck.config.live.turnstile
+	]);
+	useEffect(() => {
+		if (!value) return;
+		value.client.connect();
+		return () => value.client.close();
+	}, [value]);
+	if (!value) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(LiveContext.Provider, {
+		value,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(Analytics, {}),
+			/* @__PURE__ */ jsx(Wiring, {}),
+			deck.mode === "play" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(DrawingLayer, {}),
+				/* @__PURE__ */ jsx(PointerLayer, {}),
+				/* @__PURE__ */ jsx(ReactionsOverlay, {}),
+				/* @__PURE__ */ jsx(FollowControl, {})
+			] }) : null,
+			deck.mode === "presenter" ? /* @__PURE__ */ jsx(ReactionsOverlay, {}) : null
+		]
+	});
+}
+/** Nav in, nav out, presence, blackout. */
+function Wiring() {
+	const deck = useDeck();
+	const live = useLiveOptional();
+	const role = useStore(live.client.role);
+	useNav((s) => s.follow);
+	useEffect(() => {
+		let timer = null;
+		let sentAt = 0;
+		let pending = null;
+		const flush = () => {
+			timer = null;
+			if (!pending) return;
+			sentAt = Date.now();
+			live.client.send({
+				type: "nav",
+				position: pending
+			});
+			pending = null;
+		};
+		const unsub = deck.nav.subscribe((s, prev) => {
+			live.client.position = {
+				h: s.h,
+				v: s.v,
+				click: s.click
+			};
+			if (s.h === prev.h && s.v === prev.v && s.click === prev.click) return;
+			if (deck.sync.source === "room") return;
+			if (role === "presenter") {
+				pending = {
+					h: s.h,
+					v: s.v,
+					click: s.click
+				};
+				const wait = 80 - (Date.now() - sentAt);
+				if (wait <= 0) flush();
+				else if (!timer) timer = setTimeout(flush, wait);
+			} else live.client.send({
+				type: "presence",
+				slide: key(s.h, s.v)
+			});
+		});
+		return () => {
+			unsub();
+			if (timer) clearTimeout(timer);
+			flush();
+		};
+	}, [
+		deck.nav,
+		deck.sync,
+		live.client,
+		role
+	]);
+	useEffect(() => {
+		if (role === "presenter") return;
+		const apply = (m) => {
+			if (m.type === "welcome" || m.type === "nav") {
+				const p = m.type === "welcome" ? m.state.position : m.position;
+				const presenting = m.type === "nav" || m.state.presence.presenter;
+				deck.sync.source = "room";
+				try {
+					deck.nav.update((s) => {
+						const next = {
+							...s,
+							presenter: p
+						};
+						if (!s.follow || !presenting) return next;
+						return goto(next, deck.columns, p);
+					});
+				} finally {
+					deck.sync.source = null;
+				}
+			}
+		};
+		return live.client.on(apply);
+	}, [
+		deck.nav,
+		deck.columns,
+		deck.sync,
+		live.client,
+		role
+	]);
+	useEffect(() => {
+		if (role !== "presenter") return;
+		return deck.nav.subscribe((s, prev) => {
+			if (s.paused !== prev.paused) live.client.send({
+				type: "blackout",
+				on: s.paused
+			});
+		});
+	}, [
+		deck.nav,
+		live.client,
+		role
+	]);
+	useEffect(() => {
+		if (role === "presenter") return;
+		const apply = (blackout) => {
+			deck.sync.source = "room";
+			try {
+				deck.nav.update((n) => n.paused === blackout ? n : {
+					...n,
+					paused: blackout
+				});
+			} finally {
+				deck.sync.source = null;
+			}
+		};
+		if (live.client.state.get().blackout) apply(true);
+		return live.client.state.subscribe((s, prev) => {
+			if (s.blackout !== prev.blackout) apply(s.blackout);
+		});
+	}, [
+		deck.nav,
+		deck.sync,
+		live.client,
+		role
+	]);
+	/**
+	* The spotlight, the same way the blackout travels.
+	*
+	* The laser's POSITION has always been published; the darkness around it never was — it was a
+	* local flag on whichever window pressed the button, so the presenter dimmed their own screen
+	* and nobody else's. The room has carried a `spotlight` field and the message to set it since
+	* the protocol was written; this is the half that was missing at both ends.
+	*/
+	useEffect(() => {
+		if (role !== "presenter") return;
+		return deck.ui.subscribe((s, prev) => {
+			if (s.spotlight !== prev.spotlight) live.client.send({
+				type: "spotlight",
+				on: s.spotlight
+			});
+		});
+	}, [
+		deck.ui,
+		live.client,
+		role
+	]);
+	useEffect(() => {
+		if (role === "presenter") return;
+		const apply = (on) => deck.ui.update((u) => u.spotlight === on ? u : {
+			...u,
+			spotlight: on
+		});
+		apply(live.client.state.get().spotlight);
+		return live.client.state.subscribe((s, prev) => {
+			if (s.spotlight !== prev.spotlight) apply(s.spotlight);
+		});
+	}, [
+		deck.ui,
+		live.client,
+		role
+	]);
+	useEffect(() => {
+		if (role !== "presenter") return;
+		let shared = false;
+		const push = () => {
+			const r = deck.terms.get();
+			if (r && r.from === "local" && deck.ui.get().termSync) {
+				live.client.send({
+					type: "term",
+					slide: r.slide,
+					id: r.id,
+					n: r.n,
+					view: r.view
+				});
+				shared = true;
+			} else if (shared) {
+				live.client.send({ type: "term:off" });
+				shared = false;
+			}
+		};
+		const offTerms = deck.terms.subscribe(push);
+		const offUi = deck.ui.subscribe((s, prev) => {
+			if (s.termSync !== prev.termSync) push();
+		});
+		return () => {
+			offTerms();
+			offUi();
+			if (shared) live.client.send({ type: "term:off" });
+		};
+	}, [
+		deck.terms,
+		deck.ui,
+		live.client,
+		role
+	]);
+	useEffect(() => {
+		if (role === "presenter") return;
+		return live.client.on((m) => {
+			const t = m.type === "term" ? m : m.type === "welcome" ? m.state.term : null;
+			if (t) openTerm(deck, {
+				slide: t.slide,
+				id: t.id,
+				n: t.n,
+				view: t.view ?? null,
+				pinned: true,
+				from: "remote"
+			});
+			else if (m.type === "term:off") closeTerm(deck, "remote");
+		});
+	}, [
+		deck,
+		live.client,
+		role
+	]);
+	useEffect(() => {
+		return live.client.on((m) => {
+			if (m.type === "confetti") window.dispatchEvent(new CustomEvent("deck:confetti"));
+		});
+	}, [live.client]);
+	return null;
+}
+/**
+* The laser pointer and spotlight: published by the presenter, drawn by everyone. `inCanvas`
+* renders it inside a scaled stage canvas (the presenter's current-slide box) in stage pixels.
+*/
+function PointerLayer({ inCanvas = false } = {}) {
+	const deck = useDeck();
+	const live = useLiveOptional();
+	const layout = useLayout();
+	const host = useRef(null);
+	const on = useUi((s) => s.pointer);
+	const spotlight = useUi((s) => s.spotlight);
+	const role = useStore(live.client.role);
+	const remote = useStore(live.client.state, (s) => s.pointer);
+	const follow = useNav((s) => s.follow);
+	const [local, setLocal] = useState(null);
+	useEffect(() => {
+		if (!on || role !== "presenter") {
+			if (role === "presenter") live.client.send({ type: "pointer:off" });
+			setLocal(null);
+			return;
+		}
+		let last = 0;
+		const onMove = (e) => {
+			const rect = host.current?.getBoundingClientRect();
+			const l = deck.layout.get();
+			const p = rect && rect.width > 0 ? {
+				x: (e.clientX - rect.left) / rect.width,
+				y: (e.clientY - rect.top) / rect.height
+			} : {
+				x: (e.clientX - l.left) / l.scale / deck.config.width,
+				y: (e.clientY - l.top) / l.scale / deck.config.height
+			};
+			setLocal(p);
+			const now = performance.now();
+			if (now - last > 33) {
+				last = now;
+				live.client.send({
+					type: "pointer",
+					x: p.x,
+					y: p.y
+				});
+			}
+		};
+		window.addEventListener("pointermove", onMove);
+		return () => window.removeEventListener("pointermove", onMove);
+	}, [
+		on,
+		role,
+		live.client,
+		deck.layout,
+		deck.config.width,
+		deck.config.height
+	]);
+	const p = role === "presenter" ? local : follow ? remote : null;
+	const frame = inCanvas ? {
+		left: 0,
+		top: 0,
+		width: deck.config.width,
+		height: deck.config.height
+	} : {
+		left: layout.left,
+		top: layout.top,
+		width: layout.width,
+		height: layout.height
+	};
+	const x = p ? p.x * frame.width : 0;
+	const y = p ? p.y * frame.height : 0;
+	const radius = inCanvas ? 140 / Math.max(.05, layout.scale || 1) : 140;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: host,
+		className: "deck-pointer-layer",
+		style: {
+			position: "absolute",
+			pointerEvents: "none",
+			...frame
+		},
+		children: [p && spotlight ? /* @__PURE__ */ jsx("div", {
+			className: "deck-spotlight",
+			style: { background: `radial-gradient(circle ${radius}px at ${x}px ${y}px, transparent 0, rgba(0,0,0,0.75) ${radius + 20}px)` }
+		}) : null, p ? /* @__PURE__ */ jsx("div", {
+			className: "deck-pointer",
+			style: { transform: `translate(${x}px, ${y}px)${inCanvas ? " scale(2.5)" : ""}` }
+		}) : null]
+	});
+}
+/** Reactions float up from the bottom on every window as they arrive. */
+function ReactionsOverlay() {
+	const live = useLiveOptional();
+	const [items, setItems] = useState([]);
+	useEffect(() => {
+		let n = 0;
+		return live.client.on((m) => {
+			if (m.type !== "react") return;
+			const count = Math.min(6, m.n);
+			const batch = Array.from({ length: count }, () => ({
+				id: n++,
+				emoji: m.emoji,
+				x: 10 + Math.random() * 80
+			}));
+			setItems((prev) => [...prev.slice(-40), ...batch]);
+			setTimeout(() => setItems((prev) => prev.filter((i) => !batch.some((b) => b.id === i.id))), 2600);
+		});
+	}, [live.client]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-reactions-overlay",
+		"aria-hidden": true,
+		children: items.map((i) => /* @__PURE__ */ jsx("span", {
+			className: "deck-reaction-float",
+			style: {
+				left: `${i.x}%`,
+				animationDelay: `${i.id % 5 * 60}ms`
+			},
+			children: i.emoji
+		}, i.id))
+	});
+}
+/**
+* THE WAY BACK, for a viewer reading on their own.
+*
+* It shows only while this window is NOT following: in step there is nothing to say, and a viewer
+* who wants out of step simply presses an arrow — any move of their own ends the follow (see
+* `withTransition` in Deck.tsx). `presenter` stays null until the room has said where they are, so
+* a late joiner gets the button without a slide number rather than no button at all.
+*/
+function FollowControl() {
+	const deck = useDeck();
+	const live = useLiveOptional();
+	const actions = useActions();
+	const role = useStore(live.client.role);
+	const presenting = useStore(live.client.state, (s) => s.presence.presenter);
+	const { follow, presenter, h, v } = useNav((s) => ({
+		follow: s.follow,
+		presenter: s.presenter,
+		h: s.h,
+		v: s.v
+	}));
+	if (role === "presenter" || deck.mode !== "play" || !presenting || follow) return null;
+	const away = !presenter || presenter.h !== h || presenter.v !== v;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "deck-follow",
+		role: "status",
+		children: [/* @__PURE__ */ jsx("span", { children: presenter && away ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			"You are on ",
+			slideLabel(deck, h, v),
+			" · they are on",
+			" ",
+			/* @__PURE__ */ jsx("b", { children: slideLabel(deck, presenter.h, presenter.v) })
+		] }) : "Reading on your own" }), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => actions.setFollow(true),
+			children: [/* @__PURE__ */ jsx(Icon, { name: "play" }), " Follow the presenter"]
+		})]
+	});
+}
+/**
+* A slide, spelled the way THIS deck's own slide number spells it — so "they are on 10" and the
+* counter in the corner are talking about the same thing. A `c/t` deck loses its total here: the
+* sentence around the number does not need one.
+*/
+function slideLabel(deck, h, v) {
+	const format = deck.config.slideNumber === true ? "h.v" : deck.config.slideNumber || "c";
+	return formatSlideNumber(format === "c/t" ? "c" : format, {
+		h,
+		v,
+		click: 0
+	}, deck.columns);
+}
+//#endregion
+export { LiveProvider, PointerLayer, slideLabel };

package/dist/live/analytics.d.ts

@@ -0,0 +1,15 @@
+//#region src/live/analytics.d.ts
+/**
+ * Time on each slide, sent to the host every 20 seconds and when the page is hidden, with the
+ * anonymous viewer id (a random string kept in localStorage — no cookies, no fingerprinting).
+ * The host counts a view per viewer per day and sums dwell per slide for the stats page.
+ */
+export declare function Analytics(): null;
+/** Ask the host for a short link to a slide; falls back to the deck's own hash URL offline. */
+export declare function shareLink(api: string | null, slug: string, base: string, pos: {
+  h: number;
+  v: number;
+  click?: number;
+}, label?: string): Promise<string>;
+export declare function copyText(text: string): Promise<boolean>;
+//#endregion

package/dist/live/analytics.js

@@ -0,0 +1,103 @@
+import { roomIdOf } from "../core/model.js";
+import { key } from "../core/navigation.js";
+import { useDeck } from "../react/context.js";
+import { viewerId } from "./client.js";
+import { useEffect } from "react";
+//#region src/live/analytics.tsx
+/**
+* Time on each slide, sent to the host every 20 seconds and when the page is hidden, with the
+* anonymous viewer id (a random string kept in localStorage — no cookies, no fingerprinting).
+* The host counts a view per viewer per day and sums dwell per slide for the stats page.
+*/
+function Analytics() {
+	const deck = useDeck();
+	const api = deck.config.live.api;
+	const slug = roomIdOf(deck.config);
+	useEffect(() => {
+		if (!api || !slug || deck.mode === "print" || deck.mode === "presenter") return;
+		const dwell = {};
+		const enters = {};
+		let current = key(deck.nav.get().h, deck.nav.get().v);
+		let since = Date.now();
+		enters[current] = 1;
+		const settle = () => {
+			const t = Date.now();
+			if (!document.hidden) dwell[current] = (dwell[current] ?? 0) + (t - since);
+			since = t;
+		};
+		const unsub = deck.nav.subscribe((s) => {
+			const k = key(s.h, s.v);
+			if (k === current) return;
+			settle();
+			current = k;
+			enters[k] = (enters[k] ?? 0) + 1;
+		});
+		const flush = () => {
+			settle();
+			if (!Object.keys(dwell).length && !Object.keys(enters).length) return;
+			const body = JSON.stringify({
+				viewer: viewerId(),
+				dwell,
+				enters
+			});
+			for (const k of Object.keys(dwell)) delete dwell[k];
+			for (const k of Object.keys(enters)) delete enters[k];
+			const url = `${api}/decks/${encodeURIComponent(slug)}/beacon`;
+			if (!navigator.sendBeacon?.(url, new Blob([body], { type: "application/json" }))) fetch(url, {
+				method: "POST",
+				body,
+				headers: { "content-type": "application/json" },
+				keepalive: true
+			}).catch(() => {});
+		};
+		const timer = setInterval(flush, 2e4);
+		const onVisibility = () => {
+			if (document.hidden) flush();
+			else since = Date.now();
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		window.addEventListener("pagehide", flush);
+		return () => {
+			clearInterval(timer);
+			document.removeEventListener("visibilitychange", onVisibility);
+			window.removeEventListener("pagehide", flush);
+			unsub();
+			flush();
+		};
+	}, [
+		api,
+		slug,
+		deck.mode,
+		deck.nav
+	]);
+	return null;
+}
+/** Ask the host for a short link to a slide; falls back to the deck's own hash URL offline. */
+async function shareLink(api, slug, base, pos, label) {
+	const fallback = `${window.location.origin}${base}#/${pos.h}${pos.v || pos.click ? `/${pos.v}` : ""}${pos.click ? `/${pos.click}` : ""}`;
+	if (!api) return fallback;
+	try {
+		const r = await fetch(`${api}/decks/${encodeURIComponent(slug)}/share`, {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				...pos,
+				label
+			})
+		});
+		if (!r.ok) return fallback;
+		return (await r.json()).url ?? fallback;
+	} catch {
+		return fallback;
+	}
+}
+async function copyText(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+export { Analytics, copyText, shareLink };