@intellectif/lk-react 2.0.0 → 3.0.0

package/dist/chunk-BGWXN44S.js

@@ -0,0 +1,152 @@
+import { MultipleChoice } from './chunk-ZVFWJTT4.js';
+import { FillInTheBlanks } from './chunk-3X7MYAFT.js';
+import { WrittenResponse } from './chunk-AEQQ7VPF.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ActivitySequence({
+  activities,
+  renderers,
+  onActivityComplete,
+  onComplete,
+  onFinished,
+  onInteraction,
+  renderMode,
+  theme,
+  locale,
+  disabled
+}) {
+  const [index, setIndex] = useState(0);
+  const [outcomes, setOutcomes] = useState(
+    () => activities.map(() => null)
+  );
+  const regionRef = useRef(null);
+  const mountedRef = useRef(false);
+  const setKey = JSON.stringify(activities.map((activity) => activity.id));
+  const [prevSetKey, setPrevSetKey] = useState(setKey);
+  if (prevSetKey !== setKey) {
+    setPrevSetKey(setKey);
+    setIndex(0);
+    setOutcomes(activities.map(() => null));
+  }
+  useEffect(() => {
+    if (mountedRef.current) {
+      regionRef.current?.focus();
+    } else {
+      mountedRef.current = true;
+    }
+  }, [index]);
+  const total = activities.length;
+  const current = activities[index];
+  const go = (next) => {
+    setIndex(next);
+  };
+  const record = (outcome) => {
+    if (outcomes[outcome.index] != null) {
+      return;
+    }
+    const next = outcomes.slice();
+    next[outcome.index] = outcome;
+    setOutcomes(next);
+    if (outcome.kind === "scored") {
+      onActivityComplete?.(outcome.result, outcome.index);
+    }
+    if (!next.every((item) => item !== null)) {
+      return;
+    }
+    onFinished?.(next);
+    const scored = [];
+    for (const item of next) {
+      if (item.kind !== "scored") {
+        return;
+      }
+      scored.push(item.result);
+    }
+    onComplete?.(scored);
+  };
+  if (!current) {
+    return /* @__PURE__ */ jsx("div", { className: "lk-seq" });
+  }
+  const forwarded = {
+    ...onInteraction ? { onInteraction } : {},
+    ...renderMode ? { renderMode } : {},
+    ...theme ? { theme } : {},
+    ...locale ? { locale } : {},
+    ...disabled ? { disabled } : {}
+  };
+  const renderSlot = (activity, slotIndex) => {
+    const activityId = activity.id;
+    const childProps = {
+      onComplete: (result) => record({ kind: "scored", index: slotIndex, activityId, result }),
+      ...forwarded
+    };
+    const CustomRenderer = renderers?.[activity.type];
+    if (CustomRenderer) {
+      return /* @__PURE__ */ jsx(CustomRenderer, { data: activity, ...childProps });
+    }
+    if (activity.type === "multiple-choice") {
+      return /* @__PURE__ */ jsx(MultipleChoice, { data: activity, ...childProps });
+    }
+    if (activity.type === "fill-in-the-blanks") {
+      return /* @__PURE__ */ jsx(FillInTheBlanks, { data: activity, ...childProps });
+    }
+    if (activity.type === "written-response") {
+      return /* @__PURE__ */ jsx(
+        WrittenResponse,
+        {
+          data: activity,
+          onSubmitted: (submission) => record({ kind: "submitted", index: slotIndex, activityId, submission }),
+          ...forwarded
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: "lk-seq-unsupported", role: "note", children: "This activity type has no renderer. Supply one through the renderers prop." });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "lk-seq", lang: locale, children: [
+    /* @__PURE__ */ jsxs("div", { className: "lk-seq-progress", "aria-live": "polite", role: "status", children: [
+      "Question ",
+      index + 1,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        className: "lk-seq-question",
+        ref: regionRef,
+        tabIndex: -1,
+        "aria-label": `Question ${index + 1} of ${total}`,
+        children: activities.map((activity, slotIndex) => {
+          const slotKey = `slot-${slotIndex}-${activity.id}`;
+          return /* @__PURE__ */ jsx("div", { className: "lk-seq-slot", hidden: slotIndex !== index, children: renderSlot(activity, slotIndex) }, slotKey);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "lk-seq-nav", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-seq-prev",
+          onClick: () => go(index - 1),
+          disabled: index === 0,
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-seq-next",
+          onClick: () => go(index + 1),
+          disabled: index === total - 1,
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ActivitySequence };
+//# sourceMappingURL=chunk-BGWXN44S.js.map
+//# sourceMappingURL=chunk-BGWXN44S.js.map

package/dist/chunk-BGWXN44S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ActivitySequence/ActivitySequence.tsx"],"names":[],"mappings":"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","file":"chunk-BGWXN44S.js","sourcesContent":["'use client';\n\nimport type {\n  ActivityData,\n  ActivityResult,\n  InteractionEvent,\n  ThemeTokens,\n} from '@intellectif/lk-core';\nimport { type ComponentType, useEffect, useRef, useState } from 'react';\nimport { FillInTheBlanks } from '../FillInTheBlanks/index.js';\nimport { MultipleChoice } from '../MultipleChoice/index.js';\nimport type { ActivityProps, RenderMode } from '../types.js';\nimport { WrittenResponse, type WrittenResponseSubmission } from '../WrittenResponse/index.js';\n\n/**\n * What one finished slot in a sequence produced. Two kinds, because two kinds\n * of activity exist: those the SDK scores at submit time, and those a grader\n * scores later. Collapsing them would mean inventing a score for ungraded\n * work — the exact defect the deferred outcome exists to prevent.\n */\nexport type SequenceItemOutcome =\n  | {\n      kind: 'scored';\n      index: number;\n      activityId: string;\n      result: ActivityResult;\n    }\n  | {\n      kind: 'submitted';\n      index: number;\n      activityId: string;\n      /** Ungraded submission; the grade arrives asynchronously. */\n      submission: WrittenResponseSubmission;\n    };\n\n/**\n * A component that can render one activity inside a sequence. Register one per\n * activity `type` to put a consumer-defined type on screen — the React half of\n * the activity-type registry, matching `registerActivityType` in lk-core.\n */\nexport type ActivityRenderer = ComponentType<ActivityProps>;\n\nexport interface ActivitySequenceProps {\n  /** The ordered set of activities to present, one at a time. */\n  activities: ActivityData[];\n  /**\n   * Renderers for activity types beyond the built-ins, keyed by `data.type`.\n   * A key matching a built-in overrides it, so a consumer can replace the\n   * bundled renderer without forking the sequencer.\n   */\n  renderers?: Readonly<Record<string, ActivityRenderer>>;\n  /** Called whenever an individual activity is scored at submit time. */\n  onActivityComplete?: (result: ActivityResult, index: number) => void;\n  /**\n   * Called once every activity has been completed, with the scored results.\n   *\n   * Fires only when EVERY item produced a score. A set containing a\n   * deferred-graded activity (a written response) can never satisfy that, so\n   * use `onFinished` for mixed sets — it is the general completion signal and\n   * reports both kinds of outcome.\n   */\n  onComplete?: (results: ActivityResult[]) => void;\n  /**\n   * Called once every activity has been completed, whether it was scored at\n   * submit time or submitted for later grading. Use this for any set that\n   * mixes graded and deferred-graded activities.\n   */\n  onFinished?: (items: SequenceItemOutcome[]) => void;\n  /** Forwarded to each activity. */\n  onInteraction?: (event: InteractionEvent) => void;\n  /** Forwarded to each activity. `exam` and `review` disable local scoring. */\n  renderMode?: RenderMode;\n  theme?: Partial<ThemeTokens>;\n  locale?: string;\n  disabled?: boolean;\n}\n\n/**\n * Presents a set of activities as an in-place pager: one question visible at a\n * time, navigated with Prev/Next (no page scrolling). Linear free navigation —\n * the learner may move back and forth; activities keep their own submit and\n * scoring. On navigation, focus moves to the question region and the position\n * is announced via an aria-live region.\n */\nexport function ActivitySequence({\n  activities,\n  renderers,\n  onActivityComplete,\n  onComplete,\n  onFinished,\n  onInteraction,\n  renderMode,\n  theme,\n  locale,\n  disabled,\n}: ActivitySequenceProps): React.JSX.Element {\n  const [index, setIndex] = useState(0);\n  const [outcomes, setOutcomes] = useState<(SequenceItemOutcome | null)[]>(() =>\n    activities.map(() => null),\n  );\n  const regionRef = useRef<HTMLDivElement>(null);\n  const mountedRef = useRef(false);\n\n  // Reset pager position and outcomes when the activity SET changes (B8):\n  // without this, results from the previous set leak into the new one and can\n  // fire completion with a mixed old/new array. Keyed on the set's CONTENT\n  // identity (ordered activity ids), not the array reference — a parent that\n  // re-creates a structurally identical array on every render (inline\n  // literals, .map() in render) must not wipe in-progress answers.\n  // JSON.stringify (not join) so ids containing the separator cannot collide.\n  const setKey = JSON.stringify(activities.map((activity) => activity.id));\n  const [prevSetKey, setPrevSetKey] = useState(setKey);\n  if (prevSetKey !== setKey) {\n    setPrevSetKey(setKey);\n    setIndex(0);\n    setOutcomes(activities.map(() => null));\n  }\n\n  // After a navigation (not the initial mount) move focus to the question\n  // region so screen-reader / keyboard users land on the new question.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: index is the intended trigger\n  useEffect(() => {\n    if (mountedRef.current) {\n      regionRef.current?.focus();\n    } else {\n      mountedRef.current = true;\n    }\n  }, [index]);\n\n  const total = activities.length;\n  const current = activities[index];\n\n  const go = (next: number): void => {\n    setIndex(next);\n  };\n\n  /**\n   * Records a finished slot and fires completion callbacks when the set is\n   * done. A slot that already holds an outcome is FINAL: re-recording it would\n   * fire completion a second time for one attempt, so a consumer persisting on\n   * `onFinished` would write the same attempt twice.\n   */\n  const record = (outcome: SequenceItemOutcome): void => {\n    if (outcomes[outcome.index] != null) {\n      return;\n    }\n    const next = outcomes.slice();\n    next[outcome.index] = outcome;\n    setOutcomes(next);\n\n    if (outcome.kind === 'scored') {\n      onActivityComplete?.(outcome.result, outcome.index);\n    }\n\n    if (!next.every((item): item is SequenceItemOutcome => item !== null)) {\n      return;\n    }\n    onFinished?.(next);\n\n    // `onComplete` predates deferred grading and promises ActivityResult[].\n    // Fire it only when every slot really was scored, rather than inventing a\n    // result for work nobody has graded.\n    const scored: ActivityResult[] = [];\n    for (const item of next) {\n      if (item.kind !== 'scored') {\n        return;\n      }\n      scored.push(item.result);\n    }\n    onComplete?.(scored);\n  };\n\n  if (!current) {\n    return <div className=\"lk-seq\" />;\n  }\n\n  const forwarded = {\n    ...(onInteraction ? { onInteraction } : {}),\n    ...(renderMode ? { renderMode } : {}),\n    ...(theme ? { theme } : {}),\n    ...(locale ? { locale } : {}),\n    ...(disabled ? { disabled } : {}),\n  };\n\n  const renderSlot = (activity: ActivityData, slotIndex: number): React.JSX.Element => {\n    const activityId = activity.id;\n    const childProps = {\n      onComplete: (result: ActivityResult) =>\n        record({ kind: 'scored', index: slotIndex, activityId, result }),\n      ...forwarded,\n    };\n\n    const CustomRenderer = renderers?.[activity.type];\n    if (CustomRenderer) {\n      return <CustomRenderer data={activity} {...childProps} />;\n    }\n    if (activity.type === 'multiple-choice') {\n      return <MultipleChoice data={activity} {...childProps} />;\n    }\n    if (activity.type === 'fill-in-the-blanks') {\n      return <FillInTheBlanks data={activity} {...childProps} />;\n    }\n    if (activity.type === 'written-response') {\n      return (\n        <WrittenResponse\n          data={activity}\n          onSubmitted={(submission) =>\n            record({ kind: 'submitted', index: slotIndex, activityId, submission })\n          }\n          {...forwarded}\n        />\n      );\n    }\n    return (\n      <div className=\"lk-seq-unsupported\" role=\"note\">\n        This activity type has no renderer. Supply one through the renderers prop.\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"lk-seq\" lang={locale}>\n      <div className=\"lk-seq-progress\" aria-live=\"polite\" role=\"status\">\n        Question {index + 1} of {total}\n      </div>\n\n      <section\n        className=\"lk-seq-question\"\n        ref={regionRef}\n        tabIndex={-1}\n        aria-label={`Question ${index + 1} of ${total}`}\n      >\n        {/*\n          Every slot stays MOUNTED; only the current one is visible. Rendering\n          just the current activity unmounted the others, so navigating back to\n          an answered question showed it blank and re-answerable — the learner\n          silently lost their answer and a second submit fired completion\n          again. `hidden` removes the inactive slots from the accessibility\n          tree and from tab order, so only the current question is reachable.\n        */}\n        {activities.map((activity, slotIndex) => {\n          // Slot POSITION is part of the key on purpose: the same activity may\n          // legitimately appear in two slots, and each must keep its own\n          // answer state. Computed here rather than inline so the intent is\n          // explicit rather than an accidental index-as-key.\n          const slotKey = `slot-${slotIndex}-${activity.id}`;\n          return (\n            <div className=\"lk-seq-slot\" hidden={slotIndex !== index} key={slotKey}>\n              {renderSlot(activity, slotIndex)}\n            </div>\n          );\n        })}\n      </section>\n\n      <div className=\"lk-seq-nav\">\n        <button\n          type=\"button\"\n          className=\"lk-seq-prev\"\n          onClick={() => go(index - 1)}\n          disabled={index === 0}\n        >\n          Previous\n        </button>\n        <button\n          type=\"button\"\n          className=\"lk-seq-next\"\n          onClick={() => go(index + 1)}\n          disabled={index === total - 1}\n        >\n          Next\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-HO3AC3WQ.cjs

@@ -0,0 +1,154 @@
+'use strict';
+
+var chunkW6BH2YMZ_cjs = require('./chunk-W6BH2YMZ.cjs');
+var chunkUXO6KYSZ_cjs = require('./chunk-UXO6KYSZ.cjs');
+var chunk7MW7HGOA_cjs = require('./chunk-7MW7HGOA.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ActivitySequence({
+  activities,
+  renderers,
+  onActivityComplete,
+  onComplete,
+  onFinished,
+  onInteraction,
+  renderMode,
+  theme,
+  locale,
+  disabled
+}) {
+  const [index, setIndex] = react.useState(0);
+  const [outcomes, setOutcomes] = react.useState(
+    () => activities.map(() => null)
+  );
+  const regionRef = react.useRef(null);
+  const mountedRef = react.useRef(false);
+  const setKey = JSON.stringify(activities.map((activity) => activity.id));
+  const [prevSetKey, setPrevSetKey] = react.useState(setKey);
+  if (prevSetKey !== setKey) {
+    setPrevSetKey(setKey);
+    setIndex(0);
+    setOutcomes(activities.map(() => null));
+  }
+  react.useEffect(() => {
+    if (mountedRef.current) {
+      regionRef.current?.focus();
+    } else {
+      mountedRef.current = true;
+    }
+  }, [index]);
+  const total = activities.length;
+  const current = activities[index];
+  const go = (next) => {
+    setIndex(next);
+  };
+  const record = (outcome) => {
+    if (outcomes[outcome.index] != null) {
+      return;
+    }
+    const next = outcomes.slice();
+    next[outcome.index] = outcome;
+    setOutcomes(next);
+    if (outcome.kind === "scored") {
+      onActivityComplete?.(outcome.result, outcome.index);
+    }
+    if (!next.every((item) => item !== null)) {
+      return;
+    }
+    onFinished?.(next);
+    const scored = [];
+    for (const item of next) {
+      if (item.kind !== "scored") {
+        return;
+      }
+      scored.push(item.result);
+    }
+    onComplete?.(scored);
+  };
+  if (!current) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-seq" });
+  }
+  const forwarded = {
+    ...onInteraction ? { onInteraction } : {},
+    ...renderMode ? { renderMode } : {},
+    ...theme ? { theme } : {},
+    ...locale ? { locale } : {},
+    ...disabled ? { disabled } : {}
+  };
+  const renderSlot = (activity, slotIndex) => {
+    const activityId = activity.id;
+    const childProps = {
+      onComplete: (result) => record({ kind: "scored", index: slotIndex, activityId, result }),
+      ...forwarded
+    };
+    const CustomRenderer = renderers?.[activity.type];
+    if (CustomRenderer) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CustomRenderer, { data: activity, ...childProps });
+    }
+    if (activity.type === "multiple-choice") {
+      return /* @__PURE__ */ jsxRuntime.jsx(chunkW6BH2YMZ_cjs.MultipleChoice, { data: activity, ...childProps });
+    }
+    if (activity.type === "fill-in-the-blanks") {
+      return /* @__PURE__ */ jsxRuntime.jsx(chunkUXO6KYSZ_cjs.FillInTheBlanks, { data: activity, ...childProps });
+    }
+    if (activity.type === "written-response") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        chunk7MW7HGOA_cjs.WrittenResponse,
+        {
+          data: activity,
+          onSubmitted: (submission) => record({ kind: "submitted", index: slotIndex, activityId, submission }),
+          ...forwarded
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-seq-unsupported", role: "note", children: "This activity type has no renderer. Supply one through the renderers prop." });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-seq", lang: locale, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-seq-progress", "aria-live": "polite", role: "status", children: [
+      "Question ",
+      index + 1,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        className: "lk-seq-question",
+        ref: regionRef,
+        tabIndex: -1,
+        "aria-label": `Question ${index + 1} of ${total}`,
+        children: activities.map((activity, slotIndex) => {
+          const slotKey = `slot-${slotIndex}-${activity.id}`;
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-seq-slot", hidden: slotIndex !== index, children: renderSlot(activity, slotIndex) }, slotKey);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-seq-nav", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-seq-prev",
+          onClick: () => go(index - 1),
+          disabled: index === 0,
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-seq-next",
+          onClick: () => go(index + 1),
+          disabled: index === total - 1,
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+exports.ActivitySequence = ActivitySequence;
+//# sourceMappingURL=chunk-HO3AC3WQ.cjs.map
+//# sourceMappingURL=chunk-HO3AC3WQ.cjs.map

package/dist/chunk-HO3AC3WQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ActivitySequence/ActivitySequence.tsx"],"names":["useState","useRef","useEffect","jsx","MultipleChoice","FillInTheBlanks","WrittenResponse","jsxs"],"mappings":"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","file":"chunk-HO3AC3WQ.cjs","sourcesContent":["'use client';\n\nimport type {\n  ActivityData,\n  ActivityResult,\n  InteractionEvent,\n  ThemeTokens,\n} from '@intellectif/lk-core';\nimport { type ComponentType, useEffect, useRef, useState } from 'react';\nimport { FillInTheBlanks } from '../FillInTheBlanks/index.js';\nimport { MultipleChoice } from '../MultipleChoice/index.js';\nimport type { ActivityProps, RenderMode } from '../types.js';\nimport { WrittenResponse, type WrittenResponseSubmission } from '../WrittenResponse/index.js';\n\n/**\n * What one finished slot in a sequence produced. Two kinds, because two kinds\n * of activity exist: those the SDK scores at submit time, and those a grader\n * scores later. Collapsing them would mean inventing a score for ungraded\n * work — the exact defect the deferred outcome exists to prevent.\n */\nexport type SequenceItemOutcome =\n  | {\n      kind: 'scored';\n      index: number;\n      activityId: string;\n      result: ActivityResult;\n    }\n  | {\n      kind: 'submitted';\n      index: number;\n      activityId: string;\n      /** Ungraded submission; the grade arrives asynchronously. */\n      submission: WrittenResponseSubmission;\n    };\n\n/**\n * A component that can render one activity inside a sequence. Register one per\n * activity `type` to put a consumer-defined type on screen — the React half of\n * the activity-type registry, matching `registerActivityType` in lk-core.\n */\nexport type ActivityRenderer = ComponentType<ActivityProps>;\n\nexport interface ActivitySequenceProps {\n  /** The ordered set of activities to present, one at a time. */\n  activities: ActivityData[];\n  /**\n   * Renderers for activity types beyond the built-ins, keyed by `data.type`.\n   * A key matching a built-in overrides it, so a consumer can replace the\n   * bundled renderer without forking the sequencer.\n   */\n  renderers?: Readonly<Record<string, ActivityRenderer>>;\n  /** Called whenever an individual activity is scored at submit time. */\n  onActivityComplete?: (result: ActivityResult, index: number) => void;\n  /**\n   * Called once every activity has been completed, with the scored results.\n   *\n   * Fires only when EVERY item produced a score. A set containing a\n   * deferred-graded activity (a written response) can never satisfy that, so\n   * use `onFinished` for mixed sets — it is the general completion signal and\n   * reports both kinds of outcome.\n   */\n  onComplete?: (results: ActivityResult[]) => void;\n  /**\n   * Called once every activity has been completed, whether it was scored at\n   * submit time or submitted for later grading. Use this for any set that\n   * mixes graded and deferred-graded activities.\n   */\n  onFinished?: (items: SequenceItemOutcome[]) => void;\n  /** Forwarded to each activity. */\n  onInteraction?: (event: InteractionEvent) => void;\n  /** Forwarded to each activity. `exam` and `review` disable local scoring. */\n  renderMode?: RenderMode;\n  theme?: Partial<ThemeTokens>;\n  locale?: string;\n  disabled?: boolean;\n}\n\n/**\n * Presents a set of activities as an in-place pager: one question visible at a\n * time, navigated with Prev/Next (no page scrolling). Linear free navigation —\n * the learner may move back and forth; activities keep their own submit and\n * scoring. On navigation, focus moves to the question region and the position\n * is announced via an aria-live region.\n */\nexport function ActivitySequence({\n  activities,\n  renderers,\n  onActivityComplete,\n  onComplete,\n  onFinished,\n  onInteraction,\n  renderMode,\n  theme,\n  locale,\n  disabled,\n}: ActivitySequenceProps): React.JSX.Element {\n  const [index, setIndex] = useState(0);\n  const [outcomes, setOutcomes] = useState<(SequenceItemOutcome | null)[]>(() =>\n    activities.map(() => null),\n  );\n  const regionRef = useRef<HTMLDivElement>(null);\n  const mountedRef = useRef(false);\n\n  // Reset pager position and outcomes when the activity SET changes (B8):\n  // without this, results from the previous set leak into the new one and can\n  // fire completion with a mixed old/new array. Keyed on the set's CONTENT\n  // identity (ordered activity ids), not the array reference — a parent that\n  // re-creates a structurally identical array on every render (inline\n  // literals, .map() in render) must not wipe in-progress answers.\n  // JSON.stringify (not join) so ids containing the separator cannot collide.\n  const setKey = JSON.stringify(activities.map((activity) => activity.id));\n  const [prevSetKey, setPrevSetKey] = useState(setKey);\n  if (prevSetKey !== setKey) {\n    setPrevSetKey(setKey);\n    setIndex(0);\n    setOutcomes(activities.map(() => null));\n  }\n\n  // After a navigation (not the initial mount) move focus to the question\n  // region so screen-reader / keyboard users land on the new question.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: index is the intended trigger\n  useEffect(() => {\n    if (mountedRef.current) {\n      regionRef.current?.focus();\n    } else {\n      mountedRef.current = true;\n    }\n  }, [index]);\n\n  const total = activities.length;\n  const current = activities[index];\n\n  const go = (next: number): void => {\n    setIndex(next);\n  };\n\n  /**\n   * Records a finished slot and fires completion callbacks when the set is\n   * done. A slot that already holds an outcome is FINAL: re-recording it would\n   * fire completion a second time for one attempt, so a consumer persisting on\n   * `onFinished` would write the same attempt twice.\n   */\n  const record = (outcome: SequenceItemOutcome): void => {\n    if (outcomes[outcome.index] != null) {\n      return;\n    }\n    const next = outcomes.slice();\n    next[outcome.index] = outcome;\n    setOutcomes(next);\n\n    if (outcome.kind === 'scored') {\n      onActivityComplete?.(outcome.result, outcome.index);\n    }\n\n    if (!next.every((item): item is SequenceItemOutcome => item !== null)) {\n      return;\n    }\n    onFinished?.(next);\n\n    // `onComplete` predates deferred grading and promises ActivityResult[].\n    // Fire it only when every slot really was scored, rather than inventing a\n    // result for work nobody has graded.\n    const scored: ActivityResult[] = [];\n    for (const item of next) {\n      if (item.kind !== 'scored') {\n        return;\n      }\n      scored.push(item.result);\n    }\n    onComplete?.(scored);\n  };\n\n  if (!current) {\n    return <div className=\"lk-seq\" />;\n  }\n\n  const forwarded = {\n    ...(onInteraction ? { onInteraction } : {}),\n    ...(renderMode ? { renderMode } : {}),\n    ...(theme ? { theme } : {}),\n    ...(locale ? { locale } : {}),\n    ...(disabled ? { disabled } : {}),\n  };\n\n  const renderSlot = (activity: ActivityData, slotIndex: number): React.JSX.Element => {\n    const activityId = activity.id;\n    const childProps = {\n      onComplete: (result: ActivityResult) =>\n        record({ kind: 'scored', index: slotIndex, activityId, result }),\n      ...forwarded,\n    };\n\n    const CustomRenderer = renderers?.[activity.type];\n    if (CustomRenderer) {\n      return <CustomRenderer data={activity} {...childProps} />;\n    }\n    if (activity.type === 'multiple-choice') {\n      return <MultipleChoice data={activity} {...childProps} />;\n    }\n    if (activity.type === 'fill-in-the-blanks') {\n      return <FillInTheBlanks data={activity} {...childProps} />;\n    }\n    if (activity.type === 'written-response') {\n      return (\n        <WrittenResponse\n          data={activity}\n          onSubmitted={(submission) =>\n            record({ kind: 'submitted', index: slotIndex, activityId, submission })\n          }\n          {...forwarded}\n        />\n      );\n    }\n    return (\n      <div className=\"lk-seq-unsupported\" role=\"note\">\n        This activity type has no renderer. Supply one through the renderers prop.\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"lk-seq\" lang={locale}>\n      <div className=\"lk-seq-progress\" aria-live=\"polite\" role=\"status\">\n        Question {index + 1} of {total}\n      </div>\n\n      <section\n        className=\"lk-seq-question\"\n        ref={regionRef}\n        tabIndex={-1}\n        aria-label={`Question ${index + 1} of ${total}`}\n      >\n        {/*\n          Every slot stays MOUNTED; only the current one is visible. Rendering\n          just the current activity unmounted the others, so navigating back to\n          an answered question showed it blank and re-answerable — the learner\n          silently lost their answer and a second submit fired completion\n          again. `hidden` removes the inactive slots from the accessibility\n          tree and from tab order, so only the current question is reachable.\n        */}\n        {activities.map((activity, slotIndex) => {\n          // Slot POSITION is part of the key on purpose: the same activity may\n          // legitimately appear in two slots, and each must keep its own\n          // answer state. Computed here rather than inline so the intent is\n          // explicit rather than an accidental index-as-key.\n          const slotKey = `slot-${slotIndex}-${activity.id}`;\n          return (\n            <div className=\"lk-seq-slot\" hidden={slotIndex !== index} key={slotKey}>\n              {renderSlot(activity, slotIndex)}\n            </div>\n          );\n        })}\n      </section>\n\n      <div className=\"lk-seq-nav\">\n        <button\n          type=\"button\"\n          className=\"lk-seq-prev\"\n          onClick={() => go(index - 1)}\n          disabled={index === 0}\n        >\n          Previous\n        </button>\n        <button\n          type=\"button\"\n          className=\"lk-seq-next\"\n          onClick={() => go(index + 1)}\n          disabled={index === total - 1}\n        >\n          Next\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/{chunk-73XCWYKD.cjs → chunk-UXO6KYSZ.cjs}

@@ -27,55 +27,106 @@ function parsePassage(passage) {
   }
   return segments;
 }
+var NO_ANSWERS = {};
+function answersOf(response) {
+  return response !== void 0 && response.type === "fill-in-the-blanks" ? response.answers : NO_ANSWERS;
+}
+function correctnessByItem(details) {
+  const map = /* @__PURE__ */ new Map();
+  for (const detail of details) {
+    map.set(
+      detail.itemId,
+      detail.outcome !== void 0 ? detail.outcome === "correct" : detail.correct
+    );
+  }
+  return map;
+}
 function FillInTheBlanks({
   data,
   onComplete,
+  onSubmit,
+  onChange,
   onInteraction,
+  value,
+  defaultValue,
+  renderMode = "practice",
+  outcome,
+  sanitizeHtml,
   theme,
   locale,
   disabled,
   showCorrectAnswers
 }) {
+  const isExam = renderMode === "exam";
+  const isReview = renderMode === "review";
   const devError = react.useMemo(() => {
     if (!chunkQHOV2A6M_cjs.isDevelopment()) {
       return null;
     }
+    if (data.redacted === true) {
+      try {
+        lkCore.assertRedacted(data);
+        return null;
+      } catch (error) {
+        return error instanceof Error ? error : new Error(String(error));
+      }
+    }
     const result2 = lkCore.validateActivity("fill-in-the-blanks", data);
     return result2.success ? null : new lkCore.ActivitySchemaError("fill-in-the-blanks", result2.errors);
   }, [data]);
   const { state, start, complete, getTimeSpent, reset } = chunkHD2AIQRD_cjs.useActivityState();
-  const [answers, setAnswers] = react.useState({});
+  const isControlled = value !== void 0;
+  const [internalAnswers, setInternalAnswers] = react.useState(
+    () => answersOf(defaultValue)
+  );
   const [revealed, setRevealed] = react.useState(() => /* @__PURE__ */ new Set());
   const [result, setResult] = react.useState(null);
   const [summary, setSummary] = react.useState(null);
   const [feedbackHidden, setFeedbackHidden] = react.useState(false);
+  const answers = isControlled ? answersOf(value) : internalAnswers;
+  const defaultValueRef = react.useRef(defaultValue);
   react.useEffect(() => {
-    setAnswers({});
+    defaultValueRef.current = defaultValue;
+  }, [defaultValue]);
+  react.useEffect(() => {
+    setInternalAnswers(answersOf(defaultValueRef.current));
     setRevealed(/* @__PURE__ */ new Set());
     setResult(null);
     setSummary(null);
     setFeedbackHidden(false);
     reset();
   }, [data, reset]);
+  react.useEffect(() => {
+    if (chunkQHOV2A6M_cjs.isDevelopment() && sanitizeHtml !== void 0 && data.passageHtml !== void 0) {
+      console.warn(
+        "[lk-react] FillInTheBlanks ignores `passageHtml`: the passage hosts the answer inputs, so rich HTML cannot be split at {{placeholders}} without voiding the sanitiser. Rendering the plain `passage` instead."
+      );
+    }
+  }, [sanitizeHtml, data.passageHtml]);
   const segments = react.useMemo(() => parsePassage(data.passage), [data.passage]);
   const blankById = react.useMemo(() => new Map(data.blanks.map((b) => [b.id, b])), [data.blanks]);
   if (devError) {
     throw devError;
   }
   const submitted = state === "completed";
-  const inactive = disabled === true || submitted;
+  const inactive = disabled === true || submitted || isReview;
+  const revealing = isReview ? outcome?.status === "scored" : !isExam && submitted;
   const fireInteraction = (type, payload) => {
     onInteraction?.({ type, activityId: data.id, timestamp: Date.now(), payload });
   };
-  const handleChange = (blankId, value) => {
+  const handleChange = (blankId, text) => {
     if (inactive) {
       return;
     }
     if (state === "idle") {
       start();
     }
-    setAnswers((prev) => ({ ...prev, [blankId]: value }));
-    fireInteraction("blank-filled", { blankId, value });
+    const next = { ...answers, [blankId]: text };
+    if (!isControlled) {
+      setInternalAnswers(next);
+    }
+    onChange?.({ type: "fill-in-the-blanks", answers: next });
+    fireInteraction("blank-filled", { blankId, value: text });
   };
   const toggleHint = (blankId) => {
     if (inactive) {
@@ -103,6 +154,13 @@ function FillInTheBlanks({
       return;
     }
     const response = { type: "fill-in-the-blanks", answers };
+    onSubmit?.(response);
+    if (isExam) {
+      complete();
+      setSummary("Answer submitted.");
+      fireInteraction("submitted", { answers });
+      return;
+    }
     const scoringResult = lkCore.score("fill-in-the-blanks", data, response);
     complete();
     const timeSpent = getTimeSpent();
@@ -122,7 +180,7 @@ function FillInTheBlanks({
       response: JSON.stringify(answers)
     });
     setResult(scoringResult);
-    onComplete({
+    onComplete?.({
       score: scoringResult.score,
       maxScore: scoringResult.maxScore,
       passed: scoringResult.passed,
@@ -136,18 +194,30 @@ function FillInTheBlanks({
     fireInteraction("submitted", { answers, score: scoringResult.score });
   };
   const correctByBlank = react.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const detail of result?.details ?? []) {
-      map.set(detail.itemId, detail.correct);
+    if (isExam) {
+      return /* @__PURE__ */ new Map();
+    }
+    if (isReview) {
+      return outcome?.status === "scored" ? correctnessByItem(outcome.details) : /* @__PURE__ */ new Map();
+    }
+    return correctnessByItem(result?.details ?? []);
+  }, [isExam, isReview, outcome, result]);
+  const reviewSummary = react.useMemo(() => {
+    if (!isReview || outcome === void 0) {
+      return null;
+    }
+    if (outcome.status === "scored") {
+      return `Score ${Math.round(outcome.score * 100)}%. ${outcome.passed ? "Passed." : "Not passed."}${outcome.feedback ? ` ${outcome.feedback}` : ""}`;
     }
-    return map;
-  }, [result]);
+    return outcome.status === "deferred" ? "Not graded yet." : "No grade available.";
+  }, [isReview, outcome]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
       className: "lk-fib",
       "aria-label": data.title,
       lang: locale,
+      "data-render-mode": renderMode,
       style: theme,
       onSubmit: handleSubmit,
       children: [
@@ -161,10 +231,13 @@ function FillInTheBlanks({
             if (!blank) {
               return null;
             }
-            const isCorrect = correctByBlank.get(seg.id) === true;
+            const acceptedAnswers = isExam ? void 0 : blank.acceptedAnswers;
+            const blankFeedback = isExam ? void 0 : blank.feedback;
+            const correctness = correctByBlank.get(seg.id);
             const hintId = `${data.id}-hint-${seg.id}`;
-            if (submitted && showCorrectAnswers && !isCorrect) {
-              return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-fib-answer", "data-correct": "false", children: blank.acceptedAnswers[0] }, seg.id);
+            const correctAnswer = acceptedAnswers?.[0];
+            if (revealing && showCorrectAnswers && correctness === false && correctAnswer) {
+              return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-fib-answer", "data-correct": "false", children: correctAnswer }, seg.id);
             }
             return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-fib-blank", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -176,7 +249,7 @@ function FillInTheBlanks({
                   value: answers[seg.id] ?? "",
                   disabled: inactive,
                   "aria-disabled": inactive || void 0,
-                  "data-correct": submitted ? String(isCorrect) : void 0,
+                  "data-correct": revealing && correctness !== void 0 ? String(correctness) : void 0,
                   onChange: (e) => handleChange(seg.id, e.target.value)
                 }
               ),
@@ -213,20 +286,20 @@ function FillInTheBlanks({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { id: hintId, "aria-live": "polite", children: revealed.has(seg.id) ? blank.hint : "" })
               ] }) : null,
-              submitted && !feedbackHidden && blank.feedback ? /* @__PURE__ */ jsxRuntime.jsx(
+              revealing && !feedbackHidden && blankFeedback ? /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   className: "lk-fib-blank-feedback",
                   role: "note",
-                  "data-correct": String(isCorrect),
-                  children: blank.feedback
+                  "data-correct": correctness !== void 0 ? String(correctness) : void 0,
+                  children: blankFeedback
                 }
               ) : null
             ] }, seg.id);
           }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: inactive, children: "Check answers" })
+          isReview ? null : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: inactive, children: isExam ? "Submit answers" : "Check answers" })
         ] }),
-        submitted && data.blanks.some((b) => b.feedback) ? /* @__PURE__ */ jsxRuntime.jsx(
+        revealing && data.blanks.some((b) => b.feedback) ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -236,7 +309,7 @@ function FillInTheBlanks({
             children: feedbackHidden ? "Show feedback" : "Hide feedback"
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(chunkQHOV2A6M_cjs.FeedbackRegion, { id: `${data.id}-feedback`, children: summary })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkQHOV2A6M_cjs.FeedbackRegion, { id: `${data.id}-feedback`, children: isReview ? reviewSummary : summary })
       ]
     }
   );
@@ -246,5 +319,5 @@ function FillInTheBlanks2(props) {
 }
 
 exports.FillInTheBlanks = FillInTheBlanks2;
-//# sourceMappingURL=chunk-73XCWYKD.cjs.map
-//# sourceMappingURL=chunk-73XCWYKD.cjs.map
+//# sourceMappingURL=chunk-UXO6KYSZ.cjs.map
+//# sourceMappingURL=chunk-UXO6KYSZ.cjs.map