@barocss/math-editor 0.2.1 → 0.5.0

package/dist/math-editor.js

@@ -1,32 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { positionMathMenu } from './dom/menu-position.js';
-import { fences } from './fences.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { mathLayout } from './math-layout.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';
+import { QuickPanel } from './quick-panel.js';
+import { toolbarTemplates } from './dom/toolbar-catalog.js';
+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, 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, wrapRange, wrappingKinds, copyRange, deleteRange, fragmentLatex, MATH_CLIPBOARD_TYPE, parseFragment, pasteFragment, resolveRange, } from './range.js';
+import { extendKeyboardRange, 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, moveLineVertical } from './lines.js';
-import { insertIdentityMatrix, insertMatrix, activeGrid, MATRIX_MAX_SIZE, matrixEnvironments, moveMatrixVertical, resizeMatrix, setMatrixEnvironment, } from './matrix.js';
+import { splitLine, joinPreviousLine } from './lines.js';
+import { moveVertical } 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, unwrapEmptySlot, } from './model.js';
 const structures = mathStructures;
 /** Native text fields own IME and local text selection; the tree owns structural editing. */
-export function MathEditor({ 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;
+    const [quickOpen, setQuickOpen] = useState(false);
+    const [latexOpen, setLatexOpen] = useState(false);
     const [symbolsOpen, setSymbolsOpen] = useState(false);
     const [editing, setEditing] = useState(autoFocus);
     const [range, setRange] = useState();
+    const [matrixRange, setMatrixRange] = useState();
     const [clipboardMessage, setClipboardMessage] = useState('');
     const surface = useRef(null);
     const drag = useRef(undefined);
@@ -60,10 +83,16 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
     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('');
@@ -73,6 +102,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         !isLiteralText(state.document, state.caret.id) &&
         (composing || state.caret.start === state.caret.end) &&
         !range &&
+        !matrixRange &&
         focused &&
         (composing || state.caret.start === state.caret.end) &&
         dismissed !== queryKey
@@ -85,6 +115,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         if (changed) {
             setSelectedGrid(undefined);
             setRange(undefined);
+            setMatrixRange(undefined);
         }
         if (focus)
             setEditing(true);
@@ -98,7 +129,30 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         setSelectedGrid(undefined);
         publish(commit(historyRef.current, next), true);
     };
+    const pasteLatex = (source) => {
+        if (composing || matrixRange)
+            return {
+                ok: false,
+                source,
+                diagnostics: [
+                    {
+                        code: 'unsupported-structure',
+                        message: 'Finish composition or select one insertion point.',
+                        start: 0,
+                        end: source.length,
+                    },
+                ],
+            };
+        const result = insertLatex(historyRef.current.present, source, range, {
+            multiline,
+            excludedStructures,
+        });
+        if (result.ok)
+            apply(result.state);
+        return result;
+    };
     useImperativeHandle(apiRef, () => ({
+        pasteLatex,
         importLatex(source) {
             const result = parseLatex(source, { multiline, excludedStructures });
             if (!result.ok)
@@ -167,12 +221,16 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             if (suggestionMenu.current)
                 positionMathMenu(suggestionMenu.current, new DOMRect(x, rect.top, 0, rect.height), 340);
         };
+        const stopTheme = surface.current && suggestionMenu.current
+            ? 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 () => {
-            window.removeEventListener('resize', position);
-            window.removeEventListener('scroll', position, true);
+            stopTheme?.();
+            stopPosition?.();
         };
     }, [queryKey, candidates.length, active.id, showPopovers]);
     useLayoutEffect(() => {
@@ -195,6 +253,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         if (!candidate)
             return;
         apply(acceptSuggestion(historyRef.current.present, query, candidate));
+        preferences.record(candidate.id);
         setCandidateIndex(0);
         setDismissed(`${active.id}:${state.caret.start}:${query}`);
     };
@@ -257,6 +316,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         };
     };
     const activate = (point) => {
+        setMatrixRange(undefined);
         setRange(undefined);
         setFocused(true);
         setSelectedGrid(undefined);
@@ -273,6 +333,19 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             },
         }, true);
     };
