@lessonkit/react 0.1.0

package/README.md

@@ -0,0 +1,60 @@
+# `@lessonkit/react`
+
+React components and hooks for building learning experiences in LessonKit.
+
+## Install
+
+```bash
+npm install @lessonkit/react react react-dom
+```
+
+## Quick example
+
+```tsx
+import { Course, Lesson, Quiz, Scenario, ProgressTracker } from "@lessonkit/react";
+
+export default function App() {
+  return (
+    <Course title="Cybersecurity Basics" courseId="cyber-basics">
+      <ProgressTracker />
+
+      <Lesson title="Phishing Awareness" lessonId="phishing-101">
+        <Scenario>
+          <p>You receive a suspicious email.</p>
+        </Scenario>
+
+        <Quiz
+          question="What should you do first?"
+          choices={["Open attachment", "Verify sender"]}
+          answer="Verify sender"
+        />
+      </Lesson>
+    </Course>
+  );
+}
+```
+
+## API (0.1.x)
+
+### Components
+
+- `Course`
+- `Lesson`
+- `Scenario`
+- `Quiz`
+- `Reflection`
+- `KnowledgeCheck`
+- `ProgressTracker`
+
+### Hooks
+
+- `useProgress`
+- `useTracking`
+- `useQuizState`
+- `useCompletion`
+
+## Notes
+
+- `@lessonkit/react` ships **framework primitives**, not content. You bring your own layout/content
+  and compose interactions as React components.
+

package/dist/index.cjs

