@kadal/deck 0.0.0-stage → 0.1.0

package/dist/react/ThemeMenu.js

@@ -0,0 +1,124 @@
+import { useDeck } from "./context.js";
+import { useActions, useUi } from "./hooks.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/ThemeMenu.tsx
+/**
+* The theme selector: every screen picks its own look — the themes a deck ships (its main.tsx
+* imports their CSS and `config.themes` lists them) plus light or dark — and keeps the choice
+* in the browser. `T` opens it; the palette button in the corner does the same.
+*/
+function themeLabel(name) {
+	return name.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function ThemeMenu({ compact = false }) {
+	const deck = useDeck();
+	const open = useUi((s) => s.themeMenu);
+	const theme = useUi((s) => s.theme);
+	const scheme = useUi((s) => s.colorScheme);
+	const actions = useActions();
+	const root = useRef(null);
+	const themes = deck.config.themes.length ? deck.config.themes : [deck.config.theme];
+	useEffect(() => {
+		if (!open) return;
+		const onDown = (e) => {
+			if (!root.current?.contains(e.target)) actions.toggleThemeMenu(false);
+		};
+		window.addEventListener("pointerdown", onDown);
+		return () => {
+			window.removeEventListener("pointerdown", onDown);
+		};
+	}, [open, actions]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: [
+			"deck-theme-menu",
+			compact ? "is-compact" : "",
+			open ? "is-open" : ""
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "deck-theme-button",
+			onClick: () => actions.toggleThemeMenu(),
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			title: "Theme (T)",
+			children: [/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				width: "18",
+				height: "18",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.8",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": true,
+				children: [
+					/* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 0 0 0 18c1.1 0 2-.9 2-2v-1.3c0-.5.4-.9.9-.9H16a5 5 0 0 0 5-5c0-5-4-8.8-9-8.8Z" }),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "7.5",
+						cy: "11.5",
+						r: "1.2",
+						fill: "currentColor",
+						stroke: "none"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "10.5",
+						cy: "7.5",
+						r: "1.2",
+						fill: "currentColor",
+						stroke: "none"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15",
+						cy: "7.5",
+						r: "1.2",
+						fill: "currentColor",
+						stroke: "none"
+					})
+				]
+			}), compact ? null : /* @__PURE__ */ jsx("span", { children: themeLabel(theme) })]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "deck-theme-popover",
+			role: "menu",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "deck-theme-section",
+					children: "Theme"
+				}),
+				themes.map((name) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": name === theme,
+					className: name === theme ? "is-on" : "",
+					onClick: () => actions.setTheme(name),
+					children: [/* @__PURE__ */ jsx("i", { className: `deck-theme-swatch theme-${name}` }), themeLabel(name)]
+				}, name)),
+				/* @__PURE__ */ jsx("div", {
+					className: "deck-theme-section",
+					children: "Scheme"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "deck-theme-row",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: scheme === "light" ? "is-on" : "",
+						onClick: () => actions.setColorScheme("light"),
+						children: "☀ Light"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: scheme === "dark" ? "is-on" : "",
+						onClick: () => actions.setColorScheme("dark"),
+						children: "☾ Dark"
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "deck-theme-hint",
+					children: "Yours only — every screen keeps its own choice."
+				})
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { ThemeMenu, themeLabel };

package/dist/react/Zoom.js

@@ -0,0 +1,23 @@
+import { useDeck } from "./context.js";
+import { useLayout, useUi } from "./hooks.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/Zoom.tsx
+/** Alt+click zoom: the stage scales up around the clicked point; click again or Esc to return. */
+function ZoomLayer({ children }) {
+	const zoom = useUi((s) => s.zoom);
+	const layout = useLayout();
+	useDeck();
+	const style = zoom ? {
+		transformOrigin: `${layout.left + zoom.x * layout.scale}px ${layout.top + zoom.y * layout.scale}px`,
+		transform: `scale(${zoom.scale})`,
+		transition: "transform 0.6s ease"
+	} : { transition: "transform 0.6s ease" };
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-zoom",
+		style,
+		"data-zoomed": zoom ? "true" : void 0,
+		children
+	});
+}
+//#endregion
+export { ZoomLayer };

