@pie-lib/mask-markup 3.0.4-next.33 → 3.0.4-next.35

package/dist/choices/choice.d.ts

@@ -9,16 +9,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 export declare const DRAG_TYPE = "MaskBlank";
-declare function Choice({ choice, disabled, instanceId }: {
+declare function Choice({ choice, disabled, instanceId, selectedItem, onSelectClick }: {
     choice: any;
     disabled: any;
     instanceId: any;
+    selectedItem: any;
+    onSelectClick: any;
 }): React.JSX.Element;
 declare namespace Choice {
     var propTypes: {
         choice: PropTypes.Validator<object>;
         disabled: PropTypes.Requireable<boolean>;
         instanceId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
 }
 export default Choice;

package/dist/choices/choice.js

@@ -7,12 +7,12 @@ import { useDraggable as o } from "@dnd-kit/core";
 import s from "@mui/material/Chip";
 import { color as c } from "@pie-lib/render-ui";
 //#region src/choices/choice.tsx
-var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t }) => ({
+var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t, selected: n }) => ({
 	border: `solid 0px ${e.palette.primary.main}`,
-	borderRadius: e.spacing(2),
 	margin: e.spacing(.5),
 	transform: "translate(0, 0)",
 	display: "inline-flex",
+	opacity: n ? .7 : 1,
 	...t && {}
 })), d = r(s)(() => ({
 	backgroundColor: c.white(),
@@ -36,10 +36,11 @@ var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t }) => ({
 		display: "block",
 		padding: "2px 0"
 	},
-	"& mjx-frac": { fontSize: "120% !important" }
+	"& mjx-frac": { fontSize: "120% !important" },
+	"& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn": { fontSize: "120% !important" }
 }));
