@barocss/math-editor 0.1.0 → 0.2.0

package/dist/math-editor-toolbar.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { mathStructures } from './suggestions.js';
 import { wrappingKinds } from './range.js';
 import { mathTemplates } from './templates.js';
@@ -11,11 +12,14 @@ const symbols = [
     { label: 'symbol.infinity', value: '∞' },
 ];
 /** Presentation-only toolbar. The editor keeps selection, composition and history ownership. */
-export function MathEditorToolbar({ locale, composing, hasRange, canWrap, canUndo, canRedo, symbolsOpen, onInsertStructure, onMatrixPreset, onTemplate, onToggleSymbols, onInsertSymbol, onUndo, onRedo, children, }) {
+export function MathEditorToolbar({ locale, kinds, maxItems = 8, excludedStructures = [], composing, hasRange, canWrap, canUndo, canRedo, symbolsOpen, onInsertStructure, onMatrixPreset, onTemplate, onToggleSymbols, onInsertSymbol, onUndo, onRedo, children, }) {
+    const [expanded, setExpanded] = useState(false);
+    const visibleCount = Math.max(0, Math.floor(Number.isFinite(maxItems) ? maxItems : 8));
+    const items = mathStructures.filter((s) => s.kind && !excludedStructures.includes(s.kind) && (!kinds || kinds.includes(s.kind)));
     const t = (key, parameters) => translate(locale, key, parameters);
-    return (_jsxs("div", { className: "me-tools", role: "toolbar", "aria-label": t('toolbar.label'), children: [mathStructures.map((s) => (_jsxs("button", { type: "button", "aria-label": t(s.label), disabled: composing || (hasRange && (!canWrap || !wrappingKinds.includes(s.kind))), onMouseDown: (event) => event.preventDefault(), onClick: () => onInsertStructure(s.kind), children: [_jsx("span", { children: s.glyph }), t(s.label)] }, s.kind))), _jsxs("select", { disabled: composing || hasRange, className: "me-matrix-size", "aria-label": t('matrix.preset'), value: "", onChange: (event) => {
-                    const value = event.target.value;
-                    onMatrixPreset(value);
-                }, children: [_jsx("option", { value: "", disabled: true, children: t('matrix.presetPlaceholder') }), [2, 3, 4].map((size) => (_jsx("option", { value: size, children: t('matrix.insert', { rows: size, columns: size }) }, size))), [2, 3, 4].map((size) => (_jsx("option", { value: `identity-${size}`, children: t('matrix.insertIdentity', { rows: size, columns: size }) }, `identity-${size}`)))] }), _jsxs("select", { className: "me-matrix-size", "aria-label": t('template.label'), value: "", disabled: composing, onChange: (event) => onTemplate(event.target.value), children: [_jsx("option", { value: "", disabled: true, children: t('template.placeholder') }), mathTemplates.map((item) => (_jsx("option", { value: item.id, children: t(item.label, item.labelParameters) }, item.id)))] }), _jsx("button", { type: "button", "aria-expanded": symbolsOpen, disabled: composing, onClick: onToggleSymbols, children: t('symbols.title') }), _jsx("span", { className: "me-divider" }), symbols.map((s) => (_jsx("button", { type: "button", "aria-label": t(s.label), disabled: composing || hasRange, onMouseDown: (event) => event.preventDefault(), onClick: () => onInsertSymbol(s.value), children: s.value }, s.label))), _jsx("button", { type: "button", disabled: !canUndo || composing, onMouseDown: (event) => event.preventDefault(), onClick: onUndo, children: t('history.undo') }), _jsx("button", { type: "button", disabled: !canRedo || composing, onMouseDown: (event) => event.preventDefault(), onClick: onRedo, children: t('history.redo') }), children] }));
+    return (_jsxs("div", { className: "me-tools", role: "toolbar", "aria-label": t('toolbar.label'), children: [(expanded ? items : items.slice(0, visibleCount)).map((s) => (_jsxs("button", { type: "button", "aria-label": t(s.label), disabled: composing || (hasRange && (!canWrap || !wrappingKinds.includes(s.kind))), onMouseDown: (event) => event.preventDefault(), onClick: () => onInsertStructure(s.kind), children: [_jsx("span", { children: s.glyph }), t(s.label)] }, s.kind))), expanded && (_jsxs(_Fragment, { children: [_jsxs("select", { disabled: composing || hasRange, className: "me-matrix-size", "aria-label": t('matrix.preset'), value: "", onChange: (event) => {
+                            const value = event.target.value;
+                            onMatrixPreset(value);
+                        }, children: [_jsx("option", { value: "", disabled: true, children: t('matrix.presetPlaceholder') }), [2, 3, 4].map((size) => (_jsx("option", { value: size, children: t('matrix.insert', { rows: size, columns: size }) }, size))), [2, 3, 4].map((size) => (_jsx("option", { value: `identity-${size}`, children: t('matrix.insertIdentity', { rows: size, columns: size }) }, `identity-${size}`)))] }), _jsxs("select", { className: "me-matrix-size", "aria-label": t('template.label'), value: "", disabled: composing, onChange: (event) => onTemplate(event.target.value), children: [_jsx("option", { value: "", disabled: true, children: t('template.placeholder') }), mathTemplates.map((item) => (_jsx("option", { value: item.id, children: t(item.label, item.labelParameters) }, item.id)))] }), _jsx("button", { type: "button", "aria-expanded": symbolsOpen, disabled: composing, onClick: onToggleSymbols, children: t('symbols.title') }), _jsx("span", { className: "me-divider" }), symbols.map((s) => (_jsx("button", { type: "button", "aria-label": t(s.label), disabled: composing || hasRange, onMouseDown: (event) => event.preventDefault(), onClick: () => onInsertSymbol(s.value), children: s.value }, s.label)))] })), _jsx("button", { type: "button", className: "me-toolbar-toggle", "aria-expanded": expanded, onMouseDown: (event) => event.preventDefault(), onClick: () => setExpanded((value) => !value), children: t(expanded ? 'toolbar.less' : 'toolbar.more') }), _jsx("button", { type: "button", disabled: !canUndo || composing, onMouseDown: (event) => event.preventDefault(), onClick: onUndo, children: t('history.undo') }), _jsx("button", { type: "button", disabled: !canRedo || composing, onMouseDown: (event) => event.preventDefault(), onClick: onRedo, children: t('history.redo') }), children] }));
 }
 //# sourceMappingURL=math-editor-toolbar.js.map

package/dist/math-editor-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"math-editor-toolbar.js","sourceRoot":"","sources":["../src/math-editor-toolbar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"math-editor-toolbar.js","sourceRoot":"","sources":["../src/math-editor-toolbar.tsx"],"names":[],"mappings":"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"}

package/dist/math-editor.d.ts

@@ -1,9 +1,29 @@
+import { type LatexParseResult } from './latex.js';
 import { type MathLocale } from './i18n.js';
-import { type ReactNode } from 'react';
-import { type MathDocument } from './model.js';
+import { type ReactNode, type Ref } from 'react';
+import { type MathDocument, type StructureKind } from './model.js';
+export interface MathEditorHandle {
+    /** Replace with supported LaTeX as one undoable edit; failures preserve all editor state. */
+    importLatex(source: string): LatexParseResult;
+}
 export interface MathEditorProps {
+    apiRef?: Ref<MathEditorHandle>;
+    /** Start editing at the initial caret when embedded in a host editor. */
+    autoFocus?: boolean;
+    /** Suggestions take priority; Shift+Enter retains normal line/grid behavior. */
+    enterBehavior?: 'newline' | 'commit';
+    onCommit?: () => void;
+    onCancel?: () => void;
+    /** Hide portaled suggestions while a host keeps this editor mounted in an inactive tab. */
+    showPopovers?: boolean;
+    /** Hide structures a host cannot serialize. Imported/pasted drafts still need host validation. */
+    excludedStructures?: readonly StructureKind[];
+    /** Whether Enter may create another top-level equation line. Defaults to true. */
+    multiline?: boolean;
     /** Hide all toolbar panels while retaining editing and suggestions. */
-    toolbar?: boolean;
+    toolbar?: boolean | readonly StructureKind[];
+    /** Visible structure buttons before More; defaults to 8. */
+    toolbarMaxItems?: number;
     /** Host-owned actions rendered at the end of the main toolbar. */
     toolbarEnd?: ReactNode;
     showTokenLegend?: boolean;
@@ -19,5 +39,5 @@ export interface MathEditorProps {
     label?: string;
 }
 /** Native text fields own IME and local text selection; the tree owns structural editing. */
-export declare function MathEditor({ defaultValue, onChange, onExit, label, locale, showLineNumbers, toolbar, toolbarEnd, showTokenLegend, }: MathEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MathEditor({ apiRef, autoFocus, enterBehavior, onCommit, onCancel, showPopovers, defaultValue, excludedStructures, multiline, onChange, onExit, label, locale, showLineNumbers, toolbar, toolbarMaxItems, toolbarEnd, showTokenLegend, }: MathEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=math-editor.d.ts.map

package/dist/math-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"math-editor.d.ts","sourceRoot":"","sources":["../src/math-editor.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,WAAW,CAAC;AA6BnB,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAmBL,KAAK,YAAY,EAKlB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oFAAoF;IACpF,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGD,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAa,EACb,eAAsB,EACtB,OAAc,EACd,UAAU,EACV,eAAsB,GACvB,EAAE,eAAe,2CA8kCjB"}
+{"version":3,"file":"math-editor.d.ts","sourceRoot":"","sources":["../src/math-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAK/D,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,WAAW,CAAC;AA6BnB,OAAO,EAML,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAoBL,KAAK,YAAY,EAIjB,KAAK,aAAa,EACnB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,gBAAgB;IAC/B,6FAA6F;IAC7F,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAC/C;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC/B,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,aAAa,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kGAAkG;IAClG,kBAAkB,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAC9C,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,aAAa,EAAE,CAAC;IAC7C,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oFAAoF;IACpF,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGD,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,SAAiB,EACjB,aAAyB,EACzB,QAAQ,EACR,QAAQ,EACR,YAAmB,EACnB,YAAY,EACZ,kBAAuB,EACvB,SAAgB,EAChB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAa,EACb,eAAsB,EACtB,OAAc,EACd,eAAmB,EACnB,UAAU,EACV,eAAsB,GACvB,EAAE,eAAe,2CA8zCjB"}

package/dist/math-editor.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { positionMathMenu } from './dom/menu-position.js';
+import { fences } 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';
@@ -10,18 +13,19 @@ import { splitLine, joinPreviousLine, moveLineVertical } from './lines.js';
 import { insertIdentityMatrix, insertMatrix, activeGrid, MATRIX_MAX_SIZE, matrixEnvironments, moveMatrixVertical, resizeMatrix, setMatrixEnvironment, } from './matrix.js';
 import { createPortal } from 'react-dom';
 import { acceptSuggestion, findSuggestions, mathStructures } from './suggestions.js';
-import { useId, useLayoutEffect, useRef, useState } from 'react';
-import { gridDeletionTarget, removeGrid, row, documentRows, isGrid, commit, createHistory, initialState, insertStructure, moveCaret, redo, setText, textNodes, toLatex, undo, unwrapPrevious, } from './model.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';
 const structures = mathStructures;
 /** Native text fields own IME and local text selection; the tree owns structural editing. */
-export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko', showLineNumbers = true, toolbar = true, toolbarEnd, showTokenLegend = true, }) {
+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, }) {
     const t = (key, parameters) => translate(locale, key, parameters);
     const labels = createEditorLabels(locale);
     const [history, setHistory] = useState(() => createHistory(initialState(defaultValue)));
     const historyRef = useRef(history);
-    const [menuPosition, setMenuPosition] = useState();
+    const suggestionMenu = useRef(null);
+    const selectionMenu = useRef(null);
     const [symbolsOpen, setSymbolsOpen] = useState(false);
-    const [editing, setEditing] = useState(false);
+    const [editing, setEditing] = useState(autoFocus);
     const [range, setRange] = useState();
     const [clipboardMessage, setClipboardMessage] = useState('');
     const surface = useRef(null);
@@ -35,6 +39,8 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
     const compositionToken = useRef(null);
     // Keep the active input identity stable until IME composition commits. Splitting it early loses drafts.
     const tokensFor = (node) => {
+        if (isLiteralText(history.present.document, node.id))
+            return [{ text: node.text, start: 0, end: node.text.length, kind: 'draft' }];
         const frozen = compositionToken.current;
         if (!frozen || frozen.id !== node.id)
             return tokenizeMathText(node.text);
@@ -51,17 +57,21 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
         });
     };
     const inputs = useRef(new Map());
-    const focusNext = useRef(false);
+    const focusNext = useRef(autoFocus);
     const suggestionId = useId();
     const state = history.present;
     const matrixContext = activeGrid(state);
     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);
+    matches.candidates = matches.candidates.filter((candidate) => !candidate.kind || !excludedStructures.includes(candidate.kind));
     const query = matches.query;
+    const operandMenuKey = useRef('');
     const queryKey = `${active.id}:${searchCaret}:${query}`;
     const candidates = editing &&
         !symbolsOpen &&
+        !isLiteralText(state.document, state.caret.id) &&
+        (composing || state.caret.start === state.caret.end) &&
         !range &&
         focused &&
         (composing || state.caret.start === state.caret.end) &&
@@ -88,6 +98,30 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
         setSelectedGrid(undefined);
         publish(commit(historyRef.current, next), true);
     };
+    useImperativeHandle(apiRef, () => ({
+        importLatex(source) {
+            const result = parseLatex(source, { multiline, excludedStructures });
+            if (!result.ok)
+                return result;
+            if (composing)
+                return {
+                    ok: false,
+                    source,
+                    diagnostics: [
+                        {
+                            code: 'unsupported-structure',
+                            message: 'Finish text composition before importing.',
+                            start: 0,
+                            end: source.length,
+                        },
+                    ],
+                };
+            setSymbolsOpen(false);
+            setDismissed('');
+            apply(initialState(result.document));
+            return result;
+        },
+    }));
     const select = (caret) => {
         // React can emit a selection event for the old input after a structural keydown.
         if (focusNext.current)
@@ -113,8 +147,7 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
         focusNext.current = false;
     }, [history, editing]);
     useLayoutEffect(() => {
-        if (!candidates.length) {
-            setMenuPosition(undefined);
+        if (!showPopovers || !candidates.length) {
             return;
         }
         const position = () => {
@@ -131,13 +164,8 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
                 range.collapse(true);
                 x = range.getBoundingClientRect().left;
             }
-            const below = window.innerHeight - rect.bottom - 16;
-            const height = Math.min(340, candidates.length * 54 + 78, Math.max(below, rect.top - 16));
-            setMenuPosition({
-                left: Math.max(8, Math.min(x, window.innerWidth - 344)),
-                top: below >= height ? rect.bottom + 8 : Math.max(8, rect.top - height - 8),
-                maxHeight: height,
-            });
+            if (suggestionMenu.current)
+                positionMathMenu(suggestionMenu.current, new DOMRect(x, rect.top, 0, rect.height), 340);
         };
         position();
         window.addEventListener('resize', position);
@@ -146,11 +174,19 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
             window.removeEventListener('resize', position);
             window.removeEventListener('scroll', position, true);
         };
-    }, [queryKey, candidates.length, active.id]);
+    }, [queryKey, candidates.length, active.id, showPopovers]);
     useLayoutEffect(() => {
-        document
-            .getElementById(`${suggestionId}-${selectedIndex}`)
-            ?.scrollIntoView({ block: 'nearest' });
+        // Scroll only the list. scrollIntoView can also move the host document.
+        const option = document.getElementById(`${suggestionId}-${selectedIndex}`);
+        const list = option?.parentElement;
+        if (option && list) {
+            const itemRect = option.getBoundingClientRect();
+            const listRect = list.getBoundingClientRect();
+            if (itemRect.top < listRect.top)
+                list.scrollTop -= listRect.top - itemRect.top;
+            else if (itemRect.bottom > listRect.bottom)
+                list.scrollTop += itemRect.bottom - listRect.bottom;
+        }
     }, [selectedIndex, queryKey]);
     const choose = (index) => {
         if (compositionStart.current || composing)
@@ -366,6 +402,23 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
         }
         if (event.metaKey || event.ctrlKey || event.altKey)
             return;
