@pie-lib/math-input-mathlive 1.1.5-beta.8 → 2.0.1-next.20261107131445

package/dist/mf/index.d.ts

@@ -0,0 +1,4 @@
+import Input from './input.js';
+import Static from './static.js';
+import CommonMqStyles, { commonMathLiveStyles, commonKeyboardStyles, commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, rootIndexStyles, parallelStyles, supsubStyles, placeholderStyles } from './common-styles.js';
+export { Input, Static, CommonMqStyles, commonMathLiveStyles, commonKeyboardStyles, commonMqFontStyles, commonMqKeyboardStyles, longdivStyles, rootIndexStyles, parallelStyles, supsubStyles, placeholderStyles, };

package/dist/mf/index.js

@@ -0,0 +1,21 @@
+import { __exportAll as e } from "../_virtual/_rolldown/runtime.js";
+import t, { commonKeyboardStyles as n, commonMathLiveStyles as r, commonMqFontStyles as i, commonMqKeyboardStyles as a, longdivStyles as o, parallelStyles as s, placeholderStyles as c, rootIndexStyles as l, supsubStyles as u } from "./common-styles.js";
+import { Input as d } from "./input.js";
+import f from "./static.js";
+//#region src/mf/index.ts
+var p = /* @__PURE__ */ e({
+	CommonMqStyles: () => t,
+	Input: () => d,
+	Static: () => f,
+	commonKeyboardStyles: () => n,
+	commonMathLiveStyles: () => r,
+	commonMqFontStyles: () => i,
+	commonMqKeyboardStyles: () => a,
+	longdivStyles: () => o,
+	parallelStyles: () => s,
+	placeholderStyles: () => c,
+	rootIndexStyles: () => l,
+	supsubStyles: () => u
+});
+//#endregion
+export { t as CommonMqStyles, d as Input, f as Static, n as commonKeyboardStyles, r as commonMathLiveStyles, i as commonMqFontStyles, a as commonMqKeyboardStyles, o as longdivStyles, p as mf_exports, s as parallelStyles, c as placeholderStyles, l as rootIndexStyles, u as supsubStyles };

package/dist/mf/input.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * Editable math field. Drop-in replacement for @pie-lib/math-input's `mq.Input`.
+ *
+ * Keeps the same imperative surface used by MathInput's keypad
+ * (`write`, `command`, `keystroke`, `clear`, `focus`, `blur`) so callers do not
+ * change, and the same `latex` / `onChange` props.
+ */
+export declare class Input extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        latex: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        language: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        readOnly: PropTypes.Requireable<boolean>;
+        innerRef: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    onInputEdit: () => void;
+    /** Current latex, in stored (MathQuill-compatible) form. */
+    latex(): any;
+    /**
+     * The underlying `<math-field>` element, or undefined until MathLive has
+     * finished loading. Exposed for callers that need the real element.
+     *
+     * NOTE: this is NOT a MathQuill field. Code written against
+     * `@pie-lib/math-input` often did `input.mathField.latex()`; that shape is
+     * provided by `mqCompat` below, and `latex()` on this component is the
+     * supported replacement.
+     */
+    get element(): any;
+    /**
+     * MathQuill-shaped facade, so existing `input.mathField.latex()` /
+     * `.el()` call sites keep working instead of throwing. Only the members that
+     * consumers actually used are provided; MathQuill internals such as
+     * `__controller` have no MathLive equivalent and are deliberately absent.
+     */
+    get mqCompat(): {
+        latex: (v: any) => any;
+        el: () => any;
+        focus: () => void;
+        blur: () => void;
+    };
+    /** Programmatically replace the content. */
+    setLatex(v: any): void;
+    clear(): string;
+    /**
+     * Join a mixed number that was typed with a space (PD-1858).
+     *
+     * Typing `1`, space, `2`, `/` gives `1\ \frac{2}{}`: `/` takes only the digits
+     * after the space as the numerator. The whole number belongs right next to
+     * the fraction, so the space is removed, keeping the caret in the empty
+     * denominator.
+     *
+     * @returns {boolean} whether the latex changed
+     */
+    joinMixedNumber(): boolean;
+    blur(): void;
+    focus(): void;
+    /**
+     * MathQuill `cmd()` equivalent.
+     *
+     * Callers pass MathQuill command names (`'\\frac'`, `'\\sqrt'`, `'^'`, or an
+     * array of them). Those must be expanded into latex with `#?` placeholders,
+     * otherwise inserting a bare `\frac` produces no editable slots.
+     */
+    command(v: any): any;
+    /**
+     * MathQuill `keystroke()` equivalent.
+     *
+     * Accepts MathQuill keystroke names (`'Left'`, `'Right'`, `'Backspace'`) as
+     * the keypad emits them, and passes anything else through as a MathLive
+     * selector.
+     */
+    keystroke(v: any): any;
+    /** MathQuill `write()` equivalent. Accepts an array, as `cmd()` did. */
+    write(v: any): any;
+    /**
+     * Enter must not insert a line break: math input is single-expression, and
+     * the MathQuill version swallowed charCode 13 for the same reason. Newlines
+     * are authored explicitly through the newLine embed, not the Enter key.
+     */
+    onKeyDown: (event: any) => void;
+    render(): React.JSX.Element;
+}
+export default Input;

