@hydralms/components 0.1.2 → 0.2.0

package/dist/progress/achievement-badge.d.ts

@@ -0,0 +1,6 @@
+import { AchievementBadgeProps } from './types';
+/**
+ * AchievementBadge displays a single achievement or badge earned by a learner,
+ * with support for locked/earned states and metal-tier variants.
+ */
+export declare function AchievementBadge({ title, description, icon, earnedDate, locked, variant, className, style, }: AchievementBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/progress/activity-timeline.d.ts

@@ -0,0 +1,6 @@
+import { ActivityTimelineProps } from './types';
+/**
+ * ActivityTimeline renders a vertical timeline of activity events
+ * with icons, timestamps, and an optional "load more" action.
+ */
+export declare function ActivityTimeline({ events, limit, showLoadMore, onLoadMore, emptyMessage, className, style, }: ActivityTimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/progress/index.d.ts

@@ -1,4 +1,7 @@
 export { ProgressRing } from './progress-ring';
 export { GradeIndicator } from './grade-indicator';
 export { StatCard } from './stat-card';
-export type { ProgressRingProps, GradeIndicatorProps, StatCardProps, } from './types';
+export { AchievementBadge } from './achievement-badge';
+export { StreakBadge } from './streak-badge';
+export { ActivityTimeline } from './activity-timeline';
+export type { ProgressRingProps, GradeIndicatorProps, StatCardProps, AchievementBadgeProps, StreakBadgeProps, ActivityTimelineProps, TimelineEvent, } from './types';

package/dist/progress/stat-card.d.ts

@@ -1,2 +1,2 @@
 import { StatCardProps } from './types';
-export declare function StatCard({ icon, label, value, subtitle, trend, className, style, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export declare const StatCard: import('react').NamedExoticComponent<StatCardProps>;

package/dist/progress/streak-badge.d.ts

@@ -0,0 +1,6 @@
+import { StreakBadgeProps } from './types';
+/**
+ * StreakBadge displays a compact learning streak indicator with
+ * a fire icon and day count.
+ */
+export declare function StreakBadge({ currentStreak, longestStreak, unit, showLongest, className, style, }: StreakBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/progress/types.d.ts

@@ -57,6 +57,8 @@ export interface StatCardProps {
     icon?: ReactNode;
     /** Stat label */
     label: string;
+    /** Short description displayed below the label */
+    description?: string;
     /** Stat value */
     value: string | number;
     /** Secondary text below the value */
@@ -71,3 +73,98 @@ export interface StatCardProps {
     /** Inline styles for the root element */
     style?: React.CSSProperties;
 }
+/**
+ * AchievementBadge displays a single achievement or badge earned by a learner,
+ * with support for locked/earned states and metal-tier variants.
+ *
+ * @example
+ * <AchievementBadge
+ *   title="Quiz Master"
+ *   description="Pass 10 quizzes with 90%+ score"
+ *   variant="gold"
+ *   earnedDate="2025-12-01T00:00:00Z"
+ * />
+ */
+export interface AchievementBadgeProps {
+    /** Achievement title */
+    title: string;
+    /** Optional description of how to earn the achievement */
+    description?: string;
+    /** Custom icon to display. Falls back to Trophy icon */
+    icon?: ReactNode;
+    /** ISO date string of when the achievement was earned */
+    earnedDate?: string;
+    /** Whether the achievement is locked (not yet earned). @default false */
+    locked?: boolean;
+    /** Visual tier variant. @default 'default' */
+    variant?: "default" | "gold" | "silver" | "bronze";
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+/**
+ * StreakBadge displays a compact learning streak indicator with
+ * a fire icon and day count.
+ *
+ * @example
+ * <StreakBadge currentStreak={7} longestStreak={14} showLongest />
+ */
+export interface StreakBadgeProps {
+    /** Current active streak count */
+    currentStreak: number;
+    /** All-time longest streak count */
+    longestStreak?: number;
+    /** Unit label for the streak count. @default "days" */
+    unit?: string;
+    /** Whether to show the longest streak subtitle. @default false */
+    showLongest?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+/**
+ * A single event in an ActivityTimeline.
+ */
+export interface TimelineEvent {
+    /** Unique identifier */
+    uid: string;
+    /** Event type — used for default icon selection */
+    type: string;
+    /** Event title */
+    title: string;
+    /** Optional longer description */
+    description?: string;
+    /** ISO 8601 timestamp */
+    timestamp: string;
+    /** Optional custom icon (overrides type-based default) */
+    icon?: ReactNode;
+}
+/**
+ * ActivityTimeline renders a vertical timeline of activity events
+ * with icons, timestamps, and an optional "load more" action.
+ *
+ * @example
+ * <ActivityTimeline
+ *   events={[
+ *     { uid: "1", type: "lesson_completed", title: "Completed Lesson 3", timestamp: "2025-03-01T12:00:00Z" },
+ *   ]}
+ * />
+ */
+export interface ActivityTimelineProps {
+    /** List of activity events to display */
+    events: TimelineEvent[];
+    /** Maximum number of events to display. When set, truncates the list. */
+    limit?: number;
+    /** Whether to show a "Load more" button at the bottom. @default false */
+    showLoadMore?: boolean;
+    /** Called when the user clicks "Load more" */
+    onLoadMore?: () => void;
+    /** Message displayed when the events list is empty. @default "No recent activity" */
+    emptyMessage?: string;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}

package/dist/questions/essay.d.ts

@@ -1,6 +1,6 @@
 import { QuestionProps } from './types';
 /**
- * Essay renders a long-form text input question with a multiline textarea.
+ * Essay renders a long-form rich text input question.
  *
  * @example
  * <Essay

package/dist/questions/hotspot.d.ts

@@ -0,0 +1,21 @@
+import { QuestionProps } from './types';
+/**
+ * Hotspot renders an image with clickable regions for selection.
+ *
+ * Regions are positioned using percentage-based coordinates so they scale with the image.
+ *
+ * @example
+ * <Hotspot
+ *   question={{
+ *     uid: "q1",
+ *     type: "hotspot",
+ *     content: "Click on the heart.",
+ *     hotspotImageUrl: "/anatomy.png",
+ *     hotspotRegions: [
+ *       { uid: "r1", shape: "circle", coords: [50, 40, 8], isCorrect: true, label: "Heart" },
+ *     ],
+ *   }}
+ *   onAnswer={(answers) => handleAnswer(answers)}
+ * />
+ */
+export declare const Hotspot: ({ question, sessionAnswers, onAnswer, readOnly, showCorrectAnswers, disabled, }: QuestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/questions/index.d.ts

@@ -4,4 +4,12 @@ export { Choice } from './choice';
 export { TrueFalse } from './true-false';
 export { FillInTheBlank } from './fill-in-the-blank';
 export { Essay } from './essay';
-export type { QuestionProps, QuestionData, QuestionTypeEnum, AnswerOption, SessionAnswer, } from './types';
+export { Numeric } from './numeric';
+export { Ordering } from './ordering';
+export { Matching } from './matching';
+export { Hotspot } from './hotspot';
+export { InlineChoice } from './inline-choice';
+export { Scenario } from './scenario';
+export { Spreadsheet } from './spreadsheet';
+export { scoreQuestion, scoreScenarioSubQuestions } from './scoring';
+export type { QuestionProps, QuestionData, QuestionTypeEnum, QuestionMaterial, AnswerOption, SessionAnswer, MatchingPair, HotspotRegion, InlineBlank, ScenarioScoringMode, SpreadsheetColumn, SpreadsheetCell, SpreadsheetRow, } from './types';

package/dist/questions/inline-choice.d.ts

@@ -0,0 +1,21 @@
+import { QuestionProps } from './types';
+/**
+ * InlineChoice renders a cloze-style passage with embedded dropdown blanks.
+ *
+ * Content should contain `{{blank:uid}}` markers that correspond to entries in `question.inlineBlanks`.
+ *
+ * @example
+ * <InlineChoice
+ *   question={{
+ *     uid: "q1",
+ *     type: "inline_choice",
+ *     content: "The capital of France is {{blank:b1}}.",
+ *     inlineBlanks: [{ uid: "b1", sequence: 0, options: [
+ *       { uid: "o1", content: "Paris", isCorrect: true },
+ *       { uid: "o2", content: "London" },
+ *     ]}],
+ *   }}
+ *   onAnswer={(answers) => handleAnswer(answers)}
+ * />
+ */
+export declare const InlineChoice: ({ question, sessionAnswers, onAnswer, readOnly, showCorrectAnswers, disabled, }: QuestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/questions/matching.d.ts

@@ -0,0 +1,22 @@
+import { QuestionProps } from './types';
+/**
+ * Matching renders a two-column matching question with dropdown selects and optional drag-and-drop.
+ *
+ * Each item (left column) must be matched to its correct target (right column).
+ * The dropdown is the primary accessible interaction; drag-and-drop is progressive enhancement.
+ *
+ * @example
+ * <Matching
+ *   question={{
+ *     uid: "q1",
+ *     type: "matching",
+ *     content: "Match each country to its capital.",
+ *     matchingPairs: [
+ *       { uid: "p1", item: "France", target: "Paris", sequence: 0 },
+ *       { uid: "p2", item: "Germany", target: "Berlin", sequence: 1 },
+ *     ],
+ *   }}
+ *   onAnswer={(answers) => handleAnswer(answers)}
+ * />
+ */
+export declare const Matching: ({ question, sessionAnswers, onAnswer, readOnly, showCorrectAnswers, disabled, }: QuestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/questions/numeric.d.ts

@@ -0,0 +1,11 @@
+import { QuestionProps } from './types';
+/**
+ * Numeric renders a number input question with optional tolerance and unit display.
+ *
+ * @example
+ * <Numeric
+ *   question={{ uid: "q1", type: "numeric", content: "What is pi to 2 decimal places?", numericAnswer: 3.14, numericTolerance: 0.01 }}
+ *   onAnswer={(answers) => handleAnswer(answers)}
+ * />
+ */
+export declare const Numeric: ({ question, sessionAnswers, onAnswer, readOnly, showCorrectAnswers, disabled, }: QuestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/questions/ordering.d.ts

@@ -0,0 +1,12 @@
+import { QuestionProps } from './types';
+/**
+ * Ordering renders a drag-and-drop reorderable list of items.
+ * The correct order is determined by each answer's `sequence` field.
+ *
+ * @example
+ * <Ordering
+ *   question={question}
+ *   onAnswer={(answers) => handleAnswer(answers)}
+ * />
+ */
+export declare const Ordering: ({ question, sessionAnswers, onAnswer, readOnly, showCorrectAnswers, disabled, }: QuestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/questions/scenario.d.ts

@@ -0,0 +1,23 @@
+import { QuestionProps } from './types';
+/**
+ * Scenario renders a shared context/stimulus with multiple sub-questions.
+ *
+ * Sub-questions can be any existing question type (choice, numeric, matching, etc.).
+ * The shared context is displayed prominently above all sub-questions.
+ *
+ * @example
+ * <Scenario
+ *   question={{
+ *     uid: "s1",
+ *     type: "scenario",
+ *     content: "<p>Read the following passage and answer the questions below.</p>",
+ *     scenarioQuestions: [
+ *       { uid: "sq1", type: "choice", content: "What is the main idea?", answers: [...] },
+ *       { uid: "sq2", type: "true_false", content: "The author agrees.", answers: [...] },
+ *     ],
+ *     scenarioScoringMode: "per_question",
+ *   }}
+ *   onAnswer={(answers) => handleAnswer(answers)}
+ * />
+ */
+export declare const Scenario: ({ question, sessionAnswers, onAnswer, readOnly, showCorrectAnswers, disabled, }: QuestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/questions/scoring.d.ts

@@ -0,0 +1,22 @@
+import { QuestionData, SessionAnswer } from './types';
+/**
+ * Scores a single question against the user's answers.
+ *
+ * @returns `true` if correct, `false` if incorrect, `null` if the question is not auto-gradable.
+ */
+export declare function scoreQuestion(question: QuestionData, userAnswers: SessionAnswer[]): boolean | null;
+/**
+ * Scores an entire set of questions against user answers.
+ *
+ * @returns An object with correct count, total gradable, and percentage.
+ */
+export declare function scoreAssessment(questions: QuestionData[], answers: SessionAnswer[]): {
+    correct: number;
+    total: number;
+    percentage: number;
+};
+/**
+ * Scores individual sub-questions within a scenario.
+ * Returns a Map of sub-question UID to score (`true`/`false`/`null`).
+ */
+export declare function scoreScenarioSubQuestions(question: QuestionData, userAnswers: SessionAnswer[]): Map<string, boolean | null>;

package/dist/questions/spreadsheet.d.ts

@@ -0,0 +1,29 @@
+import { QuestionProps } from './types';
+/**
+ * Spreadsheet renders a grid-based question for accounting and tabular data entry.
+ * Students fill in editable cells while locked cells display pre-filled values.
+ * Each cell is graded independently with support for numeric tolerance.
+ *
+ * @example
+ * <Spreadsheet
+ *   question={{
+ *     uid: "q1",
+ *     type: "spreadsheet",
+ *     content: "Complete the trial balance:",
+ *     spreadsheetColumns: [
+ *       { uid: "col-acct", label: "Account", type: "text", width: 14 },
+ *       { uid: "col-dr", label: "Debit ($)", type: "currency", width: 9 },
+ *       { uid: "col-cr", label: "Credit ($)", type: "currency", width: 9 },
+ *     ],
+ *     spreadsheetRows: [
+ *       { uid: "r1", cells: [
+ *         { uid: "r1-acct", columnUid: "col-acct", locked: true, value: "Cash" },
+ *         { uid: "r1-dr", columnUid: "col-dr", locked: false, correctAnswer: "5000" },
+ *         { uid: "r1-cr", columnUid: "col-cr", locked: true, value: "" },
+ *       ]},
+ *     ],
+ *   }}
+ *   onAnswer={(answers) => handleAnswer(answers)}
+ * />
+ */
+export declare const Spreadsheet: ({ question, sessionAnswers, onAnswer, readOnly, showCorrectAnswers, disabled, }: QuestionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/questions/types.d.ts

@@ -1,4 +1,6 @@
-export type QuestionTypeEnum = "multiple_choice" | "choice" | "true_false" | "fill_in_the_blank" | "essay";
+export type QuestionTypeEnum = "multiple_choice" | "choice" | "true_false" | "fill_in_the_blank" | "essay" | "matching" | "ordering" | "numeric" | "hotspot" | "inline_choice" | "scenario" | "spreadsheet";
+/** Scoring strategy for scenario questions. */
+export type ScenarioScoringMode = "per_question" | "all_or_nothing";
 export interface AnswerOption {
     uid: string;
     content: string;
@@ -12,12 +14,115 @@ export interface SessionAnswer {
     content?: string;
     confidence?: string;
 }
+/** A pair linking a left-side item to its correct right-side target. */
+export interface MatchingPair {
+    uid: string;
+    /** Left-side item content (HTML) */
+    item: string;
+    /** Right-side target content (HTML) */
+    target: string;
+    sequence: number;
+}
+/** A clickable region on a hotspot image. Coordinates are percentages (0–100). */
+export interface HotspotRegion {
+    uid: string;
+    shape: "rect" | "circle";
+    /** rect: [x, y, width, height]; circle: [centerX, centerY, radius] */
+    coords: number[];
+    isCorrect?: boolean;
+    label?: string;
+}
+/** A dropdown blank embedded in an inline-choice (cloze) passage. */
+export interface InlineBlank {
+    uid: string;
+    options: {
+        uid: string;
+        content: string;
+        isCorrect?: boolean;
+    }[];
+    sequence: number;
+}
+/** A column definition for a spreadsheet question. */
+export interface SpreadsheetColumn {
+    uid: string;
+    /** Column header text */
+    label: string;
+    /** Data type hint for input rendering and scoring */
+    type: "text" | "numeric" | "currency";
+    /** Column width in rems (default 8) */
+    width?: number;
+}
+/** A single cell in a spreadsheet row. */
+export interface SpreadsheetCell {
+    /** Unique identifier — becomes the answerUid in SessionAnswer */
+    uid: string;
+    /** Which column this cell belongs to */
+    columnUid: string;
+    /** When true, cell is pre-filled and not editable */
+    locked: boolean;
+    /** Display value for locked cells, or pre-fill for editable cells */
+    value?: string;
+    /** Expected answer for grading (editable cells only) */
+    correctAnswer?: string;
+    /** Acceptable numeric deviation (default 0 = exact match) */
+    tolerance?: number;
+    /** Hint shown in review mode (e.g., "= Revenue – Expenses") */
+    formula?: string;
+}
+/** A row in a spreadsheet question grid. */
+export interface SpreadsheetRow {
+    uid: string;
+    /** Optional row header label (e.g., "Cash", "Accounts Receivable") */
+    label?: string;
+    /** Ordered cells — one per column */
+    cells: SpreadsheetCell[];
+    /** Renders as a bold section divider row */
+    isHeader?: boolean;
+    /** Renders in table footer with top border */
+    isTotals?: boolean;
+}
+/** Content blocks associated with a question for open-book reference. */
+export interface QuestionMaterial {
+    /** UID of the question this material is linked to */
+    questionUid: string;
+    /** Display label for the material group (e.g., "Chapter 3: Bonds") */
+    label?: string;
+    /** Content blocks to render in the materials drawer */
+    blocks: import('../content/types').LessonBlock[];
+}
 export interface QuestionData {
     uid: string;
     type: QuestionTypeEnum;
+    /** Question prompt (HTML) */
     content: string;
+    /** Explanation shown in review mode (HTML) */
     explanation?: string;
+    /** Answer options for choice / multiple_choice / true_false / ordering */
     answers?: AnswerOption[];
+    /** Matching-specific: pairs of items and targets */
+    matchingPairs?: MatchingPair[];
+    /** Numeric-specific: correct answer */
+    numericAnswer?: number;
+    /** Numeric-specific: acceptable deviation (default 0 = exact) */
+    numericTolerance?: number;
+    /** Numeric-specific: unit label displayed after input */
+    numericUnit?: string;
+    /** Hotspot-specific: image URL */
+    hotspotImageUrl?: string;
+    /** Hotspot-specific: clickable regions */
+    hotspotRegions?: HotspotRegion[];
+    /** Hotspot-specific: allow selecting multiple regions */
+    hotspotMultiSelect?: boolean;
+    /** InlineChoice-specific: dropdown blanks embedded in content */
+    inlineBlanks?: InlineBlank[];
+    /** Scenario-specific: sub-questions grouped under this scenario's shared context */
+    scenarioQuestions?: QuestionData[];
+    /** Scenario-specific: how the scenario is scored (default "per_question") */
+    scenarioScoringMode?: ScenarioScoringMode;
+    /** Spreadsheet-specific: column definitions */
+    spreadsheetColumns?: SpreadsheetColumn[];
+    /** Spreadsheet-specific: row data with cells */
+    spreadsheetRows?: SpreadsheetRow[];
 }
 /**
  * Shared props interface for all question type components.

package/dist/questions/use-drag-reorder.d.ts

@@ -0,0 +1,17 @@
+interface UseDragReorderOptions<T> {
+    items: T[];
+    onReorder: (items: T[]) => void;
+    disabled?: boolean;
+}
+export declare function useDragReorder<T>({ items, onReorder, disabled, }: UseDragReorderOptions<T>): {
+    getDragProps: (index: number) => {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+    dragIndex: number | null;
+    dragOverIndex: number | null;
+};
+export {};

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

@@ -1,9 +1,11 @@
+/** Available certificate visual styles */
+export type CertificateVariant = "classic" | "modern" | "elegant" | "academic" | "minimal" | "bold";
 /**
  * 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.
+ * signatory, and verification ID. Supports six visual variants:
+ * classic, modern, elegant, academic, minimal, and bold.
  *
  * @example
  * <CertificateViewer
@@ -11,7 +13,7 @@
  *   courseTitle="Advanced React"
  *   completionDate="2025-03-01"
  *   organizationName="HydraLMS Academy"
- *   variant="modern"
+ *   variant="elegant"
  * />
  */
 export interface CertificateViewerProps {
@@ -32,8 +34,8 @@ export interface CertificateViewerProps {
     };
     /** Unique certificate ID */
     certificateId?: string;
-    /** Certificate template variant */
-    variant?: "classic" | "modern" | "minimal";
+    /** Certificate template variant @default "classic" */
+    variant?: CertificateVariant;
     /** Whether to show print/download actions */
     showActions?: boolean;
     /** Called when print is triggered */

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

@@ -1,2 +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;
+export declare function ExamSession({ questions, initialAnswers, onSubmit, onAnswerChange, timeLimitSeconds, timeElapsedSeconds, autoSubmitOnTimeout, timeWarningThreshold, allowBackNavigation, confirmBeforeSubmit, examTitle, instructions, questionMaterials, isSubmitting, readOnly, className, style, }: ExamSessionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { QuestionData, SessionAnswer } from '../../questions/types';
+import { QuestionData, QuestionMaterial, SessionAnswer } from '../../questions/types';
 /**
  * ExamSession section — a formal timed exam experience.
  *
@@ -43,6 +43,11 @@ export interface ExamSessionProps {
     instructions?: ReactNode;
     /** Whether the submit action is in flight */
     isSubmitting?: boolean;
+    /**
+     * Related materials keyed by question UID. When provided, a "Materials"
+     * button appears in the question header, opening a drawer with content blocks.
+     */
+    questionMaterials?: QuestionMaterial[];
     /** When true, all inputs are disabled */
     readOnly?: boolean;
     /** CSS class name for the root element */

package/dist/sections/ForumBoard/ForumBoard.d.ts

@@ -0,0 +1,8 @@
+import { ForumBoardProps } from './types';
+/**
+ * ForumBoard — a topic listing view for a discussion forum.
+ *
+ * Displays a searchable, sortable list of discussion topics with author info,
+ * reply/like counts, timestamps, and new topic creation.
+ */
+export declare function ForumBoard({ title, topics, onTopicClick, onCreateTopic, sortOrder, onSortChange, searchQuery, onSearchChange, readOnly, className, style, }: ForumBoardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+import { DiscussionUser } from '../DiscussionThread/types';
+export type ForumSortOrder = "newest" | "oldest" | "most_replies" | "most_liked";
+/**
+ * ForumBoard section — a topic listing view for a discussion forum.
+ *
+ * Displays a searchable, sortable list of discussion topics with author info,
+ * reply/like counts, and timestamps. Supports creating new topics inline.
+ *
+ * @example
+ * <ForumBoard
+ *   title="Class Discussion"
+ *   topics={topics}
+ *   onTopicClick={(uid) => openThread(uid)}
+ *   onCreateTopic={(title, content) => createTopic(title, content)}
+ * />
+ */
+export interface ForumBoardProps {
+    /** Forum title */
+    title?: string;
+    /** List of discussion topics */
+    topics: ForumTopic[];
+    /** The currently authenticated user (reserved for future use) */
+    currentUser?: DiscussionUser;
+    /** Called when a topic is clicked */
+    onTopicClick: (topicUid: string) => void;
+    /** Called when a new topic is created */
+    onCreateTopic?: (title: string, content: string) => void;
+    /** Current sort order */
+    sortOrder?: ForumSortOrder;
+    /** Called when sort order changes */
+    onSortChange?: (sort: ForumSortOrder) => void;
+    /** Current search query (controlled) */
+    searchQuery?: string;
+    /** Called when search query changes */
+    onSearchChange?: (query: string) => void;
+    /** When true, disables create and interactions */
+    readOnly?: boolean;
+    /** CSS class name for the root element */
+    className?: string;
+    /** Inline styles for the root element */
+    style?: React.CSSProperties;
+}
+export interface ForumTopic {
+    /** Unique identifier */
+    uid: string;
+    /** Topic title */
+    title: string;
+    /** Topic author */
+    author: DiscussionUser;
+    /** Creation timestamp */
+    createdAt: string;
+    /** Number of replies */
+    replyCount: number;
+    /** Number of likes */
+    likeCount: number;
+    /** Timestamp of the most recent reply */
+    lastReplyAt?: string;
+    /** Whether this topic is pinned to the top */
+    isPinned?: boolean;
+    /** Whether this topic has a marked answer */
+    isAnswered?: boolean;
+    /** Preview text (first ~100 chars of content) */
+    preview?: string;
+}

package/dist/sections/QuizSession/QuizSession.d.ts

@@ -1,2 +1,2 @@
 import { QuizSessionProps } from './types';
-export declare function QuizSession({ questions, initialAnswers, onSubmit, onAnswerChange, timeElapsedSeconds, timeLimitSeconds, isSubmitting, readOnly, className, style, }: QuizSessionProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuizSession({ questions, initialAnswers, onSubmit, onAnswerChange, timeElapsedSeconds, timeLimitSeconds, questionMaterials, isSubmitting, readOnly, className, style, }: QuizSessionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { QuestionData, SessionAnswer } from '../../questions/types';
+import { QuestionData, QuestionMaterial, SessionAnswer } from '../../questions/types';
 /**
  * QuizSession section — a complete assessment session experience.
  *
@@ -37,6 +37,11 @@ export interface QuizSessionProps {
     timeLimitSeconds?: number;
     /** Whether the submit action is currently in flight */
     isSubmitting?: boolean;
+    /**
+     * Related materials keyed by question UID. When provided, a "Materials"
+     * button appears in the question header, opening a drawer with content blocks.
+     */
+    questionMaterials?: QuestionMaterial[];
     /** When true, all inputs are disabled (e.g. after submission) */
     readOnly?: boolean;
     /** CSS class name for the root element */

package/dist/sections/RequirementsChecklist/RequirementsChecklist.d.ts

@@ -0,0 +1,8 @@
+import { RequirementsChecklistProps } from './types';
+/**
+ * RequirementsChecklist — shows completion requirements with checked/unchecked status.
+ *
+ * Displays a vertical list of requirements with an overall progress bar.
+ * Incomplete items can be clicked to navigate to the relevant content.
+ */
+export declare function RequirementsChecklist({ title, requirements, onRequirementClick, className, style, }: RequirementsChecklistProps): import("react/jsx-runtime").JSX.Element;