@hydralms/components 0.1.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydralms/components",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "React component library for LMS platforms",
   "license": "MIT",
   "author": "HydraLMS",
@@ -26,9 +26,9 @@
     "course"
   ],
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "src",
     "dist",
@@ -40,96 +40,32 @@
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./sections": {
-      "types": "./src/sections/index.ts",
-      "default": "./src/sections/index.ts"
+      "types": "./dist/sections/index.d.ts",
+      "import": "./dist/sections.js",
+      "require": "./dist/sections.cjs"
     },
-    "./sections/QuizSession": {
-      "types": "./src/sections/QuizSession/QuizSession.tsx",
-      "default": "./src/sections/QuizSession/QuizSession.tsx"
-    },
-    "./sections/LecturePlayer": {
-      "types": "./src/sections/LecturePlayer/LecturePlayer.tsx",
-      "default": "./src/sections/LecturePlayer/LecturePlayer.tsx"
-    },
-    "./sections/FlashcardStudySession": {
-      "types": "./src/sections/FlashcardStudySession/FlashcardStudySession.tsx",
-      "default": "./src/sections/FlashcardStudySession/FlashcardStudySession.tsx"
-    },
-    "./sections/AssessmentReview": {
-      "types": "./src/sections/AssessmentReview/AssessmentReview.tsx",
-      "default": "./src/sections/AssessmentReview/AssessmentReview.tsx"
-    },
-    "./sections/CourseOutline": {
-      "types": "./src/sections/CourseOutline/CourseOutline.tsx",
-      "default": "./src/sections/CourseOutline/CourseOutline.tsx"
-    },
-    "./sections/ScrollableQuiz": {
-      "types": "./src/sections/ScrollableQuiz/ScrollableQuiz.tsx",
-      "default": "./src/sections/ScrollableQuiz/ScrollableQuiz.tsx"
-    },
-    "./sections/PracticeQuiz": {
-      "types": "./src/sections/PracticeQuiz/PracticeQuiz.tsx",
-      "default": "./src/sections/PracticeQuiz/PracticeQuiz.tsx"
-    },
-    "./sections/ExamSession": {
-      "types": "./src/sections/ExamSession/ExamSession.tsx",
-      "default": "./src/sections/ExamSession/ExamSession.tsx"
-    },
-    "./sections/SurveyForm": {
-      "types": "./src/sections/SurveyForm/SurveyForm.tsx",
-      "default": "./src/sections/SurveyForm/SurveyForm.tsx"
-    },
-    "./sections/LessonPage": {
-      "types": "./src/sections/LessonPage/LessonPage.tsx",
-      "default": "./src/sections/LessonPage/LessonPage.tsx"
-    },
-    "./sections/ResourceLibrary": {
-      "types": "./src/sections/ResourceLibrary/ResourceLibrary.tsx",
-      "default": "./src/sections/ResourceLibrary/ResourceLibrary.tsx"
-    },
-    "./sections/AnnouncementFeed": {
-      "types": "./src/sections/AnnouncementFeed/AnnouncementFeed.tsx",
-      "default": "./src/sections/AnnouncementFeed/AnnouncementFeed.tsx"
-    },
-    "./sections/DiscussionThread": {
-      "types": "./src/sections/DiscussionThread/DiscussionThread.tsx",
-      "default": "./src/sections/DiscussionThread/DiscussionThread.tsx"
-    },
-    "./sections/AssignmentSubmission": {
-      "types": "./src/sections/AssignmentSubmission/AssignmentSubmission.tsx",
-      "default": "./src/sections/AssignmentSubmission/AssignmentSubmission.tsx"
-    },
-    "./sections/GradebookTable": {
-      "types": "./src/sections/GradebookTable/GradebookTable.tsx",
-      "default": "./src/sections/GradebookTable/GradebookTable.tsx"
-    },
-    "./sections/ProgressDashboard": {
-      "types": "./src/sections/ProgressDashboard/ProgressDashboard.tsx",
-      "default": "./src/sections/ProgressDashboard/ProgressDashboard.tsx"
-    },
-    "./sections/CertificateViewer": {
-      "types": "./src/sections/CertificateViewer/CertificateViewer.tsx",
-      "default": "./src/sections/CertificateViewer/CertificateViewer.tsx"
+    "./sections/*": {
+      "types": "./src/sections/*/index.ts",
+      "default": "./src/sections/*/index.ts"
     },
     "./modules": {
-      "types": "./src/modules/index.ts",
-      "default": "./src/modules/index.ts"
+      "types": "./dist/modules/index.d.ts",
+      "import": "./dist/modules.js",
+      "require": "./dist/modules.cjs"
     },
-    "./modules/QuizModule": {
-      "types": "./src/modules/QuizModule/QuizModule.tsx",
-      "default": "./src/modules/QuizModule/QuizModule.tsx"
+    "./modules/*": {
+      "types": "./src/modules/*/index.ts",
+      "default": "./src/modules/*/index.ts"
     },
-    "./modules/FlashcardLab": {
-      "types": "./src/modules/FlashcardLab/FlashcardLab.tsx",
-      "default": "./src/modules/FlashcardLab/FlashcardLab.tsx"
-    },
-    "./modules/CoursePlayer": {
-      "types": "./src/modules/CoursePlayer/CoursePlayer.tsx",
-      "default": "./src/modules/CoursePlayer/CoursePlayer.tsx"
+    "./license": {
+      "types": "./dist/license/index.d.ts",
+      "import": "./dist/license.js",
+      "require": "./dist/license.cjs"
     },
     "./provider": {
       "types": "./src/provider/index.ts",
@@ -171,63 +107,20 @@
       "types": "./src/social/index.ts",
       "default": "./src/social/index.ts"
     },
-    "./ui/card": {
-      "types": "./src/ui/card.tsx",
-      "default": "./src/ui/card.tsx"
-    },
-    "./ui/progress": {
-      "types": "./src/ui/progress.tsx",
-      "default": "./src/ui/progress.tsx"
-    },
-    "./provider/HydraProvider": {
-      "types": "./src/provider/HydraProvider.tsx",
-      "default": "./src/provider/HydraProvider.tsx"
-    },
-    "./*": "./src/*",
-    "./styles.css": "./src/styles/globals.css",
-    "./styles/globals.css": "./src/styles/globals.css",
+    "./styles.css": "./dist/components.css",
     "./package.json": "./package.json"
   },
-  "publishConfig": {
-    "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"
-      },
-      "./sections": {
-        "types": "./dist/sections/index.d.ts",
-        "import": "./dist/sections.js",
-        "require": "./dist/sections.cjs"
-      },
-      "./modules": {
-        "types": "./dist/modules/index.d.ts",
-        "import": "./dist/modules.js",
-        "require": "./dist/modules.cjs"
-      },
-      "./styles.css": "./dist/components.css",
-      "./package.json": "./package.json"
-    }
-  },
-  "scripts": {
-    "build": "tsc -b && vite build",
-    "dev": "vite build --watch",
-    "generate-docs": "tsx scripts/generate-docs.ts",
-    "check-docs": "tsx scripts/generate-docs.ts --check",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "tailwindcss": "^4.0.0"
   },
   "dependencies": {
+    "@tiptap/extension-link": "^3.20.1",
+    "@tiptap/extension-placeholder": "^3.20.1",
+    "@tiptap/extension-underline": "^3.20.1",
+    "@tiptap/react": "^3.20.1",
+    "@tiptap/starter-kit": "^3.20.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
@@ -244,11 +137,21 @@
     "jsdom": "^28.1.0",
     "react": "^19.0.0",
     "react-docgen-typescript": "^2.3.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0",
     "tsx": "^4.19.0",
     "typescript": "~5.7.0",
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.0.0",
     "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "generate-docs": "tsx scripts/generate-docs.ts",
+    "check-docs": "tsx scripts/generate-docs.ts --check",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}