package/dist/mf/input.js

@@ -0,0 +1,127 @@
+import { KEYSTROKES as e, fromMathLive as t, keyToAction as n, toMathLive as r } from "../latex-bridge.js";
+import { trackLongDivision as i } from "../longdiv.js";
+import { applyShadowStyles as a, createMathField as o, loadMathLive as s, trackPlaceholderCaret as c } from "../mathlive-instance.js";
+import { describeMathField as l, labelMathField as u } from "./field-label.js";
+import { trackWholeAtomSelection as d } from "../selection.js";
+import f from "react";
+import p from "prop-types";
+import { styled as m } from "@mui/material/styles";
+import h from "debug";
+import { jsx as g } from "react/jsx-runtime";
+//#region src/mf/input.tsx
+var _ = h("pie-lib:math-input-mathlive:input"), v = /([0-9])\\ (\\frac\{[^{}]*\}\{(?:\\placeholder\{\})?\})/, y = m("span")({
+	display: "inline-block",
+	"& math-field": {
+		display: "block",
+		width: "100%"
+	},
+	"& math-field::part(virtual-keyboard-toggle)": { display: "none" },
+	"& math-field::part(menu-toggle)": { display: "none" }
+}), b = class extends f.Component {
+	static propTypes = {
+		className: p.string,
+		latex: p.string,
+		onChange: p.func,
+		onClick: p.func,
+		onFocus: p.func,
+		onBlur: p.func,
+		language: p.string,
+		ariaDescribedBy: p.string,
+		readOnly: p.bool,
+		innerRef: p.func
+	};
+	constructor(e) {
+		super(e), this.holderRef = f.createRef(), this.lastEmitted = void 0;
+	}
+	async componentDidMount() {
+		let e = this.mountGeneration = (this.mountGeneration || 0) + 1, t = await s();
+		e === this.mountGeneration && t?.MathfieldElement && this.holderRef.current && !this.mathField && (this.mathField = o(t), u(this.mathField, this.props.language), l(this.mathField, this.props.ariaDescribedBy), this.mathField.value = r(this.props.latex || ""), this.props.readOnly && (this.mathField.readOnly = !0), this.mathField.mathVirtualKeyboardPolicy = "manual", this.mathField.mathModeSpace = "\\ ", this.mathField.smartSuperscript = !1, a(this.mathField), this.untrackCaret = c(this.mathField), this.untrackSelection = d(this.mathField), this.untrackLongDivision = i(this.mathField), this.mathField.addEventListener("input", this.onInputEdit), this.holderRef.current.replaceChildren(this.mathField), u(this.mathField, this.props.language), this.props.innerRef && this.props.innerRef(this), this.pendingFocus && (this.pendingFocus = !1, this.mathField.focus()));
+	}
+	componentDidUpdate(e) {
+		if (!this.mathField) return;
+		let { latex: t, readOnly: n, language: i } = this.props;
+		if (i !== e.language && u(this.mathField, i), this.props.ariaDescribedBy !== e.ariaDescribedBy && l(this.mathField, this.props.ariaDescribedBy), n !== e.readOnly && (this.mathField.readOnly = !!n), t != null && t !== this.lastEmitted) {
+			let e = r(t);
+			e !== this.mathField.value && (this.mathField.value = e);
+		}
+	}
+	componentWillUnmount() {
+		this.mountGeneration = (this.mountGeneration || 0) + 1, this.untrackCaret &&= (this.untrackCaret(), void 0), this.untrackSelection &&= (this.untrackSelection(), void 0), this.untrackLongDivision &&= (this.untrackLongDivision(), void 0), this.mathField &&= (this.mathField.removeEventListener("input", this.onInputEdit), this.mathField.remove(), void 0), this.props.innerRef && this.props.innerRef(null);
+	}
+	onInputEdit = () => {
+		let { onChange: e } = this.props;
+		if (!this.mathField) return;
+		let n = t(this.mathField.getValue("latex"));
+		this.lastEmitted = n, e && e(n);
+	};
+	latex() {
+		return this.mathField ? t(this.mathField.getValue("latex")) : "";
+	}
+	get element() {
+		return this.mathField;
+	}
+	get mqCompat() {
+		return {
+			latex: (e) => e === void 0 ? this.latex() : (this.setLatex(e), e),
+			el: () => this.mathField,
+			focus: () => this.focus(),
+			blur: () => this.blur()
+		};
+	}
+	setLatex(e) {
+		this.mathField && (this.mathField.value = r(e || ""));
+	}
+	clear() {
+		return this.mathField && (this.mathField.value = "", this.onInputEdit()), "";
+	}
+	joinMixedNumber() {
+		if (!this.mathField) return !1;
+		let e = this.mathField.getValue("latex"), t = e.replace(v, "$1$2");
+		if (t === e) return !1;
+		let { ranges: n, direction: r } = this.mathField.selection;
+		return this.mathField.value = t, this.mathField.selection = {
+			ranges: n.map(([e, t]) => [e - 1, t - 1]),
+			direction: r
+		}, this.onInputEdit(), !0;
+	}
+	blur() {
+		_("blur mathfield"), this.pendingFocus = !1, this.mathField && this.mathField.blur();
+	}
+	focus() {
+		_("focus mathfield..."), this.mathField ? this.mathField.focus() : this.pendingFocus = !0;
+	}
+	command(e) {
+		if (_("command: ", e), !this.mathField) return "";
+		let t = n({ command: e });
+		return t && this.mathField.insert(t.value, { focus: !0 }), this.mathField.focus(), this.latex();
+	}
+	keystroke(t) {
+		if (_("keystroke: ", t), !this.mathField) return "";
+		let n = e[t] || t;
+		try {
+			this.mathField.executeCommand(n);
+		} catch (e) {
+			_("unknown keystroke/selector \"%s\": %s", t, e && e.message);
+		}
+		return this.mathField.focus(), this.latex();
+	}
+	write(e) {
+		return _("write: ", e), this.mathField ? ((Array.isArray(e) ? e : [e]).forEach((e) => this.mathField.insert(e, { focus: !0 })), this.mathField.focus(), this.latex()) : "";
+	}
+	onKeyDown = (e) => {
+		e.key === "Enter" && e.preventDefault();
+	};
+	render() {
+		let { className: e, onFocus: t, onBlur: n, onClick: r } = this.props;
+		return /* @__PURE__ */ g(y, {
+			className: e,
+			onFocus: t,
+			onBlur: n,
+			onClick: r,
+			onKeyDown: this.onKeyDown,
+			ref: this.holderRef
+		});
+	}
+};
+//#endregion
+export { b as Input, b as default };

