@barocss/math-editor 0.2.0 → 0.4.0

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

@@ -1,3 +1,15 @@
+interface MenuRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** 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,82 @@
+/** 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 };
+    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 +93,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;
+};

package/dist/dom/symbol-panel.js

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

package/dist/dom/theme.d.ts

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

package/dist/dom/theme.js

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