@barocss/math-editor 0.2.1 → 0.5.0

package/dist/dom/symbol-panel.js

@@ -0,0 +1,146 @@
+import { elementFactory } from './elements.js';
+import { findToolbarSymbols } from './toolbar-catalog.js';
+import { translate, mathLocaleDirection } from '../i18n.js';
+import { mathSymbols } from '../symbols.js';
+/** Native, nonmodal symbol discovery. The panel stays inside its toolbar's containment boundary. */
+export function mountSymbolPanel(host, options) {
+    const doc = host.ownerDocument;
+    const element = elementFactory(doc);
+    const t = (key) => translate(options.locale, key);
+    const panel = element('section', 'me-symbol-browser me-dom-symbol-browser');
+    panel.setAttribute('aria-label', t('symbols.title'));
+    panel.dir = mathLocaleDirection(options.locale);
+    const heading = element('div', 'me-symbol-browser-heading');
+    const title = element('strong', '', t('symbols.title'));
+    const count = element('small');
+    count.setAttribute('role', 'status');
+    title.append(' ', count);
+    const close = element('button', '', t('common.close'));
+    close.type = 'button';
+    close.onclick = options.onClose;
+    heading.append(title, close);
+    const label = element('label', 'me-symbol-search', t('symbols.search'));
+    const search = element('input');
+    search.type = 'search';
+    search.placeholder = t('symbols.searchPlaceholder');
+    label.append(search);
+    const help = element('p', 'me-symbol-help', t('symbols.help'));
+    const grid = element('div', 'me-symbol-grid');
+    grid.setAttribute('role', 'group');
+    grid.setAttribute('aria-label', t('symbols.title'));
+    const empty = element('p', '', t('symbols.noMatches'));
+    empty.setAttribute('role', 'status');
+    panel.append(heading, label, help, grid, empty);
+    host.append(panel);
+    let composing = false;
+    let destroyed = false;
+    let active = 0;
+    let buttons = [];
+    const focusResult = (index) => {
+        if (!buttons.length)
+            return;
+        active = Math.max(0, Math.min(index, buttons.length - 1));
+        buttons.forEach((button, at) => {
+            button.tabIndex = at === active ? 0 : -1;
+        });
+        buttons[active].focus();
+        buttons[active].scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    };
+    const draw = () => {
+        const matches = findToolbarSymbols(search.value, options.locale);
+        active = 0;
+        buttons = matches.map(([glyph, key]) => {
+            const button = element('button');
+            button.type = 'button';
+            button.dataset.symbol = glyph;
+            button.setAttribute('aria-label', `${glyph} — ${t(key)}`);
+            button.title = `${translate('en', key)} / ${translate('ko', key)}`;
+            const symbol = element('span', 'me-symbol-glyph', glyph);
+            symbol.setAttribute('aria-hidden', 'true');
+            button.append(symbol, element('span', '', t(key)));
+            button.onclick = () => {
+                if (!composing && !destroyed)
+                    options.onInsert(glyph);
+            };
+            button.onfocus = () => {
+                active = buttons.indexOf(button);
+                buttons.forEach((item, index) => {
+                    item.tabIndex = index === active ? 0 : -1;
+                });
+            };
+            return button;
+        });
+        buttons.forEach((button, index) => {
+            button.tabIndex = index === 0 ? 0 : -1;
+        });
+        grid.replaceChildren(...buttons);
+        count.textContent = `${matches.length} / ${mathSymbols.length}`;
+        empty.hidden = matches.length !== 0;
+    };
+    search.oninput = draw;
+    search.addEventListener('compositionstart', () => {
+        composing = true;
+    });
+    search.addEventListener('compositionend', () => {
+        composing = false;
+        draw();
+    });
+    panel.addEventListener('keydown', (event) => {
+        event.stopPropagation();
+        if (event.isComposing || composing || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            options.onClose();
+            return;
+        }
+        if (event.target === search) {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                focusResult(event.key === 'ArrowDown' ? 0 : buttons.length - 1);
+            }
+            else if (event.key === 'Enter' && buttons.length) {
+                event.preventDefault();
+                buttons[0].click();
+            }
+            return;
+        }
+        if (!buttons.includes(event.target))
+            return;
+        const firstTop = buttons[0].getBoundingClientRect().top;
+        const nextRow = buttons.findIndex((button) => Math.abs(button.getBoundingClientRect().top - firstTop) > 2);
+        const columns = nextRow < 0 ? buttons.length : Math.max(1, nextRow);
+        const rtl = panel.dir === 'rtl';
+        const next = event.key === 'ArrowDown'
+            ? active + columns
+            : event.key === 'ArrowUp'
+                ? active - columns
+                : event.key === 'ArrowRight'
+                    ? active + (rtl ? -1 : 1)
+                    : event.key === 'ArrowLeft'
+                        ? active + (rtl ? 1 : -1)
+                        : event.key === 'Home'
+                            ? 0
+                            : event.key === 'End'
+                                ? buttons.length - 1
+                                : undefined;
+        if (next !== undefined) {
+            event.preventDefault();
+            if (event.key === 'ArrowUp' && next < 0)
+                search.focus();
+            else
+                focusResult(next);
+        }
+    });
+    for (const name of ['keyup', 'beforeinput', 'input', 'copy', 'cut', 'paste']) {
+        panel.addEventListener(name, (event) => event.stopPropagation());
+    }
+    draw();
+    search.focus();
+    return {
+        destroy() {
+            destroyed = true;
+            panel.remove();
+        },
+    };
+}

