@intellectif/lk-react 23.1.0 → 23.1.2

package/dist/PronunciationFeedback-DlMPGjkR.cjs

@@ -0,0 +1,831 @@
+'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_direction = require("./direction-K1pj0HCA.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _intellectif_lk_core = require("@intellectif/lk-core");
+//#region src/components/shared/AiCoaching.tsx
+/**
+* "Coach me on this reading": the SDK's own surface over {@link useAiCoaching}
+* — a button, the coaching with who wrote it, and "not available" when a call
+* fails or its answer is refused. `<PronunciationFeedback>` renders it under
+* the marks it shows, and `<ReadAloud>` under the marks a review reads back
+* from a stored grade.
+*
+* Each word coached is shown as the marks show it, in the reading's own
+* language and direction; its tip is in the learner's. Nothing renders without
+* a port, or where the rules say no coaching.
+*/
+function ReadingCoaching({ strings: s, contentLang, contentDir, ...input }) {
+	const help = require_useAiHelp.useAiCoaching(input);
+	const buttonRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	const refocus = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (help.status === "shown" && refocus.current) {
+			refocus.current = false;
+			panelRef.current?.focus();
+		}
+		if (help.status === "unavailable") refocus.current = false;
+	}, [help.status]);
+	if (!help.offered) return null;
+	const ask = () => {
+		refocus.current = typeof document !== "undefined" && document.activeElement === buttonRef.current;
+		help.ask();
+	};
+	const loading = help.status === "loading";
+	const coaching = help.coaching;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "lk-ai lk-ai-coaching",
+		"data-state": help.status,
+		children: [coaching === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			ref: buttonRef,
+			type: "button",
+			className: "lk-ai-button",
+			"aria-busy": loading || void 0,
+			"aria-disabled": loading || void 0,
+			onClick: ask,
+			children: loading ? s.aiCoachingLoading : s.aiCoaching
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-live": "polite",
+			children: coaching !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				ref: panelRef,
+				className: "lk-ai-panel",
+				tabIndex: -1,
+				"aria-label": s.aiCoachingHeading,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "lk-ai-heading",
+						children: s.aiCoachingHeading
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "lk-ai-text",
+						children: coaching.text
+					}),
+					coaching.words.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						className: "lk-ai-coaching-words",
+						"aria-label": s.aiCoachingWords,
+						children: coaching.words.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							className: "lk-ai-coaching-word",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-ai-coaching-target",
+									dir: contentDir ?? "auto",
+									lang: contentLang,
+									children: entry.word
+								}),
+								entry.sound !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-ai-coaching-sound",
+									children: s.aiCoachingSound(entry.sound.expected, entry.sound.heard)
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-ai-text",
+									children: entry.tip
+								})
+							]
+						}, entry.itemId))
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "lk-ai-notice",
+						children: s.aiNotice
+					})
+				]
+			}) : help.status === "unavailable" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "lk-ai-unavailable",
+				children: s.aiCoachingUnavailable
+			}) : null
+		})]
+	});
+}
+//#endregion
+//#region src/components/shared/playback-refusal.ts
+/**
+* Whether the page refused to play the learner's own take, and the handler
+* every element that plays it reports a refusal through.
+*
+* The take is played from a `blob:` URL — the preview of a take not yet sent —
+* or from a link a review minted, and a page can refuse either without a word:
+* a Content-Security-Policy whose `media-src` does not allow `blob:` blocks the
+* load, the element fires `error`, and every control that plays it goes on
+* looking as if it works. So the refusal is decided in one place, by the URL
+* that was refused: a new take is a new URL and starts out playable again, and
+* a refusal an element reports after it was handed another URL cannot mark the
+* new one.
+*
+* `refuse` takes the element, not the URL, and reads the address the element
+* is loading at the moment it fails: an `error` belongs to the source the
+* element holds when it fires, and a closure's URL may already be a render
+* behind it.
+*/
+function usePlaybackRefusal(url) {
+	const [refusedUrl, setRefusedUrl] = (0, react.useState)(null);
+	const refuse = (0, react.useCallback)((element) => {
+		const source = element.getAttribute("src");
+		if (source !== null) setRefusedUrl(source);
+	}, []);
+	return {
+		refused: url !== null && url !== void 0 && url === refusedUrl,
+		refuse
+	};
+}
+/**
+* Whether a rejected `play()` is the page refusing the source, rather than an
+* autoplay policy refusing the gesture. Only the first is the take's to report:
+* an autoplay refusal says nothing about whether the take can be played.
+*/
+function isSourceRefusal(error) {
+	return typeof error === "object" && error !== null && error.name === "NotSupportedError";
+}
+//#endregion
+//#region src/components/shared/read-grade.ts
+/**
+* Every dimension a read-aloud grade can weigh, in the order a learner reads
+* them: what was said, how it flowed, how much of it was there, and how it was
+* pitched. Fixed rather than derived from the evidence, so a dimension the
+* engine did not measure is reported as unmeasured instead of vanishing.
+*/
+const DIMENSIONS = [
+	"accuracy",
+	"fluency",
+	"completeness",
+	"prosody"
+];
+const OUTCOMES = [
+	"correct",
+	"incorrect",
+	"correct-omission",
+	"incorrect-omission"
+];
+/**
+* How far past its own maximum a score may sit and still be read as that
+* maximum. A grader that sums weighted parts lands on `1.0000000000000002`
+* for a perfect take as readily as on `1`, and "could not be graded" is the
+* wrong thing to tell the learner who earned it. Far below any difference a
+* whole percentage can show.
+*/
+const OVERSHOOT = 1e-9;
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isFiniteNumber(value) {
+	return typeof value === "number" && Number.isFinite(value);
+}
+/** An optional field a backend left out, written either way it writes one. */
+function isAbsent(value) {
+	return value === void 0 || value === null;
+}
+/** A score on `0..max`, a hair of overshoot read as `max`; `null` for anything else. */
+function withinMax(score, max) {
+	if (!isFiniteNumber(score) || score < 0) return null;
+	if (score <= max) return score;
+	return score - max <= max * OVERSHOOT ? max : null;
+}
+/** A learner's or a reference response: a string, or strings. */
+function isResponse(value) {
+	return typeof value === "string" || Array.isArray(value) && value.every((entry) => typeof entry === "string");
+}
+/** Runs a read that touches a host's object, whose getters may throw. */
+function guarded(read, refused) {
+	try {
+		return read();
+	} catch {
+		return refused;
+	}
+}
+function readCriterion(value) {
+	if (!isRecord(value) || typeof value.name !== "string") return null;
+	const { maxScore, notApplicable } = value;
+	if (!isAbsent(maxScore) && !(isFiniteNumber(maxScore) && maxScore > 0)) return null;
+	if (!isAbsent(notApplicable) && typeof notApplicable !== "boolean") return null;
+	const score = isAbsent(value.score) ? void 0 : withinMax(value.score, maxScore ?? 1);
+	if (score === null) return null;
+	return {
+		name: value.name,
+		...score !== void 0 ? { score } : {},
+		...!isAbsent(maxScore) ? { maxScore } : {},
+		...notApplicable === true ? { notApplicable } : {}
+	};
+}
+function readDetail(value) {
+	if (!isRecord(value)) return null;
+	const { itemId, correct, outcome, learnerResponse, correctResponse, weight, score } = value;
+	if (typeof itemId !== "string" || !isResponse(learnerResponse) || !isResponse(correctResponse)) return null;
+	const checkedOutcome = OUTCOMES.find((known) => known === outcome);
+	if (!isAbsent(outcome) && checkedOutcome === void 0) return null;
+	if (!isAbsent(correct) && typeof correct !== "boolean") return null;
+	if (checkedOutcome === void 0 && typeof correct !== "boolean") return null;
+	if (!isAbsent(weight) && !isFiniteNumber(weight)) return null;
+	const checkedScore = isAbsent(score) ? void 0 : withinMax(score, 1);
+	if (checkedScore === null) return null;
+	return {
+		itemId,
+		learnerResponse,
+		correctResponse,
+		...checkedOutcome !== void 0 ? { outcome: checkedOutcome } : { correct },
+		...!isAbsent(weight) ? { weight } : {},
+		...checkedScore !== void 0 ? { score: checkedScore } : {}
+	};
+}
+function readDetails(value) {
+	if (!Array.isArray(value)) return;
+	const details = [];
+	for (const entry of value) {
+		const detail = readDetail(entry);
+		if (detail === null) return;
+		details.push(detail);
+	}
+	return details;
+}
+/**
+* A host's grade as a checked copy, or `null` when it carries no grade that can
+* be shown or reported. See the module notes for the rules.
+*/
+function readGrade(value) {
+	return guarded(() => {
+		if (!isRecord(value)) return null;
+		const { maxScore, passed } = value;
+		if (!isFiniteNumber(maxScore) || maxScore <= 0 || typeof passed !== "boolean") return null;
+		const score = withinMax(value.score, maxScore);
+		if (score === null) return null;
+		const criteria = Array.isArray(value.criteria) ? value.criteria.flatMap((entry) => {
+			const criterion = readCriterion(entry);
+			return criterion === null ? [] : [criterion];
+		}) : void 0;
+		const details = readDetails(value.details);
+		return {
+			score,
+			maxScore,
+			passed,
+			feedback: typeof value.feedback === "string" ? value.feedback : null,
+			...criteria !== void 0 ? { criteria } : {},
+			...details !== void 0 ? { details } : {}
+		};
+	}, null);
+}
+/** A read grade as a fraction of 1: in `0..1`, because the reader made it so. */
+function fractionOfGrade(grade) {
+	return grade.score / grade.maxScore;
+}
+/** A read grade as a whole percentage: in `0..100`, because the reader made it so. */
+function percentOfGrade(grade) {
+	return Math.round(fractionOfGrade(grade) * 100);
+}
+/**
+* A stored outcome as a renderer may show it, or `undefined` for none —
+* `null` included, which is how a backend writes an absent optional.
+*
+* A `graded` outcome is read through its `grade`, the record
+* `outcomeFromGrade` mirrors onto it, so the summary and the panel beside it
+* can never show two different numbers; and it must be well-formed as a whole,
+* its own `score`, `maxScore` and `passed` included — a payload with a corrupt
+* copy of the grade is not one to pick a side of.
+*/
+function readOutcome(value) {
+	if (isAbsent(value)) return;
+	return guarded(() => {
+		if (!isRecord(value)) return {
+			kind: "unreadable",
+			status: void 0
+		};
+		switch (value.status) {
+			case "deferred": return { kind: "deferred" };
+			case "unscorable": return {
+				kind: "unscorable",
+				code: typeof value.code === "string" ? value.code : void 0
+			};
+			case "scored": {
+				const grade = readGrade(value);
+				return grade === null ? {
+					kind: "unreadable",
+					status: "scored"
+				} : {
+					kind: "graded",
+					status: "scored",
+					grade
+				};
+			}
+			case "graded": {
+				const grade = readGrade(value.grade);
+				return grade === null || readGrade(value) === null ? {
+					kind: "unreadable",
+					status: "graded"
+				} : {
+					kind: "graded",
+					status: "graded",
+					grade
+				};
+			}
+			default: return {
+				kind: "unreadable",
+				status: void 0
+			};
+		}
+	}, {
+		kind: "unreadable",
+		status: void 0
+	});
+}
+/**
+* An assessor's answer as a renderer and a statement may use it.
+*
+* `failed` and `unscorable` need little: a `retryable` that is not `true`
+* offers no retry, which never spends an application's money on a guess, and a
+* `code` that is not a string is no code. Everything else — a `graded` result,
+* and anything that is not an object or names no status this component knows —
+* is read as a judgement: its grade when one can be read, its evidence when it
+* is an object. A judgement with neither is shown as could-not-be-graded.
+*/
+function readAssessResult(value) {
+	const nothing = {
+		status: "graded",
+		grade: null,
+		assessment: null,
+		recognizedText: void 0
+	};
+	return guarded(() => {
+		if (!isRecord(value)) return nothing;
+		if (value.status === "failed") return {
+			status: "failed",
+			retryable: value.retryable === true
+		};
+		if (value.status === "unscorable") return {
+			status: "unscorable",
+			code: typeof value.code === "string" ? value.code : void 0
+		};
+		if (value.status !== "graded") return nothing;
+		const assessment = readEvidence(value.assessment);
+		const recognizedText = guarded(() => typeof assessment?.recognizedText === "string" ? assessment.recognizedText : void 0, void 0);
+		return {
+			status: "graded",
+			grade: readGrade(value.grade),
+			assessment,
+			recognizedText
+		};
+	}, nothing);
+}
+/**
+* Evidence worth handing to the panel: an object. Whether it validates is the
+* panel's to decide, because what a refusal costs differs by mode.
+*/
+function readEvidence(value) {
+	return isRecord(value) ? value : null;
+}
+/** One criterion's whole percentage of its own maximum, or `undefined` when it carries none. */
+function percentOfCriterion(criterion) {
+	if (criterion.notApplicable === true || criterion.score === void 0) return;
+	return Math.round(criterion.score / (criterion.maxScore ?? 1) * 100);
+}
+/**
+* The dimension rows, from one source for the whole set and never a mix: the
+* grade's criteria when it has any it can read, and the evidence's own scores
+* otherwise. A dimension pulled out of the evidence and set beside graded ones
+* would read as if it had counted towards the grade.
+*
+* The evidence is read as defensively as the grade: in production the panel
+* shows these rows even for evidence the validator refused, which can carry
+* anything at all under `scores`. `scale` is 100 by schema, so an evidence
+* score is already a percentage — and one outside `0..100` is not one.
+*/
+function readDimensions(assessment, grade) {
+	const criteria = grade?.criteria ?? [];
+	if (criteria.length > 0) return DIMENSIONS.map((dimension) => {
+		const criterion = criteria.find((entry) => entry.name === dimension);
+		return {
+			dimension,
+			percent: criterion === void 0 ? void 0 : percentOfCriterion(criterion)
+		};
+	});
+	const scores = guarded(() => isRecord(assessment) ? assessment.scores : void 0, void 0);
+	return DIMENSIONS.map((dimension) => {
+		const score = withinMax(guarded(() => isRecord(scores) ? scores[dimension] : void 0, void 0), 100);
+		return {
+			dimension,
+			percent: score === null ? void 0 : Math.round(score)
+		};
+	});
+}
+//#endregion
+//#region src/components/PronunciationFeedback/PronunciationFeedback.tsx
+/**
+* Present for assistive technology, invisible on screen. Inline rather than
+* left to the optional skin, for the reason `<Dictation>` gives: the per-word
+* sentences are the marks' only channel for a screen reader, and a page that
+* does not load the skin would otherwise show every one of them beside its
+* word. Exported so `<ReadAloud>`, whose review fallback renders the same
+* marks from stored details, carries one definition rather than a copy.
+*/
+const VISUALLY_HIDDEN = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+/** The four marking states, in the order the legend lists them. */
+const LEGEND_STATES = [
+	"correct",
+	"mispronounced",
+	"omitted",
+	"inserted"
+];
+/**
+* What the validator says about evidence that may not even be readable. Its
+* cross-field rules read the value directly, so a getter that throws escapes
+* it — and evidence that cannot be read is evidence refused, not a reason to
+* take the grade beside it down.
+*/
+function checkEvidence(assessment) {
+	try {
+		return (0, _intellectif_lk_core.validateSpeechAssessment)(assessment);
+	} catch {
+		return {
+			success: false,
+			errors: [{
+				path: [],
+				message: "The assessment could not be read.",
+				code: "unreadable"
+			}]
+		};
+	}
+}
+/** Whether a word carries anything a disclosure would have to show. */
+function hasDetail(word) {
+	if (word === void 0) return false;
+	return word.accuracy !== void 0 || word.syllables !== void 0 && word.syllables.length > 0 || word.phonemes !== void 0 && word.phonemes.length > 0 || word.breaks !== void 0 || typeof word.startMs === "number" && typeof word.durationMs === "number";
+}
+/** A confidence that clears the caller's threshold. No threshold, no note. */
+function past(confidence, threshold) {
+	return threshold !== void 0 && typeof confidence === "number" && Number.isFinite(confidence) && confidence > threshold;
+}
+/** One phoneme, named by its symbol or — when the engine named none — by its place. */
+function phonemeLabel(phoneme, index, s) {
+	return phoneme.symbol ?? s.pronunciationPhonemePosition(index + 1);
+}
+/**
+* What a screen reader hears for one marked word — the marks' only channel for
+* assistive technology, since the glyph and the decoration are both hidden from
+* it. Exported because `<ReadAloud>`'s review fallback marks the same four
+* states from stored details, and a second copy of these four sentences would
+* be a second thing to translate.
+*
+* Branches on `state` and **never** on `heard === ''`: an inserted word whose
+* text normalises to nothing carries the empty string too, and would otherwise
+* be announced as an omission.
+*/
+function markSentence(entry, s) {
+	switch (entry.state) {
+		case "correct": return s.pronunciationWordCorrect(entry.reference);
+		case "mispronounced": return s.pronunciationWordMispronounced(entry.reference);
+		case "omitted": return s.pronunciationWordOmitted(entry.reference);
+		default: return s.pronunciationWordInserted(entry.heard);
+	}
+}
+/**
+* The per-word marks of a read-aloud take, plus the dimensions they were
+* graded on.
+*
+* **A bad assessment never destroys a good grade.** `alignReadAloud` throws a
+* `TypeError` for evidence `validateSpeechAssessment` refuses, so this
+* component runs the validator first. In development the refusal is thrown as
+* an `ActivitySchemaError`, which is the package's dev-error convention and
+* puts the problem in front of whoever wired the adapter up. In production the
+* dimensions and the grade are rendered and the word list is left out — a
+* learner who earned 82% should see 82%, not "this activity could not be
+* displayed" from an error boundary.
+*
+* **Nor does a bad grade take the evidence down.** `grade` is read, not
+* trusted: 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 beside the
+* dimensions and the marks, and criteria that cannot be read name no dimension.
+*
+* **The marks show in any mode**: nothing here submits, grades or reveals an
+* answer key. A read-aloud item has none, and the marks exist only once a
+* server has graded the take, so there is no mode in which they must be
+* withheld. `renderMode` is read for one thing only — AI coaching, which is
+* never offered in `exam`.
+*
+* **AI coaching**, with a `pronunciationCoaching` port and a `data` that
+* carries the item's `id` and `title`: a button under the marks asks a model
+* to explain them. The marks are the engine's and are never re-scored, and
+* coaching on a word not marked here, or a sound the engine did not report,
+* is refused whole. See `useAiCoaching` to draw your own.
+*
+* ```tsx
+* <PronunciationFeedback
+*   data={item}
+*   assessment={assessment}
+*   grade={grade}
+*   audioUrl={takeUrl}
+*   breakThreshold={0.75}
+*   monotoneThreshold={0.6}
+*   ai={{ pronunciationCoaching: (request, { signal }) => api.coach(request, signal) }}
+* />
+* ```
+*/
+function PronunciationFeedback$1({ data, assessment, grade, audioUrl, breakThreshold, monotoneThreshold, locale, theme, strings, ai, renderMode, delivery, onInteraction }) {
+	const s = require_LkIntlProvider.useLkStrings(strings);
+	const ids = (0, react.useId)();
+	const [openWord, setOpenWord] = (0, react.useState)(null);
+	const checked = (0, react.useMemo)(() => checkEvidence(assessment), [assessment]);
+	const devError = (0, react.useMemo)(() => require_useAiHelp.isDevelopment() && !checked.success ? new _intellectif_lk_core.ActivitySchemaError("read-aloud", checked.errors) : null, [checked]);
+	const words = (0, react.useMemo)(() => checked.success ? (0, _intellectif_lk_core.alignReadAloud)(data, checked.data) : null, [checked, data]);
+	const reading = (0, react.useMemo)(() => grade === void 0 || grade === null ? void 0 : readGrade(grade), [grade]);
+	const dimensions = (0, react.useMemo)(() => readDimensions(assessment, reading), [assessment, reading]);
+	const audioRef = (0, react.useRef)(null);
+	const stopRef = (0, react.useRef)(null);
+	const playback = usePlaybackRefusal(audioUrl);
+	const playable = audioUrl !== void 0 && !playback.refused;
+	(0, react.useEffect)(() => () => {
+		if (stopRef.current !== null) clearTimeout(stopRef.current);
+	}, []);
+	const coachable = typeof data.id === "string" && typeof data.title === "string";
+	const coachingPort = require_ai_LkAiProvider.useLearnerAi(ai)?.pronunciationCoaching !== void 0;
+	(0, react.useEffect)(() => {
+		if (require_useAiHelp.isDevelopment() && coachingPort && !coachable) console.warn("learning-kit: <PronunciationFeedback> offers no AI coaching without `data.id` and `data.title`. Pass the whole read-aloud item as `data`, or `ai={{}}` to go without.");
+	}, [coachingPort, coachable]);
+	if (devError) throw devError;
+	/** Plays one word out of the take, and stops at the end of it. */
+	const playWord = (startMs, durationMs) => {
+		const element = audioRef.current;
+		if (element === null) return;
+		if (stopRef.current !== null) clearTimeout(stopRef.current);
+		element.currentTime = startMs / 1e3;
+		try {
+			element.play().catch((error) => {
+				if (isSourceRefusal(error)) playback.refuse(element);
+			});
+		} catch {}
+		stopRef.current = setTimeout(() => {
+			stopRef.current = null;
+			element.pause();
+		}, durationMs);
+	};
+	const contentLang = typeof data.locale === "string" ? data.locale : void 0;
+	const contentDir = require_direction.localeDirectionOf(data.locale);
+	const alphabet = checked.success ? checked.data.phonemeAlphabet : void 0;
+	const monotone = checked.success ? checked.data.prosody?.monotoneConfidence : void 0;
+	const evidenceWords = checked.success ? checked.data.words : [];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "lk-pf",
+		"aria-label": s.pronunciationFeedbackLabel,
+		lang: locale,
+		style: theme,
+		children: [
+			reading !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "lk-pf-grade",
+				...reading !== null ? { "data-passed": String(reading.passed) } : {},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "lk-pf-score",
+					children: reading === null ? s.couldNotBeGraded : s.scoreAnnouncement(percentOfGrade(reading), reading.passed)
+				}), reading?.feedback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "lk-pf-grade-feedback",
+					dir: "auto",
+					children: reading.feedback
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+				className: "lk-pf-dimensions",
+				children: dimensions.map(({ dimension, percent }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "lk-pf-dimension",
+					"data-dimension": dimension,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+						className: "lk-pf-dimension-name",
+						children: s.pronunciationDimension(dimension)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+						className: "lk-pf-dimension-score",
+						children: percent === void 0 ? s.pronunciationNotAssessed : `${percent}%`
+					})]
+				}, dimension))
+			}),
+			words !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+					className: "lk-pf-words",
+					"aria-label": s.pronunciationWordsLabel,
+					dir: contentDir,
+					children: words.map((entry, index) => {
+						const sentence = markSentence(entry, s);
+						const shown = entry.state === "inserted" ? entry.heard : entry.reference;
+						const word = entry.wordIndex === void 0 ? void 0 : evidenceWords.at(entry.wordIndex);
+						const open = openWord === index;
+						const panelId = `${ids}-w${index}`;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							className: "lk-pf-word",
+							"data-state": entry.state,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-visually-hidden",
+									style: VISUALLY_HIDDEN,
+									children: sentence
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "lk-pf-word-text",
+									"aria-hidden": "true",
+									dir: contentDir ?? "auto",
+									lang: contentLang,
+									children: shown
+								}),
+								hasDetail(word) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "lk-pf-word-toggle",
+									"aria-expanded": open,
+									"aria-controls": panelId,
+									onClick: () => setOpenWord(open ? null : index),
+									children: s.pronunciationWordDetails(shown)
+								}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									id: panelId,
+									className: "lk-pf-word-detail",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
+											className: "lk-pf-word-facts",
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: s.pronunciationDimension("accuracy") }),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: word.accuracy === void 0 ? s.pronunciationNotAssessed : `${Math.round(word.accuracy)}%` }),
+												word.syllables !== void 0 && word.syllables.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: s.pronunciationSyllables }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+													className: "lk-pf-syllables",
+													children: word.syllables.map((syllable, position) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+														dir: contentDir ?? "auto",
+														lang: contentLang,
+														children: syllable.grapheme === void 0 ? syllable.text : s.pronunciationSyllableSpelling(syllable.text, syllable.grapheme)
+													}, position))
+												}) })] }) : null,
+												word.phonemes !== void 0 && word.phonemes.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: s.pronunciationPhonemes }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+													className: "lk-pf-phonemes",
+													children: word.phonemes.map((phoneme, position) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+														className: "lk-pf-phoneme",
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: "lk-pf-phoneme-symbol",
+															children: phonemeLabel(phoneme, position, s)
+														}), phoneme.heardAs !== void 0 && phoneme.heardAs.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: "lk-pf-heard-label",
+															children: s.pronunciationHeardAs
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+															className: "lk-pf-heard-as",
+															children: phoneme.heardAs.map((candidate, rank) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: candidate.symbol }, rank))
+														})] }) : null]
+													}, position))
+												}) })] }) : null
+											]
+										}),
+										playable && typeof word.startMs === "number" && typeof word.durationMs === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "lk-pf-word-play",
+											onClick: () => playWord(word.startMs, word.durationMs),
+											children: s.pronunciationPlayWord(shown)
+										}) : null,
+										past(word.breaks?.unexpected, breakThreshold) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "lk-pf-break",
+											"data-break": "unexpected",
+											children: s.pronunciationBreakUnexpected
+										}) : null,
+										past(word.breaks?.missing, breakThreshold) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "lk-pf-break",
+											"data-break": "missing",
+											children: s.pronunciationBreakMissing
+										}) : null
+									]
+								}) : null] }) : null
+							]
+						}, index);
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "lk-pf-legend",
+					children: LEGEND_STATES.map((state) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						"data-state": state,
+						children: s.pronunciationLegend(state)
+					}, state))
+				}),
+				alphabet === "ipa" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "lk-pf-alphabet",
+					children: s.pronunciationIpaNote
+				}) : null,
+				coachable && checked.success ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReadingCoaching, {
+					data: {
+						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 } : {}
+					},
+					assessment: checked.data,
+					...grade !== void 0 ? { grade } : {},
+					...renderMode !== void 0 ? { renderMode } : {},
+					...ai !== void 0 ? { ai } : {},
+					...locale !== void 0 ? { locale } : {},
+					...onInteraction !== void 0 ? { onInteraction } : {},
+					...delivery !== void 0 ? { delivery } : {},
+					strings: s,
+					contentLang,
+					contentDir
+				}) : null
+			] }) : null,
+			past(monotone, monotoneThreshold) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "lk-pf-monotone",
+				role: "note",
+				children: s.pronunciationMonotone
+			}) : null,
+			audioUrl === void 0 ? null : playback.refused ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "lk-pf-audio-unavailable",
+				role: "note",
+				children: s.readAloudPlaybackUnavailable
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+				ref: audioRef,
+				className: "lk-pf-audio",
+				src: audioUrl,
+				preload: "metadata",
+				onError: (event) => playback.refuse(event.currentTarget)
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/PronunciationFeedback/index.tsx
+/**
+* Public pronunciation-feedback panel: the core wrapped in
+* `ActivityErrorBoundary` so a render failure (the dev throw for evidence
+* `validateSpeechAssessment` refuses among them) degrades to an accessible
+* fallback instead of crashing the host.
+*
+* **No `activityTitle`.** Its `data` is two fields of a read-aloud item and
+* carries no title, so the production fallback is the unnamed one. Naming it
+* would mean inventing a title for a panel that never had one.
+*/
+function PronunciationFeedback(props) {
+	const strings = require_LkIntlProvider.useLkStrings(props.strings);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActivityErrorBoundary.ActivityErrorBoundary, {
+		strings,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PronunciationFeedback$1, { ...props })
+	});
+}
+//#endregion
+Object.defineProperty(exports, "PronunciationFeedback", {
+	enumerable: true,
+	get: function() {
+		return PronunciationFeedback;
+	}
+});
+Object.defineProperty(exports, "ReadingCoaching", {
+	enumerable: true,
+	get: function() {
+		return ReadingCoaching;
+	}
+});
+Object.defineProperty(exports, "VISUALLY_HIDDEN", {
+	enumerable: true,
+	get: function() {
+		return VISUALLY_HIDDEN;
+	}
+});
+Object.defineProperty(exports, "fractionOfGrade", {
+	enumerable: true,
+	get: function() {
+		return fractionOfGrade;
+	}
+});
+Object.defineProperty(exports, "markSentence", {
+	enumerable: true,
+	get: function() {
+		return markSentence;
+	}
+});
+Object.defineProperty(exports, "percentOfGrade", {
+	enumerable: true,
+	get: function() {
+		return percentOfGrade;
+	}
+});
+Object.defineProperty(exports, "readAssessResult", {
+	enumerable: true,
+	get: function() {
+		return readAssessResult;
+	}
+});
+Object.defineProperty(exports, "readEvidence", {
+	enumerable: true,
+	get: function() {
+		return readEvidence;
+	}
+});
+Object.defineProperty(exports, "readOutcome", {
+	enumerable: true,
+	get: function() {
+		return readOutcome;
+	}
+});
+Object.defineProperty(exports, "usePlaybackRefusal", {
+	enumerable: true,
+	get: function() {
+		return usePlaybackRefusal;
+	}
+});
+
+//# sourceMappingURL=PronunciationFeedback-DlMPGjkR.cjs.map