@pie-lib/math-input-mathlive 1.1.4 → 1.1.5-beta.10

package/src/latex-bridge.js

@@ -55,12 +55,49 @@ export const DEFAULT_FIELD_ID = 'r1';
  *
  * `\placeholder{}` is not usable here: in static markup it renders as a
  * non-breaking space, because its editable box only exists inside a live
- * mathfield. So an actual glyph is required.
+ * mathfield. So something with real width is required.
+ *
+ * It must be a `\rule`, not a unicode glyph. A glyph's width comes from font
+ * metrics, and U+25AB is not in the KaTeX fonts - the browser substitutes a
+ * wider fallback while MathLive still sizes surrounding accents from its own
+ * metrics. That left stretchy accents (`\overarc`, `\overleftrightarrow`)
+ * visibly narrower than the box they were meant to span. A rule carries an
+ * explicit em width, so accents size correctly - and a filled box is closer to
+ * MathQuill's `.mq-empty` anyway.
  *
  * Live mathfields need none of this - MathLive manages empty slots itself.
  */
-const EMPTY_SLOT = '\\htmlData{pie-empty=1}{\\unicode{"25AB}}';
+const EMPTY_SLOT = '\\htmlData{pie-empty=1}{\\rule{0.55em}{0.55em}}';
 const EMPTY_GROUP_REGEX = /\{\s*\}/g;
+// The segment key (`\overline{}`). The keypad centres every label in its cell, and
+// a thin bar is a much shorter label than the ray and line keys' stretchy arrows,
+// so by default both its bar and its box sit off from theirs: the bar is lower
+// than the arrows' shafts, and the box higher than theirs. Two zero-width struts
+// fix that, found by rendering the three keys at 14-28px and measuring:
+//  - inside the bar, above the box: pushes the bar up to the height of the
+//    arrows' shafts (the bar-to-box distance then matches theirs);
+//  - before the bar, from the baseline: raises the label's top, which moves the
+//    whole label down so the box lands where theirs does.
+const EMPTY_OVERLINE_REGEX = /\\overline\{\s*\}/g;
+const EMPTY_OVERLINE_BAR_STRUT = '\\rule{0em}{0.87em}';
+const EMPTY_OVERLINE_LABEL_STRUT = '\\rule{0em}{1.3em}';
+// Empty delimiter pairs: `\abs{}` is converted to `\left|\right|`, and the
+// parenthesis / bracket keys are `\left(\right)` / `\left[\right]`. None has a
+// `{}` group for the rule above to catch, so they would render as bare fences.
+const EMPTY_FENCE_REGEX = /\\left([([|])\s*\\right([)\]|])/g;
+// The same muted fill as the other slots (`pie-empty`), but a tall rectangle
+// rather than a square. It also sets the fences' height: `\left...\right` stretch
+// to their content, so a taller slot gives taller parentheses.
+//
+// A `\rule` stands on the baseline, but the fences are centred on the math axis
+// (0.25em above it), so an un-lifted box sat high between them. `[-0.25em]`
+// lowers it by (axis - height / 2) = 0.25 - 1 / 2, centring it on the axis.
+//
+// Lowering it alone also shrinks the fences, which size themselves to their
+// content (MathLive switches to short bars). The zero-width `\rule{0em}{1em}`
+// strut keeps the content as tall as before, so the bars keep their height and
+// only the box moves.
+const EMPTY_FENCE_SLOT = '\\rule{0em}{1em}\\htmlData{pie-empty=1}{\\rule[-0.25em]{0.55em}{1em}}';
 
 /**
  * Make empty argument slots visible, for static rendering.
@@ -71,7 +108,11 @@ const EMPTY_GROUP_REGEX = /\{\s*\}/g;
  * @param {string} latex
  * @returns {string}
  */
