@barocss/math-editor 0.2.0 → 0.4.0

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

@@ -0,0 +1,10 @@
+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"])[];
+/** 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): {
+    size: number;
+    identity: boolean;
+} | undefined;

package/dist/dom/toolbar-catalog.js

@@ -0,0 +1,35 @@
+import { mathLocaleAliases, translate } from '../i18n.js';
+import { findSuggestions } from '../suggestions.js';
+import { mathSymbols } from '../symbols.js';
+import { createTemplate, mathTemplates } from '../templates.js';
+/** Full discovery search retains the symbol catalog and suggestion engine's ranking. */
+export function findToolbarSymbols(query, locale) {
+    const needle = query.trim().normalize('NFC').toLowerCase();
+    if (!needle)
+        return [...mathSymbols];
+    const matches = mathSymbols.filter(([glyph, label, aliases, triggers, latex]) => [
+        glyph,
+        translate('en', label),
+        translate('ko', label),
+        translate(locale, label),
+        ...mathLocaleAliases(locale, `symbol-${glyph}`),
+        aliases,
+        triggers,
+        latex,
+    ].some((value) => value.normalize('NFC').toLowerCase().includes(needle)));
+    const ranked = findSuggestions(query.trim(), query.trim().length, locale).candidates.filter((item) => item.value !== undefined);
+    const order = new Map(ranked.map((item, index) => [item.value, index]));
+    return matches.sort((a, b) => (order.get(a[0]) ?? Infinity) - (order.get(b[0]) ?? Infinity));
+}
+/** Templates must not offer a back door around a host's allowed structure kinds. */
+export function toolbarTemplates(kinds) {
+    if (!kinds)
+        return mathTemplates;
+    const allowed = new Set(kinds);
+    const accepts = (row) => row.children.every((node) => node.type === 'text' || (allowed.has(node.type) && node.slots.every(accepts)));
+    return mathTemplates.filter((template) => createTemplate(template.id).rows.every(accepts));
+}
+export function parseToolbarMatrixPreset(value) {
+    const match = /^(identity-)?([234])$/.exec(value);
+    return match ? { size: Number(match[2]), identity: !!match[1] } : undefined;
+}

package/dist/dom/toolbar.d.ts

@@ -1,13 +1,24 @@
+import { type MathLocale } from '../i18n.js';
 import type { MathSession } from '../session.js';
 import type { StructureKind } from '../model.js';
 export interface MathToolbarOptions {
     kinds?: readonly StructureKind[];
     /** Visible structure buttons before More; defaults to 8. */
     maxItems?: number;
+    /** Labels while no editor is active; an attached session supplies its own locale. */
+    locale?: MathLocale;
     onExecute?: () => void;
+    onPasteLatex?: () => void;
+    /** Close another utility owned by the editing surface before opening a toolbar panel. */
+    onOpenPanel?: () => void;
 }
 /** Independently mounted toolbar; the host may instead build any UI around session.execute(). */
