@barocss/math-editor 0.4.0 → 0.5.0

package/dist/math-editor.js

@@ -1,4 +1,8 @@
 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';
@@ -8,8 +12,8 @@ import { insertLatex } from './latex-insertion.js';
 import { LatexPastePanel } from './latex-paste-panel.js';
 import { followMathTheme } from './dom/theme.js';
 import { matrixPointerRange } from './dom/matrix-selection.js';
-import { positionMathMenu } from './dom/menu-position.js';
-import { fences } from './fences.js';
+import { positionMathMenu, followMathMenuPosition } from './dom/menu-position.js';
+import { fences, fencePairs } from './fences.js';
 import { parseLatex } from './latex.js';
 import { createEditorLabels } from './editor-labels.js';
 import { MathEditorToolbar } from './math-editor-toolbar.js';
@@ -17,6 +21,7 @@ import { SymbolBrowser } from './symbol-browser.js';
 import { insertTemplate } from './templates.js';
 import { translate, mathLocaleDirection, } from './i18n.js';
 import { extendKeyboardRange, collapseKeyboardRange, wrapRange, wrappingKinds, copyRange, deleteRange, fragmentLatex, MATH_CLIPBOARD_TYPE, parseFragment, pasteFragment, resolveRange, } from './range.js';
+import { mathRunSpacing } from './math-spacing.js';
 import { tokenizeMathText, tokenIndexAt } from './tokens.js';
 import { splitLine, joinPreviousLine } from './lines.js';
 import { moveVertical } from './vertical-navigation.js';
