react-cheminfo 0.64.0 → 0.65.0

package/lib/pedagogy/core/series.d.ts

@@ -0,0 +1,77 @@
+/**
+ * A graded series: questions drawn from a tool's pool by a seed, each asking
+ * the student to fill a few boxes, each box graded as a test case.
+ *
+ * Nothing here knows what is asked — electrons, a formula, a mass — so a tool
+ * of any subject describes its questions with {@link SeriesTool} and the shared
+ * series components draw them.
+ */
+import type { ExerciseLevel } from './types.ts';
+import type { TestCaseResult, ValidationResult } from './validation.ts';
+/** What a student has typed into a question, field by field. */
+export type Answers = Readonly<Record<string, string>>;
+/** One box a question asks the student to fill. */
+export interface AnswerField {
+    /** Key of the value in {@link Answers}. */
+    key: string;
+    /** What the box is for, e.g. `Electrons` or `³⁵Cl (%)`. */
+    label: string;
+    /**
+     * Placeholder written in the empty box.
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * The keyboard a phone opens for the box: digits for a number, letters for
+     * a name or a formula.
+     * @default 'decimal'
+     */
+    inputMode?: 'decimal' | 'text';
+}
+/** The verdict on one field of an answer. */
+export interface FieldCase extends TestCaseResult {
+    /** The field the verdict is about, as the box labels it. */
+    label: string;
+}
+/** The verdict on a whole answer. */
+export type AnswerCheck = ValidationResult<FieldCase>;
+/**
+ * One tool's exercises: the pool a series is drawn from, what a question asks
+ * for, and how an answer is graded, hinted at and solved. Pure: nothing here
+ * renders, so every part is unit-tested.
+ */
+export interface SeriesTool<Question> {
+    /** Where the tool's progress and seed are kept. */
+    id: string;
+    /** Every question a series can draw. */
+    pool: readonly Question[];
+    /** A stable key for a question, unique in the pool. */
+    key: (question: Question) => string;
+    /**
+     * The level a question is tagged with.
+     * @default undefined
+     */
+    level?: (question: Question) => ExerciseLevel;
+    /** The boxes the question asks the student to fill. */
+    fields: (question: Question) => AnswerField[];
+    /** Grade an answer, one case per field, each reason written as a tutor says it. */
+    grade: (question: Question, answers: Answers) => AnswerCheck;
+    /** Two to four hints, vague to nearly the answer. */
+    hints: (question: Question) => string[];
+    /** The worked answer, always revealable. */
+    solution: (question: Question) => string;
+    /**
+     * Draw the series itself, for a tool whose questions are generated from the
+     * seed rather than picked out of {@link SeriesTool.pool}. It must return the
+     * same questions in the same order for the same seed, since a series is a
+     * link.
+     * @default undefined — the series is `pickSeeded(pool, count, seed)`
+     */
+    draw?: (count: number, seed: number) => readonly Question[];
+    /**
+     * The longest series the tool can serve, for the picker of its length.
+     * @default the size of the pool
+     */
+    maxCount?: number;
+}
+//# sourceMappingURL=series.d.ts.map

package/lib/pedagogy/core/series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"series.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/core/series.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExE,gEAAgE;AAChE,MAAM,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEvD,mDAAmD;AACnD,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC;AAED,6CAA6C;AAC7C,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qCAAqC;AACrC,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;AAEtD;;;;GAIG;AACH,MAAM,WAAW,UAAU,CAAC,QAAQ;IAClC,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC1B,uDAAuD;IACvD,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAC;IACpC;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,aAAa,CAAC;IAC9C,uDAAuD;IACvD,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,WAAW,EAAE,CAAC;IAC9C,mFAAmF;IACnF,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,KAAK,WAAW,CAAC;IAC7D,qDAAqD;IACrD,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,EAAE,CAAC;IACxC,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,QAAQ,EAAE,CAAC;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/lib/pedagogy/core/series.js

