react-cheminfo 0.11.0 → 0.13.0

package/lib/pedagogy/ui/ExerciseProgressHeader.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, Button, ProgressBar } from '@blueprintjs/core';
 import { useState } from 'react';
+import { TOKEN } from "../../tokens/core/familyTokens.js";
 /**
  * How much of a set is solved, its bar, and the one way to wipe it.
  *
@@ -36,7 +37,7 @@ const ROW_STYLE = {
 };
 const COUNT_STYLE = { fontWeight: 600 };
 const PERCENT_STYLE = {
-    color: 'var(--text-muted, #5b6875)',
+    color: TOKEN.textMuted,
     flex: '1 1 auto',
     fontSize: 12,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ExerciseProgressHeader.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseProgressHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAmCjC;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EACJ,OAAO,EACP,UAAU,EACV,UAAU,GAAG,mBAAmB,EAChC,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,KAAK,EACrB,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC;IAEvE,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,aAC1C,eAAK,KAAK,EAAE,SAAS,aACnB,eAAM,KAAK,EAAE,WAAW,YACrB,GAAG,OAAO,CAAC,MAAM,MAAM,OAAO,CAAC,KAAK,SAAS,GACzC,EACP,eACE,KAAK,EAAE,aAAa,YACpB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAQ,EAC9C,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,SAAS,EACjB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,aAAa,CAAC,IAAI,CAAC,CAAC;wBACtB,CAAC,GACD,CACH,IACG,EAEN,KAAC,WAAW,IACV,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,KAAK,EAAE,OAAO,CAAC,KAAK,GACpB,EAED,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,KAAK,IACJ,MAAM,EAAE,UAAU,EAClB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,gBAAgB,EAAC,iBAAiB,EAClC,iBAAiB,EAAC,kBAAkB,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;oBACd,UAAU,EAAE,CAAC;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,YAEA,YAAY,GACP,CACT,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GACnB,8GAA8G,CAAC;AAEjH,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,WAAW,GAAkB,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,aAAa,GAAkB;IACnC,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,EAAE;CACb,CAAC"}
+{"version":3,"file":"ExerciseProgressHeader.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseProgressHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAmC1D;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EACJ,OAAO,EACP,UAAU,EACV,UAAU,GAAG,mBAAmB,EAChC,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,KAAK,EACrB,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC;IAEvE,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,aAC1C,eAAK,KAAK,EAAE,SAAS,aACnB,eAAM,KAAK,EAAE,WAAW,YACrB,GAAG,OAAO,CAAC,MAAM,MAAM,OAAO,CAAC,KAAK,SAAS,GACzC,EACP,eACE,KAAK,EAAE,aAAa,YACpB,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAQ,EAC9C,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,SAAS,EACjB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,GAAG,EAAE;4BACZ,aAAa,CAAC,IAAI,CAAC,CAAC;wBACtB,CAAC,GACD,CACH,IACG,EAEN,KAAC,WAAW,IACV,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,KAAK,EAAE,OAAO,CAAC,KAAK,GACpB,EAED,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,KAAK,IACJ,MAAM,EAAE,UAAU,EAClB,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,gBAAgB,EAAC,iBAAiB,EAClC,iBAAiB,EAAC,kBAAkB,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;oBACd,UAAU,EAAE,CAAC;oBACb,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,YAEA,YAAY,GACP,CACT,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GACnB,8GAA8G,CAAC;AAEjH,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,WAAW,GAAkB,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,aAAa,GAAkB;IACnC,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,EAAE;CACb,CAAC"}

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

@@ -1,6 +1,8 @@
 import type { ReactElement } from 'react';
 import type { ExerciseLevel, ExerciseStatus } from '../core/types.ts';
+/** What {@link ExerciseLevelTag} needs. */
 export interface ExerciseLevelTagProps {
+    /** The difficulty the tag shows, which also picks its colour. */
     level: ExerciseLevel;
     /**
      * What the tag reads.
@@ -20,6 +22,11 @@ export interface ExerciseLevelTagProps {
      * @default undefined — the tag only reports the level
      */
     onClick?: () => void;
+    /**
+     * Class names added to the root element, after the component's own.
+     * @default undefined
+     */
+    className?: string;
 }
 /**
  * The difficulty of an exercise or a step, as a coloured tag.
@@ -27,7 +34,9 @@ export interface ExerciseLevelTagProps {
  * @returns The tag.
  */
 export declare function ExerciseLevelTag(props: ExerciseLevelTagProps): ReactElement;