-export const withVisibleEmptySlots = (latex) => (latex || '').replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`);
+export const withVisibleEmptySlots = (latex) =>
+  (latex || '')
+    .replace(EMPTY_OVERLINE_REGEX, `${EMPTY_OVERLINE_LABEL_STRUT}\\overline{${EMPTY_OVERLINE_BAR_STRUT}${EMPTY_SLOT}}`)
+    .replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`)
+    .replace(EMPTY_FENCE_REGEX, (_m, open, close) => `\\left${open}${EMPTY_FENCE_SLOT}\\right${close}`);
 
 /**
  * Pie commands that take an argument, and their native MathLive equivalents.
@@ -106,6 +147,40 @@ export const toNativeCommands = (latex) => {
   out = replaceAbs(out);
   out = out.replace(/\\longdiv\{/g, '\\enclose{longdiv}{');
   out = out.replace(/\\overarc\{/g, '\\overparen{');
+  out = escapeBareComments(out);
+
+  return out;
+};
+
+/**
+ * Escape an unescaped `%`.
+ *
+ * In real LaTeX `%` starts a comment, so MathLive discards it *and everything
+ * after it*: `50%` renders as `50`, and `x%y` as just `x`. MathQuill had no
+ * such notion - it treated `%` as a symbol - so latex from anywhere outside the
+ * keypad may still carry a bare one.
+ *
+ * Only a `%` preceded by an even number of backslashes is bare: `\%` is already
+ * escaped, while the `%` in `\\%` (a line break, then a comment) is not.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+const escapeBareComments = (latex) => {
+  if (latex.indexOf('%') === -1) {
+    return latex;
+  }
+
+  let out = '';
+  // Consecutive backslashes immediately before the current character.
+  let backslashes = 0;
+
+  for (let i = 0; i < latex.length; i++) {
+    const ch = latex[i];
+
+    out += ch === '%' && backslashes % 2 === 0 ? '\\%' : ch;
+    backslashes = ch === '\\' ? backslashes + 1 : 0;
+  }
 
   return out;
 };
@@ -194,6 +269,138 @@ export const toMathLive = (latex) => {
   return out;
 };
 
+/**
+ * Keypad command names that MathQuill treated as ALIASES of a different command.
+ *
+ * MathQuill registered `\\divide` as another name for `\\div` (and
+ * `\\perpendicular` for `\\perp`), so pressing the key stored the real command.
+ * MathLive only knows these names through `PIE_MACROS`, and serialises a macro
+ * under its own name - so `\\divide` reached storage verbatim, where MathJax
+ * (@pie-lib/math-rendering) has no such command and renders it as red text.
+ *
+ * Every other keypad command already matches what MathQuill stored (`\\degree`,
+ * `\\nsim`, `\\ncong`, `\\nparallel`, `\\square`, `\\napprox`,
+ * `\\parallelogram`), and MathJax understands those.
+ */
+const MATHQUILL_ALIASES = {
+  '\\divide': '\\div',
+  '\\perpendicular': '\\perp',
+};
+
+// Whole command names only: `\\divideontimes` is a real AMS symbol.
+const MATHQUILL_ALIAS_REGEX = /\\(divide|perpendicular)(?![a-zA-Z])/g;
+
+/**
+ * Primes. MathLive turns a prime that follows a base into a superscript atom and
+ * serialises it as `^{\\prime}`, or `^{\\doubleprime}` for the keypad's double
+ * prime key (`5''` comes back out as `5^{\\doubleprime}`). MathJax has no
+ * `\\doubleprime`, and two adjacent `^{\\prime}` groups - what typing `'` twice
+ * produces - are a "double exponent" error. MathQuill stored plain apostrophes,
+ * which both MathJax and MathLive read as primes, so store those.
+ *
+ * Only a superscript made of primes alone is rewritten: `x^{\\prime 2}` keeps
+ * its group, since it holds more than primes.
+ */
+const PRIME_SUPERSCRIPT_REGEX = /\^\{((?:\s*\\(?:prime|doubleprime)(?![a-zA-Z]))+)\s*\}/g;
+const BARE_DOUBLEPRIME_REGEX = /\\doubleprime(?![a-zA-Z])/g;
+
+const primesToApostrophes = (primes) =>
+  // eslint-disable-next-line quotes
+  "'".repeat(
+    (primes.match(/\\prime(?![a-zA-Z])/g) || []).length + 2 * (primes.match(BARE_DOUBLEPRIME_REGEX) || []).length,
+  );
+
+const BARE_PRIME_COMMAND_REGEX = /^\\(doubleprime|prime)(?![a-zA-Z])/;
+
+/**
+ * Primes that are *not* in a superscript.
+ *
+ * MathLive emits bare `\prime` / `\doubleprime` for a `′` or `″` typed or pasted
+ * as a character (`5′6″` serialises as `5\prime6\doubleprime`). A bare `\prime`
+ * is a full-size glyph in MathJax, while `''` is a superscript, so storing
+ * `5\prime6''` drew the single prime visibly larger than each stroke of the
+ * double prime. Both become apostrophes, the superscript primes MathQuill
+ * stored, so they always match.
+ *
+ * Inside a script (`x^{\prime 2}`, `x^\prime`) a prime is already a
+ * superscript, and an apostrophe there would mean something else, so
+ * `\prime` is kept and `\doubleprime` (unknown to MathJax) becomes
+ * `\prime\prime`.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+const barePrimesToApostrophes = (latex) => {
+  if (latex.indexOf('prime') === -1) {
+    return latex;
+  }
+
+  // One entry per open brace: is that group a super/subscript?
+  const groups = [];
+  let out = '';
+  let i = 0;
+
+  while (i < latex.length) {
+    const ch = latex[i];
+
+    if (ch === '\\') {
+      const match = latex.slice(i).match(BARE_PRIME_COMMAND_REGEX);
+
+      if (match) {
+        const isDouble = match[1] === 'doubleprime';
+        // `x^\prime`: the command is itself the script.
+        const isScriptArgument = /[\^_]\s*$/.test(out);
+        const inScript = isScriptArgument || groups.indexOf(true) !== -1;
+
+        if (inScript) {
+          out += isDouble ? '\\prime\\prime' : '\\prime';
+        } else {
+          // eslint-disable-next-line quotes
+          out += isDouble ? "''" : "'";
+        }
+
+        i += match[0].length;
+        continue;
+      }
+
+      // Copy any other command, or an escaped character such as `\{`, whole.
+      const command = latex.slice(i).match(/^\\(?:[a-zA-Z]+|.)/);
+      const text = command ? command[0] : ch;
+
+      out += text;
+      i += text.length;
+      continue;
+    }
+
+    if (ch === '{') {
+      groups.push(/[\^_]\s*$/.test(out));
+    } else if (ch === '}') {
+      groups.pop();
+    }
+
+    out += ch;
+    i += 1;
+  }
+
+  return out;
+};
+
+/**
+ * Rewrite what MathLive serialises into the form MathQuill stored: alias
+ * command names, and primes.
+ *
+ * @param {string} latex
+ * @returns {string}
+ */
+export const toCanonicalCommands = (latex) =>
+  typeof latex === 'string'
+    ? barePrimesToApostrophes(
+        latex
+          .replace(MATHQUILL_ALIAS_REGEX, (m) => MATHQUILL_ALIASES[m])
+          .replace(PRIME_SUPERSCRIPT_REGEX, (_m, primes) => primesToApostrophes(primes)),
+      )
+    : latex;
+
 /**
  * Convert latex out of MathLive back into the stored form, so items authored
  * with the MathLive editor remain readable by @pie-lib/math-rendering and by
@@ -231,7 +438,9 @@ export const fromMathLive = (latex) => {
   out = out.replace(BARE_PLACEHOLDER_REGEX, (_m, content) => content);
   out = out.replace(BARE_PLACEHOLDER_NO_ARG_REGEX, '');
 
-  return out;
+  // Store the command MathQuill stored, not the alias - also heals latex that was
+  // saved with `\\divide` before the keypad resolved it.
+  return toCanonicalCommands(out);
 };
 
 /**
@@ -240,8 +449,15 @@ export const fromMathLive = (latex) => {
  * placeholders in the inserted latex.
  */
 const COMMANDS_WITH_ARGS = {
+  // An explicit "blank over blank" key: both slots start empty.
   '\\frac': '\\frac{#?}{#?}',
-  '/': '\\frac{#?}{#?}',
+  // Division, which must behave like MathQuill's `/`: whatever precedes the
+  // cursor becomes the numerator and the caret lands in the denominator. `#@`
+  // is MathLive's token for "the selection, or the item before the cursor" -
+  // this is exactly the template MathLive binds to the `/` key itself. Using
+  // `#?` here instead produced an empty fraction and left the typed number
+  // stranded outside it.
+  '/': '\\frac{#@}{#?}',
   '\\sqrt': '\\sqrt{#?}',
   '\\nthroot': '\\sqrt[#?]{#?}',
   '\\overline': '\\overline{#?}',
@@ -298,7 +514,7 @@ export const keyToAction = (key) => {
     // applied them in sequence; MathLive inserts one latex string, so expand
     // each part and concatenate.
     const parts = Array.isArray(key.command) ? key.command : [key.command];
-    const value = parts.map((c) => COMMANDS_WITH_ARGS[c] || c).join('');
+    const value = parts.map((c) => COMMANDS_WITH_ARGS[c] || MATHQUILL_ALIASES[c] || c).join('');
 
     return { type: 'insert', value };
   }
@@ -312,4 +528,4 @@ export const keyToAction = (key) => {
   return undefined;
 };
 
-export { COMMANDS_WITH_ARGS, KEYSTROKES };
+export { COMMANDS_WITH_ARGS, KEYSTROKES, MATHQUILL_ALIASES };

package/src/mathlive-instance.js

@@ -1,5 +1,6 @@
 import debug from 'debug';
 import { NEWLINE_EMBED, toMathLive, withVisibleEmptySlots } from './latex-bridge';
+import { ROOT_INDEX_CSS, PARALLEL_CSS } from './mf/common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:instance');
 
