question-bank-framework 0.7.1 → 0.9.0

package/README.md

@@ -26,19 +26,23 @@ Your app owns:
 - Thin TanStack Start routes in `src/routes/` (see `template/src/routes/`)
   wrapping `<BankProvider bank={bank}>` + `<AppShell brand>` + framework pages.
 - `src/routes/styles.css` (scaffolded by `qb init`, imported as `?url` from
-  `__root.tsx`). It must list the framework as a Tailwind source — v4 ignores
-  `node_modules` by default, so without this none of the grid/badge/filter
-  utilities are generated and the app renders unstyled:
+  `__root.tsx`):
 
 ```css
 @import 'tailwindcss';
 @import 'question-bank-framework/framework/styles/theme.css';
-@source '../node_modules/question-bank-framework'; /* relative to this file */
 ```
 
-`theme.css` also pulls in the KaTeX stylesheet from the framework's own `katex`,
-matching the version that renders math. Don't import `katex/dist/katex.min.css`
-yourself — a mismatched KaTeX version breaks math layout (0.19 renamed its CSS classes).
+`theme.css` is the design system: shadcn/ui neutral tokens, Inter Variable
+(weight and optical-size axes, with `font-optical-sizing: auto`), tw-animate-css,
+and the KaTeX stylesheet from the framework's own `katex`. It also registers the
+framework's components as a Tailwind source, so you don't need an `@source` line.
+Don't import `katex/dist/katex.min.css` yourself — a mismatched KaTeX version
+breaks math layout (0.19 renamed its CSS classes).
+
+UI components in `framework/components/ui/` are shadcn/ui on Base UI
+(base-nova style). Style everything with Tailwind utilities and the theme tokens
+(`bg-background`, `text-muted-foreground`, `border`, …), not raw colours.
 
 Text columns sort number-aware ("Q2" before "Q10"). New quizzes keep the
 table's current sort order, so to get source order add a numeric field (e.g.
@@ -48,6 +52,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,65 @@
 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-background', isQuestionBank ? 'h-dvh overflow-hidden' : 'min-h-dvh')}>
+        <header className="sticky top-0 z-20 shrink-0 border-b bg-background/80 backdrop-blur-sm">
+          <div className="flex h-14 items-center gap-6 px-6">
+            <Link to="/" className="text-sm font-semibold text-foreground">
+              {brand}
+            </Link>
+            <nav className="flex items-center gap-1" aria-label="Main navigation">
+              {navigation.map(({ label, to }) => {
+                const active = to === '/' ? pathname === '/' : pathname.startsWith(to);
+                return (
+                  <Link
+                    key={to}
+                    to={to}
+                    aria-current={active ? 'page' : undefined}
+                    className={cn(
+                      'rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none',
+                      active && 'bg-muted text-foreground',
+                    )}
+                  >
+                    {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-5xl px-6 py-10')}>
+          {children}
+        </main>
+      </div>
+    </Toaster>
   );
 }

package/framework/components/exam-timer.tsx

@@ -0,0 +1,134 @@
+// 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 { Card, CardContent, CardFooter } from './ui/card';
+import { Field, FieldGroup, FieldLabel } from './ui/field';
+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-foreground"
+      title={state.phase === 'reading' ? 'Reading time' : 'Writing time'}
+    >
+      <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
+      <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),
+    });
+  };
+
+  return (
+    <div className="mx-auto grid w-full max-w-md gap-8">
+      <h1 className="text-2xl font-semibold">Timer</h1>
+      <Card>
+        <form onSubmit={submit} className="contents">
+          <CardContent>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="exam-start">Exam start time</FieldLabel>
+                <Input id="exam-start" type="time" required value={start} onChange={(event) => setStart(event.target.value)} />
+              </Field>
+              <div className="grid grid-cols-2 gap-4">
+                <Field>
+                  <FieldLabel htmlFor="exam-reading">Reading minutes</FieldLabel>
+                  <Input id="exam-reading" type="number" min={0} required inputMode="numeric" className="tabular-nums" value={reading} onChange={(event) => setReading(event.target.value)} />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="exam-writing">Writing minutes</FieldLabel>
+                  <Input id="exam-writing" type="number" min={0} required inputMode="numeric" className="tabular-nums" value={writing} onChange={(event) => setWriting(event.target.value)} />
+                </Field>
+              </div>
+            </FieldGroup>
+          </CardContent>
+          <CardFooter className="gap-2">
+            <Button type="submit">{running ? 'Restart' : 'Start'}</Button>
+            {running && (
+              <Button type="button" variant="ghost" onClick={() => setExamTimer(namespace, null)}>
+                Stop
+              </Button>
+            )}
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}

