Add markdown renderer extensions: directives, image params, preview

web/scripts/__fixtures__/validate-md/invalid-image-bad-inline.md

@@ -0,0 +1,3 @@
+Non-boolean value for the `inline` parameter must surface as a validation error.
+
+![Tiny diagram](images/eq.svg?inline=yes)

web/scripts/__fixtures__/validate-md/invalid-image-non-numeric-dim.md

@@ -0,0 +1,3 @@
+Non-numeric value for a dimension parameter must surface as a validation error.
+
+![Triangle ABC](images/fig1.svg?width=abc&height=200)

web/scripts/__fixtures__/validate-md/invalid-image-only-height.md

@@ -0,0 +1,3 @@
+Image URL carrying only `height` (no matching `width`) must surface as a validation error.
+
+![Triangle ABC](images/fig1.svg?height=300)

web/scripts/__fixtures__/validate-md/invalid-image-only-width.md

@@ -0,0 +1,3 @@
+Image URL carrying only `width` (no matching `height`) must surface as a validation error — partial dimensions defeat layout reservation.
+
+![Triangle ABC](images/fig1.svg?width=400)

web/scripts/__fixtures__/validate-md/invalid-image-unknown-param.md

@@ -0,0 +1,3 @@
+Unknown query parameter on an image URL — typo guard against e.g. `widht` instead of `width`.
+
+![Triangle ABC](images/fig1.svg?widht=400&height=300)

web/scripts/__fixtures__/validate-md/invalid-image-zero-dim.md

@@ -0,0 +1,3 @@
+Zero or negative dimension value must surface as a validation error — `next/image` rejects non-positive sizes.
+
+![Triangle ABC](images/fig1.svg?width=0&height=200)

web/scripts/__fixtures__/validate-md/invalid-list-bad-style.md

@@ -0,0 +1,6 @@
+Unknown style identifier on the list directive must surface as a validation error.
+
+:::list{style=mystery}
+- First item.
+- Second item.
+:::

web/scripts/__fixtures__/validate-md/invalid-list-extra-attr.md

@@ -0,0 +1,6 @@
+Unknown extra attribute alongside the valid `style` must surface as a validation error so typos cannot pass silently.
+
+:::list{style=lower-alpha-parens foo=bar}
+- First item.
+- Second item.
+:::

web/scripts/__fixtures__/validate-md/invalid-list-no-style.md

@@ -0,0 +1,6 @@
+A `:::list` directive without the required `style` attribute must surface as a validation error.
+
+:::list
+- First item.
+- Second item.
+:::

web/scripts/__fixtures__/validate-md/invalid-quote-empty.md

@@ -0,0 +1,3 @@
+An empty `:quote[]` directive must surface as a validation error — there's nothing for the renderer to wrap.
+
+The committee replied :quote[] without further explanation.

web/scripts/__fixtures__/validate-md/invalid-quote-with-attrs.md

@@ -0,0 +1,3 @@
+The inline `:quote` directive does not accept any attributes — passing one must surface as a validation error.
+
+The committee replied :quote[your proof is correct]{class=highlighted} without further comment.

web/scripts/__fixtures__/validate-md/valid-image-dimensions.md

@@ -0,0 +1,3 @@
+Block image with intrinsic dimensions on the URL — the renderer reserves layout up front so there is no CLS jump when the file arrives:
+
+![Triangle ABC with cevians](images/fig1.svg?width=480&height=320)

web/scripts/__fixtures__/validate-md/valid-image-inline-with-dimensions.md

@@ -0,0 +1,3 @@
+Inline image carrying both intrinsic dimensions and the inline flag — the most common shape for problem images that sit mid-sentence:
+
+We use the symbol ![equals](images/eq.svg?inline=true&width=24&height=16) to denote equivalence in the rest of the proof.

web/scripts/__fixtures__/validate-md/valid-image-inline.md

