@hydralms/components 0.1.0

package/dist/questions/types.d.ts

@@ -0,0 +1,47 @@
+export type QuestionTypeEnum = "multiple_choice" | "choice" | "true_false" | "fill_in_the_blank" | "essay";
+export interface AnswerOption {
+    uid: string;
+    content: string;
+    explanation?: string;
+    isCorrect?: boolean;
+    sequence: number;
+}
+export interface SessionAnswer {
+    uid: string;
+    answerUid: string;
+    content?: string;
+    confidence?: string;
+}
+export interface QuestionData {
+    uid: string;
+    type: QuestionTypeEnum;
+    content: string;
+    explanation?: string;
+    answers?: AnswerOption[];
+}
+/**
+ * Shared props interface for all question type components.
+ *
+ * @example
+ * <QuestionRenderer
+ *   question={{ uid: "q1", type: "choice", content: "What is JSX?", answers: [...] }}
+ *   onAnswer={(answers) => saveAnswer(answers)}
+ * />
+ */
+export interface QuestionProps {
+    /** The question data to render */
+    question: QuestionData;
+    /** Current user answers for this question */
+    sessionAnswers?: SessionAnswer[];
+    /** Called when the user selects or changes an answer */
+    onAnswer?: (answers: {
+        uid: string;
+        content?: string;
+    }[]) => void;
+    /** When true, disables all input interactions */
+    readOnly?: boolean;
+    /** When true, highlights correct/incorrect answers */
+    showCorrectAnswers?: boolean;
+    /** When true, disables inputs without showing review state */
+    disabled?: boolean;
+}

package/dist/sections/AnnouncementFeed/AnnouncementFeed.d.ts