package/dist/dom/theme.d.ts

@@ -0,0 +1,6 @@
+/** Copy resolved values, including host var() references, without copying layout or content.
+ * Explicit `initial` blocks unrelated tokens inherited from the portal container. */
+export declare function syncMathTheme(source: HTMLElement, target: HTMLElement): void;
+/** Follow scoped class/style/theme switches without polling or observing formula mutations.
+ * The observer and frame belong to the editor's document, including iframe hosts. */
+export declare function followMathTheme(source: HTMLElement, target: HTMLElement): () => void;

package/dist/dom/theme.js

@@ -0,0 +1,68 @@
+/** Public presentation tokens, copied to menus that live outside the editor's DOM tree.
+ * Keep this list aligned with STYLING.md. Internal slot/glyph variables stay local. */
+const themeProperties = [
+    '--me-font-size',
+    '--me-ui-font-family',
+    '--me-text',
+    '--me-muted',
+    '--me-accent',
+    '--me-line',
+    '--me-background',
+    '--me-panel-background',
+    '--me-toolbar-background',
+    '--me-subtle-background',
+    '--me-hover-background',
+    '--me-active-background',
+    '--me-variable',
+    '--me-number',
+    '--me-symbol',
+    '--me-function',
+    '--me-input-background',
+    '--me-input-focus-background',
+    '--me-selection-background',
+    '--me-selection-color',
+    '--me-focus-color',
+    '--me-radius',
+    '--me-control-radius',
+    '--me-menu-shadow',
+    '--me-menu-z-index',
+];
+/** Copy resolved values, including host var() references, without copying layout or content.
+ * Explicit `initial` blocks unrelated tokens inherited from the portal container. */
+export function syncMathTheme(source, target) {
+    const computed = source.ownerDocument.defaultView.getComputedStyle(source);
+    for (const property of themeProperties) {
+        const value = computed.getPropertyValue(property).trim() || 'initial';
+        if (target.style.getPropertyValue(property) !== value)
+            target.style.setProperty(property, value);
+    }
+}
+/** Follow scoped class/style/theme switches without polling or observing formula mutations.
+ * The observer and frame belong to the editor's document, including iframe hosts. */
+export function followMathTheme(source, target) {
+    const win = source.ownerDocument.defaultView;
+    let frame;
+    const refresh = () => {
+        if (frame !== undefined)
+            return;
+        frame = win.requestAnimationFrame(() => {
+            frame = undefined;
+            syncMathTheme(source, target);
+        });
+    };
+    const observer = new win.MutationObserver(refresh);
+    for (let ancestor = source; ancestor; ancestor = ancestor.parentElement)
+        observer.observe(ancestor, { attributes: true });
+    // CSS media queries can change a theme without changing an ancestor attribute.
+    const colorScheme = win.matchMedia('(prefers-color-scheme: dark)');
+    colorScheme.addEventListener('change', refresh);
+    win.addEventListener('resize', refresh);
+    syncMathTheme(source, target);
+    return () => {
+        observer.disconnect();
+        colorScheme.removeEventListener('change', refresh);
+        win.removeEventListener('resize', refresh);
+        if (frame !== undefined)
+            win.cancelAnimationFrame(frame);
+    };
+}

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