package/framework/components/filter-builder.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { ChevronDown, Circle, Filter, Hash, Plus, Tags, Type, X } from 'lucide-react'
+import { ChevronDown, Circle, Hash, ListFilter, Plus, Tags, Type, X, type LucideIcon } from 'lucide-react'
 import { Badge } from './ui/badge'
 import { Button } from './ui/button'
 import { Checkbox } from './ui/checkbox'
@@ -31,7 +31,7 @@ import {
 } from '../lib/question-filter.ts'
 import { cn } from '../lib/utils.ts'
 
-const fieldIcons: Record<FilterFieldType, typeof Filter> = {
+const fieldIcons: Record<FilterFieldType, LucideIcon> = {
   text: Type,
   number: Hash,
   select: Circle,
@@ -70,26 +70,24 @@ export function FilterBuilder({
         if (!nextOpen) setAdding(false)
       }}
     >
-      <PopoverTrigger asChild>
-        <Button variant="outline" className="h-11 gap-2 text-base">
-          <Filter className="size-4" />
-          Filter
-          {filters.length > 0 && (
-            <Badge variant="secondary" className="h-5 min-w-5 rounded-full px-1.5 text-xs tabular-nums">
-              {filters.length}
-            </Badge>
-          )}
-        </Button>
+      <PopoverTrigger render={<Button variant="outline" />}>
+        <ListFilter aria-hidden="true" data-icon="inline-start" className="text-muted-foreground" />
+        Filter
+        {filters.length > 0 && (
+          <Badge variant="secondary" className="min-w-5 px-1.5 tabular-nums">
+            {filters.length}
+          </Badge>
+        )}
       </PopoverTrigger>
-      <PopoverContent align="start" className="w-[min(780px,calc(100vw-2rem))] p-0">
-        <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
-          <p className="text-sm font-semibold">Filters</p>
+      <PopoverContent align="start" className="w-[min(780px,calc(100vw-2rem))] gap-0 p-0">
+        <div className="flex h-10 items-center justify-between gap-2 border-b px-3">
+          <p className="text-sm font-medium">Filters</p>
           {filters.length > 0 && (
-            <Button variant="ghost" size="sm" onClick={onClear}>Clear all</Button>
+            <Button variant="ghost" size="sm" className="text-muted-foreground" onClick={onClear}>Clear all</Button>
           )}
         </div>
 
-        <div className="space-y-1 px-3 py-3">
+        <div className="flex flex-col p-2">
           {filters.length === 0 ? (
             <PropertyPicker fields={fields} onPick={onAdd} />
           ) : (
@@ -110,7 +108,7 @@ export function FilterBuilder({
         {filters.length > 0 && (
           <div className="border-t p-2">
             {adding ? (
-              <div className="space-y-1">
+              <div className="flex flex-col gap-1">
                 <PropertyPicker
                   fields={fields}
                   onPick={(field) => {
@@ -131,10 +129,10 @@ export function FilterBuilder({
               <Button
                 variant="ghost"
                 size="sm"
-                className="w-full justify-start gap-2"
+                className="w-full justify-start text-muted-foreground"
                 onClick={() => setAdding(true)}
               >
-                <Plus className="size-4" />
+                <Plus aria-hidden="true" />
                 Add filter
               </Button>
             )}
@@ -154,8 +152,8 @@ function PropertyPicker({
 }) {
   return (
     <div>
-      <p className="px-2 pb-1 pt-1 text-xs font-medium text-muted-foreground">Filter by</p>
-      <div className="grid gap-0.5">
+      <p className="px-2 py-1 text-xs font-medium text-muted-foreground">Filter by</p>
+      <div className="grid gap-px">
         {fields.map((field) => {
           const Icon = fieldIcons[field.type]
           return (
@@ -163,9 +161,9 @@ function PropertyPicker({
               key={field.id}
               type="button"
               onClick={() => onPick(field.id)}
-              className="flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent"
+              className="flex h-8 items-center gap-2 rounded-md px-2 text-left text-sm outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50"
             >
-              <Icon className="size-4 shrink-0 text-muted-foreground" />
+              <Icon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
               <span className="flex-1 truncate">{field.label}</span>
               <span className="text-xs text-muted-foreground">{fieldTypeLabels[field.type]}</span>
             </button>
@@ -185,28 +183,31 @@ function MatchToggle({
 }) {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          aria-label={`Match ${match === 'and' ? 'all' : 'any'} filters`}
-          className="my-1 ml-2 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-        >
-          {match === 'and' ? 'And' : 'Or'}
-          <ChevronDown className="size-3" />
-        </button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="xs"
+            aria-label={`Match ${match === 'and' ? 'all' : 'any'} filters`}
+            className="my-1 ml-1 text-muted-foreground"
+          />
+        }
+      >
+        {match === 'and' ? 'And' : 'Or'}
+        <ChevronDown aria-hidden="true" data-icon="inline-end" />
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-72">
+      <DropdownMenuContent align="start" className="w-48">
         <DropdownMenuRadioGroup
           value={match}
           onValueChange={(value) => onChange(value as FilterMatch)}
         >
           <DropdownMenuRadioItem value="and">
             And
-            <span className="text-muted-foreground">— all filters must match</span>
+            <span className="ml-auto text-xs text-muted-foreground">all must match</span>
           </DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="or">
             Or
-            <span className="text-muted-foreground">— at least one must match</span>
+            <span className="ml-auto text-xs text-muted-foreground">any can match</span>
           </DropdownMenuRadioItem>
         </DropdownMenuRadioGroup>
       </DropdownMenuContent>
@@ -231,10 +232,12 @@ function FilterRuleRow({
   const needsValue = rule.operator !== 'isEmpty' && rule.operator !== 'isNotEmpty'
 
   return (
-    <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-muted/30 p-2">
+    <div className="flex flex-wrap items-center gap-2 rounded-lg border p-2">
       <Select
         value={rule.field}
+        items={fields.map((candidate) => ({ value: candidate.id, label: candidate.label }))}
         onValueChange={(value) => {
+          if (value === null) return
           const nextField = fields.find((candidate) => candidate.id === value)
           if (!nextField) return
           onChange(rule.id, {
@@ -244,7 +247,7 @@ function FilterRuleRow({
           })
         }}
       >
-        <SelectTrigger size="sm" aria-label="Filter field" className="w-[132px]">
+        <SelectTrigger aria-label="Filter field" className="w-32">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -256,14 +259,16 @@ function FilterRuleRow({
 
       <Select
         value={rule.operator}
-        onValueChange={(value) =>
+        items={field.operators.map((operator) => ({ value: operator, label: operatorLabels[operator] }))}
+        onValueChange={(value) => {
+          if (value === null) return
           onChange(rule.id, {
             operator: value as FilterOperatorId,
             value: value === 'between' ? [] : rule.value,
           })
-        }
+        }}
       >
-        <SelectTrigger size="sm" aria-label="Filter operator" className="w-[172px]">
+        <SelectTrigger aria-label="Filter operator" className="w-44">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -273,7 +278,7 @@ function FilterRuleRow({
         </SelectContent>
       </Select>
 
-      <div className="min-w-[140px] flex-1">
+      <div className="min-w-36 flex-1">
         {needsValue ? (
           <FilterValueEditor
             field={field}
@@ -287,11 +292,12 @@ function FilterRuleRow({
 
       <Button
         variant="ghost"
-        size="icon-sm"
+        size="icon"
         aria-label="Remove filter"
+        className="text-muted-foreground"
         onClick={() => onRemove(rule.id)}
       >
-        <X className="size-4" />
+        <X aria-hidden="true" />
       </Button>
     </div>
   )
@@ -315,7 +321,6 @@ function FilterValueEditor({
             inputMode="decimal"
             aria-label="Minimum value"
             placeholder="Min"
-            className="h-8"
             value={rule.value[0] ?? ''}
             onChange={(event) => onChange([event.target.value, rule.value[1] ?? ''])}
           />
@@ -325,7 +330,6 @@ function FilterValueEditor({
             inputMode="decimal"
             aria-label="Maximum value"
             placeholder="Max"
-            className="h-8"
             value={rule.value[1] ?? ''}
             onChange={(event) => onChange([rule.value[0] ?? '', event.target.value])}
           />
@@ -339,7 +343,6 @@ function FilterValueEditor({
         inputMode="decimal"
         aria-label={`${field.label} value`}
         placeholder={field.placeholder ?? 'Value'}
-        className="h-8"
         value={rule.value[0] ?? ''}
         onChange={(event) => onChange([event.target.value])}
       />
@@ -351,7 +354,6 @@ function FilterValueEditor({
       <Input
         aria-label={`${field.label} value`}
         placeholder={field.placeholder ?? 'Type a value…'}
-        className="h-8"
         value={rule.value[0] ?? ''}
         onChange={(event) => onChange([event.target.value])}
       />
@@ -403,20 +405,21 @@ function ValuePicker({
         if (!nextOpen) setQuery('')
       }}
     >
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className={cn(
-            'h-8 w-full justify-between font-normal',
-            selected.length === 0 && 'text-muted-foreground',
-          )}
-        >
-          <span className="truncate">{label}</span>
-          <ChevronDown className="size-4 shrink-0 opacity-60" />
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            className={cn(
+              'w-full justify-between border-input font-normal',
+              selected.length === 0 && 'text-muted-foreground',
+            )}
+          />
+        }
+      >
+        <span className="truncate">{label}</span>
+        <ChevronDown aria-hidden="true" className="text-muted-foreground" />
       </PopoverTrigger>
-      <PopoverContent align="start" className="w-64 p-0">
+      <PopoverContent align="start" className="w-64 gap-0 p-0">
         {showSearch && (
           <div className="border-b p-2">
             <Input
@@ -425,7 +428,6 @@ function ValuePicker({
               onChange={(event) => setQuery(event.target.value)}
               placeholder="Search values…"
               aria-label={`Search ${field.label} values`}
-              className="h-8"
             />
           </div>
         )}
@@ -438,7 +440,7 @@ function ValuePicker({
               return (
                 <div
                   key={option.value}
-                  className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+                  className="flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm hover:bg-muted/50"
                   onClick={() => toggle(option.value)}
                 >
                   <Checkbox

package/framework/components/markdown-content.tsx

@@ -25,23 +25,23 @@ function MathFormula({ tex, display }: { tex: string; display: boolean }) {
 
 // Every renderer drops react-markdown's `node` prop so it isn't forwarded to the DOM.
 const components: Components = {
-  a: ({ node: _node, ...props }) => <a className="font-medium text-green-800 underline decoration-green-300 underline-offset-2 hover:text-green-950" target="_blank" rel="noreferrer" {...props} />,
-  blockquote: ({ node: _node, ...props }) => <blockquote className="my-4 border-l-2 border-gray-300 pl-4 text-gray-700" {...props} />,
+  a: ({ node: _node, ...props }) => <a className="font-medium text-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:decoration-foreground" target="_blank" rel="noreferrer" {...props} />,
+  blockquote: ({ node: _node, ...props }) => <blockquote className="my-4 border-l-2 pl-4 text-muted-foreground" {...props} />,
   code: ({ node: _node, className, children, ...props }) => {
     if (hasClass(className, 'language-math')) {
       return <MathFormula tex={textOf(children)} display={hasClass(className, 'math-display')} />
     }
     // Inline-code styling; fenced blocks reset it via the `pre` renderer below.
-    return <code className={cn('rounded bg-gray-100 px-1 py-0.5 font-mono text-[0.9em] text-gray-900 break-words', className)} {...props}>{children}</code>
+    return <code className={cn('rounded bg-muted px-1 py-0.5 font-mono text-[0.875em] break-words', className)} {...props}>{children}</code>
   },
-  h1: ({ node: _node, ...props }) => <h1 className="mb-3 mt-6 text-2xl font-bold tracking-tight text-gray-950 first:mt-0" {...props} />,
-  h2: ({ node: _node, ...props }) => <h2 className="mb-3 mt-6 text-xl font-bold tracking-tight text-gray-950 first:mt-0" {...props} />,
-  h3: ({ node: _node, ...props }) => <h3 className="mb-2 mt-5 text-lg font-semibold text-gray-950 first:mt-0" {...props} />,
-  hr: () => <hr className="my-5 border-gray-200" />,
-  img: ({ node: _node, ...props }) => <img className="my-4 h-auto max-w-full rounded-md border border-gray-200" loading="lazy" {...props} />,
+  h1: ({ node: _node, ...props }) => <h1 className="mb-3 mt-6 text-xl font-semibold first:mt-0" {...props} />,
+  h2: ({ node: _node, ...props }) => <h2 className="mb-3 mt-6 text-lg font-semibold first:mt-0" {...props} />,
+  h3: ({ node: _node, ...props }) => <h3 className="mb-2 mt-5 text-base font-semibold first:mt-0" {...props} />,
+  hr: () => <hr className="my-5" />,
+  img: ({ node: _node, ...props }) => <img className="my-4 h-auto max-w-full rounded-lg border" loading="lazy" {...props} />,
   li: ({ node: _node, ...props }) => <li className="my-1 pl-1" {...props} />,
   ol: ({ node: _node, ...props }) => <ol className="my-3 list-decimal space-y-1 pl-6" {...props} />,
-  p: ({ node: _node, ...props }) => <p className="my-3 whitespace-pre-wrap leading-7 first:mt-0 last:mb-0" {...props} />,
+  p: ({ node: _node, ...props }) => <p className="my-3 whitespace-pre-wrap first:mt-0 last:mb-0" {...props} />,
   pre: ({ node, children, ...props }) => {
     // remark-math emits display math as <pre><code class="language-math math-display">.
     const first = node?.children.find((child) => child.type === 'element')
@@ -50,17 +50,17 @@ const components: Components = {
     }
     return (
       <pre
-        className="my-4 overflow-x-auto rounded-lg bg-gray-950 p-4 text-gray-50 [&_code]:rounded-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-sm [&_code]:text-inherit [&_code]:break-normal"
+        className="my-4 overflow-x-auto rounded-lg bg-muted p-4 font-mono text-xs leading-5 [&_code]:rounded-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-xs [&_code]:break-normal"
         {...props}
       >
         {children}
       </pre>
     )
   },
-  table: ({ node: _node, children, ...props }) => <div className="my-4 overflow-x-auto"><table className="w-full border-collapse text-left text-sm" {...props}>{children}</table></div>,
-  tbody: ({ node: _node, ...props }) => <tbody className="divide-y divide-gray-200" {...props} />,
-  td: ({ node: _node, ...props }) => <td className="border border-gray-200 px-3 py-2 align-top" {...props} />,
-  th: ({ node: _node, ...props }) => <th className="border border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold" {...props} />,
+  table: ({ node: _node, children, ...props }) => <div className="my-4 overflow-x-auto rounded-lg border"><table className="w-full border-collapse text-left text-sm [&_tr>*:first-child]:border-l-0 [&_tr>*:last-child]:border-r-0 [&_tr:first-child>*]:border-t-0 [&_tbody_tr:last-child>*]:border-b-0" {...props}>{children}</table></div>,
+  tbody: ({ node: _node, ...props }) => <tbody className="divide-y" {...props} />,
+  td: ({ node: _node, ...props }) => <td className="border px-3 py-2 align-top" {...props} />,
+  th: ({ node: _node, ...props }) => <th className="border bg-muted/50 px-3 py-2 text-left font-medium" {...props} />,
   ul: ({ node: _node, ...props }) => <ul className="my-3 list-disc space-y-1 pl-6" {...props} />,
 }
 
@@ -153,5 +153,5 @@ export function MarkdownContent({ content, className, inline = false }: { conten
     </ReactMarkdown>
   )
   if (inline) return <span className={cn('min-w-0', className)}>{markdown}</span>
-  return <div className={cn(blockClassName, 'text-base leading-7 text-gray-800', className)}>{markdown}</div>
+  return <div className={cn(blockClassName, 'text-[15px] leading-7 text-foreground', className)}>{markdown}</div>
 }