alexsys-exam-renderer 0.1.4 → 0.1.5

package/dist/index.js

@@ -1,49 +1,49 @@
 import { Fragment as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 import { DragDropProvider as c, useDraggable as l, useDroppable as u } from "@dnd-kit/react";
-import { Apple as d, CheckCircle2 as f, Circle as p, Diamond as m, Eraser as h, Flower2 as g, Heart as _, Hexagon as v, Mic as y, PencilRuler as b, Pentagon as x, RectangleHorizontal as S, RotateCcw as ee, Square as C, Star as w, Sun as T, Triangle as E, VolumeX as D, XCircle as O } from "lucide-react";
-import { Arc as k, Circle as A, Group as j, Layer as te, Line as M, Rect as N, Stage as ne, Text as re } from "react-konva";
-import { move as P } from "@dnd-kit/helpers";
-import { useSortable as F } from "@dnd-kit/react/sortable";
+import { Apple as d, CheckCircle2 as f, Circle as p, Diamond as m, Eraser as h, Flower2 as g, Heart as _, Hexagon as v, Mic as y, PencilRuler as b, Pentagon as x, RectangleHorizontal as S, RotateCcw as C, Square as w, Star as T, Sun as E, Triangle as D, VolumeX as O, XCircle as k } from "lucide-react";
+import { Arc as A, Circle as j, Group as M, Layer as ee, Line as N, Rect as P, Stage as te, Text as F } from "react-konva";
+import { move as I } from "@dnd-kit/helpers";
+import { useSortable as L } from "@dnd-kit/react/sortable";
 //#region src/exam-session/examPoints.ts
-function ie(e) {
+function ne(e) {
 	if (!e) return 0;
 	let t = Number.parseFloat(e.replace(",", "."));
 	return Number.isFinite(t) ? t : 0;
 }
-function I(e) {
+function R(e) {
 	let t = Math.round(e * 100) / 100;
 	return String(t);
 }
-function ae(e) {
-	return ie(e.maxScore);
-}
-function oe(e) {
-	return e.questions.some((e) => se(e.maxScore));
+function re(e) {
+	return ne(e.maxScore);
 }
-function L(e) {
-	return oe(e) ? ce(e.questions.reduce((e, t) => e + ae(t), 0)) : ie(e.points);
+function ie(e) {
+	return e.questions.some((e) => oe(e.maxScore));
 }
-function R(e) {
-	return I(L(e));
+function ae(e) {
+	return ie(e) ? se(e.questions.reduce((e, t) => e + re(t), 0)) : ne(e.points);
 }
 function z(e) {
+	return R(ae(e));
+}
+function B(e) {
 	return {
 		...e,
-		points: R(e)
+		points: z(e)
 	};
 }
-function se(e) {
+function oe(e) {
 	return typeof e == "string" && e.trim().length > 0;
 }
-function ce(e) {
+function se(e) {
 	return Math.round(e * 100) / 100;
 }
 //#endregion
 //#region src/exam-session/examScoring.ts
-var le = 1e3, ue = 600, B = 70;
-function de(e, t) {
-	let n = e.sections.filter((e) => e.isScored !== !1).map((e) => fe(e, t)), r = U(n, (e) => e.correctCount), i = U(n, (e) => e.incorrectCount), a = U(n, (e) => e.unansweredCount), o = i + a, s = U(n, (e) => e.totalUnits), c = W(U(n, (e) => e.maxScore)), l = W(U(n, (e) => e.score));
+var ce = 1e3, le = 600, V = 70;
+function ue(e, t) {
+	let n = e.sections.filter((e) => e.isScored !== !1).map((e) => de(e, t)), r = W(n, (e) => e.correctCount), i = W(n, (e) => e.incorrectCount), a = W(n, (e) => e.unansweredCount), o = i + a, s = W(n, (e) => e.totalUnits), c = G(W(n, (e) => e.maxScore)), l = G(W(n, (e) => e.score));
 	return {
 		attentionWarningCount: 0,
 		correctCount: r,
@@ -51,7 +51,7 @@ function de(e, t) {
 		incorrectCount: i,
 		maxScore: c,
 		notCorrectCount: o,
-		percentage: c > 0 ? W(l / c * 100) : 0,
+		percentage: c > 0 ? G(l / c * 100) : 0,
 		score: l,
 		sections: n,
 		subject: e.subject,
@@ -60,16 +60,16 @@ function de(e, t) {
 		unansweredCount: a
 	};
 }
-function fe(e, t) {
-	let n = oe(e), r = L(e), i = e.questions.map((e) => ({
-		maxScore: n ? ae(e) : 0,
-		units: pe(e, t)
-	})), a = !n && U(i, (e) => e.units.length) > 0 ? r / U(i, (e) => e.units.length) : 0, o = i.flatMap((t) => {
+function de(e, t) {
+	let n = ie(e), r = ae(e), i = e.questions.map((e) => ({
+		maxScore: n ? re(e) : 0,
+		units: fe(e, t)
+	})), a = !n && W(i, (e) => e.units.length) > 0 ? r / W(i, (e) => e.units.length) : 0, o = i.flatMap((t) => {
 		let r = n ? t.units.length > 0 ? t.maxScore / t.units.length : 0 : a;
 		return t.units.map((t) => ({
 			...t,
-			maxScore: W(r),
-			score: t.status === "correct" ? W(r) : 0,
+			maxScore: G(r),
+			score: t.status === "correct" ? G(r) : 0,
 			sectionId: e.id
 		}));
 	}), s = Ae(o, "correct"), c = Ae(o, "incorrect"), l = Ae(o, "unanswered"), u = c + l;
@@ -80,7 +80,7 @@ function fe(e, t) {
 		incorrectCount: c,
 		maxScore: r,
 		notCorrectCount: u,
-		score: W(U(o, (e) => e.score)),
+		score: G(W(o, (e) => e.score)),
 		title: e.title,
 		tone: e.tone,
 		totalUnits: o.length,
@@ -88,52 +88,56 @@ function fe(e, t) {
 		units: o
 	};
 }
-function pe(e, t) {
+function fe(e, t) {
 	switch (e.type) {
 		case "inline-inputs":
 		case "equation-inputs": return e.items.flatMap((n) => {
 			if (n.answers?.length) return n.answers.flatMap((r) => {
 				if (!r.correctAnswer) return [];
 				let i = `${e.id}:${n.id}:${r.id}`;
-				return [V(i, e.id, r.before, r.correctAnswer, t[i])];
+				return [H(i, e.id, r.before, r.correctAnswer, t[i])];
 			});
 			if (!n.correctAnswer) return [];
 			let r = `${e.id}:${n.id}`;
-			return [V(r, e.id, n.before, n.correctAnswer, t[r])];
+			return [H(r, e.id, n.before, n.correctAnswer, t[r])];
 		});
-		case "number-line": return [V(e.id, e.id, e.expression, e.correctAnswer, t[e.id])];
+		case "number-line": return [H(e.id, e.id, e.expression, e.correctAnswer, t[e.id])];
+		case "operation-solving": return [H(e.id, e.id, me(e), e.correctAnswer, t[e.id])];
 		case "visual-choice": return he(e.id, e.id, e.grading.pairs, t[e.id]);
 		case "length-estimation": return ge(e, t);
 		case "shape-choice": return he(e.id, e.id, e.grading.pairs, t[e.id]);
 		case "drag-match": return he(e.id, e.id, e.grading?.pairs, t[e.id]);
 		case "drawing-grid": return [xe(e, t[e.id])];
 		case "table-response": return ve(e, t[e.id]);
-		case "text-input": return e.correctAnswer ? [V(e.id, e.id, e.prompt, e.correctAnswer, t[e.id])] : [];
+		case "text-input": return e.correctAnswer ? [H(e.id, e.id, e.prompt, e.correctAnswer, t[e.id])] : [];
 		case "word-problem": return e.parts.flatMap((n) => {
 			let r = `${e.id}:${n.id}`;
-			return n.type === "coin-table" ? ye(e.id, n, t[r]) : n.correctAnswer ? [V(r, e.id, n.prompt, n.correctAnswer, t[r])] : [];
+			return n.type === "coin-table" ? ye(e.id, n, t[r]) : n.correctAnswer ? [H(r, e.id, n.prompt, n.correctAnswer, t[r])] : [];
 		});
 		case "sortable-answer": return [];
 		case "label-placement": return be(e.id, e.grading?.targetsByLabelId, t[e.id]);
-		case "audio-recording": return [me(e, t[e.id])];
+		case "audio-recording": return [pe(e, t[e.id])];
 	}
 }
-function me(e, t) {
-	return t?.kind === "audio-recording" ? H(e.id, e.id, e.expectedAnswer, t.evaluation.isCorrect ? "correct" : "incorrect") : H(e.id, e.id, e.expectedAnswer, "unanswered");
+function pe(e, t) {
+	return t?.kind === "audio-recording" ? U(e.id, e.id, e.expectedAnswer, t.evaluation.isCorrect ? "correct" : "incorrect") : U(e.id, e.id, e.expectedAnswer, "unanswered");
+}
+function me(e) {
+	return `${e.leftOperand} ${e.operator} ${e.rightOperand} =`;
 }
-function V(e, t, n, r, i) {
-	return r ? i?.kind === "handwritten-number" ? i.strokes.length === 0 ? H(e, t, n, "unanswered") : H(e, t, n, i.recognizedValue && Oe(i.recognizedValue, r) ? "correct" : "incorrect") : i?.kind !== "text" || ke(i.value) === "" ? H(e, t, n, "unanswered") : H(e, t, n, Oe(i.value, r) ? "correct" : "incorrect") : H(e, t, n, "incorrect");
+function H(e, t, n, r, i) {
+	return r ? i?.kind === "handwritten-number" ? i.strokes.length === 0 ? U(e, t, n, "unanswered") : U(e, t, n, i.recognizedValue && Oe(i.recognizedValue, r) ? "correct" : "incorrect") : i?.kind !== "text" || ke(i.value) === "" ? U(e, t, n, "unanswered") : U(e, t, n, Oe(i.value, r) ? "correct" : "incorrect") : U(e, t, n, "incorrect");
 }
 function he(e, t, n, r) {
 	return n ? Object.entries(n).map(([n, i]) => {
 		let a = r?.kind === "matches" ? r.pairs[n] : void 0, o = a ? a === i ? "correct" : "incorrect" : "unanswered";
-		return H(`${e}:${n}`, t, n, o);
+		return U(`${e}:${n}`, t, n, o);
 	}) : [];
 }
 function ge(e, t) {
 	let n = e.items.map((n) => {
 		let r = `${e.id}:squares:${n.id}`;
-		return V(r, e.id, n.label, n.squareLength.toString(), t[r]);
+		return H(r, e.id, n.label, n.squareLength.toString(), t[r]);
 	}), r = e.items.flatMap((n) => {
 		if (!n.correctColorId) return [];
 		let r = `${e.id}:color:${n.id}`;
@@ -142,33 +146,33 @@ function ge(e, t) {
 	return n.concat(r);
 }
 function _e(e, t, n, r, i) {
-	return i?.kind !== "choice" || !i.choiceId ? H(e, t, n, "unanswered") : H(e, t, n, i.choiceId === r ? "correct" : "incorrect");
+	return i?.kind !== "choice" || !i.choiceId ? U(e, t, n, "unanswered") : U(e, t, n, i.choiceId === r ? "correct" : "incorrect");
 }
 function ve(e, t) {
 	return e.columns.flatMap((n) => {
 		if (typeof n.correctCount != "number") return [];
 		let r = t?.kind === "coin-table" ? t.counts[n.id] : void 0, i = r === void 0 ? "unanswered" : r === n.correctCount ? "correct" : "incorrect";
-		return H(`${e.id}:${n.id}`, e.id, n.title, i);
+		return U(`${e.id}:${n.id}`, e.id, n.title, i);
 	});
 }
 function ye(e, t, n) {
 	return t.columns.flatMap((r) => {
 		if (typeof r.correctCount != "number") return [];
 		let i = n?.kind === "coin-table" ? n.counts[r.id] : void 0, a = i === void 0 ? "unanswered" : i === r.correctCount ? "correct" : "incorrect";
-		return H(`${e}:${t.id}:${r.id}`, e, r.title, a);
+		return U(`${e}:${t.id}:${r.id}`, e, r.title, a);
 	});
 }
 function be(e, t, n) {
 	return t ? Object.entries(t).map(([t, r]) => {
 		let i = n?.kind === "placements" ? n.placements[t]?.targetId : void 0, a = i ? i === r ? "correct" : "incorrect" : "unanswered";
-		return H(`${e}:${t}`, e, t, a);
+		return U(`${e}:${t}`, e, t, a);
 	}) : [];
 }
 function xe(e, t) {
 	let n = e.grading.expectedSegments, r = t?.kind === "drawing" && ((t.elements?.length ?? 0) > 0 || (t.strokes?.length ?? 0) > 0);
-	if (t?.kind !== "drawing" || !r) return H(e.id, e.id, e.prompt, "unanswered");
+	if (t?.kind !== "drawing" || !r) return U(e.id, e.id, e.prompt, "unanswered");
 	let i = n.every((n) => Se(t, e, n));
-	return H(e.id, e.id, e.prompt, i ? "correct" : "incorrect");
+	return U(e.id, e.id, e.prompt, i ? "correct" : "incorrect");
 }
 function Se(e, t, n) {
 	let r = Ee(t, n.from), i = Ee(t, n.to);
@@ -209,11 +213,11 @@ function Ce(e) {
 	return t.concat(n);
 }
 function we(e, t, n) {
-	let r = je(e.start, t) <= B && je(e.end, n) <= B, i = je(e.start, n) <= B && je(e.end, t) <= B;
-	return !r && !i ? !1 : Te(e.points, t, n, B);
+	let r = K(e.start, t) <= V && K(e.end, n) <= V, i = K(e.start, n) <= V && K(e.end, t) <= V;
+	return !r && !i ? !1 : Te(e.points, t, n, V);
 }
 function Te(e, t, n, r) {
-	for (let i = 0; i < e.length - 1; i += 4) if (Me({
+	for (let i = 0; i < e.length - 1; i += 4) if (je({
 		x: e[i],
 		y: e[i + 1]
 	}, t, n) > r) return !1;
@@ -228,11 +232,11 @@ function Ee(e, t) {
 }
 function De(e, t) {
 	return {
-		x: e / 100 * le,
-		y: t / 100 * ue
+		x: e / 100 * ce,
+		y: t / 100 * le
 	};
 }
-function H(e, t, n, r) {
+function U(e, t, n, r) {
 	return {
 		id: e,
 		label: n,
@@ -250,31 +254,31 @@ function ke(e) {
 function Ae(e, t) {
 	return e.filter((e) => e.status === t).length;
 }
-function U(e, t) {
+function W(e, t) {
 	return e.reduce((e, n) => e + t(n), 0);
 }
-function W(e) {
+function G(e) {
 	return Math.round(e * 100) / 100;
 }
-function je(e, t) {
+function K(e, t) {
 	return Math.hypot(e.x - t.x, e.y - t.y);
 }
-function Me(e, t, n) {
+function je(e, t, n) {
 	let r = n.x - t.x, i = n.y - t.y, a = r * r + i * i;
-	if (a === 0) return je(e, t);
+	if (a === 0) return K(e, t);
 	let o = Math.max(0, Math.min(1, ((e.x - t.x) * r + (e.y - t.y) * i) / a));
-	return je(e, {
+	return K(e, {
 		x: t.x + o * r,
 		y: t.y + o * i
 	});
 }
 //#endregion
 //#region src/exam-session/interactions/CoinTableResponse.tsx
-var Ne = 0, Pe = 12;
-function Fe({ columns: e, value: t, onChange: n }) {
+var Me = 0, Ne = 12;
+function Pe({ columns: e, value: t, onChange: n }) {
 	let r = t?.counts ?? {};
 	function i(e, t) {
-		let i = e.maxCoins ?? Pe, a = Math.max(Ne, Math.min(i, t));
+		let i = e.maxCoins ?? Ne, a = Math.max(Me, Math.min(i, t));
 		n({
 			kind: "coin-table",
 			counts: {
@@ -286,7 +290,7 @@ function Fe({ columns: e, value: t, onChange: n }) {
 	return /* @__PURE__ */ o("div", {
 		className: "response-table",
 		children: e.map((e) => {
-			let t = r[e.id] ?? 0, n = e.maxCoins ?? Pe;
+			let t = r[e.id] ?? 0, n = e.maxCoins ?? Ne;
 			return /* @__PURE__ */ s("div", {
 				className: "response-column",
 				children: [
@@ -311,7 +315,7 @@ function Fe({ columns: e, value: t, onChange: n }) {
 								children: "إِضافَةٌ"
 							}), /* @__PURE__ */ o("button", {
 								className: "coin-action coin-action--secondary",
-								disabled: t <= Ne,
+								disabled: t <= Me,
 								onClick: () => i(e, t - 1),
 								type: "button",
 								children: "حَذْفٌ"
@@ -338,17 +342,17 @@ function Fe({ columns: e, value: t, onChange: n }) {
 }
 //#endregion
 //#region src/renderer/shapeCatalog.tsx
-var Ie = {
+var Fe = {
 	circle: p,
 	diamond: m,
 	heart: _,
 	hexagon: v,
 	pentagon: x,
 	rectangle: S,
-	square: C,
-	star: w,
-	triangle: E
-}, Le = {
+	square: w,
+	star: T,
+	triangle: D
+}, Ie = {
 	circle: "Cercle",
 	diamond: "Losange",
 	heart: "Coeur",
@@ -358,15 +362,15 @@ var Ie = {
 	square: "Carre",
 	star: "Etoile",
 	triangle: "Triangle"
-}, Re = Object.keys(Le).map((e) => ({
-	label: Le[e],
+}, Le = Object.keys(Ie).map((e) => ({
+	label: Ie[e],
 	value: e
 }));
-function ze(e) {
-	return Le[e];
+function Re(e) {
+	return Ie[e];
 }
-function Be({ shapeId: e, title: t }) {
-	let n = Ie[e];
+function ze({ shapeId: e, title: t }) {
+	let n = Fe[e];
 	return /* @__PURE__ */ o("span", {
 		"aria-label": t,
 		role: t ? "img" : void 0,
@@ -376,7 +380,7 @@ function Be({ shapeId: e, title: t }) {
 }
 //#endregion
 //#region src/exam-session/interactions/DragMatch.tsx
-function Ve({ items: e, targets: t, value: n, onChange: r }) {
+function Be({ items: e, targets: t, value: n, onChange: r }) {
 	let i = n?.pairs ?? {}, a = new Set(Object.values(i));
 	return /* @__PURE__ */ o(c, {
 		onDragEnd: (e) => {
@@ -394,10 +398,10 @@ function Ve({ items: e, targets: t, value: n, onChange: r }) {
 			className: "drag-match",
 			children: [/* @__PURE__ */ o("div", {
 				className: "drag-match__items",
-				children: e.filter((e) => !a.has(e.id)).map((e) => /* @__PURE__ */ o(He, { item: e }, e.id))
+				children: e.filter((e) => !a.has(e.id)).map((e) => /* @__PURE__ */ o(Ve, { item: e }, e.id))
 			}), /* @__PURE__ */ o("div", {
 				className: "drag-match__targets",
-				children: t.map((t) => /* @__PURE__ */ o(Ue, {
+				children: t.map((t) => /* @__PURE__ */ o(He, {
 					assignedItem: e.find((e) => e.id === i[t.id]),
 					target: t
 				}, t.id))
@@ -405,7 +409,7 @@ function Ve({ items: e, targets: t, value: n, onChange: r }) {
 		})
 	});
 }
-function He({ item: e }) {
+function Ve({ item: e }) {
 	let { ref: t, isDragging: n } = l({ id: e.id });
 	return /* @__PURE__ */ o("button", {
 		className: n ? "drag-pill drag-pill--dragging" : "drag-pill",
@@ -414,74 +418,74 @@ function He({ item: e }) {
 		children: e.label
 	});
 }
-function Ue({ assignedItem: e, target: t }) {
+function He({ assignedItem: e, target: t }) {
 	let { ref: n, isDropTarget: r } = u({ id: t.id });
 	return /* @__PURE__ */ s("div", {
 		className: r ? "drop-slot drop-slot--active" : "drop-slot",
 		ref: n,
 		children: [/* @__PURE__ */ o("span", {
 			className: t.shapeId ? "drop-slot__visual drop-slot__visual--shape" : "drop-slot__visual",
-			children: t.shapeId ? /* @__PURE__ */ o(Be, {
+			children: t.shapeId ? /* @__PURE__ */ o(ze, {
 				shapeId: t.shapeId,
 				title: t.label
 			}) : t.label
-		}), e ? /* @__PURE__ */ o(He, { item: e }) : /* @__PURE__ */ o("span", { children: "ضع الإجابة هنا" })]
+		}), e ? /* @__PURE__ */ o(Ve, { item: e }) : /* @__PURE__ */ o("span", { children: "ضع الإجابة هنا" })]
 	});
 }
 //#endregion
 //#region src/exam-session/interactions/HandwrittenNumberAnswer.tsx
-var We = 132, Ge = 88, Ke = 650;
-function G({ ariaLabel: e, onChange: n, onClear: a, recognizer: c, value: l }) {
-	let u = l?.strokes ?? [], d = u.length === 0, f = r(n), [p, m] = i(!1), [g, _] = i(!1), v = !!c?.isAvailable(), y = c?.getStatus?.() ?? (v ? "ready" : "unavailable"), b = y === "preparing" || y === "error", x = y === "preparing" ? "preparing-model" : y === "error" ? "model-error" : d || p ? "idle" : l?.recognizedValue === void 0 ? !v || y === "unavailable" ? "unavailable" : g ? "unrecognized" : "recognizing" : "recognized";
+var Ue = 132, We = 88, Ge = 650;
+function q({ ariaLabel: e, canvasWidth: n = Ue, onChange: a, onClear: c, recognizer: l, value: u }) {
+	let d = u?.strokes ?? [], f = d.length === 0, p = r(a), [m, g] = i(!1), [_, v] = i(!1), y = !!l?.isAvailable(), b = l?.getStatus?.() ?? (y ? "ready" : "unavailable"), x = b === "preparing" || b === "error", S = b === "preparing" ? "preparing-model" : b === "error" ? "model-error" : f || m ? "idle" : u?.recognizedValue === void 0 ? !y || b === "unavailable" ? "unavailable" : _ ? "unrecognized" : "recognizing" : "recognized";
 	t(() => {
-		f.current = n;
-	}, [n]), t(() => {
-		if (d || p || !l || !c || l.recognizedValue !== void 0 || !v || y !== "ready") return;
+		p.current = a;
+	}, [a]), t(() => {
+		if (f || m || !u || !l || u.recognizedValue !== void 0 || !y || b !== "ready") return;
 		let e = !1, t = window.setTimeout(() => {
-			c.recognize(l).then((t) => {
+			l.recognize(u).then((t) => {
 				if (!e) {
 					if (t.recognizedValue === void 0) {
-						_(!0);
+						v(!0);
 						return;
 					}
-					f.current(t);
+					p.current(t);
 				}
 			}).catch(() => {
-				e || _(!0);
+				e || v(!0);
 			});
-		}, Ke);
+		}, Ge);
 		return () => {
 			e = !0, window.clearTimeout(t);
 		};
 	}, [
-		p,
-		d,
+		m,
+		f,
+		b,
 		y,
-		v,
-		c,
-		l
+		l,
+		u
 	]);
-	function S(e) {
-		_(!1), n({
-			canvasHeight: Ge,
-			canvasWidth: We,
+	function C(e) {
+		v(!1), a({
+			canvasHeight: We,
+			canvasWidth: n,
 			kind: "handwritten-number",
 			strokes: e
 		});
 	}
-	function ee(e) {
-		if (b) return;
+	function w(e) {
+		if (x) return;
 		let t = e.target.getStage()?.getPointerPosition();
-		t && (e.evt.preventDefault(), m(!0), S([...u, {
+		t && (e.evt.preventDefault(), g(!0), C([...d, {
 			id: `stroke-${Date.now()}-${Math.round(t.x)}-${Math.round(t.y)}`,
 			points: [t.x, t.y],
 			timestamps: [Date.now()]
 		}]));
 	}
-	function C(e) {
-		if (b || d || !e.evt.buttons && e.evt.pointerType === "mouse") return;
+	function T(e) {
+		if (x || f || !e.evt.buttons && e.evt.pointerType === "mouse") return;
 		let t = e.target.getStage()?.getPointerPosition();
-		t && (e.evt.preventDefault(), S(u.map((e, n) => n === u.length - 1 ? {
+		t && (e.evt.preventDefault(), C(d.map((e, n) => n === d.length - 1 ? {
 			...e,
 			points: [
 				...e.points,
@@ -491,66 +495,66 @@ function G({ ariaLabel: e, onChange: n, onClear: a, recognizer: c, value: l }) {
 			timestamps: [...e.timestamps ?? [], Date.now()]
 		} : e)));
 	}
-	function w(e) {
-		b || (e.evt.preventDefault(), m(!1));
+	function E(e) {
+		x || (e.evt.preventDefault(), g(!1));
 	}
-	function T() {
-		m(!1), S([]), a?.();
+	function D() {
+		g(!1), C([]), c?.();
 	}
 	return /* @__PURE__ */ s("div", {
-		"aria-disabled": b,
+		"aria-disabled": x,
 		"aria-label": e,
 		className: "handwritten-number-answer",
-		"data-model-state": y,
+		"data-model-state": b,
 		children: [
-			/* @__PURE__ */ s(ne, {
+			/* @__PURE__ */ s(te, {
 				className: "handwritten-number-stage",
-				height: Ge,
-				onPointerCancel: w,
-				onPointerDown: ee,
-				onPointerMove: C,
-				onPointerUp: w,
+				height: We,
+				onPointerCancel: E,
+				onPointerDown: w,
+				onPointerMove: T,
+				onPointerUp: E,
 				role: "img",
-				width: We,
-				children: [/* @__PURE__ */ s(te, {
+				width: n,
+				children: [/* @__PURE__ */ s(ee, {
 					listening: !1,
 					children: [
-						/* @__PURE__ */ o(N, {
+						/* @__PURE__ */ o(P, {
 							cornerRadius: 14,
 							fill: "#fff",
-							height: Ge,
+							height: We,
 							stroke: "#cfe3d9",
 							strokeWidth: 2,
-							width: We,
+							width: n,
 							x: 0,
 							y: 0
 						}),
-						/* @__PURE__ */ o(M, {
+						/* @__PURE__ */ o(N, {
 							dash: [6, 8],
 							points: [
 								16,
-								Ge - 18,
-								We - 16,
-								Ge - 18
+								We - 18,
+								n - 16,
+								We - 18
 							],
 							stroke: "#dbe9e2",
 							strokeWidth: 2
 						}),
-						d ? /* @__PURE__ */ o(re, {
+						f ? /* @__PURE__ */ o(F, {
 							align: "center",
 							fill: "#9aaca3",
 							fontFamily: "Arial, sans-serif",
 							fontSize: 15,
 							fontStyle: "bold",
-							height: Ge,
+							height: We,
 							text: "ارسم هنا",
 							verticalAlign: "middle",
-							width: We,
+							width: n,
 							x: 0,
 							y: 0
 						}) : null
 					]
-				}), /* @__PURE__ */ o(te, { children: u.map((e) => /* @__PURE__ */ o(M, {
+				}), /* @__PURE__ */ o(ee, { children: d.map((e) => /* @__PURE__ */ o(N, {
 					globalCompositeOperation: "source-over",
 					lineCap: "round",
 					lineJoin: "round",
@@ -563,21 +567,21 @@ function G({ ariaLabel: e, onChange: n, onClear: a, recognizer: c, value: l }) {
 			/* @__PURE__ */ o("button", {
 				"aria-label": "مسح الجواب المرسوم",
 				className: "handwritten-number-clear",
-				disabled: d || b,
-				onClick: T,
+				disabled: f || x,
+				onClick: D,
 				type: "button",
 				children: /* @__PURE__ */ o(h, { "aria-hidden": "true" })
 			}),
-			x !== "idle" && x !== "unavailable" ? /* @__PURE__ */ o("span", {
+			S !== "idle" && S !== "unavailable" ? /* @__PURE__ */ o("span", {
 				"aria-live": "polite",
 				className: "handwritten-number-status",
-				"data-state": x,
-				children: qe(x, l?.recognizedValue)
+				"data-state": S,
+				children: Ke(S, u?.recognizedValue)
 			}) : null
 		]
 	});
 }
-function qe(e, t) {
+function Ke(e, t) {
 	switch (e) {
 		case "recognizing": return "جارٍ التعرّف على الرقم…";
 		case "recognized": return `تمّ التعرّف: ${t ?? ""}`;
@@ -590,7 +594,7 @@ function qe(e, t) {
 }
 //#endregion
 //#region src/exam-session/interactions/ColorPenPicker.tsx
-function Je({ ariaLabel: e, className: t = "", colors: n, disabled: r = !1, onChange: i, selectedColorId: a }) {
+function qe({ ariaLabel: e, className: t = "", colors: n, disabled: r = !1, onChange: i, selectedColorId: a }) {
 	return /* @__PURE__ */ o("div", {
 		"aria-label": e,
 		className: ["color-pen-picker", t].filter(Boolean).join(" "),
@@ -614,7 +618,7 @@ function Je({ ariaLabel: e, className: t = "", colors: n, disabled: r = !1, onCh
 }
 //#endregion
 //#region src/exam-session/interactions/geometryColors.ts
-var K = [
+var Je = [
 	{
 		id: "green",
 		label: "أَخْضَرُ",
@@ -645,18 +649,18 @@ function Xe(e, t) {
 	return t ? e.find((e) => e.id === t || e.value === t)?.id ?? e[0]?.id ?? "green" : e[0]?.id ?? "green";
 }
 function Ze(e, t) {
-	return e.find((e) => e.id === t)?.value ?? e[0]?.value ?? K[0].value;
+	return e.find((e) => e.id === t)?.value ?? e[0]?.value ?? Je[0].value;
 }
 function Qe(e) {
 	return e.map((e) => ({
 		id: e.id,
 		label: e.label,
-		value: Ye[e.id] ?? K[0].value
+		value: Ye[e.id] ?? Je[0].value
 	}));
 }
 //#endregion
 //#region src/exam-session/interactions/GeometryCanvas.tsx
-var $e = 1e3, et = 600, q = 30, tt = 240, nt = 12, rt = K[0].value, J = "#0a8f55", it = [
+var $e = 1e3, et = 600, J = 30, tt = 240, nt = 12, rt = Je[0].value, Y = "#0a8f55", it = [
 	{
 		id: "pen",
 		icon: "✎",
@@ -692,34 +696,34 @@ var $e = 1e3, et = 600, q = 30, tt = 240, nt = 12, rt = K[0].value, J = "#0a8f55
 	"protractor",
 	"compass"
 ]);
-function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, className: a = "", colorOptions: c = K, defaultColor: l, disabled: u = !1, minStageWidth: d = tt, onChange: f, points: p = [], showColorPalette: m = !0, value: h, variant: g = "question" }) {
-	let _ = c.length > 0 ? c : K, [v, y] = i(null), [b, x] = i([]), [S, ee] = i(() => Xe(_, l ?? "black")), [C, w] = i(() => gt(h)), [T, E] = i(() => h?.guides ?? ht(n, t)), [D, O] = i(null), [k, A] = i({
+function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, className: a = "", colorOptions: c = Je, defaultColor: l, disabled: u = !1, minStageWidth: d = tt, onChange: f, points: p = [], showColorPalette: m = !0, value: h, variant: g = "question" }) {
+	let _ = c.length > 0 ? c : Je, [v, y] = i(null), [b, x] = i([]), [S, C] = i(() => Xe(_, l ?? "black")), [w, T] = i(() => gt(h)), [E, D] = i(() => h?.guides ?? ht(n, t)), [O, k] = i(null), [A, j] = i({
 		height: t,
 		scale: 1,
 		width: n
-	}), [j, M] = i({
+	}), [M, N] = i({
 		canRedo: !1,
 		canUndo: !1
-	}), re = r(null), P = r([Y(C)]), F = r(0), ie = r(0), I = r(null);
-	st(re, n, t, d, A);
-	let ae = vt(p, n, t), oe = [
+	}), F = r(null), I = r([vt(w)]), L = r(0), ne = r(0), R = r(null);
+	st(F, n, t, d, j);
+	let re = yt(p, n, t), ie = [
 		"geometry-canvas",
 		`geometry-canvas--${g}`,
 		a
-	].filter(Boolean).join(" "), L = _.some((e) => e.id === S) ? S : Xe(_, "black"), R = Ze(_, L), z = xt(v);
-	function se(e) {
-		return at.has(e) ? !z && b.includes(e) : v === e || b.includes(e);
+	].filter(Boolean).join(" "), ae = _.some((e) => e.id === S) ? S : Xe(_, "black"), z = Ze(_, ae), B = St(v);
+	function oe(e) {
+		return at.has(e) ? !B && b.includes(e) : v === e || b.includes(e);
 	}
-	function ce(e) {
+	function se(e) {
 		x((t) => t.includes(e) ? t.filter((t) => t !== e) : t.concat(e));
 	}
-	function le(e) {
+	function ce(e) {
 		if (e === "ruler" || e === "protractor") {
-			if (z) {
+			if (B) {
 				y(null), x((t) => t.includes(e) ? t : t.concat(e));
 				return;
 			}
-			ce(e);
+			se(e);
 			return;
 		}
 		if (e === "compass") {
@@ -732,65 +736,65 @@ function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, classNa
 		}
 		y(e);
 	}
-	function ue(e) {
-		return ie.current += 1, `${e}-${Date.now()}-${ie.current}`;
+	function le(e) {
+		return ne.current += 1, `${e}-${Date.now()}-${ne.current}`;
 	}
-	function B(e, t = T) {
+	function V(e, t = E) {
 		f({
-			elements: Y(e),
+			elements: vt(e),
 			guides: t,
 			kind: "drawing",
 			strokes: _t(e)
 		});
 	}
-	function de() {
-		M({
-			canRedo: F.current < P.current.length - 1,
-			canUndo: F.current > 0
+	function ue() {
+		N({
+			canRedo: L.current < I.current.length - 1,
+			canUndo: L.current > 0
 		});
 	}
-	function fe(e, t = T) {
-		let n = Y(e), r = P.current.slice(0, F.current + 1);
-		r.push(n), P.current = r, F.current = r.length - 1, w(n), B(n, t), de();
+	function de(e, t = E) {
+		let n = vt(e), r = I.current.slice(0, L.current + 1);
+		r.push(n), I.current = r, L.current = r.length - 1, T(n), V(n, t), ue();
 	}
-	function pe(e) {
-		E(e), B(C, e);
+	function fe(e) {
+		D(e), V(w, e);
 	}
-	function me() {
-		if (!j.canUndo || u) return;
-		--F.current;
-		let e = Y(P.current[F.current]);
-		w(e), B(e), de();
+	function pe() {
+		if (!M.canUndo || u) return;
+		--L.current;
+		let e = vt(I.current[L.current]);
+		T(e), V(e), ue();
 	}
-	function V() {
-		if (!j.canRedo || u) return;
-		F.current += 1;
-		let e = Y(P.current[F.current]);
-		w(e), B(e), de();
+	function me() {
+		if (!M.canRedo || u) return;
+		L.current += 1;
+		let e = vt(I.current[L.current]);
+		T(e), V(e), ue();
 	}
-	function he() {
-		u || C.length === 0 || fe([]);
+	function H() {
+		u || w.length === 0 || de([]);
 	}
-	function ge(e) {
+	function he(e) {
 		let r = e.target.getStage()?.getPointerPosition();
 		return r ? {
-			x: jt(r.x / k.scale, 0, n),
-			y: jt(r.y / k.scale, 0, t)
+			x: Mt(r.x / A.scale, 0, n),
+			y: Mt(r.y / A.scale, 0, t)
 		} : null;
 	}
-	function _e(e) {
-		if (u || !z && bt(e.target)) return;
-		let t = ge(e);
+	function ge(e) {
+		if (u || !B && xt(e.target)) return;
+		let t = he(e);
 		if (!t || !v) return;
 		if (v === "eraser") {
-			be(t);
+			ye(t);
 			return;
 		}
-		let n = yt(t, ae);
+		let n = bt(t, re);
 		if (v === "pen") {
-			I.current = n, O({
-				color: R,
-				id: ue("freehand"),
+			R.current = n, k({
+				color: z,
+				id: le("freehand"),
 				points: [n.x, n.y],
 				strokeWidth: 4,
 				type: "freehand"
@@ -798,9 +802,9 @@ function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, classNa
 			return;
 		}
 		if (v === "line") {
-			I.current = n, O({
-				color: R,
-				id: ue("line"),
+			R.current = n, k({
+				color: z,
+				id: le("line"),
 				points: [
 					n.x,
 					n.y,
@@ -812,78 +816,78 @@ function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, classNa
 			});
 			return;
 		}
-		v === "compass" && (I.current = n, O({
+		v === "compass" && (R.current = n, k({
 			center: n,
-			color: R,
-			id: ue("circle"),
+			color: z,
+			id: le("circle"),
 			radius: 1,
 			strokeWidth: 3,
 			type: "circle"
 		}));
 	}
-	function ve(e) {
-		let t = ge(e);
+	function _e(e) {
+		let t = he(e);
 		if (t) {
 			if (v === "eraser" && !u) {
-				be(t);
+				ye(t);
 				return;
 			}
-			if (!(!D || !I.current || u)) {
-				if (D.type === "freehand") {
-					O({
-						...D,
-						points: D.points.concat([t.x, t.y])
+			if (!(!O || !R.current || u)) {
+				if (O.type === "freehand") {
+					k({
+						...O,
+						points: O.points.concat([t.x, t.y])
 					});
 					return;
 				}
-				if (D.type === "line") {
-					let e = yt(t, ae);
-					O({
-						...D,
+				if (O.type === "line") {
+					let e = bt(t, re);
+					k({
+						...O,
 						points: [
-							I.current.x,
-							I.current.y,
+							R.current.x,
+							R.current.y,
 							e.x,
 							e.y
 						]
 					});
 					return;
 				}
-				D.type === "circle" && O({
-					...D,
-					radius: X(D.center, t)
+				O.type === "circle" && k({
+					...O,
+					radius: X(O.center, t)
 				});
 			}
 		}
 	}
-	function ye() {
-		if (!D || u) {
-			I.current = null, O(null);
+	function ve() {
+		if (!O || u) {
+			R.current = null, k(null);
 			return;
 		}
-		let e = D;
-		if (I.current = null, O(null), Ct(e)) {
+		let e = O;
+		if (R.current = null, k(null), wt(e)) {
 			if (e.type === "circle") {
 				let t = {
-					...T,
+					...E,
 					compass: {
 						center: e.center,
 						radius: e.radius
 					}
 				};
-				E(t), fe(C.concat(e), t);
+				D(t), de(w.concat(e), t);
 				return;
 			}
-			fe(C.concat(e));
+			de(w.concat(e));
 		}
 	}
-	function be(e) {
-		if (C.length === 0) return;
-		let t = wt(C, e);
-		t < 0 || fe(C.filter((e, n) => n !== t));
+	function ye(e) {
+		if (w.length === 0) return;
+		let t = Tt(w, e);
+		t < 0 || de(w.filter((e, n) => n !== t));
 	}
 	return /* @__PURE__ */ s("div", {
-		className: oe,
+		className: ie,
 		"data-disabled": u ? "true" : "false",
 		dir: "rtl",
 		children: [
@@ -891,14 +895,14 @@ function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, classNa
 				className: "geometry-toolbar",
 				"aria-label": "أَدَواتُ الوَرَقَةِ المُسَوَّدَةِ",
 				children: it.map((e) => /* @__PURE__ */ s("button", {
-					"aria-pressed": se(e.id),
+					"aria-pressed": oe(e.id),
 					className: [
 						"geometry-tool-button",
-						se(e.id) ? "geometry-tool-button--active" : "",
+						oe(e.id) ? "geometry-tool-button--active" : "",
 						at.has(e.id) ? "geometry-tool-button--guide" : ""
 					].filter(Boolean).join(" "),
 					disabled: u,
-					onClick: () => le(e.id),
+					onClick: () => ce(e.id),
 					type: "button",
 					children: [/* @__PURE__ */ o("span", {
 						"aria-hidden": "true",
@@ -906,32 +910,32 @@ function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, classNa
 					}), /* @__PURE__ */ o("span", { children: e.label })]
 				}, e.id))
 			}),
-			m ? /* @__PURE__ */ o(Je, {
+			m ? /* @__PURE__ */ o(qe, {
 				ariaLabel: "أَلْوانُ الأَقْلامِ",
 				className: "geometry-color-picker",
 				colors: _,
 				disabled: u,
-				onChange: ee,
-				selectedColorId: L
+				onChange: C,
+				selectedColorId: ae
 			}) : null,
 			/* @__PURE__ */ o("div", {
 				className: "geometry-stage-shell",
-				ref: re,
-				children: /* @__PURE__ */ o(ne, {
-					height: k.height,
-					onMouseDown: _e,
-					onMouseLeave: ye,
-					onMouseMove: ve,
-					onMouseUp: ye,
-					onTouchEnd: ye,
-					onTouchMove: ve,
-					onTouchStart: _e,
-					width: k.width,
-					children: /* @__PURE__ */ s(te, {
-						scaleX: k.scale,
-						scaleY: k.scale,
+				ref: F,
+				children: /* @__PURE__ */ o(te, {
+					height: A.height,
+					onMouseDown: ge,
+					onMouseLeave: ve,
+					onMouseMove: _e,
+					onMouseUp: ve,
+					onTouchEnd: ve,
+					onTouchMove: _e,
+					onTouchStart: ge,
+					width: A.width,
+					children: /* @__PURE__ */ s(ee, {
+						scaleX: A.scale,
+						scaleY: A.scale,
 						children: [
-							/* @__PURE__ */ o(N, {
+							/* @__PURE__ */ o(P, {
 								fill: "#fff",
 								height: t,
 								stroke: "#bad3c8",
@@ -947,32 +951,32 @@ function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, classNa
 								x: e.x / 100 * n,
 								y: e.y / 100 * t
 							}, e.id)),
-							C.map((e) => mt(e)),
-							D ? mt(D, !0) : null,
+							w.map((e) => mt(e)),
+							O ? mt(O, !0) : null,
 							b.includes("ruler") ? /* @__PURE__ */ o(dt, {
 								disabled: u,
-								guide: T.ruler,
-								locked: z,
-								onCommit: (e) => pe({
-									...T,
+								guide: E.ruler,
+								locked: B,
+								onCommit: (e) => fe({
+									...E,
 									ruler: e
 								})
-							}, `${T.ruler.x}:${T.ruler.y}:${T.ruler.length}:${T.ruler.rotation}`) : null,
+							}, `${E.ruler.x}:${E.ruler.y}:${E.ruler.length}:${E.ruler.rotation}`) : null,
 							b.includes("protractor") ? /* @__PURE__ */ o(ft, {
 								disabled: u,
-								guide: T.protractor,
-								locked: z,
-								onChange: (e) => pe({
-									...T,
+								guide: E.protractor,
+								locked: B,
+								onChange: (e) => fe({
+									...E,
 									protractor: e
 								})
 							}) : null,
 							b.includes("compass") ? /* @__PURE__ */ o(pt, {
 								disabled: u,
-								guide: T.compass,
-								locked: z,
-								onChange: (e) => pe({
-									...T,
+								guide: E.compass,
+								locked: B,
+								onChange: (e) => fe({
+									...E,
 									compass: e
 								})
 							}) : null
@@ -985,20 +989,20 @@ function ot({ actionLabel: e, canvasHeight: t = et, canvasWidth: n = $e, classNa
 				children: [
 					e ? /* @__PURE__ */ o("span", { children: e }) : null,
 					/* @__PURE__ */ o("button", {
-						disabled: !j.canUndo || u,
-						onClick: me,
+						disabled: !M.canUndo || u,
+						onClick: pe,
 						type: "button",
 						children: "تَراجُعٌ"
 					}),
 					/* @__PURE__ */ o("button", {
-						disabled: !j.canRedo || u,
-						onClick: V,
+						disabled: !M.canRedo || u,
+						onClick: me,
 						type: "button",
 						children: "إِعادَةٌ"
 					}),
 					/* @__PURE__ */ o("button", {
-						disabled: C.length === 0 || u,
-						onClick: he,
+						disabled: w.length === 0 || u,
+						onClick: H,
 						type: "button",
 						children: "مَسْحٌ"
 					})
@@ -1034,29 +1038,29 @@ function st(e, n, r, i, a) {
 	]);
 }
 function ct({ canvasHeight: e, canvasWidth: t }) {
-	let n = Math.floor(t / q), r = Math.floor(e / q);
-	return /* @__PURE__ */ s(a, { children: [Array.from({ length: n + 1 }, (t, n) => /* @__PURE__ */ o(M, {
+	let n = Math.floor(t / J), r = Math.floor(e / J);
+	return /* @__PURE__ */ s(a, { children: [Array.from({ length: n + 1 }, (t, n) => /* @__PURE__ */ o(N, {
 		points: [
-			n * q,
+			n * J,
 			0,
-			n * q,
+			n * J,
 			e
 		],
 		stroke: "#d2ded8",
 		strokeWidth: 1
-	}, `vertical-${n}`)), Array.from({ length: r + 1 }, (e, n) => /* @__PURE__ */ o(M, {
+	}, `vertical-${n}`)), Array.from({ length: r + 1 }, (e, n) => /* @__PURE__ */ o(N, {
 		points: [
 			0,
-			n * q,
+			n * J,
 			t,
-			n * q
+			n * J
 		],
 		stroke: "#d2ded8",
 		strokeWidth: 1
 	}, `horizontal-${n}`))] });
 }
 function lt({ label: e, x: t, y: n }) {
-	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(A, {
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(j, {
 		fill: "#e63542",
 		radius: 4.75,
 		shadowBlur: 5,
@@ -1065,7 +1069,7 @@ function lt({ label: e, x: t, y: n }) {
 		strokeWidth: 1.7,
 		x: t,
 		y: n
-	}), /* @__PURE__ */ o(re, {
+	}), /* @__PURE__ */ o(F, {
 		fill: "#111",
 		fontSize: 14,
 		fontStyle: "bold",
@@ -1085,7 +1089,7 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 	}
 	function y(e) {
 		e.cancelBubble = !0;
-		let t = St(e);
+		let t = Ct(e);
 		t && (v({
 			...d.current,
 			x: t.x,
@@ -1103,8 +1107,8 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 	}
 	function x(e, t) {
 		e.cancelBubble = !0;
-		let n = St(e);
-		n && (v(kt(d.current, n, t)), e.currentTarget.position({
+		let n = Ct(e);
+		n && (v(At(d.current, n, t)), e.currentTarget.position({
 			x: 0,
 			y: 0
 		}));
@@ -1112,11 +1116,11 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 	function S() {
 		let e = {
 			...d.current,
-			rotation: Mt(d.current.rotation + 90)
+			rotation: Nt(d.current.rotation + 90)
 		};
 		v(e), c(e);
 	}
-	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s(j, {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s(M, {
 		listening: _,
 		name: "geometry-guide",
 		onDblClick: S,
@@ -1125,18 +1129,18 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 		x: l.x,
 		y: l.y,
 		children: [
-			/* @__PURE__ */ o(N, {
+			/* @__PURE__ */ o(P, {
 				cornerRadius: 7,
 				fill: "rgba(14, 173, 100, 0.13)",
 				height: 38,
 				listening: !1,
 				offsetX: l.length / 2,
 				offsetY: 38 / 2,
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 2,
 				width: l.length
 			}),
-			/* @__PURE__ */ o(M, {
+			/* @__PURE__ */ o(N, {
 				points: [
 					-l.length / 2 + 12,
 					0,
@@ -1144,12 +1148,12 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 					0
 				],
 				listening: !1,
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 2
 			}),
 			Array.from({ length: Math.floor(l.length / 20) + 1 }, (e, t) => {
 				let n = -l.length / 2 + t * 20, r = t % 5 == 0;
-				return /* @__PURE__ */ o(M, {
+				return /* @__PURE__ */ o(N, {
 					listening: !1,
 					points: [
 						n,
@@ -1157,11 +1161,11 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 						n,
 						r ? 4 : 10
 					],
-					stroke: J,
+					stroke: Y,
 					strokeWidth: r ? 1.5 : 1
 				}, t);
 			}),
-			/* @__PURE__ */ o(M, {
+			/* @__PURE__ */ o(N, {
 				dash: [7, 7],
 				listening: !1,
 				opacity: .72,
@@ -1171,10 +1175,10 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 					p,
 					0
 				],
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 2
 			}),
-			/* @__PURE__ */ o(M, {
+			/* @__PURE__ */ o(N, {
 				dash: [7, 7],
 				listening: !1,
 				opacity: .72,
@@ -1184,17 +1188,17 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 					m,
 					0
 				],
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 2
 			}),
-			/* @__PURE__ */ o(j, {
+			/* @__PURE__ */ o(M, {
 				draggable: _,
 				name: "geometry-guide",
 				onDblClick: S,
 				onDblTap: S,
 				onDragEnd: b,
 				onDragMove: (e) => x(e, "right"),
-				children: /* @__PURE__ */ o(N, {
+				children: /* @__PURE__ */ o(P, {
 					fill: "rgba(255, 255, 255, 0.01)",
 					height: 106,
 					offsetY: 53,
@@ -1202,14 +1206,14 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 					x: 0
 				})
 			}),
-			/* @__PURE__ */ o(j, {
+			/* @__PURE__ */ o(M, {
 				draggable: _,
 				name: "geometry-guide",
 				onDblClick: S,
 				onDblTap: S,
 				onDragEnd: b,
 				onDragMove: (e) => x(e, "left"),
-				children: /* @__PURE__ */ o(N, {
+				children: /* @__PURE__ */ o(P, {
 					fill: "rgba(255, 255, 255, 0.01)",
 					height: 106,
 					offsetY: 53,
@@ -1217,34 +1221,34 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 					x: m - 24
 				})
 			}),
-			/* @__PURE__ */ o(A, {
+			/* @__PURE__ */ o(j, {
 				fill: "#f7fffb",
 				listening: !1,
 				radius: 16,
 				shadowBlur: 10,
 				shadowColor: "rgba(10, 143, 85, 0.35)",
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 4,
 				x: p,
 				y: 0
 			}),
-			/* @__PURE__ */ o(A, {
+			/* @__PURE__ */ o(j, {
 				fill: "#f7fffb",
 				listening: !1,
 				radius: 16,
 				shadowBlur: 10,
 				shadowColor: "rgba(10, 143, 85, 0.35)",
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 4,
 				x: m,
 				y: 0
 			}),
-			/* @__PURE__ */ s(j, {
+			/* @__PURE__ */ s(M, {
 				draggable: _,
 				name: "geometry-guide",
 				onDragEnd: b,
 				onDragMove: y,
-				children: [/* @__PURE__ */ o(N, {
+				children: [/* @__PURE__ */ o(P, {
 					cornerRadius: 13,
 					fill: "#ffffff",
 					height: 26,
@@ -1252,14 +1256,14 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 					offsetY: 13,
 					shadowBlur: 8,
 					shadowColor: "rgba(10, 143, 85, 0.2)",
-					stroke: J,
+					stroke: Y,
 					strokeWidth: 2,
 					width: 70
 				}), [
 					-14,
 					0,
 					14
-				].map((e) => /* @__PURE__ */ o(M, {
+				].map((e) => /* @__PURE__ */ o(N, {
 					lineCap: "round",
 					points: [
 						e,
@@ -1267,7 +1271,7 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 						e,
 						7
 					],
-					stroke: J,
+					stroke: Y,
 					strokeWidth: 2
 				}, e))]
 			})
@@ -1275,14 +1279,14 @@ function dt({ disabled: e, guide: t, locked: n, onCommit: c }) {
 	}) });
 }
 function ft({ disabled: e, guide: t, locked: n, onChange: r }) {
-	let i = !e && !n, c = Dt({
+	let i = !e && !n, c = Ot({
 		x: 136,
 		y: 0
 	}, t.rotation, {
 		x: t.x,
 		y: t.y
 	});
-	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(j, {
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(M, {
 		draggable: i,
 		listening: i,
 		name: "geometry-guide",
@@ -1295,23 +1299,23 @@ function ft({ disabled: e, guide: t, locked: n, onChange: r }) {
 		x: t.x,
 		y: t.y,
 		children: [
-			/* @__PURE__ */ o(k, {
+			/* @__PURE__ */ o(A, {
 				angle: 180,
 				fill: "rgba(14, 173, 100, 0.11)",
 				innerRadius: 0,
 				outerRadius: 110,
 				rotation: 180,
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 2
 			}),
-			/* @__PURE__ */ o(M, {
+			/* @__PURE__ */ o(N, {
 				points: [
 					-110,
 					0,
 					110,
 					0
 				],
-				stroke: J,
+				stroke: Y,
 				strokeWidth: 2
 			}),
 			Array.from({ length: 19 }, (e, t) => {
@@ -1322,14 +1326,14 @@ function ft({ disabled: e, guide: t, locked: n, onChange: r }) {
 					x: Math.cos(r) * (t % 3 == 0 ? 92 : 100),
 					y: -Math.sin(r) * (t % 3 == 0 ? 92 : 100)
 				};
-				return /* @__PURE__ */ o(M, {
+				return /* @__PURE__ */ o(N, {
 					points: [
 						a.x,
 						a.y,
 						i.x,
 						i.y
 					],
-					stroke: J,
+					stroke: Y,
 					strokeWidth: t % 3 == 0 ? 1.4 : 1
 				}, n);
 			}),
@@ -1339,8 +1343,8 @@ function ft({ disabled: e, guide: t, locked: n, onChange: r }) {
 				180
 			].map((e) => {
 				let t = (180 - e) * Math.PI / 180;
-				return /* @__PURE__ */ o(re, {
-					fill: J,
+				return /* @__PURE__ */ o(F, {
+					fill: Y,
 					fontSize: 12,
 					fontStyle: "bold",
 					text: `${e}`,
@@ -1349,7 +1353,7 @@ function ft({ disabled: e, guide: t, locked: n, onChange: r }) {
 				}, e);
 			})
 		]
-	}), /* @__PURE__ */ o(A, {
+	}), /* @__PURE__ */ o(j, {
 		draggable: i,
 		fill: "#fff",
 		listening: i,
@@ -1362,7 +1366,7 @@ function ft({ disabled: e, guide: t, locked: n, onChange: r }) {
 			});
 		},
 		radius: 10,
-		stroke: J,
+		stroke: Y,
 		strokeWidth: 3,
 		x: c.x,
 		y: c.y
@@ -1377,15 +1381,15 @@ function pt({ disabled: e, guide: t, locked: n, onChange: r }) {
 		y: t.center.y - Math.min(90, Math.max(34, t.radius * .68))
 	};
 	return /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o(A, {
+		/* @__PURE__ */ o(j, {
 			dash: [8, 8],
 			radius: t.radius,
-			stroke: J,
+			stroke: Y,
 			strokeWidth: 2,
 			x: t.center.x,
 			y: t.center.y
 		}),
-		/* @__PURE__ */ o(M, {
+		/* @__PURE__ */ o(N, {
 			dash: [8, 8],
 			points: [
 				t.center.x,
@@ -1393,10 +1397,10 @@ function pt({ disabled: e, guide: t, locked: n, onChange: r }) {
 				c.x,
 				c.y
 			],
-			stroke: J,
+			stroke: Y,
 			strokeWidth: 2
 		}),
-		/* @__PURE__ */ o(M, {
+		/* @__PURE__ */ o(N, {
 			lineCap: "round",
 			lineJoin: "round",
 			points: [
@@ -1407,18 +1411,18 @@ function pt({ disabled: e, guide: t, locked: n, onChange: r }) {
 				c.x,
 				c.y
 			],
-			stroke: J,
+			stroke: Y,
 			strokeWidth: 4
 		}),
-		/* @__PURE__ */ o(A, {
+		/* @__PURE__ */ o(j, {
 			fill: "#fff",
 			radius: 8,
-			stroke: J,
+			stroke: Y,
 			strokeWidth: 3,
 			x: l.x,
 			y: l.y
 		}),
-		/* @__PURE__ */ o(A, {
+		/* @__PURE__ */ o(j, {
 			draggable: i,
 			fill: "#fff",
 			listening: i,
@@ -1428,12 +1432,12 @@ function pt({ disabled: e, guide: t, locked: n, onChange: r }) {
 				center: e.target.position()
 			}),
 			radius: 11,
-			stroke: J,
+			stroke: Y,
 			strokeWidth: 3,
 			x: t.center.x,
 			y: t.center.y
 		}),
-		/* @__PURE__ */ o(A, {
+		/* @__PURE__ */ o(j, {
 			draggable: i,
 			fill: "#fff",
 			listening: i,
@@ -1446,7 +1450,7 @@ function pt({ disabled: e, guide: t, locked: n, onChange: r }) {
 				});
 			},
 			radius: 9,
-			stroke: J,
+			stroke: Y,
 			strokeWidth: 3,
 			x: c.x,
 			y: c.y
@@ -1455,7 +1459,7 @@ function pt({ disabled: e, guide: t, locked: n, onChange: r }) {
 }
 function mt(e, t = !1) {
 	let n = t ? .58 : 1;
-	return e.type === "freehand" ? /* @__PURE__ */ o(M, {
+	return e.type === "freehand" ? /* @__PURE__ */ o(N, {
 		lineCap: "round",
 		lineJoin: "round",
 		opacity: n,
@@ -1463,13 +1467,13 @@ function mt(e, t = !1) {
 		stroke: e.color,
 		strokeWidth: e.strokeWidth,
 		tension: .45
-	}, e.id) : e.type === "line" ? /* @__PURE__ */ o(M, {
+	}, e.id) : e.type === "line" ? /* @__PURE__ */ o(N, {
 		lineCap: "round",
 		opacity: n,
 		points: e.points,
 		stroke: e.color,
 		strokeWidth: e.strokeWidth
-	}, e.id) : /* @__PURE__ */ o(A, {
+	}, e.id) : /* @__PURE__ */ o(j, {
 		opacity: n,
 		radius: e.radius,
 		stroke: e.color,
@@ -1501,7 +1505,7 @@ function ht(e, t) {
 	};
 }
 function gt(e) {
-	return e?.elements?.length ? Y(e.elements) : (e?.strokes ?? []).filter((e) => e.tool === "pen" && e.points.length >= 4).map((e) => ({
+	return e?.elements?.length ? vt(e.elements) : (e?.strokes ?? []).filter((e) => e.tool === "pen" && e.points.length >= 4).map((e) => ({
 		color: rt,
 		id: e.id,
 		points: e.points.slice(),
@@ -1520,7 +1524,7 @@ function _t(e) {
 		tool: "pen"
 	}] : []);
 }
-function Y(e) {
+function vt(e) {
 	return e.map((e) => e.type === "freehand" ? {
 		...e,
 		points: e.points.slice()
@@ -1537,25 +1541,25 @@ function Y(e) {
 		center: { ...e.center }
 	});
 }
-function vt(e, t, n) {
+function yt(e, t, n) {
 	let r = e.map((e) => ({
 		x: e.x / 100 * t,
 		y: e.y / 100 * n
 	})), i = [];
-	for (let e = 0; e <= t; e += q) for (let t = 0; t <= n; t += q) i.push({
+	for (let e = 0; e <= t; e += J) for (let t = 0; t <= n; t += J) i.push({
 		x: e,
 		y: t
 	});
 	return r.concat(i);
 }
-function yt(e, t) {
+function bt(e, t) {
 	let n = e, r = nt;
 	return t.forEach((t) => {
 		let i = X(e, t);
 		i < r && (n = t, r = i);
 	}), n;
 }
-function bt(e) {
+function xt(e) {
 	let t = e;
 	for (; t;) {
 		if (t.name().split(" ").includes("geometry-guide")) return !0;
@@ -1563,10 +1567,10 @@ function bt(e) {
 	}
 	return !1;
 }
-function xt(e) {
+function St(e) {
 	return e === "pen" || e === "line" || e === "eraser";
 }
-function St(e) {
+function Ct(e) {
 	let t = e.target.getStage()?.getPointerPosition();
 	if (!t) return null;
 	let n = e.target.getLayer(), r = n?.scaleX() || 1, i = n?.scaleY() || r;
@@ -1575,16 +1579,16 @@ function St(e) {
 		y: t.y / i
 	};
 }
-function Ct(e) {
-	return e.type === "freehand" ? e.points.length >= 4 : e.type === "line" ? At(e.points) > 6 : e.radius > 6;
+function wt(e) {
+	return e.type === "freehand" ? e.points.length >= 4 : e.type === "line" ? jt(e.points) > 6 : e.radius > 6;
 }
-function wt(e, t) {
-	for (let n = e.length - 1; n >= 0; --n) if (Tt(e[n], t)) return n;
+function Tt(e, t) {
+	for (let n = e.length - 1; n >= 0; --n) if (Et(e[n], t)) return n;
 	return -1;
 }
-function Tt(e, t) {
+function Et(e, t) {
 	if (e.type === "circle") return Math.abs(X(e.center, t) - e.radius) <= 14;
-	for (let n = 0; n < e.points.length - 2; n += 2) if (Et(t, {
+	for (let n = 0; n < e.points.length - 2; n += 2) if (Dt(t, {
 		x1: e.points[n],
 		x2: e.points[n + 2],
 		y1: e.points[n + 1],
@@ -1592,27 +1596,27 @@ function Tt(e, t) {
 	}) <= 14) return !0;
 	return !1;
 }
-function Et(e, t) {
+function Dt(e, t) {
 	let n = t.x2 - t.x1, r = t.y2 - t.y1, i = n * n + r * r;
 	if (i === 0) return X(e, {
 		x: t.x1,
 		y: t.y1
 	});
-	let a = jt(((e.x - t.x1) * n + (e.y - t.y1) * r) / i, 0, 1);
+	let a = Mt(((e.x - t.x1) * n + (e.y - t.y1) * r) / i, 0, 1);
 	return X(e, {
 		x: t.x1 + a * n,
 		y: t.y1 + a * r
 	});
 }
-function Dt(e, t, n) {
+function Ot(e, t, n) {
 	let r = t * Math.PI / 180, i = Math.cos(r), a = Math.sin(r);
 	return {
 		x: n.x + e.x * i - e.y * a,
 		y: n.y + e.x * a + e.y * i
 	};
 }
-function Ot(e, t) {
-	return Dt({
+function kt(e, t) {
+	return Ot({
 		x: t === "left" ? -e.length / 2 : e.length / 2,
 		y: 0
 	}, e.rotation, {
@@ -1620,8 +1624,8 @@ function Ot(e, t) {
 		y: e.y
 	});
 }
-function kt(e, t, n) {
-	let r = n === "right" ? "left" : "right", i = Ot(e, r), a = Math.atan2(t.y - i.y, t.x - i.x) * 180 / Math.PI, o = Mt(n === "right" ? a : a + 180), s = o * Math.PI / 180, c = e.length / 2, l = r === "left" ? 1 : -1;
+function At(e, t, n) {
+	let r = n === "right" ? "left" : "right", i = kt(e, r), a = Math.atan2(t.y - i.y, t.x - i.x) * 180 / Math.PI, o = Nt(n === "right" ? a : a + 180), s = o * Math.PI / 180, c = e.length / 2, l = r === "left" ? 1 : -1;
 	return {
 		...e,
 		rotation: o,
@@ -1629,7 +1633,7 @@ function kt(e, t, n) {
 		y: i.y + Math.sin(s) * c * l
 	};
 }
-function At(e) {
+function jt(e) {
 	return X({
 		x: e[0],
 		y: e[1]
@@ -1641,15 +1645,15 @@ function At(e) {
 function X(e, t) {
 	return Math.hypot(e.x - t.x, e.y - t.y);
 }
-function jt(e, t, n) {
+function Mt(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
-function Mt(e) {
+function Nt(e) {
 	return (e % 360 + 360) % 360;
 }
 //#endregion
 //#region src/exam-session/interactions/KonvaDrawingGrid.tsx
-function Nt({ points: e, value: t, onChange: n }) {
+function Pt({ points: e, value: t, onChange: n }) {
 	return /* @__PURE__ */ o(ot, {
 		onChange: n,
 		points: e,
@@ -1659,7 +1663,7 @@ function Nt({ points: e, value: t, onChange: n }) {
 }
 //#endregion
 //#region src/exam-session/interactions/LabelPlacement.tsx
-function Pt({ labels: e, targets: t, value: n, onChange: r }) {
+function Ft({ labels: e, targets: t, value: n, onChange: r }) {
 	let i = n?.placements ?? {}, a = new Set(Object.keys(i));
 	return /* @__PURE__ */ o(c, {
 		onDragEnd: (e) => {
@@ -1682,10 +1686,10 @@ function Pt({ labels: e, targets: t, value: n, onChange: r }) {
 			className: "label-placement",
 			children: [/* @__PURE__ */ o("div", {
 				className: "label-placement__bank",
-				children: e.filter((e) => !a.has(e.id)).map((e) => /* @__PURE__ */ o(Ft, { label: e }, e.id))
+				children: e.filter((e) => !a.has(e.id)).map((e) => /* @__PURE__ */ o(It, { label: e }, e.id))
 			}), /* @__PURE__ */ o("div", {
 				className: "label-placement__diagram",
-				children: t.map((t) => /* @__PURE__ */ o(It, {
+				children: t.map((t) => /* @__PURE__ */ o(Lt, {
 					label: e.find((e) => i[e.id]?.targetId === t.id),
 					target: t
 				}, t.id))
@@ -1693,7 +1697,7 @@ function Pt({ labels: e, targets: t, value: n, onChange: r }) {
 		})
 	});
 }
-function Ft({ label: e }) {
+function It({ label: e }) {
 	let { ref: t, isDragging: n } = l({ id: e.id });
 	return /* @__PURE__ */ o("button", {
 		className: n ? "placement-label placement-label--dragging" : "placement-label",
@@ -1702,7 +1706,7 @@ function Ft({ label: e }) {
 		children: e.label
 	});
 }
-function It({ label: e, target: t }) {
+function Lt({ label: e, target: t }) {
 	let { ref: n, isDropTarget: r } = u({ id: t.id });
 	return /* @__PURE__ */ s("div", {
 		className: r ? "placement-target placement-target--active" : "placement-target",
@@ -1714,17 +1718,17 @@ function It({ label: e, target: t }) {
 		children: [/* @__PURE__ */ o("span", {
 			"aria-hidden": "true",
 			children: t.label
-		}), e ? /* @__PURE__ */ o(Ft, { label: e }) : null]
+		}), e ? /* @__PURE__ */ o(It, { label: e }) : null]
 	});
 }
 //#endregion
 //#region src/exam-session/interactions/NumberLineAnswer.tsx
-function Lt({ answerId: e, expression: t, value: n, onChange: r, onClear: i, recognizer: a }) {
+function Rt({ answerId: e, expression: t, value: n, onChange: r, onClear: i, recognizer: a }) {
 	return /* @__PURE__ */ s("div", {
 		className: "number-line-layout",
-		children: [/* @__PURE__ */ o(Rt, {}), /* @__PURE__ */ s("div", {
+		children: [/* @__PURE__ */ o(zt, {}), /* @__PURE__ */ s("div", {
 			className: "compact-answer",
-			children: [/* @__PURE__ */ o("span", { children: t }), /* @__PURE__ */ o(G, {
+			children: [/* @__PURE__ */ o("span", { children: t }), /* @__PURE__ */ o(q, {
 				ariaLabel: t,
 				onChange: (t) => r(e, t),
 				onClear: () => i(e),
@@ -1734,7 +1738,7 @@ function Lt({ answerId: e, expression: t, value: n, onChange: r, onClear: i, rec
 		})]
 	});
 }
-function Rt() {
+function zt() {
 	return /* @__PURE__ */ s("svg", {
 		className: "number-line",
 		viewBox: "0 0 520 86",
@@ -1761,8 +1765,362 @@ function Rt() {
 	});
 }
 //#endregion
+//#region src/exam-session/interactions/OperationWorkArea.tsx
+var Z = 900, Bt = 300, Vt = 510, Ht = 260;
+function Ut({ ariaLabel: e, divisionOperands: n, gridVariant: c = "ruled", onChange: l, onClear: u, operation: d = "+", placeholder: f = "اكتب خطوات العملية هنا", value: p }) {
+	let m = c === "operation-worksheet" || c === "division-worksheet" ? Vt : Bt, g = r(null), [_, v] = i(() => Kt(p)), [y, b] = i(!1), [x, S] = i({
+		height: m,
+		scale: 1,
+		width: Z
+	}), C = _.length === 0;
+	t(() => {
+		v(Kt(p));
+	}, [p]), t(() => {
+		let e = g.current;
+		if (!e) return;
+		function t() {
+			let t = Math.max(Ht, Math.min(Z, e?.clientWidth ?? Z)), n = t / Z;
+			S({
+				height: m * n,
+				scale: n,
+				width: t
+			});
+		}
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [m]);
+	function w(e) {
+		v(e), l({
+			elements: e,
+			kind: "drawing"
+		});
+	}
+	function T(e) {
+		let t = e?.getPointerPosition();
+		return t ? {
+			x: t.x / x.scale,
+			y: t.y / x.scale
+		} : null;
+	}
+	function E(e) {
+		e.evt.preventDefault();
+		let t = T(e.target.getStage());
+		t && (b(!0), w([..._, {
+			color: "#061013",
+			id: `operation-stroke-${Date.now()}-${Math.round(t.x)}-${Math.round(t.y)}`,
+			points: [t.x, t.y],
+			strokeWidth: 8,
+			type: "freehand"
+		}]));
+	}
+	function D(e) {
+		if (!y || C || !e.evt.buttons && e.evt.pointerType === "mouse") return;
+		e.evt.preventDefault();
+		let t = T(e.target.getStage());
+		t && w(_.map((e, n) => n === _.length - 1 ? {
+			...e,
+			points: [
+				...e.points,
+				t.x,
+				t.y
+			]
+		} : e));
+	}
+	function O(e) {
+		e.evt.preventDefault(), b(!1);
+	}
+	function k() {
+		b(!1), w([]), u?.();
+	}
+	return /* @__PURE__ */ s("div", {
+		"aria-label": e,
+		className: ["operation-work-area", c === "operation-worksheet" ? "operation-work-area--operation-worksheet" : c === "division-worksheet" ? "operation-work-area--division-worksheet" : ""].filter(Boolean).join(" "),
+		ref: g,
+		children: [/* @__PURE__ */ o(te, {
+			className: ["operation-work-area__stage", c === "operation-worksheet" ? "operation-work-area__stage--operation-worksheet" : c === "division-worksheet" ? "operation-work-area__stage--division-worksheet" : ""].filter(Boolean).join(" "),
+			height: x.height,
+			onPointerCancel: O,
+			onPointerDown: E,
+			onPointerMove: D,
+			onPointerUp: O,
+			role: "img",
+			width: x.width,
+			children: /* @__PURE__ */ s(ee, {
+				scaleX: x.scale,
+				scaleY: x.scale,
+				children: [
+					/* @__PURE__ */ o(P, {
+						cornerRadius: 22,
+						fill: "#fff",
+						height: m,
+						stroke: "#cfe3d9",
+						strokeWidth: 2,
+						width: Z,
+						x: 0,
+						y: 0
+					}),
+					c === "division-worksheet" ? /* @__PURE__ */ o(Gt, {
+						dividend: n?.dividend,
+						divisor: n?.divisor,
+						height: m,
+						width: Z
+					}) : c === "operation-worksheet" ? /* @__PURE__ */ o(Wt, {
+						height: m,
+						operation: d,
+						width: Z
+					}) : c === "squared" ? /* @__PURE__ */ s(a, { children: [Array.from({ length: 13 }, (e, t) => /* @__PURE__ */ o(N, {
+						points: [
+							0,
+							t * 24,
+							Z,
+							t * 24
+						],
+						stroke: t % 4 == 0 ? "#4e68ff" : "#89d9ff",
+						strokeWidth: t % 4 == 0 ? 2 : 1
+					}, `square-y-${t}`)), Array.from({ length: 13 }, (e, t) => /* @__PURE__ */ o(N, {
+						points: [
+							t * 75,
+							0,
+							t * 75,
+							Bt
+						],
+						stroke: "#4e68ff",
+						strokeWidth: 1.5
+					}, `square-x-${t}`))] }) : Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ o(N, {
+						dash: [8, 12],
+						points: [
+							28,
+							58 + t * 40,
+							Z - 28,
+							58 + t * 40
+						],
+						stroke: "#edf3ef",
+						strokeWidth: 2
+					}, `line-${t}`)),
+					C && f ? /* @__PURE__ */ o(F, {
+						align: "center",
+						fill: "#8fa39a",
+						fontFamily: "Arial, sans-serif",
+						fontSize: 24,
+						fontStyle: "bold",
+						height: m,
+						text: f,
+						verticalAlign: "middle",
+						width: Z,
+						x: 0,
+						y: 0
+					}) : null,
+					_.map((e) => /* @__PURE__ */ o(N, {
+						globalCompositeOperation: "source-over",
+						lineCap: "round",
+						lineJoin: "round",
+						points: e.points,
+						stroke: e.color,
+						strokeWidth: e.strokeWidth,
+						tension: .28
+					}, e.id))
+				]
+			})
+		}), /* @__PURE__ */ o("button", {
+			"aria-label": "مسح خطوات العملية",
+			className: "operation-work-area__clear",
+			disabled: C,
+			onClick: k,
+			type: "button",
+			children: /* @__PURE__ */ o(h, { "aria-hidden": "true" })
+		})]
+	});
+}
+function Wt({ height: e, operation: t, width: n }) {
+	let r = n - 166 - 94;
+	return /* @__PURE__ */ s(a, { children: [
+		Array.from({ length: Math.floor(e / 24) + 1 }, (e, t) => /* @__PURE__ */ o(N, {
+			points: [
+				0,
+				t * 24,
+				n,
+				t * 24
+			],
+			stroke: t % 4 == 0 ? "#4e68ff" : "#89d9ff",
+			strokeWidth: t % 4 == 0 ? 2 : 1
+		}, `worksheet-y-${t}`)),
+		Array.from({ length: 13 }, (t, n) => /* @__PURE__ */ o(N, {
+			points: [
+				n * 75,
+				0,
+				n * 75,
+				e
+			],
+			stroke: "#4e68ff",
+			strokeWidth: 1.5
+		}, `worksheet-x-${n}`)),
+		/* @__PURE__ */ o(P, {
+			cornerRadius: 16,
+			fill: "rgba(255, 255, 255, 0.74)",
+			height: 94,
+			stroke: "#9fcbf6",
+			strokeWidth: 2,
+			width: r,
+			x: 166,
+			y: 42
+		}),
+		/* @__PURE__ */ o(P, {
+			cornerRadius: 16,
+			fill: "rgba(255, 255, 255, 0.74)",
+			height: 94,
+			stroke: "#9fcbf6",
+			strokeWidth: 2,
+			width: r,
+			x: 166,
+			y: 158
+		}),
+		/* @__PURE__ */ o(F, {
+			align: "center",
+			fill: "#111827",
+			fontFamily: "Arial, sans-serif",
+			fontSize: 74,
+			fontStyle: "bold",
+			height: 94,
+			text: t,
+			verticalAlign: "middle",
+			width: 112,
+			x: 34,
+			y: 158
+		}),
+		/* @__PURE__ */ o(N, {
+			lineCap: "round",
+			points: [
+				134,
+				281,
+				n - 70,
+				281
+			],
+			stroke: "#111827",
+			strokeWidth: 7
+		}),
+		/* @__PURE__ */ o(P, {
+			cornerRadius: 16,
+			fill: "rgba(255, 255, 255, 0.82)",
+			height: 120,
+			stroke: "#79b8ee",
+			strokeWidth: 2.5,
+			width: r,
+			x: 166,
+			y: 316
+		})
+	] });
+}
+function Gt({ dividend: e, divisor: t, height: n, width: r }) {
+	let i = r - 588 - 70;
+	return /* @__PURE__ */ s(a, { children: [
+		Array.from({ length: Math.floor(n / 24) + 1 }, (e, t) => /* @__PURE__ */ o(N, {
+			points: [
+				0,
+				t * 24,
+				r,
+				t * 24
+			],
+			stroke: t % 4 == 0 ? "#4e68ff" : "#89d9ff",
+			strokeWidth: t % 4 == 0 ? 2 : 1
+		}, `division-y-${t}`)),
+		Array.from({ length: 13 }, (e, t) => /* @__PURE__ */ o(N, {
+			points: [
+				t * 75,
+				0,
+				t * 75,
+				n
+			],
+			stroke: "#4e68ff",
+			strokeWidth: 1.5
+		}, `division-x-${t}`)),
+		/* @__PURE__ */ o(P, {
+			cornerRadius: 16,
+			fill: "rgba(255, 255, 255, 0.82)",
+			height: 96,
+			stroke: "#9fcbf6",
+			strokeWidth: 2,
+			width: i,
+			x: 588,
+			y: 274
+		}),
+		/* @__PURE__ */ o(N, {
+			lineCap: "round",
+			points: [
+				560,
+				n - 44,
+				560,
+				154,
+				r - 70,
+				154
+			],
+			stroke: "#101827",
+			strokeWidth: 6
+		}),
+		/* @__PURE__ */ o(P, {
+			cornerRadius: 14,
+			fill: "rgba(255, 255, 255, 0.64)",
+			height: 76,
+			stroke: "#9fcbf6",
+			strokeWidth: 2,
+			width: 470,
+			x: 56,
+			y: 170
+		}),
+		/* @__PURE__ */ o(P, {
+			cornerRadius: 14,
+			fill: "rgba(255, 255, 255, 0.64)",
+			height: 76,
+			stroke: "#9fcbf6",
+			strokeWidth: 2,
+			width: i,
+			x: 588,
+			y: 170
+		}),
+		e ? /* @__PURE__ */ o(F, {
+			align: "center",
+			fill: "#101827",
+			fontFamily: "Arial, sans-serif",
+			fontSize: 52,
+			fontStyle: "bold",
+			height: 76,
+			text: e,
+			verticalAlign: "middle",
+			width: 470,
+			x: 56,
+			y: 170
+		}) : null,
+		t ? /* @__PURE__ */ o(F, {
+			align: "center",
+			fill: "#101827",
+			fontFamily: "Arial, sans-serif",
+			fontSize: 52,
+			fontStyle: "bold",
+			height: 76,
+			text: t,
+			verticalAlign: "middle",
+			width: i,
+			x: 588,
+			y: 170
+		}) : null,
+		/* @__PURE__ */ o(P, {
+			cornerRadius: 18,
+			fill: "rgba(255, 255, 255, 0.58)",
+			height: n - 294,
+			stroke: "#9fcbf6",
+			strokeWidth: 2,
+			width: 470,
+			x: 56,
+			y: 268
+		})
+	] });
+}
+function Kt(e) {
+	return e?.elements?.filter((e) => e.type === "freehand") ?? [];
+}
+//#endregion
 //#region src/voice/evaluateVoiceAiResult.ts
-var zt = {
+var qt = {
 	audioConfig: {
 		bitDepth: 16,
 		channels: 1,
@@ -1772,18 +2130,18 @@ var zt = {
 	lang: "fr",
 	useModelAi: !0
 };
-function Bt(e, t, n) {
-	let r = Wt([t, ...n.acceptedPronunciations ?? []]), i = r.map(Vt), a = Vt(e.transcript), o = i.map((e, t) => ({
+function Jt(e, t, n) {
+	let r = Qt([t, ...n.acceptedPronunciations ?? []]), i = r.map(Yt), a = Yt(e.transcript), o = i.map((e, t) => ({
 		index: t,
-		similarity: Ut(a, e)
+		similarity: Zt(a, e)
 	})).reduce((e, t) => t.similarity > e.similarity ? t : e, {
 		index: -1,
 		similarity: 0
-	}), s = o.index >= 0 ? r[o.index] : null, c = o.similarity === 1, l = Gt(n.minimumSimilarity ?? Ht(s), 0, 1), u = e.language === n.expectedLanguage, d = a.length > 0, f = d && u && o.similarity >= l, p = d ? u ? f ? "correct" : "incorrect" : "language-mismatch" : "no-speech";
+	}), s = o.index >= 0 ? r[o.index] : null, c = o.similarity === 1, l = $t(n.minimumSimilarity ?? Xt(s), 0, 1), u = e.language === n.expectedLanguage, d = a.length > 0, f = d && u && o.similarity >= l, p = d ? u ? f ? "correct" : "incorrect" : "language-mismatch" : "no-speech";
 	return {
 		acceptedPronunciations: r,
 		confidence: e.confidence,
-		confidencePercent: Math.round(Gt(e.confidence, 0, 1) * 100),
+		confidencePercent: Math.round($t(e.confidence, 0, 1) * 100),
 		detectedPronunciation: e.transcript,
 		expectedLanguage: n.expectedLanguage,
 		expectedText: t,
@@ -1802,13 +2160,13 @@ function Bt(e, t, n) {
 		timestamps: e.timestamps ?? []
 	};
 }
-function Vt(e) {
+function Yt(e) {
 	return e.toLocaleLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u064b-\u065f\u0670]/g, "").replace(/[|]+/g, " ").replace(/[^\p{Letter}\p{Number}\s]/gu, " ").replace(/\s+/g, " ").trim();
 }
-function Ht(e) {
-	return (e ? Vt(e).length : 0) <= 4 ? 1 : .85;
+function Xt(e) {
+	return (e ? Yt(e).length : 0) <= 4 ? 1 : .85;
 }
-function Ut(e, t) {
+function Zt(e, t) {
 	let n = Array.from(e), r = Array.from(t), i = Math.max(n.length, r.length);
 	if (i === 0) return 0;
 	let a = Array.from({ length: r.length + 1 }, (e, t) => t);
@@ -1820,22 +2178,22 @@ function Ut(e, t) {
 		}
 		a.splice(0, a.length, ...t);
 	}
-	return Gt(1 - a[r.length] / i, 0, 1);
+	return $t(1 - a[r.length] / i, 0, 1);
 }
-function Wt(e) {
+function Qt(e) {
 	let t = /* @__PURE__ */ new Set();
 	return e.filter((e) => {
-		let n = Vt(e);
+		let n = Yt(e);
 		return !n || t.has(n) ? !1 : (t.add(n), !0);
 	});
 }
-function Gt(e, t, n) {
+function $t(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
 //#endregion
 //#region src/exam-session/interactions/PronunciationRecorder.tsx
-function Kt({ acceptedPronunciations: e, expectedText: a, imageAlt: c, imageSrc: l, instruction: u, language: d, minimumSimilarity: f, onChange: p, onReset: m, recorder: h, value: g }) {
-	let [_, v] = i("idle"), [b, x] = i(null), [S, w] = i(0), T = r(null), E = r(!1), D = n(() => g ? Bt(g.result.modelAiResult, a, {
+function en({ acceptedPronunciations: e, expectedText: a, imageAlt: c, imageSrc: l, instruction: u, language: d, minimumSimilarity: f, onChange: p, onReset: m, recorder: h, value: g }) {
+	let [_, v] = i("idle"), [b, x] = i(null), [S, T] = i(0), E = r(null), D = r(!1), O = n(() => g ? Jt(g.result.modelAiResult, a, {
 		acceptedPronunciations: e,
 		expectedLanguage: d,
 		minimumSimilarity: f
@@ -1849,54 +2207,54 @@ function Kt({ acceptedPronunciations: e, expectedText: a, imageAlt: c, imageSrc:
 	t(() => {
 		if (_ !== "recording") return;
 		let e = window.setInterval(() => {
-			let e = T.current;
-			e !== null && w(Date.now() - e);
+			let e = E.current;
+			e !== null && T(Date.now() - e);
 		}, 200);
 		return () => window.clearInterval(e);
 	}, [_]), t(() => () => {
-		E.current && h?.stopRecording().catch(() => void 0);
+		D.current && h?.stopRecording().catch(() => void 0);
 	}, [h]);
-	async function O() {
+	async function k() {
 		if (_ !== "recording") {
 			v("checking"), x(null), m();
 			try {
 				if (!h) throw Error("مُسجِّل الصَّوت غَير مُتاحٍ فِي هذا التَّطبِيق.");
 				let e = {
-					...zt,
+					...qt,
 					lang: d,
 					maxDuration: 10
 				};
 				if (!(await h.startRecording(e)).started) throw Error("تعذّر بدء التسجيل الصوتي.");
-				E.current = !0, T.current = Date.now(), w(0), v("recording");
+				D.current = !0, E.current = Date.now(), T(0), v("recording");
 			} catch (e) {
-				E.current = !1, T.current = null, x(Xt(e)), v("error");
+				D.current = !1, E.current = null, x(on(e)), v("error");
 			}
 		}
 	}
-	async function k() {
+	async function A() {
 		if (_ === "recording") {
 			v("processing"), x(null);
 			try {
 				if (!h) throw Error("مُسجِّل الصَّوت غَير مُتاحٍ فِي هذا التَّطبِيق.");
-				let t = await h.stopRecording(), n = Bt(t.modelAiResult, a, {
+				let t = await h.stopRecording(), n = Jt(t.modelAiResult, a, {
 					acceptedPronunciations: e,
 					expectedLanguage: d,
 					minimumSimilarity: f
 				});
-				E.current = !1, T.current = null, w(t.duration), p({
+				D.current = !1, E.current = null, T(t.duration), p({
 					evaluation: n,
 					kind: "audio-recording",
 					result: t
 				}), v("idle");
 			} catch (e) {
-				E.current = !1, T.current = null, x(Xt(e)), v("error");
+				D.current = !1, E.current = null, x(on(e)), v("error");
 			}
 		}
 	}
-	function A() {
-		x(null), w(0), v("idle"), m();
+	function j() {
+		x(null), T(0), v("idle"), m();
 	}
-	let j = _ === "checking" || _ === "processing", te = _ === "recording" ? S : g?.result.duration ?? S;
+	let M = _ === "checking" || _ === "processing", ee = _ === "recording" ? S : g?.result.duration ?? S;
 	return /* @__PURE__ */ s("div", {
 		className: "audio-debug-card",
 		"data-status": _,
@@ -1914,7 +2272,7 @@ function Kt({ acceptedPronunciations: e, expectedText: a, imageAlt: c, imageSrc:
 					children: [
 						/* @__PURE__ */ s("span", { children: [
 							"اُنْطِقِ الكَلِمَةَ بِـ",
-							Yt(d),
+							an(d),
 							":"
 						] }),
 						/* @__PURE__ */ o("strong", {
@@ -1932,31 +2290,31 @@ function Kt({ acceptedPronunciations: e, expectedText: a, imageAlt: c, imageSrc:
 					className: "audio-debug-card__icon",
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ o(y, {})
-				}), /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("strong", { children: Zt(_, !!g) }), /* @__PURE__ */ o("span", { children: Jt(te) })] })]
+				}), /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("strong", { children: sn(_, !!g) }), /* @__PURE__ */ o("span", { children: rn(ee) })] })]
 			}),
 			/* @__PURE__ */ s("div", {
 				className: "audio-debug-actions",
 				children: [
 					/* @__PURE__ */ s("button", {
 						className: "audio-debug-button audio-debug-button--record",
-						disabled: _ === "recording" || j,
-						onClick: O,
+						disabled: _ === "recording" || M,
+						onClick: k,
 						type: "button",
 						children: [/* @__PURE__ */ o(y, { "aria-hidden": "true" }), /* @__PURE__ */ o("span", { children: g ? "سَجِّلْ مُحاوَلَةً جَدِيدَةً" : "اِبْدَأِ التَّسْجِيلَ" })]
 					}),
 					/* @__PURE__ */ s("button", {
 						className: "audio-debug-button audio-debug-button--stop",
 						disabled: _ !== "recording",
-						onClick: k,
+						onClick: A,
 						type: "button",
-						children: [/* @__PURE__ */ o(C, { "aria-hidden": "true" }), /* @__PURE__ */ o("span", { children: "أَنْهِ التَّسْجِيلَ" })]
+						children: [/* @__PURE__ */ o(w, { "aria-hidden": "true" }), /* @__PURE__ */ o("span", { children: "أَنْهِ التَّسْجِيلَ" })]
 					}),
 					/* @__PURE__ */ s("button", {
 						className: "audio-debug-button audio-debug-button--reset",
-						disabled: _ === "recording" || j || !g && !b,
-						onClick: A,
+						disabled: _ === "recording" || M || !g && !b,
+						onClick: j,
 						type: "button",
-						children: [/* @__PURE__ */ o(ee, { "aria-hidden": "true" }), /* @__PURE__ */ o("span", { children: "إِعادَةُ المُحاوَلَةِ" })]
+						children: [/* @__PURE__ */ o(C, { "aria-hidden": "true" }), /* @__PURE__ */ o("span", { children: "إِعادَةُ المُحاوَلَةِ" })]
 					})
 				]
 			}),
@@ -1965,40 +2323,40 @@ function Kt({ acceptedPronunciations: e, expectedText: a, imageAlt: c, imageSrc:
 				role: "alert",
 				children: b
 			}) : null,
-			g && D ? /* @__PURE__ */ s("section", {
+			g && O ? /* @__PURE__ */ s("section", {
 				className: "audio-pronunciation-feedback",
-				"data-outcome": D.status,
+				"data-outcome": O.status,
 				"data-testid": "pronunciation-feedback",
 				role: "status",
 				children: [/* @__PURE__ */ s("div", {
 					className: "audio-pronunciation-feedback__headline",
-					children: [/* @__PURE__ */ o(qt, { status: D.status }), /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("strong", { children: Qt(D.status) }), /* @__PURE__ */ o("span", { children: $t(D.status, a) })] })]
+					children: [/* @__PURE__ */ o(tn, { status: O.status }), /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("strong", { children: cn(O.status) }), /* @__PURE__ */ o("span", { children: ln(O.status, a) })] })]
 				}), /* @__PURE__ */ s("div", {
 					className: "audio-debug-metadata",
 					children: [
-						/* @__PURE__ */ o(Z, {
+						/* @__PURE__ */ o(nn, {
 							label: "ما تَعَرَّفَ عَلَيْهِ النَّمُوذَجُ",
-							value: D.detectedPronunciation || "—"
+							value: O.detectedPronunciation || "—"
 						}),
-						/* @__PURE__ */ o(Z, {
+						/* @__PURE__ */ o(nn, {
 							label: "نِسْبَةُ التَّطابُقِ",
-							value: `${D.similarityPercent}%`
+							value: `${O.similarityPercent}%`
 						}),
-						/* @__PURE__ */ o(Z, {
+						/* @__PURE__ */ o(nn, {
 							label: "ثِقَةُ النَّمُوذَجِ",
-							value: `${D.confidencePercent}%`
+							value: `${O.confidencePercent}%`
 						}),
-						/* @__PURE__ */ o(Z, {
+						/* @__PURE__ */ o(nn, {
 							label: "اللُّغَةُ",
-							value: D.language.toUpperCase()
+							value: O.language.toUpperCase()
 						}),
-						/* @__PURE__ */ o(Z, {
+						/* @__PURE__ */ o(nn, {
 							label: "زَمَنُ التَّحْلِيلِ",
-							value: `${D.latencyMs} ms`
+							value: `${O.latencyMs} ms`
 						}),
-						/* @__PURE__ */ o(Z, {
+						/* @__PURE__ */ o(nn, {
 							label: "عَدَدُ الرُّمُوزِ الصَّوْتِيَّةِ",
-							value: D.timestamps.length.toString()
+							value: O.timestamps.length.toString()
 						})
 					]
 				})]
@@ -2006,10 +2364,10 @@ function Kt({ acceptedPronunciations: e, expectedText: a, imageAlt: c, imageSrc:
 		]
 	});
 }
-function qt({ status: e }) {
-	return o(e === "correct" ? f : e === "no-speech" ? D : O, { "aria-hidden": "true" });
+function tn({ status: e }) {
+	return o(e === "correct" ? f : e === "no-speech" ? O : k, { "aria-hidden": "true" });
 }
-function Z({ label: e, value: t }) {
+function nn({ label: e, value: t }) {
 	return /* @__PURE__ */ s("span", {
 		className: "audio-debug-meta-card",
 		children: [/* @__PURE__ */ o("small", { children: e }), /* @__PURE__ */ o("strong", {
@@ -2018,42 +2376,42 @@ function Z({ label: e, value: t }) {
 		})]
 	});
 }
-function Jt(e) {
+function rn(e) {
 	let t = Math.max(0, Math.round(e / 1e3)), n = Math.floor(t / 60), r = t % 60;
 	return `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
 }
-function Yt(e) {
+function an(e) {
 	return e === "fr" ? "الفَرَنْسِيَّةِ" : "العَرَبِيَّةِ";
 }
-function Xt(e) {
+function on(e) {
 	let t = e;
 	return t.code === "MISSING_PERMISSION" ? "يَجِبُ السَّماحُ بِاسْتِعْمالِ المِيكْرُوفُونِ لِتَسْجِيلِ الإِجابَةِ." : t.code === "MODEL_VOCAB_MISMATCH" ? "مَلَفُّ نَمُوذَجِ اللُّغَةِ لا يُطابِقُ قامُوسَهُ. يُرْجى تَصْحِيحُ مَلَفِّ النَّمُوذَجِ." : t.message ? t.message : typeof e == "string" ? e : "حَدَثَ خَطَأٌ أَثْناءَ تَسْجِيلِ الإِجابَةِ الصَّوْتِيَّةِ.";
 }
-function Zt(e, t) {
+function sn(e, t) {
 	return e === "checking" ? "جارِي تَجْهِيزُ المِيكْرُوفُونِ" : e === "recording" ? "جارِي التَّسْجِيلُ... تَكَلَّمِ الآنَ" : e === "processing" ? "جارِي تَحْلِيلُ النُّطْقِ" : e === "error" ? "تَعَذَّرَ تَحْلِيلُ التَّسْجِيلِ" : t ? "اِكْتَمَلَ تَحْلِيلُ الإِجابَةِ" : "المِيكْرُوفُونُ جاهِزٌ";
 }
-function Qt(e) {
+function cn(e) {
 	return e === "correct" ? "أَحْسَنْتَ! إِجابَةٌ صَحِيحَةٌ" : e === "no-speech" ? "لَمْ نَسْمَعْ كَلِمَةً واضِحَةً" : e === "language-mismatch" ? "اُسْتُعْمِلَ نَمُوذَجُ لُغَةٍ مُخْتَلِفَةٍ" : "حاوِلْ مَرَّةً أُخْرى";
 }
-function $t(e, t) {
+function ln(e, t) {
 	return e === "correct" ? `نَطَقْتَ «${t}» بِشَكْلٍ صَحِيحٍ.` : e === "no-speech" ? `قَرِّبْ فَمَكَ مِنَ المِيكْرُوفُونِ وَقُلْ «${t}».` : `اِسْتَمِعْ إِلى نُطْقِ «${t}» ثُمَّ أَعِدِ المُحاوَلَةَ.`;
 }
 //#endregion
 //#region src/exam-session/interactions/SortableAnswer.tsx
-function en({ answerId: e, items: t, value: n, onChange: r }) {
+function un({ answerId: e, items: t, value: n, onChange: r }) {
 	let i = new Map(t.map((e) => [e.id, e])), a = n?.itemIds.length === t.length ? n.itemIds.filter((e) => i.has(e)) : t.map((e) => e.id);
 	return /* @__PURE__ */ o(c, {
 		onDragEnd: (e) => {
 			e.canceled || r({
 				kind: "order",
-				itemIds: P(a, e).map((e) => e.toString())
+				itemIds: I(a, e).map((e) => e.toString())
 			});
 		},
 		children: /* @__PURE__ */ o("div", {
 			className: "sortable-answer",
 			children: a.map((t, n) => {
 				let r = i.get(t);
-				return r ? /* @__PURE__ */ o(tn, {
+				return r ? /* @__PURE__ */ o(dn, {
 					group: e,
 					index: n,
 					item: r
@@ -2062,8 +2420,8 @@ function en({ answerId: e, items: t, value: n, onChange: r }) {
 		})
 	});
 }
-function tn({ group: e, index: t, item: n }) {
-	let { ref: r, isDragging: i, isDropTarget: a } = F({
+function dn({ group: e, index: t, item: n }) {
+	let { ref: r, isDragging: i, isDropTarget: a } = L({
 		id: n.id,
 		index: t,
 		group: e,
@@ -2082,7 +2440,7 @@ function tn({ group: e, index: t, item: n }) {
 }
 //#endregion
 //#region src/exam-session/interactions/TextAnswer.tsx
-function nn({ ariaLabel: e, className: t, inputMode: n = "text", value: r, onChange: i }) {
+function fn({ ariaLabel: e, className: t, inputMode: n = "text", value: r, onChange: i }) {
 	return /* @__PURE__ */ o("input", {
 		"aria-label": e,
 		className: t,
@@ -2096,17 +2454,17 @@ function nn({ ariaLabel: e, className: t, inputMode: n = "text", value: r, onCha
 }
 //#endregion
 //#region src/renderer/visualScene.tsx
-var rn = {
+var pn = {
 	apple: d,
 	circle: p,
 	flower: g,
 	heart: _,
 	hexagon: v,
-	square: C,
-	star: w,
-	sun: T,
-	triangle: E
-}, an = {
+	square: w,
+	star: T,
+	sun: E,
+	triangle: D
+}, mn = {
 	blue: "#4d89d9",
 	gray: "#8c97a0",
 	green: "#1f9d63",
@@ -2114,7 +2472,7 @@ var rn = {
 	purple: "#8a63d2",
 	red: "#eb5b5b",
 	yellow: "#f2c641"
-}, on = {
+}, hn = {
 	"counter-rows": { rows: [{
 		color: "yellow",
 		count: 5,
@@ -2141,7 +2499,7 @@ var rn = {
 		id: "star-row",
 		state: "plain"
 	}] }
-}, sn = [
+}, gn = [
 	{
 		label: "Cercle",
 		value: "circle"
@@ -2178,7 +2536,7 @@ var rn = {
 		label: "Hexagone",
 		value: "hexagon"
 	}
-], cn = [
+], _n = [
 	{
 		label: "Jaune",
 		value: "yellow"
@@ -2207,20 +2565,20 @@ var rn = {
 		label: "Gris",
 		value: "gray"
 	}
-], ln = [{
+], vn = [{
 	label: "Normal",
 	value: "plain"
 }, {
 	label: "Barre",
 	value: "crossed"
 }];
-function un(e) {
-	return { rows: on[e].rows.map((e) => ({ ...e })) };
+function yn(e) {
+	return { rows: hn[e].rows.map((e) => ({ ...e })) };
 }
-function dn(e) {
-	return an[e];
+function bn(e) {
+	return mn[e];
 }
-function fn({ scene: e }) {
+function xn({ scene: e }) {
 	return /* @__PURE__ */ o("div", {
 		className: "visual-panel visual-panel--custom",
 		"aria-hidden": "true",
@@ -2228,7 +2586,7 @@ function fn({ scene: e }) {
 			className: "visual-scene",
 			children: e.rows.map((e) => /* @__PURE__ */ o("div", {
 				className: "visual-scene-row",
-				children: Array.from({ length: Math.max(1, Math.floor(e.count) || 1) }, (t, n) => /* @__PURE__ */ o(pn, {
+				children: Array.from({ length: Math.max(1, Math.floor(e.count) || 1) }, (t, n) => /* @__PURE__ */ o(Sn, {
 					color: e.color,
 					icon: e.icon,
 					state: e.state
@@ -2237,26 +2595,26 @@ function fn({ scene: e }) {
 		})
 	});
 }
-function pn({ color: e, icon: t, state: n }) {
-	let r = rn[t];
+function Sn({ color: e, icon: t, state: n }) {
+	let r = pn[t];
 	return /* @__PURE__ */ o("span", {
 		className: n === "crossed" ? "visual-scene-icon visual-scene-icon--crossed" : "visual-scene-icon",
-		style: { color: dn(e) },
+		style: { color: bn(e) },
 		children: /* @__PURE__ */ o(r, { "aria-hidden": "true" })
 	});
 }
 //#endregion
 //#region src/renderer/QuestionRenderer.tsx
-function mn({ adapters: e, clearAnswer: t, question: n, getAnswer: r, updateAnswer: i }) {
+function Cn({ adapters: e, clearAnswer: t, question: n, getAnswer: r, updateAnswer: i }) {
 	return /* @__PURE__ */ s("article", {
 		className: `question-block question-block--${n.type}`,
-		children: [/* @__PURE__ */ o(gn, {
+		children: [/* @__PURE__ */ o(Tn, {
 			number: n.number,
 			prompt: n.prompt
-		}), _n(n, r, i, t, e)]
+		}), En(n, r, i, t, e)]
 	});
 }
-function hn({ adapters: e, clearAnswer: t, section: n, getAnswer: r, updateAnswer: i }) {
+function wn({ adapters: e, clearAnswer: t, section: n, getAnswer: r, updateAnswer: i }) {
 	return /* @__PURE__ */ s("section", {
 		className: `question-section question-section--${n.tone}`,
 		children: [/* @__PURE__ */ s("header", {
@@ -2264,7 +2622,7 @@ function hn({ adapters: e, clearAnswer: t, section: n, getAnswer: r, updateAnswe
 			children: [
 				/* @__PURE__ */ s("span", {
 					className: "section-points",
-					children: [/* @__PURE__ */ o("small", { children: "ن" }), R(n)]
+					children: [/* @__PURE__ */ o("small", { children: "ن" }), z(n)]
 				}),
 				/* @__PURE__ */ o("h3", { children: n.title }),
 				/* @__PURE__ */ o("span", {
@@ -2274,7 +2632,7 @@ function hn({ adapters: e, clearAnswer: t, section: n, getAnswer: r, updateAnswe
 			]
 		}), /* @__PURE__ */ o("div", {
 			className: "section-body",
-			children: n.questions.map((n) => /* @__PURE__ */ o(mn, {
+			children: n.questions.map((n) => /* @__PURE__ */ o(Cn, {
 				adapters: e,
 				clearAnswer: t,
 				getAnswer: r,
@@ -2284,17 +2642,17 @@ function hn({ adapters: e, clearAnswer: t, section: n, getAnswer: r, updateAnswe
 		})]
 	});
 }
-function gn({ number: e, prompt: t }) {
+function Tn({ number: e, prompt: t }) {
 	return /* @__PURE__ */ s("div", {
 		className: "question-prompt",
 		children: [e > 0 ? /* @__PURE__ */ o("span", { children: e }) : null, /* @__PURE__ */ o("strong", { children: t })]
 	});
 }
-function _n(e, t, n, r, i) {
+function En(e, t, n, r, i) {
 	switch (e.type) {
 		case "inline-inputs": return /* @__PURE__ */ o("div", {
 			className: "inline-equation-grid",
-			children: e.items.map((a) => vn({
+			children: e.items.map((a) => Dn({
 				adapters: i,
 				className: "equation-card",
 				clearAnswer: r,
@@ -2304,15 +2662,15 @@ function _n(e, t, n, r, i) {
 				updateAnswer: n
 			}))
 		});
-		case "visual-choice": return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(An, {
+		case "visual-choice": return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(Yn, {
 			choices: e.choices,
 			onChange: (t) => n(e.id, t),
 			scene: e.scene,
-			value: xn(t(e.id)),
+			value: An(t(e.id)),
 			visual: e.visual
 		}), e.inputLabel ? /* @__PURE__ */ s("div", {
 			className: "compact-answer",
-			children: [/* @__PURE__ */ o("span", { children: e.inputLabel }), /* @__PURE__ */ o(G, {
+			children: [/* @__PURE__ */ o("span", { children: e.inputLabel }), /* @__PURE__ */ o(q, {
 				ariaLabel: e.inputLabel,
 				onChange: (t) => n(`${e.id}:input`, t),
 				onClear: () => r(`${e.id}:input`),
@@ -2320,7 +2678,7 @@ function _n(e, t, n, r, i) {
 				value: Q(t(`${e.id}:input`))
 			})]
 		}) : null] });
-		case "number-line": return /* @__PURE__ */ o(Lt, {
+		case "number-line": return /* @__PURE__ */ o(Rt, {
 			answerId: e.id,
 			expression: e.expression,
 			onClear: r,
@@ -2328,9 +2686,31 @@ function _n(e, t, n, r, i) {
 			recognizer: i?.handwritingRecognizer,
 			value: Q(t(e.id))
 		});
+		case "operation-solving": {
+			let a = Ln(e);
+			return /* @__PURE__ */ s("div", {
+				className: [
+					"operation-solving",
+					`operation-solving--${e.solutionMode}`,
+					`operation-solving--${a}`
+				].join(" "),
+				children: [a === "equation-card-grid" ? /* @__PURE__ */ o("div", {
+					className: "operation-solving__equation-card",
+					children: /* @__PURE__ */ o("span", { children: In(e) })
+				}) : null, /* @__PURE__ */ o(Rn, {
+					adapters: i,
+					clearAnswer: r,
+					getAnswer: t,
+					question: e,
+					showOperands: a === "vertical-operation",
+					showWorkArea: a === "equation-card-grid",
+					updateAnswer: n
+				})]
+			});
+		}
 		case "equation-inputs": return /* @__PURE__ */ o("div", {
 			className: "stacked-equations",
-			children: e.items.map((a) => vn({
+			children: e.items.map((a) => Dn({
 				adapters: i,
 				ariaPrefix: e.prompt,
 				className: "wide-equation-card",
@@ -2341,7 +2721,7 @@ function _n(e, t, n, r, i) {
 				updateAnswer: n
 			}))
 		});
-		case "length-estimation": return /* @__PURE__ */ o(jn, {
+		case "length-estimation": return /* @__PURE__ */ o(Xn, {
 			answerId: e.id,
 			choices: e.choices,
 			getAnswer: t,
@@ -2350,7 +2730,7 @@ function _n(e, t, n, r, i) {
 		});
 		case "shape-choice": return /* @__PURE__ */ s("div", {
 			className: "shape-choice-layout",
-			children: [/* @__PURE__ */ o(Ve, {
+			children: [/* @__PURE__ */ o(Be, {
 				items: e.choices.map((e) => ({
 					id: `${e.id}-label`,
 					label: e.label
@@ -2358,24 +2738,24 @@ function _n(e, t, n, r, i) {
 				onChange: (t) => n(e.id, t),
 				targets: e.choices.map((e) => ({
 					id: `${e.id}-target`,
-					label: On(e.id)
+					label: qn(e.id)
 				})),
-				value: xn(t(e.id))
+				value: An(t(e.id))
 			}), /* @__PURE__ */ o("div", {
 				className: "shape-row",
 				"aria-hidden": "true",
 				children: e.choices.map((e) => /* @__PURE__ */ o("span", { className: `shape-drawing shape-drawing--${e.id}` }, e.id))
 			})]
 		});
-		case "drawing-grid": return /* @__PURE__ */ o(Nt, {
+		case "drawing-grid": return /* @__PURE__ */ o(Pt, {
 			onChange: (t) => n(e.id, t),
 			points: e.points,
-			value: wn(t(e.id))
+			value: Nn(t(e.id))
 		});
-		case "table-response": return /* @__PURE__ */ o(Fe, {
+		case "table-response": return /* @__PURE__ */ o(Pe, {
 			columns: e.columns,
 			onChange: (t) => n(e.id, t),
-			value: Tn(t(e.id))
+			value: Pn(t(e.id))
 		});
 		case "text-input": return e.before && !e.after && e.number === 0 ? /* @__PURE__ */ o("p", {
 			className: "problem-statement",
@@ -2384,7 +2764,7 @@ function _n(e, t, n, r, i) {
 			className: "sentence-answer",
 			children: [
 				e.before ? /* @__PURE__ */ o("span", { children: e.before }) : null,
-				/* @__PURE__ */ o(G, {
+				/* @__PURE__ */ o(q, {
 					ariaLabel: e.prompt,
 					onChange: (t) => n(e.id, t),
 					onClear: () => r(e.id),
@@ -2401,7 +2781,7 @@ function _n(e, t, n, r, i) {
 				children: e.situation
 			}), /* @__PURE__ */ o("div", {
 				className: "word-problem__parts",
-				children: e.parts.map((a, s) => /* @__PURE__ */ o(Dn, {
+				children: e.parts.map((a, s) => /* @__PURE__ */ o(Kn, {
 					adapters: i,
 					clearAnswer: r,
 					getAnswer: t,
@@ -2412,25 +2792,25 @@ function _n(e, t, n, r, i) {
 				}, a.id))
 			})]
 		});
-		case "drag-match": return /* @__PURE__ */ o(Ve, {
+		case "drag-match": return /* @__PURE__ */ o(Be, {
 			items: e.items,
 			onChange: (t) => n(e.id, t),
 			targets: e.targets,
-			value: xn(t(e.id))
+			value: An(t(e.id))
 		});
-		case "sortable-answer": return /* @__PURE__ */ o(en, {
+		case "sortable-answer": return /* @__PURE__ */ o(un, {
 			answerId: e.id,
 			items: e.items,
 			onChange: (t) => n(e.id, t),
-			value: Sn(t(e.id))
+			value: jn(t(e.id))
 		});
-		case "label-placement": return /* @__PURE__ */ o(Pt, {
+		case "label-placement": return /* @__PURE__ */ o(Ft, {
 			labels: e.labels,
 			onChange: (t) => n(e.id, t),
 			targets: e.targets,
-			value: Cn(t(e.id))
+			value: Mn(t(e.id))
 		});
-		case "audio-recording": return /* @__PURE__ */ o(Kt, {
+		case "audio-recording": return /* @__PURE__ */ o(en, {
 			acceptedPronunciations: e.acceptedPronunciations,
 			expectedText: e.expectedAnswer,
 			imageAlt: e.imageAlt,
@@ -2441,16 +2821,16 @@ function _n(e, t, n, r, i) {
 			onChange: (t) => n(e.id, t),
 			onReset: () => r(e.id),
 			recorder: i?.audioRecorder,
-			value: En(t(e.id))
+			value: Fn(t(e.id))
 		});
 	}
 }
-function vn({ adapters: t, ariaPrefix: n, className: r, clearAnswer: i, getAnswer: a, item: c, questionId: l, updateAnswer: u }) {
+function Dn({ adapters: t, ariaPrefix: n, className: r, clearAnswer: i, getAnswer: a, item: c, questionId: l, updateAnswer: u }) {
 	if (c.answers?.length) return /* @__PURE__ */ s("div", {
 		className: r,
 		children: [c.answers.map((r) => {
 			let d = `${l}:${c.id}:${r.id}`, f = [n, r.before].filter(Boolean).join(" ");
-			return /* @__PURE__ */ s(e, { children: [r.before ? /* @__PURE__ */ o("span", { children: r.before }) : null, /* @__PURE__ */ o(G, {
+			return /* @__PURE__ */ s(e, { children: [r.before ? /* @__PURE__ */ o("span", { children: r.before }) : null, /* @__PURE__ */ o(q, {
 				ariaLabel: f,
 				onChange: (e) => u(d, e),
 				onClear: () => i(d),
@@ -2468,7 +2848,7 @@ function vn({ adapters: t, ariaPrefix: n, className: r, clearAnswer: i, getAnswe
 		className: r,
 		children: [
 			/* @__PURE__ */ o("span", { children: c.before }),
-			/* @__PURE__ */ o(G, {
+			/* @__PURE__ */ o(q, {
 				ariaLabel: [n, c.before].filter(Boolean).join(" "),
 				onChange: (e) => u(d, e),
 				onClear: () => i(d),
@@ -2479,49 +2859,208 @@ function vn({ adapters: t, ariaPrefix: n, className: r, clearAnswer: i, getAnswe
 		]
 	}, c.id);
 }
-function yn(e) {
+function On(e) {
 	return e?.kind === "text" ? e : void 0;
 }
 function Q(e) {
 	return e?.kind === "handwritten-number" ? e : void 0;
 }
-function bn(e) {
+function kn(e) {
 	return e?.kind === "choice" ? e : void 0;
 }
-function xn(e) {
+function An(e) {
 	return e?.kind === "matches" ? e : void 0;
 }
-function Sn(e) {
+function jn(e) {
 	return e?.kind === "order" ? e : void 0;
 }
-function Cn(e) {
+function Mn(e) {
 	return e?.kind === "placements" ? e : void 0;
 }
-function wn(e) {
+function Nn(e) {
 	return e?.kind === "drawing" ? e : void 0;
 }
-function Tn(e) {
+function Pn(e) {
 	return e?.kind === "coin-table" ? e : void 0;
 }
-function En(e) {
+function Fn(e) {
 	return e?.kind === "audio-recording" ? e : void 0;
 }
-function Dn({ adapters: e, clearAnswer: t, getAnswer: n, parentQuestionId: r, part: i, partNumber: a, updateAnswer: c }) {
+function In(e) {
+	return `${e.leftOperand} ${e.operator} ${e.rightOperand} =`;
+}
+function Ln(e) {
+	return e.layout === "equation-card-grid" || e.solutionMode === "full-process" ? "equation-card-grid" : "vertical-operation";
+}
+function Rn({ adapters: e, clearAnswer: t, getAnswer: n, question: r, showOperands: i, showWorkArea: a, updateAnswer: c }) {
+	if (r.operator === "÷") return /* @__PURE__ */ o(zn, {
+		adapters: e,
+		clearAnswer: t,
+		getAnswer: n,
+		question: r,
+		showOperands: i,
+		updateAnswer: c
+	});
+	if (a) return /* @__PURE__ */ o(Ut, {
+		ariaLabel: "مساحة إنجاز العملية",
+		gridVariant: "operation-worksheet",
+		onChange: (e) => c(`${r.id}:work`, e),
+		onClear: () => t(`${r.id}:work`),
+		operation: r.operator,
+		placeholder: "",
+		value: Nn(n(`${r.id}:work`))
+	});
+	let l = Bn([
+		r.leftOperand,
+		r.rightOperand,
+		r.correctAnswer
+	]), u = l.columns, d = a ? Gn(u) : u, f = Vn(r.leftOperand, l, d), p = Vn(r.rightOperand, l, d), m = Wn(r, u);
+	return /* @__PURE__ */ s("div", {
+		className: [
+			"vertical-operation",
+			i ? "vertical-operation--with-operands" : "vertical-operation--blank-operands",
+			a ? "vertical-operation--with-work-area" : ""
+		].filter(Boolean).join(" "),
+		style: { "--operation-columns": d },
+		children: [
+			a ? /* @__PURE__ */ o("div", {
+				className: "vertical-operation__work-canvas",
+				children: /* @__PURE__ */ o(Ut, {
+					ariaLabel: "مساحة إنجاز العملية",
+					gridVariant: "squared",
+					onChange: (e) => c(`${r.id}:work`, e),
+					onClear: () => t(`${r.id}:work`),
+					placeholder: "",
+					value: Nn(n(`${r.id}:work`))
+				})
+			}) : null,
+			/* @__PURE__ */ s("div", {
+				className: "vertical-operation__row",
+				children: [/* @__PURE__ */ o("span", {
+					className: "vertical-operation__operator",
+					"aria-hidden": "true"
+				}), f.map((e, t) => /* @__PURE__ */ o("span", {
+					className: "vertical-operation__digit",
+					children: i ? e : ""
+				}, `left-${t}`))]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "vertical-operation__row",
+				children: [/* @__PURE__ */ o("span", {
+					className: "vertical-operation__operator",
+					children: r.operator
+				}), p.map((e, t) => /* @__PURE__ */ o("span", {
+					className: "vertical-operation__digit",
+					children: i ? e : ""
+				}, `right-${t}`))]
+			}),
+			/* @__PURE__ */ o("span", {
+				className: "vertical-operation__rule",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "vertical-operation__answer-lane",
+				children: [/* @__PURE__ */ o("span", {
+					className: "vertical-operation__answer-label",
+					children: "النَّتِيجَةُ"
+				}), /* @__PURE__ */ o(q, {
+					ariaLabel: "اكتب نتيجة العملية",
+					canvasWidth: m,
+					onChange: (e) => c(r.id, e),
+					onClear: () => t(r.id),
+					recognizer: e?.handwritingRecognizer,
+					value: Q(n(r.id))
+				})]
+			})
+		]
+	});
+}
+function zn({ adapters: e, clearAnswer: t, getAnswer: n, question: r, showOperands: i, updateAnswer: a }) {
+	let c = Math.min(360, Math.max(180, Hn(r.correctAnswer).length * 88));
+	return /* @__PURE__ */ s("div", {
+		className: "division-operation",
+		children: [/* @__PURE__ */ o(Ut, {
+			ariaLabel: "مساحة إنجاز القسمة",
+			divisionOperands: i ? {
+				dividend: r.leftOperand,
+				divisor: r.rightOperand
+			} : void 0,
+			gridVariant: "division-worksheet",
+			onChange: (e) => a(`${r.id}:work`, e),
+			onClear: () => t(`${r.id}:work`),
+			placeholder: "",
+			value: Nn(n(`${r.id}:work`))
+		}), /* @__PURE__ */ o("div", {
+			className: "division-operation__quotient",
+			children: /* @__PURE__ */ o(q, {
+				ariaLabel: "اكتب حاصل القسمة",
+				canvasWidth: c,
+				onChange: (e) => a(r.id, e),
+				onClear: () => t(r.id),
+				recognizer: e?.handwritingRecognizer,
+				value: Q(n(r.id))
+			})
+		})]
+	});
+}
+function Bn(e) {
+	let t = e.map(Un), n = t.some((e) => e.separator.length > 0), r = Math.max(...t.map((e) => e.whole.length), 1), i = n ? Math.max(...t.map((e) => e.fraction.length), 0) : 0;
+	return {
+		columns: Math.max(n ? r + 1 + i : r, 2),
+		fractionColumns: i,
+		hasDecimal: n,
+		wholeColumns: r
+	};
+}
+function Vn(e, t, n = t.columns) {
+	let r = Un(e), i = Math.max(0, t.wholeColumns - r.whole.length), a = t.hasDecimal ? [
+		...Array.from({ length: i }, () => ""),
+		...Array.from(r.whole),
+		r.separator,
+		...Array.from(r.fraction),
+		...Array.from({ length: Math.max(0, t.fractionColumns - r.fraction.length) }, () => "")
+	] : [...Array.from({ length: i }, () => ""), ...Array.from(r.whole)];
+	return [...Array.from({ length: Math.max(0, n - a.length) }, () => ""), ...a];
+}
+function Hn(e) {
+	let t = e.trim();
+	return t.length > 0 ? Array.from(t) : [""];
+}
+function Un(e) {
+	let t = e.trim(), n = t.search(/[.,]/);
+	return n < 0 ? {
+		fraction: "",
+		separator: "",
+		whole: t
+	} : {
+		fraction: t.slice(n + 1),
+		separator: t[n],
+		whole: t.slice(0, n)
+	};
+}
+function Wn(e, t) {
+	let n = Hn(e.correctAnswer).length;
+	return Math.min(640, Math.max(220, Math.max(t, n, 2) * 102));
+}
+function Gn(e) {
+	return Math.max(e + 2, 5);
+}
+function Kn({ adapters: e, clearAnswer: t, getAnswer: n, parentQuestionId: r, part: i, partNumber: a, updateAnswer: c }) {
 	let l = `${r}:${i.id}`;
 	return /* @__PURE__ */ s("section", {
 		className: "word-problem-part",
 		children: [/* @__PURE__ */ s("div", {
 			className: "word-problem-part__prompt",
 			children: [/* @__PURE__ */ o("span", { children: a }), /* @__PURE__ */ o("strong", { children: i.prompt })]
-		}), i.type === "coin-table" ? /* @__PURE__ */ o(Fe, {
+		}), i.type === "coin-table" ? /* @__PURE__ */ o(Pe, {
 			columns: i.columns,
 			onChange: (e) => c(l, e),
-			value: Tn(n(l))
+			value: Pn(n(l))
 		}) : /* @__PURE__ */ s("div", {
 			className: "sentence-answer word-problem-part__sentence",
 			children: [
 				i.before ? /* @__PURE__ */ o("span", { children: i.before }) : null,
-				/* @__PURE__ */ o(G, {
+				/* @__PURE__ */ o(q, {
 					ariaLabel: i.prompt,
 					onChange: (e) => c(l, e),
 					onClear: () => t(l),
@@ -2533,12 +3072,12 @@ function Dn({ adapters: e, clearAnswer: t, getAnswer: n, parentQuestionId: r, pa
 		})]
 	});
 }
-function On(e) {
+function qn(e) {
 	return e === "triangle" ? "△" : e === "square" ? "□" : e === "rectangle" ? "▭" : e;
 }
-var kn = "picture";
-function An({ choices: e, onChange: n, scene: a, value: c, visual: l }) {
-	let u = r(null), d = r(null), f = r(null), p = r({}), m = r(null), h = c?.pairs[kn], [g, _] = i(null), [v, y] = i(null);
+var Jn = "picture";
+function Yn({ choices: e, onChange: n, scene: a, value: c, visual: l }) {
+	let u = r(null), d = r(null), f = r(null), p = r({}), m = r(null), h = c?.pairs[Jn], [g, _] = i(null), [v, y] = i(null);
 	function b(e, t) {
 		let n = d.current;
 		if (n) {
@@ -2595,7 +3134,7 @@ function An({ choices: e, onChange: n, scene: a, value: c, visual: l }) {
 			y2: n.y
 		}));
 	}
-	function ee(e) {
+	function C(e) {
 		let t = m.current;
 		if (!t || t.pointerId !== e.pointerId) return;
 		let n = b(e.clientX, e.clientY), r = x(f.current);
@@ -2606,23 +3145,23 @@ function An({ choices: e, onChange: n, scene: a, value: c, visual: l }) {
 			y2: n.y
 		});
 	}
-	function C(e) {
+	function w(e) {
 		let t = m.current;
 		if (!t || t.pointerId !== e.pointerId) return;
 		e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId);
-		let r = T(e.clientX, e.clientY);
+		let r = E(e.clientX, e.clientY);
 		r && n({
 			kind: "matches",
-			pairs: { [kn]: r }
+			pairs: { [Jn]: r }
 		}), m.current = null, y(null);
 	}
-	function w(e, t, n) {
+	function T(e, t, n) {
 		if (!e) return !1;
 		let r = e.getBoundingClientRect(), i = r.left + r.width / 2, a = r.top + r.height / 2;
 		return Math.hypot(t - i, n - a) <= Math.max(42, Math.max(r.width, r.height) * 2.4);
 	}
-	function T(t, n) {
-		return e.find((e) => w(p.current[e.id], t, n))?.id;
+	function E(t, n) {
+		return e.find((e) => T(p.current[e.id], t, n))?.id;
 	}
 	return /* @__PURE__ */ s("div", {
 		className: "visual-line-match",
@@ -2648,13 +3187,13 @@ function An({ choices: e, onChange: n, scene: a, value: c, visual: l }) {
 			}),
 			/* @__PURE__ */ s("div", {
 				className: "visual-match-picture",
-				children: [/* @__PURE__ */ o(fn, { scene: a ?? un(l) }), /* @__PURE__ */ o("button", {
+				children: [/* @__PURE__ */ o(xn, { scene: a ?? yn(l) }), /* @__PURE__ */ o("button", {
 					"aria-label": "اربط الصورة بالإجابة",
 					className: h ? "visual-match-point visual-match-point--target visual-match-point--target-active" : "visual-match-point visual-match-point--target",
-					onPointerCancel: C,
+					onPointerCancel: w,
 					onPointerDown: S,
-					onPointerMove: ee,
-					onPointerUp: C,
+					onPointerMove: C,
+					onPointerUp: w,
 					ref: f,
 					type: "button"
 				})]
@@ -2680,7 +3219,7 @@ function An({ choices: e, onChange: n, scene: a, value: c, visual: l }) {
 		]
 	});
 }
-function jn({ answerId: e, choices: t, getAnswer: n, items: a, updateAnswer: c }) {
+function Xn({ answerId: e, choices: t, getAnswer: n, items: a, updateAnswer: c }) {
 	let l = Math.max(...a.map((e) => e.squareLength)) + 2, u = Qe(t), [d, f] = i(null), [p, m] = i(!1), [h, g] = i({}), _ = r(null);
 	function v(e, t, n) {
 		let r = d;
@@ -2723,7 +3262,7 @@ function jn({ answerId: e, choices: t, getAnswer: n, items: a, updateAnswer: c }
 		"data-coloring": p ? "true" : "false",
 		onPointerCancel: () => x(),
 		onPointerUp: () => x(),
-		children: [/* @__PURE__ */ o(Je, {
+		children: [/* @__PURE__ */ o(qe, {
 			ariaLabel: "ألوان الأقلام",
 			className: "length-color-picker",
 			colors: u,
@@ -2732,7 +3271,7 @@ function jn({ answerId: e, choices: t, getAnswer: n, items: a, updateAnswer: c }
 		}), /* @__PURE__ */ o("div", {
 			className: "length-card-row",
 			children: a.map((t) => {
-				let r = `${e}:squares:${t.id}`, i = `${e}:color:${t.id}`, a = bn(n(i)), d = h[t.id], f = d?.colorId ?? a?.choiceId, p = d?.fill ?? +!!a?.choiceId, m = f ? Ze(u, f) : "#9aa3a8", g = `${16 + Math.min(p, 1) * 68}%`;
+				let r = `${e}:squares:${t.id}`, i = `${e}:color:${t.id}`, a = kn(n(i)), d = h[t.id], f = d?.colorId ?? a?.choiceId, p = d?.fill ?? +!!a?.choiceId, m = f ? Ze(u, f) : "#9aa3a8", g = `${16 + Math.min(p, 1) * 68}%`;
 				return /* @__PURE__ */ s("div", {
 					className: "length-card",
 					children: [/* @__PURE__ */ o("div", {
@@ -2767,11 +3306,11 @@ function jn({ answerId: e, choices: t, getAnswer: n, items: a, updateAnswer: c }
 						className: "length-value-row",
 						children: [
 							/* @__PURE__ */ o("span", { children: t.label }),
-							/* @__PURE__ */ o(nn, {
+							/* @__PURE__ */ o(fn, {
 								ariaLabel: `طول ${t.label} بالمربعات`,
 								inputMode: "numeric",
 								onChange: (e) => c(r, e),
-								value: yn(n(r))
+								value: On(n(r))
 							}),
 							/* @__PURE__ */ o("span", { children: "مربعات" })
 						]
@@ -2783,7 +3322,7 @@ function jn({ answerId: e, choices: t, getAnswer: n, items: a, updateAnswer: c }
 }
 //#endregion
 //#region src/renderer/QuestionPreviewPanel.tsx
-function Mn({ adapters: e, answers: t, onAnswersChange: n, question: r }) {
+function Zn({ adapters: e, answers: t, onAnswersChange: n, question: r }) {
 	let [a, s] = i({}), c = t ?? a;
 	function l(e) {
 		if (t !== void 0) {
@@ -2806,7 +3345,7 @@ function Mn({ adapters: e, answers: t, onAnswersChange: n, question: r }) {
 	}
 	return /* @__PURE__ */ o("div", {
 		className: "exam-renderer-preview",
-		children: /* @__PURE__ */ o(mn, {
+		children: /* @__PURE__ */ o(Cn, {
 			adapters: e,
 			clearAnswer: d,
 			getAnswer: (e) => c[e],
@@ -2817,7 +3356,7 @@ function Mn({ adapters: e, answers: t, onAnswersChange: n, question: r }) {
 }
 //#endregion
 //#region src/renderer/PrintableExamDocument.tsx
-var Nn = {
+var Qn = {
 	ariaLabel: "معلومات المؤسسة",
 	logoAlt: "شعار المملكة المغربية",
 	logoSrc: "/logo/morocco-logo.png",
@@ -2828,39 +3367,39 @@ var Nn = {
 		"المديرية الإقليمية"
 	]
 };
-function Pn({ exam: e, locale: t = "fr", variant: n }) {
-	let r = nr(t), i = Vn(e);
+function $n({ exam: e, locale: t = "fr", variant: n }) {
+	let r = Ar(t), i = or(e);
 	return /* @__PURE__ */ s("article", {
 		className: `printable-exam printable-exam--${n}`,
-		dir: tr(t) ? "rtl" : "ltr",
+		dir: kr(t) ? "rtl" : "ltr",
 		children: [/* @__PURE__ */ s("div", {
 			className: "printable-exam__top",
 			children: [/* @__PURE__ */ s("header", {
 				className: "printable-exam__header",
 				children: [/* @__PURE__ */ s("div", {
 					className: "printable-exam__title-row",
-					children: [/* @__PURE__ */ o(Bn, { totalPoints: i }), /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("h1", { children: e.title }) })]
+					children: [/* @__PURE__ */ o(ar, { totalPoints: i }), /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("h1", { children: e.title }) })]
 				}), /* @__PURE__ */ s("div", {
 					className: "printable-exam__meta",
 					children: [
-						/* @__PURE__ */ o(zn, {
+						/* @__PURE__ */ o(ir, {
 							label: r.duration,
 							value: e.timer
 						}),
-						/* @__PURE__ */ o(zn, {
+						/* @__PURE__ */ o(ir, {
 							label: r.level,
 							value: e.level
 						}),
-						/* @__PURE__ */ o(zn, {
-							label: tr(t) ? "المادة" : r.subject ?? "Matiere",
+						/* @__PURE__ */ o(ir, {
+							label: kr(t) ? "المادة" : r.subject ?? "Matiere",
 							value: e.subject
 						})
 					]
 				})]
-			}), /* @__PURE__ */ o(Fn, {})]
+			}), /* @__PURE__ */ o(er, {})]
 		}), /* @__PURE__ */ o("div", {
 			className: "printable-exam__sections",
-			children: e.sections.map((e) => /* @__PURE__ */ o(In, {
+			children: e.sections.map((e) => /* @__PURE__ */ o(tr, {
 				locale: t,
 				section: e,
 				variant: n
@@ -2868,24 +3407,24 @@ function Pn({ exam: e, locale: t = "fr", variant: n }) {
 		})]
 	});
 }
-function Fn() {
+function er() {
 	return /* @__PURE__ */ s("section", {
-		"aria-label": Nn.ariaLabel,
+		"aria-label": Qn.ariaLabel,
 		className: "printable-institution-header",
 		dir: "rtl",
 		children: [
 			/* @__PURE__ */ o("img", {
-				alt: Nn.logoAlt,
+				alt: Qn.logoAlt,
 				className: "printable-institution-header__logo",
-				src: Nn.logoSrc
+				src: Qn.logoSrc
 			}),
-			/* @__PURE__ */ o("h1", { children: Nn.title }),
-			Nn.lines.map((e) => /* @__PURE__ */ o("p", { children: e }, e))
+			/* @__PURE__ */ o("h1", { children: Qn.title }),
+			Qn.lines.map((e) => /* @__PURE__ */ o("p", { children: e }, e))
 		]
 	});
 }
-function In({ locale: e = "fr", section: t, variant: n }) {
-	let r = nr(e);
+function tr({ locale: e = "fr", section: t, variant: n }) {
+	let r = Ar(e);
 	return /* @__PURE__ */ s("section", {
 		className: `printable-section printable-section--${t.tone}`,
 		"data-variant": n,
@@ -2896,7 +3435,7 @@ function In({ locale: e = "fr", section: t, variant: n }) {
 					className: "printable-section__score",
 					children: /* @__PURE__ */ s("span", {
 						className: "printable-section__obtained",
-						children: [/* @__PURE__ */ s("strong", { children: [/* @__PURE__ */ o("i", { "aria-hidden": "true" }), /* @__PURE__ */ s("b", { children: ["/ ", R(t)] })] }), /* @__PURE__ */ o("small", { children: r.obtainedNote })]
+						children: [/* @__PURE__ */ s("strong", { children: [/* @__PURE__ */ o("i", { "aria-hidden": "true" }), /* @__PURE__ */ s("b", { children: ["/ ", z(t)] })] }), /* @__PURE__ */ o("small", { children: r.obtainedNote })]
 					})
 				}),
 				/* @__PURE__ */ o("h2", { children: t.title }),
@@ -2907,7 +3446,7 @@ function In({ locale: e = "fr", section: t, variant: n }) {
 			]
 		}), /* @__PURE__ */ o("div", {
 			className: "printable-section__body",
-			children: t.questions.map((t) => /* @__PURE__ */ o(Ln, {
+			children: t.questions.map((t) => /* @__PURE__ */ o(nr, {
 				locale: e,
 				question: t,
 				variant: n
@@ -2915,8 +3454,8 @@ function In({ locale: e = "fr", section: t, variant: n }) {
 		})]
 	});
 }
-function Ln({ locale: e = "fr", question: t, variant: n }) {
-	let r = nr(e), i = ae(t), a = i > 0 ? I(i) : "";
+function nr({ locale: e = "fr", question: t, variant: n }) {
+	let r = Ar(e), i = re(t), a = i > 0 ? R(i) : "";
 	return /* @__PURE__ */ s("article", {
 		className: `printable-question printable-question--${t.type}`,
 		children: [/* @__PURE__ */ o("div", {
@@ -2939,31 +3478,51 @@ function Ln({ locale: e = "fr", question: t, variant: n }) {
 					}) : null
 				]
 			})
-		}), Rn(t, n, r, e)]
+		}), rr(t, n, r, e)]
 	});
 }
-function Rn(e, t, n, r) {
+function rr(e, t, n, r) {
 	switch (e.type) {
 		case "inline-inputs":
 		case "equation-inputs": return /* @__PURE__ */ o("div", {
 			className: "printable-equation-grid",
 			children: e.items.map((e) => /* @__PURE__ */ o("div", {
 				className: "printable-equation-card",
-				children: /* @__PURE__ */ o($n, { item: e })
+				children: /* @__PURE__ */ o(Dr, { item: e })
 			}, e.id))
 		});
 		case "number-line": return /* @__PURE__ */ s("div", {
 			className: "printable-number-line-layout",
 			children: [/* @__PURE__ */ s("div", {
 				className: "printable-number-line-expression",
-				children: [/* @__PURE__ */ o("span", { children: e.expression }), /* @__PURE__ */ o(er, {})]
-			}), /* @__PURE__ */ o(Xn, {})]
+				children: [/* @__PURE__ */ o("span", { children: e.expression }), /* @__PURE__ */ o(Or, {})]
+			}), /* @__PURE__ */ o(wr, {})]
 		});
+		case "operation-solving": {
+			let t = lr(e);
+			return /* @__PURE__ */ s("div", {
+				className: [
+					"printable-operation-solving",
+					`printable-operation-solving--${e.solutionMode}`,
+					`printable-operation-solving--${t}`
+				].join(" "),
+				children: [t === "equation-card-grid" ? /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
+					className: "printable-operation-solving__equation",
+					children: /* @__PURE__ */ o(cr, { question: e })
+				}) }) : null, e.operator === "÷" ? /* @__PURE__ */ o(dr, {
+					question: e,
+					showOperands: t === "vertical-operation"
+				}) : /* @__PURE__ */ o(ur, {
+					question: e,
+					showOperands: t === "vertical-operation"
+				})]
+			});
+		}
 		case "visual-choice": return /* @__PURE__ */ s("div", {
 			className: "printable-visual-match",
-			children: [/* @__PURE__ */ o(Un, {
+			children: [/* @__PURE__ */ o(_r, {
 				choices: e.choices,
-				scene: e.scene ?? un(e.visual)
+				scene: e.scene ?? yn(e.visual)
 			}), e.inputLabel ? /* @__PURE__ */ s("div", {
 				className: "printable-inline-answer",
 				children: [/* @__PURE__ */ o("span", { children: e.inputLabel }), /* @__PURE__ */ o($, {})]
@@ -2973,9 +3532,9 @@ function Rn(e, t, n, r) {
 			className: "printable-length-task",
 			children: /* @__PURE__ */ o("div", {
 				className: "printable-length-list",
-				children: e.items.map((e) => /* @__PURE__ */ o(Zn, {
+				children: e.items.map((e) => /* @__PURE__ */ o(Tr, {
 					item: e,
-					squareUnit: tr(r) ? "مربعات" : "carres",
+					squareUnit: kr(r) ? "مربعات" : "carres",
 					variant: t
 				}, e.id))
 			})
@@ -2987,7 +3546,7 @@ function Rn(e, t, n, r) {
 					className: "printable-shape-bank",
 					children: e.choices.map((e) => /* @__PURE__ */ o("div", {
 						className: "printable-shape-card",
-						children: /* @__PURE__ */ o(Be, { shapeId: e.id })
+						children: /* @__PURE__ */ o(ze, { shapeId: e.id })
 					}, e.id))
 				}),
 				/* @__PURE__ */ o("div", {
@@ -2997,12 +3556,12 @@ function Rn(e, t, n, r) {
 						children: [/* @__PURE__ */ s("span", { children: [t + 1, "."] }), /* @__PURE__ */ o("strong", { children: e.label })]
 					}, e.id))
 				}),
-				/* @__PURE__ */ o(Hn, { label: n.dragArea })
+				/* @__PURE__ */ o(sr, { label: n.dragArea })
 			]
 		});
 		case "drawing-grid": return /* @__PURE__ */ o("div", {
 			className: "printable-drawing-block",
-			children: /* @__PURE__ */ o(Yn, { points: e.points })
+			children: /* @__PURE__ */ o(Cr, { points: e.points })
 		});
 		case "table-response": return /* @__PURE__ */ o("div", {
 			className: "printable-table-response",
@@ -3036,13 +3595,13 @@ function Rn(e, t, n, r) {
 				children: e.situation
 			}), /* @__PURE__ */ o("div", {
 				className: "printable-word-problem__parts",
-				children: e.parts.map((e, t) => /* @__PURE__ */ o(Qn, {
+				children: e.parts.map((e, t) => /* @__PURE__ */ o(Er, {
 					part: e,
 					partNumber: t + 1
 				}, e.id))
 			})]
 		});
-		case "drag-match": return /* @__PURE__ */ o(Gn, {
+		case "drag-match": return /* @__PURE__ */ o(yr, {
 			items: e.items,
 			targets: e.targets
 		});
@@ -3065,7 +3624,7 @@ function Rn(e, t, n, r) {
 		case "label-placement": return /* @__PURE__ */ s("div", {
 			className: "printable-label-placement",
 			children: [
-				/* @__PURE__ */ o(Jn, { targets: e.targets }),
+				/* @__PURE__ */ o(Sr, { targets: e.targets }),
 				/* @__PURE__ */ o("div", {
 					className: "printable-placement-labels",
 					children: e.labels.map((e) => /* @__PURE__ */ o("span", {
@@ -3073,7 +3632,7 @@ function Rn(e, t, n, r) {
 						children: /* @__PURE__ */ o("strong", { children: e.label })
 					}, e.id))
 				}),
-				/* @__PURE__ */ o(Hn, { label: n.placeLabels })
+				/* @__PURE__ */ o(sr, { label: n.placeLabels })
 			]
 		});
 		case "audio-recording": return /* @__PURE__ */ s("div", {
@@ -3098,49 +3657,172 @@ function Rn(e, t, n, r) {
 		});
 	}
 }
-function zn({ label: e, value: t }) {
+function ir({ label: e, value: t }) {
 	return /* @__PURE__ */ s("div", {
 		className: "printable-meta-pill",
 		children: [/* @__PURE__ */ o("span", { children: e }), /* @__PURE__ */ o("strong", { children: t })]
 	});
 }
-function Bn({ totalPoints: e }) {
+function ar({ totalPoints: e }) {
 	return /* @__PURE__ */ o("div", {
 		className: "printable-note-box",
 		children: /* @__PURE__ */ s("strong", { children: [/* @__PURE__ */ o("i", { "aria-hidden": "true" }), /* @__PURE__ */ s("b", { children: ["/ ", e] })] })
 	});
 }
-function Vn(e) {
-	let t = e.sections.filter((e) => e.isScored !== !1).map((e) => L(e)).filter((e) => Number.isFinite(e));
+function or(e) {
+	let t = e.sections.filter((e) => e.isScored !== !1).map((e) => ae(e)).filter((e) => Number.isFinite(e));
 	if (t.length === 0) return "";
 	let n = t.reduce((e, t) => e + t, 0);
 	return String(Number.isInteger(n) ? n : Number(n.toFixed(2)));
 }
-function Hn({ label: e }) {
+function sr({ label: e }) {
 	return /* @__PURE__ */ s("div", {
 		className: "printable-hint-line",
 		children: [/* @__PURE__ */ o("span", { children: e }), /* @__PURE__ */ o($, {})]
 	});
 }
-function Un({ choices: e, scene: t }) {
+function cr({ question: e }) {
+	return /* @__PURE__ */ s(a, { children: [
+		/* @__PURE__ */ o("span", { children: e.leftOperand }),
+		/* @__PURE__ */ o(fr, {
+			className: "printable-operation-solving__symbol",
+			operator: e.operator
+		}),
+		/* @__PURE__ */ s("span", { children: [e.rightOperand, " ="] })
+	] });
+}
+function lr(e) {
+	return e.layout === "equation-card-grid" || e.solutionMode === "full-process" ? "equation-card-grid" : "vertical-operation";
+}
+function ur({ question: e, showOperands: t }) {
+	let n = mr([
+		e.leftOperand,
+		e.rightOperand,
+		e.correctAnswer
+	]), r = n.columns, i = Math.max(r, 5), a = Math.max(r, pr(e.correctAnswer).length, 2), c = hr(e.leftOperand, n, i), l = hr(e.rightOperand, n, i);
+	return /* @__PURE__ */ s("div", {
+		className: ["printable-vertical-operation", t ? "printable-vertical-operation--with-operands" : "printable-vertical-operation--blank-operands"].filter(Boolean).join(" "),
+		style: {
+			"--operation-answer-columns": a,
+			"--operation-columns": i
+		},
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "printable-vertical-operation__row",
+				children: [/* @__PURE__ */ o("span", {
+					className: "printable-vertical-operation__operator",
+					"aria-hidden": "true"
+				}), c.map((e, n) => /* @__PURE__ */ o("span", {
+					className: "printable-vertical-operation__digit",
+					children: t ? e : ""
+				}, `left-${n}`))]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "printable-vertical-operation__row",
+				children: [/* @__PURE__ */ o(fr, {
+					className: "printable-vertical-operation__operator",
+					operator: e.operator
+				}), l.map((e, n) => /* @__PURE__ */ o("span", {
+					className: "printable-vertical-operation__digit",
+					children: t ? e : ""
+				}, `right-${n}`))]
+			}),
+			/* @__PURE__ */ o("span", {
+				className: "printable-vertical-operation__rule",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ o("span", {
+				className: "printable-vertical-operation__answer-lane",
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+function dr({ question: e, showOperands: t }) {
+	return /* @__PURE__ */ s("div", {
+		className: "printable-division-operation",
+		children: [
+			/* @__PURE__ */ o("span", { className: "printable-division-operation__quotient" }),
+			/* @__PURE__ */ s("div", {
+				className: "printable-division-operation__bracket",
+				children: [/* @__PURE__ */ o("span", {
+					className: "printable-division-operation__dividend",
+					children: t ? e.leftOperand : ""
+				}), /* @__PURE__ */ o("span", {
+					className: "printable-division-operation__divisor",
+					children: t ? e.rightOperand : ""
+				})]
+			}),
+			/* @__PURE__ */ o("span", { className: "printable-division-operation__work" })
+		]
+	});
+}
+function fr({ className: e, operator: t }) {
+	let n = t.trim();
+	return /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		className: `${e} printable-operation-symbol printable-operation-symbol--${n === "+" ? "plus" : n === "-" || n === "−" || n === "–" ? "minus" : n === "÷" || n === "/" ? "divide" : "multiply"}`,
+		children: [
+			/* @__PURE__ */ o("i", { className: "printable-operation-symbol__stroke" }),
+			/* @__PURE__ */ o("i", { className: "printable-operation-symbol__stroke" }),
+			/* @__PURE__ */ o("i", { className: "printable-operation-symbol__stroke" })
+		]
+	});
+}
+function pr(e) {
+	let t = e.trim();
+	return t.length > 0 ? Array.from(t) : [""];
+}
+function mr(e) {
+	let t = e.map(gr), n = t.some((e) => e.separator.length > 0), r = Math.max(...t.map((e) => e.whole.length), 1), i = n ? Math.max(...t.map((e) => e.fraction.length), 0) : 0;
+	return {
+		columns: Math.max(n ? r + 1 + i : r, 2),
+		fractionColumns: i,
+		hasDecimal: n,
+		wholeColumns: r
+	};
+}
+function hr(e, t, n = t.columns) {
+	let r = gr(e), i = Math.max(0, t.wholeColumns - r.whole.length), a = t.hasDecimal ? [
+		...Array.from({ length: i }, () => ""),
+		...Array.from(r.whole),
+		r.separator,
+		...Array.from(r.fraction),
+		...Array.from({ length: Math.max(0, t.fractionColumns - r.fraction.length) }, () => "")
+	] : [...Array.from({ length: i }, () => ""), ...Array.from(r.whole)];
+	return [...Array.from({ length: Math.max(0, n - a.length) }, () => ""), ...a];
+}
+function gr(e) {
+	let t = e.trim(), n = t.search(/[.,]/);
+	return n < 0 ? {
+		fraction: "",
+		separator: "",
+		whole: t
+	} : {
+		fraction: t.slice(n + 1),
+		separator: t[n],
+		whole: t.slice(0, n)
+	};
+}
+function _r({ choices: e, scene: t }) {
 	return /* @__PURE__ */ o("div", {
 		className: "printable-visual-match__preview",
 		children: /* @__PURE__ */ s("div", {
 			className: "visual-line-match printable-visual-line-match",
 			children: [/* @__PURE__ */ s("div", {
 				className: "visual-match-picture printable-visual-match-picture",
-				children: [/* @__PURE__ */ o(fn, { scene: t }), /* @__PURE__ */ o("span", {
+				children: [/* @__PURE__ */ o(xn, { scene: t }), /* @__PURE__ */ o("span", {
 					"aria-hidden": "true",
 					className: "visual-match-point visual-match-point--target printable-match-point printable-match-point--target"
 				})]
 			}), /* @__PURE__ */ o("div", {
 				className: "visual-line-match__answers printable-visual-line-match__answers",
-				children: e.map((e) => /* @__PURE__ */ o(Wn, { choice: e }, e.id))
+				children: e.map((e) => /* @__PURE__ */ o(vr, { choice: e }, e.id))
 			})]
 		})
 	});
 }
-function Wn({ choice: e }) {
+function vr({ choice: e }) {
 	return /* @__PURE__ */ s("div", {
 		className: "visual-match-answer printable-visual-match-answer",
 		children: [/* @__PURE__ */ o("span", {
@@ -3152,25 +3834,25 @@ function Wn({ choice: e }) {
 		})]
 	});
 }
-function Gn({ items: e, targets: t }) {
+function yr({ items: e, targets: t }) {
 	return /* @__PURE__ */ s("div", {
 		className: "printable-drag-match-board",
 		children: [/* @__PURE__ */ o("div", {
 			className: "printable-drag-match-row printable-drag-match-row--answers",
-			children: e.map((e, t) => /* @__PURE__ */ o(qn, {
+			children: e.map((e, t) => /* @__PURE__ */ o(xr, {
 				index: t,
 				item: e
 			}, e.id))
 		}), /* @__PURE__ */ o("div", {
 			className: "printable-drag-match-row printable-drag-match-row--targets",
-			children: t.map((e, t) => /* @__PURE__ */ o(Kn, {
+			children: t.map((e, t) => /* @__PURE__ */ o(br, {
 				index: t,
 				target: e
 			}, e.id))
 		})]
 	});
 }
-function Kn({ index: e, target: t }) {
+function br({ index: e, target: t }) {
 	return /* @__PURE__ */ s("div", {
 		className: "printable-drag-match-card printable-drag-match-card--target",
 		children: [/* @__PURE__ */ o("span", {
@@ -3178,11 +3860,11 @@ function Kn({ index: e, target: t }) {
 			children: String.fromCharCode(65 + e)
 		}), /* @__PURE__ */ o("div", {
 			className: "printable-drag-match-content",
-			children: t.shapeId ? /* @__PURE__ */ o(Be, { shapeId: t.shapeId }) : /* @__PURE__ */ o("strong", { children: t.label })
+			children: t.shapeId ? /* @__PURE__ */ o(ze, { shapeId: t.shapeId }) : /* @__PURE__ */ o("strong", { children: t.label })
 		})]
 	});
 }
-function qn({ index: e, item: t }) {
+function xr({ index: e, item: t }) {
 	return /* @__PURE__ */ s("div", {
 		className: "printable-drag-match-card printable-drag-match-card--answer",
 		children: [/* @__PURE__ */ o("div", {
@@ -3194,7 +3876,7 @@ function qn({ index: e, item: t }) {
 		})]
 	});
 }
-function Jn({ targets: e }) {
+function Sr({ targets: e }) {
 	return /* @__PURE__ */ o("div", {
 		className: "printable-placement-board",
 		children: e.map((e, t) => /* @__PURE__ */ o("div", {
@@ -3207,7 +3889,7 @@ function Jn({ targets: e }) {
 		}, e.id))
 	});
 }
-function Yn({ points: e }) {
+function Cr({ points: e }) {
 	return /* @__PURE__ */ s("svg", {
 		className: "printable-drawing-grid",
 		viewBox: "0 0 1000 420",
@@ -3238,7 +3920,7 @@ function Yn({ points: e }) {
 		]
 	});
 }
-function Xn() {
+function wr() {
 	return /* @__PURE__ */ s("svg", {
 		className: "printable-number-line",
 		viewBox: "0 0 420 90",
@@ -3262,7 +3944,7 @@ function Xn() {
 		}, t))]
 	});
 }
-function Zn({ item: e, squareUnit: t, variant: n }) {
+function Tr({ item: e, squareUnit: t, variant: n }) {
 	return /* @__PURE__ */ s("div", {
 		className: "length-card printable-length-card",
 		children: [/* @__PURE__ */ o("div", {
@@ -3291,13 +3973,13 @@ function Zn({ item: e, squareUnit: t, variant: n }) {
 			className: "length-value-row printable-length-value-row",
 			children: [
 				/* @__PURE__ */ o("span", { children: e.label }),
-				/* @__PURE__ */ o(er, {}),
+				/* @__PURE__ */ o(Or, {}),
 				/* @__PURE__ */ o("span", { children: t })
 			]
 		})]
 	});
 }
-function Qn({ part: e, partNumber: t }) {
+function Er({ part: e, partNumber: t }) {
 	return /* @__PURE__ */ s("section", {
 		className: "printable-word-problem__part",
 		children: [/* @__PURE__ */ s("div", {
@@ -3326,10 +4008,10 @@ function Qn({ part: e, partNumber: t }) {
 		})]
 	});
 }
-function $n({ item: t }) {
-	return t.answers?.length ? /* @__PURE__ */ s(a, { children: [t.answers.map((t) => /* @__PURE__ */ s(e, { children: [t.before ? /* @__PURE__ */ o("span", { children: t.before }) : null, /* @__PURE__ */ o(er, {})] }, t.id)), t.after ? /* @__PURE__ */ o("span", { children: t.after }) : null] }) : t.correctAnswer ? /* @__PURE__ */ s(a, { children: [
+function Dr({ item: t }) {
+	return t.answers?.length ? /* @__PURE__ */ s(a, { children: [t.answers.map((t) => /* @__PURE__ */ s(e, { children: [t.before ? /* @__PURE__ */ o("span", { children: t.before }) : null, /* @__PURE__ */ o(Or, {})] }, t.id)), t.after ? /* @__PURE__ */ o("span", { children: t.after }) : null] }) : t.correctAnswer ? /* @__PURE__ */ s(a, { children: [
 		/* @__PURE__ */ o("span", { children: t.before }),
-		/* @__PURE__ */ o(er, {}),
+		/* @__PURE__ */ o(Or, {}),
 		t.after ? /* @__PURE__ */ o("span", { children: t.after }) : null
 	] }) : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", { children: t.before }), t.after ? /* @__PURE__ */ o("span", { children: t.after }) : null] });
 }
@@ -3339,17 +4021,17 @@ function $() {
 		"aria-hidden": "true"
 	});
 }
-function er() {
+function Or() {
 	return /* @__PURE__ */ o("span", {
 		className: "printable-blank-box",
 		"aria-hidden": "true"
 	});
 }
-function tr(e) {
+function kr(e) {
 	return e.startsWith("ar");
 }
-function nr(e) {
-	return tr(e) ? {
+function Ar(e) {
+	return kr(e) ? {
 		answerArea: "مساحة الجواب",
 		countShort: "عدد",
 		dragArea: "اربط أو اكتب الجواب",
@@ -3386,7 +4068,7 @@ function nr(e) {
 }
 //#endregion
 //#region src/exam-session/interactions/DraftSheet.tsx
-function rr({ disabled: e, onChange: t, value: n }) {
+function jr({ disabled: e, onChange: t, value: n }) {
 	let [r, a] = i(!1);
 	return /* @__PURE__ */ o("aside", {
 		className: "draft-sheet",
@@ -3422,7 +4104,7 @@ function rr({ disabled: e, onChange: t, value: n }) {
 }
 //#endregion
 //#region src/exam-session/interactions/SingleChoice.tsx
-function ir({ answerId: e, choices: t, value: n, onChange: r }) {
+function Mr({ answerId: e, choices: t, value: n, onChange: r }) {
 	return /* @__PURE__ */ o("div", {
 		className: "choice-group",
 		role: "radiogroup",
@@ -3447,4 +4129,4 @@ function ir({ answerId: e, choices: t, value: n, onChange: r }) {
 	});
 }
 //#endregion
-export { Fe as CoinTableResponse, Je as ColorPenPicker, K as DEFAULT_GEOMETRY_COLORS, zt as DEFAULT_NATIVE_VOICE_AI_CONFIG, rr as DraftSheet, Ve as DragMatch, hn as ExamSectionRenderer, ot as GeometryCanvas, G as HandwrittenNumberAnswer, Nt as KonvaDrawingGrid, Pt as LabelPlacement, Lt as NumberLineAnswer, Pn as PrintableExamDocument, Ln as PrintableQuestionRenderer, In as PrintableSectionRenderer, Kt as PronunciationRecorder, Mn as QuestionPreviewPanel, mn as QuestionRenderer, Be as ShapeGlyph, ir as SingleChoice, en as SortableAnswer, nn as TextAnswer, fn as VisualSceneGraphic, de as calculateExamResult, un as createVisualSceneFromVariant, Bt as evaluateVoiceAiResult, Re as examShapeOptions, I as formatScoreValue, Ze as getColorValue, Xe as getDefaultColorId, ze as getExamShapeLabel, ae as getQuestionMaxScore, L as getSectionMaxScore, R as getSectionMaxScoreLabel, dn as getVisualSceneColorValue, Qe as mapChoicesToGeometryColors, Vt as normalizeVoiceText, ie as parseScoreValue, oe as sectionHasQuestionScores, cn as visualSceneColorOptions, sn as visualSceneIconOptions, ln as visualSceneStateOptions, z as withDerivedSectionScore };
+export { Pe as CoinTableResponse, qe as ColorPenPicker, Je as DEFAULT_GEOMETRY_COLORS, qt as DEFAULT_NATIVE_VOICE_AI_CONFIG, jr as DraftSheet, Be as DragMatch, wn as ExamSectionRenderer, ot as GeometryCanvas, q as HandwrittenNumberAnswer, Pt as KonvaDrawingGrid, Ft as LabelPlacement, Rt as NumberLineAnswer, Ut as OperationWorkArea, $n as PrintableExamDocument, nr as PrintableQuestionRenderer, tr as PrintableSectionRenderer, en as PronunciationRecorder, Zn as QuestionPreviewPanel, Cn as QuestionRenderer, ze as ShapeGlyph, Mr as SingleChoice, un as SortableAnswer, fn as TextAnswer, xn as VisualSceneGraphic, ue as calculateExamResult, yn as createVisualSceneFromVariant, Jt as evaluateVoiceAiResult, Le as examShapeOptions, R as formatScoreValue, Ze as getColorValue, Xe as getDefaultColorId, Re as getExamShapeLabel, re as getQuestionMaxScore, ae as getSectionMaxScore, z as getSectionMaxScoreLabel, bn as getVisualSceneColorValue, Qe as mapChoicesToGeometryColors, Yt as normalizeVoiceText, ne as parseScoreValue, ie as sectionHasQuestionScores, _n as visualSceneColorOptions, gn as visualSceneIconOptions, vn as visualSceneStateOptions, B as withDerivedSectionScore };