@lessonkit/react 0.4.0 → 0.6.0

package/dist/index.js

@@ -12,8 +12,156 @@ import {
   useRef,
   useState
 } from "react";
-import { createTrackingClient, nowIso } from "@lessonkit/core";
+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, opts) {
+  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);
+    }
+  }
+  forwardTelemetryToLxpack(event, opts?.lxpackBridge ?? "auto");
+}
+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: { ...data, lessonId }
+      };
+    }
+    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: { ...data, lessonId }
+      };
+    }
+    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 };
+  }
+}
+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() {
@@ -42,13 +190,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 +281,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,49 +290,15 @@ function LessonkitProvider(props) {
   userRef.current = config.session?.user;
   const courseIdRef = useRef(config.courseId);
   courseIdRef.current = config.courseId;
-  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;
-  const batchEnabled = config.tracking?.batch?.enabled;
-  const batchFlushIntervalMs = config.tracking?.batch?.flushIntervalMs;
-  const batchMaxBatchSize = config.tracking?.batch?.maxBatchSize;
-  useIsoLayoutEffect(() => {
-    const prev = trackingRef.current;
-    const next = createTrackingClientFromConfig(config);
-    trackingRef.current = next;
-    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
-      });
-    }
-    return () => {
-      disposeTrackingClient(prev);
-    };
-  }, [
-    trackingEnabled,
-    trackingSink,
-    trackingBatchSink,
-    batchEnabled,
-    batchFlushIntervalMs,
-    batchMaxBatchSize
-  ]);
+  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(() => {
+    setProgress(progressRef.current.getState());
+  }, []);
+  const activeLessonIdRef = useRef(progress.activeLessonId);
+  activeLessonIdRef.current = progress.activeLessonId;
   const xapiQueueRef = useRef(createInMemoryXAPIQueue());
   const xapiRef = useRef(null);
   const [xapi, setXapi] = useState(null);
@@ -159,6 +311,25 @@ function LessonkitProvider(props) {
     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 {
@@ -175,21 +346,59 @@ 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 trackingRef = useRef(createTrackingClient());
+  const [tracking, setTracking] = useState(() => trackingRef.current);
+  const trackingEnabled = config.tracking?.enabled;
+  const trackingSink = config.tracking?.sink;
+  const trackingBatchSink = config.tracking?.batchSink;
+  const batchEnabled = config.tracking?.batch?.enabled;
+  const batchFlushIntervalMs = config.tracking?.batch?.flushIntervalMs;
+  const batchMaxBatchSize = config.tracking?.batch?.maxBatchSize;
+  useIsoLayoutEffect(() => {
+    const prev = trackingRef.current;
+    const next = createTrackingClientFromConfig(config);
+    trackingRef.current = next;
+    setTracking(next);
+    const sessionId = sessionIdRef.current;
+    const cid = courseIdRef.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
+        }),
+        { lxpackBridge: lxpackBridgeModeRef.current }
+      );
+    }
+    return () => {
+      disposeTrackingClient(prev);
+    };
+  }, [
+    trackingEnabled,
+    trackingSink,
+    trackingBatchSink,
+    batchEnabled,
+    batchFlushIntervalMs,
+    batchMaxBatchSize
+  ]);
+  const emitWithBridge = useCallback(
+    (trackingClient, event) => {
+      emitTelemetry(trackingClient, xapiRef.current, event, {
+        lxpackBridge: lxpackBridgeModeRef.current
+      });
+    },
+    []
+  );
   const track = useCallback(
     (name, data, opts) => {
-      trackingRef.current?.track({
+      const event = tryBuildTrackEvent({
         name,
-        timestamp: nowIso(),
         courseId: courseIdRef.current,
         lessonId: opts?.lessonId ?? activeLessonIdRef.current,
         sessionId: sessionIdRef.current,
@@ -197,54 +406,85 @@ function LessonkitProvider(props) {
         user: userRef.current,
         data
       });
+      if (!event) return;
+      emitWithBridge(trackingRef.current, event);
     },
-    []
+    [emitWithBridge]
   );
+  const prevCourseIdRef = useRef(config.courseId);
+  useEffect(() => {
+    if (prevCourseIdRef.current === config.courseId) return;
+    prevCourseIdRef.current = config.courseId;
+    progressRef.current = createProgressController();
+    syncProgress();
+    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]);
   useEffect(() => {
     return () => {
       trackingRef.current?.flush?.();
       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 sessionUser = config.session?.user;
+  const sessionAttemptId = config.session?.attemptId;
+  const sessionConfiguredId = config.session?.sessionId;
   const runtime = useMemo(
     () => ({
       config,
@@ -257,7 +497,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 });
 }
@@ -296,9 +548,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 +580,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 +605,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 +624,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 +655,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, passingScore: 1 });
               }
             }
           }
@@ -387,10 +682,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.6.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.4.0",
-    "@lessonkit/core": "0.4.0",
-    "@lessonkit/themes": "0.4.0",
-    "@lessonkit/xapi": "0.4.0"
+    "@lessonkit/accessibility": "0.6.0",
+    "@lessonkit/core": "0.6.0",
+    "@lessonkit/lxpack": "0.6.0",
+    "@lessonkit/themes": "0.6.0",
+    "@lessonkit/xapi": "0.6.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",