@@ -46,26 +47,63 @@ const absoluteFontsDirectory = (dir) => {
   }
 };
 
+/**
+ * Version-pinned CDN fallback for the KaTeX fonts.
+ *
+ * Some symbols are composed from Private Use Area glyphs that exist only in
+ * those fonts: `\\neq` is U+E020 (a negation slash) overlapped on `=`, and
+ * `\\nsim` / `\\ncong` work the same way. With no fonts the browser substitutes
+ * an arbitrary glyph for U+E020, so those keys render as garbage rather than
+ * simply falling back to a plainer face.
+ *
+ * The version comes from MathLive itself, so the fonts always match the engine.
+ * Hosts that would rather not depend on a third party should serve the fonts and
+ * call `configureFonts('/their/path')`, or pass `null` to opt out.
+ */
+const FALLBACK_MATHLIVE_VERSION = '0.110.0';
+
+const cdnFontsDirectory = () => {
+  const version = (mathlive && mathlive.version && mathlive.version.mathlive) || FALLBACK_MATHLIVE_VERSION;
+
+  // NOTE: `/fonts`, not `/dist/fonts` - the published package root holds them.
+  return `https://unpkg.com/mathlive@${version}/fonts`;
+};
+
 /**
  * Tell the package where the MathLive fonts are served from.
  *
- * Call before `loadMathLive()`. Accepts an absolute URL, a root-relative path
- * (`/mathlive-fonts`) or a relative one; pass `null` to skip font loading and
- * fall back to system fonts.
+ * Call before `loadMathLive()`.
+ *
+ *  - a path/URL: served by you, no third-party request
+ *  - `null`:     skip font loading; note `\\neq`, `\\nsim` and `\\ncong` then
+ *                render incorrectly, being built from Private Use Area glyphs
+ *  - not called: falls back to a version-pinned CDN
  *
  * The fonts ship inside the `mathlive` package (`node_modules/mathlive/fonts`)
- * and must be copied into whatever the host app serves statically.
+ * ready to copy into whatever the host app serves statically.
  *
- * @param {string|null} dir
+ * @param {string|null} [dir]
  */
 export const configureFonts = (dir) => {
   fontsDirectory = dir;
 
   if (mathlive) {
-    mathlive.MathfieldElement.fontsDirectory = absoluteFontsDirectory(dir);
+    mathlive.MathfieldElement.fontsDirectory = dir === undefined ? cdnFontsDirectory() : absoluteFontsDirectory(dir);
   }
 };
 
