@barocss/math-editor 0.4.0 → 0.6.1

package/dist/dom/help.js

@@ -0,0 +1,104 @@
+import { translate } from '../i18n.js';
+const helpEvent = 'math-editor-help';
+/** Route a toolbar request to its owning field, including fields inside an iframe. */
+export function requestMathHelp(control) {
+    const EventClass = control.ownerDocument.defaultView.Event;
+    control.dispatchEvent(new EventClass(helpEvent, { bubbles: true }));
+}
+/** Shared help UI. It does not execute model commands or read the clipboard. */
+export function attachMathHelp(root, locale) {
+    let dialog;
+    let previous = null;
+    let selection;
+    const close = (restore = true) => {
+        dialog?.close();
+        dialog?.remove();
+        dialog = undefined;
+        if (restore && previous?.isConnected) {
+            previous.focus({ preventScroll: true });
+            if (selection && previous.tagName === 'INPUT') {
+                previous.setSelectionRange(selection.start, selection.end, selection.direction);
+                previous.dispatchEvent(new root.ownerDocument.defaultView.Event('select', { bubbles: true }));
+            }
+        }
+    };
+    const open = () => {
+        if (dialog)
+            return;
+        const doc = root.ownerDocument;
+        const t = (key) => translate(locale(), key);
+        previous = doc.activeElement;
+        const input = previous?.tagName === 'INPUT' ? previous : undefined;
+        selection =
+            input && input.selectionStart !== null && input.selectionEnd !== null
+                ? {
+                    start: input.selectionStart,
+                    end: input.selectionEnd,
+                    direction: input.selectionDirection ?? 'none',
+                }
+                : undefined;
+        dialog = doc.createElement('dialog');
+        dialog.className = 'me-help me-utility-panel';
+        dialog.setAttribute('aria-label', t('help.title'));
+        const heading = doc.createElement('h2');
+        heading.textContent = t('help.title');
+        const intro = doc.createElement('p');
+        intro.textContent = t('help.intro');
+        const list = doc.createElement('dl');
+        for (const [keys, message] of [
+            ['Tab / Shift+Tab', 'help.slots'],
+            ['Ctrl+←/→ · Mac: ⌥+←/→ (+Shift)', 'help.units'],
+            ['Shift+← / →', 'help.select'],
+            ['(  [  {  |  /  ^  _', 'help.wrap'],
+            ['Alt+↓', 'help.suggestions'],
+            ['↑ / ↓ · Enter · Esc', 'help.menu'],
+            ['Ctrl/Cmd+C · X · V', 'help.clipboard'],
+            ['Alt+Shift+V', 'help.latex'],
+            ['Ctrl/Cmd+Z · Ctrl/Cmd+Shift+Z', 'help.history'],
+            ['Enter / Shift+Enter', 'help.lines'],
+            ['F1', 'help.open'],
+        ]) {
+            const term = doc.createElement('dt');
+            term.textContent = keys;
+            const definition = doc.createElement('dd');
+            definition.textContent = t(message);
+            list.append(term, definition);
+        }
+        const note = doc.createElement('p');
+        note.textContent = t('help.platform');
+        const button = doc.createElement('button');
+        button.type = 'button';
+        button.textContent = t('common.close');
+        button.onclick = () => close();
+        dialog.append(heading, intro, list, note, button);
+        dialog.addEventListener('cancel', (event) => {
+            event.preventDefault();
+            close();
+        });
+        // Help text selection/copy must not invoke the formula's clipboard or keyboard handlers.
+        for (const name of ['copy', 'cut', 'paste', 'keydown', 'keyup'])
+            dialog.addEventListener(name, (event) => event.stopPropagation());
+        root.append(dialog);
+        dialog.showModal();
+        button.focus();
+    };
+    const keydown = (event) => {
+        if (event.key !== 'F1' ||
+            event.isComposing ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.shiftKey)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        open();
+    };
+    root.addEventListener(helpEvent, open);
+    root.addEventListener('keydown', keydown, true);
+    return () => {
+        root.removeEventListener(helpEvent, open);
+        root.removeEventListener('keydown', keydown, true);
+        close(false);
+    };
+}

package/dist/dom/menu-position.d.ts

@@ -4,6 +4,9 @@ interface MenuRect {
     right: number;
     bottom: number;
 }