@@ -0,0 +1,10 @@
+/**
+ * A graded series: questions drawn from a tool's pool by a seed, each asking
+ * the student to fill a few boxes, each box graded as a test case.
+ *
+ * Nothing here knows what is asked — electrons, a formula, a mass — so a tool
+ * of any subject describes its questions with {@link SeriesTool} and the shared
+ * series components draw them.
+ */
+export {};
+//# sourceMappingURL=series.js.map

package/lib/pedagogy/core/series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"series.js","sourceRoot":"","sources":["../../../src/pedagogy/core/series.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG"}

package/lib/pedagogy/ui/AnswerFields.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react';
+import type { AnswerField, Answers } from '../core/series.ts';
+/** What {@link AnswerFields} needs. */
+export interface AnswerFieldsProps {
+    /** The boxes the question asks for, in the order they are filled. */
+    fields: readonly AnswerField[];
+    /** What is typed in them so far. */
+    answers: Answers;
+    /** Called with the key of a box and its new text on every keystroke. */
+    onChange: (key: string, value: string) => void;
+    /** Called on Enter, which checks the answer. */
+    onSubmit: () => void;
+}
+/**
+ * The boxes a question asks the student to fill, side by side, each with the
+ * keyboard its value wants on a phone and every autocorrection switched off.
+ * @param props - The fields, what is typed in them, and what to do on a change.
+ * @returns The boxes.
+ */
+export declare function AnswerFields(props: AnswerFieldsProps): ReactElement;
+//# sourceMappingURL=AnswerFields.d.ts.map

package/lib/pedagogy/ui/AnswerFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnswerFields.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/AnswerFields.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE9D,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,oCAAoC;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAsCnE"}

package/lib/pedagogy/ui/AnswerFields.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { useId } from 'react';
+/**
+ * The boxes a question asks the student to fill, side by side, each with the
+ * keyboard its value wants on a phone and every autocorrection switched off.
+ * @param props - The fields, what is typed in them, and what to do on a change.
+ * @returns The boxes.
+ */
+export function AnswerFields(props) {
+    const { fields, answers, onChange, onSubmit } = props;
+    const prefix = useId();
+    function submitOnEnter(event) {
+        if (event.key === 'Enter')
+            onSubmit();
+    }
+    return (_jsx("div", { className: "series-answers", children: fields.map((field) => {
+            const id = `${prefix}-${field.key}`;
+            return (_jsx(FormGroup, { label: field.label, labelFor: id, className: "series-answers__field", children: _jsx(InputGroup, { id: id, value: answers[field.key] ?? '', placeholder: field.placeholder, onValueChange: (value) => {
+                        onChange(field.key, value);
+                    }, onKeyDown: submitOnEnter, inputMode: field.inputMode ?? 'decimal', autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false }) }, field.key));
+        }) }));
+}
+//# sourceMappingURL=AnswerFields.js.map

package/lib/pedagogy/ui/AnswerFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnswerFields.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/AnswerFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAgB9B;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,SAAS,aAAa,CAAC,KAAsC;QAC3D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;YAAE,QAAQ,EAAE,CAAC;IACxC,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,YAC5B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACpB,MAAM,EAAE,GAAG,GAAG,MAAM,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC;YACpC,OAAO,CACL,KAAC,SAAS,IAER,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,EAAE,EACZ,SAAS,EAAC,uBAAuB,YAEjC,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,EAC/B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;wBACvB,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oBAC7B,CAAC,EACD,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,SAAS,EACvC,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,KAAK,EACjB,cAAc,EAAC,KAAK,EACpB,UAAU,EAAE,KAAK,GACjB,IAlBG,KAAK,CAAC,GAAG,CAmBJ,CACb,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/lib/pedagogy/ui/ExerciseList.d.ts

