@lessonkit/react 0.3.1 → 0.5.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -28,10 +38,12 @@ __export(index_exports, {
   Quiz: () => Quiz,
   Reflection: () => Reflection,
   Scenario: () => Scenario,
+  ThemeProvider: () => ThemeProvider,
   useCompletion: () => useCompletion,
   useLessonkit: () => useLessonkit,
   useProgress: () => useProgress,
   useQuizState: () => useQuizState,
+  useTheme: () => useTheme,
   useTracking: () => useTracking
 });
 module.exports = __toCommonJS(index_exports);
@@ -42,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_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() {
@@ -72,15 +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_xapi2 = require("@lessonkit/xapi");
+function createXapiClientFromConfig(config, queue) {
+  if (config.xapi?.enabled === false) return null;
+  if (config.xapi?.client) return config.xapi.client;
+  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;
 }
@@ -107,22 +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 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 });
-}
 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);
@@ -131,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;
@@ -147,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);
@@ -174,7 +317,7 @@ function LessonkitProvider(props) {
     batchFlushIntervalMs,
     batchMaxBatchSize
   ]);
-  const xapiQueueRef = (0, import_react.useRef)((0, import_xapi.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;
@@ -202,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,
@@ -224,6 +356,7 @@ function LessonkitProvider(props) {
         user: userRef.current,
         data
       });
+      emitTelemetry(trackingRef.current, xapiRef.current, event);
     },
     []
   );
@@ -233,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,
@@ -323,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]
@@ -336,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: [
@@ -353,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)(
@@ -370,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" }),
@@ -392,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 });
               }
             }
           }
@@ -414,9 +592,113 @@ 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);
+var import_themes = require("@lessonkit/themes");
+
+// src/theme/applyCssVariables.ts
+function applyCssVariables(target, vars, previousKeys) {
+  for (const key of previousKeys) {
+    if (!(key in vars)) {
+      target.style.removeProperty(key);
+    }
+  }
+  const nextKeys = /* @__PURE__ */ new Set();
+  for (const [key, value] of Object.entries(vars)) {
+    target.style.setProperty(key, value);
+    nextKeys.add(key);
+  }
+  return nextKeys;
+}
+
+// src/theme/ThemeProvider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react4.createContext)(null);
+var useIsoLayoutEffect2 = typeof window !== "undefined" ? import_react4.useLayoutEffect : import_react4.default.useEffect;
+function getSystemMode() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveModeBase(mode, resolvedMode) {
+  if (mode === "system") {
+    return resolvedMode === "dark" ? import_themes.darkTheme : import_themes.lightTheme;
+  }
+  if (mode === "dark") return import_themes.darkTheme;
+  return import_themes.lightTheme;
+}
+function ThemeProvider(props) {
+  const preset = props.preset ?? "default";
+  const mode = props.mode ?? "light";
+  const targetKind = props.target ?? "document";
+  const [resolvedMode, setResolvedMode] = (0, import_react4.useState)(
+    () => mode === "system" ? getSystemMode() : mode
+  );
+  useIsoLayoutEffect2(() => {
+    if (mode !== "system") {
+      setResolvedMode(mode);
+      return;
+    }
+    setResolvedMode(getSystemMode());
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => setResolvedMode(mq.matches ? "dark" : "light");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [mode]);
+  const dataTheme = mode === "system" ? resolvedMode : mode === "dark" ? "dark" : "light";
+  const effectiveTheme = (0, import_react4.useMemo)(() => {
+    const modeBase = resolveModeBase(mode, dataTheme);
+    const base = preset === "default" ? modeBase : preset === "brand" ? (0, import_themes.mergeThemes)(modeBase, import_themes.brandThemeOverrides) : (0, import_themes.mergeThemes)(modeBase, (0, import_themes.getPresetTheme)(preset));
+    return (0, import_themes.mergeThemes)(base, props.theme ?? {});
+  }, [preset, mode, dataTheme, props.theme]);
+  const hostRef = (0, import_react4.useRef)(null);
+  const appliedKeysRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
+  useIsoLayoutEffect2(() => {
+    if (targetKind === "document" && typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-lk-theme", dataTheme);
+      return () => document.documentElement.removeAttribute("data-lk-theme");
+    }
+  }, [targetKind, dataTheme]);
+  const inject = (0, import_react4.useCallback)(() => {
+    const vars = (0, import_themes.themeToCssVariables)(effectiveTheme);
+    const el = targetKind === "document" && typeof document !== "undefined" ? document.documentElement : hostRef.current;
+    if (!el) return;
+    appliedKeysRef.current = applyCssVariables(el, vars, appliedKeysRef.current);
+  }, [effectiveTheme, targetKind]);
+  useIsoLayoutEffect2(() => {
+    inject();
+    return () => {
+      const el = targetKind === "document" && typeof document !== "undefined" ? document.documentElement : hostRef.current;
+      if (!el) return;
+      for (const key of appliedKeysRef.current) {
+        el.style.removeProperty(key);
+      }
+      appliedKeysRef.current = /* @__PURE__ */ new Set();
+    };
+  }, [inject, targetKind]);
+  const value = (0, import_react4.useMemo)(
+    () => ({
+      theme: effectiveTheme,
+      preset,
+      mode,
+      resolvedMode: dataTheme
+    }),
+    [effectiveTheme, preset, mode, dataTheme]
+  );
+  if (targetKind === "document") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-lk-theme": dataTheme, style: { display: "contents" }, children: props.children }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: hostRef, "data-lk-theme": dataTheme, children: props.children }) });
+}
+function useTheme() {
+  const ctx = (0, import_react4.useContext)(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return ctx;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -428,9 +710,11 @@ function sanitizeLessonId(id) {
   Quiz,
   Reflection,
   Scenario,
+  ThemeProvider,
   useCompletion,
   useLessonkit,
   useProgress,
   useQuizState,
+  useTheme,
   useTracking
 });