+/**
+ * What the spacebar inserts in math mode.
+ *
+ * MathLive's `mathModeSpace` defaults to an empty string, which makes the
+ * spacebar a no-op - users cannot type a space at all. `\\ ` (a LaTeX control
+ * space) is what MathQuill serialised spaces as, so existing content and the
+ * MathJax renderer in @pie-lib/math-rendering both already understand it.
+ *
+ * A literal " " is not usable: LaTeX skips raw whitespace.
+ */
+export const MATH_MODE_SPACE = '\\ ';
+
 /**
  * Custom macros for the pie-specific commands that the MathQuill fork
  * understood but stock LaTeX does not.
@@ -78,6 +116,9 @@ export const PIE_MACROS = {
   // Argument-less symbols. Atomic is correct here: backspace should remove the
   // whole glyph, and there is nothing to type into.
   parallelogram: '\\htmlData{pie-macro=parallelogram}{\\unicode{"25B1}}',
+  // Same glyph as the built-in `\\parallel` (U+2225), tagged so it can be sized -
+  // see `parallelStyles`.
+  parallel: '\\htmlData{pie-macro=parallel}{\\unicode{"2225}}',
   napprox: '\\not\\approx',
   nsim: '\\not\\sim',
   ncong: '\\not\\cong',
@@ -126,21 +167,165 @@ let loadWarned = false;
 /** Apply post-load configuration exactly once. */
 const configureLoaded = () => {
   // Always replace MathLive's relative `'./fonts/'` default: it throws
-  // "Invalid base URL" when bundled. Either point at the host app's copy or
-  // disable font loading, both of which are safe.
+  // "Invalid base URL" when bundled. Use the host's copy if one was configured,
+  // otherwise the version-pinned CDN.
   if (fontsDirectory === undefined) {
     log(
-      'no fontsDirectory configured - MathLive will use fallback fonts. ' +
-        'Call configureFonts("/path/to/fonts") with a copy of node_modules/mathlive/fonts to enable them.',
+      'no fontsDirectory configured - falling back to the CDN (%s). ' +
+        'Serve the fonts yourself and call configureFonts("/path/to/fonts") to avoid the network request, ' +
+        'or configureFonts(null) to opt out.',
+      cdnFontsDirectory(),
     );
   }
 
   mathlive.MathfieldElement.fontsDirectory =
-    fontsDirectory === undefined ? null : absoluteFontsDirectory(fontsDirectory);
+    fontsDirectory === undefined ? cdnFontsDirectory() : absoluteFontsDirectory(fontsDirectory);
 
   injectCoreStylesheet();
 };
 