@@ -0,0 +1,82 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ProgressRecords } from '../core/progress.ts';
+import type { ExerciseLevel, ExerciseStatus } from '../core/types.ts';
+/** What a row of the list reads off an exercise. */
+export interface ExerciseListEntry {
+    /** Stable id, which is what is selected. */
+    id: string;
+    /** How the exercise is named; may carry the shared prose marks. */
+    title: string;
+    /**
+     * How hard it is, drawn as a coloured tag.
+     * @default undefined — no level tag
+     */
+    level?: ExerciseLevel;
+}
+/** What the list reads of the progress kept on one exercise. */
+export interface ExerciseListProgress {
+    /** Where the student stands. */
+    status: ExerciseStatus;
+    /** How many hints were opened. */
+    hintsRevealed: number;
+}
+/** What {@link ExerciseList} needs. */
+export interface ExerciseListProps<TExercise extends ExerciseListEntry> {
+    /** The exercises, in the order they are worked through. */
+    exercises: readonly TExercise[];
+    /** The progress kept, by exercise id; an absent one reads as untouched. */
+    progress: ProgressRecords<ExerciseListProgress>;
+    /** The exercise on screen, or `null` for none. */
+    activeId: string | null;
+    /** Called with the id of the exercise to open. */
+    onSelect: (id: string) => void;
+    /**
+     * Tags of the tool's own after the level — the kind of question, say.
+     * @default undefined
+     */
+    tags?: (exercise: TExercise) => ReactNode;
+    /**
+     * Draws the title the tool's own way.
+     * @default the title as inline prose, its marks drawn
+     */
+    renderTitle?: (exercise: TExercise) => ReactNode;
+    /**
+     * Whether the bar of solved exercises heads the list.
+     * @default true
+     */
+    progressHeader?: boolean;
+    /**
+     * Throws away every answer, behind a dialog. Without it the header only
+     * reports.
+     * @default undefined
+     */
+    onClearAll?: () => void;
+    /**
+     * What the dialog says before the work is thrown away.
+     * @default the header's own sentence
+     */
+    clearWarning?: ReactNode;
+    /**
+     * What a screen reader calls the list.
+     * @default the chrome's own word for it, in the language of the page
+     */
+    label?: string;
+    /**
+     * Class the list carries, in addition to `exercise-list`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * The exercises of a set, each with where the student stands on it, under the
+ * bar of how many are solved.
+ *
+ * The hint count of a solved exercise is shown rather than hidden: it is the
+ * honest record of which ones were hard, which is what a student coming back a
+ * week later wants to know. `ArrowUp` and `ArrowDown` walk the list from
+ * anywhere on the page, unless a text field has the focus.
+ * @param props - The exercises, their progress, and the open one.
+ * @returns The list.
+ */
+export declare function ExerciseList<TExercise extends ExerciseListEntry>(props: ExerciseListProps<TExercise>): ReactElement;
+//# sourceMappingURL=ExerciseList.d.ts.map

package/lib/pedagogy/ui/ExerciseList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExerciseList.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMtE,oDAAoD;AACpD,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,gEAAgE;AAChE,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,MAAM,EAAE,cAAc,CAAC;IACvB,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,uCAAuC;AACvC,MAAM,WAAW,iBAAiB,CAAC,SAAS,SAAS,iBAAiB;IACpE,2DAA2D;IAC3D,SAAS,EAAE,SAAS,SAAS,EAAE,CAAC;IAChC,2EAA2E;IAC3E,QAAQ,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAChD,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IACjD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,SAAS,SAAS,iBAAiB,EAC9D,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAClC,YAAY,CAkGd"}

package/lib/pedagogy/ui/ExerciseList.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tag } from '@blueprintjs/core';
+import { useDocumentListNavigation } from "../../hooks/ui/useDocumentListNavigation.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { joinClassNames } from "../../shared/ui/joinClassNames.js";
+import { progressSummary } from "../core/progress.js";
+import { ExerciseProgressHeader } from "./ExerciseProgressHeader.js";
+import { ExerciseLevelTag, ExerciseStatusIcon } from "./ExerciseTags.js";
+import { InlineText } from "./InlineText.js";
+const STATUS_TITLE = {
+    idle: 'pedagogy.statusIdle',
+    attempted: 'pedagogy.statusAttempted',
+    solved: 'pedagogy.statusSolved',
+};
+/**
+ * The exercises of a set, each with where the student stands on it, under the
+ * bar of how many are solved.
+ *
+ * The hint count of a solved exercise is shown rather than hidden: it is the
+ * honest record of which ones were hard, which is what a student coming back a
+ * week later wants to know. `ArrowUp` and `ArrowDown` walk the list from
+ * anywhere on the page, unless a text field has the focus.
+ * @param props - The exercises, their progress, and the open one.
+ * @returns The list.
+ */
+export function ExerciseList(props) {
+    const { exercises, progress, activeId, onSelect, tags, renderTitle, progressHeader = true, onClearAll, clearWarning, label, className, } = props;
+    const t = useChromeT();
+    const activeIndex = exercises.findIndex((exercise) => exercise.id === activeId);
+    const listRef = useDocumentListNavigation({
+        length: exercises.length,
+        selectedIndex: activeIndex,
+        onSelect: (index) => {
+            const next = exercises[index];
+            if (next !== undefined)
+                onSelect(next.id);
+        },
+    });
+    return (_jsxs("div", { className: joinClassNames('exercise-list', className), children: [progressHeader ? (_jsx(ExerciseProgressHeader, { summary: progressSummary(progress, exercises.map((exercise) => exercise.id)), onClearAll: onClearAll, clearWarning: clearWarning, clearDisabled: Object.keys(progress).length === 0 })) : null, _jsx("div", { ref: listRef, className: "exercise-list__rows", role: "listbox", "aria-label": label ?? t('pedagogy.exercises'), "data-testid": "exercise-list", children: exercises.map((exercise) => {
+                    const record = progress[exercise.id];
+                    const status = record?.status ?? 'idle';
+                    const hints = record?.hintsRevealed ?? 0;
+                    const active = exercise.id === activeId;
+                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": active, "data-selected": active ? 'true' : undefined, className: active
+                            ? 'exercise-list__item exercise-list__item--active'
+                            : 'exercise-list__item', onClick: () => {
+                            onSelect(exercise.id);
+                        }, children: [_jsx(ExerciseStatusIcon, { status: status, title: t(STATUS_TITLE[status]) }), _jsx("span", { className: "exercise-list__title", children: renderTitle === undefined ? (_jsx(InlineText, { text: exercise.title })) : (renderTitle(exercise)) }), _jsxs("span", { className: "exercise-list__tags", children: [exercise.level === undefined ? null : (_jsx(ExerciseLevelTag, { level: exercise.level, active: active })), tags?.(exercise), status === 'solved' && hints > 0 ? (_jsx(Tag, { minimal: true, round: true, intent: "success", children: hints === 1
+                                            ? t('pedagogy.solvedWithOneHint')
+                                            : t('pedagogy.solvedWithHints', { count: hints }) })) : null] })] }, exercise.id));
+                }) })] }));
+}
+//# sourceMappingURL=ExerciseList.js.map

