@barocss/math-editor 0.2.1 → 0.5.0

package/dist/suggestions.js

@@ -1,8 +1,12 @@
+import { transformRoot } from './root-transform.js';
+import { structureEditingContext, changeContextFence } from './context-tools.js';
+import { fencePairs } from './fences.js';
 import { mathLocaleAliases, translate, } from './i18n.js';
 import { insertTemplate, mathTemplates } from './templates.js';
-import { insertIdentityMatrix, insertMatrix } from './matrix.js';
+import { activeMatrix, insertIdentityMatrix, insertMatrix, MATRIX_MAX_SIZE } from './matrix.js';
 import { insertStructure, namedFunctions, moveCaret, setText, textNodes, } from './model.js';
 import { mathSymbols } from './symbols.js';
+import { wrappingKinds } from './range.js';
 const structure = (kind, glyph, label, aliases, triggers, detail) => ({
     id: kind,
     kind,
@@ -129,14 +133,58 @@ const catalog = [
     })),
 ];
 const triggers = [...new Set(catalog.flatMap((c) => c.triggers))].sort((a, b) => b.length - a.length);
+/** Generate only the requested size, with identity matrices reserved for square shapes. */
+function matrixDimensionSuggestions(rows, columns) {
+    const sizeId = rows === columns ? String(rows) : `${rows}x${columns}`;
+    const dimensions = { rows, columns };
+    const empty = {
+        ...mathStructures[0],
+        id: `matrix-${sizeId}`,
+        label: 'matrix.size',
+        labelParameters: dimensions,
+        detail: 'grid.dimensions',
+        detailParameters: dimensions,
+        matrixSize: rows,
+        matrixColumns: columns,
+    };
+    const candidates = [empty];
+    if (rows === columns) {
+        candidates.push({
+            ...empty,
+            id: `identity-${sizeId}`,
+            glyph: 'I',
+            label: 'matrix.identity',
+            detail: 'matrix.identityDetail',
+            identity: true,
+        });
+    }
+    candidates.push({
+        ...empty,
+        id: `template-zero-${sizeId}`,
+        glyph: '0',
+        label: 'matrix.zero',
+        zero: true,
+    });
+    return candidates;
+}
 export function findSuggestions(text, caret, locale = 'ko') {
     const before = text.slice(0, caret);
+    // Size shortcuts are complete tokens, not the tail of a number or identifier.
+    // They remain ordinary text until the user accepts a matrix candidate.
+    const dimensionMatch = /^[\p{L}\p{M}\p{N}_.]/u.test(text.slice(caret))
+        ? null
+        : before.match(/(?<![\p{L}\p{M}\p{N}_.\\])([1-9]\d?)[xX×]([1-9]\d?)$/u);
+    const dimension = dimensionMatch &&
+        Number(dimensionMatch[1]) <= MATRIX_MAX_SIZE &&
+        Number(dimensionMatch[2]) <= MATRIX_MAX_SIZE
+        ? dimensionMatch
+        : null;
     // Recognize the longest symbolic spelling first: E/ must never become a fraction query.
     const trigger = triggers.find((t) => before.endsWith(t) &&
         (t.length > 1 || !/[A-Za-z]/.test(t) || !/[\p{L}\p{N}]/u.test(before.at(-2) ?? '')));
     const word = before.match(/(?:\\)?[\p{L}\p{M}]+$/u)?.[0];
     const operand = before.match(/(?:\d+(?:\.\d+)?|[\p{L}\p{M}]+)$/u)?.[0];
-    const query = trigger ?? word ?? operand ?? '';
+    const query = dimension?.[0] ?? trigger ?? word ?? operand ?? '';
     if (!query)
         return { query: '', candidates: [] };
     const name = query.replace(/^\\/, '');
@@ -160,12 +208,16 @@ export function findSuggestions(text, caret, locale = 'ko') {
             return 3;
         return 4;
     };
-    const candidates = trigger
-        ? catalog.filter((item) => item.triggers.includes(trigger))
-        : /^\d+(?:\.\d+)?$/.test(name)
-            ? []
-            : catalog.filter((item) => names(item).some((value) => normalize(value).includes(needle)));
+    const candidates = dimension
+        ? matrixDimensionSuggestions(Number(dimension[1]), Number(dimension[2]))
+        : trigger
+            ? catalog.filter((item) => item.triggers.includes(trigger))
+            : /^\d+(?:\.\d+)?$/.test(name)
+                ? []
+                : catalog.filter((item) => names(item).some((value) => normalize(value).includes(needle)));
     candidates.sort((a, b) => {
+        if (dimension)
+            return 0;
         if (trigger === '-' || trigger === '->') {
             const preferred = trigger === '-' ? ['−', '→'] : ['→'];
             const order = (item) => {
@@ -216,6 +268,16 @@ export function findSuggestions(text, caret, locale = 'ko') {
             });
         }
     }
+    // A partial name after a coefficient is an operand (4ab), not an "absolute"
+    // command. Keep explicit commands such as 4abs and \\abs working as before.
+    if (!trigger && /^\p{L}+$/u.test(query) && /\d$/.test(before.slice(0, -query.length))) {
+        for (let index = 0; index < candidates.length; index++) {
+            const item = candidates[index];
+            if (item.kind && wrappingKinds.some((kind) => kind === item.kind) && rank(item) >= 3) {
+                candidates[index] = { ...item, wrapOperand: true, detail: 'suggestion.wrapOperand' };
+            }
+        }
+    }
     return {
         query,
         candidates: candidates.map((item) => ({
@@ -225,11 +287,68 @@ export function findSuggestions(text, caret, locale = 'ko') {
         })),
     };
 }
+/** Combine text search with changes available for the current formula structure. */
+export function findStateSuggestions(state, locale = 'ko', caret = state.caret.start) {
+    const text = textNodes(state.document).find((node) => node.id === state.caret.id)?.text ?? '';
+    const result = findSuggestions(text, caret, locale);
+    const context = structureEditingContext(state);
+    const root = context?.root;
+    const kind = root?.canTransform ? root.target : undefined;
+    if (root && kind) {
+        const item = mathStructures.find((entry) => entry.kind === kind);
+        result.candidates.push({
+            ...item,
+            id: `transform-${kind}`,
+            transformRootId: root.id,
+            label: translate(locale, 'suggestion.transform', {
+                kind: translate(locale, `context.${kind}`),
+            }),
+            detail: translate(locale, 'suggestion.transformRootDetail'),
+        });
+    }
+    if (context?.fence) {
+        const fence = context.fence;
+        const changes = Object.keys(fencePairs)
+            .filter((kind) => kind !== fence.type)
+            .map((kind) => {
+            const item = mathStructures.find((entry) => entry.kind === kind);
+            return {
+                ...item,
+                id: `transform-fence-${kind}`,
+                transformFenceId: fence.id,
+                label: translate(locale, 'suggestion.transformFence', {
+                    kind: translate(locale, item.label),
+                }),
+                detail: translate(locale, 'suggestion.transformFenceDetail'),
+            };
+        });
+        // Explicit symbol/command matches stay first. Changes precede new wrapping actions.
+        const wrapping = result.candidates.findIndex((item) => item.wrapOperand);
+        result.candidates.splice(wrapping < 0 ? result.candidates.length : wrapping, 0, ...changes);
+    }
+    return result;
+}
 export function acceptSuggestion(state, query, candidate) {
+    if (candidate.transformFenceId)
+        return candidate.kind
+            ? changeContextFence(state, candidate.transformFenceId, candidate.kind)
+            : state;
+    if (candidate.transformRootId) {
+        return candidate.kind === 'root' || candidate.kind === 'indexedRoot'
+            ? transformRoot(state, candidate.transformRootId, candidate.kind)
+            : state;
+    }
     const node = textNodes(state.document).find((n) => n.id === state.caret.id);
     const start = state.caret.start - query.length;
     if (!node || start < 0 || node.text.slice(start, state.caret.start) !== query)
         return state;
+    if (candidate.matrixSize !== undefined) {
+        const rows = candidate.matrixSize;
+        const columns = candidate.matrixColumns ?? rows;
+        if (![rows, columns].every((size) => Number.isInteger(size) && size >= 1 && size <= MATRIX_MAX_SIZE) ||
+            (candidate.identity && rows !== columns))
+            return state;
+    }
     if (candidate.wrapOperand && candidate.kind) {
         const selected = { ...state, caret: { ...state.caret, start, end: state.caret.start } };
         const wrapped = insertStructure(selected, candidate.kind);
@@ -253,12 +372,34 @@ export function acceptSuggestion(state, query, candidate) {
         const inserted = insertStructure(next, 'operatorName');
         return moveCaret(setText(inserted, candidate.operatorName, candidate.operatorName.length), 1);
     }
-    if (candidate.templateId)
-        return insertTemplate(next, candidate.templateId);
-    if (candidate.matrixSize)
-        return (candidate.identity ? insertIdentityMatrix : insertMatrix)(next, candidate.matrixSize);
+    if (candidate.templateId) {
+        const inserted = insertTemplate(next, candidate.templateId);
+        if (!candidate.templateId.startsWith('zero-') || inserted === next)
+            return inserted;
+        // Matrix suggestions start cell editing, including populated zero templates.
+        // Pasting a template otherwise leaves the caret after its last structure.
+        const matrix = activeMatrix(moveCaret(inserted, -1))?.matrix;
+        const first = matrix?.slots[0].children[0];
+        return first?.type === 'text'
+            ? { ...inserted, caret: { id: first.id, start: 0, end: 0 } }
+            : inserted;
+    }
+    if (candidate.matrixSize) {
+        const inserted = candidate.identity
+            ? insertIdentityMatrix(next, candidate.matrixSize)
+            : insertMatrix(next, candidate.matrixSize, candidate.matrixColumns);
+        if (inserted === next)
+            return state;
+        if (candidate.zero) {
+            activeMatrix(inserted)?.matrix.slots.forEach((cell) => {
+                const first = cell.children[0];
+                if (first.type === 'text')
+                    first.text = '0';
+            });
+        }
+        return inserted;
+    }
     return candidate.kind
         ? insertStructure(next, candidate.kind, ['fraction', 'binomial', 'superscript', 'subscript'].includes(candidate.kind), candidate.mathStyle)
         : next;
 }
-//# sourceMappingURL=suggestions.js.map

package/dist/svelte.d.ts

@@ -2,4 +2,3 @@ import type { Action } from 'svelte/action';
 import { type DOMMathEditorOptions } from './dom.js';
 /** Svelte action: <div use:mathEditor={options} />. */
 export declare const mathEditor: Action<HTMLElement, DOMMathEditorOptions | undefined>;
-//# sourceMappingURL=svelte.d.ts.map

package/dist/svelte.js

@@ -11,4 +11,3 @@ export const mathEditor = (host, options) => {
         },
     };
 };
-//# sourceMappingURL=svelte.js.map

package/dist/symbol-browser.d.ts

@@ -5,4 +5,3 @@ export declare function SymbolBrowser({ locale, onInsert, onClose, }: {
     onInsert: (glyph: string) => void;
     onClose: () => void;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=symbol-browser.d.ts.map

package/dist/symbol-browser.js

@@ -29,4 +29,3 @@ export function SymbolBrowser({ locale, onInsert, onClose, }) {
             }
         }, children: [_jsxs("div", { className: "me-symbol-browser-heading", children: [_jsxs("strong", { children: [t('symbols.title'), ' ', _jsxs("small", { children: [matches.length, " / ", mathSymbols.length] })] }), _jsx("button", { type: "button", onClick: onClose, children: t('common.close') })] }), _jsxs("label", { className: "me-symbol-search", children: [t('symbols.search'), _jsx("input", { ref: search, type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: t('symbols.searchPlaceholder') })] }), _jsx("p", { className: "me-symbol-help", children: t('symbols.help') }), _jsx("div", { className: "me-symbol-grid", children: matches.map(([glyph, label]) => (_jsxs("button", { type: "button", "aria-label": `${glyph} — ${t(label)}`, title: `${translate('en', label)} / ${translate('ko', label)}`, onClick: () => onInsert(glyph), children: [_jsx("span", { className: "me-symbol-glyph", "aria-hidden": "true", children: glyph }), _jsx("span", { children: t(label) })] }, glyph))) }), !matches.length && _jsx("p", { role: "status", children: t('symbols.noMatches') })] }));
 }
