question-bank-framework 0.7.0 → 0.7.1

package/README.md

@@ -36,6 +36,10 @@ Your app owns:
 @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).
+
 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.
 `order`) and sort by it, or set it in `defaultSorting`.

package/framework/components/markdown-content.tsx

@@ -1,30 +1,67 @@
+import katex from 'katex'
+import type { ReactNode } from 'react'
 import ReactMarkdown, { type Components } from 'react-markdown'
-import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import { cn } from '../lib/utils.ts'
 
+// Math is rendered with the framework's own `katex` dependency rather than
+// rehype-katex, which pins katex@^0.16. KaTeX 0.19 renamed its CSS classes
+// (`.base` → `.katex-base`, …), so 0.16 markup styled by 0.19 CSS loses its
+// layout (subscripts wrap and overlap). theme.css imports the CSS from the
+// same katex package, so markup and stylesheet always agree.
+const textOf = (children: ReactNode): string =>
+  Array.isArray(children) ? children.map(textOf).join('') : typeof children === 'string' || typeof children === 'number' ? String(children) : ''
+
+const hasClass = (className: unknown, name: string) =>
+  (Array.isArray(className) ? className.map(String) : String(className ?? '').split(/\s+/)).includes(name)
+
+function MathFormula({ tex, display }: { tex: string; display: boolean }) {
+  const html = katex.renderToString(tex, { displayMode: display, throwOnError: false, strict: 'ignore' })
+  return display
+    ? <div dangerouslySetInnerHTML={{ __html: html }} />
+    : <span dangerouslySetInnerHTML={{ __html: html }} />
+}
+
+// Every renderer drops react-markdown's `node` prop so it isn't forwarded to the DOM.
 const components: Components = {
-  a: ({ ...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: ({ ...props }) => <blockquote className="my-4 border-l-2 border-gray-300 pl-4 text-gray-700" {...props} />,
-  code: ({ className, children, ...props }) => {
-    const isBlock = className?.startsWith('language-') ?? false
-    return <code className={cn(isBlock ? 'font-mono text-sm' : 'rounded bg-gray-100 px-1 py-0.5 font-mono text-[0.9em] text-gray-900 break-words', className)} {...props}>{children}</code>
+  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} />,
+  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>
   },
-  h1: ({ ...props }) => <h1 className="mb-3 mt-6 text-2xl font-bold tracking-tight text-gray-950 first:mt-0" {...props} />,
-  h2: ({ ...props }) => <h2 className="mb-3 mt-6 text-xl font-bold tracking-tight text-gray-950 first:mt-0" {...props} />,
-  h3: ({ ...props }) => <h3 className="mb-2 mt-5 text-lg font-semibold text-gray-950 first:mt-0" {...props} />,
+  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: ({ ...props }) => <img className="my-4 h-auto max-w-full rounded-md border border-gray-200" loading="lazy" {...props} />,
-  li: ({ ...props }) => <li className="my-1 pl-1" {...props} />,
-  ol: ({ ...props }) => <ol className="my-3 list-decimal space-y-1 pl-6" {...props} />,
-  p: ({ ...props }) => <p className="my-3 whitespace-pre-wrap leading-7 first:mt-0 last:mb-0" {...props} />,
-  pre: ({ children, ...props }) => <pre className="my-4 overflow-x-auto rounded-lg bg-gray-950 p-4 text-gray-50" {...props}>{children}</pre>,
-  table: ({ children, ...props }) => <div className="my-4 overflow-x-auto"><table className="w-full border-collapse text-left text-sm" {...props}>{children}</table></div>,
-  tbody: ({ ...props }) => <tbody className="divide-y divide-gray-200" {...props} />,
-  td: ({ ...props }) => <td className="border border-gray-200 px-3 py-2 align-top" {...props} />,
-  th: ({ ...props }) => <th className="border border-gray-200 bg-gray-50 px-3 py-2 text-left font-semibold" {...props} />,
-  ul: ({ ...props }) => <ul className="my-3 list-disc space-y-1 pl-6" {...props} />,
+  img: ({ node: _node, ...props }) => <img className="my-4 h-auto max-w-full rounded-md border border-gray-200" 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} />,
+  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')
+    if (first?.type === 'element' && hasClass(first.properties.className, 'math-display')) {
+      return <div className="my-4 overflow-x-auto overflow-y-hidden py-1">{children}</div>
+    }
+    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"
+        {...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} />,
+  ul: ({ node: _node, ...props }) => <ul className="my-3 list-disc space-y-1 pl-6" {...props} />,
 }
 
 const markdownCode = /```[\s\S]*?```|~~~[\s\S]*?~~~|(`+)(?!`)[\s\S]*?\1(?!`)/g
@@ -102,16 +139,16 @@ const normalizeGfmTables = (content: string) => {
 // blank labels) can sit inside buttons, select triggers and flex rows.
 const inlineComponents: Components = {
   ...components,
-  p: ({ ...props }) => <span className="whitespace-pre-wrap" {...props} />,
+  p: ({ node: _node, ...props }) => <span className="whitespace-pre-wrap" {...props} />,
 }
 
 // min-w-0 + break-words keep long tokens inside the column; display math
-// and wide tables/code scroll horizontally instead of widening the page.
-const blockClassName = 'min-w-0 max-w-full break-words [&_.katex-display]:overflow-x-auto [&_.katex-display]:overflow-y-hidden [&_.katex-display]:py-1'
+// and wide tables/code scroll horizontally (see the `pre`/`table` renderers).
+const blockClassName = 'min-w-0 max-w-full break-words'
 
 export function MarkdownContent({ content, className, inline = false }: { content: string; className?: string; inline?: boolean }) {
   const markdown = (
-    <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]} components={inline ? inlineComponents : components}>
+    <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} components={inline ? inlineComponents : components}>
       {normalizeGfmTables(normalizeMathDelimiters(content))}
     </ReactMarkdown>
   )

package/framework/components/question-response.tsx

@@ -166,19 +166,21 @@ export function PairingResponse({
             <li
               key={slot.id}
               className={cn(
-                'flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-center',
+                // Wraps instead of squeezing: short items sit beside their select, while
+                // wide items (long formulas) take the full row and the select drops below.
+                'flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border p-3',
                 state === 'idle' && 'border-gray-200 bg-white',
                 state === 'correct' && 'border-green-300 bg-green-50/50',
                 (state === 'incorrect' || state === 'missing') && 'border-red-300 bg-red-50/50',
               )}
             >
-              <div className="flex min-w-0 flex-1 items-start gap-2">
+              <div className="flex min-w-0 max-w-full flex-[1_1_auto] items-start gap-2">
                 <span className="mt-0.5 w-6 shrink-0 text-sm font-semibold tabular-nums text-gray-500">{index + 1}.</span>
-                <label htmlFor={selectId} className="min-w-0 flex-1 overflow-x-auto text-base leading-7 text-gray-900">
+                <label htmlFor={selectId} className="min-w-0 flex-1 overflow-x-auto overflow-y-hidden text-base leading-7 text-gray-900">
                   <MarkdownContent inline content={label} />
                 </label>
               </div>
-              <div className="flex shrink-0 flex-col gap-1 pl-8 sm:pl-0">
+              <div className="ml-auto flex shrink-0 flex-col gap-1 pl-8 sm:pl-0">
                 <div className="flex items-center gap-2">
                   <OptionSelect
                     id={selectId}

package/framework/styles/theme.css

@@ -7,6 +7,10 @@
  *   @import 'question-bank-framework/framework/styles/theme.css';
  */
 
+/* KaTeX CSS from the framework's own katex, matching the version that renders
+ * math in MarkdownContent. Don't import katex CSS separately in your app. */
+@import 'katex/dist/katex.min.css';
+
 @theme inline {
   --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
   --font-display: 'Fraunces', Georgia, serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "question-bank-framework",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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",
@@ -40,7 +40,6 @@
     "lucide-react": "^1.57.0",
     "radix-ui": "^1.8.1",
     "react-markdown": "^10.1.0",
-    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "tailwind-merge": "^3.7.0",

package/template/src/routes/styles.css

@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');
-@import 'katex/dist/katex.min.css';
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @import 'question-bank-framework/framework/styles/theme.css';