@@ -0,0 +1,2 @@
+import { AnnouncementFeedProps } from './types';
+export declare function AnnouncementFeed({ announcements, onMarkRead, onSelect, showAvatars, previewLines, emptyMessage, readOnly, className, style, }: AnnouncementFeedProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/AnnouncementFeed/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * AnnouncementFeed section — a chronological announcement feed.
+ *
+ * Displays course announcements with pinned posts, read/unread
+ * tracking, expandable content, and author avatars.
+ *
+ * @example
+ * <AnnouncementFeed
+ *   announcements={announcements}
+ *   onMarkRead={(uid) => markRead(uid)}
+ * />
+ */
+export interface AnnouncementFeedProps {
+    /** Announcements sorted by recency (newest first) */
+    announcements: Announcement[];
+    /** Called when the user marks an announcement as read */
+    onMarkRead?: (announcementUid: string) => void;
+    /** Called when the user clicks an announcement */
+    onSelect?: (announcement: Announcement) => void;
+    /** Whether to show author avatars */
+    showAvatars?: boolean;
+    /** Max lines before truncating with "Read more" */
+    previewLines?: number;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** When true, disables interactions */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface Announcement {
+    /** Unique identifier */
+    uid: string;
+    /** Announcement title */
+    title: string;
+    /** Announcement body content */
+    content: string;
+    /** Author information */
+    author: {
+        displayName: string;
+        avatarUrl?: string;
+        role?: string;
+    };
+    /** Creation timestamp as ISO string */
+    createdAt: string;
+    /** Whether this announcement is pinned */
+    isPinned?: boolean;
+    /** Whether the current user has read this */
+    isRead?: boolean;
+}

package/dist/sections/AssessmentReview/AssessmentReview.d.ts

@@ -0,0 +1,2 @@
+import { AssessmentReviewProps } from './types';
+export declare function AssessmentReview({ questions, sessionAnswers, score, questionGroups, showCorrectAnswers, className, style, }: AssessmentReviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/AssessmentReview/types.d.ts

@@ -0,0 +1,58 @@
+import { QuestionData, SessionAnswer } from '../../questions/types';
+/**
+ * AssessmentReview section — read-only review of a completed assessment.
+ *
+ * Renders all questions in review mode with correct/incorrect highlighting
+ * and an optional score summary header. Supports optional grouping of
+ * questions by section label.
+ *
+ * @example
+ * <AssessmentReview
+ *   questions={questions}
+ *   sessionAnswers={submittedAnswers}
+ *   score={{ correct: 8, total: 10, passed: true, passingScore: 70 }}
+ * />
+ */
+export interface AssessmentReviewProps {
+    /** All questions that were in the assessment */
+    questions: QuestionData[];
+    /** The user's submitted answers */
+    sessionAnswers: SessionAnswer[];
+    /**
+     * Score metadata to display in the summary header.
+     * If omitted, the score header is not rendered.
+     */
+    score?: AssessmentScore;
+    /**
+     * Optional grouping: renders questions under section headings.
+     * Questions not referenced in any group are rendered last without a heading.
+     */
+    questionGroups?: AssessmentReviewGroup[];
+    /**
+     * Whether to show correct/incorrect answer highlighting on each question.
+     * @default true
+     */
+    showCorrectAnswers?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface AssessmentScore {
+    /** Number of correct answers */
+    correct: number;
+    /** Total number of questions */
+    total: number;
+    /** Optional pre-computed percentage (falls back to correct/total * 100) */
+    percentage?: number;
+    /** Whether the user passed */
+    passed?: boolean;
+    /** Passing threshold as a percentage (e.g. 70 means 70%) */
+    passingScore?: number;
+}
+export interface AssessmentReviewGroup {
+    /** Group label displayed as a section heading */
+    label: string;
+    /** UIDs of questions belonging to this group, in display order */
+    questionUids: string[];
+}

package/dist/sections/AssignmentSubmission/AssignmentSubmission.d.ts

@@ -0,0 +1,2 @@
+import { AssignmentSubmissionProps } from './types';
+export declare function AssignmentSubmission({ title, instructions, dueDate, maxScore, status, submissionTypes, existingSubmission, fileConstraints, onSubmit, onSaveDraft, grade, isSubmitting, readOnly, className, style, }: AssignmentSubmissionProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/AssignmentSubmission/types.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+/**
+ * AssignmentSubmission section — an assignment detail and submission view.
+ *
+ * Displays assignment instructions, due date, and submission status.
+ * Supports file upload, text, and URL submission types with draft saving
+ * and grade/feedback display.
+ *
+ * @example
+ * <AssignmentSubmission
+ *   title="Week 3 Essay"
+ *   instructions={<p>Write a 500-word essay on React.</p>}
+ *   dueDate="2025-03-15T23:59:00Z"
+ *   status="not_started"
+ *   submissionTypes={["text", "file"]}
+ *   onSubmit={(data) => submitAssignment(data)}
+ * />
+ */
+export interface AssignmentSubmissionProps {
+    /** Assignment title */
+    title: string;
+    /** Assignment instructions (rich content) */
+    instructions: ReactNode;
+    /** Due date as ISO string */
+    dueDate?: string;
+    /** Maximum score points */
+    maxScore?: number;
+    /** Current submission status */
+    status: "not_started" | "draft" | "submitted" | "late" | "graded" | "resubmit";
+    /** Allowed submission types */
+    submissionTypes: ("text" | "file" | "url")[];
+    /** Existing submission data for editing/viewing */
+    existingSubmission?: SubmissionData;
+    /** File upload constraints */
+    fileConstraints?: {
+        maxFiles?: number;
+        maxSizeMB?: number;
+        acceptedTypes?: string;
+    };
+    /** Called on final submission */
+    onSubmit: (submission: SubmissionData) => void;
+    /** Called on draft save */
+    onSaveDraft?: (submission: SubmissionData) => void;
+    /** Grade data when already graded */
+    grade?: {
+        score: number;
+        feedback?: ReactNode;
+    };
+    /** Whether the submit action is in flight */
+    isSubmitting?: boolean;
+    /** When true, disables all interactions */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface SubmissionData {
+    /** Text content */
+    textContent?: string;
+    /** Uploaded files */
+    files?: File[];
+    /** URL submission */
+    url?: string;
+}

package/dist/sections/CertificateViewer/CertificateViewer.d.ts

@@ -0,0 +1,2 @@
+import { CertificateViewerProps } from './types';
+export declare function CertificateViewer({ recipientName, courseTitle, completionDate, organizationName, organizationLogo, signatory, certificateId, variant, showActions, onPrint, onDownload, className, style, }: CertificateViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/CertificateViewer/types.d.ts

@@ -0,0 +1,47 @@
+/**
+ * CertificateViewer section — a printable completion certificate.
+ *
+ * Displays a certificate with recipient details, course information,
+ * signatory, and verification ID. Supports three visual variants:
+ * classic, modern, and minimal.
+ *
+ * @example
+ * <CertificateViewer
+ *   recipientName="Jane Smith"
+ *   courseTitle="Advanced React"
+ *   completionDate="2025-03-01"
+ *   organizationName="HydraLMS Academy"
+ *   variant="modern"
+ * />
+ */
+export interface CertificateViewerProps {
+    /** Recipient's full name */
+    recipientName: string;
+    /** Course or program title */
+    courseTitle: string;
+    /** Completion date as ISO string or human-readable string */
+    completionDate: string;
+    /** Issuing organization name */
+    organizationName: string;
+    /** Organization logo URL */
+    organizationLogo?: string;
+    /** Signatory information */
+    signatory?: {
+        name: string;
+        title: string;
+    };
+    /** Unique certificate ID */
+    certificateId?: string;
+    /** Certificate template variant */
+    variant?: "classic" | "modern" | "minimal";
+    /** Whether to show print/download actions */
+    showActions?: boolean;
+    /** Called when print is triggered */
+    onPrint?: () => void;
+    /** Called when download is triggered */
+    onDownload?: () => void;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}

package/dist/sections/CourseOutline/CourseOutline.d.ts

@@ -0,0 +1,2 @@
+import { CourseOutlineProps } from './types';
+export declare function CourseOutline({ items, progress, courseTitle, activeItemUid, onItemClick, showOverallProgress, showDuration, showIcons, readOnly, className, style, }: CourseOutlineProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/CourseOutline/types.d.ts

@@ -0,0 +1,49 @@
+import { CurriculumItem, CurriculumItemProgress } from '../../curriculum/types';
+/**
+ * CourseOutline section — a sidebar-ready course navigation panel.
+ *
+ * Wraps CurriculumTree with a course title header and an optional overall
+ * progress bar. Ready to drop into a sidebar layout without extra markup.
+ *
+ * @example
+ * <CourseOutline
+ *   items={curriculum}
+ *   progress={userProgress}
+ *   courseTitle="Introduction to React"
+ *   activeItemUid={currentLessonUid}
+ *   onItemClick={(item) => navigate(item.uid)}
+ * />
+ */
+export interface CourseOutlineProps {
+    /** The course curriculum items */
+    items: CurriculumItem[];
+    /** User progress data */
+    progress?: CurriculumItemProgress[];
+    /** Course title displayed in the header */
+    courseTitle?: string;
+    /** UID of the currently active/playing item */
+    activeItemUid?: string;
+    /** Called when the user clicks a leaf curriculum item */
+    onItemClick?: (item: CurriculumItem) => void;
+    /**
+     * Whether to show a linear progress bar summarising overall completion.
+     * @default true
+     */
+    showOverallProgress?: boolean;
+    /**
+     * Whether to show per-item duration labels in the tree.
+     * @default true
+     */
+    showDuration?: boolean;
+    /**
+     * Whether to show type icons per item.
+     * @default true
+     */
+    showIcons?: boolean;
+    /** When true, disables all click interactions */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}

package/dist/sections/DiscussionThread/DiscussionThread.d.ts

@@ -0,0 +1,2 @@
+import { DiscussionThreadProps } from './types';
+export declare function DiscussionThread({ title, rootPost, replies, currentUser, onReply, onToggleLike, onMarkAnswer, maxDepth, allowReplies, sortOrder, readOnly, className, style, }: DiscussionThreadProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/DiscussionThread/types.d.ts

@@ -0,0 +1,74 @@
+/**
+ * DiscussionThread section — a threaded discussion forum.
+ *
+ * Supports nested replies, author avatars, timestamps, like/unlike,
+ * and mark-as-answer for Q&A threads. Replies nest up to a
+ * configurable maximum depth.
+ *
+ * @example
+ * <DiscussionThread
+ *   title="How do React hooks work?"
+ *   rootPost={rootPost}
+ *   replies={replies}
+ *   currentUser={user}
+ *   onReply={(parentUid, content) => postReply(parentUid, content)}
+ * />
+ */
+export interface DiscussionThreadProps {
+    /** Thread title */
+    title: string;
+    /** The initial/root post */
+    rootPost: DiscussionPost;
+    /** All replies (flat array — parentUid determines nesting) */
+    replies: DiscussionPost[];
+    /** The currently authenticated user */
+    currentUser: DiscussionUser;
+    /** Called when the user submits a reply */
+    onReply: (parentUid: string, content: string) => void;
+    /** Called when the user toggles a like */
+    onToggleLike?: (postUid: string) => void;
+    /** Called when an instructor marks a post as the answer */
+    onMarkAnswer?: (postUid: string) => void;
+    /** Maximum nesting depth before replies flatten */
+    maxDepth?: number;
+    /** Whether new replies are allowed */
+    allowReplies?: boolean;
+    /** Sort order for top-level replies */
+    sortOrder?: "newest" | "oldest" | "most_liked";
+    /** When true, disables interactions */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface DiscussionPost {
+    /** Unique identifier */
+    uid: string;
+    /** Parent post UID — null for root post */
+    parentUid: string | null;
+    /** Post author */
+    author: DiscussionUser;
+    /** Post body content */
+    content: string;
+    /** Creation timestamp */
+    createdAt: string;
+    /** Last update timestamp */
+    updatedAt?: string;
+    /** Number of likes */
+    likeCount: number;
+    /** Whether the current user has liked this post */
+    isLikedByCurrentUser: boolean;
+    /** Whether this post is marked as the answer */
+    isAnswer?: boolean;
+}
+export interface DiscussionUser {
+    /** Unique identifier */
+    uid: string;
+    /** Display name */
+    displayName: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** User role */
+    role?: "student" | "instructor" | "ta" | "admin";
+}

package/dist/sections/ExamSession/ExamSession.d.ts

@@ -0,0 +1,2 @@
+import { ExamSessionProps } from './types';
+export declare function ExamSession({ questions, initialAnswers, onSubmit, onAnswerChange, timeLimitSeconds, timeElapsedSeconds, autoSubmitOnTimeout, timeWarningThreshold, allowBackNavigation, confirmBeforeSubmit, examTitle, instructions, isSubmitting, readOnly, className, style, }: ExamSessionProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/ExamSession/types.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { QuestionData, SessionAnswer } from '../../questions/types';
+/**
+ * ExamSession section — a formal timed exam experience.
+ *
+ * Provides enforced time limits with auto-submit on timeout, time warnings,
+ * optional back-navigation restriction, and a confirmation dialog before
+ * final submission.
+ *
+ * @example
+ * <ExamSession
+ *   questions={questions}
+ *   timeLimitSeconds={3600}
+ *   timeElapsedSeconds={elapsed}
+ *   onSubmit={(answers, meta) => submitExam(answers, meta)}
+ *   examTitle="Final Exam"
+ * />
+ */
+export interface ExamSessionProps {
+    /** Ordered list of questions */
+    questions: QuestionData[];
+    /** Pre-populated answers for resuming */
+    initialAnswers?: SessionAnswer[];
+    /** Called on submission with answers and metadata */
+    onSubmit: (answers: SessionAnswer[], metadata: ExamSubmitMetadata) => void;
+    /** Called whenever the user changes an answer */
+    onAnswerChange?: (answers: SessionAnswer[]) => void;
+    /** Time limit in seconds (required for exam mode) */
+    timeLimitSeconds: number;
+    /** Current elapsed time in seconds (controlled externally) */
+    timeElapsedSeconds: number;
+    /** Auto-submit when time runs out */
+    autoSubmitOnTimeout?: boolean;
+    /** Seconds remaining at which to show a time warning */
+    timeWarningThreshold?: number;
+    /** Whether the user can go back to previous questions */
+    allowBackNavigation?: boolean;
+    /** Show a confirmation dialog before final submission */
+    confirmBeforeSubmit?: boolean;
+    /** Title shown in the exam header */
+    examTitle?: string;
+    /** Instructions displayed above the first question */
+    instructions?: ReactNode;
+    /** Whether the submit action is in flight */
+    isSubmitting?: boolean;
+    /** When true, all inputs are disabled */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface ExamSubmitMetadata {
+    /** Total time the user spent in seconds */
+    timeElapsedSeconds: number;
+    /** Whether the submission was triggered by timeout */
+    wasAutoSubmitted: boolean;
+    /** Number of questions the user answered */
+    answeredCount: number;
+    /** Total questions in the exam */
+    totalQuestions: number;
+}

package/dist/sections/FlashcardStudySession/FlashcardStudySession.d.ts

@@ -0,0 +1,2 @@
+import { FlashcardStudySessionProps } from './types';
+export declare function FlashcardStudySession({ cards, title, description, shuffled, onComplete, readOnly, className, style, }: FlashcardStudySessionProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/FlashcardStudySession/types.d.ts

@@ -0,0 +1,40 @@
+import { FlashcardData } from '../../flashcards/types';
+/**
+ * FlashcardStudySession section — a complete flashcard study experience.
+ *
+ * Wraps FlashcardDeck with a session header and a completion screen
+ * (checkmark, stats, "Study Again" button). Drop in your cards and an
+ * optional onComplete callback to get a ready-to-use study session.
+ *
+ * @example
+ * <FlashcardStudySession
+ *   cards={cards}
+ *   title="React Fundamentals"
+ *   shuffled
+ *   onComplete={(stats) => trackStudySession(stats)}
+ * />
+ */
+export interface FlashcardStudySessionProps {
+    /** The cards to study */
+    cards: FlashcardData[];
+    /** Session title displayed in the header */
+    title?: string;
+    /** Optional subtitle / description */
+    description?: string;
+    /** Whether to shuffle cards at session start — passed through to FlashcardDeck */
+    shuffled?: boolean;
+    /** Called when the user completes the deck */
+    onComplete?: (stats: FlashcardSessionStats) => void;
+    /** When true, disables card flipping */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface FlashcardSessionStats {
+    /** Total number of cards in the deck */
+    totalCards: number;
+    /** Whether the deck was shuffled */
+    wasShuffled: boolean;
+}

package/dist/sections/GradebookTable/GradebookTable.d.ts

@@ -0,0 +1,2 @@
+import { GradebookTableProps } from './types';
+export declare function GradebookTable({ items, categories, overallGrade, showWeights, showCategoryTotals, onItemClick, readOnly, className, style, }: GradebookTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/GradebookTable/types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * GradebookTable section — a tabular student gradebook.
+ *
+ * Displays assignment scores, weights, and an overall computed grade
+ * with sortable columns and optional category grouping.
+ *
+ * @example
+ * <GradebookTable
+ *   items={gradeItems}
+ *   categories={gradeCategories}
+ *   overallGrade={{ percentage: 87, letterGrade: "B+", pointsEarned: 435, pointsPossible: 500 }}
+ * />
+ */
+export interface GradebookTableProps {
+    /** Grade items (assignments, quizzes, etc.) */
+    items: GradeItem[];
+    /** Optional category grouping */
+    categories?: GradeCategory[];
+    /** Overall course grade summary */
+    overallGrade?: OverallGrade;
+    /** Whether to show the weight column */
+    showWeights?: boolean;
+    /** Whether to show category subtotals */
+    showCategoryTotals?: boolean;
+    /** Called when the user clicks a grade item row */
+    onItemClick?: (item: GradeItem) => void;
+    /** When true, disables interactions */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface GradeItem {
+    /** Unique identifier */
+    uid: string;
+    /** Assignment name */
+    name: string;
+    /** Category UID for grouping */
+    categoryUid?: string;
+    /** Score earned — null if not yet graded */
+    score: number | null;
+    /** Maximum possible score */
+    maxScore: number;
+    /** Weight as a percentage */
+    weight?: number;
+    /** Due date as ISO string */
+    dueDate?: string;
+    /** Submission date */
+    submittedDate?: string;
+    /** Item status */
+    status: "graded" | "submitted" | "pending" | "missing" | "excused";
+}
+export interface GradeCategory {
+    /** Unique identifier */
+    uid: string;
+    /** Category name (e.g. "Assignments", "Quizzes") */
+    name: string;
+    /** Category weight percentage */
+    weight?: number;
+}
+export interface OverallGrade {
+    /** Overall percentage */
+    percentage: number;
+    /** Letter grade */
+    letterGrade?: string;
+    /** Points earned */
+    pointsEarned: number;
+    /** Points possible */
+    pointsPossible: number;
+}

package/dist/sections/LecturePlayer/LecturePlayer.d.ts

@@ -0,0 +1,2 @@
+import { LecturePlayerProps } from './types';
+export declare function LecturePlayer({ video, notes, layout, notesPanelWidth, notesPanelHeight, className, style, }: LecturePlayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/sections/LecturePlayer/types.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { VideoPlayerProps } from '../../video/types';
+/**
+ * LecturePlayer section — video player paired with an optional notes/transcript panel.
+ *
+ * Supports horizontal (side-by-side) and vertical (stacked) layouts with
+ * configurable panel dimensions. When notes are omitted, the video fills
+ * the full container.
+ *
+ * @example
+ * <LecturePlayer
+ *   video={{ src: "https://example.com/lecture.mp4", title: "React Hooks" }}
+ *   notes={<TranscriptPanel />}
+ *   layout="horizontal"
+ * />
+ */
+export interface LecturePlayerProps {
+    /** Props passed directly to the underlying VideoPlayer */
+    video: VideoPlayerProps;
+    /**
+     * Content rendered in the companion panel.
+     * Can be any ReactNode — transcript, MDX, note editor, etc.
+     * If omitted, the player fills the full container with no panel.
+     */
+    notes?: ReactNode;
+    /**
+     * Layout direction of the two-pane split.
+     * - "horizontal": video left, notes right
+     * - "vertical": video top, notes bottom
+     * @default "horizontal"
+     */
+    layout?: "horizontal" | "vertical";
+    /**
+     * Width of the notes panel when layout is "horizontal".
+     * @default "340px"
+     */
+    notesPanelWidth?: string | number;
+    /**
+     * Height of the notes panel when layout is "vertical".
+     * @default "240px"
+     */
+    notesPanelHeight?: string | number;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}

package/dist/sections/LessonPage/LessonPage.d.ts

@@ -0,0 +1,2 @@
+import { LessonPageProps } from './types';
+export declare function LessonPage({ title, blocks, isCompleted, onMarkComplete, onNextLesson, nextLessonTitle, estimatedDuration, showDuration, readOnly, className, style, }: LessonPageProps): import("react/jsx-runtime").JSX.Element;