-export declare function mountMathToolbar(host: HTMLElement, session: MathSession, options?: MathToolbarOptions): {
+export declare function mountMathToolbar(host: HTMLElement, session: MathSession | null, options?: MathToolbarOptions): {
+    /** Close discovery/paste panels without changing the formula or its selection. */
+    closePanels: () => void;
+    /** Reuse one toolbar for multiple editors without retaining previous subscriptions. */
+    setSession(next: MathSession | null): void;
+    /** Disable mutation controls while the attached native editor is composing. */
+    setDisabled(next: boolean): void;
     destroy(): void;
 };
-//# sourceMappingURL=toolbar.d.ts.map

package/dist/dom/toolbar.js

@@ -1,61 +1,328 @@
-import { element } from './elements.js';
-import { translate, mathLocaleDirection } from '../i18n.js';
+import { drawPresentationControls } from './presentation-controls.js';
+import { mountQuickPanel } from './quick-panel.js';
+import { mountLatexPanel } from './latex-panel.js';
+import { elementFactory } from './elements.js';
+import { translate, mathLocaleDirection, } from '../i18n.js';
 import { mathStructures } from '../suggestions.js';
+import { mathSymbols } from '../symbols.js';
+import { resolveRange, wrappingKinds } from '../range.js';
+import { activeGrid, insertIdentityMatrix, insertMatrix, matrixEnvironments, MATRIX_MAX_SIZE, resizeMatrix, setMatrixEnvironment, } from '../matrix.js';
+import { parseToolbarMatrixPreset, toolbarTemplates } from './toolbar-catalog.js';
+import { mountSymbolPanel } from './symbol-panel.js';
 /** Independently mounted toolbar; the host may instead build any UI around session.execute(). */
 export function mountMathToolbar(host, session, options = {}) {
+    const doc = host.ownerDocument;
+    const element = elementFactory(doc);
     let expanded = false;
+    let activeSession = session;
+    let locale = options.locale ?? 'en';
+    let destroyed = false;
+    let disabled = false;
+    let quickPanel;
+    let latexPanel;
+    let symbolPanel;
     const maxItems = Math.max(0, Math.floor(Number.isFinite(options.maxItems) ? options.maxItems : 8));
+    const templates = toolbarTemplates(options.kinds);
     const toolbar = element('div', 'me-tools');
-    host.append(toolbar);
+    const gridTools = element('div', 'me-matrix-tools me-dom-grid-tools');
+    const presentation = element('div');
+    const panels = element('div', 'me-dom-toolbar-panels');
+    panels.hidden = true;
+    host.append(toolbar, gridTools, presentation, panels);
+    const closeSymbols = (restoreFocus = false) => {
+        quickPanel?.destroy();
+        quickPanel = undefined;
+        latexPanel?.destroy();
+        latexPanel = undefined;
+        symbolPanel?.destroy();
+        symbolPanel = undefined;
+        panels.hidden = true;
+        const toggle = toolbar.querySelector('[data-math-tool="symbols"]');
+        toggle?.setAttribute('aria-expanded', 'false');
+        if (restoreFocus)
+            toggle?.focus();
+    };
+    const enabled = () => !!activeSession && !disabled && !destroyed;
+    const execute = (command) => {
+        if (enabled() && activeSession.execute(command))
+            options.onExecute?.();
+    };
+    const transform = (operation) => {
+        if (!enabled())
+            return;
+        const current = activeSession.getSnapshot().state;
+        const next = operation(current);
+        if (next !== current && activeSession.apply(next))
+            options.onExecute?.();
+    };
     const draw = () => {
-        const snapshot = session.getSnapshot(), t = (text) => translate(snapshot.locale, text);
+        const snapshot = activeSession?.getSnapshot();
+        if (snapshot && (snapshot.locale !== locale || snapshot.matrixRange))
+            closeSymbols();
+        locale = snapshot?.locale ?? locale;
+        const t = (text, parameters) => translate(locale, text, parameters);
         toolbar.replaceChildren();
+        gridTools.replaceChildren();
+        gridTools.hidden = true;
         toolbar.setAttribute('role', 'toolbar');
         toolbar.setAttribute('aria-label', t('toolbar.label'));
-        toolbar.dir = mathLocaleDirection(snapshot.locale);
+        toolbar.dir = mathLocaleDirection(locale);
+        const button = (label, action, blocked = false) => {
+            const result = element('button', '', label);
+            result.type = 'button';
+            result.disabled = !enabled() || blocked;
+            result.onmousedown = (event) => event.preventDefault();
+            result.onclick = () => {
+                if (!result.disabled && enabled())
+                    action();
+            };
+            return result;
+        };
+        const hasRange = !!snapshot?.range || !!snapshot?.matrixRange;
+        const canWrap = snapshot?.range && resolveRange(snapshot.state.document, snapshot.range)?.length === 1;
         const items = mathStructures.filter((item) => !options.kinds || options.kinds.includes(item.kind));
         for (const item of expanded ? items : items.slice(0, maxItems)) {
-            const button = element('button', '', `${item.glyph} ${t(item.label)}`);
-            button.type = 'button';
-            button.setAttribute('aria-label', t(item.label));
-            button.onmousedown = (event) => event.preventDefault();
-            button.onclick = () => {
-                session.execute({ type: 'structure', kind: item.kind });
-                options.onExecute?.();
-            };
-            toolbar.append(button);
+            const control = button(`${item.glyph} ${t(item.label)}`, () => execute({ type: 'structure', kind: item.kind }), hasRange && (!canWrap || !wrappingKinds.includes(item.kind)));
+            control.setAttribute('aria-label', t(item.label));
+            control.dataset.mathTool = item.kind;
+            toolbar.append(control);
         }
-        if (items.length > maxItems) {
+        if (expanded) {
+            const quick = button(t('quick.title'), () => {
+                options.onOpenPanel?.();
+                closeSymbols();
+                const target = activeSession;
+                panels.hidden = false;
+                quickPanel = mountQuickPanel(panels, {
+                    locale,
+                    preferences: target.preferences,
+                    allowedTemplates: templates.map((item) => item.id),
+                    onInsert: (item) => enabled() &&
+                        activeSession === target &&
+                        target.execute(item.template
+                            ? { type: 'template', id: item.template }
+                            : { type: 'text', value: item.glyph }),
+                    onClose: () => {
+                        closeSymbols();
+                        options.onExecute?.();
+                    },
+                });
+            }, !!snapshot?.matrixRange);
+            quick.dataset.mathTool = 'quick';
+            toolbar.append(quick);
+            const paste = button(t('clipboard.latexTitle'), () => {
+                options.onOpenPanel?.();
+                closeSymbols();
+                if (options.onPasteLatex) {
+                    options.onPasteLatex();
+                    return;
+                }
+                panels.hidden = false;
+                latexPanel = mountLatexPanel(panels, {
+                    locale,
+                    onInsert: (source) => activeSession.pasteLatex(source),
+                    onClose: () => {
+                        closeSymbols();
+                        options.onExecute?.();
+                    },
+                });
+            }, !!snapshot?.matrixRange);
+            paste.dataset.mathTool = 'paste-latex';
+            paste.title = t('clipboard.latexShortcut');
+            toolbar.append(paste);
+            if (!options.kinds || options.kinds.includes('matrix')) {
+                const select = element('select', 'me-matrix-size');
+                select.setAttribute('aria-label', t('matrix.preset'));
+                select.dataset.mathTool = 'matrix-preset';
+                select.disabled = !enabled() || hasRange;
+                const placeholder = element('option', '', t('matrix.presetPlaceholder'));
+                placeholder.value = '';
+                placeholder.disabled = true;
+                select.append(placeholder);
+                for (const identity of [false, true])
+                    for (const size of [2, 3, 4]) {
+                        const item = element('option', '', t(identity ? 'matrix.insertIdentity' : 'matrix.insert', {
+                            rows: size,
+                            columns: size,
+                        }));
+                        item.value = `${identity ? 'identity-' : ''}${size}`;
+                        select.append(item);
+                    }
+                select.value = '';
+                select.onchange = () => {
+                    const preset = parseToolbarMatrixPreset(select.value);
+                    select.value = '';
+                    if (preset && !select.disabled)
+                        transform((state) => (preset.identity ? insertIdentityMatrix : insertMatrix)(state, preset.size));
+                };
+                toolbar.append(select);
+            }
+            if (templates.length) {
+                const select = element('select', 'me-matrix-size');
+                select.setAttribute('aria-label', t('template.label'));
+                select.dataset.mathTool = 'template';
+                select.disabled = !enabled() || !!snapshot?.matrixRange;
+                const placeholder = element('option', '', t('template.placeholder'));
+                placeholder.value = '';
+                placeholder.disabled = true;
+                select.append(placeholder);
+                for (const template of templates) {
+                    const item = element('option', '', t(template.label, template.labelParameters));
+                    item.value = template.id;
+                    select.append(item);
+                }
+                select.value = '';
+                select.onchange = () => {
+                    const id = select.value;
+                    select.value = '';
+                    if (!select.disabled && templates.some((template) => template.id === id))
+                        execute({ type: 'template', id });
+                };
+                toolbar.append(select);
+            }
+            const symbols = button(t('symbols.title'), () => {
+                if (symbolPanel) {
+                    closeSymbols(true);
+                    return;
+                }
+                options.onOpenPanel?.();
+                closeSymbols();
+                const target = activeSession;
+                panels.hidden = false;
+                symbols.setAttribute('aria-expanded', 'true');
+                symbolPanel = mountSymbolPanel(panels, {
+                    locale,
+                    onClose: () => closeSymbols(true),
+                    onInsert: (glyph) => {
+                        if (activeSession !== target || !enabled())
+                            return;
+                        closeSymbols();
+                        execute({ type: 'text', value: glyph });
+                    },
+                });
+            }, !!snapshot?.matrixRange);
+            symbols.dataset.mathTool = 'symbols';
+            symbols.setAttribute('aria-expanded', String(!!symbolPanel));
+            toolbar.append(symbols);
+            for (const glyph of ['α', 'β', 'π', 'θ', '∞']) {
+                const item = mathSymbols.find((symbol) => symbol[0] === glyph);
+                const control = button(glyph, () => execute({ type: 'text', value: glyph }), !!snapshot?.matrixRange);
+                control.setAttribute('aria-label', t(item[1]));
+                toolbar.append(control);
+            }
+        }
+        // More also reveals discovery controls when all allowed structures already fit.
+        {
             const toggle = element('button', 'me-toolbar-toggle', t(expanded ? 'toolbar.less' : 'toolbar.more'));
             toggle.type = 'button';
             toggle.setAttribute('aria-expanded', String(expanded));
             toggle.onmousedown = (event) => event.preventDefault();
             toggle.onclick = () => {
                 expanded = !expanded;
+                if (!expanded)
+                    closeSymbols();
                 draw();
-                toolbar.querySelector('[aria-expanded]')?.focus();
+                toolbar.querySelector('.me-toolbar-toggle')?.focus();
             };
             toolbar.append(toggle);
         }
         for (const type of ['undo', 'redo']) {
-            const button = element('button', '', t(type === 'undo' ? 'history.undo' : 'history.redo'));
-            button.type = 'button';
-            button.disabled = !(type === 'undo' ? snapshot.canUndo : snapshot.canRedo);
-            button.onmousedown = (event) => event.preventDefault();
-            button.onclick = () => {
-                session.execute({ type });
-                options.onExecute?.();
-            };
-            toolbar.append(button);
+            toolbar.append(button(t(type === 'undo' ? 'history.undo' : 'history.redo'), () => execute({ type }), !(type === 'undo' ? snapshot?.canUndo : snapshot?.canRedo)));
+        }
+        if (snapshot)
+            drawPresentationControls(presentation, snapshot.state, locale, (id, change) => execute({ type: 'presentation', id, change }), !enabled() || hasRange, options.kinds);
+        else
+            presentation.hidden = true;
+        const context = snapshot && activeGrid(snapshot.state);
+        if (context && (!options.kinds || options.kinds.includes(context.matrix.type))) {
+            gridTools.hidden = false;
+            gridTools.dir = mathLocaleDirection(locale);
+            gridTools.setAttribute('role', 'toolbar');
+            gridTools.setAttribute('aria-label', t(context.matrix.type === 'matrix' ? 'matrix.edit' : 'grid.editRows'));
+            gridTools.append(element('span', '', `${context.rows} × ${context.matrix.columns}`), element('small', '', t('grid.position', { row: context.row + 1, column: context.column + 1 })));
+            const selected = hasRange || snapshot.state.caret.start !== snapshot.state.caret.end;
+            if (context.matrix.type === 'matrix') {
+                const select = element('select');
+                select.setAttribute('aria-label', t('matrix.delimiters'));
+                select.dataset.mathTool = 'matrix-delimiters';
+                select.disabled = !enabled() || selected;
+                for (const item of matrixEnvironments) {
+                    const option = element('option', '', t(item.label));
+                    option.value = item.value;
+                    select.append(option);
+                }
+                select.value = context.matrix.environment;
+                select.onchange = () => {
+                    if (!select.disabled)
+                        transform((state) => setMatrixEnvironment(state, select.value));
+                };
+                gridTools.append(select);
+                for (const [tool, label, command] of [
+                    ['matrix-select', 'matrix.selectCells', { type: 'matrix-select' }],
+                    ['matrix-select-all', 'matrix.selectAll', { type: 'matrix-select', all: true }],
+                    ['matrix-transpose', 'matrix.transpose', { type: 'matrix-transpose' }],
+                ]) {
+                    const control = button(t(label), () => execute(command), !!snapshot.range);
+                    control.dataset.mathTool = tool;
+                    gridTools.append(control);
+                }
+            }
+            for (const axis of ['row', 'column']) {
+                if (axis === 'column' && context.matrix.type !== 'matrix')
+                    continue;
+                const size = axis === 'row' ? context.rows : context.matrix.columns;
+                for (const action of ['insert', 'delete']) {
+                    const key = axis === 'row'
+                        ? action === 'insert'
+                            ? 'grid.addRow'
+                            : 'grid.deleteRow'
+                        : action === 'insert'
+                            ? 'grid.addColumn'
+                            : 'grid.deleteColumn';
+                    const control = button(t(key), () => transform((state) => resizeMatrix(state, axis, action)), selected || (action === 'insert' ? size >= MATRIX_MAX_SIZE : size <= 1));
+                    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');
+                    }
+                    gridTools.append(control);
+                }
+            }
         }
     };
-    const unsubscribe = session.subscribe(draw);
+    let unsubscribe = activeSession?.subscribe(draw);
     draw();
     return {
+        /** Close discovery/paste panels without changing the formula or its selection. */
+        closePanels: () => closeSymbols(),
+        /** Reuse one toolbar for multiple editors without retaining previous subscriptions. */
+        setSession(next) {
+            if (destroyed)
+                return;
+            if (next !== activeSession || !next)
+                closeSymbols();
+            unsubscribe?.();
+            activeSession = next;
+            unsubscribe = next?.subscribe(draw);
+            draw();
+        },
+        /** Disable mutation controls while the attached native editor is composing. */
+        setDisabled(next) {
+            if (destroyed || disabled === next)
+                return;
+            disabled = next;
+            if (next)
+                closeSymbols();
+            draw();
+        },
         destroy() {
-            unsubscribe();
+            destroyed = true;
+            unsubscribe?.();
+            closeSymbols();
             toolbar.remove();
+            gridTools.remove();
+            presentation.remove();
+            panels.remove();
         },
     };
 }
-//# sourceMappingURL=toolbar.js.map

package/dist/dom.d.ts

@@ -1,12 +1,17 @@
+import type { MathPreferences } from './preferences.js';
 export { mountMathLatex, mountMathPreview, type MathOutput, type MathPreviewOptions, } from './outputs.js';
 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';
 export interface DOMMathEditorOptions {
+    /** Mount-only UI preferences; ignored when an external session owns the store. */
+    preferences?: MathPreferences;
     session?: MathSession;
     /** Mount-only portal container; defaults to the nearest dialog, otherwise document.body. */
     menuHost?: HTMLElement;
+    /** Keep suggestion and wrapping menus clear of host controls outside the math surface. */
+    menuAvoidElements?: () => readonly HTMLElement[];
     defaultValue?: MathDocument;
     locale?: MathLocale;
     mode?: MathEditorMode;
@@ -14,6 +19,8 @@ export interface DOMMathEditorOptions {
     toolbarMaxItems?: number;
     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;
     /** Default: block=newline, inline=commit. Suggestions always take priority. */
     enterBehavior?: 'newline' | 'commit';
@@ -30,4 +37,3 @@ export interface DOMMathEditor {
 }
 /** Native DOM renderer. No React or framework runtime is imported by this module. */
 export declare function mountMathEditor(host: HTMLElement, initial?: DOMMathEditorOptions): DOMMathEditor;
-//# sourceMappingURL=dom.d.ts.map