@@ -24,17 +29,18 @@ 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({ preferences: suppliedPreferences, apiRef, autoFocus = false, enterBehavior = 'newline', onCommit, onCancel, showPopovers = true, defaultValue, excludedStructures = [], multiline = true, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarMaxItems = 8, toolbarEnd, showTokenLegend = true, }) {
+export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus = false, enterBehavior = 'newline', onCommit, onCancel, showPopovers = true, defaultValue, excludedStructures = [], multiline = true, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarMaxItems = 8, contextTools = true, toolbarEnd, showTokenLegend = true, }) {
     const t = (key, parameters) => translate(locale, key, parameters);
     const labels = createEditorLabels(locale);
     const [history, setHistory] = useState(() => createHistory(initialState(defaultValue)));
     const historyRef = useRef(history);
     const suggestionMenu = useRef(null);
+    const contextFooter = useRef(null);
     const selectionMenu = useRef(null);
     const [ownPreferences] = useState(createMathPreferences);
     const preferences = suppliedPreferences ?? ownPreferences;
@@ -77,11 +83,16 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
     const focusNext = useRef(autoFocus);
     const suggestionId = useId();
     const state = history.present;
+    const structureContext = contextTools && showPopovers && editing && focused && !range && !matrixRange
+        ? structureEditingContext(state)
+        : undefined;
+    const rootContext = structureContext?.root;
+    const fenceContext = structureContext?.fence;
     const matrixContext = activeGrid(state);
     const matrixSelection = matrixRange && resolveMatrixRange(state.document, matrixRange);
     const active = textNodes(state.document).find((n) => n.id === state.caret.id);
     const searchCaret = composing ? state.caret.end : state.caret.start;
-    const matches = findSuggestions(active.text, searchCaret, locale);
+    const matches = findStateSuggestions(state, locale, searchCaret);
     matches.candidates = matches.candidates.filter((candidate) => !candidate.kind || !excludedStructures.includes(candidate.kind));
     const query = matches.query;
     const operandMenuKey = useRef('');
@@ -214,12 +225,12 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
             ? followMathTheme(surface.current.closest('.me-editor'), suggestionMenu.current)
             : undefined;
         position();
-        window.addEventListener('resize', position);
-        window.addEventListener('scroll', position, true);
+        const stopPosition = surface.current
+            ? followMathMenuPosition(surface.current, position)
+            : undefined;
         return () => {
             stopTheme?.();
-            window.removeEventListener('resize', position);
-            window.removeEventListener('scroll', position, true);
+            stopPosition?.();
         };
     }, [queryKey, candidates.length, active.id, showPopovers]);
     useLayoutEffect(() => {
@@ -578,15 +589,7 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         }
         if (event.metaKey || event.ctrlKey)
             return;
-        const point = !event.altKey && collapseKeyboardRange(current.document, range, event.key);
-        if (point) {
-            event.preventDefault();
-            activate(point);
-            return;
-        }
-        if (range &&
-            selectionChoices.length &&
-            (event.key === 'Enter' || (event.altKey && ['ArrowDown', 'ArrowUp'].includes(event.key)))) {
+        if (range && selectionChoices.length && ['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
             event.preventDefault();
             if (event.key === 'Enter') {
                 if (canWrap)
@@ -597,6 +600,12 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
                     selectionChoices.length);
             return;
         }
+        const point = !event.altKey && collapseKeyboardRange(current.document, range, event.key);
+        if (point) {
+            event.preventDefault();
+            activate(point);
+            return;
+        }
         if (event.altKey)
             return;
         // A model selection must behave like a text selection when typing resumes.
@@ -682,12 +691,12 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
             ? followMathTheme(surface.current.closest('.me-editor'), selectionMenu.current)
             : undefined;
         position();
-        window.addEventListener('scroll', position, true);
-        window.addEventListener('resize', position);
+        const stopPosition = surface.current
+            ? followMathMenuPosition(surface.current, position)
+            : undefined;
         return () => {
-            window.removeEventListener('scroll', position, true);
+            stopPosition?.();
             stopTheme?.();
-            window.removeEventListener('resize', position);
         };
     }, [range, state.document, state.caret, showPopovers]);
     useLayoutEffect(() => {
@@ -721,292 +730,358 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
         apply(insertStructure(historyRef.current.present, kind, ['fraction', 'binomial', 'superscript', 'subscript'].includes(kind)));
     };
     // Nested slots share the same caret model. Only the active lexical token mounts an input.
-    const renderRow = (r, name, role = 'expression') => (_jsx("span", { className: "me-row", "data-math-role": role, children: r.children.map((node) => {
-            if (isGrid(node))
-                return (_jsxs("span", { className: "me-matrix", "data-selected": selectedGrid === node.id || undefined, "data-structure": node.type, "data-matrix-id": node.id, "data-environment": node.type === 'matrix'
-                        ? node.environment
-                        : node.type === 'cases'
-                            ? 'Bmatrix'
-                            : 'matrix', children: [_jsx("span", { className: "me-matrix-delimiter me-matrix-left", "aria-hidden": "true" }), _jsx("span", { className: "me-matrix-grid", style: { gridTemplateColumns: `repeat(${node.columns}, max-content)` }, children: node.slots.map((cell, index) => (_jsx("span", { className: "me-matrix-cell", "data-cell-index": index, "data-cell-selected": (matrixSelection?.matrix.id === node.id &&
-                                    matrixSelection.indices.includes(index)) ||
-                                    undefined, children: renderRow(cell, labels.grid(name, node.type, index, node.columns), 'group') }, cell.id))) }), _jsx("span", { className: "me-matrix-delimiter me-matrix-right", "aria-hidden": "true" })] }, node.id));
-            if (node.type === 'limit' || node.type === 'limsup' || node.type === 'liminf')
-                return (_jsxs("span", { className: "me-structure me-limit-operator", "data-structure": node.type, "data-math-style": node.mathStyle, "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit-glyph", "aria-hidden": "true", children: node.type === 'limit' ? 'lim' : node.type === 'limsup' ? 'lim sup' : 'lim inf' }), _jsx("span", { className: "me-limit me-slot", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), _jsx("span", { className: "me-slot", children: renderRow(node.slots[1], labels.slot(name, node.type, 1)) })] }, node.id));
-            if (node.type !== 'text' &&
-                [
-                    'sum',
-                    'product',
-                    'integral',
-                    'doubleIntegral',
-                    'tripleIntegral',
-                    'contourIntegral',
-                ].includes(node.type))
-                return (_jsxs("span", { className: "me-structure me-large-operator", "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', "data-structure": node.type, "data-math-style": node.mathStyle, children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit", children: renderRow(node.slots[1], labels.slot(name, node.type, 1), 'upper') }), _jsx("span", { className: "me-operator-glyph", "aria-hidden": "true", children: {
-                                        sum: '∑',
-                                        product: '∏',
-                                        integral: '∫',
-                                        doubleIntegral: '∬',
-                                        tripleIntegral: '∭',
-                                        contourIntegral: '∮',
-                                    }[node.type] }), _jsx("span", { className: "me-limit", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), renderRow(node.slots[2], labels.slot(name, node.type, 2))] }, node.id));
-            if (node.type !== 'text')
-                return (_jsxs("span", { className: `me-structure me-${node.type}`, "data-structure": node.type, "data-math-style": node.mathStyle, children: [!!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[0], "aria-hidden": "true", children: fences(node)[0] })), ['root', 'indexedRoot'].includes(node.type) && (_jsx("span", { "aria-hidden": "true", className: "me-radical", children: "\u221A" })), node.slots.map((slot, index) => (_jsx("span", { className: "me-slot", children: renderRow(slot, labels.slot(name, node.type, index), node.type === 'fraction'
-                                ? index === 0
-                                    ? 'numerator'
-                                    : 'denominator'
-                                : node.type === 'superscript'
+    const layout = mathLayout(state.document);
+    const renderRow = (r, name, role = 'expression') => {
+        const rowSpacing = mathRunSpacing(r);
+        return (_jsx("span", { className: "me-row", "data-layout-style": layout.rows.get(r.id), "data-math-role": role, children: r.children.map((node) => {
+                if (isGrid(node))
+                    return (_jsxs("span", { className: "me-matrix", "data-selected": selectedGrid === node.id || undefined, "data-structure": node.type, "data-matrix-id": node.id, "data-environment": node.type === 'matrix'
+                            ? node.environment
+                            : node.type === 'cases'
+                                ? 'Bmatrix'
+                                : 'matrix', children: [_jsx("span", { className: "me-matrix-delimiter me-matrix-left", "aria-hidden": "true" }), _jsx("span", { className: "me-matrix-grid", style: { gridTemplateColumns: `repeat(${node.columns}, max-content)` }, children: node.slots.map((cell, index) => (_jsx("span", { className: "me-matrix-cell", "data-cell-index": index, "data-cell-selected": (matrixSelection?.matrix.id === node.id &&
+                                        matrixSelection.indices.includes(index)) ||
+                                        undefined, children: renderRow(cell, labels.grid(name, node.type, index, node.columns), 'group') }, cell.id))) }), _jsx("span", { className: "me-matrix-delimiter me-matrix-right", "aria-hidden": "true" })] }, node.id));
+                if (node.type === 'limit' || node.type === 'limsup' || node.type === 'liminf')
+                    return (_jsxs("span", { className: "me-structure me-limit-operator", "data-operator-style": layout.operators.get(node.id)?.style, "data-layout-limits": layout.operators.get(node.id)?.placement, "data-structure": node.type, "data-math-style": node.mathStyle, "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit-glyph", "aria-hidden": "true", children: node.type === 'limit' ? 'lim' : node.type === 'limsup' ? 'lim sup' : 'lim inf' }), _jsx("span", { className: "me-limit me-slot", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), _jsx("span", { className: "me-slot", children: renderRow(node.slots[1], labels.slot(name, node.type, 1)) })] }, node.id));
+                if (node.type !== 'text' &&
+                    [
+                        'sum',
+                        'product',
+                        'integral',
+                        'doubleIntegral',
+                        'tripleIntegral',
+                        'contourIntegral',
+                    ].includes(node.type))
+                    return (_jsxs("span", { className: "me-structure me-large-operator", "data-operator-style": layout.operators.get(node.id)?.style, "data-layout-limits": layout.operators.get(node.id)?.placement, "data-limit-placement": node.limits === false ? 'nolimits' : node.limits ? 'limits' : 'auto', "data-structure": node.type, "data-math-style": node.mathStyle, children: [_jsxs("span", { className: "me-limits", children: [_jsx("span", { className: "me-limit", children: renderRow(node.slots[1], labels.slot(name, node.type, 1), 'upper') }), _jsx("span", { className: "me-operator-glyph", "aria-hidden": "true", children: {
+                                            sum: '∑',
+                                            product: '∏',
+                                            integral: '∫',
+                                            doubleIntegral: '∬',
+                                            tripleIntegral: '∭',
+                                            contourIntegral: '∮',
+                                        }[node.type] }), _jsx("span", { className: "me-limit", children: renderRow(node.slots[0], labels.slot(name, node.type, 0), 'lower') })] }), renderRow(node.slots[2], labels.slot(name, node.type, 2))] }, node.id));
+                if (node.type !== 'text')
+                    return (_jsxs("span", { className: `me-structure me-${node.type}`, "data-structure": node.type, "data-math-style": node.mathStyle, "data-math-spacing": rowSpacing.has(node.id) ? 'true' : undefined, style: rowSpacing.has(node.id)
+                            ? {
+                                '--me-space-before': rowSpacing.get(node.id)?.before ?? 0,
+                                '--me-space-after': rowSpacing.get(node.id)?.after ?? 0,
+                                '--me-tight-before': rowSpacing.get(node.id)?.tightBefore ?? 0,
+                                '--me-tight-after': rowSpacing.get(node.id)?.tightAfter ?? 0,
+                            }
+                            : undefined, children: [!!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[0], "aria-hidden": "true", children: fences(node)[0] })), ['root', 'indexedRoot'].includes(node.type) && (_jsx("span", { "aria-hidden": "true", className: "me-radical", children: "\u221A" })), node.slots.map((slot, index) => (_jsx("span", { className: "me-slot", children: renderRow(slot, labels.slot(name, node.type, index), node.type === 'fraction'
                                     ? index === 0
-                                        ? 'base'
-                                        : 'exponent'
-                                    : node.type === 'subscript'
+                                        ? 'numerator'
+                                        : 'denominator'
+                                    : node.type === 'superscript'
                                         ? index === 0
                                             ? 'base'
-                                            : 'index'
-                                        : node.type === 'root'
-                                            ? 'radicand'
-                                            : 'group') }, slot.id))), !!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[1], "aria-hidden": "true", children: fences(node)[1] }))] }, node.id));
-            const parts = tokensFor(node);
-            return parts.map((token, tokenIndex) => {
-                const key = `${node.id}:${tokenIndex}`;
-                const selected = selectedText(node.id, token.start, token.end);
-                const isActive = editing &&
-                    !range &&
-                    !matrixRange &&
-                    state.caret.id === node.id &&
-                    tokenIndexAt(parts, state.caret.start, state.caret.affinity) === tokenIndex;
-                const caretFrom = (input) => ({
-                    id: node.id,
-                    start: token.start + (input.selectionStart ?? 0),
-                    end: token.start + (input.selectionEnd ?? 0),
-                    affinity: input.selectionStart === 0 ? 'forward' : 'backward',
-                });
-                const replaceToken = (input) => {
-                    const current = historyRef.current.present;
-                    const run = textNodes(current.document).find((n) => n.id === node.id);
-                    return setText({ ...current, caret: { ...current.caret, id: node.id } }, run.text.slice(0, token.start) + input.value + run.text.slice(token.end), token.start + (input.selectionStart ?? 0), token.start + (input.selectionEnd ?? 0));
-                };
-                return (_jsxs("span", { className: `me-run${!token.text ? ' me-empty' : ''}${!node.text && r.children.length > 1 ? ' me-empty-boundary' : ''}`, "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "data-token-end": token.end, "data-field-name": name, "data-value": token.text, "data-range-selected": !!selected || undefined, children: [_jsx("span", { className: "me-measure", "aria-hidden": "true", children: token.text || (r.children.length === 1 ? '□' : '') }), isActive ? (_jsx("input", { ref: (element) => {
-                                if (element)
-                                    inputs.current.set(key, element);
-                                else
-                                    inputs.current.delete(key);
-                            }, "aria-label": name, "aria-description": t({
-                                variable: 'token.variable',
-                                constant: 'token.constant',
-                                symbol: 'token.symbol',
-                                space: 'token.space',
-                                empty: 'token.empty',
-                                draft: 'token.composing',
-                            }[token.kind]), "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "aria-autocomplete": "list", "aria-controls": isActive && candidates.length ? suggestionId : undefined, "aria-expanded": isActive && candidates.length > 0, role: "combobox", "aria-activedescendant": isActive && !composing && candidates.length
-                                ? `${suggestionId}-${selectedIndex}`
-                                : undefined, className: "me-input", value: token.text, placeholder: r.children.length === 1 ? '□' : '', autoComplete: "off", spellCheck: false, onPointerDown: () => setSelectedGrid(undefined), onFocus: (event) => {
-                                setFocused(true);
-                                select(caretFrom(event.currentTarget));
-                            }, onSelect: (event) => select(caretFrom(event.currentTarget)), onCompositionStart: () => {
-                                compositionStart.current = historyRef.current;
-                                compositionToken.current = {
-                                    id: node.id,
-                                    index: tokenIndex,
-                                    length: node.text.length,
-                                    parts,
-                                };
-                                setComposing(true);
-                            }, onCompositionEnd: (event) => {
-                                const next = replaceToken(event.currentTarget);
-                                const base = compositionStart.current;
-                                compositionStart.current = null;
-                                compositionToken.current = null;
-                                setComposing(false);
-                                publish(commit(base ?? historyRef.current, next), true);
-                            }, onChange: (event) => {
-                                setSelectedGrid(undefined);
-                                const current = historyRef.current, next = replaceToken(event.currentTarget);
-                                publish(compositionStart.current
-                                    ? { ...current, present: next }
-                                    : commit(current, next), !compositionStart.current, !compositionStart.current);
-                                setCandidateIndex(0);
-                                setDismissed('');
-                            }, onKeyDown: (event) => {
-                                event.stopPropagation();
-                                if (event.nativeEvent.isComposing ||
-                                    compositionStart.current ||
-                                    event.keyCode === 229)
-                                    return;
-                                if (matrixSelectionKey(event) || keyboardSelect(event))
-                                    return;
-                                const current = historyRef.current.present;
-                                if (selectedGrid) {
+                                            : 'exponent'
+                                        : node.type === 'subscript'
+                                            ? index === 0
+                                                ? 'base'
+                                                : 'index'
+                                            : node.type === 'root'
+                                                ? 'radicand'
+                                                : 'group') }, slot.id))), !!fences(node) && (_jsx("span", { className: "me-delimiter", "data-fence": fences(node)[1], "aria-hidden": "true", children: fences(node)[1] }))] }, node.id));
+                const parts = tokensFor(node);
+                const spacing = isLiteralText(state.document, node.id) ? undefined : rowSpacing;
+                return parts.map((token, tokenIndex) => {
+                    const key = `${node.id}:${tokenIndex}`;
+                    const selected = selectedText(node.id, token.start, token.end);
+                    const isActive = editing &&
+                        !range &&
+                        !matrixRange &&
+                        state.caret.id === node.id &&
+                        tokenIndexAt(parts, state.caret.start, state.caret.affinity) === tokenIndex;
+                    const caretFrom = (input) => ({
+                        id: node.id,
+                        start: token.start + (input.selectionStart ?? 0),
+                        end: token.start + (input.selectionEnd ?? 0),
+                        affinity: input.selectionStart === 0 ? 'forward' : 'backward',
+                    });
+                    const replaceToken = (input) => {
+                        const current = historyRef.current.present;
+                        const run = textNodes(current.document).find((n) => n.id === node.id);
+                        return setText({ ...current, caret: { ...current.caret, id: node.id } }, run.text.slice(0, token.start) + input.value + run.text.slice(token.end), token.start + (input.selectionStart ?? 0), token.start + (input.selectionEnd ?? 0));
+                    };
+                    return (_jsxs("span", { className: `me-run${!token.text ? ' me-empty' : ''}${!node.text && r.children.length > 1 ? ' me-empty-boundary' : ''}`, "data-token-kind": token.kind, "data-math-spacing": spacing ? 'true' : undefined, style: spacing
+                            ? {
+                                '--me-space-before': spacing.get(`${node.id}:${token.start}`)?.before ?? 0,
+                                '--me-space-after': spacing.get(`${node.id}:${token.start}`)?.after ?? 0,
+                                '--me-tight-before': spacing.get(`${node.id}:${token.start}`)?.tightBefore ?? 0,
+                                '--me-tight-after': spacing.get(`${node.id}:${token.start}`)?.tightAfter ?? 0,
+                            }
+                            : undefined, "data-run-id": node.id, "data-token-start": token.start, "data-token-end": token.end, "data-field-name": name, "data-value": token.text, "data-range-selected": !!selected || undefined, children: [_jsx("span", { className: "me-measure", "aria-hidden": "true", children: token.text || (r.children.length === 1 ? '□' : '') }), isActive ? (_jsx("input", { ref: (element) => {
+                                    if (element)
+                                        inputs.current.set(key, element);
+                                    else
+                                        inputs.current.delete(key);
+                                }, "aria-label": name, "aria-description": t({
+                                    variable: 'token.variable',
+                                    constant: 'token.constant',
+                                    symbol: 'token.symbol',
+                                    space: 'token.space',
+                                    empty: 'token.empty',
+                                    draft: 'token.composing',
+                                }[token.kind]), "data-token-kind": token.kind, "data-run-id": node.id, "data-token-start": token.start, "aria-autocomplete": "list", "aria-controls": isActive && candidates.length ? suggestionId : undefined, "aria-expanded": isActive && candidates.length > 0, role: "combobox", "aria-activedescendant": isActive && !composing && candidates.length
+                                    ? `${suggestionId}-${selectedIndex}`
+                                    : undefined, className: "me-input", value: token.text, placeholder: r.children.length === 1 ? '□' : '', autoComplete: "off", spellCheck: false, onPointerDown: () => setSelectedGrid(undefined), onFocus: (event) => {
+                                    setFocused(true);
+                                    select(caretFrom(event.currentTarget));
+                                }, onSelect: (event) => select(caretFrom(event.currentTarget)), onCompositionStart: () => {
+                                    compositionStart.current = historyRef.current;
+                                    compositionToken.current = {
+                                        id: node.id,
+                                        index: tokenIndex,
+                                        length: node.text.length,
+                                        parts,
+                                    };
+                                    setComposing(true);
+                                }, onCompositionEnd: (event) => {
+                                    const next = replaceToken(event.currentTarget);
+                                    const base = compositionStart.current;
+                                    compositionStart.current = null;
+                                    compositionToken.current = null;
+                                    setComposing(false);
+                                    publish(commit(base ?? historyRef.current, next), true);
+                                }, onChange: (event) => {
+                                    setSelectedGrid(undefined);
+                                    const current = historyRef.current, next = replaceToken(event.currentTarget);
+                                    publish(compositionStart.current
+                                        ? { ...current, present: next }
+                                        : commit(current, next), !compositionStart.current, !compositionStart.current);
+                                    setCandidateIndex(0);
+                                    setDismissed('');
+                                }, onKeyDown: (event) => {
+                                    event.stopPropagation();
+                                    if (event.nativeEvent.isComposing ||
+                                        compositionStart.current ||
+                                        event.keyCode === 229)
+                                        return;
+                                    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 &&
-                                    ['ArrowUp', 'ArrowDown'].includes(event.key)) {
-                                    const next = moveVertical(current, event.key === 'ArrowUp' ? -1 : 1, surface.current ? renderedCaretGeometry(surface.current) : undefined);
-                                    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));
+                                    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 &&
@@ -1121,7 +1196,46 @@ export function MathEditor({ preferences: suppliedPreferences, apiRef, autoFocus
                 candidates.length > 0 &&
                 createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, lang: locale, dir: mathLocaleDirection(locale), ref: suggestionMenu, onMouseDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "me-suggestion-heading", children: [_jsx("span", { className: "me-suggestion-query", children: t('suggestion.create', { query }) }), _jsx("span", { children: t(composing ? 'suggestion.composing' : 'suggestion.keyboardHint') })] }), _jsx("div", { className: "me-suggestions", id: suggestionId, role: "listbox", "aria-label": t('suggestion.label'), children: candidates.map((c, index) => (_jsxs("button", { type: "button", id: `${suggestionId}-${index}`, role: "option", disabled: composing, "aria-selected": !composing && index === selectedIndex, onClick: () => choose(index), children: [_jsx("span", { className: "me-candidate-glyph", children: c.glyph }), _jsxs("span", { className: "me-candidate-copy", children: [_jsx("strong", { children: c.label }), _jsx("small", { children: c.detail })] })] }, c.id))) }), _jsx("div", { className: "me-suggestion-footer", children: t(composing ? 'suggestion.imeHint' : 'suggestion.keepSource') })] }), surface.current?.closest('dialog, [role="dialog"]') ?? document.body), _jsx("div", { className: "me-surface", dir: "ltr", ref: surface, tabIndex: 0, "aria-label": t('selection.surface'), "data-mode": editing ? 'edit' : 'preview', onPointerDown: beginPointer, onPointerMove: movePointer, onPointerUp: endPointer, onPointerCancel: () => {
                     drag.current = undefined;
-                }, onKeyDown: selectionKey, children: _jsx("div", { className: "me-document-lines", children: documentRows(state.document).map((line, index) => (_jsxs("div", { className: "me-document-line", children: [showLineNumbers && documentRows(state.document).length > 1 && (_jsx("span", { className: "me-line-number", "aria-hidden": "true", children: index + 1 })), renderRow(line, labels.line(index))] }, line.id))) }) }), matrixSelection && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('matrix.rangeHint', { rows: matrixSelection.rows, columns: matrixSelection.columns }) })), showPopovers &&
+                }, onKeyDown: selectionKey, children: _jsx("div", { className: "me-document-lines", children: documentRows(state.document).map((line, index) => (_jsxs("div", { className: "me-document-line", children: [showLineNumbers && documentRows(state.document).length > 1 && (_jsx("span", { className: "me-line-number", "aria-hidden": "true", children: index + 1 })), renderRow(line, labels.line(index))] }, line.id))) }) }), structureContext && (_jsxs("div", { className: "me-context-footer", ref: contextFooter, role: "group", "aria-label": t('context.label'), onMouseDown: (event) => event.preventDefault(), onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (composing || event.nativeEvent.isComposing)
+                        return;
+                    if (focusContextAction(event.currentTarget, event.key)) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        surface.current
+                            ?.querySelector('input.me-input')
+                            ?.focus({ preventScroll: true });
+                    }
+                }, children: [fenceContext && (_jsxs(_Fragment, { children: [_jsx("span", { className: "me-context-label", children: t('context.current', {
+                                    kind: t('presentation.fence') + ' ' + fences(fenceContext).join(' … '),
+                                }) }), _jsx("span", { className: "me-context-actions", children: Object.entries(fencePairs)
+                                    .filter(([kind]) => !excludedStructures.includes(kind))
+                                    .map(([kind, pair]) => {
+                                    const label = t(mathStructures.find((item) => item.kind === kind).label);
+                                    return (_jsx("button", { type: "button", className: "me-context-button", "aria-label": label, title: label, "aria-pressed": fenceContext.type === kind, disabled: composing, onClick: () => {
+                                            if (!composing) {
+                                                apply(changeContextFence(historyRef.current.present, fenceContext.id, kind));
+                                                surface.current
+                                                    ?.querySelector('input.me-input')
+                                                    ?.focus({ preventScroll: true });
+                                            }
+                                        }, children: pair.join(' □ ') }, kind));
+                                }) }), _jsx("span", { className: "me-context-hint", children: t('context.fenceKeyboardHint') })] })), rootContext && (_jsxs(_Fragment, { children: [_jsx("span", { className: "me-context-label", children: t('context.current', { kind: t(`context.${rootContext.kind}`) }) }), _jsxs("span", { className: "me-context-actions", children: [rootContext.indexCaret && (_jsx("button", { type: "button", className: "me-context-button", disabled: composing, onClick: () => {
+                                            const caret = rootContext.indexCaret;
+                                            publish({
+                                                ...historyRef.current,
+                                                present: { ...historyRef.current.present, caret },
+                                            }, true);
+                                        }, children: t('context.editIndex') })), _jsx("button", { type: "button", className: "me-context-button", disabled: composing ||
+                                            !rootContext.canTransform ||
+                                            excludedStructures.includes(rootContext.target), onClick: () => {
+                                            if (!composing)
+                                                apply(transformRoot(historyRef.current.present, rootContext.id, rootContext.target));
+                                        }, children: t('suggestion.transform', { kind: t(`context.${rootContext.target}`) }) })] }), _jsx("span", { className: "me-context-hint", children: t(rootContext.canTransform ? 'context.keyboardHint' : 'context.squareIndexRequired') })] }))] })), matrixSelection && (_jsx("div", { className: "me-grid-selection-hint", role: "status", children: t('matrix.rangeHint', { rows: matrixSelection.rows, columns: matrixSelection.columns }) })), showPopovers &&
                 selectionFragment &&
                 createPortal(_jsxs("div", { className: "me-suggestion-panel", "data-math-editor-owner": suggestionId, ref: selectionMenu, role: "presentation", "aria-label": t('selection.toolbar'), onKeyDown: selectionKey, children: [_jsx("div", { className: "me-suggestion-heading", children: t(canWrap ? 'selection.highlighted' : 'selection.singleRowRequired') }), _jsx("div", { className: "me-suggestions", role: "listbox", "aria-label": t('selection.toolbar'), children: selectionChoices.map((s, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === selectionIndex, disabled: !canWrap, onMouseDown: (event) => event.preventDefault(), onClick: () => insertTool(s.kind), "aria-label": t('selection.wrap', { kind: t(s.label) }), children: [_jsx("span", { className: "me-candidate-glyph", children: s.glyph }), _jsxs("span", { className: "me-candidate-copy", children: [_jsx("strong", { children: t(s.label) }), _jsx("small", { children: t(s.detail) })] })] }, s.kind))) })] }), surface.current?.closest('dialog, [role="dialog"]') ?? document.body)] }));
 }