@barocss/math-editor 0.2.1 → 0.5.0

package/dist/dom/context-keyboard.js

@@ -0,0 +1,22 @@
+/** Keep focus in the same document (including iframe hosts). Arrow keys only browse; Enter applies. */
+export function focusContextAction(host, key) {
+    const buttons = Array.from(host.querySelectorAll('button:not(:disabled)'));
+    if (!buttons.length)
+        return false;
+    const index = buttons.indexOf(host.ownerDocument.activeElement);
+    let next;
+    if (key === 'F6')
+        next = buttons.find((button) => button.getAttribute('aria-pressed') === 'true') ?? buttons[0];
+    else if (key === 'ArrowRight')
+        next = buttons[(index + 1) % buttons.length];
+    else if (key === 'ArrowLeft')
+        next = buttons[(index - 1 + buttons.length) % buttons.length];
+    else if (key === 'Home')
+        next = buttons[0];
+    else if (key === 'End')
+        next = buttons[buttons.length - 1];
+    if (!next)
+        return false;
+    next.focus({ preventScroll: true });
+    return true;
+}

package/dist/dom/elements.d.ts

@@ -1,3 +1,2 @@
 /** Shared native element factory. Text is assigned with textContent, never parsed as HTML. */
-export declare const element: <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string) => HTMLElementTagNameMap[K];
-//# sourceMappingURL=elements.d.ts.map
+export declare const elementFactory: (doc: Document) => <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string) => HTMLElementTagNameMap[K];

package/dist/dom/elements.js

@@ -1,9 +1,8 @@
 /** Shared native element factory. Text is assigned with textContent, never parsed as HTML. */
-export const element = (tag, className = '', text) => {
-    const node = document.createElement(tag);
+export const elementFactory = (doc) => (tag, className = '', text) => {
+    const node = doc.createElement(tag);
     node.className = className;
     if (text !== undefined)
         node.textContent = text;
     return node;
 };
-//# sourceMappingURL=elements.js.map

package/dist/dom/latex-panel.d.ts

@@ -0,0 +1,10 @@
+import { type MathLocale } from '../i18n.js';
+import type { LatexParseResult } from '../latex.js';
+/** Explicit, nonmodal paste UI. It never reads the OS clipboard without a user paste. */
+export declare function mountLatexPanel(host: HTMLElement, options: {
+    locale: MathLocale;
+    onInsert(source: string): LatexParseResult;
+    onClose(): void;
+}): {
+    destroy(): void;
+};

package/dist/dom/latex-panel.js

@@ -0,0 +1,59 @@
+import { elementFactory } from './elements.js';
+import { translate } from '../i18n.js';
+/** Explicit, nonmodal paste UI. It never reads the OS clipboard without a user paste. */
+export function mountLatexPanel(host, options) {
+    const el = elementFactory(host.ownerDocument);
+    const t = (key) => translate(options.locale, key);
+    const panel = el('section', 'me-utility-panel');
+    panel.setAttribute('aria-label', t('clipboard.latexTitle'));
+    const label = el('label', '', t('clipboard.latexTitle'));
+    const source = el('textarea');
+    source.rows = 3;
+    source.placeholder = String.raw `\frac{a}{b} + x^2`;
+    source.spellcheck = false;
+    label.append(source);
+    const hint = el('p', '', t('clipboard.latexHint'));
+    const error = el('p', 'me-utility-error');
+    error.setAttribute('role', 'alert');
+    const actions = el('div', 'me-utility-actions');
+    const insert = el('button', '', t('clipboard.latexInsert'));
+    insert.type = 'button';
+    insert.onclick = () => {
+        const result = options.onInsert(source.value);
+        if (result.ok)
+            options.onClose();
+        else {
+            const diagnostic = result.diagnostics[0];
+            error.textContent = `${t('clipboard.latexError')} (${diagnostic.start + 1}): ${diagnostic.message}`;
+            source.focus();
+            source.setSelectionRange(diagnostic.start, diagnostic.end);
+        }
+    };
+    const close = el('button', '', t('common.close'));
+    close.type = 'button';
+    close.onclick = options.onClose;
+    actions.append(insert, close);
+    panel.append(label, hint, error, actions);
+    host.append(panel);
+    panel.addEventListener('keydown', (event) => {
+        event.stopPropagation();
+        if (event.isComposing)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            options.onClose();
+        }
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+            event.preventDefault();
+            insert.click();
+        }
+    });
+    for (const type of ['copy', 'cut', 'paste', 'input', 'beforeinput', 'keyup'])
+        panel.addEventListener(type, (event) => event.stopPropagation());
+    source.focus();
+    return {
+        destroy() {
+            panel.remove();
+        },
+    };
+}