+/**
+ * CSS that has to live *inside* a mathfield's shadow root.
+ *
+ * A live `<math-field>` renders in shadow DOM (`attachShadow({mode:'open'})`),
+ * so nothing in the host page's stylesheets reaches it. The stretchy-accent
+ * problem therefore needs fixing twice: once for static markup (see
+ * `placeholderStyles`) and once here for the editor.
+ *
+ * MathLive centres an accent with `margin-left: <half the content width>` as an
+ * inline style. For a stretchy accent that also shrinks its containing block
+ * (`.ML__center` is position:relative), so the arc ends up half-width and offset
+ * - visibly failing to span the text underneath.
+ *
+ * `:has(.ML__stretchy)` keeps the fix to stretchy accents; single-glyph accents
+ * (`\hat{x}`, `\vec{x}`) still need their centring offset.
+ */
+/**
+ * Marker put on the host `<math-field>` while a `\placeholder{}` is selected,
+ * so the caret rules below apply to a placeholder and nothing else.
+ */
+export const PLACEHOLDER_CARET_CLASS = 'pie-caret-in-placeholder';
+
+/** What MathLive serialises a `#?` slot as. */
+const PLACEHOLDER_LATEX = '\\placeholder{}';
+
+/**
+ * A blinking caret inside a selected placeholder box.
+ *
+ * A keypad key such as `\frac` inserts `\frac{#?}{#?}`. MathLive turns each
+ * `#?` into a `\placeholder{}` atom and *selects* the first one. That atom is a
+ * leaf - the offsets around it are "before" and "after", there is no position
+ * inside it - so MathLive renders **no caret element at all** and shows only
+ * the selection highlight. The box therefore looked focused (blue) but dead,
+ * where MathQuill used to blink a cursor inside its empty box.
+ *
+ * So the caret is drawn here. `:not(:has(.ML__selected))` picks the innermost
+ * selected element (MathLive puts the class on a wrapper *and* the glyph span,
+ * which would otherwise give two carets), and the `ML__caret-blink` keyframes
+ * plus `--_caret-color` are MathLive's own, already in this shadow root.
+ *
+ * Typing still replaces the whole placeholder, which for an empty box is
+ * indistinguishable from inserting at the caret.
+ */
+const PLACEHOLDER_CARET_CSS = [
+  `:host(.${PLACEHOLDER_CARET_CLASS}) .ML__selected:not(:has(.ML__selected)){position:relative}`,
+  `:host(.${PLACEHOLDER_CARET_CLASS}) .ML__selected:not(:has(.ML__selected))::after{`,
+  'content:"";position:absolute;left:50%;top:12%;height:76%;',
+  'border-right:2px solid var(--_caret-color, currentColor);',
+  'animation:ML__caret-blink 1.05s step-end forwards infinite}',
+].join('');
+
+// A live mathfield needs the readable radical index too: `rootIndexStyles` is
+// written for static markup in the host page, which cannot cross the shadow
+// boundary.
+const SHADOW_CSS =
+  '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}' +
+  ROOT_INDEX_CSS +
+  PARALLEL_CSS +
+  PLACEHOLDER_CARET_CSS;
+
+/**
+ * Keep {@link PLACEHOLDER_CARET_CLASS} in step with the selection.
+ *
+ * Gating on the class is what keeps the caret specific to placeholders: an
+ * ordinary selection (`x+1`) must not sprout one. MathLive fires
+ * `selection-change` for every caret move, including the one that lands on the
+ * placeholder straight after an insert.
+ *
+ * @param {HTMLElement} mathField
+ * @returns {function|undefined} teardown, to call on unmount
+ */
+export const trackPlaceholderCaret = (mathField) => {
+  if (!mathField || typeof mathField.addEventListener !== 'function') {
+    return undefined;
+  }
+
+  const update = () => {
+    let selected = '';
+
+    try {
+      // A collapsed selection already has a real MathLive caret.
+      if (!mathField.selectionIsCollapsed && mathField.selection) {
+        selected = mathField.getValue(mathField.selection, 'latex');
+      }
+    } catch (e) {
+      log('could not read the selection: %s', e && e.message);
+    }
+
+    if (mathField.classList) {
+      mathField.classList.toggle(PLACEHOLDER_CARET_CLASS, selected === PLACEHOLDER_LATEX);
+    }
+  };
+
+  mathField.addEventListener('selection-change', update);
+  update();
+
+  return () => mathField.removeEventListener('selection-change', update);
+};
+
+/**
+ * Apply {@link SHADOW_CSS} inside a mathfield's shadow root.
+ *
+ * Uses `adoptedStyleSheets` when available (which is how MathLive loads its own
+ * stylesheets) and falls back to appending a <style> node.
+ *
+ * @param {HTMLElement} mathField
+ */
+export const applyShadowStyles = (mathField) => {
+  const root = mathField && mathField.shadowRoot;
+
+  if (!root) {
+    return;
+  }
+
+  try {
+    if ('adoptedStyleSheets' in root && typeof CSSStyleSheet !== 'undefined') {
+      // Do not re-add on a re-render.
+      if (root.__pieAccentSheet) {
+        return;
+      }
+
+      const sheet = new CSSStyleSheet();
+
+      sheet.replaceSync(SHADOW_CSS);
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+      root.__pieAccentSheet = sheet;
+
+      return;
+    }
+
+    if (!root.querySelector('style[data-pie-accent]')) {
+      const style = document.createElement('style');
+
+      style.setAttribute('data-pie-accent', '');
+      style.textContent = SHADOW_CSS;
+      root.appendChild(style);
+    }
+  } catch (e) {
+    log('could not apply shadow styles to the mathfield: %s', e && e.message);
+  }
+};
+
 /**
  * Ensure MathLive's "core" stylesheet is in the document.
  *

package/src/mf/common-styles.js

@@ -13,7 +13,9 @@
  * Most are intentionally near-empty: MathLive sizes scripts, radicals and
  * fences correctly on its own, so the MathQuill-era corrections are not needed.
  * They stay as documented extension points rather than being deleted, so the
- * destructuring above keeps working.
+ * destructuring above keeps working. The exception is the radical index, which
+ * MathLive sizes to TeX metrics that read too small here - see
+ * `rootIndexStyles`.
  */
 
 /**
@@ -40,10 +42,66 @@ export const longdivStyles = {
 };
 
 /**
- * Superscript/subscript sizing. MathLive follows TeX metrics, so no overrides
- * are required.
+ * How the index of a radical is sized.
+ *
+ * MathLive follows TeX and sets the index of `\sqrt[n]{x}` in scriptscriptstyle,
+ * which it emits as an inline `font-size: 50%` on the span wrapping the index's
+ * glyphs. At authoring sizes that leaves the index - on the nth-root key, and in
+ * any radical the author types - too small to read next to the radicand, so it is
+ * scaled up to 80% - 1.6x what MathLive asks for.
+ *
+ * Only that innermost span is resized. `.ML__sqrt-index` itself keeps its font
+ * size on purpose: the vlist inside it tucks the index into the radical's crook
+ * with em-based `top`/`height` offsets, and scaling those lifts the index clear
+ * of the radical instead of just enlarging it.
+ *
+ * The child chain is spelled out so that nothing nested deeper inside the index
+ * (a fraction's numerator, another radical) is caught by the same rule, and
+ * `!important` is required because the 50% is an INLINE style.
+ */
+const ROOT_INDEX_SELECTOR = '.ML__sqrt-index > .ML__vlist-t > .ML__vlist-r > .ML__vlist > span > [style*="font-size"]';
+const ROOT_INDEX_FONT_SIZE = '80%';
+
+export const rootIndexStyles = {
+  [`& ${ROOT_INDEX_SELECTOR}`]: {
+    fontSize: `${ROOT_INDEX_FONT_SIZE} !important`,
+  },
+};
+
+/**
+ * The same rule as a CSS string, for a live mathfield's shadow root - see
+ * `SHADOW_CSS` in mathlive-instance.js. Static markup is styled by
+ * {@link rootIndexStyles}.
+ */
+export const ROOT_INDEX_CSS = `${ROOT_INDEX_SELECTOR}{font-size:${ROOT_INDEX_FONT_SIZE} !important}`;
+
+/**
+ * Size of the parallel sign (`\parallel`, tagged `data-pie-macro="parallel"` by
+ * `PIE_MACROS`). The legacy editor enlarged it (`updateSpans` set 32px) because
+ * the bars read too small next to the letters of `AB ∥ CD`; MathLive draws it at
+ * the surrounding size, so it is scaled up here. Not applied to keypad labels.
  */
