@erudit-js/prose 4.2.0 → 4.3.0

package/dist/app/composables/context.d.ts

@@ -3,6 +3,7 @@ import type { useFloating, UseFloatingOptions } from '@floating-ui/vue';
 import type { EruditLanguageCode } from '@erudit-js/core/eruditConfig/language';
 import type { EruditMode } from '@erudit-js/core/mode';
 import type { FormatText } from '@erudit-js/core/formatText';
+import type { ProblemCheckers } from '@erudit-js/core/problemCheck';
 import type { ProseAppElement } from '../appElement.js';
 export interface ProseContext {
     mode: EruditMode;
@@ -14,6 +15,7 @@ export interface ProseContext {
     baseUrl: string;
     hashUrl: Ref<string | undefined>;
     eruditIcons: Record<string, string>;
+    problemCheckers: ProblemCheckers;
     EruditTransition: Component;
     EruditIcon: Component;
     EruditLink: Component;

package/dist/app/composables/language.d.ts

@@ -1,8 +1,6 @@
 import type { ProseElement } from 'tsprose';
 import type { ElementPhrases } from '../language/element.js';
-export declare function useProseLanguage(): Promise<{
-    copy_link: string;
-    copied: string;
-}>;
+import { type ProsePhrases } from '../language/prose.js';
+export declare function useProseLanguage(): Promise<ProsePhrases>;
 export declare function useElementPhrase<TPhrases extends ElementPhrases>(schemaName: string): Promise<TPhrases>;
 export declare function useElementPhrase<TPhrases extends ElementPhrases>(element: ProseElement): Promise<TPhrases>;

package/dist/app/composables/language.js

@@ -1,9 +1,13 @@
 import { proseLanguages } from "../language/prose.js";
 import { useProseContext } from "./context.js";
 import { useAppElement } from "./appElement.js";
-export async function useProseLanguage() {
+const proseLanguageCache = new Map();
+export function useProseLanguage() {
 	const { languageCode } = useProseContext();
-	return (await proseLanguages[languageCode]()).default;
+	if (!proseLanguageCache.has(languageCode)) {
+		proseLanguageCache.set(languageCode, proseLanguages[languageCode]().then((m) => m.default));
+	}
+	return proseLanguageCache.get(languageCode);
 }
 export async function useElementPhrase(elementOrName) {
 	const { languageCode } = useProseContext();

package/dist/app/shared/block/Block.vue

@@ -11,6 +11,7 @@ import { useFloating, autoUpdate, offset, shift } from '@floating-ui/vue';
 
 import { useProseContext } from '../../composables/context.js';
 import { useElementIcon } from '../../composables/elementIcon.js';
+import { useProseLanguage } from '../../composables/language.js';
 import {
   useIsAnchor,
   useJumpToAnchor,
@@ -22,6 +23,10 @@ import type { BlockProseElement } from 'tsprose';
 
 const { element } = defineProps<{ element: BlockProseElement }>();
 const { EruditIcon, EruditTransition, setHtmlIds } = useProseContext();
+
+// Pre-warm the prose language module so it is cached before the aside menu opens.
+const _proseLang = useProseLanguage();
+
 const elementIcon = await useElementIcon(element);
 
 const formatTextState = useFormatTextState();

package/dist/coreElement.d.ts

@@ -1,16 +1,11 @@
 import type { ElementStorageCreator, Schema } from 'tsprose';
+import type { EruditDependencies } from '@erudit-js/core/dependencies';
 import type { RawToProseSchemaHook } from './rawToProse/hook.js';
 import type { EruditTag, ToEruditTag } from './tag.js';
-export interface ProseCoreElementDependencies {
-    [dependencyName: string]: {
-        transpile?: boolean;
-        optimize?: boolean;
-    };
-}
 export type ToProseCoreElement<TSchema extends Schema, Tags extends EruditTag[] | undefined> = {
     schema: TSchema;
     tags: Tags;
-    dependencies?: ProseCoreElementDependencies;
+    dependencies?: EruditDependencies;
 } & ({
     createStorage: ElementStorageCreator<TSchema>;
 } | {

package/dist/elements/diagram/Diagram.vue

@@ -10,6 +10,7 @@ import {
   useTemplateRef,
 } from 'vue';
 import type { ToProseElement } from 'tsprose';
+import type { Mermaid } from 'mermaid';
 
 import type { DiagramSchema } from './core.js';
 import { usePhotoSwipe } from '../../app/shared/photoswipe/composable.js';
@@ -183,8 +184,9 @@ async function diagramIntersectHit(entries: IntersectionObserverEntry[]) {
 }
 
 async function renderDiagram() {
-  const mermaid = //@ts-ignore
-    (await import('https://cdn.jsdelivr.net/npm/mermaid@11.12.2/+esm')).default;
+  // @ts-expect-error
+  const mermaid = (await import('mermaid/dist/mermaid.esm.min'))
+    .default as Mermaid;
 
   mermaid.initialize({
     startOnLoad: false,
@@ -192,8 +194,8 @@ async function renderDiagram() {
     markdownAutoWrap: false,
     flowchart: {
       useMaxWidth: true,
-      padding: 10,
-      wrappingWidth: 400,
+      padding: 16,
+      wrappingWidth: 600,
     },
     theme: 'base',
   });

package/dist/elements/diagram/core.d.ts

@@ -14,6 +14,9 @@ declare const _default: {
     readonly schema: DiagramSchema;
     readonly tags: [import("../../tag.js").ToEruditTag<DiagramSchema, "Diagram", unknown>];
     readonly dependencies: {
+        readonly mermaid: {
+            transpile: true;
+        };
         readonly photoswipe: {
             optimize: boolean;
             transpile: boolean;

package/dist/elements/diagram/core.js

@@ -23,5 +23,8 @@ export const Diagram = defineEruditTag({
 export default defineProseCoreElement({
 	schema: diagramSchema,
 	tags: [Diagram],
-	dependencies: { ...photoswipeDependency }
+	dependencies: {
+		...photoswipeDependency,
+		...{ mermaid: { transpile: true } }
+	}
 });

package/dist/elements/diagram/icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-    <path d="M480-60q-63 0-106.5-43.5T330-210q0-52 31-91.5t79-53.5v-85H280q-33 0-56.5-23.5T200-520v-80h-60q-17 0-28.5-11.5T100-640v-200q0-17 11.5-28.5T140-880h200q17 0 28.5 11.5T380-840v200q0 17-11.5 28.5T340-600h-60v80h400v-85q-48-14-79-53.5T570-750q0-63 43.5-106.5T720-900q63 0 106.5 43.5T870-750q0 52-31 91.5T760-605v85q0 33-23.5 56.5T680-440H520v85q48 14 79 53.5t31 91.5q0 63-43.5 106.5T480-60Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
+  <path d="M480.31,873.58c-39.36,0-72.62-13.59-99.8-40.76-27.18-27.18-40.76-60.44-40.76-99.8,0-32.49,9.68-61.07,29.05-85.74,19.37-24.68,44.04-41.39,74.03-50.13v-79.65h-149.94c-20.62,0-38.26-7.34-52.95-22.02s-22.02-32.33-22.02-52.95v-74.97h-56.23c-10.62,0-19.52-3.59-26.71-10.78s-10.78-16.09-10.78-26.71v-187.42c0-10.62,3.59-19.52,10.78-26.71s16.09-10.78,26.71-10.78h187.42c10.62,0,19.52,3.59,26.71,10.78s10.78,16.09,10.78,26.71v187.42c0,10.62-3.59,19.52-10.78,26.71s-16.09,10.78-26.71,10.78h-56.23v74.97h374.84v-79.65c-29.99-8.75-54.66-25.46-74.03-50.13s-29.05-53.26-29.05-85.74c0-39.36,13.59-72.62,40.76-99.8,27.18-27.18,60.44-40.76,99.8-40.76s72.62,13.59,99.8,40.76,40.76,60.44,40.76,99.8c0,32.49-9.68,61.07-29.05,85.74s-44.04,41.39-74.03,50.13v79.65c0,20.62-7.34,38.26-22.02,52.95s-32.33,22.02-52.95,22.02h-149.94v79.65c29.99,8.75,54.66,25.46,74.03,50.13,19.37,24.68,29.05,53.26,29.05,85.74,0,39.36-13.59,72.62-40.76,99.8-27.18,27.18-60.44,40.76-99.8,40.76Z"/>
 </svg>

package/dist/elements/math/components/InlinerMath.vue

@@ -16,13 +16,19 @@ const { element } = defineProps<{
 
 const inlinerMathStorage =
   (await useElementStorage(element)) ??
-  (await createInlinerMathStorage(element.data));
+  (await createInlinerMathStorage(element.data.katex));
 </script>
 
 <template>
   <Inliner :element>
     <template v-if="inlinerMathStorage.type === 'text'">
-      <span :class="[$style.inlinerMath, $style.textMath]">
+      <span
+        :class="[
+          $style.inlinerMath,
+          $style.textMath,
+          element.data.currentColor && $style.currentColor,
+        ]"
+      >
         <template v-for="token of inlinerMathStorage.tokens">
           <span :class="{ [$style.word]: token.type === 'word' }">
             {{ token.value }}
@@ -32,7 +38,10 @@ const inlinerMathStorage =
     </template>
     <Katex
       v-else
-      :class="$style.inlinerMath"
+      :class="[
+        $style.inlinerMath,
+        element.data.currentColor && $style.currentColor,
+      ]"
       :math="inlinerMathStorage.mathHtml"
       mode="inline"
       :freeze="false"
@@ -42,10 +51,12 @@ const inlinerMathStorage =
 
 <style module>
 .inlinerMath {
-  --katex-color_default: light-dark(
-    color-mix(in hsl, var(--color-text-muted), var(--color-brand) 35%),
-    color-mix(in hsl, var(--color-text), var(--color-brand) 30%)
-  );
+  &:not(.currentColor) {
+    --katex-color_default: light-dark(
+      color-mix(in hsl, var(--color-text-muted), var(--color-brand) 35%),
+      color-mix(in hsl, var(--color-text), var(--color-brand) 30%)
+    );
+  }
 }
 
 .textMath {

package/dist/elements/math/core.d.ts

@@ -19,11 +19,13 @@ declare const _default: readonly [{
     };
 }, {
     readonly schema: import("./inliner.js").InlinerMathSchema;
-    readonly tags: [import("../../tag.js").ToEruditTag<import("./inliner.js").InlinerMathSchema, "M", import("tsprose").RequiredChildren>];
+    readonly tags: [import("../../tag.js").ToEruditTag<import("./inliner.js").InlinerMathSchema, "M", {
+        currentColor?: true;
+    } & import("tsprose").RequiredChildren>];
     readonly createStorage: (element: {
         schema: import("./inliner.js").InlinerMathSchema;
         id: string;
-        data: string;
+        data: import("./inliner.js").InlinerMathData;
         storageKey: string;
         children: undefined;
         __TSPROSE_proseElement: true;

package/dist/elements/math/inliner.d.ts

@@ -24,19 +24,27 @@ export interface InlinerMathSchema extends Schema {
     name: 'inlinerMath';
     type: 'inliner';
     linkable: true;
-    Data: string;
+    Data: InlinerMathData;
     Storage: InlinerMathStorage;
     Children: undefined;
 }
+export interface InlinerMathData {
+    katex: string;
+    currentColor?: boolean;
+}
 export declare const inlinerMathSchema: InlinerMathSchema;
-export declare const M: import("../../tag.js").ToEruditTag<InlinerMathSchema, "M", RequiredChildren>;
+export declare const M: import("../../tag.js").ToEruditTag<InlinerMathSchema, "M", {
+    currentColor?: true;
+} & RequiredChildren>;
 export declare const inlinerMathCoreElement: {
     readonly schema: InlinerMathSchema;
-    readonly tags: [import("../../tag.js").ToEruditTag<InlinerMathSchema, "M", RequiredChildren>];
+    readonly tags: [import("../../tag.js").ToEruditTag<InlinerMathSchema, "M", {
+        currentColor?: true;
+    } & RequiredChildren>];
     readonly createStorage: (element: {
         schema: InlinerMathSchema;
         id: string;
-        data: string;
+        data: InlinerMathData;
         storageKey: string;
         children: undefined;
         __TSPROSE_proseElement: true;

package/dist/elements/math/inliner.js

@@ -50,19 +50,22 @@ export const inlinerMathSchema = defineSchema({
 export const M = defineEruditTag({
 	tagName: "M",
 	schema: inlinerMathSchema
-})(({ element, tagName, children }) => {
+})(({ props, element, tagName, children }) => {
 	ensureTagChildren(tagName, children, textSchema);
 	const katex = normalizeKatex(children[0].data);
 	if (!katex) {
 		throw new EruditProseError(`<${tagName}> tag must contain non-empty KaTeX math expression.`);
 	}
-	element.data = katex;
+	element.data = { katex };
 	element.storageKey = `$ ${katex} $`;
+	if (props.currentColor) {
+		element.data.currentColor = true;
+	}
 });
 export const inlinerMathCoreElement = defineProseCoreElement({
 	schema: inlinerMathSchema,
 	tags: [M],
-	createStorage: async (element) => createInlinerMathStorage(element.data),
+	createStorage: async (element) => createInlinerMathStorage(element.data.katex),
 	dependencies: katexDependency
 });
 export async function createInlinerMathStorage(katex) {

package/dist/elements/problem/_global.d.ts

@@ -231,6 +231,12 @@ export const Problems = '_tag_';
  * - `<ProblemCheck>` (repeatable)
  * - `<ProblemNote>`
  *
+ * ### Props
+ * - `label` — optional tab label string
+ * - `standalone` — when set, hides any shared description blocks defined at the
+ *   `<Problems>` level for this sub-problem only. Useful when a general task
+ *   applies to all sub-problems except certain ones.
+ *
  * @title SubProblem
  * @layout block
  * @example
@@ -243,6 +249,22 @@ export const Problems = '_tag_';
  *   <ProblemCheck answer={42} />
  * </SubProblem>
  * ```
+ * @example
+ * ```tsx
+ * <Problems title="Problem Set">
+ *   <P>Find all roots.</P>
+ *   <SubProblem>
+ *     <ProblemDescription>
+ *       This text is visible along with the "Find all roots" description since standalone is not set.
+ *     </ProblemDescription>
+ *   </SubProblem>
+ *   <SubProblem standalone>
+ *     <ProblemDescription>
+ *       Custom problem description. No "Find all roots" text shown since standalone is set.
+ *     </ProblemDescription>
+ *   </SubProblem>
+ * </Problems>
+ * ```
  */
 export const SubProblem = '_tag_';
 

package/dist/elements/problem/components/ProblemContent.vue

@@ -189,6 +189,13 @@ onMounted(async () => {
   }
 });
 
+function stripIds(el: ToProseElement<any>): void {
+  delete (el as any).id;
+  for (const child of (el.children ?? []) as ToProseElement<any>[]) {
+    stripIds(child);
+  }
+}
+
 let currentSeed: ProblemSeed = DEFAULT_SEED;
 async function doGenerate(seed: ProblemSeed) {
   if (!scriptInstance.value) {
@@ -207,7 +214,9 @@ async function doGenerate(seed: ProblemSeed) {
   const proseElements: ToProseElement<ProblemContentChild>[] = [];
   for (const rawElement of rawElements) {
     const resolveResult = await eruditRawToProse({ rawProse: rawElement });
-    proseElements.push(resolveResult.prose as any);
+    const prose = resolveResult.prose as ToProseElement<ProblemContentChild>;
+    stripIds(prose);
+    proseElements.push(prose);
   }
 
   if (currentSeed !== seed) {

package/dist/elements/problem/components/Problems.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { ref, computed, watchEffect } from 'vue';
 import {
   isProseElement,
   type BlockProseElement,
@@ -36,6 +36,10 @@ const subProblems = element.children.filter((child) =>
 
 const activeSubProblemI = ref(0);
 
+const showShared = computed(
+  () => subProblems[activeSubProblemI.value]?.data.standalone !== true,
+);
+
 function getUnlabeledOrdinal(index: number) {
   let count = 0;
   for (let i = 0; i <= index; i++) {
@@ -57,7 +61,10 @@ watchEffect(() => {
   <Block :element>
     <ProblemContainer>
       <ProblemHeader :info="element.data" />
-      <div v-if="sharedChildren.length" class="pt-(--proseAsideWidth)">
+      <div
+        v-if="sharedChildren.length && showShared"
+        class="pt-(--proseAsideWidth)"
+      >
         <Render v-for="sharedChild of sharedChildren" :element="sharedChild" />
       </div>
       <div

package/dist/elements/problem/components/expanders/Check.vue

@@ -6,6 +6,7 @@ import {
   checkProblemAnswer,
   fromSerializableValidator,
   type ProblemCheckSchema,
+  type ProblemCheckContext,
 } from '../../problemCheck.js';
 import checkIcon from '../../assets/actions/check.svg?raw';
 import plusIcon from '../../../../app/shared/assets/plus.svg?raw';
@@ -14,7 +15,7 @@ import { useFormatText } from '../../../../app/composables/formatText.js';
 import { useProseContext } from '../../../../app/index.js';
 import { useProblemPhrase } from '../../composables/phrase.js';
 
-type CheckStatus = 'default' | 'correct' | 'wrong';
+type CheckStatus = 'default' | 'loading' | 'correct' | 'wrong';
 
 type CheckState = {
   icon: string;
@@ -40,6 +41,13 @@ const emit = defineEmits<{
   (event: 'status-change', status: CheckStatus): void;
 }>();
 
+const state = ref<CheckStatus>('default');
+
+const formatText = useFormatText();
+const { EruditIcon, EruditTransition, loadingSvg, problemCheckers } =
+  useProseContext();
+const phrase = await useProblemPhrase();
+
 const states: Record<CheckStatus, CheckState> = {
   default: {
     icon: checkIcon,
@@ -48,6 +56,12 @@ const states: Record<CheckStatus, CheckState> = {
     buttonClass:
       'text-text-muted border-border hocus:border-text-muted hocus:text-text',
   },
+  loading: {
+    icon: loadingSvg,
+    labelClass: 'text-text-muted',
+    inputClass: 'border-border text-text',
+    buttonClass: 'text-text-muted border-border',
+  },
   correct: {
     icon: successIcon,
     labelClass: 'text-lime-600',
@@ -63,11 +77,8 @@ const states: Record<CheckStatus, CheckState> = {
   },
 };
 
-const state = ref<CheckStatus>('default');
-
-const formatText = useFormatText();
-const { EruditIcon, EruditTransition } = useProseContext();
-const phrase = await useProblemPhrase();
+const currentState = computed(() => states[state.value]);
+const isLoading = computed(() => state.value === 'loading');
 
 const hint = computed(() => {
   if (check.data.hint) {
@@ -109,7 +120,7 @@ watch(answerInput, () => {
   emit('status-change', 'default');
 });
 
-function doCheck() {
+async function doCheck() {
   const newInput = answerInput.value.replace(/\s+/g, ' ').trim();
 
   if (newInput === lastCheckedInput.value) {
@@ -117,6 +128,7 @@ function doCheck() {
   }
 
   lastCheckedInput.value = newInput;
+  state.value = 'loading';
 
   if (script) {
     const ok = script.check(newInput || undefined);
@@ -125,12 +137,17 @@ function doCheck() {
     return;
   }
 
-  state.value = checkProblemAnswer(
+  const checkContext: ProblemCheckContext = {
+    yesRegexp: phrase.yes_regexp,
+    noRegexp: phrase.no_regexp,
+    checkers: problemCheckers,
+  };
+
+  state.value = (await checkProblemAnswer(
     newInput,
-    phrase.yes_regexp,
-    phrase.no_regexp,
     validator.value,
-  )
+    checkContext,
+  ))
     ? 'correct'
     : 'wrong';
 
@@ -143,7 +160,7 @@ function doCheck() {
     <div
       :class="[
         'text-main-sm font-medium transition-[color]',
-        states[state].labelClass,
+        currentState.labelClass,
       ]"
     >
       <span @click="answerInputElement?.focus()">
@@ -157,36 +174,38 @@ function doCheck() {
         v-model="answerInput"
         type="text"
         autocomplete="off"
+        :disabled="isLoading"
         :placeholder="check.data.placeholder"
         :class="[
           `bg-bg-main text-main-sm focus:ring-brand relative z-10 min-w-0 flex-1
           rounded rounded-tr-none rounded-br-none border border-r-0 px-2.5 py-1
           ring-2 ring-transparent outline-0
           transition-[border,color,background,box-shadow]`,
-          states[state].inputClass,
+          currentState.inputClass,
         ]"
       />
 
       <button
         type="submit"
+        :disabled="isLoading"
         :class="[
           `bg-bg-main relative w-[50px] cursor-pointer rounded rounded-tl-none
           rounded-bl-none border outline-0 transition-[border,color,background]`,
-          states[state].buttonClass,
+          currentState.buttonClass,
         ]"
       >
         <EruditIcon
           :key="state"
-          :name="states[state].icon"
-          :class="['invisible m-auto text-[1.2em]', states[state].iconClass]"
+          :name="currentState.icon"
+          :class="['invisible m-auto text-[1.2em]', currentState.iconClass]"
         />
         <EruditTransition>
           <EruditIcon
             :key="state"
-            :name="states[state].icon"
+            :name="currentState.icon"
             :class="[
               'absolute top-1/2 left-1/2 -translate-1/2 text-[1.2em]',
-              states[state].iconClass,
+              currentState.iconClass,
             ]"
           />
         </EruditTransition>

package/dist/elements/problem/core.d.ts

@@ -18,6 +18,7 @@ declare const _default: readonly [{
     readonly schema: import("./problems.js").SubProblemSchema;
     readonly tags: [import("../../tag.js").ToEruditTag<import("./problems.js").SubProblemSchema, "SubProblem", {
         label?: string;
+        standalone?: true;
     } & ({
         children: {};
         script?: undefined;

package/dist/elements/problem/problemCheck.d.ts

@@ -1,5 +1,6 @@
 import type { XOR } from 'ts-xor';
 import { type OptionalChildren, type Schema } from 'tsprose';
+import { type ProblemCheckObject, type ProblemCheckers } from '@erudit-js/core/problemCheck';
 export interface ProblemCheckInfo {
     label?: string;
     hint?: string;
@@ -62,11 +63,12 @@ export declare const problemCheckCoreElement: {
         script: string;
     }> & OptionalChildren)>];
 };
+export { type ProblemCheckObject, isProblemCheckObject, type ProblemCheckers, } from '@erudit-js/core/problemCheck';
 export interface ProblemCheckValidatorBoolean {
     type: 'boolean';
     answer: boolean;
 }
-export type ProblemCheckValue = undefined | number | string | RegExp;
+export type ProblemCheckValue = undefined | number | string | RegExp | ProblemCheckObject;
 export type ProblemCheckValueDefined = Exclude<ProblemCheckValue, undefined>;
 export interface ProblemCheckValidatorValue {
     type: 'value';
@@ -83,13 +85,13 @@ export interface ProblemCheckValidatorScript {
     name: string;
 }
 export type ProblemCheckValidator = ProblemCheckValidatorBoolean | ProblemCheckValidatorValue | ProblemCheckValidatorArray | ProblemCheckValidatorScript;
-export declare function toSerializableValidator(validator: ProblemCheckValidator): ProblemCheckValidatorBoolean | ProblemCheckValidatorScript | {
+export declare function toSerializableValidator(validator: ProblemCheckValidator): ProblemCheckValidatorBoolean | ProblemCheckValidatorValue | ProblemCheckValidatorArray | ProblemCheckValidatorScript | {
     type: string;
-    answer: string | number | {
+    answer: string | number | ProblemCheckObject | {
         readonly type: "regexp";
         readonly source: string;
         readonly flags: string;
-    } | (string | number | {
+    } | (string | number | ProblemCheckObject | {
         readonly type: "regexp";
         readonly source: string;
         readonly flags: string;
@@ -101,16 +103,21 @@ export declare function toSerializableValidator(validator: ProblemCheckValidator
     type: string;
     ordered: boolean;
     separator: string;
-    answers: (string | number | {
+    answers: (string | number | ProblemCheckObject | {
         readonly type: "regexp";
         readonly source: string;
         readonly flags: string;
-    } | (string | number | {
+    } | (string | number | ProblemCheckObject | {
         readonly type: "regexp";
         readonly source: string;
         readonly flags: string;
     } | undefined)[] | undefined)[];
     answer?: undefined;
 };
-export declare function fromSerializableValidator(serializedValidator: any): ProblemCheckValidator;
-export declare function checkProblemAnswer(answer: string, yesRegexp: RegExp, noRegexp: RegExp, validator: ProblemCheckValidator): boolean;
+export declare function fromSerializableValidator(serializedValidator: any): ProblemCheckValidator | ProblemCheckObject;
+export interface ProblemCheckContext {
+    yesRegexp: RegExp;
+    noRegexp: RegExp;
+    checkers: ProblemCheckers;
+}
+export declare function checkProblemAnswer(answer: string, against: ProblemCheckValidator | ProblemCheckObject, context: ProblemCheckContext): Promise<boolean>;

package/dist/elements/problem/problemCheck.js

@@ -1,4 +1,5 @@
 import { defineSchema, ensureTagChildren } from "tsprose";
+import { isProblemCheckObject } from "@erudit-js/core/problemCheck";
 import { defineEruditTag } from "../../tag.js";
 import { defineProseCoreElement } from "../../coreElement.js";
 import { EruditProseError } from "../../error.js";
@@ -46,9 +47,17 @@ export const ProblemCheck = defineEruditTag({
 			answer: !!props.boolean
 		};
 	} else if ("answer" in props) {
+		const answerProp = props.answer;
+		if (!Array.isArray(answerProp) && isProblemCheckObject(answerProp)) {
+			element.data = {
+				...checkInfo,
+				serializedValidator: answerProp
+			};
+			return;
+		}
 		validator = {
 			type: "value",
-			answer: props.answer
+			answer: answerProp
 		};
 	} else if ("answers" in props) {
 		const answersProp = props.answers;
@@ -83,7 +92,14 @@ export const problemCheckCoreElement = defineProseCoreElement({
 	schema: problemCheckSchema,
 	tags: [ProblemCheck]
 });
+//
+// ProblemCheck Data
+//
+export { isProblemCheckObject } from "@erudit-js/core/problemCheck";
 export function toSerializableValidator(validator) {
+	if (validator.__ERUDIT_CHECK === true) {
+		return validator;
+	}
 	if (validator.type === "boolean") {
 		return validator;
 	}
@@ -122,6 +138,9 @@ export function toSerializableValidator(validator) {
 	throw new Error(`Unknown ProblemCheckData type "${validator.type}"!`);
 }
 export function fromSerializableValidator(serializedValidator) {
+	if (serializedValidator.__ERUDIT_CHECK === true) {
+		return serializedValidator;
+	}
 	if (serializedValidator.type === "boolean") {
 		return serializedValidator;
 	}
@@ -155,11 +174,27 @@ export function fromSerializableValidator(serializedValidator) {
 	}
 	throw new Error(`Unknown ProblemCheckData type "${serializedValidator.type}"!`);
 }
-export function checkProblemAnswer(answer, yesRegexp, noRegexp, validator) {
-	if (validator.type === "boolean") {
-		return validator.answer === true ? yesRegexp.test(answer) : noRegexp.test(answer);
+export async function checkProblemAnswer(answer, against, context) {
+	if (isProblemCheckObject(against)) {
+		const checker = context.checkers[against.name];
+		if (!checker) {
+			console.warn(`No problem checker found for "${against.name}"`);
+			return false;
+		}
+		return await checker.check(against.data, answer);
 	}
-	const checkDefinedAnswer = (expected, answer) => {
+	if (against.type === "boolean") {
+		return against.answer === true ? context.yesRegexp.test(answer) : context.noRegexp.test(answer);
+	}
+	const checkDefinedAnswer = async (expected, answer) => {
+		if (isProblemCheckObject(expected)) {
+			const checker = context.checkers[expected.name];
+			if (!checker) {
+				console.warn(`No problem checker found for "${expected.name}"`);
+				return false;
+			}
+			return await checker.check(expected.data, answer);
+		}
 		if (typeof expected === "number") {
 			return Number(answer) === expected;
 		}
@@ -168,42 +203,50 @@ export function checkProblemAnswer(answer, yesRegexp, noRegexp, validator) {
 		}
 		return answer === String(expected);
 	};
-	const checkAnswer = (expect, answer) => {
+	const checkAnswer = async (expect, answer) => {
 		if (expect === undefined || expect === null) {
 			return answer.trim() === "";
 		}
 		return checkDefinedAnswer(expect, answer);
 	};
-	if (validator.type === "value") {
-		const anyOf = Array.isArray(validator.answer) ? validator.answer : [validator.answer];
-		return anyOf.some((expect) => checkAnswer(expect, answer));
+	if (against.type === "value") {
+		const anyOf = Array.isArray(against.answer) ? against.answer : [against.answer];
+		const results = await Promise.all(anyOf.map((expect) => checkAnswer(expect, answer)));
+		return results.some(Boolean);
 	}
-	if (validator.type === "array") {
-		const separatorRegexp = new RegExp(`\\s*${validator.separator.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*`, "g");
+	if (against.type === "array") {
+		const separatorRegexp = new RegExp(`\\s*${against.separator.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*`, "g");
 		const parts = answer.split(separatorRegexp).map((p) => p.trim());
-		const checkExpected = (expected, actual) => {
+		const checkExpected = async (expected, actual) => {
 			if (Array.isArray(expected)) {
-				// any-of logic
-				return expected.some((e) => checkDefinedAnswer(e, actual));
+				const results = await Promise.all(expected.map((e) => checkDefinedAnswer(e, actual)));
+				return results.some(Boolean);
 			}
 			return checkDefinedAnswer(expected, actual);
 		};
-		if (parts.length !== validator.answers.length) {
+		if (parts.length !== against.answers.length) {
 			return false;
 		}
-		if (validator.ordered) {
-			return validator.answers.every((expected, i) => checkExpected(expected, parts[i]));
+		if (against.ordered) {
+			const results = await Promise.all(against.answers.map((expected, i) => checkExpected(expected, parts[i])));
+			return results.every(Boolean);
 		}
 		// unordered matching (multiset semantics)
 		const remaining = [...parts];
-		for (const expected of validator.answers) {
-			const index = remaining.findIndex((actual) => checkExpected(expected, actual));
-			if (index === -1) {
+		for (const expected of against.answers) {
+			let foundIndex = -1;
+			for (let i = 0; i < remaining.length; i++) {
+				if (await checkExpected(expected, remaining[i])) {
+					foundIndex = i;
+					break;
+				}
+			}
+			if (foundIndex === -1) {
 				return false;
 			}
-			remaining.splice(index, 1);
+			remaining.splice(foundIndex, 1);
 		}
 		return true;
 	}
-	throw new EruditProseError(`"checkProblemAnswer" not implemented for type "${validator.type}"!`);
+	throw new EruditProseError(`"checkProblemAnswer" not implemented for type "${against.type}"!`);
 }

package/dist/elements/problem/problems.d.ts

@@ -13,11 +13,13 @@ export interface SubProblemSchema extends Schema {
 }
 export interface SubProblemData {
     label?: string;
+    standalone?: true;
     scriptUniques?: Record<string, Unique>;
 }
 export declare const subProblemSchema: SubProblemSchema;
 export declare const SubProblem: import("../../tag.js").ToEruditTag<SubProblemSchema, "SubProblem", {
     label?: string;
+    standalone?: true;
 } & ({
     children: {};
     script?: undefined;
@@ -29,6 +31,7 @@ export declare const subProblemCoreElement: {
     readonly schema: SubProblemSchema;
     readonly tags: [import("../../tag.js").ToEruditTag<SubProblemSchema, "SubProblem", {
         label?: string;
+        standalone?: true;
     } & ({
         children: {};
         script?: undefined;

package/dist/elements/problem/problems.js

@@ -20,6 +20,9 @@ export const SubProblem = defineEruditTag({
 	if (label) {
 		element.data.label = label;
 	}
+	if (props.standalone) {
+		element.data.standalone = true;
+	}
 	if (props.script && children) {
 		throw new EruditProseError(`<${tagName}> cannot have both script and children!`);
 	}

package/dist/elements/table/Table.vue

@@ -36,12 +36,22 @@ const rows = computed(() =>
           <tr
             v-for="row in rows"
             :key="row.id"
-            class="odd:bg-(--oddCellBg) even:bg-(--evenCellBg)"
+            class="group odd:bg-(--oddCellBg) even:bg-(--evenCellBg)"
           >
             <td
               v-for="cell in row.children"
               :key="cell.id"
-              class="py-small px-normal rounded"
+              :class="[
+                `py-small px-normal group-hocus:inset-ring-(--tableBorder)
+                rounded inset-ring-2 inset-ring-transparent
+                transition-[box-shadow]`,
+                cell.data?.center
+                  ? 'text-center'
+                  : cell.data?.right
+                    ? 'text-right'
+                    : '',
+                cell.data?.freeze && 'whitespace-nowrap',
+              ]"
             >
               <Render
                 v-for="inliner of cell.children"
@@ -59,41 +69,38 @@ const rows = computed(() =>
 
 <style module>
 .table {
-  --tableBorder: color-mix(
-    in srgb,
-    var(--color-brand),
-    var(--color-border) 85%
+  --tableBorder: light-dark(
+    color-mix(in hsl, var(--color-brand), var(--color-border) 70%),
+    color-mix(in hsl, var(--color-brand), var(--color-border) 85%)
   );
 
-  --evenCellBg: color-mix(
-    in srgb,
-    light-dark(#f5f5f5, #282828),
-    var(--color-brand) 3%
+  --evenCellBg: light-dark(
+    color-mix(in hsl, #f5f5f5, var(--color-brand) 12%),
+    color-mix(in hsl, #2b2b2b, var(--color-brand) 4%)
   );
 
-  --oddCellBg: color-mix(
-    in srgb,
-    light-dark(#f5f5f5, #282828),
-    var(--color-brand) 10%
+  --oddCellBg: light-dark(
+    color-mix(in hsl, #f5f5f5, var(--color-brand) 18%),
+    color-mix(in hsl, #2b2b2b, var(--color-brand) 8%)
   );
 
   [data-prose-accent] & {
     --tableBorder: color-mix(
       in srgb,
-      var(--accentBorder),
-      var(--color-border) 50%
+      var(--accentText),
+      var(--color-border) 60%
     );
 
     --evenCellBg: color-mix(
       in srgb,
-      light-dark(var(--color-bg-main), #202020),
+      light-dark(color-mix(in srgb, #fff, var(--accentText) 13%), #252525),
       var(--accentText) 12%
     );
 
     --oddCellBg: color-mix(
       in srgb,
-      light-dark(var(--color-bg-main), #202020),
-      var(--accentText) 18%
+      light-dark(color-mix(in srgb, #fff, var(--accentText) 13%), #252525),
+      var(--accentText) 19%
     );
   }
 }

package/dist/elements/table/core.d.ts

@@ -1,15 +1,27 @@
 import { type InlinerSchema, type Schema } from 'tsprose';
+import type { XOR } from 'ts-xor';
 import { type CaptionSchema } from '../caption/core.js';
 export interface TableDataSchema extends Schema {
     name: 'tableData';
     type: 'inliner';
     linkable: false;
-    Data: undefined;
+    Data: TableDataData | undefined;
     Storage: undefined;
     Children: InlinerSchema[];
 }
+export interface TableDataData {
+    center?: boolean;
+    right?: boolean;
+    freeze?: boolean;
+}
 export declare const tableDataSchema: TableDataSchema;
-export declare const Td: import("../../tag.js").ToEruditTag<TableDataSchema, "Td", unknown>;
+export declare const Td: import("../../tag.js").ToEruditTag<TableDataSchema, "Td", {
+    freeze?: true;
+} & XOR<{
+    center?: true;
+}, {
+    right?: true;
+}>>;
 export interface TableRowSchema extends Schema {
     name: 'tableRow';
     type: 'inliner';
@@ -32,7 +44,13 @@ export declare const tableSchema: TableSchema;
 export declare const Table: import("../../tag.js").ToEruditTag<TableSchema, "Table", unknown>;
 declare const _default: [{
     readonly schema: TableDataSchema;
-    readonly tags: [import("../../tag.js").ToEruditTag<TableDataSchema, "Td", unknown>];
+    readonly tags: [import("../../tag.js").ToEruditTag<TableDataSchema, "Td", {
+        freeze?: true;
+    } & XOR<{
+        center?: true;
+    }, {
+        right?: true;
+    }>>];
 }, {
     readonly schema: TableRowSchema;
     readonly tags: [import("../../tag.js").ToEruditTag<TableRowSchema, "Tr", unknown>];

package/dist/elements/table/core.js

@@ -10,9 +10,21 @@ export const tableDataSchema = defineSchema({
 export const Td = defineEruditTag({
 	tagName: "Td",
 	schema: tableDataSchema
-})(({ element, children, tagName }) => {
+})(({ props, element, children, tagName }) => {
 	ensureTagInlinerChildren(tagName, children);
 	element.children = children;
+	element.data = {};
+	if (props.center) {
+		element.data = { center: true };
+	} else if (props.right) {
+		element.data = { right: true };
+	}
+	if (props.freeze) {
+		element.data.freeze = true;
+	}
+	if (Object.keys(element.data).length === 0) {
+		delete element.data;
+	}
 });
 export const tableRowSchema = defineSchema({
 	name: "tableRow",

package/dist/elements/table/icon.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M2.8,23.9c-.7,0-1.3-.3-1.9-.8-.5-.5-.8-1.1-.8-1.9V2.8C.1,2,.4,1.4.9.9,1.4.4,2,.1,2.8.1h18.5c.7,0,1.3.3,1.9.8s.8,1.1.8,1.9v18.5c0,.7-.3,1.3-.8,1.9-.5.5-1.1.8-1.9.8H2.8ZM10.7,16H2.8v5.3h7.9v-5.3ZM13.3,16v5.3h7.9v-5.3h-7.9ZM10.7,13.3v-5.3H2.8v5.3h7.9ZM13.3,13.3h7.9v-5.3h-7.9v5.3ZM2.8,5.4h18.5v-2.6H2.8v2.6Z"/>
+  <path d="M4.89,21.22c-.54,0-1.01-.23-1.47-.62-.39-.39-.62-.85-.62-1.47V4.89c0-.62.23-1.08.62-1.47.39-.39.85-.62,1.47-.62h14.32c.54,0,1.01.23,1.47.62.46.39.62.85.62,1.47v14.32c0,.54-.23,1.01-.62,1.47-.39.39-.85.62-1.47.62H4.89v-.08ZM11.01,15.11h-6.12v4.1h6.12s0-4.1,0-4.1ZM13.02,15.11v4.1h6.12v-4.1s-6.12,0-6.12,0ZM11.01,13.02v-4.1h-6.12v4.1h6.12ZM13.02,13.02h6.12v-4.1h-6.12s0,4.1,0,4.1ZM4.89,6.9h14.32v-2.01H4.89v2.01Z"/>
 </svg>

package/dist/elements/video/icon.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M10.4,16.4l5.8-3.7c.3-.2.4-.4.4-.7s-.1-.6-.4-.7l-5.8-3.7c-.3-.2-.6-.2-.9,0s-.5.4-.5.8v7.4c0,.4.2.6.5.8s.6.2.9,0ZM12,23.8c-1.6,0-3.2-.3-4.6-.9s-2.7-1.5-3.8-2.5-1.9-2.3-2.5-3.8S.2,13.6.2,12s.3-3.2.9-4.6,1.5-2.7,2.5-3.8,2.3-1.9,3.8-2.5S10.4.2,12,.2s3.2.3,4.6.9,2.7,1.5,3.8,2.5,1.9,2.3,2.5,3.8.9,3,.9,4.6-.3,3.2-.9,4.6-1.5,2.7-2.5,3.8-2.3,1.9-3.8,2.5-3,.9-4.6.9ZM12,21.5c2.6,0,4.9-.9,6.7-2.8s2.8-4.1,2.8-6.7-.9-4.9-2.8-6.7-4.1-2.8-6.7-2.8-4.9.9-6.7,2.8-2.8,4.1-2.8,6.7.9,4.9,2.8,6.7,4.1,2.8,6.7,2.8Z"/>
+  <path d="M10.67,15.66l4.83-3.08c.25-.17.33-.33.33-.58s-.08-.5-.33-.58l-4.83-3.08c-.25-.17-.5-.17-.75,0s-.42.33-.42.67v6.16c0,.33.17.5.42.67s.5.17.75,0v-.17ZM12,21.82c-1.33,0-2.66-.25-3.83-.75s-2.25-1.25-3.16-2.08-1.58-1.91-2.08-3.16-.75-2.5-.75-3.83.25-2.66.75-3.83,1.25-2.25,2.08-3.16,1.91-1.58,3.16-2.08,2.5-.75,3.83-.75,2.66.25,3.83.75c1.17.5,2.25,1.25,3.16,2.08s1.58,1.91,2.08,3.16.75,2.5.75,3.83-.25,2.66-.75,3.83c-.5,1.17-1.25,2.25-2.08,3.16s-1.91,1.58-3.16,2.08-2.5.75-3.83.75ZM12,19.91c2.16,0,4.08-.75,5.58-2.33s2.33-3.41,2.33-5.58-.75-4.08-2.33-5.58-3.41-2.33-5.58-2.33-4.08.75-5.58,2.33-2.33,3.41-2.33,5.58.75,4.08,2.33,5.58,3.41,2.33,5.58,2.33Z"/>
 </svg>

package/dist/snippet.d.ts

@@ -52,6 +52,7 @@ export declare function toKeySnippet(snippet?: Snippet): KeySnippet | undefined;
 export interface SeoSnippet {
     title: string;
     description?: string;
+    titleInherited: boolean;
 }
 export declare function toSeoSnippet(snippet?: Snippet): SeoSnippet | undefined;
 export interface ResolvedSnippet {

package/dist/snippet.js

@@ -118,21 +118,26 @@ export function toSeoSnippet(snippet) {
 	if (snippet.seo === true) {
 		return {
 			title: snippet.title,
-			description: snippet.description
+			description: snippet.description,
+			titleInherited: true
 		};
 	}
 	if (typeof snippet.seo === "string") {
-		const title = snippet.seo.trim() || snippet.title;
+		const manualTitle = snippet.seo.trim();
+		const title = manualTitle || snippet.title;
 		return {
 			title,
-			description: snippet.description
+			description: snippet.description,
+			titleInherited: !manualTitle
 		};
 	}
-	const title = snippet.seo.title?.trim() || snippet.title;
+	const manualTitle = snippet.seo.title?.trim();
+	const title = manualTitle || snippet.title;
 	const description = snippet.seo.description?.trim() || snippet.description;
 	return {
 		title,
-		description
+		description,
+		titleInherited: !manualTitle
 	};
 }
 export const snippetHook = defineRawToProseHook(({ task: context, result }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@erudit-js/prose",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "📝 JSX prose subsystem for Erudit sites",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -32,17 +32,18 @@
     "prepack": "bun run build"
   },
   "dependencies": {
-    "@erudit-js/core": "4.2.0",
-    "@floating-ui/vue": "^1.1.10",
-    "tsprose": "^1.0.0",
+    "@erudit-js/core": "4.3.0",
+    "@floating-ui/vue": "^1.1.11",
     "image-size": "^2.0.2",
-    "katex": "^0.16.28",
+    "katex": "^0.16.33",
+    "mermaid": "^11.12.3",
     "photoswipe": "^5.4.4",
-    "vue": "^3.5.28"
+    "tsprose": "^1.0.1",
+    "vue": "latest"
   },
   "devDependencies": {
-    "glob": "13.0.0",
-    "oxc-transform": "0.112.0",
+    "glob": "^13.0.6",
+    "oxc-transform": "0.116.0",
     "ts-xor": "^1.3.0"
   }
 }