@pie-lib/math-input-mathlive 1.0.9-next.6637 → 1.0.10

package/src/__tests__/mount-race.test.jsx

@@ -0,0 +1,130 @@
+/**
+ * MathLive loads asynchronously, so `componentDidMount` resumes after an await
+ * before appending a <math-field>. Two orderings must both hold:
+ *
+ *  - StrictMode dev double-mount (mount -> unmount -> mount on the SAME
+ *    instance) must end up with exactly ONE field. A boolean "unmounted" flag
+ *    latches here and blocks the remount entirely - which is why this uses a
+ *    generation counter.
+ *  - A genuine unmount while the load is in flight must append nothing.
+ *
+ * MathLive cannot load under jsdom, so it is mocked with a minimal stub in
+ * order to actually count appended fields.
+ */
+jest.mock('../mathlive-instance', () => {
+  // Must be a real DOM node: the component uses replaceChildren(), which
+  // rejects anything that is not a Node. Returning an element from the
+  // constructor replaces `this`, so callers get a genuine <math-field>.
+  class FakeMathfieldElement {
+    constructor() {
+      // `global` rather than `document`: jest forbids out-of-scope variables in
+      // a mock factory, and `global` is on its allow-list.
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    // must mirror the real export, otherwise the component sets `undefined`
+    MATH_MODE_SPACE: '\\ ',
+    applyShadowStyles: () => {},
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+// eslint-disable-next-line import/first
+import Input from '../mf/input';
+
+const holderFor = (cmp) => {
+  const el = document.createElement('span');
+
+  cmp.holderRef = { current: el };
+
+  return el;
+};
+
+const fieldCount = (el) => Array.from(el.childNodes).filter((n) => n.tagName === 'MATH-FIELD').length;
+
+describe('async mount race', () => {
+  it('StrictMode mount -> unmount -> mount yields exactly one field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const first = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    const second = input.componentDidMount();
+
+    await Promise.all([first, second]);
+
+    expect(fieldCount(el)).toBe(1);
+    expect(input.mathField).toBeDefined();
+  });
+
+  it('appends nothing when unmounted while the load is in flight', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const pending = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    await pending;
+
+    expect(fieldCount(el)).toBe(0);
+    expect(input.mathField).toBeUndefined();
+  });
+
+  it('a normal single mount creates the field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  it('repeated mounts never accumulate fields', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+    await input.componentDidMount();
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  // MathLive's mathModeSpace defaults to '', which makes the spacebar a no-op.
+  it('configures the spacebar so a space can be typed', async () => {
+    const input = new Input({});
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    // a LaTeX control space - what MathQuill produced, and MathJax understands
+    expect(input.mathField.mathModeSpace).toEqual('\\ ');
+    expect(input.mathField.mathModeSpace).not.toEqual('');
+  });
+
+  it('reports itself through innerRef on mount and clears it on unmount', async () => {
+    const innerRef = jest.fn();
+    const input = new Input({ innerRef });
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    expect(innerRef).toHaveBeenCalledWith(input);
+
+    input.componentWillUnmount();
+
+    expect(innerRef).toHaveBeenLastCalledWith(null);
+  });
+});

package/src/__tests__/static-prompts.test.jsx

@@ -0,0 +1,251 @@
+import Static from '../mf/static';
+
+/**
+ * The answer-block contract: `\MathQuillMathField[id]{}` in stored latex becomes
+ * a MathLive prompt, and sub-field values/focus are surfaced through the same
+ * callbacks @pie-lib/math-input exposed (`onSubFieldChange`, `onSubFieldFocus`,
+ * `getFieldName`, `setInput`).
+ *
+ * Driven against a stub mathfield: a real <math-field> needs a browser, and what
+ * matters here is the mapping, not MathLive's rendering.
+ */
+const stubField = (values = {}, selection = null) => ({
+  values: { ...values },
+  getPrompts() {
+    return Object.keys(this.values);
+  },
+  getPromptValue(id) {
+    return this.values[id];
+  },
+  setPromptValue(id, v) {
+    this.values[id] = v;
+  },
+  getPromptRange(id) {
+    const i = Object.keys(this.values).indexOf(id);
+
+    return [i * 10, i * 10 + 5];
+  },
+  selection,
+  addEventListener() {},
+  removeEventListener() {},
+  focus() {
+    this.focused = true;
+  },
+  blur() {
+    this.blurred = true;
+  },
+  remove() {},
+});
+
+const make = (props = {}) => new Static({ latex: 'x=\\MathQuillMathField[r1]{}', getFieldName: () => {}, ...props });
+
+describe('Static: answer blocks / prompts', () => {
+  describe('isInteractive', () => {
+    it('is interactive when the latex has answer blocks', () => {
+      expect(make({ latex: 'x=\\MathQuillMathField[r1]{}' }).isInteractive()).toBe(true);
+      expect(make({ latex: 'x=\\placeholder[r1]{}' }).isInteractive()).toBe(true);
+    });
+
+    it('is display-only for plain latex', () => {
+      expect(make({ latex: '\\frac{1}{2}' }).isInteractive()).toBe(false);
+      expect(make({ latex: '' }).isInteractive()).toBe(false);
+    });
+  });
+
+  describe('values', () => {
+    it('returns {} before the field exists', () => {
+      expect(make().values()).toEqual({});
+    });
+
+    it('maps each prompt id to its stored-form latex', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '7', r2: '\\placeholder{}' });
+
+      // \placeholder must not leak into stored values
+      expect(s.values()).toEqual({ r1: '7', r2: '' });
+    });
+  });
+
+  describe('promptHandle / innerFields', () => {
+    it('exposes a MathQuill-field-like handle with get/set latex', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '7' });
+
+      const h = s.promptHandle('r1');
+
+      expect(h.id).toEqual('r1');
+      expect(h.latex()).toEqual('7');
+
+      h.latex('9');
+      expect(s.mathField.values.r1).toEqual('9');
+    });
+
+    it('handle latex() is safe with no field', () => {
+      expect(make().promptHandle('r1').latex()).toEqual('');
+    });
+
+    it('innerFields returns one handle per prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '1', r2: '2' });
+
+      expect(s.innerFields.map((f) => f.id)).toEqual(['r1', 'r2']);
+      expect(make().innerFields).toEqual([]);
+    });
+  });
+
+  describe('onSubFieldChange', () => {
+    it('fires only for prompts whose value changed', () => {
+      const onSubFieldChange = jest.fn();
+      const s = make({ onSubFieldChange });
+
+      s.mathField = stubField({ r1: '1', r2: '2' });
+      s.promptValues = { r1: '1', r2: '2' };
+
+      s.mathField.values.r2 = '5';
+      s.onPromptInput();
+
+      expect(onSubFieldChange).toHaveBeenCalledTimes(1);
+      expect(onSubFieldChange).toHaveBeenCalledWith('r2', '5');
+    });
+
+    it('uses getFieldName when it returns a name', () => {
+      const onSubFieldChange = jest.fn();
+      const s = make({ onSubFieldChange, getFieldName: (handle) => 'named-' + handle.id });
+
+      s.mathField = stubField({ r1: '1' });
+      s.promptValues = {};
+
+      s.onPromptInput();
+
+      expect(onSubFieldChange).toHaveBeenCalledWith('named-r1', '1');
+    });
+
+    it('still tracks values when no callback is supplied', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '3' });
+      s.onPromptInput();
+
+      expect(s.promptValues).toEqual({ r1: '3' });
+    });
+  });
+
+  describe('onSubFieldFocus', () => {
+    it('reports the prompt containing the selection, plus setInput', () => {
+      const onSubFieldFocus = jest.fn();
+      const setInput = jest.fn();
+      const s = make({ onSubFieldFocus, setInput });
+
+      // r2 occupies offsets 10..15
+      s.mathField = stubField({ r1: '', r2: '' }, { ranges: [[11, 11]] });
+      s.onPromptFocus();
+
+      expect(onSubFieldFocus).toHaveBeenCalledTimes(1);
+      expect(onSubFieldFocus.mock.calls[0][0]).toEqual('r2');
+      expect(onSubFieldFocus.mock.calls[0][1].id).toEqual('r2');
+      expect(setInput).toHaveBeenCalled();
+    });
+
+    it('does nothing without a selection', () => {
+      const onSubFieldFocus = jest.fn();
+      const s = make({ onSubFieldFocus });
+
+      s.mathField = stubField({ r1: '' }, null);
+      s.onPromptFocus();
+
+      expect(onSubFieldFocus).not.toHaveBeenCalled();
+    });
+
+    it('does not throw when the field is missing', () => {
+      const s = make({ onSubFieldFocus: jest.fn() });
+
+      expect(() => s.onPromptFocus()).not.toThrow();
+    });
+  });
+
+  describe('accessibility announcements', () => {
+    afterEach(() => {
+      document.body.innerHTML = '';
+    });
+
+    it('creates a polite off-screen live region', () => {
+      const s = make();
+
+      s.createLiveRegion();
+
+      expect(s.liveRegion.getAttribute('aria-live')).toEqual('polite');
+      expect(s.liveRegion.getAttribute('aria-atomic')).toEqual('true');
+      expect(document.body.contains(s.liveRegion)).toBe(true);
+
+      s.removeLiveRegion();
+      expect(s.liveRegion).toBeUndefined();
+    });
+
+    it('does not create a second region', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      const first = s.liveRegion;
+
+      s.createLiveRegion();
+      expect(s.liveRegion).toBe(first);
+      s.removeLiveRegion();
+    });
+
+    it('announces when typed input expands into a command', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x' };
+      // grew by more than one char AND gained a backslash => a conversion
+      s.announceConversion({ r1: 'x\\frac{}{}' });
+
+      expect(s.liveRegion.textContent).toEqual('Converted to math symbol');
+      s.removeLiveRegion();
+    });
+
+    it('does not announce ordinary typing', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x' };
+      s.announceConversion({ r1: 'xy' });
+
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+
+    it('does not announce a deletion', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x\\frac{}{}' };
+      s.onKeyDown({ key: 'Backspace' });
+      s.announceConversion({ r1: 'x' });
+
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+  });
+
+  describe('focus / blur', () => {
+    it('delegates to the field and is safe without one', () => {
+      const s = make();
+
+      expect(() => {
+        s.focus();
+        s.blur();
+      }).not.toThrow();
+
+      s.mathField = stubField();
+      s.focus();
+      s.blur();
+
+      expect(s.mathField.focused).toBe(true);
+      expect(s.mathField.blurred).toBe(true);
+    });
+  });
+});