+/** What {@link ExerciseStatusIcon} needs. */
 export interface ExerciseStatusIconProps {
+    /** Where the student stands on the exercise, which picks the glyph. */
     status: ExerciseStatus;
     /**
      * What the pointer and a screen reader are told.
@@ -39,6 +48,11 @@ export interface ExerciseStatusIconProps {
      * @default undefined — Blueprint's standard 16
      */
     size?: number;
+    /**
+     * Class names added to the root element, after the component's own.
+     * @default undefined
+     */
+    className?: string;
 }
 /**
  * Where a student stands on one exercise, as the glyph in front of its title.

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

@@ -1 +1 @@
-{"version":3,"file":"ExerciseTags.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseTags.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAItE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAe3E;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,cAAc,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CAYd"}
+{"version":3,"file":"ExerciseTags.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseTags.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAItE,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,KAAK,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAgB3E;AAED,6CAA6C;AAC7C,MAAM,WAAW,uBAAuB;IACtC,uEAAuE;IACvE,MAAM,EAAE,cAAc,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CAad"}

package/lib/pedagogy/ui/ExerciseTags.js

@@ -7,8 +7,8 @@ import { LEVEL_INTENT, STATUS_ICON, STATUS_INTENT } from "./exerciseMeta.js";
  * @returns The tag.
  */
 export function ExerciseLevelTag(props) {
-    const { level, label = level, active = false, onClick } = props;
-    return (_jsx(Tag, { round: true, minimal: !active, active: active, intent: LEVEL_INTENT[level], interactive: onClick !== undefined, onClick: onClick, children: label }));
+    const { className, level, label = level, active = false, onClick } = props;
+    return (_jsx(Tag, { className: className, round: true, minimal: !active, active: active, intent: LEVEL_INTENT[level], interactive: onClick !== undefined, onClick: onClick, children: label }));
 }
 /**
  * Where a student stands on one exercise, as the glyph in front of its title.
@@ -16,7 +16,7 @@ export function ExerciseLevelTag(props) {
  * @returns The icon.
  */
 export function ExerciseStatusIcon(props) {
-    const { status, title = status, size } = props;
-    return (_jsx(Icon, { icon: STATUS_ICON[status], intent: STATUS_INTENT[status], size: size, title: title, "aria-label": title }));
+    const { className, status, title = status, size } = props;
+    return (_jsx(Icon, { className: className, icon: STATUS_ICON[status], intent: STATUS_INTENT[status], size: size, title: title, "aria-label": title }));
 }
 //# sourceMappingURL=ExerciseTags.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExerciseTags.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseTags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAK9C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAwB7E;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEhE,OAAO,CACL,KAAC,GAAG,IACF,KAAK,QACL,OAAO,EAAE,CAAC,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,EAC3B,WAAW,EAAE,OAAO,KAAK,SAAS,EAClC,OAAO,EAAE,OAAO,YAEf,KAAK,GACF,CACP,CAAC;AACJ,CAAC;AAgBD;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAA8B;IAE9B,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,EACzB,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,KAAK,GACjB,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ExerciseTags.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ExerciseTags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAK9C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA+B7E;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE3E,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,SAAS,EACpB,KAAK,QACL,OAAO,EAAE,CAAC,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,EAC3B,WAAW,EAAE,OAAO,KAAK,SAAS,EAClC,OAAO,EAAE,OAAO,YAEf,KAAK,GACF,CACP,CAAC;AACJ,CAAC;AAuBD;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAA8B;IAE9B,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAE1D,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,EACzB,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,KAAK,GACjB,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,39 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { GlossaryEntry, GlossaryExample } from '../core/glossary.ts';
