@intellectif/lk-react 15.0.0 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @intellectif/lk-react
 
+## 16.0.0
+
+### Major Changes
+
+- 7992fac: `<InteractiveVideo>` shows two caption languages at once: a first line and, when the learner asks for
+  it, a second under it — the language they are learning and their own, one line each.
+
+  - **Settings → Captions → Second language** picks the second line; the captions row reads
+    `English + Español`. Picking the second line's language as the first swaps them. **C** turns both
+    lines off and on, keeping both choices; **Shift + C** turns the second line off and on, and is listed
+    in the shortcut sheet.
+  - Each line shows its own cue, so a translation segmented differently from the audio still reads
+    line for line. The transcript shows the second language under each row, paired by overlap, and its
+    search finds either language; the spoiler limit holds for both.
+  - Each language loads once for the life of the video, in parallel, and a late file never lands in a
+    line that has moved on to another language. A second language that fails to load never takes the
+    first with it, and the menu says which failed.
+  - **`defaultPreferences`** (new): preferences a host suggests, below what the learner chose — a
+    language pair, say. `preferences` keeps its meaning and is now documented as a force.
+    **`onPreferencesChange(next, change)`** (new) reports each change the learner makes, for a host that
+    keeps the choice on the learner's account and passes it back as `defaultPreferences`.
+    `VideoPreferences` gains `secondaryCaptionLanguage`. The player now stores only the fields a learner
+    changed, so a host suggestion still reaches a learner who never chose that field; a payload stored
+    by 15.x reads as every field chosen.
+  - **`resolveCaptionTracks(tracks, preferences)`** (new export): the rules the player uses to choose
+    each line's track. A language now matches its regional tracks (`pt` finds `pt-BR`), and where two
+    tracks share a language the `captions` one wins. A second line appears only when the learner asked
+    for one — never a fallback.
+  - `dir="auto"` on every caption line, transcript row and menu item that shows a track's text, so an
+    Arabic line's punctuation lands on the right side.
+  - Four optional tokens style the lines: `--lk-iv-caption-color`, `--lk-iv-caption-secondary-color`
+    (warm yellow, clearing 4.5:1 on the caption box), `--lk-iv-caption-secondary-scale` and
+    `--lk-iv-caption-gap`. The second line differs by position and size as well as colour. Four new
+    strings, all in `docs/i18n.md`.
+
+  **One DOM change, for hosts that style the captions:** the lines now sit inside a
+  `<div class="lk-iv-captions">`, which is what is positioned over the video and rises with the
+  controls. Each line keeps `.lk-iv-caption`, its `span`, `data-size` and `data-background` (and gains
+  `data-role`, `lang` and `dir`), so rules that style a line's text still match. A rule that positions
+  `.lk-iv-caption` over the video should move to `.lk-iv-captions`.
+
+  **Major** because the peer range moves to `@intellectif/lk-core@^0.16.0`, whose tightened dictation
+  rule can refuse stored content. Nothing in this package was removed.
+
+  See `docs/interactive-video.md` and the 0.15 → 0.16 section of `docs/upgrading.md`.
+
+### Patch Changes
+
+- Updated dependencies [7992fac]
+  - @intellectif/lk-core@0.16.0
+
 ## 15.0.0
 
 ### Major Changes

package/README.md

