@lessonkit/react 1.3.0 → 1.3.1

package/dist/index.js

@@ -28,6 +28,44 @@ function createXapiQueueFromObservability(observability) {
   }
   return createInMemoryXAPIQueue(opts);
 }
+function wrapBatchSink(batchSink, observability) {
+  if (!batchSink || !observability?.onTelemetrySinkError) return batchSink;
+  const onError = observability.onTelemetrySinkError;
+  return async (events) => {
+    try {
+      await batchSink(events);
+    } catch (err) {
+      onError(err, { sinkId: "tracking-batch" });
+      throw err;
+    }
+  };
+}
+function warnMissingProductionObservability(observability, opts) {
+  let isProduction = false;
+  try {
+    isProduction = import.meta.env?.PROD === true;
+  } catch {
+  }
+  if (!isProduction) {
+    const g = globalThis;
+    isProduction = typeof g.process !== "undefined" && g.process.env?.NODE_ENV === "production";
+  }
+  if (!isProduction) return;
+  if (!opts.trackingEnabled && !opts.xapiEnabled) return;
+  const hooks = [
+    observability?.onTelemetrySinkError,
+    observability?.onTelemetryBufferDrop,
+    observability?.onXapiQueueDepth,
+    observability?.onXapiQueueCap,
+    observability?.onLxpackBridgeMiss
+  ];
+  if (hooks.some(Boolean)) return;
+  if (typeof console !== "undefined") {
+    console.warn(
+      "[lessonkit] Production deployment without observability hooks \u2014 telemetry/xAPI failures and buffer drops will be silent. See https://lessonkit.readthedocs.io/en/latest/guides/react-developers/production-checklist.html"
+    );
+  }
+}
 function wrapTrackingSink(sink, observability) {
   if (!sink || !observability?.onTelemetrySinkError) return sink;
   const onError = observability.onTelemetrySinkError;
@@ -169,6 +207,7 @@ function createXapiClientFromConfig(config, queue) {
   return createXAPIClient({
     courseId: config.courseId,
     transport: config.xapi?.transport,
+    exitTransport: config.xapi?.exitTransport,
     queue
   });
 }
@@ -228,6 +267,7 @@ async function emitCourseStartedNonTrackingPipeline(opts) {
     const statement = telemetryEventToXAPIStatement2(opts.event);
     if (statement) {
       opts.xapi.send(statement);
+      await opts.xapi.flush();
       xapiStatementSent = true;
     }
   }
@@ -263,7 +303,7 @@ function emitTelemetryWithPlugins(opts) {
 }
 
 // src/provider/courseStarted/emit.ts
-var courseStartedTrackingFlightKey = null;
+var courseStartedTrackingFlights = /* @__PURE__ */ new Map();
 function isTrackingActive(tracking) {
   return tracking?.enabled !== false;
 }
@@ -291,25 +331,40 @@ async function emitCourseStartedToTracking(tracking, storage, sessionId, courseI
   if (hasCourseStartedEmittedToTracking(storage, sessionId, courseId)) {
     return true;
   }
-  if (courseStartedTrackingFlightKey === flightKey) {
-    return false;
+  const existing = courseStartedTrackingFlights.get(flightKey);
+  if (existing) {
+    const settled = await existing;
+    if (settled) return true;
   }
-  courseStartedTrackingFlightKey = flightKey;
-  try {
-    if (shouldCommit && !shouldCommit()) return false;
-    tracking.track(event);
-    markCourseStartedEmittedToTracking(storage, sessionId, courseId);
-    const delivered = await tracking.flush?.();
-    if (delivered === false) return false;
-    if (shouldCommit && !shouldCommit()) return false;
-    return true;
-  } catch {
-    return false;
-  } finally {
-    if (courseStartedTrackingFlightKey === flightKey) {
-      courseStartedTrackingFlightKey = null;
+  let resolveFlight;
+  const flight = new Promise((resolve) => {
+    resolveFlight = resolve;
+  });
+  courseStartedTrackingFlights.set(flightKey, flight);
+  void (async () => {
+    try {
+      if (shouldCommit && !shouldCommit()) {
+        resolveFlight(false);
+        return;
+      }
+      tracking.track(event);
+      const delivered = await tracking.flush?.();
+      if (delivered === false) {
+        resolveFlight(false);
+        return;
+      }
+      if (markCourseStartedEmittedToTracking(storage, sessionId, courseId) === false) {
+        resolveFlight(false);
+        return;
+      }
+      resolveFlight(true);
+    } catch {
+      resolveFlight(false);
+    } finally {
+      courseStartedTrackingFlights.delete(flightKey);
     }
-  }
+  })();
+  return flight;
 }
 async function emitCourseStartedPipelineOnly(opts) {
   try {
@@ -323,8 +378,10 @@ async function emitCourseStartedPipelineOnly(opts) {
       skipXapi: opts.skipXapi
     });
     if (opts.shouldCommit && !opts.shouldCommit()) return "failed";
-    markCourseStarted(opts.storage, opts.sessionId, opts.courseId);
-    markCourseStartedPipelineDelivered(opts.storage, opts.sessionId, opts.courseId);
+    if (markCourseStarted(opts.storage, opts.sessionId, opts.courseId) === false) return "failed";
+    if (markCourseStartedPipelineDelivered(opts.storage, opts.sessionId, opts.courseId) === false) {
+      return "failed";
+    }
     if (xapiStatementSent) {
       opts.onXapiStatementSent?.();
     }
@@ -375,7 +432,9 @@ async function emitCourseStartedToTrackingOnly(opts) {
       extraSinks: opts.extraSinks,
       skipXapi: true
     });
-    markCourseStartedPipelineDelivered(opts.storage, opts.sessionId, opts.courseId);
+    if (markCourseStartedPipelineDelivered(opts.storage, opts.sessionId, opts.courseId) === false) {
+      return "failed";
+    }
     return "emitted";
   } catch {
     return "failed";
@@ -435,6 +494,7 @@ function createTrackingClientFromConfig(config, observability) {
     sink: config.tracking?.sink,
     batchSink: config.tracking?.batchSink,
     batch: config.tracking?.batch,
+    exitBatchSink: config.tracking?.exitBatchSink,
     onBufferDrop: observability?.onTelemetryBufferDrop
   });
 }
@@ -510,6 +570,7 @@ function useLessonkitProviderRuntime(config) {
   const pendingCourseIdResetRef = useRef(false);
   const prevUseV2RuntimeRef = useRef(useV2Runtime);
   const xapiCourseStartedSentOnClientRef = useRef(false);
+  const xapiBootstrapSendRef = useRef(false);
   if (prevUseV2RuntimeRef.current !== useV2Runtime) {
     prevUseV2RuntimeRef.current = useV2Runtime;
     if (useV2Runtime) {
@@ -582,19 +643,22 @@ function useLessonkitProviderRuntime(config) {
       xapiQueueRef.current = createXapiQueueFromObservability(observabilityRef.current);
       prevXapiCourseIdRef.current = courseId;
       xapiCourseStartedSentOnClientRef.current = false;
+      xapiBootstrapSendRef.current = false;
     }
     const prev = xapiRef.current;
     const next = createXapiClientFromConfig(normalizedConfig, xapiQueueRef.current);
     xapiRef.current = next;
     setXapi(next);
+    let bootstrapSent = false;
+    let bootstrapAlreadyStarted = false;
     if (next) {
       const sessionId = sessionIdRef.current;
       const cid = courseIdRef.current;
       const trackingActive = isTrackingActive(normalizedConfig.tracking);
-      const alreadyStarted = hasCourseStarted(defaultStorage, sessionId, cid);
+      bootstrapAlreadyStarted = hasCourseStarted(defaultStorage, sessionId, cid);
       const clientChanged = !prev || prev !== next;
-      const skipBootstrap = trackingActive && !alreadyStarted;
-      const needsBootstrap = !skipBootstrap && !xapiCourseStartedSentOnClientRef.current && (!alreadyStarted || clientChanged);
+      const skipBootstrap = trackingActive && !bootstrapAlreadyStarted;
+      const needsBootstrap = !skipBootstrap && !xapiCourseStartedSentOnClientRef.current && !xapiBootstrapSendRef.current && (!bootstrapAlreadyStarted || clientChanged);
       if (needsBootstrap) {
         try {
           const event = buildCourseStartedEvent({
@@ -605,15 +669,12 @@ function useLessonkitProviderRuntime(config) {
             user: userRef.current,
             lxpackBridge: lxpackBridgeModeRef.current
           });
-          if (event === null) {
-          } else {
+          if (event !== null) {
             const statement = telemetryEventToXAPIStatement3(event);
             if (statement) {
               next.send(statement);
-              if (!alreadyStarted) {
-                markCourseStarted(defaultStorage, sessionId, cid);
-              }
-              xapiCourseStartedSentOnClientRef.current = true;
+              xapiBootstrapSendRef.current = true;
+              bootstrapSent = true;
             }
           }
         } catch {
@@ -631,6 +692,12 @@ function useLessonkitProviderRuntime(config) {
       if (cancelled) return;
       try {
         await next?.flush();
+        if (bootstrapSent && !cancelled) {
+          if (!bootstrapAlreadyStarted) {
+            markCourseStarted(defaultStorage, sessionIdRef.current, courseIdRef.current);
+          }
+          xapiCourseStartedSentOnClientRef.current = true;
+        }
       } catch {
       }
     })();
@@ -659,7 +726,10 @@ function useLessonkitProviderRuntime(config) {
   useIsoLayoutEffect(() => {
     const prev = trackingRef.current;
     const baseSink = wrapTrackingSink(normalizedConfig.tracking?.sink, observabilityRef.current);
-    const userBatchSink = normalizedConfig.tracking?.batchSink;
+    const userBatchSink = wrapBatchSink(
+      normalizedConfig.tracking?.batchSink,
+      observabilityRef.current
+    );
     assertTrackingSinkConfig(normalizedConfig.tracking);
     const sink = pluginHostRef.current && baseSink ? (
       /* v8 ignore next -- composeTrackingSink may return null; fall back to base sink */
@@ -813,7 +883,11 @@ function useLessonkitProviderRuntime(config) {
           user: userRef.current,
           lxpackBridge: lxpackBridgeModeRef.current,
           onLxpackBridgeMiss,
-          extraSinks: extraSinksRef.current
+          extraSinks: extraSinksRef.current,
+          skipXapi: xapiCourseStartedSentOnClientRef.current,
+          onXapiStatementSent: () => {
+            xapiCourseStartedSentOnClientRef.current = true;
+          }
         });
         courseStartedEmittedToSinkRef.current = isCourseStartedSinkSettled(result);
       }
@@ -869,20 +943,39 @@ function useLessonkitProviderRuntime(config) {
   }, []);
   useEffect(() => {
     if (typeof document === "undefined") return;
-    const flushOnExit = () => {
-      void xapiRef.current?.flush();
-      void trackingRef.current?.flush?.();
+    const flushOnPageExit = () => {
+      try {
+        xapiRef.current?.flushOnExit?.();
+        trackingRef.current?.flushOnExit?.();
+      } finally {
+        void xapiRef.current?.flush();
+        void trackingRef.current?.flush?.();
+      }
     };
     const onVisibilityChange = () => {
-      if (document.visibilityState === "hidden") flushOnExit();
+      if (document.visibilityState === "hidden") flushOnPageExit();
     };
     document.addEventListener("visibilitychange", onVisibilityChange);
-    window.addEventListener("pagehide", flushOnExit);
+    window.addEventListener("pagehide", flushOnPageExit);
     return () => {
       document.removeEventListener("visibilitychange", onVisibilityChange);
-      window.removeEventListener("pagehide", flushOnExit);
+      window.removeEventListener("pagehide", flushOnPageExit);
     };
   }, []);
+  useEffect(() => {
+    warnMissingProductionObservability(observabilityRef.current, {
+      trackingEnabled: isTrackingActive(normalizedConfig.tracking),
+      xapiEnabled: normalizedConfig.xapi?.enabled !== false && Boolean(
+        normalizedConfig.xapi?.client || normalizedConfig.xapi?.transport || normalizedConfig.xapi?.enabled === true
+      )
+    });
+  }, [
+    normalizedConfig.tracking,
+    normalizedConfig.xapi?.enabled,
+    normalizedConfig.xapi?.client,
+    normalizedConfig.xapi?.transport,
+    normalizedConfig.observability
+  ]);
   const setActiveLesson = useCallback(
     (lessonId) => {
       if (useV2Runtime && headlessRef.current) {
@@ -2155,9 +2248,13 @@ function FillInTheBlanksInner(props, ref) {
   const [submitted, setSubmitted] = useState7(false);
   const completedRef = useRef8(false);
   const answeredRef = useRef8(false);
+  const checkSnapshotRef = useRef8(null);
+  const telemetryReplayedRef = useRef8(false);
   const reset = () => {
     completedRef.current = false;
     answeredRef.current = false;
+    checkSnapshotRef.current = null;
+    telemetryReplayedRef.current = false;
     setPassed(false);
     setValues(Object.fromEntries(blanks.map((b) => [b.id, ""])));
     setShowSolutions(false);
@@ -2174,6 +2271,31 @@ function FillInTheBlanksInner(props, ref) {
   });
   const maxScore = blanks.length;
   const passedThreshold = meetsPassingThreshold(score, maxScore || 1, props.passingScore);
+  const replayTelemetry = (nextValues, nextPassed, nextSubmitted, nextScore, nextMaxScore) => {
+    if (telemetryReplayedRef.current || !nextSubmitted && !nextPassed) return;
+    telemetryReplayedRef.current = true;
+    const nextPassedThreshold = meetsPassingThreshold(
+      nextScore,
+      nextMaxScore || 1,
+      props.passingScore
+    );
+    assessment.answer({
+      checkId,
+      interactionType: INTERACTION3,
+      question: props.template,
+      response: nextValues,
+      correct: nextPassedThreshold
+    });
+    if (nextPassed || nextPassedThreshold) {
+      assessment.complete({
+        checkId,
+        interactionType: INTERACTION3,
+        score: nextScore,
+        maxScore: nextMaxScore,
+        passingScore: props.passingScore ?? nextMaxScore
+      });
+    }
+  };
   const handle = useMemo9(
     () => buildAssessmentHandle({
       checkId,
@@ -2193,20 +2315,33 @@ function FillInTheBlanksInner(props, ref) {
       getCurrentState: () => ({ values, passed, showSolutions, submitted }),
       resume: (state) => {
         const raw = state.values;
-        if (raw && typeof raw === "object") setValues({ ...raw });
+        let nextValues = values;
+        if (raw && typeof raw === "object") {
+          nextValues = { ...raw };
+          setValues(nextValues);
+        }
+        let nextPassed = passed;
+        let nextSubmitted = submitted;
         readBooleanStateField(state, "passed", (value) => {
+          nextPassed = value;
           setPassed(value);
           completedRef.current = value;
           answeredRef.current = value;
         });
         readBooleanStateField(state, "showSolutions", setShowSolutions);
         readBooleanStateField(state, "submitted", (value) => {
+          nextSubmitted = value;
           setSubmitted(value);
           if (value) answeredRef.current = true;
         });
+        let nextScore = 0;
+        blanks.forEach((b) => {
+          if ((nextValues[b.id] ?? "").trim().toLowerCase() === b.answer.toLowerCase()) nextScore += 1;
+        });
+        replayTelemetry(nextValues, nextPassed, nextSubmitted, nextScore, blanks.length);
       }
     }),
-    [allFilled, checkId, maxScore, passed, passedThreshold, score, showSolutions, submitted, values]
+    [allFilled, assessment, blanks, checkId, maxScore, passed, passedThreshold, props.passingScore, props.template, score, showSolutions, submitted, values]
   );
   useAssessmentHandleRegistration(checkId, handle, ref);
   const check = () => {
@@ -2217,7 +2352,10 @@ function FillInTheBlanksInner(props, ref) {
       return;
     }
     if (!allFilled) return;
-    if (answeredRef.current || submitted) return;
+    if (passed) return;
+    const snapshot = JSON.stringify(values);
+    if (checkSnapshotRef.current === snapshot) return;
+    checkSnapshotRef.current = snapshot;
     answeredRef.current = true;
     setSubmitted(true);
     assessment.answer({
@@ -2242,12 +2380,13 @@ function FillInTheBlanksInner(props, ref) {
   useEffect7(() => {
     if (!allFilled) {
       answeredRef.current = false;
+      checkSnapshotRef.current = null;
       setSubmitted(false);
     }
   }, [allFilled]);
   useEffect7(() => {
-    if (props.autoCheck && allFilled) check();
-  }, [allFilled, props.autoCheck, values, passedThreshold]);
+    if (props.autoCheck && allFilled && !passed) check();
+  }, [allFilled, props.autoCheck, values, passedThreshold, passed]);
   const reveal = showSolutions || passed && props.enableSolutionsButton;
   return /* @__PURE__ */ jsxs6("section", { "aria-label": "Fill in the Blanks", "data-lk-check-id": checkId, children: [
     /* @__PURE__ */ jsx10("p", { children: parsed.parts.map((part, i) => {
@@ -2306,9 +2445,13 @@ function DragTheWordsInner(props, ref) {
   const [submitted, setSubmitted] = useState8(false);
   const completedRef = useRef9(false);
   const answeredRef = useRef9(false);
+  const checkSnapshotRef = useRef9(null);
+  const telemetryReplayedRef = useRef9(false);
   const reset = () => {
     completedRef.current = false;
     answeredRef.current = false;
+    checkSnapshotRef.current = null;
+    telemetryReplayedRef.current = false;
     setPassed(false);
     setSubmitted(false);
     setZones(Object.fromEntries(answers.map((_, i) => [`zone-${i}`, ""])));
@@ -2326,6 +2469,31 @@ function DragTheWordsInner(props, ref) {
   });
   const maxScore = answers.length;
   const passedThreshold = meetsPassingThreshold(score, maxScore || 1, props.passingScore);
+  const replayTelemetry = (nextZones, nextPassed, nextSubmitted, nextScore, nextMaxScore) => {
+    if (telemetryReplayedRef.current || !nextSubmitted && !nextPassed) return;
+    telemetryReplayedRef.current = true;
+    const nextPassedThreshold = meetsPassingThreshold(
+      nextScore,
+      nextMaxScore || 1,
+      props.passingScore
+    );
+    assessment.answer({
+      checkId,
+      interactionType: INTERACTION4,
+      question: props.template,
+      response: nextZones,
+      correct: nextPassedThreshold
+    });
+    if (nextPassed || nextPassedThreshold) {
+      assessment.complete({
+        checkId,
+        interactionType: INTERACTION4,
+        score: nextScore,
+        maxScore: nextMaxScore,
+        passingScore: props.passingScore ?? nextMaxScore
+      });
+    }
+  };
   const handle = useMemo10(
     () => buildAssessmentHandle({
       checkId,
@@ -2346,22 +2514,35 @@ function DragTheWordsInner(props, ref) {
       getCurrentState: () => ({ zones, pool, passed, keyboardWord, submitted }),
       resume: (state) => {
         const rawZones = state.zones;
-        if (rawZones && typeof rawZones === "object") setZones({ ...rawZones });
+        let nextZones = zones;
+        if (rawZones && typeof rawZones === "object") {
+          nextZones = { ...rawZones };
+          setZones(nextZones);
+        }
         if (Array.isArray(state.pool)) setPool([...state.pool]);
+        let nextPassed = passed;
+        let nextSubmitted = submitted;
         readBooleanStateField(state, "passed", (value) => {
+          nextPassed = value;
           setPassed(value);
           completedRef.current = value;
           answeredRef.current = value;
         });
         readBooleanStateField(state, "submitted", (value) => {
+          nextSubmitted = value;
           setSubmitted(value);
           if (value) answeredRef.current = true;
         });
         const kw = state.keyboardWord;
         if (kw === null || typeof kw === "string") setKeyboardWord(kw ?? null);
+        let nextScore = 0;
+        answers.forEach((ans, i) => {
+          if ((nextZones[`zone-${i}`] ?? "").trim().toLowerCase() === ans.toLowerCase()) nextScore += 1;
+        });
+        replayTelemetry(nextZones, nextPassed, nextSubmitted, nextScore, answers.length);
       }
     }),
-    [allFilled, checkId, keyboardWord, maxScore, passed, passedThreshold, pool, score, submitted, zones]
+    [allFilled, answers, assessment, checkId, keyboardWord, maxScore, passed, passedThreshold, pool, props.passingScore, props.template, score, submitted, zones]
   );
   useAssessmentHandleRegistration(checkId, handle, ref);
   const placeInZone = (zoneId, word) => {
@@ -2391,7 +2572,10 @@ function DragTheWordsInner(props, ref) {
       return;
     }
     if (!allFilled) return;
-    if (answeredRef.current || submitted) return;
+    if (passed) return;
+    const snapshot = JSON.stringify(zones);
+    if (checkSnapshotRef.current === snapshot) return;
+    checkSnapshotRef.current = snapshot;
     answeredRef.current = true;
     setSubmitted(true);
     assessment.answer({
@@ -2416,12 +2600,13 @@ function DragTheWordsInner(props, ref) {
   useEffect8(() => {
     if (!allFilled) {
       answeredRef.current = false;
+      checkSnapshotRef.current = null;
       setSubmitted(false);
     }
   }, [allFilled]);
   useEffect8(() => {
-    if (props.autoCheck && allFilled) check();
-  }, [allFilled, props.autoCheck, zones, passedThreshold]);
+    if (props.autoCheck && allFilled && !passed) check();
+  }, [allFilled, props.autoCheck, zones, passedThreshold, passed]);
   return /* @__PURE__ */ jsxs7("section", { "aria-label": "Drag the Words", "data-lk-check-id": checkId, children: [
     /* @__PURE__ */ jsx11("p", { children: "Drag words into the blanks (or select a word, then activate a blank)." }),
     /* @__PURE__ */ jsx11("div", { role: "list", "aria-label": "Word bank", "data-testid": "word-bank", children: pool.map((word) => /* @__PURE__ */ jsx11(
@@ -2826,6 +3011,8 @@ function useCompoundPersistence(opts) {
   }, [ctx, opts.index, opts.pageCount]);
   const buildStateRef = useRef12(buildState);
   buildStateRef.current = buildState;
+  const persistNowRef = useRef12(() => {
+  });
   const finalizeHydration = useCallback6(
     (childStates) => {
       loadedChildStatesRef.current = {
@@ -2834,6 +3021,7 @@ function useCompoundPersistence(opts) {
       };
       skipSaveUntilHydratedRef.current = false;
       pendingChildResumeRef.current = null;
+      queueMicrotask(() => persistNowRef.current());
     },
     []
   );
@@ -2846,6 +3034,14 @@ function useCompoundPersistence(opts) {
       alreadyResumed: resumedChildKeysRef.current
     });
     if (!applied) {
+      if (handles.size === 0) {
+        const registeredOnly2 = stripOrphanChildStates(handles, pending.childStates);
+        resumeChildHandles(handles, registeredOnly2, {
+          alreadyResumed: resumedChildKeysRef.current
+        });
+        finalizeHydration(registeredOnly2);
+        return;
+      }
       const handlesAtWait = handles.size;
       queueMicrotask(() => {
         if (pendingChildResumeRef.current !== pending) return;
@@ -2879,8 +3075,12 @@ function useCompoundPersistence(opts) {
   });
   const persistNow = useCallback6(() => {
     if (!opts.enabled || !opts.courseId) return;
+    if (skipSaveUntilHydratedRef.current) return;
     saveResume(buildStateRef.current());
   }, [opts.enabled, opts.courseId, saveResume]);
+  useEffect11(() => {
+    persistNowRef.current = persistNow;
+  }, [persistNow]);
   const notifyImperativeResume = useCallback6(
     (state) => {
       const clamped = clampCompoundPageIndex2(state.activePageIndex, opts.pageCount);
@@ -2902,12 +3102,12 @@ function useCompoundPersistence(opts) {
       }
     };
   }, [bridgeRef, notifyImperativeResume]);
-  useEffect11(() => {
-    persistNow();
-  }, [persistNow, opts.index, opts.pageCount, handlesVersion]);
   useEffect11(() => {
     applyPendingChildResume();
   }, [opts.index, handlesVersion, applyPendingChildResume]);
+  useEffect11(() => {
+    persistNow();
+  }, [persistNow, opts.index, opts.pageCount, handlesVersion]);
   useEffect11(() => {
     if (!opts.enabled || !opts.courseId || typeof document === "undefined") return;
     const flushOnExit = () => {
@@ -3847,20 +4047,41 @@ function ImageSlider(props) {
 setLessonkitBlockType(ImageSlider, "ImageSlider");
 
 // src/blocks/FindHotspot.tsx
-import { forwardRef as forwardRef10, useEffect as useEffect18, useMemo as useMemo16, useState as useState18 } from "react";
+import { forwardRef as forwardRef10, useEffect as useEffect18, useMemo as useMemo16, useRef as useRef15, useState as useState18 } from "react";
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var INTERACTION6 = "findHotspot";
 function FindHotspotInner(props, ref) {
   const checkId = useMemo16(() => normalizeComponentId(props.checkId, "checkId"), [props.checkId]);
   const [selected, setSelected] = useState18(null);
   const [checked, setChecked] = useState18(false);
+  const telemetryReplayedRef = useRef15(false);
   const assessment = useAssessmentState(props.enclosingLessonId);
   const targetIdsKey = props.targets.map((t) => t.id).join("\0");
   useEffect18(() => {
     setSelected(null);
     setChecked(false);
+    telemetryReplayedRef.current = false;
   }, [checkId, props.correctTargetId, targetIdsKey]);
   const correct = selected === props.correctTargetId;
+  const replayTelemetry = (nextSelected, nextChecked, nextCorrect) => {
+    if (telemetryReplayedRef.current || !nextChecked || nextSelected === null) return;
+    telemetryReplayedRef.current = true;
+    assessment.answer({
+      checkId,
+      interactionType: INTERACTION6,
+      response: nextSelected,
+      correct: nextCorrect
+    });
+    if (nextCorrect) {
+      assessment.complete({
+        checkId,
+        interactionType: INTERACTION6,
+        score: 1,
+        maxScore: 1,
+        passingScore: props.passingScore ?? 1
+      });
+    }
+  };
   const handle = useMemo16(
     () => buildAssessmentHandle({
       checkId,
@@ -3870,6 +4091,7 @@ function FindHotspotInner(props, ref) {
       resetTask: () => {
         setSelected(null);
         setChecked(false);
+        telemetryReplayedRef.current = false;
       },
       showSolutions: () => setSelected(props.correctTargetId),
       getXAPIData: () => ({
@@ -3882,15 +4104,23 @@ function FindHotspotInner(props, ref) {
       }),
       getCurrentState: () => ({ selected, checked }),
       resume: (state) => {
-        const nextSelected = readStringField(state, "selected");
-        if (typeof nextSelected === "string" || nextSelected === null) {
-          const valid = nextSelected === null || props.targets.some((t) => t.id === nextSelected);
-          setSelected(valid ? nextSelected : null);
+        let nextSelected = selected;
+        const rawSelected = readStringField(state, "selected");
+        if (typeof rawSelected === "string" || rawSelected === null) {
+          const valid = rawSelected === null || props.targets.some((t) => t.id === rawSelected);
+          nextSelected = valid ? rawSelected : null;
+          setSelected(nextSelected);
         }
-        readBooleanStateField(state, "checked", setChecked);
+        let nextChecked = checked;
+        readBooleanStateField(state, "checked", (value) => {
+          nextChecked = value;
+          setChecked(value);
+        });
+        const nextCorrect = nextSelected === props.correctTargetId;
+        replayTelemetry(nextSelected, nextChecked, nextCorrect);
       }
     }),
-    [checkId, selected, checked, correct, props.correctTargetId, props.targets]
+    [assessment, checkId, checked, correct, props.correctTargetId, props.passingScore, props.targets, selected]
   );
   useAssessmentHandleRegistration(checkId, handle, ref);
   const selectTarget = (id) => {
@@ -4067,7 +4297,7 @@ import React29, {
   useContext as useContext8,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo18,
-  useRef as useRef15,
+  useRef as useRef16,
   useState as useState20
 } from "react";
 import {
@@ -4139,8 +4369,8 @@ function ThemeProvider(props) {
     const base = preset === "default" ? modeBase : preset === "brand" ? mergeThemes(modeBase, brandThemeOverrides) : mergeThemes(modeBase, getPresetTheme(preset));
     return mergeThemes(base, props.theme ?? {});
   }, [preset, mode, dataTheme, props.theme]);
-  const hostRef = useRef15(null);
-  const appliedKeysRef = useRef15(/* @__PURE__ */ new Set());
+  const hostRef = useRef16(null);
+  const appliedKeysRef = useRef16(/* @__PURE__ */ new Set());
   useIsoLayoutEffect2(() => {
     if (targetKind === "document" && typeof document !== "undefined") {
       document.documentElement.setAttribute("data-lk-theme", dataTheme);