@intellectif/lk-react 23.1.0 → 23.1.2

package/dist/ReadAloud-C8RhaUqV.js

@@ -0,0 +1,1092 @@
+'use client';
+import { a as ANONYMOUS_ACTOR, c as isDevelopment, f as SequenceSlotContext, m as stampTake, o as detailIsRight, p as mintTake, u as objectIdFor } from "./useAiHelp-B-ccDL5Q.js";
+import { i as useLkStrings } from "./LkIntlProvider-D_FdYXjQ.js";
+import { t as ActivityErrorBoundary } from "./ActivityErrorBoundary-Dw6SbWv3.js";
+import { useActivityState } from "./hooks/useActivityState.js";
+import { n as localeDirectionOf } from "./direction-Dq0_HtA5.js";
+import { t as ActivityMedia } from "./ActivityMedia-vDiP-Psa.js";
+import { i as useDeliveryPolicy, t as FeedbackRegion } from "./FeedbackRegion-CyPSp8bA.js";
+import { t as useSpeechRecorder } from "./useSpeechRecorder-zIi9Dlw8.js";
+import { a as percentOfGrade, c as readOutcome, i as fractionOfGrade, l as usePlaybackRefusal, n as VISUALLY_HIDDEN, o as readAssessResult, r as markSentence, s as readEvidence, t as PronunciationFeedback, u as ReadingCoaching } from "./PronunciationFeedback-Dxd6XPkO.js";
+import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ActivitySchemaError, READ_ALOUD_MAX_SECONDS, READ_ALOUD_MAX_TAKES, assertRedacted, validateActivity, xAPIBuilder, xapiDefinitionFor } from "@intellectif/lk-core";
+//#region src/components/shared/capture-registry.ts
+/**
+* Microphone captures that must stop when the region holding them goes away,
+* keyed by group name.
+*
+* Module-level for the reason `playback-group.ts` is: the thing that knows a
+* pane was hidden — the sequence — is not the thing holding the microphone,
+* and a context would have to be threaded through every activity component to
+* reach one. The caller mints the group name per region; a sequence uses the
+* slot's, so hiding one slot stops that slot's capture and no other's. The name
+* reaches a recorder only through `SequenceSlotContext`, never as a prop, so no
+* consumer string can join another region's group.
+*
+* This **supplements** a recorder's own teardown and never replaces it. The
+* sequence's pane effect runs only on a `hidden` transition, not on unmount,
+* and neither a preview nor a standalone render has panes at all — so a
+* component that records still releases the microphone from its own cleanup,
+* and this registry only covers the case where the component is left mounted
+* and merely hidden.
+*
+* No `useCaptureGroup` hook, unlike playback: that one re-registers after every
+* commit because the element behind a ref can be replaced while the ref object
+* is not, whereas a recorder's `stop` keeps one identity for the life of the
+* hook and a plain effect registers it exactly once.
+*/
+const groups = /* @__PURE__ */ new Map();
+/** Adds a capture's stop to a group; returns the matching removal. */
+function joinCaptureGroup(group, stop) {
+	let members = groups.get(group);
+	if (members === void 0) {
+		members = /* @__PURE__ */ new Set();
+		groups.set(group, members);
+	}
+	members.add(stop);
+	return () => {
+		const current = groups.get(group);
+		if (current === void 0) return;
+		current.delete(stop);
+		if (current.size === 0) groups.delete(group);
+	};
+}
+/**
+* Stops every capture in the group.
+*
+* The members are copied before they are called. Each `stop` is expected to
+* run its own removal, and a component that answers one by starting again
+* would otherwise be stopped by the sweep that its own stop provoked.
+*/
+function stopCaptureGroup(group) {
+	const members = groups.get(group);
+	if (members === void 0) return;
+	for (const stop of [...members]) stop();
+}
+//#endregion
+//#region src/components/ReadAloud/recording-bounds.ts
+const isNumber = (value) => typeof value === "number" && Number.isFinite(value);
+/**
+* The one reading of an item's `recording`: every bound the component captures
+* under, every sentence that names one, and the key that decides whether a new
+* `data` is a new reading all come from here, so no two of them can read the
+* same field differently.
+*
+* `practice` renders unvalidated content in production, so what comes in may
+* be anything a server stored. What comes out is always a set of bounds the
+* schema accepts, and bounds the schema accepts come out unchanged. Three
+* rules decide the rest, and each errs toward a take the learner can finish:
+*
+* - **A present bound that cannot be read is the schema's own ceiling**, never
+*   no bound at all: a `maxSeconds` of `"20"` or `NaN` records up to
+*   `READ_ALOUD_MAX_SECONDS`, and a `maxTakes` of `"1"` allows
+*   `READ_ALOUD_MAX_TAKES`. Unreadable data can make the recorder stricter
+*   than the ceiling, never looser: `maxTakes: "1"` used to mean unlimited
+*   takes. `null` is an absent optional, as it is everywhere a host sends JSON.
+* - **A count is a whole number in range**: `0` and `1.5` read as `1`, `999`
+*   as the ceiling.
+* - **A minimum the maximum cannot reach is no minimum.** A `minSeconds` of 30
+*   under a `maxSeconds` of 20 stopped every take at 20 and then refused it as
+*   too short, so the item could never be answered. The schema refuses that
+*   pair; a reading that honoured it would leave the learner a dead end.
+*/
+function readRecordingBounds(recording) {
+	const bounds = typeof recording === "object" && recording !== null ? recording : {};
+	const maxSeconds = isNumber(bounds.maxSeconds) && bounds.maxSeconds > 0 ? Math.min(bounds.maxSeconds, READ_ALOUD_MAX_SECONDS) : READ_ALOUD_MAX_SECONDS;
+	const minSeconds = isNumber(bounds.minSeconds) && bounds.minSeconds >= 0 && bounds.minSeconds < maxSeconds ? bounds.minSeconds : void 0;
+	const takes = bounds.maxTakes;
+	return {
+		maxSeconds,
+		minSeconds,
+		maxTakes: takes === void 0 || takes === null ? void 0 : isNumber(takes) ? Math.min(Math.max(1, Math.floor(takes)), READ_ALOUD_MAX_TAKES) : READ_ALOUD_MAX_TAKES
+	};
+}
+/**
+* A length of audio as the whole seconds a sentence says beside `maxSeconds`,
+* never more than it. A bound may be fractional — the schema allows 2.5 — and
+* rounding a take that ran to it said "3 of 2.5 seconds". Rounded to the
+* nearest second for a finished take, and down for the counter of one still
+* running, which should not reach its bound before the take does.
+*/
+function secondsWithin(milliseconds, maxSeconds, rounding) {
+	const seconds = milliseconds / 1e3;
+	return Math.min(Math.max(0, rounding === "nearest" ? Math.round(seconds) : Math.floor(seconds)), maxSeconds);
+}
+//#endregion
+//#region src/components/ReadAloud/ReadAloud.tsx
+/**
+* Names playback groups for the model recordings. Per mount and never derived
+* from `useId`: two separately hydrated roots derive the same id for the same
+* tree position, and their recordings would pause each other. The name never
+* reaches the DOM.
+*/
+let modelsGroupCount = 0;
+/** A title with something in it a screen reader can say. */
+const VISIBLE_TEXT_RE = /[^\p{White_Space}\p{Cc}\p{Cf}\p{Default_Ignorable_Code_Point}]/u;
+/** A stored mark's id, as `gradeReadAloud` numbers the reference words. */
+const MARK_ID_RE = /^w\d+$/;
+/** The states a mark rebuilt from stored details can carry: insertions are not stored. */
+const STORED_STATES = [
+	"correct",
+	"mispronounced",
+	"omitted"
+];
+/** The level meter's resolution, in steps the skin can select on. */
+const LEVEL_STEPS = 10;
+/**
+* Whether the screen offers "Try again" for the take this phase describes —
+* the one answer to that question, read by the button that offers it and by
+* the take state a pager is told, so the two cannot disagree. A retry re-sends
+* the SAME take: a take that failed to upload is sent again, and a stored take
+* whose assessment failed is judged again without being uploaded twice.
+*/
+function offersRetry(phase, uploaded) {
+	return phase.kind === "upload-failed" || phase.kind === "assess-failed" && phase.retryable && uploaded !== null;
+}
+/**
+* The state of the phase's take, as a pager deciding whether its set is
+* finished reads it. Derived from the phase alone, so no path through a submit
+* can leave a pager waiting on a take this component has finished with: every
+* path ends in a phase.
+*/
+function takeStateOf(phase, uploaded) {
+	if (phase.kind === "uploading" || phase.kind === "assessing") return "in-flight";
+	return offersRetry(phase, uploaded) ? "retryable" : "settled";
+}
+/**
+* Whether the recorder is capturing, or about to: the one answer to "is a take
+* being recorded", read by everything that must hold still for one. A
+* permission prompt counts — a prompt answered after the pane went away would
+* otherwise open a microphone nobody is in front of, and a model recording
+* played while the prompt is up would be charged a play and then silenced.
+*/
+function capturing(status) {
+	return status === "recording" || status === "requesting-permission";
+}
+/**
+* What a take is a take OF: the item, the words, their language and the bounds
+* the take is captured under. A change to any of these is a different reading,
+* and a take of the old one answers nothing.
+*
+* Deliberately NOT the identity of `data`. `redact()` returns a new object on
+* every call, and `activities={raw.map(redact)}` is a documented way to pass a
+* paper, so a host that rebuilds its items on every render is ordinary — and a
+* reset keyed on identity silently threw away every grade still in flight and
+* refunded the take budget on each of those renders, so a `maxTakes: 1` exam
+* accepted a second take. The title, the instructions and the model recordings
+* are presentation; editing them leaves the take a take of the same reading.
+*
+* The bounds are the CLAMPED ones, which are what the recorder is given. Read
+* field by field into strings, so no value unvalidated data carries can make
+* the key throw.
+*/
+function readingKeyOf(data, bounds) {
+	const text = (value) => typeof value === "string" ? value : null;
+	return JSON.stringify([
+		text(data.id),
+		text(data.referenceText),
+		text(data.locale),
+		String(bounds.maxSeconds),
+		String(bounds.minSeconds),
+		String(bounds.maxTakes)
+	]);
+}
+/**
+* The slower model recording as an `ActivityMedia`: it follows the model
+* recording's playback policy minus `maxPlays` (`controls`, `seek`, `rate`,
+* the native hints), so a locked scrubber or a fixed speed binds both files —
+* and it never carries a budget of its own, so `<ActivityMedia>` never demands
+* a binding for it. `undefined` when there is no slow recording.
+*/
+function slowMediaFor(data, label) {
+	const slow = data.slowMedia;
+	if (slow === void 0) return;
+	const { maxPlays: _budget, ...inherited } = data.media?.playback ?? {};
+	const hasPolicy = Object.values(inherited).some((value) => value !== void 0);
+	return {
+		type: "audio",
+		url: slow.url,
+		alt: slow.alt ?? label,
+		...hasPolicy ? { playback: inherited } : {}
+	};
+}
+/**
+* Word marks rebuilt from stored scoring details — a server-recorded mark shown
+* after the fact, with no assessment on the client. Inserted words are not in
+* the details (`gradeReadAloud` stores one mark per REFERENCE word, and a word
+* the learner added is not one the item asked for), so none appear.
+*
+* The details are a read grade's, so every entry is well-formed; what is left
+* to decide here is whether they are word marks at all, rather than a rubric's
+* own breakdown.
+*/
+function marksFromDetails(details) {
+	if (details.length === 0 || !details.every((detail) => MARK_ID_RE.test(detail.itemId))) return null;
+	return details.map((detail) => {
+		const heard = Array.isArray(detail.learnerResponse) ? detail.learnerResponse.join(" ") : detail.learnerResponse;
+		const reference = Array.isArray(detail.correctResponse) ? detail.correctResponse.join(" ") : detail.correctResponse;
+		const state = detailIsRight(detail) ? "correct" : detail.outcome === "incorrect-omission" ? "omitted" : "mispronounced";
+		return {
+			itemId: detail.itemId,
+			reference,
+			heard,
+			state,
+			...typeof detail.score === "number" ? { accuracy: detail.score * 100 } : {}
+		};
+	});
+}
+/** The stored take a learner response points at, or `null` for a blank or another type. */
+function recordingOf(response) {
+	return response !== void 0 && response.type === "read-aloud" ? response.recording : null;
+}
+/** The response this component emits; `takes` is written only when one was made. */
+function responseOf(recording, takes) {
+	return {
+		type: "read-aloud",
+		recording,
+		...takes > 0 ? { takes } : {}
+	};
+}
+/**
+* Which learner message an unscorable code earns. The two codes that mean
+* "nothing was heard" send the learner back to a quieter room; every other one,
+* the SDK's and an application's own alike — and no code at all — says only
+* that this take could not be assessed. **The code itself is never shown** — it
+* is a developer's label.
+*/
+function unscorableMessage(code, s) {
+	return code === "no_speech" || code === "insufficient_voiced_time" ? s.readAloudNotHeard : s.readAloudNotAssessed;
+}
+/**
+* The announcement, with grader feedback in its own isolated span: its
+* direction is its own, so an English "Well read." in an Arabic interface keeps
+* its full stop at its end. Its language is not guessed — feedback may be
+* written in the interface's language or the reading's.
+*/
+function AnnouncementText({ announcement }) {
+	if (announcement === null) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [announcement.text, announcement.feedback ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx("span", {
+		dir: "auto",
+		children: announcement.feedback
+	})] }) : null] });
+}
+/**
+* The server's outcome in `review`, as `readOutcome` read it. Nothing on this
+* path scores, infers or defaults a grade.
+*
+* `scoreShown` says whether the grade is already on screen — it is, whenever
+* `<PronunciationFeedback>` was given the same grade — so the sentence is not
+* rendered twice. The wrapper and its attributes are rendered either way,
+* because they are what a stylesheet and a diagnostic read.
+*/
+function OutcomeSummary({ reading, s, scoreShown }) {
+	switch (reading.kind) {
+		case "graded": return /* @__PURE__ */ jsx("div", {
+			className: "lk-ra-outcome",
+			"data-status": reading.status,
+			"data-passed": String(reading.grade.passed),
+			children: scoreShown ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+				className: "lk-ra-grade",
+				children: s.scoreAnnouncement(percentOfGrade(reading.grade), reading.grade.passed)
+			}), reading.grade.feedback ? /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-grade-feedback",
+				dir: "auto",
+				children: reading.grade.feedback
+			}) : null] })
+		});
+		case "deferred": return /* @__PURE__ */ jsx("div", {
+			className: "lk-ra-outcome",
+			"data-status": "deferred",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-grade",
+				children: s.awaitingGrade
+			})
+		});
+		case "unscorable": return /* @__PURE__ */ jsx("div", {
+			className: "lk-ra-outcome",
+			"data-status": "unscorable",
+			...reading.code !== void 0 ? { "data-code": reading.code } : {},
+			children: /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-grade",
+				children: s.couldNotBeGraded
+			})
+		});
+		default: return /* @__PURE__ */ jsx("div", {
+			className: "lk-ra-outcome",
+			...reading.status !== void 0 ? { "data-status": reading.status } : {},
+			children: /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-grade",
+				children: s.couldNotBeGraded
+			})
+		});
+	}
+}
+/**
+* Reads a text aloud and hands the recording to the application.
+*
+* The SDK records; it never judges. A take is captured as mono 16-bit PCM WAV
+* at 16 kHz — the one format `inspectWav` measures directly — handed to
+* `recordingBinding.upload`, and reported through `onSubmit`. Whether anything
+* assesses it, and where, is the application's: in `practice` an optional
+* `assess` may come back with a grade, and in `exam` nothing is ever assessed
+* on the client.
+*
+* **`recordingBinding.upload` is required outside `review`** and its absence
+* throws at render, in production too: a learner must never speak into a
+* control that stores nothing. `assess` is not required — a binding without it
+* records, uploads and submits, and shows a notice in place of the feedback.
+*
+* **A grade that comes back is read, not trusted** — whether `assess` returned
+* it or `outcome` carries it. A score that is not a number between 0 and its
+* maximum, or a `passed` that is not a boolean, is shown as could-not-be-graded
+* and never reaches `onComplete` or a statement; `onComplete` fires exactly when
+* a score is on screen, with that score.
+*
+* **AI coaching**, with a `pronunciationCoaching` port: under the marks, a
+* button asks a model to explain them — in `practice` once a take is graded,
+* and in `review` wherever marks are shown, from kept evidence or from the
+* stored grade's details. Never in `exam`. The marks are the engine's, and
+* coaching on a word it did not mark is refused whole.
+*
+* **Under a strict Content-Security-Policy** the take is played back from a
+* `blob:` URL, so `media-src` must allow `blob:` — refused, the player and the
+* per-word buttons give way to a note saying the take cannot be played here —
+* and the capture module loads from one too, so either `script-src` allows
+* `blob:` or `workletUrl` names a self-hosted copy of `CAPTURE_PROCESSOR_SOURCE`.
+*
+* ```tsx
+* <ReadAloud
+*   data={item}
+*   recordingBinding={{ upload, assess }}
+*   onSubmit={persist}
+*   onComplete={record}
+* />
+* ```
+*/
+function ReadAloud$1({ data, onComplete, onSubmit, onInteraction, value, defaultValue, defaultSubmitted, renderMode = "practice", outcome, mediaBudget, mediaStrings, strings, theme, locale, disabled, recordingBinding, assessment, breakThreshold, monotoneThreshold, workletUrl, delivery, ai }) {
+	const isExam = renderMode === "exam";
+	const policy = useDeliveryPolicy(delivery);
+	const isReview = renderMode === "review";
+	const s = useLkStrings(strings);
+	const slot = useContext(SequenceSlotContext);
+	const captureGroup = slot?.captureGroup;
+	const devError = useMemo(() => {
+		if (!isDevelopment()) return null;
+		if (data.redacted === true) try {
+			assertRedacted(data);
+			return null;
+		} catch (error) {
+			return error instanceof Error ? error : new Error(String(error));
+		}
+		const result = validateActivity("read-aloud", data);
+		return result.success ? null : new ActivitySchemaError("read-aloud", result.errors);
+	}, [data]);
+	const { maxSeconds, minSeconds, maxTakes } = readRecordingBounds(data.recording);
+	const readingKey = readingKeyOf(data, {
+		maxSeconds,
+		minSeconds,
+		maxTakes
+	});
+	const recorder = useSpeechRecorder(useMemo(() => ({
+		maxDurationMs: maxSeconds * 1e3,
+		...minSeconds !== void 0 ? { minDurationMs: minSeconds * 1e3 } : {},
+		...maxTakes !== void 0 ? { maxTakes } : {},
+		...workletUrl !== void 0 ? { workletUrl } : {}
+	}), [
+		maxSeconds,
+		minSeconds,
+		maxTakes,
+		workletUrl
+	]));
+	const { state, start, complete, getTimeSpent, reset } = useActivityState(defaultSubmitted === true ? "completed" : "idle");
+	const [phase, setPhase] = useState({ kind: "idle" });
+	const [uploaded, setUploaded] = useState(null);
+	const [takeUrl, setTakeUrl] = useState(null);
+	const [playbackUrl, setPlaybackUrl] = useState(null);
+	const [errorNonce, setErrorNonce] = useState(0);
+	const titleId = `${useId()}-title`;
+	const [modelsGroup] = useState(() => {
+		modelsGroupCount += 1;
+		return `lk-ra-models-${modelsGroupCount}`;
+	});
+	const interactionRef = useRef(onInteraction);
+	interactionRef.current = onInteraction;
+	const bindingRef = useRef(recordingBinding);
+	bindingRef.current = recordingBinding;
+	const submittingRef = useRef(false);
+	const runRef = useRef(0);
+	const slotRef = useRef(slot);
+	slotRef.current = slot;
+	const reportedTakeRef = useRef(null);
+	useEffect(() => () => {
+		runRef.current += 1;
+		const take = reportedTakeRef.current;
+		if (take !== null) slotRef.current?.takeState(take, "settled");
+	}, []);
+	const fire = useCallback((type, payload) => {
+		interactionRef.current?.({
+			type,
+			activityId: data.id,
+			timestamp: Date.now(),
+			payload
+		});
+	}, [data.id]);
+	const lastStatusRef = useRef(recorder.status);
+	useEffect(() => {
+		if (lastStatusRef.current === recorder.status) return;
+		lastStatusRef.current = recorder.status;
+		if (recorder.status === "recording") fire("recording-started", {
+			takes: recorder.takesUsed,
+			durationMs: 0
+		});
+		else if (recorder.status === "recorded" && recorder.take !== null) fire("recording-stopped", {
+			takes: recorder.takesUsed,
+			durationMs: recorder.take.durationMs
+		});
+	}, [
+		recorder.status,
+		recorder.take,
+		recorder.takesUsed,
+		fire
+	]);
+	useEffect(() => {
+		if (recorder.error !== null) setErrorNonce((nonce) => nonce + 1);
+	}, [recorder.error]);
+	const take = recorder.take;
+	useEffect(() => {
+		if (take === null || typeof URL.createObjectURL !== "function") return;
+		const url = URL.createObjectURL(take.blob);
+		setTakeUrl(url);
+		return () => {
+			URL.revokeObjectURL(url);
+			setTakeUrl(null);
+		};
+	}, [take]);
+	const restored = recordingOf(value ?? defaultValue);
+	const restoredKey = restored?.key ?? null;
+	useEffect(() => {
+		const binding = bindingRef.current;
+		if (!isReview || restored === null || binding?.playbackUrl === void 0) return;
+		let live = true;
+		Promise.resolve(binding.playbackUrl(restored)).then((url) => {
+			if (live) setPlaybackUrl(url);
+		}, () => {});
+		return () => {
+			live = false;
+		};
+	}, [
+		isReview,
+		restoredKey,
+		readingKey
+	]);
+	const statusRef = useRef(recorder.status);
+	statusRef.current = recorder.status;
+	const releaseMicrophone = useCallback(() => {
+		if (capturing(statusRef.current)) recorder.discard();
+	}, [recorder.discard]);
+	useEffect(() => {
+		if (captureGroup === void 0) return;
+		return joinCaptureGroup(captureGroup, releaseMicrophone);
+	}, [captureGroup, releaseMicrophone]);
+	const defaultSubmittedRef = useRef(defaultSubmitted);
+	useEffect(() => {
+		defaultSubmittedRef.current = defaultSubmitted;
+	}, [defaultSubmitted]);
+	const lastReadingRef = useRef(readingKey);
+	useEffect(() => {
+		if (lastReadingRef.current === readingKey) return;
+		lastReadingRef.current = readingKey;
+		submittingRef.current = false;
+		runRef.current += 1;
+		setPhase({ kind: "idle" });
+		setUploaded(null);
+		setPlaybackUrl(null);
+		recorder.reset();
+		reset(defaultSubmittedRef.current === true ? "completed" : "idle");
+	}, [
+		readingKey,
+		reset,
+		recorder.reset
+	]);
+	const phaseTake = phase.kind === "idle" ? null : phase.take;
+	const phaseTakeState = takeStateOf(phase, uploaded);
+	useEffect(() => {
+		const take = phaseTake ?? reportedTakeRef.current;
+		if (slot === null || take === null) return;
+		reportedTakeRef.current = take;
+		slot.takeState(take, phaseTakeState);
+	}, [
+		slot,
+		phaseTake,
+		phaseTakeState
+	]);
+	const modelsRef = useRef(null);
+	const isCapturing = capturing(recorder.status);
+	useEffect(() => {
+		if (!isCapturing) return;
+		const node = modelsRef.current;
+		if (node === null) return;
+		const hush = () => {
+			for (const media of node.querySelectorAll("audio, video")) {
+				const element = media;
+				if (!element.paused) element.pause();
+			}
+		};
+		hush();
+		node.addEventListener("play", hush, true);
+		return () => {
+			node.removeEventListener("play", hush, true);
+		};
+	}, [isCapturing]);
+	const slowMedia = useMemo(() => slowMediaFor(data, s.readAloudSlowRecording), [data, s.readAloudSlowRecording]);
+	const takeAudio = isReview ? playbackUrl : takeUrl;
+	const playback = usePlaybackRefusal(takeAudio);
+	const submitRef = useRef(null);
+	if (devError) throw devError;
+	if (!isReview && recordingBinding?.upload === void 0) throw new Error(`ReadAloud "${data.id}" was rendered in renderMode "${renderMode}" without \`recordingBinding.upload\`. The learner could record a take that is stored nowhere and submitted as nothing, which looks like a working activity the whole way through. Pass a \`recordingBinding\` whose \`upload\` puts the take in your storage and returns its key. \`assess\` is optional: without it the take is still recorded, uploaded and submitted, and a notice replaces the feedback.`);
+	const submitted = state === "completed";
+	const inactive = disabled === true || submitted || isReview;
+	const busy = phase.kind === "uploading" || phase.kind === "assessing";
+	const takesLeft = maxTakes === void 0 ? void 0 : Math.max(0, maxTakes - recorder.takesUsed);
+	/** Marks a failure so the alert announces even when the sentence repeats. */
+	const raise = (next) => {
+		setErrorNonce((nonce) => nonce + 1);
+		setPhase(next);
+	};
+	/**
+	* Tells the pager slot, if there is one, that `take` is on its way — before
+	* anything is awaited. The report a pager's set waits on must exist before
+	* the first result it waits for can arrive; the take's later states follow
+	* from the phase it reaches (see the effect above).
+	*/
+	const beginTakeReport = (take) => {
+		reportedTakeRef.current = take;
+		slot?.takeState(take, "in-flight");
+	};
+	const runAssess = async (ref, current, take) => {
+		const assess = bindingRef.current?.assess;
+		const durationMs = current?.durationMs ?? 0;
+		const takes = recorder.takesUsed;
+		const run = runRef.current;
+		if (assess === void 0) {
+			setPhase({
+				kind: "unassessed",
+				take
+			});
+			return;
+		}
+		setPhase({
+			kind: "assessing",
+			take
+		});
+		fire("assessment-requested", {
+			takes,
+			durationMs
+		});
+		let answer;
+		try {
+			answer = await assess(ref);
+		} catch {
+			if (run !== runRef.current) return;
+			raise({
+				kind: "assess-failed",
+				take,
+				retryable: true
+			});
+			fire("assessment-failed", {
+				takes,
+				durationMs,
+				retryable: true
+			});
+			return;
+		}
+		if (run !== runRef.current) return;
+		const result = readAssessResult(answer);
+		if (result.status === "failed") {
+			raise({
+				kind: "assess-failed",
+				take,
+				retryable: result.retryable
+			});
+			fire("assessment-failed", {
+				takes,
+				durationMs,
+				retryable: result.retryable
+			});
+			return;
+		}
+		if (result.status === "unscorable") {
+			setPhase({
+				kind: "unscorable",
+				take,
+				code: result.code
+			});
+			fire("assessment-failed", {
+				takes,
+				durationMs,
+				retryable: true,
+				...result.code !== void 0 ? { code: result.code } : {}
+			});
+			return;
+		}
+		const timeSpent = getTimeSpent();
+		setPhase({
+			kind: "graded",
+			take,
+			assessment: result.assessment,
+			grade: result.grade
+		});
+		const grade = result.grade;
+		if (grade === null) {
+			fire("assessment-failed", {
+				takes,
+				durationMs,
+				retryable: true
+			});
+			return;
+		}
+		onComplete?.(stampTake({
+			score: grade.score,
+			maxScore: grade.maxScore,
+			passed: grade.passed,
+			timeSpent,
+			xapiStatement: xAPIBuilder.buildAnsweredStatement({
+				actor: ANONYMOUS_ACTOR,
+				object: {
+					id: objectIdFor(data.id),
+					name: { [data.locale ?? "en-US"]: data.title },
+					...xapiDefinitionFor(data)
+				},
+				timeSpentMs: timeSpent,
+				response: result.recognizedText ?? "",
+				scoringResult: {
+					score: fractionOfGrade(grade),
+					maxScore: 1,
+					passed: grade.passed,
+					feedback: grade.feedback,
+					details: grade.details ?? []
+				}
+			})
+		}, take));
+	};
+	const submitTake = async (current) => {
+		const binding = bindingRef.current;
+		if (inactive || submittingRef.current || binding === void 0) return;
+		submittingRef.current = true;
+		const takes = recorder.takesUsed;
+		const run = runRef.current;
+		const take = mintTake();
+		beginTakeReport(take);
+		try {
+			let ref = null;
+			if (current !== null) {
+				setPhase({
+					kind: "uploading",
+					take
+				});
+				try {
+					ref = await binding.upload(current);
+				} catch {
+					if (run !== runRef.current) return;
+					raise({
+						kind: "upload-failed",
+						take
+					});
+					fire("recording-upload-failed", {
+						takes,
+						durationMs: current.durationMs,
+						retryable: true
+					});
+					return;
+				}
+				if (run !== runRef.current) return;
+				setUploaded(ref);
+				fire("recording-uploaded", {
+					takes,
+					durationMs: current.durationMs
+				});
+			}
+			onSubmit?.(stampTake(responseOf(ref, takes), take));
+			fire("submitted", {
+				takes,
+				durationMs: current?.durationMs ?? 0
+			});
+			if (isExam || ref === null) {
+				complete();
+				setPhase({
+					kind: "submitted",
+					take
+				});
+				return;
+			}
+			await runAssess(ref, current, take);
+		} finally {
+			submittingRef.current = false;
+		}
+	};
+	/**
+	* Judges the take that is already stored, again — the SAME take, so the same
+	* number. Guarded like a submit: an assessment costs an application money,
+	* and two presses of one retry must not buy two of them.
+	*/
+	const retryAssess = async (ref, take) => {
+		if (submittingRef.current) return;
+		submittingRef.current = true;
+		beginTakeReport(take);
+		try {
+			await runAssess(ref, recorder.take, take);
+		} finally {
+			submittingRef.current = false;
+		}
+	};
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		if (inactive || busy || recorder.take === null || phase.kind !== "idle") return;
+		submitTake(recorder.take);
+	};
+	const beginTake = () => {
+		if (inactive || busy || !recorder.canRecord) return;
+		if (recorder.take !== null) fire("recording-discarded", {
+			takes: recorder.takesUsed,
+			durationMs: recorder.take.durationMs
+		});
+		setPhase({ kind: "idle" });
+		setUploaded(null);
+		start();
+		recorder.start();
+	};
+	const contentLang = typeof data.locale === "string" ? data.locale : void 0;
+	const contentDir = localeDirectionOf(data.locale);
+	const coachingItem = {
+		id: data.id,
+		title: data.title,
+		referenceText: data.referenceText,
+		locale: data.locale,
+		...data.instructions !== void 0 ? { instructions: data.instructions } : {},
+		...data.ai !== void 0 ? { ai: data.ai } : {}
+	};
+	const outcomeReading = useMemo(() => readOutcome(outcome), [outcome]);
+	const keptEvidence = useMemo(() => readEvidence(assessment), [assessment]);
+	const storedGrade = outcomeReading?.kind === "graded" && outcomeReading.status === "graded" ? outcomeReading.grade : null;
+	const storedMarks = useMemo(() => policy.feedback && isReview && keptEvidence === null && storedGrade?.details !== void 0 ? marksFromDetails(storedGrade.details) : null, [
+		policy.feedback,
+		isReview,
+		keptEvidence,
+		storedGrade
+	]);
+	const feedbackAssessment = !policy.feedback ? null : isReview ? keptEvidence : phase.kind === "graded" ? phase.assessment : null;
+	const feedbackGrade = isReview ? storedGrade : phase.kind === "graded" ? phase.grade : null;
+	const feedbackAudio = playback.refused ? null : takeAudio;
+	const rootRef = useRef(null);
+	const [panelLostTheGrade, setPanelLostTheGrade] = useState(false);
+	const panelHasGrade = feedbackAssessment !== null && feedbackGrade !== null;
+	const gradeShownInPanel = panelHasGrade && !panelLostTheGrade;
+	useEffect(() => {
+		const root = rootRef.current;
+		const lost = panelHasGrade && (root === null || root.querySelector(".lk-pf-grade") === null);
+		setPanelLostTheGrade((was) => was === lost ? was : lost);
+	});
+	const announcement = useMemo(() => {
+		if (isReview) return null;
+		if (recorder.status === "recording") return {
+			text: s.readAloudRecordingStarted,
+			feedback: null
+		};
+		const stopped = recorder.status === "recorded" && take !== null ? {
+			text: s.readAloudRecordingStopped(secondsWithin(take.durationMs, maxSeconds, "nearest"), maxSeconds),
+			feedback: null
+		} : null;
+		if (isExam) {
+			if (phase.kind === "submitted" || submitted) return {
+				text: s.answerSubmitted,
+				feedback: null
+			};
+			return phase.kind === "idle" ? stopped : null;
+		}
+		switch (phase.kind) {
+			case "graded": {
+				const grade = phase.grade;
+				if (grade === null) return {
+					text: `${s.answerSubmitted} ${s.couldNotBeGraded}`,
+					feedback: null
+				};
+				if (!policy.feedback) return {
+					text: s.answerSubmitted,
+					feedback: null
+				};
+				return {
+					text: `${s.answerSubmitted} ${s.scoreAnnouncement(percentOfGrade(grade), grade.passed)}`,
+					feedback: grade.feedback
+				};
+			}
+			case "unscorable": return {
+				text: unscorableMessage(phase.code, s),
+				feedback: null
+			};
+			case "unassessed": return {
+				text: s.readAloudAssessmentUnavailable,
+				feedback: null
+			};
+			case "idle": return stopped;
+			default: return null;
+		}
+	}, [
+		isReview,
+		isExam,
+		phase,
+		submitted,
+		s,
+		recorder.status,
+		take,
+		maxSeconds,
+		policy.feedback
+	]);
+	const alertText = recorder.error !== null ? s.readAloudRecorderError(recorder.error) : phase.kind === "upload-failed" ? s.readAloudUploadFailed : phase.kind === "assess-failed" ? s.readAloudAssessmentFailed : null;
+	return /* @__PURE__ */ jsxs("form", {
+		className: "lk-ra",
+		ref: rootRef,
+		"aria-labelledby": VISIBLE_TEXT_RE.test(data.title) ? titleId : void 0,
+		lang: locale,
+		"data-render-mode": renderMode,
+		style: theme,
+		onSubmit: handleSubmit,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				id: titleId,
+				className: "lk-ra-title",
+				dir: contentDir ?? "auto",
+				lang: contentLang,
+				children: data.title
+			}),
+			typeof data.instructions === "string" && data.instructions !== "" ? /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-instructions",
+				dir: contentDir ?? "auto",
+				lang: contentLang,
+				children: data.instructions
+			}) : null,
+			/* @__PURE__ */ jsx("p", {
+				className: "lk-ra-reference",
+				dir: contentDir ?? "auto",
+				lang: contentLang,
+				children: data.referenceText
+			}),
+			data.media !== void 0 || slowMedia !== void 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "lk-ra-models",
+				ref: modelsRef,
+				children: [data.media !== void 0 ? /* @__PURE__ */ jsxs("fieldset", {
+					className: "lk-ra-model",
+					children: [/* @__PURE__ */ jsx("legend", {
+						className: "lk-ra-model-label",
+						children: s.readAloudModelRecording
+					}), /* @__PURE__ */ jsx(ActivityMedia, {
+						media: data.media,
+						renderMode,
+						playbackGroup: modelsGroup,
+						...mediaBudget !== void 0 ? { mediaBudget } : {},
+						...mediaStrings !== void 0 ? { mediaStrings } : {},
+						...strings !== void 0 ? { strings } : {},
+						...onInteraction !== void 0 ? { onInteraction } : {},
+						...locale !== void 0 ? { locale } : {},
+						...disabled === true || isCapturing ? { disabled: true } : {}
+					})]
+				}) : null, slowMedia !== void 0 ? /* @__PURE__ */ jsxs("fieldset", {
+					className: "lk-ra-model",
+					"data-slow": "true",
+					children: [/* @__PURE__ */ jsx("legend", {
+						className: "lk-ra-model-label",
+						children: s.readAloudSlowRecording
+					}), /* @__PURE__ */ jsx(ActivityMedia, {
+						media: slowMedia,
+						renderMode,
+						playbackGroup: modelsGroup,
+						...mediaStrings !== void 0 ? { mediaStrings } : {},
+						...strings !== void 0 ? { strings } : {},
+						...locale !== void 0 ? { locale } : {},
+						...disabled === true || isCapturing ? { disabled: true } : {}
+					})]
+				}) : null]
+			}) : null,
+			isReview || submitted ? null : /* @__PURE__ */ jsxs("div", {
+				className: "lk-ra-recorder",
+				"data-status": recorder.status,
+				"data-level": recorder.status === "recording" ? Math.min(LEVEL_STEPS, Math.round(recorder.level * LEVEL_STEPS)) : void 0,
+				children: [
+					recorder.status === "recording" ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lk-ra-stop",
+						disabled: inactive,
+						onClick: () => recorder.stop(),
+						children: s.readAloudStop
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lk-ra-record",
+						disabled: inactive,
+						"aria-disabled": !recorder.canRecord || busy || void 0,
+						onClick: beginTake,
+						children: recorder.take === null ? s.readAloudRecord : s.readAloudRerecord
+					}),
+					recorder.status === "recording" ? /* @__PURE__ */ jsx("p", {
+						className: "lk-ra-progress",
+						"aria-hidden": "true",
+						children: s.readAloudRecordingProgress(secondsWithin(recorder.elapsedMs, maxSeconds, "down"), maxSeconds)
+					}) : null,
+					takesLeft !== void 0 && maxTakes !== void 0 ? /* @__PURE__ */ jsx("p", {
+						className: "lk-ra-takes",
+						children: s.readAloudTakesRemaining(takesLeft, maxTakes)
+					}) : null
+				]
+			}),
+			takeAudio === null ? null : playback.refused ? /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-take-unavailable",
+				role: "note",
+				children: s.readAloudPlaybackUnavailable
+			}) : /* @__PURE__ */ jsx("audio", {
+				className: "lk-ra-take",
+				controls: true,
+				src: takeAudio,
+				"aria-label": s.readAloudYourRecording,
+				onError: (event) => playback.refuse(event.currentTarget),
+				...isReview ? {} : { "data-take": recorder.takesUsed }
+			}),
+			isReview || submitted ? null : /* @__PURE__ */ jsxs("div", {
+				className: "lk-ra-actions",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						ref: submitRef,
+						type: "submit",
+						className: "lk-ra-submit",
+						disabled: disabled === true,
+						"aria-disabled": recorder.take === null || phase.kind !== "idle" || void 0,
+						"aria-busy": busy || void 0,
+						children: s.submit
+					}),
+					isExam ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lk-ra-submit-blank",
+						disabled: inactive,
+						"aria-disabled": busy || void 0,
+						onClick: () => {
+							if (!busy) submitTake(null);
+						},
+						children: s.readAloudSubmitWithoutRecording
+					}) : null,
+					offersRetry(phase, uploaded) ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lk-ra-retry",
+						onClick: () => {
+							submitRef.current?.focus();
+							if (phase.kind === "upload-failed") submitTake(recorder.take);
+							else if (phase.kind === "assess-failed" && uploaded !== null) retryAssess(uploaded, phase.take);
+						},
+						children: s.readAloudTryAgain
+					}) : null
+				]
+			}),
+			busy ? /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-pending",
+				role: "status",
+				"aria-busy": "true",
+				children: phase.kind === "uploading" ? s.readAloudUploading : s.readAloudAssessing
+			}) : null,
+			alertText !== null ? /* @__PURE__ */ jsx("p", {
+				className: "lk-ra-alert",
+				role: "alert",
+				children: alertText
+			}, errorNonce) : null,
+			feedbackAssessment !== null ? /* @__PURE__ */ jsx(PronunciationFeedback, {
+				data: coachingItem,
+				assessment: feedbackAssessment,
+				...feedbackGrade !== null ? { grade: feedbackGrade } : {},
+				...feedbackAudio !== null ? { audioUrl: feedbackAudio } : {},
+				...breakThreshold !== void 0 ? { breakThreshold } : {},
+				...monotoneThreshold !== void 0 ? { monotoneThreshold } : {},
+				...locale !== void 0 ? { locale } : {},
+				...strings !== void 0 ? { strings } : {},
+				...ai !== void 0 ? { ai } : {},
+				...onInteraction !== void 0 ? { onInteraction } : {},
+				renderMode,
+				delivery: policy
+			}) : null,
+			storedMarks !== null ? /* @__PURE__ */ jsxs("div", {
+				className: "lk-ra-marks",
+				children: [
+					/* @__PURE__ */ jsx("ol", {
+						className: "lk-ra-words",
+						"aria-label": s.pronunciationWordsLabel,
+						dir: contentDir,
+						children: storedMarks.map((entry, index) => {
+							const sentence = markSentence(entry, s);
+							return /* @__PURE__ */ jsxs("li", {
+								className: "lk-ra-word",
+								"data-state": entry.state,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "lk-visually-hidden",
+									style: VISUALLY_HIDDEN,
+									children: sentence
+								}), /* @__PURE__ */ jsx("span", {
+									className: "lk-ra-word-text",
+									"aria-hidden": "true",
+									dir: contentDir ?? "auto",
+									lang: contentLang,
+									children: entry.reference
+								})]
+							}, index);
+						})
+					}),
+					/* @__PURE__ */ jsx("ul", {
+						className: "lk-ra-legend",
+						children: STORED_STATES.map((state) => /* @__PURE__ */ jsx("li", {
+							"data-state": state,
+							children: s.pronunciationLegend(state)
+						}, state))
+					}),
+					/* @__PURE__ */ jsx(ReadingCoaching, {
+						data: coachingItem,
+						grade: storedGrade,
+						renderMode,
+						delivery: policy,
+						...ai !== void 0 ? { ai } : {},
+						...locale !== void 0 ? { locale } : {},
+						...onInteraction !== void 0 ? { onInteraction } : {},
+						strings: s,
+						contentLang,
+						contentDir
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsx(FeedbackRegion, {
+				id: `${data.id}-feedback`,
+				children: isReview ? outcomeReading !== void 0 && (policy.feedback || outcomeReading.kind !== "graded") ? /* @__PURE__ */ jsx(OutcomeSummary, {
+					reading: outcomeReading,
+					s,
+					scoreShown: gradeShownInPanel
+				}) : null : gradeShownInPanel ? /* @__PURE__ */ jsx("span", {
+					className: "lk-visually-hidden",
+					style: VISUALLY_HIDDEN,
+					children: /* @__PURE__ */ jsx(AnnouncementText, { announcement })
+				}) : /* @__PURE__ */ jsx(AnnouncementText, { announcement })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ReadAloud/index.tsx
+/**
+* Public Read Aloud activity: the core wrapped in `ActivityErrorBoundary` so a
+* render failure (including the dev schema-validation throw and the
+* missing-`upload` guard) degrades to an accessible fallback instead of
+* crashing the host.
+*/
+function ReadAloud(props) {
+	const strings = useLkStrings(props.strings);
+	return /* @__PURE__ */ jsx(ActivityErrorBoundary, {
+		activityTitle: props.data?.title,
+		strings,
+		children: /* @__PURE__ */ jsx(ReadAloud$1, { ...props })
+	});
+}
+//#endregion
+export { stopCaptureGroup as n, ReadAloud as t };
+
+//# sourceMappingURL=ReadAloud-C8RhaUqV.js.map