katex 0.16.45 → 0.16.47

package/src/environments/cd.ts

@@ -25,7 +25,13 @@ const newCell = (): ParseNode<"styling"> => {
     // The parseTree from this module must be constructed like the
     // one created by parseArray(), so an empty CD cell must
     // be a ParseNode<"styling">. And CD is always displaystyle.
-    return {type: "styling", body: [], mode: "math", style: "display"};
+    return {
+        type: "styling",
+        body: [],
+        mode: "math",
+        style: "display",
+        resetFont: true,
+    };
 };
 
 const isStartOfArrow = (node: AnyParseNode) => {
@@ -90,7 +96,7 @@ export function parseCD(parser: Parser): ParseNode<"array"> {
     parser.gullet.beginGroup();
     parser.gullet.macros.set("\\cr", "\\\\\\relax");
     parser.gullet.beginGroup();
-    while (true) {  // eslint-disable-line no-constant-condition
+    while (true) {
         // Get the parse nodes for the next row.
         parsedRows.push(parser.parseExpression(false, "\\\\"));
         parser.gullet.endGroup();
@@ -183,6 +189,7 @@ export function parseCD(parser: Parser): ParseNode<"array"> {
                     body: [arrow],
                     mode: "math",
                     style: "display", // CD is always displaystyle.
+                    resetFont: true,
                 };
                 row.push(wrappedArrow);
                 // In CD's syntax, cells are implicit. That is, everything that

package/src/fontMetrics.ts

@@ -1,6 +1,12 @@
 import {supportedCodepoint} from "./unicodeScripts";
 
 import type {Mode} from "./types";
+import type {CharacterMetrics, CharacterMetricsTuple, FontMetrics} from "./types/fonts";
+// This map contains a mapping from font name and character code to character
+// metrics, including height, depth, italic correction, and skew (kern from the
+// character to the corresponding \skewchar)
+// This map is generated via `make metrics`. It should not be changed manually.
+import metricMap from "./fontMetricsData";
 
 /**
  * This file contains metrics regarding fonts and individual symbols. The sigma
@@ -91,12 +97,6 @@ const sigmasAndXis: Record<string, [number, number, number]> = {
     fboxrule: [0.04, 0.04, 0.04], // 0.4 pt / ptPerEm
 };
 
-// This map contains a mapping from font name and character code to character
-// metrics, including height, depth, italic correction, and skew (kern from the
-// character to the corresponding \skewchar)
-// This map is generated via `make metrics`. It should not be changed manually.
-import metricMap from "./fontMetricsData";
-
 // These are very rough approximations.  We default to Times New Roman which
 // should have Latin-1 and Cyrillic characters, but may not depending on the
 // operating system.  The metrics do not account for extra height from the
@@ -180,23 +180,14 @@ const extraCharacterMap: Record<string, string> = {
     'я': 'r',
 };
 
-export type CharacterMetrics = {
-    depth: number;
-    height: number;
-    italic: number;
-    skew: number;
-    width: number;
-};
-
-export type MetricMap = {
-    [key: string]: [number, number, number, number, number];
-};
-
 /**
  * This function adds new font metrics to default metricMap
  * It can also override existing metrics
  */
-export function setFontMetrics(fontName: string, metrics: MetricMap) {
+export function setFontMetrics(
+    fontName: string,
+    metrics: {[key: string]: CharacterMetricsTuple}
+) {
     metricMap[fontName] = metrics;
 }
 
@@ -248,10 +239,6 @@ export function getCharacterMetrics(
 }
 
 type FontSizeIndex = 0 | 1 | 2;
-export type FontMetrics = {
-    cssEmPerMu: number;
-    [key: string]: number;
-};
 const fontMetricsBySizeIndex: Partial<Record<FontSizeIndex, FontMetrics>> = {};
 
 /**

package/src/fontMetricsData.d.ts

@@ -1,3 +1,8 @@
-declare const fontMetricsData: Record<string, Record<number, [number, number, number, number, number]>>;
+import type {CharacterMetricsTuple, FontName} from "./types/fonts";
+
+type FontMetrics = Record<number, CharacterMetricsTuple>;
+
+declare const fontMetricsData: Record<FontName, FontMetrics> &
+    Record<string, FontMetrics>;
 
 export default fontMetricsData;

package/src/functions/arrow.ts

@@ -92,7 +92,8 @@ defineFunction({
                 positionType: "individualShift",
                 children: [
                     {type: "elem", elem: upperGroup, shift: upperShift},
-                    {type: "elem", elem: arrowBody,  shift: arrowShift},
+                    {type: "elem", elem: arrowBody,  shift: arrowShift,
+                        wrapperClasses: ["svg-align"]},
                     {type: "elem", elem: lowerGroup, shift: lowerShift},
                 ],
             }, options);
@@ -101,14 +102,12 @@ defineFunction({
                 positionType: "individualShift",
                 children: [
                     {type: "elem", elem: upperGroup, shift: upperShift},
-                    {type: "elem", elem: arrowBody,  shift: arrowShift},
+                    {type: "elem", elem: arrowBody,  shift: arrowShift,
+                        wrapperClasses: ["svg-align"]},
                 ],
             }, options);
         }
 
-        // TODO(ts): Replace this with passing "svg-align" into makeVList.
-        (vlist as any).children[0].children[0].children[1].classes.push("svg-align");
-
         return makeSpan(["mrel", "x-arrow"], [vlist], options);
     },
     mathmlBuilder(group, options) {

package/src/functions/delimsizing.ts

@@ -12,6 +12,7 @@ import * as mml from "../buildMathML";
 import type Options from "../Options";
 import type {AnyParseNode, ParseNode, SymbolParseNode} from "../parseNode";
 import type {FunctionContext} from "../defineFunction";
+import type {HtmlDomNode} from "../domTree";
 
 // Extra data needed for the delimiter handler down below
 const delimiterSizes: Record<string, {
@@ -56,6 +57,16 @@ const delimiters = new Set([
 
 type IsMiddle = {delim: string, options: Options};
 
+/**
+ * An HtmlDomNode that carries an `isMiddle` property, used by the
+ * \middle command to communicate delimiter info to the \left/\right builder.
+ */
+type MiddleDelimNode = HtmlDomNode & {isMiddle: IsMiddle};
+
+function isMiddleDelimNode(node: HtmlDomNode): node is MiddleDelimNode {
+    return 'isMiddle' in node;
+}
+
 // Delimiter functions
 function checkDelimiter(
     delim: AnyParseNode,
@@ -209,10 +220,8 @@ defineFunction({
 
         // Calculate its height and depth
         for (let i = 0; i < inner.length; i++) {
-            // Property `isMiddle` not defined on `span`. See comment in
-            // "middle"'s htmlBuilder.
-            // TODO(ts)
-            if ((inner[i] as any).isMiddle) {
+            const node = inner[i];
+            if (isMiddleDelimNode(node)) {
                 hadMiddle = true;
             } else {
                 innerHeight = Math.max(inner[i].height, innerHeight);
@@ -244,11 +253,8 @@ defineFunction({
         if (hadMiddle) {
             for (let i = 1; i < inner.length; i++) {
                 const middleDelim = inner[i];
-                // Property `isMiddle` not defined on `span`. See comment in
-                // "middle"'s htmlBuilder.
-                // TODO(ts)
-                const isMiddle: IsMiddle = (middleDelim as any).isMiddle;
-                if (isMiddle) {
+                if (isMiddleDelimNode(middleDelim)) {
+                    const isMiddle = middleDelim.isMiddle;
                     // Apply the options that were active when \middle was called
                     inner[i] = makeLeftRightDelim(
                         isMiddle.delim, innerHeight, innerDepth,
@@ -331,13 +337,13 @@ defineFunction({
                 group.delim, 1, options,
                 group.mode, []);
 
-            const isMiddle: IsMiddle = {delim: group.delim, options};
-            // Property `isMiddle` not defined on `span`. It is only used in
-            // this file above.
-            // TODO: Fix this violation of the `span` type and possibly rename
-            // things since `isMiddle` sounds like a boolean, but is a struct.
-            // TODO(ts)
-            (middleDelim as any).isMiddle = isMiddle;
+            // Patch an ad-hoc property onto the node so the \left/\right
+            // builder can reconstruct appropriately sized middle delimiters.
+            // isMiddle is not part of HtmlDomNode; the read side uses
+            // isMiddleDelimNode() to check before accessing.
+            (middleDelim as unknown as MiddleDelimNode).isMiddle = {
+                delim: group.delim, options,
+            };
         }
         return middleDelim;
     },

package/src/functions/enclose.ts

@@ -22,7 +22,7 @@ const htmlBuilder: HtmlBuilder<"enclose"> = (group, options) => {
     const label = group.label.slice(1);
     let scale = options.sizeMultiplier;
     let img;
-    let imgShift = 0;
+    let imgShift;
 
     // In the LaTeX cancel package, line geometry is slightly different
     // depending on whether the subject is wider than it is tall, or vice versa.
@@ -76,8 +76,8 @@ const htmlBuilder: HtmlBuilder<"enclose"> = (group, options) => {
         }
 
         // Add vertical padding
-        let topPad = 0;
-        let bottomPad = 0;
+        let topPad;
+        let bottomPad;
         let ruleThickness = 0;
         // ref: cancel package: \advance\totalheight2\p@ % "+2"
         if (/box/.test(label)) {
@@ -165,7 +165,7 @@ const htmlBuilder: HtmlBuilder<"enclose"> = (group, options) => {
 };
 
 const mathmlBuilder: MathMLBuilder<"enclose"> = (group, options) => {
-    let fboxsep = 0;
+    let fboxsep;
     const node = new MathNode(
         group.label.includes("colorbox") ? "mpadded" : "menclose",
         [mml.buildGroup(group.body, options)]
@@ -223,7 +223,7 @@ defineFunction({
     props: {
         numArgs: 2,
         allowedInText: true,
-        argTypes: ["color", "text"],
+        argTypes: ["color", "hbox"],
     },
     handler({parser, funcName}, args, optArgs) {
         const color = assertNodeType(args[0], "color-token").color;
@@ -246,7 +246,7 @@ defineFunction({
     props: {
         numArgs: 3,
         allowedInText: true,
-        argTypes: ["color", "color", "text"],
+        argTypes: ["color", "color", "hbox"],
     },
     handler({parser, funcName}, args, optArgs) {
         const borderColor = assertNodeType(args[0], "color-token").color;

package/src/functions/environment.ts

@@ -3,6 +3,8 @@ import ParseError from "../ParseError";
 import {assertNodeType} from "../parseNode";
 import environments from "../environments";
 
+import type {ParseNode} from "../parseNode";
+
 // Environment delimiters. HTML/MathML rendering is defined in the corresponding
 // defineEnvironment definitions.
 defineFunction({
@@ -47,8 +49,11 @@ defineFunction({
                     `Mismatch: \\begin{${envName}} matched by \\end{${end.name}}`,
                     endNameToken);
             }
-            // TODO(ts), "environment" handler returns an environment ParseNode
-            return result as any;
+            // env.handler returns the specific node type (e.g. "array"),
+            // not "environment". This cast is unavoidable: defineFunction
+            // requires the handler to return ParseNode<"environment"> but
+            // \begin delegates to environment handlers with different types.
+            return result as unknown as ParseNode<"environment">;
         }
 
         return {

package/src/functions/font.ts

@@ -9,6 +9,7 @@ import * as mml from "../buildMathML";
 
 import type Options from "../Options";
 import type {ParseNode} from "../parseNode";
+import type {Slice1} from "../types";
 
 const htmlBuilder = (group: ParseNode<"font">, options: Options) => {
     const font = group.font;
@@ -22,12 +23,17 @@ const mathmlBuilder = (group: ParseNode<"font">, options: Options) => {
     return mml.buildGroup(group.body, newOptions);
 };
 
-const fontAliases: Record<string, string> = {
+const fontAliases = {
     "\\Bbb": "\\mathbb",
     "\\bold": "\\mathbf",
     "\\frak": "\\mathfrak",
-    "\\bm": "\\boldsymbol",
-};
+} as const;
+
+type OldFontCommands = "\\rm" | "\\sf" | "\\tt" | "\\bf" | "\\it" | "\\cal";
+type FontCommands =
+    "\\mathrm" | "\\mathit" | "\\mathbf" | "\\mathnormal" | "\\mathsfit" |
+    "\\mathbb" | "\\mathcal" | "\\mathfrak" | "\\mathscr" | "\\mathsf" |
+    "\\mathtt";
 
 defineFunction({
     type: "font",
@@ -41,7 +47,7 @@ defineFunction({
 
         // aliases, except \bm defined below
         "\\Bbb", "\\bold", "\\frak",
-    ],
+    ] satisfies (FontCommands | keyof typeof fontAliases)[],
     props: {
         numArgs: 1,
         allowedInArgument: true,
@@ -50,12 +56,12 @@ defineFunction({
         const body = normalizeArgument(args[0]);
         let func = funcName;
         if (func in fontAliases) {
-            func = fontAliases[func];
+            func = fontAliases[func as keyof typeof fontAliases];
         }
         return {
             type: "font",
             mode: parser.mode,
-            font: func.slice(1),
+            font: func.slice(1) as Slice1<FontCommands>,
             body,
         };
     },
@@ -101,12 +107,11 @@ defineFunction({
     handler: ({parser, funcName, breakOnTokenText}, args) => {
         const {mode} = parser;
         const body = parser.parseExpression(true, breakOnTokenText);
-        const style = `math${funcName.slice(1)}`;
 
         return {
             type: "font",
             mode: mode,
-            font: style,
+            font: `math${funcName.slice(1) as Slice1<OldFontCommands>}`,
             body: {
                 type: "ordgroup",
                 mode: parser.mode,

package/src/functions/hbox.ts

@@ -27,12 +27,12 @@ defineFunction({
         };
     },
     htmlBuilder(group, options) {
-        const elements = html.buildExpression(group.body, options, false);
+        const elements = html.buildExpression(group.body, options.withFont(''), false);
         return makeFragment(elements);
     },
     mathmlBuilder(group, options) {
         return new MathNode(
-          "mrow", mml.buildExpression(group.body, options)
+          "mrow", mml.buildExpression(group.body, options.withFont(''))
         );
     },
 });

package/src/functions/horizBrace.ts

@@ -47,23 +47,21 @@ export const htmlBuilder: HtmlBuilderSupSub<"horizBrace"> = (grp, options) => {
             children: [
                 {type: "elem", elem: body},
                 {type: "kern", size: 0.1},
-                {type: "elem", elem: braceBody},
+                {type: "elem", elem: braceBody,
+                    wrapperClasses: ["svg-align"]},
             ],
         }, options);
-        // TODO(ts): Replace this with passing "svg-align" into makeVList.
-        (vlist as any).children[0].children[0].children[1].classes.push("svg-align");
     } else {
         vlist = makeVList({
             positionType: "bottom",
             positionData: body.depth + 0.1 + braceBody.height,
             children: [
-                {type: "elem", elem: braceBody},
+                {type: "elem", elem: braceBody,
+                    wrapperClasses: ["svg-align"]},
                 {type: "kern", size: 0.1},
                 {type: "elem", elem: body},
             ],
         }, options);
-        // TODO(ts): Replace this with passing "svg-align" into makeVList.
-        (vlist as any).children[0].children[0].children[0].classes.push("svg-align");
     }
 
     if (supSubGroup) {

package/src/functions/math.ts

@@ -21,6 +21,7 @@ defineFunction({
             type: "styling",
             mode: parser.mode,
             style: "text",
+            resetFont: true,
             body,
         };
     },

package/src/functions/op.ts

@@ -51,6 +51,9 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
     }
 
     let base;
+    // Italic correction from the symbol glyph, captured before the symbol
+    // may be wrapped in a vlist (for \oiint/\oiiint).  Stays 0 for non-symbol ops.
+    let symbolItalic;
     if (group.symbol) {
         // If this is a symbol, create the symbol.
         const fontName = large ? "Size2-Regular" : "Size1-Regular";
@@ -66,11 +69,11 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
         base = makeSymbol(
             group.name, fontName, "math", options,
             ["mop", "op-symbol", large ? "large-op" : "small-op"]);
+        symbolItalic = base.italic;
 
         if (stash.length > 0) {
             // We're in \oiint or \oiiint. Overlay the oval.
             // TODO: When font glyphs are available, delete this code.
-            const italic = base.italic;
             const oval = staticSvg(stash + "Size"
                 + (large ? "2" : "1"), options);
             base = makeVList({
@@ -82,8 +85,9 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
             }, options);
             group.name = "\\" + stash;
             base.classes.unshift("mop");
-            // TODO(ts)
-            (base as any).italic = italic;
+            // Carry the italic correction from the original symbol to the
+            // vlist wrapper so supsub can use it for subscript positioning.
+            base.italic = symbolItalic;
         }
     } else if (group.body) {
         // If this is a list, compose that list.
@@ -120,8 +124,9 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
             options.fontMetrics().axisHeight;
 
         // The slant of the symbol is just its italic correction.
-        // TODO(ts)
-        slant = (base as SymbolNode & {italic?: number}).italic || 0;
+        // SymbolNode carries .italic natively; Span (for \oiint/\oiiint)
+        // only has it set when nonzero, so default to 0.
+        slant = base.italic ?? 0;
     }
 
     if (hasLimits) {

package/src/functions/smash.ts

@@ -23,7 +23,7 @@ defineFunction({
             // Optional [tb] argument is engaged.
             // ref: amsmath: \renewcommand{\smash}[1][tb]{%
             //               def\mb@t{\ht}\def\mb@b{\dp}\def\mb@tb{\ht\z@\z@\dp}%
-            let letter = "";
+            let letter;
             for (let i = 0; i < tbArg.body.length; ++i) {
                 const node = tbArg.body[i];
                 letter = assertSymbolNodeType(node).text;

package/src/functions/styling.ts

@@ -6,13 +6,17 @@ import {sizingGroup} from "./sizing";
 import * as mml from "../buildMathML";
 import type {StyleStr} from "../types";
 
-const styleMap = {
+const styleMap: Record<StyleStr, typeof Style.DISPLAY> = {
     "display": Style.DISPLAY,
     "text": Style.TEXT,
     "script": Style.SCRIPT,
     "scriptscript": Style.SCRIPTSCRIPT,
 };
 
+function isStyleStr(s: string): s is StyleStr {
+    return s in styleMap;
+}
+
 defineFunction({
     type: "styling",
     names: [
@@ -30,8 +34,10 @@ defineFunction({
 
         // TODO: Refactor to avoid duplicating styleMap in multiple places (e.g.
         // here and in buildHTML and de-dupe the enumeration of all the styles).
-        // TODO(ts): The names above exactly match the styles.
-        const style = funcName.slice(1, funcName.length - 5) as StyleStr;
+        const style = funcName.slice(1, funcName.length - 5);
+        if (!isStyleStr(style)) {
+            throw new Error(`Unknown style: ${style}`);
+        }
         return {
             type: "styling",
             mode: parser.mode,
@@ -44,13 +50,19 @@ defineFunction({
     htmlBuilder(group, options) {
         // Style changes are handled in the TeXbook on pg. 442, Rule 3.
         const newStyle = styleMap[group.style];
-        const newOptions = options.havingStyle(newStyle).withFont('');
+        let newOptions = options.havingStyle(newStyle);
+        if (group.resetFont) {
+            newOptions = newOptions.withFont('');
+        }
         return sizingGroup(group.body, newOptions, options);
     },
     mathmlBuilder(group, options) {
         // Figure out what style we're changing to.
         const newStyle = styleMap[group.style];
-        const newOptions = options.havingStyle(newStyle);
+        let newOptions = options.havingStyle(newStyle);
+        if (group.resetFont) {
+            newOptions = newOptions.withFont('');
+        }
 
         const inner = mml.buildExpression(group.body, newOptions);
 

package/src/functions/supsub.ts

@@ -1,6 +1,6 @@
 import {defineFunctionBuilders} from "../defineFunction";
 import {makeSpan, makeVList} from "../buildCommon";
-import {SymbolNode} from "../domTree";
+import {Span, SymbolNode, type HtmlDomNode} from "../domTree";
 import {isCharacterBox} from "../utils";
 import {MathNode} from "../mathMLTree";
 import {makeEm} from "../units";
@@ -28,6 +28,7 @@ import type {MathNodeType} from "../mathMLTree";
 const htmlBuilderDelegate = function(
     group: ParseNode<"supsub">,
     options: Options,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): HtmlBuilder<any> | null | undefined {
     const base = group.base;
     if (!base) {
@@ -122,8 +123,10 @@ defineFunctionBuilders({
                 group.base && group.base.type === "op" && group.base.name &&
                 (group.base.name === "\\oiint" || group.base.name === "\\oiiint");
             if (base instanceof SymbolNode || isOiint) {
-                // @ts-ignore
-                marginLeft = makeEm(-base.italic);
+                // SymbolNode has .italic natively; for \oiint/\oiiint the
+                // op builder stores .italic on the wrapping Span.
+                marginLeft = makeEm(
+                    -((base as SymbolNode | Span<HtmlDomNode>).italic ?? 0));
             }
         }
 

package/src/functions/text.ts

@@ -1,4 +1,5 @@
 import defineFunction, {ordargument} from "../defineFunction";
+import type {TextFont} from "../types/fonts";
 import {makeSpan} from "../buildCommon";
 
 import * as html from "../buildHTML";
@@ -7,9 +8,12 @@ import type Options from "../Options";
 import type {ParseNode} from "../parseNode";
 
 // Non-mathy text, possibly in a font
-const textFontFamilies: Record<string, string | undefined> = {
-    "\\text": undefined, "\\textrm": "textrm", "\\textsf": "textsf",
-    "\\texttt": "texttt", "\\textnormal": "textrm",
+const textFontFamilies: Record<string, TextFont | undefined> = {
+    "\\text": undefined,
+    "\\textrm": "textrm",
+    "\\textsf": "textsf",
+    "\\texttt": "texttt",
+    "\\textnormal": "textrm",
 };
 
 const textFontWeights: Record<string, "textbf" | "textmd"> = {

package/src/parseNode.ts

@@ -1,8 +1,9 @@
-import {NON_ATOMS} from "./symbols";
+import {NON_ATOMS} from "./atoms";
+import type {Atom} from "./atoms";
 import type SourceLocation from "./SourceLocation";
 import type {AlignSpec, ColSeparationType} from "./environments/array";
-import type {Atom} from "./symbols";
-import type {Mode, StyleStr} from "./types";
+import type {DelimiterSize, Mode, StyleStr} from "./types";
+import type {MathFont} from "./types/fonts";
 import type {Token} from "./Token";
 import type {Measurement} from "./units";
 export type NodeType = keyof ParseNodeTypes;
@@ -122,6 +123,7 @@ type ParseNodeTypes = {
         mode: Mode;
         loc?: SourceLocation | null | undefined;
         style: StyleStr;
+        resetFont?: boolean;
         body: AnyParseNode[];
     };
     "supsub": {
@@ -231,7 +233,7 @@ type ParseNodeTypes = {
         type: "delimsizing";
         mode: Mode;
         loc?: SourceLocation | null | undefined;
-        size: 1 | 2 | 3 | 4;
+        size: DelimiterSize;
         mclass: "mopen" | "mclose" | "mrel" | "mord";
         delim: string;
     };
@@ -255,7 +257,7 @@ type ParseNodeTypes = {
         type: "font";
         mode: Mode;
         loc?: SourceLocation | null | undefined;
-        font: string;
+        font: Exclude<MathFont, "">;
         body: AnyParseNode;
     };
     "genfrac": {

package/src/stretchy.ts

@@ -103,9 +103,9 @@ export const stretchyMathML = function(label: string): MathNode {
 // That is, inside the font, that arrowhead is 522 units tall, which
 // corresponds to 0.522 em inside the document.
 
-const katexImagesData: {
-    [key: string]: ([string[], number, number] | [[string], number, number, string])
-} = {
+type SvgData = [string[], number, number, string?];
+
+const katexImagesData: {[key: string]: SvgData} = {
                    //   path(s), minWidth, height, align
     overrightarrow: [["rightarrow"], 0.888, 522, "xMaxYMin"],
     overleftarrow: [["leftarrow"], 0.888, 522, "xMinYMin"],
@@ -177,15 +177,11 @@ export const stretchySvg = function(
     } {
         let viewBoxWidth = 400000;  // default
         const label = group.label.slice(1);
-        if (wideAccentLabels.has(label)) {
-            // Each type in the `if` statement corresponds to one of the ParseNode
-            // types below. This narrowing is required to access `grp.base`.
-            // TODO(ts)
-            const grp = group as ParseNode<"accent"> | ParseNode<"accentUnder">;
+        if (wideAccentLabels.has(label) && 'base' in group) {
             // There are four SVG images available for each function.
             // Choose a taller image when there are more characters.
-            const numChars = grp.base.type === "ordgroup" ?
-                grp.base.body.length : 1;
+            const numChars = group.base.type === "ordgroup" ?
+                group.base.body.length : 1;
             let viewBoxHeight;
             let pathName;
             let height;
@@ -232,6 +228,9 @@ export const stretchySvg = function(
             const spans = [];
 
             const data = katexImagesData[label];
+            if (!data) {
+                throw new Error(`No SVG data for "${label}".`);
+            }
             const [paths, minWidth, viewBoxHeight] = data;
             const height = viewBoxHeight / 1000;
 
@@ -239,11 +238,12 @@ export const stretchySvg = function(
             let widthClasses;
             let aligns;
             if (numSvgChildren === 1) {
-                // TODO(ts): All these cases must be of the 4-tuple type.
-                const align1: string =
-                    (data as [[string], number, number, string])[3];
+                if (data.length !== 4) {
+                    throw new Error(
+                        `Expected 4-tuple for single-path SVG data "${label}".`);
+                }
                 widthClasses = ["hide-tail"];
-                aligns = [align1];
+                aligns = [data[3]];
             } else if (numSvgChildren === 2) {
                 widthClasses = ["halfarrow-left", "halfarrow-right"];
                 aligns = ["xMinYMin", "xMaxYMin"];