+        if (range && selectionChoices.length && ['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;
+        }
+        // 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();
+            apply(pasteFragment(current, { version: 1, rows: [row(event.key)] }, range));
+            return;
+        }
         if (range && ['Backspace', 'Delete'].includes(event.key)) {
             event.preventDefault();
             apply(deleteRange(current, range));
@@ -380,9 +433,84 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
             activate(range?.focus ?? { id: current.caret.id, offset: current.caret.start });
         }
     };
-    const selectionFragment = range ? copyRange(state.document, range) : undefined;
-    const canWrap = selectionFragment?.rows.length === 1;
+    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 selectionFragment = selectedRange ? copyRange(state.document, selectedRange) : undefined;
+    const canWrap = selectionFragment?.rows.length === 1 &&
+        !isLiteralText(state.document, selectedRange.anchor.id);
+    const selectionChoices = structures.filter((s) => !excludedStructures.includes(s.kind) &&
+        [
+            'bold',
+            'calligraphic',
+            'blackboard',
+            'fraction',
+            'binomial',
+            'root',
+            'indexedRoot',
+            'norm',
+            'braces',
+            'angle',
+            'openClosed',
+            'closedOpen',
+            'overbrace',
+            'underbrace',
+            'overset',
+            'underset',
+            'vec',
+            'hat',
+            'tilde',
+            'bar',
+            'dot',
+            'ddot',
+            'widehat',
+            'widetilde',
+            'overline',
+            'superscript',
+            'subscript',
+            'parentheses',
+            'brackets',
+            'absolute',
+        ].includes(s.kind));
+    const [selectionIndex, setSelectionIndex] = useState(0);
+    useLayoutEffect(() => setSelectionIndex(0), [range]);
+    useLayoutEffect(() => {
+        if (!showPopovers || !selectionFragment)
+            return;
+        const position = () => {
+            const selected = surface.current?.querySelectorAll('[data-range-selected]');
+            const rect = (selected?.[selected.length - 1] ??
+                surface.current?.querySelector('.me-input') ??
+                surface.current)?.getBoundingClientRect();
+            if (rect && selectionMenu.current)
+                positionMathMenu(selectionMenu.current, rect, 340);
+        };
+        position();
+        window.addEventListener('scroll', position, true);
+        window.addEventListener('resize', position);
+        return () => {
+            window.removeEventListener('scroll', position, true);
+            window.removeEventListener('resize', position);
+        };
+    }, [range, state.document, state.caret, showPopovers]);
+    useLayoutEffect(() => {
+        const list = selectionMenu.current?.querySelector('.me-suggestions');
+        const option = list?.querySelector('[aria-selected="true"]');
+        if (!list || !option)
+            return;
+        const item = option.getBoundingClientRect(), box = list.getBoundingClientRect();
+        if (item.top < box.top)
+            list.scrollTop -= box.top - item.top;
+        else if (item.bottom > box.bottom)
+            list.scrollTop += item.bottom - box.bottom;
+    }, [selectionIndex]);
     const insertTool = (kind) => {
+        if (excludedStructures.includes(kind))
+            return;
         const current = historyRef.current.present;
         const selection = range ??
             (current.caret.start !== current.caret.end
@@ -397,7 +525,7 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
         }
         if (range)
             return;
-        apply(insertStructure(historyRef.current.present, kind, ['fraction', 'superscript', 'subscript'].includes(kind)));
+        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) => {
@@ -407,10 +535,27 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
                         : 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 !== 'text' && ['sum', 'product', 'integral'].includes(node.type))