@@ -72,7 +72,7 @@ export function Demo() {
 - **`<ReadAloud>`** — the learner reads a text aloud. A model recording and an optional slower one (same playback policy, and both kept silent for as long as a take is being recorded, so the microphone never picks up the model), a microphone control bounded by the item's take budget and its time limit, playback of the take before it is sent, and a word-by-word pronunciation result. The SDK captures and renders; it stores nothing and judges nothing: `recordingBinding.upload` puts the take in **your** storage and `recordingBinding.assess` (`practice` only) returns **your** server's judgement, so no audio, no key and no assessor ever sit in the component. In `exam` it uploads, submits and locks without scoring, revealing or assessing — and a take whose upload failed offers a retry and blocks submit rather than silently becoming a blank. In `review` it renders the stored `outcome`, marked from an `assessment` you pass or, failing that, rebuilt from the outcome's stored `details`.
 - **`<PronunciationFeedback>`** — the marks on their own, for a review screen that has evidence but no activity: the graded dimensions (accuracy, fluency, completeness, prosody — one the engine did not measure reads "not assessed", **never 0%**), and every word marked `correct` / `mispronounced` / `omitted` / `inserted` with a hidden sentence per word for screen readers and a glyph plus a text decoration for everyone else. A word opens onto its syllables, its sounds, what was heard instead, and a button that plays just that word. Evidence it cannot trust is checked before it is aligned, so in production a malformed assessment costs the word list — never the grade beside it.
 - **`<WrittenResponse>`** — free-text writing with a live word counter and bounds messaging, graded **asynchronously**: it emits an ungraded submission (never a fake zero) and a SUBMITTED-verb xAPI statement, and renders a returned `GradeRecord` in `review` mode with per-criterion scores and inline corrections.
-- **`<InteractiveVideo>`** — a video that stops at each quiz and asks its questions over itself, then plays on. One player: a progress bar that marks every quiz and previews the caption under the pointer, speed, volume, captions drawn from WebVTT it parses itself (through a `captionsLoader` when the file needs the learner's credentials), a contents and transcript panel, picture-in-picture, fullscreen and a keyboard map with a shortcut sheet. A quiz covers the video and grows the player rather than scrolling inside it, every question of an opened quiz stays mounted so a rewind loses no answer, the controls are `inert` while it is open, and a **required** quiz holds both playback and seeking until it is answered. Answers report with the slot the question sits in and the quiz it belongs to, and `onProgress` gives a resume point that is never past an unanswered required quiz. See the [interactive video guide](https://github.com/intellectif/learning-kit/blob/main/docs/interactive-video.md).
+- **`<InteractiveVideo>`** — a video that stops at each quiz and asks its questions over itself, then plays on. One player: a progress bar that marks every quiz and previews the caption under the pointer, speed, volume, captions drawn from WebVTT it parses itself (through a `captionsLoader` when the file needs the learner's credentials) — in one language or two at once, a second line under the first for a learner matching what they hear to what it means — a contents and transcript panel, picture-in-picture, fullscreen and a keyboard map with a shortcut sheet. A quiz covers the video and grows the player rather than scrolling inside it, every question of an opened quiz stays mounted so a rewind loses no answer, the controls are `inert` while it is open, and a **required** quiz holds both playback and seeking until it is answered. Answers report with the slot the question sits in and the quiz it belongs to, and `onProgress` gives a resume point that is never past an unanswered required quiz. See the [interactive video guide](https://github.com/intellectif/learning-kit/blob/main/docs/interactive-video.md).
 - **`<ActivitySequence>`** — in-place "question set" pager (Previous/Next, "Question X of N", no scrolling, focus-managed). Accepts item groups and keeps their stimulus beside every question; `onSubmit` reports every raw answer with its `slotId`, which is the only response channel an `exam` sequence has. `onFinished` is the completion signal for a set that mixes scored and deferred-graded items, where `onComplete` can never fire. A read-aloud slot takes its storage from `recordingBinding`, whose methods are told which slot a take belongs to, and a `review` its per-word marks from `assessments`, keyed by `slotId` — there is a [worked example](https://github.com/intellectif/learning-kit/blob/main/docs/speech-assessment.md#in-a-question-set).
 - **Resume and review a whole attempt** — `<ActivitySequence>` takes `defaultIndex`, `responses` and `submittedSlotIds` (read at mount; remount with a `key` to show a different attempt), so an interrupted paper reopens on the right question with the right answers and already-committed questions still committed. `onIndexChange` reports every position the pager lands on, including a clamp it had to apply. Pass `renderMode="review"` plus server-computed `outcomes` to render a finished attempt read-only. Pairs with `serializeAttemptState` / `restoreAttemptState` in `lk-core`.
 - **`renderMode`** — `practice` (default: the component scores locally and reveals correctness), `exam` (never scores, never reveals; submit emits the raw response for the server to grade), `review` (read-only, marks correctness only from an `outcome` you supply). This is the single switch that takes grading off the client.
@@ -91,7 +91,7 @@ export function Demo() {
 - **`useSpeechRecorder(options)`** — the capture half of a read-aloud, usable on its own: microphone permission, an RMS level for a meter, a minimum take length, and an auto-stop measured from the **sample count** rather than a timer, so a take can never outrun its own limit. It yields **16 kHz mono 16-bit PCM WAV** — the one format `inspectWav` in `lk-core` measures without a decoder. SSR-safe by construction (support is discovered inside `start()`, never probed during render, so a server render and its hydration cannot disagree), and the microphone and the audio context are released on stop, discard, error and unmount alike. Where a Content-Security-Policy's `script-src` does not allow `blob:`, serve `CAPTURE_PROCESSOR_SOURCE` — exported beside the hook, with the contract it meets written on it — and pass its URL as `workletUrl`. A `workletUrl` that fails to load is not reported: the hook falls back to the main-thread `ScriptProcessorNode`, so check that the module is fetched.
 - **`<ThemeProvider>` + `defaults.css`** — `--lk-*` design-token system; automatic dark mode via `prefers-color-scheme` (SSR-safe with `useSyncExternalStore`).
 - **`createTailwindTheme(theme)`** — optional Tailwind interop; consume the SDK palette from your own utilities.
-- **`<LkIntlProvider>`** — all 163 strings the SDK's own chrome renders, replaceable in one place, with a per-component `strings` prop for the exceptions. Interpolation and plurals are **functions**, not format strings, so your `Intl.PluralRules` does the work and TypeScript checks the arity. `locale` sets `lang` and derives `dir`; the skin uses logical properties, so RTL follows. The SDK ships the mechanism and **English only** — see [docs/i18n.md](https://github.com/intellectif/learning-kit/blob/main/docs/i18n.md).
+- **`<LkIntlProvider>`** — all 167 strings the SDK's own chrome renders, replaceable in one place, with a per-component `strings` prop for the exceptions. Interpolation and plurals are **functions**, not format strings, so your `Intl.PluralRules` does the work and TypeScript checks the arity. `locale` sets `lang` and derives `dir`; the skin uses logical properties, so RTL follows. The SDK ships the mechanism and **English only** — see [docs/i18n.md](https://github.com/intellectif/learning-kit/blob/main/docs/i18n.md).
 - **WCAG 2.2 AA** — axe-clean unit + Playwright e2e tests; full keyboard operability; numerically-verified contrast.
 - **RSC-compatible** — every component carries `'use client'` and hydrates inside a React Server Component tree.
 

package/dist/{WrittenResponse-BPbhERgk.d.cts → WrittenResponse-C2zw-1jK.d.cts}

@@ -1,5 +1,5 @@
 import { XAPIStatement, WrittenResponseData, LearnerResponse, ItemOutcome, InteractionEvent, ThemeTokens } from '@intellectif/lk-core';
-import { f as Renderable, e as RenderMode, H as HtmlSanitizer, M as MediaBudgetBinding, b as MediaTransportStrings, a as LkStringsOverride } from './strings-5588Q4Te.cjs';
+import { f as Renderable, e as RenderMode, H as HtmlSanitizer, M as MediaBudgetBinding, b as MediaTransportStrings, a as LkStringsOverride } from './strings-zY2QQYpU.cjs';
 
 /**
  * Payload delivered when the learner submits a written response. Grading is

package/dist/{WrittenResponse-ZAxLR_AU.d.ts → WrittenResponse-CTiNpSCC.d.ts}

@@ -1,5 +1,5 @@
 import { XAPIStatement, WrittenResponseData, LearnerResponse, ItemOutcome, InteractionEvent, ThemeTokens } from '@intellectif/lk-core';
-import { f as Renderable, e as RenderMode, H as HtmlSanitizer, M as MediaBudgetBinding, b as MediaTransportStrings, a as LkStringsOverride } from './strings-D0IWcsUm.js';
+import { f as Renderable, e as RenderMode, H as HtmlSanitizer, M as MediaBudgetBinding, b as MediaTransportStrings, a as LkStringsOverride } from './strings-Dgc5-DeA.js';
 
 /**
  * Payload delivered when the learner submits a written response. Grading is

package/dist/{chunk-ZH5WT2IE.cjs → chunk-2WM2KSO7.cjs}

@@ -1,14 +1,14 @@
 'use client';
 'use strict';
 
-var chunkWKOV25NP_cjs = require('./chunk-WKOV25NP.cjs');
+var chunkBO64SLHL_cjs = require('./chunk-BO64SLHL.cjs');
 var chunkUDCQTOVU_cjs = require('./chunk-UDCQTOVU.cjs');
 var chunkOD65OZIW_cjs = require('./chunk-OD65OZIW.cjs');
 var chunkBRPEB43C_cjs = require('./chunk-BRPEB43C.cjs');
-var chunk53YOZOGN_cjs = require('./chunk-53YOZOGN.cjs');
-var chunkFKGUKFC7_cjs = require('./chunk-FKGUKFC7.cjs');
+var chunkP5FGJMMI_cjs = require('./chunk-P5FGJMMI.cjs');
+var chunkOXUUE3HX_cjs = require('./chunk-OXUUE3HX.cjs');
 var chunkXOR4MPEN_cjs = require('./chunk-XOR4MPEN.cjs');
-var chunkZ6TVOAO5_cjs = require('./chunk-Z6TVOAO5.cjs');
+var chunkUISZWFI7_cjs = require('./chunk-UISZWFI7.cjs');
 var lkCore = require('@intellectif/lk-core');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -172,7 +172,7 @@ function OutcomeSummary({
           "data-status": reading.status,
           "data-passed": String(reading.grade.passed),
           children: scoreShown ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-ra-grade", children: s.scoreAnnouncement(chunkWKOV25NP_cjs.percentOfGrade(reading.grade), reading.grade.passed) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-ra-grade", children: s.scoreAnnouncement(chunkBO64SLHL_cjs.percentOfGrade(reading.grade), reading.grade.passed) }),
             reading.grade.feedback ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-ra-grade-feedback", dir: "auto", children: reading.grade.feedback }) : null
           ] })
         }
@@ -224,11 +224,11 @@ function ReadAloud({
 }) {
   const isExam = renderMode === "exam";
   const isReview = renderMode === "review";
-  const s = chunkZ6TVOAO5_cjs.useLkStrings(strings);
+  const s = chunkUISZWFI7_cjs.useLkStrings(strings);
   const slot = react.useContext(SequenceSlotContext);
   const captureGroup = slot?.captureGroup;
   const devError = react.useMemo(() => {
-    if (!chunk53YOZOGN_cjs.isDevelopment()) {
+    if (!chunkP5FGJMMI_cjs.isDevelopment()) {
       return null;
     }
     if (data.redacted === true) {
@@ -419,7 +419,7 @@ function ReadAloud({
     [data, s.readAloudSlowRecording]
   );
   const takeAudio = isReview ? playbackUrl : takeUrl;
-  const playback = chunkWKOV25NP_cjs.usePlaybackRefusal(takeAudio);
+  const playback = chunkBO64SLHL_cjs.usePlaybackRefusal(takeAudio);
   const submitRef = react.useRef(null);
   if (devError) {
     throw devError;
@@ -466,7 +466,7 @@ function ReadAloud({
     if (run !== runRef.current) {
       return;
     }
-    const result = chunkWKOV25NP_cjs.readAssessResult(answer);
+    const result = chunkBO64SLHL_cjs.readAssessResult(answer);
     if (result.status === "failed") {
       raise({ kind: "assess-failed", take: take2, retryable: result.retryable });
       fire("assessment-failed", { takes: takes2, durationMs, retryable: result.retryable });
@@ -497,9 +497,9 @@ function ReadAloud({
           passed: grade.passed,
           timeSpent,
           xapiStatement: lkCore.xAPIBuilder.buildAnsweredStatement({
-            actor: chunk53YOZOGN_cjs.ANONYMOUS_ACTOR,
+            actor: chunkP5FGJMMI_cjs.ANONYMOUS_ACTOR,
             object: {
-              id: chunk53YOZOGN_cjs.objectIdFor(data.id),
+              id: chunkP5FGJMMI_cjs.objectIdFor(data.id),
               name: { [data.locale ?? "en-US"]: data.title },
               ...lkCore.xapiDefinitionFor(data)
             },
@@ -509,7 +509,7 @@ function ReadAloud({
             // optional, and an empty list is the honest reading of "no per-word
             // marks were stored" — never a mark of its own.
             scoringResult: {
-              score: chunkWKOV25NP_cjs.fractionOfGrade(grade),
+              score: chunkBO64SLHL_cjs.fractionOfGrade(grade),
               maxScore: 1,
               passed: grade.passed,
               feedback: grade.feedback,
@@ -603,8 +603,8 @@ function ReadAloud({
   };
   const contentLang = typeof data.locale === "string" ? data.locale : void 0;
   const contentDir = chunkOD65OZIW_cjs.localeDirectionOf(data.locale);
-  const outcomeReading = react.useMemo(() => chunkWKOV25NP_cjs.readOutcome(outcome), [outcome]);
-  const keptEvidence = react.useMemo(() => chunkWKOV25NP_cjs.readEvidence(assessment), [assessment]);
+  const outcomeReading = react.useMemo(() => chunkBO64SLHL_cjs.readOutcome(outcome), [outcome]);
+  const keptEvidence = react.useMemo(() => chunkBO64SLHL_cjs.readEvidence(assessment), [assessment]);
   const storedGrade = outcomeReading?.kind === "graded" && outcomeReading.status === "graded" ? outcomeReading.grade : null;
   const storedMarks = react.useMemo(
     () => isReview && keptEvidence === null && storedGrade?.details !== void 0 ? marksFromDetails(storedGrade.details) : null,
@@ -646,7 +646,7 @@ function ReadAloud({
       case "graded": {
         const grade = phase.grade;
         return grade === null ? { text: `${s.answerSubmitted} ${s.couldNotBeGraded}`, feedback: null } : {
-          text: `${s.answerSubmitted} ${s.scoreAnnouncement(chunkWKOV25NP_cjs.percentOfGrade(grade), grade.passed)}`,
+          text: `${s.answerSubmitted} ${s.scoreAnnouncement(chunkBO64SLHL_cjs.percentOfGrade(grade), grade.passed)}`,
           feedback: grade.feedback
         };
       }
@@ -679,7 +679,7 @@ function ReadAloud({
           data.media !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "lk-ra-model", children: [
             /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "lk-ra-model-label", children: s.readAloudModelRecording }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkFKGUKFC7_cjs.ActivityMedia,
+              chunkOXUUE3HX_cjs.ActivityMedia,
               {
                 media: data.media,
                 renderMode,
@@ -696,7 +696,7 @@ function ReadAloud({
           slowMedia !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "lk-ra-model", "data-slow": "true", children: [
             /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "lk-ra-model-label", children: s.readAloudSlowRecording }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkFKGUKFC7_cjs.ActivityMedia,
+              chunkOXUUE3HX_cjs.ActivityMedia,
               {
                 media: slowMedia,
                 renderMode,
@@ -829,7 +829,7 @@ function ReadAloud({
         busy ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-ra-pending", role: "status", "aria-busy": "true", children: phase.kind === "uploading" ? s.readAloudUploading : s.readAloudAssessing }) : null,
         alertText !== null ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-ra-alert", role: "alert", children: alertText }, errorNonce) : null,
         feedbackAssessment !== null ? /* @__PURE__ */ jsxRuntime.jsx(
-          chunkWKOV25NP_cjs.PronunciationFeedback,
+          chunkBO64SLHL_cjs.PronunciationFeedback,
           {
             data: { referenceText: data.referenceText, locale: data.locale },
             assessment: feedbackAssessment,
@@ -843,14 +843,14 @@ function ReadAloud({
         ) : null,
         storedMarks !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-ra-marks", children: [
           /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "lk-ra-words", "aria-label": s.pronunciationWordsLabel, dir: contentDir, children: storedMarks.map((entry, index) => {
-            const sentence = chunkWKOV25NP_cjs.markSentence(entry, s);
+            const sentence = chunkBO64SLHL_cjs.markSentence(entry, s);
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "li",
               {
                 className: "lk-ra-word",
                 "data-state": entry.state,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-visually-hidden", style: chunkWKOV25NP_cjs.VISUALLY_HIDDEN, children: sentence }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-visually-hidden", style: chunkBO64SLHL_cjs.VISUALLY_HIDDEN, children: sentence }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
@@ -874,15 +874,15 @@ function ReadAloud({
           // 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__ */ jsxRuntime.jsx("span", { className: "lk-visually-hidden", style: chunkWKOV25NP_cjs.VISUALLY_HIDDEN, children: /* @__PURE__ */ jsxRuntime.jsx(AnnouncementText, { announcement }) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-visually-hidden", style: chunkBO64SLHL_cjs.VISUALLY_HIDDEN, children: /* @__PURE__ */ jsxRuntime.jsx(AnnouncementText, { announcement }) })
         ) : /* @__PURE__ */ jsxRuntime.jsx(AnnouncementText, { announcement }) })
       ]
     }
   );
 }
 function ReadAloud2(props) {
-  const strings = chunkZ6TVOAO5_cjs.useLkStrings(props.strings);
-  return /* @__PURE__ */ jsxRuntime.jsx(chunk53YOZOGN_cjs.ActivityErrorBoundary, { activityTitle: props.data?.title, strings, children: /* @__PURE__ */ jsxRuntime.jsx(ReadAloud, { ...props }) });
+  const strings = chunkUISZWFI7_cjs.useLkStrings(props.strings);
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkP5FGJMMI_cjs.ActivityErrorBoundary, { activityTitle: props.data?.title, strings, children: /* @__PURE__ */ jsxRuntime.jsx(ReadAloud, { ...props }) });
 }
 
 exports.ReadAloud = ReadAloud2;
@@ -890,5 +890,5 @@ exports.SequenceSlotContext = SequenceSlotContext;
 exports.mintTake = mintTake;
 exports.stopCaptureGroup = stopCaptureGroup;
 exports.takeOf = takeOf;
-//# sourceMappingURL=chunk-ZH5WT2IE.cjs.map
-//# sourceMappingURL=chunk-ZH5WT2IE.cjs.map
+//# sourceMappingURL=chunk-2WM2KSO7.cjs.map
+//# sourceMappingURL=chunk-2WM2KSO7.cjs.map