package/dist/react/chrome.js

@@ -0,0 +1,339 @@
+import { KEY_BINDINGS } from "../core/keyboard.js";
+import { availableRoutes, formatSlideNumber, progressOf } from "../core/navigation.js";
+import { useDeck } from "./context.js";
+import { useActions, useCurrentSlide, useNav, useUi } from "./hooks.js";
+import { HintLayer } from "./Hints.js";
+import { ConfettiLayer } from "./ConfettiLayer.js";
+import { ThemeMenu } from "./ThemeMenu.js";
+import { loadSlide } from "./SlideFrame.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/chrome.tsx
+/**
+* The chrome around the slides: arrows, progress, the slide number, the pause curtain, the
+* help sheet, jump-to, search, the speaker-notes footer, and a toast. Each piece reads only the
+* slice of state it needs.
+*/
+function Chrome() {
+	const deck = useDeck();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		deck.config.controls === true ? /* @__PURE__ */ jsx(Controls, {}) : null,
+		deck.config.progress ? /* @__PURE__ */ jsx(Progress, {}) : null,
+		deck.config.slideNumber && (deck.config.showSlideNumber === "all" || deck.config.showSlideNumber === "print" && deck.mode === "print") ? /* @__PURE__ */ jsx(SlideNumber, {}) : null,
+		deck.config.showNotes ? /* @__PURE__ */ jsx(NotesFooter, {}) : null,
+		/* @__PURE__ */ jsx(ThemeMenu, {}),
+		/* @__PURE__ */ jsx(PauseCurtain, {}),
+		/* @__PURE__ */ jsx(HelpSheet, {}),
+		/* @__PURE__ */ jsx(JumpTo, {}),
+		/* @__PURE__ */ jsx(SearchSheet, {}),
+		/* @__PURE__ */ jsx(HintLayer, {}),
+		/* @__PURE__ */ jsx(Toast, {}),
+		/* @__PURE__ */ jsx(ConfettiLayer, {}),
+		deck.config.badge && deck.mode === "play" ? /* @__PURE__ */ jsx(MadeWith, {}) : null
+	] });
+}
+/**
+* "Made with Kadal Deck", in the corner of a deck the host serves on the free plan. Only in the
+* play window: never in print or export (mode "print"), the presenter's own window, or the
+* audience page.
+*/
+function MadeWith() {
+	return /* @__PURE__ */ jsxs("a", {
+		className: "deck-made-with",
+		href: "https://deck.kadal.cc/?ref=badge",
+		target: "_blank",
+		rel: "noopener",
+		"data-hint": true,
+		children: ["Made with ", /* @__PURE__ */ jsx("strong", { children: "Kadal Deck" })]
+	});
+}
+function Controls() {
+	const deck = useDeck();
+	const nav = useNav((s) => ({
+		h: s.h,
+		v: s.v,
+		click: s.click,
+		totals: s.totals,
+		overview: s.overview
+	}));
+	const actions = useActions();
+	const routes = availableRoutes({
+		...nav,
+		direction: "none",
+		paused: false,
+		autoSliding: false,
+		presenter: null,
+		follow: true,
+		seq: 0
+	}, deck.columns, deck.config);
+	const [tutorial, setTutorial] = useState(deck.config.controlsTutorial);
+	useEffect(() => {
+		if (!tutorial) return;
+		return deck.nav.subscribe((s, p) => {
+			if (s.h !== p.h || s.v !== p.v || s.click !== p.click) setTutorial(false);
+		});
+	}, [deck.nav, tutorial]);
+	const back = deck.config.controlsBackArrows;
+	const arrow = (dir, enabled, onClick, isBack) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: [
+			"deck-control",
+			`deck-control-${dir}`,
+			enabled ? "is-enabled" : "",
+			isBack && back === "faded" ? "is-faded" : "",
+			tutorial && enabled && !isBack ? "is-highlight" : ""
+		].filter(Boolean).join(" "),
+		"aria-label": `Navigate ${dir}`,
+		disabled: !enabled,
+		hidden: isBack && back === "hidden" && enabled,
+		onClick,
+		children: /* @__PURE__ */ jsx("span", {})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `deck-controls layout-${deck.config.controlsLayout}`,
+		"aria-hidden": nav.overview || void 0,
+		children: [
+			arrow("left", routes.left || routes.prevClick, actions.prev, true),
+			arrow("right", routes.right || routes.nextClick, actions.next, false),
+			arrow("up", routes.up, actions.up, true),
+			arrow("down", routes.down, actions.down, false)
+		]
+	});
+}
+function Progress() {
+	const deck = useDeck();
+	const nav = useNav((s) => ({
+		h: s.h,
+		v: s.v
+	}));
+	const actions = useActions();
+	const p = progressOf({
+		...nav,
+		click: 0,
+		direction: "none",
+		overview: false,
+		paused: false,
+		autoSliding: false,
+		totals: {},
+		presenter: null,
+		follow: true,
+		seq: 0
+	}, deck.columns);
+	const onClick = (e) => {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const frac = (e.clientX - rect.left) / rect.width;
+		const total = deck.columns.reduce((n, c) => n + c.slides.length, 0);
+		actions.gotoFlat(Math.round(frac * (total - 1)));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-progress",
+		onClick,
+		role: "progressbar",
+		"aria-valuenow": Math.round(p * 100),
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		children: /* @__PURE__ */ jsx("span", { style: { transform: `scaleX(${p})` } })
+	});
+}
+function SlideNumber() {
+	const deck = useDeck();
+	const nav = useNav((s) => ({
+		h: s.h,
+		v: s.v,
+		click: s.click
+	}));
+	const format = deck.config.slideNumber === true ? "h.v" : deck.config.slideNumber;
+	if (!format) return null;
+	const text = formatSlideNumber(format, nav, deck.columns, true);
+	return /* @__PURE__ */ jsx("a", {
+		className: "deck-slide-number",
+		href: typeof window === "undefined" ? void 0 : window.location.hash,
+		children: text
+	});
+}
+function PauseCurtain() {
+	const paused = useNav((s) => s.paused);
+	const actions = useActions();
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-pause-curtain",
+		"data-on": paused || void 0,
+		onClick: () => actions.togglePause(false),
+		role: "presentation",
+		children: /* @__PURE__ */ jsx("span", { children: "Paused — press any key" })
+	});
+}
+function HelpSheet() {
+	const open = useUi((s) => s.help);
+	const actions = useActions();
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-sheet deck-help",
+		role: "dialog",
+		"aria-label": "Keyboard shortcuts",
+		onClick: () => actions.toggleHelp(false),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "deck-sheet-panel",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsx("h2", { children: "Keyboard" }),
+				/* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsxs("tbody", { children: [KEY_BINDINGS.map((b) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("kbd", { children: b.label }) }), /* @__PURE__ */ jsx("td", { children: b.description })] }, b.action)), /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("kbd", { children: "Alt click" }) }), /* @__PURE__ */ jsx("td", { children: "Zoom in on a point" })] })] }) }),
+				/* @__PURE__ */ jsx("p", {
+					className: "deck-sheet-hint",
+					children: "Press ? or Esc to close."
+				})
+			]
+		})
+	});
+}
+function JumpTo() {
+	const open = useUi((s) => s.jump);
+	const actions = useActions();
+	const deck = useDeck();
+	const [value, setValue] = useState("");
+	const input = useRef(null);
+	useLayoutEffect(() => {
+		if (open) {
+			setValue("");
+			input.current?.focus();
+		}
+	}, [open]);
+	if (!open) return null;
+	const total = deck.columns.reduce((n, c) => n + c.slides.length, 0);
+	const submit = () => {
+		const raw = value.trim();
+		if (/^\d+$/.test(raw)) actions.gotoFlat(Number(raw) - 1);
+		else if (/^\d+\.\d+$/.test(raw)) {
+			const [h, v] = raw.split(".").map((n) => Number(n) - 1);
+			actions.goto(h, v);
+		} else if (raw) actions.gotoId(raw);
+		actions.toggleJump(false);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-jump",
+		role: "dialog",
+		"aria-label": "Jump to slide",
+		children: /* @__PURE__ */ jsx("input", {
+			ref: input,
+			autoFocus: true,
+			value,
+			placeholder: `Slide 1–${total}, or an id`,
+			onChange: (e) => setValue(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") submit();
+				if (e.key === "Escape") actions.toggleJump(false);
+				e.stopPropagation();
+			},
+			onBlur: () => actions.toggleJump(false)
+		})
+	});
+}
+function SearchSheet() {
+	const open = useUi((s) => s.search);
+	const actions = useActions();
+	const deck = useDeck();
+	const [query, setQuery] = useState("");
+	const [texts, setTexts] = useState(/* @__PURE__ */ new Map());
+	const input = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		setTimeout(() => input.current?.focus(), 0);
+		const map = /* @__PURE__ */ new Map();
+		deck.columns.forEach((c) => c.slides.forEach((s, v) => {
+			const t = s.text;
+			if (t) map.set(`${c.h},${v}`, t);
+		}));
+		for (const el of document.querySelectorAll(".deck-slide[data-h]")) {
+			const k = `${el.dataset.h},${el.dataset.v}`;
+			if (!map.has(k)) map.set(k, el.innerText);
+		}
+		setTexts(map);
+	}, [open, deck.columns]);
+	const hits = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return [];
+		const out = [];
+		deck.columns.forEach((c) => c.slides.forEach((s, v) => {
+			const text = texts.get(`${c.h},${v}`) ?? "";
+			const i = text.toLowerCase().indexOf(q);
+			if (i === -1 && !(s.title ?? "").toLowerCase().includes(q)) return;
+			const start = Math.max(0, i - 40);
+			out.push({
+				h: c.h,
+				v,
+				title: s.title,
+				snippet: i === -1 ? s.title ?? "" : `…${text.slice(start, i + q.length + 40)}…`
+			});
+		}));
+		return out.slice(0, 20);
+	}, [
+		query,
+		texts,
+		deck.columns
+	]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-sheet deck-search",
+		role: "dialog",
+		"aria-label": "Search",
+		onClick: () => actions.toggleSearch(false),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "deck-sheet-panel",
+			onClick: (e) => e.stopPropagation(),
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: input,
+				value: query,
+				placeholder: "Search the deck",
+				onChange: (e) => setQuery(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Escape") actions.toggleSearch(false);
+					if (e.key === "Enter" && hits[0]) {
+						actions.goto(hits[0].h, hits[0].v);
+						actions.toggleSearch(false);
+					}
+					e.stopPropagation();
+				}
+			}), /* @__PURE__ */ jsxs("ul", { children: [hits.map((hit) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					actions.goto(hit.h, hit.v);
+					actions.toggleSearch(false);
+				},
+				children: [/* @__PURE__ */ jsx("strong", { children: hit.title ?? `Slide ${hit.h + 1}${hit.v ? `.${hit.v + 1}` : ""}` }), /* @__PURE__ */ jsx("span", { children: hit.snippet })]
+			}) }, `${hit.h},${hit.v}`)), query && !hits.length ? /* @__PURE__ */ jsx("li", {
+				className: "deck-search-empty",
+				children: "Nothing matches."
+			}) : null] })]
+		})
+	});
+}
+/** The current slide's notes, rendered under the stage when `showNotes` is on. */
+function NotesFooter() {
+	const { meta } = useCurrentSlide();
+	const [Notes, setNotes] = useState(null);
+	useEffect(() => {
+		let alive = true;
+		setNotes(null);
+		if (!meta?.loadNotes) return;
+		loadSlide(meta);
+		meta.loadNotes().then((m) => alive && setNotes(() => m.default));
+		return () => {
+			alive = false;
+		};
+	}, [meta]);
+	if (!Notes) return null;
+	return /* @__PURE__ */ jsx("aside", {
+		className: "deck-notes-footer",
+		children: /* @__PURE__ */ jsx(Notes, {})
+	});
+}
+function Toast() {
+	const toast = useUi((s) => s.toast);
+	return /* @__PURE__ */ jsx("div", {
+		className: "deck-toast",
+		"data-on": toast ? "true" : void 0,
+		role: "status",
+		children: toast
+	});
+}
+//#endregion
+export { Chrome, Controls, HelpSheet, JumpTo, MadeWith, NotesFooter, PauseCurtain, Progress, SearchSheet, SlideNumber, Toast };