-//# sourceMappingURL=symbol-browser.js.map

package/dist/symbols.d.ts

@@ -1,3 +1,2 @@
 /** One catalog powers discovery and LaTeX export. */
 export declare const mathSymbols: readonly [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"]];
-//# sourceMappingURL=symbols.d.ts.map

package/dist/symbols.js

@@ -142,4 +142,3 @@ export const mathSymbols = [
     ['Ψ', 'symbol.upperPsi', 'Psi', '', '\\Psi'],
     ['Ω', 'symbol.upperOmega', 'Omega', '', '\\Omega'],
 ];
-//# sourceMappingURL=symbols.js.map

package/dist/templates.d.ts

@@ -13,4 +13,3 @@ export declare const mathTemplates: MathTemplate[];
 /** Each call creates independent, editable nodes; templates are not opaque LaTeX. */
 export declare function createTemplate(id: string): MathFragment | undefined;
 export declare function insertTemplate(state: MathState, id: string, range?: MathRange): MathState;
-//# sourceMappingURL=templates.d.ts.map

package/dist/templates.js

@@ -83,4 +83,3 @@ export function insertTemplate(state, id, range) {
     const fragment = createTemplate(id);
     return fragment ? pasteFragment(state, fragment, range) : state;
 }
-//# sourceMappingURL=templates.js.map

package/dist/tokens.d.ts

@@ -8,4 +8,3 @@ export interface MathToken {
 /** Lexical input units, not inferred mathematical definitions (e and c remain variables). */
 export declare function tokenizeMathText(text: string): MathToken[];
 export declare function tokenIndexAt(tokens: MathToken[], offset: number, affinity?: 'forward' | 'backward'): number;
-//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.js

@@ -21,4 +21,3 @@ export function tokenIndexAt(tokens, offset, affinity = 'backward') {
         : offset > token.start && offset <= token.end);
     return index >= 0 ? index : offset <= 0 ? 0 : tokens.length - 1;
 }
-//# sourceMappingURL=tokens.js.map

package/dist/vertical-navigation.d.ts

@@ -0,0 +1,15 @@
+import { type MathCaret, type MathState } from './model.js';
+import type { MathPoint } from './range.js';
+type VerticalPoint = MathPoint & Pick<MathCaret, 'affinity'>;
+/** Viewport coordinates of a rendered insertion point, including either side of a token boundary. */
+export type MathCaretGeometry = (point: VerticalPoint) => {
+    x: number;
+    y: number;
+} | undefined;
+/**
+ * Move through the nearest vertical structure, then enclosing grids and equation lines.
+ * Geometry is optional so the same operation works in headless sessions and either renderer.
+ * Native text selections and literal text retain their own arrow-key behavior.
+ */
+export declare function moveVertical(state: MathState, direction: -1 | 1, geometry?: MathCaretGeometry): MathState;
+export {};

package/dist/vertical-navigation.js

@@ -0,0 +1,145 @@
+import { documentRows, isGrid, isLiteralText, textNodes, } from './model.js';
+/** Candidate slots in semantic order; paired scripts may also move along their shared column. */
+function verticalSlots(node, slot, direction) {
+    if (isGrid(node)) {
+        const target = slot + direction * node.columns;
+        return target >= 0 && target < node.slots.length ? [target] : [];
+    }
+    switch (node.type) {
+        case 'fraction':
+        case 'binomial':
+        case 'indexedRoot':
+        case 'overset':
+        case 'overbrace':
+        case 'xrightarrow':
+        case 'xleftarrow':
+        case 'subscript':
+            return slot + direction >= 0 && slot + direction < 2 ? [slot + direction] : [];
+        case 'underset':
+        case 'underbrace':
+            return slot - direction >= 0 && slot - direction < 2 ? [slot - direction] : [];
+        case 'superscript':
+            return slot - direction >= 0 && slot - direction < 2 ? [slot - direction] : [];
+        case 'scripts':
+            if (slot === 0)
+                return [direction === -1 ? 2 : 1];
+            if (slot === 1 && direction === -1)
+                return [0, 2];
+            if (slot === 2 && direction === 1)
+                return [0, 1];
+            return [];
+        case 'limit':
+        case 'limsup':
+        case 'liminf':
+            return slot - direction >= 0 && slot - direction < 2 ? [slot - direction] : [];
+        case 'sum':
+        case 'product':
+        case 'integral':
+        case 'doubleIntegral':
+        case 'tripleIntegral':
+        case 'contourIntegral':
+            if (slot === 2)
+                return [direction === -1 ? 1 : 0];
+            if (slot === 0 && direction === -1)
+                return [2, 1];
+            if (slot === 1 && direction === 1)
+                return [2, 0];
+            return [];
+        default:
+            return [];
+    }
+}
+function caretOffsets(text) {
+    const offsets = [0];
+    for (const character of text)
+        offsets.push(offsets.at(-1) + character.length);
+    return offsets;
+}
+function focusRows(state, targets, direction, geometry) {
+    const nodes = targets.flatMap((root) => textNodes({ version: 1, root }));
+    if (!nodes.length)
+        return state;
+    const origin = geometry?.({
+        id: state.caret.id,
+        offset: state.caret.start,
+        affinity: state.caret.affinity,
+    });
+    let nearest;
+    let horizontal = Infinity;
+    let vertical = Infinity;
+    if (origin && Number.isFinite(origin.x) && Number.isFinite(origin.y)) {
+        for (const node of nodes) {
+            for (const offset of caretOffsets(node.text)) {
+                // React renders adjacent lexical tokens with distinct physical caret positions.
+                for (const affinity of ['backward', 'forward']) {
+                    const point = { id: node.id, offset, affinity };
+                    const position = geometry?.(point);
+                    if (!position || !Number.isFinite(position.x) || !Number.isFinite(position.y))
+                        continue;
+                    const dy = (position.y - origin.y) * direction;
+                    if (dy <= 0)
+                        continue;
+                    const dx = Math.abs(position.x - origin.x);
+                    if (dx < horizontal - 0.5 || (Math.abs(dx - horizontal) <= 0.5 && dy < vertical)) {
+                        nearest = point;
+                        horizontal = dx;
+                        vertical = dy;
+                    }
+                }
+            }
+        }
+    }
+    // Without layout, preserve the existing offset/clamping behavior in the first target slot.
+    const fallback = nodes[0];
+    const offset = nearest?.offset ??
+        caretOffsets(fallback.text)
+            .filter((at) => at <= state.caret.start)
+            .at(-1);
+    return {
+        ...state,
+        caret: {
+            id: nearest?.id ?? fallback.id,
+            start: offset,
+            end: offset,
+            ...(nearest ? { affinity: nearest.affinity } : {}),
+        },
+    };
+}
+/**
+ * Move through the nearest vertical structure, then enclosing grids and equation lines.
+ * Geometry is optional so the same operation works in headless sessions and either renderer.
+ * Native text selections and literal text retain their own arrow-key behavior.
+ */
+export function moveVertical(state, direction, geometry) {
+    if (state.caret.start !== state.caret.end || isLiteralText(state.document, state.caret.id))
+        return state;
+    const path = [];
+    const find = (row) => {
+        for (const node of row.children) {
+            if (node.type === 'text') {
+                if (node.id === state.caret.id)
+                    return true;
+            }
+            else {
+                for (let slot = 0; slot < node.slots.length; slot++) {
+                    path.push({ structure: node, slot });
+                    if (find(node.slots[slot]))
+                        return true;
+                    path.pop();
+                }
+            }
+        }
+        return false;
+    };
+    const lines = documentRows(state.document);
+    const line = lines.findIndex(find);
+    if (line < 0)
+        return state;
+    for (const { structure, slot } of path.reverse()) {
+        const targets = verticalSlots(structure, slot, direction).map((index) => structure.slots[index]);
+        if (targets.length)
+            return focusRows(state, targets, direction, geometry);
+    }
+    const target = lines[line + direction];
+    return target ? focusRows(state, [target], direction, geometry) : state;
+}

package/dist/vue.d.ts

@@ -2,4 +2,3 @@ import type { ObjectDirective } from 'vue';
 import { type DOMMathEditorOptions } from './dom.js';
 /** Use as v-math-editor. session/defaultValue are mount-only. */
 export declare const vMathEditor: ObjectDirective<HTMLElement, DOMMathEditorOptions>;
-//# sourceMappingURL=vue.d.ts.map

package/dist/vue.js

@@ -13,4 +13,3 @@ export const vMathEditor = {
         instances.delete(host);
     },
 };
