@altpsyche/maths 0.5.0 → 0.7.0

package/README.md

@@ -20,11 +20,13 @@ svgMarkup(at(figure, 0.5), viewMatrix(figure.extent, 'contain', 640, 360), 640,
 
 ## Axes and a plotted function
 
-<img src="docs/tangent.svg" width="720" alt="A parabola on a labelled grid, the region under it shaded to a point on the curve, the tangent at that point drawn, and the slope written as a number.">
+<img src="docs/tangent.svg" width="720" alt="A parabola on a labelled grid, the region under it shaded to a point on the curve, the tangent at that point drawn, and the slope written as a number under the typeset rule it comes from.">
 
 The picture arrives rather than appearing. The grid fades, the axes draw on, their labels come in one
 after another, the curve draws, the dot grows out of the origin, and the dot is pointed at where the
-slope is nothing. Then it walks the curve at one speed and flashes at the top.
+slope is nothing. Then it walks the curve at one speed and flashes at the top. The number in the
+corner is a value of the typeset rule under it, and that rule reads no slope while the dot is held at
+the stationary point and walks into the one that depends on x as the dot leaves.
 
 ```ts
 import { axes, coordsOf, group, interval, numberPlane, plot, scaleOf, shape } from '@altpsyche/maths';
@@ -57,16 +59,77 @@ region is the limit of at the left edge, the right edge or the middle of each on
 lays the tangent along the curve, cut where it leaves the graph. `slopeOf` reads the slope itself,
 which is what the number in the corner is.
 
-<img src="docs/tangent-strip.svg" width="960" alt="Four frames of the same figure side by side, the point walking up the curve and the shaded region growing behind it.">
+<img src="docs/tangent-strip.svg" width="960" alt="Four frames of the same figure side by side, the point walking up the curve, the shaded region growing behind it, and the typeset rule in the corner changing from a slope of nothing to one that depends on x.">
 
 Four times of one figure, side by side: the picture arrived, the beat at the stationary point, half
 way up, and the top. A moving picture in a README needs a GIF and this package has no encoder, so the
 strip shows the motion in a still.
 
+## Equations
+
+`equationFromTex` typesets an expression with MathJax and reads the SVG the typesetter wrote back as
+marks, one per glyph. `equationNode` places those marks in a figure, fitted inside a box and centred
+on a point. It fits the width as well as the height, because an expression six times wider than it is
+tall runs off the sides of a figure the moment the height alone decides its size.
+
+```ts
+import { equationFromTex, equationNode, vec2 } from '@altpsyche/maths';
+
+const rule = await equationFromTex('\\frac{dy}{dx} = 2x');
+
+equationNode('rule', rule, {
+  at: vec2(-4.27, 1.74),
+  width: 1.2,
+  height: 0.6,
+  fill: { colour: '#1b1b1b' },
+});
+```
+
+An equation is paths on the page as well as in a recording, which is what stops one expression having
+two pictures free to disagree. A glyph is an outline rather than a letter, so no font has to be
+installed anywhere and the LaTeX is the label the picture carries for a reader.
+
+MathJax is the one runtime dependency and the typesetting call is what loads it. Importing the door
+reaches none of it, so a consumer who draws figures and typesets nothing pays nothing. What that
+costs is that typesetting answers with a promise.
+
+`matchGlyphs` says which glyph of one expression is which glyph of the other, and `morphEquation`
+walks one into the next: the shared sub-expressions stay put and only the difference moves. Two marks
+match on the part of the leaf name after the first dash, which the typesetter's own naming gives, so
+a glyph is `3-1D465` and a fraction bar is `4-rule`. The pairing is the longest common subsequence of
+the two token sequences, which pairs each occurrence of a repeated glyph once and refuses a pair that
+would cross another pair on the way over.
+
+```ts
+import { equationFromTex, equationNode, group, morphEquation, vec2 } from '@altpsyche/maths';
+
+const box = { at: vec2(-4.86, 1.74), align: 'start', width: 1.2, height: 0.6, fill: { colour: '#1b1b1b' } } as const;
+
+group('rule', [
+  equationNode('at-rest', await equationFromTex('\\frac{dy}{dx} = 0'), box),
+  equationNode('moving', await equationFromTex('\\frac{dy}{dx} = 2x'), box),
+]);
+
+morphEquation('rule/at-rest', 'rule/moving');
+```
+
+Both expressions are in the scene at every time and the animation moves one onto the other, because a
+mark that arrived part way through a span would turn up in a comparison between two frames as
+something that changed. A paired glyph is drawn once rather than cross-faded, so the glyph being left
+carries the walk and its partner stays at nothing until it is being stood on exactly. Hang both
+expressions from the same edge with `align`, or the part they share slides sideways as the difference
+arrives.
+
+Three things stop a typeset expression rather than being drawn, and each names what it found. A TeX
+error carries the typesetter's own message. A character the font has no outline for arrives as text,
+which would draw with whatever font a browser had and draw nothing at all in a recording. An
+undefined macro is not an error at all, because MathJax draws the macro's own name in red, so a typo
+would otherwise ship as a red word inside the picture.
+
 ## The animations
 
-`fadeIn`, `fadeOut`, `fadeTo`, `draw`, `morph`, `moveBy`, `rotate`, `scale`, `growFrom`, `moveAlong`,
-`indicate`, `flash` and `circumscribe`. A `Timeline` plays them in order, plays several `together`, or
+`fadeIn`, `fadeOut`, `fadeTo`, `draw`, `morph`, `morphEquation`, `moveBy`, `rotate`, `scale`,
+`growFrom`, `moveAlong`, `indicate`, `flash` and `circumscribe`. A `Timeline` plays them in order, plays several `together`, or
 `stagger`s a row so its parts arrive one after another.
 
 A turn and a growth happen about a point the marks decide for themselves, which is the middle of the

package/dist/figure/animation.d.ts

@@ -24,6 +24,25 @@ export declare function draw(target: string): Animation;
  * until both hold the same points. A mark with no path is left alone.
  */
 export declare function morph(target: string, into: Path): Animation;
+/**
+ * One typeset expression walked into another, the shared glyphs staying put and
+ * only the difference moving.
+ *
+ * Both expressions are in the scene at every time and this moves one onto the
+ * other. A mark that arrived part way through a span would turn up in a
+ * comparison between two frames as something that changed, which is what a flash
+ * keeps its rays for.
+ *
+ * A paired glyph is drawn once rather than cross-faded. Two copies of one letter
+ * sitting on each other at half opacity through the middle of the span is a
+ * ghost, so the glyph being left carries the walk and its partner stays at
+ * nothing. At the end it is standing exactly on its partner, so nothing has to be
+ * swapped at any moment.
+ *
+ * An unpaired mark has its own opacity multiplied rather than set, so an
+ * expression still fading in when a morph starts does not jump to solid.
+ */
+export declare function morphEquation(from: string, to: string): Animation;
 /** A mark's own opacity walked to a value, for a figure that wants a thing dimmed
  * rather than gone. */
 export declare function fadeTo(target: string, opacity: number): Animation;

package/dist/figure/animation.js

@@ -17,6 +17,7 @@ import { smoothstep } from '../values/ease.js';
 import { circle, line, polygon, transformPath } from './path.js';
 import { trimPath } from './trim.js';
 import { lerpPath } from './morph.js';
+import { matchGlyphs } from './equation-match.js';
 import { pointAlong } from './length.js';
 import { boundsOfMarks, centreOf } from './bounds.js';
 import { interval } from '../values/interval.js';
@@ -79,6 +80,45 @@ export function morph(target, into) {
         return { ...mark, path: lerpPath(mark.path, into, along) };
     });
 }
+/**
+ * One typeset expression walked into another, the shared glyphs staying put and
+ * only the difference moving.
+ *
+ * Both expressions are in the scene at every time and this moves one onto the
+ * other. A mark that arrived part way through a span would turn up in a
+ * comparison between two frames as something that changed, which is what a flash
+ * keeps its rays for.
+ *
+ * A paired glyph is drawn once rather than cross-faded. Two copies of one letter
+ * sitting on each other at half opacity through the middle of the span is a
+ * ghost, so the glyph being left carries the walk and its partner stays at
+ * nothing. At the end it is standing exactly on its partner, so nothing has to be
+ * swapped at any moment.
+ *
+ * An unpaired mark has its own opacity multiplied rather than set, so an
+ * expression still fading in when a morph starts does not jump to solid.
+ */
+export function morphEquation(from, to) {
+    return (marks, along) => {
+        const leaving = marks.filter((mark) => touches(mark.id, from));
+        const arriving = marks.filter((mark) => touches(mark.id, to));
+        if (leaving.length === 0 || arriving.length === 0)
+            return marks;
+        const changed = new Map();
+        for (const [left, right] of matchGlyphs(leaving, arriving).pairs) {
+            changed.set(left.id, { ...left, path: lerpPath(left.path, right.path, along) });
+            changed.set(right.id, { ...right, opacity: 0 });
+        }
+        const faded = (mark, to) => ({ ...mark, opacity: (mark.opacity ?? 1) * to });
+        for (const mark of leaving)
+            if (!changed.has(mark.id))
+                changed.set(mark.id, faded(mark, 1 - along));
+        for (const mark of arriving)
+            if (!changed.has(mark.id))
+                changed.set(mark.id, faded(mark, along));
+        return marks.map((mark) => changed.get(mark.id) ?? mark);
+    };
+}
 /** A mark's own opacity walked to a value, for a figure that wants a thing dimmed
  * rather than gone. */
 export function fadeTo(target, opacity) {

package/dist/figure/equation-match.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Which glyph of one typeset expression is which glyph of the other.
+ *
+ * A glyph is named for its place in the expression and the code point the
+ * typesetter wrote on it, so `3-1D465` is the fourth mark and the letter x, and
+ * a fraction bar is `4-rule`. The token two marks match on is the part of that
+ * name after the first dash, which needs no parsing and makes a rule a token of
+ * its own.
+ *
+ * The pairing is the longest common subsequence of the two token sequences,
+ * which is the longest run of tokens appearing in both lists in the same order.
+ * Matching in order is what stops the x of a numerator pairing with the x of a
+ * right-hand side, and it pairs each occurrence of a repeated glyph once rather
+ * than pairing several to one partner.
+ *
+ * The token is read off the id rather than carried beside the mark because a
+ * consumer stores a typeset equation rather than typesetting it again, and what
+ * it stores is a path and the id it belongs to. A code point kept elsewhere
+ * would have to be stored elsewhere too, and the matching would fail on
+ * everything read back from a cache that did not.
+ */
+import type { Mark, PathMark } from './mark.js';
+export interface GlyphMatch {
+    /** Each glyph of the expression being left beside the one it becomes. */
+    readonly pairs: readonly (readonly [PathMark, PathMark])[];
+    /** Glyphs of the expression being left that nothing in the other answers. */
+    readonly leaving: readonly PathMark[];
+    /** Glyphs of the expression being arrived at that nothing in the first
+     * answers. */
+    readonly arriving: readonly PathMark[];
+}
+/**
+ * What a mark matches on: its leaf name after the first dash.
+ *
+ * A mark whose leaf carries no dash is not a glyph a typesetter wrote, and it
+ * pairs with nothing rather than pairing with every other mark that is also
+ * unnamed.
+ */
+export declare function glyphToken(id: string): string | undefined;
+/** Two typeset expressions paired glyph by glyph, with what neither answers kept
+ * apart. Marks that are not paths are left out, since a glyph is an outline. */
+export declare function matchGlyphs(from: readonly Mark[], to: readonly Mark[]): GlyphMatch;

package/dist/figure/equation-match.js

@@ -0,0 +1,57 @@
+/**
+ * What a mark matches on: its leaf name after the first dash.
+ *
+ * A mark whose leaf carries no dash is not a glyph a typesetter wrote, and it
+ * pairs with nothing rather than pairing with every other mark that is also
+ * unnamed.
+ */
+export function glyphToken(id) {
+    const leaf = id.slice(id.lastIndexOf('/') + 1);
+    const dash = leaf.indexOf('-');
+    return dash < 0 ? undefined : leaf.slice(dash + 1);
+}
+/** The table of longest common subsequence lengths, read back from the end to
+ * give the pairs themselves. */
+function pairedPlaces(from, to) {
+    const rows = from.length;
+    const columns = to.length;
+    const longest = Array.from({ length: rows + 1 }, () => new Array(columns + 1).fill(0));
+    for (let row = rows - 1; row >= 0; row--) {
+        for (let column = columns - 1; column >= 0; column--) {
+            const same = from[row] !== undefined && from[row] === to[column];
+            longest[row][column] = same
+                ? longest[row + 1][column + 1] + 1
+                : Math.max(longest[row + 1][column], longest[row][column + 1]);
+        }
+    }
+    const places = [];
+    let row = 0;
+    let column = 0;
+    while (row < rows && column < columns) {
+        if (from[row] !== undefined && from[row] === to[column]) {
+            places.push([row, column]);
+            row++;
+            column++;
+        }
+        else if (longest[row + 1][column] >= longest[row][column + 1])
+            row++;
+        else
+            column++;
+    }
+    return places;
+}
+const glyphsOf = (marks) => marks.filter((mark) => mark.kind === 'path');
+/** Two typeset expressions paired glyph by glyph, with what neither answers kept
+ * apart. Marks that are not paths are left out, since a glyph is an outline. */
+export function matchGlyphs(from, to) {
+    const left = glyphsOf(from);
+    const right = glyphsOf(to);
+    const places = pairedPlaces(left.map((mark) => glyphToken(mark.id)), right.map((mark) => glyphToken(mark.id)));
+    const takenLeft = new Set(places.map(([row]) => row));
+    const takenRight = new Set(places.map(([, column]) => column));
+    return {
+        pairs: places.map(([row, column]) => [left[row], right[column]]),
+        leaving: left.filter((_, at) => !takenLeft.has(at)),
+        arriving: right.filter((_, at) => !takenRight.has(at)),
+    };
+}

package/dist/figure/equation.d.ts

@@ -0,0 +1,44 @@
+import { type Vec2 } from '../values/vec2.js';
+import { type GroupNode } from './node.js';
+import { type EquationElement } from './typeset.js';
+import type { Fill, PathMark } from './mark.js';
+/** Where the typesetter put the expression, in the marks' own units and with y
+ * counted upward, so `y` is the bottom edge and `y + height` the top. */
+export interface EquationBox {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface Equation {
+    readonly marks: readonly PathMark[];
+    readonly box: EquationBox;
+}
+export declare function equationMarks(root: EquationElement): Equation;
+/** One expression typeset and read, which is the two halves above in the order
+ * they are always used in. */
+export declare function equationFromTex(tex: string): Promise<Equation>;
+export interface EquationOptions {
+    /** The point the expression is placed against, in the figure's own units. */
+    readonly at: Vec2;
+    /** Which edge of the expression sits on that point across, the middle of it
+     * unless named. Two expressions placed at one point by their start keep the
+     * part they share in the same place. */
+    readonly align?: 'start' | 'middle' | 'end';
+    /** The box the expression is fitted inside, in the figure's own units. */
+    readonly width: number;
+    readonly height: number;
+    readonly fill: Fill;
+}
+/**
+ * A typeset expression placed in a figure: one shape per glyph, fitted inside a
+ * box and centred on a point.
+ *
+ * It fits inside both measurements rather than being sized by the height alone.
+ * An expression two units wide for every one it is tall runs off the sides of a
+ * narrow figure the moment its height is what decides its size.
+ *
+ * The group carries the transform rather than the geometry, so the glyphs stay
+ * the typesetter's own numbers and moving the expression is one matrix.
+ */
+export declare function equationNode(name: string, equation: Equation, options: EquationOptions): GroupNode;

package/dist/figure/equation.js

@@ -0,0 +1,181 @@
+/**
+ * A typeset expression read out of the SVG a typesetter wrote.
+ *
+ * MathJax describes an expression as nested groups with a transform on each,
+ * every glyph as an outline and a fraction bar or a root's rule as a rectangle.
+ * A figure holds a flat list of marks with every transform already applied, so
+ * this walks the tree, carries the transform stack down it, and hands back the
+ * marks with the box the typesetter measured the expression into.
+ *
+ * The stack starts turned over, because SVG counts y downward and a figure
+ * counts it upward. Doing it here means the whole expression arrives in the
+ * figure's own space and nothing downstream has to know which way up the
+ * typesetter works.
+ *
+ * A mark comes back with no fill and its id is a leaf name, because both arrive
+ * when the equation is placed in a figure: a figure's node tree builds an id out
+ * of the names on the way down it, so a full path written here would be a second
+ * naming of the same mark. The colour arrives there too, since a figure is handed
+ * its palette as it is drawn rather than reading one.
+ *
+ * An id carries the glyph's own code point, which is what a match between two
+ * expressions has to be made on.
+ *
+ * Three things stop the walk instead of being drawn, and each names what it
+ * found. They are written up on `refuse` below.
+ */
+import { mat3 } from '../values/mat3.js';
+import { vec2 } from '../values/vec2.js';
+import { rect, transformPath } from './path.js';
+import { group, shape } from './node.js';
+import { pathFromData } from './path-data.js';
+import { typesetElement } from './typeset.js';
+/** Both transforms a typeset expression uses. Anything else refuses rather than
+ * being ignored, which would leave a glyph sitting at the origin. */
+function transformOf(text) {
+    let matrix = mat3.IDENTITY;
+    for (const match of text.matchAll(/([A-Za-z]+)\s*\(([^)]*)\)/g)) {
+        const name = match[1] ?? '';
+        const numbers = (match[2] ?? '')
+            .split(/[,\s]+/)
+            .filter(Boolean)
+            .map(Number);
+        if (numbers.length === 0 || numbers.some((value) => !Number.isFinite(value)))
+            throw new Error(`the transform "${text}" carries something that is not a number`);
+        const [first = 0, second] = numbers;
+        if (name === 'translate')
+            matrix = mat3.multiply(matrix, mat3.translation(vec2(first, second ?? 0)));
+        else if (name === 'scale')
+            matrix = mat3.multiply(matrix, mat3.scaling(vec2(first, second ?? first)));
+        else
+            throw new Error(`the transform "${text}" asks for "${name}", which this does not apply`);
+    }
+    return matrix;
+}
+function attribute(element, name) {
+    const value = element.attributes[name];
+    if (value === undefined)
+        throw new Error(`a "${element.tag}" element in the typeset expression has no ${name}`);
+    return value;
+}
+function numberAttribute(element, name, fallback) {
+    const written = element.attributes[name];
+    if (written === undefined && fallback !== undefined)
+        return fallback;
+    const value = Number(attribute(element, name));
+    if (!Number.isFinite(value))
+        throw new Error(`a "${element.tag}" element has ${name}="${written}", which is not a number`);
+    return value;
+}
+function svgIn(element) {
+    if (element.tag === 'svg')
+        return element;
+    for (const child of element.children) {
+        const found = svgIn(child);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
+function svgOf(element) {
+    const found = svgIn(element);
+    if (!found)
+        throw new Error('the typesetter returned no svg element');
+    return found;
+}
+/** The colour the `noundefined` extension draws a macro the typesetter does not
+ * know, which is the only sign that it did not typeset one. */
+const UNKNOWN = 'red';
+/** The characters under an element, read off the code point each glyph carries.
+ * It is what names a run the typesetter drew instead of typesetting. */
+function charactersOf(element) {
+    const code = element.tag === 'path' ? Number.parseInt(element.attributes['data-c'] ?? '', 16) : NaN;
+    const own = Number.isInteger(code) ? String.fromCodePoint(code) : '';
+    return own + element.children.map(charactersOf).join('');
+}
+/**
+ * The three things that stop the walk rather than being drawn, each naming what
+ * it found.
+ *
+ * A TeX error carries its message on the group MathJax puts the error box in. A
+ * character the font has no outline for arrives as a text element, which draws
+ * in a browser with whatever font it found and draws nothing at all in a
+ * recording. And an undefined macro is not an error under `AllPackages`, since
+ * the `noundefined` extension in it draws the macro's own name in red, so a typo
+ * would otherwise ship as a red word inside the picture.
+ */
+function refuse(element) {
+    const error = element.attributes['data-mjx-error'];
+    if (error !== undefined)
+        throw new Error(`the typesetter refused the expression: ${error}`);
+    if (element.attributes.fill === UNKNOWN)
+        throw new Error(`the typesetter does not know "${charactersOf(element)}" and drew it in ${UNKNOWN}`);
+    if (element.tag === 'text')
+        throw new Error(`the typesetter has no outline for "${element.text ?? ''}" and wrote it as text`);
+}
+/** The four numbers of the `viewBox`, turned over the way the marks are. */
+function boxOf(svg) {
+    const numbers = attribute(svg, 'viewBox')
+        .split(/[,\s]+/)
+        .filter(Boolean)
+        .map(Number);
+    if (numbers.length !== 4 || numbers.some((value) => !Number.isFinite(value)))
+        throw new Error(`the svg has viewBox="${svg.attributes.viewBox}", which is not four numbers`);
+    const [x = 0, y = 0, width = 0, height = 0] = numbers;
+    return { x, y: -(y + height), width, height };
+}
+export function equationMarks(root) {
+    const svg = svgOf(root);
+    const marks = [];
+    const mark = (path, stack, suffix) => {
+        marks.push({ kind: 'path', id: `${marks.length}-${suffix}`, path: transformPath(path, stack) });
+    };
+    const walk = (element, stack) => {
+        for (const child of element.children) {
+            refuse(child);
+            const written = child.attributes.transform;
+            const own = written ? mat3.multiply(stack, transformOf(written)) : stack;
+            switch (child.tag) {
+                case 'g':
+                    walk(child, own);
+                    break;
+                case 'path':
+                    mark(pathFromData(attribute(child, 'd')), own, child.attributes['data-c'] ?? 'glyph');
+                    break;
+                case 'rect':
+                    mark(rect(vec2(numberAttribute(child, 'x', 0), numberAttribute(child, 'y', 0)), numberAttribute(child, 'width'), numberAttribute(child, 'height')), own, 'rule');
+                    break;
+                default:
+                    throw new Error(`the typeset expression holds a "${child.tag}" element, which this does not draw`);
+            }
+        }
+    };
+    walk(svg, mat3.scaling(vec2(1, -1)));
+    return { marks, box: boxOf(svg) };
+}
+/** One expression typeset and read, which is the two halves above in the order
+ * they are always used in. */
+export async function equationFromTex(tex) {
+    return equationMarks(await typesetElement(tex));
+}
+/**
+ * A typeset expression placed in a figure: one shape per glyph, fitted inside a
+ * box and centred on a point.
+ *
+ * It fits inside both measurements rather than being sized by the height alone.
+ * An expression two units wide for every one it is tall runs off the sides of a
+ * narrow figure the moment its height is what decides its size.
+ *
+ * The group carries the transform rather than the geometry, so the glyphs stay
+ * the typesetter's own numbers and moving the expression is one matrix.
+ */
+export function equationNode(name, equation, options) {
+    const { box } = equation;
+    const fit = Math.min(options.width / box.width, options.height / box.height);
+    // The point the expression is hung from, in the typesetter's units, so that
+    // scaling about it lands the asked-for edge on the asked-for place.
+    const across = options.align === 'start' ? box.x : options.align === 'end' ? box.x + box.width : box.x + box.width / 2;
+    const hung = vec2(across, box.y + box.height / 2);
+    const transform = mat3.multiply(mat3.translation(options.at), mat3.multiply(mat3.scaling(vec2(fit, fit)), mat3.translation(vec2(-hung.x, -hung.y))));
+    return group(name, equation.marks.map((mark) => shape(mark.id, mark.path, { fill: options.fill })), { transform });
+}

package/dist/figure/typeset.d.ts

@@ -0,0 +1,18 @@
+/**
+ * One element of the tree a typesetter wrote, with its attributes as written.
+ *
+ * The walk that turns this into marks takes this shape rather than the
+ * typesetter's own, which is what lets the walk be tested by building a tree by
+ * hand with no typesetter behind it.
+ */
+export interface EquationElement {
+    readonly tag: string;
+    readonly attributes: Readonly<Record<string, string>>;
+    readonly children: readonly EquationElement[];
+    /** A text element's own characters, which is what names it when it is
+     * refused. Nothing else here carries any. */
+    readonly text?: string;
+}
+/** One expression typeset, as the tree the typesetter wrote it. `display: true`
+ * is the centred form rather than the one that sits inside a line of prose. */
+export declare function typesetElement(tex: string): Promise<EquationElement>;

package/dist/figure/typeset.js

@@ -0,0 +1,43 @@
+// Held as the promise rather than the value: two calls arriving together share
+// one load, and registering the handler twice leaves MathJax with two of them.
+let shared;
+async function load() {
+    const [{ mathjax }, { TeX }, { SVG }, { liteAdaptor }, { RegisterHTMLHandler }, { AllPackages }] = await Promise.all([
+        import('mathjax-full/js/mathjax.js'),
+        import('mathjax-full/js/input/tex.js'),
+        import('mathjax-full/js/output/svg.js'),
+        import('mathjax-full/js/adaptors/liteAdaptor.js'),
+        import('mathjax-full/js/handlers/html.js'),
+        import('mathjax-full/js/input/tex/AllPackages.js'),
+    ]);
+    const adaptor = liteAdaptor();
+    RegisterHTMLHandler(adaptor);
+    const document = mathjax.document('', {
+        InputJax: new TeX({ packages: AllPackages }),
+        OutputJax: new SVG({ fontCache: 'none' }),
+    });
+    return { adaptor, document };
+}
+/** MathJax's own tree read into the shape above, with a text node's characters
+ * gathered onto the element that holds them. */
+function elementOf(adaptor, node) {
+    const children = [];
+    let text = '';
+    for (const child of adaptor.childNodes(node)) {
+        if (adaptor.kind(child) === '#text')
+            text += adaptor.value(child);
+        else
+            children.push(elementOf(adaptor, child));
+    }
+    const attributes = {};
+    for (const { name, value } of adaptor.allAttributes(node))
+        attributes[name] = value;
+    return { tag: adaptor.kind(node), attributes, children, text };
+}
+/** One expression typeset, as the tree the typesetter wrote it. `display: true`
+ * is the centred form rather than the one that sits inside a line of prose. */
+export async function typesetElement(tex) {
+    shared ??= load();
+    const { adaptor, document } = await shared;
+    return elementOf(adaptor, document.convert(tex, { display: true }));
+}

package/dist/index.d.ts

@@ -38,7 +38,7 @@ export { labelFor, tickStep, ticksOn } from './figure/ticks.js';
 export type { Tick } from './figure/ticks.js';
 export { flatten, group, shape, text } from './figure/node.js';
 export type { GroupNode, Node, ShapeNode, Style, TextNode, TextOptions } from './figure/node.js';
-export { circumscribe, fadeIn, fadeOut, fadeTo, draw, flash, growFrom, indicate, morph, moveAlong, moveBy, rotate, scale } from './figure/animation.js';
+export { circumscribe, fadeIn, fadeOut, fadeTo, draw, flash, growFrom, indicate, morph, morphEquation, moveAlong, moveBy, rotate, scale } from './figure/animation.js';
 export type { AboutOptions, Animation, CircumscribeOptions, FlashOptions, IndicateOptions, ScaleOptions } from './figure/animation.js';
 export { Timeline } from './figure/timeline.js';
 export type { PlayOptions, Span, StaggerOptions } from './figure/timeline.js';
@@ -53,3 +53,9 @@ export { paintCanvas } from './paint/canvas.js';
 export type { CanvasLike } from './paint/canvas.js';
 export { arrow, callout, dot } from './figure/annotate.js';
 export type { ArrowOptions, CalloutOptions } from './figure/annotate.js';
+export { typesetElement } from './figure/typeset.js';
+export type { EquationElement } from './figure/typeset.js';
+export { equationFromTex, equationMarks, equationNode } from './figure/equation.js';
+export type { Equation, EquationBox, EquationOptions } from './figure/equation.js';
+export { glyphToken, matchGlyphs } from './figure/equation-match.js';
+export type { GlyphMatch } from './figure/equation-match.js';

package/dist/index.js

@@ -23,7 +23,7 @@ export { axes, numberLine, numberPlane } from './figure/axis.js';
 export { coordsOf, pointOf, scaleOf, scaled, unscaled } from './figure/scale.js';
 export { labelFor, tickStep, ticksOn } from './figure/ticks.js';
 export { flatten, group, shape, text } from './figure/node.js';
-export { circumscribe, fadeIn, fadeOut, fadeTo, draw, flash, growFrom, indicate, morph, moveAlong, moveBy, rotate, scale } from './figure/animation.js';
+export { circumscribe, fadeIn, fadeOut, fadeTo, draw, flash, growFrom, indicate, morph, morphEquation, moveAlong, moveBy, rotate, scale } from './figure/animation.js';
 export { Timeline } from './figure/timeline.js';
 export { lengthOf, pointAlong } from './figure/length.js';
 export { trimPath } from './figure/trim.js';
@@ -32,3 +32,6 @@ export { at, durationOf, loops, sameMarks } from './figure/figure.js';
 export { pathData, paintSvg, svgElements, svgMarkup } from './paint/svg.js';
 export { paintCanvas } from './paint/canvas.js';
 export { arrow, callout, dot } from './figure/annotate.js';
+export { typesetElement } from './figure/typeset.js';
+export { equationFromTex, equationMarks, equationNode } from './figure/equation.js';
+export { glyphToken, matchGlyphs } from './figure/equation-match.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altpsyche/maths",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "The mathematics AltPsyche's figures are drawn from: vectors, matrices, curves, and a value walked over time.",
   "license": "MIT",
   "author": "Siva",
@@ -47,5 +47,8 @@
   },
   "engines": {
     "node": ">=20"
+  },
+  "dependencies": {
+    "mathjax-full": "^3.2.1"
   }
 }