xiaodao-painter 0.1.6 → 0.1.8

package/dist/xiaodao-painter.es.js

@@ -1,7 +1,6 @@
-import { Fragment as e, Teleport as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createStaticVNode as s, createVNode as c, defineComponent as l, inject as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onMounted as h, onUnmounted as g, openBlock as _, provide as v, ref as y, renderList as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, vModelText as w, vShow as T, watch as E, withDirectives as D, withKeys as O, withModifiers as k } from "vue";
-import { defineStore as A } from "pinia";
+import { Fragment as e, Teleport as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createStaticVNode as s, createVNode as c, defineComponent as l, inject as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onMounted as h, onUnmounted as g, openBlock as _, provide as v, reactive as y, ref as b, renderList as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, vModelText as ee, vShow as T, watch as E, withDirectives as D, withKeys as te, withModifiers as O } from "vue";
 //#region src/components/painter/utils/i18n.ts
-var j = {
+var ne = {
 	"zh-CN": {
 		"tool.select": "选择",
 		"tool.pencil": "铅笔",
@@ -77,380 +76,388 @@ var j = {
 		"textAlign.right": "Align Right"
 	}
 };
-function M(e, t) {
-	return j[e]?.[t] ?? t;
+function re(e, t) {
+	return ne[e]?.[t] ?? t;
 }
 //#endregion
 //#region src/components/painter/composables/useI18n.ts
-var N = Symbol("wb-locale");
-function P(e) {
-	v(N, e);
+var k = Symbol("wb-locale");
+function A(e) {
+	v(k, e);
 }
-function ee() {
-	let e = u(N, "zh-CN");
+function ie() {
+	let e = u(k, "zh-CN");
 	return {
 		locale: e,
-		t: (t) => M(e, t)
+		t: (t) => re(e, t)
 	};
 }
-var F = Symbol("wb-root-el");
-function I(e) {
-	v(F, e);
+var j = Symbol("wb-root-el");
+function M(e) {
+	v(j, e);
 }
-function L() {
-	return u(F, null);
+function ae() {
+	return u(j, null);
 }
 //#endregion
 //#region src/components/painter/types/index.ts
-var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
-	let e = y([]), t = y(/* @__PURE__ */ new Set()), r = y("#000000"), i = y("transparent"), a = y("foreground"), o = y(!1), s = y(3), c = y("transparent"), l = y("light"), u = y(0), d = y("#000000"), f = y(null), p = y(null), m = y(800), h = y(600), g = y(0), _ = y(0), v = y(1), b = y(!1), x = null, S = n(() => `0 0 ${m.value} ${h.value}`), C = n(() => `translate(${g.value}px, ${_.value}px) scale(${v.value})`);
-	function w(e, t) {
-		g.value = e, _.value = t;
-	}
-	function T(e, t) {
-		m.value = e, h.value = t, u.value++;
-	}
-	let E = [
-		.1,
-		.25,
-		.33,
-		.5,
-		.67,
-		.75,
-		1,
-		1.25,
-		1.5,
-		2,
-		3,
-		4,
-		5,
-		6,
-		8,
-		10
-	];
-	function D(e, t, n) {
-		let r = v.value, i = n > 1, a = null;
-		for (let e of E) if (i) {
-			if (e > r + .001) {
-				a = e;
-				break;
-			}
-		} else e < r - .001 && (a = e);
-		if (a === null) return;
-		let o = (e - g.value) / r, s = (t - _.value) / r;
-		g.value = e - o * a, _.value = t - s * a, v.value = a, b.value = !0, x && clearTimeout(x), x = setTimeout(() => {
-			b.value = !1;
-		}, 1500);
-	}
-	function O(e, t, n) {
-		let r = E[0], i = E[E.length - 1];
-		n = Math.max(r, Math.min(i, n));
-		let a = v.value, o = (e - g.value) / a, s = (t - _.value) / a;
-		g.value = e - o * n, _.value = t - s * n, v.value = n, b.value = !0, x && clearTimeout(x), x = setTimeout(() => {
-			b.value = !1;
-		}, 1500);
-	}
-	function k() {
-		return Math.round(v.value * 100);
-	}
-	let A = y([]), j = y([]), M = y(!1), N = y(null);
-	function P(e) {
-		s.value = e;
-	}
-	function ee(e) {
-		c.value = e, u.value++;
-	}
-	function F() {
-		o.value = !o.value;
-	}
-	function I() {
-		o.value = !1;
-	}
-	let L = n(() => e.value.filter((e) => t.value.has(e.id))), te = n(() => {
-		let e = L.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;
-	}), R = n(() => {
-		let e = L.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;
-	}), ne = n(() => {
-		let e = L.value.filter((e) => e.type === "text");
-		if (e.length === 0) return null;
-		let t = e[0].textColor ?? r.value;
-		return e.every((e) => (e.textColor ?? r.value) === t) ? t : null;
-	}), z = n(() => {
-		let e = L.value;
-		return e.length === 1 ? e[0] : null;
-	}), re = n(() => z.value?.id ?? null);
-	function B(e) {
-		return t.value.has(e);
-	}
-	function ie(e) {
-		t.value = e ? /* @__PURE__ */ new Set([e]) : /* @__PURE__ */ new Set();
-	}
-	function V(e) {
-		t.value = new Set(e);
-	}
-	function H() {
-		t.value = /* @__PURE__ */ new Set();
-	}
-	function U(t) {
-		q(), e.value.push(t);
-	}
-	function W(t, n) {
-		let r = e.value.findIndex((e) => e.id === t);
-		if (r === -1) return;
-		let i = { ...n };
-		i.x !== void 0 && (i.x = Math.round(i.x)), i.y !== void 0 && (i.y = Math.round(i.y)), i.width !== void 0 && (i.width = Math.round(i.width)), i.height !== void 0 && (i.height = Math.round(i.height)), i.points &&= i.points.map((e) => ({
-			x: Math.round(e.x),
-			y: Math.round(e.y)
-		})), e.value[r] = {
-			...e.value[r],
-			...i
-		};
-	}
-	function ae() {
-		let n = t.value;
-		n.size !== 0 && (q(), e.value = e.value.filter((e) => !n.has(e.id)), t.value = /* @__PURE__ */ new Set());
-	}
-	let oe = n(() => A.value.length > 0), se = n(() => j.value.length > 0), G = y([]);
-	function ce() {
-		t.value.size !== 0 && (G.value = L.value.map((e) => K(e)), ae());
-	}
-	function le() {
-		t.value.size !== 0 && (G.value = L.value.map((e) => K(e)));
-	}
-	function ue() {
-		if (G.value.length === 0) return;
-		q(), H();
-		let t = [];
-		for (let n of G.value) {
-			let r = {
-				...K(n),
-				id: J(),
-				x: n.x + 20,
-				y: n.y + 20,
-				points: n.points.map((e) => ({
-					x: e.x + 20,
-					y: e.y + 20
-				}))
-			};
-			e.value.push(r), t.push(r.id);
-		}
-		V(t);
-	}
-	function K(e) {
-		return {
-			...e,
-			points: e.points.map((e) => ({ ...e }))
-		};
-	}
-	function q() {
-		A.value.push(e.value.map((e) => ({
-			...e,
-			points: e.points.map((e) => ({ ...e }))
-		}))), j.value = [];
-	}
-	function de() {
-		A.value.length !== 0 && (j.value.push(e.value.map((e) => ({
-			...e,
-			points: e.points.map((e) => ({ ...e }))
-		}))), e.value = A.value.pop(), t.value = /* @__PURE__ */ new Set());
-	}
-	function fe() {
-		j.value.length !== 0 && (A.value.push(e.value.map((e) => ({
-			...e,
-			points: e.points.map((e) => ({ ...e }))
-		}))), e.value = j.value.pop(), t.value = /* @__PURE__ */ new Set());
-	}
-	function pe() {
-		let n = t.value;
-		if (n.size === 0) return;
-		q();
-		let r = e.value.map((e, t) => n.has(e.id) ? t : -1).filter((e) => e >= 0).sort((e, t) => t - e);
-		for (let t of r) t < e.value.length - 1 && ([e.value[t], e.value[t + 1]] = [e.value[t + 1], e.value[t]]);
-	}
-	function me() {
-		let n = t.value;
-		if (n.size === 0) return;
-		q();
-		let r = e.value.map((e, t) => n.has(e.id) ? t : -1).filter((e) => e >= 0).sort((e, t) => e - t);
-		for (let t of r) t > 0 && ([e.value[t], e.value[t - 1]] = [e.value[t - 1], e.value[t]]);
-	}
-	let he = !1;
-	function ge(n) {
-		if (he) return;
-		he = !0, e.value = Array.isArray(n) ? n.map((e) => ({
-			...e,
-			points: e.points.map((e) => ({ ...e }))
-		})) : [];
-		let r = new Set(e.value.map((e) => e.id));
-		t.value = new Set([...t.value].filter((e) => r.has(e))), setTimeout(() => {
-			he = !1;
-		}, 0);
-	}
-	function _e(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,
-			y: i >= 0 ? n : n + i,
-			width: Math.abs(r),
-			height: Math.abs(i)
-		} : {
-			x: t,
-			y: n,
-			width: r,
-			height: i
-		};
-	}
-	function ve(e) {
-		a.value = e;
-	}
-	function ye(n) {
-		if (t.value.size > 0) {
-			q();
-			for (let r of t.value) {
-				let t = e.value.find((e) => e.id === r);
-				if (a.value === "foreground") {
-					if (n === "transparent" || t?.type === "text") continue;
-					W(r, { strokeColor: n });
-				} else if (a.value === "textColor") {
-					if (n === "transparent") return;
-					W(r, { textColor: n });
-				} else {
-					if (t?.type === "text") continue;
-					W(r, { fillColor: n });
-				}
-			}
-			u.value++;
-		} else if (a.value === "foreground") {
-			if (n === "transparent") return;
-			r.value = n;
-		} else if (a.value === "textColor") {
-			if (n === "transparent") return;
-			d.value = n;
-		} else i.value = n;
-	}
-	function J() {
-		return crypto.randomUUID();
-	}
-	function Y(e, t, n, a, o, c) {
-		return {
-			id: J(),
-			type: e,
-			x: Math.round(t),
-			y: Math.round(n),
-			width: Math.round(a),
-			height: Math.round(o),
-			points: c.map((e) => ({
-				x: Math.round(e.x),
-				y: Math.round(e.y)
-			})),
-			strokeColor: r.value,
-			fillColor: e === "pencil" || e === "line" ? "none" : i.value,
-			strokeWidth: s.value,
-			...e === "text" ? {
-				text: "",
-				fontSize: 16,
-				textAlign: "left",
-				textColor: r.value,
-				textAutoWidth: !0,
-				fillColor: "transparent",
-				strokeColor: "transparent",
-				width: 0,
-				height: 0
-			} : {}
+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;
+}
+function he(e, t) {
+	K.value = e, q.value = t, H.value++;
+}
+var ge = [
+	.1,
+	.25,
+	.33,
+	.5,
+	.67,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2,
+	3,
+	4,
+	5,
+	6,
+	8,
+	10
+];
+function _e(e, t, n) {
+	let r = X.value, i = n > 1, a = null;
+	for (let e of ge) if (i) {
+		if (e > r + .001) {
+			a = e;
+			break;
+		}
+	} 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;
+	}, 1500);
+}
+function ve(e, t, n) {
+	let r = ge[0], i = ge[ge.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;
+	}, 1500);
+}
+function ye() {
+	return Math.round(X.value * 100);
+}
+var be = b([]), xe = b([]), Se = b(!1), Ce = b(null);
+function we(e) {
+	z.value = e;
+}
+function Te(e) {
+	B.value = e, H.value++;
+}
+function Ee() {
+	R.value = !R.value;
+}
+function De() {
+	R.value = !1;
+}
+var Oe = n(() => N.value.filter((e) => P.value.has(e.id))), ke = n(() => {
+	let e = Oe.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");
+	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;
+	return e.length === 1 ? e[0] : null;
+}), Ne = n(() => Me.value?.id ?? null);
+function Pe(e) {
+	return P.value.has(e);
+}
+function Fe(e) {
+	P.value = e ? /* @__PURE__ */ new Set([e]) : /* @__PURE__ */ new Set();
+}
+function Ie(e) {
+	P.value = new Set(e);
+}
+function Le() {
+	P.value = /* @__PURE__ */ new Set();
+}
+function Re(e) {
+	Q(), N.value.push(e);
+}
+function ze(e, t) {
+	let n = N.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],
+		...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 Ge() {
+	P.value.size !== 0 && (Ue.value = Oe.value.map((e) => qe(e)));
+}
+function Ke() {
+	if (Ue.value.length === 0) return;
+	Q(), Le();
+	let e = [];
+	for (let t of Ue.value) {
+		let n = {
+			...qe(t),
+			id: rt(),
+			x: t.x + 20,
+			y: t.y + 20,
+			points: t.points.map((e) => ({
+				x: e.x + 20,
+				y: e.y + 20
+			}))
 		};
+		N.value.push(n), e.push(n.id);
 	}
-	function be() {
-		e.value = [], t.value = /* @__PURE__ */ new Set(), r.value = "#000000", i.value = "transparent", a.value = "foreground", o.value = !1, s.value = 3, c.value = "transparent", l.value = "light", u.value = 0, d.value = "#000000", f.value = null, p.value = null, m.value = 800, h.value = 600, g.value = 0, _.value = 0, v.value = 1, b.value = !1, x &&= (clearTimeout(x), null), A.value = [], j.value = [], M.value = !1, N.value = null, G.value = [];
-	}
+	Ie(e);
+}
+function qe(e) {
 	return {
-		strokes: e,
-		selectedStrokeIds: t,
-		selectedStrokeId: re,
-		selectedStroke: z,
-		selectedStrokes: L,
-		selectedStrokeColor: te,
-		selectedFillColor: R,
-		selectedTextColor: ne,
-		foregroundColor: r,
-		backgroundColor: i,
-		activeColorSlot: a,
-		showColorPalette: o,
-		isSelecting: M,
-		selectionBox: N,
-		toggleColorPalette: F,
-		hideColorPalette: I,
-		addStroke: U,
-		updateStroke: W,
-		selectStroke: ie,
-		selectStrokes: V,
-		clearSelection: H,
-		isSelected: B,
-		deleteSelectedStrokes: ae,
-		setColorSlot: ve,
-		setColor: ye,
-		buildStroke: Y,
-		strokeWidth: s,
-		setStrokeWidth: P,
-		canvasBackgroundColor: c,
-		setCanvasBackgroundColor: ee,
-		canUndo: oe,
-		canRedo: se,
-		undoStack: A,
-		pushUndo: q,
-		undo: de,
-		redo: fe,
-		moveSelectedUp: pe,
-		moveSelectedDown: me,
-		syncFromParent: ge,
-		getStrokeDisplayBounds: _e,
-		clipboard: G,
-		cutSelectedStrokes: ce,
-		copySelectedStrokes: le,
-		pasteStrokes: ue,
-		canvasWidth: m,
-		canvasHeight: h,
-		panX: g,
-		panY: _,
-		zoomLevel: v,
-		showZoomIndicator: b,
-		viewBox: S,
-		canvasTransform: C,
-		setPan: w,
-		setCanvasSize: T,
-		zoomAt: D,
-		continuousZoomAt: O,
-		getZoomPercent: k,
-		dataVersion: u,
-		theme: l,
-		textColor: d,
-		editingTextId: f,
-		hoveredTextId: p,
-		reset: be
+		...e,
+		points: e.points.map((e) => ({ ...e }))
 	};
-}), ie = A("tools", () => {
-	let e = y("select");
-	function t(t) {
-		if (e.value === "select" && t !== "select") {
-			let e = B();
-			e.selectedStrokeIds.size > 0 && e.clearSelection();
-		}
-		e.value = t;
-	}
-	function n() {
-		e.value = "select";
-	}
+}
+function Q() {
+	be.value.push(N.value.map((e) => ({
+		...e,
+		points: e.points.map((e) => ({ ...e }))
+	}))), xe.value = [];
+}
+function Je() {
+	be.value.length !== 0 && (xe.value.push(N.value.map((e) => ({
+		...e,
+		points: e.points.map((e) => ({ ...e }))
+	}))), N.value = be.value.pop(), P.value = /* @__PURE__ */ new Set());
+}
+function Ye() {
+	xe.value.length !== 0 && (be.value.push(N.value.map((e) => ({
+		...e,
+		points: e.points.map((e) => ({ ...e }))
+	}))), N.value = xe.value.pop(), P.value = /* @__PURE__ */ new Set());
+}
+function Xe() {
+	let e = P.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]]);
+}
+function Ze() {
+	let e = P.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]]);
+}
+var Qe = !1;
+function $e(e) {
+	if (Qe) return;
+	Qe = !0, N.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;
+	}, 0);
+}
+function et(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,
+		y: i >= 0 ? n : n + i,
+		width: Math.abs(r),
+		height: Math.abs(i)
+	} : {
+		x: t,
+		y: n,
+		width: r,
+		height: i
+	};
+}
+function tt(e) {
+	L.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") {
+				if (e === "transparent" || n?.type === "text") continue;
+				ze(t, { strokeColor: e });
+			} else if (L.value === "textColor") {
+				if (e === "transparent") return;
+				ze(t, { textColor: e });
+			} else {
+				if (n?.type === "text") continue;
+				ze(t, { fillColor: e });
+			}
+		}
+		H.value++;
+	} else if (L.value === "foreground") {
+		if (e === "transparent") return;
+		F.value = e;
+	} else if (L.value === "textColor") {
+		if (e === "transparent") return;
+		U.value = e;
+	} else I.value = e;
+}
+function rt() {
+	return crypto.randomUUID();
+}
+function it(e, t, n, r, i, a) {
 	return {
-		activeTool: e,
-		setTool: t,
-		reset: n
+		id: rt(),
+		type: e,
+		x: Math.round(t),
+		y: Math.round(n),
+		width: Math.round(r),
+		height: Math.round(i),
+		points: a.map((e) => ({
+			x: Math.round(e.x),
+			y: Math.round(e.y)
+		})),
+		strokeColor: F.value,
+		fillColor: e === "pencil" || e === "line" ? "none" : I.value,
+		strokeWidth: z.value,
+		...e === "text" ? {
+			text: "",
+			fontSize: 16,
+			textAlign: "left",
+			textColor: F.value,
+			textAutoWidth: !0,
+			fillColor: "transparent",
+			strokeColor: "transparent",
+			width: 0,
+			height: 0
+		} : {}
 	};
-}), V = { class: "toolbar" }, H = ["disabled"], U = { class: "tool-group" }, W = ["title", "onClick"], ae = {
+}
+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 = [];
+}
+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,
+	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,
+	hoveredTextId: G,
+	reset: at
+});
+function st() {
+	return ot;
+}
+//#endregion
+//#region src/components/painter/stores/tools.ts
+var ct = b("select");
+function lt(e) {
+	if (ct.value === "select" && e !== "select") {
+		let e = st();
+		e.selectedStrokeIds.size > 0 && e.clearSelection();
+	}
+	ct.value = e;
+}
+function ut() {
+	ct.value = "select";
+}
+var dt = y({
+	activeTool: ct,
+	setTool: lt,
+	reset: ut
+});
+function ft() {
+	return dt;
+}
+//#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 = {
 	key: 0,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -459,7 +466,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	"stroke-width": "1.6",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, oe = {
+}, vt = {
 	key: 1,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -467,7 +474,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linecap": "round"
-}, se = {
+}, yt = {
 	key: 2,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -476,7 +483,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	"stroke-width": "1.8",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, G = {
+}, bt = {
 	key: 3,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -484,14 +491,14 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linecap": "round"
-}, ce = {
+}, xt = {
 	key: 4,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	stroke: "currentColor",
 	"stroke-width": "1.8"
-}, le = {
+}, St = {
 	key: 5,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -499,7 +506,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linejoin": "round"
-}, ue = {
+}, Ct = {
 	key: 6,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -507,7 +514,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linejoin": "round"
-}, K = {
+}, wt = {
 	key: 7,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -515,7 +522,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "1.8",
 	"stroke-linejoin": "round"
-}, q = {
+}, Tt = {
 	key: 8,
 	class: "tool-icon",
 	viewBox: "0 0 24 24",
@@ -524,7 +531,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	"stroke-width": "1.8",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, de = { class: "tool-group nav-group" }, fe = ["title"], pe = ["disabled"], me = { class: "canvas-size-wrapper" }, he = ["title"], ge = { class: "popover-title" }, _e = { class: "popover-field" }, ve = { class: "popover-label" }, ye = { class: "popover-field" }, J = { class: "popover-label" }, Y = { class: "popover-field" }, be = { class: "popover-label" }, xe = { class: "bg-color-row" }, Se = ["title"], Ce = ["value"], we = ["title"], Te = { class: "popover-actions" }, Ee = { class: "color-section" }, De = ["title"], Oe = { class: "color-swatch text-color-swatch" }, ke = {
+}, 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 = {
 	key: 0,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -532,7 +539,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Ae = ["title"], je = {
+}, qt = ["title"], Jt = {
 	key: 0,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -540,7 +547,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Me = ["title"], Ne = {
+}, Yt = ["title"], Xt = {
 	key: 0,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -548,7 +555,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Pe = {
+}, Zt = {
 	key: 1,
 	class: "mixed-icon",
 	viewBox: "0 0 24 24",
@@ -556,35 +563,35 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Fe = 42, Ie = /*@__PURE__*/ l({
+}, Qt = 42, $t = /*@__PURE__*/ l({
 	__name: "Toolbar",
 	setup(c) {
-		let l = ie(), u = B(), { t: d } = ee(), f = L(), v = y(null), x = y(!1), T = y(!1);
-		function E() {
+		let l = ft(), u = st(), { t: d } = ie(), f = ae(), v = b(null), y = b(!1), S = b(!1);
+		function T() {
 			let e = v.value;
-			e && (x.value = e.scrollTop > 0, T.value = e.scrollTop + e.clientHeight < e.scrollHeight - 1);
+			e && (y.value = e.scrollTop > 0, S.value = e.scrollTop + e.clientHeight < e.scrollHeight - 1);
 		}
-		function k() {
+		function E() {
 			let e = v.value;
 			e && e.scrollBy({
 				top: -42,
 				behavior: "smooth"
 			});
 		}
-		function A() {
+		function O() {
 			let e = v.value;
 			e && e.scrollBy({
-				top: Fe,
+				top: Qt,
 				behavior: "smooth"
 			});
 		}
-		let j = null;
+		let ne = null;
 		h(() => {
-			j = new ResizeObserver(() => E()), v.value && j.observe(v.value), E();
+			ne = new ResizeObserver(() => T()), v.value && ne.observe(v.value), T();
 		}), g(() => {
-			j?.disconnect();
+			ne?.disconnect();
 		});
-		let M = [
+		let re = [
 			"select",
 			"pan",
 			"pencil",
@@ -594,35 +601,35 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 			"triangle",
 			"star",
 			"text"
-		], N = n(() => u.selectedStrokeIds.size > 0), P = y(!1), F = y({
+		], k = n(() => u.selectedStrokeIds.size > 0), A = b(!1), j = b({
 			width: u.canvasWidth,
 			height: u.canvasHeight
-		}), I = y(u.canvasBackgroundColor);
-		function te() {
-			F.value = {
+		}), M = b(u.canvasBackgroundColor);
+		function oe() {
+			j.value = {
 				width: u.canvasWidth,
 				height: u.canvasHeight
-			}, I.value = u.canvasBackgroundColor, P.value = !0;
+			}, M.value = u.canvasBackgroundColor, A.value = !0;
 		}
-		let R = y(null);
-		function ne() {
-			R.value?.click();
+		let se = b(null);
+		function ce() {
+			se.value?.click();
 		}
-		function z(e) {
+		function le(e) {
 			let t = e.target;
-			I.value = t.value;
+			M.value = t.value;
 		}
-		function re() {
-			I.value = "transparent";
+		function ue() {
+			M.value = "transparent";
 		}
-		function Ie() {
-			let e = Math.max(1, Math.round(F.value.width)), t = Math.max(1, Math.round(F.value.height));
-			u.setCanvasSize(e, t), u.setCanvasBackgroundColor(I.value), P.value = !1;
+		function N() {
+			let e = Math.max(1, Math.round(j.value.width)), t = Math.max(1, Math.round(j.value.height));
+			u.setCanvasSize(e, t), u.setCanvasBackgroundColor(M.value), A.value = !1;
 		}
-		function Le() {
-			P.value = !1;
+		function P() {
+			A.value = !1;
 		}
-		let Re = n(() => {
+		let F = n(() => {
 			if (!f?.value) return {};
 			let e = f.value.getBoundingClientRect();
 			return {
@@ -631,28 +638,28 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 				position: "fixed"
 			};
 		});
-		function ze(e) {
-			e.target.classList.contains("canvas-size-backdrop") && (P.value = !1);
+		function I(e) {
+			e.target.classList.contains("canvas-size-backdrop") && (A.value = !1);
 		}
-		function Be(e) {
-			e.key === "Escape" && (P.value = !1);
+		function L(e) {
+			e.key === "Escape" && (A.value = !1);
 		}
-		let Ve = n(() => N.value && u.selectedStrokeColor !== null ? u.selectedStrokeColor : u.foregroundColor), X = n(() => !Ue.value && N.value && u.selectedStrokeColor === null), Z = n(() => N.value && u.selectedFillColor !== null ? u.selectedFillColor : u.backgroundColor), He = n(() => !Ue.value && N.value && u.selectedFillColor === null), Q = n(() => u.selectedStrokes.some((e) => e.type === "text")), Ue = n(() => N.value && u.selectedStrokes.every((e) => e.type === "text")), We = n(() => Ue.value), Ge = n(() => Ue.value), Ke = n(() => N.value && u.selectedTextColor !== null ? u.selectedTextColor : u.textColor), qe = n(() => Q.value && u.selectedTextColor === null);
-		function Je() {
+		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() {
 			u.setColorSlot("textColor"), u.toggleColorPalette();
 		}
-		function Ye() {
-			We.value || (u.setColorSlot("foreground"), u.toggleColorPalette());
+		function Y() {
+			W.value || (u.setColorSlot("foreground"), u.toggleColorPalette());
 		}
-		function Xe() {
-			Ge.value || (u.setColorSlot("background"), u.toggleColorPalette());
+		function X() {
+			G.value || (u.setColorSlot("background"), u.toggleColorPalette());
 		}
-		return (n, c) => (_(), a("div", V, [
-			x.value || T.value ? (_(), a("button", {
+		return (n, c) => (_(), a("div", pt, [
+			y.value || S.value ? (_(), a("button", {
 				key: 0,
 				class: "scroll-btn scroll-up",
-				disabled: !x.value,
-				onClick: k
+				disabled: !y.value,
+				onClick: E
 			}, [...c[3] ||= [o("svg", {
 				class: "scroll-icon",
 				viewBox: "0 0 24 24",
@@ -661,33 +668,33 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 				"stroke-width": "2",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [o("polyline", { points: "18 15 12 9 6 15" })], -1)]], 8, H)) : i("", !0),
+			}, [o("polyline", { points: "18 15 12 9 6 15" })], -1)]], 8, mt)) : i("", !0),
 			o("div", {
 				ref_key: "toolsScrollRef",
 				ref: v,
 				class: "tools-scroll",
-				onScroll: E
-			}, [o("div", U, [(_(), a(e, null, b(M, (e) => o("button", {
+				onScroll: T
+			}, [o("div", ht, [(_(), a(e, null, x(re, (e) => o("button", {
 				key: e,
-				class: p(["tool-btn", { active: C(l).activeTool === e }]),
-				title: C(d)(`tool.${e}`),
-				onClick: (t) => C(l).setTool(e)
-			}, [e === "select" ? (_(), a("svg", ae, [...c[4] ||= [o("path", { d: "M4.5 3.5l5.5 15 2.5-6 6-2.5z" }, null, -1)]])) : e === "pan" ? (_(), a("svg", oe, [...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", se, [...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", G, [...c[7] ||= [o("line", {
+				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", {
 				x1: "5",
 				y1: "19",
 				x2: "19",
 				y2: "5"
-			}, null, -1)]])) : e === "circle" ? (_(), a("svg", ce, [...c[8] ||= [o("circle", {
+			}, null, -1)]])) : e === "circle" ? (_(), a("svg", xt, [...c[8] ||= [o("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9"
-			}, null, -1)]])) : e === "rect" ? (_(), a("svg", le, [...c[9] ||= [o("rect", {
+			}, null, -1)]])) : e === "rect" ? (_(), a("svg", St, [...c[9] ||= [o("rect", {
 				x: "3",
 				y: "3",
 				width: "18",
 				height: "18",
 				rx: "2"
-			}, null, -1)]])) : e === "triangle" ? (_(), a("svg", ue, [...c[10] ||= [o("polygon", { points: "12,3 22,21 2,21" }, null, -1)]])) : e === "star" ? (_(), a("svg", K, [...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", q, [...c[12] ||= [
+			}, 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] ||= [
 				o("polyline", { points: "4 7 4 4 20 4 20 7" }, null, -1),
 				o("line", {
 					x1: "9",
@@ -701,16 +708,16 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 					x2: "12",
 					y2: "20"
 				}, null, -1)
-			]])) : i("", !0)], 10, W)), 64))]), o("div", de, [o("button", {
-				class: p(["tool-btn", { active: C(l).activeTool === "zoom" }]),
-				title: C(d)("tool.zoom"),
-				onClick: c[0] ||= (e) => C(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, fe)])], 544),
-			x.value || T.value ? (_(), a("button", {
+			]])) : i("", !0)], 10, gt)), 64))]), o("div", Et, [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),
+			y.value || S.value ? (_(), a("button", {
 				key: 1,
 				class: "scroll-btn scroll-down",
-				disabled: !T.value,
-				onClick: A
+				disabled: !S.value,
+				onClick: O
 			}, [...c[14] ||= [o("svg", {
 				class: "scroll-icon",
 				viewBox: "0 0 24 24",
@@ -719,12 +726,12 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 				"stroke-width": "2",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [o("polyline", { points: "6 9 12 15 18 9" })], -1)]], 8, pe)) : i("", !0),
+			}, [o("polyline", { points: "6 9 12 15 18 9" })], -1)]], 8, Ot)) : i("", !0),
 			c[24] ||= o("div", { class: "spacer" }, null, -1),
-			o("div", me, [o("button", {
+			o("div", kt, [o("button", {
 				class: "tool-btn",
-				title: C(d)("canvasSize.title"),
-				onClick: te
+				title: w(d)("canvasSize.title"),
+				onClick: oe
 			}, [...c[15] ||= [o("svg", {
 				class: "tool-icon",
 				viewBox: "0 0 24 24",
@@ -753,71 +760,71 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 					x2: "19",
 					y2: "22"
 				})
-			], -1)]], 8, he), (_(), r(t, { to: "body" }, [P.value ? (_(), a("div", {
+			], -1)]], 8, At), (_(), r(t, { to: "body" }, [A.value ? (_(), a("div", {
 				key: 0,
 				class: "canvas-size-backdrop",
-				onMousedown: ze
+				onMousedown: I
 			}, [o("div", {
 				class: "canvas-size-popover",
-				style: m(Re.value),
-				onKeydown: Be
+				style: m(F.value),
+				onKeydown: L
 			}, [
-				o("div", ge, S(C(d)("canvasSize.title")), 1),
-				o("div", _e, [
-					o("label", ve, S(C(d)("canvasSize.width")), 1),
+				o("div", jt, C(w(d)("canvasSize.title")), 1),
+				o("div", Mt, [
+					o("label", Nt, C(w(d)("canvasSize.width")), 1),
 					D(o("input", {
 						ref: "widthInput",
-						"onUpdate:modelValue": c[1] ||= (e) => F.value.width = e,
+						"onUpdate:modelValue": c[1] ||= (e) => j.value.width = e,
 						type: "number",
 						min: "1",
 						class: "popover-input",
-						onKeydown: O(Ie, ["enter"])
+						onKeydown: te(N, ["enter"])
 					}, null, 544), [[
-						w,
-						F.value.width,
+						ee,
+						j.value.width,
 						void 0,
 						{ number: !0 }
 					]]),
 					c[16] ||= o("span", { class: "popover-unit" }, "px", -1)
 				]),
-				o("div", ye, [
-					o("label", J, S(C(d)("canvasSize.height")), 1),
+				o("div", Pt, [
+					o("label", Ft, C(w(d)("canvasSize.height")), 1),
 					D(o("input", {
-						"onUpdate:modelValue": c[2] ||= (e) => F.value.height = e,
+						"onUpdate:modelValue": c[2] ||= (e) => j.value.height = e,
 						type: "number",
 						min: "1",
 						class: "popover-input",
-						onKeydown: O(Ie, ["enter"])
+						onKeydown: te(N, ["enter"])
 					}, null, 544), [[
-						w,
-						F.value.height,
+						ee,
+						j.value.height,
 						void 0,
 						{ number: !0 }
 					]]),
 					c[17] ||= o("span", { class: "popover-unit" }, "px", -1)
 				]),
-				o("div", Y, [o("label", be, S(C(d)("canvasSize.background")), 1), o("div", xe, [o("button", {
-					class: p(["bg-radio-btn", { active: I.value !== "transparent" }]),
-					title: C(d)("canvasSize.solidColor"),
-					onClick: ne
+				o("div", It, [o("label", Lt, C(w(d)("canvasSize.background")), 1), o("div", Rt, [o("button", {
+					class: p(["bg-radio-btn", { active: M.value !== "transparent" }]),
+					title: w(d)("canvasSize.solidColor"),
+					onClick: ce
 				}, [o("span", {
 					class: "bg-color-fill",
-					style: m({ background: I.value === "transparent" ? "#ffffff" : I.value })
+					style: m({ background: M.value === "transparent" ? "#ffffff" : M.value })
 				}, null, 4), o("input", {
 					ref_key: "hiddenColorInput",
-					ref: R,
+					ref: se,
 					type: "color",
 					class: "hidden-color-input",
-					value: I.value === "transparent" ? "#ffffff" : I.value,
-					onChange: z
-				}, null, 40, Ce)], 10, Se), o("button", {
+					value: M.value === "transparent" ? "#ffffff" : M.value,
+					onChange: le
+				}, null, 40, Bt)], 10, zt), o("button", {
 					class: p([
 						"bg-radio-btn",
 						"bg-radio-btn--transparent",
-						{ active: I.value === "transparent" }
+						{ active: M.value === "transparent" }
 					]),
-					title: C(d)("canvasSize.transparent"),
-					onClick: re
+					title: w(d)("canvasSize.transparent"),
+					onClick: ue
 				}, [...c[18] ||= [o("svg", {
 					width: "14",
 					height: "14",
@@ -831,24 +838,24 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 					y1: "5",
 					x2: "19",
 					y2: "19"
-				})], -1)]], 10, we)])]),
-				o("div", Te, [o("button", {
+				})], -1)]], 10, Vt)])]),
+				o("div", Ht, [o("button", {
 					class: "popover-btn cancel",
-					onClick: Le
-				}, S(C(d)("canvasSize.cancel")), 1), o("button", {
+					onClick: P
+				}, C(w(d)("canvasSize.cancel")), 1), o("button", {
 					class: "popover-btn confirm",
-					onClick: Ie
-				}, S(C(d)("canvasSize.confirm")), 1)])
+					onClick: N
+				}, C(w(d)("canvasSize.confirm")), 1)])
 			], 36)], 32)) : i("", !0)]))]),
-			o("div", Ee, [
-				Q.value ? (_(), a("div", {
+			o("div", Ut, [
+				H.value ? (_(), a("div", {
 					key: 0,
-					class: p(["color-indicator", { active: C(u).showColorPalette && C(u).activeColorSlot === "textColor" }]),
-					title: C(d)("color.textColor"),
-					onClick: Je
-				}, [o("div", Oe, [(_(), a("svg", {
+					class: p(["color-indicator", { active: w(u).showColorPalette && w(u).activeColorSlot === "textColor" }]),
+					title: w(d)("color.textColor"),
+					onClick: J
+				}, [o("div", Gt, [(_(), a("svg", {
 					class: "text-color-icon",
-					style: m({ color: qe.value ? "var(--wb-text-secondary)" : Ke.value }),
+					style: m({ color: q.value ? "var(--wb-text-secondary)" : K.value }),
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -869,7 +876,7 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 						x2: "12",
 						y2: "20"
 					}, null, -1)
-				]], 4)), qe.value ? (_(), a("svg", ke, [...c[20] ||= [o("line", {
+				]], 4)), q.value ? (_(), a("svg", Kt, [...c[20] ||= [o("line", {
 					x1: "5",
 					y1: "12",
 					x2: "19",
@@ -879,18 +886,18 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 					y1: "5",
 					x2: "12",
 					y2: "19"
-				}, null, -1)]])) : i("", !0)])], 10, De)) : i("", !0),
+				}, null, -1)]])) : i("", !0)])], 10, Wt)) : i("", !0),
 				o("div", {
 					class: p(["color-indicator", {
-						active: C(u).showColorPalette && C(u).activeColorSlot === "foreground",
-						disabled: We.value
+						active: w(u).showColorPalette && w(u).activeColorSlot === "foreground",
+						disabled: W.value
 					}]),
-					title: C(d)("color.foreground"),
-					onClick: Ye
+					title: w(d)("color.foreground"),
+					onClick: Y
 				}, [o("div", {
-					class: p(["color-swatch fg", { mixed: X.value }]),
-					style: m({ background: X.value ? "none" : Ve.value })
-				}, [X.value ? (_(), a("svg", je, [...c[21] ||= [o("line", {
+					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", {
 					x1: "5",
 					y1: "12",
 					x2: "19",
@@ -900,21 +907,21 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 					y1: "5",
 					x2: "12",
 					y2: "19"
-				}, null, -1)]])) : i("", !0)], 6)], 10, Ae),
+				}, null, -1)]])) : i("", !0)], 6)], 10, qt),
 				o("div", {
 					class: p(["color-indicator", {
-						active: C(u).showColorPalette && C(u).activeColorSlot === "background",
-						disabled: Ge.value
+						active: w(u).showColorPalette && w(u).activeColorSlot === "background",
+						disabled: G.value
 					}]),
-					title: C(d)("color.background"),
-					onClick: Xe
+					title: w(d)("color.background"),
+					onClick: X
 				}, [o("div", {
 					class: p(["color-swatch bg", {
-						mixed: He.value,
-						transparent: !He.value && Z.value === "transparent"
+						mixed: V.value,
+						transparent: !V.value && B.value === "transparent"
 					}]),
-					style: m({ background: He.value || Z.value === "transparent" ? "none" : Z.value })
-				}, [He.value ? (_(), a("svg", Ne, [...c[22] ||= [o("line", {
+					style: m({ background: V.value || B.value === "transparent" ? "none" : B.value })
+				}, [V.value ? (_(), a("svg", Xt, [...c[22] ||= [o("line", {
 					x1: "5",
 					y1: "12",
 					x2: "19",
@@ -924,23 +931,23 @@ var te = 800, R = 600, ne = 3, z = 16, re = 8, B = A("canvas", () => {
 					y1: "5",
 					x2: "12",
 					y2: "19"
-				}, null, -1)]])) : Z.value === "transparent" ? (_(), a("svg", Pe, [...c[23] ||= [o("line", {
+				}, null, -1)]])) : B.value === "transparent" ? (_(), a("svg", Zt, [...c[23] ||= [o("line", {
 					x1: "5",
 					y1: "5",
 					x2: "19",
 					y2: "19"
-				}, null, -1)]])) : i("", !0)], 6)], 10, Me)
+				}, null, -1)]])) : i("", !0)], 6)], 10, Yt)
 			])
 		]));
 	}
-}), Le = (e, t) => {
+}), en = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, Re = /*#__PURE__*/ Le(Ie, [["__scopeId", "data-v-9532ade7"]]);
+}, tn = /*#__PURE__*/ en($t, [["__scopeId", "data-v-9532ade7"]]);
 //#endregion
 //#region src/components/painter/utils/geometry.ts
-function ze(e, t, n, r, i = !1, a = .382) {
+function nn(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;
@@ -954,7 +961,7 @@ function ze(e, t, n, r, i = !1, a = .382) {
 	}
 	return s;
 }
-function Be(e, t, n, r) {
+function rn(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 ? [
 		{
@@ -984,13 +991,13 @@ function Be(e, t, n, r) {
 		}
 	];
 }
-function Ve(e, t, n) {
+function an(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 X(e, t) {
+function on(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;
@@ -998,12 +1005,12 @@ function X(e, t) {
 	}
 	return n;
 }
-function Z(e, t, n, r, i) {
+function sn(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 He(e) {
+function cn(e) {
 	if (e.length === 0) return {
 		x: 0,
 		y: 0,
@@ -1019,14 +1026,14 @@ function He(e) {
 		height: i - n
 	};
 }
-function Q(e, t) {
+function ln(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 (Ve(e, s[t], s[t + 1]) < 8) return !0;
+			for (let t = 0; t < s.length - 1; t++) if (an(e, s[t], s[t + 1]) < 8) return !0;
 			return !1;
-		case "line": return Ve(e, {
+		case "line": return an(e, {
 			x: n,
 			y: r
 		}, {
@@ -1035,7 +1042,7 @@ function Q(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 && Z(e, t, o, s, c) ? !0 : Z(e, t, o, s + 8, c + 8) && !Z(e, t, o, s - 8, c - 8);
+			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);
 		}
 		case "rect": {
 			if (l && e.x >= n && e.x <= n + i && e.y >= r && e.y <= r + a) return !0;
@@ -1043,12 +1050,12 @@ function Q(e, t) {
 			return t && !o;
 		}
 		case "triangle": {
-			let t = Be(n, r, i, a);
-			return l && X(e, t) ? !0 : X(e, t);
+			let t = rn(n, r, i, a);
+			return l && on(e, t) ? !0 : on(e, t);
 		}
 		case "star": {
-			let t = ze(n + i / 2, r + a / 2, Math.abs(i) / 2, Math.abs(a) / 2, a >= 0);
-			return l && X(e, t) ? !0 : X(e, t);
+			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);
 		}
 		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;
@@ -1056,32 +1063,32 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/components/painter/composables/useDrawing.ts
-function Ue(e) {
-	let t = B(), r = ie(), i = y(!1), a = y({
+function un(e) {
+	let t = st(), r = ft(), i = b(!1), a = b({
 		x: 0,
 		y: 0
-	}), o = y({
+	}), o = b({
 		x: 0,
 		y: 0
-	}), s = y([]), c = y(!1), l = y(!1), u = y(!1), d = y(!1), f = y(/* @__PURE__ */ new Map()), p = y(!1), m = y(null), h = y(""), g = y(""), _ = y(null), v = y(!1), b = y(0), x = y(0), S = y(0), C = y(0), w = y(!1), T = null;
-	function E(e) {
-		T = e;
+	}), s = b([]), c = b(!1), l = b(!1), u = b(!1), d = b(!1), f = b(/* @__PURE__ */ new Map()), p = b(!1), m = b(null), h = b(""), g = b(""), _ = b(null), v = b(!1), y = b(0), x = b(0), S = b(0), C = b(0), w = b(!1), ee = null;
+	function T(e) {
+		ee = e;
 	}
-	function D() {
+	function E() {
 		let e = t.editingTextId;
 		if (!e || !t.strokes.find((t) => t.id === e)) return;
-		let n = T?.() ?? null;
+		let n = ee?.() ?? null;
 		n !== null && (n.trim() ? t.updateStroke(e, { text: n }) : (t.strokes = t.strokes.filter((t) => t.id !== e), t.undoStack.length > 0 && t.undoStack.pop()), t.editingTextId = null);
 	}
-	function O(e) {
+	function D(e) {
 		if (!v.value) return;
-		let n = e.clientX - b.value, r = e.clientY - x.value;
+		let n = e.clientX - y.value, r = e.clientY - x.value;
 		t.setPan(S.value + n, C.value + r);
 	}
-	function k() {
-		v.value && (v.value = !1, window.removeEventListener("mousemove", O), window.removeEventListener("mouseup", k), window.removeEventListener("touchmove", ne), window.removeEventListener("touchend", z));
+	function te() {
+		v.value && (v.value = !1, window.removeEventListener("mousemove", D), window.removeEventListener("mouseup", te), window.removeEventListener("touchmove", ce), window.removeEventListener("touchend", le));
 	}
-	function A(e, t, n, r, i) {
+	function O(e, t, n, r, i) {
 		let a = r - t, o = i - n, s = e === "circle" || e === "rect" || e === "triangle" || e === "star";
 		if (e === "line" && u.value) {
 			let e = Math.round(Math.atan2(o, a) / (Math.PI / 4)) * (Math.PI / 4), t = Math.hypot(a, o);
@@ -1093,7 +1100,7 @@ function Ue(e) {
 				a = a >= 0 ? e : -e, o = o >= 0 ? e : -e;
 			}
 			if (l.value) {
-				let e = j(t, n, t + a, n + o), r = e.width, i = e.height;
+				let e = ne(t, n, t + a, n + o), r = e.width, i = e.height;
 				return {
 					x: t - r,
 					y: n - i,
@@ -1107,9 +1114,9 @@ function Ue(e) {
 			y: n,
 			width: a,
 			height: o
-		} : j(t, n, t + a, n + o);
+		} : ne(t, n, t + a, n + o);
 	}
-	function j(e, t, n, r) {
+	function ne(e, t, n, r) {
 		return {
 			x: Math.min(e, n),
 			y: Math.min(t, r),
@@ -1117,7 +1124,7 @@ function Ue(e) {
 			height: Math.abs(r - t)
 		};
 	}
-	let M = n(() => {
+	let re = n(() => {
 		if (!i.value) return null;
 		let e = r.activeTool;
 		if (e === "select" || e === "pan" || e === "zoom" || e === "text") return null;
@@ -1125,7 +1132,7 @@ function Ue(e) {
 		return e === "pencil" ? {
 			id: "__preview__",
 			type: "pencil",
-			...He(s.value),
+			...cn(s.value),
 			points: [...s.value],
 			strokeColor: t.foregroundColor,
 			fillColor: "none",
@@ -1133,17 +1140,17 @@ function Ue(e) {
 		} : {
 			id: "__preview__",
 			type: e,
-			...A(e, n, c, l, u),
+			...O(e, n, c, l, u),
 			points: [],
 			strokeColor: t.foregroundColor,
 			fillColor: e === "line" ? "none" : t.backgroundColor,
 			strokeWidth: t.strokeWidth
 		};
 	});
-	function N(e) {
-		return P(e.clientX, e.clientY);
+	function k(e) {
+		return A(e.clientX, e.clientY);
 	}
-	function P(n, r) {
+	function A(n, r) {
 		let i = e.value;
 		if (!i) return {
 			x: 0,
@@ -1155,19 +1162,19 @@ function Ue(e) {
 			y: (r - a.top) / t.zoomLevel
 		};
 	}
-	function ee(e) {
-		I(e.clientX, e.clientY, e.type === "mousedown" ? e : void 0);
+	function ie(e) {
+		M(e.clientX, e.clientY, e.type === "mousedown" ? e : void 0);
 	}
-	function F(e) {
+	function j(e) {
 		if (e.touches.length !== 1) return;
 		e.preventDefault();
 		let t = e.touches[0];
-		I(t.clientX, t.clientY);
+		M(t.clientX, t.clientY);
 	}
-	function I(n, c, l) {
-		let u = P(n, c);
-		if (t.editingTextId && r.activeTool !== "text" && D(), r.activeTool === "pan") {
-			v.value = !0, b.value = n, x.value = c, S.value = t.panX, C.value = t.panY, window.addEventListener("mousemove", O), window.addEventListener("mouseup", k), window.addEventListener("touchmove", ne, { passive: !1 }), window.addEventListener("touchend", z);
+	function M(n, c, l) {
+		let u = A(n, c);
+		if (t.editingTextId && r.activeTool !== "text" && E(), r.activeTool === "pan") {
+			v.value = !0, y.value = n, x.value = c, S.value = t.panX, C.value = t.panY, window.addEventListener("mousemove", D), window.addEventListener("mouseup", te), window.addEventListener("touchmove", ce, { passive: !1 }), window.addEventListener("touchend", le);
 			return;
 		}
 		if (r.activeTool === "zoom" && l) {
@@ -1182,11 +1189,11 @@ function Ue(e) {
 			let e = t.editingTextId;
 			if (e) {
 				let n = t.strokes.find((t) => t.id === e);
-				if (n && Q(u, n)) return;
+				if (n && ln(u, n)) return;
 			} else {
-				let e = [...t.strokes].reverse().find((e) => Q(u, e));
+				let e = [...t.strokes].reverse().find((e) => ln(u, e));
 				if (e && e.type === "text") {
-					t.hoveredTextId = null, D(), t.pushUndo(), t.editingTextId = e.id;
+					t.hoveredTextId = null, E(), t.pushUndo(), t.editingTextId = e.id;
 					return;
 				}
 			}
@@ -1194,7 +1201,7 @@ function Ue(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) => Q(u, e));
+			let e = [...t.strokes].reverse().find((e) => ln(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, {
@@ -1213,19 +1220,19 @@ function Ue(e) {
 			};
 		}
 	}
-	function L(e) {
-		R(e.clientX, e.clientY);
+	function ae(e) {
+		se(e.clientX, e.clientY);
 	}
-	function te(e) {
+	function oe(e) {
 		if (e.touches.length !== 1) return;
 		e.preventDefault();
 		let t = e.touches[0];
-		R(t.clientX, t.clientY);
+		se(t.clientX, t.clientY);
 	}
-	function R(e, n) {
-		let c = P(e, n);
+	function se(e, n) {
+		let c = A(e, n);
 		if (r.activeTool === "text" && !i.value && !t.editingTextId) {
-			let e = [...t.strokes].reverse().find((e) => Q(c, e));
+			let e = [...t.strokes].reverse().find((e) => ln(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) {
@@ -1248,27 +1255,27 @@ function Ue(e) {
 			height: Math.abs(c.y - a.value.y)
 		};
 	}
-	function ne(e) {
+	function ce(e) {
 		if (!v.value || e.touches.length !== 1) return;
 		e.preventDefault();
-		let n = e.touches[0], r = n.clientX - b.value, i = n.clientY - x.value;
+		let n = e.touches[0], r = n.clientX - y.value, i = n.clientY - x.value;
 		t.setPan(S.value + r, C.value + i);
 	}
-	function z() {
-		v.value && (v.value = !1, window.removeEventListener("mousemove", O), window.removeEventListener("mouseup", k), window.removeEventListener("touchmove", ne), window.removeEventListener("touchend", z));
+	function le() {
+		v.value && (v.value = !1, window.removeEventListener("mousemove", D), window.removeEventListener("mouseup", te), window.removeEventListener("touchmove", ce), window.removeEventListener("touchend", le));
 	}
-	function re(e) {
-		H(e.clientX, e.clientY);
+	function ue(e) {
+		P(e.clientX, e.clientY);
 	}
-	function V(e) {
+	function N(e) {
 		let t = e.changedTouches[0];
-		t && H(t.clientX, t.clientY);
+		t && P(t.clientX, t.clientY);
 	}
-	function H(e, n) {
+	function P(e, n) {
 		if (r.activeTool === "zoom") return;
 		if (r.activeTool === "text") {
 			if (w.value) {
-				w.value = !1, D();
+				w.value = !1, E();
 				let e = t.buildStroke("text", a.value.x, a.value.y, 0, 0, []);
 				t.addStroke(e), t.editingTextId = e.id;
 			}
@@ -1276,12 +1283,12 @@ function Ue(e) {
 		}
 		if (!i.value) return;
 		i.value = !1;
-		let o = P(e, n), c = o.x - a.value.x, l = o.y - a.value.y, u = Math.hypot(c, l);
+		let o = A(e, n), c = o.x - a.value.x, l = o.y - a.value.y, u = Math.hypot(c, l);
 		if (r.activeTool === "select") {
 			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) => Q(o, e));
+					let e = [...t.strokes].reverse().find((e) => ln(o, e));
 					t.selectStroke(e?.id ?? null);
 				} else {
 					let e = t.selectionBox, n = [];
@@ -1308,7 +1315,7 @@ function Ue(e) {
 			let e = s.value.map((e) => ({
 				x: Math.round(e.x),
 				y: Math.round(e.y)
-			})), n = He(e);
+			})), n = cn(e);
 			if (n.width < 3 && n.height < 3) {
 				t.clearSelection();
 				return;
@@ -1322,27 +1329,27 @@ function Ue(e) {
 			t.clearSelection();
 			return;
 		}
-		let v = A(p, m, h, o.x, o.y), y = t.buildStroke(p, v.x, v.y, v.width, v.height, []);
+		let v = O(p, m, h, o.x, o.y), y = t.buildStroke(p, v.x, v.y, v.width, v.height, []);
 		t.addStroke(y), r.setTool("select");
 	}
-	function U(e, n) {
+	function F(e, n) {
 		t.strokes.find((t) => t.id === e) && (n.trim() ? t.updateStroke(e, { text: n }) : (t.strokes = t.strokes.filter((t) => t.id !== e), t.undoStack.length > 0 && t.undoStack.pop()), t.editingTextId = null, r.activeTool === "text" && r.setTool("select"));
 	}
-	function W(e) {
+	function I(e) {
 		let n = t.strokes.find((t) => t.id === e);
 		n && ((!n.text || !n.text.trim()) && (t.strokes = t.strokes.filter((t) => t.id !== e), t.undoStack.length > 0 && t.undoStack.pop()), t.editingTextId = null, r.activeTool === "text" && r.setTool("select"));
 	}
-	function ae(e) {
+	function L(e) {
 		t.pushUndo(), t.editingTextId = e;
 	}
-	function oe(e) {
+	function R(e) {
 		let t = e.ctrlKey || e.metaKey;
 		c.value = t, l.value = e.shiftKey, u.value = e.shiftKey;
 	}
-	function se() {
+	function z() {
 		c.value = !1, l.value = !1, u.value = !1;
 	}
-	function G(e, t) {
+	function B(e, t) {
 		let { x: n, y: r, w: i, h: a } = e;
 		switch (t) {
 			case "nw": return {
@@ -1391,14 +1398,14 @@ function Ue(e) {
 			};
 		}
 	}
-	function ce(e) {
+	function V(e) {
 		return e === "n" || e === "s" || e === "e" || e === "w";
 	}
-	function le(e, n, r, i) {
+	function H(e, n, r, i) {
 		let s = t.strokes.find((t) => t.id === e);
 		if (!s) return;
 		t.pushUndo();
-		let c = me(s);
+		let c = Y(s);
 		_.value = {
 			x: c.x,
 			y: c.y,
@@ -1411,24 +1418,24 @@ function Ue(e) {
 			let e = i.touches[0] || i.changedTouches[0];
 			l = e.clientX, u = e.clientY, i.preventDefault();
 		} else l = i.clientX, u = i.clientY;
-		let d = P(l, u);
-		a.value = d, o.value = d, window.addEventListener("mousemove", ue), window.addEventListener("mouseup", de), window.addEventListener("touchmove", K, { passive: !1 }), window.addEventListener("touchend", fe);
+		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);
 	}
-	function ue(e) {
-		q(e.clientX, e.clientY);
+	function U(e) {
+		G(e.clientX, e.clientY);
 	}
-	function K(e) {
+	function W(e) {
 		if (e.touches.length !== 1) return;
 		e.preventDefault();
 		let t = e.touches[0];
-		q(t.clientX, t.clientY);
+		G(t.clientX, t.clientY);
 	}
-	function q(e, n) {
+	function G(e, n) {
 		if (!p.value || !_.value || !m.value) return;
-		let r = P(e, n);
+		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 && ce(h.value)) {
+		if (l.value && V(h.value)) {
 			let { x: e, y: n, width: o, height: l } = i;
 			switch (h.value) {
 				case "n": {
@@ -1482,10 +1489,10 @@ function Ue(e) {
 			return;
 		}
 		if (l.value) {
-			c = A(i.type, a, s, r.x, r.y), t.updateStroke(m.value, c);
+			c = O(i.type, a, s, r.x, r.y), t.updateStroke(m.value, c);
 			return;
 		}
-		if (ce(h.value)) {
+		if (V(h.value)) {
 			let { x: e, y: t, width: n, height: a } = i;
 			switch (h.value) {
 				case "n": {
@@ -1532,13 +1539,13 @@ function Ue(e) {
 				};
 			}
 		} else {
-			let e = G({
+			let e = B({
 				x: i.x,
 				y: i.y,
 				w: i.width,
 				h: i.height
 			}, h.value);
-			c = A(i.type, e.x, e.y, r.x, r.y);
+			c = O(i.type, e.x, e.y, r.x, r.y);
 		}
 		if (_.value?.type === "text") {
 			c.width < 1 && (c.width = 1), t.updateStroke(m.value, {
@@ -1550,16 +1557,16 @@ function Ue(e) {
 		}
 		t.updateStroke(m.value, c);
 	}
-	function de() {
-		pe();
+	function K() {
+		J();
 	}
-	function fe(e) {
-		e.touches.length === 0 && pe();
+	function q(e) {
+		e.touches.length === 0 && J();
 	}
-	function pe() {
-		p.value = !1, m.value = null, h.value = "", g.value = "", _.value = null, t.dataVersion++, window.removeEventListener("mousemove", ue), window.removeEventListener("mouseup", de), window.removeEventListener("touchmove", K), window.removeEventListener("touchend", fe);
+	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 me(e) {
+	function Y(e) {
 		let { type: t } = e;
 		if (t === "line" || t === "triangle" || t === "star") {
 			let { x: t, y: n, width: r, height: i } = e;
@@ -1579,29 +1586,29 @@ function Ue(e) {
 	}
 	return {
 		isDrawing: i,
-		previewStroke: M,
-		onMouseDown: ee,
-		onMouseMove: L,
-		onMouseUp: re,
-		onTouchStart: F,
-		onTouchMove: te,
-		onTouchEnd: V,
-		getSVGPoint: N,
-		updateModifiers: oe,
-		clearModifiers: se,
+		previewStroke: re,
+		onMouseDown: ie,
+		onMouseMove: ae,
+		onMouseUp: ue,
+		onTouchStart: j,
+		onTouchMove: oe,
+		onTouchEnd: N,
+		getSVGPoint: k,
+		updateModifiers: R,
+		clearModifiers: z,
 		isResizing: p,
 		resizeCursor: g,
-		startResize: le,
-		commitTextEdit: U,
-		cancelTextEdit: W,
-		startEditText: ae,
-		saveCurrentTextEdit: D,
-		setTextContentGetter: E
+		startResize: H,
+		commitTextEdit: F,
+		cancelTextEdit: I,
+		startEditText: L,
+		saveCurrentTextEdit: E,
+		setTextContentGetter: T
 	};
 }
 //#endregion
 //#region src/components/painter/utils/svg.ts
-function We(e) {
+function dn(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}`;
@@ -1612,7 +1619,7 @@ function We(e) {
 	}
 	return t += ` L ${e[e.length - 1].x} ${e[e.length - 1].y}`, t;
 }
-function Ge(e) {
+function fn(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,
@@ -1626,7 +1633,7 @@ function Ge(e) {
 			attrs: {
 				...u,
 				fill: "none",
-				d: We(o)
+				d: dn(o)
 			}
 		};
 		case "line": return {
@@ -1664,7 +1671,7 @@ function Ge(e) {
 			}
 		};
 		case "triangle": {
-			let e = Be(n, r, i, a).map((e) => `${e.x},${e.y}`).join(" ");
+			let e = rn(n, r, i, a).map((e) => `${e.x},${e.y}`).join(" ");
 			return {
 				tag: "polygon",
 				attrs: {
@@ -1674,7 +1681,7 @@ function Ge(e) {
 			};
 		}
 		case "star": {
-			let e = ze(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 = nn(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: {
@@ -1695,45 +1702,45 @@ function Ge(e) {
 }
 //#endregion
 //#region src/components/painter/StrokeRenderer.vue
-var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
+var pn = /*#__PURE__*/ en(/* @__PURE__ */ l({
 	__name: "StrokeRenderer",
 	props: {
 		stroke: {},
 		isSelected: { type: Boolean }
 	},
 	setup(e) {
-		return (t, n) => (_(), r(x(C(Ge)(e.stroke).tag), d(C(Ge)(e.stroke).attrs, {
+		return (t, n) => (_(), r(S(w(fn)(e.stroke).tag), d(w(fn)(e.stroke).attrs, {
 			class: { selected: e.isSelected },
 			"data-stroke-id": e.stroke.id
 		}), null, 16, ["class", "data-stroke-id"]));
 	}
-}), [["__scopeId", "data-v-d3706fa4"]]), qe = { key: 0 }, Je = [
+}), [["__scopeId", "data-v-d3706fa4"]]), mn = { key: 0 }, hn = [
 	"x",
 	"y",
 	"width",
 	"height"
-], Ye = [
+], gn = [
 	"x",
 	"y",
 	"onMousedown",
 	"onTouchstart"
-], Xe = [
+], _n = [
 	"x",
 	"y",
 	"onMousedown",
 	"onTouchstart"
-], Ze = 6, $ = 8, Qe = /* @__PURE__ */ l({
+], vn = 6, $ = 8, yn = /* @__PURE__ */ l({
 	__name: "SelectionOverlay",
 	props: {
 		stroke: {},
 		startResize: { type: Function }
 	},
 	setup(t) {
-		let r = t, s = B(), c = n(() => {
+		let r = t, s = st(), c = n(() => {
 			let e = s.getStrokeDisplayBounds(r.stroke);
 			return {
-				x: e.x - Ze,
-				y: e.y - Ze,
+				x: e.x - vn,
+				y: e.y - vn,
 				w: e.width + 12,
 				h: e.height + 12
 			};
@@ -1806,7 +1813,7 @@ var Ke = /*#__PURE__*/ Le(/* @__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", qe, [
+		return (n, r) => t.stroke ? (_(), a("g", mn, [
 			o("rect", {
 				x: c.value.x,
 				y: c.value.y,
@@ -1817,8 +1824,8 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				"stroke-width": "2",
 				"stroke-dasharray": "6 4",
 				rx: "4"
-			}, null, 8, Je),
-			(_(!0), a(e, null, b(u.value, (e) => D((_(), a("rect", {
+			}, null, 8, hn),
+			(_(!0), a(e, null, x(u.value, (e) => D((_(), a("rect", {
 				key: e.name,
 				x: e.cx - $ / 2,
 				y: e.cy - $ / 2,
@@ -1829,10 +1836,10 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				"stroke-width": "1.5",
 				rx: "1",
 				style: m({ cursor: e.cursor }),
-				onMousedown: k((t) => p(e.name, e.cursor, t), ["stop", "prevent"]),
-				onTouchstart: k((t) => p(e.name, e.cursor, t), ["stop", "prevent"])
-			}, null, 44, Ye)), [[T, l.value]])), 128)),
-			(_(!0), a(e, null, b(f.value, (e) => D((_(), a("rect", {
+				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)),
+			(_(!0), a(e, null, x(f.value, (e) => D((_(), a("rect", {
 				key: e.name,
 				x: e.cx - $ / 2,
 				y: e.cy - $ / 2,
@@ -1843,68 +1850,68 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				"stroke-width": "1.5",
 				rx: "1",
 				style: m({ cursor: e.cursor }),
-				onMousedown: k((t) => p(e.name, e.cursor, t), ["stop", "prevent"]),
-				onTouchstart: k((t) => p(e.name, e.cursor, t), ["stop", "prevent"])
-			}, null, 44, Xe)), [[T, !l.value]])), 128))
+				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))
 		])) : i("", !0);
 	}
-}), $e = ["viewBox"], et = [
+}), bn = ["viewBox"], xn = [
 	"width",
 	"height",
 	"fill"
-], tt = [
+], Sn = [
 	"width",
 	"height",
 	"fill"
-], nt = [
+], Cn = [
 	"width",
 	"height",
 	"stroke"
-], rt = { class: "strokes-layer" }, it = [
+], wn = { class: "strokes-layer" }, Tn = [
 	"x",
 	"y",
 	"width"
-], at = ["contenteditable", "onDblclick"], ot = [
+], En = ["contenteditable", "onDblclick"], Dn = [
 	"x",
 	"y",
 	"width",
 	"height"
-], st = [
+], On = [
 	"x",
 	"y",
 	"width",
 	"height"
-], ct = ["disabled", "title"], lt = ["disabled", "title"], ut = ["title"], dt = ["title"], ft = ["title"], pt = ["title"], mt = { class: "zoom-percent" }, ht = ["title"], gt = { class: "font-size-value" }, _t = ["title"], vt = ["title"], yt = ["title"], bt = /*#__PURE__*/ Le(/* @__PURE__ */ l({
+], 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({
 	__name: "Whiteboard",
 	setup(t) {
-		let c = B(), l = ie(), { t: u } = ee(), d = y(null), { isDrawing: v, previewStroke: x, onMouseDown: w, onMouseMove: T, onMouseUp: D, onTouchStart: O, onTouchMove: A, onTouchEnd: j, updateModifiers: M, clearModifiers: N, isResizing: P, resizeCursor: F, startResize: I, commitTextEdit: L, cancelTextEdit: te, startEditText: R, saveCurrentTextEdit: ne, setTextContentGetter: z } = Ue(d);
-		z(() => {
+		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);
+		le(() => {
 			let e = c.editingTextId;
 			if (!e) return null;
-			let t = H.value.get(e);
+			let t = P.value.get(e);
 			return t ? t.innerText : null;
 		}), E(() => l.activeTool, (e) => {
-			e !== "text" && ne();
+			e !== "text" && ce();
 		});
-		let re = n(() => P.value ? F.value : l.activeTool === "pan" ? "grab" : l.activeTool === "zoom" ? "zoom-in" : l.activeTool === "text" ? c.hoveredTextId ? "pointer" : "text" : l.activeTool === "select" ? "default" : "crosshair"), V = n(() => l.activeTool === "zoom"), H = y(/* @__PURE__ */ new Map()), U = n(() => {
+		let ue = n(() => A.value ? j.value : l.activeTool === "pan" ? "grab" : l.activeTool === "zoom" ? "zoom-in" : l.activeTool === "text" ? c.hoveredTextId ? "pointer" : "text" : l.activeTool === "select" ? "default" : "crosshair"), N = n(() => l.activeTool === "zoom"), P = b(/* @__PURE__ */ new Map()), F = n(() => {
 			let e = c.hoveredTextId;
 			if (!e) return null;
 			let t = c.strokes.find((t) => t.id === e);
 			return t ? c.getStrokeDisplayBounds(t) : null;
-		}), W = n(() => {
+		}), I = n(() => {
 			let e = c.selectedStrokes;
 			return e.length === 1 && e[0].type === "text" ? e[0] : null;
 		});
-		function ae(e) {
+		function L(e) {
 			if (c.editingTextId) if (e.key === "Enter" && !e.shiftKey) {
 				e.preventDefault(), e.stopPropagation();
-				let t = H.value.get(c.editingTextId), n = t ? t.innerText : "";
-				L(c.editingTextId, n), f(() => {});
-			} else e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), te(c.editingTextId));
+				let t = P.value.get(c.editingTextId), n = t ? t.innerText : "";
+				ae(c.editingTextId, n), f(() => {});
+			} else e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), oe(c.editingTextId));
 		}
 		E(() => c.editingTextId, (e) => {
 			e && f(() => {
-				let t = H.value.get(e);
+				let t = P.value.get(e);
 				if (t) {
 					t.focus();
 					let e = document.createRange();
@@ -1914,73 +1921,73 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				}
 			});
 		});
-		function oe(e) {
-			(l.activeTool === "text" || l.activeTool === "select") && R(e);
+		function R(e) {
+			(l.activeTool === "text" || l.activeTool === "select") && se(e);
 		}
-		function se() {
+		function z() {
 			c.hoveredTextId = null;
 		}
-		function G() {
+		function B() {
 			let e = d.value?.parentElement;
 			e && c.zoomAt(e.clientWidth / 2, e.clientHeight / 2, 1.1);
 		}
-		function ce() {
+		function V() {
 			let e = d.value?.parentElement;
 			e && c.zoomAt(e.clientWidth / 2, e.clientHeight / 2, .9);
 		}
-		function le(e) {
+		function H(e) {
 			let t = e.ctrlKey || e.metaKey;
-			c.editingTextId || ((v.value || P.value) && M(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()));
+			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 ue(e) {
-			(v.value || P.value) && M(e);
+		function U(e) {
+			(v.value || A.value) && re(e);
 		}
-		function K() {
-			N();
+		function W() {
+			k();
 		}
-		let q = y(0), de = y(1), fe = y(0), pe = y(0);
-		function me(e) {
+		let G = b(0), K = b(1), q = b(0), J = b(0);
+		function Y(e) {
 			let t = e[0].clientX - e[1].clientX, n = e[0].clientY - e[1].clientY;
 			return Math.hypot(t, n);
 		}
-		function he(e) {
-			l.activeTool === "zoom" && e.touches.length === 2 && (q.value = me(e.touches), de.value = c.zoomLevel, fe.value = (e.touches[0].clientX + e.touches[1].clientX) / 2, pe.value = (e.touches[0].clientY + e.touches[1].clientY) / 2);
+		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 ge(e) {
-			if (l.activeTool === "zoom" && e.touches.length === 2 && q.value > 0) {
-				let t = me(e.touches) / q.value, n = de.value * t, r = d.value;
+		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;
 				if (r) {
 					let e = r.getBoundingClientRect();
-					c.continuousZoomAt(fe.value - e.left, pe.value - e.top, n);
+					c.continuousZoomAt(q.value - e.left, J.value - e.top, n);
 				}
 			}
 		}
-		function _e(e) {
-			l.activeTool === "zoom" && e.touches.length < 2 && (q.value = 0);
+		function Z(e) {
+			l.activeTool === "zoom" && e.touches.length < 2 && (G.value = 0);
 		}
-		let ve = null;
-		function ye() {
+		let fe = null;
+		function pe() {
 			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 J(e) {
-			let t = W.value;
+		function me(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 Y(e) {
-			let t = W.value;
+		function he(e) {
+			let t = I.value;
 			t && (c.pushUndo(), c.updateStroke(t.id, { textAlign: e }), c.dataVersion++);
 		}
-		function be(e) {
+		function ge(e) {
 			return (t) => {
-				t ? (H.value.set(e, t), f(() => xe(e, t))) : H.value.delete(e);
+				t ? (P.value.set(e, t), f(() => _e(e, t))) : P.value.delete(e);
 			};
 		}
-		function xe(e, t) {
+		function _e(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);
@@ -2000,25 +2007,25 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 			}
 		}
 		return h(() => {
-			window.addEventListener("keydown", le), window.addEventListener("keydown", ae), window.addEventListener("keyup", ue), window.addEventListener("blur", K), ye(), ve = new ResizeObserver(() => ye());
+			window.addEventListener("keydown", H), window.addEventListener("keydown", L), window.addEventListener("keyup", U), window.addEventListener("blur", W), pe(), fe = new ResizeObserver(() => pe());
 			let e = d.value?.parentElement;
-			e && ve.observe(e);
+			e && fe.observe(e);
 		}), g(() => {
-			window.removeEventListener("keydown", le), window.removeEventListener("keydown", ae), window.removeEventListener("keyup", ue), window.removeEventListener("blur", K), ve?.disconnect();
+			window.removeEventListener("keydown", H), window.removeEventListener("keydown", L), window.removeEventListener("keyup", U), window.removeEventListener("blur", W), fe?.disconnect();
 		}), (t, n) => (_(), a("div", {
 			class: "whiteboard",
-			onContextmenu: n[23] ||= k(() => {}, ["prevent"]),
-			onMousedown: n[24] ||= (...e) => C(w) && C(w)(...e),
-			onMousemove: n[25] ||= (...e) => C(T) && C(T)(...e),
-			onMouseup: n[26] ||= (...e) => C(D) && C(D)(...e),
-			onTouchstart: n[27] ||= k((e) => {
-				C(O)(e), he(e);
+			onContextmenu: n[23] ||= O(() => {}, ["prevent"]),
+			onMousedown: n[24] ||= (...e) => w(S) && w(S)(...e),
+			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);
 			}, ["prevent"]),
-			onTouchmove: n[28] ||= k((e) => {
-				C(A)(e), ge(e);
+			onTouchmove: n[28] ||= O((e) => {
+				w(te)(e), de(e);
 			}, ["prevent"]),
 			onTouchend: n[29] ||= (e) => {
-				C(j)(e), _e(e);
+				w(ne)(e), Z(e);
 			}
 		}, [
 			o("div", {
@@ -2026,45 +2033,45 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				ref: d,
 				class: "canvas-wrapper",
 				style: m({
-					width: C(c).canvasWidth + "px",
-					height: C(c).canvasHeight + "px",
-					transform: C(c).canvasTransform,
+					width: w(c).canvasWidth + "px",
+					height: w(c).canvasHeight + "px",
+					transform: w(c).canvasTransform,
 					transformOrigin: "0 0"
 				})
 			}, [(_(), a("svg", {
 				class: "canvas",
-				viewBox: C(c).viewBox,
+				viewBox: w(c).viewBox,
 				width: "100%",
 				height: "100%",
-				style: m({ cursor: re.value }),
-				onMouseleave: se
+				style: m({ cursor: ue.value }),
+				onMouseleave: z
 			}, [
 				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),
-				C(c).canvasBackgroundColor === "transparent" ? (_(), a("rect", {
+				w(c).canvasBackgroundColor === "transparent" ? (_(), a("rect", {
 					key: 0,
 					x: "0",
 					y: "0",
-					width: C(c).canvasWidth,
-					height: C(c).canvasHeight,
-					fill: C(c).theme === "dark" ? "url(#grid-dark)" : "url(#grid-light)"
-				}, null, 8, et)) : (_(), a("rect", {
+					width: w(c).canvasWidth,
+					height: w(c).canvasHeight,
+					fill: w(c).theme === "dark" ? "url(#grid-dark)" : "url(#grid-light)"
+				}, null, 8, xn)) : (_(), a("rect", {
 					key: 1,
 					x: "0",
 					y: "0",
-					width: C(c).canvasWidth,
-					height: C(c).canvasHeight,
-					fill: C(c).canvasBackgroundColor
-				}, null, 8, tt)),
+					width: w(c).canvasWidth,
+					height: w(c).canvasHeight,
+					fill: w(c).canvasBackgroundColor
+				}, null, 8, Sn)),
 				o("rect", {
 					x: "0",
 					y: "0",
-					width: C(c).canvasWidth,
-					height: C(c).canvasHeight,
+					width: w(c).canvasWidth,
+					height: w(c).canvasHeight,
 					fill: "none",
-					stroke: C(c).theme === "dark" ? "#4a4a5a" : "#c0c0c0",
+					stroke: w(c).theme === "dark" ? "#4a4a5a" : "#c0c0c0",
 					"stroke-width": "2"
-				}, null, 8, nt),
-				o("g", rt, [(_(!0), a(e, null, b(C(c).strokes, (t) => (_(), a(e, { key: t.id }, [t.type === "text" ? (_(), a("foreignObject", {
+				}, 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", {
 					key: 0,
 					x: t.x,
 					y: t.y,
@@ -2076,9 +2083,9 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 					}
 				}, [o("div", {
 					ref_for: !0,
-					ref: be(t.id),
+					ref: ge(t.id),
 					xmlns: "http://www.w3.org/1999/xhtml",
-					contenteditable: C(c).editingTextId === t.id,
+					contenteditable: w(c).editingTextId === t.id,
 					style: m({
 						fontSize: (t.fontSize ?? 16) + "px",
 						color: t.textColor ?? t.strokeColor,
@@ -2087,69 +2094,69 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 						wordBreak: t.textAutoWidth ? "normal" : "break-word",
 						padding: "2px 4px",
 						minHeight: (t.fontSize ?? 16) + "px",
-						outline: C(c).editingTextId === t.id ? "2px solid #6366f1" : "none",
-						cursor: C(c).editingTextId === t.id ? "text" : "default",
-						userSelect: C(c).editingTextId === t.id ? "text" : "none",
-						pointerEvents: C(c).editingTextId === t.id ? "auto" : "none",
-						background: C(c).editingTextId === t.id ? "rgba(255,255,255,0.9)" : "transparent",
+						outline: w(c).editingTextId === t.id ? "2px solid #6366f1" : "none",
+						cursor: w(c).editingTextId === t.id ? "text" : "default",
+						userSelect: w(c).editingTextId === t.id ? "text" : "none",
+						pointerEvents: w(c).editingTextId === t.id ? "auto" : "none",
+						background: w(c).editingTextId === t.id ? "rgba(255,255,255,0.9)" : "transparent",
 						borderRadius: "2px",
 						display: "inline-block",
 						maxWidth: t.textAutoWidth ? "none" : "100%"
 					}),
-					onDblclick: k((e) => oe(t.id), ["stop"])
-				}, S(t.text || ""), 45, at)], 8, it)) : (_(), r(Ke, {
+					onDblclick: O((e) => R(t.id), ["stop"])
+				}, C(t.text || ""), 45, En)], 8, Tn)) : (_(), r(pn, {
 					key: 1,
 					stroke: t,
-					"is-selected": C(c).isSelected(t.id)
+					"is-selected": w(c).isSelected(t.id)
 				}, null, 8, ["stroke", "is-selected"]))], 64))), 128))]),
-				C(x) ? (_(), r(Ke, {
+				w(y) ? (_(), r(pn, {
 					key: 2,
-					stroke: C(x),
+					stroke: w(y),
 					"is-selected": !1
 				}, null, 8, ["stroke"])) : i("", !0),
-				(_(!0), a(e, null, b(C(c).selectedStrokes, (e) => (_(), r(Qe, {
+				(_(!0), a(e, null, x(w(c).selectedStrokes, (e) => (_(), r(yn, {
 					key: "sel-" + e.id,
 					stroke: e,
-					"start-resize": C(I)
+					"start-resize": w(M)
 				}, null, 8, ["stroke", "start-resize"]))), 128)),
-				C(c).isSelecting && C(c).selectionBox ? (_(), a("rect", {
+				w(c).isSelecting && w(c).selectionBox ? (_(), a("rect", {
 					key: 3,
-					x: C(c).selectionBox.x,
-					y: C(c).selectionBox.y,
-					width: C(c).selectionBox.width,
-					height: C(c).selectionBox.height,
+					x: w(c).selectionBox.x,
+					y: w(c).selectionBox.y,
+					width: w(c).selectionBox.width,
+					height: w(c).selectionBox.height,
 					fill: "rgba(99, 102, 241, 0.08)",
 					stroke: "#6366f1",
 					"stroke-width": "1",
 					"stroke-dasharray": "6 4"
-				}, null, 8, ot)) : i("", !0),
-				U.value ? (_(), a("rect", {
+				}, null, 8, Dn)) : i("", !0),
+				F.value ? (_(), a("rect", {
 					key: 4,
-					x: U.value.x - 4,
-					y: U.value.y - 4,
-					width: U.value.width + 8,
-					height: U.value.height + 8,
+					x: F.value.x - 4,
+					y: F.value.y - 4,
+					width: F.value.width + 8,
+					height: F.value.height + 8,
 					fill: "none",
 					stroke: "#6366f1",
 					"stroke-width": "1",
 					"stroke-dasharray": "4 3",
 					"pointer-events": "none"
-				}, null, 8, st)) : i("", !0)
-			], 44, $e))], 4),
+				}, null, 8, On)) : i("", !0)
+			], 44, bn))], 4),
 			o("div", {
 				class: "canvas-toolbar",
-				onMousedown: n[5] ||= k(() => {}, ["stop"]),
-				onMouseup: n[6] ||= k(() => {}, ["stop"]),
-				onClick: n[7] ||= k(() => {}, ["stop"]),
-				onTouchstart: n[8] ||= k(() => {}, ["stop"]),
-				onTouchmove: n[9] ||= k(() => {}, ["stop"]),
-				onTouchend: n[10] ||= k(() => {}, ["stop"])
+				onMousedown: n[5] ||= O(() => {}, ["stop"]),
+				onMouseup: n[6] ||= O(() => {}, ["stop"]),
+				onClick: n[7] ||= O(() => {}, ["stop"]),
+				onTouchstart: n[8] ||= O(() => {}, ["stop"]),
+				onTouchmove: n[9] ||= O(() => {}, ["stop"]),
+				onTouchend: n[10] ||= O(() => {}, ["stop"])
 			}, [
 				o("button", {
 					class: "canvas-tb-btn",
-					disabled: !C(c).canUndo,
-					title: C(u)("toolbar.undo"),
-					onClick: n[0] ||= (e) => C(c).undo()
+					disabled: !w(c).canUndo,
+					title: w(u)("toolbar.undo"),
+					onClick: n[0] ||= (e) => w(c).undo()
 				}, [...n[31] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2159,12 +2166,12 @@ var Ke = /*#__PURE__*/ Le(/* @__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, ct),
+				}, [o("path", { d: "M3 10h10a5 5 0 0 1 0 10H9" }), o("polyline", { points: "7 6 3 10 7 14" })], -1)]], 8, kn),
 				o("button", {
 					class: "canvas-tb-btn",
-					disabled: !C(c).canRedo,
-					title: C(u)("toolbar.redo"),
-					onClick: n[1] ||= (e) => C(c).redo()
+					disabled: !w(c).canRedo,
+					title: w(u)("toolbar.redo"),
+					onClick: n[1] ||= (e) => w(c).redo()
 				}, [...n[32] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2174,12 +2181,12 @@ var Ke = /*#__PURE__*/ Le(/* @__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, lt),
-				C(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
+				}, [o("path", { d: "M21 10H11a5 5 0 0 0 0 10h4" }), o("polyline", { points: "17 6 21 10 17 14" })], -1)]], 8, An),
+				w(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
 					key: 0,
 					class: "canvas-tb-btn",
-					title: C(u)("toolbar.bringToFront"),
-					onClick: n[2] ||= (e) => C(c).moveSelectedUp()
+					title: w(u)("toolbar.bringToFront"),
+					onClick: n[2] ||= (e) => w(c).moveSelectedUp()
 				}, [...n[33] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2189,12 +2196,12 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [o("path", { d: "m18 15-6-6-6 6" })], -1)]], 8, ut)) : i("", !0),
-				C(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
+				}, [o("path", { d: "m18 15-6-6-6 6" })], -1)]], 8, jn)) : i("", !0),
+				w(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
 					key: 1,
 					class: "canvas-tb-btn",
-					title: C(u)("toolbar.sendToBack"),
-					onClick: n[3] ||= (e) => C(c).moveSelectedDown()
+					title: w(u)("toolbar.sendToBack"),
+					onClick: n[3] ||= (e) => w(c).moveSelectedDown()
 				}, [...n[34] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2204,25 +2211,25 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [o("path", { d: "m6 9 6 6 6-6" })], -1)]], 8, dt)) : i("", !0),
-				C(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
+				}, [o("path", { d: "m6 9 6 6 6-6" })], -1)]], 8, Mn)) : i("", !0),
+				w(c).selectedStrokeIds.size > 0 ? (_(), a("button", {
 					key: 2,
 					class: "canvas-tb-btn canvas-tb-btn--danger",
-					title: C(u)("toolbar.delete"),
-					onClick: n[4] ||= (e) => C(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, ft)) : i("", !0)
+					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)
 			], 32),
-			V.value || C(c).showZoomIndicator ? (_(), a("div", {
+			N.value || w(c).showZoomIndicator ? (_(), a("div", {
 				key: 0,
 				class: "zoom-control",
-				onTouchstart: n[11] ||= k(() => {}, ["stop", "prevent"])
+				onTouchstart: n[11] ||= O(() => {}, ["stop", "prevent"])
 			}, [
-				V.value ? (_(), a("button", {
+				N.value ? (_(), a("button", {
 					key: 0,
 					class: "zoom-btn",
-					title: C(u)("zoom.zoomOut"),
-					onMousedown: k(ce, ["stop", "prevent"]),
-					onTouchstart: k(ce, ["stop", "prevent"])
+					title: w(u)("zoom.zoomOut"),
+					onMousedown: O(V, ["stop", "prevent"]),
+					onTouchstart: O(V, ["stop", "prevent"])
 				}, [...n[36] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2236,14 +2243,14 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 					y1: "12",
 					x2: "19",
 					y2: "12"
-				})], -1)]], 40, pt)) : i("", !0),
-				o("span", mt, S(C(c).getZoomPercent()) + "%", 1),
-				V.value ? (_(), a("button", {
+				})], -1)]], 40, Pn)) : i("", !0),
+				o("span", Fn, C(w(c).getZoomPercent()) + "%", 1),
+				N.value ? (_(), a("button", {
 					key: 1,
 					class: "zoom-btn",
-					title: C(u)("zoom.zoomIn"),
-					onMousedown: k(G, ["stop", "prevent"]),
-					onTouchstart: k(G, ["stop", "prevent"])
+					title: w(u)("zoom.zoomIn"),
+					onMousedown: O(B, ["stop", "prevent"]),
+					onTouchstart: O(B, ["stop", "prevent"])
 				}, [...n[37] ||= [o("svg", {
 					width: "16",
 					height: "16",
@@ -2262,17 +2269,17 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 					y1: "12",
 					x2: "19",
 					y2: "12"
-				})], -1)]], 40, ht)) : i("", !0)
+				})], -1)]], 40, In)) : i("", !0)
 			], 32)) : i("", !0),
-			W.value ? (_(), a("div", {
+			I.value ? (_(), a("div", {
 				key: 1,
 				class: "text-format-control",
-				onTouchstart: n[22] ||= k(() => {}, ["stop", "prevent"])
+				onTouchstart: n[22] ||= O(() => {}, ["stop", "prevent"])
 			}, [
 				o("button", {
 					class: "font-size-btn",
-					onMousedown: n[12] ||= k((e) => J(-1), ["stop", "prevent"]),
-					onTouchstart: n[13] ||= k((e) => J(-1), ["stop", "prevent"])
+					onMousedown: n[12] ||= O((e) => me(-1), ["stop", "prevent"]),
+					onTouchstart: n[13] ||= O((e) => me(-1), ["stop", "prevent"])
 				}, [...n[38] ||= [o("svg", {
 					width: "12",
 					height: "12",
@@ -2287,11 +2294,11 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 					x2: "19",
 					y2: "12"
 				})], -1)]], 32),
-				o("span", gt, S(W.value.fontSize ?? C(16)), 1),
+				o("span", Ln, C(I.value.fontSize ?? w(16)), 1),
 				o("button", {
 					class: "font-size-btn",
-					onMousedown: n[14] ||= k((e) => J(1), ["stop", "prevent"]),
-					onTouchstart: n[15] ||= k((e) => J(1), ["stop", "prevent"])
+					onMousedown: n[14] ||= O((e) => me(1), ["stop", "prevent"]),
+					onTouchstart: n[15] ||= O((e) => me(1), ["stop", "prevent"])
 				}, [...n[39] ||= [o("svg", {
 					width: "12",
 					height: "12",
@@ -2313,27 +2320,27 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				})], -1)]], 32),
 				n[43] ||= o("div", { class: "text-align-separator" }, null, -1),
 				o("button", {
-					class: p(["text-align-btn", { active: W.value.textAlign === "left" || !W.value.textAlign }]),
-					title: C(u)("textAlign.left"),
-					onMousedown: n[16] ||= k((e) => Y("left"), ["stop", "prevent"]),
-					onTouchstart: n[17] ||= k((e) => Y("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, _t),
+					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),
 				o("button", {
-					class: p(["text-align-btn", { active: W.value.textAlign === "center" }]),
-					title: C(u)("textAlign.center"),
-					onMousedown: n[18] ||= k((e) => Y("center"), ["stop", "prevent"]),
-					onTouchstart: n[19] ||= k((e) => Y("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, vt),
+					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),
 				o("button", {
-					class: p(["text-align-btn", { active: W.value.textAlign === "right" }]),
-					title: C(u)("textAlign.right"),
-					onMousedown: n[20] ||= k((e) => Y("right"), ["stop", "prevent"]),
-					onTouchstart: n[21] ||= k((e) => Y("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, yt)
+					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)
 			], 32)) : i("", !0)
 		], 32));
 	}
-}), [["__scopeId", "data-v-975e0b8b"]]), xt = { class: "palette-header" }, St = { class: "palette-title" }, Ct = { class: "current-color" }, wt = {
+}), [["__scopeId", "data-v-975e0b8b"]]), Hn = { class: "palette-header" }, Un = { class: "palette-title" }, Wn = { class: "current-color" }, Gn = {
 	key: 0,
 	width: "14",
 	height: "14",
@@ -2342,13 +2349,13 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 	stroke: "currentColor",
 	"stroke-width": "2",
 	"stroke-linecap": "round"
-}, Tt = { class: "preset-grid" }, Et = ["title", "onClick"], Dt = {
+}, Kn = { class: "preset-grid" }, qn = ["title", "onClick"], Jn = {
 	key: 0,
 	class: "transparent-row"
-}, Ot = { class: "palette-footer" }, kt = { class: "custom-color" }, At = ["value"], jt = { class: "custom-label" }, Mt = /*#__PURE__*/ Le(/* @__PURE__ */ l({
+}, Yn = { class: "palette-footer" }, Xn = { class: "custom-color" }, Zn = ["value"], Qn = { class: "custom-label" }, $n = /*#__PURE__*/ en(/* @__PURE__ */ l({
 	__name: "ColorPalette",
 	setup(s) {
-		let c = B(), { t: l } = ee(), u = L(), d = n(() => {
+		let c = st(), { t: l } = ie(), u = ae(), d = n(() => {
 			if (!u?.value) return {};
 			let e = u.value.getBoundingClientRect();
 			return {
@@ -2392,35 +2399,35 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 		function v() {
 			c.setColor("transparent"), c.hideColorPalette();
 		}
-		return (n, s) => (_(), r(t, { to: "body" }, [C(c).showColorPalette ? (_(), a("div", {
+		return (n, s) => (_(), r(t, { to: "body" }, [w(c).showColorPalette ? (_(), a("div", {
 			key: 0,
 			class: "overlay",
-			onClick: s[1] ||= (...e) => C(c).hideColorPalette && C(c).hideColorPalette(...e)
+			onClick: s[1] ||= (...e) => w(c).hideColorPalette && w(c).hideColorPalette(...e)
 		}, [o("div", {
 			class: "color-palette",
 			style: m(d.value),
-			onClick: s[0] ||= k(() => {}, ["stop"])
+			onClick: s[0] ||= O(() => {}, ["stop"])
 		}, [
-			o("div", xt, [o("span", St, S(C(c).activeColorSlot === "textColor" ? C(l)("color.textColor") : C(c).activeColorSlot === "foreground" ? C(l)("palette.stroke") : C(l)("palette.fill")), 1), o("div", Ct, [o("div", {
+			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", {
 				class: p(["current-swatch", {
-					fill: C(c).activeColorSlot === "background",
-					"current-transparent": C(c).activeColorSlot === "background" && C(c).backgroundColor === "transparent"
+					fill: w(c).activeColorSlot === "background",
+					"current-transparent": w(c).activeColorSlot === "background" && w(c).backgroundColor === "transparent"
 				}]),
-				style: m({ background: C(c).activeColorSlot === "textColor" ? C(c).textColor : C(c).activeColorSlot === "foreground" ? C(c).foregroundColor : C(c).backgroundColor === "transparent" ? "none" : C(c).backgroundColor })
-			}, [C(c).activeColorSlot === "background" && C(c).backgroundColor === "transparent" ? (_(), a("svg", wt, [...s[2] ||= [o("line", {
+				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", {
 				x1: "5",
 				y1: "5",
 				x2: "19",
 				y2: "19"
 			}, null, -1)]])) : i("", !0)], 6)])]),
-			o("div", Tt, [(_(), a(e, null, b(f, (e) => o("button", {
+			o("div", Kn, [(_(), 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, Et)), 64))]),
-			C(c).activeColorSlot === "background" ? (_(), a("div", Dt, [o("button", {
+			}, null, 12, qn)), 64))]),
+			w(c).activeColorSlot === "background" ? (_(), a("div", Jn, [o("button", {
 				class: "color-swatch transparent-swatch",
 				title: "透明（无填充）",
 				onClick: v
@@ -2438,15 +2445,15 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				x2: "19",
 				y2: "19"
 			})], -1)]])])) : i("", !0),
-			o("div", Ot, [o("div", kt, [o("input", {
+			o("div", Yn, [o("div", Xn, [o("input", {
 				type: "color",
-				value: C(c).activeColorSlot === "textColor" ? C(c).textColor : C(c).activeColorSlot === "foreground" ? C(c).foregroundColor : C(c).backgroundColor === "transparent" ? "#ffffff" : C(c).backgroundColor,
+				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, At), o("span", jt, S(C(l)("palette.custom")), 1)])])
+			}, null, 40, Zn), o("span", Qn, C(w(l)("palette.custom")), 1)])])
 		], 4)])) : i("", !0)]));
 	}
-}), [["__scopeId", "data-v-a8b8bc9c"]]), Nt = /*#__PURE__*/ Le(/* @__PURE__ */ l({
+}), [["__scopeId", "data-v-a8b8bc9c"]]), er = /*#__PURE__*/ en(/* @__PURE__ */ l({
 	__name: "Painter",
 	props: {
 		theme: { default: "light" },
@@ -2468,10 +2475,10 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 				height: e(r.height)
 			};
 		});
-		P(o.value);
-		let l = y(null);
-		I(l);
-		let u = B(), d = ie();
+		A(o.value);
+		let l = b(null);
+		M(l);
+		let u = st(), d = ft();
 		u.reset(), d.reset();
 		let f = !1;
 		function h(e) {
@@ -2512,11 +2519,11 @@ var Ke = /*#__PURE__*/ Le(/* @__PURE__ */ l({
 			class: p(["wb-root", g.value]),
 			style: m(s.value)
 		}, [
-			c(Re),
-			c(bt),
-			c(Mt)
+			c(tn),
+			c(Vn),
+			c($n)
 		], 6));
 	}
 }), [["__scopeId", "data-v-40d42bb5"]]);
 //#endregion
-export { R as DEFAULT_CANVAS_HEIGHT, te as DEFAULT_CANVAS_WIDTH, z as DEFAULT_FONT_SIZE, re as HIT_THRESHOLD, Nt as Painter, Nt as default, ne as STROKE_WIDTH };
+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 };