-                return (_jsxs("span", { className: "me-structure me-large-operator", "data-structure": node.type, 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: '∫' }[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 === '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, children: [['parentheses', 'brackets', 'absolute'].includes(node.type) && (_jsx("span", { className: "me-delimiter", "aria-hidden": "true", children: { parentheses: '(', brackets: '[', absolute: '|' }[node.type] })), node.type === 'root' && (_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'
+                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'
@@ -424,7 +569,7 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
                                             : 'index'
                                         : node.type === 'root'
                                             ? 'radicand'
-                                            : 'group') }, slot.id))), ['parentheses', 'brackets', 'absolute'].includes(node.type) && (_jsx("span", { className: "me-delimiter", "aria-hidden": "true", children: { parentheses: ')', brackets: ']', absolute: '|' }[node.type] }))] }, node.id));
+                                            : '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}`;
@@ -549,30 +694,62 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
                                     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();
-                                    setCandidateIndex((selectedIndex + (event.key === 'ArrowDown' ? 1 : candidates.length - 1)) %
-                                        candidates.length);
+                                    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) {
+                                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?.();
+                                        return;
+                                    }
                                     if (activeGrid(current)) {
                                         if (activeGrid(current).matrix.type !== 'matrix')
                                             apply(resizeMatrix(current, 'row', 'insert'));
                                     }
