xiaodao-painter 0.1.9 → 0.1.11

package/dist/xiaodao-painter.es.js

@@ -101,14 +101,33 @@ function ae() {
 }
 //#endregion
 //#region src/components/painter/types/index.ts
-var oe = 800, se = 600, ce = 3, le = 16, ue = 8, N = b([]), P = b(/* @__PURE__ */ new Set()), F = b("#000000"), I = b("transparent"), L = b("foreground"), R = b(!1), z = b(3), B = b("transparent"), V = b("light"), H = b(0), U = b("#000000"), W = b(null), G = b(null), K = b(800), q = b(600), J = b(0), Y = b(0), X = b(1), de = b(!1), Z = null, fe = n(() => `0 0 ${K.value} ${q.value}`), pe = n(() => `translate(${J.value}px, ${Y.value}px) scale(${X.value})`);
-function me(e, t) {
-	J.value = e, Y.value = t;
+var oe = 800, se = 600, ce = 3, le = 16, ue = 8, N = 0;
+function P() {
+	let e = globalThis.crypto;
+	if (e && typeof e.randomUUID == "function") return e.randomUUID();
+	let t = /* @__PURE__ */ new Uint8Array(16);
+	if (e && typeof e.getRandomValues == "function") e.getRandomValues(t);
+	else {
+		let e = Date.now(), n = N++;
+		for (let r = 0; r < t.length; r++) {
+			let i = Math.floor(e / 2 ** (r % 6 * 8)) % 256, a = Math.floor(n / 2 ** (r % 4 * 8)) % 256;
+			t[r] = Math.floor(Math.random() * 256) ^ i ^ a;
+		}
+	}
+	t[6] = t[6] & 15 | 64, t[8] = t[8] & 63 | 128;
+	let n = Array.from(t, (e) => e.toString(16).padStart(2, "0")).join("");
+	return `${n.slice(0, 8)}-${n.slice(8, 12)}-${n.slice(12, 16)}-${n.slice(16, 20)}-${n.slice(20)}`;
 }
+//#endregion
+//#region src/components/painter/stores/canvas.ts
+var F = b([]), I = b(/* @__PURE__ */ new Set()), L = b("#000000"), de = b("transparent"), R = b("foreground"), z = b(!1), B = b(3), V = b("transparent"), H = b("light"), U = b(0), W = b("#000000"), fe = b(null), G = b(null), K = b(800), q = b(600), J = b(0), Y = b(0), X = b(1), Z = b(!1), Q = null, pe = n(() => `0 0 ${K.value} ${q.value}`), me = n(() => `translate(${J.value}px, ${Y.value}px) scale(${X.value})`);
 function he(e, t) {
-	K.value = e, q.value = t, H.value++;
+	J.value = e, Y.value = t;
+}
+function ge(e, t) {
+	K.value = e, q.value = t, U.value++;
 }
-var ge = [
+var _e = [
 	.1,
 	.25,
 	.33,
@@ -126,9 +145,9 @@ var ge = [
 	8,
 	10
 ];
-function _e(e, t, n) {
+function ve(e, t, n) {
 	let r = X.value, i = n > 1, a = null;
-	for (let e of ge) if (i) {
+	for (let e of _e) if (i) {
 		if (e > r + .001) {
 			a = e;
 			break;
@@ -136,99 +155,99 @@ function _e(e, t, n) {
 	} else e < r - .001 && (a = e);
 	if (a === null) return;
 	let o = (e - J.value) / r, s = (t - Y.value) / r;
-	J.value = e - o * a, Y.value = t - s * a, X.value = a, de.value = !0, Z && clearTimeout(Z), Z = setTimeout(() => {
-		de.value = !1;
+	J.value = e - o * a, Y.value = t - s * a, X.value = a, Z.value = !0, Q && clearTimeout(Q), Q = setTimeout(() => {
+		Z.value = !1;
 	}, 1500);
 }
-function ve(e, t, n) {
-	let r = ge[0], i = ge[ge.length - 1];
+function ye(e, t, n) {
+	let r = _e[0], i = _e[_e.length - 1];
 	n = Math.max(r, Math.min(i, n));
 	let a = X.value, o = (e - J.value) / a, s = (t - Y.value) / a;
-	J.value = e - o * n, Y.value = t - s * n, X.value = n, de.value = !0, Z && clearTimeout(Z), Z = setTimeout(() => {
-		de.value = !1;
+	J.value = e - o * n, Y.value = t - s * n, X.value = n, Z.value = !0, Q && clearTimeout(Q), Q = setTimeout(() => {
+		Z.value = !1;
 	}, 1500);
 }
-function ye() {
+function be() {
 	return Math.round(X.value * 100);
 }
-var be = b([]), xe = b([]), Se = b(!1), Ce = b(null);
-function we(e) {
-	z.value = e;
-}
+var xe = b([]), Se = b([]), Ce = b(!1), we = b(null);
 function Te(e) {
-	B.value = e, H.value++;
+	B.value = e;
 }
-function Ee() {
-	R.value = !R.value;
+function Ee(e) {
+	V.value = e, U.value++;
 }
 function De() {
-	R.value = !1;
+	z.value = !z.value;
 }
-var Oe = n(() => N.value.filter((e) => P.value.has(e.id))), ke = n(() => {
-	let e = Oe.value.filter((e) => e.type !== "text");
+function Oe() {
+	z.value = !1;
+}
+var ke = n(() => F.value.filter((e) => I.value.has(e.id))), Ae = n(() => {
+	let e = ke.value.filter((e) => e.type !== "text");
 	if (e.length === 0) return null;
 	let t = e[0].strokeColor;
 	return e.every((e) => e.strokeColor === t) ? t : null;
-}), Ae = n(() => {
-	let e = Oe.value.filter((e) => e.type !== "line" && e.type !== "pencil" && e.type !== "text");
+}), je = n(() => {
+	let e = ke.value.filter((e) => e.type !== "line" && e.type !== "pencil" && e.type !== "text");
 	if (e.length === 0) return null;
 	let t = e[0].fillColor;
 	return e.every((e) => e.fillColor === t) ? t : null;
-}), je = n(() => {
-	let e = Oe.value.filter((e) => e.type === "text");
-	if (e.length === 0) return null;
-	let t = e[0].textColor ?? F.value;
-	return e.every((e) => (e.textColor ?? F.value) === t) ? t : null;
 }), Me = n(() => {
-	let e = Oe.value;
+	let e = ke.value.filter((e) => e.type === "text");
+	if (e.length === 0) return null;
+	let t = e[0].textColor ?? L.value;
+	return e.every((e) => (e.textColor ?? L.value) === t) ? t : null;
+}), Ne = n(() => {
+	let e = ke.value;
 	return e.length === 1 ? e[0] : null;
-}), Ne = n(() => Me.value?.id ?? null);
-function Pe(e) {
-	return P.value.has(e);
-}
+}), Pe = n(() => Ne.value?.id ?? null);
 function Fe(e) {
-	P.value = e ? /* @__PURE__ */ new Set([e]) : /* @__PURE__ */ new Set();
+	return I.value.has(e);
 }
 function Ie(e) {
-	P.value = new Set(e);
+	I.value = e ? /* @__PURE__ */ new Set([e]) : /* @__PURE__ */ new Set();
+}
+function Le(e) {
+	I.value = new Set(e);
 }
-function Le() {
-	P.value = /* @__PURE__ */ new Set();
+function Re() {
+	I.value = /* @__PURE__ */ new Set();
 }
-function Re(e) {
-	Q(), N.value.push(e);
+function ze(e) {
+	Ye(), F.value.push(e);
 }
-function ze(e, t) {
-	let n = N.value.findIndex((t) => t.id === e);
+function Be(e, t) {
+	let n = F.value.findIndex((t) => t.id === e);
 	if (n === -1) return;
 	let r = { ...t };
 	r.x !== void 0 && (r.x = Math.round(r.x)), r.y !== void 0 && (r.y = Math.round(r.y)), r.width !== void 0 && (r.width = Math.round(r.width)), r.height !== void 0 && (r.height = Math.round(r.height)), r.points &&= r.points.map((e) => ({
 		x: Math.round(e.x),
 		y: Math.round(e.y)
-	})), N.value[n] = {
-		...N.value[n],
+	})), F.value[n] = {
+		...F.value[n],
 		...r
 	};
 }
-function Be() {
-	let e = P.value;
-	e.size !== 0 && (Q(), N.value = N.value.filter((t) => !e.has(t.id)), P.value = /* @__PURE__ */ new Set());
-}
-var Ve = n(() => be.value.length > 0), He = n(() => xe.value.length > 0), Ue = b([]);
-function We() {
-	P.value.size !== 0 && (Ue.value = Oe.value.map((e) => qe(e)), Be());
+function Ve() {
+	let e = I.value;
+	e.size !== 0 && (Ye(), F.value = F.value.filter((t) => !e.has(t.id)), I.value = /* @__PURE__ */ new Set());
 }
+var He = n(() => xe.value.length > 0), Ue = n(() => Se.value.length > 0), We = b([]);
 function Ge() {
-	P.value.size !== 0 && (Ue.value = Oe.value.map((e) => qe(e)));
+	I.value.size !== 0 && (We.value = ke.value.map((e) => Je(e)), Ve());
 }
 function Ke() {
-	if (Ue.value.length === 0) return;
-	Q(), Le();
+	I.value.size !== 0 && (We.value = ke.value.map((e) => Je(e)));
+}
+function qe() {
+	if (We.value.length === 0) return;
+	Ye(), Re();
 	let e = [];
-	for (let t of Ue.value) {
+	for (let t of We.value) {
 		let n = {
-			...qe(t),
-			id: rt(),
+			...Je(t),
+			id: at(),
 			x: t.x + 20,
 			y: t.y + 20,
 			points: t.points.map((e) => ({
@@ -236,61 +255,61 @@ function Ke() {
 				y: e.y + 20
 			}))
 		};
-		N.value.push(n), e.push(n.id);
+		F.value.push(n), e.push(n.id);
 	}
-	Ie(e);
+	Le(e);
 }
-function qe(e) {
+function Je(e) {
 	return {
 		...e,
 		points: e.points.map((e) => ({ ...e }))
 	};
 }
-function Q() {
-	be.value.push(N.value.map((e) => ({
+function Ye() {
+	xe.value.push(F.value.map((e) => ({
 		...e,
 		points: e.points.map((e) => ({ ...e }))
-	}))), xe.value = [];
+	}))), Se.value = [];
 }
-function Je() {
-	be.value.length !== 0 && (xe.value.push(N.value.map((e) => ({
+function Xe() {
+	xe.value.length !== 0 && (Se.value.push(F.value.map((e) => ({
 		...e,
 		points: e.points.map((e) => ({ ...e }))
-	}))), N.value = be.value.pop(), P.value = /* @__PURE__ */ new Set());
+	}))), F.value = xe.value.pop(), I.value = /* @__PURE__ */ new Set());
 }
-function Ye() {
-	xe.value.length !== 0 && (be.value.push(N.value.map((e) => ({
+function Ze() {
+	Se.value.length !== 0 && (xe.value.push(F.value.map((e) => ({
 		...e,
 		points: e.points.map((e) => ({ ...e }))
-	}))), N.value = xe.value.pop(), P.value = /* @__PURE__ */ new Set());
+	}))), F.value = Se.value.pop(), I.value = /* @__PURE__ */ new Set());
 }
-function Xe() {
-	let e = P.value;
+function Qe() {
+	let e = I.value;
 	if (e.size === 0) return;
-	Q();
-	let t = N.value.map((t, n) => e.has(t.id) ? n : -1).filter((e) => e >= 0).sort((e, t) => t - e);
-	for (let e of t) e < N.value.length - 1 && ([N.value[e], N.value[e + 1]] = [N.value[e + 1], N.value[e]]);
+	Ye();
+	let t = F.value.map((t, n) => e.has(t.id) ? n : -1).filter((e) => e >= 0).sort((e, t) => t - e);
+	for (let e of t) e < F.value.length - 1 && ([F.value[e], F.value[e + 1]] = [F.value[e + 1], F.value[e]]);
 }
-function Ze() {
-	let e = P.value;
+function $e() {
+	let e = I.value;
 	if (e.size === 0) return;
-	Q();
-	let t = N.value.map((t, n) => e.has(t.id) ? n : -1).filter((e) => e >= 0).sort((e, t) => e - t);
-	for (let e of t) e > 0 && ([N.value[e], N.value[e - 1]] = [N.value[e - 1], N.value[e]]);
+	Ye();
+	let t = F.value.map((t, n) => e.has(t.id) ? n : -1).filter((e) => e >= 0).sort((e, t) => e - t);
+	for (let e of t) e > 0 && ([F.value[e], F.value[e - 1]] = [F.value[e - 1], F.value[e]]);
 }
-var Qe = !1;
-function $e(e) {
-	if (Qe) return;
-	Qe = !0, N.value = Array.isArray(e) ? e.map((e) => ({
+var et = !1;
+function tt(e) {
+	if (et) return;
+	et = !0, F.value = Array.isArray(e) ? e.map((e) => ({
 		...e,
 		points: e.points.map((e) => ({ ...e }))
 	})) : [];
-	let t = new Set(N.value.map((e) => e.id));
-	P.value = new Set([...P.value].filter((e) => t.has(e))), setTimeout(() => {
-		Qe = !1;
+	let t = new Set(F.value.map((e) => e.id));
+	I.value = new Set([...I.value].filter((e) => t.has(e))), setTimeout(() => {
+		et = !1;
 	}, 0);
 }
-function et(e) {
+function nt(e) {
 	let { x: t, y: n, width: r, height: i, type: a } = e;
 	return a === "line" || a === "triangle" || a === "star" ? {
 		x: r >= 0 ? t : t + r,
@@ -304,40 +323,40 @@ function et(e) {
 		height: i
 	};
 }
-function tt(e) {
-	L.value = e;
+function rt(e) {
+	R.value = e;
 }
-function nt(e) {
-	if (P.value.size > 0) {
-		Q();
-		for (let t of P.value) {
-			let n = N.value.find((e) => e.id === t);
-			if (L.value === "foreground") {
+function it(e) {
+	if (I.value.size > 0) {
+		Ye();
+		for (let t of I.value) {
+			let n = F.value.find((e) => e.id === t);
+			if (R.value === "foreground") {
 				if (e === "transparent" || n?.type === "text") continue;
-				ze(t, { strokeColor: e });
-			} else if (L.value === "textColor") {
+				Be(t, { strokeColor: e });
+			} else if (R.value === "textColor") {
 				if (e === "transparent") return;
-				ze(t, { textColor: e });
+				Be(t, { textColor: e });
 			} else {
 				if (n?.type === "text") continue;
-				ze(t, { fillColor: e });
+				Be(t, { fillColor: e });
 			}
 		}
-		H.value++;
-	} else if (L.value === "foreground") {
+		U.value++;
+	} else if (R.value === "foreground") {
 		if (e === "transparent") return;
-		F.value = e;
-	} else if (L.value === "textColor") {
+		L.value = e;
+	} else if (R.value === "textColor") {
 		if (e === "transparent") return;
-		U.value = e;
-	} else I.value = e;
+		W.value = e;
+	} else de.value = e;
 }
-function rt() {
-	return crypto.randomUUID();
+function at() {
+	return P();
 }
-function it(e, t, n, r, i, a) {
+function ot(e, t, n, r, i, a) {
 	return {
-		id: rt(),
+		id: at(),
 		type: e,
 		x: Math.round(t),
 		y: Math.round(n),
@@ -347,14 +366,14 @@ function it(e, t, n, r, i, a) {
 			x: Math.round(e.x),
 			y: Math.round(e.y)
 		})),
-		strokeColor: F.value,
-		fillColor: e === "pencil" || e === "line" ? "none" : I.value,
-		strokeWidth: z.value,
+		strokeColor: L.value,
+		fillColor: e === "pencil" || e === "line" ? "none" : de.value,
+		strokeWidth: B.value,
 		...e === "text" ? {
 			text: "",
 			fontSize: 16,
 			textAlign: "left",
-			textColor: F.value,
+			textColor: L.value,
 			textAutoWidth: !0,
 			fillColor: "transparent",
 			strokeColor: "transparent",
@@ -363,101 +382,101 @@ function it(e, t, n, r, i, a) {
 		} : {}
 	};
 }
-function at() {
-	N.value = [], P.value = /* @__PURE__ */ new Set(), F.value = "#000000", I.value = "transparent", L.value = "foreground", R.value = !1, z.value = 3, B.value = "transparent", V.value = "light", H.value = 0, U.value = "#000000", W.value = null, G.value = null, K.value = 800, q.value = 600, J.value = 0, Y.value = 0, X.value = 1, de.value = !1, Z &&= (clearTimeout(Z), null), be.value = [], xe.value = [], Se.value = !1, Ce.value = null, Ue.value = [];
+function st() {
+	F.value = [], I.value = /* @__PURE__ */ new Set(), L.value = "#000000", de.value = "transparent", R.value = "foreground", z.value = !1, B.value = 3, V.value = "transparent", H.value = "light", U.value = 0, W.value = "#000000", fe.value = null, G.value = null, K.value = 800, q.value = 600, J.value = 0, Y.value = 0, X.value = 1, Z.value = !1, Q &&= (clearTimeout(Q), null), xe.value = [], Se.value = [], Ce.value = !1, we.value = null, We.value = [];
 }
-var ot = y({
-	strokes: N,
-	selectedStrokeIds: P,
-	selectedStrokeId: Ne,
-	selectedStroke: Me,
-	selectedStrokes: Oe,
-	selectedStrokeColor: ke,
-	selectedFillColor: Ae,
-	selectedTextColor: je,
-	foregroundColor: F,
-	backgroundColor: I,
-	activeColorSlot: L,
-	showColorPalette: R,
-	isSelecting: Se,
-	selectionBox: Ce,
-	toggleColorPalette: Ee,
-	hideColorPalette: De,
-	addStroke: Re,
-	updateStroke: ze,
-	selectStroke: Fe,
-	selectStrokes: Ie,
-	clearSelection: Le,
-	isSelected: Pe,
-	deleteSelectedStrokes: Be,
-	setColorSlot: tt,
-	setColor: nt,
-	buildStroke: it,
-	strokeWidth: z,
-	setStrokeWidth: we,
-	canvasBackgroundColor: B,
-	setCanvasBackgroundColor: Te,
-	canUndo: Ve,
-	canRedo: He,
-	undoStack: be,
-	pushUndo: Q,
-	undo: Je,
-	redo: Ye,
-	moveSelectedUp: Xe,
-	moveSelectedDown: Ze,
-	syncFromParent: $e,
-	getStrokeDisplayBounds: et,
-	clipboard: Ue,
-	cutSelectedStrokes: We,
-	copySelectedStrokes: Ge,
-	pasteStrokes: Ke,
+var ct = y({
+	strokes: F,
+	selectedStrokeIds: I,
+	selectedStrokeId: Pe,
+	selectedStroke: Ne,
+	selectedStrokes: ke,
+	selectedStrokeColor: Ae,
+	selectedFillColor: je,
+	selectedTextColor: Me,
+	foregroundColor: L,
+	backgroundColor: de,
+	activeColorSlot: R,
+	showColorPalette: z,
+	isSelecting: Ce,
+	selectionBox: we,
+	toggleColorPalette: De,
+	hideColorPalette: Oe,
+	addStroke: ze,
+	updateStroke: Be,
+	selectStroke: Ie,
+	selectStrokes: Le,
+	clearSelection: Re,
+	isSelected: Fe,
+	deleteSelectedStrokes: Ve,
+	setColorSlot: rt,
+	setColor: it,
+	buildStroke: ot,
+	strokeWidth: B,
+	setStrokeWidth: Te,
+	canvasBackgroundColor: V,
+	setCanvasBackgroundColor: Ee,
+	canUndo: He,
+	canRedo: Ue,
+	undoStack: xe,
+	pushUndo: Ye,
+	undo: Xe,
+	redo: Ze,
+	moveSelectedUp: Qe,
+	moveSelectedDown: $e,
+	syncFromParent: tt,
+	getStrokeDisplayBounds: nt,
+	clipboard: We,
+	cutSelectedStrokes: Ge,
+	copySelectedStrokes: Ke,
+	pasteStrokes: qe,
 	canvasWidth: K,
 	canvasHeight: q,
 	panX: J,
 	panY: Y,
 	zoomLevel: X,
-	showZoomIndicator: de,
-	viewBox: fe,
-	canvasTransform: pe,
-	setPan: me,
-	setCanvasSize: he,
-	zoomAt: _e,
-	continuousZoomAt: ve,
-	getZoomPercent: ye,
-	dataVersion: H,
-	theme: V,
-	textColor: U,
-	editingTextId: W,
+	showZoomIndicator: Z,
+	viewBox: pe,
+	canvasTransform: me,
+	setPan: he,
+	setCanvasSize: ge,
+	zoomAt: ve,
+	continuousZoomAt: ye,
+	getZoomPercent: be,
+	dataVersion: U,
+	theme: H,
+	textColor: W,
+	editingTextId: fe,
 	hoveredTextId: G,
-	reset: at
+	reset: st
 });
-function st() {
-	return ot;
+function lt() {
+	return ct;
 }
 //#endregion
 //#region src/components/painter/stores/tools.ts
-var ct = b("select");
-function lt(e) {
-	if (ct.value === "select" && e !== "select") {
-		let e = st();
+var ut = b("select");
+function dt(e) {
+	if (ut.value === "select" && e !== "select") {
+		let e = lt();
 		e.selectedStrokeIds.size > 0 && e.clearSelection();
 	}
-	ct.value = e;
+	ut.value = e;
 }
-function ut() {
-	ct.value = "select";
+function ft() {
+	ut.value = "select";
 }
-var dt = y({
-	activeTool: ct,
-	setTool: lt,
-	reset: ut
+var pt = y({
+	activeTool: ut,
+	setTool: dt,
+	reset: ft
 });
-function ft() {
-	return dt;
+function mt() {
+	return pt;
 }
 //#endregion
 //#region src/components/painter/Toolbar.vue?vue&type=script&setup=true&lang.ts
-var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" }, gt = ["title", "onClick"], _t = {
+var ht = { class: "toolbar" }, gt = ["disabled"], _t = { class: "tool-group" }, vt = ["title", "onClick"], yt = {
 	key: 0,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -466,7 +485,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	"stroke-width": "1.6",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, vt = {
+}, bt = {
 	key: 1,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -474,7 +493,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linecap": "round"
-}, yt = {
+}, xt = {
 	key: 2,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -483,7 +502,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	"stroke-width": "1.8",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, bt = {
+}, St = {
 	key: 3,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -491,14 +510,14 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linecap": "round"
-}, xt = {
+}, Ct = {
 	key: 4,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.8"
-}, St = {
+}, wt = {
 	key: 5,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -506,7 +525,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linejoin": "round"
-}, Ct = {
+}, Tt = {
 	key: 6,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -514,7 +533,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linejoin": "round"
-}, wt = {
+}, Et = {
 	key: 7,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -522,7 +541,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linejoin": "round"
-}, Tt = {
+}, Dt = {
 	key: 8,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -531,7 +550,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	"stroke-width": "1.8",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, Et = { class: "tool-group nav-group" }, Dt = ["title"], Ot = ["disabled"], kt = { class: "canvas-size-wrapper" }, At = ["title"], jt = { class: "popover-title" }, Mt = { class: "popover-field" }, Nt = { class: "popover-label" }, Pt = { class: "popover-field" }, Ft = { class: "popover-label" }, It = { class: "popover-field" }, Lt = { class: "popover-label" }, Rt = { class: "bg-color-row" }, zt = ["title"], Bt = ["value"], Vt = ["title"], Ht = { class: "popover-actions" }, Ut = { class: "color-section" }, Wt = ["title"], Gt = { class: "color-swatch text-color-swatch" }, Kt = {
+}, Ot = { class: "tool-group nav-group" }, kt = ["title"], At = ["disabled"], jt = { class: "canvas-size-wrapper" }, Mt = ["title"], Nt = { class: "popover-title" }, Pt = { class: "popover-field" }, Ft = { class: "popover-label" }, It = { class: "popover-field" }, Lt = { class: "popover-label" }, Rt = { class: "popover-field" }, zt = { class: "popover-label" }, Bt = { class: "bg-color-row" }, Vt = ["title"], Ht = ["value"], Ut = ["title"], Wt = { class: "popover-actions" }, Gt = { class: "color-section" }, Kt = ["title"], qt = { class: "color-swatch text-color-swatch" }, Jt = {
 	key: 0,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -539,7 +558,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, qt = ["title"], Jt = {
+}, Yt = ["title"], Xt = {
 	key: 0,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -547,7 +566,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Yt = ["title"], Xt = {
+}, Zt = ["title"], Qt = {
 	key: 0,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -555,7 +574,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Zt = {
+}, $t = {
 	key: 1,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -563,10 +582,10 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Qt = 42, $t = /*@__PURE__*/ l({
+}, en = 42, tn = /*@__PURE__*/ l({
 	__name: "Toolbar",
 	setup(c) {
-		let l = ft(), u = st(), { t: d } = ie(), f = ae(), v = b(null), y = b(!1), S = b(!1);
+		let l = mt(), u = lt(), { t: d } = ie(), f = ae(), v = b(null), y = b(!1), S = b(!1);
 		function T() {
 			let e = v.value;
 			e && (y.value = e.scrollTop > 0, S.value = e.scrollTop + e.clientHeight < e.scrollHeight - 1);
@@ -581,7 +600,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 		function O() {
 			let e = v.value;
 			e && e.scrollBy({
-				top: Qt,
+				top: en,
 				behavior: "smooth"
 			});
 		}
@@ -644,17 +663,17 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 		function L(e) {
 			e.key === "Escape" && (A.value = !1);
 		}
-		let R = n(() => k.value && u.selectedStrokeColor !== null ? u.selectedStrokeColor : u.foregroundColor), z = n(() => !U.value && k.value && u.selectedStrokeColor === null), B = n(() => k.value && u.selectedFillColor !== null ? u.selectedFillColor : u.backgroundColor), V = n(() => !U.value && k.value && u.selectedFillColor === null), H = n(() => u.selectedStrokes.some((e) => e.type === "text")), U = n(() => k.value && u.selectedStrokes.every((e) => e.type === "text")), W = n(() => U.value), G = n(() => U.value), K = n(() => k.value && u.selectedTextColor !== null ? u.selectedTextColor : u.textColor), q = n(() => H.value && u.selectedTextColor === null);
-		function J() {
+		let de = n(() => k.value && u.selectedStrokeColor !== null ? u.selectedStrokeColor : u.foregroundColor), R = n(() => !H.value && k.value && u.selectedStrokeColor === null), z = n(() => k.value && u.selectedFillColor !== null ? u.selectedFillColor : u.backgroundColor), B = n(() => !H.value && k.value && u.selectedFillColor === null), V = n(() => u.selectedStrokes.some((e) => e.type === "text")), H = n(() => k.value && u.selectedStrokes.every((e) => e.type === "text")), U = n(() => H.value), W = n(() => H.value), fe = n(() => k.value && u.selectedTextColor !== null ? u.selectedTextColor : u.textColor), G = n(() => V.value && u.selectedTextColor === null);
+		function K() {
 			u.setColorSlot("textColor"), u.toggleColorPalette();
 		}
-		function Y() {
-			W.value || (u.setColorSlot("foreground"), u.toggleColorPalette());
+		function q() {
+			U.value || (u.setColorSlot("foreground"), u.toggleColorPalette());
 		}
-		function X() {
-			G.value || (u.setColorSlot("background"), u.toggleColorPalette());
+		function J() {
+			W.value || (u.setColorSlot("background"), u.toggleColorPalette());
 		}
-		return (n, c) => (_(), a("div", pt, [
+		return (n, c) => (_(), a("div", ht, [
 			y.value || S.value ? (_(), a("button", {
 				key: 0,
 				class: "scroll-btn scroll-up",
@@ -668,33 +687,33 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 				"stroke-width": "2",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [o("polyline", { points: "18 15 12 9 6 15" })], -1)]], 8, mt)) : i("", !0),
+			}, [o("polyline", { points: "18 15 12 9 6 15" })], -1)]], 8, gt)) : i("", !0),
 			o("div", {
 				ref_key: "toolsScrollRef",
 				ref: v,
 				class: "tools-scroll",
 				onScroll: T
-			}, [o("div", ht, [(_(), a(e, null, x(re, (e) => o("button", {
+			}, [o("div", _t, [(_(), a(e, null, x(re, (e) => o("button", {
 				key: e,
 				class: p(["tool-btn", { active: w(l).activeTool === e }]),
 				title: w(d)(`tool.${e}`),
 				onClick: (t) => w(l).setTool(e)
-			}, [e === "select" ? (_(), a("svg", _t, [...c[4] ||= [o("path", { d: "M4.5 3.5l5.5 15 2.5-6 6-2.5z" }, null, -1)]])) : e === "pan" ? (_(), a("svg", vt, [...c[5] ||= [s("<line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\" data-v-9532ade7></line><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" data-v-9532ade7></line><polygon points=\"12,4 9,8 15,8\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon><polygon points=\"12,20 9,16 15,16\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon><polygon points=\"4,12 8,9 8,15\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon><polygon points=\"20,12 16,9 16,15\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon>", 6)]])) : e === "pencil" ? (_(), a("svg", yt, [...c[6] ||= [o("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }, null, -1), o("path", { d: "m15 5 4 4" }, null, -1)]])) : e === "line" ? (_(), a("svg", bt, [...c[7] ||= [o("line", {
+			}, [e === "select" ? (_(), a("svg", yt, [...c[4] ||= [o("path", { d: "M4.5 3.5l5.5 15 2.5-6 6-2.5z" }, null, -1)]])) : e === "pan" ? (_(), a("svg", bt, [...c[5] ||= [s("<line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\" data-v-9532ade7></line><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" data-v-9532ade7></line><polygon points=\"12,4 9,8 15,8\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon><polygon points=\"12,20 9,16 15,16\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon><polygon points=\"4,12 8,9 8,15\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon><polygon points=\"20,12 16,9 16,15\" fill=\"currentColor\" stroke=\"none\" data-v-9532ade7></polygon>", 6)]])) : e === "pencil" ? (_(), a("svg", xt, [...c[6] ||= [o("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }, null, -1), o("path", { d: "m15 5 4 4" }, null, -1)]])) : e === "line" ? (_(), a("svg", St, [...c[7] ||= [o("line", {
 				x1: "5",
 				y1: "19",
 				x2: "19",
 				y2: "5"
-			}, null, -1)]])) : e === "circle" ? (_(), a("svg", xt, [...c[8] ||= [o("circle", {
+			}, null, -1)]])) : e === "circle" ? (_(), a("svg", Ct, [...c[8] ||= [o("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9"
-			}, null, -1)]])) : e === "rect" ? (_(), a("svg", St, [...c[9] ||= [o("rect", {
+			}, null, -1)]])) : e === "rect" ? (_(), a("svg", wt, [...c[9] ||= [o("rect", {
 				x: "3",
 				y: "3",
 				width: "18",
 				height: "18",
 				rx: "2"
-			}, null, -1)]])) : e === "triangle" ? (_(), a("svg", Ct, [...c[10] ||= [o("polygon", { points: "12,3 22,21 2,21" }, null, -1)]])) : e === "star" ? (_(), a("svg", wt, [...c[11] ||= [o("polygon", { points: "12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" }, null, -1)]])) : e === "text" ? (_(), a("svg", Tt, [...c[12] ||= [
+			}, null, -1)]])) : e === "triangle" ? (_(), a("svg", Tt, [...c[10] ||= [o("polygon", { points: "12,3 22,21 2,21" }, null, -1)]])) : e === "star" ? (_(), a("svg", Et, [...c[11] ||= [o("polygon", { points: "12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" }, null, -1)]])) : e === "text" ? (_(), a("svg", Dt, [...c[12] ||= [
 				o("polyline", { points: "4 7 4 4 20 4 20 7" }, null, -1),
 				o("line", {
 					x1: "9",
@@ -708,11 +727,11 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					x2: "12",
 					y2: "20"
 				}, null, -1)
-			]])) : i("", !0)], 10, gt)), 64))]), o("div", Et, [o("button", {
+			]])) : i("", !0)], 10, vt)), 64))]), o("div", Ot, [o("button", {
 				class: p(["tool-btn", { active: w(l).activeTool === "zoom" }]),
 				title: w(d)("tool.zoom"),
 				onClick: c[0] ||= (e) => w(l).setTool("zoom")
-			}, [...c[13] ||= [s("<svg class=\"tool-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-v-9532ade7><circle cx=\"11\" cy=\"11\" r=\"8\" data-v-9532ade7></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" data-v-9532ade7></line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" data-v-9532ade7></line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" data-v-9532ade7></line></svg>", 1)]], 10, Dt)])], 544),
+			}, [...c[13] ||= [s("<svg class=\"tool-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-v-9532ade7><circle cx=\"11\" cy=\"11\" r=\"8\" data-v-9532ade7></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" data-v-9532ade7></line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" data-v-9532ade7></line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" data-v-9532ade7></line></svg>", 1)]], 10, kt)])], 544),
 			y.value || S.value ? (_(), a("button", {
 				key: 1,
 				class: "scroll-btn scroll-down",
@@ -726,9 +745,9 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 				"stroke-width": "2",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [o("polyline", { points: "6 9 12 15 18 9" })], -1)]], 8, Ot)) : i("", !0),
+			}, [o("polyline", { points: "6 9 12 15 18 9" })], -1)]], 8, At)) : i("", !0),
 			c[24] ||= o("div", { class: "spacer" }, null, -1),
-			o("div", kt, [o("button", {
+			o("div", jt, [o("button", {
 				class: "tool-btn",
 				title: w(d)("canvasSize.title"),
 				onClick: oe
@@ -760,7 +779,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					x2: "19",
 					y2: "22"
 				})
-			], -1)]], 8, At), (_(), r(t, { to: "body" }, [A.value ? (_(), a("div", {
+			], -1)]], 8, Mt), (_(), r(t, { to: "body" }, [A.value ? (_(), a("div", {
 				key: 0,
 				class: "canvas-size-backdrop",
 				onMousedown: I
@@ -769,9 +788,9 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 				style: m(F.value),
 				onKeydown: L
 			}, [
-				o("div", jt, C(w(d)("canvasSize.title")), 1),
-				o("div", Mt, [
-					o("label", Nt, C(w(d)("canvasSize.width")), 1),
+				o("div", Nt, C(w(d)("canvasSize.title")), 1),
+				o("div", Pt, [
+					o("label", Ft, C(w(d)("canvasSize.width")), 1),
 					D(o("input", {
 						ref: "widthInput",
 						"onUpdate:modelValue": c[1] ||= (e) => j.value.width = e,
@@ -787,8 +806,8 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					]]),
 					c[16] ||= o("span", { class: "popover-unit" }, "px", -1)
 				]),
-				o("div", Pt, [
-					o("label", Ft, C(w(d)("canvasSize.height")), 1),
+				o("div", It, [
+					o("label", Lt, C(w(d)("canvasSize.height")), 1),
 					D(o("input", {
 						"onUpdate:modelValue": c[2] ||= (e) => j.value.height = e,
 						type: "number",
@@ -803,7 +822,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					]]),
 					c[17] ||= o("span", { class: "popover-unit" }, "px", -1)
 				]),
-				o("div", It, [o("label", Lt, C(w(d)("canvasSize.background")), 1), o("div", Rt, [o("button", {
+				o("div", Rt, [o("label", zt, C(w(d)("canvasSize.background")), 1), o("div", Bt, [o("button", {
 					class: p(["bg-radio-btn", { active: M.value !== "transparent" }]),
 					title: w(d)("canvasSize.solidColor"),
 					onClick: ce
@@ -817,7 +836,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					class: "hidden-color-input",
 					value: M.value === "transparent" ? "#ffffff" : M.value,
 					onChange: le
-				}, null, 40, Bt)], 10, zt), o("button", {
+				}, null, 40, Ht)], 10, Vt), o("button", {
 					class: p([
 						"bg-radio-btn",
 						"bg-radio-btn--transparent",
@@ -838,8 +857,8 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					y1: "5",
 					x2: "19",
 					y2: "19"
-				})], -1)]], 10, Vt)])]),
-				o("div", Ht, [o("button", {
+				})], -1)]], 10, Ut)])]),
+				o("div", Wt, [o("button", {
 					class: "popover-btn cancel",
 					onClick: P
 				}, C(w(d)("canvasSize.cancel")), 1), o("button", {
@@ -847,15 +866,15 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					onClick: N
 				}, C(w(d)("canvasSize.confirm")), 1)])
 			], 36)], 32)) : i("", !0)]))]),
-			o("div", Ut, [
-				H.value ? (_(), a("div", {
+			o("div", Gt, [
+				V.value ? (_(), a("div", {
 					key: 0,
 					class: p(["color-indicator", { active: w(u).showColorPalette && w(u).activeColorSlot === "textColor" }]),
 					title: w(d)("color.textColor"),
-					onClick: J
-				}, [o("div", Gt, [(_(), a("svg", {
+					onClick: K
+				}, [o("div", qt, [(_(), a("svg", {
 					class: "text-color-icon",
-					style: m({ color: q.value ? "var(--wb-text-secondary)" : K.value }),
+					style: m({ color: G.value ? "var(--wb-text-secondary)" : fe.value }),
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -876,7 +895,7 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 						x2: "12",
 						y2: "20"
 					}, null, -1)
-				]], 4)), q.value ? (_(), a("svg", Kt, [...c[20] ||= [o("line", {
+				]], 4)), G.value ? (_(), a("svg", Jt, [...c[20] ||= [o("line", {
 					x1: "5",
 					y1: "12",
 					x2: "19",
@@ -886,18 +905,18 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					y1: "5",
 					x2: "12",
 					y2: "19"
-				}, null, -1)]])) : i("", !0)])], 10, Wt)) : i("", !0),
+				}, null, -1)]])) : i("", !0)])], 10, Kt)) : i("", !0),
 				o("div", {
 					class: p(["color-indicator", {
 						active: w(u).showColorPalette && w(u).activeColorSlot === "foreground",
-						disabled: W.value
+						disabled: U.value
 					}]),
 					title: w(d)("color.foreground"),
-					onClick: Y
+					onClick: q
 				}, [o("div", {
-					class: p(["color-swatch fg", { mixed: z.value }]),
-					style: m({ background: z.value ? "none" : R.value })
-				}, [z.value ? (_(), a("svg", Jt, [...c[21] ||= [o("line", {
+					class: p(["color-swatch fg", { mixed: R.value }]),
+					style: m({ background: R.value ? "none" : de.value })
+				}, [R.value ? (_(), a("svg", Xt, [...c[21] ||= [o("line", {
 					x1: "5",
 					y1: "12",
 					x2: "19",
@@ -907,21 +926,21 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					y1: "5",
 					x2: "12",
 					y2: "19"
-				}, null, -1)]])) : i("", !0)], 6)], 10, qt),
+				}, null, -1)]])) : i("", !0)], 6)], 10, Yt),
 				o("div", {
 					class: p(["color-indicator", {
 						active: w(u).showColorPalette && w(u).activeColorSlot === "background",
-						disabled: G.value
+						disabled: W.value
 					}]),
 					title: w(d)("color.background"),
-					onClick: X
+					onClick: J
 				}, [o("div", {
 					class: p(["color-swatch bg", {
-						mixed: V.value,
-						transparent: !V.value && B.value === "transparent"
+						mixed: B.value,
+						transparent: !B.value && z.value === "transparent"
 					}]),
-					style: m({ background: V.value || B.value === "transparent" ? "none" : B.value })
-				}, [V.value ? (_(), a("svg", Xt, [...c[22] ||= [o("line", {
+					style: m({ background: B.value || z.value === "transparent" ? "none" : z.value })
+				}, [B.value ? (_(), a("svg", Qt, [...c[22] ||= [o("line", {
 					x1: "5",
 					y1: "12",
 					x2: "19",
@@ -931,23 +950,23 @@ var pt = { class: "toolbar" }, mt = ["disabled"], ht = { class: "tool-group" },
 					y1: "5",
 					x2: "12",
 					y2: "19"
-				}, null, -1)]])) : B.value === "transparent" ? (_(), a("svg", Zt, [...c[23] ||= [o("line", {
+				}, null, -1)]])) : z.value === "transparent" ? (_(), a("svg", $t, [...c[23] ||= [o("line", {
 					x1: "5",
 					y1: "5",
 					x2: "19",
 					y2: "19"
-				}, null, -1)]])) : i("", !0)], 6)], 10, Yt)
+				}, null, -1)]])) : i("", !0)], 6)], 10, Zt)
 			])
 		]));
 	}
-}), en = (e, t) => {
+}), nn = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, tn = /*#__PURE__*/ en($t, [["__scopeId", "data-v-9532ade7"]]);
+}, rn = /*#__PURE__*/ nn(tn, [["__scopeId", "data-v-9532ade7"]]);
 //#endregion
 //#region src/components/painter/utils/geometry.ts
-function nn(e, t, n, r, i = !1, a = .382) {
+function an(e, t, n, r, i = !1, a = .382) {
 	let o = i ? -1 : 1, s = [];
 	for (let i = 0; i < 5; i++) {
 		let c = Math.PI / 2 * -1 + Math.PI * 2 * i / 5, l = c + Math.PI / 5;
@@ -961,7 +980,7 @@ function nn(e, t, n, r, i = !1, a = .382) {
 	}
 	return s;
 }
-function rn(e, t, n, r) {
+function on(e, t, n, r) {
 	let i = n >= 0 ? e : e + n, a = r >= 0 ? t : t + r, o = Math.abs(n), s = Math.abs(r);
 	return r >= 0 ? [
 		{
@@ -991,13 +1010,13 @@ function rn(e, t, n, r) {
 		}
 	];
 }
-function an(e, t, n) {
+function sn(e, t, n) {
 	let r = n.x - t.x, i = n.y - t.y, a = r * r + i * i;
 	if (a === 0) return Math.hypot(e.x - t.x, e.y - t.y);
 	let o = ((e.x - t.x) * r + (e.y - t.y) * i) / a;
 	return o = Math.max(0, Math.min(1, o)), Math.hypot(e.x - (t.x + o * r), e.y - (t.y + o * i));
 }
-function on(e, t) {
+function cn(e, t) {
 	let n = !1;
 	for (let r = 0, i = t.length - 1; r < t.length; i = r++) {
 		let a = t[r].x, o = t[r].y, s = t[i].x, c = t[i].y;
@@ -1005,12 +1024,12 @@ function on(e, t) {
 	}
 	return n;
 }
-function sn(e, t, n, r, i) {
+function ln(e, t, n, r, i) {
 	if (r <= 0 || i <= 0) return !1;
 	let a = (e.x - t) / r, o = (e.y - n) / i;
 	return a * a + o * o <= 1;
 }
-function cn(e) {
+function un(e) {
 	if (e.length === 0) return {
 		x: 0,
 		y: 0,
@@ -1026,14 +1045,14 @@ function cn(e) {
 		height: i - n
 	};
 }
-function ln(e, t) {
+function dn(e, t) {
 	let { x: n, y: r, width: i, height: a, type: o, points: s, fillColor: c } = t, l = c !== "none" && c !== "transparent";
 	switch (o) {
 		case "pencil":
 			if (s.length < 2) return !1;
-			for (let t = 0; t < s.length - 1; t++) if (an(e, s[t], s[t + 1]) < 8) return !0;
+			for (let t = 0; t < s.length - 1; t++) if (sn(e, s[t], s[t + 1]) < 8) return !0;
 			return !1;
-		case "line": return an(e, {
+		case "line": return sn(e, {
 			x: n,
 			y: r
 		}, {
@@ -1042,7 +1061,7 @@ function ln(e, t) {
 		}) < 8;
 		case "circle": {
 			let t = n + i / 2, o = r + a / 2, s = Math.abs(i) / 2, c = Math.abs(a) / 2;
-			return l && sn(e, t, o, s, c) ? !0 : sn(e, t, o, s + 8, c + 8) && !sn(e, t, o, s - 8, c - 8);
+			return l && ln(e, t, o, s, c) ? !0 : ln(e, t, o, s + 8, c + 8) && !ln(e, t, o, s - 8, c - 8);
 		}
 		case "rect": {
 			if (l && e.x >= n && e.x <= n + i && e.y >= r && e.y <= r + a) return !0;
@@ -1050,12 +1069,12 @@ function ln(e, t) {
 			return t && !o;
 		}
 		case "triangle": {
-			let t = rn(n, r, i, a);
-			return l && on(e, t) ? !0 : on(e, t);
+			let t = on(n, r, i, a);
+			return l && cn(e, t) ? !0 : cn(e, t);
 		}
 		case "star": {
-			let t = nn(n + i / 2, r + a / 2, Math.abs(i) / 2, Math.abs(a) / 2, a >= 0);
-			return l && on(e, t) ? !0 : on(e, t);
+			let t = an(n + i / 2, r + a / 2, Math.abs(i) / 2, Math.abs(a) / 2, a >= 0);
+			return l && cn(e, t) ? !0 : cn(e, t);
 		}
 		case "text": return e.x >= n - 8 && e.x <= n + Math.max(i, 32) + 8 && e.y >= r - 8 && e.y <= r + Math.max(a, 16) + 8;
 		default: return !1;
@@ -1063,8 +1082,8 @@ function ln(e, t) {
 }
 //#endregion
 //#region src/components/painter/composables/useDrawing.ts
-function un(e) {
-	let t = st(), r = ft(), i = b(!1), a = b({
+function fn(e) {
+	let t = lt(), r = mt(), i = b(!1), a = b({
 		x: 0,
 		y: 0
 	}), o = b({
@@ -1132,7 +1151,7 @@ function un(e) {
 		return e === "pencil" ? {
 			id: "__preview__",
 			type: "pencil",
-			...cn(s.value),
+			...un(s.value),
 			points: [...s.value],
 			strokeColor: t.foregroundColor,
 			fillColor: "none",
@@ -1189,9 +1208,9 @@ function un(e) {
 			let e = t.editingTextId;
 			if (e) {
 				let n = t.strokes.find((t) => t.id === e);
-				if (n && ln(u, n)) return;
+				if (n && dn(u, n)) return;
 			} else {
-				let e = [...t.strokes].reverse().find((e) => ln(u, e));
+				let e = [...t.strokes].reverse().find((e) => dn(u, e));
 				if (e && e.type === "text") {
 					t.hoveredTextId = null, E(), t.pushUndo(), t.editingTextId = e.id;
 					return;
@@ -1201,7 +1220,7 @@ function un(e) {
 			return;
 		}
 		if (a.value = u, o.value = u, i.value = !0, r.activeTool === "pencil" && (s.value = [u]), r.activeTool === "select") {
-			let e = [...t.strokes].reverse().find((e) => ln(u, e));
+			let e = [...t.strokes].reverse().find((e) => dn(u, e));
 			if (e && t.isSelected(e.id)) {
 				t.pushUndo(), d.value = !0, f.value.clear();
 				for (let e of t.selectedStrokes) f.value.set(e.id, {
@@ -1232,7 +1251,7 @@ function un(e) {
 	function se(e, n) {
 		let c = A(e, n);
 		if (r.activeTool === "text" && !i.value && !t.editingTextId) {
-			let e = [...t.strokes].reverse().find((e) => ln(c, e));
+			let e = [...t.strokes].reverse().find((e) => dn(c, e));
 			t.hoveredTextId = e && e.type === "text" ? e.id : null;
 		} else i.value || (t.hoveredTextId = null);
 		if (i.value && (o.value = c, r.activeTool === "pencil" && s.value.push(c), r.activeTool === "select")) if (d.value) {
@@ -1288,7 +1307,7 @@ function un(e) {
 			if (d.value) d.value = !1, f.value.clear(), t.dataVersion++;
 			else {
 				if (t.isSelecting = !1, u < 3) {
-					let e = [...t.strokes].reverse().find((e) => ln(o, e));
+					let e = [...t.strokes].reverse().find((e) => dn(o, e));
 					t.selectStroke(e?.id ?? null);
 				} else {
 					let e = t.selectionBox, n = [];
@@ -1315,7 +1334,7 @@ function un(e) {
 			let e = s.value.map((e) => ({
 				x: Math.round(e.x),
 				y: Math.round(e.y)
-			})), n = cn(e);
+			})), n = un(e);
 			if (n.width < 3 && n.height < 3) {
 				t.clearSelection();
 				return;
@@ -1342,14 +1361,14 @@ function un(e) {
 	function L(e) {
 		t.pushUndo(), t.editingTextId = e;
 	}
-	function R(e) {
+	function de(e) {
 		let t = e.ctrlKey || e.metaKey;
 		c.value = t, l.value = e.shiftKey, u.value = e.shiftKey;
 	}
-	function z() {
+	function R() {
 		c.value = !1, l.value = !1, u.value = !1;
 	}
-	function B(e, t) {
+	function z(e, t) {
 		let { x: n, y: r, w: i, h: a } = e;
 		switch (t) {
 			case "nw": return {
@@ -1398,14 +1417,14 @@ function un(e) {
 			};
 		}
 	}
-	function V(e) {
+	function B(e) {
 		return e === "n" || e === "s" || e === "e" || e === "w";
 	}
-	function H(e, n, r, i) {
+	function V(e, n, r, i) {
 		let s = t.strokes.find((t) => t.id === e);
 		if (!s) return;
 		t.pushUndo();
-		let c = Y(s);
+		let c = q(s);
 		_.value = {
 			x: c.x,
 			y: c.y,
@@ -1419,23 +1438,23 @@ function un(e) {
 			l = e.clientX, u = e.clientY, i.preventDefault();
 		} else l = i.clientX, u = i.clientY;
 		let d = A(l, u);
-		a.value = d, o.value = d, window.addEventListener("mousemove", U), window.addEventListener("mouseup", K), window.addEventListener("touchmove", W, { passive: !1 }), window.addEventListener("touchend", q);
+		a.value = d, o.value = d, window.addEventListener("mousemove", H), window.addEventListener("mouseup", fe), window.addEventListener("touchmove", U, { passive: !1 }), window.addEventListener("touchend", G);
 	}
-	function U(e) {
-		G(e.clientX, e.clientY);
+	function H(e) {
+		W(e.clientX, e.clientY);
 	}
-	function W(e) {
+	function U(e) {
 		if (e.touches.length !== 1) return;
 		e.preventDefault();
 		let t = e.touches[0];
-		G(t.clientX, t.clientY);
+		W(t.clientX, t.clientY);
 	}
-	function G(e, n) {
+	function W(e, n) {
 		if (!p.value || !_.value || !m.value) return;
 		let r = A(e, n);
 		o.value = r;
 		let i = _.value, a = i.x + i.width / 2, s = i.y + i.height / 2, c;
-		if (l.value && V(h.value)) {
+		if (l.value && B(h.value)) {
 			let { x: e, y: n, width: o, height: l } = i;
 			switch (h.value) {
 				case "n": {
@@ -1492,7 +1511,7 @@ function un(e) {
 			c = O(i.type, a, s, r.x, r.y), t.updateStroke(m.value, c);
 			return;
 		}
-		if (V(h.value)) {
+		if (B(h.value)) {
 			let { x: e, y: t, width: n, height: a } = i;
 			switch (h.value) {
 				case "n": {
@@ -1539,7 +1558,7 @@ function un(e) {
 				};
 			}
 		} else {
-			let e = B({
+			let e = z({
 				x: i.x,
 				y: i.y,
 				w: i.width,
@@ -1557,16 +1576,16 @@ function un(e) {
 		}
 		t.updateStroke(m.value, c);
 	}
-	function K() {
-		J();
+	function fe() {
+		K();
 	}
-	function q(e) {
-		e.touches.length === 0 && J();
+	function G(e) {
+		e.touches.length === 0 && K();
 	}
-	function J() {
-		p.value = !1, m.value = null, h.value = "", g.value = "", _.value = null, t.dataVersion++, window.removeEventListener("mousemove", U), window.removeEventListener("mouseup", K), window.removeEventListener("touchmove", W), window.removeEventListener("touchend", q);
+	function K() {
+		p.value = !1, m.value = null, h.value = "", g.value = "", _.value = null, t.dataVersion++, window.removeEventListener("mousemove", H), window.removeEventListener("mouseup", fe), window.removeEventListener("touchmove", U), window.removeEventListener("touchend", G);
 	}
-	function Y(e) {
+	function q(e) {
 		let { type: t } = e;
 		if (t === "line" || t === "triangle" || t === "star") {
 			let { x: t, y: n, width: r, height: i } = e;
@@ -1594,11 +1613,11 @@ function un(e) {
 		onTouchMove: oe,
 		onTouchEnd: N,
 		getSVGPoint: k,
-		updateModifiers: R,
-		clearModifiers: z,
+		updateModifiers: de,
+		clearModifiers: R,
 		isResizing: p,
 		resizeCursor: g,
-		startResize: H,
+		startResize: V,
 		commitTextEdit: F,
 		cancelTextEdit: I,
 		startEditText: L,
@@ -1608,7 +1627,7 @@ function un(e) {
 }
 //#endregion
 //#region src/components/painter/utils/svg.ts
-function dn(e) {
+function pn(e) {
 	if (e.length === 0) return "";
 	if (e.length === 1) return `M ${e[0].x} ${e[0].y}`;
 	if (e.length === 2) return `M ${e[0].x} ${e[0].y} L ${e[1].x} ${e[1].y}`;
@@ -1619,7 +1638,7 @@ function dn(e) {
 	}
 	return t += ` L ${e[e.length - 1].x} ${e[e.length - 1].y}`, t;
 }
-function fn(e) {
+function mn(e) {
 	let { type: t, x: n, y: r, width: i, height: a, points: o, strokeColor: s, fillColor: c, strokeWidth: l } = e, u = {
 		stroke: s,
 		fill: c,
@@ -1633,7 +1652,7 @@ function fn(e) {
 			attrs: {
 				...u,
 				fill: "none",
-				d: dn(o)
+				d: pn(o)
 			}
 		};
 		case "line": return {
@@ -1671,7 +1690,7 @@ function fn(e) {
 			}
 		};
 		case "triangle": {
-			let e = rn(n, r, i, a).map((e) => `${e.x},${e.y}`).join(" ");
+			let e = on(n, r, i, a).map((e) => `${e.x},${e.y}`).join(" ");
 			return {
 				tag: "polygon",
 				attrs: {
@@ -1681,7 +1700,7 @@ function fn(e) {
 			};
 		}
 		case "star": {
-			let e = nn(n + i / 2, r + a / 2, Math.abs(i) / 2, Math.abs(a) / 2, a >= 0).map((e) => `${e.x},${e.y}`).join(" ");
+			let e = an(n + i / 2, r + a / 2, Math.abs(i) / 2, Math.abs(a) / 2, a >= 0).map((e) => `${e.x},${e.y}`).join(" ");
 			return {
 				tag: "polygon",
 				attrs: {
@@ -1702,45 +1721,45 @@ function fn(e) {
 }
 //#endregion
 //#region src/components/painter/StrokeRenderer.vue
-var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
+var hn = /*#__PURE__*/ nn(/* @__PURE__ */ l({
 	__name: "StrokeRenderer",
 	props: {
 		stroke: {},
 		isSelected: { type: Boolean }
 	},
 	setup(e) {
-		return (t, n) => (_(), r(S(w(fn)(e.stroke).tag), d(w(fn)(e.stroke).attrs, {
+		return (t, n) => (_(), r(S(w(mn)(e.stroke).tag), d(w(mn)(e.stroke).attrs, {
 			class: { selected: e.isSelected },
 			"data-stroke-id": e.stroke.id
 		}), null, 16, ["class", "data-stroke-id"]));
 	}
-}), [["__scopeId", "data-v-d3706fa4"]]), mn = { key: 0 }, hn = [
+}), [["__scopeId", "data-v-d3706fa4"]]), gn = { key: 0 }, _n = [
 	"x",
 	"y",
 	"width",
 	"height"
-], gn = [
+], vn = [
 	"x",
 	"y",
 	"onMousedown",
 	"onTouchstart"
-], _n = [
+], yn = [
 	"x",
 	"y",
 	"onMousedown",
 	"onTouchstart"
-], vn = 6, $ = 8, yn = /* @__PURE__ */ l({
+], bn = 6, $ = 8, xn = /* @__PURE__ */ l({
 	__name: "SelectionOverlay",
 	props: {
 		stroke: {},
 		startResize: { type: Function }
 	},
 	setup(t) {
-		let r = t, s = st(), c = n(() => {
+		let r = t, s = lt(), c = n(() => {
 			let e = s.getStrokeDisplayBounds(r.stroke);
 			return {
-				x: e.x - vn,
-				y: e.y - vn,
+				x: e.x - bn,
+				y: e.y - bn,
 				w: e.width + 12,
 				h: e.height + 12
 			};
@@ -1813,7 +1832,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 		function p(e, t, n) {
 			n.preventDefault(), n.stopPropagation(), r.startResize(r.stroke.id, e, t, n);
 		}
-		return (n, r) => t.stroke ? (_(), a("g", mn, [
+		return (n, r) => t.stroke ? (_(), a("g", gn, [
 			o("rect", {
 				x: c.value.x,
 				y: c.value.y,
@@ -1824,7 +1843,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 				"stroke-width": "2",
 				"stroke-dasharray": "6 4",
 				rx: "4"
-			}, null, 8, hn),
+			}, null, 8, _n),
 			(_(!0), a(e, null, x(u.value, (e) => D((_(), a("rect", {
 				key: e.name,
 				x: e.cx - $ / 2,
@@ -1838,7 +1857,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 				style: m({ cursor: e.cursor }),
 				onMousedown: O((t) => p(e.name, e.cursor, t), ["stop", "prevent"]),
 				onTouchstart: O((t) => p(e.name, e.cursor, t), ["stop", "prevent"])
-			}, null, 44, gn)), [[T, l.value]])), 128)),
+			}, null, 44, vn)), [[T, l.value]])), 128)),
 			(_(!0), a(e, null, x(f.value, (e) => D((_(), a("rect", {
 				key: e.name,
 				x: e.cx - $ / 2,
@@ -1852,39 +1871,39 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 				style: m({ cursor: e.cursor }),
 				onMousedown: O((t) => p(e.name, e.cursor, t), ["stop", "prevent"]),
 				onTouchstart: O((t) => p(e.name, e.cursor, t), ["stop", "prevent"])
-			}, null, 44, _n)), [[T, !l.value]])), 128))
+			}, null, 44, yn)), [[T, !l.value]])), 128))
 		])) : i("", !0);
 	}
-}), bn = ["viewBox"], xn = [
+}), Sn = ["viewBox"], Cn = [
 	"width",
 	"height",
 	"fill"
-], Sn = [
+], wn = [
 	"width",
 	"height",
 	"fill"
-], Cn = [
+], Tn = [
 	"width",
 	"height",
 	"stroke"
-], wn = { class: "strokes-layer" }, Tn = [
+], En = { class: "strokes-layer" }, Dn = [
 	"x",
 	"y",
 	"width"
-], En = ["contenteditable", "onDblclick"], Dn = [
+], On = ["contenteditable", "onDblclick"], kn = [
 	"x",
 	"y",
 	"width",
 	"height"
-], On = [
+], An = [
 	"x",
 	"y",
 	"width",
 	"height"
-], kn = ["disabled", "title"], An = ["disabled", "title"], jn = ["title"], Mn = ["title"], Nn = ["title"], Pn = ["title"], Fn = { class: "zoom-percent" }, In = ["title"], Ln = { class: "font-size-value" }, Rn = ["title"], zn = ["title"], Bn = ["title"], Vn = /*#__PURE__*/ en(/* @__PURE__ */ l({
+], jn = ["disabled", "title"], Mn = ["disabled", "title"], Nn = ["title"], Pn = ["title"], Fn = ["title"], In = ["title"], Ln = { class: "zoom-percent" }, Rn = ["title"], zn = { class: "font-size-value" }, Bn = ["title"], Vn = ["title"], Hn = ["title"], Un = /*#__PURE__*/ nn(/* @__PURE__ */ l({
 	__name: "Whiteboard",
 	setup(t) {
-		let c = st(), l = ft(), { t: u } = ie(), d = b(null), { isDrawing: v, previewStroke: y, onMouseDown: S, onMouseMove: ee, onMouseUp: T, onTouchStart: D, onTouchMove: te, onTouchEnd: ne, updateModifiers: re, clearModifiers: k, isResizing: A, resizeCursor: j, startResize: M, commitTextEdit: ae, cancelTextEdit: oe, startEditText: se, saveCurrentTextEdit: ce, setTextContentGetter: le } = un(d);
+		let c = lt(), l = mt(), { t: u } = ie(), d = b(null), { isDrawing: v, previewStroke: y, onMouseDown: S, onMouseMove: ee, onMouseUp: T, onTouchStart: D, onTouchMove: te, onTouchEnd: ne, updateModifiers: re, clearModifiers: k, isResizing: A, resizeCursor: j, startResize: M, commitTextEdit: ae, cancelTextEdit: oe, startEditText: se, saveCurrentTextEdit: ce, setTextContentGetter: le } = fn(d);
 		le(() => {
 			let e = c.editingTextId;
 			if (!e) return null;
@@ -1921,73 +1940,73 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 				}
 			});
 		});
-		function R(e) {
+		function de(e) {
 			(l.activeTool === "text" || l.activeTool === "select") && se(e);
 		}
-		function z() {
+		function R() {
 			c.hoveredTextId = null;
 		}
-		function B() {
+		function z() {
 			let e = d.value?.parentElement;
 			e && c.zoomAt(e.clientWidth / 2, e.clientHeight / 2, 1.1);
 		}
-		function V() {
+		function B() {
 			let e = d.value?.parentElement;
 			e && c.zoomAt(e.clientWidth / 2, e.clientHeight / 2, .9);
 		}
-		function H(e) {
+		function V(e) {
 			let t = e.ctrlKey || e.metaKey;
 			c.editingTextId || ((v.value || A.value) && re(e), e.key === "Delete" || e.key === "Backspace" ? c.deleteSelectedStrokes() : e.key === "Escape" ? c.clearSelection() : t && e.key === "z" && !e.shiftKey ? (e.preventDefault(), c.undo()) : t && (e.key === "y" || e.shiftKey && e.key === "z") ? (e.preventDefault(), c.redo()) : t && e.key === "x" ? (e.preventDefault(), c.cutSelectedStrokes()) : t && e.key === "c" ? (e.preventDefault(), c.copySelectedStrokes()) : t && e.key === "v" && (e.preventDefault(), c.pasteStrokes()));
 		}
-		function U(e) {
+		function H(e) {
 			(v.value || A.value) && re(e);
 		}
-		function W() {
+		function U() {
 			k();
 		}
-		let G = b(0), K = b(1), q = b(0), J = b(0);
-		function Y(e) {
+		let W = b(0), fe = b(1), G = b(0), K = b(0);
+		function q(e) {
 			let t = e[0].clientX - e[1].clientX, n = e[0].clientY - e[1].clientY;
 			return Math.hypot(t, n);
 		}
-		function X(e) {
-			l.activeTool === "zoom" && e.touches.length === 2 && (G.value = Y(e.touches), K.value = c.zoomLevel, q.value = (e.touches[0].clientX + e.touches[1].clientX) / 2, J.value = (e.touches[0].clientY + e.touches[1].clientY) / 2);
+		function J(e) {
+			l.activeTool === "zoom" && e.touches.length === 2 && (W.value = q(e.touches), fe.value = c.zoomLevel, G.value = (e.touches[0].clientX + e.touches[1].clientX) / 2, K.value = (e.touches[0].clientY + e.touches[1].clientY) / 2);
 		}
-		function de(e) {
-			if (l.activeTool === "zoom" && e.touches.length === 2 && G.value > 0) {
-				let t = Y(e.touches) / G.value, n = K.value * t, r = d.value;
+		function Y(e) {
+			if (l.activeTool === "zoom" && e.touches.length === 2 && W.value > 0) {
+				let t = q(e.touches) / W.value, n = fe.value * t, r = d.value;
 				if (r) {
 					let e = r.getBoundingClientRect();
-					c.continuousZoomAt(q.value - e.left, J.value - e.top, n);
+					c.continuousZoomAt(G.value - e.left, K.value - e.top, n);
 				}
 			}
 		}
-		function Z(e) {
-			l.activeTool === "zoom" && e.touches.length < 2 && (G.value = 0);
+		function X(e) {
+			l.activeTool === "zoom" && e.touches.length < 2 && (W.value = 0);
 		}
-		let fe = null;
-		function pe() {
+		let Z = null;
+		function Q() {
 			let e = d.value?.parentElement;
 			if (!e) return;
 			let t = c.canvasWidth * c.zoomLevel, n = c.canvasHeight * c.zoomLevel, r = e.clientWidth, i = e.clientHeight;
 			r > 0 && i > 0 && c.setPan((r - t) / 2, (i - n) / 2);
 		}
-		function me(e) {
+		function pe(e) {
 			let t = I.value;
 			if (!t) return;
 			let n = t.fontSize ?? 16, r = Math.max(8, Math.min(200, n + e));
 			c.pushUndo(), c.updateStroke(t.id, { fontSize: r }), c.dataVersion++;
 		}
-		function he(e) {
+		function me(e) {
 			let t = I.value;
 			t && (c.pushUndo(), c.updateStroke(t.id, { textAlign: e }), c.dataVersion++);
 		}
-		function ge(e) {
+		function he(e) {
 			return (t) => {
-				t ? (P.value.set(e, t), f(() => _e(e, t))) : P.value.delete(e);
+				t ? (P.value.set(e, t), f(() => ge(e, t))) : P.value.delete(e);
 			};
 		}
-		function _e(e, t) {
+		function ge(e, t) {
 			let n = c.strokes.find((t) => t.id === e);
 			if (!n) return;
 			let r = Math.max(t.scrollWidth / c.zoomLevel, n.fontSize ?? 16), i = Math.max(t.scrollHeight / c.zoomLevel, n.fontSize ?? 16);
@@ -2007,11 +2026,11 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 			}
 		}
 		return h(() => {
-			window.addEventListener("keydown", H), window.addEventListener("keydown", L), window.addEventListener("keyup", U), window.addEventListener("blur", W), pe(), fe = new ResizeObserver(() => pe());
+			window.addEventListener("keydown", V), window.addEventListener("keydown", L), window.addEventListener("keyup", H), window.addEventListener("blur", U), Q(), Z = new ResizeObserver(() => Q());
 			let e = d.value?.parentElement;
-			e && fe.observe(e);
+			e && Z.observe(e);
 		}), g(() => {
-			window.removeEventListener("keydown", H), window.removeEventListener("keydown", L), window.removeEventListener("keyup", U), window.removeEventListener("blur", W), fe?.disconnect();
+			window.removeEventListener("keydown", V), window.removeEventListener("keydown", L), window.removeEventListener("keyup", H), window.removeEventListener("blur", U), Z?.disconnect();
 		}), (t, n) => (_(), a("div", {
 			class: "whiteboard",
 			onContextmenu: n[23] ||= O(() => {}, ["prevent"]),
@@ -2019,13 +2038,13 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 			onMousemove: n[25] ||= (...e) => w(ee) && w(ee)(...e),
 			onMouseup: n[26] ||= (...e) => w(T) && w(T)(...e),
 			onTouchstart: n[27] ||= O((e) => {
-				w(D)(e), X(e);
+				w(D)(e), J(e);
 			}, ["prevent"]),
 			onTouchmove: n[28] ||= O((e) => {
-				w(te)(e), de(e);
+				w(te)(e), Y(e);
 			}, ["prevent"]),
 			onTouchend: n[29] ||= (e) => {
-				w(ne)(e), Z(e);
+				w(ne)(e), X(e);
 			}
 		}, [
 			o("div", {
@@ -2044,7 +2063,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 				width: "100%",
 				height: "100%",
 				style: m({ cursor: ue.value }),
-				onMouseleave: z
+				onMouseleave: R
 			}, [
 				n[30] ||= s("<defs data-v-975e0b8b><pattern id=\"grid-light\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\" data-v-975e0b8b><rect width=\"16\" height=\"16\" fill=\"#ffffff\" data-v-975e0b8b></rect><rect width=\"8\" height=\"8\" fill=\"#f0f0f0\" data-v-975e0b8b></rect><rect x=\"8\" y=\"8\" width=\"8\" height=\"8\" fill=\"#f0f0f0\" data-v-975e0b8b></rect></pattern><pattern id=\"grid-dark\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\" data-v-975e0b8b><rect width=\"16\" height=\"16\" fill=\"#1e1e30\" data-v-975e0b8b></rect><rect width=\"8\" height=\"8\" fill=\"#2a2a3e\" data-v-975e0b8b></rect><rect x=\"8\" y=\"8\" width=\"8\" height=\"8\" fill=\"#2a2a3e\" data-v-975e0b8b></rect></pattern></defs>", 1),
 				w(c).canvasBackgroundColor === "transparent" ? (_(), a("rect", {
@@ -2054,14 +2073,14 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					width: w(c).canvasWidth,
 					height: w(c).canvasHeight,
 					fill: w(c).theme === "dark" ? "url(#grid-dark)" : "url(#grid-light)"
-				}, null, 8, xn)) : (_(), a("rect", {
+				}, null, 8, Cn)) : (_(), a("rect", {
 					key: 1,
 					x: "0",
 					y: "0",
 					width: w(c).canvasWidth,
 					height: w(c).canvasHeight,
 					fill: w(c).canvasBackgroundColor
-				}, null, 8, Sn)),
+				}, null, 8, wn)),
 				o("rect", {
 					x: "0",
 					y: "0",
@@ -2070,8 +2089,8 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					fill: "none",
 					stroke: w(c).theme === "dark" ? "#4a4a5a" : "#c0c0c0",
 					"stroke-width": "2"
-				}, null, 8, Cn),
-				o("g", wn, [(_(!0), a(e, null, x(w(c).strokes, (t) => (_(), a(e, { key: t.id }, [t.type === "text" ? (_(), a("foreignObject", {
+				}, null, 8, Tn),
+				o("g", En, [(_(!0), a(e, null, x(w(c).strokes, (t) => (_(), a(e, { key: t.id }, [t.type === "text" ? (_(), a("foreignObject", {
 					key: 0,
 					x: t.x,
 					y: t.y,
@@ -2083,7 +2102,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					}
 				}, [o("div", {
 					ref_for: !0,
-					ref: ge(t.id),
+					ref: he(t.id),
 					xmlns: "http://www.w3.org/1999/xhtml",
 					contenteditable: w(c).editingTextId === t.id,
 					style: m({
@@ -2103,18 +2122,18 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 						display: "inline-block",
 						maxWidth: t.textAutoWidth ? "none" : "100%"
 					}),
-					onDblclick: O((e) => R(t.id), ["stop"])
-				}, C(t.text || ""), 45, En)], 8, Tn)) : (_(), r(pn, {
+					onDblclick: O((e) => de(t.id), ["stop"])
+				}, C(t.text || ""), 45, On)], 8, Dn)) : (_(), r(hn, {
 					key: 1,
 					stroke: t,
 					"is-selected": w(c).isSelected(t.id)
 				}, null, 8, ["stroke", "is-selected"]))], 64))), 128))]),
-				w(y) ? (_(), r(pn, {
+				w(y) ? (_(), r(hn, {
 					key: 2,
 					stroke: w(y),
 					"is-selected": !1
 				}, null, 8, ["stroke"])) : i("", !0),
-				(_(!0), a(e, null, x(w(c).selectedStrokes, (e) => (_(), r(yn, {
+				(_(!0), a(e, null, x(w(c).selectedStrokes, (e) => (_(), r(xn, {
 					key: "sel-" + e.id,
 					stroke: e,
 					"start-resize": w(M)
@@ -2129,7 +2148,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					stroke: "#6366f1",
 					"stroke-width": "1",
 					"stroke-dasharray": "6 4"
-				}, null, 8, Dn)) : i("", !0),
+				}, null, 8, kn)) : i("", !0),
 				F.value ? (_(), a("rect", {
 					key: 4,
 					x: F.value.x - 4,
@@ -2141,8 +2160,8 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					"stroke-width": "1",
 					"stroke-dasharray": "4 3",
 					"pointer-events": "none"
-				}, null, 8, On)) : i("", !0)
-			], 44, bn))], 4),
+				}, null, 8, An)) : i("", !0)
+			], 44, Sn))], 4),
 			o("div", {
 				class: "canvas-toolbar",
 				onMousedown: n[5] ||= O(() => {}, ["stop"]),
@@ -2166,7 +2185,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [o("path", { d: "M3 10h10a5 5 0 0 1 0 10H9" }), o("polyline", { points: "7 6 3 10 7 14" })], -1)]], 8, kn),
+				}, [o("path", { d: "M3 10h10a5 5 0 0 1 0 10H9" }), o("polyline", { points: "7 6 3 10 7 14" })], -1)]], 8, jn),
 				o("button", {
 					class: "canvas-tb-btn",
 					disabled: !w(c).canRedo,
@@ -2181,7 +2200,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [o("path", { d: "M21 10H11a5 5 0 0 0 0 10h4" }), o("polyline", { points: "17 6 21 10 17 14" })], -1)]], 8, An),
+				}, [o("path", { d: "M21 10H11a5 5 0 0 0 0 10h4" }), o("polyline", { points: "17 6 21 10 17 14" })], -1)]], 8, Mn),
 				w(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
 					key: 0,
 					class: "canvas-tb-btn",
@@ -2196,7 +2215,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [o("path", { d: "m18 15-6-6-6 6" })], -1)]], 8, jn)) : i("", !0),
+				}, [o("path", { d: "m18 15-6-6-6 6" })], -1)]], 8, Nn)) : i("", !0),
 				w(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
 					key: 1,
 					class: "canvas-tb-btn",
@@ -2211,13 +2230,13 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [o("path", { d: "m6 9 6 6 6-6" })], -1)]], 8, Mn)) : i("", !0),
+				}, [o("path", { d: "m6 9 6 6 6-6" })], -1)]], 8, Pn)) : i("", !0),
 				w(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
 					key: 2,
 					class: "canvas-tb-btn canvas-tb-btn--danger",
 					title: w(u)("toolbar.delete"),
 					onClick: n[4] ||= (e) => w(c).deleteSelectedStrokes()
-				}, [...n[35] ||= [s("<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><polyline points=\"3 6 5 6 21 6\" data-v-975e0b8b></polyline><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\" data-v-975e0b8b></path><path d=\"M10 11v6\" data-v-975e0b8b></path><path d=\"M14 11v6\" data-v-975e0b8b></path><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\" data-v-975e0b8b></path></svg>", 1)]], 8, Nn)) : i("", !0)
+				}, [...n[35] ||= [s("<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><polyline points=\"3 6 5 6 21 6\" data-v-975e0b8b></polyline><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\" data-v-975e0b8b></path><path d=\"M10 11v6\" data-v-975e0b8b></path><path d=\"M14 11v6\" data-v-975e0b8b></path><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\" data-v-975e0b8b></path></svg>", 1)]], 8, Fn)) : i("", !0)
 			], 32),
 			N.value || w(c).showZoomIndicator ? (_(), a("div", {
 				key: 0,
@@ -2228,8 +2247,8 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					key: 0,
 					class: "zoom-btn",
 					title: w(u)("zoom.zoomOut"),
-					onMousedown: O(V, ["stop", "prevent"]),
-					onTouchstart: O(V, ["stop", "prevent"])
+					onMousedown: O(B, ["stop", "prevent"]),
+					onTouchstart: O(B, ["stop", "prevent"])
 				}, [...n[36] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2243,14 +2262,14 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					y1: "12",
 					x2: "19",
 					y2: "12"
-				})], -1)]], 40, Pn)) : i("", !0),
-				o("span", Fn, C(w(c).getZoomPercent()) + "%", 1),
+				})], -1)]], 40, In)) : i("", !0),
+				o("span", Ln, C(w(c).getZoomPercent()) + "%", 1),
 				N.value ? (_(), a("button", {
 					key: 1,
 					class: "zoom-btn",
 					title: w(u)("zoom.zoomIn"),
-					onMousedown: O(B, ["stop", "prevent"]),
-					onTouchstart: O(B, ["stop", "prevent"])
+					onMousedown: O(z, ["stop", "prevent"]),
+					onTouchstart: O(z, ["stop", "prevent"])
 				}, [...n[37] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2269,7 +2288,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					y1: "12",
 					x2: "19",
 					y2: "12"
-				})], -1)]], 40, In)) : i("", !0)
+				})], -1)]], 40, Rn)) : i("", !0)
 			], 32)) : i("", !0),
 			I.value ? (_(), a("div", {
 				key: 1,
@@ -2278,8 +2297,8 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 			}, [
 				o("button", {
 					class: "font-size-btn",
-					onMousedown: n[12] ||= O((e) => me(-1), ["stop", "prevent"]),
-					onTouchstart: n[13] ||= O((e) => me(-1), ["stop", "prevent"])
+					onMousedown: n[12] ||= O((e) => pe(-1), ["stop", "prevent"]),
+					onTouchstart: n[13] ||= O((e) => pe(-1), ["stop", "prevent"])
 				}, [...n[38] ||= [o("svg", {
 					width: "12",
 					height: "12",
@@ -2294,11 +2313,11 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 					x2: "19",
 					y2: "12"
 				})], -1)]], 32),
-				o("span", Ln, C(I.value.fontSize ?? w(16)), 1),
+				o("span", zn, C(I.value.fontSize ?? w(16)), 1),
 				o("button", {
 					class: "font-size-btn",
-					onMousedown: n[14] ||= O((e) => me(1), ["stop", "prevent"]),
-					onTouchstart: n[15] ||= O((e) => me(1), ["stop", "prevent"])
+					onMousedown: n[14] ||= O((e) => pe(1), ["stop", "prevent"]),
+					onTouchstart: n[15] ||= O((e) => pe(1), ["stop", "prevent"])
 				}, [...n[39] ||= [o("svg", {
 					width: "12",
 					height: "12",
@@ -2322,25 +2341,25 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 				o("button", {
 					class: p(["text-align-btn", { active: I.value.textAlign === "left" || !I.value.textAlign }]),
 					title: w(u)("textAlign.left"),
-					onMousedown: n[16] ||= O((e) => he("left"), ["stop", "prevent"]),
-					onTouchstart: n[17] ||= O((e) => he("left"), ["stop", "prevent"])
-				}, [...n[40] ||= [s("<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" data-v-975e0b8b></line><line x1=\"3\" y1=\"10\" x2=\"17\" y2=\"10\" data-v-975e0b8b></line><line x1=\"3\" y1=\"14\" x2=\"21\" y2=\"14\" data-v-975e0b8b></line><line x1=\"3\" y1=\"18\" x2=\"15\" y2=\"18\" data-v-975e0b8b></line></svg>", 1)]], 42, Rn),
+					onMousedown: n[16] ||= O((e) => me("left"), ["stop", "prevent"]),
+					onTouchstart: n[17] ||= O((e) => me("left"), ["stop", "prevent"])
+				}, [...n[40] ||= [s("<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" data-v-975e0b8b></line><line x1=\"3\" y1=\"10\" x2=\"17\" y2=\"10\" data-v-975e0b8b></line><line x1=\"3\" y1=\"14\" x2=\"21\" y2=\"14\" data-v-975e0b8b></line><line x1=\"3\" y1=\"18\" x2=\"15\" y2=\"18\" data-v-975e0b8b></line></svg>", 1)]], 42, Bn),
 				o("button", {
 					class: p(["text-align-btn", { active: I.value.textAlign === "center" }]),
 					title: w(u)("textAlign.center"),
-					onMousedown: n[18] ||= O((e) => he("center"), ["stop", "prevent"]),
-					onTouchstart: n[19] ||= O((e) => he("center"), ["stop", "prevent"])
-				}, [...n[41] ||= [s("<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" data-v-975e0b8b></line><line x1=\"5\" y1=\"10\" x2=\"19\" y2=\"10\" data-v-975e0b8b></line><line x1=\"3\" y1=\"14\" x2=\"21\" y2=\"14\" data-v-975e0b8b></line><line x1=\"7\" y1=\"18\" x2=\"17\" y2=\"18\" data-v-975e0b8b></line></svg>", 1)]], 42, zn),
+					onMousedown: n[18] ||= O((e) => me("center"), ["stop", "prevent"]),
+					onTouchstart: n[19] ||= O((e) => me("center"), ["stop", "prevent"])
+				}, [...n[41] ||= [s("<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" data-v-975e0b8b></line><line x1=\"5\" y1=\"10\" x2=\"19\" y2=\"10\" data-v-975e0b8b></line><line x1=\"3\" y1=\"14\" x2=\"21\" y2=\"14\" data-v-975e0b8b></line><line x1=\"7\" y1=\"18\" x2=\"17\" y2=\"18\" data-v-975e0b8b></line></svg>", 1)]], 42, Vn),
 				o("button", {
 					class: p(["text-align-btn", { active: I.value.textAlign === "right" }]),
 					title: w(u)("textAlign.right"),
-					onMousedown: n[20] ||= O((e) => he("right"), ["stop", "prevent"]),
-					onTouchstart: n[21] ||= O((e) => he("right"), ["stop", "prevent"])
-				}, [...n[42] ||= [s("<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" data-v-975e0b8b></line><line x1=\"7\" y1=\"10\" x2=\"21\" y2=\"10\" data-v-975e0b8b></line><line x1=\"3\" y1=\"14\" x2=\"21\" y2=\"14\" data-v-975e0b8b></line><line x1=\"9\" y1=\"18\" x2=\"21\" y2=\"18\" data-v-975e0b8b></line></svg>", 1)]], 42, Bn)
+					onMousedown: n[20] ||= O((e) => me("right"), ["stop", "prevent"]),
+					onTouchstart: n[21] ||= O((e) => me("right"), ["stop", "prevent"])
+				}, [...n[42] ||= [s("<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" data-v-975e0b8b><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" data-v-975e0b8b></line><line x1=\"7\" y1=\"10\" x2=\"21\" y2=\"10\" data-v-975e0b8b></line><line x1=\"3\" y1=\"14\" x2=\"21\" y2=\"14\" data-v-975e0b8b></line><line x1=\"9\" y1=\"18\" x2=\"21\" y2=\"18\" data-v-975e0b8b></line></svg>", 1)]], 42, Hn)
 			], 32)) : i("", !0)
 		], 32));
 	}
-}), [["__scopeId", "data-v-975e0b8b"]]), Hn = { class: "palette-header" }, Un = { class: "palette-title" }, Wn = { class: "current-color" }, Gn = {
+}), [["__scopeId", "data-v-975e0b8b"]]), Wn = { class: "palette-header" }, Gn = { class: "palette-title" }, Kn = { class: "current-color" }, qn = {
 	key: 0,
 	width: "14",
 	height: "14",
@@ -2349,13 +2368,13 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Kn = { class: "preset-grid" }, qn = ["title", "onClick"], Jn = {
+}, Jn = { class: "preset-grid" }, Yn = ["title", "onClick"], Xn = {
 	key: 0,
 	class: "transparent-row"
-}, Yn = { class: "palette-footer" }, Xn = { class: "custom-color" }, Zn = ["value"], Qn = { class: "custom-label" }, $n = /*#__PURE__*/ en(/* @__PURE__ */ l({
+}, Zn = { class: "palette-footer" }, Qn = { class: "custom-color" }, $n = ["value"], er = { class: "custom-label" }, tr = /*#__PURE__*/ nn(/* @__PURE__ */ l({
 	__name: "ColorPalette",
 	setup(s) {
-		let c = st(), { t: l } = ie(), u = ae(), d = n(() => {
+		let c = lt(), { t: l } = ie(), u = ae(), d = n(() => {
 			if (!u?.value) return {};
 			let e = u.value.getBoundingClientRect();
 			return {
@@ -2408,26 +2427,26 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 			style: m(d.value),
 			onClick: s[0] ||= O(() => {}, ["stop"])
 		}, [
-			o("div", Hn, [o("span", Un, C(w(c).activeColorSlot === "textColor" ? w(l)("color.textColor") : w(c).activeColorSlot === "foreground" ? w(l)("palette.stroke") : w(l)("palette.fill")), 1), o("div", Wn, [o("div", {
+			o("div", Wn, [o("span", Gn, C(w(c).activeColorSlot === "textColor" ? w(l)("color.textColor") : w(c).activeColorSlot === "foreground" ? w(l)("palette.stroke") : w(l)("palette.fill")), 1), o("div", Kn, [o("div", {
 				class: p(["current-swatch", {
 					fill: w(c).activeColorSlot === "background",
 					"current-transparent": w(c).activeColorSlot === "background" && w(c).backgroundColor === "transparent"
 				}]),
 				style: m({ background: w(c).activeColorSlot === "textColor" ? w(c).textColor : w(c).activeColorSlot === "foreground" ? w(c).foregroundColor : w(c).backgroundColor === "transparent" ? "none" : w(c).backgroundColor })
-			}, [w(c).activeColorSlot === "background" && w(c).backgroundColor === "transparent" ? (_(), a("svg", Gn, [...s[2] ||= [o("line", {
+			}, [w(c).activeColorSlot === "background" && w(c).backgroundColor === "transparent" ? (_(), a("svg", qn, [...s[2] ||= [o("line", {
 				x1: "5",
 				y1: "5",
 				x2: "19",
 				y2: "19"
 			}, null, -1)]])) : i("", !0)], 6)])]),
-			o("div", Kn, [(_(), a(e, null, x(f, (e) => o("button", {
+			o("div", Jn, [(_(), a(e, null, x(f, (e) => o("button", {
 				key: e,
 				class: "color-swatch",
 				style: m({ background: e }),
 				title: e,
 				onClick: (t) => g(e)
-			}, null, 12, qn)), 64))]),
-			w(c).activeColorSlot === "background" ? (_(), a("div", Jn, [o("button", {
+			}, null, 12, Yn)), 64))]),
+			w(c).activeColorSlot === "background" ? (_(), a("div", Xn, [o("button", {
 				class: "color-swatch transparent-swatch",
 				title: "透明（无填充）",
 				onClick: v
@@ -2445,15 +2464,15 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 				x2: "19",
 				y2: "19"
 			})], -1)]])])) : i("", !0),
-			o("div", Yn, [o("div", Xn, [o("input", {
+			o("div", Zn, [o("div", Qn, [o("input", {
 				type: "color",
 				value: w(c).activeColorSlot === "textColor" ? w(c).textColor : w(c).activeColorSlot === "foreground" ? w(c).foregroundColor : w(c).backgroundColor === "transparent" ? "#ffffff" : w(c).backgroundColor,
 				class: "color-picker",
 				onChange: h
-			}, null, 40, Zn), o("span", Qn, C(w(l)("palette.custom")), 1)])])
+			}, null, 40, $n), o("span", er, C(w(l)("palette.custom")), 1)])])
 		], 4)])) : i("", !0)]));
 	}
-}), [["__scopeId", "data-v-a8b8bc9c"]]), er = /*#__PURE__*/ en(/* @__PURE__ */ l({
+}), [["__scopeId", "data-v-a8b8bc9c"]]), nr = /*#__PURE__*/ nn(/* @__PURE__ */ l({
 	__name: "Painter",
 	props: {
 		theme: { default: "light" },
@@ -2478,7 +2497,7 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 		A(o.value);
 		let l = b(null);
 		M(l);
-		let u = st(), d = ft();
+		let u = lt(), d = mt();
 		u.reset(), d.reset();
 		let f = !1;
 		function h(e) {
@@ -2519,11 +2538,11 @@ var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 			class: p(["wb-root", g.value]),
 			style: m(s.value)
 		}, [
-			c(tn),
-			c(Vn),
-			c($n)
+			c(rn),
+			c(Un),
+			c(tr)
 		], 6));
 	}
-}), [["__scopeId", "data-v-40d42bb5"]]);
+}), [["__scopeId", "data-v-18ed1ca7"]]);
 //#endregion
-export { se as DEFAULT_CANVAS_HEIGHT, oe as DEFAULT_CANVAS_WIDTH, le as DEFAULT_FONT_SIZE, ue as HIT_THRESHOLD, er as Painter, er as default, ce as STROKE_WIDTH };
+export { se as DEFAULT_CANVAS_HEIGHT, oe as DEFAULT_CANVAS_WIDTH, le as DEFAULT_FONT_SIZE, ue as HIT_THRESHOLD, nr as Painter, nr as default, ce as STROKE_WIDTH };