-function p({ choice: n, disabled: r, instanceId: s }) {
-	let c = t(null), { attributes: p, listeners: m, setNodeRef: h, isDragging: g } = o({
+function p({ choice: n, disabled: r, instanceId: s, selectedItem: c, onSelectClick: p }) {
+	let m = t(null), { attributes: h, listeners: g, setNodeRef: _, isDragging: v } = o({
 		id: `choice-${n.id}`,
 		data: {
 			choice: n,
@@ -49,21 +50,32 @@ function p({ choice: n, disabled: r, instanceId: s }) {
 		},
 		disabled: r
 	});
-	return e(() => {
-		i(c.current);
-	}, [n.value]), /* @__PURE__ */ a(u, {
-		ref: h,
-		style: g ? {
-			width: c.current?.offsetWidth,
-			height: c.current?.offsetHeight
+	e(() => {
+		i(m.current);
+	}, [n.value]);
+	let y = !!c && c.fromChoice === !0 && c.choice.id === n.id;
+	return /* @__PURE__ */ a(u, {
+		ref: _,
+		style: v ? {
+			width: m.current?.offsetWidth || 90,
+			height: m.current?.offsetHeight || 32
 		} : {},
 		disabled: r,
-		...m,
-		...p,
+		selected: y,
+		onClick: (e) => {
+			r || (e.stopPropagation(), p?.({
+				choice: n,
+				instanceId: s,
+				fromChoice: !0,
+				type: l
+			}));
+		},
+		...g,
+		...h,
 		children: /* @__PURE__ */ a(d, {
 			clickable: !1,
 			disabled: r,
-			ref: c,
+			ref: m,
 			label: /* @__PURE__ */ a(f, { dangerouslySetInnerHTML: { __html: n.value } })
 		})
 	});
@@ -71,7 +83,9 @@ function p({ choice: n, disabled: r, instanceId: s }) {
 p.propTypes = {
 	choice: n.object.isRequired,
 	disabled: n.bool,
-	instanceId: n.oneOfType([n.string, n.number])
+	instanceId: n.oneOfType([n.string, n.number]),
+	selectedItem: n.object,
+	onSelectClick: n.func
 };
 //#endregion
-export { p as default };
+export { l as DRAG_TYPE, p as default };

package/dist/choices/index.d.ts

@@ -19,7 +19,11 @@ export default class Choices extends React.Component {
         value: PropTypes.Requireable<object>;
         choicePosition: PropTypes.Validator<string>;
         instanceId: PropTypes.Requireable<string>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     getStyleForWrapper: any;
+    handlePoolClick: any;
     render(): React.JSX.Element;
 }

package/dist/choices/index.js

@@ -15,7 +15,10 @@ var o = class extends t.Component {
 		})),
 		value: n.object,
 		choicePosition: n.string.isRequired,
-		instanceId: n.string
+		instanceId: n.string,
+		selectedItem: n.object,
+		onSelectClick: n.func,
+		onPlacementClick: n.func
 	};
 	getStyleForWrapper = () => {
 		let { choicePosition: e } = this.props;
@@ -26,20 +29,27 @@ var o = class extends t.Component {
 			default: return { margin: "0 40px 0 0" };
 		}
 	};
+	handlePoolClick = () => {
+		let { disabled: e, selectedItem: t, onPlacementClick: n } = this.props;
+		e || t && n?.(void 0);
+	};
 	render() {
-		let { disabled: t, duplicates: n, choices: o, value: s, instanceId: c } = this.props, l = o.filter((e) => n === !0 ? !0 : r(s, (t) => t === e.id) === void 0);
+		let { disabled: t, duplicates: n, choices: o, value: s, instanceId: c, selectedItem: l, onSelectClick: u } = this.props, d = o.filter((e) => n === !0 || r(s, (t) => t === e.id) === void 0);
 		return /* @__PURE__ */ i("div", {
 			style: {
 				...this.getStyleForWrapper(),
 				minWidth: "100px"
 			},
+			onClick: this.handlePoolClick,
 			children: /* @__PURE__ */ i(a, {
 				disabled: t,
 				instanceId: c,
-				children: l.map((n, r) => /* @__PURE__ */ i(e, {
+				children: d.map((n, r) => /* @__PURE__ */ i(e, {
 					disabled: t,
 					choice: n,
-					instanceId: c
+					instanceId: c,
+					selectedItem: l,
+					onSelectClick: u
 				}, `${n.value}-${r}`))
 			})
 		});

package/dist/components/blank.d.ts

@@ -8,7 +8,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-declare function DragDropBlank({ id, disabled, duplicates, choice, correct, onChange, emptyResponseAreaWidth, emptyResponseAreaHeight, instanceId, }: {
+declare function DragDropBlank({ id, disabled, duplicates, choice, correct, onChange, emptyResponseAreaWidth, emptyResponseAreaHeight, instanceId, selectedItem, onSelectClick, onPlacementClick, }: {
     id: any;
     disabled: any;
     duplicates: any;
@@ -18,6 +18,9 @@ declare function DragDropBlank({ id, disabled, duplicates, choice, correct, onCh
     emptyResponseAreaWidth: any;
     emptyResponseAreaHeight: any;
     instanceId: any;
+    selectedItem: any;
+    onSelectClick: any;
+    onPlacementClick: any;
 }): React.JSX.Element;
 declare namespace DragDropBlank {
     var defaultProps: {
@@ -34,6 +37,9 @@ declare namespace DragDropBlank {
         emptyResponseAreaWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         emptyResponseAreaHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         instanceId: PropTypes.Requireable<string>;
+        selectedItem: PropTypes.Requireable<object>;
+        onSelectClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlacementClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
 }
 export default DragDropBlank;

package/dist/components/blank.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
 import t, { useEffect as n, useRef as r, useState as i } from "react";
 import a from "prop-types";
 import { styled as o } from "@mui/material/styles";
@@ -8,23 +8,26 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useDraggable as d, useDroppable as f } from "@dnd-kit/core";
 import p from "@mui/material/Chip";
 import { color as m } from "@pie-lib/render-ui";
-import { CSS as h } from "@dnd-kit/utilities";
-import { grey as g } from "@mui/material/colors";
+import { grey as h } from "@mui/material/colors";
 //#region src/components/blank.tsx
 c("pie-lib:mask-markup:blank");
-var _ = o("span")(({ dragged: e, over: t }) => ({
+var g = o("span")(({ dragged: e, over: t, selected: n, showsPointerCursor: r }) => ({
 	border: `solid 0px ${m.primary()}`,
 	minWidth: "200px",
-	touchAction: "none",
 	overflow: "hidden",
 	whiteSpace: "nowrap",
 	opacity: 1,
+	cursor: "default",
 	...t && {
 		whiteSpace: "nowrap",
 		overflow: "hidden"
 	},
-	...e && { opacity: .5 }
-})), v = o(p)(() => ({
+	...(e || n) && { opacity: .5 },
+	...r && { "&:hover": { cursor: "pointer" } }
+})), _ = o("span")({
+	display: "inline-flex",
+	touchAction: "none"
+}), v = o(p)(() => ({
 	backgroundColor: m.background(),
 	border: `2px dashed ${m.text()}`,
 	touchAction: "none",
@@ -38,8 +41,8 @@ var _ = o("span")(({ dragged: e, over: t }) => ({
 		overflow: "hidden"
 	},
 	"&.parentOver": {
-		border: `1px solid ${g[500]}`,
-		backgroundColor: `${g[300]}`
+		border: `1px solid ${h[500]}`,
+		backgroundColor: `${h[300]}`
 	},
 	"&.correct": { border: `solid 1px ${m.correct()}` },
 	"&.incorrect": { border: `solid 1px ${m.incorrect()}` },
@@ -56,6 +59,7 @@ var _ = o("span")(({ dragged: e, over: t }) => ({
 		marginBottom: "0"
 	},
 	"& mjx-frac": { fontSize: "120% !important" },
+	"& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn": { fontSize: "120% !important" },
 	"&.over": {
 		whiteSpace: "nowrap",
 		overflow: "hidden"
@@ -73,36 +77,49 @@ var _ = o("span")(({ dragged: e, over: t }) => ({
 	}
 }));
 function b({ disabled: a, choice: o, isOver: c, isDragging: d, dragItem: f, correct: p, emptyResponseAreaWidth: m, emptyResponseAreaHeight: h }) {
-	let g = r(null), _ = r(null), b = r(null), [x, S] = i({
+	let g = r(null), _ = r(null), b = r(null), x = r(!1), [S, C] = i({
 		height: 0,
 		width: 0
-	}), C = () => {
-		E();
-	}, w = () => {
+	}), w = () => {
+		D();
+	}, T = () => {
 		let e = _.current?.querySelector("img");
-		e ? e.onload = C : setTimeout(() => {
-			E();
+		e ? e.onload = w : setTimeout(() => {
+			D();
 		}, 300);
-	}, T = () => _.current ? _.current.querySelector("mjx-container") && _.current.parentElement ? _.current.parentElement : _.current.querySelector("img") || _.current : null, E = () => {
-		if (_.current && g.current) {
-			g.current.style.width = "auto", g.current.style.height = "auto", g.current.offsetHeight;
-			let e = T() || _.current, t = e.getBoundingClientRect(), n = t.width || e.offsetWidth || 0, r = Math.max(t.height || 0, e.offsetHeight || 0, e.scrollHeight || 0, _.current.scrollHeight || 0), i = n + 24, a = r + 24, o = parseFloat(m) || 0, s = parseFloat(h) || 0, c = i <= o ? o : i, l = a <= s ? s : a;
-			S((e) => ({
+	}, E = () => {
+		if (!_.current) return null;
+		if (_.current.querySelector("mjx-container") && _.current.parentElement) return _.current.parentElement;
+		let e = _.current.querySelector("img");
+		return e ? _.current.textContent.trim().length > 0 ? _.current : e : _.current;
+	}, D = () => {
+		if (_.current && g.current && !x.current) {
+			x.current = !0, g.current.style.width = "auto", g.current.style.height = "auto", g.current.offsetHeight;
+			let e = E() || _.current, t = e.getBoundingClientRect(), n = e.offsetWidth || t.width || 0, r = Math.max(e.offsetHeight || 0, t.height || 0, e.scrollHeight || 0, _.current.scrollHeight || 0), i = n + 24 + 4 + 1, a = r + 24 + 4 + 1, o = parseFloat(m) || 0, s = parseFloat(h) || 0, c = i <= o ? o : i, l = a <= s ? s : a;
+			C((e) => ({
 				width: c > o ? c : e.width,
 				height: l > s ? l : e.height
-			})), g.current.style.width = `${c}px`, g.current.style.height = `${l}px`;
+			}));
+			let u = `${c}px`, d = `${l}px`;
+			g.current.style.width !== u && (g.current.style.width = u), g.current.style.height !== d && (g.current.style.height = d), x.current = !1;
 		}
-	}, D = () => {
+	}, O = () => {
 		let e = isNaN(parseFloat(m)) ? 0 : parseFloat(m), t = isNaN(parseFloat(h)) ? 0 : parseFloat(h);
 		return {
-			height: x.height || t,
-			width: x.width || e,
+			height: S.height || t,
+			width: S.width || e,
 			...e ? {} : { minWidth: 90 },
 			...t ? {} : { minHeight: 32 }
 		};
 	};
 	n(() => {
-		w();
+		T();
+	}, []), n(() => {
+		if (typeof IntersectionObserver > "u" || !g.current) return;
+		let e = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && D();
+		}, { threshold: 0 });
+		return e.observe(g.current), () => e.disconnect();
 	}, []), n(() => {
 		g.current && s(g.current);
 	}, [
@@ -111,14 +128,14 @@ function b({ disabled: a, choice: o, isOver: c, isDragging: d, dragItem: f, corr
 		f?.choice?.value
 	]), n(() => {
 		if (!o) {
-			S({
+			C({
 				height: 0,
 				width: 0
 			});
 			return;
 		}
-		w();
-	}, [o]), n(() => {
+		T();
+	}, [o?.value]), n(() => {
 		!c && !d && (b.current = {
 			width: g.current.offsetWidth,
 			height: g.current.offsetHeight
@@ -128,10 +145,10 @@ function b({ disabled: a, choice: o, isOver: c, isDragging: d, dragItem: f, corr
 		c,
 		d
 	]);
-	let O = f && c && f.choice && f.choice.value, k = o && o.value, A = c || d ? {
+	let k = f && c && f.choice && f.choice.value, A = o && o.value, j = c || d ? {
 		width: b.current?.width,
 		height: b.current?.height
-	} : D();
+	} : O();
 	return /* @__PURE__ */ l(v, {
 		clickable: !1,
 		disabled: a,
@@ -142,16 +159,16 @@ function b({ disabled: a, choice: o, isOver: c, isDragging: d, dragItem: f, corr
 			draggable: !0,
 			className: e({
 				over: c,
-				hidden: O
+				hidden: k
 			}),
-			dangerouslySetInnerHTML: { __html: k || "" }
-		}), O && /* @__PURE__ */ l(y, {
+			dangerouslySetInnerHTML: { __html: A || "" }
+		}), k && /* @__PURE__ */ l(y, {
 			draggable: !0,
 			className: e({
 				over: c,
 				dragged: !0
 			}),
-			dangerouslySetInnerHTML: { __html: O || "" }
+			dangerouslySetInnerHTML: { __html: k || "" }
 		})] }),
 		className: e({
 			over: c,
@@ -160,7 +177,7 @@ function b({ disabled: a, choice: o, isOver: c, isDragging: d, dragItem: f, corr
 			incorrect: p !== void 0 && !p
 		}),
 		variant: a ? "outlined" : void 0,
-		style: A
+		style: j
 	});
 }
 b.defaultProps = {
@@ -179,46 +196,59 @@ b.defaultProps = {
 	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
 	instanceId: a.string
 };
-function x({ id: e, disabled: t, duplicates: n, choice: r, correct: i, onChange: a, emptyResponseAreaWidth: o, emptyResponseAreaHeight: s, instanceId: c }) {
-	let { attributes: u, listeners: p, setNodeRef: m, transform: g, isDragging: v } = d({
+function x({ id: e, disabled: t, duplicates: n, choice: r, correct: a, onChange: o, emptyResponseAreaWidth: s, emptyResponseAreaHeight: c, instanceId: u, selectedItem: p, onSelectClick: m, onPlacementClick: h }) {
+	let [v, y] = i(!1), x = {
+		id: e,
+		choice: r,
+		instanceId: u,
+		fromChoice: !1,
+		type: "MaskBlank"
+	}, { attributes: S, listeners: C, setNodeRef: w, isDragging: T } = d({
 		id: `mask-blank-drag-${e}`,
 		disabled: t || !r,
-		data: {
-			id: e,
-			choice: r,
-			instanceId: c,
-			fromChoice: !1,
-			type: "MaskBlank"
-		}
-	}), { setNodeRef: y, isOver: x, active: S } = f({
+		data: x,
+		attributes: { tabIndex: r && !t ? 0 : -1 }
+	}), { setNodeRef: E, isOver: D, active: O } = f({
 		id: `mask-blank-drop-${e}`,
 		data: {
 			id: e,
 			accepts: ["MaskBlank"],
-			instanceId: c
+			instanceId: u
 		}
-	});
-	return /* @__PURE__ */ l(_, {
-		ref: (e) => {
-			m(e), y(e);
-		},
-		style: { transform: h.Translate.toString(g) },
-		dragged: v,
-		over: x,
-		...u,
-		...p,
-		children: /* @__PURE__ */ l(b, {
-			id: e,
-			disabled: t,
-			duplicates: n,
-			choice: r,
-			isOver: x,
-			dragItem: S?.data?.current,
-			correct: i,
-			onChange: a,
-			emptyResponseAreaWidth: o,
-			emptyResponseAreaHeight: s,
-			instanceId: c
+	}), k = !!p && p.fromChoice === !1 && p.id === e, A = () => {
+		t || (k ? m?.(x) : p ? h?.(e) : r && m?.(x));
+	}, j = !r && !t, M = !!r && !t, N = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), A());
+	}, P = !!p, F = D || P && v && !t;
+	return /* @__PURE__ */ l(g, {
+		ref: E,
+		role: j ? "button" : void 0,
+		tabIndex: j ? 0 : -1,
+		onClick: A,
+		onKeyDown: j ? N : void 0,
+		onMouseEnter: () => y(!0),
+		onMouseLeave: () => y(!1),
+		dragged: T,
+		over: F,
+		selected: k,
+		showsPointerCursor: P && !t,
+		children: /* @__PURE__ */ l(_, {
+			ref: w,
+			...M ? S : {},
+			...C,
+			children: /* @__PURE__ */ l(b, {
+				id: e,
+				disabled: t,
+				duplicates: n,
+				choice: r,
+				isOver: F,
+				dragItem: O?.data?.current,
+				correct: a,
+				onChange: o,
+				emptyResponseAreaWidth: s,
+				emptyResponseAreaHeight: c,
+				instanceId: u
+			})
 		})
 	});
 }
@@ -234,7 +264,10 @@ x.defaultProps = {
 	onChange: a.func,
 	emptyResponseAreaWidth: a.oneOfType([a.string, a.number]),
 	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
-	instanceId: a.string
+	instanceId: a.string,
+	selectedItem: a.object,
+	onSelectClick: a.func,
+	onPlacementClick: a.func
 };
 //#endregion
 export { x as default };

package/dist/components/dropdown.js

@@ -55,16 +55,7 @@ var y = v(c, "InlineMenu") || v(S.InlineMenu, "InlineMenu"), b = s, x = b.defaul
 		color: `${l.text()} !important`
 	}
 })), w = n(y)(() => ({
-	backgroundColor: l.background(),
-	border: `1px solid ${l.correct()} !important`,
-	"&:hover": {
-		border: `1px solid ${l.text()} `,
-		borderColor: "initial"
-	},
-	"&:focus": {
-		border: `1px solid ${l.text()}`,
-		borderColor: "initial"
-	},
+	"& .MuiPaper-root": { backgroundColor: l.background() },
 	"& .MuiList-root": { padding: 0 }
 })), T = n(f)(() => ({
 	height: 24,

package/dist/constructed-response.js

@@ -1,5 +1,5 @@
 import { withMask as e } from "./with-mask.js";
-import t from "./node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { clsx as t } from "./node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
 import "react";
 import { styled as n } from "@mui/material/styles";
 import { jsx as r } from "react/jsx-runtime";
@@ -23,10 +23,11 @@ var o = n(a)(() => ({
 			disabled: l || s,
 			disableUnderline: !0,
 			onChange: (e) => {
-				p({
+				let t = {
 					...i,
 					[m.id]: e
-				});
+				};
+				p(t);
 			},
 			markup: g || "",
 			charactersLimit: a ? _ : 25,

package/dist/drag-in-the-blank.d.ts

@@ -31,7 +31,17 @@ export default class DragInTheBlank extends React.Component {
     };
     handleDragStart: any;
     renderDragOverlay: any;
+    commitPlacement: any;
     handleDragEnd: any;
+    onDragCancel: any;
+    isSameItem: any;
+    toggleItemSelection: any;
+    cancelSelection: any;
+    endAnyLiveKeyboardDrag: any;
+    placeSelectedItem: any;
+    isClickSoonAfterDragEnd: () => boolean;
+    onItemClick: any;
+    onPlacementClick: any;
     getPositionDirection: any;
     render(): React.JSX.Element;
 }

package/dist/drag-in-the-blank.js

@@ -2,21 +2,22 @@ import { withMask as e } from "./with-mask.js";
 import t from "./choices/choice.js";
 import n from "./choices/index.js";
 import r from "./components/blank.js";
-import i from "react";
-import a from "prop-types";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { DragProvider as c } from "@pie-lib/drag";
-import { DragOverlay as l, rectIntersection as u } from "@dnd-kit/core";
+import { closestDroppableKeyboardCoordinates as i } from "./keyboard-coordinates.js";
+import a from "react";
+import o from "prop-types";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { DragProvider as l } from "@pie-lib/drag";
+import { DragOverlay as u, rectIntersection as d } from "@dnd-kit/core";
 //#region src/drag-in-the-blank.tsx
-var d = e("blank", (e) => (t, n, i) => {
+var f = 250, p = e("blank", (e) => (t, n, i) => {
 	let a = t.data?.dataset || {};
 	if (a.component === "blank") {
-		let { disabled: s, duplicates: c, correctResponse: l, feedback: u, showCorrectAnswer: d, emptyResponseAreaWidth: f, emptyResponseAreaHeight: p, instanceId: m, isDragging: h } = e, g = d ? l[a.id] : n[a.id], _ = g && e.choices.find((e) => e.id === g);
-		return /* @__PURE__ */ o(r, {
+		let { disabled: o, duplicates: c, correctResponse: l, feedback: u, showCorrectAnswer: d, emptyResponseAreaWidth: f, emptyResponseAreaHeight: p, instanceId: m, isDragging: h, selectedItem: g, onSelectClick: _, onPlacementClick: v } = e, y = d ? l[a.id] : n[a.id], b = y && e.choices.find((e) => e.id === y);
+		return /* @__PURE__ */ s(r, {
 			correct: d || u && u[a.id],
-			disabled: s,
+			disabled: o,
 			duplicates: c,
-			choice: _,
+			choice: b,
 			id: a.id,
 			emptyResponseAreaWidth: f,
 			emptyResponseAreaHeight: p,
@@ -25,70 +26,112 @@ var d = e("blank", (e) => (t, n, i) => {
 				t === void 0 ? delete r[e] : r[e] = t, i(r);
 			},
 			instanceId: m,
-			isDragging: h
+			isDragging: h,
+			selectedItem: g,
+			onSelectClick: _,
+			onPlacementClick: v
 		}, `${t.type}-${a.id}`);
 	}
-}), f = class extends i.Component {
+}), m = class extends a.Component {
 	constructor(e) {
 		super(e), this.state = {
 			activeDragItem: null,
-			dropAnimation: void 0
-		};
+			dropAnimation: void 0,
+			selectedItem: null
+		}, this.lastDragEndAt = 0;
 	}
 	static propTypes = {
-		markup: a.string,
-		layout: a.object,
-		choicesPosition: a.string,
-		choices: a.array,
-		value: a.object,
-		onChange: a.func,
-		duplicates: a.bool,
-		disabled: a.bool,
-		feedback: a.object,
-		correctResponse: a.object,
-		showCorrectAnswer: a.bool,
-		emptyResponseAreaWidth: a.oneOfType([a.string, a.number]),
-		emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
-		instanceId: a.string
+		markup: o.string,
+		layout: o.object,
+		choicesPosition: o.string,
+		choices: o.array,
+		value: o.object,
+		onChange: o.func,
+		duplicates: o.bool,
+		disabled: o.bool,
+		feedback: o.object,
+		correctResponse: o.object,
+		showCorrectAnswer: o.bool,
+		emptyResponseAreaWidth: o.oneOfType([o.string, o.number]),
+		emptyResponseAreaHeight: o.oneOfType([o.string, o.number]),
+		instanceId: o.string
 	};
 	static defaultProps = { instanceId: "drag-in-the-blank" };
 	handleDragStart = (e) => {
 		let { active: t } = e;
 		t?.data?.current && this.setState({
 			activeDragItem: t.data.current,
-			dropAnimation: void 0
+			dropAnimation: void 0,
+			selectedItem: t.data.current
 		});
 	};
 	renderDragOverlay = () => {
 		let { activeDragItem: e } = this.state;
-		return e && e.type === "MaskBlank" ? /* @__PURE__ */ o(t, {
+		return e && e.type === "MaskBlank" ? /* @__PURE__ */ s(t, {
 			disabled: e.disabled,
 			choice: e.choice,
 			instanceId: e.instanceId
 		}) : null;
 	};
-	handleDragEnd = (e) => {
-		let { active: t, over: n } = e, { onChange: r, value: i } = this.props, a = t?.data?.current, o = n?.data?.current, s = !!t && !!n && a?.type === "MaskBlank" && o?.accepts?.includes("MaskBlank");
-		if (this.setState({
-			activeDragItem: null,
-			dropAnimation: s ? null : void 0
-		}), !s || !r) return;
-		let c = a, l = o.id;
-		if (o.toChoiceBoard === !0) {
-			if (!c.fromChoice && c.id) {
-				let e = { ...i };
-				delete e[c.id], r(e);
+	commitPlacement = (e, t) => {
+		let { onChange: n, value: r } = this.props;
+		if (n) {
+			if (t === void 0) {
+				if (!e.fromChoice && e.id) {
+					let t = { ...r };
+					delete t[e.id], n(t);
+				}
+				return;
 			}
-		} else if (c.fromChoice === !0) {
-			if (l && l !== "drag-in-the-blank-droppable") {
-				let e = { ...i };
-				e[l] = c.choice.id, r(e);
+			if (e.fromChoice === !0) {
+				let i = { ...r };
+				i[t] = e.choice.id, n(i);
+			} else if (e.id && e.id !== t) {
+				let i = { ...r };
+				i[t] = e.choice.id, delete i[e.id], n(i);
 			}
-		} else if (c.id && c.id !== l) {
-			let e = { ...i };
-			e[l] = c.choice.id, delete e[c.id], r(e);
 		}
 	};
+	handleDragEnd = (e) => {
+		let { active: t, over: n } = e, r = t?.data?.current, i = n?.data?.current, a = !!t && !!n && r?.type === "MaskBlank" && i?.accepts?.includes("MaskBlank");
+		if (this.setState({
+			activeDragItem: null,
+			dropAnimation: a ? null : void 0
+		}), this.cancelSelection(), this.lastDragEndAt = Date.now(), !a) return;
+		let o = i.toChoiceBoard === !0 ? void 0 : i.id;
+		this.commitPlacement(r, o);
+	};
+	onDragCancel = () => {
+		this.setState({
+			activeDragItem: null,
+			dropAnimation: void 0
+		}), this.cancelSelection(), this.lastDragEndAt = Date.now();
+	};
+	isSameItem = (e, t) => !e || !t || e.fromChoice !== t.fromChoice ? !1 : e.fromChoice ? e.choice.id === t.choice.id : e.id === t.id;
+	toggleItemSelection = (e) => {
+		this.setState((t) => ({ selectedItem: this.isSameItem(t.selectedItem, e) ? null : e }));
+	};
+	cancelSelection = () => {
+		this.setState({ selectedItem: null });
+	};
+	endAnyLiveKeyboardDrag = () => {
+		this.state.activeDragItem && document.dispatchEvent(new KeyboardEvent("keydown", {
+			code: "Escape",
+			bubbles: !0,
+			cancelable: !0
+		}));
+	};
+	placeSelectedItem = (e) => {
+		let { selectedItem: t } = this.state;
+		t && (this.commitPlacement(t, e), this.cancelSelection(), this.endAnyLiveKeyboardDrag());
+	};
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < f;
+	onItemClick = (e) => {
+		this.isClickSoonAfterDragEnd() || (this.endAnyLiveKeyboardDrag(), this.toggleItemSelection(e));
+	};
+	onPlacementClick = (e) => {
+		this.isClickSoonAfterDragEnd() || this.placeSelectedItem(e);
+	};
 	getPositionDirection = (e) => {
 		let t, n, r;
 		switch (e) {
@@ -112,45 +155,58 @@ var d = e("blank", (e) => (t, n, i) => {
 		};
 	};
 	render() {
-		let { markup: e, duplicates: t, value: r, onChange: i, choicesPosition: a, choices: f, correctResponse: p, disabled: m, feedback: h, showCorrectAnswer: g, emptyResponseAreaWidth: _, emptyResponseAreaHeight: v, layout: y, instanceId: b } = this.props, x = a || "below", S = {
+		let { markup: e, duplicates: t, value: r, onChange: a, choicesPosition: o, choices: f, correctResponse: m, disabled: h, feedback: g, showCorrectAnswer: _, emptyResponseAreaWidth: v, emptyResponseAreaHeight: y, layout: b, instanceId: x } = this.props, S = o || "below", C = {
 			display: "flex",
 			minWidth: "100px",
-			...this.getPositionDirection(x)
+			...this.getPositionDirection(S)
 		};
-		return /* @__PURE__ */ o(c, {
+		return /* @__PURE__ */ s(l, {
 			onDragStart: this.handleDragStart,
 			onDragEnd: this.handleDragEnd,
-			collisionDetection: u,
-			children: /* @__PURE__ */ s("div", {
+			onDragCancel: this.onDragCancel,
+			collisionDetection: d,
+			keyboardCoordinateGetter: i,
+			keyboardCodes: {
+				start: ["Space", "Enter"],
+				cancel: ["Escape"],
+				end: ["Space", "Enter"]
+			},
+			children: /* @__PURE__ */ c("div", {
 				ref: (e) => this.rootRef = e,
-				style: S,
+				style: C,
 				children: [
-					/* @__PURE__ */ o(n, {
-						choicePosition: x,
+					/* @__PURE__ */ s(n, {
+						choicePosition: S,
 						choices: f,
 						value: r,
 						duplicates: t,
-						disabled: m,
-						instanceId: b
+						disabled: h,
+						instanceId: x,
+						selectedItem: this.state.selectedItem,
+						onSelectClick: this.onItemClick,
+						onPlacementClick: this.onPlacementClick
 					}),
-					/* @__PURE__ */ o(d, {
+					/* @__PURE__ */ s(p, {
 						elementType: "drag-in-the-blank",
 						markup: e,
-						layout: y,
+						layout: b,
 						value: r,
 						choices: f,
-						onChange: i,
-						disabled: m,
+						onChange: a,
+						disabled: h,
 						duplicates: t,
-						feedback: h,
-						correctResponse: p,
-						showCorrectAnswer: g,
-						emptyResponseAreaWidth: _,
-						emptyResponseAreaHeight: v,
-						instanceId: b,
-						isDragging: !!this.state.activeDragItem
+						feedback: g,
+						correctResponse: m,
+						showCorrectAnswer: _,
+						emptyResponseAreaWidth: v,
+						emptyResponseAreaHeight: y,
+						instanceId: x,
+						isDragging: !!this.state.activeDragItem,
+						selectedItem: this.state.selectedItem,
+						onSelectClick: this.onItemClick,
+						onPlacementClick: this.onPlacementClick
 					}),
-					/* @__PURE__ */ o(l, {
+					/* @__PURE__ */ s(u, {
 						style: { pointerEvents: "none" },
 						dropAnimation: this.state.dropAnimation,
 						children: this.renderDragOverlay()
@@ -161,4 +217,4 @@ var d = e("blank", (e) => (t, n, i) => {
 	}
 };
 //#endregion
-export { f as default };
+export { m as default };

package/dist/keyboard-coordinates.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/keyboard-coordinates.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.
+ */
+/**
+ * Custom keyboard coordinate getter for drag-in-the-blank's Tab-based placement.
+ *
+ * Tab/Shift+Tab cycle the dragged item directly onto the next/previous enabled
+ * droppable — a blank (`mask-blank-drop-{id}`), sorted by on-screen position
+ * (top-to-bottom, then left-to-right, since blanks sit inline in flowing text rather
+ * than a simple list) — followed by the choice board as a fixed last stop (see below
+ * for why the board isn't sorted alongside the blanks).
+ *
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving
+ * the existing free-form arrow-key dragging behavior completely unchanged.
+ */
+export declare const closestDroppableKeyboardCoordinates: (event: any, { active, context, currentCoordinates }: {
+    active: any;
+    context: any;
+    currentCoordinates: any;
+}) => any;

package/dist/keyboard-coordinates.js

@@ -0,0 +1,49 @@
+import { KeyboardCode as e, defaultKeyboardCoordinateGetter as t } from "@dnd-kit/core";
+//#region src/keyboard-coordinates.ts
+var n = "drag-in-the-blank-droppable", r = (r, { active: a, context: o, currentCoordinates: s }) => {
+	let { code: c } = r, l = c === e.Tab, u = c === e.Down || c === e.Up || c === e.Left || c === e.Right;
+	if (!l && !u) return;
+	if (u) return t(r, {
+		context: o,
+		currentCoordinates: s
+	});
+	r.preventDefault();
+	let { droppableRects: d, droppableContainers: f, collisionRect: p } = o;
+	if (!d || d.size === 0) return s;
+	let m = a?.data?.current, h = m && m.fromChoice === !1 && m.id != null ? `mask-blank-drop-${m.id}` : void 0, g = [], _;
+	for (let [e, t] of f) {
+		if (t?.disabled || e === h) continue;
+		let r = d.get(e);
+		if (!r) continue;
+		let i = {
+			x: r.left + r.width / 2,
+			y: r.top + r.height / 2
+		}, a = {
+			id: e,
+			rect: r,
+			dropPosition: {
+				x: r.left,
+				y: r.top + r.height / 2
+			},
+			center: i
+		};
+		e === n ? _ = a : g.push(a);
+	}
+	if (g.length === 0 && !_) return s;
+	let v = r.shiftKey;
+	g.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), _ && g.push(_);
+	let y = p ? {
+		x: p.left + p.width / 2,
+		y: p.top + p.height / 2
+	} : s, b = g.findIndex((e) => y.x >= e.rect.left && y.x <= e.rect.right && y.y >= e.rect.top && y.y <= e.rect.bottom);
+	if (b === -1) {
+		let e = Infinity;
+		for (let t = 0; t < g.length; t++) {
+			let n = i(s, g[t].dropPosition);
+			n < e && (e = n, b = t);
+		}
+	}
+	return g[v ? (b - 1 + g.length) % g.length : (b + 1) % g.length].dropPosition;
+}, i = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
+//#endregion
+export { r as closestDroppableKeyboardCoordinates };

package/dist/mask.js

@@ -17,7 +17,7 @@ var s = i("div")(({ theme: e }) => ({
 	if (!(n && l.includes(r))) return t;
 }, d = (e) => {
 	let t = e.leaves.find((e) => r(e, "marks", []).length);
-	return t ? t.marks[0] : null;
+	return t ? t.marks : null;
 }, f = (t, n, r, i, a, l) => {
 	if (!n) return null;
 	let p = [];
@@ -37,13 +37,9 @@ var s = i("div")(({ theme: e }) => ({
 				let n = t.text, r = u(a, n);
 				return r ? e + r : e;
 			}, ""), r = d(t);
-			if (r) {
-				let t;
-				for (t in e) if (e[t] === r.type) {
-					let e = t;
-					p.push(/* @__PURE__ */ o(e, { children: n }, h));
-					break;
-				}
+			if (r?.length > 0) {
+				let t = r.map((t) => Object.keys(e).find((n) => e[n] === t.type)).filter(Boolean);
+				t.length > 0 ? p.push(t.reduceRight((e, t, n) => /* @__PURE__ */ o(t, { children: e }, `${h}-${t}-${n}`), n)) : p.push(n);
 			} else n.length > 0 && p.push(n);
 		} else {
 			let e = f(t, n, r, i, t, l);
@@ -96,4 +92,4 @@ var s = i("div")(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { m as default };
+export { m as default, f as renderChildren };

package/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js

@@ -13,4 +13,4 @@ function t() {
 	return i;
 }
 //#endregion
-export { t as default };
+export { t as clsx, t as default };

package/dist/serialization.js

@@ -129,4 +129,4 @@ var n = e(), r = t("@pie-lib:mask-markup:serialization"), i = ["span"], a = [
 	};
 };
 //#endregion
-export { _ as MARK_TAGS, b as deserialize };
+export { _ as MARK_TAGS, b as deserialize, d as parseStyleString, f as reactAttributes };

package/package.json

@@ -1,22 +1,26 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "3.0.4-next.33",
+  "version": "3.0.4-next.35",
   "description": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pie-framework/pie-elements-ng.git",
+    "directory": "packages/lib-react/mask-markup"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/style": "^0.8.0",
+    "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "4.0.3-next.38",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.31",
-    "@pie-lib/render-ui": "6.1.1-next.38",
+    "@pie-lib/drag": "4.0.3-next.39",
+    "@pie-lib/editable-html-tip-tap": "2.1.2-next.33",
+    "@pie-lib/render-ui": "6.1.1-next.39",
     "debug": "^4.1.1",
     "prop-types": "^15.7.2",
     "to-style": "^1.3.3",
     "@dnd-kit/core": "^6.3.1",
     "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
     "@pie-element/shared-lodash": "0.1.1-next.1",
-    "@dnd-kit/utilities": "^3.2.2",
     "clsx": "^2.1.1"
   },
   "type": "module",