+    const selectCells = (selection) => {
+        if (!resolveMatrixRange(historyRef.current.present.document, selection))
+            return;
+        setMatrixRange(selection);
+        setRange(undefined);
+        setEditing(false);
+        setSymbolsOpen(false);
+        publish({
+            ...historyRef.current,
+            present: focusMatrixCell(historyRef.current.present, selection.matrixId, selection.focus),
+        });
+        surface.current?.focus({ preventScroll: true });
+    };
     // Promote a pointer drag to a model range, including a drag that starts in the active input.
     const beginPointer = (event) => {
         if (event.button !== 0 ||
@@ -282,6 +355,17 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         const point = pointAt(event.clientX, event.clientY);
         if (!point)
             return;
+        if (event.shiftKey) {
+            const current = historyRef.current.present;
+            const rectangle = matrixRangeBetween(current.document, matrixRange
+                ? focusMatrixCell(current, matrixRange.matrixId, matrixRange.anchor).caret.id
+                : current.caret.id, point.id);
+            if (rectangle) {
+                event.preventDefault();
+                selectCells(rectangle);
+                return;
+            }
+        }
         const input = event.target instanceof HTMLInputElement;
         drag.current = { anchor: point, x: event.clientX, y: event.clientY, moving: false, input };
         if (!input) {
@@ -308,10 +392,20 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         event.preventDefault();
         current.moving = true;
         setEditing(false);
-        setRange({ anchor: current.anchor, focus: point });
+        const rectangle = current.matrixRange ??
+            matrixRangeBetween(historyRef.current.present.document, current.anchor.id, point.id);
+        const bounds = rectangle && resolveMatrixRange(historyRef.current.present.document, rectangle);
+        if (rectangle && bounds) {
+            current.matrixRange = matrixPointerRange(event.currentTarget, rectangle, bounds.matrix.columns, event.clientX, event.clientY);
+            selectCells(current.matrixRange);
+        }
+        else {
+            setMatrixRange(undefined);
+            setRange({ anchor: current.anchor, focus: point });
+        }
         setSelectedGrid(undefined);
         event.currentTarget.setPointerCapture(event.pointerId);
-        event.currentTarget.focus();
+        event.currentTarget.focus({ preventScroll: true });
     };
     const endPointer = (event) => {
         const current = drag.current;
@@ -345,17 +439,24 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
     };
     // Structured clipboard data preserves editable math; plain LaTeX is the interoperability fallback.
     const copySelection = (event, cut = false) => {
-        if (!range || compositionStart.current)
+        if (compositionStart.current || (!range && !matrixRange))
             return;
-        const fragment = copyRange(historyRef.current.present.document, range);
+        const cells = matrixRange && copyMatrixRange(historyRef.current.present.document, matrixRange);
+        const fragment = cells
+            ? matrixFragment(cells)
+            : copyRange(historyRef.current.present.document, range);
         if (!fragment)
             return;
         event.preventDefault();
         event.stopPropagation();
+        if (cells)
+            event.clipboardData.setData(MATH_MATRIX_CLIPBOARD_TYPE, JSON.stringify(cells));
         event.clipboardData.setData(MATH_CLIPBOARD_TYPE, JSON.stringify(fragment));
         event.clipboardData.setData('text/plain', toLatex(fragmentLatex(fragment)));
         if (cut)
-            apply(deleteRange(historyRef.current.present, range));
+            apply(matrixRange
+                ? clearMatrixRange(historyRef.current.present, matrixRange)
+                : deleteRange(historyRef.current.present, range));
         setClipboardMessage(cut ? 'clipboard.cut' : 'clipboard.copied');
     };
     const pasteSelection = (event) => {
@@ -364,6 +465,40 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         const source = event.clipboardData.getData(MATH_CLIPBOARD_TYPE);
         const fragment = source ? parseFragment(source) : undefined;
         const text = event.clipboardData.getData('text/plain');
+        const matrixSource = event.clipboardData.getData(MATH_MATRIX_CLIPBOARD_TYPE);
+        const cells = matrixSource ? parseMatrixFragment(matrixSource) : matrixFromTSV(text);
+        const current = historyRef.current.present;
+        const inMatrix = !!matrixRange || activeGrid(current)?.matrix.type === 'matrix';
+        if (matrixSource || (inMatrix && text.includes('\t'))) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!cells) {
+                setClipboardMessage('matrix.pasteRejected');
+                return;
+            }
+            const next = inMatrix
+                ? pasteMatrixFragment(current, cells, matrixRange)
+                : pasteFragment(current, matrixFragment(cells), range);
+            if (next === current)
+                setClipboardMessage('matrix.pasteRejected');
+            else {
+                apply(next);
+                setClipboardMessage('clipboard.pasted');
+            }
+            return;
+        }
+        if (matrixRange && !fragment && !text.includes('\n') && !text.includes('\r')) {
+            event.preventDefault();
+            event.stopPropagation();
+            apply(clearMatrixRange(current, matrixRange, text));
+            return;
+        }
+        if (matrixRange) {
+            event.preventDefault();
+            event.stopPropagation();
+            setClipboardMessage('matrix.pasteRejected');
+            return;
+        }
         if (!fragment && !text)
             return;
         event.preventDefault();
@@ -383,6 +518,43 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         apply(next);
         setClipboardMessage('clipboard.pasted');
     };
