react-cheminfo 0.2.0 → 0.4.0

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

@@ -0,0 +1,38 @@
+import type { ReactElement } from 'react';
+export interface HintLadderProps {
+    /** Every hint of the exercise, ordered from a nudge to almost the answer. */
+    hints: readonly string[];
+    /**
+     * How many the student has asked for. A count outside the ladder is read as
+     * one of its ends, so a stored value from a shorter or longer ladder still
+     * opens the page.
+     */
+    revealed: number;
+    /**
+     * Opens the next hint. Leave it out where the button lives elsewhere — in
+     * `ExerciseActions`, say — and the ladder only shows what is already open.
+     * @default undefined — no button
+     */
+    onReveal?: () => void;
+    /**
+     * Text of the button, before its count.
+     * @default 'Reveal hint'
+     */
+    revealLabel?: string;
+    /**
+     * Heading over the hints.
+     * @default 'Hints'
+     */
+    title?: string;
+}
+/**
+ * The hints asked for so far, and the button that opens the next one.
+ *
+ * One at a time, in order: a ladder that dumped all four at once is a solution
+ * with extra steps. The prose goes through the glossary, so a hint may link its
+ * jargon exactly like the statement above it.
+ * @param props - The ladder, how much of it is open, and how to open more.
+ * @returns The hints, or nothing while none is open and none can be.
+ */
+export declare function HintLadder(props: HintLadderProps): ReactElement | null;
+//# sourceMappingURL=HintLadder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HintLadder.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/HintLadder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,MAAM,WAAW,eAAe;IAC9B,6EAA6E;IAC7E,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,GAAG,IAAI,CAsCtE"}

package/lib/pedagogy/ui/HintLadder.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Callout } from '@blueprintjs/core';
+import { GlossaryText } from "./GlossaryText.js";
+/**
+ * The hints asked for so far, and the button that opens the next one.
+ *
+ * One at a time, in order: a ladder that dumped all four at once is a solution
+ * with extra steps. The prose goes through the glossary, so a hint may link its
+ * jargon exactly like the statement above it.
+ * @param props - The ladder, how much of it is open, and how to open more.
+ * @returns The hints, or nothing while none is open and none can be.
+ */
+export function HintLadder(props) {
+    const { hints, revealed, onReveal, revealLabel = 'Reveal hint', title = 'Hints', } = props;
+    const open = clampRevealed(revealed, hints.length);
+    const exhausted = open >= hints.length;
+    if (open === 0 && (onReveal === undefined || hints.length === 0))
+        return null;
+    return (_jsxs("div", { style: ROOT_STYLE, children: [onReveal !== undefined && hints.length > 0 && (_jsx("div", { children: _jsx(Button, { icon: "lightbulb", text: `${revealLabel} (${open}/${hints.length})`, disabled: exhausted, onClick: onReveal }) })), open > 0 && (_jsx(Callout, { intent: "primary", icon: "lightbulb", title: title, children: _jsx("ol", { style: LIST_STYLE, children: hints.slice(0, open).map((hint) => (_jsx("li", { style: ITEM_STYLE, children: _jsx(GlossaryText, { text: hint }) }, hint))) }) }))] }));
+}
+function clampRevealed(revealed, total) {
+    if (!Number.isFinite(revealed) || revealed <= 0)
+        return 0;
+    return Math.min(Math.floor(revealed), total);
+}
+const ROOT_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+};
+const LIST_STYLE = { margin: 0, paddingLeft: 18 };
+const ITEM_STYLE = { lineHeight: 1.45 };
+//# sourceMappingURL=HintLadder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HintLadder.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/HintLadder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AA6BlD;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,aAAa,EAC3B,KAAK,GAAG,OAAO,GAChB,GAAG,KAAK,CAAC;IACV,MAAM,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC;IACvC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IAE9E,OAAO,CACL,eAAK,KAAK,EAAE,UAAU,aACnB,QAAQ,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC7C,wBACE,KAAC,MAAM,IACL,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,GAAG,WAAW,KAAK,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,EAChD,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,QAAQ,GACjB,GACE,CACP,EAEA,IAAI,GAAG,CAAC,IAAI,CACX,KAAC,OAAO,IAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK,YACrD,aAAI,KAAK,EAAE,UAAU,YAClB,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClC,aAAe,KAAK,EAAE,UAAU,YAC9B,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,GAAI,IADrB,IAAI,CAER,CACN,CAAC,GACC,GACG,CACX,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,QAAgB,EAAE,KAAa;IACpD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC;IAC1D,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,UAAU,GAAkB,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC;AAEjE,MAAM,UAAU,GAAkB,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC"}

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

