@altpsyche/maths 0.6.0 → 0.8.0

package/README.md

@@ -24,8 +24,10 @@ svgMarkup(at(figure, 0.5), viewMatrix(figure.extent, 'contain', 640, 360), 640,
 
 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. The number in the
-corner is a value of the typeset rule under it.
+slope is nothing. Then it walks the curve at one speed and flashes at the top, and a brace measures
+how far it climbed with its number counting up to the rise. 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';
@@ -58,7 +60,7 @@ 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, the typeset rule in the corner changing from a slope of nothing to one that depends on x, and a brace measuring the rise in the last frame.">
 
 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
@@ -92,16 +94,79 @@ MathJax is the one runtime dependency and the typesetting call is what loads it.
 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.
 
+## Braces and a number that counts
+
+`bracePath` draws a curly brace from one point to another with its tip standing off the line between
+them, and `brace` is that path with a word beyond the tip. It is one open subpath of six pieces: a
+curl out of each end, a run along at the curl's own height, and two curls meeting at the tip. The tip
+is a corner rather than a smooth turn, which is what a brace has and what says which point of it is
+doing the pointing. The tip stands at the depth asked for whatever the span, and only the curl
+narrows when the span is short, so two close points get a shallower brace rather than one whose
+halves cross.
+
+The label is anchored and never measured, because nothing about a figure's layout may depend on how
+wide some text is.
+
+`countTo` writes the value a count has reached into a text mark. How the value is written is the
+caller's, so a count of a length and a count of a population can round differently and this holds no
+opinion about either.
+
+```ts
+import { brace, countTo, labelFor, pointOf, vec2 } from '@altpsyche/maths';
+
+brace('rise', pointOf(coords, 3, 9), pointOf(coords, 3, 0), labelFor(9, 0.01), {
+  depth: 0.3,
+  padding: 0.28,
+  stroke: pen,
+  fill: ink,
+  size: 0.3,
+});
+
+countTo('rise/word', 0, 9, (value) => labelFor(value, 0.01));
+```
+
+A number driven by the clock is not the same as a reading driven by a track, and the difference
+matters. The slope in the demo is a value of the walk, so it is worked out by the scene from the
+track and cannot drift from the dot. The rise is counted by the clock, which is honest only because
+the dot has stopped by the time it counts: two clocks running at once would be free to disagree.
+
 ## 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`, `countTo`, `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,36 @@ 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 number ticking from one value to another, written into a text mark.
+ *
+ * How the value is written is the caller's, so this holds no opinion about
+ * decimal places: a count of a length and a count of a population want different
+ * rounding and neither is this function's to choose.
+ *
+ * The scene writes the value the count ends at, which is what this writes at the
+ * end of its span, so the two never disagree about what the number settles on.
+ */
+export declare function countTo(target: string, from: number, to: number, write: (value: number) => 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,58 @@ 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 number ticking from one value to another, written into a text mark.
+ *
+ * How the value is written is the caller's, so this holds no opinion about
+ * decimal places: a count of a length and a count of a population want different
+ * rounding and neither is this function's to choose.
+ *
+ * The scene writes the value the count ends at, which is what this writes at the
+ * end of its span, so the two never disagree about what the number settles on.
+ */
+export function countTo(target, from, to, write) {
+    return over(target, (mark, along) => (mark.kind === 'text' ? { ...mark, text: write(lerp(from, to, along)) } : 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/annotate.d.ts

@@ -8,6 +8,7 @@
  * filled at its head, and no mark can be both.
  */
 import { type Vec2 } from '../values/vec2.js';
+import { type Path } from './path.js';
 import { type GroupNode, type TextOptions } from './node.js';
 import type { Fill, Stroke } from './mark.js';
 export interface ArrowOptions {
@@ -32,6 +33,52 @@ export interface ArrowOptions {
 export declare function arrow(name: string, from: Vec2, to: Vec2, options: ArrowOptions): GroupNode;
 /** A filled disc, which is what marks a place a line is pointing at. */
 export declare function dot(name: string, at: Vec2, radius: number, fill: Fill): GroupNode;
+export interface BraceOptions {
+    /** How far the tip stands off the line between the two points, in figure
+     * units. A negative depth puts the brace on the other side of that line. */
+    depth: number;
+    /**
+     * How wide the curl at each end and at the tip is, in figure units. Half the
+     * depth unless named, which is the curl a quarter circle gives, and never more
+     * than a quarter of the span, since two curls wider than that would cross.
+     */
+    curl?: number;
+}
+/**
+ * A curly brace from one point to the other, with its tip standing off the line
+ * between them.
+ *
+ * It is one open subpath of six pieces: a curl out of each end, a run along at
+ * the curl's own height, and two curls meeting at the tip. The tip is a corner
+ * rather than a smooth turn, which is what a brace has and what says which point
+ * of it is being pointed at.
+ *
+ * The tip stands at the depth asked for whatever the span, and only the curl
+ * narrows when the span is short, so a brace between two close points is a
+ * shallower shape rather than one whose halves cross.
+ */
+export declare function bracePath(from: Vec2, to: Vec2, options: BraceOptions): Path;
+export interface BracedOptions extends BraceOptions {
+    stroke: Stroke;
+    fill: Fill;
+    size: number;
+    /** How far beyond the tip the label's anchor sits, in figure units. */
+    padding?: number;
+    align?: TextOptions['align'];
+    baseline?: TextOptions['baseline'];
+    family?: string;
+    weight?: number;
+}
+/**
+ * A brace with a word on it, placed beyond the tip on the far side from the two
+ * points.
+ *
+ * The label is anchored and never measured. Nothing about a figure's layout may
+ * depend on how wide some text is, because the width depends on which fonts the
+ * machine has and a box sized to fit a label would be a different box on two
+ * machines.
+ */
+export declare function brace(name: string, from: Vec2, to: Vec2, content: string, options: BracedOptions): GroupNode;
 export interface CalloutOptions {
     stroke: Stroke;
     fill: Fill;

package/dist/figure/annotate.js

@@ -8,7 +8,7 @@
  * filled at its head, and no mark can be both.
  */
 import { vec2 } from '../values/vec2.js';
-import { circle, line, polygon } from './path.js';
+import { circle, line, polygon, straight } from './path.js';
 import { group, shape, text } from './node.js';
 /**
  * A line with a head at the far end.
@@ -32,6 +32,80 @@ export function arrow(name, from, to, options) {
 export function dot(name, at, radius, fill) {
     return group(name, [shape('disc', circle(at, radius), { fill })]);
 }
+/** The control distance a quarter circle wants, which is what makes each curl of
+ * a brace an arc rather than a corner rounded by eye. */
+const QUARTER = (4 / 3) * (Math.SQRT2 - 1);
+/**
+ * A curly brace from one point to the other, with its tip standing off the line
+ * between them.
+ *
+ * It is one open subpath of six pieces: a curl out of each end, a run along at
+ * the curl's own height, and two curls meeting at the tip. The tip is a corner
+ * rather than a smooth turn, which is what a brace has and what says which point
+ * of it is being pointed at.
+ *
+ * The tip stands at the depth asked for whatever the span, and only the curl
+ * narrows when the span is short, so a brace between two close points is a
+ * shallower shape rather than one whose halves cross.
+ */
+export function bracePath(from, to, options) {
+    const span = vec2.distance(from, to);
+    if (span === 0)
+        return [];
+    const along = vec2.normalize(vec2.sub(to, from));
+    const out = vec2.perpendicular(along);
+    const depth = options.depth;
+    const curl = Math.min(Math.abs(options.curl ?? depth / 2), span / 4);
+    const rise = Math.sign(depth || 1) * curl;
+    const at = (forward, off) => vec2.add(from, vec2.add(vec2.scale(along, forward), vec2.scale(out, off)));
+    const shoulder = at(curl, rise);
+    const beforeTip = at(span / 2 - curl, rise);
+    const tip = at(span / 2, depth);
+    const afterTip = at(span / 2 + curl, rise);
+    const beyond = at(span - curl, rise);
+    const reach = QUARTER * curl;
+    const lift = QUARTER * (depth - rise);
+    const piece = (control1, control2, end) => ({ control1, control2, to: end });
+    return [
+        {
+            start: from,
+            curves: [
+                piece(vec2.add(from, vec2.scale(out, rise * QUARTER)), vec2.sub(shoulder, vec2.scale(along, reach)), shoulder),
+                straight(shoulder, beforeTip),
+                piece(vec2.add(beforeTip, vec2.scale(along, reach)), vec2.sub(tip, vec2.scale(out, lift)), tip),
+                piece(vec2.sub(tip, vec2.scale(out, lift)), vec2.sub(afterTip, vec2.scale(along, reach)), afterTip),
+                straight(afterTip, beyond),
+                piece(vec2.add(beyond, vec2.scale(along, reach)), vec2.add(to, vec2.scale(out, rise * QUARTER)), to),
+            ],
+            closed: false,
+        },
+    ];
+}
+/**
+ * A brace with a word on it, placed beyond the tip on the far side from the two
+ * points.
+ *
+ * The label is anchored and never measured. Nothing about a figure's layout may
+ * depend on how wide some text is, because the width depends on which fonts the
+ * machine has and a box sized to fit a label would be a different box on two
+ * machines.
+ */
+export function brace(name, from, to, content, options) {
+    const path = bracePath(from, to, options);
+    const padding = options.padding ?? Math.abs(options.depth) / 2;
+    const out = vec2.perpendicular(vec2.normalize(vec2.sub(to, from)));
+    const middle = vec2.lerp(from, to, 0.5);
+    const at = vec2.add(middle, vec2.scale(out, options.depth + Math.sign(options.depth || 1) * padding));
+    const style = { fill: options.fill, family: options.family, weight: options.weight };
+    return group(name, [
+        shape('brace', path, { stroke: options.stroke }),
+        text('word', at, content, options.size, {
+            ...style,
+            align: options.align ?? 'middle',
+            baseline: options.baseline ?? 'middle',
+        }),
+    ]);
+}
 /**
  * A word attached to a place: a disc on the place, a line out to where there is
  * room, and the word at the end of it.

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

@@ -19,8 +19,12 @@ export declare function equationMarks(root: EquationElement): Equation;
  * they are always used in. */
 export declare function equationFromTex(tex: string): Promise<Equation>;
 export interface EquationOptions {
-    /** Where the middle of the expression sits, in the figure's own units. */
+    /** 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;

package/dist/figure/equation.js

@@ -172,7 +172,10 @@ export async function equationFromTex(tex) {
 export function equationNode(name, equation, options) {
     const { box } = equation;
     const fit = Math.min(options.width / box.width, options.height / box.height);
-    const centre = vec2(box.x + box.width / 2, box.y + box.height / 2);
-    const transform = mat3.multiply(mat3.translation(options.at), mat3.multiply(mat3.scaling(vec2(fit, fit)), mat3.translation(vec2(-centre.x, -centre.y))));
+    // 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/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, countTo, 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';
@@ -51,9 +51,11 @@ export { pathData, paintSvg, svgElements, svgMarkup } from './paint/svg.js';
 export type { ElementMaker, PaintNode, PaintTarget, SvgElement } from './paint/svg.js';
 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 { arrow, brace, bracePath, callout, dot } from './figure/annotate.js';
+export type { ArrowOptions, BraceOptions, BracedOptions, 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, countTo, 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';
@@ -31,6 +31,7 @@ export { alignPaths, lerpPath } from './figure/morph.js';
 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 { arrow, brace, bracePath, 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.6.0",
+  "version": "0.8.0",
   "description": "The mathematics AltPsyche's figures are drawn from: vectors, matrices, curves, and a value walked over time.",
   "license": "MIT",
   "author": "Siva",