+    const matrixSelectionKey = (event) => {
+        if (!matrixRange || compositionStart.current || event.nativeEvent.isComposing)
+            return false;
+        const current = historyRef.current.present;
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
+            event.preventDefault();
+            event.stopPropagation();
+            const matrix = resolveMatrixRange(current.document, matrixRange)?.matrix;
+            if (matrix)
+                selectCells({ matrixId: matrix.id, anchor: 0, focus: matrix.slots.length - 1 });
+            return true;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return false;
+        const arrow = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key);
+        if (arrow || ['Escape', 'Enter', 'F2'].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            const next = arrow
+                ? extendMatrixRange(current.document, matrixRange, event.key)
+                : matrixRange;
+            if (arrow && event.shiftKey)
+                selectCells(next);
+            else {
+                const caret = focusMatrixCell(current, next.matrixId, next.focus).caret;
+                activate({ id: caret.id, offset: caret.start });
+            }
+            return true;
+        }
+        if (['Delete', 'Backspace'].includes(event.key) || Array.from(event.key).length === 1) {
+            event.preventDefault();
+            event.stopPropagation();
+            apply(clearMatrixRange(current, matrixRange, ['Delete', 'Backspace'].includes(event.key) ? '' : event.key));
+            return true;
+        }
+        return false;
+    };
     const keyboardSelect = (event) => {
         if (!event.shiftKey ||
             event.altKey ||
@@ -399,7 +571,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
     const selectionKey = (event) => {
         if (event.target instanceof HTMLInputElement || compositionStart.current)
             return;
-        if (keyboardSelect(event))
+        if (matrixSelectionKey(event) || keyboardSelect(event))
             return;
         const current = historyRef.current.present, nodes = textNodes(current.document);
         if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a') {
@@ -415,9 +587,9 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             publish((event.shiftKey ? redo : undo)(historyRef.current), false);
             return;
         }
-        if (event.metaKey || event.ctrlKey || event.altKey)
+        if (event.metaKey || event.ctrlKey)
             return;
-        if (range && selectionChoices.length && ['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
+        if (range && selectionChoices.length && ['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
             event.preventDefault();
             if (event.key === 'Enter') {
                 if (canWrap)
@@ -428,6 +600,14 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                     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.
         if (range && !event.nativeEvent.isComposing && Array.from(event.key).length === 1) {
             event.preventDefault();
@@ -441,6 +621,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         }
         if (event.key === 'Escape') {
             setRange(undefined);
+            setMatrixRange(undefined);
             return;
         }
         if (event.key === 'Enter' || event.key === 'F2') {
@@ -448,13 +629,15 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             activate(range?.focus ?? { id: current.caret.id, offset: current.caret.start });
         }
     };
-    const selectedRange = 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);
+    const selectedRange = matrixRange
+        ? undefined
+        : 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);
     const selectionFragment = selectedRange ? copyRange(state.document, selectedRange) : undefined;
     const canWrap = selectionFragment?.rows.length === 1 &&
         !isLiteralText(state.document, selectedRange.anchor.id);
@@ -504,12 +687,16 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             if (rect && selectionMenu.current)
                 positionMathMenu(selectionMenu.current, rect, 340);
         };
+        const stopTheme = surface.current && selectionMenu.current
+            ? 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);
-            window.removeEventListener('resize', position);
+            stopPosition?.();
+            stopTheme?.();
         };
     }, [range, state.document, state.caret, showPopovers]);
     useLayoutEffect(() => {
@@ -524,7 +711,7 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
             list.scrollTop += item.bottom - box.bottom;
     }, [selectionIndex]);
     const insertTool = (kind) => {
-        if (excludedStructures.includes(kind))
+        if (excludedStructures.includes(kind) || matrixRange)
             return;
         const current = historyRef.current.present;
         const selection = range ??
@@ -543,300 +730,370 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
         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-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", 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 &&
-                    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 (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;
+                                    if (matrixSelectionKey(event) || keyboardSelect(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', 'ArrowLeft'].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));
-                                        else
-                                            setSelectedGrid(grid.id);
+                                        setDismissed('');
+                                        setCandidateIndex(Math.max(0, matches.candidates.findIndex((item) => item.transformFenceId || item.transformRootId)));
+                                        operandMenuKey.current = queryKey;
                                         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);
-                                    }
-                                    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.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 (activeGrid(current)) {
-                                        if (activeGrid(current).matrix.type !== 'matrix')
-                                            apply(resizeMatrix(current, 'row', 'insert'));
+                                    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
+                                            setSelectionIndex((selectionIndex +
+                                                (event.key === 'ArrowDown' ? 1 : selectionChoices.length - 1)) %
+                                                selectionChoices.length);
+                                        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 (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;
                                     }
-                                    return;
-                                }
-                                if (!event.shiftKey &&
-                                    current.caret.start === current.caret.end &&
-                                    activeGrid(current) &&
-                                    ['ArrowUp', 'ArrowDown'].includes(event.key)) {
-                                    event.preventDefault();
-                                    publish({
-                                        ...historyRef.current,
-                                        present: moveMatrixVertical(current, event.key === 'ArrowUp' ? -1 : 1),
-                                    }, true);
-                                    return;
-                                }
-                                if (!event.shiftKey &&
-                                    current.caret.start === current.caret.end &&
-                                    ['ArrowUp', 'ArrowDown'].includes(event.key)) {
-                                    const next = moveLineVertical(current, event.key === 'ArrowUp' ? -1 : 1);
-                                    if (next !== current) {
+                                    if (event.key === 'Enter' &&
+                                        candidates.length &&
+                                        ((!candidates[0].wrapOperand &&
+                                            !candidates[0].transformRootId &&
+                                            !candidates[0].transformFenceId) ||
+                                            operandMenuKey.current === queryKey)) {
                                         event.preventDefault();
-                                        publish({ ...historyRef.current, present: next }, true);
+                                        choose(selectedIndex);
                                         return;
                                     }
-                                }
-                                if (event.key === 'Tab') {
-                                    if (navigate(event.shiftKey ? -1 : 1))
+                                    if (event.key === 'Enter') {
                                         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))
+                                        if (enterBehavior === 'commit' && !event.shiftKey) {
+                                            onCommit?.();
+                                            return;
+                                        }
+                                        if (activeGrid(current)) {
+                                            if (activeGrid(current).matrix.type !== 'matrix')
+                                                apply(resizeMatrix(current, 'row', 'insert'));
+                                        }
+                                        else if (multiline)
+                                            apply(splitLine(current));
+                                        return;
+                                    }
+                                    if (event.key === 'Escape') {
                                         event.preventDefault();
-                                }
-                                if (event.key === 'ArrowRight' && current.caret.end === token.end) {
-                                    if (navigate(1))
+                                        if (candidates.length)
+                                            setDismissed(queryKey);
+                                        else if (onCancel)
+                                            onCancel();
+                                        else {
+                                            setEditing(false);
+                                            surface.current?.focus();
+                                        }
+                                        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);
+                                            return;
+                                        }
+                                    }
+                                    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))
+                                            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, onCopy: copySelection, onCut: (event) => copySelection(event, true), onPaste: pasteSelection, role: "group", lang: locale, dir: mathLocaleDirection(locale), "aria-label": label ?? t('editor.label'), onBlur: (event) => {
+                                    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, onKeyDownCapture: (event) => {
+            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 &&
+                event.shiftKey &&
+                event.code === 'KeyV') {
+                event.preventDefault();
+                event.stopPropagation();
+                setQuickOpen(false);
+                setSymbolsOpen(false);
+                setLatexOpen(true);
+            }
+        }, onCopy: copySelection, onCut: (event) => copySelection(event, true), onPaste: pasteSelection, role: "group", lang: locale, dir: mathLocaleDirection(locale), "aria-label": label ?? t('editor.label'), onBlur: (event) => {
             if (!event.currentTarget.contains(event.relatedTarget) &&
                 !suggestionMenu.current?.contains(event.relatedTarget) &&
                 !selectionMenu.current?.contains(event.relatedTarget) &&
@@ -846,19 +1103,74 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                 setFocused(false);
                 setEditing(false);
             }
-        }, children: [toolbar && (_jsx(MathEditorToolbar, { locale: locale, kinds: Array.isArray(toolbar) ? toolbar : undefined, maxItems: toolbarMaxItems, excludedStructures: excludedStructures, composing: composing, hasRange: !!range, canWrap: canWrap, canUndo: !!history.past.length, canRedo: !!history.future.length, symbolsOpen: symbolsOpen, onInsertStructure: insertTool, onMatrixPreset: (value) => apply(value.startsWith('identity-')
+        }, children: [toolbar && (_jsx(MathEditorToolbar, { locale: locale, kinds: Array.isArray(toolbar) ? toolbar : undefined, maxItems: toolbarMaxItems, excludedStructures: excludedStructures, composing: composing, hasRange: !!range || !!matrixRange, cellRange: !!matrixRange, canWrap: canWrap, canUndo: !!history.past.length, canRedo: !!history.future.length, symbolsOpen: symbolsOpen, onQuick: () => {
+                    setSymbolsOpen(false);
+                    setLatexOpen(false);
+                    setQuickOpen(true);
+                }, onPasteLatex: () => {
+                    setQuickOpen(false);
+                    setSymbolsOpen(false);
+                    setLatexOpen(true);
+                }, onInsertStructure: insertTool, onMatrixPreset: (value) => apply(value.startsWith('identity-')
                     ? insertIdentityMatrix(historyRef.current.present, Number(value.slice(9)))
-                    : insertMatrix(historyRef.current.present, Number(value))), onTemplate: (id) => apply(insertTemplate(historyRef.current.present, id, range)), onToggleSymbols: () => setSymbolsOpen((value) => !value), onInsertSymbol: (glyph) => {
+                    : insertMatrix(historyRef.current.present, Number(value))), onTemplate: (id) => {
+                    apply(insertTemplate(historyRef.current.present, id, range));
+                    preferences.record(`template-${id}`);
+                }, onToggleSymbols: () => {
+                    setQuickOpen(false);
+                    setLatexOpen(false);
+                    setSymbolsOpen((value) => !value);
+                }, onInsertSymbol: (glyph) => {
+                    preferences.record(`symbol-${glyph}`);
                     const current = historyRef.current.present, caret = current.caret;
                     const value = textNodes(current.document).find((node) => node.id === caret.id).text;
                     apply(setText(current, value.slice(0, caret.start) + glyph + value.slice(caret.end), caret.start + glyph.length));
-                }, onUndo: () => publish(undo(historyRef.current), true), onRedo: () => publish(redo(historyRef.current), true), children: toolbarEnd })), toolbar && symbolsOpen && (_jsx(SymbolBrowser, { locale: locale, onClose: () => {
+                }, onUndo: () => publish(undo(historyRef.current), true), onRedo: () => publish(redo(historyRef.current), true), children: toolbarEnd })), toolbar && (_jsx(PresentationControls, { state: state, locale: locale, disabled: composing || !!range || !!matrixRange, kinds: mathStructures
+                    .filter((item) => !excludedStructures.includes(item.kind) &&
+                    (!Array.isArray(toolbar) || toolbar.includes(item.kind)))
+                    .map((item) => item.kind), onChange: (id, change) => apply(setMathPresentation(historyRef.current.present, id, change)) })), quickOpen && (_jsx(QuickPanel, { locale: locale, preferences: preferences, allowedTemplates: toolbarTemplates(mathStructures
+                    .filter((item) => !excludedStructures.includes(item.kind) &&
+                    (!Array.isArray(toolbar) || toolbar.includes(item.kind)))
+                    .map((item) => item.kind)).map((item) => item.id), onInsert: (item) => {
+                    if (composing || matrixRange)
+                        return false;
+                    const current = historyRef.current.present;
+                    const next = item.template
+                        ? insertTemplate(current, item.template, range)
+                        : pasteFragment(current, { version: 1, rows: [row(item.glyph)] }, range);
+                    if (next === current)
+                        return false;
+                    apply(next);
+                    return true;
+                }, onClose: () => {
+                    setQuickOpen(false);
+                    publish({ ...historyRef.current }, true);
+                } })), latexOpen && (_jsx(LatexPastePanel, { locale: locale, onInsert: pasteLatex, onClose: () => {
+                    setLatexOpen(false);
+                    focusNext.current = true;
+                    setEditing(true);
+                    publish({ ...historyRef.current }, true);
+                } })), toolbar && symbolsOpen && (_jsx(SymbolBrowser, { locale: locale, onClose: () => {
                     setSymbolsOpen(false);
                     surface.current?.focus();
                 }, onInsert: (glyph) => {
+                    preferences.record(`symbol-${glyph}`);
                     apply(pasteFragment(historyRef.current.present, { version: 1, rows: [row(glyph)] }, range));
                     setSymbolsOpen(false);
-                } })), showTokenLegend && (_jsxs("div", { className: "me-token-legend", "aria-label": t('token.legend'), children: [_jsx("span", { "data-kind": "variable", children: t('token.variable') }), _jsx("span", { "data-kind": "constant", children: t('token.constant') }), _jsx("span", { "data-kind": "symbol", children: t('token.symbol') }), _jsx("span", { "data-kind": "function", children: t('token.function') }), _jsx("small", { children: t('editor.interactionHint') })] })), clipboardMessage && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t(clipboardMessage) })), selectedGrid && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('grid.selectionHint') })), toolbar && matrixContext && (_jsxs("div", { className: "me-matrix-tools", role: "toolbar", "aria-label": t(matrixContext.matrix.type === 'matrix' ? 'matrix.edit' : 'grid.editRows'), children: [_jsxs("span", { children: [matrixContext.rows, " \u00D7 ", matrixContext.matrix.columns, ' ', _jsxs("small", { children: ["\u00B7", ' ', t('grid.position', { row: matrixContext.row + 1, column: matrixContext.column + 1 })] })] }), matrixContext.matrix.type === 'matrix' && (_jsx("select", { "aria-label": t('matrix.delimiters'), value: matrixContext.matrix.environment, disabled: composing, onChange: (event) => apply(setMatrixEnvironment(historyRef.current.present, event.target.value)), children: matrixEnvironments.map((item) => (_jsx("option", { value: item.value, children: t(item.label) }, item.value))) })), ['row', 'column']
+                } })), showTokenLegend && (_jsxs("div", { className: "me-token-legend", "aria-label": t('token.legend'), children: [_jsx("span", { "data-kind": "variable", children: t('token.variable') }), _jsx("span", { "data-kind": "constant", children: t('token.constant') }), _jsx("span", { "data-kind": "symbol", children: t('token.symbol') }), _jsx("span", { "data-kind": "function", children: t('token.function') }), _jsx("small", { children: t('editor.interactionHint') })] })), clipboardMessage && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t(clipboardMessage) })), selectedGrid && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('grid.selectionHint') })), toolbar && matrixContext && (_jsxs("div", { className: "me-matrix-tools", role: "toolbar", "aria-label": t(matrixContext.matrix.type === 'matrix' ? 'matrix.edit' : 'grid.editRows'), children: [_jsxs("span", { children: [matrixContext.rows, " \u00D7 ", matrixContext.matrix.columns, ' ', _jsxs("small", { children: ["\u00B7", ' ', t('grid.position', { row: matrixContext.row + 1, column: matrixContext.column + 1 })] })] }), matrixContext.matrix.type === 'matrix' && (_jsx("select", { "aria-label": t('matrix.delimiters'), value: matrixContext.matrix.environment, disabled: composing || !!matrixRange || !!range, onChange: (event) => apply(setMatrixEnvironment(historyRef.current.present, event.target.value)), children: matrixEnvironments.map((item) => (_jsx("option", { value: item.value, children: t(item.label) }, item.value))) })), matrixContext.matrix.type === 'matrix' && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", disabled: composing || !!range, onMouseDown: (event) => event.preventDefault(), onClick: () => selectCells({
+                                    matrixId: matrixContext.matrix.id,
+                                    anchor: matrixContext.cell,
+                                    focus: matrixContext.cell,
+                                }), children: t('matrix.selectCells') }), _jsx("button", { type: "button", disabled: composing || !!range, onMouseDown: (event) => event.preventDefault(), onClick: () => selectCells({
+                                    matrixId: matrixContext.matrix.id,
+                                    anchor: 0,
+                                    focus: matrixContext.matrix.slots.length - 1,
+                                }), children: t('matrix.selectAll') }), _jsx("button", { type: "button", disabled: composing || !!range, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                                    const current = historyRef.current.present;
+                                    const next = transposeMatrix(current, matrixRange?.matrixId);
+                                    if (next !== current)
+                                        apply(next);
+                                }, children: t('matrix.transpose') })] })), ['row', 'column']
                         .filter((axis) => axis === 'row' || matrixContext.matrix.type === 'matrix')
                         .flatMap((axis) => ['insert', 'delete'].map((action) => {
                         const size = axis === 'row' ? matrixContext.rows : matrixContext.matrix.columns;
@@ -868,7 +1180,10 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                                 ? axis === 'row'
                                     ? 'Alt+Shift+ArrowUp'
                                     : 'Alt+Shift+ArrowLeft'
-                                : undefined, disabled: composing || (action === 'delete' ? size === 1 : size >= MATRIX_MAX_SIZE), onMouseDown: (event) => event.preventDefault(), onClick: () => apply(resizeMatrix(historyRef.current.present, axis, action)), children: t(axis === 'row'
+                                : undefined, disabled: composing ||
+                                !!matrixRange ||
+                                !!range ||
+                                (action === 'delete' ? size === 1 : size >= MATRIX_MAX_SIZE), onMouseDown: (event) => event.preventDefault(), onClick: () => apply(resizeMatrix(historyRef.current.present, axis, action)), children: t(axis === 'row'
                                 ? action === 'insert'
                                     ? 'grid.addRow'
                                     : 'grid.deleteRow'
@@ -879,10 +1194,48 @@ export function MathEditor({ apiRef, autoFocus = false, enterBehavior = 'newline
                             ? t('matrix.keyboardHint')
                             : `${t(matrixContext.matrix.type === 'aligned' ? 'aligned.inputHint' : 'cases.inputHint')} · ${t('grid.keyboardHint')}` })] })), showPopovers &&
                 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: [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", { 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: () => {
+                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))) }) }), 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", { children: [_jsx("strong", { children: t(s.label) }), _jsx("small", { children: t(s.detail) })] })] }, s.kind))) })] }), surface.current?.closest('dialog, [role="dialog"]') ?? document.body)] }));
+                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)] }));
 }
-//# sourceMappingURL=math-editor.js.map