+/** Follow layout and visual viewport changes, including ancestor transforms that
+ * do not produce window resize or element ResizeObserver notifications. */
+export declare function followMathMenuPosition(anchor: HTMLElement, position: () => void, ignoreScrollWithin?: HTMLElement): () => void;
 /** Choose a scrollable vertical gap without covering host controls in the same column. */
 export declare function mathMenuPlacement(bounds: MenuRect, anchor: MenuRect, width: number, desiredHeight: number, preferredHeight: number, avoid?: readonly MenuRect[]): {
     left: number;

package/dist/dom/menu-position.js

@@ -1,3 +1,41 @@
+/** Follow layout and visual viewport changes, including ancestor transforms that
+ * do not produce window resize or element ResizeObserver notifications. */
+export function followMathMenuPosition(anchor, position, ignoreScrollWithin) {
+    const win = anchor.ownerDocument.defaultView;
+    let frame = 0;
+    const schedule = () => {
+        if (!frame)
+            frame = win.requestAnimationFrame(() => {
+                frame = 0;
+                position();
+            });
+    };
+    const scroll = (event) => {
+        if (event.target &&
+            'nodeType' in event.target &&
+            ignoreScrollWithin?.contains(event.target))
+            return;
+        schedule();
+    };
+    const changes = new MutationObserver(schedule);
+    for (let element = anchor; element; element = element.parentElement)
+        changes.observe(element, { attributes: true, attributeFilter: ['style', 'class'] });
+    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);
+    resize?.observe(anchor);
+    win.addEventListener('resize', schedule);
+    win.addEventListener('scroll', scroll, true);
+    win.visualViewport?.addEventListener('resize', schedule);
+    win.visualViewport?.addEventListener('scroll', schedule);
+    return () => {
+        changes.disconnect();
+        resize?.disconnect();
+        win.cancelAnimationFrame(frame);
+        win.removeEventListener('resize', schedule);
+        win.removeEventListener('scroll', scroll, true);
+        win.visualViewport?.removeEventListener('resize', schedule);
+        win.visualViewport?.removeEventListener('scroll', schedule);
+    };
+}
 /** Fixed menus escape ordinary scrolling text areas. Transforms and containment
  * establish a local containing block, so overflow at that block and above still clips. */
 function establishesFixedContainingBlock(style) {
@@ -68,15 +106,22 @@ export function mathMenuPlacement(bounds, anchor, width, desiredHeight, preferre
 /** Position a fixed portal in viewport coordinates, including transformed modal hosts. */
 export function positionMathMenu(menu, anchor, maxHeight, avoidElements = []) {
     const win = menu.ownerDocument.defaultView;
-    const bounds = { left: 8, top: 8, right: win.innerWidth - 8, bottom: win.innerHeight - 8 };
+    const viewport = win.visualViewport;
+    const bounds = {
+        left: (viewport?.offsetLeft ?? 0) + 8,
+        top: (viewport?.offsetTop ?? 0) + 8,
+        right: (viewport?.offsetLeft ?? 0) + (viewport?.width ?? win.innerWidth) - 8,
+        bottom: (viewport?.offsetTop ?? 0) + (viewport?.height ?? win.innerHeight) - 8,
+    };
     let contained = false;
     for (let parent = menu.parentElement; parent; parent = parent.parentElement) {
         const style = win.getComputedStyle(parent);
         contained ||= establishesFixedContainingBlock(style);
-        const dialog = parent.matches('dialog, [role="dialog"]');
         const paintClip = /paint|strict|content/.test(style.contain) || style.contentVisibility === 'auto';
-        const clipX = dialog || paintClip || (contained && /auto|scroll|hidden|clip/.test(style.overflowX));
-        const clipY = dialog || paintClip || (contained && /auto|scroll|hidden|clip/.test(style.overflowY));
+        // Dialog semantics do not create a CSS clipping boundary. A compact dialog
+        // can host a fixed menu taller than itself; constrain only actual paint clips.
+        const clipX = paintClip || (contained && /auto|scroll|hidden|clip/.test(style.overflowX));
+        const clipY = paintClip || (contained && /auto|scroll|hidden|clip/.test(style.overflowY));
         if (!clipX && !clipY)
             continue;
         const rect = parent.getBoundingClientRect();

package/dist/dom/readable-layout.d.ts

@@ -0,0 +1,3 @@
+/** Reserve line space for translated scripts. Their visual bounds are not part
+ * of flex layout, and a font floor can make them taller than the base row. */
+export declare function followReadableMathLayout(surface: HTMLElement): () => void;

package/dist/dom/readable-layout.js

@@ -0,0 +1,52 @@
+/** Reserve line space for translated scripts. Their visual bounds are not part
+ * of flex layout, and a font floor can make them taller than the base row. */
+export function followReadableMathLayout(surface) {
+    const win = surface.ownerDocument.defaultView;
+    let frame = 0;
+    const measure = () => {
+        frame = 0;
+        const minimum = win.getComputedStyle(surface).getPropertyValue('--me-min-font-size').trim();
+        const enabled = !minimum || Number.parseFloat(minimum) !== 0;
+        for (const line of surface.querySelectorAll('.me-document-line')) {
+            const row = line.querySelector(':scope > .me-row');
+            if (!row)
+                continue;
+            const bounds = row.getBoundingClientRect();
+            let top = bounds.top, bottom = bounds.bottom;
+            if (enabled) {
+                for (const glyph of row.querySelectorAll('.me-measure, .me-delimiter, .me-radical, .me-operator-glyph')) {
+                    const rect = glyph.getBoundingClientRect();
+                    top = Math.min(top, rect.top);
+                    bottom = Math.max(bottom, rect.bottom);
+                }
+            }
+            const before = `${Math.ceil(bounds.top - top)}px`;
+            const after = `${Math.ceil(bottom - bounds.bottom)}px`;
+            if (line.style.paddingTop !== before)
+                line.style.paddingTop = before;
+            if (line.style.paddingBottom !== after)
+                line.style.paddingBottom = after;
+        }
+    };
+    const schedule = () => {
+        if (!frame)
+            frame = win.requestAnimationFrame(measure);
+    };
+    const mutations = new MutationObserver(schedule);
+    mutations.observe(surface, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+    });
+    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);
+    resize?.observe(surface);
+    win.addEventListener('resize', schedule);
+    schedule();
+    return () => {
+        mutations.disconnect();
+        resize?.disconnect();
+        win.cancelAnimationFrame(frame);
+        win.removeEventListener('resize', schedule);
+    };
+}

package/dist/dom/toolbar-catalog.d.ts

@@ -1,7 +1,7 @@
 import { type MathLocale } from '../i18n.js';
 import type { StructureKind } from '../model.js';
 /** Full discovery search retains the symbol catalog and suggestion engine's ranking. */
-export declare function findToolbarSymbols(query: string, locale: MathLocale): (readonly ["↑", "symbol.upArrow", "uparrow arrow 화살표", "- ->", "\\uparrow"] | readonly ["↕", "symbol.upDownArrow", "updownarrow arrow 화살표", "- ->", "\\updownarrow"] | readonly ["⇐", "symbol.doubleLeftArrow", "Leftarrow arrow 화살표", "- ->", "\\Leftarrow"] | readonly ["⇑", "symbol.doubleUpArrow", "Uparrow arrow 화살표", "- ->", "\\Uparrow"] | readonly ["⇓", "symbol.doubleDownArrow", "Downarrow arrow 화살표", "- ->", "\\Downarrow"] | readonly ["⇕", "symbol.doubleUpDownArrow", "Updownarrow arrow 화살표", "- ->", "\\Updownarrow"] | readonly ["↗", "symbol.northEastArrow", "nearrow arrow 화살표", "- ->", "\\nearrow"] | readonly ["↘", "symbol.southEastArrow", "searrow arrow 화살표", "- ->", "\\searrow"] | readonly ["↙", "symbol.southWestArrow", "swarrow arrow 화살표", "- ->", "\\swarrow"] | readonly ["↖", "symbol.northWestArrow", "nwarrow arrow 화살표", "- ->", "\\nwarrow"] | readonly ["⟶", "symbol.longRightArrow", "longrightarrow arrow 화살표", "- ->", "\\longrightarrow"] | readonly ["⟵", "symbol.longLeftArrow", "longleftarrow arrow 화살표", "- ->", "\\longleftarrow"] | readonly ["⟷", "symbol.longLeftRightArrow", "longleftrightarrow arrow 화살표", "-", "\\longleftrightarrow"] | readonly ["⟹", "symbol.longDoubleRightArrow", "Longrightarrow arrow 화살표", "- ->", "\\Longrightarrow"] | readonly ["⟸", "symbol.longDoubleLeftArrow", "Longleftarrow arrow 화살표", "- ->", "\\Longleftarrow"] | readonly ["⟺", "symbol.longDoubleLeftRightArrow", "Longleftrightarrow arrow 화살표", "", "\\Longleftrightarrow"] | readonly ["↪", "symbol.hookRightArrow", "hookrightarrow arrow 화살표", "- ->", "\\hookrightarrow"] | readonly ["↩", "symbol.hookLeftArrow", "hookleftarrow arrow 화살표", "- ->", "\\hookleftarrow"] | readonly ["⇀", "symbol.rightHarpoonUp", "rightharpoonup arrow 화살표", "- ->", "\\rightharpoonup"] | readonly ["↼", "symbol.leftHarpoonUp", "leftharpoonup arrow 화살표", "- ->", "\\leftharpoonup"] | readonly ["⇁", "symbol.rightHarpoonDown", "rightharpoondown arrow 화살표", "- ->", "\\rightharpoondown"] | readonly ["↽", "symbol.leftHarpoonDown", "leftharpoondown arrow 화살표", "- ->", "\\leftharpoondown"] | readonly ["⇌", "symbol.rightLeftHarpoons", "rightleftharpoons arrow 화살표", "- ->", "\\rightleftharpoons"] | readonly ["⇋", "symbol.leftRightHarpoons", "leftrightharpoons arrow 화살표", "- ->", "\\leftrightharpoons"] | readonly ["↓", "symbol.downArrow", "downarrow down 아래화살표 아래쪽화살표", "- ->", "\\downarrow"] | readonly ["⩾", "symbol.greaterOrEqualSlanted", "geqslant", "", "\\geqslant"] | readonly ["⩽", "symbol.lessOrEqualSlanted", "leqslant", "", "\\leqslant"] | readonly ["∋", "symbol.contains", "ni contains", "", "\\ni"] | readonly ["⊃", "symbol.superset", "supset superset", "", "\\supset"] | readonly ["⊇", "symbol.supersetOrEqual", "supseteq", "", "\\supseteq"] | readonly ["⊈", "symbol.notSubsetOrEqual", "nsubseteq", "", "\\nsubseteq"] | readonly ["∖", "symbol.setDifference", "setminus difference", "", "\\setminus"] | readonly ["ℕ", "symbol.naturals", "naturals natural", "", "\\mathbb{N}"] | readonly ["ℤ", "symbol.integers", "integers integer", "", "\\mathbb{Z}"] | readonly ["ℚ", "symbol.rationals", "rationals rational", "", "\\mathbb{Q}"] | readonly ["ℝ", "symbol.reals", "reals real", "", "\\mathbb{R}"] | readonly ["ℂ", "symbol.complexes", "complexes complex", "", "\\mathbb{C}"] | readonly ["⊥", "symbol.perpendicular", "perp perpendicular", "", "\\perp"] | readonly ["∥", "symbol.parallel", "parallel", "", "\\parallel"] | readonly ["≅", "symbol.congruent", "cong congruent", "", "\\cong"] | readonly ["∼", "symbol.similar", "sim similar", "", "\\sim"] | readonly ["↦", "symbol.mapsTo", "mapsto maps arrow 화살표", "|-> - ->", "\\mapsto"] | readonly ["…", "symbol.ellipsis", "ldots ellipsis", "", "\\ldots"] | readonly ["⋯", "symbol.centeredDots", "cdots", "", "\\cdots"] | readonly ["⋮", "symbol.verticalDots", "vdots", "", "\\vdots"] | readonly ["⋱", "symbol.diagonalDots", "ddots", "", "\\ddots"] | readonly ["°", "symbol.degree", "degree degrees 각도", "", "{}^{\\circ}"] | readonly ["∠", "symbol.angle", "angle", "", "\\angle"] | readonly ["+", "symbol.plus", "plus sum", "+", "+"] | readonly ["−", "symbol.minus", "minus", "-", "-"] | readonly ["±", "symbol.plusMinus", "plusminus sum", "+- +", "\\pm"] | readonly ["∓", "symbol.minusPlus", "minusplus", "-+ -", "\\mp"] | readonly ["×", "symbol.times", "times multiply", "*", "\\times"] | readonly ["·", "symbol.dot", "dot multiply", "*", "\\cdot"] | readonly ["÷", "symbol.divide", "divide division", "/", "\\div"] | readonly ["=", "symbol.equal", "equal", "=", "="] | readonly ["≠", "symbol.notEqual", "neq unequal", "!= /= =", "\\ne"] | readonly ["≈", "symbol.approximatelyEqual", "approx", "~ ~~ =", "\\approx"] | readonly ["≡", "symbol.equivalent", "equiv", "=== =", "\\equiv"] | readonly ["<", "symbol.lessThan", "less", "<", "<"] | readonly [">", "symbol.greaterThan", "greater", ">", ">"] | readonly ["≤", "symbol.lessOrEqual", "leq less", "<= <- <", "\\le"] | readonly ["≥", "symbol.greaterOrEqual", "geq greater", ">= >- >", "\\ge"] | readonly ["∝", "symbol.proportional", "proportional", "~", "\\propto"] | readonly ["→", "symbol.rightArrow", "rightarrow arrow", "-> -", "\\to"] | readonly ["←", "symbol.leftArrow", "leftarrow arrow", "<- < - ->", "\\leftarrow"] | readonly ["↔", "symbol.leftRightArrow", "leftrightarrow arrow", "<-> - ->", "\\leftrightarrow"] | readonly ["⇒", "symbol.implies", "implies arrow 화살표", "=> = - ->", "\\Rightarrow"] | readonly ["⇔", "symbol.iff", "iff arrow 화살표", "<=> - ->", "\\Leftrightarrow"] | readonly ["∈", "symbol.elementOf", "in element", "E", "\\in"] | readonly ["∉", "symbol.notElementOf", "notin element", "E/", "\\notin"] | readonly ["∀", "symbol.forAll", "forall", "A", "\\forall"] | readonly ["∃", "symbol.exists", "exists", "E", "\\exists"] | readonly ["∪", "symbol.union", "union", "U", "\\cup"] | readonly ["∩", "symbol.intersection", "intersection", "", "\\cap"] | readonly ["⊂", "symbol.subset", "subset", "<", "\\subset"] | readonly ["⊆", "symbol.subsetOrEqual", "subseteq", "<=", "\\subseteq"] | readonly ["∅", "symbol.emptySet", "emptyset", "", "\\emptyset"] | readonly ["∞", "symbol.infinity", "infinity infty", "", "\\infty"] | readonly ["∂", "symbol.partialDerivative", "partial derivative", "", "\\partial"] | readonly ["∇", "symbol.nabla", "nabla gradient", "", "\\nabla"] | readonly ["∧", "symbol.logicalAnd", "and wedge", "^", "\\wedge"] | readonly ["∨", "symbol.logicalOr", "or vee", "", "\\vee"] | readonly ["¬", "symbol.logicalNot", "not neg", "!", "\\neg"] | readonly ["α", "symbol.alpha", "alpha", "", "\\alpha"] | readonly ["β", "symbol.beta", "beta", "", "\\beta"] | readonly ["γ", "symbol.gamma", "gamma", "", "\\gamma"] | readonly ["δ", "symbol.delta", "delta", "", "\\delta"] | readonly ["ε", "symbol.epsilon", "epsilon", "", "\\epsilon"] | readonly ["ζ", "symbol.zeta", "zeta", "", "\\zeta"] | readonly ["η", "symbol.eta", "eta", "", "\\eta"] | readonly ["θ", "symbol.theta", "theta", "", "\\theta"] | readonly ["ι", "symbol.iota", "iota", "", "\\iota"] | readonly ["κ", "symbol.kappa", "kappa", "", "\\kappa"] | readonly ["λ", "symbol.lambda", "lambda", "", "\\lambda"] | readonly ["μ", "symbol.mu", "mu", "", "\\mu"] | readonly ["ν", "symbol.nu", "nu", "", "\\nu"] | readonly ["ξ", "symbol.xi", "xi", "", "\\xi"] | readonly ["π", "symbol.pi", "pi", "", "\\pi"] | readonly ["ρ", "symbol.rho", "rho", "", "\\rho"] | readonly ["σ", "symbol.sigma", "sigma", "", "\\sigma"] | readonly ["τ", "symbol.tau", "tau", "", "\\tau"] | readonly ["υ", "symbol.upsilon", "upsilon", "", "\\upsilon"] | readonly ["φ", "symbol.phi", "phi", "", "\\phi"] | readonly ["χ", "symbol.chi", "chi", "", "\\chi"] | readonly ["ψ", "symbol.psi", "psi", "", "\\psi"] | readonly ["ω", "symbol.omega", "omega", "", "\\omega"] | readonly ["Γ", "symbol.upperGamma", "Gamma", "", "\\Gamma"] | readonly ["Δ", "symbol.upperDelta", "Delta", "", "\\Delta"] | readonly ["Θ", "symbol.upperTheta", "Theta", "", "\\Theta"] | readonly ["Λ", "symbol.upperLambda", "Lambda", "", "\\Lambda"] | readonly ["Ξ", "symbol.upperXi", "Xi", "", "\\Xi"] | readonly ["Π", "symbol.upperPi", "Pi", "", "\\Pi"] | readonly ["Σ", "symbol.upperSigma", "Sigma", "", "\\Sigma"] | readonly ["Φ", "symbol.upperPhi", "Phi", "", "\\Phi"] | readonly ["Ψ", "symbol.upperPsi", "Psi", "", "\\Psi"] | readonly ["Ω", "symbol.upperOmega", "Omega", "", "\\Omega"])[];
+export declare function findToolbarSymbols(query: string, locale: MathLocale): (readonly ["↑", "symbol.upArrow", "uparrow arrow 화살표", "- ->", "\\uparrow"] | readonly ["↕", "symbol.upDownArrow", "updownarrow arrow 화살표", "- ->", "\\updownarrow"] | readonly ["⇐", "symbol.doubleLeftArrow", "Leftarrow arrow 화살표", "- ->", "\\Leftarrow"] | readonly ["⇑", "symbol.doubleUpArrow", "Uparrow arrow 화살표", "- ->", "\\Uparrow"] | readonly ["⇓", "symbol.doubleDownArrow", "Downarrow arrow 화살표", "- ->", "\\Downarrow"] | readonly ["⇕", "symbol.doubleUpDownArrow", "Updownarrow arrow 화살표", "- ->", "\\Updownarrow"] | readonly ["↗", "symbol.northEastArrow", "nearrow arrow 화살표", "- ->", "\\nearrow"] | readonly ["↘", "symbol.southEastArrow", "searrow arrow 화살표", "- ->", "\\searrow"] | readonly ["↙", "symbol.southWestArrow", "swarrow arrow 화살표", "- ->", "\\swarrow"] | readonly ["↖", "symbol.northWestArrow", "nwarrow arrow 화살표", "- ->", "\\nwarrow"] | readonly ["⟶", "symbol.longRightArrow", "longrightarrow arrow 화살표", "- ->", "\\longrightarrow"] | readonly ["⟵", "symbol.longLeftArrow", "longleftarrow arrow 화살표", "- ->", "\\longleftarrow"] | readonly ["⟷", "symbol.longLeftRightArrow", "longleftrightarrow arrow 화살표", "-", "\\longleftrightarrow"] | readonly ["⟹", "symbol.longDoubleRightArrow", "Longrightarrow arrow 화살표", "- ->", "\\Longrightarrow"] | readonly ["⟸", "symbol.longDoubleLeftArrow", "Longleftarrow arrow 화살표", "- ->", "\\Longleftarrow"] | readonly ["⟺", "symbol.longDoubleLeftRightArrow", "Longleftrightarrow arrow 화살표", "", "\\Longleftrightarrow"] | readonly ["↪", "symbol.hookRightArrow", "hookrightarrow arrow 화살표", "- ->", "\\hookrightarrow"] | readonly ["↩", "symbol.hookLeftArrow", "hookleftarrow arrow 화살표", "- ->", "\\hookleftarrow"] | readonly ["⇀", "symbol.rightHarpoonUp", "rightharpoonup arrow 화살표", "- ->", "\\rightharpoonup"] | readonly ["↼", "symbol.leftHarpoonUp", "leftharpoonup arrow 화살표", "- ->", "\\leftharpoonup"] | readonly ["⇁", "symbol.rightHarpoonDown", "rightharpoondown arrow 화살표", "- ->", "\\rightharpoondown"] | readonly ["↽", "symbol.leftHarpoonDown", "leftharpoondown arrow 화살표", "- ->", "\\leftharpoondown"] | readonly ["⇌", "symbol.rightLeftHarpoons", "rightleftharpoons arrow 화살표", "- ->", "\\rightleftharpoons"] | readonly ["⇋", "symbol.leftRightHarpoons", "leftrightharpoons arrow 화살표", "- ->", "\\leftrightharpoons"] | readonly ["↓", "symbol.downArrow", "downarrow down 아래화살표 아래쪽화살표", "- ->", "\\downarrow"] | readonly ["⩾", "symbol.greaterOrEqualSlanted", "geqslant", "", "\\geqslant"] | readonly ["⩽", "symbol.lessOrEqualSlanted", "leqslant", "", "\\leqslant"] | readonly ["∋", "symbol.contains", "ni contains", "", "\\ni"] | readonly ["⊃", "symbol.superset", "supset superset", "", "\\supset"] | readonly ["⊇", "symbol.supersetOrEqual", "supseteq", "", "\\supseteq"] | readonly ["⊈", "symbol.notSubsetOrEqual", "nsubseteq", "", "\\nsubseteq"] | readonly ["∖", "symbol.setDifference", "setminus difference", "", "\\setminus"] | readonly ["ℕ", "symbol.naturals", "naturals natural", "", "\\mathbb{N}"] | readonly ["ℤ", "symbol.integers", "integers integer", "", "\\mathbb{Z}"] | readonly ["ℚ", "symbol.rationals", "rationals rational", "", "\\mathbb{Q}"] | readonly ["ℝ", "symbol.reals", "reals real", "", "\\mathbb{R}"] | readonly ["ℂ", "symbol.complexes", "complexes complex", "", "\\mathbb{C}"] | readonly ["⊥", "symbol.perpendicular", "perp perpendicular", "", "\\perp"] | readonly ["∥", "symbol.parallel", "parallel", "", "\\parallel"] | readonly ["≅", "symbol.congruent", "cong congruent", "", "\\cong"] | readonly ["∼", "symbol.similar", "sim similar", "", "\\sim"] | readonly ["↦", "symbol.mapsTo", "mapsto maps arrow 화살표", "|-> - ->", "\\mapsto"] | readonly ["…", "symbol.ellipsis", "ldots ellipsis", "", "\\ldots"] | readonly ["⋯", "symbol.centeredDots", "cdots", "", "\\cdots"] | readonly ["⋮", "symbol.verticalDots", "vdots", "", "\\vdots"] | readonly ["⋱", "symbol.diagonalDots", "ddots", "", "\\ddots"] | readonly ["′", "symbol.prime", "prime 프라임 미분", "", "\\prime"] | readonly ["°", "symbol.degree", "degree degrees 각도", "", "{}^{\\circ}"] | readonly ["∠", "symbol.angle", "angle", "", "\\angle"] | readonly ["+", "symbol.plus", "plus sum", "+", "+"] | readonly ["−", "symbol.minus", "minus", "-", "-"] | readonly ["±", "symbol.plusMinus", "plusminus sum", "+- +", "\\pm"] | readonly ["∓", "symbol.minusPlus", "minusplus", "-+ -", "\\mp"] | readonly ["×", "symbol.times", "times multiply", "*", "\\times"] | readonly ["·", "symbol.dot", "dot multiply", "*", "\\cdot"] | readonly ["÷", "symbol.divide", "divide division", "/", "\\div"] | readonly ["=", "symbol.equal", "equal", "=", "="] | readonly ["≠", "symbol.notEqual", "neq unequal", "!= /= =", "\\ne"] | readonly ["≈", "symbol.approximatelyEqual", "approx", "~ ~~ =", "\\approx"] | readonly ["≡", "symbol.equivalent", "equiv", "=== =", "\\equiv"] | readonly ["<", "symbol.lessThan", "less", "<", "<"] | readonly [">", "symbol.greaterThan", "greater", ">", ">"] | readonly ["≤", "symbol.lessOrEqual", "leq less", "<= <- <", "\\le"] | readonly ["≥", "symbol.greaterOrEqual", "geq greater", ">= >- >", "\\ge"] | readonly ["∝", "symbol.proportional", "proportional", "~", "\\propto"] | readonly ["→", "symbol.rightArrow", "rightarrow arrow", "-> -", "\\to"] | readonly ["←", "symbol.leftArrow", "leftarrow arrow", "<- < - ->", "\\leftarrow"] | readonly ["↔", "symbol.leftRightArrow", "leftrightarrow arrow", "<-> - ->", "\\leftrightarrow"] | readonly ["⇒", "symbol.implies", "implies arrow 화살표", "=> = - ->", "\\Rightarrow"] | readonly ["⇔", "symbol.iff", "iff arrow 화살표", "<=> - ->", "\\Leftrightarrow"] | readonly ["∈", "symbol.elementOf", "in element", "E", "\\in"] | readonly ["∉", "symbol.notElementOf", "notin element", "E/", "\\notin"] | readonly ["∀", "symbol.forAll", "forall", "A", "\\forall"] | readonly ["∃", "symbol.exists", "exists", "E", "\\exists"] | readonly ["∪", "symbol.union", "union", "U", "\\cup"] | readonly ["∩", "symbol.intersection", "intersection", "", "\\cap"] | readonly ["⊂", "symbol.subset", "subset", "<", "\\subset"] | readonly ["⊆", "symbol.subsetOrEqual", "subseteq", "<=", "\\subseteq"] | readonly ["∅", "symbol.emptySet", "emptyset", "", "\\emptyset"] | readonly ["∞", "symbol.infinity", "infinity infty", "", "\\infty"] | readonly ["∂", "symbol.partialDerivative", "partial derivative", "", "\\partial"] | readonly ["∇", "symbol.nabla", "nabla gradient", "", "\\nabla"] | readonly ["∧", "symbol.logicalAnd", "and wedge", "^", "\\wedge"] | readonly ["∨", "symbol.logicalOr", "or vee", "", "\\vee"] | readonly ["¬", "symbol.logicalNot", "not neg", "!", "\\neg"] | readonly ["α", "symbol.alpha", "alpha", "", "\\alpha"] | readonly ["β", "symbol.beta", "beta", "", "\\beta"] | readonly ["γ", "symbol.gamma", "gamma", "", "\\gamma"] | readonly ["δ", "symbol.delta", "delta", "", "\\delta"] | readonly ["ε", "symbol.epsilon", "epsilon", "", "\\epsilon"] | readonly ["ζ", "symbol.zeta", "zeta", "", "\\zeta"] | readonly ["η", "symbol.eta", "eta", "", "\\eta"] | readonly ["θ", "symbol.theta", "theta", "", "\\theta"] | readonly ["ι", "symbol.iota", "iota", "", "\\iota"] | readonly ["κ", "symbol.kappa", "kappa", "", "\\kappa"] | readonly ["λ", "symbol.lambda", "lambda", "", "\\lambda"] | readonly ["μ", "symbol.mu", "mu", "", "\\mu"] | readonly ["ν", "symbol.nu", "nu", "", "\\nu"] | readonly ["ξ", "symbol.xi", "xi", "", "\\xi"] | readonly ["π", "symbol.pi", "pi", "", "\\pi"] | readonly ["ρ", "symbol.rho", "rho", "", "\\rho"] | readonly ["σ", "symbol.sigma", "sigma", "", "\\sigma"] | readonly ["τ", "symbol.tau", "tau", "", "\\tau"] | readonly ["υ", "symbol.upsilon", "upsilon", "", "\\upsilon"] | readonly ["φ", "symbol.phi", "phi", "", "\\phi"] | readonly ["χ", "symbol.chi", "chi", "", "\\chi"] | readonly ["ψ", "symbol.psi", "psi", "", "\\psi"] | readonly ["ω", "symbol.omega", "omega", "", "\\omega"] | readonly ["Γ", "symbol.upperGamma", "Gamma", "", "\\Gamma"] | readonly ["Δ", "symbol.upperDelta", "Delta", "", "\\Delta"] | readonly ["Θ", "symbol.upperTheta", "Theta", "", "\\Theta"] | readonly ["Λ", "symbol.upperLambda", "Lambda", "", "\\Lambda"] | readonly ["Ξ", "symbol.upperXi", "Xi", "", "\\Xi"] | readonly ["Π", "symbol.upperPi", "Pi", "", "\\Pi"] | readonly ["Σ", "symbol.upperSigma", "Sigma", "", "\\Sigma"] | readonly ["Φ", "symbol.upperPhi", "Phi", "", "\\Phi"] | readonly ["Ψ", "symbol.upperPsi", "Psi", "", "\\Psi"] | readonly ["Ω", "symbol.upperOmega", "Omega", "", "\\Omega"])[];
 /** Templates must not offer a back door around a host's allowed structure kinds. */
 export declare function toolbarTemplates(kinds?: readonly StructureKind[]): import("../templates.js").MathTemplate[];
 export declare function parseToolbarMatrixPreset(value: string): {

package/dist/dom/toolbar.d.ts

@@ -9,6 +9,8 @@ export interface MathToolbarOptions {
     locale?: MathLocale;
     onExecute?: () => void;
     onPasteLatex?: () => void;
+    /** Connect help to the field when the toolbar is mounted separately. */
+    onHelp?: () => void;
     /** Close another utility owned by the editing surface before opening a toolbar panel. */
     onOpenPanel?: () => void;
 }

package/dist/dom/toolbar.js

@@ -1,3 +1,4 @@
+import { requestMathHelp } from './help.js';
 import { drawPresentationControls } from './presentation-controls.js';
 import { mountQuickPanel } from './quick-panel.js';
 import { mountLatexPanel } from './latex-panel.js';
@@ -87,6 +88,12 @@ export function mountMathToolbar(host, session, options = {}) {
             control.dataset.mathTool = item.kind;
             toolbar.append(control);
         }
+        if (options.onHelp || host.closest('.me-editor')) {
+            const help = button(t('help.title'), () => options.onHelp ? options.onHelp() : requestMathHelp(help));
+            help.dataset.mathTool = 'help';
+            help.setAttribute('aria-keyshortcuts', 'F1');
+            toolbar.append(help);
+        }
         if (expanded) {
             const quick = button(t('quick.title'), () => {
                 options.onOpenPanel?.();
@@ -283,7 +290,7 @@ export function mountMathToolbar(host, session, options = {}) {
                     control.dataset.mathTool = `${axis}-${action}`;
                     if (action === 'delete') {
                         control.title = t(axis === 'row' ? 'grid.deleteRowShortcut' : 'grid.deleteColumnShortcut');
-                        control.setAttribute('aria-keyshortcuts', axis === 'row' ? 'Alt+Shift+ArrowUp' : 'Alt+Shift+ArrowLeft');
+                        control.setAttribute('aria-keyshortcuts', axis === 'row' ? 'Alt+Shift+ArrowUp' : 'Alt+Shift+Backspace');
                     }
                     gridTools.append(control);
                 }

package/dist/dom.d.ts

@@ -3,7 +3,8 @@ export { mountMathLatex, mountMathPreview, type MathOutput, type MathPreviewOpti
 export { mountMathToolbar, type MathToolbarOptions } from './dom/toolbar.js';
 import { type MathSession, type MathEditorMode } from './session.js';
 import { type MathLocale } from './i18n.js';
-import { type MathDocument, type StructureKind } from './model.js';
+import { type MathDocument, type MathState, type StructureKind } from './model.js';
+import { type MathSuggestion } from './suggestions.js';
 export interface DOMMathEditorOptions {
     /** Mount-only UI preferences; ignored when an external session owns the store. */
     preferences?: MathPreferences;
@@ -17,11 +18,21 @@ export interface DOMMathEditorOptions {
     mode?: MathEditorMode;
     toolbar?: boolean | readonly StructureKind[];
     toolbarMaxItems?: number;
+    /** Show contextual structure actions below the editing surface. Defaults to true. */
+    contextTools?: boolean;
+    /** Disable built-in suggestion and selection popups when the host renders its own controls. */
+    suggestionMenu?: boolean;
+    /** Filter or reorder generated suggestions without replacing editor selection/acceptance behavior. */
+    filterSuggestions?: (candidates: readonly MathSuggestion[], query: string, state: MathState) => readonly MathSuggestion[];
+    /** Limit selection wrapping actions for a host. Omit to show every supported kind. */
+    selectionKinds?: readonly StructureKind[];
     showLineNumbers?: boolean;
     onChange?: (document: MathDocument, latex: string) => void;
     /** Final DOM/caret notification, including focus and selection-only updates. */
     onRender?: () => void;
     onExit?: (direction: -1 | 1) => void;
+    /** Host structure commands. Return true when handled; preserve suggestions where appropriate. */
+    onEditKeyDown?: (event: KeyboardEvent, snapshot: ReturnType<MathSession['getSnapshot']>, acceptsSuggestion: boolean) => boolean;
     /** Default: block=newline, inline=commit. Suggestions always take priority. */
     enterBehavior?: 'newline' | 'commit';
     /** The host creates the next block, saves a popup, or restores its caret. No model mutation. */
@@ -32,6 +43,7 @@ export interface DOMMathEditorOptions {
 export interface DOMMathEditor {
     session: MathSession;
     focus(): void;
+    showHelp(): void;
     update(options: Partial<Omit<DOMMathEditorOptions, 'session' | 'defaultValue' | 'menuHost'>>): void;
     destroy(): void;
 }