package/dist/react/context.d.ts

@@ -0,0 +1,165 @@
+import { GlossaryEntry } from "../glossary/model.js";
+import { Column, DeckConfig, DeckManifest, MagicMoveData, SlideMeta, SlideOptions } from "../core/model.js";
+import { ClickRegistry } from "../core/clicks.js";
+import { Layout } from "../core/layout.js";
+import { NavState } from "../core/navigation.js";
+import { Store } from "../core/store.js";
+import { ComponentType } from "react";
+//#region src/react/context.d.ts
+/** Which page of the deck app is showing. */
+export type ViewMode = "play" | "presenter" | "audience" | "print" | "stats" | "notes";
+/** What the lightbox can show; "sketch" is an Excalidraw canvas keyed by its sketch. */
+export type LightboxKind = "image" | "video" | "iframe" | "sketch";
+export interface UiState {
+  help: boolean;
+  jump: boolean;
+  search: boolean;
+  lightbox: {
+    kind: LightboxKind;
+    src: string;
+    fit: string;
+  } | null;
+  /** The zoomed-in point in stage coordinates, or null. */
+  zoom: {
+    x: number;
+    y: number;
+    scale: number;
+  } | null;
+  drawing: boolean;
+  pointer: boolean;
+  spotlight: boolean;
+  colorScheme: "light" | "dark";
+  cursorHidden: boolean;
+  fullscreen: boolean;
+  /** The scroll view is on (by config, the `?view=scroll` flag, or a narrow viewport). */
+  scroll: boolean;
+  /** Shown for a moment when the audience tries a bound key the presenter has disabled, etc. */
+  toast: string | null;
+  /** Vim's `f`: labels on every link and control, type one to use it. */
+  hints: boolean;
+  themeMenu: boolean;
+  /** This screen's theme — its own choice, kept in the browser; starts at the deck's. */
+  theme: string;
+  /** Whether this window has a projector window of its own open (the presenter's share button). */
+  projectorOpen: boolean;
+  /** The presenter's switch: term cards opened here also open on every screen in the room. */
+  termSync: boolean;
+}
+/** The term card on show in this window: which mention of which term, and whose doing. */
+export interface TermReveal {
+  /** The slide it is on, "h,v". */
+  slide: string;
+  /** The glossary entry's id, or a one-off `<Term def>`'s. */
+  id: string;
+  /** Which of the slide's mentions of that term, in document order — every screen runs the same build. */
+  n: number;
+  /** The related entry the card was swapped to through a "see also" chip, or null. */
+  view: string | null;
+  /** Opened by a click, a tap or a hint label: stays until dismissed. A hover's card leaves with the pointer. */
+  pinned: boolean;
+  /** Opened in this window, or relayed from the presenter through the room. */
+  from: "local" | "remote";
+}
+export interface DeckActions {
+  next(): void;
+  prev(): void;
+  nextSlide(): void;
+  prevSlide(): void;
+  left(): void;
+  right(): void;
+  up(): void;
+  down(): void;
+  first(): void;
+  last(): void;
+  goto(h: number, v?: number, click?: number): void;
+  gotoFlat(flat: number): void;
+  gotoId(id: string): void;
+  /** Follow the presenter's navigation, jumping to where they are — or stop following. */
+  setFollow(on: boolean): void;
+  /**
+   * Open a window that mirrors this deck and nothing else — a second screen, or the one window to
+   * share on a call — or close the one this window opened. See `Flags.projector`.
+   */
+  toggleProjector(force?: boolean): void;
+  toggleOverview(force?: boolean): void;
+  togglePause(force?: boolean): void;
+  toggleHelp(force?: boolean): void;
+  toggleJump(force?: boolean): void;
+  toggleSearch(force?: boolean): void;
+  toggleFullscreen(): void;
+  toggleAutoSlide(): void;
+  toggleDrawing(force?: boolean): void;
+  togglePointer(force?: boolean): void;
+  toggleColorScheme(): void;
+  setColorScheme(scheme: "light" | "dark"): void;
+  toggleHints(force?: boolean): void;
+  toggleThemeMenu(force?: boolean): void;
+  toggleTermSync(force?: boolean): void;
+  setTheme(name: string): void;
+  openPresenter(): void;
+  openLightbox(kind: LightboxKind, src: string, fit?: string): void;
+  closeLightbox(): void;
+  zoomTo(x: number, y: number): void;
+  zoomOut(): void;
+  toast(message: string): void;
+}
+/**
+ * Where a navigation change came from, while it is being applied: the cross-window channel, the
+ * live room, the deck's own auto-slide — or nowhere, which means a person, here. A window
+ * forwards only what originated locally, or two windows would relay stale positions to each other
+ * forever; and only a move with no source at all ends this window's follow (see `NavState.follow`
+ * and `withTransition` in Deck.tsx).
+ */
+export type SyncSource = "channel" | "room" | "auto" | null;
+export interface DeckRuntime {
+  manifest: DeckManifest;
+  config: DeckConfig;
+  columns: Column[];
+  /** Per-slide resolved options, keyed "h,v". */
+  options: Map<string, SlideOptions>;
+  nav: Store<NavState>;
+  ui: Store<UiState>;
+  layout: Store<Layout>;
+  mode: ViewMode;
+  /** The URL base of the deck app, e.g. "/showcase/". */
+  base: string;
+  components: Record<string, ComponentType<Record<string, unknown>>>;
+  actions: DeckActions;
+  /** A window-scoped id, so a window ignores its own broadcast. */
+  windowId: string;
+  /** Set while a remote position is being applied (store listeners run synchronously). */
+  sync: {
+    source: SyncSource;
+  };
+  /** Whether this window is the presenter (drives the room and the audience). */
+  isPresenter: boolean;
+  /** Whether this window is a projector: it follows, always, and takes no input. */
+  projector: boolean;
+  /** The term card this window is showing, or null. One at a time. */
+  terms: Store<TermReveal | null>;
+  /** Definitions by id: the deck's glossary, plus every mounted one-off `<Term def>`. */
+  glossary: Map<string, GlossaryEntry>;
+}
+export declare const DeckContext: import("react").Context<DeckRuntime | null>;
+export declare function useDeck(): DeckRuntime;
+/** What one mounted slide knows about itself. */
+export interface SlideContextValue {
+  meta: SlideMeta;
+  options: SlideOptions;
+  h: number;
+  v: number;
+  /** The slide currently shown (as opposed to a preloaded neighbour, an overview tile, a print page). */
+  active: boolean;
+  /** The click to render at. Past slides render fully clicked, future ones at 0. */
+  click: number;
+  registry: ClickRegistry;
+  magic: MagicMoveData[] | null;
+  /** True inside the presenter's next-slide preview, the overview and print: no media, no autoplay. */
+  preview: boolean;
+  /** Whether glossary terms respond here (see `SlideFrameProps.terms`). */
+  terms: boolean;
+}
+export declare const SlideContext: import("react").Context<SlideContextValue | null>;
+export declare function useSlide(): SlideContextValue;
+export declare function useSlideOptional(): SlideContextValue | null;
+//#endregion

package/dist/react/context.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+//#region src/react/context.ts
+const DeckContext = createContext(null);
+function useDeck() {
+	const ctx = useContext(DeckContext);
+	if (!ctx) throw new Error("useDeck must be used inside <Deck>");
+	return ctx;
+}
+const SlideContext = createContext(null);
+function useSlide() {
+	const ctx = useContext(SlideContext);
+	if (!ctx) throw new Error("This component must be used inside a slide");
+	return ctx;
+}
+function useSlideOptional() {
+	return useContext(SlideContext);
+}
+//#endregion
+export { DeckContext, SlideContext, useDeck, useSlide, useSlideOptional };