mathlean-canvas 0.1.0

package/dist/index.js

@@ -0,0 +1,2201 @@
+import { useEffect as e, useLayoutEffect as t, useRef as n, useState as r } from "react";
+import i from "katex";
+import { Arrow as a, Circle as o, Group as s, Layer as c, Line as l, Rect as u, Stage as ee, Text as te, Transformer as ne } from "react-konva";
+import { Fragment as re, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/MathCanvas.tsx
+var p = 44, m = 56, ie = 24, ae = 96, oe = 2, se = 14, ce = 6, le = 12, ue = 10, de = 14, fe = 34, pe = .9, me = 2.2, he = 56, ge = 56, _e = 48, ve = 48, ye = 160, be = 8, xe = 2, h = 8, Se = 26, Ce = 30, g = 14, we = 8, _ = 16, v = "KaTeX_Main, Computer Modern Serif, Latin Modern Roman, Times New Roman, serif", Te = 24, Ee = 18, De = 180, Oe = 280, ke = 92;
+function Ae(e) {
+	let t = [], n = /(\$\$[\s\S]+?\$\$|\$[^$]+\$)/g, r = 0, i = n.exec(e), a = 0;
+	for (; i;) {
+		i.index > r && t.push({
+			id: `segment-${a++}`,
+			type: "text",
+			value: e.slice(r, i.index)
+		});
+		let o = i[0], s = o.startsWith("$$");
+		t.push({
+			id: `segment-${a++}`,
+			type: "math",
+			value: o.slice(s ? 2 : 1, s ? -2 : -1),
+			fallback: o,
+			displayMode: s
+		}), r = i.index + o.length, i = n.exec(e);
+	}
+	return r < e.length && t.push({
+		id: `segment-${a}`,
+		type: "text",
+		value: e.slice(r)
+	}), t;
+}
+function y({ expression: t, fallback: r, displayMode: a = !1 }) {
+	let o = n(null);
+	return e(() => {
+		let e = o.current;
+		if (e) {
+			e.textContent = "";
+			try {
+				i.render(t, e, {
+					displayMode: a,
+					throwOnError: !1,
+					strict: "ignore"
+				});
+			} catch {
+				e.textContent = r;
+			}
+		}
+	}, [
+		a,
+		t,
+		r
+	]), /* @__PURE__ */ d("span", {
+		ref: o,
+		style: a ? {
+			display: "block",
+			textAlign: "left"
+		} : void 0
+	});
+}
+function je({ content: e, renderMode: t }) {
+	return t === "plain" ? /* @__PURE__ */ d(re, { children: e }) : /* @__PURE__ */ d(re, { children: Ae(e).map((e) => e.type === "math" ? /* @__PURE__ */ d(y, {
+		expression: e.value,
+		fallback: e.fallback,
+		displayMode: e.displayMode
+	}, e.id) : /* @__PURE__ */ d("span", { children: e.value }, e.id)) });
+}
+function Me() {
+	return /* @__PURE__ */ d("svg", {
+		width: "14",
+		height: "14",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("path", {
+			d: "M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5",
+			fill: "none",
+			stroke: "#b42318",
+			strokeWidth: "1.6",
+			strokeLinecap: "round"
+		})
+	});
+}
+function Ne({ active: e }) {
+	return /* @__PURE__ */ f("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ d("path", {
+			d: "M11.8 1.8a1.6 1.6 0 0 1 2.3 2.3l-7.9 7.9-3.3 1 1-3.3 7.9-7.9Z",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.4",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ d("path", {
+			d: "M9.9 3.7l2.4 2.4",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.4",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function Pe({ active: e }) {
+	return /* @__PURE__ */ f("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ d("path", {
+			d: "M6.2 2.5a1.8 1.8 0 0 1 2.5 0l4.8 4.8a1.8 1.8 0 0 1 0 2.5l-3.2 3.2H5.5L2.5 10a1.8 1.8 0 0 1 0-2.5l3.7-5Z",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.4",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ d("path", {
+			d: "M8.4 13h5.1",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.4",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function Fe({ active: e }) {
+	return /* @__PURE__ */ d("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("path", {
+			d: "M3 2.5v10.8l2.9-3.1 2.2 3.3 1.8-1.1-2.2-3.3H12L3 2.5Z",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.4",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function Ie() {
+	return /* @__PURE__ */ d("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("path", {
+			d: "M3.5 4.5h9M6 4.5V3.4c0-.5.4-.9.9-.9h2.2c.5 0 .9.4.9.9v1.1M5 6.5v5.2M8 6.5v5.2M11 6.5v5.2M4.4 4.5l.5 8c0 .6.5 1 1.1 1h4c.6 0 1.1-.4 1.1-1l.5-8",
+			fill: "none",
+			stroke: "#111",
+			strokeWidth: "1.4",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function Le({ active: e }) {
+	return /* @__PURE__ */ d("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("path", {
+			d: "M3 4h10M8 4v8M5.5 12h5",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function Re({ expression: t, fallback: r, displayMode: a = !1 }) {
+	let o = n(null);
+	return e(() => {
+		let e = o.current;
+		if (e) {
+			e.textContent = "";
+			try {
+				i.render(t, e, {
+					displayMode: a,
+					throwOnError: !1,
+					strict: "ignore"
+				});
+			} catch {
+				e.textContent = r;
+			}
+		}
+	}, [
+		a,
+		t,
+		r
+	]), /* @__PURE__ */ d("span", {
+		ref: o,
+		style: a ? {
+			display: "block",
+			textAlign: "left"
+		} : void 0
+	});
+}
+function ze(e, t) {
+	let n = /\$([^$]+)\$/g, r = n.exec(e);
+	for (; r;) {
+		let i = r.index, a = i + r[0].length;
+		if (t > i && t <= a) return {
+			expression: r[1],
+			fallback: r[1]
+		};
+		r = n.exec(e);
+	}
+	return null;
+}
+function Be(e, t) {
+	let n = window.getComputedStyle(e), r = document.createElement("div"), i = document.createElement("span");
+	r.style.position = "absolute", r.style.visibility = "hidden", r.style.pointerEvents = "none", r.style.whiteSpace = n.whiteSpace, r.style.wordBreak = n.wordBreak, r.style.overflowWrap = n.overflowWrap, r.style.font = n.font, r.style.fontFamily = n.fontFamily, r.style.fontSize = n.fontSize, r.style.fontWeight = n.fontWeight, r.style.fontStyle = n.fontStyle, r.style.letterSpacing = n.letterSpacing, r.style.textTransform = n.textTransform, r.style.textIndent = n.textIndent, r.style.padding = n.padding, r.style.border = n.border, r.style.boxSizing = n.boxSizing, r.style.lineHeight = n.lineHeight, r.style.width = n.width, r.style.minHeight = n.height, r.style.overflow = "hidden", r.textContent = e.value.slice(0, t), i.textContent = e.value.slice(t, t + 1) || " ", r.appendChild(i), document.body.appendChild(r);
+	let a = i.offsetLeft - e.scrollLeft, o = i.offsetTop - e.scrollTop;
+	return document.body.removeChild(r), {
+		left: a,
+		top: o
+	};
+}
+function Ve(e) {
+	if (typeof document > "u") return ae;
+	let t = document.createElement("canvas").getContext("2d");
+	if (!t) return ae;
+	t.font = `${Te}px ${v}`;
+	let n = Math.max(...e.split("\n").map((e) => t.measureText(e || " ").width), m);
+	return Math.ceil(n + oe + se + le);
+}
+function He({ active: e }) {
+	let t = e ? "#fff" : "#111";
+	return /* @__PURE__ */ f("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ d("path", {
+				d: "M4 4.5h8M4.8 11.2 8 4.8M11.2 11.2 8 4.8",
+				fill: "none",
+				stroke: t,
+				strokeWidth: "1.25",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ d("circle", {
+				cx: "8",
+				cy: "4",
+				r: "1.8",
+				fill: "none",
+				stroke: t,
+				strokeWidth: "1.25"
+			}),
+			/* @__PURE__ */ d("circle", {
+				cx: "4.5",
+				cy: "11.5",
+				r: "1.8",
+				fill: "none",
+				stroke: t,
+				strokeWidth: "1.25"
+			}),
+			/* @__PURE__ */ d("circle", {
+				cx: "11.5",
+				cy: "11.5",
+				r: "1.8",
+				fill: "none",
+				stroke: t,
+				strokeWidth: "1.25"
+			})
+		]
+	});
+}
+function Ue({ active: e }) {
+	let t = e ? "#fff" : "#111";
+	return /* @__PURE__ */ f("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ d("path", {
+			d: "M4 2.5H2.8v11H4M12 2.5h1.2v11H12",
+			fill: "none",
+			stroke: t,
+			strokeWidth: "1.3",
+			strokeLinecap: "round"
+		}), /* @__PURE__ */ d("path", {
+			d: "M6 5.2h1.6M8.4 5.2H10M6 8h1.6M8.4 8H10M6 10.8h1.6M8.4 10.8H10",
+			fill: "none",
+			stroke: t,
+			strokeWidth: "1.3",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function We({ active: e }) {
+	let t = e ? "#fff" : "#111";
+	return /* @__PURE__ */ f("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ d("path", {
+			d: "M3 4.5h10M3 8h5.5M9.8 8h3.2M3 11.5h10",
+			fill: "none",
+			stroke: t,
+			strokeWidth: "1.3",
+			strokeLinecap: "round"
+		}), /* @__PURE__ */ d("circle", {
+			cx: "8",
+			cy: "8",
+			r: "0.8",
+			fill: t
+		})]
+	});
+}
+function Ge({ active: e }) {
+	return /* @__PURE__ */ d("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("text", {
+			x: "8",
+			y: "11.5",
+			textAnchor: "middle",
+			fontSize: "12",
+			fontStyle: "italic",
+			fontFamily: v,
+			fill: e ? "#fff" : "#111",
+			children: "x"
+		})
+	});
+}
+function Ke({ active: e }) {
+	return /* @__PURE__ */ d("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("path", {
+			d: "M6 4 3 7l3 3M3.5 7H9a3.5 3.5 0 1 1 0 7H7",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.4",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function qe({ active: e }) {
+	return /* @__PURE__ */ d("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("path", {
+			d: "m10 4 3 3-3 3M12.5 7H7a3.5 3.5 0 1 0 0 7h2",
+			fill: "none",
+			stroke: e ? "#fff" : "#111",
+			strokeWidth: "1.4",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function b({ active: e, disabled: t = !1, label: n, onClick: r, children: i }) {
+	return /* @__PURE__ */ d("button", {
+		type: "button",
+		disabled: t,
+		onClick: r,
+		"aria-label": n,
+		title: n,
+		style: {
+			padding: "6px 10px",
+			border: "1px solid #cfcfcf",
+			borderRadius: 6,
+			background: e ? "#111" : "#fff",
+			color: e ? "#fff" : "#111",
+			cursor: t ? "not-allowed" : "pointer",
+			opacity: t ? .45 : 1,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: i
+	});
+}
+function x() {
+	let [i, Ae] = r([]), [y, x] = r([]), [Je, Ye] = r([]), [Xe, Ze] = r([]), [S, Qe] = r([]), [$e, et] = r([]), [C, tt] = r("pen"), [nt, rt] = r("plain"), [w, T] = r(null), [E, D] = r(null), [O, k] = r(null), [A, j] = r(null), [M, N] = r(null), [P, it] = r(null), [at, ot] = r(""), [st, ct] = r(0), [lt, ut] = r(null), [F, dt] = r(null), [ft, pt] = r(""), [I, mt] = r(null), [ht, L] = r(null), [R, gt] = r(null), [_t, vt] = r(""), [z, B] = r(null), [yt, bt] = r(null), [V, xt] = r({
+		width: window.innerWidth,
+		height: window.innerHeight
+	}), [St, Ct] = r(p), [wt, Tt] = r(ae), [Et, Dt] = r({}), [Ot, kt] = r({}), [At, jt] = r([]), [Mt, Nt] = r([]), [Pt, Ft] = r({
+		x: 0,
+		y: 0,
+		radius: de,
+		visible: !1
+	}), H = n(!1), U = n(!1), It = n(1), Lt = n(null), Rt = n(null), zt = n(null), Bt = n(null), Vt = n(null), Ht = n({}), Ut = n({}), Wt = n({}), Gt = n({}), Kt = n({}), qt = n({}), Jt = n(null), Yt = n(null), Xt = n({}), Zt = n(null);
+	e(() => {
+		let e = () => {
+			xt({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		};
+		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), t(() => {
+		if (!P) return;
+		let e = Jt.current;
+		if (!e) return;
+		let t = window.requestAnimationFrame(() => {
+			e.focus();
+			let t = e.value.length;
+			e.setSelectionRange(t, t), ct(t), Ct(Math.max(e.scrollHeight, p));
+		});
+		return () => window.cancelAnimationFrame(t);
+	}, [P]), t(() => {
+		if (!F) return;
+		let e = Yt.current;
+		if (!e) return;
+		let t = window.requestAnimationFrame(() => {
+			e.focus();
+			let t = e.value.length;
+			e.setSelectionRange(t, t);
+		});
+		return () => window.cancelAnimationFrame(t);
+	}, [F]), t(() => {
+		if (!I || !ht) return;
+		let e = Xt.current[`${I}-${ht.row}-${ht.col}`];
+		if (!e) return;
+		let t = window.requestAnimationFrame(() => {
+			e.focus();
+			let t = e.value.length;
+			e.setSelectionRange(t, t);
+		});
+		return () => window.cancelAnimationFrame(t);
+	}, [I, ht]), t(() => {
+		if (!R) return;
+		let e = Zt.current;
+		if (!e) return;
+		let t = window.requestAnimationFrame(() => {
+			e.focus();
+			let t = e.value.length;
+			e.setSelectionRange(t, t);
+		});
+		return () => window.cancelAnimationFrame(t);
+	}, [R]), e(() => {
+		let e = Jt.current;
+		!e || !P || (Ct(Math.max(e.scrollHeight, p)), Tt(Math.max(m, e.scrollWidth + le)));
+	}, [at, P]), t(() => {
+		if (!P || !Jt.current) {
+			ut(null);
+			return;
+		}
+		let e = y.find((e) => e.id === P);
+		if (!e || e.renderMode !== "latex") {
+			ut(null);
+			return;
+		}
+		let t = ze(at, st);
+		if (!t) {
+			ut(null);
+			return;
+		}
+		let n = Be(Jt.current, st);
+		ut({
+			expression: t.expression,
+			fallback: t.fallback,
+			left: e.x + Math.max(12, n.left),
+			top: Math.max(8, e.y - ue)
+		});
+	}, [
+		y,
+		P,
+		st,
+		at
+	]), t(() => {
+		let e = {}, t = {};
+		for (let n of y) {
+			let r = Math.max(m, V.width - n.x - ie);
+			if (n.id === P) {
+				e[n.id] = Math.max(St, p), t[n.id] = Math.min(Math.max(wt, m), r);
+				continue;
+			}
+			let i = Kt.current[n.id];
+			e[n.id] = Math.max(i?.offsetHeight ?? p, n.height, p), t[n.id] = Math.min(Math.max((i?.scrollWidth ?? n.width) + le, m), r);
+		}
+		Dt((t) => Object.keys(t).length === Object.keys(e).length && Object.entries(e).every(([e, n]) => t[e] === n) ? t : e), kt((e) => Object.keys(e).length === Object.keys(t).length && Object.entries(t).every(([t, n]) => e[t] === n) ? e : t);
+	}, [
+		y,
+		P,
+		St,
+		wt,
+		V.width
+	]), e(() => {
+		let e = Rt.current;
+		e && (e.nodes([]), e.getLayer()?.batchDraw());
+	}, [
+		w,
+		C,
+		y,
+		Et
+	]), e(() => {
+		let e = zt.current;
+		if (!e) return;
+		if (C !== "graph" && C !== "select" || !E) {
+			e.nodes([]), e.getLayer()?.batchDraw();
+			return;
+		}
+		let t = Ut.current[E];
+		e.nodes(t ? [t] : []), e.getLayer()?.batchDraw();
+	}, [
+		Je,
+		E,
+		C
+	]), e(() => {
+		let e = Bt.current;
+		if (!e) return;
+		if (C !== "matrix" && C !== "select" || !A) {
+			e.nodes([]), e.getLayer()?.batchDraw();
+			return;
+		}
+		let t = Wt.current[A];
+		e.nodes(t ? [t] : []), e.getLayer()?.batchDraw();
+	}, [
+		S,
+		A,
+		C
+	]), e(() => {
+		let e = Vt.current;
+		if (!e) return;
+		if (C !== "align" && C !== "select" || !M) {
+			e.nodes([]), e.getLayer()?.batchDraw();
+			return;
+		}
+		let t = Gt.current[M];
+		e.nodes(t ? [t] : []), e.getLayer()?.batchDraw();
+	}, [
+		$e,
+		M,
+		C
+	]);
+	let W = () => `block-${It.current++}`, Qt = () => ({
+		strokes: i,
+		blocks: y,
+		graphNodes: Je,
+		graphEdges: Xe,
+		matrices: S,
+		alignBlocks: $e,
+		renderMode: nt
+	}), G = () => {
+		dt(null), pt("");
+	}, K = () => {
+		mt(null), L(null);
+	}, q = () => {
+		gt(null), vt("");
+	}, J = () => {
+		D(null), k(null), B(null);
+	}, Y = () => {
+		j(null);
+	}, X = () => {
+		N(null);
+	}, $t = (e) => {
+		Ae(e.strokes), x(e.blocks), Ye(e.graphNodes), Ze(e.graphEdges), Qe(e.matrices), et(e.alignBlocks), rt(e.renderMode), T(null), Q(), G(), J(), K(), Y(), q(), X(), H.current = !1;
+	}, Z = () => {
+		jt((e) => [...e, Qt()]), Nt([]);
+	}, en = (e) => e ? y.find((t) => t.id === e) ?? null : null, tn = (e, t) => {
+		x((n) => n.map((n) => n.id === e ? t(n) : n));
+	}, nn = (e) => e ? Je.find((t) => t.id === e) ?? null : null, rn = (e) => e ? S.find((t) => t.id === e) ?? null : null, an = (e) => e ? $e.find((t) => t.id === e) ?? null : null, on = (e, t) => {
+		et((n) => n.map((n) => n.id === e ? t(n) : n));
+	}, sn = (e) => `\\begin{aligned}[t]${e.content.split("\n").map((e) => e.trim()).filter(Boolean).map((t) => {
+		if (e.alignMode === "token" && e.alignToken) {
+			let n = t.indexOf(e.alignToken);
+			if (n >= 0) return `${t.slice(0, n)}&${t.slice(n)}`;
+		}
+		return t;
+	}).join(" \\\\ ") || "\\,"}\\end{aligned}`, cn = (e, t) => Array.from({ length: e }, () => Array.from({ length: t }, () => "")), ln = (e, t, n, r = "") => Array.from({ length: t }, (t, i) => Array.from({ length: n }, (t, n) => e[i]?.[n] ?? r)), un = (e, t) => e.filter((e) => e >= 0 && e < t), dn = (e) => Array.from({ length: e.cols }, (t, n) => {
+		let r = Math.max(1, ...e.cells.map((e) => e[n]?.trim().length ?? 0));
+		return Math.max(Se, r * 9 + we * 2);
+	}), fn = (e) => dn(e).reduce((e, t) => e + t, 0), pn = (e) => `\\left[\\begin{array}{${Array.from({ length: e.cols }, (t, n) => e.colSeparators.includes(n) ? "c|" : "c").join("")}}${e.cells.map((t, n) => {
+		let r = t.map((e) => e.trim() || "\\,").join(" & ");
+		return e.rowSeparators.includes(n) ? `${r} \\\\ \\hline` : r;
+	}).join(" \\\\ ")}\\end{array}\\right]`, mn = (e) => fn(e) + g * 2, hn = (e) => e.rows * Ce + g * 2, gn = (e) => e.y + hn(e) / 2, _n = (e) => e.renderMode === "latex" ? e.y + Math.max(Et[e.id] ?? p, e.height) / 2 : null, vn = (e, t) => {
+		for (let n = S.length - 1; n >= 0; --n) {
+			let r = S[n], i = mn(r), a = hn(r);
+			if (e >= r.x - 12 && e <= r.x + i + 12 && t >= r.y - 12 && t <= r.y + a + 12) return r;
+		}
+		return null;
+	}, yn = (e, t) => {
+		Qe((n) => n.map((n) => n.id === e ? t(n) : n));
+	}, bn = (e, t, n) => {
+		yn(e, (e) => ({
+			...e,
+			rows: Math.max(1, Math.min(h, t)),
+			cols: Math.max(1, Math.min(h, n)),
+			cells: ln(e.cells, Math.max(1, Math.min(h, t)), Math.max(1, Math.min(h, n))),
+			rowSeparators: un(e.rowSeparators, Math.max(1, Math.min(h, t)) - 1),
+			colSeparators: un(e.colSeparators, Math.max(1, Math.min(h, n)) - 1)
+		}));
+	}, xn = (e, t) => {
+		Z(), yn(e, (e) => ({
+			...e,
+			rowSeparators: e.rowSeparators.includes(t) ? e.rowSeparators.filter((e) => e !== t) : [...e.rowSeparators, t].sort((e, t) => e - t)
+		}));
+	}, Sn = (e, t) => {
+		Z(), yn(e, (e) => ({
+			...e,
+			colSeparators: e.colSeparators.includes(t) ? e.colSeparators.filter((e) => e !== t) : [...e.colSeparators, t].sort((e, t) => e - t)
+		}));
+	}, Cn = (e) => {
+		Z(), yn(e, (e) => ({
+			...e,
+			cells: e.cells.map((e) => e.map((e) => e.trim() ? e : "0"))
+		}));
+	}, wn = (e, t = {
+		row: 0,
+		col: 0
+	}) => {
+		j(e), T(null), J(), Q(), G(), K(), X(), q(), mt(e), L(t);
+	}, Tn = () => {
+		K();
+	}, En = (e, t, n) => {
+		let r = hn(e), i = n + r / 2, a = null, o = Infinity;
+		for (let n of S) {
+			if (n.id === e.id || Math.abs(n.x - t) > De) continue;
+			let r = gn(n), s = Math.abs(r - i);
+			s <= Ee && s < o && (a = r, o = s);
+		}
+		for (let e of y) {
+			let n = _n(e);
+			if (n === null || Math.abs(e.x - t) > De) continue;
+			let r = Math.abs(n - i);
+			r <= Ee && r < o && (a = n, o = r);
+		}
+		return a === null ? {
+			x: t,
+			y: n
+		} : {
+			x: t,
+			y: a - r / 2
+		};
+	}, Dn = (e, t, n = xe, r = xe) => {
+		let i = W(), a = {
+			id: i,
+			x: e,
+			y: t,
+			rows: n,
+			cols: r,
+			cells: cn(n, r),
+			rowSeparators: [],
+			colSeparators: []
+		};
+		Z(), Qe((e) => [...e, a]), T(null), J(), Q(), G(), X(), q(), j(i), mt(i), L({
+			row: 0,
+			col: 0
+		});
+	}, On = (e, t) => {
+		let n = W();
+		Z(), et((r) => [...r, {
+			id: n,
+			x: e,
+			y: t,
+			width: Oe,
+			height: ke,
+			content: "",
+			alignMode: "left",
+			alignToken: "="
+		}]), T(null), J(), Y(), Q(), G(), K(), q(), N(n), gt(n), vt("");
+	}, kn = (e) => {
+		let t = an(e);
+		t && (N(e), T(null), J(), Y(), Q(), G(), K(), q(), gt(e), vt(t.content));
+	}, An = () => {
+		if (R) {
+			if (Z(), !_t.trim()) {
+				et((e) => e.filter((e) => e.id !== R)), M === R && N(null), q();
+				return;
+			}
+			on(R, (e) => ({
+				...e,
+				content: _t
+			})), q();
+		}
+	}, jn = () => {
+		M && (Z(), et((e) => e.filter((e) => e.id !== M)), R === M && q(), N(null));
+	}, Mn = (e, t, n, r) => {
+		yn(e, (e) => ({
+			...e,
+			cells: e.cells.map((e, i) => i === t ? e.map((e, t) => t === n ? r : e) : e)
+		}));
+	}, Nn = () => {
+		A && (Z(), Qe((e) => e.filter((e) => e.id !== A)), I === A && K(), j(null));
+	}, Pn = (e, t) => {
+		for (let n = Je.length - 1; n >= 0; --n) {
+			let r = Je[n], i = r.x + r.width / 2, a = r.y + r.height / 2, o = Math.min(r.width, r.height);
+			if (Math.hypot(e - i, t - a) <= o) return r;
+		}
+		return null;
+	}, Fn = (e, t) => {
+		Ye((n) => n.map((n) => n.id === e ? t(n) : n));
+	}, In = (e, t) => {
+		let n = e.x + e.width / 2, r = e.y + e.height / 2, i = t.x + t.width / 2, a = t.y + t.height / 2, o = i - n, s = a - r, c = Math.hypot(o, s);
+		if (c === 0) return [
+			n,
+			r,
+			i,
+			a
+		];
+		let l = o / c, u = s / c, ee = Math.min(e.width, e.height) / 2, te = Math.min(t.width, t.height) / 2;
+		return [
+			n + l * ee,
+			r + u * ee,
+			i - l * te,
+			a - u * te
+		];
+	}, Ln = (e, t) => Xe.some((n) => n.sourceId === e && n.targetId === t || n.sourceId === t && n.targetId === e), Rn = (e) => {
+		let t = nn(e);
+		t && (Y(), K(), X(), q(), D(e), k(null), dt(e), pt(t.label));
+	}, zn = () => {
+		if (!F) return;
+		let e = ft.trim();
+		Z(), Fn(F, (t) => ({
+			...t,
+			label: e
+		})), G();
+	}, Bn = () => {
+		G();
+	}, Vn = (e, t, n) => {
+		let r = W(), i = {
+			id: r,
+			x: e,
+			y: t,
+			width: he,
+			height: ge,
+			label: n?.label ?? "",
+			shape: "circle"
+		};
+		Z(), Ye((e) => [...e, i]), n?.connectFromId && n.connectFromId !== r && !Ln(n.connectFromId, r) ? (Ze((e) => [...e, {
+			id: W(),
+			sourceId: n.connectFromId,
+			targetId: r
+		}]), B(n.connectFromId)) : B(r), D(r), k(null), T(null), Y(), K(), X(), q(), Q(), dt(r), pt(i.label);
+	}, Hn = (e, t) => {
+		if (e === t || Ln(e, t)) {
+			D(t), k(null);
+			return;
+		}
+		Z(), Ze((n) => [...n, {
+			id: W(),
+			sourceId: e,
+			targetId: t
+		}]), D(t), k(null), B(e);
+	}, Un = () => {
+		E && (Z(), Ye((e) => e.filter((e) => e.id !== E)), Ze((e) => e.filter((e) => e.sourceId !== E && e.targetId !== E)), F === E && G(), z === E && B(null), D(null), k(null));
+	}, Wn = () => {
+		O && (Z(), Ze((e) => e.filter((e) => e.id !== O)), k(null));
+	}, Gn = (e, t) => {
+		E && (Z(), Fn(E, (n) => ({
+			...n,
+			x: n.x + e,
+			y: n.y + t
+		})));
+	}, Kn = (e, t) => {
+		let n = nn(E);
+		n && Vn(n.x + e, n.y + t, { connectFromId: n.id });
+	}, qn = (e) => {
+		let t = nn(E);
+		if (!t) return;
+		let n = t.x + t.width / 2, r = t.y + t.height / 2, i = Xe.map((e) => e.sourceId === t.id ? nn(e.targetId) : e.targetId === t.id ? nn(e.sourceId) : null).filter((e) => !!e).map((t) => {
+			let i = t.x + t.width / 2, a = t.y + t.height / 2, o = i - n, s = a - r;
+			if (e === "left" && o >= 0 || e === "right" && o <= 0 || e === "up" && s >= 0 || e === "down" && s <= 0) return null;
+			let c = Math.abs(e === "left" || e === "right" ? o : s), l = Math.abs(e === "left" || e === "right" ? s : o);
+			return {
+				id: t.id,
+				score: l * 10 + c
+			};
+		}).filter((e) => !!e).sort((e, t) => e.score - t.score)[0];
+		i && (D(i.id), k(null), B(i.id));
+	}, Q = () => {
+		it(null), ot(""), ct(0), Ct(p), Tt(ae), ut(null);
+	}, Jn = (e, t, n, r, i, a) => {
+		let o = i - n, s = a - r;
+		if (o === 0 && s === 0) return Math.hypot(e - n, t - r);
+		let c = Math.max(0, Math.min(1, ((e - n) * o + (t - r) * s) / (o * o + s * s))), l = n + c * o, u = r + c * s;
+		return Math.hypot(e - l, t - u);
+	}, Yn = (e, t, n) => {
+		Ae((r) => {
+			let i = [];
+			for (let a of r) {
+				let r = [], o = [];
+				for (let i = 0; i < a.points.length; i += 2) {
+					let s = a.points[i], c = a.points[i + 1], l = Math.hypot(s - e, c - t) <= n;
+					if (l || o.push(s, c), i < a.points.length - 2) {
+						let u = a.points[i + 2], ee = a.points[i + 3];
+						(l || Math.hypot(u - e, ee - t) <= n || Jn(e, t, s, c, u, ee) <= n) && (o.length >= 4 && r.push(o), o = []);
+					}
+				}
+				if (o.length >= 4 && r.push(o), r.length !== 0) for (let e of r) i.push({
+					...a,
+					id: W(),
+					points: e
+				});
+			}
+			return i;
+		});
+	}, Xn = (e, t) => {
+		let n = performance.now(), r = Lt.current, i = de;
+		if (r) {
+			let a = Math.hypot(e - r.x, t - r.y) / Math.max(n - r.time, 1);
+			i = de + Math.max(0, Math.min(1, (a - pe) / me)) * (fe - de);
+		}
+		return Lt.current = {
+			x: e,
+			y: t,
+			time: n
+		}, Ft({
+			x: e,
+			y: t,
+			radius: i,
+			visible: !0
+		}), i;
+	}, Zn = (e) => {
+		let t = en(e);
+		t && (J(), G(), Y(), K(), X(), q(), T(e), rt(t.renderMode), it(e), ot(t.content), ct(t.content.length), Tt(Math.min(Math.max(Ve(t.content), m), Math.max(m, V.width - t.x - ie))));
+	}, Qn = () => {
+		if (!P) return;
+		let e = at.trim();
+		if (Z(), !e) {
+			x((e) => e.filter((e) => e.id !== P)), w === P && T(null), Q();
+			return;
+		}
+		tn(P, (e) => ({
+			...e,
+			content: at,
+			width: e.renderMode === "latex" ? m : Math.min(Math.max(wt, m), Math.max(m, V.width - e.x - ie)),
+			height: Math.max(e.height, St)
+		})), Q();
+	}, $n = (e, t) => {
+		let n = W(), r = Math.max(m, Math.min(ae, V.width - e - ie));
+		Z(), x((i) => [...i, {
+			id: n,
+			x: e,
+			y: t,
+			width: r,
+			height: p,
+			content: "",
+			renderMode: nt
+		}]), J(), G(), Y(), K(), X(), q(), T(n), it(n), ot(""), ct(0), Ct(p), Tt(r);
+	}, er = (e, t) => {
+		C !== "pen" && C !== "eraser" || (Z(), Ae((n) => [...n, {
+			id: W(),
+			points: [e, t],
+			tool: C
+		}]));
+	}, tr = (e, t) => {
+		Ae((n) => {
+			let r = [...n], i = r[r.length - 1];
+			return i ? (r[r.length - 1] = {
+				...i,
+				points: [
+					...i.points,
+					e,
+					t
+				]
+			}, r) : n;
+		});
+	}, nr = (e) => {
+		let t = e.target.getStage(), n = t?.getPointerPosition();
+		if (!n) return;
+		let r = e.target === t || e.target.getClassName() === "Rect";
+		if (C === "text") {
+			H.current = !1, U.current = !1;
+			return;
+		}
+		if (C === "graph") {
+			P && Qn(), F && r && zn(), r && (T(null), k(null)), H.current = !1, U.current = !1;
+			return;
+		}
+		if (C === "matrix") {
+			P && Qn(), F && r && zn(), I && r && Tn(), r && (T(null), J()), H.current = !1, U.current = !1;
+			return;
+		}
+		if (C === "align") {
+			P && Qn(), F && r && zn(), I && r && Tn(), R && r && An(), r && (T(null), J(), Y()), H.current = !1, U.current = !1;
+			return;
+		}
+		if (P && Qn(), F && zn(), I && Tn(), R && An(), C === "pen" || C === "eraser") {
+			if (T(null), J(), Y(), X(), C === "pen") H.current = !0, U.current = !1, er(n.x, n.y);
+			else {
+				Z(), H.current = !1, U.current = !0;
+				let e = Xn(n.x, n.y);
+				Yn(n.x, n.y, e);
+			}
+			return;
+		}
+		C === "select" && r && (T(null), J(), Y(), X()), H.current = !1, U.current = !1;
+	}, rr = (e) => {
+		if (C !== "text" && C !== "graph" && C !== "matrix" && C !== "align") return;
+		let t = e.target.getStage(), n = t?.getPointerPosition();
+		if (n && (e.target === t || e.target.getClassName() === "Rect")) {
+			if (C === "text") {
+				$n(n.x, n.y);
+				return;
+			}
+			if (C === "graph") {
+				let e = Pn(n.x, n.y);
+				if (e) {
+					E === e.id ? Rn(e.id) : (D(e.id), k(null), B(e.id), T(null));
+					return;
+				}
+				Vn(n.x - he / 2, n.y - ge / 2);
+				return;
+			}
+			if (C === "matrix") {
+				let e = vn(n.x, n.y);
+				if (e) {
+					A === e.id ? wn(e.id) : (j(e.id), T(null), J());
+					return;
+				}
+				Dn(n.x - (xe * Se + g * 2 + 24) / 2, n.y - (xe * Ce + g * 2) / 2);
+				return;
+			}
+			C === "align" && On(n.x, n.y);
+		}
+	}, ir = (e) => {
+		let t = e.target.getStage()?.getPointerPosition();
+		if (t) {
+			if (C === "eraser") {
+				let e = Xn(t.x, t.y);
+				U.current && Yn(t.x, t.y, e);
+				return;
+			}
+			H.current && tr(t.x, t.y);
+		}
+	}, ar = () => {
+		H.current = !1, U.current = !1, Lt.current = null;
+	}, or = (e) => {
+		if (nt !== e) {
+			if (Z(), rt(e), P) {
+				tn(P, (t) => ({
+					...t,
+					renderMode: e
+				}));
+				return;
+			}
+			w && tn(w, (t) => ({
+				...t,
+				renderMode: e
+			}));
+		}
+	}, sr = () => {
+		or(nt === "latex" ? "plain" : "latex");
+	}, cr = () => {
+		jt((e) => {
+			let t = e[e.length - 1];
+			return t ? (Nt((e) => [Qt(), ...e]), $t(t), e.slice(0, -1)) : e;
+		});
+	}, lr = () => {
+		Nt((e) => {
+			let t = e[0];
+			return t ? (jt((e) => [...e, Qt()]), $t(t), e.slice(1)) : e;
+		});
+	};
+	e(() => {
+		let e = (e) => {
+			let t = e.target, n = t instanceof HTMLInputElement && !!t.dataset.matrixId;
+			if (!(t instanceof HTMLTextAreaElement || t instanceof HTMLInputElement && !n || t instanceof HTMLElement && t.isContentEditable)) {
+				if (e.key === "Escape" && B(null), (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z" && !e.shiftKey) {
+					e.preventDefault(), cr();
+					return;
+				}
+				if ((e.ctrlKey || e.metaKey) && (e.key.toLowerCase() === "y" || e.shiftKey && e.key.toLowerCase() === "z")) {
+					e.preventDefault(), lr();
+					return;
+				}
+				if (C === "matrix") {
+					if (A && (e.ctrlKey || e.metaKey)) {
+						let t = rn(A);
+						if (!t) return;
+						if (e.key === "ArrowUp") {
+							e.preventDefault(), Z(), bn(A, t.rows - 1, t.cols);
+							return;
+						}
+						if (e.key === "ArrowDown") {
+							e.preventDefault(), Z(), bn(A, t.rows + 1, t.cols);
+							return;
+						}
+						if (e.key === "ArrowLeft") {
+							e.preventDefault(), Z(), bn(A, t.rows, t.cols - 1);
+							return;
+						}
+						if (e.key === "ArrowRight") {
+							e.preventDefault(), Z(), bn(A, t.rows, t.cols + 1);
+							return;
+						}
+					}
+					if (!I && A && (e.key === "Backspace" || e.key === "Delete")) {
+						e.preventDefault(), Nn();
+						return;
+					}
+					if (A && e.key === "Enter" && !I) {
+						e.preventDefault(), wn(A);
+						return;
+					}
+				}
+				if (C === "align") {
+					if (!R && M && (e.key === "Backspace" || e.key === "Delete")) {
+						e.preventDefault(), jn();
+						return;
+					}
+					if (M && e.key === "Enter" && !R) {
+						e.preventDefault(), kn(M);
+						return;
+					}
+				}
+				if (!(C !== "graph" || F)) {
+					if ((e.ctrlKey || e.altKey) && E) {
+						if (e.key === "ArrowLeft") {
+							e.preventDefault(), qn("left");
+							return;
+						}
+						if (e.key === "ArrowRight") {
+							e.preventDefault(), qn("right");
+							return;
+						}
+						if (e.key === "ArrowUp") {
+							e.preventDefault(), qn("up");
+							return;
+						}
+						if (e.key === "ArrowDown") {
+							e.preventDefault(), qn("down");
+							return;
+						}
+					}
+					if (!(!E && !O)) {
+						if (e.key === "Enter" && E) {
+							e.preventDefault(), Kn(e.shiftKey ? 0 : ye, e.shiftKey ? ye : 0);
+							return;
+						}
+						if (e.key === "Tab" && E) {
+							e.preventDefault(), Kn(ye, 0);
+							return;
+						}
+						if (e.key === "Backspace" || e.key === "Delete") {
+							e.preventDefault(), E ? Un() : O && Wn();
+							return;
+						}
+						if (e.key === "ArrowLeft" && E) {
+							e.preventDefault(), Gn(-be, 0);
+							return;
+						}
+						if (e.key === "ArrowRight" && E) {
+							e.preventDefault(), Gn(be, 0);
+							return;
+						}
+						if (e.key === "ArrowUp" && E) {
+							e.preventDefault(), Gn(0, -be);
+							return;
+						}
+						e.key === "ArrowDown" && E && (e.preventDefault(), Gn(0, be));
+					}
+				}
+			}
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		F,
+		I,
+		Xe,
+		Je,
+		S,
+		$e,
+		R,
+		O,
+		E,
+		M,
+		A,
+		C
+	]);
+	let ur = en(P), dr = en(w), fr = nn(F), pr = nn(E), mr = rn(I), hr = rn(A), $ = an(R), gr = an(M), _r = new Map(Je.map((e) => [e.id, e]));
+	return /* @__PURE__ */ f("div", {
+		style: {
+			position: "relative",
+			width: V.width,
+			height: V.height,
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ f("div", {
+				style: {
+					position: "fixed",
+					top: 12,
+					left: 12,
+					zIndex: 30,
+					display: "flex",
+					gap: 8,
+					padding: 8,
+					background: "rgba(255, 255, 255, 0.96)",
+					border: "1px solid #d4d4d4",
+					borderRadius: 8,
+					boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
+				},
+				children: [
+					/* @__PURE__ */ d(b, {
+						active: C === "select",
+						label: "Select",
+						onClick: () => tt("select"),
+						children: /* @__PURE__ */ d(Fe, { active: C === "select" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: C === "pen",
+						label: "Pen",
+						onClick: () => tt("pen"),
+						children: /* @__PURE__ */ d(Ne, { active: C === "pen" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: C === "eraser",
+						label: "Eraser",
+						onClick: () => tt("eraser"),
+						children: /* @__PURE__ */ d(Pe, { active: C === "eraser" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: C === "text",
+						label: "Text",
+						onClick: () => tt("text"),
+						children: /* @__PURE__ */ d(Le, { active: C === "text" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: C === "graph",
+						label: "Graph",
+						onClick: () => tt("graph"),
+						children: /* @__PURE__ */ d(He, { active: C === "graph" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: C === "matrix",
+						label: "Matrix",
+						onClick: () => tt("matrix"),
+						children: /* @__PURE__ */ d(Ue, { active: C === "matrix" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: C === "align",
+						label: "Align Math",
+						onClick: () => tt("align"),
+						children: /* @__PURE__ */ d(We, { active: C === "align" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: !1,
+						disabled: At.length === 0,
+						label: "Undo",
+						onClick: cr,
+						children: /* @__PURE__ */ d(Ke, { active: !1 })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: !1,
+						disabled: Mt.length === 0,
+						label: "Redo",
+						onClick: lr,
+						children: /* @__PURE__ */ d(qe, { active: !1 })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: nt === "latex",
+						label: "Toggle LaTeX",
+						onClick: sr,
+						children: /* @__PURE__ */ d(Ge, { active: nt === "latex" })
+					}),
+					/* @__PURE__ */ d(b, {
+						active: !1,
+						label: "Clear",
+						onClick: () => {
+							Z(), Ae([]), x([]), Ye([]), Ze([]), Qe([]), et([]), T(null), J(), Y(), X(), Q(), G(), K(), q(), H.current = !1;
+						},
+						children: /* @__PURE__ */ d(Ie, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ d(ee, {
+				width: V.width,
+				height: V.height,
+				onMouseDown: nr,
+				onClick: rr,
+				onMousemove: ir,
+				onMouseup: ar,
+				onTouchStart: nr,
+				onTap: rr,
+				onTouchMove: ir,
+				onTouchEnd: ar,
+				children: /* @__PURE__ */ f(c, { children: [
+					/* @__PURE__ */ d(u, {
+						x: 0,
+						y: 0,
+						width: V.width,
+						height: V.height,
+						fill: "white"
+					}),
+					i.map((e) => /* @__PURE__ */ d(l, {
+						points: e.points,
+						stroke: e.tool === "pen" ? "black" : "white",
+						strokeWidth: e.tool === "pen" ? 2 : 14,
+						tension: .5,
+						lineCap: "round",
+						lineJoin: "round"
+					}, e.id)),
+					Xe.map((e) => {
+						let t = _r.get(e.sourceId), n = _r.get(e.targetId);
+						if (!t || !n) return null;
+						let r = In(t, n);
+						return e.directed ? /* @__PURE__ */ d(a, {
+							points: r,
+							stroke: O === e.id ? "#111" : "#5f5f5f",
+							fill: O === e.id ? "#111" : "#5f5f5f",
+							strokeWidth: O === e.id ? 2.5 : 1.8,
+							pointerLength: 8,
+							pointerWidth: 8,
+							onClick: () => {
+								k(e.id), D(null), T(null), Y();
+							},
+							onTap: () => {
+								k(e.id), D(null), T(null), Y();
+							}
+						}, e.id) : /* @__PURE__ */ d(l, {
+							points: r,
+							stroke: O === e.id ? "#111" : "#5f5f5f",
+							strokeWidth: O === e.id ? 2.5 : 1.8,
+							lineCap: "round",
+							onClick: () => {
+								k(e.id), D(null), T(null), Y();
+							},
+							onTap: () => {
+								k(e.id), D(null), T(null), Y();
+							}
+						}, e.id);
+					}),
+					Je.map((e) => {
+						let t = E === e.id, n = z === e.id, r = yt === e.id, i = F === e.id, a = n || t || i ? "#8c8c8c" : r ? "#b8b8b8" : "#555";
+						return /* @__PURE__ */ f(s, {
+							ref: (t) => {
+								Ut.current[e.id] = t;
+							},
+							x: e.x,
+							y: e.y,
+							draggable: C === "graph" || C === "select",
+							onMouseEnter: () => bt(e.id),
+							onMouseLeave: () => bt((t) => t === e.id ? null : t),
+							onClick: (t) => {
+								if (t.cancelBubble = !0, D(e.id), k(null), T(null), Y(), C === "graph") {
+									if (z && z !== e.id) {
+										Hn(z, e.id);
+										return;
+									}
+									if (E === e.id && z === e.id) {
+										Rn(e.id);
+										return;
+									}
+									B(e.id);
+								}
+							},
+							onTap: (t) => {
+								if (t.cancelBubble = !0, D(e.id), k(null), T(null), Y(), C === "graph") {
+									if (z && z !== e.id) {
+										Hn(z, e.id);
+										return;
+									}
+									if (E === e.id && z === e.id) {
+										Rn(e.id);
+										return;
+									}
+									B(e.id);
+								}
+							},
+							onDblClick: (t) => {
+								t.cancelBubble = !0, Rn(e.id);
+							},
+							onDblTap: (t) => {
+								t.cancelBubble = !0, Rn(e.id);
+							},
+							onDragStart: (t) => {
+								t.cancelBubble = !0, D(e.id), k(null);
+							},
+							onDragEnd: (t) => {
+								Z(), Fn(e.id, (e) => ({
+									...e,
+									x: t.target.x(),
+									y: t.target.y()
+								}));
+							},
+							onTransformEnd: (t) => {
+								Z();
+								let n = t.target, r = Math.max(_e, Math.max(e.width * n.scaleX(), e.height * n.scaleY()));
+								n.scaleX(1), n.scaleY(1), Fn(e.id, (e) => ({
+									...e,
+									x: n.x(),
+									y: n.y(),
+									width: r,
+									height: r
+								}));
+							},
+							children: [/* @__PURE__ */ d(o, {
+								x: e.width / 2,
+								y: e.height / 2,
+								radius: Math.min(e.width, e.height) / 2,
+								fill: "transparent",
+								stroke: a,
+								strokeWidth: t || n ? 2.5 : 1.8
+							}), /* @__PURE__ */ d(te, {
+								x: 10,
+								y: e.height / 2 - 10,
+								width: Math.max(e.width - 20, 20),
+								align: "center",
+								verticalAlign: "middle",
+								text: e.label || " ",
+								fontSize: 18,
+								fill: "#111",
+								fontFamily: v,
+								listening: !1
+							})]
+						}, e.id);
+					}),
+					S.map((e) => /* @__PURE__ */ d(u, {
+						ref: (t) => {
+							Wt.current[e.id] = t;
+						},
+						x: e.x,
+						y: e.y,
+						width: mn(e),
+						height: hn(e),
+						fill: "transparent",
+						stroke: "transparent",
+						strokeWidth: 1,
+						draggable: C === "matrix" || C === "select",
+						onClick: () => {
+							j(e.id), T(null), J();
+						},
+						onTap: () => {
+							j(e.id), T(null), J();
+						},
+						onDblClick: () => wn(e.id),
+						onDblTap: () => wn(e.id),
+						onDragStart: () => {
+							j(e.id), T(null), J();
+						},
+						onDragEnd: (t) => {
+							Z();
+							let n = En(e, t.target.x(), t.target.y());
+							yn(e.id, (e) => ({
+								...e,
+								x: n.x,
+								y: n.y
+							}));
+						},
+						onTransformEnd: (t) => {
+							Z();
+							let n = t.target, r = Math.max(1, Math.min(h, Math.round((n.width() * n.scaleX() - g * 2) / (Se + we * 2)))), i = Math.max(1, Math.min(h, Math.round((n.height() * n.scaleY() - g * 2) / Ce)));
+							n.scaleX(1), n.scaleY(1);
+							let a = En(e, n.x(), n.y());
+							yn(e.id, (e) => ({
+								...e,
+								x: a.x,
+								y: a.y,
+								rows: i,
+								cols: r,
+								cells: ln(e.cells, i, r),
+								rowSeparators: un(e.rowSeparators, i - 1),
+								colSeparators: un(e.colSeparators, r - 1)
+							}));
+						}
+					}, e.id)),
+					$e.map((e) => /* @__PURE__ */ d(u, {
+						ref: (t) => {
+							Gt.current[e.id] = t;
+						},
+						x: e.x,
+						y: e.y,
+						width: e.width,
+						height: e.height,
+						fill: "transparent",
+						stroke: "transparent",
+						draggable: C === "align" || C === "select",
+						onClick: () => {
+							N(e.id), T(null), J(), Y();
+						},
+						onTap: () => {
+							N(e.id), T(null), J(), Y();
+						},
+						onDblClick: () => kn(e.id),
+						onDblTap: () => kn(e.id),
+						onDragEnd: (t) => {
+							Z(), on(e.id, (e) => ({
+								...e,
+								x: t.target.x(),
+								y: t.target.y()
+							}));
+						},
+						onTransformEnd: (t) => {
+							Z();
+							let n = t.target, r = Math.max(180, n.width() * n.scaleX()), i = Math.max(60, n.height() * n.scaleY());
+							n.scaleX(1), n.scaleY(1), on(e.id, (e) => ({
+								...e,
+								x: n.x(),
+								y: n.y(),
+								width: r,
+								height: i
+							}));
+						}
+					}, e.id)),
+					y.map((e) => /* @__PURE__ */ d(u, {
+						ref: (t) => {
+							Ht.current[e.id] = t;
+						},
+						x: e.x,
+						y: e.y,
+						width: Ot[e.id] ?? e.width,
+						height: Math.max(Et[e.id] ?? p, e.height),
+						fill: "transparent",
+						stroke: "transparent",
+						dash: [],
+						strokeWidth: 1,
+						draggable: C === "select",
+						onClick: () => {
+							C === "select" && (J(), Y(), T(e.id), rt(e.renderMode));
+						},
+						onTap: () => {
+							C === "select" && (J(), Y(), T(e.id), rt(e.renderMode));
+						},
+						onDblClick: () => Zn(e.id),
+						onDblTap: () => Zn(e.id),
+						onDragStart: () => {
+							C === "select" && T(e.id);
+						},
+						onDragEnd: (t) => {
+							Z(), tn(e.id, (e) => ({
+								...e,
+								x: t.target.x(),
+								y: t.target.y()
+							}));
+						}
+					}, e.id)),
+					/* @__PURE__ */ d(ne, {
+						ref: Rt,
+						enabledAnchors: [
+							"top-left",
+							"top-center",
+							"top-right",
+							"middle-left",
+							"middle-right",
+							"bottom-left",
+							"bottom-center",
+							"bottom-right"
+						],
+						rotateEnabled: !1,
+						boundBoxFunc: (e, t) => ({
+							...t,
+							width: Math.max(m, t.width),
+							height: Math.max(p, t.height)
+						})
+					}),
+					/* @__PURE__ */ d(ne, {
+						ref: zt,
+						enabledAnchors: [
+							"top-left",
+							"top-center",
+							"top-right",
+							"middle-left",
+							"middle-right",
+							"bottom-left",
+							"bottom-center",
+							"bottom-right"
+						],
+						rotateEnabled: !1,
+						boundBoxFunc: (e, t) => {
+							let n = Math.max(_e, ve, t.width, t.height);
+							return {
+								...t,
+								width: n,
+								height: n
+							};
+						}
+					}),
+					/* @__PURE__ */ d(ne, {
+						ref: Bt,
+						enabledAnchors: [
+							"top-left",
+							"top-center",
+							"top-right",
+							"middle-left",
+							"middle-right",
+							"bottom-left",
+							"bottom-center",
+							"bottom-right"
+						],
+						rotateEnabled: !1,
+						boundBoxFunc: (e, t) => ({
+							...t,
+							width: Math.max(Se + we * 2 + g * 2, t.width),
+							height: Math.max(Ce + g * 2, t.height)
+						})
+					}),
+					/* @__PURE__ */ d(ne, {
+						ref: Vt,
+						enabledAnchors: [
+							"top-left",
+							"top-right",
+							"bottom-left",
+							"bottom-right",
+							"middle-left",
+							"middle-right"
+						],
+						rotateEnabled: !1,
+						boundBoxFunc: (e, t) => ({
+							...t,
+							width: Math.max(180, t.width),
+							height: Math.max(60, t.height)
+						})
+					})
+				] })
+			}),
+			C === "eraser" && Pt.visible && /* @__PURE__ */ d("div", { style: {
+				position: "absolute",
+				left: `${Pt.x - Pt.radius}px`,
+				top: `${Pt.y - Pt.radius}px`,
+				width: `${Pt.radius * 2}px`,
+				height: `${Pt.radius * 2}px`,
+				border: "2px dotted #7a7a7a",
+				borderRadius: "50%",
+				pointerEvents: "none",
+				boxSizing: "border-box",
+				zIndex: 1100
+			} }),
+			dr && !ur && /* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-label": "Delete text block",
+				title: "Delete text block",
+				onClick: () => {
+					Z(), x((e) => e.filter((e) => e.id !== dr.id)), T(null);
+				},
+				style: {
+					position: "absolute",
+					left: `${dr.x + (Ot[dr.id] ?? dr.width) / 2 - 14}px`,
+					top: `${dr.y - 30}px`,
+					width: "28px",
+					height: "28px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					border: "1px solid #f5c2c7",
+					borderRadius: "999px",
+					background: "#fff5f5",
+					cursor: "pointer",
+					zIndex: 1150
+				},
+				children: /* @__PURE__ */ d(Me, {})
+			}),
+			pr && !fr && /* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-label": "Delete graph node",
+				title: "Delete graph node",
+				onClick: () => {
+					Un();
+				},
+				style: {
+					position: "absolute",
+					left: `${pr.x + pr.width / 2 - 14}px`,
+					top: `${pr.y - 30}px`,
+					width: "28px",
+					height: "28px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					border: "1px solid #f5c2c7",
+					borderRadius: "999px",
+					background: "#fff5f5",
+					cursor: "pointer",
+					zIndex: 1150
+				},
+				children: /* @__PURE__ */ d(Me, {})
+			}),
+			hr && !mr && /* @__PURE__ */ f(re, { children: [/* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-label": "Fill empty matrix cells with zeros",
+				title: "Fill empty matrix cells with zeros",
+				onClick: () => Cn(hr.id),
+				style: {
+					position: "absolute",
+					left: `${hr.x + mn(hr) / 2 - 64}px`,
+					top: `${hr.y - 32}px`,
+					height: "28px",
+					padding: "0 10px",
+					border: "1px solid #d9d9d9",
+					borderRadius: "999px",
+					background: "#fff",
+					cursor: "pointer",
+					zIndex: 1150,
+					fontSize: 12
+				},
+				children: "Fill 0s"
+			}), /* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-label": "Delete matrix",
+				title: "Delete matrix",
+				onClick: () => Nn(),
+				style: {
+					position: "absolute",
+					left: `${hr.x + mn(hr) / 2 + 36}px`,
+					top: `${hr.y - 30}px`,
+					width: "28px",
+					height: "28px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					border: "1px solid #f5c2c7",
+					borderRadius: "999px",
+					background: "#fff5f5",
+					cursor: "pointer",
+					zIndex: 1150
+				},
+				children: /* @__PURE__ */ d(Me, {})
+			})] }),
+			gr && !$ && /* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-label": "Delete align block",
+				title: "Delete align block",
+				onClick: () => jn(),
+				style: {
+					position: "absolute",
+					left: `${gr.x + gr.width / 2 - 14}px`,
+					top: `${gr.y - 30}px`,
+					width: "28px",
+					height: "28px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					border: "1px solid #f5c2c7",
+					borderRadius: "999px",
+					background: "#fff5f5",
+					cursor: "pointer",
+					zIndex: 1150
+				},
+				children: /* @__PURE__ */ d(Me, {})
+			}),
+			/* @__PURE__ */ f("div", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					zIndex: 1e3,
+					pointerEvents: "none"
+				},
+				children: [
+					lt && /* @__PURE__ */ d("div", {
+						style: {
+							position: "absolute",
+							left: `${lt.left}px`,
+							top: `${lt.top}px`,
+							transform: "translate(-10%, -100%)",
+							maxWidth: "240px",
+							padding: "6px 12px",
+							border: "1px solid #d9d9d9",
+							borderRadius: "999px",
+							background: "rgba(255, 255, 255, 0.96)",
+							color: "#111",
+							boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							pointerEvents: "none"
+						},
+						children: /* @__PURE__ */ d(Re, {
+							expression: lt.expression,
+							fallback: lt.fallback
+						})
+					}),
+					S.map((e) => {
+						let t = I === e.id, n = dn(e), r = mn(e), i = hn(e);
+						return t ? /* @__PURE__ */ f("div", {
+							style: {
+								position: "absolute",
+								top: `${e.y}px`,
+								left: `${e.x}px`,
+								width: `${r}px`,
+								minHeight: `${i}px`,
+								padding: `${g}px ${g}px`,
+								border: "1px solid #d9d9d9",
+								background: "transparent",
+								boxSizing: "border-box",
+								pointerEvents: "auto"
+							},
+							children: [
+								/* @__PURE__ */ d("div", { style: {
+									position: "absolute",
+									top: `${g - 2}px`,
+									bottom: `${g - 2}px`,
+									left: "4px",
+									width: "10px",
+									borderLeft: "2px solid #111",
+									borderTop: "2px solid #111",
+									borderBottom: "2px solid #111",
+									boxSizing: "border-box",
+									pointerEvents: "none"
+								} }),
+								/* @__PURE__ */ d("div", { style: {
+									position: "absolute",
+									top: `${g - 2}px`,
+									bottom: `${g - 2}px`,
+									right: "4px",
+									width: "10px",
+									borderRight: "2px solid #111",
+									borderTop: "2px solid #111",
+									borderBottom: "2px solid #111",
+									boxSizing: "border-box",
+									pointerEvents: "none"
+								} }),
+								/* @__PURE__ */ f("div", {
+									style: {
+										display: "grid",
+										gridTemplateColumns: n.map((e) => `${e}px`).join(" "),
+										gap: 6,
+										alignItems: "center",
+										justifyContent: "center",
+										position: "relative"
+									},
+									children: [
+										e.cols > 1 && Array.from({ length: e.cols - 1 }, (t, r) => {
+											let i = n.slice(0, r + 1).reduce((e, t) => e + t, 0) + r * 6 + 3;
+											return /* @__PURE__ */ d("button", {
+												type: "button",
+												onMouseDown: (e) => e.stopPropagation(),
+												onClick: (t) => {
+													t.stopPropagation(), Sn(e.id, r);
+												},
+												style: {
+													position: "absolute",
+													top: `${-_ - 4}px`,
+													left: `${i - _ / 2}px`,
+													width: `${_}px`,
+													height: `${_}px`,
+													border: "1px solid #d9d9d9",
+													borderRadius: "999px",
+													background: e.colSeparators.includes(r) ? "#111" : "transparent",
+													color: e.colSeparators.includes(r) ? "#fff" : "#111",
+													fontSize: 12,
+													lineHeight: 1,
+													cursor: "pointer"
+												},
+												children: "|"
+											}, `col-separator-${e.id}-${r}`);
+										}),
+										e.rowSeparators.map((t) => /* @__PURE__ */ d("div", { style: {
+											position: "absolute",
+											left: "0",
+											right: "0",
+											top: `${(t + 1) * Ce + t * 6 + 3}px`,
+											borderTop: "1px solid #111",
+											pointerEvents: "none"
+										} }, `row-line-${e.id}-${t}`)),
+										e.colSeparators.map((t) => /* @__PURE__ */ d("div", { style: {
+											position: "absolute",
+											top: "0",
+											bottom: "0",
+											left: `${n.slice(0, t + 1).reduce((e, t) => e + t, 0) + t * 6 + 6}px`,
+											borderLeft: "1px solid #111",
+											pointerEvents: "none"
+										} }, `col-line-${e.id}-${t}`)),
+										e.cells.map((t, r) => t.map((t, i) => /* @__PURE__ */ d("input", {
+											ref: (t) => {
+												Xt.current[`${e.id}-${r}-${i}`] = t;
+											},
+											"data-matrix-id": e.id,
+											value: t,
+											onChange: (t) => {
+												Mn(e.id, r, i, t.target.value);
+											},
+											onBlur: (e) => {
+												e.currentTarget.parentElement?.contains(e.relatedTarget) || Tn();
+											},
+											onMouseDown: (e) => e.stopPropagation(),
+											onClick: (e) => {
+												e.stopPropagation(), L({
+													row: r,
+													col: i
+												});
+											},
+											onFocus: () => L({
+												row: r,
+												col: i
+											}),
+											onKeyDown: (t) => {
+												if ((t.ctrlKey || t.metaKey) && t.key === "ArrowUp") {
+													t.preventDefault(), Z(), bn(e.id, e.rows - 1, e.cols), L({
+														row: Math.min(r, Math.max(0, e.rows - 2)),
+														col: i
+													});
+													return;
+												}
+												if ((t.ctrlKey || t.metaKey) && t.key === "ArrowDown") {
+													t.preventDefault(), Z(), bn(e.id, e.rows + 1, e.cols), L({
+														row: r,
+														col: i
+													});
+													return;
+												}
+												if ((t.ctrlKey || t.metaKey) && t.key === "ArrowLeft") {
+													t.preventDefault(), Z(), bn(e.id, e.rows, e.cols - 1), L({
+														row: r,
+														col: Math.min(i, Math.max(0, e.cols - 2))
+													});
+													return;
+												}
+												if ((t.ctrlKey || t.metaKey) && t.key === "ArrowRight") {
+													t.preventDefault(), Z(), bn(e.id, e.rows, e.cols + 1), L({
+														row: r,
+														col: i
+													});
+													return;
+												}
+												if (t.key === "ArrowUp") {
+													t.preventDefault(), L({
+														row: Math.max(0, r - 1),
+														col: i
+													});
+													return;
+												}
+												if (t.key === "ArrowDown") {
+													t.preventDefault(), L({
+														row: Math.min(e.rows - 1, r + 1),
+														col: i
+													});
+													return;
+												}
+												if (t.key === "ArrowLeft") {
+													t.preventDefault(), L({
+														row: r,
+														col: Math.max(0, i - 1)
+													});
+													return;
+												}
+												if (t.key === "ArrowRight") {
+													t.preventDefault(), L({
+														row: r,
+														col: Math.min(e.cols - 1, i + 1)
+													});
+													return;
+												}
+												if (t.key === "Escape") {
+													t.preventDefault(), Tn();
+													return;
+												}
+												t.key === "Enter" && (t.preventDefault(), L({
+													row: Math.min(e.rows - 1, r + 1),
+													col: i
+												}));
+											},
+											style: {
+												width: "100%",
+												minWidth: `${n[i]}px`,
+												height: `${Ce}px`,
+												border: "none",
+												outline: "none",
+												textAlign: "center",
+												fontSize: 16,
+												fontFamily: v,
+												boxSizing: "border-box",
+												background: "transparent",
+												padding: `0 ${we}px`
+											}
+										}, `${e.id}-${r}-${i}`)))
+									]
+								}),
+								e.rows > 1 && Array.from({ length: e.rows - 1 }, (t, n) => /* @__PURE__ */ d("button", {
+									type: "button",
+									onMouseDown: (e) => e.stopPropagation(),
+									onClick: (t) => {
+										t.stopPropagation(), xn(e.id, n);
+									},
+									style: {
+										position: "absolute",
+										left: `${-_ / 2 + 2}px`,
+										top: `${g + (n + 1) * Ce + n * 6 - _ / 2 + 3}px`,
+										width: `${_}px`,
+										height: `${_}px`,
+										border: "1px solid #d9d9d9",
+										borderRadius: "999px",
+										background: e.rowSeparators.includes(n) ? "#111" : "transparent",
+										color: e.rowSeparators.includes(n) ? "#fff" : "#111",
+										fontSize: 12,
+										lineHeight: 1,
+										cursor: "pointer"
+									},
+									children: "-"
+								}, `row-separator-${e.id}-${n}`))
+							]
+						}, e.id) : /* @__PURE__ */ d("div", {
+							ref: (t) => {
+								qt.current[e.id] = t;
+							},
+							style: {
+								position: "absolute",
+								top: `${e.y}px`,
+								left: `${e.x}px`,
+								width: `${r}px`,
+								minHeight: `${i}px`,
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								boxSizing: "border-box",
+								pointerEvents: C === "select" ? "none" : "auto",
+								cursor: C === "matrix" ? "text" : C === "select" ? "move" : "default",
+								border: A === e.id ? "1px solid #d9d9d9" : "none",
+								background: "transparent"
+							},
+							onMouseDown: (e) => e.stopPropagation(),
+							onClick: (t) => {
+								if (t.stopPropagation(), C === "matrix") {
+									A === e.id ? wn(e.id) : (j(e.id), T(null), J());
+									return;
+								}
+								C === "select" && (j(e.id), T(null), J());
+							},
+							onDoubleClick: (t) => {
+								t.stopPropagation(), wn(e.id);
+							},
+							children: /* @__PURE__ */ d(Re, {
+								expression: pn(e),
+								fallback: e.cells.map((e) => `[${e.join(", ")}]`).join(" ")
+							})
+						}, e.id);
+					}),
+					$e.map((e) => e.id === R ? null : /* @__PURE__ */ d("div", {
+						style: {
+							position: "absolute",
+							top: `${e.y}px`,
+							left: `${e.x}px`,
+							width: `${e.width}px`,
+							minHeight: `${e.height}px`,
+							pointerEvents: C === "select" ? "none" : "auto",
+							boxSizing: "border-box",
+							cursor: C === "align" ? "text" : C === "select" ? "move" : "default",
+							border: M === e.id ? "1px solid #d9d9d9" : "none",
+							background: "transparent",
+							padding: "6px 8px"
+						},
+						onMouseDown: (e) => e.stopPropagation(),
+						onClick: (t) => {
+							if (t.stopPropagation(), C === "align") {
+								M === e.id ? kn(e.id) : (N(e.id), T(null), J(), Y());
+								return;
+							}
+							C === "select" && (N(e.id), T(null), J(), Y());
+						},
+						onDoubleClick: (t) => {
+							t.stopPropagation(), kn(e.id);
+						},
+						children: /* @__PURE__ */ d(Re, {
+							expression: sn(e),
+							fallback: e.content
+						})
+					}, e.id)),
+					fr && /* @__PURE__ */ d("div", {
+						style: {
+							position: "absolute",
+							top: `${fr.y}px`,
+							left: `${fr.x}px`,
+							width: `${fr.width}px`,
+							height: `${fr.height}px`,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							pointerEvents: "auto"
+						},
+						children: /* @__PURE__ */ d("input", {
+							ref: Yt,
+							autoFocus: !0,
+							value: ft,
+							placeholder: "",
+							onChange: (e) => pt(e.target.value),
+							onBlur: zn,
+							onMouseDown: (e) => e.stopPropagation(),
+							onClick: (e) => e.stopPropagation(),
+							onKeyDown: (e) => {
+								e.key === "Enter" && (e.preventDefault(), zn()), e.key === "Escape" && (e.preventDefault(), Bn());
+							},
+							style: {
+								width: "100%",
+								height: "100%",
+								padding: "0 10px",
+								border: "1px solid #d9d9d9",
+								borderRadius: 999,
+								outline: "none",
+								background: "transparent",
+								color: "#111",
+								fontSize: 18,
+								textAlign: "center",
+								fontFamily: v,
+								boxSizing: "border-box"
+							}
+						})
+					}),
+					$ && /* @__PURE__ */ f("div", {
+						style: {
+							position: "absolute",
+							top: `${$.y}px`,
+							left: `${$.x}px`,
+							width: `${$.width}px`,
+							minHeight: `${$.height}px`,
+							border: "1px solid #d9d9d9",
+							background: "transparent",
+							boxSizing: "border-box",
+							pointerEvents: "auto",
+							padding: "6px 8px"
+						},
+						children: [/* @__PURE__ */ f("div", {
+							style: {
+								display: "flex",
+								gap: 6,
+								marginBottom: 6
+							},
+							children: [
+								/* @__PURE__ */ d("button", {
+									type: "button",
+									onMouseDown: (e) => e.stopPropagation(),
+									onClick: () => {
+										on($.id, (e) => ({
+											...e,
+											alignMode: "left"
+										}));
+									},
+									style: {
+										border: "1px solid #d9d9d9",
+										background: $.alignMode === "left" ? "#111" : "#fff",
+										color: $.alignMode === "left" ? "#fff" : "#111",
+										borderRadius: 999,
+										padding: "2px 8px",
+										cursor: "pointer",
+										fontSize: 12
+									},
+									children: "Left"
+								}),
+								/* @__PURE__ */ d("button", {
+									type: "button",
+									onMouseDown: (e) => e.stopPropagation(),
+									onClick: () => {
+										on($.id, (e) => ({
+											...e,
+											alignMode: "token"
+										}));
+									},
+									style: {
+										border: "1px solid #d9d9d9",
+										background: $.alignMode === "token" ? "#111" : "#fff",
+										color: $.alignMode === "token" ? "#fff" : "#111",
+										borderRadius: 999,
+										padding: "2px 8px",
+										cursor: "pointer",
+										fontSize: 12
+									},
+									children: "Align Token"
+								}),
+								/* @__PURE__ */ d("input", {
+									value: $.alignToken,
+									onChange: (e) => {
+										on($.id, (t) => ({
+											...t,
+											alignToken: e.target.value || "="
+										}));
+									},
+									onMouseDown: (e) => e.stopPropagation(),
+									style: {
+										width: 28,
+										border: "1px solid #d9d9d9",
+										background: "transparent",
+										textAlign: "center"
+									}
+								})
+							]
+						}), /* @__PURE__ */ d("textarea", {
+							ref: Zt,
+							value: _t,
+							onChange: (e) => vt(e.target.value),
+							onBlur: An,
+							onMouseDown: (e) => e.stopPropagation(),
+							onClick: (e) => e.stopPropagation(),
+							onKeyDown: (e) => {
+								e.key === "Escape" && (e.preventDefault(), q()), (e.ctrlKey || e.metaKey) && e.key === "Enter" && (e.preventDefault(), An());
+							},
+							style: {
+								width: "100%",
+								minHeight: `${Math.max($.height - 36, 56)}px`,
+								border: "none",
+								outline: "none",
+								resize: "none",
+								fontSize: Te,
+								lineHeight: 1.4,
+								fontFamily: v,
+								color: "#111",
+								background: "transparent",
+								boxSizing: "border-box",
+								whiteSpace: "pre"
+							}
+						})]
+					}),
+					y.map((e) => e.id === P ? null : /* @__PURE__ */ d("div", {
+						ref: (t) => {
+							Kt.current[e.id] = t;
+						},
+						style: {
+							position: "absolute",
+							top: `${e.y}px`,
+							left: `${e.x}px`,
+							width: `${Ot[e.id] ?? e.width}px`,
+							minHeight: `${e.height}px`,
+							padding: `${ce}px ${se}px ${ce}px ${oe}px`,
+							color: "#111",
+							fontSize: Te,
+							lineHeight: 1.35,
+							fontFamily: v,
+							whiteSpace: "pre",
+							wordBreak: "normal",
+							pointerEvents: C === "select" ? "none" : "auto",
+							boxSizing: "border-box",
+							overflow: "visible",
+							cursor: C === "text" ? "text" : C === "select" ? "move" : "default",
+							border: w === e.id ? "1px solid #d9d9d9" : "none",
+							background: "transparent",
+							transition: "border-color 120ms ease"
+						},
+						onMouseDown: (e) => e.stopPropagation(),
+						onClick: (t) => {
+							if (t.stopPropagation(), C === "text") {
+								Zn(e.id);
+								return;
+							}
+							C === "select" && (J(), Y(), T(e.id), rt(e.renderMode));
+						},
+						onDoubleClick: (t) => {
+							t.stopPropagation(), Zn(e.id);
+						},
+						onMouseEnter: (t) => {
+							w !== e.id && (t.currentTarget.style.border = "1px solid #d9d9d9");
+						},
+						onMouseLeave: (t) => {
+							w !== e.id && (t.currentTarget.style.border = "none");
+						},
+						children: /* @__PURE__ */ d(je, {
+							content: e.content,
+							renderMode: e.renderMode
+						})
+					}, e.id)),
+					ur && /* @__PURE__ */ d("div", {
+						style: {
+							position: "absolute",
+							top: `${ur.y}px`,
+							left: `${ur.x}px`,
+							width: `${Math.min(Math.max(wt, m), Math.max(m, V.width - ur.x - ie))}px`,
+							minHeight: `${ur.height}px`,
+							pointerEvents: "auto",
+							cursor: "text",
+							border: "1px solid #d9d9d9",
+							boxSizing: "border-box",
+							background: "transparent"
+						},
+						children: /* @__PURE__ */ d("textarea", {
+							ref: Jt,
+							autoFocus: !0,
+							value: at,
+							placeholder: "",
+							onChange: (e) => {
+								ot(e.target.value), ct(e.target.selectionStart);
+							},
+							onSelect: (e) => ct(e.currentTarget.selectionStart),
+							onBlur: Qn,
+							onMouseDown: (e) => e.stopPropagation(),
+							onClick: (e) => {
+								e.stopPropagation(), ct(e.currentTarget.selectionStart);
+							},
+							onKeyUp: (e) => ct(e.currentTarget.selectionStart),
+							onKeyDown: (e) => {
+								e.key === "Escape" && (e.preventDefault(), Q()), (e.ctrlKey || e.metaKey) && e.key === "Enter" && (e.preventDefault(), Qn()), (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "m" && (e.preventDefault(), sr());
+							},
+							style: {
+								width: "100%",
+								minHeight: `${ur.height}px`,
+								height: `${Math.max(St, ur.height)}px`,
+								padding: `${ce}px ${se}px ${ce}px ${oe}px`,
+								border: "none",
+								borderRadius: 0,
+								outline: "none",
+								fontSize: Te,
+								lineHeight: 1.35,
+								fontFamily: v,
+								color: "#111",
+								background: "transparent",
+								boxSizing: "border-box",
+								resize: "none",
+								overflow: "hidden",
+								whiteSpace: "pre",
+								wordBreak: "normal",
+								boxShadow: "none",
+								appearance: "none",
+								overflowX: "hidden"
+							}
+						})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { x as MathCanvas, x as default };