package/dist/dom/matrix-selection.d.ts

@@ -0,0 +1,11 @@
+import type { MathMatrixRange } from '../matrix-range.js';
+type CellRect = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/** Grid tracks, rather than nearest glyphs, keep tall fractions from stealing adjacent cells. */
+export declare function matrixCellAtPoint(columns: number, cells: CellRect[], x: number, y: number): number;
+export declare function matrixPointerRange(surface: HTMLElement, range: MathMatrixRange, columns: number, x: number, y: number): MathMatrixRange;
+export {};

package/dist/dom/matrix-selection.js

@@ -0,0 +1,30 @@
+/** Grid tracks, rather than nearest glyphs, keep tall fractions from stealing adjacent cells. */
+export function matrixCellAtPoint(columns, cells, x, y) {
+    const nearest = (axis) => {
+        const count = axis === 'row' ? cells.length / columns : columns;
+        let chosen = 0, distance = Infinity;
+        for (let track = 0; track < count; track++) {
+            const group = cells.filter((_, i) => (axis === 'row' ? Math.floor(i / columns) : i % columns) === track);
+            const start = Math.min(...group.map((cell) => (axis === 'row' ? cell.top : cell.left)));
+            const end = Math.max(...group.map((cell) => (axis === 'row' ? cell.bottom : cell.right)));
+            const point = axis === 'row' ? y : x;
+            const next = Math.max(start - point, 0, point - end);
+            if (next < distance) {
+                chosen = track;
+                distance = next;
+            }
+        }
+        return chosen;
+    };
+    return nearest('row') * columns + nearest('column');
+}
+export function matrixPointerRange(surface, range, columns, x, y) {
+    const grid = [...surface.querySelectorAll('.me-matrix')].find((node) => node.dataset.matrixId === range.matrixId);
+    const cells = grid?.querySelectorAll(':scope > .me-matrix-grid > .me-matrix-cell');
+    if (!cells?.length)
+        return range;
+    return {
+        ...range,
+        focus: matrixCellAtPoint(columns, [...cells].map((cell) => cell.getBoundingClientRect()), x, y),
+    };
+}

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

@@ -1,3 +1,18 @@
+interface MenuRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** Follow layout and visual viewport changes, including ancestor transforms that
+ * do not produce window resize or element ResizeObserver notifications. */
+export declare function followMathMenuPosition(anchor: HTMLElement, position: () => void, ignoreScrollWithin?: HTMLElement): () => void;
+/** Choose a scrollable vertical gap without covering host controls in the same column. */
+export declare function mathMenuPlacement(bounds: MenuRect, anchor: MenuRect, width: number, desiredHeight: number, preferredHeight: number, avoid?: readonly MenuRect[]): {
+    left: number;
+    top: number;
+    height: number;
+};
 /** Position a fixed portal in viewport coordinates, including transformed modal hosts. */
-export declare function positionMathMenu(menu: HTMLElement, anchor: DOMRect, maxHeight: number): void;
-//# sourceMappingURL=menu-position.d.ts.map
+export declare function positionMathMenu(menu: HTMLElement, anchor: DOMRect, maxHeight: number, avoidElements?: readonly HTMLElement[]): void;
+export {};

package/dist/dom/menu-position.js