package/lib/pedagogy/ui/ExerciseList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExerciseList.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseList.tsx"],"names":[],"mappings":"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"}

package/lib/pedagogy/ui/ExerciseSeries.d.ts

@@ -0,0 +1,95 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { SplitRange } from '../../split/core/split.ts';
+import type { AttemptStore } from '../core/attempts.ts';
+import type { PickSeededOptions, SeedRange } from '../core/seed.ts';
+import type { SeriesTool } from '../core/series.ts';
+import type { QuestionRendering } from './QuestionCard.tsx';
+/** What {@link ExerciseSeries} needs. */
+export interface ExerciseSeriesProps<Question> extends QuestionRendering<Question> {
+    /** The tool the series is drawn from. */
+    tool: SeriesTool<Question>;
+    /** Where the attempts, and the series each tool was last on, are kept. */
+    store: AttemptStore;
+    /** How a question is named in the list beside the card. */
+    label: (question: Question) => ReactNode;
+    /**
+     * The seed the address names, read with `parseSeed`, or `null` when it names
+     * none — the series this browser was last on is then written into it.
+     */
+    seed: number | null;
+    /**
+     * Write a seed into the address: `replace` when the page adopts one it was
+     * opened without, `push` when the student draws a new series, so Back
+     * returns to the previous one.
+     */
+    onSeed: (seed: number, history: 'replace' | 'push') => void;
+    /** How many questions the student asked for; the pool caps it. */
+    count: number;
+    /** Change how many questions the series holds. */
+    onCount: (count: number) => void;
+    /**
+     * The lengths offered, beside the whole pool.
+     * @default [5, 10, 15, 20]
+     */
+    counts?: readonly number[];
+    /**
+     * The share of the row the list takes, as the address names it, or `null`
+     * for {@link ExerciseSeriesProps.defaultSplit}.
+     */
+    split: number | null;
+    /** Write the share a drag came to rest at, or `null` for the default. */
+    onSplit: (split: number | null) => void;
+    /**
+     * The share the list opens at: the card is the figure, so the list opens
+     * narrow.
+     * @default 22
+     */
+    defaultSplit?: number;
+    /**
+     * How far the list may be dragged, measured on the labels of the pool.
+     * @default { min: 15, max: 26 }
+     */
+    splitRange?: SplitRange;
+    /**
+     * The narrowest row still divided, in pixels; under it the list stacks under
+     * the card's row, as on a tablet held upright.
+     * @default SplitRow's own, 860
+     */
+    stackBelow?: number;
+    /**
+     * How the series is drawn from the pool, for a site whose links were written
+     * with the other generator call.
+     * @default { draw: 'getFloat', wrap: false }
+     */
+    pick?: PickSeededOptions;
+    /**
+     * The seeds a new series is drawn from.
+     * @default every unsigned 32-bit integer
+     */
+    seedRange?: SeedRange;
+    /**
+     * The heading over the series.
+     * @default the chrome's own word for it, in the language of the page
+     */
+    title?: ReactNode;
+    /**
+     * Id of the heading, for a section labelled by it.
+     * @default 'questions-heading'
+     */
+    headingId?: string;
+}
+/**
+ * A graded series drawn from a tool's pool: the list of its questions, the one
+ * open, and the progress over the series.
+ *
+ * The series is its seed, and the seed is in the address, so the link on
+ * screen reopens the same questions for anyone — a teacher hands one series to
+ * a whole class. How the row is divided between the list and the open question
+ * travels in the address too. The component reads neither: the page hands it
+ * the seed, the length and the share, and is told when one changes.
+ * @param props - The tool, where its attempts are kept, the address values,
+ * and how to draw a question.
+ * @returns The series.
+ */
+export declare function ExerciseSeries<Question>(props: ExerciseSeriesProps<Question>): ReactElement;
+//# sourceMappingURL=ExerciseSeries.d.ts.map

