question-bank-framework 0.8.0 → 0.10.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.
@@ -56,7 +60,9 @@ 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,
+the clock disappears once the exam is over. Pause freezes the clock (the
+header shows a pause icon) and Resume carries on from the same mock time, so
+breaks don't eat into the exam. The timer lives in localStorage,
 so it survives reloads and shows in every open tab.
 
 ## Sync (Cloudflare Durable Objects)

package/framework/components/app-shell.tsx

@@ -30,20 +30,24 @@ export function AppShell({
 
   return (
     <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">
+      <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-6" aria-label="Main navigation">
+            <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}
-                    className={cn('text-sm font-semibold text-gray-600 hover:text-gray-900', active && 'text-gray-900 underline underline-offset-4')}
+                    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>
@@ -55,7 +59,7 @@ export function AppShell({
             </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')}>
+        <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>

package/framework/components/exam-timer.tsx

@@ -1,14 +1,27 @@
 // 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.
+// exam is running; <ExamTimerPage> (the /timer route) is the only place to start,
+// pause, resume or stop 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 { BookOpen, Pause, 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';
+import {
+  examState,
+  formatClock,
+  MINUTE,
+  pauseExamTimer,
+  resumeExamTimer,
+  setExamTimer,
+  useExamNow,
+  useExamTimer,
+  type ExamTimer,
+} from '../lib/exam-timer.ts';
 
 /** Moments to announce, in minutes after Start. */
 const milestones = ({ readingMinutes: reading, writingMinutes: writing }: ExamTimer) => {
@@ -41,14 +54,15 @@ export function ExamTimerBadge() {
   }, [timer?.startedAt, state?.elapsed]);
 
   if (!state || state.phase === 'over') return null;
-  const Icon = state.phase === 'reading' ? BookOpen : PenLine;
+  const Icon = state.paused ? Pause : state.phase === 'reading' ? BookOpen : PenLine;
+  const label = `${state.phase === 'reading' ? 'Reading time' : 'Writing time'}${state.paused ? ' (paused)' : ''}`;
   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'}
+      className={`flex items-center gap-1.5 text-sm font-medium tabular-nums ${state.paused ? 'text-muted-foreground' : 'text-foreground'}`}
+      title={label}
     >
-      <Icon aria-hidden="true" className="size-4" />
-      <span className="sr-only">{state.phase === 'reading' ? 'Reading time' : 'Writing time'}, mock exam time </span>
+      <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
+      <span className="sr-only">{label}, mock exam time </span>
       {state.clock}
     </span>
   );
@@ -72,6 +86,7 @@ export function ExamTimerPage({
   const timer = useExamTimer(namespace);
   const now = useExamNow(timer);
   const running = timer !== null && examState(timer, now).phase !== 'over';
+  const paused = running && timer.pausedAt !== undefined;
   const [start, setStart] = useState(defaultStart);
   const [reading, setReading] = useState(String(defaultReadingMinutes));
   const [writing, setWriting] = useState(String(defaultWritingMinutes));
@@ -94,32 +109,48 @@ export function ExamTimerPage({
     });
   };
 
-  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 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="outline"
+                onClick={() => (paused ? resumeExamTimer(namespace, timer) : pauseExamTimer(namespace, timer))}
+              >
+                {paused ? 'Resume' : 'Pause'}
+              </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>
 }