@@ -0,0 +1,3 @@
+Inline image flowing with the surrounding sentence text — useful for tiny diagrams referenced mid-prose:
+
+The angle marked ![angle](images/angle-mark.svg?inline=true) appears twice in the configuration.

web/scripts/__fixtures__/validate-md/valid-list-bullet-explicit.md

@@ -0,0 +1,7 @@
+Explicit bullet style is accepted by the directive even though the bare `- ` form would render identically — the directive accepts every style identifier, including the two that have a native markdown shorthand.
+
+:::list{style=bullet}
+- First observation about the configuration.
+- Second observation about the configuration.
+- Third observation about the configuration.
+:::

web/scripts/__fixtures__/validate-md/valid-list-lower-alpha-parens.md

@@ -0,0 +1,7 @@
+Lower-case alphabetic markers with parentheses — the most common multi-part question style:
+
+:::list{style=lower-alpha-parens}
+- Find the minimum of $f(x) = x^2 + \frac{1}{x}$ on $(0, \infty)$.
+- Prove the inequality is strict.
+- Determine when equality is approached.
+:::

web/scripts/__fixtures__/validate-md/valid-list-lower-roman-parens.md

@@ -0,0 +1,7 @@
+Lower-case roman numerals with parentheses:
+
+:::list{style=lower-roman-parens}
+- Consider the case $n = 1$.
+- Now suppose $n > 1$ and the claim holds for $n - 1$.
+- Combine the two to conclude.
+:::

web/scripts/__fixtures__/validate-md/valid-list-number-parens.md

@@ -0,0 +1,7 @@
+Numbered list with parenthesised digits — common in problem statements that step through cases:
+
+:::list{style=number-parens}
+- First we show that $a > 0$.
+- Therefore $\sqrt{a}$ is well-defined.
+- We apply the AM-GM inequality.
+:::

web/scripts/__fixtures__/validate-md/valid-list-upper-alpha-parens.md

@@ -0,0 +1,7 @@
+Upper-case alphabetic markers with parentheses:
+
+:::list{style=upper-alpha-parens}
+- Triangle $ABC$ is acute.
+- Triangle $ABC$ is right-angled at $C$.
+- Triangle $ABC$ is obtuse at one vertex.
+:::

web/scripts/__fixtures__/validate-md/valid-list-upper-roman.md

@@ -0,0 +1,7 @@
+Upper-case roman numerals followed by a colon — used to label major cases:
+
+:::list{style=upper-roman}
+- All roots are real and distinct.
+- Exactly two roots coincide.
+- All three roots coincide.
+:::

web/scripts/__fixtures__/validate-md/valid-quote-in-list.md

@@ -0,0 +1,7 @@
+Inline quote nested inside a styled list — common interaction in problem statements that quote source material per case:
+
+:::list{style=lower-alpha-parens}
+- The first source claims :quote[every prime greater than 3 has the form $6k \pm 1$].
+- The second source claims :quote[the sum of the first $n$ odd numbers equals $n^2$].
+- Reconcile the two claims with a direct argument.
+:::

web/scripts/__fixtures__/validate-md/valid-quote-inline.md

@@ -0,0 +1,3 @@
+Inline quote rendered as `<q>...</q>` — mirrors the AST `QuoteText` block produced by `\uv{}` in SK/CS source:
+
+The committee's reply was simply :quote[your proof is correct, but unnecessarily long], which left the contestant unsure how to revise.

web/scripts/__tests__/__snapshots__/validate-md.test.ts.snap