-                                    else
+                                    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();
@@ -642,15 +819,17 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
                             } })) : (_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", onCopy: copySelection, onCut: (event) => copySelection(event, true), onPaste: pasteSelection, role: "group", lang: locale, dir: mathLocaleDirection(locale), "aria-label": label ?? t('editor.label'), onBlur: (event) => {
+    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.currentTarget.contains(event.relatedTarget) &&
+                !suggestionMenu.current?.contains(event.relatedTarget) &&
+                !selectionMenu.current?.contains(event.relatedTarget) &&
                 !compositionStart.current &&
                 !focusNext.current &&
                 !drag.current) {
                 setFocused(false);
                 setEditing(false);
             }
-        }, children: [toolbar && (_jsx(MathEditorToolbar, { locale: locale, 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, canWrap: canWrap, canUndo: !!history.past.length, canRedo: !!history.future.length, symbolsOpen: symbolsOpen, 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) => {
                     const current = historyRef.current.present, caret = current.caret;
@@ -662,7 +841,7 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
                 }, onInsert: (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("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, 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']
                         .filter((axis) => axis === 'row' || matrixContext.matrix.type === 'matrix')
                         .flatMap((axis) => ['insert', 'delete'].map((action) => {
                         const size = axis === 'row' ? matrixContext.rows : matrixContext.matrix.columns;
@@ -681,12 +860,12 @@ export function MathEditor({ defaultValue, onChange, onExit, label, locale = 'ko
                                     : 'grid.deleteColumn') }, `${axis}-${action}`));
                     })), _jsx("small", { children: matrixContext.matrix.type === 'matrix'
                             ? t('matrix.keyboardHint')
-                            : `${t(matrixContext.matrix.type === 'aligned' ? 'aligned.inputHint' : 'cases.inputHint')} · ${t('grid.keyboardHint')}` })] })), candidates.length > 0 &&
-                menuPosition &&
-                createPortal(_jsxs("div", { className: "me-suggestion-panel", lang: locale, dir: mathLocaleDirection(locale), style: menuPosition, 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') })] }), 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: () => {
+                            : `${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: () => {
                     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))) }) }), toolbar && selectionFragment && (_jsxs("div", { className: "me-wrap-tools", role: "toolbar", "aria-label": t('selection.toolbar'), children: [_jsx("span", { children: t(canWrap ? 'selection.highlighted' : 'selection.singleRowRequired') }), structures
-                        .filter((s) => ['fraction', 'root', 'superscript', 'parentheses'].includes(s.kind))
-                        .map((s) => (_jsxs("button", { type: "button", disabled: !canWrap, onMouseDown: (event) => event.preventDefault(), onClick: () => insertTool(s.kind), "aria-label": t('selection.wrap', { kind: t(s.label) }), children: [s.glyph, " ", t(s.label)] }, s.kind)))] }))] }));
+                }, 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 &&
+                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)] }));
 }
 //# sourceMappingURL=math-editor.js.map