@@ -1,12 +1,126 @@
+/** Follow layout and visual viewport changes, including ancestor transforms that
+ * do not produce window resize or element ResizeObserver notifications. */
+export function followMathMenuPosition(anchor, position, ignoreScrollWithin) {
+    const win = anchor.ownerDocument.defaultView;
+    let frame = 0;
+    const schedule = () => {
+        if (!frame)
+            frame = win.requestAnimationFrame(() => {
+                frame = 0;
+                position();
+            });
+    };
+    const scroll = (event) => {
+        if (event.target &&
+            'nodeType' in event.target &&
+            ignoreScrollWithin?.contains(event.target))
+            return;
+        schedule();
+    };
+    const changes = new MutationObserver(schedule);
+    for (let element = anchor; element; element = element.parentElement)
+        changes.observe(element, { attributes: true, attributeFilter: ['style', 'class'] });
+    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);
+    resize?.observe(anchor);
+    win.addEventListener('resize', schedule);
+    win.addEventListener('scroll', scroll, true);
+    win.visualViewport?.addEventListener('resize', schedule);
+    win.visualViewport?.addEventListener('scroll', schedule);
+    return () => {
+        changes.disconnect();
+        resize?.disconnect();
+        win.cancelAnimationFrame(frame);
+        win.removeEventListener('resize', schedule);
+        win.removeEventListener('scroll', scroll, true);
+        win.visualViewport?.removeEventListener('resize', schedule);
+        win.visualViewport?.removeEventListener('scroll', schedule);
+    };
+}
+/** Fixed menus escape ordinary scrolling text areas. Transforms and containment
+ * establish a local containing block, so overflow at that block and above still clips. */
+function establishesFixedContainingBlock(style) {
+    const properties = [
+        'transform',
+        'translate',
+        'rotate',
+        'scale',
+        'perspective',
+        'filter',
+        'backdrop-filter',
+    ];
+    return (properties.some((property) => {
+        const value = style.getPropertyValue(property);
+        return value !== '' && value !== 'none';
+    }) ||
+        /layout|paint|strict|content/.test(style.contain) ||
+        style.contentVisibility === 'auto' ||
+        style.willChange.split(',').some((property) => properties.includes(property.trim())));
+}
+/** Choose a scrollable vertical gap without covering host controls in the same column. */
+export function mathMenuPlacement(bounds, anchor, width, desiredHeight, preferredHeight, avoid = []) {
+    const left = Math.max(bounds.left, Math.min(anchor.left, bounds.right - width));
+    const blockers = avoid
+        .filter((rect) => rect.left < left + width && rect.right > left)
+        .sort((a, b) => a.top - b.top);
+    const gaps = (top, bottom) => {
+        const result = [];
+        let start = top;
+        for (const rect of blockers) {
+            if (rect.bottom + 4 <= start || rect.top - 4 >= bottom)
+                continue;
+            if (rect.top - 4 > start)
+                result.push({ top: start, bottom: Math.min(bottom, rect.top - 4) });
+            start = Math.max(start, rect.bottom + 4);
+            if (start >= bottom)
+                break;
+        }
+        if (start < bottom)
+            result.push({ top: start, bottom });
+        return result;
+    };
+    const capacity = (gap) => gap.bottom - gap.top;
+    const below = gaps(Math.max(bounds.top, anchor.bottom + 4), bounds.bottom);
+    const above = gaps(bounds.top, Math.min(bounds.bottom, anchor.top - 4)).reverse();
+    const largest = (items) => Math.max(0, ...items.map(capacity));
+    // Retain direction while typing, independent of the current number of candidates.
+    const threshold = Math.min(preferredHeight, 160);
+    let placeBelow = largest(below) >= threshold || largest(below) >= largest(above);
+    const preferred = placeBelow ? below : above;
+    let gap = preferred.find((item) => capacity(item) >= threshold) ??
+        preferred.reduce((best, item) => (!best || capacity(item) > capacity(best) ? item : best), undefined);
+    if (!gap || capacity(gap) < Math.min(48, desiredHeight)) {
+        // A short clipped host can leave space only beside the anchor vertically.
+        // Overlap the expression if necessary before overlapping its action controls.
+        const full = gaps(bounds.top, bounds.bottom).sort((a, b) => capacity(b) - capacity(a))[0];
+        if (full && (!gap || capacity(full) > capacity(gap))) {
+            gap = full;
+            placeBelow = true;
+        }
+    }
+    // If controls occupy the entire clipping rectangle, no disjoint placement exists.
+    // Keep the menu scrollable within that rectangle rather than silently hiding it.
+    gap ??= { top: bounds.top, bottom: bounds.bottom };
+    const height = Math.max(0, Math.min(desiredHeight, capacity(gap)));
+    return { left, top: placeBelow ? gap.top : gap.bottom - height, height };
+}
 /** Position a fixed portal in viewport coordinates, including transformed modal hosts. */