package/dist/mf/static.d.ts

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * Static math. Drop-in replacement for @pie-lib/math-input's `mq.Static`.
+ *
+ * Two modes, chosen automatically:
+ *
+ *  - **display** (no answer blocks in the latex): rendered with
+ *    `convertLatexToMarkup`. No mathfield instance, so it is cheap enough for
+ *    keypad labels - the old implementation created a full MathQuill
+ *    StaticMath per button.
+ *
+ *  - **interactive** (latex contains `\MathQuillMathField[..]{}` /
+ *    `\placeholder[..]{}`): a read-only `<math-field>` whose placeholders stay
+ *    editable. Sub-field values are surfaced through the prompts API, replacing
+ *    MathQuill's `innerFields`.
+ */
+export default class Static extends React.Component {
+    static propTypes: {
+        latex: PropTypes.Validator<string>;
+        className: PropTypes.Requireable<string>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        language: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        getFieldName: PropTypes.Requireable<(...args: any[]) => any>;
+        onSubFieldChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onSubFieldFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        setInput: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        getFieldName: () => void;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    /** Render display markup, or mount a live field when the latex has answer blocks. */
+    mount(): Promise<void>;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    /**
+     * Put the caret at the start of the first answer block, without focusing.
+     *
+     * Setting `value` leaves the caret at the end, after every block. When the field
+     * then takes focus from Tab, MathLive looks for the next block after the caret,
+     * finds none, and moves focus on to the next element on the page: Tab skipped
+     * the field. With the caret in a block, MathLive leaves focus where it is.
+     */
+    parkCaret(): void;
+    /**
+     * Put answers from the latex prop into their prompts, leaving alone any the
+     * field reported itself: the prop is usually the parent echoing the last
+     * `onSubFieldChange`, and reassigning the field moves the caret out of the
+     * prompt, so the next keys typed would be lost.
+     */
+    syncPrompts(): void;
+    componentWillUnmount(): void;
+    /** Remove the live field, if any, and invalidate any mount still awaiting the MathLive load. */
+    unmountField(): void;
+    /**
+     * Off-screen aria-live region, ported from @pie-lib/math-input's Static.
+     *
+     * MathLive has its own accessibility layer, but it does not announce that
+     * typed input was converted into a math symbol, which screen-reader users
+     * relied on in the MathQuill implementation.
+     */
+    createLiveRegion: () => void;
+    removeLiveRegion: () => void;
+    announce: (message: any) => void;
+    onKeyDown: (event: any) => void;
+    /**
+     * Announce when typed input became a math symbol. The MathQuill version
+     * inferred this by counting braces; here a prompt whose latex grew by more
+     * than the single character typed means a command was expanded.
+     */
+    announceConversion: (next: any) => void;
+    /** Does this latex contain answer blocks? */
+    isInteractive(): boolean;
+    renderMarkup(): void;
+    /** MathQuill's `innerFields` equivalent, keyed by prompt id. */
+    values(): {};
+    /** The whole field's latex, in stored form. MathQuill's `mathField.latex()`. */
+    latex(): string;
+    /** Put the selection inside prompt `id`, unless it is there already, so edits land in it. */
+    selectPrompt(id: any): void;
+    /**
+     * A MathQuill-inner-field-like handle for a prompt.
+     *
+     * The old API handed callers a MathQuill field object: consumers called
+     * `field.latex()` on it, and drove it from a keypad with `write()`, `cmd()`,
+     * `keystroke()` and `clear()`. There is no equivalent object in MathLive -
+     * prompts are addressed by id - so this adapter exposes those parts. Edits go
+     * through the field, which reports them with its `input` event as typing does.
+     */
+    promptHandle(id: any): {
+        id: any;
+        write: (value: any) => void;
+        cmd: (value: any) => void;
+        keystroke: (value: any) => void;
+        clear: () => void;
+        focus: () => void;
+        el: () => any;
+        latex: (value: any) => any;
+    };
+    /** All prompt handles, the analogue of `mathField.innerFields`. */
+    get innerFields(): any;
+    onPromptInput: () => void;
+    onPointerDown: () => void;
+    onPromptFocus: () => void;
+    onSelectionChange: () => void;
+    /**
+     * Tell the parent which answer block has the caret, through `setInput` and
+     * `onSubFieldFocus`, so keypad input goes to that block.
+     *
+     * @param {boolean} always report even when it is the block reported last
+     */
+    reportFocusedPrompt(always: any): void;
+    /** Where the selection starts, which is the caret when nothing is selected. */
+    caretOffset(): any;
+    /** The id of the prompt whose range contains `position`, if any. */
+    promptContaining(position: any): any;
+    /**
+     * Put a blinking caret inside an answer block.
+     *
+     * MathLive only makes the caret visible while the field element carries the
+     * `ML__focused` class, and it adds that class during a *render*, gated on
+     * `isSelectionEditable && hasFocus()`. In a read-only field only prompt
+     * interiors are editable, so the two things both have to be true:
+     *
+     *  - the selection must sit inside a prompt, and
+     *  - a render must run afterwards.
+     *
+     * Assigning `selection` satisfies the first but not the second - it updates
+     * the model without re-rendering, so the class stays off and the caret span
+     * remains `visibility: hidden`. Executing any command does trigger the
+     * render, and `scrollIntoView` is the one with no other effect: it keeps the
+     * caret on screen, which the preceding `focus()` already does anyway.
+     *
+     * @param {string} [id] prompt to focus; defaults to the first one
+     */
+    focusPrompt(id: any): void;
+    focus(): void;
+    blur(): void;
+    render(): React.JSX.Element;
+}

package/dist/mf/static.js

@@ -0,0 +1,230 @@
+import { KEYSTROKES as e, fieldIds as t, fieldTemplate as n, fieldValues as r, fillFields as i, fromMathLive as a, keyToAction as o, toMathLive as s } from "../latex-bridge.js";
+import { parallelStyles as c, placeholderStyles as l, rootIndexStyles as u } from "./common-styles.js";
+import { fixLongDivisionWhenReady as d, trackLongDivision as f } from "../longdiv.js";
+import { applyShadowStyles as p, createMathField as m, latexToMarkup as h, latexToMathMl as g, loadMathLive as _, trackPlaceholderCaret as v } from "../mathlive-instance.js";
+import { describeMathField as y, labelMathField as b } from "./field-label.js";
+import x from "react";
+import S from "prop-types";
+import { styled as C } from "@mui/material/styles";
+import w from "debug";
+import { jsx as T } from "react/jsx-runtime";
+//#region src/mf/static.tsx
+var E = w("pie-lib:math-input-mathlive:static"), D = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0", O = C("span")({
+	display: "inline-block",
+	...l,
+	...u,
+	...c,
+	"& math-field": {
+		display: "inline-block",
+		border: "none",
+		background: "transparent"
+	},
+	"& math-field::part(virtual-keyboard-toggle)": { display: "none" },
+	"& math-field::part(menu-toggle)": { display: "none" }
+}), k = class extends x.Component {
+	static propTypes = {
+		latex: S.string.isRequired,
+		className: S.string,
+		onFocus: S.func,
+		onBlur: S.func,
+		language: S.string,
+		ariaDescribedBy: S.string,
+		getFieldName: S.func,
+		onSubFieldChange: S.func,
+		onSubFieldFocus: S.func,
+		setInput: S.func
+	};
+	static defaultProps = { getFieldName: () => {} };
+	constructor(e) {
+		super(e), this.holderRef = x.createRef(), this.state = { markup: "" }, this.promptValues = {};
+	}
+	componentDidMount() {
+		this.mount();
+	}
+	async mount() {
+		let e = this.mountGeneration = (this.mountGeneration || 0) + 1;
+		if (this.interactive = this.isInteractive(), !this.interactive) {
+			await _(), e === this.mountGeneration && this.renderMarkup();
+			return;
+		}
+		let t = await _();
+		e === this.mountGeneration && t?.MathfieldElement && this.holderRef.current && !this.mathField && (this.mathField = m(t), b(this.mathField, this.props.language), y(this.mathField, this.props.ariaDescribedBy), this.mathField.readOnly = !0, this.mathField.mathVirtualKeyboardPolicy = "manual", this.mathField.mathModeSpace = "\\ ", this.mathField.smartSuperscript = !1, this.mathField.value = s(this.props.latex), p(this.mathField), this.untrackCaret = v(this.mathField), this.untrackLongDivision = f(this.mathField), this.mathField.addEventListener("input", this.onPromptInput), this.mathField.addEventListener("pointerdown", this.onPointerDown, !0), this.mathField.addEventListener("focusin", this.onPromptFocus), this.mathField.addEventListener("selection-change", this.onSelectionChange), this.mathField.addEventListener("keydown", this.onKeyDown), this.holderRef.current.replaceChildren(this.mathField), b(this.mathField, this.props.language), this.parkCaret(), this.createLiveRegion());
+	}
+	componentDidUpdate(e, t) {
+		!this.mathField && this.state.markup !== (t && t.markup) && d(this.holderRef.current), this.mathField && e.language !== this.props.language && b(this.mathField, this.props.language), this.mathField && e.ariaDescribedBy !== this.props.ariaDescribedBy && y(this.mathField, this.props.ariaDescribedBy), e.latex !== this.props.latex && (this.isInteractive() === this.interactive ? this.mathField ? n(this.props.latex) === n(e.latex) ? this.syncPrompts() : (this.mathField.value = s(this.props.latex), this.parkCaret()) : this.renderMarkup() : (this.unmountField(), this.setState({ markup: "" }), this.mount()));
+	}
+	parkCaret() {
+		if (!this.mathField || this.mathField.hasFocus?.()) return;
+		let [e] = this.mathField.getPrompts?.() || [], t = e && this.mathField.getPromptRange(e);
+		t && (this.mathField.selection = { ranges: [[t[0], t[0]]] });
+	}
+	syncPrompts() {
+		let e = r(this.props.latex);
+		Object.keys(e).forEach((t) => {
+			let n = e[t];
+			n !== this.promptValues[t] && n !== a(this.mathField.getPromptValue(t)) && (this.mathField.setPromptValue(t, s(n), {}), this.promptValues[t] = n);
+		});
+	}
+	componentWillUnmount() {
+		this.unmountField(), this.removeLiveRegion();
+	}
+	unmountField() {
+		this.mountGeneration = (this.mountGeneration || 0) + 1, this.untrackCaret &&= (this.untrackCaret(), void 0), this.untrackLongDivision &&= (this.untrackLongDivision(), void 0), this.mathField &&= (this.mathField.removeEventListener("input", this.onPromptInput), this.mathField.removeEventListener("pointerdown", this.onPointerDown, !0), this.mathField.removeEventListener("focusin", this.onPromptFocus), this.mathField.removeEventListener("selection-change", this.onSelectionChange), this.mathField.removeEventListener("keydown", this.onKeyDown), this.mathField.remove(), void 0), this.promptValues = {}, this.focusedPrompt = void 0;
+	}
+	createLiveRegion = () => {
+		typeof document > "u" || this.liveRegion || (this.liveRegion = document.createElement("div"), Object.assign(this.liveRegion.style, {
+			position: "absolute",
+			width: "1px",
+			height: "1px",
+			marginTop: "-1px",
+			clip: "rect(1px, 1px, 1px, 1px)",
+			overflow: "hidden"
+		}), this.liveRegion.setAttribute("aria-live", "polite"), this.liveRegion.setAttribute("aria-atomic", "true"), document.body.appendChild(this.liveRegion));
+	};
+	removeLiveRegion = () => {
+		this.liveRegion && this.liveRegion.parentNode && this.liveRegion.parentNode.removeChild(this.liveRegion), this.liveRegion = void 0;
+	};
+	announce = (e) => {
+		this.liveRegion && (this.liveRegion.textContent = e, clearTimeout(this.announceTimeout), this.announceTimeout = setTimeout(() => {
+			this.liveRegion && (this.liveRegion.textContent = "");
+		}, 500));
+	};
+	onKeyDown = (e) => {
+		this.isDeleting = e?.key === "Backspace" || e?.key === "Delete";
+	};
+	announceConversion = (e) => {
+		this.isDeleting ? this.isDeleting = !1 : Object.keys(e).some((t) => {
+			let n = this.promptValues[t] || "", r = e[t] || "";
+			return r.length > n.length + 1 && /\\/.test(r.slice(n.length));
+		}) && this.announce("Converted to math symbol");
+	};
+	isInteractive() {
+		let e = this.props.latex || "";
+		return t(e).length > 0 || e.indexOf("\\placeholder") !== -1;
+	}
+	renderMarkup() {
+		let e = h(this.props.latex), t = e && g(this.props.latex), n = t ? `<span aria-hidden="true">${e}</span><span style="${D}">${t}</span>` : e;
+		n !== this.state.markup && this.setState({ markup: n });
+	}
+	values() {
+		if (!this.mathField) return {};
+		let e = {};
+		return (this.mathField.getPrompts() || []).forEach((t) => {
+			e[t] = a(this.mathField.getPromptValue(t));
+		}), e;
+	}
+	latex() {
+		return this.mathField ? i(this.props.latex, this.values()) : "";
+	}
+	selectPrompt(e) {
+		this.promptContaining(this.mathField.position) !== e && this.focusPrompt(e);
+	}
+	promptHandle(t) {
+		let n = (e) => {
+			this.mathField && (this.selectPrompt(t), e(this.mathField));
+		};
+		return {
+			id: t,
+			write: (e) => n((t) => (Array.isArray(e) ? e : [e]).forEach((e) => t.insert(e, { focus: !0 }))),
+			cmd: (e) => n((t) => {
+				let n = o({ command: e });
+				n && t.insert(n.value, { focus: !0 });
+			}),
+			keystroke: (t) => n((n) => {
+				try {
+					n.executeCommand(e[t] || t);
+				} catch (e) {
+					E("unknown keystroke/selector \"%s\": %s", t, e && e.message);
+				}
+			}),
+			clear: () => n((e) => {
+				e.setPromptValue(t, "", {}), this.onPromptInput();
+			}),
+			focus: () => {
+				this.mathField && (this.mathField.focus(), this.selectPrompt(t));
+			},
+			el: () => this.mathField,
+			latex: (e) => this.mathField ? e === void 0 ? a(this.mathField.getPromptValue(t)) : (this.mathField.setPromptValue(t, s(e), {}), e) : ""
+		};
+	}
+	get innerFields() {
+		return this.mathField ? (this.mathField.getPrompts() || []).map((e) => this.promptHandle(e)) : [];
+	}
+	onPromptInput = () => {
+		let { onSubFieldChange: e, getFieldName: t } = this.props;
+		if (!this.mathField) return;
+		let n = this.values();
+		if (this.announceConversion(n), !e) {
+			this.promptValues = n;
+			return;
+		}
+		let r = this.innerFields;
+		Object.keys(n).forEach((i) => {
+			if (n[i] === this.promptValues[i]) return;
+			let a = t(this.promptHandle(i), r) || i;
+			e(a, n[i]);
+		}), this.promptValues = n;
+	};
+	onPointerDown = () => {
+		this.pointerFocus = !0;
+	};
+	onPromptFocus = () => {
+		let e = this.pointerFocus;
+		this.pointerFocus = !1, this.mathField && (!e && !this.promptContaining(this.caretOffset()) && this.focusPrompt(), this.reportFocusedPrompt(!0));
+	};
+	onSelectionChange = () => {
+		this.mathField?.hasFocus?.() && this.reportFocusedPrompt(!1);
+	};
+	reportFocusedPrompt(e) {
+		let { onSubFieldFocus: t, getFieldName: n } = this.props;
+		if (this.mathField && t) try {
+			let r = this.promptContaining(this.caretOffset());
+			if (!r || !e && r === this.focusedPrompt) return;
+			this.focusedPrompt = r;
+			let i = this.promptHandle(r), a = n(i, this.innerFields) || r;
+			this.props.setInput && this.props.setInput(i), t(a, i);
+		} catch (e) {
+			E("error resolving focused prompt: %s", e.message);
+		}
+	}
+	caretOffset() {
+		let e = this.mathField?.selection;
+		return e?.ranges?.length ? e.ranges[0][0] : this.mathField?.position;
+	}
+	promptContaining(e) {
+		if (this.mathField && typeof e == "number") return (this.mathField.getPrompts() || []).find((t) => {
+			let n = this.mathField.getPromptRange(t);
+			return n && e >= n[0] && e <= n[1];
+		});
+	}
+	focusPrompt(e) {
+		if (!this.mathField) return;
+		let t = this.mathField.getPrompts() || [], n = e && t.indexOf(e) !== -1 ? e : t[0];
+		if (!n) return;
+		let r = this.mathField.getPromptRange(n);
+		r && (this.mathField.selection = { ranges: [[r[0], r[0]]] }, typeof this.mathField.executeCommand == "function" && this.mathField.executeCommand("scrollIntoView"));
+	}
+	focus() {
+		this.mathField && (this.mathField.focus(), this.promptContaining(this.mathField.position) || this.focusPrompt());
+	}
+	blur() {
+		this.mathField && this.mathField.blur();
+	}
+	render() {
+		let { className: e, onFocus: t, onBlur: n } = this.props, { markup: r } = this.state;
+		return this.mathField || this.isInteractive() ? /* @__PURE__ */ T(O, {
+			className: e,
+			onFocus: t,
+			onBlur: n,
+			ref: this.holderRef
+		}) : /* @__PURE__ */ T(O, {
+			className: e,
+			onFocus: t,
+			onBlur: n,
+			ref: this.holderRef,
+			dangerouslySetInnerHTML: { __html: r }
+		});
+	}
+};
+//#endregion
+export { k as default };

package/dist/selection.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Widen a selection so it covers whole atoms of a single parent.
+ *
+ * MathLive extends a selection over *flat offsets*, so Shift+Arrow walks into
+ * a fraction instead of over it: from before `2x` in `5x^2+2x+\frac{\pi}{2}-4`,
+ * five presses select `2x+` plus the `\pi` of the numerator, and copying gives
+ * `2x+\pi`. MathQuill treated a fraction (root, superscript...) as one unit,
+ * which is what authors expect.
+ *
+ * The tree is recovered from MathLive's public `getElementInfo(offset)`, where
+ * offset `i` describes the atom ending at caret position `i`:
+ *
+ *  - a composite atom (fraction, root, script) owns the offset right *after*
+ *    its children; the children are one level deeper;
+ *  - each branch (numerator, denominator, radicand) opens with an empty-latex
+ *    "start" atom.
+ *
+ * The rule: find the shallowest depth the selection touches, counting the caret
+ * it starts from. If the range crosses into a sibling branch at that depth, the
+ * real common parent is one level up. Then push both ends out of anything
+ * deeper. A script atom (`^2`) is kept with its base, since MathLive stores
+ * `x^2` as `x` followed by a separate `^2` atom.
+ *
+ * Pure, so it can be tested without a browser.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @param {function(number): {depth?: number, latex?: string}} info
+ * @param {number} lastOffset
+ * @returns {[number, number]} the widened range, start <= end
+ */
+export declare const expandRange: (start: any, end: any, info: any, lastOffset: any) => any[];
+/**
+ * Keep a mathfield's selection snapped to whole atoms (see {@link expandRange}).
+ *
+ * This fixes both what the user sees highlighted and what copy/cut put on the
+ * clipboard, since both come from the selection. The selection direction is
+ * preserved, so further Shift+Arrow presses keep extending the same end.
+ *
+ * @param {HTMLElement} mathField a MathLive `<math-field>`
+ * @returns {function|undefined} teardown, to call on unmount
+ */
+export declare const trackWholeAtomSelection: (mathField: any) => (() => any) | undefined;