-//# sourceMappingURL=vue.js.map

package/dist/web-component.d.ts

@@ -7,4 +7,3 @@ export interface MathEditorElement extends HTMLElement {
 }
 /** Explicit registration; importing this module is safe without a browser. Uses light DOM. */
 export declare function defineMathEditor(tagName?: string): CustomElementConstructor;
-//# sourceMappingURL=web-component.d.ts.map

package/dist/web-component.js

@@ -6,7 +6,14 @@ export function defineMathEditor(tagName = 'barocss-math-editor') {
     if (existing)
         return existing;
     class EditorElement extends HTMLElement {
-        static observedAttributes = ['locale', 'mode', 'toolbar', 'line-numbers', 'enter-behavior'];
+        static observedAttributes = [
+            'locale',
+            'mode',
+            'toolbar',
+            'line-numbers',
+            'enter-behavior',
+            'context-tools',
+        ];
         session = createMathSession();
         editor;
         get value() {
@@ -26,6 +33,7 @@ export function defineMathEditor(tagName = 'barocss-math-editor') {
                 onCancel: () => this.dispatchEvent(new CustomEvent('math-cancel', { bubbles: true, composed: true })),
                 onCommit: (snapshot) => this.dispatchEvent(new CustomEvent('math-commit', { detail: snapshot, bubbles: true, composed: true })),
                 showLineNumbers: this.getAttribute('line-numbers') !== 'false',
+                contextTools: this.getAttribute('context-tools') !== 'false',
                 onChange: (document, latex) => this.dispatchEvent(new CustomEvent('math-change', {
                     detail: { document, latex },
                     bubbles: true,
@@ -64,4 +72,3 @@ export function defineMathEditor(tagName = 'barocss-math-editor') {
     customElements.define(tagName, EditorElement);
     return EditorElement;
 }
-//# sourceMappingURL=web-component.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barocss/math-editor",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,7 +46,8 @@
     "src/style.css",
     "*.md",
     "LICENSE",
-    "src/fonts"
+    "src/fonts",
+    "src/shapes"
   ],
   "peerDependencies": {
     "react": ">=18",
@@ -120,6 +121,13 @@
     "test": "vitest run",
     "test:run": "vitest run",
     "format": "prettier --write src test \"examples/*.ts\" scripts",
-    "format:check": "prettier --check src test \"examples/*.ts\" scripts"
+    "format:check": "prettier --check src test \"examples/*.ts\" scripts",
+    "test:rendering": "node test/rendering/run.mjs",
+    "test:rendering:syntax": "node test/rendering/run.mjs --suite=syntax",
+    "test:rendering:combinations": "node test/rendering/run.mjs --suite=combinations",
+    "test:rendering:inventory": "vitest run test/rendering-coverage.test.ts",
+    "test:rendering:update": "node test/rendering/update.mjs",
+    "test:rendering:report": "node test/rendering/coverage-report.mjs",
+    "test:editing": "node test/editing/run.mjs"
   }
 }

package/src/fonts/README.md

@@ -0,0 +1,18 @@
+# Bundled mathematical glyphs
+
+The WOFF2 files in this directory come from KaTeX 0.16.28. Their MIT notice is
+preserved in [LICENSE-KaTeX.txt](LICENSE-KaTeX.txt).
+
+The editor uses Main Regular for upright mathematics, Math Italic for variables,
+Size1 Regular for inline operators, and Size2 Regular for display operators. Bold, calligraphic and blackboard faces
+support the corresponding alphabet structures. Unsupported characters retain
+system-font fallbacks.
+
+The over/underbrace masks in `../style.css` also derive from the `leftbrace`,
+`midbrace` and `rightbrace` paths in KaTeX 0.16.28 `src/svgGeometry.js`, under the
+same MIT license. Three clipped slices preserve the ends and center when the
+brace stretches. These assets do not add a KaTeX JavaScript runtime dependency.
+
+Root and parenthesis masks also use KaTeX contours. See
+[../shapes/README.md](../shapes/README.md) for the source glyphs, bounds and
+conversion details.

package/src/shapes/README.md

@@ -0,0 +1,21 @@
+# Mathematical outlines
+
+These static SVG masks are derived from KaTeX 0.16.28, under its MIT license.
+The copyright and license notice is preserved in
+[../fonts/LICENSE-KaTeX.txt](../fonts/LICENSE-KaTeX.txt).
+
+| Asset                    | Source                           | Conversion                                                                                                                                |
+| ------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `radical.svg`            | `src/svgGeometry.js`, `sqrtMain` | Set `extraVinculum` and top padding to zero; crop to the 850 × 1000 radical region. The editable radicand slot draws the horizontal rule. |
+| `parenthesis.svg`        | Main Regular, U+0028             | Extract the glyph outline, invert the font Y axis and crop to its ink bounds: (94, −250)–(333, 750).                                      |
+| `parenthesis-top.svg`    | Size4 Regular, U+239B            | Same conversion, bounds (291, −655)–(843, 1154).                                                                                          |
+| `parenthesis-bottom.svg` | Size4 Regular, U+239D            | Same conversion, bounds (291, −644)–(843, 1165).                                                                                          |
+
+Font contours were extracted from the distributed TTF files with fontTools
+`SVGPathPen` and `TransformPen`. The masks retain the existing editor layout
+boxes; they do not reproduce KaTeX's full delimiter-size selection algorithm.
+Tall parentheses use bounded end caps and a straight extender. Right parentheses
+mirror the corresponding left outline.
+
+These files are packaged with `style.css`. They do not require KaTeX JavaScript,
+fontTools, network requests to a CDN, or code generation in a consuming app.

package/src/shapes/parenthesis-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1809" preserveAspectRatio="none"><path d="M5 1Q7 0 75 0Q118 0 120 1Q124 2 125.0 8.0Q126 14 126 46Q126 290 143 500Q174 908 272.0 1223.0Q370 1538 542 1782Q552 1796 552 1800Q552 1803 546 1809H529Q510 1809 509 1808Q501 1800 494 1791Q130 1349 36 629Q4 384 0 72Q0 21 0.5 12.0Q1 3 5 1Z"/></svg>

package/src/shapes/parenthesis-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1809" preserveAspectRatio="none"><path d="M509 1Q510 0 528 0H546Q552 6 552 9Q552 13 542 27Q339 316 241.5 692.0Q144 1068 129 1574Q126 1730 126 1763Q126 1795 125.0 1801.0Q124 1807 120 1808Q118 1809 75 1809Q8 1809 6 1808Q1 1806 0.5 1797.0Q0 1788 0 1737Q3 1498 24 1283Q104 491 494 18Q501 9 509 1Z"/></svg>

package/src/shapes/parenthesis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239 1000" preserveAspectRatio="none"><path d="M239 991Q239 1000 221 1000H208Q201 994 180 976Q0 812 0 500Q0 378 29 277Q75 120 180 24Q187 18 196.0 10.5Q205 3 208 0H221Q233 0 236.0 3.0Q239 6 239 9Q239 13 228 24Q73 188 73.0 500.0Q73 812 228 976Q239 987 239 991Z"/></svg>

package/src/shapes/radical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850 1000" preserveAspectRatio="none"><path d="M95,622 c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14 c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54 c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10 s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429 c69,-144,104.5,-217.7,106.5,-221 l0.0 -0 c5.3,-9.3,12,-14,20,-14 H400000v40H845.2724 s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7 c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z M834 0h400000v40h-400000z"/></svg>