@pie-lib/math-input 8.1.0 → 8.1.1-next.2

package/dist/keypad/accessible-keypad.js

@@ -0,0 +1,614 @@
+import { baseSet as e } from "../keys/index.js";
+import { commonMqKeyboardStyles as t } from "../mq/common-mq-styles.js";
+import { getAriaLabel as n } from "./model.js";
+import { sortKeys as r } from "./keys-layout.js";
+import { flatten as i } from "@pie-element/shared-lodash";
+import a from "react";
+import o from "prop-types";
+import s from "@mui/material/Button";
+import c from "@mui/material/IconButton";
+import { styled as l } from "@mui/material/styles";
+import u from "debug";
+import { color as d } from "@pie-lib/render-ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/keypad/accessible-keypad.tsx
+var m = u("pie-lib:math-inline:keypad:a11y"), h = l("div")(() => ({
+	...t,
+	width: "100%",
+	display: "grid",
+	gridTemplateRows: "repeat(5, minmax(40px, 60px))",
+	gridAutoFlow: "column",
+	border: `1px solid ${d.borderLight()}`,
+	"&.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" }
+	}
+}));
+l("div")(({ operator: e }) => ({
+	flex: e ? "0 0 auto" : "1 1 0",
+	display: "grid",
+	gridAutoFlow: "column",
+	gridTemplateRows: "repeat(5, minmax(44px, 56px))",
+	gridAutoColumns: "minmax(72px, 1fr)",
+	backgroundColor: e ? d.blueGrey300() : d.blueGrey100()
+}));
+var g = l(s, { shouldForwardProp: (e) => e !== "operator" })(({ operator: e }) => ({
+	minWidth: "auto",
+	borderRadius: 0,
+	color: d.text(),
+	backgroundColor: e ? d.blueGrey300() : d.blueGrey100(),
+	textTransform: "none",
+	fontSize: "1.6rem",
+	lineHeight: 1,
+	"&:hover": { backgroundColor: e ? d.blueGrey600() : d.blueGrey300() },
+	"&:focus-visible": {
+		outline: `3px solid ${d.focusCheckedBorder()}`,
+		outlineOffset: -3,
+		zIndex: 2
+	}
+})), _ = l(c, { shouldForwardProp: (e) => e !== "operator" })(({ operator: e }) => ({
+	minWidth: "auto",
+	borderRadius: 0,
+	color: d.text(),
+	backgroundColor: e ? d.blueGrey300() : d.blueGrey100(),
+	"&:hover": { backgroundColor: e ? d.blueGrey600() : d.blueGrey300() },
+	"&:focus-visible": {
+		outline: `3px solid ${d.focusCheckedBorder()}`,
+		outlineOffset: -3,
+		zIndex: 2
+	},
+	"& .icon": { height: "30px" }
+})), v = l("span")(() => ({
+	pointerEvents: "none",
+	color: d.text(),
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	minHeight: 40,
+	minWidth: 34,
+	"& .MathJax": {
+		fontSize: "1.45rem",
+		lineHeight: 1.1
+	},
+	"& mjx-container": {
+		overflow: "visible !important",
+		lineHeight: 1.1
+	},
+	"& .tpl-root": {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: 4,
+		fontSize: "1.5rem",
+		lineHeight: 1,
+		minHeight: 34,
+		fontFamily: "\"Times New Roman\", Times, serif",
+		textTransform: "none"
+	},
+	"& .mq-keycap": {
+		fontFamily: "\"STIX Two Text\", MJXZERO, MJXTEX, \"Times New Roman\", Times, serif",
+		fontStyle: "normal"
+	},
+	"& .mq-keycap var": {
+		fontFamily: "\"STIX Two Text\", MJXZERO, MJXTEX-I, \"Times New Roman\", Times, serif",
+		fontStyle: "italic"
+	},
+	"& .mq-keycap .mq-operator-name": {
+		fontFamily: "\"STIX Two Text\", MJXZERO, MJXTEX, \"Times New Roman\", Times, serif",
+		fontStyle: "normal"
+	},
+	"& .tpl-fraction": {
+		display: "inline-grid",
+		gridTemplateRows: "auto 1px auto",
+		justifyItems: "center",
+		alignItems: "center",
+		minWidth: 22
+	},
+	"& .tpl-frac-line": {
+		width: "1.05em",
+		borderTop: `2px solid ${d.text()}`,
+		margin: "2px 0"
+	},
+	"& .tpl-mixed-fraction": {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 3
+	},
+	"& .tpl-frac-cell": {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: "0.55em"
+	},
+	"& .tpl-placeholder": {
+		display: "inline-block",
+		width: "0.42em",
+		height: "0.76em",
+		backgroundColor: d.secondaryLight()
+	},
+	"& .tpl-longdiv": {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 3
+	},
+	"& .tpl-longdiv-radicand": {
+		display: "inline-flex",
+		alignItems: "center",
+		borderTop: `2px solid ${d.text()}`,
+		paddingTop: "0.15em",
+		minWidth: "0.8em",
+		justifyContent: "center"
+	},
+	"& .tpl-sup": {
+		display: "inline-flex",
+		alignItems: "flex-start"
+	},
+	"& .tpl-sup .tpl-placeholder": {
+		width: "0.3em",
+		height: "0.5em",
+		marginLeft: "0.05em",
+		transform: "translateY(-0.35em)"
+	},
+	"& .tpl-sub": {
+		display: "inline-flex",
+		alignItems: "flex-end"
+	},
+	"& .tpl-sub .tpl-placeholder": {
+		width: "0.3em",
+		height: "0.5em",
+		marginLeft: "0.05em",
+		transform: "translateY(0.3em)"
+	},
+	"& .tpl-root-radical": {
+		display: "inline-flex",
+		alignItems: "flex-start"
+	},
+	"& .tpl-root-sign": {
+		fontSize: "1.15em",
+		lineHeight: 1
+	},
+	"& .tpl-radicand": {
+		borderTop: `2px solid ${d.text()}`,
+		padding: "0.05em 0 0 0.08em",
+		marginLeft: "0.03em"
+	},
+	"& .tpl-over": {
+		display: "inline-grid",
+		justifyItems: "center",
+		gap: 2
+	},
+	"& .tpl-over-line": {
+		display: "block",
+		width: "1em",
+		borderTop: `2px solid ${d.text()}`
+	},
+	"& .tpl-over-arrow": {
+		display: "block",
+		fontSize: "0.65em",
+		lineHeight: 1
+	},
+	"& .tpl-over-arc": {
+		display: "block",
+		fontSize: "0.8em",
+		lineHeight: 1,
+		transform: "translateY(0.1em)"
+	}
+})), y = l(s, { shouldForwardProp: (e) => e !== "operator" })(({ operator: e }) => ({
+	minWidth: "auto",
+	borderRadius: 0,
+	padding: "6px",
+	overflow: "visible",
+	textTransform: "none",
+	color: d.text(),
+	backgroundColor: e ? d.blueGrey300() : d.blueGrey100(),
+	"&:hover": { backgroundColor: e ? d.blueGrey600() : d.blueGrey300() },
+	"&:focus-visible": {
+		outline: `3px solid ${d.focusCheckedBorder()}`,
+		outlineOffset: -3,
+		zIndex: 2
+	}
+})), b = {
+	"\\theta": "θ",
+	"\\pi": "π",
+	"\\infty": "∞",
+	"\\propto": "∝",
+	"\\sin": "sin",
+	"\\cos": "cos",
+	"\\tan": "tan",
+	"\\sec": "sec",
+	"\\csc": "csc",
+	"\\cot": "cot",
+	"\\log": "log",
+	"\\ln": "ln",
+	"\\pm": "±",
+	"\\approx": "≈",
+	"\\napprox": "≉",
+	"\\neq": "≠",
+	"\\sim": "∼",
+	"\\nsim": "≁",
+	"\\mu": "μ",
+	"\\Sigma": "Σ",
+	"\\sigma": "σ",
+	"\\parallel": "∥",
+	"\\nparallel": "∦",
+	"\\perp": "⟂",
+	"\\angle": "∠",
+	"\\measuredangle": "∡",
+	"\\triangle": "△",
+	"\\square": "□",
+	"\\parallelogram": "▱",
+	"\\odot": "⊙",
+	"\\degree": "°",
+	"\\cong": "≅",
+	"\\ncong": "≇",
+	"\\leftarrow": "←",
+	"\\rightarrow": "→",
+	"\\leftrightarrow": "↔",
+	"\\le": "≤",
+	"\\ge": "≥"
+}, x = new Set([
+	"\\sin",
+	"\\cos",
+	"\\tan",
+	"\\sec",
+	"\\csc",
+	"\\cot",
+	"\\log",
+	"\\ln"
+]), S = new Set([
+	"x",
+	"y",
+	"i",
+	"e",
+	"AB"
+]), C = (e = "") => S.has(e) ? /* @__PURE__ */ f("var", { children: e }) : /* @__PURE__ */ f("span", { children: e }), w = (e = "") => {
+	if (x.has(e)) return /* @__PURE__ */ f("var", {
+		className: "mq-operator-name",
+		children: e.replace(/^\\/, "")
+	});
+	let t = b[e];
+	return t ? S.has(t) ? /* @__PURE__ */ f("var", { children: t }) : /* @__PURE__ */ f("span", { children: t }) : C(e.replace(/^\\/, "").replace(/\\(left|right)/g, "").replace(/[{}\\]/g, "").replace(/\s+/g, " ").trim());
+}, T = ({ short: e = !1 }) => /* @__PURE__ */ f("span", {
+	className: "tpl-placeholder",
+	style: e ? {
+		width: "0.3em",
+		height: "0.55em"
+	} : void 0
+}), E = ({ body: e, marker: t }) => /* @__PURE__ */ p("span", {
+	className: "tpl-root tpl-over mq-keycap",
+	"aria-hidden": !0,
+	children: [/* @__PURE__ */ f("span", {
+		className: t,
+		children: t === "tpl-over-line" ? "" : t === "tpl-over-arrow" ? "↔" : "◠"
+	}), /* @__PURE__ */ f("span", { children: e })]
+}), D = ({ definition: e }) => {
+	let t = e.key?.latex || "";
+	switch (e.visualType) {
+		case "fractionTemplate": return t === "\\frac{x}{ }" ? /* @__PURE__ */ f("span", {
+			className: "tpl-root mq-keycap",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ p("span", {
+				className: "tpl-fraction",
+				children: [
+					/* @__PURE__ */ f("var", { children: "x" }),
+					/* @__PURE__ */ f("span", { className: "tpl-frac-line" }),
+					/* @__PURE__ */ f(T, {})
+				]
+			})
+		}) : /* @__PURE__ */ f("span", {
+			className: "tpl-root mq-keycap",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ p("span", {
+				className: "tpl-fraction",
+				children: [
+					/* @__PURE__ */ f(T, {}),
+					/* @__PURE__ */ f("span", { className: "tpl-frac-line" }),
+					/* @__PURE__ */ f(T, {})
+				]
+			})
+		});
+		case "mixedFractionTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root tpl-mixed-fraction mq-keycap",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ p("span", {
+				className: "tpl-fraction",
+				style: { minWidth: "0.9em" },
+				children: [
+					/* @__PURE__ */ f("span", {
+						className: "tpl-frac-cell",
+						children: /* @__PURE__ */ f(T, { short: !0 })
+					}),
+					/* @__PURE__ */ f("span", { className: "tpl-frac-line" }),
+					/* @__PURE__ */ f("span", {
+						className: "tpl-frac-cell",
+						children: /* @__PURE__ */ f(T, { short: !0 })
+					})
+				]
+			})]
+		});
+		case "squaredTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root tpl-sup mq-keycap",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ f("span", {
+				style: {
+					fontSize: "0.7em",
+					transform: "translateY(-0.25em)"
+				},
+				children: "2"
+			})]
+		});
+		case "longdivTemplate": return /* @__PURE__ */ f("span", {
+			className: "tpl-root mq-keycap",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ p("span", {
+				className: "tpl-longdiv",
+				children: [/* @__PURE__ */ f("span", { children: ")" }), /* @__PURE__ */ f("span", {
+					className: "tpl-longdiv-radicand",
+					children: /* @__PURE__ */ f(T, {})
+				})]
+			})
+		});
+		case "supTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root tpl-sup mq-keycap",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ f(T, { short: !0 })]
+		});
+		case "subTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root tpl-sub mq-keycap",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ f("var", { children: "x" }), /* @__PURE__ */ f(T, { short: !0 })]
+		});
+		case "sqrtTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root tpl-root-radical mq-keycap",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ f("span", {
+				className: "tpl-root-sign",
+				children: "√"
+			}), /* @__PURE__ */ f("span", {
+				className: "tpl-radicand",
+				children: /* @__PURE__ */ f(T, {})
+			})]
+		});
+		case "nthRootTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root tpl-root-radical mq-keycap",
+			"aria-hidden": !0,
+			children: [
+				/* @__PURE__ */ f("span", {
+					style: {
+						fontSize: "0.55em",
+						transform: "translate(0.15em,-0.2em)"
+					},
+					children: /* @__PURE__ */ f(T, { short: !0 })
+				}),
+				/* @__PURE__ */ f("span", {
+					className: "tpl-root-sign",
+					children: "√"
+				}),
+				/* @__PURE__ */ f("span", {
+					className: "tpl-radicand",
+					children: /* @__PURE__ */ f(T, {})
+				})
+			]
+		});
+		case "parenTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root mq-keycap",
+			"aria-hidden": !0,
+			children: [
+				"(",
+				/* @__PURE__ */ f(T, {}),
+				")"
+			]
+		});
+		case "bracketTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root mq-keycap",
+			"aria-hidden": !0,
+			children: [
+				"[",
+				/* @__PURE__ */ f(T, {}),
+				"]"
+			]
+		});
+		case "absTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root mq-keycap",
+			"aria-hidden": !0,
+			children: [
+				"|",
+				/* @__PURE__ */ f(T, {}),
+				"|"
+			]
+		});
+		case "logSubTemplate": return /* @__PURE__ */ p("span", {
+			className: "tpl-root tpl-sub mq-keycap",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ f("var", {
+				className: "mq-operator-name",
+				children: "log"
+			}), /* @__PURE__ */ f(T, { short: !0 })]
+		});
+		case "overlineTemplate": return /* @__PURE__ */ f(E, {
+			body: t.includes("y") ? /* @__PURE__ */ f("var", { children: "y" }) : t.includes("x") ? /* @__PURE__ */ f("var", { children: "x" }) : /* @__PURE__ */ f(T, {}),
+			marker: "tpl-over-line"
+		});
+		case "overArrowTemplate": return /* @__PURE__ */ f(E, {
+			body: /* @__PURE__ */ f(T, {}),
+			marker: "tpl-over-arrow"
+		});
+		case "overBiArrowTemplate": return /* @__PURE__ */ f(E, {
+			body: t.includes("AB") ? /* @__PURE__ */ f("var", { children: "AB" }) : /* @__PURE__ */ f(T, {}),
+			marker: "tpl-over-arrow"
+		});
+		case "overArcTemplate": return /* @__PURE__ */ f(E, {
+			body: /* @__PURE__ */ f(T, {}),
+			marker: "tpl-over-arc"
+		});
+		case "symbolText": return /* @__PURE__ */ f("span", {
+			className: "tpl-root mq-keycap",
+			"aria-hidden": !0,
+			children: w(t)
+		});
+		default: return /* @__PURE__ */ f("span", {
+			className: "tpl-root",
+			"aria-hidden": !0,
+			children: e.key?.label || e.key?.write || e.key?.name
+		});
+	}
+}, O = (e) => e && e.name === "" && e.latex === "" && e.write === "", k = (e = "") => e.replace(/\$\$/g, "").replace(/^\$|\$$/g, "").trim(), A = (e) => e ? {
+	gridTemplateColumns: `repeat(${e.columns}, minmax(min-content, 150px))`,
+	gridTemplateRows: `repeat(${e.rows}, minmax(40px, 60px))`,
+	gridAutoFlow: "initial"
+} : {}, j = class extends a.Component {
+	static propTypes = {
+		className: o.string,
+		controlledKeypadMode: o.bool,
+		baseSet: o.array,
+		additionalKeys: o.array,
+		layoutForKeyPad: o.object,
+		onPress: o.func.isRequired,
+		onFocus: o.func,
+		noDecimal: o.bool,
+		setKeypadInteraction: o.func,
+		mode: o.oneOfType([o.string, o.number]),
+		onRequestClose: o.func
+	};
+	static defaultProps = {
+		baseSet: e,
+		noDecimal: !1
+	};
+	constructor(e) {
+		super(e), this.keypadRef = a.createRef(), this.buttonRefs = [], this.state = { activeIndex: 0 };
+	}
+	componentDidMount() {
+		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);
+			i < 0 && t && (t.style.height = `${e.height + e.top - i}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);
+	};
+	keyIsNotAllowed = (e) => {
+		let { noDecimal: t } = this.props;
+		return (e.write === "." && e.label === "." || e.write === "," && e.label === ",") && t;
+	};
+	flowKeys = (e, t) => i([...r([...(e || []).map((e) => [...e])]), ...r([...(t || []).map((e) => [...e])])]);
+	toRenderModel = () => {
+		let { baseSet: e, additionalKeys: t, mode: r } = this.props;
+		return ([
+			"non-negative-integers",
+			"integers",
+			"decimals",
+			"fractions",
+			"item-authoring",
+			"language"
+		].includes(r) ? this.flowKeys([], t || []) : this.flowKeys(e, t || [])).filter((e) => e && !O(e)).map((e) => e.latex ? {
+			...e,
+			latex: k(e.latex),
+			write: typeof e.write == "string" ? k(e.write) : e.write,
+			label: typeof e.label == "string" ? k(e.label) : e.label
+		} : e).map((e, t) => ({
+			id: `${e.label || e.latex || e.name || e.command || "key"}-${t}`,
+			ariaLabel: n(e),
+			key: e
+		}));
+	};
+	pressKey = (e) => {
+		!e || this.keyIsNotAllowed(e.key) || (m("[pressKey]", e.id), this.props.onPress(e.key));
+	};
+	moveFocus = (e) => {
+		let t = Math.max(0, Math.min(e, this.buttonRefs.length - 1));
+		this.setState({ activeIndex: t }, () => {
+			let e = this.buttonRefs[t];
+			e && !e.disabled && e.focus();
+		});
+	};
+	onButtonKeyDown = (e, t) => {
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault(), this.moveFocus(t + 1);
+			return;
+		}
+		if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault(), this.moveFocus(t - 1);
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault(), this.moveFocus(0);
+			return;
+		}
+		if (e.key === "End") {
+			e.preventDefault(), this.moveFocus(this.buttonRefs.length - 1);
+			return;
+		}
+		e.key === "Escape" && this.props.onRequestClose && (e.preventDefault(), this.props.onRequestClose());
+	};
+	renderKey = (e, t) => {
+		let r = e.key, i = r.category === "operators", a = this.keyIsNotAllowed(r), o = {
+			key: `${e.id}-${t}`,
+			onClick: () => this.pressKey(e),
+			onKeyDown: (e) => this.onButtonKeyDown(e, t),
+			onFocus: () => this.setState({ activeIndex: t }),
+			tabIndex: this.state.activeIndex === t ? 0 : -1,
+			disabled: a,
+			"aria-label": e.ariaLabel || n(r),
+			...r.actions || {},
+			...r.extraProps || {}
+		};
+		if (r.icon) {
+			let e = r.icon ? r.icon : "div";
+			return /* @__PURE__ */ f(_, {
+				...o,
+				operator: i,
+				children: /* @__PURE__ */ f(e, {
+					className: "icon",
+					"aria-hidden": "true"
+				})
+			});
+		}
+		return r.latex ? /* @__PURE__ */ f(y, {
+			...o,
+			operator: i,
+			children: /* @__PURE__ */ f(v, { children: /* @__PURE__ */ f(D, { definition: e }) })
+		}) : /* @__PURE__ */ f(g, {
+			...o,
+			operator: i,
+			children: r.label || r.write || r.name
+		});
+	};
+	render() {
+		let { className: e, onFocus: t, layoutForKeyPad: n } = this.props;
+		this.buttonRefs = [];
+		let r = this.toRenderModel(), i = r.length % 5 ? 1 : 0, o = {
+			gridTemplateColumns: `repeat(${Math.floor(r.length / 5) + i}, minmax(min-content, 150px))`,
+			...A(n)
+		}, s = 0, c = (e) => {
+			let t = s++, n = this.renderKey(e, t);
+			return a.cloneElement(n, { ref: (e) => {
+				this.buttonRefs[t] = e;
+			} });
+		};
+		return /* @__PURE__ */ f(h, {
+			ref: this.keypadRef,
+			className: [e, this.props.mode].filter(Boolean).join(" "),
+			style: o,
+			onFocus: t,
+			role: "grid",
+			"aria-label": "Math keypad",
+			children: r.map((e) => c(e))
+		});
+	}
+};
+//#endregion
+export { j as default };

package/dist/keypad/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KeyPad } from './accessible-keypad';
+export { default } from './accessible-keypad';

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

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-lib/packages/math-input/src/keypad/keys-layout.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+/**
+ * Sort additional keys.
+ *
+ * Expects an array of rows.
+ * @param {} keys
+ */
+export declare const sortKeys: (keys: any) => unknown[][];

package/dist/keypad/keys-layout.js

@@ -0,0 +1,5 @@
+import { times as e, zip as t } from "@pie-element/shared-lodash";
+//#region src/keypad/keys-layout.ts
+var n = (n) => (e(5 - n.length, () => n.push([])), t.apply(null, n));
+//#endregion
+export { n as sortKeys };

package/dist/keypad/model.d.ts

@@ -0,0 +1,28 @@
+export type KeypadLane = 'numbers' | 'operators' | 'templates';
+export type KeyVisualType = 'text' | 'icon' | 'symbolText' | 'fractionTemplate' | 'mixedFractionTemplate' | 'longdivTemplate' | 'squaredTemplate' | 'supTemplate' | 'subTemplate' | 'sqrtTemplate' | 'nthRootTemplate' | 'parenTemplate' | 'bracketTemplate' | 'absTemplate' | 'logSubTemplate' | 'overlineTemplate' | 'overArrowTemplate' | 'overBiArrowTemplate' | 'overArcTemplate';
+export interface LegacyKey {
+    name?: string;
+    label?: string;
+    latex?: string;
+    write?: string;
+    command?: string | string[];
+    keystroke?: string;
+    icon?: any;
+    category?: string;
+    ariaLabel?: string;
+    actions?: Record<string, unknown>;
+    extraProps?: Record<string, unknown>;
+}
+export interface KeyDefinition {
+    id: string;
+    lane: KeypadLane;
+    visualType: KeyVisualType;
+    ariaLabel: string;
+    key: LegacyKey;
+}
+export declare const toColumnMajor: (rows: LegacyKey[][]) => LegacyKey[];
+export declare const getAriaLabel: (key: LegacyKey) => string;
+export declare const toDefinition: (key: LegacyKey, index: number) => KeyDefinition;
+export declare const buildKeyDefinitions: (orderedKeys: LegacyKey[]) => KeyDefinition[];
+export declare const laneDefinitions: (definitions: KeyDefinition[]) => Record<KeypadLane, KeyDefinition[]>;
+export declare const toLaneGrid: (items: KeyDefinition[], rowCount?: number) => (KeyDefinition | null)[][];

package/dist/keypad/model.js

@@ -0,0 +1,4 @@
+//#region src/keypad/model.ts
+var e = (e) => e.ariaLabel || e.name || e.label || e.latex || "keypad action";
+//#endregion
+export { e as getAriaLabel };

package/dist/keys/basic-operators.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synced-from pie-lib/packages/math-input/src/keys/basic-operators.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const equals: any;
+export declare const plus: any;
+export declare const minus: any;
+export declare const divide: any;
+export declare const multiply: any;