@barocss/math-editor 0.4.0 → 0.6.1

package/dist/math-editor.js

@@ -1,4 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { followReadableMathLayout } from './dom/readable-layout.js';
+import { attachMathHelp, requestMathHelp } from './dom/help.js';
+import { mathEnterAction } from './enter-policy.js';
+import { mathLayout } from './math-layout.js';
+import { wrapSelectionShortcut } from './selection-shortcuts.js';
+import { transformRoot } from './root-transform.js';
+import { structureEditingContext, changeContextFence } from './context-tools.js';
+import { focusContextAction } from './dom/context-keyboard.js';
 import { setMathPresentation } from './presentation.js';
 import { PresentationControls } from './presentation-controls.js';
 import { createMathPreferences } from './preferences.js';
@@ -8,33 +16,35 @@ import { insertLatex } from './latex-insertion.js';
 import { LatexPastePanel } from './latex-paste-panel.js';
 import { followMathTheme } from './dom/theme.js';
 import { matrixPointerRange } from './dom/matrix-selection.js';
-import { positionMathMenu } from './dom/menu-position.js';
-import { fences } from './fences.js';
+import { positionMathMenu, followMathMenuPosition } from './dom/menu-position.js';
+import { fences, fencePairs } from './fences.js';
 import { parseLatex } from './latex.js';
 import { createEditorLabels } from './editor-labels.js';
 import { MathEditorToolbar } from './math-editor-toolbar.js';
 import { SymbolBrowser } from './symbol-browser.js';
 import { insertTemplate } from './templates.js';
 import { translate, mathLocaleDirection, } from './i18n.js';
-import { extendKeyboardRange, collapseKeyboardRange, wrapRange, wrappingKinds, copyRange, deleteRange, fragmentLatex, MATH_CLIPBOARD_TYPE, parseFragment, pasteFragment, resolveRange, } from './range.js';
+import { extendKeyboardRange, isTokenNavigationKey, collapseKeyboardRange, wrapRange, wrappingKinds, copyRange, deleteRange, fragmentLatex, MATH_CLIPBOARD_TYPE, parseFragment, pasteFragment, resolveRange, } from './range.js';
+import { mathRunSpacing } from './math-spacing.js';
 import { tokenizeMathText, tokenIndexAt } from './tokens.js';
-import { splitLine, joinPreviousLine } from './lines.js';
-import { moveVertical } from './vertical-navigation.js';
+import { splitLine, joinPreviousLine, joinNextLine } from './lines.js';
+import { createVerticalNavigation } from './vertical-navigation.js';
 import { renderedCaretGeometry } from './dom/caret-geometry.js';
 import { insertIdentityMatrix, insertMatrix, activeGrid, MATRIX_MAX_SIZE, matrixEnvironments, resizeMatrix, setMatrixEnvironment, } from './matrix.js';
 import { MATH_MATRIX_CLIPBOARD_TYPE, parseMatrixFragment, matrixFragment, matrixFromTSV, matrixRangeBetween, resolveMatrixRange, extendMatrixRange, focusMatrixCell, copyMatrixRange, clearMatrixRange, pasteMatrixFragment, transposeMatrix, } from './matrix-range.js';
 import { createPortal } from 'react-dom';