package/lib/pedagogy/ui/ExerciseSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExerciseSeries.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseSeries.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAG5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAK5D,yCAAyC;AACzC,MAAM,WAAW,mBAAmB,CAClC,QAAQ,CACR,SAAQ,iBAAiB,CAAC,QAAQ,CAAC;IACnC,yCAAyC;IACzC,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC3B,0EAA0E;IAC1E,KAAK,EAAE,YAAY,CAAC;IACpB,2DAA2D;IAC3D,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,SAAS,CAAC;IACzC;;;OAGG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;;OAIG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5D,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,yEAAyE;IACzE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EACrC,KAAK,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GACnC,YAAY,CAuId"}

package/lib/pedagogy/ui/ExerciseSeries.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useMemo, useState } from 'react';
+import { useDocumentListNavigation } from "../../hooks/ui/useDocumentListNavigation.js";
+import { clampSplit } from "../../split/core/split.js";
+import { SplitRow } from "../../split/ui/SplitRow.js";
+import { attemptKey } from "../core/attempts.js";
+import { progressSummary } from "../core/progress.js";
+import { freshSeed, pickSeeded } from "../core/seed.js";
+import { ExerciseProgressHeader } from "./ExerciseProgressHeader.js";
+import { QuestionCard } from "./QuestionCard.js";
+import { SeriesHead, SeriesQuestionList } from "./seriesParts.js";
+import { useAttemptRecords } from "./useAttemptRecords.js";
+const DEFAULT_RANGE = { min: 15, max: 26 };
+/**
+ * A graded series drawn from a tool's pool: the list of its questions, the one
+ * open, and the progress over the series.
+ *
+ * The series is its seed, and the seed is in the address, so the link on
+ * screen reopens the same questions for anyone — a teacher hands one series to
+ * a whole class. How the row is divided between the list and the open question
+ * travels in the address too. The component reads neither: the page hands it
+ * the seed, the length and the share, and is told when one changes.
+ * @param props - The tool, where its attempts are kept, the address values,
+ * and how to draw a question.
+ * @returns The series.
+ */
+export function ExerciseSeries(props) {
+    const { tool, store, label, seed: addressSeed, onSeed, count: wanted, onCount, counts, split, onSplit, defaultSplit = 22, splitRange = DEFAULT_RANGE, stackBelow, pick, seedRange, title, headingId = 'questions-heading', ...rendering } = props;
+    const records = useAttemptRecords(store);
+    const [fallbackSeed] = useState(() => store.storedSeed(tool.id) ?? freshSeed(seedRange));
+    const seed = addressSeed ?? fallbackSeed;
+    const poolSize = tool.maxCount ?? tool.pool.length;
+    const count = Math.min(wanted, poolSize);
+    // The address is what the series is read from and handed out as, so a page
+    // opened without a seed writes the one it fell back on into it; and the
+    // series on screen is the one this tool reopens on the next visit.
+    const followSeed = useEffectEvent(() => {
+        if (addressSeed === null)
+            onSeed(fallbackSeed, 'replace');
+        store.storeSeed(tool.id, addressSeed ?? fallbackSeed);
+    });
+    useEffect(() => {
+        followSeed();
+    }, [seed, addressSeed, tool.id]);
+    const series = useMemo(() => tool.draw === undefined
+        ? pickSeeded(tool.pool, count, seed, pick)
+        : tool.draw(count, seed), [tool, count, seed, pick]);
+    const keys = useMemo(() => series.map((question) => attemptKey(tool.id, seed, tool.key(question))), [series, tool, seed]);
+    const [opened, setOpened] = useState({ seed, index: 0 });
+    const index = opened.seed === seed ? Math.min(opened.index, series.length - 1) : 0;
+    function open(next) {
+        setOpened({ seed, index: next });
+    }
+    const listRef = useDocumentListNavigation({
+        length: series.length,
+        selectedIndex: index,
+        onSelect: open,
+    });
+    const summary = progressSummary(records, keys);
+    const question = series[index];
+    const storageKey = keys[index];
+    return (_jsxs("div", { className: "exercise-series", children: [_jsx(SeriesHead, { title: title, headingId: headingId, count: count, poolSize: poolSize, counts: counts, onCount: onCount, onNewSeries: () => {
+                    const next = freshSeed(seedRange);
+                    store.forgetOtherSeries(tool.id, next);
+                    onSeed(next, 'push');
+                } }), _jsx(ExerciseProgressHeader, { summary: summary, onClearAll: () => {
+                    store.clearAttempts(keys);
+                }, clearDisabled: !keys.some((key) => records[key] !== undefined) }), _jsx(SplitRow, { ratio: split === null ? null : clampSplit(split, splitRange), defaultRatio: defaultSplit, min: splitRange.min, max: splitRange.max, stackBelow: stackBelow, onRatio: onSplit, start: _jsx(SeriesQuestionList, { series: series, keys: keys, records: records, index: index, onOpen: open, label: label, listRef: listRef }), end: question === undefined || storageKey === undefined ? null : (_jsx(QuestionCard, { tool: tool, question: question, store: store, storageKey: storageKey, number: index + 1, total: series.length, onNext: index + 1 < series.length
+                        ? () => {
+                            open(index + 1);
+                        }
+                        : undefined, ...rendering }, storageKey)) })] }));
+}
+//# sourceMappingURL=ExerciseSeries.js.map

