@hydralms/components 0.2.0 → 0.3.1

package/src/modules/AssignmentModule/AssignmentModule.tsx

@@ -20,6 +20,7 @@ import { Alert, AlertDescription } from "../../ui/alert";
 import { Separator } from "../../ui/separator";
 import { cn } from "../../lib/utils";
 import type { SubmissionData } from "../../sections/AssignmentSubmission/types";
+import { withProGate } from "../../license/withProGate";
 import type { AssignmentModuleProps } from "./types";
 
 type InternalStep =
@@ -39,19 +40,21 @@ const TYPE_LABELS: Record<string, string> = {
  *
  * Steps: Instructions → Work (AssignmentSubmission) → Confirmation.
  */
-export function AssignmentModule({
+function AssignmentModuleBase({
   title,
   instructions,
   dueDate,
   maxScore,
-  submissionTypes,
+  submissionTypes = ["text", "file"],
   fileConstraints,
   rubric,
   existingSubmission,
   status = "not_started",
   grade,
   onSubmit,
+  onComplete,
   onSaveDraft,
+  readOnly = false,
   className,
   style,
 }: AssignmentModuleProps) {
@@ -71,7 +74,7 @@ export function AssignmentModule({
   }, [step.tag]);
 
   const rubricMaxScore = useMemo(() => {
-    if (!rubric) return 0;
+    if (!Array.isArray(rubric)) return 0;
     return rubric.reduce(
       (sum, c) => sum + Math.max(...c.levels.map((l) => l.points)),
       0
@@ -80,11 +83,13 @@ export function AssignmentModule({
 
   function handleSubmit(submission: SubmissionData) {
     onSubmit?.(submission);
+    onComplete?.({ submission, status: "submitted" });
     setStep({ tag: "confirmation", submission });
   }
 
   function handleSaveDraft(submission: SubmissionData) {
     onSaveDraft?.(submission);
+    onComplete?.({ submission, status: "draft" });
   }
 
   const canEdit =
@@ -138,7 +143,7 @@ export function AssignmentModule({
             </div>
 
             {/* Rubric preview */}
-            {rubric && rubric.length > 0 && (
+            {Array.isArray(rubric) && rubric.length > 0 && (
               <>
                 <Separator className="my-6" />
                 <RubricView
@@ -149,11 +154,12 @@ export function AssignmentModule({
             )}
 
             {/* Action */}
-            {canEdit && (
+            {canEdit && !readOnly && (
               <div className="text-center mt-8">
                 <Button
                   size="lg"
                   onClick={() => setStep({ tag: "work" })}
+                  disabled={readOnly}
                 >
                   <Play className="size-4 mr-2" />
                   Start Assignment
@@ -196,6 +202,7 @@ export function AssignmentModule({
           grade={grade}
           onSubmit={handleSubmit}
           onSaveDraft={handleSaveDraft}
+          readOnly={readOnly}
         />
       </div>
     );
@@ -243,7 +250,7 @@ export function AssignmentModule({
                   <AlertDescription>{grade.feedback}</AlertDescription>
                 </Alert>
               )}
-              {rubric && grade.rubricLevels && (
+              {Array.isArray(rubric) && grade.rubricLevels && (
                 <>
                   <Separator className="my-6" />
                   <RubricView
@@ -266,7 +273,7 @@ export function AssignmentModule({
             {submission.textContent && (
               <div className="flex items-start gap-2">
                 <FileText className="size-4 mt-0.5 shrink-0" />
-                <span className="line-clamp-2">{submission.textContent}</span>
+                <span className="line-clamp-2">{submission.textContent.replace(/<[^>]*>/g, "")}</span>
               </div>
             )}
             {submission.files && submission.files.length > 0 && (
@@ -287,7 +294,7 @@ export function AssignmentModule({
           </div>
 
           {/* Edit button */}
-          {canEdit && (
+          {canEdit && !readOnly && (
             <div className="text-center mt-8">
               <Button
                 variant="outline"
@@ -303,3 +310,5 @@ export function AssignmentModule({
     </div>
   );
 }
+
+export const AssignmentModule = withProGate(AssignmentModuleBase, "AssignmentModule");

package/src/modules/AssignmentModule/types.ts

@@ -57,8 +57,12 @@ export interface AssignmentModuleProps {
   };
   /** Called on final submission */
   onSubmit?: (submission: SubmissionData) => void;
+  /** Called when the assignment is submitted or draft-saved, with the full result */
+  onComplete?: (result: AssignmentModuleResult) => void;
   /** Called on draft save */
   onSaveDraft?: (submission: SubmissionData) => void;
+  /** When true, disables interactions for preview/demo mode. @default false */
+  readOnly?: boolean;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */
@@ -69,5 +73,5 @@ export interface AssignmentModuleResult {
   /** The submitted data */
   submission: SubmissionData;
   /** Status after submission */
-  status: string;
+  status: "not_started" | "draft" | "submitted" | "late" | "graded" | "resubmit";
 }

package/src/modules/CertificateModule/CertificateModule.tsx

@@ -6,6 +6,7 @@ import { ProgressRing } from "../../progress/progress-ring";
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import { cn } from "../../lib/utils";
+import { withProGate } from "../../license/withProGate";
 import type { CertificateModuleProps } from "./types";
 
 type InternalStep = { tag: "requirements" } | { tag: "certificate" };
@@ -17,7 +18,7 @@ type InternalStep = { tag: "requirements" } | { tag: "certificate" };
  * Steps: Requirements (checklist + progress) → Certificate (CertificateViewer).
  * The certificate step is only accessible when all requirements are completed.
  */
-export function CertificateModule({
+function CertificateModuleBase({
   courseTitle,
   recipientName,
   organizationName,
@@ -28,15 +29,20 @@ export function CertificateModule({
   requirements,
   overallProgress,
   onRequirementClick,
-  onCertificateEarned,
+  onComplete,
+  readOnly = false,
   className,
   style,
 }: CertificateModuleProps) {
-  const { allComplete, completedCount } = useMemo(() => {
+  const { allComplete, completedCount, derivedProgress } = useMemo(() => {
     const count = requirements.filter((r) => r.completed).length;
-    return { allComplete: count === requirements.length, completedCount: count };
+    const total = requirements.length;
+    const derived = total > 0 ? Math.round((count / total) * 100) : 0;
+    return { allComplete: count === total, completedCount: count, derivedProgress: derived };
   }, [requirements]);
 
+  const displayProgress = overallProgress ?? derivedProgress;
+
   const [step, setStep] = useState<InternalStep>({ tag: "requirements" });
   const contentRef = useRef<HTMLDivElement>(null);
   const earnedFiredRef = useRef(false);
@@ -45,13 +51,16 @@ export function CertificateModule({
     contentRef.current?.focus({ preventScroll: true });
   }, [step.tag]);
 
-  // Fire onCertificateEarned once when certificate step is first shown
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+
+  // Fire onComplete once when certificate step is first shown
   useEffect(() => {
     if (step.tag === "certificate" && !earnedFiredRef.current) {
       earnedFiredRef.current = true;
-      onCertificateEarned?.();
+      onCompleteRef.current?.();
     }
-  }, [step.tag, onCertificateEarned]);
+  }, [step.tag]);
 
   // ─── Requirements Screen ───
   if (step.tag === "requirements") {
@@ -67,7 +76,7 @@ export function CertificateModule({
             {/* Header with progress */}
             <div className="text-center mb-6">
               <ProgressRing
-                value={overallProgress}
+                value={displayProgress}
                 size={100}
                 strokeWidth={8}
                 color={
@@ -88,7 +97,7 @@ export function CertificateModule({
             {/* Requirements checklist */}
             <RequirementsChecklist
               requirements={requirements}
-              onRequirementClick={onRequirementClick}
+              onRequirementClick={readOnly ? undefined : onRequirementClick}
               className="mb-6"
             />
 
@@ -98,6 +107,7 @@ export function CertificateModule({
                 <Button
                   size="lg"
                   onClick={() => setStep({ tag: "certificate" })}
+                  disabled={readOnly}
                 >
                   <Award className="size-4 mr-2" />
                   View Certificate
@@ -159,3 +169,5 @@ export function CertificateModule({
     </div>
   );
 }
+
+export const CertificateModule = withProGate(CertificateModuleBase, "CertificateModule");

package/src/modules/CertificateModule/types.ts

@@ -34,12 +34,14 @@ export interface CertificateModuleProps {
   certificateVariant?: CertificateVariant;
   /** Completion requirements */
   requirements: Requirement[];
-  /** Overall course progress (0-100) */
-  overallProgress: number;
+  /** Overall course progress (0-100). When omitted, derived from requirements completion. */
+  overallProgress?: number;
   /** Called when a requirement item is clicked */
   onRequirementClick?: (uid: string) => void;
-  /** Called when the certificate screen is first displayed */
-  onCertificateEarned?: () => void;
+  /** Called when the certificate is first displayed. @default undefined */
+  onComplete?: () => void;
+  /** When true, disables interactions for preview/demo mode. @default false */
+  readOnly?: boolean;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */

package/src/modules/CourseCatalogModule/CourseCatalogModule.tsx

@@ -0,0 +1,126 @@
+import { useState, useRef, useEffect } from "react";
+import { ArrowLeft } from "lucide-react";
+import { CourseCatalog } from "../../sections/CourseCatalog/CourseCatalog";
+import { EnrollmentWizard } from "../../sections/EnrollmentWizard/EnrollmentWizard";
+import { Button } from "../../ui/button";
+import { Card, CardContent } from "../../ui/card";
+import { cn } from "../../lib/utils";
+import { withProGate } from "../../license/withProGate";
+import type { CourseCatalogModuleProps } from "./types";
+
+type InternalStep =
+  | { tag: "browse" }
+  | { tag: "enroll"; courseUid: string };
+
+/**
+ * CourseCatalogModule — a browse-and-enroll course catalog module.
+ *
+ * Master-detail layout: CourseCatalog (browse) ↔ EnrollmentWizard (enroll).
+ * Clicking a course drills into the enrollment flow; a back button returns to browsing.
+ */
+function CourseCatalogModuleBase({
+  title,
+  courses = [],
+  categories = [],
+  enrollmentData,
+  onEnroll,
+  onCourseOpen,
+  readOnly = false,
+  className,
+  style,
+}: CourseCatalogModuleProps) {
+  const [step, setStep] = useState<InternalStep>({ tag: "browse" });
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    contentRef.current?.focus({ preventScroll: true });
+  }, [step.tag]);
+
+  function handleCourseClick(courseUid: string) {
+    if (enrollmentData?.[courseUid]) {
+      setStep({ tag: "enroll", courseUid });
+    } else {
+      onCourseOpen?.(courseUid);
+    }
+  }
+
+  function handleBack() {
+    setStep({ tag: "browse" });
+  }
+
+  function handleEnrollConfirm(courseUid: string) {
+    onEnroll(courseUid);
+    setStep({ tag: "browse" });
+  }
+
+  return (
+    <div
+      ref={contentRef}
+      tabIndex={-1}
+      className={cn("outline-none", className)}
+      style={style}
+    >
+      {title && step.tag === "browse" && (
+        <h2 className="text-xl font-bold text-foreground mb-4">{title}</h2>
+      )}
+
+      {step.tag === "enroll" ? (
+        /* --- Enrollment View --- */
+        <div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            className="mb-4"
+          >
+            <ArrowLeft className="size-4 mr-1.5" />
+            Back to Catalog
+          </Button>
+          {enrollmentData?.[step.courseUid] ? (
+            <EnrollmentWizard
+              course={enrollmentData[step.courseUid].course}
+              prerequisites={enrollmentData[step.courseUid].prerequisites}
+              onEnroll={handleEnrollConfirm}
+              onCancel={handleBack}
+            />
+          ) : (
+            /* Fallback when enrollment data is not yet available */
+            <Card>
+              <CardContent className="pt-6">
+                <h3 className="text-lg font-semibold text-foreground mb-2">
+                  {courses.find((c) => c.uid === step.courseUid)?.title ??
+                    "Course"}
+                </h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Enrollment details are loading. You can enroll directly below.
+                </p>
+                <div className="flex gap-2">
+                  <Button variant="outline" onClick={handleBack}>
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={() => handleEnrollConfirm(step.courseUid)}
+                    disabled={readOnly}
+                  >
+                    Enroll Now
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      ) : (
+        /* --- Browse View --- */
+        <CourseCatalog
+          courses={courses}
+          categories={categories}
+          onCourseClick={(course) => handleCourseClick(course.uid)}
+          onEnroll={(course) => handleCourseClick(course.uid)}
+          readOnly={readOnly}
+        />
+      )}
+    </div>
+  );
+}
+
+export const CourseCatalogModule = withProGate(CourseCatalogModuleBase, "CourseCatalogModule");

package/src/modules/CourseCatalogModule/types.ts

@@ -0,0 +1,47 @@
+import type { CourseInfo } from "../../sections/CourseCatalog/types";
+import type {
+  EnrollmentCourse,
+  Prerequisite,
+} from "../../sections/EnrollmentWizard/types";
+
+/**
+ * CourseCatalogModule — a browse-and-enroll course catalog module.
+ *
+ * Master-detail layout: CourseCatalog (browse) ↔ EnrollmentWizard (enroll).
+ * Clicking a course drills into the enrollment flow; a back button returns to browsing.
+ *
+ * @example
+ * <CourseCatalogModule
+ *   title="Course Catalog"
+ *   courses={courses}
+ *   categories={categories}
+ *   enrollmentData={enrollmentData}
+ *   onEnroll={(courseUid) => handleEnroll(courseUid)}
+ * />
+ */
+export interface CourseCatalogModuleProps {
+  /** Catalog title */
+  title?: string;
+  /** Courses to display */
+  courses: CourseInfo[];
+  /** Optional categories for filtering */
+  categories?: { uid: string; label: string }[];
+  /** Enrollment data keyed by course UID — provides course details and prerequisites for the enrollment wizard */
+  enrollmentData?: Record<
+    string,
+    {
+      course: EnrollmentCourse;
+      prerequisites?: Prerequisite[];
+    }
+  >;
+  /** Called when a user confirms enrollment */
+  onEnroll: (courseUid: string) => void;
+  /** Called when a course is opened (for lazy-loading enrollment data) */
+  onCourseOpen?: (courseUid: string) => void;
+  /** When true, disables interactions for preview/demo mode. @default false */
+  readOnly?: boolean;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}

package/src/modules/CoursePlayer/CoursePlayer.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, useEffect } from "react";
+import { useCallback, useState, useMemo, useRef, useEffect } from "react";
 import {
   ChevronLeft,
   ChevronRight,
@@ -23,9 +23,10 @@ import { Button } from "../../ui/button";
 import { flattenLeaves } from "../../utils/flatten-leaves";
 import { cn } from "../../lib/utils";
 import type { CurriculumItem } from "../../curriculum/types";
+import { withProGate } from "../../license/withProGate";
 import type { CoursePlayerProps, CoursePlayerItem } from "./types";
 
-export function CoursePlayer({
+function CoursePlayerBase({
   courseTitle,
   curriculum,
   progress,
@@ -71,33 +72,49 @@ export function CoursePlayer({
 
   const activeItem = itemMap.get(activeUid);
 
+  const videoConfig = useMemo(
+    () => activeItem?.type === "video"
+      ? { src: activeItem.src, poster: activeItem.poster, title: activeItem.title }
+      : null,
+    // activeItem is looked up from a stable Map — uid change means new item
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeItem?.uid],
+  );
+
   useEffect(() => {
     contentRef.current?.focus({ preventScroll: true });
   }, [activeUid]);
 
-  function navigateTo(uid: string) {
+  const onItemChangeRef = useRef(onItemChange);
+  onItemChangeRef.current = onItemChange;
+  const onItemCompleteRef = useRef(onItemComplete);
+  onItemCompleteRef.current = onItemComplete;
+
+  const navigateTo = useCallback((uid: string) => {
     setActiveUid(uid);
-    onItemChange?.(uid);
-  }
+    onItemChangeRef.current?.(uid);
+  }, []);
 
-  function handleItemClick(item: CurriculumItem) {
+  const handleItemClick = useCallback((item: CurriculumItem) => {
     if (!item.children || item.children.length === 0) {
       navigateTo(item.uid);
     }
-  }
+  }, [navigateTo]);
 
-  function handleMarkComplete() {
+  const handleMarkComplete = useCallback(() => {
     setCompletedUids((prev) => new Set(prev).add(activeUid));
-    onItemComplete?.(activeUid);
-  }
+    onItemCompleteRef.current?.(activeUid);
+  }, [activeUid]);
 
-  function handleNext() {
-    if (hasNext) navigateTo(leafUids[currentIndex + 1]);
-  }
+  const handleNext = useCallback(() => {
+    const idx = leafUids.indexOf(activeUid);
+    if (idx < leafUids.length - 1) navigateTo(leafUids[idx + 1]);
+  }, [leafUids, activeUid, navigateTo]);
 
-  function handlePrevious() {
-    if (hasPrevious) navigateTo(leafUids[currentIndex - 1]);
-  }
+  const handlePrevious = useCallback(() => {
+    const idx = leafUids.indexOf(activeUid);
+    if (idx > 0) navigateTo(leafUids[idx - 1]);
+  }, [leafUids, activeUid, navigateTo]);
 
   // Build combined progress for CourseOutline
   const combinedProgress = useMemo(() => {
@@ -169,7 +186,7 @@ export function CoursePlayer({
         {/* Content */}
         <div ref={contentRef} tabIndex={-1} className="flex-1 overflow-y-auto p-6 outline-none">
           {activeItem ? (
-            renderContent(activeItem, readOnly, handleMarkComplete, isCurrentCompleted, handleNext, hasNext, nextItem)
+            renderContent(activeItem, readOnly, handleMarkComplete, isCurrentCompleted, handleNext, hasNext, nextItem, videoConfig)
           ) : (
             <EmptyState
               title="No content selected"
@@ -233,6 +250,7 @@ function renderContent(
   onNext: () => void,
   hasNext: boolean,
   nextItem: CoursePlayerItem | null | undefined,
+  videoConfig: { src: string; poster?: string; title: string } | null,
 ) {
   switch (item.type) {
     case "lesson":
@@ -250,11 +268,8 @@ function renderContent(
     case "video":
       return (
         <LecturePlayer
-          video={{
-            src: item.src,
-            poster: item.poster,
-            title: item.title,
-          }}
+          video={videoConfig ?? { src: "", title: item.title }}
+          onComplete={isCompleted ? undefined : onMarkComplete}
         />
       );
     case "quiz":
@@ -275,3 +290,5 @@ function renderContent(
       );
   }
 }
+
+export const CoursePlayer = withProGate(CoursePlayerBase, "CoursePlayer");

package/src/modules/DiscussionModule/DiscussionModule.tsx

@@ -1,10 +1,12 @@
-import { useState, useRef, useEffect } from "react";
+import { useCallback, useState, useRef, useEffect } from "react";
 import { ArrowLeft } from "lucide-react";
 import { ForumBoard } from "../../sections/ForumBoard/ForumBoard";
 import { DiscussionThread } from "../../sections/DiscussionThread/DiscussionThread";
+import { EmptyState } from "../../common";
 import { Button } from "../../ui/button";
 import { cn } from "../../lib/utils";
 import type { ForumSortOrder } from "../../sections/ForumBoard/types";
+import { withProGate } from "../../license/withProGate";
 import type { DiscussionModuleProps } from "./types";
 
 /**
@@ -13,11 +15,11 @@ import type { DiscussionModuleProps } from "./types";
  * Panel-based layout: ForumBoard (topic listing) ↔ DiscussionThread (thread detail).
  * Clicking a topic drills into the thread; a back button returns to the board.
  */
-export function DiscussionModule({
+function DiscussionModuleBase({
   forumTitle,
-  topics,
+  topics = [],
   currentUser,
-  threads,
+  threads = {},
   onCreateTopic,
   onReply,
   onToggleLike,
@@ -36,20 +38,44 @@ export function DiscussionModule({
     contentRef.current?.focus({ preventScroll: true });
   }, [activeTopicUid]);
 
-  function handleTopicClick(topicUid: string) {
+  const onTopicOpenRef = useRef(onTopicOpen);
+  onTopicOpenRef.current = onTopicOpen;
+
+  const handleTopicClick = useCallback((topicUid: string) => {
     setActiveTopicUid(topicUid);
-    onTopicOpen?.(topicUid);
-  }
+    onTopicOpenRef.current?.(topicUid);
+  }, []);
 
-  function handleBack() {
+  const handleBack = useCallback(() => {
     setActiveTopicUid(null);
-  }
+  }, []);
 
   const activeThread = activeTopicUid ? threads[activeTopicUid] : null;
   const activeTopic = activeTopicUid
     ? topics.find((t) => t.uid === activeTopicUid)
     : null;
 
+  const handleReply = useCallback(
+    (parentUid: string, content: string) => {
+      if (activeTopicUid) onReply?.(activeTopicUid, parentUid, content);
+    },
+    [activeTopicUid, onReply],
+  );
+
+  const handleToggleLike = useCallback(
+    (postUid: string) => {
+      if (activeTopicUid) onToggleLike?.(activeTopicUid, postUid);
+    },
+    [activeTopicUid, onToggleLike],
+  );
+
+  const handleMarkAnswer = useCallback(
+    (postUid: string) => {
+      if (activeTopicUid) onMarkAnswer?.(activeTopicUid, postUid);
+    },
+    [activeTopicUid, onMarkAnswer],
+  );
+
   return (
     <div
       ref={contentRef}
@@ -74,22 +100,29 @@ export function DiscussionModule({
             rootPost={activeThread.rootPost}
             replies={activeThread.replies}
             currentUser={currentUser}
-            onReply={(parentUid, content) =>
-              onReply?.(activeTopicUid, parentUid, content)
-            }
-            onToggleLike={
-              onToggleLike
-                ? (postUid) => onToggleLike(activeTopicUid, postUid)
-                : undefined
-            }
-            onMarkAnswer={
-              onMarkAnswer
-                ? (postUid) => onMarkAnswer(activeTopicUid, postUid)
-                : undefined
-            }
+            onReply={handleReply}
+            onToggleLike={onToggleLike ? handleToggleLike : undefined}
+            onMarkAnswer={onMarkAnswer ? handleMarkAnswer : undefined}
             readOnly={readOnly}
           />
         </div>
+      ) : activeTopicUid && !activeThread ? (
+        /* ─── Empty Thread State ─── */
+        <div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            className="mb-4"
+          >
+            <ArrowLeft className="size-4 mr-1.5" />
+            Back to Topics
+          </Button>
+          <EmptyState
+            title="No discussion yet"
+            description="Be the first to start this conversation."
+          />
+        </div>
       ) : (
         /* ─── Forum Board View ─── */
         <ForumBoard
@@ -108,3 +141,5 @@ export function DiscussionModule({
     </div>
   );
 }
+
+export const DiscussionModule = withProGate(DiscussionModuleBase, "DiscussionModule");