@hydralms/components 0.1.3 → 0.2.0

package/dist/ui/alert.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    variant?: "info" | "warning" | "default" | "destructive" | "success" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | "outline" | "secondary" | "muted" | null | undefined;
+    variant?: "info" | "warning" | "default" | "destructive" | "success" | "muted" | "outline" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/ui/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/ui/drawer.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+declare const drawerContentVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+    size?: "default" | "full" | "sm" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * A slide-in side panel for contextual content like navigation, settings, or detail views.
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={open} onOpenChange={setOpen} side="right">
+ *   <DrawerContent>
+ *     <DrawerHeader><DrawerTitle>Panel</DrawerTitle></DrawerHeader>
+ *     <DrawerBody>Content</DrawerBody>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+interface DrawerProps {
+    /** Compound component children (DrawerContent, DrawerTrigger, etc.) */
+    children: React.ReactNode;
+    /** Whether the drawer is open. */
+    open: boolean;
+    /** Callback fired when the drawer should open or close. */
+    onOpenChange: (open: boolean) => void;
+    /** Which edge of the viewport the drawer slides in from. */
+    side?: "left" | "right";
+}
+declare function Drawer({ children, open, onOpenChange, side }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ className, onClick, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ children }: {
+    children: React.ReactNode;
+}): React.ReactPortal;
+declare function DrawerBackdrop({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+interface DrawerContentProps extends Omit<React.ComponentProps<"div">, "size"> {
+    /** Width preset for the drawer panel. */
+    size?: "sm" | "default" | "lg" | "xl" | "full";
+    /** Whether to lock body scroll when the drawer is open. */
+    scrollLock?: boolean;
+}
+declare function DrawerContent({ className, children, size, scrollLock: scrollLockProp, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerBody({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<"h2">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ className, children, onClick, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
+/**
+ * A vertical icon rail for switching between views inside a Drawer.
+ * Provides controlled navigation state to DrawerNavItem children.
+ *
+ * @example
+ * ```tsx
+ * <DrawerNav value={activeView} onValueChange={setActiveView}>
+ *   <DrawerNavItem value="notes" icon={<FileText />} label="Notes" />
+ *   <DrawerNavItem value="bookmarks" icon={<Bookmark />} label="Bookmarks" />
+ * </DrawerNav>
+ * ```
+ */
+interface DrawerNavProps extends React.ComponentProps<"nav"> {
+    /** The value of the currently active nav item. */
+    value: string;
+    /** Callback fired when the active nav item changes. */
+    onValueChange: (value: string) => void;
+}
+declare function DrawerNav({ value, onValueChange, className, children, ...props }: DrawerNavProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * An icon button inside a DrawerNav rail. Renders a tooltip on hover.
+ */
+interface DrawerNavItemProps extends Omit<React.ComponentProps<"button">, "value"> {
+    /** Unique value identifying this view. Must match a DrawerViewport's conditional content. */
+    value: string;
+    /** Icon element to render (e.g., `<FileText />`). */
+    icon: React.ReactNode;
+    /** Accessible label shown in the tooltip. */
+    label: string;
+}
+declare function DrawerNavItem({ value, icon, label, className, ...props }: DrawerNavItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Content panel paired with a DrawerNav rail. Wraps header/body/footer in the
+ * remaining space beside the icon rail.
+ */
+declare function DrawerViewport({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerTrigger, DrawerPortal, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose, DrawerNav, DrawerNavItem, DrawerViewport, drawerContentVariants, };

package/dist/ui/index.d.ts

@@ -6,6 +6,7 @@ export { Alert, AlertTitle, AlertDescription, alertVariants } from './alert';
 export { Separator } from './separator';
 export { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './alert-dialog';
 export { Avatar, AvatarImage, AvatarFallback } from './avatar';
+export { Drawer, DrawerTrigger, DrawerPortal, DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose, DrawerNav, DrawerNavItem, DrawerViewport, drawerContentVariants, } from './drawer';
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './card';
 export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
 export { Progress, progressVariants } from './progress';
@@ -13,3 +14,5 @@ export type { ProgressProps } from './progress';
 export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from './table';
 export { Skeleton } from './skeleton';
 export { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';
+export { RichTextEditor } from './rich-text-editor';
+export type { RichTextEditorProps, RichTextEditorVariant } from './rich-text-editor';

package/dist/ui/progress.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const progressVariants: (props?: ({
-    variant?: "default" | "success" | "warning" | "info" | null | undefined;
+    variant?: "info" | "warning" | "default" | "success" | null | undefined;
     size?: "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface ProgressProps extends Omit<React.ComponentProps<"div">, "children">, VariantProps<typeof progressVariants> {

package/dist/ui/rich-text-editor.d.ts

@@ -0,0 +1,30 @@
+export type RichTextEditorVariant = "default" | "minimal";
+export interface RichTextEditorProps {
+    /** HTML string value */
+    value?: string;
+    /** Called with the HTML string on every content change */
+    onChange?: (html: string) => void;
+    /** Placeholder text shown when the editor is empty */
+    placeholder?: string;
+    /** Makes the editor non-editable (shows content without toolbar) */
+    readOnly?: boolean;
+    /** Visually disables the editor */
+    disabled?: boolean;
+    /** `"default"` shows full toolbar; `"minimal"` shows only basic formatting */
+    variant?: RichTextEditorVariant;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * RichTextEditor wraps Tiptap to provide a rich text editing experience
+ * styled to match the HydraLMS design system.
+ *
+ * @example
+ * <RichTextEditor
+ *   value={html}
+ *   onChange={setHtml}
+ *   placeholder="Write your response..."
+ *   variant="default"
+ * />
+ */
+export declare function RichTextEditor({ value, onChange, placeholder, readOnly, disabled, variant, className, style, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/rich-text-toolbar.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from '@tiptap/react';
+type RichTextToolbarVariant = "default" | "minimal";
+interface RichTextToolbarProps {
+    editor: Editor;
+    variant?: RichTextToolbarVariant;
+}
+export declare function RichTextToolbar({ editor, variant, }: RichTextToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/utils/array-utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Group an array of items by a key derived from each item.
+ */
+export declare function groupBy<T>(arr: T[], keyFn: (item: T) => string): Record<string, T[]>;

package/dist/utils/flatten-leaves.d.ts

@@ -0,0 +1,6 @@
+import { CurriculumItem } from '../curriculum/types';
+/**
+ * Recursively collects the UIDs of all leaf nodes (items with no children)
+ * in a curriculum tree.
+ */
+export declare function flattenLeaves(items: CurriculumItem[]): string[];

package/dist/utils/format-file-size.d.ts

@@ -0,0 +1 @@
+export declare function formatFileSize(bytes: number): string;

package/dist/utils/format-timestamp.d.ts

@@ -0,0 +1 @@
+export declare function formatTimestamp(iso: string): string;

package/dist/utils/is-empty-html.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns true if an HTML string contains no meaningful text content.
+ * Tiptap returns `"<p></p>"` for an empty editor, not an empty string.
+ */
+export declare function isEmptyHtml(html: string): boolean;

package/dist/utils/shuffle.d.ts

@@ -0,0 +1 @@
+export declare function shuffle<T>(array: T[]): T[];

package/dist/utils/string-utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Truncate text to a maximum length, appending a suffix if truncated.
+ */
+export declare function truncateText(text: string, maxLength: number, suffix?: string): string;
+/**
+ * Format a decimal value as a percentage string.
+ */
+export declare function formatPercentage(value: number, decimals?: number): string;
+/**
+ * Return the singular or plural form of a word based on count.
+ */
+export declare function pluralize(count: number, singular: string, plural?: string): string;

package/dist/video/video-bookmark.d.ts

@@ -1,2 +1,2 @@
 import { VideoBookmarkProps } from './types';
-export declare const VideoBookmark: ({ bookmark, onSeek, onDelete, onEdit, className, style, }: VideoBookmarkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VideoBookmark: import('react').NamedExoticComponent<VideoBookmarkProps>;

package/dist/video/video-playlist-item.d.ts

@@ -1,2 +1,2 @@
 import { VideoPlaylistItemProps } from './types';
-export declare const VideoPlaylistItem: ({ thumbnail, title, duration, status, isActive, index, onClick, className, style, }: VideoPlaylistItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VideoPlaylistItem: import('react').NamedExoticComponent<VideoPlaylistItemProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydralms/components",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "React component library for LMS platforms",
   "license": "MIT",
   "author": "HydraLMS",
@@ -115,6 +115,18 @@
       "types": "./src/sections/CertificateViewer/CertificateViewer.tsx",
       "default": "./src/sections/CertificateViewer/CertificateViewer.tsx"
     },
+    "./sections/RubricView": {
+      "types": "./src/sections/RubricView/RubricView.tsx",
+      "default": "./src/sections/RubricView/RubricView.tsx"
+    },
+    "./sections/RequirementsChecklist": {
+      "types": "./src/sections/RequirementsChecklist/RequirementsChecklist.tsx",
+      "default": "./src/sections/RequirementsChecklist/RequirementsChecklist.tsx"
+    },
+    "./sections/ForumBoard": {
+      "types": "./src/sections/ForumBoard/ForumBoard.tsx",
+      "default": "./src/sections/ForumBoard/ForumBoard.tsx"
+    },
     "./modules": {
       "types": "./src/modules/index.ts",
       "default": "./src/modules/index.ts"
@@ -131,6 +143,30 @@
       "types": "./src/modules/CoursePlayer/CoursePlayer.tsx",
       "default": "./src/modules/CoursePlayer/CoursePlayer.tsx"
     },
+    "./modules/ExamModule": {
+      "types": "./src/modules/ExamModule/ExamModule.tsx",
+      "default": "./src/modules/ExamModule/ExamModule.tsx"
+    },
+    "./modules/SurveyModule": {
+      "types": "./src/modules/SurveyModule/SurveyModule.tsx",
+      "default": "./src/modules/SurveyModule/SurveyModule.tsx"
+    },
+    "./modules/GradeCenterModule": {
+      "types": "./src/modules/GradeCenterModule/GradeCenterModule.tsx",
+      "default": "./src/modules/GradeCenterModule/GradeCenterModule.tsx"
+    },
+    "./modules/AssignmentModule": {
+      "types": "./src/modules/AssignmentModule/AssignmentModule.tsx",
+      "default": "./src/modules/AssignmentModule/AssignmentModule.tsx"
+    },
+    "./modules/CertificateModule": {
+      "types": "./src/modules/CertificateModule/CertificateModule.tsx",
+      "default": "./src/modules/CertificateModule/CertificateModule.tsx"
+    },
+    "./modules/DiscussionModule": {
+      "types": "./src/modules/DiscussionModule/DiscussionModule.tsx",
+      "default": "./src/modules/DiscussionModule/DiscussionModule.tsx"
+    },
     "./provider": {
       "types": "./src/provider/index.ts",
       "default": "./src/provider/index.ts"
@@ -183,7 +219,6 @@
       "types": "./src/provider/HydraProvider.tsx",
       "default": "./src/provider/HydraProvider.tsx"
     },
-    "./*": "./src/*",
     "./styles.css": "./src/styles/globals.css",
     "./styles/globals.css": "./src/styles/globals.css",
     "./package.json": "./package.json"
@@ -203,17 +238,65 @@
         "import": "./dist/sections.js",
         "require": "./dist/sections.cjs"
       },
+      "./sections/*": {
+        "types": "./src/sections/*/index.ts",
+        "default": "./src/sections/*/index.ts"
+      },
       "./modules": {
         "types": "./dist/modules/index.d.ts",
         "import": "./dist/modules.js",
         "require": "./dist/modules.cjs"
       },
+      "./modules/*": {
+        "types": "./src/modules/*/index.ts",
+        "default": "./src/modules/*/index.ts"
+      },
+      "./provider": {
+        "types": "./src/provider/index.ts",
+        "default": "./src/provider/index.ts"
+      },
+      "./questions": {
+        "types": "./src/questions/index.ts",
+        "default": "./src/questions/index.ts"
+      },
+      "./assessment-toolbar": {
+        "types": "./src/assessment-toolbar/index.ts",
+        "default": "./src/assessment-toolbar/index.ts"
+      },
+      "./flashcards": {
+        "types": "./src/flashcards/index.ts",
+        "default": "./src/flashcards/index.ts"
+      },
+      "./curriculum": {
+        "types": "./src/curriculum/index.ts",
+        "default": "./src/curriculum/index.ts"
+      },
+      "./video": {
+        "types": "./src/video/index.ts",
+        "default": "./src/video/index.ts"
+      },
+      "./progress": {
+        "types": "./src/progress/index.ts",
+        "default": "./src/progress/index.ts"
+      },
+      "./feedback": {
+        "types": "./src/feedback/index.ts",
+        "default": "./src/feedback/index.ts"
+      },
+      "./content": {
+        "types": "./src/content/index.ts",
+        "default": "./src/content/index.ts"
+      },
+      "./social": {
+        "types": "./src/social/index.ts",
+        "default": "./src/social/index.ts"
+      },
       "./styles.css": "./dist/components.css",
       "./package.json": "./package.json"
     }
   },
   "scripts": {
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "dev": "vite build --watch",
     "generate-docs": "tsx scripts/generate-docs.ts",
     "check-docs": "tsx scripts/generate-docs.ts --check",
@@ -228,6 +311,11 @@
     "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,6 +332,7 @@
     "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",

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>
+  );
+};