@intellectif/lk-react 23.1.0 → 23.1.2

package/dist/InteractiveVideo-BguGv-HA.cjs

@@ -0,0 +1,2955 @@
+'use client';
+const require_ai_LkAiProvider = require("./ai/LkAiProvider.cjs");
+const require_useAiHelp = require("./useAiHelp-h9yOLFqt.cjs");
+const require_LkIntlProvider = require("./LkIntlProvider-oi57lYB0.cjs");
+const require_ActivityErrorBoundary = require("./ActivityErrorBoundary-B379hvtL.cjs");
+const require_Dictation = require("./Dictation-jECzL88E.cjs");
+const require_FillInTheBlanks = require("./FillInTheBlanks-BpKhdHg2.cjs");
+const require_GapSelect = require("./GapSelect-payTq_Zn.cjs");
+const require_MultipleChoice = require("./MultipleChoice-COn5MtKY.cjs");
+const require_ReadAloud = require("./ReadAloud-akDehitT.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _intellectif_lk_core = require("@intellectif/lk-core");
+//#region src/components/InteractiveVideo/vtt.ts
+/** Bytes of WebVTT read at most. A caption file is text; this is several hours of it. */
+const MAX_VTT_LENGTH = 2e6;
+/** Cues kept at most, for the same reason: the transcript renders every one. */
+const MAX_CUES = 1e4;
+const BYTE_ORDER_MARK = String.fromCharCode(65279);
+const TIMESTAMP = /^(?:(\d+):)?([0-5]\d):([0-5]\d)\.(\d{3})$/;
+function seconds(stamp) {
+	const match = TIMESTAMP.exec(stamp.trim());
+	if (match === null) return;
+	const [, hours = "0", minutes = "0", secs = "0", millis = "0"] = match;
+	return Number(hours) * 3600 + Number(minutes) * 60 + Number(secs) + Number(millis) / 1e3;
+}
+const ENTITIES = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'",
+	nbsp: String.fromCharCode(160),
+	lrm: String.fromCharCode(8206),
+	rlm: String.fromCharCode(8207)
+};
+/**
+* A cue payload as the text a learner reads: markup removed (`<v Speaker>`,
+* `<i>`, `<c.class>`, inline timestamps), entities decoded, lines joined with
+* a space.
+*/
+function plainText(payload) {
+	return payload.replace(/<[^>]*>/g, "").replace(/&(#x?[0-9a-f]+|[a-z]+);/gi, (whole, name) => {
+		if (name.startsWith("#")) {
+			const code = name[1] === "x" || name[1] === "X" ? Number.parseInt(name.slice(2), 16) : Number.parseInt(name.slice(1), 10);
+			return Number.isFinite(code) && code > 0 && code <= 1114111 ? String.fromCodePoint(code) : whole;
+		}
+		return ENTITIES[name.toLowerCase()] ?? whole;
+	}).replace(/\s*\n\s*/g, " ").trim();
+}
+/**
+* Reads a WebVTT file into cues, sorted by start. Never throws: a malformed cue
+* is skipped, and text that is not WebVTT at all answers an empty list.
+*
+* The SDK parses captions itself rather than handing them to a `<track>`:
+* the caption preview on the progress bar, the transcript and its search all
+* need the cues as data, a host whose caption URL needs its credentials can
+* pass the text in, and a test environment with no media stack can read them.
+* Cue settings (position, alignment) are ignored — the player draws captions
+* in one place, above its own controls.
+*/
+function parseWebVtt(input) {
+	if (typeof input !== "string") return [];
+	const raw = input.slice(0, MAX_VTT_LENGTH);
+	const text = (raw.startsWith(BYTE_ORDER_MARK) ? raw.slice(1) : raw).replace(/\r\n?/g, "\n");
+	if (!/^WEBVTT(?:[ \t].*)?(?:\n|$)/.test(text)) return [];
+	const cues = [];
+	for (const block of text.split(/\n{2,}/)) {
+		if (cues.length >= MAX_CUES) break;
+		const lines = block.split("\n");
+		const timingIndex = lines.findIndex((line) => line.includes("-->"));
+		if (timingIndex === -1) continue;
+		const [from = "", rest = ""] = lines[timingIndex].split("-->");
+		const start = seconds(from);
+		const end = seconds(rest.trim().split(/\s+/)[0] ?? "");
+		if (start === void 0 || end === void 0 || end <= start) continue;
+		const payload = plainText(lines.slice(timingIndex + 1).join("\n"));
+		if (payload === "") continue;
+		cues.push({
+			start,
+			end,
+			text: payload
+		});
+	}
+	return cues.map((cue, index) => ({
+		cue,
+		index
+	})).sort((a, b) => a.cue.start - b.cue.start || a.index - b.index).map(({ cue }) => cue);
+}
+/**
+* The cue showing at `time`, or -1. When cues overlap, the one that started
+* last wins — the newest line is the one being spoken.
+*/
+function cueIndexAt(cues, time) {
+	let low = 0;
+	let high = cues.length - 1;
+	let found = -1;
+	while (low <= high) {
+		const middle = low + high >> 1;
+		if (cues[middle].start <= time) {
+			found = middle;
+			low = middle + 1;
+		} else high = middle - 1;
+	}
+	for (let index = found; index >= 0 && index > found - 8; index -= 1) if (time < cues[index].end) return index;
+	return -1;
+}
+//#endregion
+//#region src/components/InteractiveVideo/caption-cues.ts
+/** A track as the cue cache knows it. */
+function trackKey(track) {
+	return `${track.kind}:${track.srclang}:${track.src}`;
+}
+/** No cues, as one shared array: a line without any keeps one identity. */
+const NO_CUES = [];
+/**
+* One caption line's cues: loaded when its track changes, and never another
+* track's. A late answer for a track the line has since left is dropped — a
+* slow Spanish file must never land in a line that now shows Portuguese — and
+* until the new track's cues arrive the line shows nothing rather than the old
+* language, unless they are cached already.
+*/
+function useCaptionLine(track, load, peek) {
+	const key = track === void 0 ? void 0 : trackKey(track);
+	const [line, setLine] = (0, react.useState)({
+		cues: NO_CUES,
+		failed: false
+	});
+	const trackRef = (0, react.useRef)(track);
+	trackRef.current = track;
+	(0, react.useEffect)(() => {
+		const wanted = trackRef.current;
+		if (key === void 0 || wanted === void 0) return;
+		let live = true;
+		load(wanted).then((cues) => {
+			if (live) setLine({
+				key,
+				cues,
+				failed: false
+			});
+		}, () => {
+			if (live) setLine({
+				key,
+				cues: NO_CUES,
+				failed: true
+			});
+		});
+		return () => {
+			live = false;
+		};
+	}, [key, load]);
+	if (key === void 0) return {
+		cues: NO_CUES,
+		failed: false
+	};
+	if (line.key === key) return line;
+	return {
+		cues: peek(key) ?? NO_CUES,
+		failed: false
+	};
+}
+/**
+* Parsed cues per track, for the life of the mount: switching languages back
+* and forth never refetches. The promise while a file loads — so a swap, which
+* asks for a file both lines want, makes one request — and the cues once it
+* has. A failure is forgotten, so coming back to that language tries again.
+*/
+function useCueLoader(captionsLoader) {
+	const loaderRef = (0, react.useRef)(captionsLoader);
+	loaderRef.current = captionsLoader;
+	const loading = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const loaded = (0, react.useRef)(/* @__PURE__ */ new Map());
+	return {
+		loadCues: (0, react.useCallback)((track) => {
+			const key = trackKey(track);
+			const pending = loading.current.get(key);
+			if (pending !== void 0) return pending;
+			const request = Promise.resolve().then(() => loaderRef.current ? loaderRef.current(track) : fetch(track.src, { credentials: "same-origin" }).then((response) => {
+				if (!response.ok) throw new Error(String(response.status));
+				return response.text();
+			})).then((text) => {
+				const parsed = parseWebVtt(text);
+				if (parsed.length === 0) throw new Error("The caption file held no cues.");
+				loaded.current.set(key, parsed);
+				return parsed;
+			});
+			loading.current.set(key, request);
+			request.catch(() => {
+				loading.current.delete(key);
+			});
+			return request;
+		}, []),
+		peekCues: (0, react.useCallback)((key) => loaded.current.get(key), [])
+	};
+}
+//#endregion
+//#region src/components/InteractiveVideo/format.ts
+/** The speeds a learner can choose, slowest first. */
+const SPEEDS = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	1.75,
+	2,
+	2.5
+];
+/**
+* A time as a clock: `4:05`, or `1:02:03` past an hour. Whole seconds,
+* rounded down, so the clock never shows a second that has not happened yet.
+*/
+function clock(value) {
+	const total = Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const secs = total % 60;
+	const pad = (n) => String(n).padStart(2, "0");
+	return hours > 0 ? `${hours}:${pad(minutes)}:${pad(secs)}` : `${minutes}:${pad(secs)}`;
+}
+/** The next speed in `direction` from `current`, held inside the list. */
+function nudgeSpeed(current, direction) {
+	const at = SPEEDS.indexOf(current);
+	const from = at === -1 ? SPEEDS.indexOf(1) : at;
+	return SPEEDS[Math.min(SPEEDS.length - 1, Math.max(0, from + direction))];
+}
+//#endregion
+//#region src/components/InteractiveVideo/icons.tsx
+/**
+* The player's icons: inline SVG, one stroke weight, drawn in `currentColor`,
+* so a theme recolours them and forced-colours mode repaints them. Inline
+* because the package has no runtime dependencies, and a 24 × 24 grid keeps
+* every icon on one optical size. Always decorative: the button that holds
+* one carries the name.
+*/
+function Icon({ children, filled = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "lk-iv-icon",
+		viewBox: "0 0 24 24",
+		width: "20",
+		height: "20",
+		fill: filled ? "currentColor" : "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children
+	});
+}
+const PlayIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+	filled: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 5.5v13a1 1 0 0 0 1.5.86l10.2-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" })
+});
+const PauseIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, {
+	filled: true,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: "6.5",
+		y: "5",
+		width: "3.5",
+		height: "14",
+		rx: "1"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: "14",
+		y: "5",
+		width: "3.5",
+		height: "14",
+		rx: "1"
+	})]
+});
+const ReplayIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 12a8 8 0 1 0 2.4-5.7" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 4v4h4" })] });
+const BackIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M11 6.5 5.5 12l5.5 5.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18.5 6.5 13 12l5.5 5.5" })] });
+const ForwardIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m13 6.5 5.5 5.5-5.5 5.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.5 6.5 11 12l-5.5 5.5" })] });
+const VolumeIcon = ({ level }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4Z" }), level === "muted" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m16 9.5 5 5m0-5-5 5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M15.5 9.5a3.5 3.5 0 0 1 0 5" }), level === "high" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 7a7 7 0 0 1 0 10" }) : null] })] });
+const CaptionsIcon = ({ on }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: "3",
+		y: "5.5",
+		width: "18",
+		height: "13",
+		rx: "2.5"
+	}),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10 10.5a2 2 0 1 0 0 3M16 10.5a2 2 0 1 0 0 3" }),
+	on ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m4 20 16-16" })
+] });
+const SettingsIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+	cx: "12",
+	cy: "12",
+	r: "3"
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 3.5v2M12 18.5v2M20.5 12h-2M5.5 12h-2M18 6l-1.4 1.4M7.4 16.6 6 18M18 18l-1.4-1.4M7.4 7.4 6 6" })] });
+const ContentsIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9 6.5h11M9 12h11M9 17.5h11" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01" })] });
+const PictureInPictureIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+	x: "3",
+	y: "5",
+	width: "18",
+	height: "14",
+	rx: "2"
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+	x: "12",
+	y: "11.5",
+	width: "6.5",
+	height: "5",
+	rx: "1"
+})] });
+const FullscreenIcon = ({ on }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: on ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9 4v3a2 2 0 0 1-2 2H4M20 9h-3a2 2 0 0 1-2-2V4M4 15h3a2 2 0 0 1 2 2v3M15 20v-3a2 2 0 0 1 2-2h3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 9V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v3M20 15v3a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-3" }) });
+const CheckIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) });
+const ChevronIcon = ({ direction }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: direction === "right" ? "m9.5 6 6 6-6 6" : "m14.5 6-6 6 6 6" }) });
+const CloseIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6.5 6.5 11 11m0-11-11 11" }) });
+const AlertIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Icon, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 4 2.8 19.5h18.4L12 4Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 10v4M12 17h.01" })] });
+//#endregion
+//#region src/components/InteractiveVideo/keyed-state.ts
+/**
+* A set held in state — what the player draws — beside a ref that always holds
+* its latest value, for the callbacks that read it between renders, and a
+* toggle that keeps one identity for the life of the player. Toggling a key to
+* where it already is changes nothing, so no render follows.
+*/
+function useKeySet(initial) {
+	const [keys, setKeys] = (0, react.useState)(initial);
+	const latest = (0, react.useRef)(keys);
+	latest.current = keys;
+	return [
+		keys,
+		latest,
+		(0, react.useCallback)((key, on) => {
+			setKeys((previous) => {
+				if (previous.has(key) === on) return previous;
+				const next = new Set(previous);
+				if (on) next.add(key);
+				else next.delete(key);
+				latest.current = next;
+				return next;
+			});
+		}, [])
+	];
+}
+/**
+* A map held in state, with a setter that keeps one identity: `undefined`
+* removes the key, and setting a value it already has changes nothing.
+*/
+function useKeyMap() {
+	const [entries, setEntries] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	return [entries, (0, react.useCallback)((key, value) => {
+		setEntries((previous) => {
+			if (previous.get(key) === value) return previous;
+			const next = new Map(previous);
+			if (value === void 0) next.delete(key);
+			else next.set(key, value);
+			return next;
+		});
+	}, [])];
+}
+//#endregion
+//#region src/components/InteractiveVideo/shortcuts.ts
+/** The keys of each row, as shown in the list. */
+const SHORTCUT_KEYS = [
+	{
+		action: "play-pause",
+		keys: "Space / K"
+	},
+	{
+		action: "jump-10",
+		keys: "J / L"
+	},
+	{
+		action: "jump-5",
+		keys: "← / →"
+	},
+	{
+		action: "jump-1",
+		keys: "Shift + ← / →"
+	},
+	{
+		action: "frame",
+		keys: ", / ."
+	},
+	{
+		action: "speed",
+		keys: "< / >"
+	},
+	{
+		action: "percent",
+		keys: "0 – 9"
+	},
+	{
+		action: "start-end",
+		keys: "Home / End"
+	},
+	{
+		action: "chapter",
+		keys: "[ / ]"
+	},
+	{
+		action: "mute",
+		keys: "M"
+	},
+	{
+		action: "captions",
+		keys: "C"
+	},
+	{
+		action: "secondary-captions",
+		keys: "Shift + C"
+	},
+	{
+		action: "transcript",
+		keys: "T"
+	},
+	{
+		action: "picture-in-picture",
+		keys: "P"
+	},
+	{
+		action: "fullscreen",
+		keys: "F"
+	},
+	{
+		action: "shortcut-list",
+		keys: "?"
+	}
+];
+/** Frame step: an approximation, since a video does not report its frame rate. */
+const FRAME_SECONDS = 1 / 30;
+//#endregion
+//#region src/components/InteractiveVideo/tracks.ts
+const primarySubtag = (tag) => (tag.split("-")[0] ?? tag).toLowerCase();
+/** Two tracks in one language: the `captions` one, which transcribes rather than translates. */
+function preferCaptions(tracks) {
+	return tracks.find((track) => track.kind === "captions") ?? tracks[0];
+}
+/** The track for `language`: an exact match, else one of the same primary language (`pt` ↔ `pt-BR`). */
+function matchLanguage(tracks, language) {
+	const wanted = language.toLowerCase();
+	const exact = tracks.filter((track) => track.srclang.toLowerCase() === wanted);
+	if (exact.length > 0) return preferCaptions(exact);
+	const family = primarySubtag(wanted);
+	return preferCaptions(tracks.filter((track) => primarySubtag(track.srclang) === family));
+}
+/** Tracks a player draws: the caption and subtitle kinds. */
+function drawable(tracks) {
+	return tracks.filter((track) => track.kind === "captions" || track.kind === "subtitles");
+}
+/**
+* The tracks that can be a second line beside `primary`: every drawable track
+* in a different language from it. A second track in the primary's own
+* language — the `subtitles` beside its `captions` — would only print the same
+* words twice, so it is never offered and never chosen.
+*/
+function secondaryCandidates(tracks, primary) {
+	const taken = primary?.srclang.toLowerCase();
+	return drawable(tracks).filter((track) => track.srclang.toLowerCase() !== taken);
+}
+/**
+* Which track each caption line shows, from the learner's two choices.
+*
+* The primary line always shows something while there are tracks:
+* 1. the track in `captionLanguage` (case-insensitive);
+* 2. else one of the same primary language — `pt` finds `pt-BR`, `es` finds
+*    `es-419`;
+* 3. else the `default` track;
+* 4. else the first.
+*
+* Where two tracks share a language, the `captions` one wins.
+*
+* The secondary line is stricter: it appears only when `secondaryCaptionLanguage`
+* is set and matches a track in another language, by steps 1 and 2 alone —
+* never the default, never the first. A second line the learner did not choose
+* must never appear.
+*/
+function resolveCaptionTracks(tracks, preferences) {
+	const usable = drawable(tracks);
+	if (usable.length === 0) return {};
+	const primary = (preferences.captionLanguage === null ? void 0 : matchLanguage(usable, preferences.captionLanguage)) ?? usable.find((track) => track.default === true) ?? usable[0];
+	const second = preferences.secondaryCaptionLanguage;
+	const secondary = second === null ? void 0 : matchLanguage(secondaryCandidates(usable, primary), second);
+	return secondary === void 0 ? { primary } : {
+		primary,
+		secondary
+	};
+}
+/** How long two cues share, in seconds; zero or less when they do not meet. */
+const overlap = (a, b) => Math.min(a.end, b.end) - Math.max(a.start, b.start);
+/**
+* How far back past the last cue that starts before a second-language cue to
+* look for one still running. Captions overlap rarely and briefly; this is the
+* bound `cueIndexAt` uses for the same reason.
+*/
+const LOOKBACK = 8;
+/**
+* The second-language cues that belong under each first-language line of the
+* transcript, by index of the first-language cue.
+*
+* A second-language cue belongs to the line it overlaps MOST — the two tracks
+* need not share timings, and a translation segmented differently still pairs
+* sensibly — and to the earlier line on a tie. A cue that overlaps no line is
+* left out: it is still drawn over the video at its own time, but a transcript
+* row is a first-language line, and there is none for it to sit under.
+*
+* Both lists are sorted by start, as `parseWebVtt` returns them.
+*/
+function pairSecondaryCues(primary, secondary) {
+	const rows = primary.map(() => []);
+	for (const cue of secondary) {
+		let low = 0;
+		let high = primary.length;
+		while (low < high) {
+			const middle = low + high >> 1;
+			if (primary[middle].start < cue.end) low = middle + 1;
+			else high = middle;
+		}
+		let best = -1;
+		let bestShare = 0;
+		let misses = 0;
+		for (let index = low - 1; index >= 0 && misses <= LOOKBACK; index -= 1) {
+			const share = overlap(primary[index], cue);
+			if (share > 0) {
+				misses = 0;
+				if (share >= bestShare) {
+					best = index;
+					bestShare = share;
+				}
+			} else misses += 1;
+		}
+		if (best !== -1) rows[best].push(cue);
+	}
+	return rows;
+}
+//#endregion
+//#region src/components/InteractiveVideo/panels.tsx
+/**
+* A menu of items, with the arrow keys moving between them and Escape closing
+* it — focus then goes back to the button that opened it. When the menu opens
+* focus goes to the row a sub-page was left for, when coming back from one;
+* else the checked item; else the first.
+*/
+function Menu({ label, onClose, children, returnTo }) {
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const items = ref.current?.querySelectorAll("[role^=\"menuitem\"]");
+		const back = returnTo === void 0 ? null : ref.current?.querySelector(`[data-menu-key="${returnTo}"]`);
+		const checked = ref.current?.querySelector("[aria-checked=\"true\"]");
+		(back ?? checked ?? items?.[0])?.focus();
+	}, [returnTo]);
+	const onKeyDown = (event) => {
+		const items = Array.from(ref.current?.querySelectorAll("[role^=\"menuitem\"]") ?? []);
+		const at = items.indexOf(document.activeElement);
+		const move = (to) => {
+			event.preventDefault();
+			items[(to + items.length) % items.length]?.focus();
+		};
+		if (event.key === "ArrowDown") move(at + 1);
+		else if (event.key === "ArrowUp") move(at - 1);
+		else if (event.key === "Home") move(0);
+		else if (event.key === "End") move(items.length - 1);
+		else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			onClose();
+		}
+		event.stopPropagation();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: "lk-iv-menu",
+		role: "menu",
+		"aria-label": label,
+		onKeyDown,
+		children
+	});
+}
+function SpeedMenu({ speed, strings, onChoose, onClose }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Menu, {
+		label: strings.media.speed,
+		onClose,
+		children: SPEEDS.map((rate) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			role: "menuitemradio",
+			"aria-checked": rate === speed,
+			className: "lk-iv-menu-item",
+			onClick: () => onChoose(rate),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoSpeedValue(rate) }), rate === speed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null]
+		}, rate))
+	});
+}
+function SettingsMenu({ preferences, tracks, primaryTrack, secondaryTrack, captionsFailed, strings, onChange, onCaptionTrack, onSecondaryTrack, onShowShortcuts, onClose }) {
+	const [page, setPage] = (0, react.useState)("main");
+	const [returnTo, setReturnTo] = (0, react.useState)(void 0);
+	const open = (next) => {
+		setReturnTo(void 0);
+		setPage(next);
+	};
+	const leave = () => {
+		setReturnTo(page);
+		setPage(page === "second" ? "captions" : "main");
+	};
+	const captionsValue = !preferences.captions || primaryTrack === void 0 ? strings.videoOff : secondaryTrack === void 0 ? primaryTrack.label : strings.videoCaptionPair(primaryTrack.label, secondaryTrack.label);
+	const partners = secondaryCandidates(tracks, primaryTrack);
+	const failedNotes = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [captionsFailed.primary && page === "captions" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "lk-iv-menu-note",
+		role: "status",
+		children: strings.videoCaptionsFailed
+	}) : null, captionsFailed.secondary ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "lk-iv-menu-note",
+		role: "status",
+		children: strings.videoSecondaryCaptionsFailed
+	}) : null] });
+	const back = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		role: "menuitem",
+		className: "lk-iv-menu-item lk-iv-menu-back",
+		onClick: leave,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronIcon, { direction: "left" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: page === "captions" ? strings.videoCaptionLanguage : page === "second" ? strings.videoSecondCaptionLanguage : strings.videoCaptionSize })]
+	});
+	/** A radio naming a track in its own language and writing direction. */
+	const trackRadio = (track, on, choose) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		role: "menuitemradio",
+		"aria-checked": on,
+		className: "lk-iv-menu-item",
+		lang: track.srclang,
+		onClick: choose,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			dir: "auto",
+			children: track.label
+		}), on ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null]
+	}, `${track.kind}:${track.srclang}`);
+	if (page === "captions") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Menu, {
+		label: strings.videoCaptionLanguage,
+		onClose,
+		returnTo,
+		children: [
+			back,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "menuitemradio",
+				"aria-checked": !preferences.captions,
+				className: "lk-iv-menu-item",
+				onClick: () => onChange({ captions: false }),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoOff }), !preferences.captions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null]
+			}),
+			tracks.map((track) => trackRadio(track, preferences.captions && primaryTrack === track, () => onCaptionTrack(track))),
+			partners.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "menuitem",
+				className: "lk-iv-menu-item",
+				"data-menu-key": "second",
+				onClick: () => open("second"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoSecondCaptionLanguage }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "lk-iv-menu-value",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						dir: "auto",
+						lang: secondaryTrack?.srclang,
+						children: secondaryTrack === void 0 ? strings.videoOff : secondaryTrack.label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronIcon, { direction: "right" })]
+				})]
+			}) : null,
+			failedNotes
+		]
+	}, "captions");
+	if (page === "second") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Menu, {
+		label: strings.videoSecondCaptionLanguage,
+		onClose,
+		children: [
+			back,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "menuitemradio",
+				"aria-checked": secondaryTrack === void 0,
+				className: "lk-iv-menu-item",
+				onClick: () => onSecondaryTrack(null),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoOff }), secondaryTrack === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null]
+			}),
+			partners.map((track) => trackRadio(track, secondaryTrack === track, () => onSecondaryTrack(track))),
+			failedNotes
+		]
+	}, "second");
+	if (page === "size") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Menu, {
+		label: strings.videoCaptionSize,
+		onClose,
+		children: [back, [
+			"small",
+			"medium",
+			"large"
+		].map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			role: "menuitemradio",
+			"aria-checked": preferences.captionSize === size,
+			className: "lk-iv-menu-item",
+			onClick: () => onChange({ captionSize: size }),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoCaptionSizeValue(size) }), preferences.captionSize === size ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}) : null]
+		}, size))]
+	}, "size");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Menu, {
+		label: strings.videoSettings,
+		onClose,
+		returnTo,
+		children: [
+			tracks.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "menuitem",
+					className: "lk-iv-menu-item",
+					"data-menu-key": "captions",
+					onClick: () => open("captions"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoCaptionLanguage }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "lk-iv-menu-value",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							dir: "auto",
+							children: captionsValue
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronIcon, { direction: "right" })]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "menuitem",
+					className: "lk-iv-menu-item",
+					"data-menu-key": "size",
+					onClick: () => open("size"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoCaptionSize }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "lk-iv-menu-value",
+						children: [strings.videoCaptionSizeValue(preferences.captionSize), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronIcon, { direction: "right" })]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "menuitemcheckbox",
+					"aria-checked": preferences.captionBackground,
+					className: "lk-iv-menu-item",
+					onClick: () => onChange({ captionBackground: !preferences.captionBackground }),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoCaptionBackground }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-menu-value",
+						children: preferences.captionBackground ? strings.videoOn : strings.videoOff
+					})]
+				})
+			] }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "menuitemcheckbox",
+				"aria-checked": preferences.shortcuts,
+				className: "lk-iv-menu-item",
+				onClick: () => onChange({ shortcuts: !preferences.shortcuts }),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoKeyboardShortcuts }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "lk-iv-menu-value",
+					children: preferences.shortcuts ? strings.videoOn : strings.videoOff
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "menuitem",
+				className: "lk-iv-menu-item",
+				onClick: onShowShortcuts,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: strings.videoShortcutList }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+					className: "lk-iv-kbd",
+					children: "?"
+				})]
+			})
+		]
+	}, "main");
+}
+/** The shortcut list, over the video. The same table the key handler reads. */
+function ShortcutSheet({ strings, onClose }) {
+	const closeRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		closeRef.current?.focus();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "lk-iv-sheet",
+		role: "dialog",
+		"aria-modal": "false",
+		"aria-label": strings.videoKeyboardShortcuts,
+		onKeyDown: (event) => {
+			if (event.key === "Escape" || event.key === "?") {
+				event.preventDefault();
+				event.stopPropagation();
+				onClose();
+			}
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "lk-iv-sheet-head",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "lk-iv-sheet-title",
+				children: strings.videoKeyboardShortcuts
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: closeRef,
+				type: "button",
+				className: "lk-iv-button",
+				"aria-label": strings.videoClose,
+				onClick: onClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+			className: "lk-iv-shortcuts",
+			children: SHORTCUT_KEYS.map(({ action, keys }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "lk-iv-shortcut",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+					className: "lk-iv-kbd",
+					children: keys
+				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: strings.videoShortcut(action) })]
+			}, action))
+		})]
+	});
+}
+/**
+* The panel below the video: the chapters and quizzes in time order, and the
+* transcript. Nothing here costs a request — the transcript is the captions,
+* already parsed.
+*/
+function ContentsPanel({ idPrefix, tab, onTab, chapters, quizzes, cues, primaryLanguage, secondaryCues, secondaryLanguage, activeCue, limit, strings, onSeek, onOpenQuiz }) {
+	const [query, setQuery] = (0, react.useState)("");
+	const listRef = (0, react.useRef)(null);
+	const followUntil = (0, react.useRef)(0);
+	const hasTranscript = cues.length > 0;
+	const shownTab = hasTranscript ? tab : "contents";
+	const paired = (0, react.useMemo)(() => pairSecondaryCues(cues, secondaryCues), [cues, secondaryCues]);
+	const lines = (0, react.useMemo)(() => {
+		const trimmed = query.trim().toLowerCase();
+		return cues.map((cue, index) => ({
+			cue,
+			index,
+			second: (paired[index] ?? []).filter((line) => line.start <= limit).map((line) => line.text).join(" ")
+		})).filter(({ cue }) => cue.start <= limit).filter(({ cue, second }) => trimmed === "" || cue.text.toLowerCase().includes(trimmed) || second.toLowerCase().includes(trimmed));
+	}, [
+		cues,
+		paired,
+		limit,
+		query
+	]);
+	(0, react.useEffect)(() => {
+		if (shownTab !== "transcript" || query.trim() !== "" || Date.now() < followUntil.current) return;
+		const active = listRef.current?.querySelector("[data-active=\"true\"]");
+		if (active !== null && active !== void 0 && listRef.current !== null) {
+			const list = listRef.current;
+			const top = active.offsetTop - list.clientHeight / 3;
+			list.scrollTo?.({
+				top,
+				behavior: "smooth"
+			});
+		}
+	}, [
+		activeCue,
+		shownTab,
+		query
+	]);
+	const rows = [...chapters.map((chapter) => ({
+		kind: "chapter",
+		at: chapter.at,
+		chapter
+	})), ...quizzes.map((quiz) => ({
+		kind: "quiz",
+		at: quiz.at,
+		quiz
+	}))].sort((a, b) => a.at - b.at || (a.kind === "chapter" ? -1 : 1));
+	const highlight = (text) => {
+		const trimmed = query.trim();
+		const at = trimmed === "" ? -1 : text.toLowerCase().indexOf(trimmed.toLowerCase());
+		if (at === -1) return text;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			text.slice(0, at),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", { children: text.slice(at, at + trimmed.length) }),
+			text.slice(at + trimmed.length)
+		] });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "lk-iv-panel",
+		"aria-label": strings.videoPanel,
+		children: [hasTranscript ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "lk-iv-tabs",
+			role: "tablist",
+			"aria-label": strings.videoPanel,
+			children: ["contents", "transcript"].map((name) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				role: "tab",
+				id: `${idPrefix}-tab-${name}`,
+				"aria-controls": `${idPrefix}-tabpanel`,
+				"aria-selected": shownTab === name,
+				tabIndex: shownTab === name ? 0 : -1,
+				className: "lk-iv-tab",
+				onClick: () => onTab(name),
+				onKeyDown: (event) => {
+					if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+						event.preventDefault();
+						onTab(name === "contents" ? "transcript" : "contents");
+					}
+				},
+				children: name === "contents" ? strings.videoContents : strings.videoTranscript
+			}, name))
+		}) : null, shownTab === "contents" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+			className: "lk-iv-contents",
+			...hasTranscript ? {
+				role: "tabpanel",
+				id: `${idPrefix}-tabpanel`,
+				"aria-labelledby": `${idPrefix}-tab-contents`
+			} : { "aria-label": strings.videoContents },
+			children: rows.map((row) => row.kind === "chapter" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				className: "lk-iv-contents-chapter",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "lk-iv-row",
+					onClick: () => onSeek(row.chapter.at),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-row-time",
+						children: clock(row.chapter.at)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-row-title",
+						children: row.chapter.title
+					})]
+				})
+			}, `c-${row.at}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				className: "lk-iv-contents-quiz",
+				"data-state": row.quiz.state,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "lk-iv-row",
+					onClick: () => onOpenQuiz(row.quiz.id),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "lk-iv-row-time",
+							children: clock(row.quiz.at)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "lk-iv-row-title",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-iv-marker-dot",
+									"data-state": row.quiz.state,
+									"aria-hidden": "true"
+								}),
+								row.quiz.title,
+								row.quiz.required ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-iv-tag",
+									children: strings.videoRequired
+								})] }) : null
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "lk-iv-row-status",
+							children: strings.videoQuizProgress(row.quiz.answered, row.quiz.total)
+						})
+					]
+				})
+			}, `q-${row.quiz.id}`))
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "lk-iv-transcript",
+			role: "tabpanel",
+			id: `${idPrefix}-tabpanel`,
+			"aria-labelledby": `${idPrefix}-tab-transcript`,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				id: `${idPrefix}-search`,
+				className: "lk-iv-search",
+				type: "search",
+				value: query,
+				placeholder: strings.videoTranscriptSearch,
+				"aria-label": strings.videoTranscriptSearch,
+				onChange: (event) => setQuery(event.target.value)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: listRef,
+				className: "lk-iv-lines",
+				onWheel: () => {
+					followUntil.current = Date.now() + 4e3;
+				},
+				onTouchMove: () => {
+					followUntil.current = Date.now() + 4e3;
+				},
+				children: lines.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "lk-iv-empty",
+					children: strings.videoTranscriptNoMatch
+				}) : lines.map(({ cue, index, second }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "lk-iv-line",
+					"data-active": index === activeCue || void 0,
+					onClick: () => onSeek(cue.start),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-row-time",
+						children: clock(cue.start)
+					}), secondaryCues.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						lang: primaryLanguage,
+						dir: "auto",
+						children: highlight(cue.text)
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "lk-iv-line-text",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							lang: primaryLanguage,
+							dir: "auto",
+							children: highlight(cue.text)
+						}), second === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "lk-iv-line-secondary",
+							lang: secondaryLanguage,
+							dir: "auto",
+							children: highlight(second)
+						})]
+					})]
+				}, `${cue.start}-${index}`))
+			})]
+		})]
+	});
+}
+/** Over the last frame: what the learner did, and where to go from here. */
+function EndScreen({ idPrefix, renderMode, quizzes, answered, total, percent, strings, onOpenQuiz, onWatchAgain, pending, onFinish }) {
+	const pendingId = `${idPrefix}-end-pending`;
+	const headingRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		headingRef.current?.focus();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		className: "lk-iv-end",
+		"aria-labelledby": `${idPrefix}-end-title`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "lk-iv-end-card",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					id: `${idPrefix}-end-title`,
+					ref: headingRef,
+					tabIndex: -1,
+					className: "lk-iv-end-title",
+					children: strings.videoEnded
+				}),
+				total > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "lk-iv-end-summary",
+					children: percent !== null && renderMode !== "exam" ? strings.videoEndScore(answered, total, percent) : strings.videoEndAnswered(answered, total)
+				}) : null,
+				quizzes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+					className: "lk-iv-end-list",
+					children: quizzes.map((quiz) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "lk-iv-row",
+						"data-state": quiz.state,
+						onClick: () => onOpenQuiz(quiz.id),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "lk-iv-row-time",
+								children: clock(quiz.at)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "lk-iv-row-title",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-iv-marker-dot",
+									"data-state": quiz.state,
+									"aria-hidden": "true"
+								}), quiz.title]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "lk-iv-row-status",
+								children: strings.videoQuizProgress(quiz.answered, quiz.total)
+							})
+						]
+					}) }, quiz.id))
+				}) : null,
+				onFinish !== void 0 && pending ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: pendingId,
+					className: "lk-iv-end-pending",
+					role: "status",
+					children: strings.videoAnswerPending
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "lk-iv-end-actions",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "lk-iv-action",
+						onClick: onWatchAgain,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplayIcon, {}), strings.videoWatchAgain]
+					}), onFinish !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "lk-iv-action lk-iv-action-primary",
+						"aria-disabled": pending || void 0,
+						"aria-describedby": pending ? pendingId : void 0,
+						onClick: onFinish,
+						children: strings.videoFinish
+					}) : null]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/InteractiveVideo/prefs.ts
+const DEFAULT_PREFERENCES = {
+	speed: 1,
+	volume: 1,
+	muted: false,
+	captions: true,
+	captionLanguage: null,
+	secondaryCaptionLanguage: null,
+	captionSize: "medium",
+	captionBackground: true,
+	panel: false,
+	shortcuts: true
+};
+const STORAGE_KEY = "lk.video.v1";
+/** A BCP 47 tag as a track's `srclang` carries one: `en`, `pt-BR`, `es-419`. */
+const LANGUAGE_TAG = /^[A-Za-z]{2,3}(-[A-Za-z0-9]{2,8})*$/;
+const BOOLEAN_FIELDS = [
+	"muted",
+	"captions",
+	"captionBackground",
+	"panel",
+	"shortcuts"
+];
+const LANGUAGE_FIELDS = ["captionLanguage", "secondaryCaptionLanguage"];
+/**
+* Every field of `raw` that is present and usable, clamped — and nothing at
+* all for a field that is absent or unusable, so a layer below it applies.
+*
+* Anything in storage is writable by the learner and survives a schema
+* change, so it is input from a stranger: one `volume: 50` must not mute every
+* video, and a `speed: null` must not pin playback at a rate the menu cannot
+* undo. A host's layers go through here too — a `speed: 3` is no more a rate
+* the menu can undo for having come from code.
+*
+* `null` is a value for the two language fields (the default track; no second
+* line), so it counts as present; an unparseable tag does not.
+*/
+function sanitizePartialPreferences(raw) {
+	if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return {};
+	const value = raw;
+	const has = (key) => Object.hasOwn(value, key);
+	const out = {};
+	if (has("speed") && SPEEDS.includes(value.speed)) out.speed = value.speed;
+	if (has("volume") && typeof value.volume === "number" && Number.isFinite(value.volume)) out.volume = Math.min(1, Math.max(0, value.volume));
+	for (const field of BOOLEAN_FIELDS) if (has(field) && typeof value[field] === "boolean") out[field] = value[field];
+	for (const field of LANGUAGE_FIELDS) {
+		const tag = value[field];
+		if (has(field) && (tag === null || typeof tag === "string" && LANGUAGE_TAG.test(tag))) out[field] = tag;
+	}
+	if (has("captionSize") && (value.captionSize === "small" || value.captionSize === "medium" || value.captionSize === "large")) out.captionSize = value.captionSize;
+	return out;
+}
+/** A pair of one language is no pair: the second line is dropped, case-insensitively. */
+function normalised(preferences) {
+	const { captionLanguage: first, secondaryCaptionLanguage: second } = preferences;
+	return first !== null && second !== null && first.toLowerCase() === second.toLowerCase() ? {
+		...preferences,
+		secondaryCaptionLanguage: null
+	} : preferences;
+}
+/**
+* The preferences in force, decided field by field, highest first:
+*
+* 1. `force` — the host's `preferences` prop, which overrides what the
+*    learner chose, on every mount;
+* 2. `stored` — what the learner chose in this browser;
+* 3. `defaults` — the host's `defaultPreferences` prop: a starting point, such
+*    as a language pair kept on the learner's account;
+* 4. the SDK's own defaults.
+*
+* Deciding per field is the point: a learner who has only ever changed the
+* volume has chosen no caption language, so the host's suggested pair applies
+* to them — where a whole stored object would have beaten it.
+*/
+function resolvePreferences(layers) {
+	return normalised({
+		...DEFAULT_PREFERENCES,
+		...sanitizePartialPreferences(layers.defaults),
+		...sanitizePartialPreferences(layers.stored),
+		...sanitizePartialPreferences(layers.force),
+		...sanitizePartialPreferences(layers.chosen)
+	});
+}
+/** `previous` with a learner's change applied, clamped and normalised like everything else. */
+function applyPreferenceChange(previous, change) {
+	return normalised({
+		...previous,
+		...sanitizePartialPreferences(change)
+	});
+}
+/**
+* What the learner chose in this browser: only the fields present in storage.
+* Every read goes through a `try`: a private window, blocked site data or a
+* sandboxed frame throws on `localStorage` itself.
+*/
+function readStoredPreferences() {
+	try {
+		const stored = globalThis.localStorage?.getItem(STORAGE_KEY);
+		return stored ? sanitizePartialPreferences(JSON.parse(stored)) : {};
+	} catch {
+		return {};
+	}
+}
+/**
+* Remembers a learner's change: the fields they changed, merged into what they
+* chose before. Only what the learner chose is stored — never a value the host
+* forced or suggested — so a host that later suggests a different pair still
+* reaches a learner who never picked one. A payload written by 15.0, which
+* stored every field, reads as every field chosen: the behaviour it had.
+*
+* A browser that will not store them loses nothing but the memory.
+*/
+function rememberPreferences(change) {
+	try {
+		const next = {
+			...readStoredPreferences(),
+			...sanitizePartialPreferences(change)
+		};
+		globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(next));
+	} catch {}
+}
+//#endregion
+//#region src/components/InteractiveVideo/quiz-engine.ts
+/**
+* The quiz playback has just reached, or undefined: the EARLIEST quiz with
+* `previous < at ≤ now` that has not been handled in this pass.
+*
+* Crossing, never equality: at 2.5× speed about 0.6 s of video passes between
+* two `timeupdate` events, so a quiz checked for `now === at` is missed. And
+* the earliest wins, so when a janky frame carries playback past two quizzes
+* at once, the player opens the first, stops there, and meets the second as
+* playback continues — no quiz is ever skipped by speed.
+*/
+function crossedQuiz(cues, previous, now, handled) {
+	let earliest;
+	for (const cue of cues) {
+		if (handled.has(cue.id) || !(previous < cue.at && cue.at <= now)) continue;
+		if (earliest === void 0 || cue.at < earliest.at) earliest = cue;
+	}
+	return earliest;
+}
+/** The quizzes that open when the video ends: every one at or past its duration. */
+function quizzesAtEnd(cues, duration, handled) {
+	return cues.filter((cue) => !handled.has(cue.id) && cue.at >= duration - .05).sort((a, b) => a.at - b.at);
+}
+/**
+* Where a seek from `from` to `to` may actually land.
+*
+* Backward is always free. Forward stops at the first `required` quiz whose
+* questions are not all answered — landing ON it, so it opens — and, under
+* `no-skip-ahead`, at the furthest point the learner has reached. The earlier
+* of the two limits wins, and the answer says which, so the player can tell
+* the learner why the seek stopped short.
+*/
+function limitSeek(timeline, from, to, furthest, finished) {
+	if (to <= from) return { at: to };
+	let at = to;
+	let hold;
+	if (timeline.navigation === "no-skip-ahead" && to > furthest) {
+		at = Math.max(from, furthest);
+		hold = {
+			kind: "no-skip-ahead",
+			furthest
+		};
+	}
+	const blocking = timeline.cues.filter((cue) => cue.required === true && cue.at > from && cue.at <= to && !finished(cue.id)).sort((a, b) => a.at - b.at)[0];
+	if (blocking !== void 0 && blocking.at <= at) return {
+		at: blocking.at,
+		hold: {
+			kind: "required",
+			cue: blocking
+		}
+	};
+	return hold === void 0 ? { at } : {
+		at,
+		hold
+	};
+}
+/**
+* The earliest point a resumed learner may start from: never past the first
+* `required` quiz with a question still unanswered, whatever the stored
+* position says — a resume is never a way past a required quiz.
+*/
+function limitResume(timeline, at, finished) {
+	const blocking = timeline.cues.filter((cue) => cue.required === true && cue.at < at && !finished(cue.id)).sort((a, b) => a.at - b.at)[0];
+	return blocking === void 0 ? at : Math.max(0, blocking.at - .25);
+}
+//#endregion
+//#region src/components/InteractiveVideo/Scrubber.tsx
+/** Half the widest the bubble may grow, in px: keeps it inside the track at the ends. */
+const BUBBLE_HALF = 120;
+/** How near the pointer must be to a marker, in px, for the bubble to name its quiz. */
+const MARKER_REACH = 8;
+/**
+* The progress bar.
+*
+* A thin line at rest and a thicker one under the pointer — the line, not the
+* control, is what should be visible — over a generous hit strip, so a thin bar
+* is still easy to grab. Pointer events with capture, so a drag that leaves the
+* bar keeps scrubbing. It is one slider for assistive technology; its markers
+* are drawn, not focusable, and a keyboard learner reaches quizzes through
+* `[` / `]` and the contents panel instead.
+*/
+function Scrubber({ current, duration, buffered, chapters, markers, cues, previewLimit, strings, onSeek, onScrubChange }) {
+	const trackRef = (0, react.useRef)(null);
+	const [hover, setHover] = (0, react.useState)(null);
+	const [dragging, setDragging] = (0, react.useState)(false);
+	const ready = duration > 0;
+	const percent = (value) => `${ready ? Math.min(100, Math.max(0, value / duration * 100)) : 0}%`;
+	const measure = (0, react.useCallback)((clientX) => {
+		const rect = trackRef.current?.getBoundingClientRect();
+		if (rect === void 0 || rect.width === 0 || !ready) return null;
+		const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+		return {
+			x: ratio * rect.width,
+			width: rect.width,
+			time: ratio * duration
+		};
+	}, [duration, ready]);
+	const onPointerDown = (event) => {
+		const at = measure(event.clientX);
+		if (at === null) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		setDragging(true);
+		onScrubChange(true);
+		setHover(at);
+		onSeek(at.time);
+	};
+	const onPointerMove = (event) => {
+		const at = measure(event.clientX);
+		if (at === null) return;
+		setHover(at);
+		if (dragging) onSeek(at.time);
+	};
+	const endDrag = (event) => {
+		if (!dragging) return;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		setDragging(false);
+		onScrubChange(false);
+	};
+	const onKeyDown = (event) => {
+		if (!ready) return;
+		const step = event.shiftKey ? 1 : 5;
+		const move = {
+			ArrowLeft: -step,
+			ArrowRight: step,
+			ArrowDown: -step,
+			ArrowUp: step,
+			PageDown: -30,
+			PageUp: 30
+		}[event.key];
+		if (move !== void 0) {
+			event.preventDefault();
+			event.stopPropagation();
+			onSeek(current + move);
+		} else if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			event.stopPropagation();
+			onSeek(event.key === "Home" ? 0 : duration);
+		}
+	};
+	const chapterAt = (time) => [...chapters].reverse().find((chapter) => chapter.at <= time);
+	const hoverCue = hover !== null && hover.time <= previewLimit ? cues[cueIndexAt(cues, hover.time)] : void 0;
+	const hoverMarker = hover === null ? void 0 : markers.find((marker) => Math.abs(marker.at / duration * hover.width - hover.x) <= MARKER_REACH);
+	const hoverChapter = hover === null ? void 0 : chapterAt(hover.time);
+	const bubbleLeft = hover === null ? 0 : hover.width > 240 ? Math.min(hover.width - BUBBLE_HALF, Math.max(BUBBLE_HALF, hover.x)) : hover.width / 2;
+	const currentChapter = chapterAt(current);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: trackRef,
+		className: "lk-iv-scrubber",
+		role: "slider",
+		tabIndex: ready ? 0 : -1,
+		"aria-label": strings.media.seek,
+		"aria-valuemin": 0,
+		"aria-valuemax": Math.round(duration),
+		"aria-valuenow": Math.round(current),
+		"aria-valuetext": currentChapter === void 0 ? strings.media.timeValue(clock(current), clock(duration)) : `${strings.media.timeValue(clock(current), clock(duration))}, ${currentChapter.title}`,
+		"data-dragging": dragging || void 0,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp: endDrag,
+		onPointerCancel: endDrag,
+		onPointerLeave: () => {
+			if (!dragging) setHover(null);
+		},
+		onKeyDown,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "lk-iv-scrubber-track",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "lk-iv-scrubber-buffered",
+						style: { width: percent(buffered) }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "lk-iv-scrubber-played",
+						style: { width: percent(current) }
+					}),
+					chapters.filter((chapter) => chapter.at > 0 && chapter.at < duration).map((chapter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-scrubber-gap",
+						style: { insetInlineStart: percent(chapter.at) }
+					}, `chapter-${chapter.at}`))
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "lk-iv-scrubber-thumb",
+				"aria-hidden": "true",
+				style: { insetInlineStart: percent(current) }
+			}),
+			markers.map((marker) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "lk-iv-marker",
+				"data-state": marker.state,
+				"data-required": marker.required || void 0,
+				"aria-hidden": "true",
+				style: { insetInlineStart: percent(Math.min(marker.at, duration)) }
+			}, marker.id)),
+			hover !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "lk-iv-bubble",
+				"aria-hidden": "true",
+				style: { insetInlineStart: `${bubbleLeft}px` },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "lk-iv-bubble-time",
+						children: [clock(hover.time), hoverChapter !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "lk-iv-bubble-chapter",
+							children: [" · ", hoverChapter.title]
+						}) : null]
+					}),
+					hoverMarker !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-bubble-quiz",
+						children: hoverMarker.label
+					}) : null,
+					hoverCue !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-bubble-caption",
+						children: hoverCue.text
+					}) : null
+				]
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/components/InteractiveVideo/InteractiveVideo.tsx
+/** What distinguishes one video's content from another's: when it changes, the player starts over. */
+function contentKey(group) {
+	try {
+		return JSON.stringify([
+			group.id,
+			group.stimulus,
+			group.items,
+			group.timeline
+		]);
+	} catch {
+		return String(group?.id);
+	}
+}
+/**
+* An interactive video: a video that pauses at each quiz so the learner can
+* answer it inside the player, then carries on.
+*
+* A formative tool, for lessons and practice — not for official summative
+* exams, which `<ActivitySequence>` delivers. See `renderMode`.
+*
+* The player state is keyed on the CONTENT, not on the object: a host that
+* rebuilds its activity objects on every render — `redactItemGroup` returns a
+* new one each call — must not restart the video or lose an answer. Only a
+* different video, different questions or a moved quiz starts it over.
+*/
+function InteractiveVideo$1(props) {
+	const key = (0, react.useMemo)(() => contentKey(props.group), [props.group]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Player, { ...props }, key);
+}
+/**
+* The next frame, or a timer where there are no frames: a page rendered in a
+* document that never paints — a test environment, a hidden iframe — must
+* still track the playhead and still announce.
+*/
+function onNextFrame(run) {
+	if (typeof requestAnimationFrame === "function") {
+		const frame = requestAnimationFrame(run);
+		return () => cancelAnimationFrame(frame);
+	}
+	const timer = setTimeout(run, 33);
+	return () => clearTimeout(timer);
+}
+/** What `video-captions-changed` reports: the language of each line on screen, or `null`. */
+function captionsShown(tracks, preferences) {
+	if (!preferences.captions) return {
+		srclang: null,
+		secondary: null
+	};
+	const shown = resolveCaptionTracks(tracks, preferences);
+	return {
+		srclang: shown.primary?.srclang ?? null,
+		secondary: shown.secondary?.srclang ?? null
+	};
+}
+/** One id per mount, for the quiz capture groups. Module-level: never a render-time `useId`. */
+let playerCount = 0;
+function Player(props) {
+	const { renderMode = "practice", onProgress, onSubmit, onActivityComplete, onFinished, onInteraction, recordingBinding, workletUrl, captionsLoader, label, shuffleSeed, locale, theme, sanitizeHtml } = props;
+	const strings = require_LkIntlProvider.useLkStrings(props.strings);
+	const aiInForce = require_ai_LkAiProvider.useLearnerAi(props.ai);
+	const delivery = (0, _intellectif_lk_core.resolveDeliveryPolicy)(props.delivery);
+	const scoringKey = JSON.stringify(props.scoring ?? null);
+	const scoring = (0, react.useMemo)(() => (0, _intellectif_lk_core.resolveItemScoringPolicy)(props.scoring), [scoringKey]);
+	const scoringGiven = props.scoring !== void 0 && props.scoring !== null;
+	const group = (0, react.useRef)(props.group).current;
+	const timeline = group.timeline ?? { cues: [] };
+	const media = group.stimulus.media;
+	const chapters = timeline.chapters ?? [];
+	const devError = (0, react.useMemo)(() => {
+		if (!require_useAiHelp.isDevelopment()) return null;
+		if (group.timeline === void 0) return /* @__PURE__ */ new Error(`InteractiveVideo "${group.id}" was given an item group with no timeline. Give it a timeline — a list of quizzes, each at a moment of the video — or render it with <ActivitySequence>.`);
+		if (group.redacted === true) {
+			try {
+				(0, _intellectif_lk_core.assertRedactedItemGroup)(group);
+			} catch (error) {
+				return error;
+			}
+			return null;
+		}
+		const result = (0, _intellectif_lk_core.validateItemGroup)(group);
+		return result.success ? null : new _intellectif_lk_core.ActivitySchemaError("item-group", result.errors);
+	}, [group]);
+	const slots = (0, react.useMemo)(() => {
+		try {
+			return (0, _intellectif_lk_core.flattenSequence)([group]);
+		} catch {
+			return [];
+		}
+	}, [group]);
+	const cues = (0, react.useMemo)(() => timeline.cues.filter((cue) => slots.some((slot) => slot.group?.cue?.id === cue.id && (0, _intellectif_lk_core.isInteractiveVideoItemType)(slot.activity.type))), [timeline.cues, slots]);
+	const slotsByCue = (0, react.useMemo)(() => {
+		const byCue = /* @__PURE__ */ new Map();
+		for (const slot of slots) {
+			const cueId = slot.group?.cue?.id;
+			if (cueId !== void 0 && (0, _intellectif_lk_core.isInteractiveVideoItemType)(slot.activity.type)) byCue.set(cueId, [...byCue.get(cueId) ?? [], slot]);
+		}
+		return byCue;
+	}, [slots]);
+	const [playerId] = (0, react.useState)(() => {
+		playerCount += 1;
+		return `lk-iv-${playerCount}`;
+	});
+	const forced = (0, react.useRef)(props.preferences).current;
+	const defaultsKey = JSON.stringify(props.defaultPreferences ?? null);
+	const defaults = (0, react.useMemo)(() => JSON.parse(defaultsKey), [defaultsKey]);
+	const chosen = (0, react.useRef)({});
+	const [preferences, setPreferences] = (0, react.useState)(() => resolvePreferences({
+		force: forced,
+		defaults: props.defaultPreferences
+	}));
+	const preferencesRef = (0, react.useRef)(preferences);
+	preferencesRef.current = preferences;
+	(0, react.useEffect)(() => {
+		setPreferences(resolvePreferences({
+			force: forced,
+			stored: readStoredPreferences(),
+			defaults,
+			chosen: chosen.current
+		}));
+	}, [forced, defaults]);
+	const [submitted] = (0, react.useState)(() => new Set(props.submittedSlotIds ?? []));
+	const [answered, answeredRef, setSlotAnswered] = useKeySet(() => {
+		const seeded = /* @__PURE__ */ new Set();
+		for (const slot of slots) if (submitted.has(slot.slotId) || props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slot.slotId)) seeded.add(slot.slotId);
+		return seeded;
+	});
+	const [scores, setSlotScore] = useKeyMap();
+	const [pending, pendingRef, setPendingKey] = useKeySet(() => /* @__PURE__ */ new Set());
+	const latestTakes = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const alive = (0, react.useRef)(true);
+	(0, react.useEffect)(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	const finished = (0, react.useCallback)((cueId) => (slotsByCue.get(cueId) ?? []).every((slot) => answeredRef.current.has(slot.slotId)), [slotsByCue]);
+	const shellRef = (0, react.useRef)(null);
+	const videoRef = (0, react.useRef)(null);
+	const playButtonRef = (0, react.useRef)(null);
+	const quizHeadingRef = (0, react.useRef)(null);
+	const [portalContainer, setPortalContainer] = (0, react.useState)(null);
+	const [playing, setPlaying] = (0, react.useState)(false);
+	const [waiting, setWaiting] = (0, react.useState)(false);
+	const [errorCode, setErrorCode] = (0, react.useState)(null);
+	const [current, setCurrent] = (0, react.useState)(0);
+	const [duration, setDuration] = (0, react.useState)(0);
+	const [buffered, setBuffered] = (0, react.useState)(0);
+	const [scrubbing, setScrubbing] = (0, react.useState)(false);
+	const [ended, setEnded] = (0, react.useState)(false);
+	const [fullscreen, setFullscreen] = (0, react.useState)(false);
+	const [pictureInPicture, setPictureInPicture] = (0, react.useState)(false);
+	const [countdown, setCountdown] = (0, react.useState)(false);
+	const [menu, setMenu] = (0, react.useState)(null);
+	const [sheet, setSheet] = (0, react.useState)(false);
+	const [panelTab, setPanelTab] = (0, react.useState)("contents");
+	const [chromeShown, setChromeShown] = (0, react.useState)(true);
+	const [focusInChrome, setFocusInChrome] = (0, react.useState)(false);
+	const [announcement, setAnnouncement] = (0, react.useState)("");
+	const previousTime = (0, react.useRef)(0);
+	const furthest = (0, react.useRef)(0);
+	const [furthestShown, setFurthestShown] = (0, react.useState)(0);
+	const lastProgressAt = (0, react.useRef)(0);
+	const hideTimer = (0, react.useRef)(null);
+	const lastPointer = (0, react.useRef)("mouse");
+	const finishedOnce = (0, react.useRef)(false);
+	const [, setFinishedState] = (0, react.useState)(false);
+	const [openQuiz, setOpenQuiz] = (0, react.useState)(null);
+	const openQuizRef = (0, react.useRef)(openQuiz);
+	openQuizRef.current = openQuiz;
+	const [mounted, setMounted] = (0, react.useState)(/* @__PURE__ */ new Set());
+	const handled = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const announce = (0, react.useCallback)((text) => {
+		setAnnouncement("");
+		onNextFrame(() => setAnnouncement(text));
+	}, []);
+	const emit = (0, react.useCallback)((type, payload) => {
+		onInteraction?.({
+			type,
+			activityId: group.id,
+			timestamp: Date.now(),
+			...payload !== void 0 ? { payload } : {}
+		});
+	}, [onInteraction, group.id]);
+	const reportProgress = (0, react.useCallback)((force) => {
+		const video = videoRef.current;
+		if (onProgress === void 0 || video === null) return;
+		const now = Date.now();
+		if (!force && now - lastProgressAt.current < 5e3) return;
+		lastProgressAt.current = now;
+		onProgress({
+			progressVersion: "1.0",
+			at: video.currentTime,
+			furthest: furthest.current
+		});
+	}, [onProgress]);
+	const quizTitle = (0, react.useCallback)((cue) => cue.title ?? strings.videoQuiz, [strings.videoQuiz]);
+	const openAt = (0, react.useCallback)((cue) => {
+		const video = videoRef.current;
+		const quizSlots = slotsByCue.get(cue.id) ?? [];
+		if (video !== null) {
+			video.pause();
+			if (Math.abs(video.currentTime - cue.at) > .25 && cue.at <= (video.duration || cue.at)) video.currentTime = Math.min(cue.at, video.duration || cue.at);
+			previousTime.current = cue.at;
+			const webkit = video;
+			if (webkit.webkitDisplayingFullscreen) webkit.webkitExitFullscreen?.();
+			if (typeof document !== "undefined" && document.pictureInPictureElement === video) document.exitPictureInPicture?.().catch(() => void 0);
+		}
+		const firstOpen = quizSlots.findIndex((slot) => !answeredRef.current.has(slot.slotId));
+		setMenu(null);
+		setSheet(false);
+		setEnded(false);
+		setMounted((previous) => previous.has(cue.id) ? previous : /* @__PURE__ */ new Set([...previous, cue.id]));
+		setOpenQuiz({
+			cueId: cue.id,
+			step: firstOpen === -1 ? 0 : firstOpen
+		});
+		announce(strings.videoQuizOpened(clock(cue.at), quizSlots.length));
+		emit("video-quiz-opened", {
+			cueId: cue.id,
+			at: cue.at
+		});
+		reportProgress(true);
+	}, [
+		slotsByCue,
+		announce,
+		strings,
+		emit,
+		reportProgress
+	]);
+	(0, react.useEffect)(() => {
+		if (openQuiz !== null) quizHeadingRef.current?.focus();
+	}, [openQuiz?.cueId, openQuiz]);
+	const closeQuiz = (0, react.useCallback)((how) => {
+		const open = openQuizRef.current;
+		if (open === null) return;
+		const cue = cues.find((candidate) => candidate.id === open.cueId);
+		setOpenQuiz(null);
+		const video = videoRef.current;
+		if (how === "rewatch" && cue !== void 0 && video !== null) {
+			const to = [...cues.map((c) => c.at), ...chapters.map((c) => c.at)].filter((at) => at < cue.at - .5).sort((a, b) => b - a)[0] ?? 0;
+			video.currentTime = to;
+			previousTime.current = to;
+			setCurrent(to);
+		} else if (cue !== void 0) {
+			handled.current.add(cue.id);
+			emit(how === "skip" ? "video-quiz-skipped" : "video-quiz-closed", { cueId: cue.id });
+		}
+		playButtonRef.current?.focus();
+		if (video !== null && !(video.ended || duration > 0 && video.currentTime >= duration - .05)) video.play().catch(() => setPlaying(false));
+		else if (video !== null) {
+			const next = quizzesAtEnd(cues, duration, handled.current)[0];
+			if (next !== void 0) openAt(next);
+			else setEnded(true);
+		}
+	}, [
+		cues,
+		chapters,
+		emit,
+		duration,
+		openAt
+	]);
+	const onTick = (0, react.useCallback)((now) => {
+		const before = previousTime.current;
+		previousTime.current = now;
+		if (now > furthest.current) furthest.current = now;
+		if (openQuizRef.current !== null || scrubbing) return;
+		const crossed = crossedQuiz(cues, before, now, handled.current);
+		if (crossed !== void 0) openAt(crossed);
+	}, [
+		cues,
+		scrubbing,
+		openAt
+	]);
+	(0, react.useEffect)(() => {
+		if (!playing || scrubbing) return;
+		let cancel = () => {};
+		const tick = () => {
+			const video = videoRef.current;
+			if (video !== null) {
+				setCurrent(video.currentTime);
+				setBuffered(bufferedAhead(video));
+				onTick(video.currentTime);
+				if (furthest.current > furthestShown + 1) setFurthestShown(furthest.current);
+				reportProgress(false);
+			}
+			cancel = onNextFrame(tick);
+		};
+		cancel = onNextFrame(tick);
+		return () => cancel();
+	}, [
+		playing,
+		scrubbing,
+		onTick,
+		reportProgress,
+		furthestShown
+	]);
+	const seek = (0, react.useCallback)((to) => {
+		const video = videoRef.current;
+		if (video === null || duration <= 0) return;
+		const from = video.currentTime;
+		const target = Math.min(Math.max(0, to), duration);
+		const limited = renderMode === "review" ? { at: target } : limitSeek(timeline, from, target, furthest.current, finished);
+		video.currentTime = limited.at;
+		previousTime.current = limited.at;
+		setCurrent(limited.at);
+		setEnded(false);
+		emit("video-seeked", {
+			from,
+			to: limited.at,
+			clamped: limited.hold !== void 0
+		});
+		if (limited.hold?.kind === "required") {
+			openAt(limited.hold.cue);
+			announce(strings.videoHeldAtQuiz(clock(limited.hold.cue.at)));
+		} else if (limited.hold?.kind === "no-skip-ahead") announce(strings.videoHeldAhead);
+		reportProgress(true);
+	}, [
+		duration,
+		renderMode,
+		timeline,
+		finished,
+		emit,
+		announce,
+		strings,
+		openAt,
+		reportProgress
+	]);
+	const togglePlay = (0, react.useCallback)(() => {
+		const video = videoRef.current;
+		if (video === null) return;
+		if (ended) {
+			setEnded(false);
+			handled.current.clear();
+			video.currentTime = 0;
+			previousTime.current = -1;
+			video.play().catch(() => setPlaying(false));
+			return;
+		}
+		if (video.paused) {
+			if (video.currentTime === 0 && previousTime.current <= 0) {
+				const atStart = crossedQuiz(cues, -1, 0, handled.current);
+				if (atStart !== void 0) {
+					previousTime.current = 0;
+					openAt(atStart);
+					return;
+				}
+			}
+			video.play().catch(() => setPlaying(false));
+		} else video.pause();
+	}, [
+		ended,
+		cues,
+		openAt
+	]);
+	const tracks = (0, react.useMemo)(() => {
+		if (media?.tracks !== void 0 && media.tracks.length > 0) return media.tracks.filter((track) => track.kind === "captions" || track.kind === "subtitles");
+		return media?.captionsUrl !== void 0 ? [{
+			kind: "captions",
+			src: media.captionsUrl,
+			srclang: locale ?? "en",
+			label: strings.videoCaptionLanguage
+		}] : [];
+	}, [
+		media,
+		locale,
+		strings.videoCaptionLanguage
+	]);
+	const { primary: primaryTrack, secondary: secondaryTrack } = (0, react.useMemo)(() => resolveCaptionTracks(tracks, {
+		captionLanguage: preferences.captionLanguage,
+		secondaryCaptionLanguage: preferences.secondaryCaptionLanguage
+	}), [
+		tracks,
+		preferences.captionLanguage,
+		preferences.secondaryCaptionLanguage
+	]);
+	const { loadCues, peekCues } = useCueLoader(captionsLoader);
+	const primaryLine = useCaptionLine(primaryTrack, loadCues, peekCues);
+	const secondaryLine = useCaptionLine(secondaryTrack, loadCues, peekCues);
+	const primaryCues = primaryLine.cues;
+	const secondaryCues = secondaryLine.cues;
+	const captionsFailed = {
+		primary: primaryLine.failed,
+		secondary: secondaryLine.failed
+	};
+	const hasCaptions = primaryCues.length > 0 || secondaryCues.length > 0;
+	const hasTranscript = primaryCues.length > 0;
+	const activeCueIndex = (0, react.useMemo)(() => cueIndexAt(primaryCues, current), [primaryCues, current]);
+	const secondaryCueIndex = (0, react.useMemo)(() => cueIndexAt(secondaryCues, current), [secondaryCues, current]);
+	const spoilerLimit = timeline.navigation === "no-skip-ahead" && renderMode !== "review" ? Math.max(furthestShown, current) : Number.POSITIVE_INFINITY;
+	const onPreferencesChangeRef = (0, react.useRef)(props.onPreferencesChange);
+	onPreferencesChangeRef.current = props.onPreferencesChange;
+	const tracksRef = (0, react.useRef)(tracks);
+	tracksRef.current = tracks;
+	/** The last second language the learner had, for Shift + C to bring back. */
+	const lastSecondary = (0, react.useRef)(null);
+	/**
+	* A change the learner made: applied, remembered in this browser, handed to
+	* the host, and — when it changes the captions on screen — reported.
+	*/
+	const changePreferences = (0, react.useCallback)((change) => {
+		const previous = preferencesRef.current;
+		const next = applyPreferenceChange(previous, change);
+		if (previous.secondaryCaptionLanguage !== null) lastSecondary.current = previous.secondaryCaptionLanguage;
+		chosen.current = {
+			...chosen.current,
+			...change
+		};
+		preferencesRef.current = next;
+		setPreferences(next);
+		rememberPreferences(change);
+		onPreferencesChangeRef.current?.(next, change);
+		const before = captionsShown(tracksRef.current, previous);
+		const after = captionsShown(tracksRef.current, next);
+		if (before.srclang !== after.srclang || before.secondary !== after.secondary) emit("video-captions-changed", after);
+	}, [emit]);
+	/**
+	* A first language picked from the menu. Picking the language the second
+	* line shows swaps the two — English + Español becomes Español + English —
+	* rather than silently dropping one.
+	*/
+	const chooseCaptionTrack = (track) => {
+		const swaps = primaryTrack !== void 0 && secondaryTrack !== void 0 && track.srclang.toLowerCase() === secondaryTrack.srclang.toLowerCase();
+		changePreferences({
+			captions: true,
+			captionLanguage: track.srclang,
+			...swaps ? { secondaryCaptionLanguage: primaryTrack.srclang } : {}
+		});
+	};
+	/** A second language picked from the menu, or none. Picking one shows the captions. */
+	const chooseSecondaryTrack = (track) => {
+		changePreferences(track === null ? { secondaryCaptionLanguage: null } : {
+			secondaryCaptionLanguage: track.srclang,
+			captions: true
+		});
+	};
+	/**
+	* Shift + C. With a second line showing, it goes; with one chosen but the
+	* captions off, the pair comes back; otherwise a second line comes on — the
+	* last language the learner had, else the host's suggestion, else the first
+	* other language the video has. Pressing the key is asking for a second
+	* line, so that first language is the learner's choice, not a fallback the
+	* player made for them. With no other language at all, it says so and
+	* changes nothing.
+	*/
+	const toggleSecondary = () => {
+		if (secondaryTrack !== void 0) {
+			changePreferences(preferences.captions ? { secondaryCaptionLanguage: null } : { captions: true });
+			return;
+		}
+		const wanted = [
+			lastSecondary.current,
+			preferences.secondaryCaptionLanguage,
+			sanitizePartialPreferences(defaults).secondaryCaptionLanguage ?? null,
+			secondaryCandidates(tracks, primaryTrack)[0]?.srclang ?? null
+		];
+		for (const language of wanted) {
+			if (language === null) continue;
+			const { secondary } = resolveCaptionTracks(tracks, {
+				captionLanguage: preferences.captionLanguage,
+				secondaryCaptionLanguage: language
+			});
+			if (secondary !== void 0) {
+				changePreferences({
+					secondaryCaptionLanguage: secondary.srclang,
+					captions: true
+				});
+				return;
+			}
+		}
+		announce(strings.videoNoSecondLanguage);
+	};
+	(0, react.useEffect)(() => {
+		const video = videoRef.current;
+		if (video !== null) {
+			video.playbackRate = preferences.speed;
+			video.volume = preferences.volume;
+			video.muted = preferences.muted;
+		}
+	}, [
+		preferences.speed,
+		preferences.volume,
+		preferences.muted
+	]);
+	(0, react.useEffect)(() => {
+		const onChange = () => setFullscreen(document.fullscreenElement === shellRef.current);
+		document.addEventListener("fullscreenchange", onChange);
+		return () => document.removeEventListener("fullscreenchange", onChange);
+	}, []);
+	(0, react.useEffect)(() => {
+		const video = videoRef.current;
+		if (video === null) return;
+		const enter = () => {
+			setPictureInPicture(true);
+			emit("video-pip-changed", { on: true });
+		};
+		const leave = () => {
+			setPictureInPicture(false);
+			emit("video-pip-changed", { on: false });
+		};
+		video.addEventListener("enterpictureinpicture", enter);
+		video.addEventListener("leavepictureinpicture", leave);
+		return () => {
+			video.removeEventListener("enterpictureinpicture", enter);
+			video.removeEventListener("leavepictureinpicture", leave);
+		};
+	}, [emit]);
+	(0, react.useEffect)(() => () => {
+		if (hideTimer.current !== null) clearTimeout(hideTimer.current);
+	}, []);
+	const revealChrome = (0, react.useCallback)(() => {
+		setChromeShown(true);
+		if (hideTimer.current !== null) clearTimeout(hideTimer.current);
+		hideTimer.current = setTimeout(() => setChromeShown(false), 2400);
+	}, []);
+	const toggleFullscreen = (0, react.useCallback)(() => {
+		const shell = shellRef.current;
+		const video = videoRef.current;
+		if (typeof document === "undefined" || shell === null) return;
+		if (document.fullscreenElement) document.exitFullscreen().catch(() => void 0);
+		else if (typeof shell.requestFullscreen === "function" && document.fullscreenEnabled !== false) shell.requestFullscreen().catch(() => void 0);
+		else video?.webkitEnterFullscreen?.();
+		emit("video-fullscreen-changed");
+	}, [emit]);
+	const pictureInPictureSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
+	const togglePictureInPicture = (0, react.useCallback)(() => {
+		const video = videoRef.current;
+		if (video === null) return;
+		if (document.pictureInPictureElement) document.exitPictureInPicture().catch(() => void 0);
+		else video.requestPictureInPicture?.().catch(() => void 0);
+	}, []);
+	const jumpPoints = (0, react.useMemo)(() => [.../* @__PURE__ */ new Set([...chapters.map((c) => c.at), ...cues.map((c) => c.at)])].sort((a, b) => a - b), [chapters, cues]);
+	const onKeyDown = (event) => {
+		if (openQuiz !== null || !preferences.shortcuts) return;
+		const target = event.target;
+		if (target.isContentEditable || [
+			"INPUT",
+			"TEXTAREA",
+			"SELECT"
+		].includes(target.tagName) || target.tagName === "BUTTON" && (event.key === " " || event.key === "Enter")) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		const video = videoRef.current;
+		const key = event.key;
+		const done = () => {
+			event.preventDefault();
+			revealChrome();
+		};
+		if (/^[0-9]$/.test(key)) {
+			done();
+			seek(Number(key) / 10 * duration);
+			return;
+		}
+		switch (key) {
+			case " ":
+			case "k":
+			case "K":
+				done();
+				togglePlay();
+				return;
+			case "j":
+			case "J":
+				done();
+				seek(current - 10);
+				return;
+			case "l":
+			case "L":
+				done();
+				seek(current + 10);
+				return;
+			case "ArrowLeft":
+				done();
+				seek(current - (event.shiftKey ? 1 : 5));
+				return;
+			case "ArrowRight":
+				done();
+				seek(current + (event.shiftKey ? 1 : 5));
+				return;
+			case "Home":
+				done();
+				seek(0);
+				return;
+			case "End":
+				done();
+				seek(duration);
+				return;
+			case ",":
+			case ".":
+				done();
+				video?.pause();
+				seek(current + (key === "," ? -.03333333333333333 : FRAME_SECONDS));
+				return;
+			case "<":
+			case ">":
+				done();
+				changePreferences({ speed: nudgeSpeed(preferences.speed, key === "<" ? -1 : 1) });
+				return;
+			case "[": {
+				done();
+				const previous = [...jumpPoints].reverse().find((at) => at < current - 1);
+				seek(previous ?? 0);
+				return;
+			}
+			case "]": {
+				done();
+				const next = jumpPoints.find((at) => at > current + .5);
+				if (next !== void 0) seek(next);
+				return;
+			}
+			case "m":
+			case "M":
+				done();
+				changePreferences({ muted: !preferences.muted });
+				return;
+			case "c":
+			case "C":
+				if (event.shiftKey) {
+					done();
+					toggleSecondary();
+				} else if (hasCaptions) {
+					done();
+					changePreferences({ captions: !preferences.captions });
+				}
+				return;
+			case "t":
+			case "T":
+				if (hasTranscript) {
+					done();
+					setPanelTab("transcript");
+					changePreferences({ panel: !(preferences.panel && panelTab === "transcript") });
+				}
+				return;
+			case "p":
+			case "P":
+				if (pictureInPictureSupported) {
+					done();
+					togglePictureInPicture();
+				}
+				return;
+			case "f":
+			case "F":
+				done();
+				toggleFullscreen();
+				return;
+			case "?":
+				done();
+				setSheet((open) => !open);
+				return;
+			default: return;
+		}
+	};
+	const quizzes = cues.map((cue) => {
+		const quizSlots = slotsByCue.get(cue.id) ?? [];
+		const count = quizSlots.filter((slot) => answered.has(slot.slotId)).length;
+		return {
+			id: cue.id,
+			at: cue.at,
+			title: quizTitle(cue),
+			answered: count,
+			total: quizSlots.length,
+			required: cue.required === true && renderMode !== "review",
+			state: markerState(quizSlots, answered, renderMode, props.outcomes)
+		};
+	});
+	const markers = quizzes.map((quiz) => ({
+		id: quiz.id,
+		at: quiz.at,
+		label: `${quiz.title} · ${strings.videoQuizProgress(quiz.answered, quiz.total)}`,
+		state: quiz.state,
+		required: quiz.required
+	}));
+	const totalQuestions = quizzes.reduce((sum, quiz) => sum + quiz.total, 0);
+	const answeredCount = quizzes.reduce((sum, quiz) => sum + quiz.answered, 0);
+	const graded = [...scores.values()];
+	const percent = graded.length === 0 ? null : Math.round(graded.reduce((a, b) => a + b, 0) / graded.length * 100);
+	const summary = (0, react.useCallback)(() => {
+		return { slots: slots.filter((slot) => slot.group?.cue !== void 0).map((slot) => {
+			const cueId = slot.group?.cue?.id;
+			return {
+				slotId: slot.slotId,
+				activityId: slot.activity.id,
+				cueId,
+				status: answeredRef.current.has(slot.slotId) ? "answered" : handled.current.has(cueId) ? "skipped" : "unreached"
+			};
+		}) };
+	}, [slots]);
+	const finish = (0, react.useCallback)(() => {
+		if (finishedOnce.current) return;
+		finishedOnce.current = true;
+		setFinishedState(true);
+		onFinished?.(summary());
+	}, [onFinished, summary]);
+	const answerPending = pending.size > 0;
+	(0, react.useEffect)(() => {
+		if (ended && !answerPending && totalQuestions > 0 && answeredCount === totalQuestions && renderMode !== "review") finish();
+	}, [
+		ended,
+		answerPending,
+		totalQuestions,
+		answeredCount,
+		renderMode,
+		finish
+	]);
+	const slotBindings = (0, react.useMemo)(() => {
+		const bindings = /* @__PURE__ */ new Map();
+		if (recordingBinding === void 0) return bindings;
+		const { assess, playbackUrl } = recordingBinding;
+		for (const slot of slots) {
+			const place = {
+				slotId: slot.slotId,
+				index: slot.index,
+				activityId: slot.activity.id
+			};
+			bindings.set(slot.slotId, {
+				upload: (take) => recordingBinding.upload(take, place),
+				...assess !== void 0 ? { assess: (ref) => assess.call(recordingBinding, ref, place) } : {},
+				...playbackUrl !== void 0 ? { playbackUrl: (ref) => playbackUrl.call(recordingBinding, ref, place) } : {}
+			});
+		}
+		return bindings;
+	}, [slots, recordingBinding]);
+	const places = (0, react.useMemo)(() => {
+		const byId = /* @__PURE__ */ new Map();
+		for (const [cueId, cueSlots] of slotsByCue) for (const slot of cueSlots) byId.set(slot.slotId, {
+			slotId: slot.slotId,
+			index: slot.index,
+			activityId: slot.activity.id,
+			cueId
+		});
+		return byId;
+	}, [slotsByCue]);
+	const reportTo = (0, react.useRef)({
+		onSubmit,
+		onActivityComplete,
+		onInteraction,
+		renderMode,
+		delivery,
+		scoring: scoringGiven ? scoring : void 0
+	});
+	reportTo.current = {
+		onSubmit,
+		onActivityComplete,
+		onInteraction,
+		renderMode,
+		delivery,
+		scoring: scoringGiven ? scoring : void 0
+	};
+	/**
+	* The calls a question reports what the learner did through — the SDK's own
+	* components and a host's alike, so nothing downstream can tell them apart.
+	* Made once per question.
+	*/
+	const calls = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const callsFor = (place) => {
+		const made = calls.current.get(place.slotId);
+		if (made !== void 0) return made;
+		const { slotId } = place;
+		const warned = /* @__PURE__ */ new Set();
+		const refused = (call) => {
+			if (reportTo.current.renderMode !== "review") return false;
+			if (require_useAiHelp.isDevelopment() && !warned.has(call)) {
+				warned.add(call);
+				console.warn(`InteractiveVideo: \`${call}()\` was called for question "${slotId}" in renderMode "review", where nothing is submittable. It was ignored.`);
+			}
+			return true;
+		};
+		const next = {
+			submit: (response) => {
+				if (!alive.current || refused("submit")) return;
+				setSlotAnswered(slotId, true);
+				reportTo.current.onSubmit?.(response, place);
+			},
+			complete: (result) => {
+				if (!alive.current || refused("complete")) return;
+				setSlotAnswered(slotId, true);
+				setSlotScore(slotId, result.maxScore > 0 ? result.score / result.maxScore : void 0);
+				reportTo.current.onActivityComplete?.(result, place);
+			},
+			clear: () => {
+				if (!alive.current || refused("clear")) return;
+				setSlotAnswered(slotId, false);
+				setSlotScore(slotId, void 0);
+			},
+			setPending: (on) => {
+				if (!alive.current) return;
+				setPendingKey(`host:${slotId}`, on === true);
+			},
+			emit: (type, payload) => {
+				if (!alive.current) return;
+				reportTo.current.onInteraction?.({
+					type,
+					activityId: place.activityId,
+					timestamp: Date.now(),
+					...payload !== void 0 ? { payload } : {}
+				});
+			}
+		};
+		calls.current.set(slotId, next);
+		return next;
+	};
+	/**
+	* What an SDK read-aloud reports about each take, through its slot's channel.
+	* A take being stored or judged is on its way; every other state is not. A
+	* failure the learner may retry is not on its way either: nothing comes of
+	* it unless they press Try again, which reports the take in flight again.
+	* (A pager holds its set for one while the learner is on that question; the
+	* video's Finish is on the end card, where no question is.)
+	*/
+	const reportTake = (slotId, take, state) => {
+		if (!alive.current) return;
+		const latest = latestTakes.current.get(slotId);
+		if (latest !== void 0 && take < latest) return;
+		latestTakes.current.set(slotId, take);
+		setPendingKey(`take:${slotId}`, state === "in-flight");
+	};
+	const channels = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const channelFor = (slotId) => {
+		let channel = channels.current.get(slotId);
+		if (channel === void 0) {
+			channel = {
+				captureGroup: `${playerId}::${slotId}`,
+				get renderMode() {
+					return reportTo.current.renderMode;
+				},
+				get delivery() {
+					return reportTo.current.delivery;
+				},
+				get scoring() {
+					return reportTo.current.scoring;
+				},
+				get triesClosed() {
+					return finishedOnce.current;
+				},
+				triesState: () => {},
+				takeState: (take, state) => reportTake(slotId, take, state)
+			};
+			channels.current.set(slotId, channel);
+		}
+		return channel;
+	};
+	/** What the host restored for a question: read the way the SDK's components read it. */
+	const seedsFor = (slotId) => ({
+		restored: props.responses !== void 0 && Object.hasOwn(props.responses, slotId) ? props.responses[slotId] : void 0,
+		outcome: props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slotId) ? props.outcomes[slotId] : void 0
+	});
+	/** The question as `renderQuestion` is handed it. */
+	const questionFor = (slot, place, active) => {
+		const { restored, outcome } = seedsFor(slot.slotId);
+		return {
+			activity: slot.activity,
+			slot: place,
+			renderMode,
+			active,
+			...locale !== void 0 ? { locale } : {},
+			...restored !== void 0 ? { defaultValue: restored } : {},
+			defaultSubmitted: submitted.has(slot.slotId),
+			...outcome !== void 0 ? { outcome } : {},
+			portalContainer,
+			...aiInForce !== void 0 && renderMode !== "exam" ? { ai: aiInForce } : {},
+			delivery,
+			scoring,
+			...callsFor(place)
+		};
+	};
+	/** The SDK's own component for a question. */
+	const sdkQuestion = (slot, place) => {
+		const activity = slot.activity;
+		const { restored, outcome } = seedsFor(slot.slotId);
+		const reported = callsFor(place);
+		const common = {
+			renderMode,
+			...restored !== void 0 ? { defaultValue: restored } : {},
+			...submitted.has(slot.slotId) ? { defaultSubmitted: true } : {},
+			...outcome !== void 0 ? { outcome } : {},
+			onSubmit: reported.submit,
+			onComplete: reported.complete,
+			...onInteraction !== void 0 ? { onInteraction } : {},
+			...sanitizeHtml !== void 0 ? { sanitizeHtml } : {},
+			...props.strings !== void 0 ? { strings: props.strings } : {},
+			...props.ai !== void 0 ? { ai: props.ai } : {},
+			...props.delivery !== void 0 && props.delivery !== null ? { delivery: props.delivery } : {},
+			...scoringGiven ? { scoring: props.scoring } : {},
+			...locale !== void 0 ? { locale } : {}
+		};
+		switch (activity.type) {
+			case "multiple-choice": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MultipleChoice.MultipleChoice, {
+				data: activity,
+				...common,
+				...shuffleSeed !== void 0 ? { shuffleSeed } : {}
+			});
+			case "fill-in-the-blanks": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FillInTheBlanks.FillInTheBlanks, {
+				data: activity,
+				...common
+			});
+			case "gap-select": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GapSelect.GapSelect, {
+				data: activity,
+				...common,
+				...shuffleSeed !== void 0 ? { shuffleSeed } : {}
+			});
+			case "dictation": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dictation.Dictation, {
+				data: activity,
+				...common
+			});
+			case "read-aloud": {
+				const binding = slotBindings.get(slot.slotId);
+				const assessment = props.assessments !== void 0 && Object.hasOwn(props.assessments, slot.slotId) ? props.assessments[slot.slotId] : void 0;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ReadAloud.ReadAloud, {
+					data: activity,
+					...common,
+					...binding !== void 0 ? { recordingBinding: binding } : {},
+					...assessment !== void 0 ? { assessment } : {},
+					...workletUrl !== void 0 ? { workletUrl } : {}
+				});
+			}
+			case "written-response": return null;
+			default: return null;
+		}
+	};
+	if (devError !== null) throw devError;
+	const openCue = openQuiz === null ? void 0 : cues.find((cue) => cue.id === openQuiz.cueId);
+	const openSlots = openCue === void 0 ? [] : slotsByCue.get(openCue.id) ?? [];
+	const step = openQuiz?.step ?? 0;
+	const stepSlot = openSlots[step];
+	const stepAnswered = stepSlot !== void 0 && answered.has(stepSlot.slotId);
+	const lastStep = step >= openSlots.length - 1;
+	const required = openCue?.required === true && renderMode !== "review";
+	const canAdvance = !required || stepAnswered;
+	const goToStep = (next) => {
+		setOpenQuiz((open) => open === null ? open : {
+			...open,
+			step: next
+		});
+		const slot = openSlots[next];
+		if (slot !== void 0 && openCue !== void 0) {
+			announce(strings.videoQuestionProgress(next + 1, openSlots.length));
+			emit("video-quiz-question-shown", {
+				cueId: openCue.id,
+				slotId: slot.slotId
+			});
+		}
+	};
+	const captionsHidden = !preferences.captions || openQuiz !== null || ended || errorCode !== null;
+	const primaryText = captionsHidden ? void 0 : primaryCues[activeCueIndex]?.text;
+	const secondaryText = captionsHidden ? void 0 : secondaryCues[secondaryCueIndex]?.text;
+	const chromeVisible = !playing || chromeShown || menu !== null || scrubbing || focusInChrome || sheet || openQuiz !== null;
+	const volumeLevel = preferences.muted || preferences.volume === 0 ? "muted" : preferences.volume < .5 ? "low" : "high";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: shellRef,
+		className: "lk-iv",
+		tabIndex: -1,
+		lang: locale,
+		style: theme,
+		"data-render-mode": renderMode,
+		"data-quiz-open": openQuiz !== null || void 0,
+		"data-fullscreen": fullscreen || void 0,
+		"data-chrome": chromeVisible ? "shown" : "hidden",
+		onKeyDown,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "lk-iv-stage",
+				onPointerDown: (event) => {
+					lastPointer.current = event.pointerType;
+				},
+				onPointerMove: (event) => {
+					if (event.pointerType !== "touch") revealChrome();
+				},
+				onPointerLeave: () => {
+					if (playing) setChromeShown(false);
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+						ref: videoRef,
+						className: "lk-iv-video",
+						src: media?.url,
+						...media?.poster !== void 0 ? { poster: media.poster } : {},
+						preload: "metadata",
+						playsInline: true,
+						"aria-label": group.title ?? media?.alt,
+						onClick: () => {
+							if (lastPointer.current === "touch" && !chromeVisible) {
+								revealChrome();
+								return;
+							}
+							togglePlay();
+						},
+						onDoubleClick: toggleFullscreen,
+						onPlay: () => {
+							setPlaying(true);
+							setEnded(false);
+							revealChrome();
+							emit("video-played", { at: videoRef.current?.currentTime ?? 0 });
+						},
+						onPause: () => {
+							setPlaying(false);
+							emit("video-paused", { at: videoRef.current?.currentTime ?? 0 });
+							reportProgress(true);
+						},
+						onWaiting: () => setWaiting(true),
+						onPlaying: () => setWaiting(false),
+						onProgress: (event) => setBuffered(bufferedAhead(event.currentTarget)),
+						onTimeUpdate: (event) => {
+							if (!playing && !scrubbing) setCurrent(event.currentTarget.currentTime);
+						},
+						onRateChange: (event) => emit("video-rate-changed", { rate: event.currentTarget.playbackRate }),
+						onLoadedMetadata: (event) => {
+							const video = event.currentTarget;
+							const length = Number.isFinite(video.duration) ? video.duration : 0;
+							setDuration(length);
+							video.playbackRate = preferences.speed;
+							video.volume = preferences.volume;
+							video.muted = preferences.muted;
+							const stored = (0, _intellectif_lk_core.readMediaProgress)(props.progress, length);
+							if (stored !== null) {
+								const at = renderMode === "review" ? stored.at : limitResume(timeline, stored.at, finished);
+								furthest.current = Math.max(stored.furthest, at);
+								setFurthestShown(furthest.current);
+								video.currentTime = at;
+								previousTime.current = at;
+								setCurrent(at);
+							}
+						},
+						onEnded: () => {
+							setPlaying(false);
+							setCurrent(duration);
+							emit("video-ended");
+							reportProgress(true);
+							const first = quizzesAtEnd(cues, duration, handled.current)[0];
+							if (first !== void 0) openAt(first);
+							else setEnded(true);
+						},
+						onError: (event) => {
+							setWaiting(false);
+							setErrorCode(event.currentTarget.error?.code ?? 0);
+						}
+					}),
+					label !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-label",
+						children: label
+					}) : null,
+					primaryText !== void 0 || secondaryText !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "lk-iv-captions",
+						"data-size": preferences.captionSize,
+						"data-background": preferences.captionBackground || void 0,
+						children: [primaryText !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "lk-iv-caption",
+							"data-role": "primary",
+							"data-size": preferences.captionSize,
+							"data-background": preferences.captionBackground || void 0,
+							lang: primaryTrack?.srclang,
+							dir: "auto",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: primaryText })
+						}) : null, secondaryText !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "lk-iv-caption",
+							"data-role": "secondary",
+							"data-size": preferences.captionSize,
+							"data-background": preferences.captionBackground || void 0,
+							lang: secondaryTrack?.srclang,
+							dir: "auto",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: secondaryText })
+						}) : null]
+					}) : null,
+					waiting && errorCode === null && openQuiz === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "lk-iv-spinner",
+						"aria-hidden": "true"
+					}) : null,
+					errorCode !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "lk-iv-error",
+						role: "alert",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon, {}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: strings.videoError(errorCode) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "lk-iv-action",
+								onClick: () => {
+									setErrorCode(null);
+									videoRef.current?.load();
+								},
+								children: strings.videoTryAgain
+							})
+						]
+					}) : null,
+					!playing && !waiting && errorCode === null && openQuiz === null && !ended ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "lk-iv-big-play",
+						"aria-label": strings.media.play,
+						onClick: togglePlay,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {})
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "lk-iv-chrome",
+						inert: openQuiz !== null,
+						onFocus: () => setFocusInChrome(true),
+						onBlur: (event) => {
+							if (!event.currentTarget.contains(event.relatedTarget)) setFocusInChrome(false);
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Scrubber, {
+							current,
+							duration,
+							buffered,
+							chapters,
+							markers,
+							cues: primaryCues,
+							previewLimit: spoilerLimit,
+							strings,
+							onSeek: seek,
+							onScrubChange: setScrubbing
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "lk-iv-bar",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "lk-iv-bar-group",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										ref: playButtonRef,
+										type: "button",
+										className: "lk-iv-button",
+										"aria-label": ended ? strings.videoReplay : playing ? strings.media.pause : strings.media.play,
+										onClick: togglePlay,
+										children: ended ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplayIcon, {}) : playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PauseIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-button lk-iv-wide",
+										"aria-label": strings.videoBack(10),
+										onClick: () => seek(current - 10),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackIcon, {})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-button lk-iv-wide",
+										"aria-label": strings.videoForward(10),
+										onClick: () => seek(current + 10),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ForwardIcon, {})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "lk-iv-volume",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "lk-iv-button",
+											"aria-label": preferences.muted ? strings.media.unmute : strings.media.mute,
+											"aria-pressed": preferences.muted,
+											onClick: () => changePreferences({ muted: !preferences.muted }),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeIcon, { level: volumeLevel })
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											id: `${playerId}-volume`,
+											className: "lk-iv-volume-slider",
+											type: "range",
+											min: 0,
+											max: 1,
+											step: .05,
+											value: preferences.muted ? 0 : preferences.volume,
+											"aria-label": strings.media.volume,
+											onChange: (event) => changePreferences({
+												volume: Number(event.target.value),
+												muted: false
+											})
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-time",
+										"aria-label": countdown ? strings.videoShowElapsed : strings.videoShowRemaining,
+										onClick: () => setCountdown((on) => !on),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											"aria-hidden": "true",
+											children: [countdown ? `-${clock(Math.max(0, duration - current))}` : clock(current), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "lk-iv-time-total",
+												children: [" / ", clock(duration)]
+											})]
+										})
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "lk-iv-bar-group",
+								children: [
+									quizzes.length > 0 || chapters.length > 0 || hasTranscript ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-button",
+										"aria-label": strings.videoPanel,
+										"aria-pressed": preferences.panel,
+										onClick: () => changePreferences({ panel: !preferences.panel }),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentsIcon, {})
+									}) : null,
+									hasCaptions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-button",
+										"aria-label": preferences.captions ? strings.videoCaptionsHide : strings.videoCaptionsShow,
+										"aria-pressed": preferences.captions,
+										onClick: () => changePreferences({ captions: !preferences.captions }),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CaptionsIcon, { on: preferences.captions })
+									}) : null,
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "lk-iv-menu-anchor",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "lk-iv-button lk-iv-speed",
+											"aria-label": strings.media.speed,
+											"aria-haspopup": "menu",
+											"aria-expanded": menu === "speed",
+											onClick: () => setMenu((open) => open === "speed" ? null : "speed"),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												"aria-hidden": "true",
+												children: `${preferences.speed}×`
+											})
+										}), menu === "speed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeedMenu, {
+											speed: preferences.speed,
+											strings,
+											onChoose: (speed) => {
+												changePreferences({ speed });
+												setMenu(null);
+											},
+											onClose: () => setMenu(null)
+										}) : null]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "lk-iv-menu-anchor",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "lk-iv-button",
+											"aria-label": strings.videoSettings,
+											"aria-haspopup": "menu",
+											"aria-expanded": menu === "settings",
+											onClick: () => setMenu((open) => open === "settings" ? null : "settings"),
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsIcon, {})
+										}), menu === "settings" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingsMenu, {
+											preferences,
+											tracks,
+											primaryTrack,
+											secondaryTrack,
+											captionsFailed,
+											onCaptionTrack: chooseCaptionTrack,
+											onSecondaryTrack: chooseSecondaryTrack,
+											strings,
+											onChange: changePreferences,
+											onShowShortcuts: () => {
+												setMenu(null);
+												setSheet(true);
+											},
+											onClose: () => setMenu(null)
+										}) : null]
+									}),
+									pictureInPictureSupported ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-button lk-iv-wide",
+										"aria-label": strings.videoPictureInPicture,
+										"aria-pressed": pictureInPicture,
+										onClick: togglePictureInPicture,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PictureInPictureIcon, {})
+									}) : null,
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-button",
+										"aria-label": fullscreen ? strings.videoExitFullscreen : strings.videoFullscreen,
+										onClick: toggleFullscreen,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FullscreenIcon, { on: fullscreen })
+									})
+								]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "lk-iv-quiz",
+						role: "dialog",
+						"aria-modal": "false",
+						"aria-labelledby": `${playerId}-quiz-title`,
+						hidden: openQuiz === null,
+						onKeyDown: (event) => {
+							if (event.key === "Escape" && !event.defaultPrevented && !required && openQuiz !== null) {
+								event.preventDefault();
+								closeQuiz("skip");
+							}
+						},
+						children: [
+							openCue !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "lk-iv-quiz-head",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+									id: `${playerId}-quiz-title`,
+									ref: quizHeadingRef,
+									tabIndex: -1,
+									className: "lk-iv-quiz-title",
+									children: [
+										quizTitle(openCue),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "lk-iv-quiz-time",
+											children: [" · ", clock(openCue.at)]
+										}),
+										required ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "lk-iv-tag",
+											children: strings.videoRequired
+										})] }) : null
+									]
+								}), openSlots.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "lk-iv-steps",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "lk-iv-steps-label",
+										children: strings.videoQuestionProgress(step + 1, openSlots.length)
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+										className: "lk-iv-steps-dots",
+										children: openSlots.map((slot, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "lk-iv-step",
+											"data-current": index === step || void 0,
+											"data-answered": answered.has(slot.slotId) || void 0,
+											"aria-current": index === step ? "step" : void 0,
+											"aria-label": strings.videoQuestionStep(index + 1, answered.has(slot.slotId)),
+											onClick: () => goToStep(index)
+										}) }, slot.slotId))
+									})]
+								}) : null]
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "lk-iv-quiz-body",
+								children: cues.filter((cue) => mounted.has(cue.id)).map((cue) => (slotsByCue.get(cue.id) ?? []).map((slot, index) => {
+									const shown = openQuiz?.cueId === cue.id && step === index;
+									const place = places.get(slot.slotId);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuestionPane, {
+										hidden: !shown,
+										channel: channelFor(slot.slotId),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotQuestion, {
+											title: slot.activity.title,
+											strings,
+											render: props.renderQuestion,
+											question: props.renderQuestion === void 0 ? void 0 : questionFor(slot, place, shown),
+											sdk: () => sdkQuestion(slot, place),
+											setHostPending: callsFor(place).setPending
+										})
+									}, slot.slotId);
+								}))
+							}),
+							openCue !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "lk-iv-quiz-foot",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "lk-iv-quiz-foot-start",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										className: "lk-iv-link",
+										onClick: () => closeQuiz("rewatch"),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReplayIcon, {}), strings.videoRewatch]
+									}), !required && !lastStep ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "lk-iv-link",
+										onClick: () => closeQuiz("skip"),
+										children: strings.videoSkipQuiz
+									}) : null]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "lk-iv-quiz-foot-end",
+									children: [renderMode === "exam" && stepAnswered ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "lk-iv-saved",
+										role: "status",
+										children: strings.videoAnswerSaved
+									}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										className: stepAnswered || renderMode === "review" ? "lk-iv-action lk-iv-action-primary" : "lk-iv-action",
+										"aria-disabled": !canAdvance || void 0,
+										onClick: () => {
+											if (!canAdvance) return;
+											if (lastStep) closeQuiz("continue");
+											else goToStep(step + 1);
+										},
+										children: [lastStep ? strings.videoContinue : strings.videoNextQuestion, lastStep ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, {}) : null]
+									})]
+								})]
+							}) : null
+						]
+					}),
+					ended && openQuiz === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndScreen, {
+						idPrefix: playerId,
+						renderMode,
+						quizzes,
+						answered: answeredCount,
+						total: totalQuestions,
+						percent: delivery.feedback ? percent : null,
+						strings,
+						onOpenQuiz: (id) => {
+							const cue = cues.find((candidate) => candidate.id === id);
+							if (cue !== void 0) openAt(cue);
+						},
+						onWatchAgain: togglePlay,
+						pending: answerPending,
+						onFinish: renderMode === "review" ? void 0 : () => {
+							if (pendingRef.current.size > 0) {
+								announce(strings.videoAnswerPending);
+								return;
+							}
+							finish();
+						}
+					}) : null,
+					sheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShortcutSheet, {
+						strings,
+						onClose: () => {
+							setSheet(false);
+							playButtonRef.current?.focus();
+						}
+					}) : null
+				]
+			}),
+			preferences.panel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentsPanel, {
+				idPrefix: playerId,
+				tab: panelTab,
+				onTab: setPanelTab,
+				chapters,
+				quizzes,
+				cues: primaryCues,
+				primaryLanguage: primaryTrack?.srclang,
+				secondaryCues: secondaryTrack === void 0 ? NO_CUES : secondaryCues,
+				secondaryLanguage: secondaryTrack?.srclang,
+				activeCue: activeCueIndex,
+				limit: spoilerLimit,
+				strings,
+				onSeek: seek,
+				onOpenQuiz: (id) => {
+					const cue = cues.find((candidate) => candidate.id === id);
+					if (cue === void 0) return;
+					if (renderMode !== "review" && limitSeek(timeline, videoRef.current?.currentTime ?? 0, cue.at, furthest.current, finished).at < cue.at - .25) {
+						seek(cue.at);
+						return;
+					}
+					openAt(cue);
+				}
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "lk-iv-live",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: announcement
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: setPortalContainer,
+				className: "lk-iv-portal"
+			})
+		]
+	});
+}
+/**
+* One question's content: the host's, when `renderQuestion` returns anything
+* but `undefined`, else the SDK's own component. Inside the boundary either
+* way, and `renderQuestion` is called inside it too, so a host that throws —
+* while rendering, or while deciding what to render — loses that one question
+* and never the video.
+*/
+function SlotQuestion({ title, strings, ...content }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActivityErrorBoundary.ActivityErrorBoundary, {
+		...title !== void 0 ? { activityTitle: title } : {},
+		strings,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotContent, { ...content })
+	});
+}
+function SlotContent({ render, question, sdk, setHostPending }) {
+	const hosted = render !== void 0 && question !== void 0 ? render(question) : void 0;
+	const hosting = hosted !== void 0;
+	(0, react.useEffect)(() => {
+		if (!hosting) return;
+		return () => setHostPending(false);
+	}, [hosting, setHostPending]);
+	return hosting ? hosted : sdk();
+}
+/**
+* One question of a quiz. Every question stays mounted once its quiz has
+* opened, so an answer survives stepping back or rewinding the video; hiding
+* it — another question, or the quiz closing — stops whatever it was
+* recording or playing, as a sequence's pane does.
+*/
+function QuestionPane({ hidden, channel, children }) {
+	const ref = (0, react.useRef)(null);
+	const captureGroup = channel.captureGroup;
+	(0, react.useEffect)(() => {
+		if (!hidden) return;
+		require_ReadAloud.stopCaptureGroup(captureGroup);
+		for (const media of ref.current?.querySelectorAll("audio, video") ?? []) {
+			const element = media;
+			if (!element.paused) element.pause();
+		}
+	}, [hidden, captureGroup]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: "lk-iv-question",
+		hidden,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useAiHelp.SequenceSlotContext.Provider, {
+			value: channel,
+			children
+		})
+	});
+}
+/** How far the browser has downloaded past the playhead, in seconds from 0. */
+function bufferedAhead(video) {
+	const ranges = video.buffered;
+	if (ranges === void 0) return 0;
+	for (let index = 0; index < ranges.length; index += 1) if (ranges.start(index) <= video.currentTime && video.currentTime <= ranges.end(index)) return ranges.end(index);
+	return 0;
+}
+/** A quiz's marker state: its shape on the progress bar and its dot in the lists. */
+function markerState(quizSlots, answered, renderMode, outcomes) {
+	if (renderMode === "review" && outcomes !== void 0) {
+		const results = quizSlots.map((slot) => Object.hasOwn(outcomes, slot.slotId) ? outcomes[slot.slotId] : void 0);
+		if (results.some((outcome) => outcome === void 0 || outcome.status === "deferred")) return "pending";
+		const scored = results.filter((outcome) => outcome?.status === "scored");
+		if (scored.length === results.length && scored.every((outcome) => outcome.passed)) return "correct";
+		return scored.some((outcome) => outcome.passed) ? "partial" : "incorrect";
+	}
+	const count = quizSlots.filter((slot) => answered.has(slot.slotId)).length;
+	if (count === quizSlots.length && count > 0) return "answered";
+	if (count > 0) return "open";
+	return "unreached";
+}
+//#endregion
+//#region src/components/InteractiveVideo/index.tsx
+/**
+* Public interactive video: the player wrapped in `ActivityErrorBoundary`, so a
+* render failure — the development-time schema check among them — degrades to
+* an accessible fallback instead of taking the host page down.
+*
+* A formative tool, for lessons and practice — not for official summative
+* exams, which `<ActivitySequence>` delivers.
+*/
+function InteractiveVideo(props) {
+	const strings = require_LkIntlProvider.useLkStrings(props.strings);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActivityErrorBoundary.ActivityErrorBoundary, {
+		...props.group?.title !== void 0 ? { activityTitle: props.group.title } : {},
+		strings,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InteractiveVideo$1, { ...props })
+	});
+}
+//#endregion
+Object.defineProperty(exports, "InteractiveVideo", {
+	enumerable: true,
+	get: function() {
+		return InteractiveVideo;
+	}
+});
+Object.defineProperty(exports, "resolveCaptionTracks", {
+	enumerable: true,
+	get: function() {
+		return resolveCaptionTracks;
+	}
+});
+
+//# sourceMappingURL=InteractiveVideo-BguGv-HA.cjs.map