+import type { ProseTone } from './pedagogyStyle.ts';
+/** Props of {@link GlossaryDefinition}. */
+export interface GlossaryDefinitionProps<TExample = GlossaryExample> {
+    /** The term to explain, already resolved from a marker. */
+    entry: GlossaryEntry<TExample>;
+    /**
+     * The ground it is drawn on: the dark plate of a tooltip, or the page, where
+     * a glossary lists every term.
+     * @default 'tooltip'
+     */
+    tone?: ProseTone;
+    /**
+     * Draws the illustration of one example; its note is still written under it.
+     * @default the surrounding provider's, and otherwise the code and the input
+     */
+    renderExample?: (example: TExample) => ReactNode;
+    /**
+     * Draws the code spans of the summary and of the notes.
+     * @default the surrounding provider's, and otherwise a monospace span
+     */
+    renderCode?: (code: string) => ReactNode;
+    /**
+     * Class names added to the root element.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * One definition: the term, one paragraph, then the worked examples.
+ *
+ * The tooltip a marker opens and the entry a glossary page lists are this one
+ * body on two grounds, so a term reads the same wherever it is looked up.
+ * @param props - The entry, and the ground it is drawn on.
+ * @returns The definition.
+ */
+export declare function GlossaryDefinition<TExample = GlossaryExample>(props: GlossaryDefinitionProps<TExample>): ReactElement;
+//# sourceMappingURL=GlossaryDefinition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlossaryDefinition.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryDefinition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAK1E,OAAO,KAAK,EAAY,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG9D,2CAA2C;AAC3C,MAAM,WAAW,uBAAuB,CAAC,QAAQ,GAAG,eAAe;IACjE,2DAA2D;IAC3D,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,SAAS,CAAC;IACjD;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACzC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,GAAG,eAAe,EAC3D,KAAK,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GACvC,YAAY,CA2Cd"}

package/lib/pedagogy/ui/GlossaryDefinition.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { InlineText } from "./InlineText.js";
+import { exampleText } from "./exampleText.js";
+import { useGlossary } from "./glossaryContext.js";
+import { MONOSPACE, PROSE_INK } from "./pedagogyStyle.js";
+/**
+ * One definition: the term, one paragraph, then the worked examples.
+ *
+ * The tooltip a marker opens and the entry a glossary page lists are this one
+ * body on two grounds, so a term reads the same wherever it is looked up.
+ * @param props - The entry, and the ground it is drawn on.
+ * @returns The definition.
+ */
+export function GlossaryDefinition(props) {
+    const { className, entry, tone = 'tooltip' } = props;
+    const context = useGlossary();
+    const ink = PROSE_INK[tone];
+    const renderCode = props.renderCode ??
+        context.renderCode ??
+        ((code) => _jsx("code", { style: codeStyle(ink), children: code }));
+    const renderExample = (props.renderExample ?? context.renderExample);
+    const items = [];
+    for (let position = 0; position < entry.examples.length; position++) {
+        const example = entry.examples[position];
+        const note = exampleText(example, 'note');
+        items.push(_jsxs("li", { children: [renderExample === undefined ? (_jsx(ExampleLine, { example: example, ink: ink })) : (renderExample(example)), note !== undefined && (_jsx("div", { style: { ...NOTE_STYLE, color: ink.muted }, children: _jsx(InlineText, { text: note, renderCode: renderCode }) }))] }, `example-${position}`));
+    }
+    return (_jsxs("div", { className: className, style: tone === 'tooltip' ? TOOLTIP_BODY_STYLE : BODY_STYLE, children: [_jsx("div", { style: TITLE_STYLE, children: entry.title }), _jsx("div", { style: { ...SUMMARY_STYLE, color: ink.text }, children: _jsx(InlineText, { text: entry.summary, renderCode: renderCode }) }), items.length > 0 && _jsx("ul", { style: LIST_STYLE, children: items })] }));
+}
+function ExampleLine(props) {
+    const { example, ink } = props;
+    const code = exampleText(example, 'code');
+    const input = exampleText(example, 'input');
+    if (code === undefined)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("code", { style: codeStyle(ink), children: code }), input !== undefined && _jsx("span", { children: ` on ${input}` })] }));
+}
+function codeStyle(ink) {
+    return { fontFamily: MONOSPACE, fontWeight: 600, color: ink.code };
+}
+const BODY_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+};
+const TOOLTIP_BODY_STYLE = { ...BODY_STYLE, maxWidth: 340 };
+const TITLE_STYLE = { fontWeight: 600, fontSize: 13 };
+const SUMMARY_STYLE = { fontSize: 12, lineHeight: 1.45 };
+const LIST_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    margin: 0,
+    paddingLeft: 16,
+    fontSize: 12,
+    lineHeight: 1.4,
+};
+const NOTE_STYLE = { fontStyle: 'italic' };
+//# sourceMappingURL=GlossaryDefinition.js.map

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

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

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