@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+import type { ReferenceSection } from './ReferenceSectionBlock.tsx';
+export interface ReferenceGridProps {
+    /** The blocks of the cheatsheet, in reading order. */
+    sections: readonly ReferenceSection[];
+    /**
+     * Width under which a column wraps to the next line, in pixels.
+     * @default 320
+     */
+    minColumnWidth?: number;
+    /**
+     * Width of the syntax column of every block, so they line up across columns.
+     * @default 150
+     */
+    syntaxWidth?: number | string;
+    /**
+     * Class the grid carries, in addition to `reference-grid`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * The whole cheatsheet: as many columns as the paper or the window allows.
+ *
+ * Students print this page and take it into an exam room, so the columns
+ * reflow to the sheet and every block is kept off a page break.
+ * @param props - The sections, and how they are laid out.
+ * @returns The grid.
+ */
+export declare function ReferenceGrid(props: ReferenceGridProps): ReactElement;
+//# sourceMappingURL=ReferenceGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceGrid.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAGpE,MAAM,WAAW,kBAAkB;IACjC,sDAAsD;IACtD,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACtC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA0BrE"}

package/lib/pedagogy/ui/ReferenceGrid.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReferenceSectionBlock } from "./ReferenceSectionBlock.js";
+/**
+ * The whole cheatsheet: as many columns as the paper or the window allows.
+ *
+ * Students print this page and take it into an exam room, so the columns
+ * reflow to the sheet and every block is kept off a page break.
+ * @param props - The sections, and how they are laid out.
+ * @returns The grid.
+ */
+export function ReferenceGrid(props) {
+    const { sections, minColumnWidth = 320, syntaxWidth = 150, className, } = props;
+    return (_jsx("div", { className: className === undefined
+            ? 'reference-grid'
+            : `reference-grid ${className}`, style: gridStyle(minColumnWidth), children: sections.map((section) => (_jsx(ReferenceSectionBlock, { section: section, syntaxWidth: syntaxWidth }, section.id))) }));
+}
+function gridStyle(minColumnWidth) {
+    return {
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fit, minmax(${minColumnWidth}px, 1fr))`,
+        gap: '10px 24px',
+        alignItems: 'start',
+    };
+}
+//# sourceMappingURL=ReferenceGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceGrid.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceGrid.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AAsBpE;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,QAAQ,EACR,cAAc,GAAG,GAAG,EACpB,WAAW,GAAG,GAAG,EACjB,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,cACE,SAAS,EACP,SAAS,KAAK,SAAS;YACrB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,kBAAkB,SAAS,EAAE,EAEnC,KAAK,EAAE,SAAS,CAAC,cAAc,CAAC,YAE/B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,KAAC,qBAAqB,IAEpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,IAFnB,OAAO,CAAC,EAAE,CAGf,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,cAAsB;IACvC,OAAO;QACL,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,2BAA2B,cAAc,WAAW;QACzE,GAAG,EAAE,WAAW;QAChB,UAAU,EAAE,OAAO;KACpB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,64 @@
+import type { ReactElement } from 'react';
+import type { SyntaxTooltipContent } from './SyntaxTooltip.tsx';
+/** One line of the cheatsheet: a construct and what it does. */
+export interface ReferenceRow {
+    /** The construct itself, set in monospace. */
+    syntax: string;
+    /** What it does, in one line — short enough to read on paper. */
+    description: string;
+    /**
+     * The longer story, opened by hovering the row. A sparse section is meant to
+     * ship and be enriched later, so a row without one is plain text rather than
+     * a chip that opens nothing.
+     * @default undefined — the row is not interactive
+     */
+    tooltip?: SyntaxTooltipContent;
+}
+/** One titled block of the cheatsheet. */
+export interface ReferenceSection {
+    /** Stable and URL-safe: a heading can be linked to. */
+    id: string;
+    title: string;
+    /**
+     * One line under the heading, when the block needs framing.
+     * @default undefined
+     */
+    intro?: string;
+    /**
+     * Colour of the heading and of the rule under it, which is how the sections
+     * are told apart at a glance.
+     * @default undefined — the heading takes the surrounding text colour
+     */
+    color?: string;
+    rows: ReferenceRow[];
+    /**
+     * Whether the block is dropped from the printed sheet — a section that is
+     * only useful with a pointer, or one the site keeps for the screen.
+     * @default false
+     */
+    noPrint?: boolean;
+}
+export interface ReferenceSectionBlockProps {
+    section: ReferenceSection;
+    /**
+     * Width of the syntax column, so the blocks of one grid line up.
+     * @default 150
+     */
+    syntaxWidth?: number | string;
+    /**
+     * Class the block carries, in addition to `reference-section`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * A titled block of reference rows.
+ *
+ * The rows are spans in a flex column rather than a table: a tooltip target is
+ * wrapped in a `<span>`, which a browser hoists straight out of a `<tbody>`,
+ * and a table also breaks across pages far worse than a column does.
+ * @param props - The section, and how wide its syntax column is.
+ * @returns The block, kept whole across a page break.
+ */
+export declare function ReferenceSectionBlock(props: ReferenceSectionBlockProps): ReactElement;
+//# sourceMappingURL=ReferenceSectionBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReferenceSectionBlock.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceSectionBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,0BAA0B,GAChC,YAAY,CAkBd"}

package/lib/pedagogy/ui/ReferenceSectionBlock.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SyntaxTooltip } from "./SyntaxTooltip.js";
+/**
+ * A titled block of reference rows.
+ *
+ * The rows are spans in a flex column rather than a table: a tooltip target is
+ * wrapped in a `<span>`, which a browser hoists straight out of a `<tbody>`,
+ * and a table also breaks across pages far worse than a column does.
+ * @param props - The section, and how wide its syntax column is.
+ * @returns The block, kept whole across a page break.
+ */
+export function ReferenceSectionBlock(props) {
+    const { section, syntaxWidth = 150, className } = props;
+    return (_jsxs("section", { id: section.id, className: blockClassName(section, className), style: SECTION_STYLE, children: [_jsx("h4", { style: headingStyle(section.color), children: section.title }), section.intro !== undefined && (_jsx("p", { style: INTRO_STYLE, children: section.intro })), section.rows.map((row) => (_jsx(ReferenceRowLine, { row: row, width: syntaxWidth }, row.syntax)))] }));
+}
+function ReferenceRowLine(props) {
+    const { row, width } = props;
+    const interactive = row.tooltip !== undefined;
+    const line = (_jsxs("span", { style: interactive ? INTERACTIVE_ROW_STYLE : ROW_STYLE, children: [_jsx("span", { style: syntaxStyle(width, interactive), children: row.syntax }), _jsx("span", { style: DESCRIPTION_STYLE, children: row.description })] }));
+    if (row.tooltip === undefined)
+        return line;
+    return (_jsx(SyntaxTooltip, { content: row.tooltip, placement: "right", children: line }));
+}
+function blockClassName(section, className) {
+    const names = ['reference-section'];
+    if (section.noPrint === true)
+        names.push('no-print');
+    if (className !== undefined)
+        names.push(className);
+    return names.join(' ');
+}
+function headingStyle(color) {
+    return {
+        margin: '0 0 4px',
+        paddingBottom: 2,
+        fontSize: 13,
+        ...(color === undefined
+            ? {}
+            : { color, borderBottom: `2px solid ${color}` }),
+    };
+}
+function syntaxStyle(width, interactive) {
+    return {
+        flex: `0 0 ${typeof width === 'number' ? `${width}px` : width}`,
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        fontSize: 12,
+        fontWeight: 600,
+        color: '#1c2127',
+        ...(interactive
+            ? { borderBottom: '1px dotted #5b6875', alignSelf: 'flex-start' }
+            : {}),
+    };
+}
+const SECTION_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    breakInside: 'avoid',
+};
+const INTRO_STYLE = {
+    margin: '0 0 4px',
+    color: '#5b6875',
+    fontSize: 12,
+};
+const ROW_STYLE = {
+    display: 'flex',
+    gap: 8,
+    padding: '3px 0',
+    borderTop: '1px solid #e5e7eb',
+    width: '100%',
+};
+const INTERACTIVE_ROW_STYLE = { ...ROW_STYLE, cursor: 'help' };
+const DESCRIPTION_STYLE = {
+    flex: '1 1 auto',
+    fontSize: 12,
+    lineHeight: 1.4,
+    color: '#404854',
+};
+//# sourceMappingURL=ReferenceSectionBlock.js.map

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

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

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

@@ -0,0 +1,94 @@
+import type { Placement } from '@blueprintjs/core';
+import type { ReactElement, ReactNode } from 'react';
+/** The one worked example a documented construct carries. */
+export interface SyntaxTooltipExample {
+    /** The construct in use: a pattern, a SMILES, a LaTeX fragment, a layer. */
+    code: string;
+    /**
+     * What it is shown working on, for a construct whose example takes an input.
+     * @default undefined — the example is about notation only
+     */
+    input?: string;
+    /**
+     * What the example demonstrates, in one line.
+     * @default undefined
+     */
+    note?: string;
+}
+/** Everything the rich tooltip says about one construct. */
+export interface SyntaxTooltipContent {
+    /** The construct itself, shown in the highlighted chip. */
+    syntax: string;
+    /** Its name, in words: `Word boundary`, `Aromatic atom`, `Layer /c`. */
+    name: string;
+    /**
+     * Where it comes from, in small grey type: `RegExp.prototype.global`.
+     * @default undefined
+     */
+    tag?: string;
+    /** The one-line headline. */
+    summary: string;
+    /** The longer story, in a sentence or two. */
+    detail: string;
+    example: SyntaxTooltipExample;
+}
+export interface SyntaxTooltipProps {
+    /** What to explain. */
+    content: SyntaxTooltipContent;
+    /** What the student hovers: a cheatsheet row, a chip, a help icon. */
+    children: ReactNode;
+    /**
+     * Side the tooltip opens on. A cheatsheet row opens to its right, a chip in
+     * a toolbar below itself.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Label of the example's code line.
+     * @default 'Example'
+     */
+    codeLabel?: string;
+    /**
+     * Label of the example's input line.
+     * @default 'Input'
+     */
+    inputLabel?: string;
+    /**
+     * Holds the tooltip open regardless of the pointer, for a page that pins one
+     * open on click and for showing the body on its own.
+     * @default undefined — the tooltip follows the pointer
+     */
+    isOpen?: boolean;
+}
+/**
+ * The one rich tooltip of a tool: cheatsheet rows, option chips and inline help
+ * icons all open this, so every documented construct is described at the same
+ * level of detail and adding a construct means adding the same five fields.
+ * @param props - The construct, and what opens it.
+ * @returns The hovered element, with its tooltip.
+ */
+export declare function SyntaxTooltip(props: SyntaxTooltipProps): ReactElement;
+export interface SyntaxTooltipBodyProps {
+    /** What to explain. */
+    content: SyntaxTooltipContent;
+    /**
+     * Label of the example's code line.
+     * @default 'Example'
+     */
+    codeLabel?: string;
+    /**
+     * Label of the example's input line.
+     * @default 'Input'
+     */
+    inputLabel?: string;
+}
+/**
+ * The body of the rich tooltip, on its own.
+ *
+ * A reference page that prints the same description under each construct shows
+ * this rather than restating the fields in a second layout.
+ * @param props - The construct, and how its example is labelled.
+ * @returns The body.
+ */
+export declare function SyntaxTooltipBody(props: SyntaxTooltipBodyProps): ReactElement;
+//# sourceMappingURL=SyntaxTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SyntaxTooltip.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/SyntaxTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,6DAA6D;AAC7D,MAAM,WAAW,oBAAoB;IACnC,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,4DAA4D;AAC5D,MAAM,WAAW,oBAAoB;IACnC,2DAA2D;IAC3D,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,oBAAoB,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,uBAAuB;IACvB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA0BrE;AAED,MAAM,WAAW,sBAAsB;IACrC,uBAAuB;IACvB,OAAO,EAAE,oBAAoB,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA8B7E"}

package/lib/pedagogy/ui/SyntaxTooltip.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@blueprintjs/core';
+/**
+ * The one rich tooltip of a tool: cheatsheet rows, option chips and inline help
+ * icons all open this, so every documented construct is described at the same
+ * level of detail and adding a construct means adding the same five fields.
+ * @param props - The construct, and what opens it.
+ * @returns The hovered element, with its tooltip.
+ */
+export function SyntaxTooltip(props) {
+    const { content, children, placement = 'bottom', codeLabel, inputLabel, isOpen, } = props;
+    return (_jsx(Tooltip, { content: _jsx(SyntaxTooltipBody, { content: content, codeLabel: codeLabel, inputLabel: inputLabel }), hoverOpenDelay: HOVER_OPEN_DELAY, placement: placement, isOpen: isOpen, children: children }));
+}
+/**
+ * The body of the rich tooltip, on its own.
+ *
+ * A reference page that prints the same description under each construct shows
+ * this rather than restating the fields in a second layout.
+ * @param props - The construct, and how its example is labelled.
+ * @returns The body.
+ */
+export function SyntaxTooltipBody(props) {
+    const { content, codeLabel = 'Example', inputLabel = 'Input' } = props;
+    const { syntax, name, tag, summary, detail, example } = content;
+    return (_jsxs("div", { style: BODY_STYLE, children: [_jsxs("div", { style: HEADER_STYLE, children: [_jsx("code", { style: SYNTAX_STYLE, children: syntax }), _jsx("span", { style: NAME_STYLE, children: name }), tag !== undefined && _jsx("span", { style: TAG_STYLE, children: tag })] }), _jsx("div", { style: SUMMARY_STYLE, children: summary }), _jsx("div", { style: DETAIL_STYLE, children: detail }), _jsxs("div", { style: EXAMPLE_STYLE, children: [_jsxs("div", { style: ROW_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: codeLabel }), _jsx("code", { style: VALUE_STYLE, children: example.code })] }), example.input !== undefined && (_jsxs("div", { style: ROW_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: inputLabel }), _jsx("code", { style: VALUE_STYLE, children: example.input })] })), example.note !== undefined && (_jsx("div", { style: NOTE_STYLE, children: example.note }))] })] }));
+}
+/** Long enough that the pointer can cross a row without opening it. */
+const HOVER_OPEN_DELAY = 150;
+const MONOSPACE = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';
+const BODY_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    maxWidth: 360,
+};
+const HEADER_STYLE = {
+    display: 'flex',
+    alignItems: 'baseline',
+    flexWrap: 'wrap',
+    gap: 6,
+};
+const SYNTAX_STYLE = {
+    background: 'rgb(255 255 255 / 15%)',
+    borderRadius: 3,
+    color: '#ffffff',
+    fontFamily: MONOSPACE,
+    fontSize: 14,
+    fontWeight: 600,
+    padding: '1px 6px',
+};
+const NAME_STYLE = { fontWeight: 600, fontSize: 13 };
+const TAG_STYLE = { color: '#abb3bf', fontSize: 11 };
+const SUMMARY_STYLE = { fontSize: 12, lineHeight: 1.4 };
+const DETAIL_STYLE = {
+    color: '#d3d8de',
+    fontSize: 12,
+    lineHeight: 1.45,
+};
+const EXAMPLE_STYLE = {
+    borderTop: '1px solid rgb(255 255 255 / 15%)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    paddingTop: 6,
+};
+const ROW_STYLE = { display: 'flex', gap: 6, fontSize: 12 };
+const LABEL_STYLE = { color: '#abb3bf', flex: '0 0 68px' };
+const VALUE_STYLE = {
+    color: '#f6f7f9',
+    fontFamily: MONOSPACE,
+    overflowWrap: 'anywhere',
+};
+const NOTE_STYLE = {
+    color: '#abb3bf',
+    fontSize: 12,
+    fontStyle: 'italic',
+    marginTop: 2,
+};
+//# sourceMappingURL=SyntaxTooltip.js.map

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

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

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

@@ -0,0 +1,35 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { TestCaseResult } from '../core/validation.ts';
+export interface TestCaseListProps<TCase extends TestCaseResult = TestCaseResult> {
+    /** The graded cases, in the order the validator returned them. */
+    results: readonly TCase[];
+    /**
+     * What names a case: the input it was run on, the atom it asked about. A
+     * tool that carries no such name lets the sentence speak for itself.
+     * @default undefined — the row shows only the reason
+     */
+    label?: (result: TCase, position: number) => ReactNode;
+    /**
+     * Whether the answer could not be graded at all — it does not compile, or
+     * there is nothing to mark yet. Every case is then drawn neutral rather than
+     * red, since none of them actually failed.
+     * @default false
+     */
+    pending?: boolean;
+    /**
+     * Class the list carries, so a site can reach it from its stylesheet.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * One row per graded case: whether it passes, and the sentence saying why not.
+ *
+ * The sentence is the validator's own — `match was "cat", expected "cats"` —
+ * and is never rewritten here: the explanation is the teaching, and a
+ * paraphrase would drop the value the student has to compare.
+ * @param props - The cases, and whether they could be graded at all.
+ * @returns The list, or nothing when there is no case to show.
+ */
+export declare function TestCaseList<TCase extends TestCaseResult>(props: TestCaseListProps<TCase>): ReactElement | null;
+//# sourceMappingURL=TestCaseList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TestCaseList.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/TestCaseList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,WAAW,iBAAiB,CAChC,KAAK,SAAS,cAAc,GAAG,cAAc;IAE7C,kEAAkE;IAClE,OAAO,EAAE,SAAS,KAAK,EAAE,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IACvD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,SAAS,cAAc,EACvD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAC9B,YAAY,GAAG,IAAI,CA8BrB"}

package/lib/pedagogy/ui/TestCaseList.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@blueprintjs/core';
+/**
+ * One row per graded case: whether it passes, and the sentence saying why not.
+ *
+ * The sentence is the validator's own — `match was "cat", expected "cats"` —
+ * and is never rewritten here: the explanation is the teaching, and a
+ * paraphrase would drop the value the student has to compare.
+ * @param props - The cases, and whether they could be graded at all.
+ * @returns The list, or nothing when there is no case to show.
+ */
+export function TestCaseList(props) {
+    const { results, label, pending = false, className } = props;
+    if (results.length === 0)
+        return null;
+    const rows = [];
+    for (let position = 0; position < results.length; position++) {
+        const result = results[position];
+        rows.push(_jsxs("li", { style: itemStyle(result.passed, pending), children: [_jsx(Icon, { icon: caseIcon(result.passed, pending), intent: caseIntent(result.passed, pending) }), _jsxs("span", { children: [label !== undefined && (_jsx("strong", { style: LABEL_STYLE, children: label(result, position) })), result.reason !== '' && (_jsx("span", { style: REASON_STYLE, children: result.reason }))] })] }, `case-${position}`));
+    }
+    return (_jsx("ul", { className: className, style: LIST_STYLE, children: rows }));
+}
+function caseIcon(passed, pending) {
+    if (passed)
+        return 'tick-circle';
+    return pending ? 'circle' : 'cross-circle';
+}
+function caseIntent(passed, pending) {
+    if (passed)
+        return 'success';
+    return pending ? 'none' : 'danger';
+}
+function itemStyle(passed, pending) {
+    const failed = !passed && !pending;
+    return {
+        display: 'flex',
+        alignItems: 'start',
+        gap: 8,
+        padding: '4px 8px',
+        borderRadius: 3,
+        borderLeft: `3px solid ${passed ? '#1c6e42' : failed ? '#cd4246' : '#c5cbd3'}`,
+        background: passed
+            ? 'rgb(236 253 245)'
+            : failed
+                ? 'rgb(254 243 242)'
+                : 'rgb(245 248 250)',
+    };
+}
+const LIST_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+};
+const LABEL_STYLE = { marginRight: 6 };
+const REASON_STYLE = {
+    display: 'block',
+    color: 'rgb(65 75 90)',
+    lineHeight: 1.4,
+};
+//# sourceMappingURL=TestCaseList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TestCaseList.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/TestCaseList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AA8BzC;;;;;;;;GAQG;AACH,MAAM,UAAU,YAAY,CAC1B,KAA+B;IAE/B,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7D,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtC,MAAM,IAAI,GAAgB,EAAE,CAAC;IAC7B,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;QAC7D,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAU,CAAC;QAC1C,IAAI,CAAC,IAAI,CACP,cAA6B,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,aACnE,KAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC1C,EACF,2BACG,KAAK,KAAK,SAAS,IAAI,CACtB,iBAAQ,KAAK,EAAE,WAAW,YAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAU,CAC/D,EACA,MAAM,CAAC,MAAM,KAAK,EAAE,IAAI,CACvB,eAAM,KAAK,EAAE,YAAY,YAAG,MAAM,CAAC,MAAM,GAAQ,CAClD,IACI,KAZA,QAAQ,QAAQ,EAAE,CAatB,CACN,CAAC;IACJ,CAAC;IAED,OAAO,CACL,aAAI,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,YACxC,IAAI,GACF,CACN,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CACf,MAAe,EACf,OAAgB;IAEhB,IAAI,MAAM;QAAE,OAAO,aAAa,CAAC;IACjC,OAAO,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;AAC7C,CAAC;AAED,SAAS,UAAU,CACjB,MAAe,EACf,OAAgB;IAEhB,IAAI,MAAM;QAAE,OAAO,SAAS,CAAC;IAC7B,OAAO,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AACrC,CAAC;AAED,SAAS,SAAS,CAAC,MAAe,EAAE,OAAgB;IAClD,MAAM,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC;IACnC,OAAO;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,OAAO;QACnB,GAAG,EAAE,CAAC;QACN,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,aAAa,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;QAC9E,UAAU,EAAE,MAAM;YAChB,CAAC,CAAC,kBAAkB;YACpB,CAAC,CAAC,MAAM;gBACN,CAAC,CAAC,kBAAkB;gBACpB,CAAC,CAAC,kBAAkB;KACzB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;IACN,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;CACX,CAAC;AAEF,MAAM,WAAW,GAAkB,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC;AAEtD,MAAM,YAAY,GAAkB;IAClC,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,eAAe;IACtB,UAAU,EAAE,GAAG;CAChB,CAAC"}

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

@@ -0,0 +1,42 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ExerciseLevel, TutorialStep } from '../core/types.ts';
+export interface TutorialStepStripProps {
+    /** The whole tour, in teaching order. */
+    steps: readonly TutorialStep[];
+    /**
+     * Which step is open, as its position in `steps`. A position outside the
+     * tour is read as one of its ends, so a hand-edited link still opens.
+     */
+    activeIndex: number;
+    /** Called with the position of the step to open. */
+    onSelect: (index: number) => void;
+    /**
+     * What each strip is called — `Basics`, `π bonds, planarity, conjugation`.
+     * @default undefined — the level names its own strip
+     */
+    levelLabels?: Partial<Record<ExerciseLevel, string>>;
+    /**
+     * Whether Previous and Next sit under the strips. Both exist on purpose: the
+     * strips show the shape of the course and let a lecturer jump into it, the
+     * pager is how a student actually walks through it.
+     * @default true
+     */
+    pager?: boolean;
+    /**
+     * A word after the pager, for a tool whose steps also answer the keyboard.
+     * @default undefined
+     */
+    pagerHint?: ReactNode;
+    /**
+     * Class the strips carry, so a site can reach them from its stylesheet.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * The numbered steps of the tour, one coloured strip per level, plus a pager.
+ * @param props - The tour, the open step, and how to move.
+ * @returns The strips and the pager.
+ */
+export declare function TutorialStepStrip(props: TutorialStepStripProps): ReactElement;
+//# sourceMappingURL=TutorialStepStrip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TutorialStepStrip.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/TutorialStepStrip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMpE,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA6D7E"}