package/lib/pedagogy/ui/ExerciseSeries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExerciseSeries.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseSeries.tsx"],"names":[],"mappings":"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"}

package/lib/pedagogy/ui/QuestionCard.d.ts

@@ -0,0 +1,64 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { AttemptStore } from '../core/attempts.ts';
+import type { Answers, SeriesTool } from '../core/series.ts';
+/** What a tool's own answer input is handed. */
+export interface AnswerInputProps<Question> {
+    /** The question being answered. */
+    question: Question;
+    /** What is typed so far, field by field. */
+    answers: Answers;
+    /** Change one field. */
+    onChange: (key: string, value: string) => void;
+    /** Check the answer, as Enter does in a box. */
+    onSubmit: () => void;
+}
+/** How one tool draws the parts of a question the card does not know. */
+export interface QuestionRendering<Question> {
+    /** The statement of the question. */
+    prompt: (question: Question) => ReactNode;
+    /**
+     * An input of the tool's own — a drawing canvas, a reaction to balance — in
+     * place of the typed boxes.
+     * @default undefined — one box per field of the tool
+     */
+    answer?: (props: AnswerInputProps<Question>) => ReactNode;
+    /**
+     * What the solution shows beyond its text, such as a drawn structure.
+     * @default undefined
+     */
+    solution?: (question: Question) => ReactNode;
+}
+/** What {@link QuestionCard} needs. */
+export interface QuestionCardProps<Question> extends QuestionRendering<Question> {
+    /** The tool the question belongs to. */
+    tool: SeriesTool<Question>;
+    /** The question on the card. */
+    question: Question;
+    /** Where the attempts are kept. */
+    store: AttemptStore;
+    /** The key this question's attempt is kept under, from `attemptKey`. */
+    storageKey: string;
+    /** Its position in the series, counted from 1. */
+    number: number;
+    /** How many questions the series holds. */
+    total: number;
+    /**
+     * Open the next question; left out on the last one.
+     * @default undefined
+     */
+    onNext?: () => void;
+}
+/**
+ * One question: its statement, the answer, the four actions, and — once
+ * checked — the verdict case by case, the hints taken and the solution.
+ *
+ * The answer is graded on every change, but the verdict is shown only for the
+ * answer as it was checked: a numeric answer that turned green as it was typed
+ * could be found by trying numbers. A link that hides the `solutions` part
+ * takes the solution button away.
+ * @param props - The tool, the question, where its attempt is kept, and how to
+ * draw it.
+ * @returns The card.
+ */
+export declare function QuestionCard<Question>(props: QuestionCardProps<Question>): ReactElement;
+//# sourceMappingURL=QuestionCard.d.ts.map