-export const supsubStyles = {};
+const PARALLEL_SELECTOR = '[data-pie-macro="parallel"]';
+const PARALLEL_FONT_SIZE = '1.4em';
+
+export const parallelStyles = {
+  [`& ${PARALLEL_SELECTOR}`]: {
+    fontSize: PARALLEL_FONT_SIZE,
+  },
+};
+
+/** The same rule as a CSS string, for a live mathfield's shadow root. */
+export const PARALLEL_CSS = `${PARALLEL_SELECTOR}{font-size:${PARALLEL_FONT_SIZE}}`;
+
+/**
+ * Superscript/subscript sizing. MathLive follows TeX metrics for scripts, so the
+ * MathQuill-era corrections are gone; the radical index is the one place where a
+ * TeX-correct size reads too small in the authoring UI.
+ */
+export const supsubStyles = {
+  ...rootIndexStyles,
+  ...parallelStyles,
+};
 
 /** Empty placeholder boxes (answer blocks / open slots). */
 export const placeholderStyles = {
@@ -57,13 +115,42 @@ export const placeholderStyles = {
   '& [data-pie-empty]': {
     opacity: 0.5,
   },
-  // Stretchy accents render an <svg>; mathlive-static.css positions it
-  // absolutely at width:100%. Repeated here so static math cannot blow out its
-  // container if that stylesheet is missing.
-  '& svg': {
+  // Stretchy accents (\overarc, \overleftrightarrow, \overrightarrow) render an
+  // <svg width="100%" preserveAspectRatio="none"> inside a `.ML__stretchy`. That
+  // span is absolutely positioned, so its immediate wrapper computes to 0px and
+  // the width has to resolve against a *positioned* ancestor. Pin that to
+  // `.ML__base`, whose width already equals the accent's content (measured:
+  // 9.85px for a 0.56em slot), so the arc spans exactly its content.
+  //
+  // Do NOT write a bare `& svg` rule instead: MathLive's own rule is
+  // descendant-scoped (`.ML__latex .ML__stretchy svg`), and a global one
+  // re-parents every svg in the subtree.
+  '& .ML__base': {
+    position: 'relative',
+  },
+  '& .ML__stretchy': {
     position: 'absolute',
+    left: 0,
     width: '100%',
   },
+  // MathLive centres an accent by shifting it right half the content width -
+  // `margin-left: 0.28em` for a 0.56em slot - which assumes a glyph with its own
+  // side bearings. Over a synthetic empty slot it just pushes the arc right.
+  //
+  // `!important` is required: MathLive writes this as an INLINE style
+  // (`style="top:-3.4em;margin-left:0.28em"`), which a class cannot override.
+  //
+  // It also fixes the width. `.ML__center` is the stretchy's containing block
+  // (MathLive gives `.ML__vlist > span` position:relative), and its width is the
+  // base minus that margin - measured 9.85px - 4.93px = 4.93px, exactly half,
+  // which is why the arc came out half-width AND offset right.
+  //
+  // Scoped with `:has(.ML__stretchy)`: only stretchy accents are affected.
+  // A single-glyph accent (`\hat{x}`, `\vec{x}`) genuinely needs its centring
+  // offset, and must keep it.
+  '& .ML__center:has(.ML__stretchy)': {
+    marginLeft: '0 !important',
+  },
 };
 
 /**
@@ -73,6 +160,7 @@ export const placeholderStyles = {
 export const commonMqKeyboardStyles = {
   ...commonMqFontStyles,
   ...longdivStyles,
+  ...rootIndexStyles,
   ...placeholderStyles,
   touchAction: 'manipulation',
   '& math-field': {
@@ -114,6 +202,7 @@ export const commonKeyboardStyles = commonMqKeyboardStyles;
 export default {
   commonMqFontStyles,
   longdivStyles,
+  rootIndexStyles,
   supsubStyles,
   commonMqKeyboardStyles,
   placeholderStyles,