@@ -0,0 +1,248 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Course: () => Course,
+  KnowledgeCheck: () => KnowledgeCheck,
+  Lesson: () => Lesson,
+  ProgressTracker: () => ProgressTracker,
+  Quiz: () => Quiz,
+  Reflection: () => Reflection,
+  Scenario: () => Scenario,
+  useCompletion: () => useCompletion,
+  useLessonkit: () => useLessonkit,
+  useProgress: () => useProgress,
+  useQuizState: () => useQuizState,
+  useTracking: () => useTracking
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components.tsx
+var import_react3 = require("react");
+
+// src/context.tsx
+var import_react = require("react");
+var import_core = require("@lessonkit/core");
+var import_xapi = require("@lessonkit/xapi");
+var import_jsx_runtime = require("react/jsx-runtime");
+var LessonkitContext = (0, import_react.createContext)(null);
+function LessonkitProvider(props) {
+  const config = props.config ?? {};
+  const tracking = (0, import_react.useMemo)(() => {
+    if (config.tracking?.enabled === false) return (0, import_core.createTrackingClient)();
+    return (0, import_core.createTrackingClient)({ sink: config.tracking?.sink });
+  }, [config.tracking?.enabled, config.tracking?.sink]);
+  const xapi = (0, import_react.useMemo)(() => {
+    if (config.xapi?.enabled === false) return null;
+    return config.xapi?.client ?? (0, import_xapi.createXAPIClient)();
+  }, [config.xapi?.enabled, config.xapi?.client]);
+  const [completedLessonIds, setCompletedLessonIds] = (0, import_react.useState)(() => /* @__PURE__ */ new Set());
+  const [activeLessonId, setActiveLessonId] = (0, import_react.useState)(void 0);
+  const [courseCompleted, setCourseCompleted] = (0, import_react.useState)(false);
+  const courseIdRef = (0, import_react.useRef)(config.courseId);
+  courseIdRef.current = config.courseId;
+  const track = (0, import_react.useCallback)(
+    (name, data) => {
+      tracking.track({
+        name,
+        timestamp: (0, import_core.nowIso)(),
+        courseId: courseIdRef.current,
+        lessonId: activeLessonId,
+        data
+      });
+    },
+    [tracking, activeLessonId]
+  );
+  const setActiveLesson = (0, import_react.useCallback)(
+    (lessonId) => {
+      setActiveLessonId(lessonId);
+      track("lesson_started", { lessonId });
+      xapi?.startedLesson({ lessonId });
+    },
+    [track, xapi]
+  );
+  const completeLesson = (0, import_react.useCallback)(
+    (lessonId) => {
+      setCompletedLessonIds((prev) => new Set(prev).add(lessonId));
+      track("lesson_completed", { lessonId });
+      xapi?.completeLesson({ lessonId });
+    },
+    [track, xapi]
+  );
+  const completeCourse = (0, import_react.useCallback)(() => {
+    setCourseCompleted(true);
+    track("course_completed");
+    xapi?.completeCourse({});
+  }, [track, xapi]);
+  const runtime = (0, import_react.useMemo)(
+    () => ({
+      config,
+      tracking,
+      xapi,
+      progress: { activeLessonId, completedLessonIds, courseCompleted },
+      setActiveLesson,
+      completeLesson,
+      completeCourse,
+      track
+    }),
+    [
+      config,
+      tracking,
+      xapi,
+      activeLessonId,
+      completedLessonIds,
+      courseCompleted,
+      setActiveLesson,
+      completeLesson,
+      completeCourse,
+      track
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LessonkitContext.Provider, { value: runtime, children: props.children });
+}
+
+// src/hooks.ts
+var import_react2 = require("react");
+function useLessonkit() {
+  const ctx = (0, import_react2.useContext)(LessonkitContext);
+  if (!ctx) throw new Error("LessonKit: missing LessonkitProvider");
+  return ctx;
+}
+function useProgress() {
+  const { progress } = useLessonkit();
+  return progress;
+}
+function useTracking() {
+  const { track } = useLessonkit();
+  return (0, import_react2.useMemo)(() => ({ track }), [track]);
+}
+function useCompletion() {
+  const { completeLesson, completeCourse } = useLessonkit();
+  return (0, import_react2.useMemo)(() => ({ completeLesson, completeCourse }), [completeLesson, completeCourse]);
+}
+function useQuizState() {
+  const { track } = useLessonkit();
+  return (0, import_react2.useMemo)(
+    () => ({
+      answer: (opts) => {
+        track("quiz_answered", opts);
+      },
+      complete: (opts) => {
+        track("quiz_completed", opts);
+      }
+    }),
+    [track]
+  );
+}
+
+// src/components.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Course(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LessonkitProvider, { config: { courseId: props.courseId }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "aria-label": props.title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: props.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: props.children })
+  ] }) });
+}
+function Lesson(props) {
+  const { setActiveLesson } = useLessonkit();
+  const { completeLesson } = useCompletion();
+  const id = props.lessonId ?? (0, import_react3.useMemo)(() => `lesson-${cryptoRandomId()}`, []);
+  (0, import_react3.useEffect)(() => {
+    setActiveLesson(id);
+    return () => {
+      completeLesson(id);
+    };
+  }, [id, setActiveLesson, completeLesson]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { "aria-label": props.title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: props.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: props.children })
+  ] });
+}
+function Scenario(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", { "aria-label": "Scenario", children: props.children });
+}
+function Reflection(props) {
+  const promptId = (0, import_react3.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "aria-label": "Reflection", children: [
+    props.prompt ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id: promptId, children: props.prompt }) : null,
+    props.children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { "aria-labelledby": props.prompt ? promptId : void 0 })
+  ] });
+}
+function KnowledgeCheck(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Quiz, { question: props.question, choices: props.choices, answer: props.answer });
+}
+function Quiz(props) {
+  const quiz = useQuizState();
+  const [selected, setSelected] = (0, import_react3.useState)(null);
+  const questionId = (0, import_react3.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "aria-label": "Quiz", 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", { className: "sr-only", children: "Quiz choices" }),
+      props.choices.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: { display: "block" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "radio",
+            name: questionId,
+            value: c,
+            checked: selected === c,
+            onChange: () => {
+              setSelected(c);
+              quiz.answer({ question: props.question, choice: c, correct: c === props.answer });
+            }
+          }
+        ),
+        c
+      ] }, c))
+    ] }),
+    selected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { role: "status", "aria-live": "polite", children: selected === props.answer ? "Correct" : "Try again" }) : null
+  ] });
+}
+function ProgressTracker() {
+  const { progress } = useLessonkit();
+  const completed = progress.completedLessonIds.size;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("aside", { "aria-label": "Progress", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { children: [
+    "Lessons completed: ",
+    completed
+  ] }) });
+}
+function cryptoRandomId() {
+  const g = globalThis;
+  if (g.crypto?.randomUUID) return g.crypto.randomUUID();
+  return Math.random().toString(16).slice(2);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Course,
+  KnowledgeCheck,
+  Lesson,
+  ProgressTracker,
+  Quiz,
+  Reflection,
+  Scenario,
+  useCompletion,
+  useLessonkit,
+  useProgress,
+  useQuizState,
+  useTracking
+});

package/dist/index.d.cts