@@ -0,0 +1,59 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { Glossary, GlossaryExample } from '../core/glossary.ts';
+/** Props of {@link GlossaryIndex}. */
+export interface GlossaryIndexProps<TExample = GlossaryExample> {
+    /**
+     * The terms to list.
+     * @default undefined — the glossary of the surrounding `GlossaryProvider`
+     */
+    glossary?: Glossary<TExample>;
+    /**
+     * Draws the illustration of an example.
+     * @default the surrounding provider's, and otherwise the code and the input
+     */
+    renderExample?: (example: TExample) => ReactNode;
+    /**
+     * Draws the code spans of the summaries and notes.
+     * @default the surrounding provider's, and otherwise a monospace span
+     */
+    renderCode?: (code: string) => ReactNode;
+    /**
+     * Whether a filter box sits over the list. It is left off the printed page.
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder and accessible name of the filter box.
+     * @default 'Filter terms…'
+     */
+    searchLabel?: string;
+    /**
+     * Width under which a column wraps to the next line, in pixels.
+     * @default 280
+     */
+    minColumnWidth?: number;
+    /**
+     * Prefix of the id each entry carries, so `#glossary-ring-closure` links to
+     * one term.
+     * @default 'glossary-'
+     */
+    idPrefix?: string;
+    /**
+     * Class the index carries, in addition to `glossary-index`.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * Every term of a glossary on one page: searchable on screen, printable on
+ * paper, in alphabetical order of title.
+ *
+ * Each entry is the very definition a `[[marker]]` opens on hover, drawn on the
+ * page rather than on a tooltip, so a term never reads two ways. A filter
+ * matches the title, the summary and the text of the examples, since a student
+ * often remembers the notation and not the word it was filed under.
+ * @param props - The terms, and how the list is searched and laid out.
+ * @returns The index.
+ */
+export declare function GlossaryIndex<TExample = GlossaryExample>(props: GlossaryIndexProps<TExample>): ReactElement;
+//# sourceMappingURL=GlossaryIndex.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlossaryIndex.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryIndex.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAMrE,sCAAsC;AACtC,MAAM,WAAW,kBAAkB,CAAC,QAAQ,GAAG,eAAe;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,SAAS,CAAC;IACjD;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,QAAQ,GAAG,eAAe,EACtD,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAClC,YAAY,CA0Dd"}

package/lib/pedagogy/ui/GlossaryIndex.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputGroup } from '@blueprintjs/core';
+import { useMemo, useState } from 'react';
+import { joinClassNames } from "../../shared/ui/joinClassNames.js";
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { listGlossary } from "../core/glossarySearch.js";
+import { GlossaryDefinition } from "./GlossaryDefinition.js";
+import { useGlossary } from "./glossaryContext.js";
+/**
+ * Every term of a glossary on one page: searchable on screen, printable on
+ * paper, in alphabetical order of title.
+ *
+ * Each entry is the very definition a `[[marker]]` opens on hover, drawn on the
+ * page rather than on a tooltip, so a term never reads two ways. A filter
+ * matches the title, the summary and the text of the examples, since a student
+ * often remembers the notation and not the word it was filed under.
+ * @param props - The terms, and how the list is searched and laid out.
+ * @returns The index.
+ */
+export function GlossaryIndex(props) {
+    const { glossary, renderExample, renderCode, searchable = true, searchLabel = 'Filter terms…', minColumnWidth = 280, idPrefix = 'glossary-', className, } = props;
+    const context = useGlossary();
+    const terms = (glossary ?? context.glossary);
+    const [query, setQuery] = useState('');
+    const listings = useMemo(() => listGlossary(terms, query), [terms, query]);
+    return (_jsxs("div", { className: joinClassNames('glossary-index', className), style: ROOT_STYLE, children: [searchable && (_jsx("div", { className: "no-print", style: SEARCH_STYLE, children: _jsx(InputGroup, { type: "search", leftIcon: "search", value: query, placeholder: searchLabel, "aria-label": searchLabel, autoComplete: "off", spellCheck: false, onValueChange: setQuery }) })), listings.length === 0 ? (_jsx("p", { style: EMPTY_STYLE, children: emptyMessage(query) })) : (_jsx("div", { style: gridStyle(minColumnWidth), children: listings.map(({ key, entry }) => (_jsx("article", { id: `${idPrefix}${anchorOf(key)}`, className: "glossary-index-entry", style: ENTRY_STYLE, children: _jsx(GlossaryDefinition, { entry: entry, tone: "page", renderExample: renderExample, renderCode: renderCode }) }, key))) }))] }));
+}
+function emptyMessage(query) {
+    const trimmed = query.trim();
+    return trimmed === ''
+        ? 'No term is defined yet.'
+        : `No term matches “${trimmed}”.`;
+}
+function anchorOf(key) {
+    return key
+        .trim()
+        .replaceAll(/[^\p{L}\p{N}]+/gu, '-')
+        .replaceAll(/^-+|-+$/g, '');
+}
+function gridStyle(minColumnWidth) {
+    return {
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(min(${minColumnWidth}px, 100%), 1fr))`,
+        gap: '12px 24px',
+        alignItems: 'start',
+    };
+}
+const ROOT_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+};
+const SEARCH_STYLE = { maxWidth: 320 };
+const EMPTY_STYLE = {
+    margin: 0,
+    color: TOKEN.textMuted,
+};
+const ENTRY_STYLE = {
+    borderTop: `1px solid ${TOKEN.border}`,
+    breakInside: 'avoid',
+    paddingTop: 8,
+};
+//# sourceMappingURL=GlossaryIndex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlossaryIndex.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryIndex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AA+CnD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAmC;IAEnC,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,eAAe,EAC7B,cAAc,GAAG,GAAG,EACpB,QAAQ,GAAG,WAAW,EACtB,SAAS,GACV,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,KAAK,GAAG,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAuB,CAAC;IACnE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,eACE,SAAS,EAAE,cAAc,CAAC,gBAAgB,EAAE,SAAS,CAAC,EACtD,KAAK,EAAE,UAAU,aAEhB,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,YAAY,YAC3C,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,gBACZ,WAAW,EACvB,YAAY,EAAC,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,aAAa,EAAE,QAAQ,GACvB,GACE,CACP,EACA,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACvB,YAAG,KAAK,EAAE,WAAW,YAAG,YAAY,CAAC,KAAK,CAAC,GAAK,CACjD,CAAC,CAAC,CAAC,CACF,cAAK,KAAK,EAAE,SAAS,CAAC,cAAc,CAAC,YAClC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAChC,kBAEE,EAAE,EAAE,GAAG,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,EACjC,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,WAAW,YAElB,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,GACtB,IAVG,GAAG,CAWA,CACX,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7B,OAAO,OAAO,KAAK,EAAE;QACnB,CAAC,CAAC,yBAAyB;QAC3B,CAAC,CAAC,oBAAoB,OAAO,IAAI,CAAC;AACtC,CAAC;AAED,SAAS,QAAQ,CAAC,GAAW;IAC3B,OAAO,GAAG;SACP,IAAI,EAAE;SACN,UAAU,CAAC,kBAAkB,EAAE,GAAG,CAAC;SACnC,UAAU,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,SAAS,CAAC,cAAsB;IACvC,OAAO;QACL,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,gCAAgC,cAAc,kBAAkB;QACrF,GAAG,EAAE,WAAW;QAChB,UAAU,EAAE,OAAO;KACpB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;CACR,CAAC;AAEF,MAAM,YAAY,GAAkB,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;AAEtD,MAAM,WAAW,GAAkB;IACjC,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS;CACvB,CAAC;AAEF,MAAM,WAAW,GAAkB;IACjC,SAAS,EAAE,aAAa,KAAK,CAAC,MAAM,EAAE;IACtC,WAAW,EAAE,OAAO;IACpB,UAAU,EAAE,CAAC;CACd,CAAC"}

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

@@ -1,8 +1,22 @@
 import type { ReactElement, ReactNode } from 'react';
-import type { Glossary } from '../core/glossary.ts';
-export interface GlossaryProviderProps {
+import type { Glossary, GlossaryExample } from '../core/glossary.ts';
+/** Props of {@link GlossaryProvider}. */
+export interface GlossaryProviderProps<TExample = GlossaryExample> {
     /** Every term the site defines, keyed by the lowercased text of a marker. */
-    glossary: Glossary;
+    glossary: Glossary<TExample>;
+    /**
+     * Draws the illustration of an example, wherever a definition below shows
+     * one: a structure for a SMILES, a typeset formula for LaTeX. The note of the
+     * example is still written under it. Needed whenever the examples are not
+     * `{ code, input, note }`.
+     * @default undefined — an example is its code, and the input it runs on
+     */
+    renderExample?: (example: TExample) => ReactNode;
+    /**
+     * Draws the code spans of the prose below.
+     * @default undefined — a plain `<code>`
+     */
+    renderCode?: (code: string) => ReactNode;
     /** The part of the page whose prose resolves its markers against it. */
     children: ReactNode;
 }
@@ -11,9 +25,11 @@ export interface GlossaryProviderProps {
  *
  * Wrap the whole tool once, high enough that a tutorial step, an exercise
  * description and a revealed hint all sit under it: they are the three places
- * jargon is linked, and they must define a term the same way.
- * @param props - The terms, and the tree that uses them.
+ * jargon is linked, and they must define a term — and draw its examples — the
+ * same way.
+ * @param props - The terms, how their examples are drawn, and the tree that
+ * uses them.
  * @returns The tree, with the glossary in reach.
  */
-export declare function GlossaryProvider(props: GlossaryProviderProps): ReactElement;
+export declare function GlossaryProvider<TExample = GlossaryExample>(props: GlossaryProviderProps<TExample>): ReactElement;
 //# sourceMappingURL=GlossaryProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GlossaryProvider.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,WAAW,qBAAqB;IACpC,6EAA6E;IAC7E,QAAQ,EAAE,QAAQ,CAAC;IACnB,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAQ3E"}
+{"version":3,"file":"GlossaryProvider.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKrE,yCAAyC;AACzC,MAAM,WAAW,qBAAqB,CAAC,QAAQ,GAAG,eAAe;IAC/D,6EAA6E;IAC7E,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,SAAS,CAAC;IACjD;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACzC,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,GAAG,eAAe,EACzD,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC,GACrC,YAAY,CAgBd"}

package/lib/pedagogy/ui/GlossaryProvider.js

@@ -1,16 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { GlossaryContext } from "./glossaryContext.js";
 /**
  * Hand a glossary to every piece of prose below it.
  *
  * Wrap the whole tool once, high enough that a tutorial step, an exercise
  * description and a revealed hint all sit under it: they are the three places
- * jargon is linked, and they must define a term the same way.
- * @param props - The terms, and the tree that uses them.
+ * jargon is linked, and they must define a term — and draw its examples — the
+ * same way.
+ * @param props - The terms, how their examples are drawn, and the tree that
+ * uses them.
  * @returns The tree, with the glossary in reach.
  */
 export function GlossaryProvider(props) {
-    const { glossary, children } = props;
-    return (_jsx(GlossaryContext.Provider, { value: glossary, children: children }));
+    const { glossary, renderExample, renderCode, children } = props;
+    const value = useMemo(() => ({
+        glossary,
+        renderExample: renderExample,
+        renderCode,
+    }), [glossary, renderExample, renderCode]);
+    return (_jsx(GlossaryContext.Provider, { value: value, children: children }));
 }
 //# sourceMappingURL=GlossaryProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GlossaryProvider.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryProvider.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AASvD;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YACtC,QAAQ,GACgB,CAC5B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"GlossaryProvider.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAuBvD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAsC;IAEtC,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ;QACR,aAAa,EAAE,aAAsD;QACrE,UAAU;KACX,CAAC,EACF,CAAC,QAAQ,EAAE,aAAa,EAAE,UAAU,CAAC,CACtC,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACnC,QAAQ,GACgB,CAC5B,CAAC;AACJ,CAAC"}

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

@@ -1,18 +1,21 @@
 import type { Placement } from '@blueprintjs/core';
-import type { ReactElement } from 'react';
-import type { Glossary, GlossaryEntry } from '../core/glossary.ts';
-export interface GlossaryTextProps {
+import type { ReactElement, ReactNode } from 'react';
+import type { Glossary, GlossaryExample } from '../core/glossary.ts';
+/** Props of {@link GlossaryText}. */
+export interface GlossaryTextProps<TExample = GlossaryExample> {
     /**
      * Authored prose. Every `[[term]]` — or `[[term|displayed text]]` — the
-     * glossary knows becomes a hoverable chip.
+     * glossary knows becomes a hoverable chip, and `` `code` ``, `**strong**`
+     * and `*emphasis*` are drawn as such.
      */
     text: string;
     /**
      * Terms to resolve against, instead of the ones the surrounding provider
-     * holds. A page showing two vocabularies side by side passes its own here.
+     * holds. A page showing two vocabularies side by side passes its own here,
+     * with a `renderExample` when its examples have a shape of their own.
      * @default undefined — the glossary of the surrounding `GlossaryProvider`
      */
-    glossary?: Glossary;
+    glossary?: Glossary<TExample>;
     /**
      * Side the definition opens on.
      * @default 'bottom'
@@ -23,9 +26,20 @@ export interface GlossaryTextProps {
      * @default 'glossary-term'
      */
     className?: string;
+    /**
+     * Draws the illustration of an example inside a definition.
+     * @default the surrounding provider's, and otherwise the code and the input
+     */
+    renderExample?: (example: TExample) => ReactNode;
+    /**
+     * Draws a code span of the prose.
+     * @default the surrounding provider's, and otherwise a plain `<code>`
+     */
+    renderCode?: (code: string) => ReactNode;
 }
 /**
- * Render authored prose, turning its markers into hoverable definitions.
+ * Render authored prose, turning its markers into hoverable definitions and
+ * its inline marks into code, strong and emphasised runs.
  *
  * A term the glossary has no entry for renders as its plain text, never as the
  * brackets: prose is allowed to link a word months before anybody writes its
@@ -33,18 +47,5 @@ export interface GlossaryTextProps {
  * @param props - The prose, and where its terms are defined.
  * @returns The prose, with the known terms made hoverable.
  */
-export declare function GlossaryText(props: GlossaryTextProps): ReactElement;
-export interface GlossaryTooltipBodyProps {
-    /** The term to explain, already resolved from a marker. */
-    entry: GlossaryEntry;
-}
-/**
- * The definition itself: the term, one paragraph, then the worked examples.
- *
- * Exported on its own so a glossary page can list every term with the body it
- * shows on hover, rather than describing the same entry twice.
- * @param props - The entry to show.
- * @returns The body of the tooltip.
- */
-export declare function GlossaryTooltipBody(props: GlossaryTooltipBodyProps): ReactElement;
+export declare function GlossaryText<TExample = GlossaryExample>(props: GlossaryTextProps<TExample>): ReactElement;
 //# sourceMappingURL=GlossaryText.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GlossaryText.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiB,YAAY,EAAa,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKnE,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAmCnE;AAED,MAAM,WAAW,wBAAwB;IACvC,2DAA2D;IAC3D,KAAK,EAAE,aAAa,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAwBd"}
+{"version":3,"file":"GlossaryText.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/GlossaryText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAUrE,qCAAqC;AACrC,MAAM,WAAW,iBAAiB,CAAC,QAAQ,GAAG,eAAe;IAC3D;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,SAAS,CAAC;IACjD;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;CAC1C;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,QAAQ,GAAG,eAAe,EACrD,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GACjC,YAAY,CA2Cd"}

package/lib/pedagogy/ui/GlossaryText.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tooltip } from '@blueprintjs/core';
-import { Fragment } from 'react';
-import { lookupGlossaryTerm, parseGlossaryMarkers } from "../core/glossary.js";
+import { lookupGlossaryTerm } from "../core/glossary.js";
+import { parseInlineMarks } from "../core/inlineMarks.js";
+import { GlossaryDefinition } from "./GlossaryDefinition.js";
 import { useGlossary } from "./glossaryContext.js";
+import { plainCode, renderInlineSegments } from "./inlineSegments.js";
+import { HOVER_OPEN_DELAY } from "./pedagogyStyle.js";
 /**
- * Render authored prose, turning its markers into hoverable definitions.
+ * Render authored prose, turning its markers into hoverable definitions and
+ * its inline marks into code, strong and emphasised runs.
  *
  * A term the glossary has no entry for renders as its plain text, never as the
  * brackets: prose is allowed to link a word months before anybody writes its
@@ -13,67 +17,23 @@ import { useGlossary } from "./glossaryContext.js";
  * @returns The prose, with the known terms made hoverable.
  */
 export function GlossaryText(props) {
-    const { text, glossary, placement = 'bottom', className = 'glossary-term', } = props;
-    const fromProvider = useGlossary();
-    const terms = glossary ?? fromProvider;
-    const pieces = [];
-    for (const segment of parseGlossaryMarkers(text)) {
-        const entry = segment.kind === 'term'
-            ? lookupGlossaryTerm(terms, segment.term)
-            : undefined;
-        if (entry === undefined) {
-            pieces.push(_jsx(Fragment, { children: segment.text }, segment.start));
-            continue;
-        }
-        pieces.push(_jsx(Tooltip, { content: _jsx(GlossaryTooltipBody, { entry: entry }), hoverOpenDelay: HOVER_OPEN_DELAY, placement: placement, children: _jsx("span", { className: className, style: TERM_STYLE, children: segment.text }) }, segment.start));
-    }
-    return _jsx(_Fragment, { children: pieces });
+    const { text, glossary, placement = 'bottom', className = 'glossary-term', renderExample, renderCode, } = props;
+    const context = useGlossary();
+    const terms = glossary ?? context.glossary;
+    const segments = parseInlineMarks(text, { glossaryMarkers: true });
+    return (_jsx(_Fragment, { children: renderInlineSegments(segments, {
+            code: renderCode ?? context.renderCode ?? plainCode,
+            term: (term, shown) => {
+                const entry = lookupGlossaryTerm(terms, term);
+                if (entry === undefined)
+                    return shown;
+                return (_jsx(Tooltip, { content: _jsx(GlossaryDefinition, { entry: entry, renderExample: renderExample, renderCode: renderCode }), hoverOpenDelay: HOVER_OPEN_DELAY, placement: placement, children: _jsx("span", { className: className, style: TERM_STYLE, children: shown }) }));
+            },
+        }) }));
 }
-/**
- * The definition itself: the term, one paragraph, then the worked examples.
- *
- * Exported on its own so a glossary page can list every term with the body it
- * shows on hover, rather than describing the same entry twice.
- * @param props - The entry to show.
- * @returns The body of the tooltip.
- */
-export function GlossaryTooltipBody(props) {
-    const { entry } = props;
-    return (_jsxs("div", { style: BODY_STYLE, children: [_jsx("div", { style: TITLE_STYLE, children: entry.title }), _jsx("div", { style: SUMMARY_STYLE, children: entry.summary }), entry.examples.length > 0 && (_jsx("ul", { style: LIST_STYLE, children: entry.examples.map((example) => (_jsxs("li", { children: [_jsx("code", { style: CODE_STYLE, children: example.code }), example.input !== undefined && (_jsx("span", { style: INPUT_STYLE, children: ` on ${example.input}` })), example.note !== undefined && (_jsx("div", { style: NOTE_STYLE, children: example.note }))] }, `${example.code}::${example.input ?? ''}`))) }))] }));
-}
-/** Long enough that the pointer can cross a chip without opening it. */
-const HOVER_OPEN_DELAY = 150;
 const TERM_STYLE = {
     borderBottom: '1px dotted currentColor',
     color: 'var(--accent, inherit)',
     cursor: 'help',
 };
-const BODY_STYLE = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 6,
-    maxWidth: 340,
-};
-const TITLE_STYLE = { fontWeight: 600, fontSize: 13 };
-const SUMMARY_STYLE = {
-    fontSize: 12,
-    lineHeight: 1.45,
-    color: 'var(--border, #d3d8de)',
-};
-const LIST_STYLE = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 4,
-    margin: 0,
-    paddingLeft: 16,
-    fontSize: 12,
-    lineHeight: 1.4,
-};
-const CODE_STYLE = {
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
-    fontWeight: 600,
-    color: '#8abbff',
-};
-const INPUT_STYLE = { color: 'var(--surface-sunken, #f6f7f9)' };
-const NOTE_STYLE = { fontStyle: 'italic', color: '#abb3bf' };
 //# sourceMappingURL=GlossaryText.js.map