@barocss/math-editor 0.2.1 → 0.5.0

package/dist/presentation-controls.d.ts

@@ -0,0 +1,10 @@
+import type { MathState, StructureKind } from './model.js';
+import type { MathPresentationChange } from './presentation.js';
+import type { MathLocale } from './i18n.js';
+export declare function PresentationControls(props: {
+    state: MathState;
+    locale: MathLocale;
+    disabled: boolean;
+    kinds?: readonly StructureKind[];
+    onChange(id: string, change: MathPresentationChange): void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/presentation-controls.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { drawPresentationControls } from './dom/presentation-controls.js';
+export function PresentationControls(props) {
+    const host = useRef(null);
+    useLayoutEffect(() => {
+        drawPresentationControls(host.current, props.state, props.locale, props.onChange, props.disabled, props.kinds);
+    });
+    return _jsx("div", { ref: host });
+}

package/dist/presentation.d.ts

@@ -0,0 +1,13 @@
+import { type MathState, type MathStructure, type StructureKind } from './model.js';
+export type MathPresentationChange = {
+    fence: string;
+} | {
+    mathStyle: 'default' | 'display' | 'text';
+} | {
+    limits: 'default' | 'above-below' | 'side';
+};
+export declare const limitKinds: readonly StructureKind[];
+/** Nearest containing structure with presentation settings. Nested content is never flattened. */
+export declare function activePresentation(state: MathState): MathStructure | undefined;
+/** Change metadata only. Preserve node/slot IDs, contents and the model caret. */
+export declare function setMathPresentation(state: MathState, id: string, change: MathPresentationChange): MathState;

package/dist/presentation.js

@@ -0,0 +1,86 @@
+import { documentRows, isGrid, } from './model.js';
+import { fencePairs, fences } from './fences.js';
+export const limitKinds = [
+    'sum',
+    'product',
+    'integral',
+    'doubleIntegral',
+    'tripleIntegral',
+    'contourIntegral',
+    'limit',
+    'limsup',
+    'liminf',
+];
+const editable = (node) => !!fences(node) || ['fraction', 'binomial'].includes(node.type) || limitKinds.includes(node.type);
+/** Nearest containing structure with presentation settings. Nested content is never flattened. */
+export function activePresentation(state) {
+    const visit = (row) => {
+        for (const node of row.children) {
+            if (node.type === 'text') {
+                if (node.id === state.caret.id)
+                    return { contains: true };
+            }
+            else
+                for (const slot of node.slots) {
+                    const child = visit(slot);
+                    if (child.contains)
+                        return { contains: true, target: child.target ?? (editable(node) ? node : undefined) };
+                }
+        }
+        return { contains: false };
+    };
+    for (const row of documentRows(state.document)) {
+        const result = visit(row);
+        if (result.contains)
+            return result.target;
+    }
+}
+/** Change metadata only. Preserve node/slot IDs, contents and the model caret. */
+export function setMathPresentation(state, id, change) {
+    const document = structuredClone(state.document);
+    const find = (row) => {
+        for (const node of row.children)
+            if (node.type !== 'text') {
+                if (node.id === id)
+                    return node;
+                for (const slot of node.slots) {
+                    const found = find(slot);
+                    if (found)
+                        return found;
+                }
+            }
+    };
+    const node = documentRows(document).map(find).find(Boolean);
+    if (!node || isGrid(node))
+        return state;
+    if ('fence' in change) {
+        if (!fences(node) || !Object.hasOwn(fencePairs, change.fence))
+            return state;
+        node.type = change.fence;
+        delete node.left;
+        delete node.right;
+    }
+    else if ('mathStyle' in change) {
+        if (!['fraction', 'binomial'].includes(node.type) ||
+            !['default', 'display', 'text'].includes(change.mathStyle))
+            return state;
+        if (change.mathStyle === 'default')
+            delete node.mathStyle;
+        else
+            node.mathStyle = change.mathStyle;
+    }
+    else if ('limits' in change) {
+        if (!limitKinds.includes(node.type) ||
+            !['default', 'above-below', 'side'].includes(change.limits))
+            return state;
+        if (change.limits === 'default')
+            delete node.limits;
+        else
+            node.limits = change.limits === 'above-below';
+    }
+    else
+        return state;
+    return JSON.stringify(document) === JSON.stringify(state.document)
+        ? state
+        : { document, caret: { ...state.caret } };
+}

package/dist/quick-panel.d.ts

@@ -0,0 +1,2 @@
+import { mountQuickPanel } from './dom/quick-panel.js';
+export declare function QuickPanel(props: Parameters<typeof mountQuickPanel>[1]): import("react/jsx-runtime").JSX.Element;

package/dist/quick-panel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { mountQuickPanel } from './dom/quick-panel.js';
+export function QuickPanel(props) {
+    const host = useRef(null);
+    const current = useRef(props);
+    current.current = props;
+    useLayoutEffect(() => {
+        const panel = mountQuickPanel(host.current, {
+            ...props,
+            onInsert: (item) => current.current.onInsert(item),
+            onClose: () => current.current.onClose(),
+        });
+        return () => panel.destroy();
+    }, [props.locale, props.preferences, props.allowedTemplates?.join(',')]);
+    return _jsx("div", { ref: host });
+}

package/dist/range.d.ts

@@ -11,6 +11,8 @@ export interface MathFragment {
     version: 1;
     rows: MathRow[];
 }
+/** Plain arrows leave a model selection at its document-ordered edge. */
+export declare function collapseKeyboardRange(document: MathDocument, range: MathRange | undefined, key: string): MathPoint | undefined;
 export declare function resolveRange(document: MathDocument, range: MathRange): {
     row: MathRow;
     start: number;
@@ -29,4 +31,3 @@ export type WrappingKind = (typeof wrappingKinds)[number];
 export declare function wrapRange(state: MathState, range: MathRange, kind: WrappingKind): MathState;
 /** Keyboard ranges share drag-selection normalization. Cross a structure as one atom. */
 export declare function extendKeyboardRange(state: MathState, range: MathRange | undefined, key: string): MathRange;
-//# sourceMappingURL=range.d.ts.map

package/dist/range.js

@@ -33,6 +33,17 @@ function ordered(document, range) {
         ? { a: b, b: a, start: range.focus, end: range.anchor }
         : { a, b, start: range.anchor, end: range.focus };
 }
+/** Plain arrows leave a model selection at its document-ordered edge. */
+export function collapseKeyboardRange(document, range, key) {
+    if (!range || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key))
+        return;
+    const bounds = ordered(document, range);
+    if (!bounds)
+        return;
+    const point = key === 'ArrowLeft' || key === 'ArrowUp' ? bounds.start : bounds.end;
+    const node = textNodes(document).find((node) => node.id === point.id);
+    return { id: point.id, offset: Math.max(0, Math.min(point.offset, node.text.length)) };
+}
 function offset(p, depth, point, end) {
     const at = p[depth], base = at.row.children.slice(0, at.index).reduce((n, node) => n + size(node), 0);
     return (base +
@@ -428,4 +439,3 @@ export function extendKeyboardRange(state, range, key) {
     const target = direction < 0 ? nodes.at(-1) : nodes[0];
     return { anchor, focus: { id: target.id, offset: direction < 0 ? target.text.length : 0 } };
 }
-//# sourceMappingURL=range.js.map

package/dist/react.d.ts

@@ -8,4 +8,3 @@ export declare function MathEditorSurface(props: DOMMathEditorOptions & {
     ref: import("react").RefObject<HTMLSpanElement | null>;
     className: string | undefined;
 }, HTMLSpanElement>;
-//# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -17,4 +17,3 @@ export function MathEditorSurface(props) {
     });
     return createElement('span', { ref: host, className: props.className });
 }
-//# sourceMappingURL=react.js.map

package/dist/root-transform.d.ts

@@ -0,0 +1,19 @@
+import { type MathState, type MathStructure } from './model.js';
+/** Use the nearest enclosing radical, including from one of its nested slots. */
+export declare function activeRoot(state: MathState): MathStructure | undefined;
+/** An explicit non-square index cannot be discarded by a presentation change. */
+export declare function canUseSquareRoot(root: MathStructure): boolean;
+/** Preserve the radicand's entire tree and IDs, and focus the newly editable index. */
+export declare function transformRoot(state: MathState, targetId: string, kind: 'root' | 'indexedRoot'): MathState;
+/** Footer context is independent of the typed query and suggestion dismissal. */
+export declare function rootEditingContext(state: MathState): {
+    id: string;
+    kind: "root" | "indexedRoot";
+    target: "root" | "indexedRoot";
+    canTransform: boolean;
+    indexCaret: {
+        id: string;
+        start: number;
+        end: number;
+    } | undefined;
+} | undefined;

package/dist/root-transform.js

@@ -0,0 +1,69 @@
+import { documentRows, isLiteralText, row, textNodes, } from './model.js';
+/** Use the nearest enclosing radical, including from one of its nested slots. */
+export function activeRoot(state) {
+    if (isLiteralText(state.document, state.caret.id))
+        return;
+    const visit = (line, parent) => {
+        for (const node of line.children) {
+            if (node.type === 'text') {
+                if (node.id === state.caret.id)
+                    return parent;
+            }
+            else {
+                for (const slot of node.slots) {
+                    const found = visit(slot, ['root', 'indexedRoot'].includes(node.type) ? node : parent);
+                    if (found)
+                        return found;
+                }
+            }
+        }
+    };
+    for (const line of documentRows(state.document)) {
+        const found = visit(line);
+        if (found)
+            return found;
+    }
+}
+/** An explicit non-square index cannot be discarded by a presentation change. */
+export function canUseSquareRoot(root) {
+    if (root.type !== 'indexedRoot')
+        return false;
+    const index = root.slots[0];
+    if (index.children.some((node) => node.type !== 'text'))
+        return false;
+    const value = index.children
+        .map((node) => (node.type === 'text' ? node.text : ''))
+        .join('')
+        .trim();
+    return value === '' || value === '2';
+}
+/** Preserve the radicand's entire tree and IDs, and focus the newly editable index. */
+export function transformRoot(state, targetId, kind) {
+    const current = activeRoot(state);
+    if (!current || current.id !== targetId || current.type === kind)
+        return state;
+    if (kind === 'root' && !canUseSquareRoot(current))
+        return state;
+    const next = { ...state, document: structuredClone(state.document) };
+    const root = activeRoot(next);
+    const radicand = root.slots[root.type === 'root' ? 0 : 1];
+    root.type = kind;
+    // Start at 2 to retain the formula's meaning; select it so typing n replaces it.
+    root.slots = kind === 'indexedRoot' ? [row('2'), radicand] : [radicand];
+    const first = textNodes({ version: 1, root: root.slots[0] })[0];
+    return { ...next, caret: { id: first.id, start: 0, end: kind === 'indexedRoot' ? 1 : 0 } };
+}
+/** Footer context is independent of the typed query and suggestion dismissal. */
+export function rootEditingContext(state) {
+    const root = activeRoot(state);
+    if (!root)
+        return;
+    const index = root.type === 'indexedRoot' ? textNodes({ version: 1, root: root.slots[0] })[0] : undefined;
+    return {
+        id: root.id,
+        kind: root.type,
+        target: root.type === 'root' ? 'indexedRoot' : 'root',
+        canTransform: root.type === 'root' || canUseSquareRoot(root),
+        indexCaret: index ? { id: index.id, start: 0, end: index.text.length } : undefined,
+    };
+}

package/dist/session.d.ts

@@ -1,14 +1,24 @@
+import { type MathPresentationChange } from './presentation.js';
+import { type MathPreferences } from './preferences.js';
+import { type LatexInsertionResult } from './latex-insertion.js';
 import { type LatexParseResult } from './latex.js';
 import { type MathDocument, type MathState, type MathCaret, type StructureKind } from './model.js';
 import { type MathRange, type MathFragment } from './range.js';
 import type { MathLocale } from './i18n.js';
+import { type MathMatrixRange, type MathMatrixFragment } from './matrix-range.js';
 export type MathEditorMode = 'block' | 'inline';
 export interface MathSessionOptions {
+    /** UI-only preference store. Supply one store to share it across editors. */
+    preferences?: MathPreferences;
     document?: MathDocument;
     mode?: MathEditorMode;
     locale?: MathLocale;
 }
 export type MathCommand = {
+    type: 'presentation';
+    id: string;
+    change: MathPresentationChange;
+} | {
     type: 'text';
     value: string;
 } | {
@@ -23,10 +33,18 @@ export type MathCommand = {
     type: 'undo';
 } | {
     type: 'redo';
+} | {
+    type: 'matrix-select';
+    all?: boolean;
+} | {
+    type: 'matrix-transpose';
+} | {
+    type: 'matrix-clear';
 };
 export interface MathSessionSnapshot {
     state: MathState;
     range?: MathRange;
+    matrixRange?: MathMatrixRange;
     locale: MathLocale;
     mode: MathEditorMode;
     canUndo: boolean;
@@ -35,14 +53,26 @@ export interface MathSessionSnapshot {
 }
 /** Framework-free session. Snapshots are copies; consumers cannot mutate history. */
 export declare function createMathSession(options?: MathSessionOptions): {
+    preferences: {
+        getSnapshot: () => import("./preferences.js").MathPreferencesSnapshot;
+        record(id: string): void;
+        toggleFavorite(id: string): void;
+        clearRecent(): void;
+        subscribe(listener: () => void): () => void;
+    };
     getSnapshot: () => MathSessionSnapshot;
     subscribe(listener: (snapshot: MathSessionSnapshot, documentChanged: boolean) => void): () => void;
     apply: (next: MathState) => boolean;
     select(caret: MathCaret): void;
     selectRange(next?: MathRange): void;
-    configure(next: Omit<MathSessionOptions, "document">): void;
+    selectMatrixRange(next?: MathMatrixRange): boolean;
+    copyMatrix(): MathMatrixFragment | undefined;
+    pasteMatrix(fragment: MathMatrixFragment): boolean;
+    configure(next: Omit<MathSessionOptions, "document" | "preferences">): void;
     /** Atomic replacement in the existing history. Syntax/policy failures emit no changes. */
     importLatex(source: string): LatexParseResult;
+    /** Explicit LaTeX paste replaces only the current range and creates one Undo entry. */
+    pasteLatex(source: string): LatexInsertionResult;
     load(document: MathDocument): void;
     copy(): MathFragment | undefined;
     paste(fragment: MathFragment): boolean;
@@ -50,4 +80,3 @@ export declare function createMathSession(options?: MathSessionOptions): {
     destroy(): void;
 };
 export type MathSession = ReturnType<typeof createMathSession>;
-//# sourceMappingURL=session.d.ts.map

package/dist/session.js

@@ -1,12 +1,17 @@
+import { setMathPresentation } from './presentation.js';
+import { createMathPreferences } from './preferences.js';
+import { insertLatex } from './latex-insertion.js';
 import { parseLatex } from './latex.js';
 import { commit, createHistory, initialState, insertStructure, toLatex, row, undo, redo, } from './model.js';
 import { copyRange, pasteFragment, wrapRange, wrappingKinds, } from './range.js';
 import { insertTemplate } from './templates.js';
 import { splitLine } from './lines.js';
+import { activeMatrix } from './matrix.js';
+import { clearMatrixRange, copyMatrixRange, focusMatrixCell, matrixFragment, pasteMatrixFragment, resolveMatrixRange, transposeMatrix, } from './matrix-range.js';
 /** Framework-free session. Snapshots are copies; consumers cannot mutate history. */
 export function createMathSession(options = {}) {
     let history = createHistory(initialState(options.document ? structuredClone(options.document) : undefined));
-    let mode = options.mode ?? 'block', locale = options.locale ?? 'ko', range;
+    let mode = options.mode ?? 'block', locale = options.locale ?? 'ko', range, matrixRange;
     const listeners = new Set();
     const valid = (document) => mode !== 'inline' || !document.additionalLines?.length;
     if (!valid(history.present.document))
@@ -14,6 +19,7 @@ export function createMathSession(options = {}) {
     const getSnapshot = () => ({
         state: structuredClone(history.present),
         range: range && structuredClone(range),
+        matrixRange: matrixRange && structuredClone(matrixRange),
         locale,
         mode,
         canUndo: !!history.past.length,
@@ -32,12 +38,16 @@ export function createMathSession(options = {}) {
         history = changed
             ? commit(history, next)
             : { ...history, present: { ...history.present, caret: next.caret } };
-        if (changed)
+        if (changed) {
             range = undefined;
+            matrixRange = undefined;
+        }
         emit(changed);
         return true;
     };
+    const preferences = options.preferences ?? createMathPreferences();
     return {
+        preferences,
         getSnapshot,
         subscribe(listener) {
             listeners.add(listener);
@@ -52,12 +62,34 @@ export function createMathSession(options = {}) {
                 present: { ...history.present, caret: { ...caret } },
             };
             range = undefined;
+            matrixRange = undefined;
             emit(false);
         },
         selectRange(next) {
+            matrixRange = undefined;
             range = next && structuredClone(next);
             emit(false);
         },
+        selectMatrixRange(next) {
+            if (next && !resolveMatrixRange(history.present.document, next))
+                return false;
+            matrixRange = next && structuredClone(next);
+            range = undefined;
+            if (next)
+                history = {
+                    ...history,
+                    present: focusMatrixCell(history.present, next.matrixId, next.focus),
+                };
+            emit(false);
+            return true;
+        },
+        copyMatrix() {
+            return matrixRange ? copyMatrixRange(history.present.document, matrixRange) : undefined;
+        },
+        pasteMatrix(fragment) {
+            const next = pasteMatrixFragment(history.present, fragment, matrixRange);
+            return next !== history.present && apply(next);
+        },
         configure(next) {
             const targetMode = next.mode ?? mode;
             if (targetMode === 'inline' && history.present.document.additionalLines?.length)
@@ -73,17 +105,44 @@ export function createMathSession(options = {}) {
                 apply(initialState(result.document));
             return result;
         },
+        /** Explicit LaTeX paste replaces only the current range and creates one Undo entry. */
+        pasteLatex(source) {
+            if (matrixRange)
+                return {
+                    ok: false,
+                    source,
+                    diagnostics: [
+                        {
+                            code: 'unsupported-structure',
+                            message: 'Select one insertion point before pasting LaTeX.',
+                            start: 0,
+                            end: source.length,
+                        },
+                    ],
+                };
+            const result = insertLatex(history.present, source, range, { multiline: mode !== 'inline' });
+            if (result.ok)
+                apply(result.state);
+            return result;
+        },
         load(document) {
             if (!valid(document))
                 throw new Error('Inline mode requires a single top-level row.');
             history = createHistory(initialState(structuredClone(document)));
             range = undefined;
+            matrixRange = undefined;
             emit(true);
         },
         copy() {
+            if (matrixRange) {
+                const fragment = copyMatrixRange(history.present.document, matrixRange);
+                return fragment && matrixFragment(fragment);
+            }
             return range ? copyRange(history.present.document, range) : undefined;
         },
         paste(fragment) {
+            if (matrixRange)
+                return false;
             return apply(pasteFragment(history.present, fragment, range));
         },
         execute(command) {
@@ -96,19 +155,62 @@ export function createMathSession(options = {}) {
                 const changed = next.present.document !== state.document;
                 history = next;
                 range = undefined;
+                matrixRange = undefined;
                 emit(changed);
                 return changed;
             }
-            if (command.type === 'text')
-                return apply(pasteFragment(state, {
+            if (command.type === 'presentation') {
+                if (range || matrixRange)
+                    return false;
+                const next = setMathPresentation(state, command.id, command.change);
+                return next !== state && apply(next);
+            }
+            if (command.type === 'matrix-select') {
+                const context = activeMatrix(state);
+                if (!context)
+                    return false;
+                matrixRange = {
+                    matrixId: context.matrix.id,
+                    anchor: command.all ? 0 : context.cell,
+                    focus: command.all ? context.matrix.slots.length - 1 : context.cell,
+                };
+                range = undefined;
+                history = {
+                    ...history,
+                    present: focusMatrixCell(state, matrixRange.matrixId, matrixRange.focus),
+                };
+                emit(false);
+                return true;
+            }
+            if (command.type === 'matrix-transpose') {
+                const next = transposeMatrix(state, matrixRange?.matrixId);
+                return next !== state && apply(next);
+            }
+            if (command.type === 'matrix-clear')
+                return !!matrixRange && apply(clearMatrixRange(state, matrixRange));
+            if (matrixRange)
+                return (command.type === 'text' &&
+                    !command.value.includes('\n') &&
+                    !command.value.includes('\r') &&
+                    apply(clearMatrixRange(state, matrixRange, command.value)));
+            if (command.type === 'text') {
+                const inserted = apply(pasteFragment(state, {
                     version: 1,
                     rows: command.value
                         .replace(/\r\n?/g, '\n')
                         .split('\n')
                         .map((value) => row(value)),
                 }, range));
-            if (command.type === 'template')
-                return apply(insertTemplate(state, command.id, range));
+                if (inserted)
+                    preferences.record(`symbol-${command.value}`);
+                return inserted;
+            }
+            if (command.type === 'template') {
+                const inserted = apply(insertTemplate(state, command.id, range));
+                if (inserted)
+                    preferences.record(`template-${command.id}`);
+                return inserted;
+            }
             if (command.type === 'newline')
                 return mode === 'inline' ? false : apply(splitLine(state));
             if (range)
@@ -121,4 +223,3 @@ export function createMathSession(options = {}) {
         },
     };
 }
-//# sourceMappingURL=session.js.map

package/dist/solid.d.ts

@@ -9,4 +9,3 @@ declare module 'solid-js' {
 }
 /** Solid directive: <div use:mathEditor={options()} />. */
 export declare function mathEditor(host: HTMLElement, options: Accessor<DOMMathEditorOptions>): void;
-//# sourceMappingURL=solid.d.ts.map

package/dist/solid.js

@@ -6,4 +6,3 @@ export function mathEditor(host, options) {
     createEffect(() => editor.update(options()));
     onCleanup(() => editor.destroy());
 }
-//# sourceMappingURL=solid.js.map

package/dist/suggestions.d.ts

@@ -1,13 +1,21 @@
 import { type MathLocale, type MathMessageParameters } from './i18n.js';
 import { type MathState, type StructureKind } from './model.js';
 export interface MathSuggestion {
+    /** Convert this enclosing structure without consuming the typed query. */
+    transformRootId?: string;
+    /** Change the current fence without inserting a wrapper or consuming text. */
+    transformFenceId?: string;
     /** Preserve the query as an operand instead of replacing a command name. */
     wrapOperand?: boolean;
     operatorName?: string;
     mathStyle?: 'display' | 'text';
     templateId?: string;
     identity?: boolean;
+    /** Fill each matrix cell with an editable zero. */
+    zero?: boolean;
+    /** Row count; matrices are square unless matrixColumns is supplied. */
     matrixSize?: number;
+    matrixColumns?: number;
     id: string;
     /** Catalog entries hold message keys; findSuggestions returns localized display text. */
     label: string;
@@ -27,5 +35,9 @@ export declare function findSuggestions(text: string, caret: number, locale?: Ma
     query: string;
     candidates: MathSuggestion[];
 };
+/** Combine text search with changes available for the current formula structure. */
+export declare function findStateSuggestions(state: MathState, locale?: MathLocale, caret?: number): {
+    query: string;
+    candidates: MathSuggestion[];
+};
 export declare function acceptSuggestion(state: MathState, query: string, candidate: MathSuggestion): MathState;
-//# sourceMappingURL=suggestions.d.ts.map