@lessonkit/react 0.4.0 → 0.5.0

package/README.md

@@ -44,6 +44,7 @@ export default function App() {
         </Scenario>
 
         <Quiz
+          checkId="first-step"
           question="What should you do first?"
           choices={["Open attachment", "Verify sender"]}
           answer="Verify sender"
@@ -55,16 +56,15 @@ export default function App() {
 }
 ```
 
-## API (0.4.0)
+## API (0.5.0)
 
 ### Components
 
-- `Course`
-- `Lesson`
-- `Scenario`
-- `Quiz`
-- `Reflection`
-- `KnowledgeCheck`
+- `Course` — requires `courseId`
+- `Lesson` — requires `lessonId`
+- `Scenario` — optional `blockId`
+- `Quiz` / `KnowledgeCheck` — require `checkId`
+- `Reflection` — optional `blockId`
 - `ProgressTracker`
 
 ### Hooks
@@ -87,10 +87,15 @@ 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.
-- When a `<Lesson>` unmounts (for example, wizard navigation), it automatically calls `completeLesson`
-  for that lesson. Use stable `lessonId` values so completion and time-on-task telemetry stay consistent.
+- 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.
+- `<Lesson>` defers completion on unmount so React Strict Mode remounts in development do not emit
+  spurious `lesson_completed` events; completion runs after the component leaves the tree.
 - If you omit `session.sessionId`, the provider reuses a tab-scoped id via `sessionStorage` so React
   Strict Mode remounts do not split analytics sessions in development.
+- In development, invalid `courseId` / `lessonId` / `checkId` values log a one-time `console.warn`.
 - Accessibility guidance lives in [`docs/ACCESSIBILITY.md`](../../docs/ACCESSIBILITY.md).
 - Theming and token catalog: [`docs/THEMING.md`](../../docs/THEMING.md).
+- Identity and telemetry: [`docs/IDENTITY.md`](../../docs/IDENTITY.md), [`docs/TELEMETRY.md`](../../docs/TELEMETRY.md).
 

package/dist/index.cjs

@@ -54,8 +54,94 @@ var import_accessibility = require("@lessonkit/accessibility");
 
 // src/context.tsx
 var import_react = require("react");
-var import_core2 = require("@lessonkit/core");
-var import_xapi2 = require("@lessonkit/xapi");
+var import_core3 = require("@lessonkit/core");
+var import_xapi3 = require("@lessonkit/xapi");
+
+// src/runtime/emitTelemetry.ts
+var import_core = require("@lessonkit/core");
+var import_xapi = require("@lessonkit/xapi");
+var warnedMissingCourseId = false;
+function isDevEnvironment() {
+  const g = globalThis;
+  return typeof g.process !== "undefined" && g.process.env?.NODE_ENV !== "production";
+}
+function emitTelemetry(tracking, xapi, event) {
+  if (!event.courseId) {
+    if (isDevEnvironment() && !warnedMissingCourseId) {
+      warnedMissingCourseId = true;
+      console.warn("[lessonkit] telemetry event missing courseId");
+    }
+    return;
+  }
+  tracking.track(event);
+  try {
+    const statement = (0, import_xapi.telemetryEventToXAPIStatement)(event);
+    if (statement) xapi?.send(statement);
+  } catch (err) {
+    if (isDevEnvironment()) {
+      console.warn("[lessonkit] xAPI mapping skipped:", err instanceof Error ? err.message : err);
+    }
+  }
+}
+function buildTrackEvent(opts) {
+  const base = {
+    timestamp: (0, import_core.nowIso)(),
+    courseId: opts.courseId,
+    sessionId: opts.sessionId,
+    attemptId: opts.attemptId,
+    user: opts.user
+  };
+  switch (opts.name) {
+    case "course_started":
+      return { name: "course_started", ...base };
+    case "course_completed":
+      return { name: "course_completed", ...base };
+    case "lesson_started": {
+      const data = opts.data;
+      const lessonId = opts.lessonId ?? data?.lessonId;
+      if (!lessonId) throw new Error("lesson_started requires lessonId");
+      return {
+        name: "lesson_started",
+        ...base,
+        lessonId,
+        data: { lessonId, ...data }
+      };
+    }
+    case "lesson_completed":
+    case "lesson_time_on_task": {
+      const data = opts.data;
+      const lessonId = opts.lessonId ?? data?.lessonId;
+      if (!lessonId) throw new Error(`${opts.name} requires lessonId`);
+      return {
+        name: opts.name,
+        ...base,
+        lessonId,
+        data: { lessonId, ...data }
+      };
+    }
+    case "quiz_answered": {
+      const data = opts.data;
+      const lessonId = opts.lessonId;
+      if (!lessonId) throw new Error("quiz_answered requires active lessonId");
+      return { name: "quiz_answered", ...base, lessonId, data };
+    }
+    case "quiz_completed": {
+      const data = opts.data;
+      const lessonId = opts.lessonId;
+      if (!lessonId) throw new Error("quiz_completed requires active lessonId");
+      return { name: "quiz_completed", ...base, lessonId, data };
+    }
+    case "interaction":
+      return {
+        name: "interaction",
+        ...base,
+        lessonId: opts.lessonId,
+        data: opts.data
+      };
+    default:
+      return { name: opts.name, ...base };
+  }
+}
 
 // src/runtime/ports.ts
 function createNoopStorage() {
@@ -84,24 +170,62 @@ function createSessionStoragePort() {
   };
 }
 
+// src/runtime/progress.ts
+function createProgressController() {
+  let activeLessonId;
+  let completedLessonIds = /* @__PURE__ */ new Set();
+  let courseCompleted = false;
+  const lessonStartTimes = /* @__PURE__ */ new Map();
+  return {
+    getState: () => ({
+      activeLessonId,
+      completedLessonIds: new Set(completedLessonIds),
+      courseCompleted
+    }),
+    setActiveLesson: (lessonId, startedAtMs) => {
+      const previousLessonId = activeLessonId;
+      activeLessonId = lessonId;
+      lessonStartTimes.set(lessonId, startedAtMs);
+      return { previousLessonId };
+    },
+    completeLesson: (lessonId, completedAtMs) => {
+      if (completedLessonIds.has(lessonId)) return { didComplete: false };
+      completedLessonIds = new Set(completedLessonIds).add(lessonId);
+      const startedAt = lessonStartTimes.get(lessonId);
+      lessonStartTimes.delete(lessonId);
+      const durationMs = typeof startedAt === "number" ? Math.max(0, completedAtMs - startedAt) : void 0;
+      return { durationMs, didComplete: true };
+    },
+    completeCourse: () => {
+      if (courseCompleted) return { didComplete: false };
+      courseCompleted = true;
+      return { didComplete: true };
+    }
+  };
+}
+
 // src/runtime/xapi.ts
-var import_xapi = require("@lessonkit/xapi");
+var import_xapi2 = require("@lessonkit/xapi");
 function createXapiClientFromConfig(config, queue) {
   if (config.xapi?.enabled === false) return null;
   if (config.xapi?.client) return config.xapi.client;
-  const baseId = config.courseId ? `urn:lessonkit:course:${config.courseId}` : void 0;
-  return (0, import_xapi.createXAPIClient)({ baseId, transport: config.xapi?.transport, queue });
+  if (!config.courseId) return null;
+  return (0, import_xapi2.createXAPIClient)({
+    courseId: config.courseId,
+    transport: config.xapi?.transport,
+    queue
+  });
 }
 
 // src/runtime/session.ts
-var import_core = require("@lessonkit/core");
+var import_core2 = require("@lessonkit/core");
 var SESSION_STORAGE_KEY = "lessonkit:sessionId";
 var COURSE_STARTED_PREFIX = "lessonkit:course_started:";
 function resolveSessionId(storage, provided) {
   if (provided) return provided;
   const existing = storage.getItem(SESSION_STORAGE_KEY);
   if (existing) return existing;
-  const id = (0, import_core.createSessionId)();
+  const id = (0, import_core2.createSessionId)();
   storage.setItem(SESSION_STORAGE_KEY, id);
   return id;
 }
@@ -128,16 +252,16 @@ function disposeTrackingClient(client) {
 var defaultStorage = createSessionStoragePort();
 function createTrackingClientFromConfig(config) {
   if (config.tracking?.enabled === false) {
-    return (0, import_core2.createTrackingClient)();
+    return (0, import_core3.createTrackingClient)();
   }
-  return (0, import_core2.createTrackingClient)({
+  return (0, import_core3.createTrackingClient)({
     sink: config.tracking?.sink,
     batchSink: config.tracking?.batchSink,
     batch: config.tracking?.batch
   });
 }
 function LessonkitProvider(props) {
-  const config = props.config ?? {};
+  const config = props.config;
   const sessionIdRef = (0, import_react.useRef)(resolveSessionId(defaultStorage, config.session?.sessionId));
   if (config.session?.sessionId) sessionIdRef.current = config.session.sessionId;
   const attemptIdRef = (0, import_react.useRef)(config.session?.attemptId);
@@ -146,9 +270,15 @@ function LessonkitProvider(props) {
   userRef.current = config.session?.user;
   const courseIdRef = (0, import_react.useRef)(config.courseId);
   courseIdRef.current = config.courseId;
-  const trackingRef = (0, import_react.useRef)((0, import_core2.createTrackingClient)());
+  const progressRef = (0, import_react.useRef)(createProgressController());
+  const [progress, setProgress] = (0, import_react.useState)(() => progressRef.current.getState());
+  const syncProgress = (0, import_react.useCallback)(() => {
+    setProgress(progressRef.current.getState());
+  }, []);
+  const activeLessonIdRef = (0, import_react.useRef)(progress.activeLessonId);
+  activeLessonIdRef.current = progress.activeLessonId;
+  const trackingRef = (0, import_react.useRef)((0, import_core3.createTrackingClient)());
   const [tracking, setTracking] = (0, import_react.useState)(() => trackingRef.current);
-  const courseStartedInProviderRef = (0, import_react.useRef)(false);
   const trackingEnabled = config.tracking?.enabled;
   const trackingSink = config.tracking?.sink;
   const trackingBatchSink = config.tracking?.batchSink;
@@ -162,21 +292,19 @@ function LessonkitProvider(props) {
     setTracking(next);
     const sessionId = sessionIdRef.current;
     const cid = courseIdRef.current;
-    const shouldEmitCourseStarted = cid ? !hasCourseStarted(defaultStorage, sessionId, cid) : !courseStartedInProviderRef.current;
-    if (shouldEmitCourseStarted) {
-      if (cid) {
-        markCourseStarted(defaultStorage, sessionId, cid);
-      } else {
-        courseStartedInProviderRef.current = true;
-      }
-      next.track({
-        name: "course_started",
-        timestamp: (0, import_core2.nowIso)(),
-        courseId: cid,
-        sessionId,
-        attemptId: attemptIdRef.current,
-        user: userRef.current
-      });
+    if (!hasCourseStarted(defaultStorage, sessionId, cid)) {
+      markCourseStarted(defaultStorage, sessionId, cid);
+      emitTelemetry(
+        next,
+        xapiRef.current,
+        buildTrackEvent({
+          name: "course_started",
+          courseId: cid,
+          sessionId,
+          attemptId: attemptIdRef.current,
+          user: userRef.current
+        })
+      );
     }
     return () => {
       disposeTrackingClient(prev);
@@ -189,7 +317,7 @@ function LessonkitProvider(props) {
     batchFlushIntervalMs,
     batchMaxBatchSize
   ]);
-  const xapiQueueRef = (0, import_react.useRef)((0, import_xapi2.createInMemoryXAPIQueue)());
+  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;
@@ -217,21 +345,10 @@ function LessonkitProvider(props) {
       void prev?.flush();
     };
   }, [xapiEnabled, xapiClient, xapiTransport, courseId]);
-  const [completedLessonIds, setCompletedLessonIds] = (0, import_react.useState)(() => /* @__PURE__ */ new Set());
-  const completedLessonIdsRef = (0, import_react.useRef)(completedLessonIds);
-  completedLessonIdsRef.current = completedLessonIds;
-  const [activeLessonId, setActiveLessonId] = (0, import_react.useState)(void 0);
-  const [courseCompleted, setCourseCompleted] = (0, import_react.useState)(false);
-  const courseCompletedRef = (0, import_react.useRef)(false);
-  courseCompletedRef.current = courseCompleted;
-  const activeLessonIdRef = (0, import_react.useRef)(void 0);
-  activeLessonIdRef.current = activeLessonId;
-  const lessonStartTimesRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const track = (0, import_react.useCallback)(
     (name, data, opts) => {
-      trackingRef.current?.track({
+      const event = buildTrackEvent({
         name,
-        timestamp: (0, import_core2.nowIso)(),
         courseId: courseIdRef.current,
         lessonId: opts?.lessonId ?? activeLessonIdRef.current,
         sessionId: sessionIdRef.current,
@@ -239,6 +356,7 @@ function LessonkitProvider(props) {
         user: userRef.current,
         data
       });
+      emitTelemetry(trackingRef.current, xapiRef.current, event);
     },
     []
   );
@@ -248,45 +366,47 @@ function LessonkitProvider(props) {
       void xapiRef.current?.flush();
     };
   }, []);
-  const setActiveLesson = (0, import_react.useCallback)((lessonId) => {
-    if (activeLessonIdRef.current === lessonId) return;
-    activeLessonIdRef.current = lessonId;
-    setActiveLessonId(lessonId);
-    lessonStartTimesRef.current.set(lessonId, Date.now());
-    track("lesson_started", { lessonId }, { lessonId });
-    xapiRef.current?.startedLesson({ lessonId });
-  }, [track]);
-  const completeLesson = (0, import_react.useCallback)(
-    (lessonId) => {
-      if (completedLessonIdsRef.current.has(lessonId)) return;
-      completedLessonIdsRef.current = new Set(completedLessonIdsRef.current).add(lessonId);
-      setCompletedLessonIds(completedLessonIdsRef.current);
-      const startedAt = lessonStartTimesRef.current.get(lessonId);
-      lessonStartTimesRef.current.delete(lessonId);
-      const durationMs = typeof startedAt === "number" ? Math.max(0, Date.now() - startedAt) : void 0;
+  const emitLessonCompleted = (0, import_react.useCallback)(
+    (lessonId, durationMs) => {
       track("lesson_completed", { lessonId, durationMs }, { lessonId });
       if (durationMs !== void 0) {
         track("lesson_time_on_task", { lessonId, durationMs }, { lessonId });
       }
-      xapiRef.current?.completeLesson({ lessonId, durationMs });
     },
     [track]
   );
+  const completeLesson = (0, import_react.useCallback)(
+    (lessonId) => {
+      const result = progressRef.current.completeLesson(lessonId, Date.now());
+      if (!result.didComplete) return;
+      syncProgress();
+      emitLessonCompleted(lessonId, result.durationMs);
+    },
+    [syncProgress, emitLessonCompleted]
+  );
+  const setActiveLesson = (0, import_react.useCallback)(
+    (lessonId) => {
+      const current = progressRef.current.getState();
+      if (current.activeLessonId === lessonId) return;
+      const previous = current.activeLessonId;
+      if (previous && previous !== lessonId) {
+        const completed = progressRef.current.completeLesson(previous, Date.now());
+        if (completed.didComplete) {
+          emitLessonCompleted(previous, completed.durationMs);
+        }
+      }
+      progressRef.current.setActiveLesson(lessonId, Date.now());
+      syncProgress();
+      track("lesson_started", { lessonId }, { lessonId });
+    },
+    [track, syncProgress, emitLessonCompleted]
+  );
   const completeCourse = (0, import_react.useCallback)(() => {
-    if (courseCompletedRef.current) return;
-    courseCompletedRef.current = true;
-    setCourseCompleted(true);
+    const result = progressRef.current.completeCourse();
+    if (!result.didComplete) return;
+    syncProgress();
     track("course_completed");
-    xapiRef.current?.completeCourse();
-  }, [track]);
-  const progress = (0, import_react.useMemo)(
-    () => ({
-      activeLessonId,
-      completedLessonIds: new Set(completedLessonIds),
-      courseCompleted
-    }),
-    [activeLessonId, completedLessonIds, courseCompleted]
-  );
+  }, [track, syncProgress]);
   const runtime = (0, import_react.useMemo)(
     () => ({
       config,
@@ -338,9 +458,28 @@ function useQuizState() {
   );
 }
 
+// src/runtime/validateComponentId.ts
+var import_core4 = require("@lessonkit/core");
+var warnedPaths = /* @__PURE__ */ new Set();
+function isDevEnvironment2() {
+  const g = globalThis;
+  return typeof g.process !== "undefined" && g.process.env?.NODE_ENV !== "production";
+}
+function warnInvalidComponentId(id, path) {
+  if (!isDevEnvironment2()) return;
+  const key = `${path}:${String(id)}`;
+  if (warnedPaths.has(key)) return;
+  const result = (0, import_core4.validateId)(id, path);
+  if (result.ok) return;
+  warnedPaths.add(key);
+  const detail = result.issues.map((i) => `${i.path}: ${i.message}`).join("; ");
+  console.warn(`[lessonkit] invalid ${path} \u2014 ${detail}`);
+}
+
 // src/components.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Course(props) {
+  warnInvalidComponentId(props.courseId, "courseId");
   const providerConfig = (0, import_react3.useMemo)(
     () => ({ ...props.config, courseId: props.courseId }),
     [props.config, props.courseId]
@@ -351,15 +490,23 @@ function Course(props) {
   ] }) });
 }
 function Lesson(props) {
+  warnInvalidComponentId(props.lessonId, "lessonId");
   const { setActiveLesson } = useLessonkit();
   const { completeLesson } = useCompletion();
-  const reactId = (0, import_react3.useId)();
-  const generatedId = (0, import_react3.useMemo)(() => `lesson-${sanitizeLessonId(reactId)}`, [reactId]);
-  const id = props.lessonId ?? generatedId;
+  const id = props.lessonId;
+  const pendingCompleteRef = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
+    if (pendingCompleteRef.current !== null) {
+      clearTimeout(pendingCompleteRef.current);
+      pendingCompleteRef.current = null;
+    }
     setActiveLesson(id);
     return () => {
-      completeLesson(id);
+      const lessonId = id;
+      pendingCompleteRef.current = setTimeout(() => {
+        pendingCompleteRef.current = null;
+        completeLesson(lessonId);
+      }, 0);
     };
   }, [id, setActiveLesson, completeLesson]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { "aria-label": props.title, children: [
@@ -368,11 +515,13 @@ function Lesson(props) {
   ] });
 }
 function Scenario(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", { "aria-label": "Scenario", children: props.children });
+  if (props.blockId !== void 0) warnInvalidComponentId(props.blockId, "blockId");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", { "aria-label": "Scenario", "data-lk-block-id": props.blockId, children: props.children });
 }
 function Reflection(props) {
+  if (props.blockId !== void 0) warnInvalidComponentId(props.blockId, "blockId");
   const promptId = (0, import_react3.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "aria-label": "Reflection", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "aria-label": "Reflection", "data-lk-block-id": props.blockId, children: [
     props.prompt ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id: promptId, children: props.prompt }) : null,
     props.children,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -385,14 +534,23 @@ function Reflection(props) {
   ] });
 }
 function KnowledgeCheck(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Quiz, { question: props.question, choices: props.choices, answer: props.answer });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Quiz,
+    {
+      checkId: props.checkId,
+      question: props.question,
+      choices: props.choices,
+      answer: props.answer
+    }
+  );
 }
 function Quiz(props) {
+  warnInvalidComponentId(props.checkId, "checkId");
   const quiz = useQuizState();
   const [selected, setSelected] = (0, import_react3.useState)(null);
   const completedRef = (0, import_react3.useRef)(false);
   const questionId = (0, import_react3.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "aria-label": "Quiz", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "aria-label": "Quiz", "data-lk-check-id": props.checkId, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id: questionId, children: props.question }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("fieldset", { "aria-labelledby": questionId, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("legend", { style: import_accessibility.visuallyHiddenStyle, children: "Quiz choices" }),
@@ -407,10 +565,15 @@ function Quiz(props) {
             onChange: () => {
               setSelected(c);
               const correct = c === props.answer;
-              quiz.answer({ question: props.question, choice: c, correct });
+              quiz.answer({
+                checkId: props.checkId,
+                question: props.question,
+                choice: c,
+                correct
+              });
               if (correct && !completedRef.current) {
                 completedRef.current = true;
-                quiz.complete({ score: 1, maxScore: 1 });
+                quiz.complete({ checkId: props.checkId, score: 1, maxScore: 1 });
               }
             }
           }
@@ -429,10 +592,6 @@ function ProgressTracker() {
     completed
   ] }) });
 }
-function sanitizeLessonId(id) {
-  const s = id.replace(/[^a-zA-Z0-9_-]/g, "");
-  return s.length ? s : "id";
-}
 
 // src/theme/ThemeProvider.tsx
 var import_react4 = __toESM(require("react"), 1);

package/dist/index.d.cts

@@ -1,13 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import * as _lessonkit_core from '@lessonkit/core';
-import { CourseId, TelemetryUser, TelemetryEvent, TrackingClient, LessonId } from '@lessonkit/core';
+import { LessonId, CourseId, TelemetryUser, TrackingClient, TelemetryEventName, CheckId, BlockId } from '@lessonkit/core';
 import { XAPITransport, XAPIClient } from '@lessonkit/xapi';
 import { LessonkitThemeV1, ThemePresetName, PartialLessonkitThemeV1 } from '@lessonkit/themes';
 export { ThemePresetName } from '@lessonkit/themes';
 
+type ProgressState = {
+    activeLessonId?: LessonId;
+    completedLessonIds: ReadonlySet<LessonId>;
+    courseCompleted: boolean;
+};
+
 type LessonkitConfig = {
-    courseId?: CourseId;
+    courseId: CourseId;
     session?: {
         sessionId?: string;
         attemptId?: string;
@@ -15,8 +21,8 @@ type LessonkitConfig = {
     };
     tracking?: {
         enabled?: boolean;
-        sink?: (event: TelemetryEvent) => void | Promise<void>;
-        batchSink?: (events: TelemetryEvent[]) => void | Promise<void>;
+        sink?: (event: Parameters<TrackingClient["track"]>[0]) => void | Promise<void>;
+        batchSink?: (events: Parameters<TrackingClient["track"]>[0][]) => void | Promise<void>;
         batch?: {
             enabled?: boolean;
             flushIntervalMs?: number;
@@ -29,11 +35,7 @@ type LessonkitConfig = {
         client?: XAPIClient;
     };
 };
-type ProgressState = {
-    activeLessonId?: LessonId;
-    completedLessonIds: ReadonlySet<LessonId>;
-    courseCompleted: boolean;
-};
+
 type LessonkitRuntime = {
     config: LessonkitConfig;
     tracking: TrackingClient;
@@ -47,39 +49,43 @@ type LessonkitRuntime = {
     setActiveLesson: (lessonId: LessonId) => void;
     completeLesson: (lessonId: LessonId) => void;
     completeCourse: () => void;
-    track: (name: TelemetryEvent["name"], data?: TelemetryEvent["data"], opts?: {
+    track: (name: TelemetryEventName, data?: unknown, opts?: {
         lessonId?: LessonId;
     }) => void;
 };
 declare function LessonkitProvider(props: {
-    config?: LessonkitConfig;
+    config: LessonkitConfig;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 declare function Course(props: {
     title: string;
-    courseId?: CourseId;
+    courseId: CourseId;
     config?: Omit<React.ComponentProps<typeof LessonkitProvider>["config"], "courseId">;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function Lesson(props: {
     title: string;
-    lessonId?: LessonId;
+    lessonId: LessonId;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function Scenario(props: {
+    blockId?: BlockId;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function Reflection(props: {
+    blockId?: BlockId;
     prompt?: string;
     children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function KnowledgeCheck(props: {
+    checkId: CheckId;
     question: string;
     choices: string[];
     answer: string;
 }): react_jsx_runtime.JSX.Element;
 declare function Quiz(props: {
+    checkId: CheckId;
     question: string;
     choices: string[];
     answer: string;
@@ -89,7 +95,7 @@ declare function ProgressTracker(): react_jsx_runtime.JSX.Element;
 declare function useLessonkit(): LessonkitRuntime;
 declare function useProgress(): ProgressState;
 declare function useTracking(): {
-    track: (name: _lessonkit_core.TelemetryEvent["name"], data?: _lessonkit_core.TelemetryEvent["data"], opts?: {
+    track: (name: _lessonkit_core.TelemetryEventName, data?: unknown, opts?: {
         lessonId?: _lessonkit_core.LessonId;
     }) => void;
 };
@@ -99,11 +105,13 @@ declare function useCompletion(): {
 };
 declare function useQuizState(): {
     answer: (opts: {
+        checkId: CheckId;
         question: string;
         choice: string;
         correct: boolean;
     }) => void;
-    complete: (opts?: {
+    complete: (opts: {
+        checkId: CheckId;
         score?: number;
         maxScore?: number;
     }) => void;

package/dist/index.d.ts

@@ -1,13 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import * as _lessonkit_core from '@lessonkit/core';
-import { CourseId, TelemetryUser, TelemetryEvent, TrackingClient, LessonId } from '@lessonkit/core';
+import { LessonId, CourseId, TelemetryUser, TrackingClient, TelemetryEventName, CheckId, BlockId } from '@lessonkit/core';
 import { XAPITransport, XAPIClient } from '@lessonkit/xapi';
 import { LessonkitThemeV1, ThemePresetName, PartialLessonkitThemeV1 } from '@lessonkit/themes';
 export { ThemePresetName } from '@lessonkit/themes';
 
+type ProgressState = {
+    activeLessonId?: LessonId;
+    completedLessonIds: ReadonlySet<LessonId>;
+    courseCompleted: boolean;
+};
+
 type LessonkitConfig = {
-    courseId?: CourseId;
+    courseId: CourseId;
     session?: {
         sessionId?: string;
         attemptId?: string;
@@ -15,8 +21,8 @@ type LessonkitConfig = {
     };
     tracking?: {
         enabled?: boolean;
-        sink?: (event: TelemetryEvent) => void | Promise<void>;
-        batchSink?: (events: TelemetryEvent[]) => void | Promise<void>;
+        sink?: (event: Parameters<TrackingClient["track"]>[0]) => void | Promise<void>;
+        batchSink?: (events: Parameters<TrackingClient["track"]>[0][]) => void | Promise<void>;
         batch?: {
             enabled?: boolean;
             flushIntervalMs?: number;
@@ -29,11 +35,7 @@ type LessonkitConfig = {
         client?: XAPIClient;
     };
 };
-type ProgressState = {
-    activeLessonId?: LessonId;
-    completedLessonIds: ReadonlySet<LessonId>;
-    courseCompleted: boolean;
-};
+
 type LessonkitRuntime = {
     config: LessonkitConfig;
     tracking: TrackingClient;
@@ -47,39 +49,43 @@ type LessonkitRuntime = {
     setActiveLesson: (lessonId: LessonId) => void;
     completeLesson: (lessonId: LessonId) => void;
     completeCourse: () => void;
-    track: (name: TelemetryEvent["name"], data?: TelemetryEvent["data"], opts?: {
+    track: (name: TelemetryEventName, data?: unknown, opts?: {
         lessonId?: LessonId;
     }) => void;
 };
 declare function LessonkitProvider(props: {
-    config?: LessonkitConfig;
+    config: LessonkitConfig;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 declare function Course(props: {
     title: string;
-    courseId?: CourseId;
+    courseId: CourseId;
     config?: Omit<React.ComponentProps<typeof LessonkitProvider>["config"], "courseId">;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function Lesson(props: {
     title: string;
-    lessonId?: LessonId;
+    lessonId: LessonId;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function Scenario(props: {
+    blockId?: BlockId;
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function Reflection(props: {
+    blockId?: BlockId;
     prompt?: string;
     children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function KnowledgeCheck(props: {
+    checkId: CheckId;
     question: string;
     choices: string[];
     answer: string;
 }): react_jsx_runtime.JSX.Element;
 declare function Quiz(props: {
+    checkId: CheckId;
     question: string;
     choices: string[];
     answer: string;
@@ -89,7 +95,7 @@ declare function ProgressTracker(): react_jsx_runtime.JSX.Element;
 declare function useLessonkit(): LessonkitRuntime;
 declare function useProgress(): ProgressState;
 declare function useTracking(): {
-    track: (name: _lessonkit_core.TelemetryEvent["name"], data?: _lessonkit_core.TelemetryEvent["data"], opts?: {
+    track: (name: _lessonkit_core.TelemetryEventName, data?: unknown, opts?: {
         lessonId?: _lessonkit_core.LessonId;
     }) => void;
 };
@@ -99,11 +105,13 @@ declare function useCompletion(): {
 };
 declare function useQuizState(): {
     answer: (opts: {
+        checkId: CheckId;
         question: string;
         choice: string;
         correct: boolean;
     }) => void;
-    complete: (opts?: {
+    complete: (opts: {
+        checkId: CheckId;
         score?: number;
         maxScore?: number;
     }) => void;

package/dist/index.js

@@ -12,9 +12,95 @@ import {
   useRef,
   useState
 } from "react";
-import { createTrackingClient, nowIso } from "@lessonkit/core";
+import { createTrackingClient } from "@lessonkit/core";
 import { createInMemoryXAPIQueue } from "@lessonkit/xapi";
 
+// src/runtime/emitTelemetry.ts
+import { nowIso } from "@lessonkit/core";
+import { telemetryEventToXAPIStatement } from "@lessonkit/xapi";
+var warnedMissingCourseId = false;
+function isDevEnvironment() {
+  const g = globalThis;
+  return typeof g.process !== "undefined" && g.process.env?.NODE_ENV !== "production";
+}
+function emitTelemetry(tracking, xapi, event) {
+  if (!event.courseId) {
+    if (isDevEnvironment() && !warnedMissingCourseId) {
+      warnedMissingCourseId = true;
+      console.warn("[lessonkit] telemetry event missing courseId");
+    }
+    return;
+  }
+  tracking.track(event);
+  try {
+    const statement = telemetryEventToXAPIStatement(event);
+    if (statement) xapi?.send(statement);
+  } catch (err) {
+    if (isDevEnvironment()) {
+      console.warn("[lessonkit] xAPI mapping skipped:", err instanceof Error ? err.message : err);
+    }
+  }
+}
+function buildTrackEvent(opts) {
+  const base = {
+    timestamp: nowIso(),
+    courseId: opts.courseId,
+    sessionId: opts.sessionId,
+    attemptId: opts.attemptId,
+    user: opts.user
+  };
+  switch (opts.name) {
+    case "course_started":
+      return { name: "course_started", ...base };
+    case "course_completed":
+      return { name: "course_completed", ...base };
+    case "lesson_started": {
+      const data = opts.data;
+      const lessonId = opts.lessonId ?? data?.lessonId;
+      if (!lessonId) throw new Error("lesson_started requires lessonId");
+      return {
+        name: "lesson_started",
+        ...base,
+        lessonId,
+        data: { lessonId, ...data }
+      };
+    }
+    case "lesson_completed":
+    case "lesson_time_on_task": {
+      const data = opts.data;
+      const lessonId = opts.lessonId ?? data?.lessonId;
+      if (!lessonId) throw new Error(`${opts.name} requires lessonId`);
+      return {
+        name: opts.name,
+        ...base,
+        lessonId,
+        data: { lessonId, ...data }
+      };
+    }
+    case "quiz_answered": {
+      const data = opts.data;
+      const lessonId = opts.lessonId;
+      if (!lessonId) throw new Error("quiz_answered requires active lessonId");
+      return { name: "quiz_answered", ...base, lessonId, data };
+    }
+    case "quiz_completed": {
+      const data = opts.data;
+      const lessonId = opts.lessonId;
+      if (!lessonId) throw new Error("quiz_completed requires active lessonId");
+      return { name: "quiz_completed", ...base, lessonId, data };
+    }
+    case "interaction":
+      return {
+        name: "interaction",
+        ...base,
+        lessonId: opts.lessonId,
+        data: opts.data
+      };
+    default:
+      return { name: opts.name, ...base };
+  }
+}
+
 // src/runtime/ports.ts
 function createNoopStorage() {
   return {
@@ -42,13 +128,51 @@ function createSessionStoragePort() {
   };
 }
 
+// src/runtime/progress.ts
+function createProgressController() {
+  let activeLessonId;
+  let completedLessonIds = /* @__PURE__ */ new Set();
+  let courseCompleted = false;
+  const lessonStartTimes = /* @__PURE__ */ new Map();
+  return {
+    getState: () => ({
+      activeLessonId,
+      completedLessonIds: new Set(completedLessonIds),
+      courseCompleted
+    }),
+    setActiveLesson: (lessonId, startedAtMs) => {
+      const previousLessonId = activeLessonId;
+      activeLessonId = lessonId;
+      lessonStartTimes.set(lessonId, startedAtMs);
+      return { previousLessonId };
+    },
+    completeLesson: (lessonId, completedAtMs) => {
+      if (completedLessonIds.has(lessonId)) return { didComplete: false };
+      completedLessonIds = new Set(completedLessonIds).add(lessonId);
+      const startedAt = lessonStartTimes.get(lessonId);
+      lessonStartTimes.delete(lessonId);
+      const durationMs = typeof startedAt === "number" ? Math.max(0, completedAtMs - startedAt) : void 0;
+      return { durationMs, didComplete: true };
+    },
+    completeCourse: () => {
+      if (courseCompleted) return { didComplete: false };
+      courseCompleted = true;
+      return { didComplete: true };
+    }
+  };
+}
+
 // src/runtime/xapi.ts
 import { createXAPIClient } from "@lessonkit/xapi";
 function createXapiClientFromConfig(config, queue) {
   if (config.xapi?.enabled === false) return null;
   if (config.xapi?.client) return config.xapi.client;
-  const baseId = config.courseId ? `urn:lessonkit:course:${config.courseId}` : void 0;
-  return createXAPIClient({ baseId, transport: config.xapi?.transport, queue });
+  if (!config.courseId) return null;
+  return createXAPIClient({
+    courseId: config.courseId,
+    transport: config.xapi?.transport,
+    queue
+  });
 }
 
 // src/runtime/session.ts
@@ -95,7 +219,7 @@ function createTrackingClientFromConfig(config) {
   });
 }
 function LessonkitProvider(props) {
-  const config = props.config ?? {};
+  const config = props.config;
   const sessionIdRef = useRef(resolveSessionId(defaultStorage, config.session?.sessionId));
   if (config.session?.sessionId) sessionIdRef.current = config.session.sessionId;
   const attemptIdRef = useRef(config.session?.attemptId);
@@ -104,9 +228,15 @@ function LessonkitProvider(props) {
   userRef.current = config.session?.user;
   const courseIdRef = useRef(config.courseId);
   courseIdRef.current = config.courseId;
+  const progressRef = useRef(createProgressController());
+  const [progress, setProgress] = useState(() => progressRef.current.getState());
+  const syncProgress = useCallback(() => {
+    setProgress(progressRef.current.getState());
+  }, []);
+  const activeLessonIdRef = useRef(progress.activeLessonId);
+  activeLessonIdRef.current = progress.activeLessonId;
   const trackingRef = useRef(createTrackingClient());
   const [tracking, setTracking] = useState(() => trackingRef.current);
-  const courseStartedInProviderRef = useRef(false);
   const trackingEnabled = config.tracking?.enabled;
   const trackingSink = config.tracking?.sink;
   const trackingBatchSink = config.tracking?.batchSink;
@@ -120,21 +250,19 @@ function LessonkitProvider(props) {
     setTracking(next);
     const sessionId = sessionIdRef.current;
     const cid = courseIdRef.current;
-    const shouldEmitCourseStarted = cid ? !hasCourseStarted(defaultStorage, sessionId, cid) : !courseStartedInProviderRef.current;
-    if (shouldEmitCourseStarted) {
-      if (cid) {
-        markCourseStarted(defaultStorage, sessionId, cid);
-      } else {
-        courseStartedInProviderRef.current = true;
-      }
-      next.track({
-        name: "course_started",
-        timestamp: nowIso(),
-        courseId: cid,
-        sessionId,
-        attemptId: attemptIdRef.current,
-        user: userRef.current
-      });
+    if (!hasCourseStarted(defaultStorage, sessionId, cid)) {
+      markCourseStarted(defaultStorage, sessionId, cid);
+      emitTelemetry(
+        next,
+        xapiRef.current,
+        buildTrackEvent({
+          name: "course_started",
+          courseId: cid,
+          sessionId,
+          attemptId: attemptIdRef.current,
+          user: userRef.current
+        })
+      );
     }
     return () => {
       disposeTrackingClient(prev);
@@ -175,21 +303,10 @@ function LessonkitProvider(props) {
       void prev?.flush();
     };
   }, [xapiEnabled, xapiClient, xapiTransport, courseId]);
-  const [completedLessonIds, setCompletedLessonIds] = useState(() => /* @__PURE__ */ new Set());
-  const completedLessonIdsRef = useRef(completedLessonIds);
-  completedLessonIdsRef.current = completedLessonIds;
-  const [activeLessonId, setActiveLessonId] = useState(void 0);
-  const [courseCompleted, setCourseCompleted] = useState(false);
-  const courseCompletedRef = useRef(false);
-  courseCompletedRef.current = courseCompleted;
-  const activeLessonIdRef = useRef(void 0);
-  activeLessonIdRef.current = activeLessonId;
-  const lessonStartTimesRef = useRef(/* @__PURE__ */ new Map());
   const track = useCallback(
     (name, data, opts) => {
-      trackingRef.current?.track({
+      const event = buildTrackEvent({
         name,
-        timestamp: nowIso(),
         courseId: courseIdRef.current,
         lessonId: opts?.lessonId ?? activeLessonIdRef.current,
         sessionId: sessionIdRef.current,
@@ -197,6 +314,7 @@ function LessonkitProvider(props) {
         user: userRef.current,
         data
       });
+      emitTelemetry(trackingRef.current, xapiRef.current, event);
     },
     []
   );
@@ -206,45 +324,47 @@ function LessonkitProvider(props) {
       void xapiRef.current?.flush();
     };
   }, []);
-  const setActiveLesson = useCallback((lessonId) => {
-    if (activeLessonIdRef.current === lessonId) return;
-    activeLessonIdRef.current = lessonId;
-    setActiveLessonId(lessonId);
-    lessonStartTimesRef.current.set(lessonId, Date.now());
-    track("lesson_started", { lessonId }, { lessonId });
-    xapiRef.current?.startedLesson({ lessonId });
-  }, [track]);
-  const completeLesson = useCallback(
-    (lessonId) => {
-      if (completedLessonIdsRef.current.has(lessonId)) return;
-      completedLessonIdsRef.current = new Set(completedLessonIdsRef.current).add(lessonId);
-      setCompletedLessonIds(completedLessonIdsRef.current);
-      const startedAt = lessonStartTimesRef.current.get(lessonId);
-      lessonStartTimesRef.current.delete(lessonId);
-      const durationMs = typeof startedAt === "number" ? Math.max(0, Date.now() - startedAt) : void 0;
+  const emitLessonCompleted = useCallback(
+    (lessonId, durationMs) => {
       track("lesson_completed", { lessonId, durationMs }, { lessonId });
       if (durationMs !== void 0) {
         track("lesson_time_on_task", { lessonId, durationMs }, { lessonId });
       }
-      xapiRef.current?.completeLesson({ lessonId, durationMs });
     },
     [track]
   );
+  const completeLesson = useCallback(
+    (lessonId) => {
+      const result = progressRef.current.completeLesson(lessonId, Date.now());
+      if (!result.didComplete) return;
+      syncProgress();
+      emitLessonCompleted(lessonId, result.durationMs);
+    },
+    [syncProgress, emitLessonCompleted]
+  );
+  const setActiveLesson = useCallback(
+    (lessonId) => {
+      const current = progressRef.current.getState();
+      if (current.activeLessonId === lessonId) return;
+      const previous = current.activeLessonId;
+      if (previous && previous !== lessonId) {
+        const completed = progressRef.current.completeLesson(previous, Date.now());
+        if (completed.didComplete) {
+          emitLessonCompleted(previous, completed.durationMs);
+        }
+      }
+      progressRef.current.setActiveLesson(lessonId, Date.now());
+      syncProgress();
+      track("lesson_started", { lessonId }, { lessonId });
+    },
+    [track, syncProgress, emitLessonCompleted]
+  );
   const completeCourse = useCallback(() => {
-    if (courseCompletedRef.current) return;
-    courseCompletedRef.current = true;
-    setCourseCompleted(true);
+    const result = progressRef.current.completeCourse();
+    if (!result.didComplete) return;
+    syncProgress();
     track("course_completed");
-    xapiRef.current?.completeCourse();
-  }, [track]);
-  const progress = useMemo(
-    () => ({
-      activeLessonId,
-      completedLessonIds: new Set(completedLessonIds),
-      courseCompleted
-    }),
-    [activeLessonId, completedLessonIds, courseCompleted]
-  );
+  }, [track, syncProgress]);
   const runtime = useMemo(
     () => ({
       config,
@@ -296,9 +416,28 @@ function useQuizState() {
   );
 }
 
+// src/runtime/validateComponentId.ts
+import { validateId } from "@lessonkit/core";
+var warnedPaths = /* @__PURE__ */ new Set();
+function isDevEnvironment2() {
+  const g = globalThis;
+  return typeof g.process !== "undefined" && g.process.env?.NODE_ENV !== "production";
+}
+function warnInvalidComponentId(id, path) {
+  if (!isDevEnvironment2()) return;
+  const key = `${path}:${String(id)}`;
+  if (warnedPaths.has(key)) return;
+  const result = validateId(id, path);
+  if (result.ok) return;
+  warnedPaths.add(key);
+  const detail = result.issues.map((i) => `${i.path}: ${i.message}`).join("; ");
+  console.warn(`[lessonkit] invalid ${path} \u2014 ${detail}`);
+}
+
 // src/components.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Course(props) {
+  warnInvalidComponentId(props.courseId, "courseId");
   const providerConfig = useMemo3(
     () => ({ ...props.config, courseId: props.courseId }),
     [props.config, props.courseId]
@@ -309,15 +448,23 @@ function Course(props) {
   ] }) });
 }
 function Lesson(props) {
+  warnInvalidComponentId(props.lessonId, "lessonId");
   const { setActiveLesson } = useLessonkit();
   const { completeLesson } = useCompletion();
-  const reactId = useId();
-  const generatedId = useMemo3(() => `lesson-${sanitizeLessonId(reactId)}`, [reactId]);
-  const id = props.lessonId ?? generatedId;
+  const id = props.lessonId;
+  const pendingCompleteRef = useRef2(null);
   useEffect2(() => {
+    if (pendingCompleteRef.current !== null) {
+      clearTimeout(pendingCompleteRef.current);
+      pendingCompleteRef.current = null;
+    }
     setActiveLesson(id);
     return () => {
-      completeLesson(id);
+      const lessonId = id;
+      pendingCompleteRef.current = setTimeout(() => {
+        pendingCompleteRef.current = null;
+        completeLesson(lessonId);
+      }, 0);
     };
   }, [id, setActiveLesson, completeLesson]);
   return /* @__PURE__ */ jsxs("article", { "aria-label": props.title, children: [
@@ -326,11 +473,13 @@ function Lesson(props) {
   ] });
 }
 function Scenario(props) {
-  return /* @__PURE__ */ jsx2("section", { "aria-label": "Scenario", children: props.children });
+  if (props.blockId !== void 0) warnInvalidComponentId(props.blockId, "blockId");
+  return /* @__PURE__ */ jsx2("section", { "aria-label": "Scenario", "data-lk-block-id": props.blockId, children: props.children });
 }
 function Reflection(props) {
+  if (props.blockId !== void 0) warnInvalidComponentId(props.blockId, "blockId");
   const promptId = useId();
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Reflection", children: [
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Reflection", "data-lk-block-id": props.blockId, children: [
     props.prompt ? /* @__PURE__ */ jsx2("p", { id: promptId, children: props.prompt }) : null,
     props.children,
     /* @__PURE__ */ jsx2(
@@ -343,14 +492,23 @@ function Reflection(props) {
   ] });
 }
 function KnowledgeCheck(props) {
-  return /* @__PURE__ */ jsx2(Quiz, { question: props.question, choices: props.choices, answer: props.answer });
+  return /* @__PURE__ */ jsx2(
+    Quiz,
+    {
+      checkId: props.checkId,
+      question: props.question,
+      choices: props.choices,
+      answer: props.answer
+    }
+  );
 }
 function Quiz(props) {
+  warnInvalidComponentId(props.checkId, "checkId");
   const quiz = useQuizState();
   const [selected, setSelected] = useState2(null);
   const completedRef = useRef2(false);
   const questionId = useId();
-  return /* @__PURE__ */ jsxs("section", { "aria-label": "Quiz", children: [
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Quiz", "data-lk-check-id": props.checkId, children: [
     /* @__PURE__ */ jsx2("p", { id: questionId, children: props.question }),
     /* @__PURE__ */ jsxs("fieldset", { "aria-labelledby": questionId, children: [
       /* @__PURE__ */ jsx2("legend", { style: visuallyHiddenStyle, children: "Quiz choices" }),
@@ -365,10 +523,15 @@ function Quiz(props) {
             onChange: () => {
               setSelected(c);
               const correct = c === props.answer;
-              quiz.answer({ question: props.question, choice: c, correct });
+              quiz.answer({
+                checkId: props.checkId,
+                question: props.question,
+                choice: c,
+                correct
+              });
               if (correct && !completedRef.current) {
                 completedRef.current = true;
-                quiz.complete({ score: 1, maxScore: 1 });
+                quiz.complete({ checkId: props.checkId, score: 1, maxScore: 1 });
               }
             }
           }
@@ -387,10 +550,6 @@ function ProgressTracker() {
     completed
   ] }) });
 }
-function sanitizeLessonId(id) {
-  const s = id.replace(/[^a-zA-Z0-9_-]/g, "");
-  return s.length ? s : "id";
-}
 
 // src/theme/ThemeProvider.tsx
 import React3, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessonkit/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "description": "React components and hooks for building learning experiences with LessonKit.",
   "license": "Apache-2.0",
@@ -50,10 +50,10 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@lessonkit/accessibility": "0.4.0",
-    "@lessonkit/core": "0.4.0",
-    "@lessonkit/themes": "0.4.0",
-    "@lessonkit/xapi": "0.4.0"
+    "@lessonkit/accessibility": "0.5.0",
+    "@lessonkit/core": "0.5.0",
+    "@lessonkit/themes": "0.5.0",
+    "@lessonkit/xapi": "0.5.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",