question-bank-framework 0.7.1 → 0.8.0

package/README.md

@@ -48,6 +48,17 @@ Pass `hideTagsColumn: true` to `defineBank` when tags merely duplicate
 dedicated fields (every tag equals a topic/type value already in its own
 column). Tags still feed free-text search.
 
+## Mock-exam timer
+
+The header has a **Timer** link to `/timer` (add `src/routes/timer.tsx`
+rendering `<ExamTimerPage />`, as in the template). Enter the exam's start
+time (e.g. 08:30) and reading/writing minutes, then press Start: the top right
+of the header shows the mock exam time, starting at 08:30, with a book icon
+during reading time and a pen during writing time. It updates once a minute.
+Toasts announce reading time over, 30 and 10 minutes remaining, and exam over;
+the clock disappears once the exam is over. The timer lives in localStorage,
+so it survives reloads and shows in every open tab.
+
 ## Sync (Cloudflare Durable Objects)
 
 Without `sync`, quizzes and question statuses live only in the browser's

package/framework/components/app-shell.tsx

@@ -4,51 +4,61 @@
 import { Link, useRouterState } from '@tanstack/react-router';
 import type { ReactNode } from 'react';
 import { cn } from '../lib/utils.ts';
+import { ExamTimerBadge } from './exam-timer.tsx';
+import { Toaster } from './ui/toast';
 
 export function AppShell({
   children,
   brand,
   homeLabel = 'Question bank',
   quizzesLabel = 'My quizzes',
+  timerLabel = 'Timer',
 }: {
   children: ReactNode;
   brand: string;
   homeLabel?: string;
   quizzesLabel?: string;
+  timerLabel?: string;
 }) {
   const pathname = useRouterState({ select: (state) => state.location.pathname });
   const navigation = [
     { label: homeLabel, to: '/' },
     { label: quizzesLabel, to: '/quizzes' },
+    { label: timerLabel, to: '/timer' },
   ] as const;
   const isQuestionBank = pathname === '/';
 
   return (
-    <div className={cn('flex flex-col bg-white', isQuestionBank ? 'h-dvh overflow-hidden' : 'min-h-dvh')}>
-      <header className="sticky top-0 z-20 shrink-0 border-b border-gray-200 bg-white">
-        <div className="mx-auto flex h-16 w-full max-w-6xl items-center gap-8 px-4">
-          <Link to="/" className="text-lg font-bold text-gray-900">
-            {brand}
-          </Link>
-          <nav className="flex items-center gap-6" aria-label="Main navigation">
-            {navigation.map(({ label, to }) => {
-              const active = to === '/' ? pathname === '/' : pathname.startsWith(to);
-              return (
-                <Link
-                  key={to}
-                  to={to}
-                  className={cn('text-sm font-semibold text-gray-600 hover:text-gray-900', active && 'text-gray-900 underline underline-offset-4')}
-                >
-                  {label}
-                </Link>
-              );
-            })}
-          </nav>
-        </div>
-      </header>
-      <main className={cn('w-full flex-1', isQuestionBank ? 'flex min-h-0 flex-col overflow-hidden' : 'mx-auto max-w-6xl px-4 py-8')}>
-        {children}
-      </main>
-    </div>
+    <Toaster>
+      <div className={cn('flex flex-col bg-white', isQuestionBank ? 'h-dvh overflow-hidden' : 'min-h-dvh')}>
+        <header className="sticky top-0 z-20 shrink-0 border-b border-gray-200 bg-white">
+          <div className="mx-auto flex h-16 w-full max-w-6xl items-center gap-8 px-4">
+            <Link to="/" className="text-lg font-bold text-gray-900">
+              {brand}
+            </Link>
+            <nav className="flex items-center gap-6" aria-label="Main navigation">
+              {navigation.map(({ label, to }) => {
+                const active = to === '/' ? pathname === '/' : pathname.startsWith(to);
+                return (
+                  <Link
+                    key={to}
+                    to={to}
+                    className={cn('text-sm font-semibold text-gray-600 hover:text-gray-900', active && 'text-gray-900 underline underline-offset-4')}
+                  >
+                    {label}
+                  </Link>
+                );
+              })}
+            </nav>
+            <div className="ml-auto">
+              <ExamTimerBadge />
+            </div>
+          </div>
+        </header>
+        <main className={cn('w-full flex-1', isQuestionBank ? 'flex min-h-0 flex-col overflow-hidden' : 'mx-auto max-w-6xl px-4 py-8')}>
+          {children}
+        </main>
+      </div>
+    </Toaster>
   );
 }