-export function positionMathMenu(menu, anchor, maxHeight) {
+export function positionMathMenu(menu, anchor, maxHeight, avoidElements = []) {
     const win = menu.ownerDocument.defaultView;
-    const bounds = { left: 8, top: 8, right: win.innerWidth - 8, bottom: win.innerHeight - 8 };
+    const viewport = win.visualViewport;
+    const bounds = {
+        left: (viewport?.offsetLeft ?? 0) + 8,
+        top: (viewport?.offsetTop ?? 0) + 8,
+        right: (viewport?.offsetLeft ?? 0) + (viewport?.width ?? win.innerWidth) - 8,
+        bottom: (viewport?.offsetTop ?? 0) + (viewport?.height ?? win.innerHeight) - 8,
+    };
+    let contained = false;
     for (let parent = menu.parentElement; parent; parent = parent.parentElement) {
         const style = win.getComputedStyle(parent);
+        contained ||= establishesFixedContainingBlock(style);
         const dialog = parent.matches('dialog, [role="dialog"]');
-        const clipX = dialog || /auto|scroll|hidden|clip/.test(style.overflowX);
-        const clipY = dialog || /auto|scroll|hidden|clip/.test(style.overflowY);
+        const paintClip = /paint|strict|content/.test(style.contain) || style.contentVisibility === 'auto';
+        const clipX = dialog || paintClip || (contained && /auto|scroll|hidden|clip/.test(style.overflowX));
+        const clipY = dialog || paintClip || (contained && /auto|scroll|hidden|clip/.test(style.overflowY));
         if (!clipX && !clipY)
             continue;
         const rect = parent.getBoundingClientRect();
@@ -23,22 +137,21 @@ export function positionMathMenu(menu, anchor, maxHeight) {
     // A dialog's transform/translate establishes a local origin and may also scale it.
     menu.style.left = '0px';
     menu.style.top = '0px';
+    menu.style.boxSizing = 'border-box';
     menu.style.maxWidth = '';
     menu.style.maxHeight = `${maxHeight}px`;
     const origin = menu.getBoundingClientRect();
     const scaleX = origin.width / menu.offsetWidth || 1;
     const scaleY = origin.height / menu.offsetHeight || 1;
     menu.style.maxWidth = `${Math.max(0, bounds.right - bounds.left) / scaleX}px`;
-    const desiredHeight = Math.min(menu.scrollHeight * scaleY, maxHeight * scaleY);
-    const below = Math.max(0, bounds.bottom - anchor.bottom - 4);
-    const above = Math.max(0, anchor.top - bounds.top - 4);
-    // Choose direction by available space, not candidate count, so typing does not flip the list.
-    const placeBelow = below >= Math.min(maxHeight * scaleY, 160) || below >= above;
-    menu.style.maxHeight = `${Math.min(desiredHeight, placeBelow ? below : above) / scaleY}px`;
-    const size = menu.getBoundingClientRect();
-    const left = Math.max(bounds.left, Math.min(anchor.left, bounds.right - size.width));
-    const top = Math.max(bounds.top, Math.min(placeBelow ? anchor.bottom + 4 : anchor.top - size.height - 4, bounds.bottom - size.height));
-    menu.style.left = `${(left - origin.left) / scaleX}px`;
-    menu.style.top = `${(top - origin.top) / scaleY}px`;
+    const borderHeight = menu.offsetHeight - menu.clientHeight;
+    const desiredHeight = Math.min((menu.scrollHeight + borderHeight) * scaleY, maxHeight * scaleY);
+    const avoid = avoidElements
+        .filter((element) => element.ownerDocument === menu.ownerDocument && element.isConnected)
+        .map((element) => element.getBoundingClientRect())
+        .filter((rect) => rect.width > 0 && rect.height > 0);
+    const placement = mathMenuPlacement(bounds, anchor, menu.getBoundingClientRect().width, desiredHeight, maxHeight * scaleY, avoid);
+    menu.style.maxHeight = `${placement.height / scaleY}px`;
+    menu.style.left = `${(placement.left - origin.left) / scaleX}px`;
+    menu.style.top = `${(placement.top - origin.top) / scaleY}px`;
 }
-//# sourceMappingURL=menu-position.js.map

package/dist/dom/presentation-controls.d.ts

@@ -0,0 +1,4 @@
+import { type MathPresentationChange } from '../presentation.js';
+import { type MathState, type StructureKind } from '../model.js';
+import { type MathLocale } from '../i18n.js';
+export declare function drawPresentationControls(host: HTMLElement, state: MathState, locale: MathLocale, onChange: (id: string, change: MathPresentationChange) => void, disabled?: boolean, kinds?: readonly StructureKind[]): void;

package/dist/dom/presentation-controls.js

@@ -0,0 +1,56 @@
+import { activePresentation, limitKinds } from '../presentation.js';
+import { fencePairs, fences } from '../fences.js';
+import { isGrid } from '../model.js';
+import { translate } from '../i18n.js';
+import { mathStructures } from '../suggestions.js';
+import { elementFactory } from './elements.js';
+export function drawPresentationControls(host, state, locale, onChange, disabled = false, kinds) {
+    host.replaceChildren();
+    const node = activePresentation(state);
+    host.hidden = !node;
+    if (!node || isGrid(node))
+        return;
+    const el = elementFactory(host.ownerDocument);
+    const t = (key) => translate(locale, key);
+    host.className = 'me-presentation-tools me-matrix-tools';
+    host.setAttribute('role', 'toolbar');
+    host.setAttribute('aria-label', t('presentation.title'));
+    const field = (key, values, value, change) => {
+        const label = el('label', '', t(key));
+        const select = el('select');
+        select.disabled = disabled;
+        select.setAttribute('aria-label', t(key));
+        select.dataset.presentation = key;
+        for (const item of values) {
+            const option = el('option', '', item.label);
+            option.value = item.value;
+            select.append(option);
+        }
+        select.value = value;
+        select.onchange = () => onChange(node.id, change(select.value));
+        label.append(select);
+        host.append(label);
+    };
+    if (fences(node))
+        field('presentation.fence', [
+            ...(node.type === 'fenced'
+                ? [{ value: 'fenced', label: `${fences(node)[0]} … ${fences(node)[1]}` }]
+                : []),
+            ...Object.keys(fencePairs)
+                .filter((type) => !kinds || kinds.includes(type))
+                .map((type) => ({
+                value: type,
+                label: t(mathStructures.find((item) => item.kind === type).label),
+            })),
+        ], node.type, (fence) => ({ fence }));
+    if (['fraction', 'binomial'].includes(node.type))
+        field('presentation.size', ['default', 'display', 'text'].map((value) => ({
+            value,
+            label: t(`presentation.${value === 'above-below' ? 'aboveBelow' : value}`),
+        })), node.mathStyle ?? 'default', (value) => ({ mathStyle: value }));
+    if (limitKinds.includes(node.type))
+        field('presentation.limits', ['default', 'above-below', 'side'].map((value) => ({
+            value,
+            label: t(`presentation.${value === 'above-below' ? 'aboveBelow' : value}`),
+        })), node.limits === undefined ? 'default' : node.limits ? 'above-below' : 'side', (value) => ({ limits: value }));
+}

package/dist/dom/quick-panel.d.ts

@@ -0,0 +1,12 @@
+import { type MathPreferences, type MathQuickItem } from '../preferences.js';
+import { type MathLocale } from '../i18n.js';
+/** Shared catalog UI for recent and pinned symbols/templates; no document storage. */
+export declare function mountQuickPanel(host: HTMLElement, options: {
+    locale: MathLocale;
+    preferences: MathPreferences;
+    allowedTemplates?: readonly string[];
+    onInsert(item: MathQuickItem): boolean;
+    onClose(): void;
+}): {
+    destroy(): void;
+};

package/dist/dom/quick-panel.js

@@ -0,0 +1,102 @@
+import { elementFactory } from './elements.js';
+import { mathQuickItems } from '../preferences.js';
+import { translate, mathLocaleAliases } from '../i18n.js';
+/** Shared catalog UI for recent and pinned symbols/templates; no document storage. */
+export function mountQuickPanel(host, options) {
+    const el = elementFactory(host.ownerDocument);
+    const t = (key) => translate(options.locale, key);
+    const panel = el('section', 'me-utility-panel me-quick-panel');
+    panel.setAttribute('aria-label', t('quick.title'));
+    const controls = el('div', 'me-utility-actions');
+    const filter = el('select');
+    filter.setAttribute('aria-label', t('quick.filter'));
+    for (const value of ['all', 'recent', 'favorites']) {
+        const option = el('option', '', t(`quick.${value}`));
+        option.value = value;
+        filter.append(option);
+    }
+    const search = el('input');
+    search.type = 'search';
+    search.setAttribute('aria-label', t('symbols.search'));
+    search.placeholder = t('symbols.search');
+    const close = el('button', '', t('common.close'));
+    close.type = 'button';
+    close.onclick = options.onClose;
+    controls.append(filter, search, close);
+    const grid = el('div', 'me-symbol-grid');
+    const empty = el('p', '', t('quick.empty'));
+    empty.setAttribute('role', 'status');
+    panel.append(controls, grid, empty);
+    host.append(panel);
+    const draw = () => {
+        const snapshot = options.preferences.getSnapshot();
+        const needle = search.value.trim().normalize('NFC').toLowerCase();
+        const selected = filter.value === 'recent'
+            ? snapshot.recent
+            : filter.value === 'favorites'
+                ? snapshot.favorites
+                : undefined;
+        const catalog = selected
+            ? selected.map((id) => mathQuickItems.find((item) => item.id === id))
+            : mathQuickItems;
+        const items = catalog.filter((item) => (!item.template ||
+            !options.allowedTemplates ||
+            options.allowedTemplates.includes(item.template)) &&
+            [
+                item.glyph,
+                item.id,
+                ...(item.aliases ?? []),
+                ...mathLocaleAliases(options.locale, item.id),
+                translate(options.locale, item.label, item.labelParameters),
+                translate('en', item.label),
+                translate('ko', item.label),
+            ].some((value) => value.normalize('NFC').toLowerCase().includes(needle)));
+        grid.replaceChildren();
+        empty.hidden = items.length > 0;
+        for (const item of items) {
+            const cell = el('div', 'me-quick-item');
+            const name = translate(options.locale, item.label, item.labelParameters);
+            const insert = el('button', '', `${item.glyph} ${name}`);
+            insert.type = 'button';
+            insert.dataset.quickItem = item.id;
+            insert.onclick = () => {
+                if (options.onInsert(item)) {
+                    options.preferences.record(item.id);
+                    options.onClose();
+                }
+            };
+            const favorite = el('button', '', snapshot.favorites.includes(item.id) ? '★' : '☆');
+            favorite.type = 'button';
+            favorite.dataset.favorite = item.id;
+            favorite.setAttribute('aria-label', `${t('quick.favorite')}: ${name}`);
+            favorite.setAttribute('aria-pressed', String(snapshot.favorites.includes(item.id)));
+            favorite.onclick = () => {
+                options.preferences.toggleFavorite(item.id);
+                const next = [...grid.querySelectorAll('[data-favorite]')].find((button) => button.dataset.favorite === item.id);
+                (next ?? search).focus();
+            };
+            cell.append(insert, favorite);
+            grid.append(cell);
+        }
+    };
+    search.oninput = draw;
+    filter.onchange = draw;
+    panel.addEventListener('keydown', (event) => {
+        event.stopPropagation();
+        if (event.key === 'Escape' && !event.isComposing) {
+            event.preventDefault();
+            options.onClose();
+        }
+    });
+    for (const name of ['copy', 'cut', 'paste', 'input', 'beforeinput', 'keyup'])
+        panel.addEventListener(name, (event) => event.stopPropagation());
+    const unsubscribe = options.preferences.subscribe(draw);
+    draw();
+    search.focus();
+    return {
+        destroy() {
+            unsubscribe();
+            panel.remove();
+        },
+    };
+}

package/dist/dom/selection.d.ts

@@ -0,0 +1,29 @@
+import type { MathPoint, MathRange } from '../range.js';
+/** Dismissal survives repeated native select/keyup events, but not a new selection. */
+export declare function createSelectionMenuState(): {
+    sync(range: MathRange | undefined): boolean;
+    dismiss(): boolean;
+    reset(): void;
+};
+export interface SelectionBounds {
+    start: number;
+    end: number;
+}
+/** Intersect a row selection with one text run without expanding partial endpoints. */
+export declare function textSelectionBounds(length: number, rowOffset: number, selection: SelectionBounds | undefined, inherited?: boolean): SelectionBounds | undefined;
+export interface MathPointerSelection {
+    point: MathPoint;
+    pointerId: number;
+    x: number;
+    y: number;
+    moved: boolean;
+    input?: HTMLInputElement;
+}
+/** Shift-drag extends the native anchor, which is the end of a backward selection. */
+export declare function nativeSelectionAnchor(input: Pick<HTMLInputElement, 'selectionStart' | 'selectionEnd' | 'selectionDirection'>): number | null;
+/** Native input selection owns its rectangle until the drag crosses its edge. */
+export declare function extendsMathSelection(drag: Pick<MathPointerSelection, 'pointerId' | 'x' | 'y' | 'moved'>, pointer: {
+    pointerId: number;
+    clientX: number;
+    clientY: number;
+}, inputBounds?: Pick<DOMRect, 'left' | 'right' | 'top' | 'bottom'>): boolean;

package/dist/dom/selection.js

@@ -0,0 +1,53 @@
+/** Dismissal survives repeated native select/keyup events, but not a new selection. */
+export function createSelectionMenuState() {
+    let current = '';
+    let dismissed = false;
+    return {
+        sync(range) {
+            const key = range
+                ? JSON.stringify([range.anchor.id, range.anchor.offset, range.focus.id, range.focus.offset])
+                : '';
+            if (key !== current)
+                dismissed = false;
+            current = key;
+            return !!key && !dismissed;
+        },
+        dismiss() {
+            if (!current || dismissed)
+                return false;
+            dismissed = true;
+            return true;
+        },
+        reset() {
+            dismissed = false;
+        },
+    };
+}
+/** Intersect a row selection with one text run without expanding partial endpoints. */
+export function textSelectionBounds(length, rowOffset, selection, inherited = false) {
+    if (inherited)
+        return { start: 0, end: length };
+    if (!selection)
+        return;
+    const start = Math.max(0, selection.start - rowOffset);
+    const end = Math.min(length, selection.end - rowOffset);
+    return start < end ? { start, end } : undefined;
+}
+/** Shift-drag extends the native anchor, which is the end of a backward selection. */
+export function nativeSelectionAnchor(input) {
+    return input.selectionDirection === 'backward' ? input.selectionEnd : input.selectionStart;
+}
+/** Native input selection owns its rectangle until the drag crosses its edge. */
+export function extendsMathSelection(drag, pointer, inputBounds) {
+    if (drag.pointerId !== pointer.pointerId)
+        return false;
+    if (drag.moved)
+        return true;
+    if (Math.hypot(pointer.clientX - drag.x, pointer.clientY - drag.y) < 4)
+        return false;
+    return (!inputBounds ||
+        pointer.clientX < inputBounds.left ||
+        pointer.clientX > inputBounds.right ||
+        pointer.clientY < inputBounds.top ||
+        pointer.clientY > inputBounds.bottom);
+}

package/dist/dom/symbol-panel.d.ts

@@ -0,0 +1,9 @@
+import { type MathLocale } from '../i18n.js';
+/** Native, nonmodal symbol discovery. The panel stays inside its toolbar's containment boundary. */
+export declare function mountSymbolPanel(host: HTMLElement, options: {
+    locale: MathLocale;
+    onInsert(glyph: string): void;
+    onClose(): void;
+}): {
+    destroy(): void;
+};