@lessonkit/react 0.5.0 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # `@lessonkit/react`
 
-[![CI](https://github.com/eddiethedean/lessonkit/actions/workflows/checks.yml/badge.svg)](https://github.com/eddiethedean/lessonkit/actions/workflows/checks.yml)
+[![CI](https://github.com/eddiethedean/lessonkit/actions/workflows/ci.yml/badge.svg)](https://github.com/eddiethedean/lessonkit/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/@lessonkit/react.svg)](https://www.npmjs.com/package/@lessonkit/react)
 [![License](https://img.shields.io/github/license/eddiethedean/lessonkit)](../../LICENSE)
 
@@ -56,7 +56,7 @@ export default function App() {
 }
 ```
 
-## API (0.5.0)
+## API (0.6.0)
 
 ### Components
 
@@ -87,6 +87,8 @@ export default function App() {
 - `Course` accepts a `config` prop that is passed through to `LessonkitProvider` (tracking sink,
   optional `xapi.transport` or custom `xapi.client`, session metadata). Hoist `config` with `useMemo`
   so tracking/xAPI clients are not recreated every render.
+- xAPI is enabled by default unless `xapi.enabled: false`. Provide `xapi.transport` or `xapi.client`
+  or statements are queued in memory and never sent (dev warns once).
 - A lesson is marked complete when its `<Lesson>` unmounts (for example, wizard navigation) or when
   another lesson becomes active via `setActiveLesson`. Use stable `lessonId` values so completion and
   time-on-task telemetry stay consistent.

package/dist/index.cjs

@@ -56,16 +56,61 @@ var import_accessibility = require("@lessonkit/accessibility");
 var import_react = require("react");
 var import_core3 = require("@lessonkit/core");
 var import_xapi3 = require("@lessonkit/xapi");
+var import_xapi4 = require("@lessonkit/xapi");
 
 // src/runtime/emitTelemetry.ts
 var import_core = require("@lessonkit/core");
 var import_xapi = require("@lessonkit/xapi");
+
+// src/runtime/lxpackBridge.ts
+var import_bridge = require("@lessonkit/lxpack/bridge");
+function getBridge() {
+  if (typeof window === "undefined") return null;
+  const parent = window.parent;
+  if (!parent || parent === window) return null;
+  return parent.lxpackBridge?.v1 ?? parent.lxpack ?? null;
+}
+function forwardTelemetryToLxpack(event, mode = "auto") {
+  if (mode === "off") return;
+  const bridge = getBridge();
+  if (!bridge) return;
+  switch (event.name) {
+    case "lesson_completed": {
+      const lessonId = event.lessonId;
+      if (lessonId) bridge.completeLesson?.(lessonId);
+      return;
+    }
+    case "course_completed":
+      bridge.completeCourse?.();
+      return;
+    case "quiz_completed": {
+      const data = event.data;
+      if (!data?.checkId) return;
+      const scaled = (0, import_bridge.normalizeAssessmentScore)({
+        score: data.score,
+        maxScore: data.maxScore
+      });
+      if (scaled === null) return;
+      bridge.submitAssessment?.({
+        id: data.checkId,
+        score: scaled,
+        passingScore: (0, import_bridge.normalizeAssessmentPassingScore)(data.passingScore)
+      });
+      return;
+    }
+    default:
+      return;
+  }
+}
+
+// src/runtime/emitTelemetry.ts
 var warnedMissingCourseId = false;
+var warnedMissingQuizLesson = false;
 function isDevEnvironment() {
   const g = globalThis;
   return typeof g.process !== "undefined" && g.process.env?.NODE_ENV !== "production";
 }
-function emitTelemetry(tracking, xapi, event) {
+function emitTelemetry(tracking, xapi, event, opts) {
   if (!event.courseId) {
     if (isDevEnvironment() && !warnedMissingCourseId) {
       warnedMissingCourseId = true;
@@ -82,6 +127,7 @@ function emitTelemetry(tracking, xapi, event) {
       console.warn("[lessonkit] xAPI mapping skipped:", err instanceof Error ? err.message : err);
     }
   }
+  forwardTelemetryToLxpack(event, opts?.lxpackBridge ?? "auto");
 }
 function buildTrackEvent(opts) {
   const base = {
@@ -104,7 +150,7 @@ function buildTrackEvent(opts) {
         name: "lesson_started",
         ...base,
         lessonId,
-        data: { lessonId, ...data }
+        data: { ...data, lessonId }
       };
     }
     case "lesson_completed":
@@ -116,7 +162,7 @@ function buildTrackEvent(opts) {
         name: opts.name,
         ...base,
         lessonId,
-        data: { lessonId, ...data }
+        data: { ...data, lessonId }
       };
     }
     case "quiz_answered": {
@@ -142,6 +188,19 @@ function buildTrackEvent(opts) {
       return { name: opts.name, ...base };
   }
 }
+function tryBuildTrackEvent(opts) {
+  const isQuiz = opts.name === "quiz_answered" || opts.name === "quiz_completed";
+  if (isQuiz && !opts.lessonId) {
+    if (isDevEnvironment() && !warnedMissingQuizLesson) {
+      warnedMissingQuizLesson = true;
+      console.warn(
+        `[lessonkit] ${opts.name} skipped: wrap <Quiz> in <Lesson> so an active lessonId is available`
+      );
+    }
+    return null;
+  }
+  return buildTrackEvent(opts);
+}
 
 // src/runtime/ports.ts
 function createNoopStorage() {
@@ -191,6 +250,9 @@ function createProgressController() {
     completeLesson: (lessonId, completedAtMs) => {
       if (completedLessonIds.has(lessonId)) return { didComplete: false };
       completedLessonIds = new Set(completedLessonIds).add(lessonId);
+      if (activeLessonId === lessonId) {
+        activeLessonId = void 0;
+      }
       const startedAt = lessonStartTimes.get(lessonId);
       lessonStartTimes.delete(lessonId);
       const durationMs = typeof startedAt === "number" ? Math.max(0, completedAtMs - startedAt) : void 0;
@@ -270,6 +332,8 @@ function LessonkitProvider(props) {
   userRef.current = config.session?.user;
   const courseIdRef = (0, import_react.useRef)(config.courseId);
   courseIdRef.current = config.courseId;
+  const lxpackBridgeModeRef = (0, import_react.useRef)(config.lxpack?.bridge ?? "auto");
+  lxpackBridgeModeRef.current = config.lxpack?.bridge ?? "auto";
   const progressRef = (0, import_react.useRef)(createProgressController());
   const [progress, setProgress] = (0, import_react.useState)(() => progressRef.current.getState());
   const syncProgress = (0, import_react.useCallback)(() => {
@@ -277,6 +341,53 @@ function LessonkitProvider(props) {
   }, []);
   const activeLessonIdRef = (0, import_react.useRef)(progress.activeLessonId);
   activeLessonIdRef.current = progress.activeLessonId;
+  const xapiQueueRef = (0, import_react.useRef)((0, import_xapi3.createInMemoryXAPIQueue)());
+  const xapiRef = (0, import_react.useRef)(null);
+  const [xapi, setXapi] = (0, import_react.useState)(null);
+  const xapiEnabled = config.xapi?.enabled;
+  const xapiClient = config.xapi?.client;
+  const xapiTransport = config.xapi?.transport;
+  const courseId = config.courseId;
+  useIsoLayoutEffect(() => {
+    const prev = xapiRef.current;
+    const next = createXapiClientFromConfig(config, xapiQueueRef.current);
+    xapiRef.current = next;
+    setXapi(next);
+    if (next && !prev) {
+      const sessionId = sessionIdRef.current;
+      const cid = courseIdRef.current;
+      if (hasCourseStarted(defaultStorage, sessionId, cid)) {
+        try {
+          const statement = (0, import_xapi4.telemetryEventToXAPIStatement)(
+            buildTrackEvent({
+              name: "course_started",
+              courseId: cid,
+              sessionId,
+              attemptId: attemptIdRef.current,
+              user: userRef.current
+            })
+          );
+          if (statement) next.send(statement);
+        } catch {
+        }
+      }
+    }
+    void (async () => {
+      if (prev) {
+        try {
+          await prev.flush();
+        } catch {
+        }
+      }
+      try {
+        await next?.flush();
+      } catch {
+      }
+    })();
+    return () => {
+      void prev?.flush();
+    };
+  }, [xapiEnabled, xapiClient, xapiTransport, courseId]);
   const trackingRef = (0, import_react.useRef)((0, import_core3.createTrackingClient)());
   const [tracking, setTracking] = (0, import_react.useState)(() => trackingRef.current);
   const trackingEnabled = config.tracking?.enabled;
@@ -303,11 +414,14 @@ function LessonkitProvider(props) {
           sessionId,
           attemptId: attemptIdRef.current,
           user: userRef.current
-        })
+        }),
+        { lxpackBridge: lxpackBridgeModeRef.current }
       );
     }
     return () => {
-      disposeTrackingClient(prev);
+      if (prev !== trackingRef.current) {
+        disposeTrackingClient(prev);
+      }
     };
   }, [
     trackingEnabled,
@@ -317,37 +431,17 @@ function LessonkitProvider(props) {
     batchFlushIntervalMs,
     batchMaxBatchSize
   ]);
-  const xapiQueueRef = (0, import_react.useRef)((0, import_xapi3.createInMemoryXAPIQueue)());
-  const xapiRef = (0, import_react.useRef)(null);
-  const [xapi, setXapi] = (0, import_react.useState)(null);
-  const xapiEnabled = config.xapi?.enabled;
-  const xapiClient = config.xapi?.client;
-  const xapiTransport = config.xapi?.transport;
-  const courseId = config.courseId;
-  useIsoLayoutEffect(() => {
-    const prev = xapiRef.current;
-    const next = createXapiClientFromConfig(config, xapiQueueRef.current);
-    xapiRef.current = next;
-    setXapi(next);
-    void (async () => {
-      if (prev) {
-        try {
-          await prev.flush();
-        } catch {
-        }
-      }
-      try {
-        await next?.flush();
-      } catch {
-      }
-    })();
-    return () => {
-      void prev?.flush();
-    };
-  }, [xapiEnabled, xapiClient, xapiTransport, courseId]);
+  const emitWithBridge = (0, import_react.useCallback)(
+    (trackingClient, event) => {
+      emitTelemetry(trackingClient, xapiRef.current, event, {
+        lxpackBridge: lxpackBridgeModeRef.current
+      });
+    },
+    []
+  );
   const track = (0, import_react.useCallback)(
     (name, data, opts) => {
-      const event = buildTrackEvent({
+      const event = tryBuildTrackEvent({
         name,
         courseId: courseIdRef.current,
         lessonId: opts?.lessonId ?? activeLessonIdRef.current,
@@ -356,16 +450,41 @@ function LessonkitProvider(props) {
         user: userRef.current,
         data
       });
-      emitTelemetry(trackingRef.current, xapiRef.current, event);
+      if (!event) return;
+      emitWithBridge(trackingRef.current, event);
     },
-    []
+    [emitWithBridge]
   );
+  const prevCourseIdRef = (0, import_react.useRef)(config.courseId);
   (0, import_react.useEffect)(() => {
-    return () => {
-      trackingRef.current?.flush?.();
-      void xapiRef.current?.flush();
-    };
-  }, []);
+    if (prevCourseIdRef.current === config.courseId) return;
+    const previousActiveLesson = progressRef.current.getState().activeLessonId;
+    prevCourseIdRef.current = config.courseId;
+    progressRef.current = createProgressController();
+    syncProgress();
+    if (previousActiveLesson) {
+      progressRef.current.setActiveLesson(previousActiveLesson, Date.now());
+      syncProgress();
+      track("lesson_started", { lessonId: previousActiveLesson }, { lessonId: previousActiveLesson });
+    }
+    const sessionId = sessionIdRef.current;
+    const cid = config.courseId;
+    if (!hasCourseStarted(defaultStorage, sessionId, cid)) {
+      markCourseStarted(defaultStorage, sessionId, cid);
+      emitTelemetry(
+        trackingRef.current,
+        xapiRef.current,
+        buildTrackEvent({
+          name: "course_started",
+          courseId: cid,
+          sessionId,
+          attemptId: attemptIdRef.current,
+          user: userRef.current
+        }),
+        { lxpackBridge: lxpackBridgeModeRef.current }
+      );
+    }
+  }, [config.courseId, syncProgress, track]);
   const emitLessonCompleted = (0, import_react.useCallback)(
     (lessonId, durationMs) => {
       track("lesson_completed", { lessonId, durationMs }, { lessonId });
@@ -381,9 +500,22 @@ function LessonkitProvider(props) {
       if (!result.didComplete) return;
       syncProgress();
       emitLessonCompleted(lessonId, result.durationMs);
+      void trackingRef.current?.flush?.();
     },
     [syncProgress, emitLessonCompleted]
   );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      const client = trackingRef.current;
+      void xapiRef.current?.flush();
+      setTimeout(() => {
+        client?.flush?.();
+        setTimeout(() => {
+          client?.dispose?.();
+        }, 0);
+      }, 0);
+    };
+  }, []);
   const setActiveLesson = (0, import_react.useCallback)(
     (lessonId) => {
       const current = progressRef.current.getState();
@@ -407,6 +539,9 @@ function LessonkitProvider(props) {
     syncProgress();
     track("course_completed");
   }, [track, syncProgress]);
+  const sessionUser = config.session?.user;
+  const sessionAttemptId = config.session?.attemptId;
+  const sessionConfiguredId = config.session?.sessionId;
   const runtime = (0, import_react.useMemo)(
     () => ({
       config,
@@ -419,7 +554,19 @@ function LessonkitProvider(props) {
       completeCourse,
       track
     }),
-    [config, tracking, xapi, progress, setActiveLesson, completeLesson, completeCourse, track]
+    [
+      config,
+      tracking,
+      xapi,
+      progress,
+      setActiveLesson,
+      completeLesson,
+      completeCourse,
+      track,
+      sessionUser,
+      sessionAttemptId,
+      sessionConfiguredId
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LessonkitContext.Provider, { value: runtime, children: props.children });
 }
@@ -491,24 +638,21 @@ function Course(props) {
 }
 function Lesson(props) {
   warnInvalidComponentId(props.lessonId, "lessonId");
-  const { setActiveLesson } = useLessonkit();
+  const { setActiveLesson, config } = useLessonkit();
   const { completeLesson } = useCompletion();
   const id = props.lessonId;
-  const pendingCompleteRef = (0, import_react3.useRef)(null);
+  const lessonMountGenerationRef = (0, import_react3.useRef)(0);
   (0, import_react3.useEffect)(() => {
-    if (pendingCompleteRef.current !== null) {
-      clearTimeout(pendingCompleteRef.current);
-      pendingCompleteRef.current = null;
-    }
+    const generation = ++lessonMountGenerationRef.current;
     setActiveLesson(id);
     return () => {
       const lessonId = id;
-      pendingCompleteRef.current = setTimeout(() => {
-        pendingCompleteRef.current = null;
+      queueMicrotask(() => {
+        if (lessonMountGenerationRef.current !== generation) return;
         completeLesson(lessonId);
-      }, 0);
+      });
     };
-  }, [id, setActiveLesson, completeLesson]);
+  }, [id, config.courseId, setActiveLesson, completeLesson]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { "aria-label": props.title, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: props.title }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: props.children })
@@ -573,7 +717,7 @@ function Quiz(props) {
               });
               if (correct && !completedRef.current) {
                 completedRef.current = true;
-                quiz.complete({ checkId: props.checkId, score: 1, maxScore: 1 });
+                quiz.complete({ checkId: props.checkId, score: 1, maxScore: 1, passingScore: 1 });
               }
             }
           }

package/dist/index.d.cts

@@ -34,6 +34,10 @@ type LessonkitConfig = {
         transport?: XAPITransport;
         client?: XAPIClient;
     };
+    lxpack?: {
+        /** Forward completion events to `window.parent.lxpackBridge.v1` when embedded (default `auto`). */
+        bridge?: "auto" | "off";
+    };
 };
 
 type LessonkitRuntime = {
@@ -114,6 +118,7 @@ declare function useQuizState(): {
         checkId: CheckId;
         score?: number;
         maxScore?: number;
+        passingScore?: number;
     }) => void;
 };
 

package/dist/index.d.ts

@@ -34,6 +34,10 @@ type LessonkitConfig = {
         transport?: XAPITransport;
         client?: XAPIClient;
     };
+    lxpack?: {
+        /** Forward completion events to `window.parent.lxpackBridge.v1` when embedded (default `auto`). */
+        bridge?: "auto" | "off";
+    };
 };
 
 type LessonkitRuntime = {
@@ -114,6 +118,7 @@ declare function useQuizState(): {
         checkId: CheckId;
         score?: number;
         maxScore?: number;
+        passingScore?: number;
     }) => void;
 };
 

package/dist/index.js

@@ -14,16 +14,64 @@ import {
 } from "react";
 import { createTrackingClient } from "@lessonkit/core";
 import { createInMemoryXAPIQueue } from "@lessonkit/xapi";
+import { telemetryEventToXAPIStatement as telemetryEventToXAPIStatement2 } from "@lessonkit/xapi";
 
 // src/runtime/emitTelemetry.ts
 import { nowIso } from "@lessonkit/core";
 import { telemetryEventToXAPIStatement } from "@lessonkit/xapi";
+
+// src/runtime/lxpackBridge.ts
+import {
+  normalizeAssessmentPassingScore,
+  normalizeAssessmentScore
+} from "@lessonkit/lxpack/bridge";
+function getBridge() {
+  if (typeof window === "undefined") return null;
+  const parent = window.parent;
+  if (!parent || parent === window) return null;
+  return parent.lxpackBridge?.v1 ?? parent.lxpack ?? null;
+}
+function forwardTelemetryToLxpack(event, mode = "auto") {
+  if (mode === "off") return;
+  const bridge = getBridge();
+  if (!bridge) return;
+  switch (event.name) {
+    case "lesson_completed": {
+      const lessonId = event.lessonId;
+      if (lessonId) bridge.completeLesson?.(lessonId);
+      return;
+    }
+    case "course_completed":
+      bridge.completeCourse?.();
+      return;
+    case "quiz_completed": {
+      const data = event.data;
+      if (!data?.checkId) return;
+      const scaled = normalizeAssessmentScore({
+        score: data.score,
+        maxScore: data.maxScore
+      });
+      if (scaled === null) return;
+      bridge.submitAssessment?.({
+        id: data.checkId,
+        score: scaled,
+        passingScore: normalizeAssessmentPassingScore(data.passingScore)
+      });
+      return;
+    }
+    default:
+      return;
+  }
+}
+
+// src/runtime/emitTelemetry.ts
 var warnedMissingCourseId = false;
+var warnedMissingQuizLesson = false;
 function isDevEnvironment() {
   const g = globalThis;
   return typeof g.process !== "undefined" && g.process.env?.NODE_ENV !== "production";
 }
-function emitTelemetry(tracking, xapi, event) {
+function emitTelemetry(tracking, xapi, event, opts) {
   if (!event.courseId) {
     if (isDevEnvironment() && !warnedMissingCourseId) {
       warnedMissingCourseId = true;
@@ -40,6 +88,7 @@ function emitTelemetry(tracking, xapi, event) {
       console.warn("[lessonkit] xAPI mapping skipped:", err instanceof Error ? err.message : err);
     }
   }
+  forwardTelemetryToLxpack(event, opts?.lxpackBridge ?? "auto");
 }
 function buildTrackEvent(opts) {
   const base = {
@@ -62,7 +111,7 @@ function buildTrackEvent(opts) {
         name: "lesson_started",
         ...base,
         lessonId,
-        data: { lessonId, ...data }
+        data: { ...data, lessonId }
       };
     }
     case "lesson_completed":
@@ -74,7 +123,7 @@ function buildTrackEvent(opts) {
         name: opts.name,
         ...base,
         lessonId,
-        data: { lessonId, ...data }
+        data: { ...data, lessonId }
       };
     }
     case "quiz_answered": {
@@ -100,6 +149,19 @@ function buildTrackEvent(opts) {
       return { name: opts.name, ...base };
   }
 }
+function tryBuildTrackEvent(opts) {
+  const isQuiz = opts.name === "quiz_answered" || opts.name === "quiz_completed";
+  if (isQuiz && !opts.lessonId) {
+    if (isDevEnvironment() && !warnedMissingQuizLesson) {
+      warnedMissingQuizLesson = true;
+      console.warn(
+        `[lessonkit] ${opts.name} skipped: wrap <Quiz> in <Lesson> so an active lessonId is available`
+      );
+    }
+    return null;
+  }
+  return buildTrackEvent(opts);
+}
 
 // src/runtime/ports.ts
 function createNoopStorage() {
@@ -149,6 +211,9 @@ function createProgressController() {
     completeLesson: (lessonId, completedAtMs) => {
       if (completedLessonIds.has(lessonId)) return { didComplete: false };
       completedLessonIds = new Set(completedLessonIds).add(lessonId);
+      if (activeLessonId === lessonId) {
+        activeLessonId = void 0;
+      }
       const startedAt = lessonStartTimes.get(lessonId);
       lessonStartTimes.delete(lessonId);
       const durationMs = typeof startedAt === "number" ? Math.max(0, completedAtMs - startedAt) : void 0;
@@ -228,6 +293,8 @@ function LessonkitProvider(props) {
   userRef.current = config.session?.user;
   const courseIdRef = useRef(config.courseId);
   courseIdRef.current = config.courseId;
+  const lxpackBridgeModeRef = useRef(config.lxpack?.bridge ?? "auto");
+  lxpackBridgeModeRef.current = config.lxpack?.bridge ?? "auto";
   const progressRef = useRef(createProgressController());
   const [progress, setProgress] = useState(() => progressRef.current.getState());
   const syncProgress = useCallback(() => {
@@ -235,6 +302,53 @@ function LessonkitProvider(props) {
   }, []);
   const activeLessonIdRef = useRef(progress.activeLessonId);
   activeLessonIdRef.current = progress.activeLessonId;
+  const xapiQueueRef = useRef(createInMemoryXAPIQueue());
+  const xapiRef = useRef(null);
+  const [xapi, setXapi] = useState(null);
+  const xapiEnabled = config.xapi?.enabled;
+  const xapiClient = config.xapi?.client;
+  const xapiTransport = config.xapi?.transport;
+  const courseId = config.courseId;
+  useIsoLayoutEffect(() => {
+    const prev = xapiRef.current;
+    const next = createXapiClientFromConfig(config, xapiQueueRef.current);
+    xapiRef.current = next;
+    setXapi(next);
+    if (next && !prev) {
+      const sessionId = sessionIdRef.current;
+      const cid = courseIdRef.current;
+      if (hasCourseStarted(defaultStorage, sessionId, cid)) {
+        try {
+          const statement = telemetryEventToXAPIStatement2(
+            buildTrackEvent({
+              name: "course_started",
+              courseId: cid,
+              sessionId,
+              attemptId: attemptIdRef.current,
+              user: userRef.current
+            })
+          );
+          if (statement) next.send(statement);
+        } catch {
+        }
+      }
+    }
+    void (async () => {
+      if (prev) {
+        try {
+          await prev.flush();
+        } catch {
+        }
+      }
+      try {
+        await next?.flush();
+      } catch {
+      }
+    })();
+    return () => {
+      void prev?.flush();
+    };
+  }, [xapiEnabled, xapiClient, xapiTransport, courseId]);
   const trackingRef = useRef(createTrackingClient());
   const [tracking, setTracking] = useState(() => trackingRef.current);
   const trackingEnabled = config.tracking?.enabled;
@@ -261,11 +375,14 @@ function LessonkitProvider(props) {
           sessionId,
           attemptId: attemptIdRef.current,
           user: userRef.current
-        })
+        }),
+        { lxpackBridge: lxpackBridgeModeRef.current }
       );
     }
     return () => {
-      disposeTrackingClient(prev);
+      if (prev !== trackingRef.current) {
+        disposeTrackingClient(prev);
+      }
     };
   }, [
     trackingEnabled,
@@ -275,37 +392,17 @@ function LessonkitProvider(props) {
     batchFlushIntervalMs,
     batchMaxBatchSize
   ]);
-  const xapiQueueRef = useRef(createInMemoryXAPIQueue());
-  const xapiRef = useRef(null);
-  const [xapi, setXapi] = useState(null);
-  const xapiEnabled = config.xapi?.enabled;
-  const xapiClient = config.xapi?.client;
-  const xapiTransport = config.xapi?.transport;
-  const courseId = config.courseId;
-  useIsoLayoutEffect(() => {
-    const prev = xapiRef.current;
-    const next = createXapiClientFromConfig(config, xapiQueueRef.current);
-    xapiRef.current = next;
-    setXapi(next);
-    void (async () => {
-      if (prev) {
-        try {
-          await prev.flush();
-        } catch {
-        }
-      }
-      try {
-        await next?.flush();
-      } catch {
-      }
-    })();
-    return () => {
-      void prev?.flush();
-    };
-  }, [xapiEnabled, xapiClient, xapiTransport, courseId]);
+  const emitWithBridge = useCallback(
+    (trackingClient, event) => {
+      emitTelemetry(trackingClient, xapiRef.current, event, {
+        lxpackBridge: lxpackBridgeModeRef.current
+      });
+    },
+    []
+  );
   const track = useCallback(
     (name, data, opts) => {
-      const event = buildTrackEvent({
+      const event = tryBuildTrackEvent({
         name,
         courseId: courseIdRef.current,
         lessonId: opts?.lessonId ?? activeLessonIdRef.current,
@@ -314,16 +411,41 @@ function LessonkitProvider(props) {
         user: userRef.current,
         data
       });
-      emitTelemetry(trackingRef.current, xapiRef.current, event);
+      if (!event) return;
+      emitWithBridge(trackingRef.current, event);
     },
-    []
+    [emitWithBridge]
   );
+  const prevCourseIdRef = useRef(config.courseId);
   useEffect(() => {
-    return () => {
-      trackingRef.current?.flush?.();
-      void xapiRef.current?.flush();
-    };
-  }, []);
+    if (prevCourseIdRef.current === config.courseId) return;
+    const previousActiveLesson = progressRef.current.getState().activeLessonId;
+    prevCourseIdRef.current = config.courseId;
+    progressRef.current = createProgressController();
+    syncProgress();
+    if (previousActiveLesson) {
+      progressRef.current.setActiveLesson(previousActiveLesson, Date.now());
+      syncProgress();
+      track("lesson_started", { lessonId: previousActiveLesson }, { lessonId: previousActiveLesson });
+    }
+    const sessionId = sessionIdRef.current;
+    const cid = config.courseId;
+    if (!hasCourseStarted(defaultStorage, sessionId, cid)) {
+      markCourseStarted(defaultStorage, sessionId, cid);
+      emitTelemetry(
+        trackingRef.current,
+        xapiRef.current,
+        buildTrackEvent({
+          name: "course_started",
+          courseId: cid,
+          sessionId,
+          attemptId: attemptIdRef.current,
+          user: userRef.current
+        }),
+        { lxpackBridge: lxpackBridgeModeRef.current }
+      );
+    }
+  }, [config.courseId, syncProgress, track]);
   const emitLessonCompleted = useCallback(
     (lessonId, durationMs) => {
       track("lesson_completed", { lessonId, durationMs }, { lessonId });
@@ -339,9 +461,22 @@ function LessonkitProvider(props) {
       if (!result.didComplete) return;
       syncProgress();
       emitLessonCompleted(lessonId, result.durationMs);
+      void trackingRef.current?.flush?.();
     },
     [syncProgress, emitLessonCompleted]
   );
+  useEffect(() => {
+    return () => {
+      const client = trackingRef.current;
+      void xapiRef.current?.flush();
+      setTimeout(() => {
+        client?.flush?.();
+        setTimeout(() => {
+          client?.dispose?.();
+        }, 0);
+      }, 0);
+    };
+  }, []);
   const setActiveLesson = useCallback(
     (lessonId) => {
       const current = progressRef.current.getState();
@@ -365,6 +500,9 @@ function LessonkitProvider(props) {
     syncProgress();
     track("course_completed");
   }, [track, syncProgress]);
+  const sessionUser = config.session?.user;
+  const sessionAttemptId = config.session?.attemptId;
+  const sessionConfiguredId = config.session?.sessionId;
   const runtime = useMemo(
     () => ({
       config,
@@ -377,7 +515,19 @@ function LessonkitProvider(props) {
       completeCourse,
       track
     }),
-    [config, tracking, xapi, progress, setActiveLesson, completeLesson, completeCourse, track]
+    [
+      config,
+      tracking,
+      xapi,
+      progress,
+      setActiveLesson,
+      completeLesson,
+      completeCourse,
+      track,
+      sessionUser,
+      sessionAttemptId,
+      sessionConfiguredId
+    ]
   );
   return /* @__PURE__ */ jsx(LessonkitContext.Provider, { value: runtime, children: props.children });
 }
@@ -449,24 +599,21 @@ function Course(props) {
 }
 function Lesson(props) {
   warnInvalidComponentId(props.lessonId, "lessonId");
-  const { setActiveLesson } = useLessonkit();
+  const { setActiveLesson, config } = useLessonkit();
   const { completeLesson } = useCompletion();
   const id = props.lessonId;
-  const pendingCompleteRef = useRef2(null);
+  const lessonMountGenerationRef = useRef2(0);
   useEffect2(() => {
-    if (pendingCompleteRef.current !== null) {
-      clearTimeout(pendingCompleteRef.current);
-      pendingCompleteRef.current = null;
-    }
+    const generation = ++lessonMountGenerationRef.current;
     setActiveLesson(id);
     return () => {
       const lessonId = id;
-      pendingCompleteRef.current = setTimeout(() => {
-        pendingCompleteRef.current = null;
+      queueMicrotask(() => {
+        if (lessonMountGenerationRef.current !== generation) return;
         completeLesson(lessonId);
-      }, 0);
+      });
     };
-  }, [id, setActiveLesson, completeLesson]);
+  }, [id, config.courseId, setActiveLesson, completeLesson]);
   return /* @__PURE__ */ jsxs("article", { "aria-label": props.title, children: [
     /* @__PURE__ */ jsx2("h2", { children: props.title }),
     /* @__PURE__ */ jsx2("div", { children: props.children })
@@ -531,7 +678,7 @@ function Quiz(props) {
               });
               if (correct && !completedRef.current) {
                 completedRef.current = true;
-                quiz.complete({ checkId: props.checkId, score: 1, maxScore: 1 });
+                quiz.complete({ checkId: props.checkId, score: 1, maxScore: 1, passingScore: 1 });
               }
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessonkit/react",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "private": false,
   "description": "React components and hooks for building learning experiences with LessonKit.",
   "license": "Apache-2.0",
@@ -37,8 +37,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react --external react-dom --external @lessonkit/accessibility --external @lessonkit/themes",
-    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --external react --external react-dom --external @lessonkit/accessibility --external @lessonkit/themes",
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react --external react-dom --external @lessonkit/accessibility --external @lessonkit/lxpack --external @lessonkit/themes",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --external react --external react-dom --external @lessonkit/accessibility --external @lessonkit/lxpack --external @lessonkit/themes",
     "prepublishOnly": "npm run build",
     "typecheck": "tsc -p tsconfig.json",
     "test": "vitest run --passWithNoTests",
@@ -50,10 +50,11 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@lessonkit/accessibility": "0.5.0",
-    "@lessonkit/core": "0.5.0",
-    "@lessonkit/themes": "0.5.0",
-    "@lessonkit/xapi": "0.5.0"
+    "@lessonkit/accessibility": "0.7.0",
+    "@lessonkit/core": "0.7.0",
+    "@lessonkit/lxpack": "0.7.0",
+    "@lessonkit/themes": "0.7.0",
+    "@lessonkit/xapi": "0.7.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",