package/lib/pedagogy/ui/QuestionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionCard.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/QuestionCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,KAAK,EAAE,OAAO,EAAa,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAUxE,gDAAgD;AAChD,MAAM,WAAW,gBAAgB,CAAC,QAAQ;IACxC,mCAAmC;IACnC,QAAQ,EAAE,QAAQ,CAAC;IACnB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,wBAAwB;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,yEAAyE;AACzE,MAAM,WAAW,iBAAiB,CAAC,QAAQ;IACzC,qCAAqC;IACrC,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,SAAS,CAAC;IAC1C;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,SAAS,CAAC;IAC1D;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AAED,uCAAuC;AACvC,MAAM,WAAW,iBAAiB,CAChC,QAAQ,CACR,SAAQ,iBAAiB,CAAC,QAAQ,CAAC;IACnC,wCAAwC;IACxC,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC3B,gCAAgC;IAChC,QAAQ,EAAE,QAAQ,CAAC;IACnB,mCAAmC;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EACnC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GACjC,YAAY,CA2Id"}

package/lib/pedagogy/ui/QuestionCard.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Callout, Tag } from '@blueprintjs/core';
+import { useMemo } from 'react';
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { useIsHidden } from "../../share/ui/hiddenParts.js";
+import { emptyAttempt } from "../core/attempts.js";
+import { AnswerFields } from "./AnswerFields.js";
+import { ExerciseActions } from "./ExerciseActions.js";
+import { GlossaryText } from "./GlossaryText.js";
+import { HintLadder } from "./HintLadder.js";
+import { TestCaseList } from "./TestCaseList.js";
+import { LEVEL_INTENT } from "./exerciseMeta.js";
+import { useAttemptRecords } from "./useAttemptRecords.js";
+/**
+ * One question: its statement, the answer, the four actions, and — once
+ * checked — the verdict case by case, the hints taken and the solution.
+ *
+ * The answer is graded on every change, but the verdict is shown only for the
+ * answer as it was checked: a numeric answer that turned green as it was typed
+ * could be found by trying numbers. A link that hides the `solutions` part
+ * takes the solution button away.
+ * @param props - The tool, the question, where its attempt is kept, and how to
+ * draw it.
+ * @returns The card.
+ */
+export function QuestionCard(props) {
+    const { tool, question, store, storageKey, number, total, onNext, prompt, answer, solution, } = props;
+    const t = useChromeT();
+    const isHidden = useIsHidden();
+    const records = useAttemptRecords(store);
+    const { answers, checked: checkedAnswers, hintsRevealed, showSolution, } = records[storageKey] ?? emptyAttempt();
+    const check = useMemo(() => tool.grade(question, answers), [tool, question, answers]);
+    const hints = useMemo(() => tool.hints(question), [tool, question]);
+    const snapshot = JSON.stringify(answers);
+    const checked = checkedAnswers === snapshot;
+    const solutionsHidden = isHidden('solutions');
+    const level = tool.level?.(question);
+    function setAnswer(key, value) {
+        store.updateAttempt(storageKey, { answers: { ...answers, [key]: value } });
+    }
+    function commit() {
+        store.updateAttempt(storageKey, {
+            status: check.passed ? 'solved' : 'attempted',
+            checked: snapshot,
+        });
+    }
+    return (_jsxs("article", { className: "series-question", "aria-label": t('pedagogy.questionNumber', { number }), children: [_jsxs("div", { className: "series-question__meta", children: [_jsx("span", { children: t('pedagogy.questionOf', { number, total }) }), level === undefined ? null : (_jsx(Tag, { minimal: true, intent: LEVEL_INTENT[level], children: level }))] }), _jsx("div", { className: "series-question__prompt", children: prompt(question) }), answer ? (answer({ question, answers, onChange: setAnswer, onSubmit: commit })) : (_jsx(AnswerFields, { fields: tool.fields(question), answers: answers, onChange: setAnswer, onSubmit: commit })), _jsx(ExerciseActions, { onCheck: commit, checkDisabled: isBlank(answers), onRevealHint: () => {
+                    store.updateAttempt(storageKey, {
+                        hintsRevealed: Math.min(hintsRevealed + 1, hints.length),
+                    });
+                }, hintsRevealed: hintsRevealed, hintCount: hints.length, onToggleSolution: solutionsHidden
+                    ? undefined
+                    : () => {
+                        store.updateAttempt(storageKey, {
+                            showSolution: !showSolution,
+                        });
+                    }, showSolution: showSolution, onReset: () => {
+                    store.updateAttempt(storageKey, emptyAttempt());
+                } }), checked ? (_jsx(TestCaseList, { results: check.cases, label: (verdict) => verdict.label })) : null, checked && check.passed ? (_jsxs(Callout, { intent: "success", icon: "tick-circle", title: t('pedagogy.solved'), children: [hintsRevealed > 0
+                        ? t('pedagogy.solvedWithHintsOf', {
+                            revealed: hintsRevealed,
+                            total: hints.length,
+                        })
+                        : t('pedagogy.solvedWithoutHint'), onNext ? (_jsx(Button, { className: "series-question__next", intent: "success", endIcon: "arrow-right", text: t('pedagogy.nextQuestion'), onClick: onNext })) : null] })) : null, hintsRevealed > 0 ? (_jsx(HintLadder, { hints: hints, revealed: hintsRevealed })) : null, showSolution && !solutionsHidden ? (_jsxs(Callout, { intent: "warning", icon: "key", title: t('pedagogy.solution'), children: [_jsx("p", { className: "series-question__solution", children: _jsx(GlossaryText, { text: tool.solution(question) }) }), solution?.(question)] })) : null] }));
+}
+function isBlank(answers) {
+    for (const value of Object.values(answers)) {
+        if (value.trim() !== '')
+            return false;
+    }
+    return true;
+}
+//# sourceMappingURL=QuestionCard.js.map