@hydralms/components 0.1.3 → 0.3.0

package/src/sections/LecturePlayer/LecturePlayer.tsx

@@ -1,5 +1,8 @@
+import { useCallback } from "react";
 import { VideoPlayer } from "../../video";
 import { Card, CardHeader, CardTitle, CardContent } from "../../ui/card";
+import { Skeleton } from "../../ui/skeleton";
+import { SectionShell } from "../_shared/section-shell";
 import type { LecturePlayerProps } from "./types";
 import { cn } from "../../lib/utils";
 
@@ -9,52 +12,75 @@ export function LecturePlayer({
   layout = "horizontal",
   notesPanelWidth = "340px",
   notesPanelHeight = "240px",
+  isLoading,
+  error,
+  onRetry,
+  onComplete,
   className,
   style,
 }: LecturePlayerProps) {
   const isHorizontal = layout === "horizontal";
 
-  if (!notes) {
-    return (
-      <div className={className} style={style}>
-        <VideoPlayer {...video} />
-      </div>
-    );
-  }
+  const handleEnded = useCallback(() => {
+    video.onEnded?.();
+    onComplete?.();
+  }, [video, onComplete]);
 
   return (
-    <div
-      className={cn(
-        "flex overflow-hidden",
-        isHorizontal ? "flex-row" : "flex-col",
-        className,
-      )}
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
       style={style}
+      skeleton={
+        <>
+          <Skeleton className="aspect-video w-full rounded-lg" />
+          {notes !== undefined && (
+            <Skeleton className="h-32 w-full rounded-lg" />
+          )}
+        </>
+      }
     >
-      <div className="flex-1 min-w-0 min-h-0">
-        <VideoPlayer {...video} />
-      </div>
-      <Card
-        className={cn(
-          "overflow-auto shrink-0 rounded-none border-0",
-          isHorizontal ? "border-l border-border" : "border-t border-border w-full",
-        )}
-        style={{
-          width: isHorizontal ? notesPanelWidth : undefined,
-          height: isHorizontal ? undefined : notesPanelHeight,
-        }}
-      >
-        <CardHeader>
-          <CardTitle>Notes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {typeof notes === "string" ? (
-            <span className="text-sm text-foreground">{notes}</span>
-          ) : (
-            notes
+      {!notes ? (
+        <div className={className} style={style}>
+          <VideoPlayer {...video} onEnded={handleEnded} />
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex overflow-hidden gap-4",
+            isHorizontal ? "flex-row" : "flex-col",
+            className,
           )}
-        </CardContent>
-      </Card>
-    </div>
+          style={style}
+        >
+          <div className="flex-1 min-w-0 min-h-0">
+            <VideoPlayer {...video} onEnded={handleEnded} />
+          </div>
+          <Card
+            className={cn(
+              "overflow-auto shrink-0 rounded-none border-0",
+              isHorizontal ? "border-l border-border" : "border-t border-border w-full",
+            )}
+            style={{
+              width: isHorizontal ? notesPanelWidth : undefined,
+              height: isHorizontal ? undefined : notesPanelHeight,
+            }}
+          >
+            <CardHeader>
+              <CardTitle>Notes</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {typeof notes === "string" ? (
+                <span className="text-sm text-foreground">{notes}</span>
+              ) : (
+                notes
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </SectionShell>
   );
 }

package/src/sections/LecturePlayer/types.ts

@@ -41,6 +41,14 @@ export interface LecturePlayerProps {
    * @default "240px"
    */
   notesPanelHeight?: string | number;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
+  /** Called when the video playback ends. */
+  onComplete?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */

package/src/sections/LessonPage/LessonPage.tsx

@@ -1,12 +1,15 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Check, ChevronRight, Clock } from "lucide-react";
 import { ContentBlock } from "../../content";
-import type { SessionAnswer } from "../../questions/types";
+import { Skeleton } from "../../ui/skeleton";
+import { EmptyState } from "../../common/empty-state";
 import { Button } from "../../ui/button";
+import { Card, CardContent } from "../../ui/card";
 import { Separator } from "../../ui/separator";
+import { SectionShell } from "../_shared/section-shell";
 import { formatDuration } from "../../utils/format-duration";
 import type { LessonPageProps } from "./types";
-import { cn } from "../../lib/utils";
+
 
 export function LessonPage({
   title,
@@ -18,15 +21,17 @@ export function LessonPage({
   estimatedDuration,
   showDuration = true,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: LessonPageProps) {
   const [completed, setCompleted] = useState(isCompleted);
-  const [, setQuestionAnswers] = useState<Map<string, SessionAnswer[]>>(new Map());
 
-  function handleQuestionAnswer(questionUid: string, answers: SessionAnswer[]) {
-    setQuestionAnswers((prev) => new Map(prev).set(questionUid, answers));
-  }
+  useEffect(() => {
+    setCompleted(isCompleted);
+  }, [isCompleted]);
 
   function handleMarkComplete() {
     setCompleted(true);
@@ -34,7 +39,22 @@ export function LessonPage({
   }
 
   return (
-    <div className={cn(className)} style={style}>
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={
+        <>
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-24 w-full" />
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </>
+      }
+    >
+    <div>
       {/* Header */}
       <div className="mb-3">
         <p className="text-2xl font-bold mb-0.5 text-foreground">{title}</p>
@@ -50,18 +70,23 @@ export function LessonPage({
 
       {/* Content blocks */}
       <div className="flex flex-col gap-3">
-        {blocks.map((block, i) => (
+        {blocks?.length ? blocks.map((block, i) => (
           <ContentBlock
             key={i}
             block={block}
-            onQuestionAnswer={handleQuestionAnswer}
             readOnly={readOnly}
           />
-        ))}
+        )) : (
+          <EmptyState
+            title="No content yet"
+            description="This lesson doesn't have any content blocks."
+          />
+        )}
       </div>
 
       {/* Completion bar */}
-      <div className="border border-border rounded-md px-4 py-3 mt-4 sticky bottom-0 bg-background z-10">
+      <Card className="mt-4 sticky bottom-0 z-10">
+        <CardContent className="px-4 py-3">
         <div className="flex justify-between items-center">
           {completed ? (
             <div className="flex items-center gap-1 text-success">
@@ -85,7 +110,9 @@ export function LessonPage({
             </Button>
           )}
         </div>
-      </div>
+        </CardContent>
+      </Card>
     </div>
+    </SectionShell>
   );
 }

package/src/sections/LessonPage/types.ts

@@ -34,6 +34,12 @@ export interface LessonPageProps {
   showDuration?: boolean;
   /** When true, disables interactive elements */
   readOnly?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */

package/src/sections/PracticeQuiz/PracticeQuiz.tsx

@@ -1,20 +1,14 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { CheckCircle } from "lucide-react";
-import { QuestionRenderer } from "../../questions";
+import { QuestionRenderer, scoreQuestion } from "../../questions";
 import { FeedbackBanner } from "../../feedback";
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import { Progress } from "../../ui/progress";
+import { Skeleton } from "../../ui/skeleton";
+import { SectionShell } from "../_shared/section-shell";
 import type { PracticeQuizProps, PracticeQuizStats } from "./types";
-
-function shuffleArray<T>(arr: T[]): T[] {
-  const copy = [...arr];
-  for (let i = copy.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [copy[i], copy[j]] = [copy[j], copy[i]];
-  }
-  return copy;
-}
+import { shuffle } from "../../utils/shuffle";
 
 export function PracticeQuiz({
   questions: questionsProp,
@@ -23,11 +17,17 @@ export function PracticeQuiz({
   onComplete,
   shuffled = false,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: PracticeQuizProps) {
   const questions = useMemo(
-    () => (shuffled ? shuffleArray(questionsProp) : questionsProp),
+    () => {
+      const qs = questionsProp ?? [];
+      return shuffled ? shuffle(qs) : qs;
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [questionsProp, shuffled],
   );
@@ -38,6 +38,16 @@ export function PracticeQuiz({
   const [firstAttemptCorrect, setFirstAttemptCorrect] = useState<Set<string>>(new Set());
   const [currentAnswer, setCurrentAnswer] = useState<{ uid: string; content?: string }[] | null>(null);
   const [isComplete, setIsComplete] = useState(false);
+  const questionAreaRef = useRef<HTMLDivElement>(null);
+  const isFirstRender = useRef(true);
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    questionAreaRef.current?.focus();
+  }, [currentIndex]);
 
   const currentQuestion = questions[currentIndex];
   const isRevealed = currentQuestion ? revealedUids.has(currentQuestion.uid) : false;
@@ -49,13 +59,12 @@ export function PracticeQuiz({
     setAttemptCounts((prev) => new Map(prev).set(currentQuestion.uid, attempts));
     setRevealedUids((prev) => new Set(prev).add(currentQuestion.uid));
 
-    const correctUids = new Set(
-      currentQuestion.answers?.filter((a) => a.isCorrect).map((a) => a.uid) ?? [],
-    );
-    const selectedUids = new Set(currentAnswer.map((a) => a.uid));
-    const isCorrect =
-      correctUids.size === selectedUids.size &&
-      [...correctUids].every((uid) => selectedUids.has(uid));
+    const sessionAnswers = currentAnswer.map((a) => ({
+      uid: currentQuestion.uid,
+      answerUid: a.uid,
+      content: a.content,
+    }));
+    const isCorrect = scoreQuestion(currentQuestion, sessionAnswers) === true;
 
     if (isCorrect && attempts === 1) {
       setFirstAttemptCorrect((prev) => new Set(prev).add(currentQuestion.uid));
@@ -87,29 +96,45 @@ export function PracticeQuiz({
     }
   }
 
-  const isCurrentCorrect = useMemo(() => {
-    if (!currentQuestion || !currentAnswer) return false;
-    const correctUids = new Set(
-      currentQuestion.answers?.filter((a) => a.isCorrect).map((a) => a.uid) ?? [],
-    );
-    const selectedUids = new Set(currentAnswer.map((a) => a.uid));
-    return (
-      correctUids.size === selectedUids.size &&
-      [...correctUids].every((uid) => selectedUids.has(uid))
-    );
+  const currentSessionAnswers = useMemo(() => {
+    if (!currentQuestion || !currentAnswer) return [];
+    return currentAnswer.map((a) => ({
+      uid: currentQuestion.uid,
+      answerUid: a.uid,
+      content: a.content,
+    }));
   }, [currentQuestion, currentAnswer]);
 
-  if (isComplete) {
-    const percentage = questions.length > 0
-      ? Math.round((firstAttemptCorrect.size / questions.length) * 100)
-      : 0;
-    return (
+  const isCurrentCorrect = useMemo(
+    () => currentQuestion ? scoreQuestion(currentQuestion, currentSessionAnswers) === true : false,
+    [currentQuestion, currentSessionAnswers],
+  );
+
+  const completionPercentage = questions.length > 0
+    ? Math.round((firstAttemptCorrect.size / questions.length) * 100)
+    : 0;
+
+  return (
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={
+        <>
+          <Skeleton className="h-2 w-full" />
+          <Skeleton className="h-48 w-full" />
+        </>
+      }
+    >
+    {isComplete ? (
       <Card className={className} style={style}>
         <CardContent className="pt-6 text-center">
           <CheckCircle size={48} className="text-success mx-auto mb-4" />
           <p className="text-xl font-bold mb-1 text-foreground">Practice Complete!</p>
           <p className="text-muted-foreground mb-2">
-            {firstAttemptCorrect.size} of {questions.length} correct on first attempt ({percentage}%)
+            {firstAttemptCorrect.size} of {questions.length} correct on first attempt ({completionPercentage}%)
           </p>
           <div className="flex justify-center">
             <Button
@@ -128,72 +153,68 @@ export function PracticeQuiz({
           </div>
         </CardContent>
       </Card>
-    );
-  }
-
-  return (
-    <div className={className} style={style}>
-      <div className="flex justify-between items-center mb-2">
-        <span className="font-semibold text-sm text-foreground">
+    ) : (
+      <div className={className} style={style}>
+        <div className="flex justify-between items-center mb-2">
+          <span className="font-semibold text-sm text-foreground">
+            Question {currentIndex + 1} of {questions.length}
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {firstAttemptCorrect.size} correct on first try
+          </span>
+        </div>
+        <Progress
+          value={currentIndex + (isRevealed ? 1 : 0)}
+          max={questions.length}
+          size="sm"
+          className="mb-3"
+        />
+
+        <span className="sr-only" aria-live="polite">
           Question {currentIndex + 1} of {questions.length}
         </span>
-        <span className="text-xs text-muted-foreground">
-          {firstAttemptCorrect.size} correct on first try
-        </span>
-      </div>
-      <Progress
-        value={currentIndex + (isRevealed ? 1 : 0)}
-        max={questions.length}
-        size="sm"
-        className="mb-3"
-      />
-
-      {currentQuestion && (
-        <Card>
-          <CardContent className="pt-6">
-            <QuestionRenderer
-              question={currentQuestion}
-              sessionAnswers={
-                currentAnswer?.map((a) => ({
-                  uid: currentQuestion.uid,
-                  answerUid: a.uid,
-                  content: a.content,
-                })) ?? []
-              }
-              onAnswer={(answers) => setCurrentAnswer(answers)}
-              readOnly={readOnly || isRevealed}
-              showCorrectAnswers={isRevealed}
-            />
-
-            {instantFeedback && isRevealed && (
-              <FeedbackBanner
-                isCorrect={isCurrentCorrect}
-                explanation={currentQuestion.explanation}
-                onRetry={allowRetry && !isCurrentCorrect ? handleRetry : undefined}
+        {currentQuestion && (
+          <Card ref={questionAreaRef} tabIndex={-1}>
+            <CardContent className="pt-6">
+              <QuestionRenderer
+                question={currentQuestion}
+                sessionAnswers={currentSessionAnswers}
+                onAnswer={setCurrentAnswer}
+                readOnly={readOnly || isRevealed}
+                showCorrectAnswers={isRevealed}
               />
-            )}
-
-            <div className="flex justify-end gap-2 mt-2">
-              {!isRevealed && instantFeedback && (
-                <Button
-                  onClick={checkAnswer}
-                  disabled={!currentAnswer || currentAnswer.length === 0 || readOnly}
-                >
-                  Check Answer
-                </Button>
-              )}
-              {(!instantFeedback || isRevealed) && (
-                <Button
-                  onClick={handleNext}
-                  disabled={readOnly}
-                >
-                  {currentIndex < questions.length - 1 ? "Next Question" : "Finish"}
-                </Button>
+
+              {instantFeedback && isRevealed && (
+                <FeedbackBanner
+                  isCorrect={isCurrentCorrect}
+                  explanation={currentQuestion.explanation}
+                  onRetry={allowRetry && !isCurrentCorrect ? handleRetry : undefined}
+                />
               )}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
+
+              <div className="flex justify-end gap-2 mt-2">
+                {!isRevealed && instantFeedback && (
+                  <Button
+                    onClick={checkAnswer}
+                    disabled={!currentAnswer || currentAnswer.length === 0 || readOnly}
+                  >
+                    Check Answer
+                  </Button>
+                )}
+                {(!instantFeedback || isRevealed) && (
+                  <Button
+                    onClick={handleNext}
+                    disabled={readOnly}
+                  >
+                    {currentIndex < questions.length - 1 ? "Next Question" : "Finish"}
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    )}
+    </SectionShell>
   );
 }

package/src/sections/PracticeQuiz/types.ts

@@ -28,6 +28,12 @@ export interface PracticeQuizProps {
   shuffled?: boolean;
   /** When true, all inputs are disabled */
   readOnly?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */