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

package/README.md

@@ -1,144 +1,119 @@
 # @pie-lib/math-input-mathlive
 
-MathLive-backed math input. A drop-in alternative to `@pie-lib/math-input`, which
-is built on the `@pie-framework/mathquill` fork.
-
-Findings that motivated this package: [`../math-input/SPIKE-mathlive.md`](../math-input/SPIKE-mathlive.md).
+MathLive-backed math input: a drop-in alternative to `@pie-lib/math-input`, which is built on the
+`@pie-framework/mathquill` fork. `@pie-lib/math-toolbar`, `@pie-lib/editable-html-tip-tap`,
+`@pie-element/math-inline` and `@pie-element/math-templated` use it.
 
 ## Migrating
 
-The export surface mirrors `@pie-lib/math-input`, so in most cases only the
-import changes:
+The export surface mirrors `@pie-lib/math-input`, so most call sites change only the import:
 
 ```diff
 -import { mq, keys, keysForGrade, HorizontalKeypad, registerEmbed, applyStaticMath } from '@pie-lib/math-input';
 +import { mq, keys, keysForGrade, HorizontalKeypad, registerEmbed, applyStaticMath } from '@pie-lib/math-input-mathlive';
 ```
 
-The field wrappers are exported as `mf`, with `mq` kept as an alias so existing
-`mq.Input` / `mq.Static` call sites keep working.
+The field wrappers are exported as `mf`, with `mq` kept as an alias so `mq.Input` / `mq.Static` call
+sites keep working. Both take `language`, which names the field "Enter answer" in the item language,
+and `ariaDescribedBy`, the id of an element that describes it.
 
 ### Behaviour differences
 
-|                             | `@pie-lib/math-input`            | this package                                                                  |
-| --------------------------- | -------------------------------- | ----------------------------------------------------------------------------- |
-| `mq.Input`                  | MathQuill `MathField`            | `<math-field>`                                                                |
-| `mq.Static` (display)       | one `MQ.StaticMath` per instance | `convertLatexToMarkup`, no live instance                                      |
-| `mq.Static` (answer blocks) | `innerFields`                    | prompts API (`getPrompts`/`getPromptValue`)                                   |
-| `updateSpans()`             | patched MathQuill DOM            | **no-op** (kept for compatibility)                                            |
-| `registerEmbed`             | MathQuill embed plugin           | macro + `\htmlData` shim, see below                                           |
-| Loading                     | synchronous                      | **async** - `await loadMathLive()` before `applyStaticMath` / `latexToMarkup` |
+|                             | `@pie-lib/math-input`            | this package                                                          |
+| --------------------------- | -------------------------------- | --------------------------------------------------------------------- |
+| `mq.Input`                  | MathQuill `MathField`            | `<math-field>`                                                        |
+| `mq.Static` (display)       | one `MQ.StaticMath` per instance | `convertLatexToMarkup`, no live instance                              |
+| `mq.Static` (answer blocks) | `innerFields`                    | prompts API, through handles with `latex`, `write`, `cmd`, `keystroke`, `clear`, `focus` and `el` |
+| Whole static latex          | `mathField.latex()`              | `latex()` on the `mq.Static` instance                                 |
+| `updateSpans()`             | patched MathQuill DOM            | **no-op** (kept for compatibility)                                    |
+| `registerEmbed`             | MathQuill embed plugin           | macro + `\htmlData` shim, see below                                   |
+| Loading                     | synchronous                      | **async**: fields and static math fill in once MathLive has loaded    |
+
+MathLive's `input` event fires asynchronously, so `onChange` / `onSubFieldChange` run on the next
+task after an edit.
 
 ### Content model is preserved
 
-Stored latex keeps its MathQuill-era form, so items authored with either
-implementation stay readable and `@pie-lib/math-rendering` needs no change.
-Translation happens at the package boundary:
+Stored latex keeps its MathQuill-era form, so items authored with either implementation stay
+readable and MathJax rendering needs no change. Translation happens at the package boundary:
 
 | stored                      | in MathLive             |
 | --------------------------- | ----------------------- |
 | `\embed{newLine}[]`         | `\displaylines{… \\ …}` |
 | `\MathQuillMathField[id]{}` | `\placeholder[id]{}`    |
+| `\embed{answerBlock}[id]`   | `\answerBlock{id}`      |
+| `$`                         | `\$`                    |
+
+`\answerBlock{id}` is a built-in macro: a box labelled "Response", tagged `data-response-area`, that
+serialises back unchanged and deletes as one atom. To show a submitted answer in the same box, build
+the latex with `answerBlockLatex(id, answer)`, which tags it `data-answer-block` and its label
+`data-answer-block-index`. This replaces rendering an empty embed and calling `applyStaticMath` on
+a span inside it, which has no MathLive equivalent.
+
+A line break inside a group, such as an answer field holding several lines, becomes a one-column
+`array`, because `\displaylines` rows only work at the top level. `mq.Static`'s `latex()` rebuilds
+the stored latex from its `latex` prop with the current answers filled in, so everything outside
+the answers comes back exactly as stored.
 
 `toMathLive()` / `fromMathLive()` are exported if you need the conversion directly.
 
 ### `registerEmbed`
 
-Same signature, different mechanism - MathLive has no embed plugin system, so an
-embed becomes a macro that expands to real LaTeX, tagged with
-`\htmlData{embed=<name>}` so CSS can target `[data-embed="<name>"]` the way it
-used to target the embed's `htmlString`.
+Same signature, different mechanism. MathLive has no embed plugin system, so an embed becomes a
+macro that expands to real LaTeX, tagged with `\htmlData{embed=<name>}` so CSS can target
+`[data-embed="<name>"]`. `newLine` and `answerBlock` are handled natively, and registering them
+changes nothing. Any other name falls back to a `\placeholder{}` unless the factory returns
+`mathliveLatex`:
 
 ```js
-registerEmbed('answerBlock', () => ({
-  latex: () => '\\embed{answerBlock}[]',
-  mathliveLatex: '\\placeholder{}', // optional: control the expansion
+registerEmbed('myEmbed', () => ({
+  latex: () => '\\embed{myEmbed}[]',
+  mathliveLatex: '\\boxed{?}',
 }));
 ```
 
-`newLine` and `answerBlock` are handled natively. Any other name falls back to a
-`\placeholder{}` and logs a warning.
-
-**Limitation:** MathQuill's `htmlString` could inject an arbitrary DOM subtree.
-`\htmlData` only decorates MathLive's own output, so embeds that mounted a custom
-widget do not port and need a redesign (`mf.getElementInfo()` exposes per-element
-`bounds`/`id`/`data` if you need to overlay something).
+**Limitation:** MathQuill's `htmlString` could inject an arbitrary DOM subtree. `\htmlData` only
+decorates MathLive's own output, so an embed that mounted a custom widget needs a redesign.
 
 ## Notes
 
-- **Browser only.** MathLive registers custom elements; `loadMathLive()` returns
-  `undefined` during SSR and every consumer degrades gracefully. Import the
-  package client-side (see `packages/demo/pages/math-input-mathlive.js`).
-- **Bundle.** The editor is ~227KB gzip plus ~296KB of KaTeX fonts, so it is
-  loaded lazily via dynamic `import()`. Render-only consumers can use
-  `mathlive/ssr` (~111KB gzip) through `latexToMarkup`.
-- **Stylesheets: import both, once, in the host app.**
-
-  ```js
-  import 'mathlive/fonts.css'; // KaTeX @font-face rules
-  import 'mathlive/static.css'; // REQUIRED for convertLatexToMarkup output
-  ```
-
-  `static.css` is not optional. Keypad labels and `mf.Static` in display mode are
-  rendered with `convertLatexToMarkup`, whose output relies on
-  `ML__vlist` / `ML__strut` / `ML__base` / `ML__sqrt-sign` / `ML__pstrut` and on
-  `svg { position: absolute; width: 100% }`. Without the stylesheet, static math
-  renders misaligned and stretchy accents (`\overrightarrow`,
-  `\overleftrightarrow`, `\overarc`) expand without bound - a keypad button can
-  end up stretching across the viewport. The keypad defends against the worst of
-  this (`overflow: hidden` plus an svg rule on the label), but correct layout
-  still needs the real stylesheet.
-
-  Live `<math-field>` elements style themselves via shadow DOM and are unaffected.
-
-  On fonts specifically, `fonts.css` is the recommended route - no copied files,
-  no CDN:
-
-  The stylesheet's relative `url(fonts/*.woff2)` paths are resolved by your
-  bundler, so the fonts are emitted with the build and content-hashed. It also
-  sets `--ML__static-fonts`, which makes MathLive skip font fetching entirely.
-
-  This matters because MathLive's default `fontsDirectory` is the relative
-  `'./fonts/'`, which it resolves against its own script URL - empty under a
-  bundler, so `loadFonts` throws
-  `Failed to construct 'URL': Invalid base URL`. Importing the stylesheet avoids
-  that code path completely.
-
-  _Bundler caveat:_ a `url-loader`/`file-loader` rule matching `woff2` will
-  corrupt these fonts (it emits a JS module under a `.woff2` name). Exclude
-  mathlive from such rules - see `packages/demo/next.config.js`.
-
-  **Fonts are required, not cosmetic.** Some symbols are composed from Private
-  Use Area glyphs that exist only in the KaTeX fonts: `\neq` is U+E020 (a
-  negation slash) overlapped on `=`, and `\nsim` / `\ncong` are the same. With
-  no fonts the browser substitutes an arbitrary glyph for U+E020, so those keys
-  render as garbage rather than in a plainer face.
-
-  **Alternative** - serve the fonts yourself (a static path, or a CDN):
-
-  ```js
-  import { configureFonts } from '@pie-lib/math-input-mathlive';
-
-  configureFonts('/mathlive-fonts'); // before loadMathLive()
-  configureFonts('https://unpkg.com/mathlive@0.110.0/fonts'); // note: /fonts, /dist/fonts 404s
-  configureFonts(null); // opt out; \neq and friends will render incorrectly
-  ```
-
-  Paths are resolved to absolute URLs against `document.baseURI`.
-
-  If you neither import the stylesheet nor call `configureFonts`, the package
-  falls back to a **version-pinned CDN** - `https://unpkg.com/mathlive@<engine
-version>/fonts` - so those glyph-dependent symbols still render. Serve the
-  fonts yourself to avoid the third-party request.
-
-- **Custom macros.** `PIE_MACROS` covers the pie-specific commands the MathQuill
-  fork understood (`\parallelogram`, `\longdiv`, `\napprox`, …) and is kept in
-  sync with the MathJax macros in `@pie-lib/math-rendering`.
-
-## Development
-
-```bash
-nvm use --delete-prefix v22           # mathlive needs node >= 18
-./node_modules/.bin/jest packages/math-input-mathlive/src
-./node_modules/.bin/next dev packages/demo   # then /math-input-mathlive
-```
+- **Browser only.** MathLive registers custom elements. `loadMathLive()` returns `undefined` during
+  SSR, and under Node it resolves MathLive's render-only build, which has no `MathfieldElement`: fields
+  then stay empty while static math still renders.
+- **Loading.** MathLive is loaded with a dynamic `import()` marked `webpackMode: "eager"`, so a webpack
+  host keeps it in its main bundle rather than a chunk that may not be served.
+- **Several bundles on a page.** Each IIFE bundle carries its own MathLive, and only the first to
+  load registers `math-field`. Fields are created with `document.createElement('math-field')`, so
+  they use whichever copy registered it; constructing another copy's class throws "Illegal
+  constructor".
+- **Focus after a click.** MathLive moves keyboard focus into a field 60ms after a click, so a key
+  typed sooner is lost. Tests should wait for the field to be focused before typing.
+- **Field semantics.** A field is a group named "Enter answer" in the item language, around
+  MathLive's keyboard input, a textbox in its shadow root that gets the same name. MathLive names
+  that textbox with the spoken math once it has focus. Keypad keys are named by their buttons, so
+  a LaTeX key's drawing is hidden from assistive technology.
+- **Answer blocks.** Static keeps the caret in the first answer block until the field has focus.
+  Otherwise MathLive, finding no block after the caret when focus arrives, moves focus on to the
+  next element, and Tab skips the field. Tab into a field with answer blocks puts the caret in the
+  first one. Static
+  reports the block holding the caret through `setInput` and `onSubFieldFocus` whenever the caret
+  moves to another block, since the blocks share one field and that fires no new `focusin`.
+- **Text alternative.** Static math in display mode has no accessible text of its own, so its markup
+  is `aria-hidden` and MathML is rendered beside it, visually hidden, as MathLive's `<math-span>`
+  does.
+- **Fonts.** Some symbols (`\neq`, `\nsim`, `\ncong`) are built from Private Use Area glyphs that exist
+  only in the KaTeX fonts. With no `configureFonts()` call the fonts come from a version-pinned CDN
+  (`https://unpkg.com/mathlive@<version>/fonts`); call `configureFonts('/path/to/fonts')` before the
+  first load to serve them yourself, or `configureFonts(null)` to opt out.
+- **Core stylesheet.** `convertLatexToMarkup` output (keypad labels, display-mode static math) needs
+  MathLive's core styles; the package has MathLive inject them on load.
+- **Custom macros.** `PIE_MACROS` covers the pie-specific commands the MathQuill fork understood
+  (`\parallelogram`, `\longdiv`, `\napprox`, …), kept in sync with the MathJax macros.
+
+## Testing
+
+happy-dom cannot run MathLive's editor. Tests that need a mounted field mock `mathlive` with a
+stand-in `MathfieldElement` (see `test/field-label.test.tsx`, and
+`packages/elements-react/math-inline/src/delivery/__tests__/fake-mathlive.ts` for one with prompts).
+A package that mocks `mathlive` must list it as a devDependency so the mock resolves to the module
+this package imports.

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t as __exportAll };

package/dist/horizontal-keypad.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export default class HorizontalKeypad extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        controlledKeypadMode: PropTypes.Requireable<boolean>;
+        mode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        layoutForKeyPad: PropTypes.Requireable<object>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        noDecimal: PropTypes.Requireable<boolean>;
+        additionalKeys: PropTypes.Requireable<any[]>;
+        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        mode: string;
+        noDecimal: boolean;
+        additionalKeys: never[];
+    };
+    keypadPress: (data: any) => void;
+    render(): React.JSX.Element;
+}

package/dist/horizontal-keypad.js

@@ -0,0 +1,54 @@
+import { extendKeySet as e } from "./keys/utils.js";
+import { keysForGrade as t, normalizeAdditionalKeys as n } from "./keys/grades.js";
+import { KeyPad as r } from "./keypad/index.js";
+import i from "react";
+import a from "prop-types";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/horizontal-keypad.tsx
+var s = (e) => {
+	if (e.command) return {
+		value: e.command,
+		type: "command"
+	};
+	if (e.write) return { value: e.write };
+	if (e.keystroke) return {
+		type: "cursor",
+		value: e.keystroke
+	};
+}, c = class extends i.Component {
+	static propTypes = {
+		className: a.string,
+		controlledKeypadMode: a.bool,
+		mode: a.oneOfType([a.string, a.number]),
+		layoutForKeyPad: a.object,
+		onClick: a.func.isRequired,
+		onFocus: a.func,
+		noDecimal: a.bool,
+		additionalKeys: a.array,
+		setKeypadInteraction: a.func
+	};
+	static defaultProps = {
+		mode: "scientific",
+		noDecimal: !1,
+		additionalKeys: []
+	};
+	keypadPress = (e) => {
+		this.props.onClick(s(e));
+	};
+	render() {
+		let { mode: i, onFocus: a, controlledKeypadMode: s, noDecimal: c, className: l, additionalKeys: u, layoutForKeyPad: d, setKeypadInteraction: f } = this.props, p = n(u);
+		return /* @__PURE__ */ o(r, {
+			className: l,
+			controlledKeypadMode: s,
+			onFocus: a,
+			noDecimal: c,
+			layoutForKeyPad: d,
+			additionalKeys: e(t(i), p),
+			onPress: this.keypadPress,
+			mode: i,
+			setKeypadInteraction: f
+		});
+	}
+};
+//#endregion
+export { c as default };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { keysForGrade } from './keys/grades.js';
+import * as keys from './keys/index.js';
+import MathInput from './math-input.js';
+import HorizontalKeypad from './horizontal-keypad.js';
+import KeyPad from './keypad/index.js';
+import * as mf from './mf/index.js';
+import { registerEmbed, applyStaticMath, latexToMarkup, loadMathLive, configureFonts, getMacros, PIE_MACROS } from './mathlive-instance.js';
+import { toMathLive, fromMathLive, fieldIds, keyToAction, answerBlockLatex, NEWLINE_EMBED } from './latex-bridge.js';
+declare const addBrackets: (s: any) => any;
+declare const removeBrackets: (s: any) => any;
+/**
+ * `updateSpans` is intentionally a no-op.
+ *
+ * In @pie-lib/math-input it patched MathQuill's rendered DOM by walking
+ * `span[mathquill-command-id]` to resize the parallel glyph and tag primes.
+ * MathLive emits none of those attributes and does not need the fixups, but the
+ * export is kept so callers do not break.
+ */
+declare const updateSpans: () => void;
+export { keysForGrade, addBrackets, removeBrackets, keys, MathInput, HorizontalKeypad, KeyPad, updateSpans, mf, mf as mq, registerEmbed, applyStaticMath, latexToMarkup, loadMathLive, configureFonts, getMacros, PIE_MACROS, toMathLive, fromMathLive, fieldIds, keyToAction, answerBlockLatex, NEWLINE_EMBED, };

package/dist/index.js

@@ -0,0 +1,12 @@
+import { keysForGrade as e } from "./keys/grades.js";
+import { keys_exports as t } from "./keys/index.js";
+import { NEWLINE_EMBED as n, answerBlockLatex as r, fieldIds as i, fromMathLive as a, keyToAction as o, toMathLive as s } from "./latex-bridge.js";
+import { PIE_MACROS as c, applyStaticMath as l, configureFonts as u, getMacros as d, latexToMarkup as f, loadMathLive as p, registerEmbed as m } from "./mathlive-instance.js";
+import { mf_exports as h } from "./mf/index.js";
+import { KeyPad as g } from "./keypad/index.js";
+import { MathInput as _ } from "./math-input.js";
+import v from "./horizontal-keypad.js";
+//#region src/index.tsx
+var y = (e) => e.indexOf("\\(") === 0 ? e : `\\(${e}`, b = (e) => e.indexOf("\\)") === e.length - 2 ? e : `${e}\\)`, x = (e) => e.indexOf("\\(") === 0 ? e.substring(2) : e, S = (e) => e.indexOf("\\)") === e.length - 2 ? e.substring(0, e.length - 2) : e, C = (e) => b(y(e)), w = (e) => S(x(e)), T = () => {};
+//#endregion
+export { v as HorizontalKeypad, g as KeyPad, _ as MathInput, n as NEWLINE_EMBED, c as PIE_MACROS, C as addBrackets, r as answerBlockLatex, l as applyStaticMath, u as configureFonts, i as fieldIds, a as fromMathLive, d as getMacros, o as keyToAction, t as keys, e as keysForGrade, f as latexToMarkup, p as loadMathLive, h as mf, h as mq, m as registerEmbed, w as removeBrackets, s as toMathLive, T as updateSpans };

package/dist/keypad/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class LatexLabel extends React.Component {
+    static propTypes: {
+        latex: PropTypes.Validator<string>;
+        decorative: PropTypes.Requireable<boolean>;
+    };
+    constructor(props: any);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}
+export declare class KeyPad extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        controlledKeypadMode: PropTypes.Requireable<boolean>;
+        baseSet: PropTypes.Requireable<any[]>;
+        additionalKeys: PropTypes.Requireable<any[]>;
+        layoutForKeyPad: PropTypes.Requireable<object>;
+        onPress: PropTypes.Validator<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        noDecimal: PropTypes.Requireable<boolean>;
+        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
+        mode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    };
+    static defaultProps: {
+        baseSet: any[][];
+        noDecimal: boolean;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleKeypadInteraction: () => void;
+    buttonClick: (key: any) => void;
+    flowKeys: (base: any, extras: any) => unknown[];
+    keyIsNotAllowed: (key: any) => boolean;
+    render(): React.JSX.Element;
+}
+export default KeyPad;

package/dist/keypad/index.js

@@ -0,0 +1,245 @@
+import { baseSet as e } from "../keys/index.js";
+import { commonKeyboardStyles as t, rootIndexStyles as n } from "../mf/common-styles.js";
+import { fixLongDivisionWhenReady as r } from "../longdiv.js";
+import { latexToMarkup as i, loadMathLive as a } from "../mathlive-instance.js";
+import { sortKeys as o } from "./keys-layout.js";
+import { flatten as s } from "@pie-element/shared-lodash";
+import c from "react";
+import l from "prop-types";
+import { styled as u } from "@mui/material/styles";
+import d from "debug";
+import { jsx as f } from "react/jsx-runtime";
+import p from "@mui/material/Button";
+import m from "@mui/material/IconButton";
+import { color as h } from "@pie-lib/render-ui";
+//#region src/keypad/index.tsx
+var g = d("pie-lib:math-input-mathlive:keypad"), _ = () => [h.text(), h.keypadInk()], v = () => ({ "& .MuiTouchRipple-root": { color: `rgb(from ${h.text()} min(r, 255 - r) min(g, 255 - g) min(b, 255 - b))` } }), y = () => ({ "&.Mui-focusVisible": {
+	outline: `2px solid ${h.focusOutline()}`,
+	outlineOffset: "-2px",
+	boxShadow: `inset 0 0 0 4px ${h.v("pie")("background", h.defaults.WHITE)}`
+} }), b = ["\\parallel"], x = "skewX(-15deg)", S = "0.03em currentColor", C = 1.25, w = u("span", { shouldForwardProp: (e) => e !== "slanted" })(({ slanted: e }) => ({
+	...e && {
+		transform: `${x} scaleY(${C})`,
+		"& *": { WebkitTextStroke: S }
+	},
+	pointerEvents: "none",
+	textTransform: "none",
+	color: _(),
+	display: "inline-block",
+	textAlign: "center",
+	lineHeight: 1,
+	maxWidth: "100%",
+	overflow: "hidden",
+	"& .ML__placeholder": { backgroundColor: h.keypadEmptyPlaceholder ? h.keypadEmptyPlaceholder() : void 0 },
+	"& [data-pie-empty]": { opacity: .5 },
+	"&:has(.ML__mfrac)": { paddingTop: "0.25em" },
+	"& .ML__mfrac:has([data-pie-empty]) .ML__frac-line": {
+		position: "relative",
+		top: "0.14em"
+	},
+	"& .ML__mfrac:has([data-pie-empty]):not(:has(.ML__center ~ .ML__center [data-pie-empty])) .ML__frac-line": { top: "0.13em" },
+	"& .ML__mfrac:has([data-pie-empty]):not(:only-child) .ML__frac-line": { top: "0.1em" },
+	...n
+})), T = class e extends c.Component {
+	static propTypes = {
+		latex: l.string.isRequired,
+		decorative: l.bool
+	};
+	constructor(e) {
+		super(e), this.state = { markup: i(e.latex) }, this.labelRef = c.createRef();
+	}
+	async componentDidMount() {
+		if (this.state.markup) {
+			r(this.labelRef.current);
+			return;
+		}
+		if (await a(), this.unmounted) return;
+		let t = i(this.props.latex);
+		t ? this.setState({ markup: t }) : e.warned || (e.warned = !0, g("MathLive unavailable - keypad labels are falling back to raw latex"));
+	}
+	componentDidUpdate(e, t) {
+		e.latex !== this.props.latex && this.setState({ markup: i(this.props.latex) }), this.state.markup !== (t && t.markup) && r(this.labelRef.current);
+	}
+	componentWillUnmount() {
+		this.unmounted = !0;
+	}
+	render() {
+		let { markup: e } = this.state, t = this.props.decorative ? "true" : void 0;
+		return e ? /* @__PURE__ */ f(w, {
+			ref: this.labelRef,
+			"aria-hidden": t,
+			slanted: b.includes(this.props.latex),
+			dangerouslySetInnerHTML: { __html: e }
+		}) : /* @__PURE__ */ f(w, {
+			"aria-hidden": t,
+			slanted: b.includes(this.props.latex),
+			children: this.props.latex
+		});
+	}
+}, E = (e) => e ? {
+	gridTemplateColumns: `repeat(${e.columns}, minmax(min-content, 150px))`,
+	gridTemplateRows: `repeat(${e.rows}, minmax(40px, 60px))`,
+	gridAutoFlow: "initial"
+} : {}, D = u("div")(() => ({
+	...t,
+	width: "100%",
+	display: "grid",
+	gridTemplateRows: "repeat(5, minmax(40px, 60px))",
+	gridRowGap: "0px",
+	gridColumnGap: "0px",
+	gridAutoFlow: "column",
+	"&.character": {
+		textTransform: "initial !important",
+		gridTemplateRows: "repeat(5, minmax(40px, 50px)) !important"
+	},
+	"&.language": {
+		gridTemplateRows: "repeat(4, minmax(40px, 50px)) !important",
+		"& *": { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" }
+	}
+})), O = (e) => ({
+	backgroundColor: e === "operators" ? h.keypadButtonOperator() : h.keypadButton(),
+	"&:hover": { backgroundColor: e === "operators" ? h.keypadButtonOperatorHover() : h.keypadButtonHover() }
+}), k = u(p)(({ category: e, isDelete: t, isComma: n, isDot: r }) => ({
+	minWidth: "auto",
+	textTransform: "none",
+	fontSize: n || r ? "200% !important" : "140% !important",
+	lineHeight: n || r ? "100%" : "normal",
+	color: _(),
+	...O(e),
+	borderRadius: 0,
+	...t && { fontFamily: "Roboto, Helvetica, Arial, sans-serif !important" },
+	...v(),
+	...y()
+})), A = u(p)(({ category: e }) => ({
+	textTransform: "none",
+	padding: 0,
+	margin: 0,
+	fontSize: "110% !important",
+	minWidth: "auto",
+	borderRadius: 0,
+	...O(e),
+	...v(),
+	...y()
+})), j = u(m)(({ category: e }) => ({
+	minWidth: "auto",
+	...O(e),
+	borderRadius: 0,
+	"& .icon": { height: "30px" }
+})), M = class extends c.Component {
+	static propTypes = {
+		className: l.string,
+		controlledKeypadMode: l.bool,
+		baseSet: l.array,
+		additionalKeys: l.array,
+		layoutForKeyPad: l.object,
+		onPress: l.func.isRequired,
+		onFocus: l.func,
+		noDecimal: l.bool,
+		setKeypadInteraction: l.func,
+		mode: l.oneOfType([l.string, l.number])
+	};
+	static defaultProps = {
+		baseSet: e,
+		noDecimal: !1
+	};
+	constructor(e) {
+		super(e), this.keypadRef = c.createRef();
+	}
+	componentDidMount() {
+		a();
+		let e = this.keypadRef?.current, t = e?.closest(".main-container"), n = e?.closest(".pie-toolbar");
+		if (this.props.controlledKeypadMode && t && n) {
+			let e = t.getBoundingClientRect(), r = n.getBoundingClientRect(), i = e.top + e.height - (r.top + r.height);
+			if (i < 0) {
+				let n = e.height + e.top - i;
+				t.style.height = `${n}px`;
+			}
+		}
+		e && (e.addEventListener("touchstart", this.handleKeypadInteraction, !0), e.addEventListener("mousedown", this.handleKeypadInteraction, !0));
+	}
+	componentWillUnmount() {
+		let e = this.keypadRef?.current;
+		if (this.props.controlledKeypadMode && e) {
+			let t = e.closest(".main-container");
+			t && (t.style.height = "unset");
+		}
+		e && (e.removeEventListener("touchstart", this.handleKeypadInteraction, !0), e.removeEventListener("mousedown", this.handleKeypadInteraction, !0));
+	}
+	handleKeypadInteraction = () => {
+		this.props.setKeypadInteraction && this.props.setKeypadInteraction(!0);
+	};
+	buttonClick = (e) => {
+		g("[buttonClick]", e), this.props.onPress(e);
+	};
+	flowKeys = (e, t) => s([...o(e), ...o(t)]);
+	keyIsNotAllowed = (e) => {
+		let { noDecimal: t } = this.props;
+		return !!((e.write === "." && e.label === "." || e.write === "," && e.label === ",") && t);
+	};
+	render() {
+		let { className: e, baseSet: t, additionalKeys: n, layoutForKeyPad: r, onFocus: i, mode: a } = this.props, o = [
+			"non-negative-integers",
+			"integers",
+			"decimals",
+			"fractions",
+			"item-authoring",
+			"language"
+		].includes(a), s = o ? this.flowKeys([], n || []) : this.flowKeys(t, n || []), c = s.length % 5 ? 1 : 0, l = {
+			gridTemplateColumns: `repeat(${Math.floor(s.length / 5) + c}, minmax(min-content, 150px))`,
+			...E(r)
+		};
+		return /* @__PURE__ */ f(D, {
+			ref: this.keypadRef,
+			className: [e, a].filter(Boolean).join(" "),
+			style: l,
+			onFocus: i,
+			children: s.map((e, t) => {
+				if (!e) return /* @__PURE__ */ f("span", {}, `empty-${t}`);
+				if (!(e.label || e.latex || e.icon || e.command || e.keystroke || e.write || e.type || e.actions || e.extraProps)) return /* @__PURE__ */ f(k, {
+					disabled: !0,
+					"aria-hidden": "true",
+					tabIndex: -1,
+					category: o ? void 0 : e.category
+				}, `placeholder-${t}`);
+				let n = `${e.label || e.latex || e.command}-${t}`, r = o ? void 0 : e.category, i = {
+					...e.actions || {},
+					...e.extraProps || {}
+				}, a = this.buttonClick.bind(this, e), s = this.keyIsNotAllowed(e), c = e.ariaLabel ? e.ariaLabel : e.name || e.label;
+				if (e.latex) return /* @__PURE__ */ f(A, {
+					onClick: a,
+					disabled: s,
+					category: r,
+					"aria-label": c,
+					...i,
+					children: /* @__PURE__ */ f(T, {
+						latex: e.latex,
+						decorative: !!c
+					})
+				}, n);
+				if (e.label) return /* @__PURE__ */ f(k, {
+					onClick: a,
+					disabled: s,
+					category: r,
+					isDelete: e.label === "⌫",
+					isComma: e.label === ",",
+					isDot: e.label === ".",
+					"aria-label": c,
+					...i,
+					children: e.label
+				}, n);
+				let l = e.icon ? e.icon : "div";
+				return /* @__PURE__ */ f(j, {
+					tabIndex: "-1",
+					onClick: a,
+					disabled: s,
+					category: r,
+					size: "large",
+					...i,
+					children: /* @__PURE__ */ f(l, { className: "icon" })
+				}, n);
+			})
+		});
+	}
+};
+//#endregion
+export { M as KeyPad, M as default, T as LatexLabel };

package/dist/keypad/keys-layout.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sort additional keys.
+ *
+ * Expects an array of rows.
+ * @param {} keys
+ */
+export declare const sortKeys: (keys: any) => unknown[][];