-import { acceptSuggestion, findSuggestions, mathStructures } from './suggestions.js';
+import { acceptSuggestion, findStateSuggestions, mathStructures } from './suggestions.js';
 import { useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
-import { gridDeletionTarget, removeGrid, row, documentRows, isLiteralText, isGrid, commit, createHistory, initialState, insertStructure, moveCaret, redo, setText, textNodes, toLatex, undo, unwrapPrevious, } from './model.js';
+import { gridDeletionTarget, removeGrid, row, documentRows, isLiteralText, isGrid, commit, createHistory, initialState, insertStructure, moveCaret, redo, setText, textNodes, toLatex, undo, unwrapPrevious, unwrapNext, unwrapEmptySlot, } from './model.js';
 const structures = mathStructures;
 /** Native text fields own IME and local text selection; the tree owns structural editing. */
-export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus = false, enterBehavior = 'newline', onCommit, onCancel, showPopovers = true, defaultValue, excludedStructures = [], multiline = true, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarMaxItems = 8, toolbarEnd, showTokenLegend = true, }) {
+export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus = false, enterBehavior = 'newline', onCommit, onCancel, showPopovers = true, defaultValue, excludedStructures = [], multiline = true, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarMaxItems = 8, contextTools = true, toolbarEnd, showTokenLegend = true, }) {
     const t = (key, parameters) => translate(locale, key, parameters);
     const labels = createEditorLabels(locale);
     const [history, setHistory] = useState(() => createHistory(initialState(defaultValue)));
     const historyRef = useRef(history);
     const suggestionMenu = useRef(null);
+    const contextFooter = useRef(null);
     const selectionMenu = useRef(null);
     const [ownPreferences] = useState(createMathPreferences);
     const preferences = suppliedPreferences ?? ownPreferences;
@@ -46,6 +56,15 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
     const [matrixRange, setMatrixRange] = useState();
     const [clipboardMessage, setClipboardMessage] = useState('');
     const surface = useRef(null);
+    useLayoutEffect(() => {
+        if (surface.current)
+            return followReadableMathLayout(surface.current);
+    }, []);
+    useLayoutEffect(() => {
+        const root = surface.current?.closest('.me-editor');
+        if (root)
+            return attachMathHelp(root, () => locale);
+    }, [locale]);
     const drag = useRef(undefined);
     const [focused, setFocused] = useState(false);
     const [selectedGrid, setSelectedGrid] = useState();
@@ -77,11 +96,16 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
     const focusNext = useRef(autoFocus);
     const suggestionId = useId();
     const state = history.present;
+    const structureContext = contextTools && showPopovers && editing && focused && !range && !matrixRange
+        ? structureEditingContext(state)
+        : undefined;
+    const rootContext = structureContext?.root;
+    const fenceContext = structureContext?.fence;
     const matrixContext = activeGrid(state);
     const matrixSelection = matrixRange && resolveMatrixRange(state.document, matrixRange);
     const active = textNodes(state.document).find((n) => n.id === state.caret.id);
     const searchCaret = composing ? state.caret.end : state.caret.start;
-    const matches = findSuggestions(active.text, searchCaret, locale);
+    const matches = findStateSuggestions(state, locale, searchCaret);
     matches.candidates = matches.candidates.filter((candidate) => !candidate.kind || !excludedStructures.includes(candidate.kind));
     const query = matches.query;
     const operandMenuKey = useRef('');
@@ -99,9 +123,11 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         : [];
     const selectedIndex = Math.min(candidateIndex, Math.max(0, candidates.length - 1));
     // All React history updates pass here. Caret movement must not produce host save events.
+    const verticalNavigation = useRef(createVerticalNavigation());
     const publish = (next, focus = false, notify = true) => {
         const changed = next.present.document !== historyRef.current.present.document;
         if (changed) {
+            verticalNavigation.current.reset();
             setSelectedGrid(undefined);
             setRange(undefined);
             setMatrixRange(undefined);
@@ -142,6 +168,11 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
     };
     useImperativeHandle(apiRef, () => ({
         pasteLatex,
+        showHelp() {
+            const root = surface.current?.closest('.me-editor');
+            if (root)
+                requestMathHelp(root);
+        },
         importLatex(source) {
             const result = parseLatex(source, { multiline, excludedStructures });
             if (!result.ok)
@@ -214,12 +245,12 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
             ? followMathTheme(surface.current.closest('.me-editor'), suggestionMenu.current)
             : undefined;
         position();
-        window.addEventListener('resize', position);
-        window.addEventListener('scroll', position, true);
+        const stopPosition = surface.current
+            ? followMathMenuPosition(surface.current, position)
+            : undefined;
         return () => {
             stopTheme?.();
-            window.removeEventListener('resize', position);
-            window.removeEventListener('scroll', position, true);
+            stopPosition?.();
         };
     }, [queryKey, candidates.length, active.id, showPopovers]);
     useLayoutEffect(() => {
@@ -229,10 +260,11 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         if (option && list) {
             const itemRect = option.getBoundingClientRect();
             const listRect = list.getBoundingClientRect();
-            if (itemRect.top < listRect.top)
-                list.scrollTop -= listRect.top - itemRect.top;
-            else if (itemRect.bottom > listRect.bottom)
-                list.scrollTop += itemRect.bottom - listRect.bottom;
+            const scaleY = listRect.height / list.offsetHeight || 1;
+            list.scrollTop +=
+                (itemRect.top + itemRect.height / 2 - listRect.top) / scaleY -
+                    list.clientTop -
+                    list.clientHeight / 2;
         }
     }, [selectedIndex, queryKey]);
     const choose = (index) => {
@@ -453,6 +485,12 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
             return;
         const source = event.clipboardData.getData(MATH_CLIPBOARD_TYPE);
         const fragment = source ? parseFragment(source) : undefined;
+        if (source && !fragment) {
+            event.preventDefault();
+            event.stopPropagation();
+            setClipboardMessage('clipboard.invalid');
+            return;
+        }
         const text = event.clipboardData.getData('text/plain');
         const matrixSource = event.clipboardData.getData(MATH_MATRIX_CLIPBOARD_TYPE);
         const cells = matrixSource ? parseMatrixFragment(matrixSource) : matrixFromTSV(text);
@@ -499,6 +537,10 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
                 .split('\n')
                 .map((value) => row(value)),
         };
+        if (!multiline && payload.rows.length > 1) {
+            setClipboardMessage('clipboard.multilineRejected');
+            return;
+        }
         const next = pasteFragment(historyRef.current.present, payload, range);
         if (next === historyRef.current.present) {
             setClipboardMessage('clipboard.multilineRejected');
@@ -544,6 +586,35 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         }
         return false;
     };
+    const tokenNavigation = (event) => {
+        if (compositionStart.current ||
+            event.nativeEvent.isComposing ||
+            matrixRange ||
+            !isTokenNavigationKey(event, event.currentTarget.ownerDocument.defaultView.navigator.platform))
+            return false;
+        event.preventDefault();
+        event.stopPropagation();
+        verticalNavigation.current.reset();
+        const state = historyRef.current.present;
+        const selection = range ??
+            (state.caret.start !== state.caret.end
+                ? {
+                    anchor: { id: state.caret.id, offset: state.caret.start },
+                    focus: { id: state.caret.id, offset: state.caret.end },
+                }
+                : undefined);
+        if (event.shiftKey) {
+            setRange(extendKeyboardRange(state, selection, event.key, 'token'));
+            setEditing(false);
+            surface.current?.focus();
+        }
+        else {
+            const point = collapseKeyboardRange(state.document, selection, event.key) ??
+                extendKeyboardRange(state, undefined, event.key, 'token').focus;
+            activate({ ...point, affinity: event.key === 'ArrowLeft' ? 'forward' : 'backward' });
+        }
+        return true;
+    };
     const keyboardSelect = (event) => {
         if (!event.shiftKey ||
             event.altKey ||
@@ -557,10 +628,26 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         surface.current?.focus();
         return true;
     };
+    const directSelectionKey = (event) => {
+        if (compositionStart.current || event.nativeEvent.isComposing)
+            return false;
+        const current = historyRef.current.present;
+        const next = wrapSelectionShortcut(current, range, event);
+        if (!next)
+            return false;
+        event.preventDefault();
+        event.stopPropagation();
+        if (next !== current)
+            apply(next);
+        return true;
+    };
     const selectionKey = (event) => {
         if (event.target instanceof HTMLInputElement || compositionStart.current)
             return;
-        if (matrixSelectionKey(event) || keyboardSelect(event))
+        if (matrixSelectionKey(event) ||
+            tokenNavigation(event) ||
+            keyboardSelect(event) ||
+            directSelectionKey(event))
             return;
         const current = historyRef.current.present, nodes = textNodes(current.document);
         if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
@@ -578,15 +665,7 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         }
         if (event.metaKey || event.ctrlKey)
             return;
-        const point = !event.altKey && collapseKeyboardRange(current.document, range, event.key);
-        if (point) {
-            event.preventDefault();
-            activate(point);
-            return;
-        }
-        if (range &&
-            selectionChoices.length &&
-            (event.key === 'Enter' || (event.altKey && ['ArrowDown', 'ArrowUp'].includes(event.key)))) {
+        if (range && selectionChoices.length && ['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
             event.preventDefault();
             if (event.key === 'Enter') {
                 if (canWrap)
@@ -597,6 +676,12 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
                     selectionChoices.length);
             return;
         }
+        const point = !event.altKey && collapseKeyboardRange(current.document, range, event.key);
+        if (point) {
+            event.preventDefault();
+            activate(point);
+            return;
+        }
         if (event.altKey)
             return;
         // A model selection must behave like a text selection when typing resumes.
@@ -622,13 +707,13 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
     };
     const selectedRange = matrixRange
         ? undefined
-        : range ??
+        : (range ??
             (state.caret.start !== state.caret.end
                 ? {
                     anchor: { id: state.caret.id, offset: state.caret.start },
                     focus: { id: state.caret.id, offset: state.caret.end },
                 }
-                : undefined);
+                : undefined));
     const selectionFragment = selectedRange ? copyRange(state.document, selectedRange) : undefined;
     const canWrap = selectionFragment?.rows.length === 1 &&
         !isLiteralText(state.document, selectedRange.anchor.id);
@@ -682,12 +767,12 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
             ? followMathTheme(surface.current.closest('.me-editor'), selectionMenu.current)
             : undefined;
         position();
-        window.addEventListener('scroll', position, true);
-        window.addEventListener('resize', position);
+        const stopPosition = surface.current
+            ? followMathMenuPosition(surface.current, position)
+            : undefined;
         return () => {
-            window.removeEventListener('scroll', position, true);
+            stopPosition?.();
             stopTheme?.();
-            window.removeEventListener('resize', position);
         };
     }, [range, state.document, state.caret, showPopovers]);
     useLayoutEffect(() => {
@@ -696,10 +781,9 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         if (!list || !option)
             return;
         const item = option.getBoundingClientRect(), box = list.getBoundingClientRect();
-        if (item.top < box.top)
-            list.scrollTop -= box.top - item.top;
-        else if (item.bottom > box.bottom)
-            list.scrollTop += item.bottom - box.bottom;
+        const scaleY = box.height / list.offsetHeight || 1;
+        list.scrollTop +=
+            (item.top + item.height / 2 - box.top) / scaleY - list.clientTop - list.clientHeight / 2;
     }, [selectionIndex]);
     const insertTool = (kind) => {
         if (excludedStructures.includes(kind) || matrixRange)
@@ -721,292 +805,379 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         apply(insertStructure(historyRef.current.present, kind, ['fraction', 'binomial', 'superscript', 'subscript'].includes(kind)));
     };
     // Nested slots share the same caret model. Only the active lexical token mounts an input.
-    const renderRow = (r, name, role = 'expression') => (_jsx("span", { className: "me-row", "data-math-role": role, children: r.children.map((node) => {
-            if (isGrid(node))
-                return (_jsxs("span", { className: "me-matrix", "data-selected": selectedGrid === node.id || undefined, "data-structure": node.type, "data-matrix-id": node.id, "data-environment": node.type === 'matrix'
-                        ? node.environment
-                        : node.type === 'cases'
-                            ? 'Bmatrix'
-                            : 'matrix', children: [_jsx("span", { className: "me-matrix-delimiter me-matrix-left", "aria-hidden": "true" }), _jsx("span", { className: "me-matrix-grid", style: { gridTemplateColumns: `repeat(${node.columns}, max-content)` }, children: node.slots.map((cell, index) => (_jsx("span", { className: "me-matrix-cell", "data-cell-index": index, "data-cell-selected": (matrixSelection?.matrix.id === node.id &&
-                                    matrixSelection.indices.includes(index)) ||
-                                    undefined, children: renderRow(cell, labels.grid(name, node.type, index, node.columns), 'group') }, cell.id))) }), _jsx("span", { className: "me-matrix-delimiter me-matrix-right", "aria-hidden": "true" })] }, node.id));
-            if (node.type === 'limit' || node.type === 'limsup' || node.type === 'liminf')
-                return (_jsxs("span", { className: "me-structure me-limit-operator", "data-structure": node.type, "data-math-style": node.mathStyle, "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit-glyph", "aria-hidden": "true", children: node.type === 'limit' ? 'lim' : node.type === 'limsup' ? 'lim sup' : 'lim inf' }), _jsx("span", { className: "me-limit me-slot", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), _jsx("span", { className: "me-slot", children: renderRow(node.slots[1], labels.slot(name, node.type, 1)) })] }, node.id));
-            if (node.type !== 'text' &&
-                [
-                    'sum',
-                    'product',
-                    'integral',
-                    'doubleIntegral',
-                    'tripleIntegral',
-                    'contourIntegral',
-                ].includes(node.type))
-                return (_jsxs("span", { className: "me-structure me-large-operator", "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', "data-structure": node.type, "data-math-style": node.mathStyle, children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit", children: renderRow(node.slots[1], labels.slot(name, node.type, 1), 'upper') }), _jsx("span", { className: "me-operator-glyph", "aria-hidden": "true", children: {
-                                        sum: '∑',
-                                        product: '∏',
-                                        integral: '∫',
-                                        doubleIntegral: '∬',
-                                        tripleIntegral: '∭',
-                                        contourIntegral: '∮',
-                                    }[node.type] }), _jsx("span", { className: "me-limit", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), renderRow(node.slots[2], labels.slot(name, node.type, 2))] }, node.id));
-            if (node.type !== 'text')
-                return (_jsxs("span", { className: `me-structure me-${node.type}`, "data-structure": node.type, "data-math-style": node.mathStyle, children: [!!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[0], "aria-hidden": "true", children: fences(node)[0] })), ['root', 'indexedRoot'].includes(node.type) && (_jsx("span", { "aria-hidden": "true", className: "me-radical", children: "\u221A" })), node.slots.map((slot, index) => (_jsx("span", { className: "me-slot", children: renderRow(slot, labels.slot(name, node.type, index), node.type === 'fraction'
-                                ? index === 0
-                                    ? 'numerator'
-                                    : 'denominator'
-                                : node.type === 'superscript'
+    const layout = mathLayout(state.document);
+    const renderRow = (r, name, role = 'expression') => {
+        const rowSpacing = mathRunSpacing(r);
+        return (_jsx("span", { className: "me-row", "data-layout-style": layout.rows.get(r.id), "data-math-role": role, children: r.children.map((node) => {
+                if (isGrid(node))
+                    return (_jsxs("span", { className: "me-matrix", "data-selected": selectedGrid === node.id || undefined, "data-structure": node.type, "data-matrix-id": node.id, "data-environment": node.type === 'matrix'
+                            ? node.environment
+                            : node.type === 'cases'
+                                ? 'Bmatrix'
+                                : 'matrix', children: [_jsx("span", { className: "me-matrix-delimiter me-matrix-left", "aria-hidden": "true" }), _jsx("span", { className: "me-matrix-grid", style: { gridTemplateColumns: `repeat(${node.columns}, max-content)` }, children: node.slots.map((cell, index) => (_jsx("span", { className: "me-matrix-cell", "data-cell-index": index, "data-cell-selected": (matrixSelection?.matrix.id === node.id &&
+                                        matrixSelection.indices.includes(index)) ||
+                                        undefined, children: renderRow(cell, labels.grid(name, node.type, index, node.columns), 'group') }, cell.id))) }), _jsx("span", { className: "me-matrix-delimiter me-matrix-right", "aria-hidden": "true" })] }, node.id));
+                if (node.type === 'limit' || node.type === 'limsup' || node.type === 'liminf')
+                    return (_jsxs("span", { className: "me-structure me-limit-operator", "data-operator-style": layout.operators.get(node.id)?.style, "data-layout-limits": layout.operators.get(node.id)?.placement, "data-structure": node.type, "data-math-style": node.mathStyle, "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit-glyph", "aria-hidden": "true", children: node.type === 'limit' ? 'lim' : node.type === 'limsup' ? 'lim sup' : 'lim inf' }), _jsx("span", { className: "me-limit me-slot", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), _jsx("span", { className: "me-slot", children: renderRow(node.slots[1], labels.slot(name, node.type, 1)) })] }, node.id));
+                if (node.type !== 'text' &&
+                    [
+                        'sum',
+                        'product',
+                        'integral',
+                        'doubleIntegral',
+                        'tripleIntegral',
+                        'contourIntegral',
+                    ].includes(node.type))
+                    return (_jsxs("span", { className: "me-structure me-large-operator", "data-operator-style": layout.operators.get(node.id)?.style, "data-layout-limits": layout.operators.get(node.id)?.placement, "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', "data-structure": node.type, "data-math-style": node.mathStyle, children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit", children: renderRow(node.slots[1], labels.slot(name, node.type, 1), 'upper') }), _jsx("span", { className: "me-operator-glyph", "aria-hidden": "true", children: {
+                                            sum: '∑',
+                                            product: '∏',
+                                            integral: '∫',
+                                            doubleIntegral: '∬',
+                                            tripleIntegral: '∭',
+                                            contourIntegral: '∮',
+                                        }[node.type] }), _jsx("span", { className: "me-limit", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), renderRow(node.slots[2], labels.slot(name, node.type, 2))] }, node.id));
+                if (node.type !== 'text')
+                    return (_jsxs("span", { className: `me-structure me-${node.type}`, "data-structure": node.type, "data-math-style": node.mathStyle, "data-math-spacing": rowSpacing.has(node.id) ? 'true' : undefined, style: rowSpacing.has(node.id)
+                            ? {
+                                '--me-space-before': rowSpacing.get(node.id)?.before ?? 0,
+                                '--me-space-after': rowSpacing.get(node.id)?.after ?? 0,
+                                '--me-tight-before': rowSpacing.get(node.id)?.tightBefore ?? 0,
+                                '--me-tight-after': rowSpacing.get(node.id)?.tightAfter ?? 0,
+                            }
+                            : undefined, children: [!!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[0], "aria-hidden": "true", children: fences(node)[0] })), ['root', 'indexedRoot'].includes(node.type) && (_jsx("span", { "aria-hidden": "true", className: "me-radical", children: "\u221A" })), node.slots.map((slot, index) => (_jsx("span", { className: "me-slot", children: renderRow(slot, labels.slot(name, node.type, index), node.type === 'fraction'
                                     ? index === 0
-                                        ? 'base'
-                                        : 'exponent'
-                                    : node.type === 'subscript'
+                                        ? 'numerator'
+                                        : 'denominator'
+                                    : node.type === 'superscript'
                                         ? index === 0
                                             ? 'base'
-                                            : 'index'
-                                        : node.type === 'root'
-                                            ? 'radicand'
-                                            : 'group') }, slot.id))), !!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[1], "aria-hidden": "true", children: fences(node)[1] }))] }, node.id));
-            const parts = tokensFor(node);
-            return parts.map((token, tokenIndex) => {
-                const key = `${node.id}:${tokenIndex}`;
-                const selected = selectedText(node.id, token.start, token.end);
-                const isActive = editing &&
-                    !range &&
-                    !matrixRange &&
-                    state.caret.id === node.id &&
-                    tokenIndexAt(parts, state.caret.start, state.caret.affinity) === tokenIndex;
-                const caretFrom = (input) => ({
-                    id: node.id,
-                    start: token.start + (input.selectionStart ?? 0),
-                    end: token.start + (input.selectionEnd ?? 0),
-                    affinity: input.selectionStart === 0 ? 'forward' : 'backward',
-                });
-                const replaceToken = (input) => {
-                    const current = historyRef.current.present;
-                    const run = textNodes(current.document).find((n) => n.id === node.id);
-                    return setText({ ...current, caret: { ...current.caret, id: node.id } }, run.text.slice(0, token.start) + input.value + run.text.slice(token.end), token.start + (input.selectionStart ?? 0), token.start + (input.selectionEnd ?? 0));
-                };
-                return (_jsxs("span", { className: `me-run${!token.text ? ' me-empty' : ''}${!node.text && r.children.length > 1 ? ' me-empty-boundary' : ''}`, "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "data-token-end": token.end, "data-field-name": name, "data-value": token.text, "data-range-selected": !!selected || undefined, children: [_jsx("span", { className: "me-measure", "aria-hidden": "true", children: token.text || (r.children.length === 1 ? '□' : '') }), isActive ? (_jsx("input", { ref: (element) => {
-                                if (element)
-                                    inputs.current.set(key, element);
-                                else
-                                    inputs.current.delete(key);
-                            }, "aria-label": name, "aria-description": t({
-                                variable: 'token.variable',
-                                constant: 'token.constant',
-                                symbol: 'token.symbol',
-                                space: 'token.space',
-                                empty: 'token.empty',
-                                draft: 'token.composing',
-                            }[token.kind]), "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "aria-autocomplete": "list", "aria-controls": isActive && candidates.length ? suggestionId : undefined, "aria-expanded": isActive && candidates.length > 0, role: "combobox", "aria-activedescendant": isActive && !composing && candidates.length
-                                ? `${suggestionId}-${selectedIndex}`
-                                : undefined, className: "me-input", value: token.text, placeholder: r.children.length === 1 ? '□' : '', autoComplete: "off", spellCheck: false, onPointerDown: () => setSelectedGrid(undefined), onFocus: (event) => {
-                                setFocused(true);
-                                select(caretFrom(event.currentTarget));
-                            }, onSelect: (event) => select(caretFrom(event.currentTarget)), onCompositionStart: () => {
-                                compositionStart.current = historyRef.current;
-                                compositionToken.current = {
-                                    id: node.id,
-                                    index: tokenIndex,
-                                    length: node.text.length,
-                                    parts,
-                                };
-                                setComposing(true);
-                            }, onCompositionEnd: (event) => {
-                                const next = replaceToken(event.currentTarget);
-                                const base = compositionStart.current;
-                                compositionStart.current = null;
-                                compositionToken.current = null;
-                                setComposing(false);
-                                publish(commit(base ?? historyRef.current, next), true);
-                            }, onChange: (event) => {
-                                setSelectedGrid(undefined);
-                                const current = historyRef.current, next = replaceToken(event.currentTarget);
-                                publish(compositionStart.current
-                                    ? { ...current, present: next }
-                                    : commit(current, next), !compositionStart.current, !compositionStart.current);
-                                setCandidateIndex(0);
-                                setDismissed('');
-                            }, onKeyDown: (event) => {
-                                event.stopPropagation();
-                                if (event.nativeEvent.isComposing ||
-                                    compositionStart.current ||
-                                    event.keyCode === 229)
-                                    return;
-                                if (matrixSelectionKey(event) || keyboardSelect(event))
-                                    return;
-                                const current = historyRef.current.present;
-                                if (selectedGrid) {
+                                            : 'exponent'
+                                        : node.type === 'subscript'
+                                            ? index === 0
+                                                ? 'base'
+                                                : 'index'
+                                            : node.type === 'root'
+                                                ? 'radicand'
+                                                : 'group') }, slot.id))), !!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[1], "aria-hidden": "true", children: fences(node)[1] }))] }, node.id));
+                const parts = tokensFor(node);
+                const spacing = isLiteralText(state.document, node.id) ? undefined : rowSpacing;
+                return parts.map((token, tokenIndex) => {
+                    const key = `${node.id}:${tokenIndex}`;
+                    const selected = selectedText(node.id, token.start, token.end);
+                    const isActive = editing &&
+                        !range &&
+                        !matrixRange &&
+                        state.caret.id === node.id &&
+                        tokenIndexAt(parts, state.caret.start, state.caret.affinity) === tokenIndex;
+                    const caretFrom = (input) => ({
+                        id: node.id,
+                        start: token.start + (input.selectionStart ?? 0),
+                        end: token.start + (input.selectionEnd ?? 0),
+                        affinity: input.selectionStart === 0 ? 'forward' : 'backward',
+                    });
+                    const replaceToken = (input) => {
+                        const current = historyRef.current.present;
+                        const run = textNodes(current.document).find((n) => n.id === node.id);
+                        return setText({ ...current, caret: { ...current.caret, id: node.id } }, run.text.slice(0, token.start) + input.value + run.text.slice(token.end), token.start + (input.selectionStart ?? 0), token.start + (input.selectionEnd ?? 0));
+                    };
+                    return (_jsxs("span", { className: `me-run${!token.text ? ' me-empty' : ''}${!node.text && r.children.length > 1 ? ' me-empty-boundary' : ''}`, "data-token-kind": token.kind, "data-math-spacing": spacing ? 'true' : undefined, style: spacing
+                            ? {
+                                '--me-space-before': spacing.get(`${node.id}:${token.start}`)?.before ?? 0,
+                                '--me-space-after': spacing.get(`${node.id}:${token.start}`)?.after ?? 0,
+                                '--me-tight-before': spacing.get(`${node.id}:${token.start}`)?.tightBefore ?? 0,
+                                '--me-tight-after': spacing.get(`${node.id}:${token.start}`)?.tightAfter ?? 0,
+                            }
+                            : undefined, "data-run-id": node.id, "data-token-start": token.start, "data-token-end": token.end, "data-field-name": name, "data-value": token.text, "data-range-selected": !!selected || undefined, children: [_jsx("span", { className: "me-measure", "aria-hidden": "true", children: token.text || (r.children.length === 1 ? '□' : '') }), isActive ? (_jsx("input", { ref: (element) => {
+                                    if (element)
+                                        inputs.current.set(key, element);
+                                    else
+                                        inputs.current.delete(key);
+                                }, "aria-label": name, "aria-description": t({
+                                    variable: 'token.variable',
+                                    constant: 'token.constant',
+                                    symbol: 'token.symbol',
+                                    space: 'token.space',
+                                    empty: 'token.empty',
+                                    draft: 'token.composing',
+                                }[token.kind]), "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "aria-autocomplete": "list", "aria-controls": isActive && candidates.length ? suggestionId : undefined, "aria-expanded": isActive && candidates.length > 0, role: "combobox", "aria-activedescendant": isActive && !composing && candidates.length
+                                    ? `${suggestionId}-${selectedIndex}`
+                                    : undefined, className: "me-input", value: token.text, placeholder: r.children.length === 1 ? '□' : '', autoComplete: "off", spellCheck: false, onPointerDown: () => setSelectedGrid(undefined), onFocus: (event) => {
+                                    setFocused(true);
+                                    select(caretFrom(event.currentTarget));
+                                }, onSelect: (event) => select(caretFrom(event.currentTarget)), onCompositionStart: () => {
+                                    compositionStart.current = historyRef.current;
+                                    compositionToken.current = {
+                                        id: node.id,
+                                        index: tokenIndex,
+                                        length: node.text.length,
+                                        parts,
+                                    };
+                                    setComposing(true);
+                                }, onCompositionEnd: (event) => {
+                                    const next = replaceToken(event.currentTarget);
+                                    const base = compositionStart.current;
+                                    compositionStart.current = null;
+                                    compositionToken.current = null;
+                                    setComposing(false);
+                                    publish(commit(base ?? historyRef.current, next), true);
+                                }, onChange: (event) => {
+                                    setSelectedGrid(undefined);
+                                    const current = historyRef.current, next = replaceToken(event.currentTarget);
+                                    publish(compositionStart.current
+                                        ? { ...current, present: next }
+                                        : commit(current, next), !compositionStart.current, !compositionStart.current);
+                                    setCandidateIndex(0);
+                                    setDismissed('');
+                                }, onKeyDown: (event) => {
+                                    event.stopPropagation();
+                                    if (event.nativeEvent.isComposing ||
+                                        compositionStart.current ||
+                                        event.keyCode === 229)
+                                        return;
+                                    // A held arrow can reach this handler before React emits onSelect.
+                                    // Boundary navigation must use the input's current native selection.
+                                    select(caretFrom(event.currentTarget));
+                                    if (matrixSelectionKey(event) ||
+                                        tokenNavigation(event) ||
+                                        keyboardSelect(event) ||
+                                        directSelectionKey(event))
+                                        return;
+                                    const current = historyRef.current.present;
+                                    if (!event.shiftKey &&
+                                        !event.altKey &&
+                                        !event.ctrlKey &&
+                                        !event.metaKey &&
+                                        ['Backspace', 'Delete'].includes(event.key)) {
+                                        const unwrapped = unwrapEmptySlot(current);
+                                        if (unwrapped !== current) {
+                                            event.preventDefault();
+                                            apply(unwrapped);
+                                            return;
+                                        }
+                                    }
+                                    if (selectedGrid) {
+                                        if (!event.metaKey &&
+                                            !event.ctrlKey &&
+                                            !event.altKey &&
+                                            !event.shiftKey &&
+                                            ['Backspace', 'Delete'].includes(event.key)) {
+                                            event.preventDefault();
+                                            if (!event.repeat)
+                                                apply(removeGrid(current, selectedGrid));
+                                            return;
+                                        }
+                                        setSelectedGrid(undefined);
+                                        if (event.key === 'Escape') {
+                                            event.preventDefault();
+                                            return;
+                                        }
+                                    }
                                     if (!event.metaKey &&
                                         !event.ctrlKey &&
                                         !event.altKey &&
                                         !event.shiftKey &&
                                         ['Backspace', 'Delete'].includes(event.key)) {
+                                        const grid = gridDeletionTarget(current, event.key === 'Backspace' ? -1 : 1);
+                                        if (grid) {
+                                            event.preventDefault();
+                                            const empty = grid.slots.every((slot) => slot.children.every((child) => child.type === 'text' && !child.text));
+                                            if (empty)
+                                                apply(removeGrid(current, grid.id));
+                                            else
+                                                setSelectedGrid(grid.id);
+                                            return;
+                                        }
+                                    }
+                                    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
                                         event.preventDefault();
-                                        if (!event.repeat)
-                                            apply(removeGrid(current, selectedGrid));
+                                        publish((event.shiftKey ? redo : undo)(historyRef.current), true);
                                         return;
                                     }
-                                    setSelectedGrid(undefined);
-                                    if (event.key === 'Escape') {
+                                    if (event.altKey &&
+                                        event.shiftKey &&
+                                        !event.ctrlKey &&
+                                        !event.metaKey &&
+                                        activeGrid(current) &&
+                                        ['ArrowUp', 'Backspace'].includes(event.key)) {
                                         event.preventDefault();
+                                        apply(resizeMatrix(current, event.key === 'ArrowUp' ? 'row' : 'column', 'delete'));
                                         return;
                                     }
-                                }
-                                if (!event.metaKey &&
-                                    !event.ctrlKey &&
-                                    !event.altKey &&
-                                    !event.shiftKey &&
-                                    ['Backspace', 'Delete'].includes(event.key)) {
-                                    const grid = gridDeletionTarget(current, event.key === 'Backspace' ? -1 : 1);
-                                    if (grid) {
+                                    if (event.altKey &&
+                                        !event.shiftKey &&
+                                        !event.ctrlKey &&
+                                        !event.metaKey &&
+                                        event.key === 'ArrowDown') {
                                         event.preventDefault();
-                                        const empty = grid.slots.every((slot) => slot.children.every((child) => child.type === 'text' && !child.text));
-                                        if (empty)
-                                            apply(removeGrid(current, grid.id));
+                                        setDismissed('');
+                                        setCandidateIndex(Math.max(0, matches.candidates.findIndex((item) => item.transformFenceId || item.transformRootId)));
+                                        operandMenuKey.current = queryKey;
+                                        return;
+                                    }
+                                    if (event.ctrlKey || event.metaKey || event.altKey)
+                                        return;
+                                    if (activeGrid(current) &&
+                                        event.shiftKey &&
+                                        ['Enter', ' '].includes(event.key)) {
+                                        event.preventDefault();
+                                        apply(resizeMatrix(current, event.key === 'Enter' ? 'row' : 'column', 'insert'));
+                                        return;
+                                    }
+                                    if (selectedRange &&
+                                        !event.metaKey &&
+                                        !event.ctrlKey &&
+                                        !event.altKey &&
+                                        ['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
+                                        event.preventDefault();
+                                        if (event.key === 'Enter') {
+                                            if (canWrap)
+                                                insertTool(selectionChoices[selectionIndex % selectionChoices.length].kind);
+                                        }
                                         else
-                                            setSelectedGrid(grid.id);
+                                            setSelectionIndex((selectionIndex +
+                                                (event.key === 'ArrowDown' ? 1 : selectionChoices.length - 1)) %
+                                                selectionChoices.length);
+                                        return;
+                                    }
+                                    if (candidates.length && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                                        event.preventDefault();
+                                        const initialOperandChoice = (candidates[0]?.wrapOperand ||
+                                            candidates[0]?.transformRootId ||
+                                            candidates[0]?.transformFenceId) &&
+                                            operandMenuKey.current !== queryKey;
+                                        operandMenuKey.current = queryKey;
+                                        setCandidateIndex(initialOperandChoice
+                                            ? event.key === 'ArrowDown'
+                                                ? 0
+                                                : candidates.length - 1
+                                            : (selectedIndex +
+                                                (event.key === 'ArrowDown' ? 1 : candidates.length - 1)) %
+                                                candidates.length);
                                         return;
                                     }
-                                }
-                                if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
-                                    event.preventDefault();
-                                    publish((event.shiftKey ? redo : undo)(historyRef.current), true);
-                                    return;
-                                }
-                                if (event.altKey &&
-                                    event.shiftKey &&
-                                    !event.ctrlKey &&
-                                    !event.metaKey &&
-                                    activeGrid(current) &&
-                                    ['ArrowUp', 'ArrowLeft'].includes(event.key)) {
-                                    event.preventDefault();
-                                    apply(resizeMatrix(current, event.key === 'ArrowUp' ? 'row' : 'column', 'delete'));
-                                    return;
-                                }
-                                if (event.ctrlKey || event.metaKey || event.altKey)
-                                    return;
-                                if (activeGrid(current) &&
-                                    event.shiftKey &&
-                                    ['Enter', ' '].includes(event.key)) {
-                                    event.preventDefault();
-                                    apply(resizeMatrix(current, event.key === 'Enter' ? 'row' : 'column', 'insert'));
-                                    return;
-                                }
-                                if (selectedRange &&
-                                    !event.metaKey &&
-                                    !event.ctrlKey &&
-                                    !event.altKey &&
-                                    ['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
-                                    event.preventDefault();
                                     if (event.key === 'Enter') {
-                                        if (canWrap)
-                                            insertTool(selectionChoices[selectionIndex % selectionChoices.length].kind);
+                                        event.preventDefault();
+                                        const action = mathEnterAction({
+                                            mode: multiline ? 'block' : 'inline',
+                                            behavior: enterBehavior,
+                                            shiftKey: event.shiftKey,
+                                            gridKind: activeGrid(current)?.matrix.type,
+                                            hasSuggestion: candidates.length > 0 &&
+                                                ((!candidates[0].wrapOperand &&
+                                                    !candidates[0].transformRootId &&
+                                                    !candidates[0].transformFenceId) ||
+                                                    operandMenuKey.current === queryKey),
+                                        });
+                                        if (action === 'suggestion')
+                                            choose(selectedIndex);
+                                        else if (action === 'grid-row')
+                                            apply(resizeMatrix(current, 'row', 'insert'));
+                                        else if (action === 'newline')
+                                            apply(splitLine(current));
+                                        else if (action === 'commit')
+                                            onCommit?.();
+                                        return;
                                     }
-                                    else
-                                        setSelectionIndex((selectionIndex +
-                                            (event.key === 'ArrowDown' ? 1 : selectionChoices.length - 1)) %
-                                            selectionChoices.length);
-                                    return;
-                                }
-                                if (candidates.length && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
-                                    event.preventDefault();
-                                    const initialOperandChoice = candidates[0]?.wrapOperand && operandMenuKey.current !== queryKey;
-                                    operandMenuKey.current = queryKey;
-                                    setCandidateIndex(initialOperandChoice
-                                        ? event.key === 'ArrowDown'
-                                            ? 0
-                                            : candidates.length - 1
-                                        : (selectedIndex +
-                                            (event.key === 'ArrowDown' ? 1 : candidates.length - 1)) %
-                                            candidates.length);
-                                    return;
-                                }
-                                if (event.key === 'Enter' &&
-                                    candidates.length &&
-                                    (!candidates[0].wrapOperand || operandMenuKey.current === queryKey)) {
-                                    event.preventDefault();
-                                    choose(selectedIndex);
-                                    return;
-                                }
-                                if (event.key === 'Enter') {
-                                    event.preventDefault();
-                                    if (enterBehavior === 'commit' && !event.shiftKey) {
-                                        onCommit?.();
+                                    if (event.key === 'Escape') {
+                                        event.preventDefault();
+                                        if (candidates.length)
+                                            setDismissed(queryKey);
+                                        else if (onCancel)
+                                            onCancel();
+                                        else {
+                                            setEditing(false);
+                                            surface.current?.focus();
+                                        }
                                         return;
                                     }
-                                    if (activeGrid(current)) {
-                                        if (activeGrid(current).matrix.type !== 'matrix')
-                                            apply(resizeMatrix(current, 'row', 'insert'));
+                                    if (!event.shiftKey &&
+                                        current.caret.start === current.caret.end &&
+                                        ['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                                        const next = verticalNavigation.current.move(current, event.key === 'ArrowUp' ? -1 : 1, surface.current ? renderedCaretGeometry(surface.current) : undefined);
+                                        if (next !== current) {
+                                            event.preventDefault();
+                                            publish({ ...historyRef.current, present: next }, true);
+                                            return;
+                                        }
                                     }
-                                    else if (multiline)
-                                        apply(splitLine(current));
-                                    return;
-                                }
-                                if (event.key === 'Escape') {
-                                    event.preventDefault();
-                                    if (candidates.length)
-                                        setDismissed(queryKey);
-                                    else if (onCancel)
-                                        onCancel();
-                                    else {
-                                        setEditing(false);
-                                        surface.current?.focus();
+                                    if (event.key === 'Tab') {
+                                        if (navigate(event.shiftKey ? -1 : 1))
+                                            event.preventDefault();
+                                        return;
                                     }
-                                    return;
-                                }
-                                if (!event.shiftKey &&
-                                    current.caret.start === current.caret.end &&
-                                    ['ArrowUp', 'ArrowDown'].includes(event.key)) {
-                                    const next = moveVertical(current, event.key === 'ArrowUp' ? -1 : 1, surface.current ? renderedCaretGeometry(surface.current) : undefined);
-                                    if (next !== current) {
-                                        event.preventDefault();
-                                        publish({ ...historyRef.current, present: next }, true);
+                                    if (event.shiftKey || current.caret.start !== current.caret.end)
                                         return;
+                                    if (event.key === 'ArrowLeft' && current.caret.start === token.start) {
+                                        if (navigate(-1))
+                                            event.preventDefault();
                                     }
-                                }
-                                if (event.key === 'Tab') {
-                                    if (navigate(event.shiftKey ? -1 : 1))
-                                        event.preventDefault();
-                                    return;
-                                }
-                                if (event.shiftKey || current.caret.start !== current.caret.end)
-                                    return;
-                                if (event.key === 'ArrowLeft' && current.caret.start === token.start) {
-                                    if (navigate(-1))
-                                        event.preventDefault();
-                                }
-                                if (event.key === 'ArrowRight' && current.caret.end === token.end) {
-                                    if (navigate(1))
+                                    if (event.key === 'ArrowRight' && current.caret.end === token.end) {
+                                        if (navigate(1))
+                                            event.preventDefault();
+                                    }
+                                    if (event.key === 'Backspace' &&
+                                        current.caret.start === token.start &&
+                                        token.start > 0) {
                                         event.preventDefault();
-                                }
-                                if (event.key === 'Backspace' &&
-                                    current.caret.start === token.start &&
-                                    token.start > 0) {
-                                    event.preventDefault();
-                                    const count = Array.from(node.text.slice(0, token.start)).at(-1).length;
-                                    apply(setText(current, node.text.slice(0, token.start - count) + node.text.slice(token.start), token.start - count));
-                                    return;
-                                }
-                                if (event.key === 'Delete' &&
-                                    current.caret.end === token.end &&
-                                    token.end < node.text.length) {
-                                    event.preventDefault();
-                                    const count = Array.from(node.text.slice(token.end))[0].length;
-                                    apply(setText(current, node.text.slice(0, token.end) + node.text.slice(token.end + count), token.end));
-                                    return;
-                                }
-                                if (event.key === 'Backspace' && current.caret.start === 0) {
-                                    const joined = joinPreviousLine(current);
-                                    const next = joined !== current ? joined : unwrapPrevious(current);
-                                    if (next !== current) {
+                                        const count = Array.from(node.text.slice(0, token.start)).at(-1).length;
+                                        apply(setText(current, node.text.slice(0, token.start - count) + node.text.slice(token.start), token.start - count));
+                                        return;
+                                    }
+                                    if (event.key === 'Delete' &&
+                                        current.caret.end === token.end &&
+                                        token.end < node.text.length) {
                                         event.preventDefault();
-                                        apply(next);
+                                        const count = Array.from(node.text.slice(token.end))[0].length;
+                                        apply(setText(current, node.text.slice(0, token.end) + node.text.slice(token.end + count), token.end));
+                                        return;
                                     }
-                                }
-                            } })) : (_jsx("span", { className: "me-preview-token", "data-token-kind": token.kind, "aria-label": name, role: "button", tabIndex: -1, children: selected && token.text ? (_jsxs("span", { children: [token.text.slice(0, selected[0]), _jsx("mark", { className: "me-range-highlight", children: token.text.slice(selected[0], selected[1]) }), token.text.slice(selected[1])] })) : (token.text || (r.children.length === 1 ? '□' : '\u200b')) }))] }, key));
-            });
-        }) }, r.id));
-    return (_jsxs("div", { className: "me-editor", "data-math-editor-owner": suggestionId, onKeyDownCapture: (event) => {
+                                    if (event.key === 'Delete' && current.caret.end === node.text.length) {
+                                        const joined = joinNextLine(current);
+                                        const next = joined !== current ? joined : unwrapNext(current);
+                                        if (next !== current) {
+                                            event.preventDefault();
+                                            apply(next);
+                                        }
+                                    }
+                                    if (event.key === 'Backspace' && current.caret.start === 0) {
+                                        const joined = joinPreviousLine(current);
+                                        const next = joined !== current ? joined : unwrapPrevious(current);
+                                        if (next !== current) {
+                                            event.preventDefault();
+                                            apply(next);
+                                        }
+                                    }
+                                } })) : (_jsx("span", { className: "me-preview-token", "data-token-kind": token.kind, "aria-label": name, role: "button", tabIndex: -1, children: selected && token.text ? (_jsxs("span", { children: [token.text.slice(0, selected[0]), _jsx("mark", { className: "me-range-highlight", children: token.text.slice(selected[0], selected[1]) }), token.text.slice(selected[1])] })) : (token.text || (r.children.length === 1 ? '□' : '\u200b')) }))] }, key));
+                });
+            }) }, r.id));
+    };
+    return (_jsxs("div", { className: "me-editor", "data-math-editor-owner": suggestionId, onPointerDownCapture: () => verticalNavigation.current.reset(), onKeyDownCapture: (event) => {
+            if (event.target.closest('.me-help'))
+                return;
+            if (!['ArrowUp', 'ArrowDown', 'Escape'].includes(event.key) ||
+                event.shiftKey ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey)
+                verticalNavigation.current.reset();
+            if (event.key === 'F6' &&
+                structureContext &&
+                !composing &&
+                !event.nativeEvent.isComposing) {
+                const footer = contextFooter.current;
+                const button = footer?.querySelector('button:not(:disabled)');
+                if (button) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (footer?.contains(event.target))
+                        surface.current
+                            ?.querySelector('input.me-input')
+                            ?.focus({ preventScroll: true });
+                    else if (footer)
+                        focusContextAction(footer, 'F6');
+                    return;
+                }
+            }
             if (!event.nativeEvent.isComposing &&
                 !composing &&
                 event.altKey &&
@@ -1104,7 +1275,7 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
                                 : undefined, "aria-keyshortcuts": action === 'delete'
                                 ? axis === 'row'
                                     ? 'Alt+Shift+ArrowUp'
-                                    : 'Alt+Shift+ArrowLeft'
+                                    : 'Alt+Shift+Backspace'
                                 : undefined, disabled: composing ||
                                 !!matrixRange ||
                                 !!range ||
@@ -1121,7 +1292,46 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
                 candidates.length > 0 &&
                 createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, lang: locale, dir: mathLocaleDirection(locale), ref: suggestionMenu, onMouseDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "me-suggestion-heading", children: [_jsx("span", { className: "me-suggestion-query", children: t('suggestion.create', { query }) }), _jsx("span", { children: t(composing ? 'suggestion.composing' : 'suggestion.keyboardHint') })] }), _jsx("div", { className: "me-suggestions", id: suggestionId, role: "listbox", "aria-label": t('suggestion.label'), children: candidates.map((c, index) => (_jsxs("button", { type: "button", id: `${suggestionId}-${index}`, role: "option", disabled: composing, "aria-selected": !composing && index === selectedIndex, onClick: () => choose(index), children: [_jsx("span", { className: "me-candidate-glyph", children: c.glyph }), _jsxs("span", { className: "me-candidate-copy", children: [_jsx("strong", { children: c.label }), _jsx("small", { children: c.detail })] })] }, c.id))) }), _jsx("div", { className: "me-suggestion-footer", children: t(composing ? 'suggestion.imeHint' : 'suggestion.keepSource') })] }), surface.current?.closest('dialog, [role="dialog"]') ?? document.body), _jsx("div", { className: "me-surface", dir: "ltr", ref: surface, tabIndex: 0, "aria-label": t('selection.surface'), "data-mode": editing ? 'edit' : 'preview', onPointerDown: beginPointer, onPointerMove: movePointer, onPointerUp: endPointer, onPointerCancel: () => {
                     drag.current = undefined;
-                }, onKeyDown: selectionKey, children: _jsx("div", { className: "me-document-lines", children: documentRows(state.document).map((line, index) => (_jsxs("div", { className: "me-document-line", children: [showLineNumbers && documentRows(state.document).length > 1 && (_jsx("span", { className: "me-line-number", "aria-hidden": "true", children: index + 1 })), renderRow(line, labels.line(index))] }, line.id))) }) }), matrixSelection && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('matrix.rangeHint', { rows: matrixSelection.rows, columns: matrixSelection.columns }) })), showPopovers &&
+                }, onKeyDown: selectionKey, children: _jsx("div", { className: "me-document-lines", children: documentRows(state.document).map((line, index) => (_jsxs("div", { className: "me-document-line", children: [showLineNumbers && documentRows(state.document).length > 1 && (_jsx("span", { className: "me-line-number", "aria-hidden": "true", children: index + 1 })), renderRow(line, labels.line(index))] }, line.id))) }) }), structureContext && (_jsxs("div", { className: "me-context-footer", ref: contextFooter, role: "group", "aria-label": t('context.label'), onMouseDown: (event) => event.preventDefault(), onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (composing || event.nativeEvent.isComposing)
+                        return;
+                    if (focusContextAction(event.currentTarget, event.key)) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        surface.current
+                            ?.querySelector('input.me-input')
+                            ?.focus({ preventScroll: true });
+                    }
+                }, children: [fenceContext && (_jsxs(_Fragment, { children: [_jsx("span", { className: "me-context-label", children: t('context.current', {
+                                    kind: t('presentation.fence') + ' ' + fences(fenceContext).join(' … '),
+                                }) }), _jsx("span", { className: "me-context-actions", children: Object.entries(fencePairs)
+                                    .filter(([kind]) => !excludedStructures.includes(kind))
+                                    .map(([kind, pair]) => {
+                                    const label = t(mathStructures.find((item) => item.kind === kind).label);
+                                    return (_jsx("button", { type: "button", className: "me-context-button", "aria-label": label, title: label, "aria-pressed": fenceContext.type === kind, disabled: composing, onClick: () => {
+                                            if (!composing) {
+                                                apply(changeContextFence(historyRef.current.present, fenceContext.id, kind));
+                                                surface.current
+                                                    ?.querySelector('input.me-input')
+                                                    ?.focus({ preventScroll: true });
+                                            }
+                                        }, children: pair.join(' □ ') }, kind));
+                                }) }), _jsx("span", { className: "me-context-hint", children: t('context.fenceKeyboardHint') })] })), rootContext && (_jsxs(_Fragment, { children: [_jsx("span", { className: "me-context-label", children: t('context.current', { kind: t(`context.${rootContext.kind}`) }) }), _jsxs("span", { className: "me-context-actions", children: [rootContext.indexCaret && (_jsx("button", { type: "button", className: "me-context-button", disabled: composing, onClick: () => {
+                                            const caret = rootContext.indexCaret;
+                                            publish({
+                                                ...historyRef.current,
+                                                present: { ...historyRef.current.present, caret },
+                                            }, true);
+                                        }, children: t('context.editIndex') })), _jsx("button", { type: "button", className: "me-context-button", disabled: composing ||
+                                            !rootContext.canTransform ||
+                                            excludedStructures.includes(rootContext.target), onClick: () => {
+                                            if (!composing)
+                                                apply(transformRoot(historyRef.current.present, rootContext.id, rootContext.target));
+                                        }, children: t('suggestion.transform', { kind: t(`context.${rootContext.target}`) }) })] }), _jsx("span", { className: "me-context-hint", children: t(rootContext.canTransform ? 'context.keyboardHint' : 'context.squareIndexRequired') })] }))] })), matrixSelection && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('matrix.rangeHint', { rows: matrixSelection.rows, columns: matrixSelection.columns }) })), showPopovers &&
                 selectionFragment &&
                 createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, ref: selectionMenu, role: "presentation", "aria-label": t('selection.toolbar'), onKeyDown: selectionKey, children: [_jsx("div", { className: "me-suggestion-heading", children: t(canWrap ? 'selection.highlighted' : 'selection.singleRowRequired') }), _jsx("div", { className: "me-suggestions", role: "listbox", "aria-label": t('selection.toolbar'), children: selectionChoices.map((s, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === selectionIndex, disabled: !canWrap, onMouseDown: (event) => event.preventDefault(), onClick: () => insertTool(s.kind), "aria-label": t('selection.wrap', { kind: t(s.label) }), children: [_jsx("span", { className: "me-candidate-glyph", children: s.glyph }), _jsxs("span", { className: "me-candidate-copy", children: [_jsx("strong", { children: t(s.label) }), _jsx("small", { children: t(s.detail) })] })] }, s.kind))) })] }), surface.current?.closest('dialog, [role="dialog"]') ?? document.body)] }));
 }