package/src/assessment-toolbar/assessment-toolbar.tsx

@@ -2,6 +2,7 @@ import { ChevronLeft, ChevronRight, Send } from "lucide-react";
 import { TimerDisplay } from "./timer-display";
 import { QuestionNavigator } from "./question-navigator";
 import { Button } from "../ui/button";
+import { cn } from "../lib/utils";
 import type { AssessmentToolbarProps } from "./types";
 
 export const AssessmentToolbar = ({
@@ -16,7 +17,6 @@ export const AssessmentToolbar = ({
   timeLimitSeconds,
   questions,
   onNavigateToQuestion,
-  onToggleFlag,
   currentQuestionUid,
   isCompleted = false,
   isSubmitting = false,
@@ -27,70 +27,75 @@ export const AssessmentToolbar = ({
   const showNavigator = questions && questions.length > 0;
 
   return (
-    <div className="rounded-lg border border-border overflow-hidden shadow-sm">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2.5 bg-muted border-b border-border">
-        <span className="text-sm font-medium text-foreground">
-          Question{" "}
-          <span className="font-bold">{currentQuestionIndex + 1}</span>
-          {" "}of {totalQuestions}
-        </span>
+    <div className="flex items-center gap-2 rounded-lg border border-border bg-muted px-2 py-1.5 shadow-sm">
+      {/* Previous */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-8 shrink-0 rounded-md"
+        disabled={!hasPrevious || readOnly}
+        onClick={onPrevious}
+      >
+        <ChevronLeft size={16} />
+        <span className="sr-only">Previous</span>
+      </Button>
 
-        {showTimer && (
-          <TimerDisplay
-            timeElapsedSeconds={timeElapsedSeconds}
-            timeLimitSeconds={timeLimitSeconds}
-          />
-        )}
-      </div>
+      {/* Question indicator (shown when no navigator) */}
+      {!showNavigator && (
+        <span className="text-xs font-medium text-muted-foreground whitespace-nowrap">
+          <span className="font-bold text-foreground">{currentQuestionIndex + 1}</span>
+          <span className="mx-0.5">/</span>
+          {totalQuestions}
+        </span>
+      )}
 
-      {/* Navigator */}
+      {/* Navigator chips */}
       {showNavigator && (
-        <div className="px-4 py-3 border-b border-border">
+        <div className="min-w-0 flex-1 overflow-x-auto [scrollbar-width:none]">
           <QuestionNavigator
             questions={questions}
             currentQuestionUid={currentQuestionUid}
             onNavigate={onNavigateToQuestion}
-            onToggleFlag={onToggleFlag}
             readOnly={readOnly}
           />
         </div>
       )}
 
-      {/* Navigation buttons */}
-      <div className="flex items-center justify-between gap-2 px-4 py-3">
+      {/* Spacer when no navigator */}
+      {!showNavigator && <div className="flex-1" />}
+
+      {/* Timer */}
+      {showTimer && (
+        <TimerDisplay
+          timeElapsedSeconds={timeElapsedSeconds}
+          timeLimitSeconds={timeLimitSeconds}
+        />
+      )}
+
+      {/* Next / Submit */}
+      {!hasNext || isCompleted ? (
         <Button
-          variant="outline"
+          variant={isCompleted ? "secondary" : "default"}
           size="sm"
-          className="rounded-lg"
-          disabled={!hasPrevious || readOnly}
-          onClick={onPrevious}
+          className={cn("shrink-0 rounded-md", isSubmitting && "gap-0")}
+          onClick={onSubmit}
+          disabled={readOnly || isSubmitting}
         >
-          <ChevronLeft size={16} /> Previous
+          {isSubmitting ? "..." : isCompleted ? "Review" : "Submit"}
+          {!isSubmitting && <Send size={14} />}
         </Button>
-
-        {!hasNext || isCompleted ? (
-          <Button
-            variant={isCompleted ? "secondary" : "default"}
-            size="sm"
-            className="rounded-lg"
-            onClick={onSubmit}
-            disabled={readOnly || isSubmitting}
-          >
-            {isSubmitting ? "Submitting..." : isCompleted ? "Review" : "Submit"}
-            {!isSubmitting && <Send size={14} />}
-          </Button>
-        ) : (
-          <Button
-            size="sm"
-            className="rounded-lg"
-            disabled={!hasNext || readOnly}
-            onClick={onNext}
-          >
-            Next <ChevronRight size={16} />
-          </Button>
-        )}
-      </div>
+      ) : (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0 rounded-md"
+          disabled={!hasNext || readOnly}
+          onClick={onNext}
+        >
+          <ChevronRight size={16} />
+          <span className="sr-only">Next</span>
+        </Button>
+      )}
     </div>
   );
 };

package/src/assessment-toolbar/index.ts

@@ -1,10 +1,16 @@
 export { AssessmentToolbar } from "./assessment-toolbar";
 export { TimerDisplay } from "./timer-display";
 export { QuestionNavigator } from "./question-navigator";
+export { QuestionHeaderBar } from "./question-header-bar";
+export { QuestionMaterialsDrawer } from "./question-materials-drawer";
+export { useCountdown } from "./use-countdown";
 
 export type {
   AssessmentToolbarProps,
   TimerDisplayProps,
   QuestionNavigatorProps,
   QuestionNavigatorItem,
+  QuestionHeaderBarProps,
+  QuestionMaterialsDrawerProps,
 } from "./types";
+export type { UseCountdownOptions, UseCountdownReturn } from "./use-countdown";

package/src/assessment-toolbar/question-header-bar.tsx

@@ -0,0 +1,61 @@
+import { BookOpen, Flag } from "lucide-react";
+import { Button } from "../ui/button";
+import { cn } from "../lib/utils";
+import type { QuestionHeaderBarProps } from "./types";
+
+export const QuestionHeaderBar = ({
+  questionNumber,
+  totalQuestions,
+  isFlagged,
+  onToggleFlag,
+  hasMaterials = false,
+  onOpenMaterials,
+  readOnly = false,
+}: QuestionHeaderBarProps) => {
+  return (
+    <div className="flex items-center justify-between pb-3 border-b border-border">
+      <span className="text-sm font-semibold text-foreground">
+        Question {questionNumber}{" "}
+        <span className="font-normal text-muted-foreground">
+          of {totalQuestions}
+        </span>
+      </span>
+
+      {!readOnly && (
+        <div className="flex items-center gap-1">
+          {hasMaterials && onOpenMaterials && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-1.5 text-muted-foreground hover:text-foreground"
+              onClick={onOpenMaterials}
+            >
+              <BookOpen size={14} />
+              Related Material
+            </Button>
+          )}
+
+          {onToggleFlag && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                "size-8",
+                isFlagged
+                  ? "text-warning hover:text-warning/80"
+                  : "text-muted-foreground hover:text-warning",
+              )}
+              onClick={onToggleFlag}
+              aria-label={isFlagged ? "Unflag question" : "Flag question"}
+            >
+              <Flag
+                size={14}
+                fill={isFlagged ? "currentColor" : "none"}
+              />
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/assessment-toolbar/question-materials-drawer.tsx

@@ -0,0 +1,55 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerBody,
+  DrawerClose,
+} from "../ui/drawer";
+import { ContentBlock } from "../content";
+import type { QuestionMaterialsDrawerProps } from "./types";
+
+export const QuestionMaterialsDrawer = ({
+  open,
+  onOpenChange,
+  materials,
+  questionNumber,
+}: QuestionMaterialsDrawerProps) => {
+  if (!materials.length) return null;
+
+  const drawerTitle = questionNumber
+    ? `Question ${questionNumber} — Related Material`
+    : "Related Material";
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} side="right">
+      <DrawerContent size="lg" scrollLock={false}>
+        <DrawerHeader className="flex-row items-center justify-between">
+          <DrawerTitle>{drawerTitle}</DrawerTitle>
+          <DrawerClose />
+        </DrawerHeader>
+        <DrawerBody>
+          <div className="space-y-6">
+            {materials.map((material, mi) => (
+              <section key={mi}>
+                {material.label && (
+                  <h3 className="text-sm font-semibold text-foreground mb-3">
+                    {material.label}
+                  </h3>
+                )}
+                <div className="space-y-4">
+                  {material.blocks.map((block, bi) => (
+                    <ContentBlock key={bi} block={block} readOnly />
+                  ))}
+                </div>
+                {mi < materials.length - 1 && (
+                  <div className="border-b border-border mt-6" />
+                )}
+              </section>
+            ))}
+          </div>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};

package/src/assessment-toolbar/question-navigator.tsx

@@ -1,6 +1,5 @@
-import { Flag } from "lucide-react";
+import { memo } from "react";
 import type { QuestionNavigatorProps } from "./types";
-import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
 import { cn } from "../lib/utils";
 
 const CHIP_CLASSES = {
@@ -20,13 +19,12 @@ const getChipVariant = (
   return "default";
 };
 
-export const QuestionNavigator = ({
+export const QuestionNavigator = memo(function QuestionNavigator({
   questions,
   currentQuestionUid,
   onNavigate,
-  onToggleFlag,
   readOnly = false,
-}: QuestionNavigatorProps) => {
+}: QuestionNavigatorProps) {
   const getTooltipContent = (q: (typeof questions)[0]): string => {
     const parts: string[] = [`Question ${q.sequence + 1}`];
     if (q.isFlagged) parts.push("Flagged");
@@ -36,51 +34,30 @@ export const QuestionNavigator = ({
   };
 
   return (
-    <div className="flex flex-wrap gap-1.5">
+    <div className="flex gap-1">
       {questions.map((q) => {
         const variant = getChipVariant(q, currentQuestionUid);
         return (
-          <div
+          <button
+            type="button"
             key={q.uid}
             title={getTooltipContent(q)}
+            aria-label={getTooltipContent(q)}
+            aria-current={q.uid === currentQuestionUid ? "step" : undefined}
             className={cn(
-              "inline-flex items-center gap-1 px-2 py-1 rounded-md border transition-all duration-150",
+              "inline-flex items-center justify-center px-1.5 py-0.5 rounded border text-[11px] leading-tight transition-all duration-150 min-w-5.5",
               CHIP_CLASSES[variant],
               readOnly ? "cursor-default" : "cursor-pointer hover:shadow-sm hover:-translate-y-px",
             )}
             onClick={readOnly ? undefined : () => onNavigate?.(q.uid)}
+            disabled={readOnly}
           >
-            <span className="text-xs font-semibold min-w-4 text-center">
+            <span className="font-semibold min-w-3.5 text-center">
               {q.sequence + 1}
             </span>
-            {!readOnly && onToggleFlag && (
-              <Tooltip>
-                <TooltipTrigger>
-                  <span
-                    role="button"
-                    aria-label={q.isFlagged ? "Unflag question" : "Flag question"}
-                    className={cn(
-                      "inline-flex cursor-pointer transition-colors duration-150",
-                      q.isFlagged
-                        ? "text-warning"
-                        : variant === "current"
-                          ? "text-primary-foreground/60 hover:text-primary-foreground"
-                          : "text-muted-foreground hover:text-warning",
-                    )}
-                    onClick={(e: React.MouseEvent) => {
-                      e.stopPropagation();
-                      onToggleFlag(q.uid);
-                    }}
-                  >
-                    <Flag size={11} fill={q.isFlagged ? "currentColor" : "none"} />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>{q.isFlagged ? "Unflag question" : "Flag question"}</TooltipContent>
-              </Tooltip>
-            )}
-          </div>
+          </button>
         );
       })}
     </div>
   );
-};
+});

package/src/assessment-toolbar/timer-display.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { Clock } from "lucide-react";
 import { cn } from "../lib/utils";
 import { formatTimer } from "../utils/format-duration";
@@ -22,11 +23,11 @@ function getTimerClasses(isDanger: boolean, isWarning: boolean) {
   };
 }
 
-export const TimerDisplay = ({
+export const TimerDisplay = memo(function TimerDisplay({
   timeElapsedSeconds,
   timeLimitSeconds,
   variant = "compact",
-}: TimerDisplayProps) => {
+}: TimerDisplayProps) {
   const hasTimeLimit = timeLimitSeconds != null && timeLimitSeconds > 0;
   const remainingSeconds = hasTimeLimit
     ? Math.max(0, timeLimitSeconds - timeElapsedSeconds)
@@ -52,7 +53,7 @@ export const TimerDisplay = ({
         <span className="inline-flex leading-none">
           <Clock size={13} />
         </span>
-        <span className="text-xs font-semibold font-mono tracking-wide">
+        <span className="text-xs font-semibold font-mono tracking-wide" aria-live="polite" aria-atomic="true">
           {displayTime}
         </span>
       </div>
@@ -66,8 +67,8 @@ export const TimerDisplay = ({
       </span>
       <span className={cn("text-sm", classes.bold && "font-semibold")}>
         {hasTimeLimit ? "Time remaining: " : "Time elapsed: "}
-        <span className="font-mono font-semibold">{displayTime}</span>
+        <span className="font-mono font-semibold" aria-live="polite" aria-atomic="true">{displayTime}</span>
       </span>
     </div>
   );
-};
+});