package/src/keypad/index.jsx

@@ -29,22 +29,20 @@ const LabelHolder = styled('span')(() => ({
   pointerEvents: 'none',
   textTransform: 'none',
   color: color.text(),
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+  // Deliberately inline-block, NOT inline-flex: MathLive's markup relies on
+  // normal inline flow. Making its spans flex items collapses their width, and
+  // stretchy accents render an <svg width="100%" preserveAspectRatio="none">
+  // that then squeezes into a spike instead of spanning the content.
+  display: 'inline-block',
+  textAlign: 'center',
   lineHeight: 1,
-  // Never let a label size its grid column. Stretchy accents
-  // (\overrightarrow, \overleftrightarrow, \overarc) render an <svg> that
-  // mathlive-static.css positions absolutely at width:100%; if that stylesheet
-  // is missing the svg lays out statically and expands without bound, dragging
-  // the whole column across the screen. `overflow: hidden` also collapses the
-  // label's min-content contribution, so the grid can't blow out either way.
+  // Keep a label from sizing its grid column. `overflow: hidden` also collapses
+  // the label's min-content contribution, so a wide accent cannot drag the
+  // column across the screen. The svg's own positioning is left to
+  // mathlive-static.css (injected by the package) - duplicating it here broke
+  // the accent's containing block.
   maxWidth: '100%',
   overflow: 'hidden',
-  '& svg': {
-    position: 'absolute',
-    width: '100%',
-  },
   // Answer-block / empty-slot boxes inside a label.
   '& .ML__placeholder': {
     backgroundColor: color.keypadEmptyPlaceholder ? color.keypadEmptyPlaceholder() : undefined,

package/src/keys/geometry.js

@@ -14,7 +14,10 @@ export const overRightArrow = set({
 
 export const overLeftRightArrow = set({
   name: 'Segment',
-  latex: '\\overleftrightarrow{\\overline{}}', // used this notation to display the pink box
+  // MathQuill needed a nested \overline{} to draw the empty box; MathLive
+  // renders that as a real line, so the label showed a spurious bar under the
+  // arrows. `withVisibleEmptySlots` supplies the box for `{}` instead.
+  latex: '\\overleftrightarrow{}',
   symbol: 'AB',
   command: '\\overleftrightarrow',
 });
@@ -51,7 +54,9 @@ export const angle = set({
 });
 export const overArc = set({
   name: 'Over arc',
-  latex: '\\overarc{\\overline{}}', // used this notation to display the pink box
+  // See the note on Segment above: the nested \overline{} drew a straight line
+  // instead of leaving the arc visible.
+  latex: '\\overarc{}',
   command: '\\overarc',
 });
 export const measureOfAngle = set({

package/src/latex-bridge.js

@@ -55,11 +55,19 @@ 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;
 
 /**
@@ -240,8 +248,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{#?}',

package/src/mathlive-instance.js

@@ -46,26 +46,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.
@@ -126,21 +163,84 @@ 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.
+ */
+const SHADOW_CSS = '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}';
+
+/**
+ * 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

@@ -57,13 +57,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',
+  },
 };
 
 /**