@intellectif/lk-react 12.0.1 → 14.0.0

package/dist/chunk-D57QZILZ.js

@@ -0,0 +1,863 @@
+'use client';
+import { readOutcome, readEvidence, percentOfGrade, PronunciationFeedback, markSentence, VISUALLY_HIDDEN, readAssessResult, fractionOfGrade } from './chunk-62AKSD5Y.js';
+import { useSpeechRecorder } from './chunk-MCO52PV5.js';
+import { localeDirectionOf } from './chunk-YORQQXGO.js';
+import { FeedbackRegion } from './chunk-RCMYEWBE.js';
+import { ActivityErrorBoundary, isDevelopment, ANONYMOUS_ACTOR, objectIdFor } from './chunk-BO6P723E.js';
+import { ActivityMedia } from './chunk-XIBOFTOL.js';
+import { useActivityState } from './chunk-6N43WDVG.js';
+import { useLkStrings } from './chunk-TDJEKXEP.js';
+import { assertRedacted, validateActivity, ActivitySchemaError, READ_ALOUD_MAX_SECONDS, READ_ALOUD_MAX_TAKES, xAPIBuilder, xapiDefinitionFor } from '@intellectif/lk-core';
+import { createContext, useContext, useMemo, useState, useId, useRef, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/shared/capture-registry.ts
+var groups = /* @__PURE__ */ new Map();
+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);
+    }
+  };
+}
+function stopCaptureGroup(group) {
+  const members = groups.get(group);
+  if (members === void 0) {
+    return;
+  }
+  for (const stop of [...members]) {
+    stop();
+  }
+}
+var SequenceSlotContext = createContext(null);
+var lastTake = 0;
+function mintTake() {
+  lastTake += 1;
+  return lastTake;
+}
+var takes = /* @__PURE__ */ new WeakMap();
+function stampTake(value, take) {
+  takes.set(value, take);
+  return value;
+}
+function takeOf(value) {
+  return typeof value === "object" && value !== null ? takes.get(value) : void 0;
+}
+var modelsGroupCount = 0;
+var VISIBLE_TEXT_RE = /[^\p{White_Space}\p{Cc}\p{Cf}\p{Default_Ignorable_Code_Point}]/u;
+var MARK_ID_RE = /^w\d+$/;
+var STORED_STATES = [
+  "correct",
+  "mispronounced",
+  "omitted"
+];
+var LEVEL_STEPS = 10;
+function offersRetry(phase, uploaded) {
+  return phase.kind === "upload-failed" || phase.kind === "assess-failed" && phase.retryable && uploaded !== null;
+}
+function takeStateOf(phase, uploaded) {
+  if (phase.kind === "uploading" || phase.kind === "assessing") {
+    return "in-flight";
+  }
+  return offersRetry(phase, uploaded) ? "retryable" : "settled";
+}
+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)
+  ]);
+}
+function slowMediaFor(data, label) {
+  const slow = data.slowMedia;
+  if (slow === void 0) {
+    return void 0;
+  }
+  const policy = data.media?.playback ?? {};
+  const { maxPlays: _budget, ...inherited } = policy;
+  const hasPolicy = Object.values(inherited).some((value) => value !== void 0);
+  return {
+    type: "audio",
+    url: slow.url,
+    alt: slow.alt ?? label,
+    ...hasPolicy ? { playback: inherited } : {}
+  };
+}
+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 correct = detail.outcome !== void 0 ? detail.outcome === "correct" : detail.correct;
+    const state = correct ? "correct" : detail.outcome === "incorrect-omission" ? "omitted" : "mispronounced";
+    return {
+      itemId: detail.itemId,
+      reference,
+      heard,
+      state,
+      // `ScoringDetail.score` is the word's accuracy divided by 100; the marks
+      // carry it back in the units the assessment used.
+      ...typeof detail.score === "number" ? { accuracy: detail.score * 100 } : {}
+    };
+  });
+}
+function recordingOf(response) {
+  return response !== void 0 && response.type === "read-aloud" ? response.recording : null;
+}
+function responseOf(recording, takes2) {
+  return { type: "read-aloud", recording, ...takes2 > 0 ? { takes: takes2 } : {} };
+}
+function unscorableMessage(code, s) {
+  return code === "no_speech" || code === "insufficient_voiced_time" ? s.readAloudNotHeard : s.readAloudNotAssessed;
+}
+function AnnouncementText({ announcement }) {
+  if (announcement === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    announcement.text,
+    announcement.feedback ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("span", { dir: "auto", children: announcement.feedback })
+    ] }) : null
+  ] });
+}
+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, { 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 })
+        }
+      );
+  }
+}
+function ReadAloud({
+  data,
+  onComplete,
+  onSubmit,
+  onInteraction,
+  value,
+  defaultValue,
+  defaultSubmitted,
+  renderMode = "practice",
+  outcome,
+  mediaBudget,
+  mediaStrings,
+  strings,
+  theme,
+  locale,
+  disabled,
+  recordingBinding,
+  assessment,
+  breakThreshold,
+  monotoneThreshold
+}) {
+  const isExam = renderMode === "exam";
+  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 bounds = data.recording;
+  const maxSeconds = typeof bounds?.maxSeconds === "number" && bounds.maxSeconds > 0 ? Math.min(bounds.maxSeconds, READ_ALOUD_MAX_SECONDS) : READ_ALOUD_MAX_SECONDS;
+  const minSeconds = typeof bounds?.minSeconds === "number" ? bounds.minSeconds : void 0;
+  const maxTakes = typeof bounds?.maxTakes === "number" && Number.isFinite(bounds.maxTakes) ? Math.min(Math.max(1, Math.floor(bounds.maxTakes)), READ_ALOUD_MAX_TAKES) : void 0;
+  const readingKey = readingKeyOf(data, { maxSeconds, minSeconds, maxTakes });
+  const recorder = useSpeechRecorder(
+    useMemo(
+      () => ({
+        maxDurationMs: maxSeconds * 1e3,
+        ...minSeconds !== void 0 ? { minDurationMs: minSeconds * 1e3 } : {},
+        ...maxTakes !== void 0 ? { maxTakes } : {}
+      }),
+      [maxSeconds, minSeconds, maxTakes]
+    )
+  );
+  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 ids = useId();
+  const titleId = `${ids}-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 take2 = reportedTakeRef.current;
+      if (take2 !== null) {
+        slotRef.current?.takeState(take2, "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;
+    void 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 (statusRef.current === "recording" || statusRef.current === "requesting-permission") {
+      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 take2 = phaseTake ?? reportedTakeRef.current;
+    if (slot === null || take2 === null) {
+      return;
+    }
+    reportedTakeRef.current = take2;
+    slot.takeState(take2, phaseTakeState);
+  }, [slot, phaseTake, phaseTakeState]);
+  const modelsRef = useRef(null);
+  useEffect(() => {
+    if (recorder.status !== "recording") {
+      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);
+    };
+  }, [recorder.status]);
+  const slowMedia = useMemo(
+    () => slowMediaFor(data, s.readAloudSlowRecording),
+    [data, s.readAloudSlowRecording]
+  );
+  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);
+  const raise = (next) => {
+    setErrorNonce((nonce) => nonce + 1);
+    setPhase(next);
+  };
+  const beginTakeReport = (take2) => {
+    reportedTakeRef.current = take2;
+    slot?.takeState(take2, "in-flight");
+  };
+  const runAssess = async (ref, current, take2) => {
+    const assess = bindingRef.current?.assess;
+    const durationMs = current?.durationMs ?? 0;
+    const takes2 = recorder.takesUsed;
+    const run = runRef.current;
+    if (assess === void 0) {
+      setPhase({ kind: "unassessed", take: take2 });
+      return;
+    }
+    setPhase({ kind: "assessing", take: take2 });
+    fire("assessment-requested", { takes: takes2, durationMs });
+    let answer;
+    try {
+      answer = await assess(ref);
+    } catch {
+      if (run !== runRef.current) {
+        return;
+      }
+      raise({ kind: "assess-failed", take: take2, retryable: true });
+      fire("assessment-failed", { takes: takes2, durationMs, retryable: true });
+      return;
+    }
+    if (run !== runRef.current) {
+      return;
+    }
+    const result = readAssessResult(answer);
+    if (result.status === "failed") {
+      raise({ kind: "assess-failed", take: take2, retryable: result.retryable });
+      fire("assessment-failed", { takes: takes2, durationMs, retryable: result.retryable });
+      return;
+    }
+    if (result.status === "unscorable") {
+      setPhase({ kind: "unscorable", take: take2, code: result.code });
+      fire("assessment-failed", {
+        takes: takes2,
+        durationMs,
+        retryable: true,
+        ...result.code !== void 0 ? { code: result.code } : {}
+      });
+      return;
+    }
+    const timeSpent = getTimeSpent();
+    setPhase({ kind: "graded", take: take2, assessment: result.assessment, grade: result.grade });
+    const grade = result.grade;
+    if (grade === null) {
+      fire("assessment-failed", { takes: takes2, 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.details` is required where `GradeRecord.details` is
+            // optional, and an empty list is the honest reading of "no per-word
+            // marks were stored" — never a mark of its own.
+            scoringResult: {
+              score: fractionOfGrade(grade),
+              maxScore: 1,
+              passed: grade.passed,
+              feedback: grade.feedback,
+              details: grade.details ?? []
+            }
+          })
+        },
+        take2
+      )
+    );
+  };
+  const submitTake = async (current) => {
+    const binding = bindingRef.current;
+    if (inactive || submittingRef.current || binding === void 0) {
+      return;
+    }
+    submittingRef.current = true;
+    const takes2 = recorder.takesUsed;
+    const run = runRef.current;
+    const take2 = mintTake();
+    beginTakeReport(take2);
+    try {
+      let ref = null;
+      if (current !== null) {
+        setPhase({ kind: "uploading", take: take2 });
+        try {
+          ref = await binding.upload(current);
+        } catch {
+          if (run !== runRef.current) {
+            return;
+          }
+          raise({ kind: "upload-failed", take: take2 });
+          fire("recording-upload-failed", {
+            takes: takes2,
+            durationMs: current.durationMs,
+            retryable: true
+          });
+          return;
+        }
+        if (run !== runRef.current) {
+          return;
+        }
+        setUploaded(ref);
+        fire("recording-uploaded", { takes: takes2, durationMs: current.durationMs });
+      }
+      onSubmit?.(stampTake(responseOf(ref, takes2), take2));
+      fire("submitted", { takes: takes2, durationMs: current?.durationMs ?? 0 });
+      if (isExam || ref === null) {
+        complete();
+        setPhase({ kind: "submitted", take: take2 });
+        return;
+      }
+      await runAssess(ref, current, take2);
+    } finally {
+      submittingRef.current = false;
+    }
+  };
+  const retryAssess = async (ref, take2) => {
+    if (submittingRef.current) {
+      return;
+    }
+    submittingRef.current = true;
+    beginTakeReport(take2);
+    try {
+      await runAssess(ref, recorder.take, take2);
+    } finally {
+      submittingRef.current = false;
+    }
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (inactive || busy || recorder.take === null || phase.kind !== "idle") {
+      return;
+    }
+    void 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();
+    void recorder.start();
+  };
+  const contentLang = typeof data.locale === "string" ? data.locale : void 0;
+  const contentDir = localeDirectionOf(data.locale);
+  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(
+    () => isReview && keptEvidence === null && storedGrade?.details !== void 0 ? marksFromDetails(storedGrade.details) : null,
+    [isReview, keptEvidence, storedGrade]
+  );
+  const feedbackAssessment = isReview ? keptEvidence : phase.kind === "graded" ? phase.assessment : null;
+  const feedbackGrade = isReview ? storedGrade : phase.kind === "graded" ? phase.grade : null;
+  const feedbackAudio = isReview ? playbackUrl : takeUrl;
+  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(Math.round(take.durationMs / 1e3), 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;
+        return grade === null ? { text: `${s.answerSubmitted} ${s.couldNotBeGraded}`, feedback: null } : {
+          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]);
+  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 !== void 0 ? { disabled } : {}
+              }
+            )
+          ] }) : 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 !== void 0 ? { disabled } : {}
+              }
+            )
+          ] }) : 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
+                }
+              ) : (
+                // aria-disabled, never disabled, once the takes are spent: a
+                // natively disabled button drops keyboard focus to the page body,
+                // and this is the control a learner comes back to.
+                /* @__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" ? (
+                // Visible, and hidden from assistive technology, beside the level
+                // meter the recorder's `data-level` drives. Its text changes every
+                // whole second, so as a live region it announced ten times in a
+                // ten-second take — into the microphone. What a screen-reader
+                // learner needs instead is said once each, below.
+                /* @__PURE__ */ jsx("p", { className: "lk-ra-progress", "aria-hidden": "true", children: s.readAloudRecordingProgress(Math.floor(recorder.elapsedMs / 1e3), maxSeconds) })
+              ) : null,
+              takesLeft !== void 0 && maxTakes !== void 0 ? /* @__PURE__ */ jsx("p", { className: "lk-ra-takes", children: s.readAloudTakesRemaining(takesLeft, maxTakes) }) : null
+            ]
+          }
+        ),
+        !isReview && takeUrl !== null ? (
+          // biome-ignore lint/a11y/useMediaCaption: the learner's own take has no caption track to offer; its accessible name says whose recording it is
+          /* @__PURE__ */ jsx(
+            "audio",
+            {
+              className: "lk-ra-take",
+              controls: true,
+              src: takeUrl,
+              "aria-label": s.readAloudYourRecording,
+              "data-take": recorder.takesUsed
+            }
+          )
+        ) : null,
+        isReview && playbackUrl !== null ? (
+          // biome-ignore lint/a11y/useMediaCaption: the learner's own take has no caption track to offer; its accessible name says whose recording it is
+          /* @__PURE__ */ jsx(
+            "audio",
+            {
+              className: "lk-ra-take",
+              controls: true,
+              src: playbackUrl,
+              "aria-label": s.readAloudYourRecording
+            }
+          )
+        ) : null,
+        isReview || submitted ? null : /* @__PURE__ */ jsxs("div", { className: "lk-ra-actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              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 ? (
+            // Explicit, and only here: an exam answer with no recording is a
+            // decision a learner takes, never something a failed upload does
+            // for them.
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "lk-ra-submit-blank",
+                disabled: inactive,
+                "aria-disabled": busy || void 0,
+                onClick: () => {
+                  if (!busy) {
+                    void submitTake(null);
+                  }
+                },
+                children: s.readAloudSubmitWithoutRecording
+              }
+            )
+          ) : null,
+          offersRetry(phase, uploaded) ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "lk-ra-retry",
+              onClick: () => {
+                if (phase.kind === "upload-failed") {
+                  void submitTake(recorder.take);
+                } else if (phase.kind === "assess-failed" && uploaded !== null) {
+                  void 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: { referenceText: data.referenceText, locale: data.locale },
+            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 } : {}
+          }
+        ) : 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((state2) => /* @__PURE__ */ jsx("li", { "data-state": state2, children: s.pronunciationLegend(state2) }, state2)) })
+        ] }) : null,
+        /* @__PURE__ */ jsx(FeedbackRegion, { id: `${data.id}-feedback`, children: isReview ? outcomeReading !== void 0 ? /* @__PURE__ */ jsx(OutcomeSummary, { reading: outcomeReading, s, scoreShown: gradeShownInPanel }) : null : gradeShownInPanel ? (
+          // Announced, not repeated. A grade the feedback panel is already
+          // showing would otherwise be read on screen twice, feedback and all —
+          // but a live region is the only thing that TELLS a screen-reader
+          // learner a grade arrived, since nothing takes focus. Clipped rather
+          // than `display: none`, which would stop it being announced at all.
+          /* @__PURE__ */ jsx("span", { className: "lk-visually-hidden", style: VISUALLY_HIDDEN, children: /* @__PURE__ */ jsx(AnnouncementText, { announcement }) })
+        ) : /* @__PURE__ */ jsx(AnnouncementText, { announcement }) })
+      ]
+    }
+  );
+}
+function ReadAloud2(props) {
+  const strings = useLkStrings(props.strings);
+  return /* @__PURE__ */ jsx(ActivityErrorBoundary, { activityTitle: props.data?.title, strings, children: /* @__PURE__ */ jsx(ReadAloud, { ...props }) });
+}
+
+export { ReadAloud2 as ReadAloud, SequenceSlotContext, mintTake, stopCaptureGroup, takeOf };
+//# sourceMappingURL=chunk-D57QZILZ.js.map
+//# sourceMappingURL=chunk-D57QZILZ.js.map