package/framework/components/exam-timer.tsx

@@ -0,0 +1,125 @@
+// Mock-exam clock: <ExamTimerBadge> shows the mock time in the header while an
+// exam is running; <ExamTimerPage> (the /timer route) is the only place to start it.
+// Framework-owned: eject with `qb reveal framework/components/exam-timer.tsx`.
+
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import { BookOpen, PenLine } from 'lucide-react';
+import { useBank } from '../../core/config.tsx';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { toast } from './ui/toast';
+import { examState, formatClock, MINUTE, setExamTimer, useExamNow, useExamTimer, type ExamTimer } from '../lib/exam-timer.ts';
+
+/** Moments to announce, in minutes after Start. */
+const milestones = ({ readingMinutes: reading, writingMinutes: writing }: ExamTimer) => {
+  const end = reading + writing;
+  return [
+    ...(reading > 0 ? [{ at: reading, title: 'Reading time over' }] : []),
+    ...(writing > 30 ? [{ at: end - 30, title: '30 minutes remaining' }] : []),
+    ...(writing > 10 ? [{ at: end - 10, title: '10 minutes remaining' }] : []),
+    { at: end, title: 'Exam over' },
+  ];
+};
+
+export function ExamTimerBadge() {
+  const { namespace } = useBank();
+  const timer = useExamTimer(namespace);
+  const now = useExamNow(timer);
+  const state = timer ? examState(timer, now) : null;
+
+  // Toast each milestone crossed since the last tick (not ones already past on load).
+  const last = useRef<{ startedAt: number; elapsed: number } | null>(null);
+  useEffect(() => {
+    if (!timer || !state) return;
+    const previous = last.current;
+    if (previous?.startedAt === timer.startedAt) {
+      for (const { at, title } of milestones(timer)) {
+        if (previous.elapsed < at * MINUTE && at * MINUTE <= state.elapsed) toast.add({ title });
+      }
+    }
+    last.current = { startedAt: timer.startedAt, elapsed: state.elapsed };
+  }, [timer?.startedAt, state?.elapsed]);
+
+  if (!state || state.phase === 'over') return null;
+  const Icon = state.phase === 'reading' ? BookOpen : PenLine;
+  return (
+    <span
+      className="flex items-center gap-1.5 text-sm font-medium tabular-nums text-gray-700"
+      title={state.phase === 'reading' ? 'Reading time' : 'Writing time'}
+    >
+      <Icon aria-hidden="true" className="size-4" />
+      <span className="sr-only">{state.phase === 'reading' ? 'Reading time' : 'Writing time'}, mock exam time </span>
+      {state.clock}
+    </span>
+  );
+}
+
+const parseClock = (time: string) => {
+  const [hours, minutes] = time.split(':').map(Number);
+  return (hours ?? 0) * 60 + (minutes ?? 0);
+};
+
+export function ExamTimerPage({
+  defaultStart = '08:30',
+  defaultReadingMinutes = 15,
+  defaultWritingMinutes = 180,
+}: {
+  defaultStart?: string;
+  defaultReadingMinutes?: number;
+  defaultWritingMinutes?: number;
+}) {
+  const { namespace } = useBank();
+  const timer = useExamTimer(namespace);
+  const now = useExamNow(timer);
+  const running = timer !== null && examState(timer, now).phase !== 'over';
+  const [start, setStart] = useState(defaultStart);
+  const [reading, setReading] = useState(String(defaultReadingMinutes));
+  const [writing, setWriting] = useState(String(defaultWritingMinutes));
+
+  // Show the saved settings once they're read (after hydration, or when another tab changes them).
+  useEffect(() => {
+    if (!timer) return;
+    setStart(formatClock(timer.startMinutes));
+    setReading(String(timer.readingMinutes));
+    setWriting(String(timer.writingMinutes));
+  }, [timer?.startedAt]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setExamTimer(namespace, {
+      startMinutes: parseClock(start),
+      startedAt: Date.now(),
+      readingMinutes: Math.max(0, Number(reading) || 0),
+      writingMinutes: Math.max(0, Number(writing) || 0),
+    });
+  };
+
+  const field = 'grid gap-1.5 text-sm font-medium text-gray-700';
+  return (
+    <div className="grid max-w-sm gap-6">
+      <h1 className="m-0 text-3xl font-bold tracking-tight text-gray-900">Timer</h1>
+      <form onSubmit={submit} className="grid gap-4">
+        <label className={field}>
+          Exam start time
+          <Input type="time" required value={start} onChange={(event) => setStart(event.target.value)} />
+        </label>
+        <label className={field}>
+          Reading minutes
+          <Input type="number" min={0} required value={reading} onChange={(event) => setReading(event.target.value)} />
+        </label>
+        <label className={field}>
+          Writing minutes
+          <Input type="number" min={0} required value={writing} onChange={(event) => setWriting(event.target.value)} />
+        </label>
+        <div className="flex gap-2">
+          <Button type="submit">{running ? 'Restart' : 'Start'}</Button>
+          {running && (
+            <Button type="button" variant="outline" onClick={() => setExamTimer(namespace, null)}>
+              Stop
+            </Button>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}

package/framework/components/ui/toast.tsx

@@ -0,0 +1,234 @@
+// shadcn/ui Toast (Base UI, base-nova style). Framework-owned: eject with `qb reveal framework/components/ui/toast.tsx`.
+
+import * as React from "react"
+import { Toast as ToastPrimitive } from "@base-ui/react/toast"
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-react"
+import { cn } from "../../lib/utils.ts"
+
+import { Button } from "./button"
+
+const toast = ToastPrimitive.createToastManager()
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        "pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border border-gray-200 bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastAction({
+  className,
+  render = <Button variant="outline" size="sm" />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button variant="ghost" size="icon-sm" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <XIcon aria-hidden="true" />
+      )}
+    </ToastPrimitive.Close>
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null
+
+  if (type === "success") {
+    icon = (
+      <CircleCheckIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "info") {
+    icon = (
+      <InfoIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "warning") {
+    icon = (
+      <TriangleAlertIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "error") {
+    icon = (
+      <OctagonXIcon className="text-destructive" aria-hidden="true" />
+    )
+  }
+
+  if (type === "loading") {
+    icon = (
+      <Loader2Icon className="animate-spin" aria-hidden="true" />
+    )
+  }
+
+  if (!icon) {
+    return null
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager()
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ))
+}
+
+function Toaster({
+  children,
+  toastManager = toast,
+  ...props
+}: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider toastManager={toastManager} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  )
+}
+
+const createToastManager = ToastPrimitive.createToastManager
+const useToastManager = ToastPrimitive.useToastManager
+
+export {
+  Toaster,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  createToastManager,
+  toast,
+  useToastManager,
+}

package/framework/index.ts

@@ -5,6 +5,7 @@ export { QuestionBank } from './components/question-bank.tsx';
 export { QuizPage } from './components/quiz-page.tsx';
 export { QuizList } from './components/quiz-list.tsx';
 export { AppShell } from './components/app-shell.tsx';
+export { ExamTimerBadge, ExamTimerPage } from './components/exam-timer.tsx';
 export { FilterBuilder } from './components/filter-builder.tsx';
 export { MarkdownContent } from './components/markdown-content.tsx';
 export { NumericalResponse, PairingResponse, formatNumericAnswer } from './components/question-response.tsx';
@@ -32,5 +33,8 @@ export {
   syncQuiz,
 } from './lib/quiz-storage.ts';
 export { getQuestionStatuses, setQuestionStatus } from './lib/question-status-storage.ts';
+export { examState, setExamTimer, useExamTimer } from './lib/exam-timer.ts';
+export type { ExamState, ExamTimer } from './lib/exam-timer.ts';
+export { Toaster, toast } from './components/ui/toast.tsx';
 export type { StorageTarget } from './lib/sync-client.ts';
 export { cn } from './lib/utils.ts';

package/framework/lib/exam-timer.ts

@@ -0,0 +1,115 @@
+// Mock-exam clock: pressing Start on /timer pretends it's the exam's start time
+// (e.g. 08:30) right now, then the clock runs forward from there. Kept in
+// localStorage so it survives reloads and is shared by every open tab.
+// Framework-owned: eject with `qb reveal framework/lib/exam-timer.ts`.
+
+import { useEffect, useState, useSyncExternalStore } from 'react';
+
+export type ExamTimer = {
+  /** Exam start on the mock clock, in minutes after midnight (08:30 → 510). */
+  startMinutes: number;
+  /** When Start was pressed (epoch ms). */
+  startedAt: number;
+  readingMinutes: number;
+  writingMinutes: number;
+};
+
+export type ExamState = {
+  phase: 'reading' | 'writing' | 'over';
+  /** Mock clock time, "HH:MM". */
+  clock: string;
+  /** Ms since Start was pressed. */
+  elapsed: number;
+};
+
+export const MINUTE = 60_000;
+const CHANGE_EVENT = 'qb-exam-timer-change';
+const keyFor = (namespace: string) => `${namespace}-question-bank-exam-timer`;
+
+const isTimer = (value: unknown): value is ExamTimer => {
+  if (!value || typeof value !== 'object') return false;
+  const { startMinutes, startedAt, readingMinutes, writingMinutes } = value as Record<string, unknown>;
+  return [startMinutes, startedAt, readingMinutes, writingMinutes].every(
+    (n) => typeof n === 'number' && Number.isFinite(n) && n >= 0,
+  );
+};
+
+const parse = (raw: string | null): ExamTimer | null => {
+  try {
+    const value: unknown = JSON.parse(raw ?? 'null');
+    return isTimer(value) ? value : null;
+  } catch {
+    return null;
+  }
+};
+
+export function setExamTimer(namespace: string, timer: ExamTimer | null): void {
+  if (typeof window === 'undefined') return;
+  if (timer) window.localStorage.setItem(keyFor(namespace), JSON.stringify(timer));
+  else window.localStorage.removeItem(keyFor(namespace));
+  // `storage` only fires in other tabs; tell this one too.
+  window.dispatchEvent(new Event(CHANGE_EVENT));
+}
+
+function subscribe(onChange: () => void) {
+  window.addEventListener('storage', onChange);
+  window.addEventListener(CHANGE_EVENT, onChange);
+  return () => {
+    window.removeEventListener('storage', onChange);
+    window.removeEventListener(CHANGE_EVENT, onChange);
+  };
+}
+
+/** The saved timer, or null. Always null during SSR. */
+export function useExamTimer(namespace: string): ExamTimer | null {
+  const raw = useSyncExternalStore(
+    subscribe,
+    () => window.localStorage.getItem(keyFor(namespace)),
+    () => null,
+  );
+  return parse(raw);
+}
+
+export const formatClock = (minutesAfterMidnight: number) => {
+  const minutes = Math.floor(minutesAfterMidnight) % (24 * 60);
+  return `${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`;
+};
+
+export function examState(timer: ExamTimer, now: number): ExamState {
+  const elapsed = Math.max(0, now - timer.startedAt);
+  const minutes = elapsed / MINUTE;
+  const phase =
+    minutes < timer.readingMinutes ? 'reading' : minutes < timer.readingMinutes + timer.writingMinutes ? 'writing' : 'over';
+  return { phase, clock: formatClock(timer.startMinutes + minutes), elapsed };
+}
+
+/**
+ * Current time, re-read each time the mock clock ticks over a minute (and
+ * when the tab becomes visible again). Never re-renders more than once a minute.
+ */
+export function useExamNow(timer: ExamTimer | null): number {
+  const [now, setNow] = useState(() => Date.now());
+  const startedAt = timer?.startedAt;
+  useEffect(() => {
+    if (startedAt === undefined) return;
+    let timeout: ReturnType<typeof setTimeout>;
+    const tick = () => {
+      const current = Date.now();
+      setNow(current);
+      const intoMinute = (((current - startedAt) % MINUTE) + MINUTE) % MINUTE;
+      timeout = setTimeout(tick, MINUTE - intoMinute + 50);
+    };
+    const onVisible = () => {
+      if (document.visibilityState !== 'visible') return;
+      clearTimeout(timeout);
+      tick();
+    };
+    tick();
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  }, [startedAt]);
+  return now;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "question-bank-framework",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Framework-style question bank: TanStack Start + TanStack Table grid, quizzes, and filter DSL. Bring your own bank.config.ts + content/. Eject any framework/ file with `qb reveal` (Vike-style).",
   "type": "module",
   "license": "MIT",
@@ -32,6 +32,7 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
+    "@base-ui/react": "^1.9.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.19",
     "class-variance-authority": "^0.7.1",

package/template/src/routes/timer.tsx

@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { ExamTimerPage } from 'question-bank-framework/framework';
+
+export const Route = createFileRoute('/timer')({ component: () => <ExamTimerPage /> });