@@ -1,5 +1,53 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`validate-md fixtures > invalid-image-bad-inline.md 1`] = `
+{
+  "errorFirstLine": "Image URL has invalid inline="yes" (expected "true" or "false")",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-image-non-numeric-dim.md 1`] = `
+{
+  "errorFirstLine": "Image URL has invalid width="abc" (expected a positive integer)",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-image-only-height.md 1`] = `
+{
+  "errorFirstLine": "Image URL has only one of width/height — both must be specified together",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-image-only-width.md 1`] = `
+{
+  "errorFirstLine": "Image URL has only one of width/height — both must be specified together",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-image-unknown-param.md 1`] = `
+{
+  "errorFirstLine": "Image URL has unknown parameter "widht"",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-image-zero-dim.md 1`] = `
+{
+  "errorFirstLine": "Image URL has invalid width="0" (expected a positive integer)",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
 exports[`validate-md fixtures > invalid-katex-bad-environment.md 1`] = `
 {
   "errorFirstLine": "KaTeX parse error: No such environment: notathing at position 7: \\begin{̲n̲o̲t̲a̲t̲h̲i̲n̲g̲}̲ x = 1 \\end{not…",
@@ -112,6 +160,46 @@ exports[`validate-md fixtures > invalid-katex-unmatched-left.md 1`] = `
 }
 `;
 
+exports[`validate-md fixtures > invalid-list-bad-style.md 1`] = `
+{
+  "errorFirstLine": "Unknown list style "mystery" on :::list directive (expected one of: bullet, number-dot, number-parens, lower-roman-parens, upper-roman, lower-alpha-parens, upper-alpha-parens)",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-list-extra-attr.md 1`] = `
+{
+  "errorFirstLine": "Unknown attribute(s) on :::list directive: foo",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-list-no-style.md 1`] = `
+{
+  "errorFirstLine": "Missing \`style\` attribute on :::list directive (expected one of: bullet, number-dot, number-parens, lower-roman-parens, upper-roman, lower-alpha-parens, upper-alpha-parens)",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-quote-empty.md 1`] = `
+{
+  "errorFirstLine": ":quote directive has empty content",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
+exports[`validate-md fixtures > invalid-quote-with-attrs.md 1`] = `
+{
+  "errorFirstLine": ":quote directive does not accept attributes",
+  "stage": "parse",
+  "verdict": "fail",
+}
+`;
+
 exports[`validate-md fixtures > valid-blockquote.md 1`] = `
 {
   "verdict": "ok",
@@ -136,6 +224,24 @@ exports[`validate-md fixtures > valid-image.md 1`] = `
 }
 `;
 
+exports[`validate-md fixtures > valid-image-dimensions.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
+exports[`validate-md fixtures > valid-image-inline.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
+exports[`validate-md fixtures > valid-image-inline-with-dimensions.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
 exports[`validate-md fixtures > valid-inline-math.md 1`] = `
 {
   "verdict": "ok",
@@ -154,18 +260,54 @@ exports[`validate-md fixtures > valid-list-bullet.md 1`] = `
 }
 `;
 
+exports[`validate-md fixtures > valid-list-bullet-explicit.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
+exports[`validate-md fixtures > valid-list-lower-alpha-parens.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
+exports[`validate-md fixtures > valid-list-lower-roman-parens.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
 exports[`validate-md fixtures > valid-list-nested.md 1`] = `
 {
   "verdict": "ok",
 }
 `;
 
+exports[`validate-md fixtures > valid-list-number-parens.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
 exports[`validate-md fixtures > valid-list-numbered.md 1`] = `
 {
   "verdict": "ok",
 }
 `;
 
+exports[`validate-md fixtures > valid-list-upper-alpha-parens.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
+exports[`validate-md fixtures > valid-list-upper-roman.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
 exports[`validate-md fixtures > valid-math-align.md 1`] = `
 {
   "verdict": "ok",
@@ -184,6 +326,18 @@ exports[`validate-md fixtures > valid-prose.md 1`] = `
 }
 `;
 
+exports[`validate-md fixtures > valid-quote-in-list.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
+exports[`validate-md fixtures > valid-quote-inline.md 1`] = `
+{
+  "verdict": "ok",
+}
+`;
+
 exports[`validate-md fixtures > valid-realistic-problem.md 1`] = `
 {
   "verdict": "ok",