@@ -0,0 +1,84 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import * as _lessonkit_core from '@lessonkit/core';
+import { LessonId, CourseId, TelemetryEvent, TrackingClient } from '@lessonkit/core';
+import { XAPIClient } from '@lessonkit/xapi';
+
+declare function Course(props: {
+    title: string;
+    courseId?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Lesson(props: {
+    title: string;
+    lessonId?: LessonId;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Scenario(props: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Reflection(props: {
+    prompt?: string;
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function KnowledgeCheck(props: {
+    question: string;
+    choices: string[];
+    answer: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Quiz(props: {
+    question: string;
+    choices: string[];
+    answer: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ProgressTracker(): react_jsx_runtime.JSX.Element;
+
+type LessonkitConfig = {
+    courseId?: CourseId;
+    tracking?: {
+        enabled?: boolean;
+        sink?: (event: TelemetryEvent) => void | Promise<void>;
+    };
+    xapi?: {
+        enabled?: boolean;
+        client?: XAPIClient;
+    };
+};
+type ProgressState = {
+    activeLessonId?: LessonId;
+    completedLessonIds: Set<LessonId>;
+    courseCompleted: boolean;
+};
+type LessonkitRuntime = {
+    config: LessonkitConfig;
+    tracking: TrackingClient;
+    xapi: XAPIClient | null;
+    progress: ProgressState;
+    setActiveLesson: (lessonId: LessonId) => void;
+    completeLesson: (lessonId: LessonId) => void;
+    completeCourse: () => void;
+    track: (name: TelemetryEvent["name"], data?: TelemetryEvent["data"]) => void;
+};
+
+declare function useLessonkit(): LessonkitRuntime;
+declare function useProgress(): ProgressState;
+declare function useTracking(): {
+    track: (name: _lessonkit_core.TelemetryEvent["name"], data?: _lessonkit_core.TelemetryEvent["data"]) => void;
+};
+declare function useCompletion(): {
+    completeLesson: (lessonId: _lessonkit_core.LessonId) => void;
+    completeCourse: () => void;
+};
+declare function useQuizState(): {
+    answer: (opts: {
+        question: string;
+        choice: string;
+        correct: boolean;
+    }) => void;
+    complete: (opts?: {
+        score?: number;
+        maxScore?: number;
+    }) => void;
+};
+
+export { Course, KnowledgeCheck, Lesson, ProgressTracker, Quiz, Reflection, Scenario, useCompletion, useLessonkit, useProgress, useQuizState, useTracking };

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import * as _lessonkit_core from '@lessonkit/core';
+import { LessonId, CourseId, TelemetryEvent, TrackingClient } from '@lessonkit/core';
+import { XAPIClient } from '@lessonkit/xapi';
+
+declare function Course(props: {
+    title: string;
+    courseId?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Lesson(props: {
+    title: string;
+    lessonId?: LessonId;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Scenario(props: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Reflection(props: {
+    prompt?: string;
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function KnowledgeCheck(props: {
+    question: string;
+    choices: string[];
+    answer: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Quiz(props: {
+    question: string;
+    choices: string[];
+    answer: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ProgressTracker(): react_jsx_runtime.JSX.Element;
+
+type LessonkitConfig = {
+    courseId?: CourseId;
+    tracking?: {
+        enabled?: boolean;
+        sink?: (event: TelemetryEvent) => void | Promise<void>;
+    };
+    xapi?: {
+        enabled?: boolean;
+        client?: XAPIClient;
+    };
+};
+type ProgressState = {
+    activeLessonId?: LessonId;
+    completedLessonIds: Set<LessonId>;
+    courseCompleted: boolean;
+};
+type LessonkitRuntime = {
+    config: LessonkitConfig;
+    tracking: TrackingClient;
+    xapi: XAPIClient | null;
+    progress: ProgressState;
+    setActiveLesson: (lessonId: LessonId) => void;
+    completeLesson: (lessonId: LessonId) => void;
+    completeCourse: () => void;
+    track: (name: TelemetryEvent["name"], data?: TelemetryEvent["data"]) => void;
+};
+
+declare function useLessonkit(): LessonkitRuntime;
+declare function useProgress(): ProgressState;
+declare function useTracking(): {
+    track: (name: _lessonkit_core.TelemetryEvent["name"], data?: _lessonkit_core.TelemetryEvent["data"]) => void;
+};
+declare function useCompletion(): {
+    completeLesson: (lessonId: _lessonkit_core.LessonId) => void;
+    completeCourse: () => void;
+};
+declare function useQuizState(): {
+    answer: (opts: {
+        question: string;
+        choice: string;
+        correct: boolean;
+    }) => void;
+    complete: (opts?: {
+        score?: number;
+        maxScore?: number;
+    }) => void;
+};
+
+export { Course, KnowledgeCheck, Lesson, ProgressTracker, Quiz, Reflection, Scenario, useCompletion, useLessonkit, useProgress, useQuizState, useTracking };

package/dist/index.js

@@ -0,0 +1,210 @@
+// src/components.tsx
+import { useEffect, useId, useMemo as useMemo3, useState as useState2 } from "react";
+
+// src/context.tsx
+import { createContext, useCallback, useMemo, useRef, useState } from "react";
+import { createTrackingClient, nowIso } from "@lessonkit/core";
+import { createXAPIClient } from "@lessonkit/xapi";
+import { jsx } from "react/jsx-runtime";
+var LessonkitContext = createContext(null);
+function LessonkitProvider(props) {
+  const config = props.config ?? {};
+  const tracking = useMemo(() => {
+    if (config.tracking?.enabled === false) return createTrackingClient();
+    return createTrackingClient({ sink: config.tracking?.sink });
+  }, [config.tracking?.enabled, config.tracking?.sink]);
+  const xapi = useMemo(() => {
+    if (config.xapi?.enabled === false) return null;
+    return config.xapi?.client ?? createXAPIClient();
+  }, [config.xapi?.enabled, config.xapi?.client]);
+  const [completedLessonIds, setCompletedLessonIds] = useState(() => /* @__PURE__ */ new Set());
+  const [activeLessonId, setActiveLessonId] = useState(void 0);
+  const [courseCompleted, setCourseCompleted] = useState(false);
+  const courseIdRef = useRef(config.courseId);
+  courseIdRef.current = config.courseId;
+  const track = useCallback(
+    (name, data) => {
+      tracking.track({
+        name,
+        timestamp: nowIso(),
+        courseId: courseIdRef.current,
+        lessonId: activeLessonId,
+        data
+      });
+    },
+    [tracking, activeLessonId]
+  );
+  const setActiveLesson = useCallback(
+    (lessonId) => {
+      setActiveLessonId(lessonId);
+      track("lesson_started", { lessonId });
+      xapi?.startedLesson({ lessonId });
+    },
+    [track, xapi]
+  );
+  const completeLesson = useCallback(
+    (lessonId) => {
+      setCompletedLessonIds((prev) => new Set(prev).add(lessonId));
+      track("lesson_completed", { lessonId });
+      xapi?.completeLesson({ lessonId });
+    },
+    [track, xapi]
+  );
+  const completeCourse = useCallback(() => {
+    setCourseCompleted(true);
+    track("course_completed");
+    xapi?.completeCourse({});
+  }, [track, xapi]);
+  const runtime = useMemo(
+    () => ({
+      config,
+      tracking,
+      xapi,
+      progress: { activeLessonId, completedLessonIds, courseCompleted },
+      setActiveLesson,
+      completeLesson,
+      completeCourse,
+      track
+    }),
+    [
+      config,
+      tracking,
+      xapi,
+      activeLessonId,
+      completedLessonIds,
+      courseCompleted,
+      setActiveLesson,
+      completeLesson,
+      completeCourse,
+      track
+    ]
+  );
+  return /* @__PURE__ */ jsx(LessonkitContext.Provider, { value: runtime, children: props.children });
+}
+
+// src/hooks.ts
+import { useContext, useMemo as useMemo2 } from "react";
+function useLessonkit() {
+  const ctx = useContext(LessonkitContext);
+  if (!ctx) throw new Error("LessonKit: missing LessonkitProvider");
+  return ctx;
+}
+function useProgress() {
+  const { progress } = useLessonkit();
+  return progress;
+}
+function useTracking() {
+  const { track } = useLessonkit();
+  return useMemo2(() => ({ track }), [track]);
+}
+function useCompletion() {
+  const { completeLesson, completeCourse } = useLessonkit();
+  return useMemo2(() => ({ completeLesson, completeCourse }), [completeLesson, completeCourse]);
+}
+function useQuizState() {
+  const { track } = useLessonkit();
+  return useMemo2(
+    () => ({
+      answer: (opts) => {
+        track("quiz_answered", opts);
+      },
+      complete: (opts) => {
+        track("quiz_completed", opts);
+      }
+    }),
+    [track]
+  );
+}
+
+// src/components.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Course(props) {
+  return /* @__PURE__ */ jsx2(LessonkitProvider, { config: { courseId: props.courseId }, children: /* @__PURE__ */ jsxs("section", { "aria-label": props.title, children: [
+    /* @__PURE__ */ jsx2("h1", { children: props.title }),
+    /* @__PURE__ */ jsx2("div", { children: props.children })
+  ] }) });
+}
+function Lesson(props) {
+  const { setActiveLesson } = useLessonkit();
+  const { completeLesson } = useCompletion();
+  const id = props.lessonId ?? useMemo3(() => `lesson-${cryptoRandomId()}`, []);
+  useEffect(() => {
+    setActiveLesson(id);
+    return () => {
+      completeLesson(id);
+    };
+  }, [id, setActiveLesson, completeLesson]);
+  return /* @__PURE__ */ jsxs("article", { "aria-label": props.title, children: [
+    /* @__PURE__ */ jsx2("h2", { children: props.title }),
+    /* @__PURE__ */ jsx2("div", { children: props.children })
+  ] });
+}
+function Scenario(props) {
+  return /* @__PURE__ */ jsx2("section", { "aria-label": "Scenario", children: props.children });
+}
+function Reflection(props) {
+  const promptId = useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Reflection", children: [
+    props.prompt ? /* @__PURE__ */ jsx2("p", { id: promptId, children: props.prompt }) : null,
+    props.children,
+    /* @__PURE__ */ jsx2("textarea", { "aria-labelledby": props.prompt ? promptId : void 0 })
+  ] });
+}
+function KnowledgeCheck(props) {
+  return /* @__PURE__ */ jsx2(Quiz, { question: props.question, choices: props.choices, answer: props.answer });
+}
+function Quiz(props) {
+  const quiz = useQuizState();
+  const [selected, setSelected] = useState2(null);
+  const questionId = useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Quiz", children: [
+    /* @__PURE__ */ jsx2("p", { id: questionId, children: props.question }),
+    /* @__PURE__ */ jsxs("fieldset", { "aria-labelledby": questionId, children: [
+      /* @__PURE__ */ jsx2("legend", { className: "sr-only", children: "Quiz choices" }),
+      props.choices.map((c) => /* @__PURE__ */ jsxs("label", { style: { display: "block" }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "radio",
+            name: questionId,
+            value: c,
+            checked: selected === c,
+            onChange: () => {
+              setSelected(c);
+              quiz.answer({ question: props.question, choice: c, correct: c === props.answer });
+            }
+          }
+        ),
+        c
+      ] }, c))
+    ] }),
+    selected ? /* @__PURE__ */ jsx2("p", { role: "status", "aria-live": "polite", children: selected === props.answer ? "Correct" : "Try again" }) : null
+  ] });
+}
+function ProgressTracker() {
+  const { progress } = useLessonkit();
+  const completed = progress.completedLessonIds.size;
+  return /* @__PURE__ */ jsx2("aside", { "aria-label": "Progress", children: /* @__PURE__ */ jsxs("p", { children: [
+    "Lessons completed: ",
+    completed
+  ] }) });
+}
+function cryptoRandomId() {
+  const g = globalThis;
+  if (g.crypto?.randomUUID) return g.crypto.randomUUID();
+  return Math.random().toString(16).slice(2);
+}
+export {
+  Course,
+  KnowledgeCheck,
+  Lesson,
+  ProgressTracker,
+  Quiz,
+  Reflection,
+  Scenario,
+  useCompletion,
+  useLessonkit,
+  useProgress,
+  useQuizState,
+  useTracking
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@lessonkit/react",
+  "version": "0.1.0",
+  "private": false,
+  "description": "React components and hooks for building learning experiences with LessonKit.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eddiethedean/lessonkit.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/eddiethedean/lessonkit",
+  "bugs": {
+    "url": "https://github.com/eddiethedean/lessonkit/issues"
+  },
+  "keywords": [
+    "lessonkit",
+    "react",
+    "learning",
+    "training",
+    "lms",
+    "scorm",
+    "xapi"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react --external react-dom",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --external react --external react-dom",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run --passWithNoTests",
+    "lint": "echo \"(no lint configured yet)\""
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@lessonkit/core": "0.1.0",
+    "@lessonkit/xapi": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  }
+}