xiaodao-painter 0.1.6

package/dist/xiaodao-painter.es.js

@@ -0,0 +1,2522 @@
+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";
+//#region src/components/painter/utils/i18n.ts
+var j = {
+	"zh-CN": {
+		"tool.select": "选择",
+		"tool.pencil": "铅笔",
+		"tool.line": "直线",
+		"tool.circle": "圆形",
+		"tool.rect": "矩形",
+		"tool.triangle": "三角形",
+		"tool.star": "五角星",
+		"tool.pan": "移动画布",
+		"tool.zoom": "缩放",
+		"tool.text": "文本框",
+		"color.foreground": "前景色（描边）",
+		"color.background": "背景色（填充）",
+		"color.textColor": "文本颜色",
+		"palette.stroke": "描边颜色",
+		"palette.fill": "填充颜色",
+		"palette.custom": "自定义颜色",
+		"toolbar.undo": "撤销",
+		"toolbar.redo": "重做",
+		"toolbar.bringToFront": "上移图层",
+		"toolbar.sendToBack": "下移图层",
+		"toolbar.delete": "删除",
+		"zoom.label": "缩放：{percent}%",
+		"zoom.zoomIn": "放大",
+		"zoom.zoomOut": "缩小",
+		"canvasSize.title": "画布设置",
+		"canvasSize.width": "宽度",
+		"canvasSize.height": "高度",
+		"canvasSize.confirm": "确定",
+		"canvasSize.cancel": "取消",
+		"canvasSize.background": "背景",
+		"canvasSize.transparent": "透明",
+		"canvasSize.solidColor": "纯色",
+		"textAlign.left": "左对齐",
+		"textAlign.center": "居中",
+		"textAlign.right": "右对齐"
+	},
+	"en-US": {
+		"tool.select": "Select",
+		"tool.pencil": "Pencil",
+		"tool.line": "Line",
+		"tool.circle": "Circle",
+		"tool.rect": "Rectangle",
+		"tool.triangle": "Triangle",
+		"tool.star": "Star",
+		"tool.pan": "Pan Canvas",
+		"tool.zoom": "Zoom",
+		"tool.text": "Text",
+		"color.foreground": "Stroke Color",
+		"color.background": "Fill Color",
+		"color.textColor": "Text Color",
+		"palette.stroke": "Stroke Color",
+		"palette.fill": "Fill Color",
+		"palette.custom": "Custom Color",
+		"toolbar.undo": "Undo",
+		"toolbar.redo": "Redo",
+		"toolbar.bringToFront": "Bring to Front",
+		"toolbar.sendToBack": "Send to Back",
+		"toolbar.delete": "Delete",
+		"zoom.label": "Zoom: {percent}%",
+		"zoom.zoomIn": "Zoom In",
+		"zoom.zoomOut": "Zoom Out",
+		"canvasSize.title": "Canvas Settings",
+		"canvasSize.width": "Width",
+		"canvasSize.height": "Height",
+		"canvasSize.confirm": "OK",
+		"canvasSize.cancel": "Cancel",
+		"canvasSize.background": "Background",
+		"canvasSize.transparent": "Transparent",
+		"canvasSize.solidColor": "Solid Color",
+		"textAlign.left": "Align Left",
+		"textAlign.center": "Align Center",
+		"textAlign.right": "Align Right"
+	}
+};
+function M(e, t) {
+	return j[e]?.[t] ?? t;
+}
+//#endregion
+//#region src/components/painter/composables/useI18n.ts
+var N = Symbol("wb-locale");
+function P(e) {
+	v(N, e);
+}
+function ee() {
+	let e = u(N, "zh-CN");
+	return {
+		locale: e,
+		t: (t) => M(e, t)
+	};
+}
+var F = Symbol("wb-root-el");
+function I(e) {
+	v(F, e);
+}
+function L() {
+	return u(F, 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
+			} : {}
+		};
+	}
+	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 = [];
+	}
+	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
+	};
+}), 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";
+	}
+	return {
+		activeTool: e,
+		setTool: t,
+		reset: n
+	};
+}), V = { class: "toolbar" }, H = ["disabled"], U = { class: "tool-group" }, W = ["title", "onClick"], ae = {
+	key: 0,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.6",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, oe = {
+	key: 1,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.8",
+	"stroke-linecap": "round"
+}, se = {
+	key: 2,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.8",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, G = {
+	key: 3,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.8",
+	"stroke-linecap": "round"
+}, ce = {
+	key: 4,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.8"
+}, le = {
+	key: 5,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.8",
+	"stroke-linejoin": "round"
+}, ue = {
+	key: 6,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.8",
+	"stroke-linejoin": "round"
+}, K = {
+	key: 7,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.8",
+	"stroke-linejoin": "round"
+}, q = {
+	key: 8,
+	class: "tool-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"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 = {
+	key: 0,
+	class: "mixed-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round"
+}, Ae = ["title"], je = {
+	key: 0,
+	class: "mixed-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round"
+}, Me = ["title"], Ne = {
+	key: 0,
+	class: "mixed-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round"
+}, Pe = {
+	key: 1,
+	class: "mixed-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round"
+}, Fe = 42, Ie = /*@__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 e = v.value;
+			e && (x.value = e.scrollTop > 0, T.value = e.scrollTop + e.clientHeight < e.scrollHeight - 1);
+		}
+		function k() {
+			let e = v.value;
+			e && e.scrollBy({
+				top: -42,
+				behavior: "smooth"
+			});
+		}
+		function A() {
+			let e = v.value;
+			e && e.scrollBy({
+				top: Fe,
+				behavior: "smooth"
+			});
+		}
+		let j = null;
+		h(() => {
+			j = new ResizeObserver(() => E()), v.value && j.observe(v.value), E();
+		}), g(() => {
+			j?.disconnect();
+		});
+		let M = [
+			"select",
+			"pan",
+			"pencil",
+			"line",
+			"circle",
+			"rect",
+			"triangle",
+			"star",
+			"text"
+		], N = n(() => u.selectedStrokeIds.size > 0), P = y(!1), F = y({
+			width: u.canvasWidth,
+			height: u.canvasHeight
+		}), I = y(u.canvasBackgroundColor);
+		function te() {
+			F.value = {
+				width: u.canvasWidth,
+				height: u.canvasHeight
+			}, I.value = u.canvasBackgroundColor, P.value = !0;
+		}
+		let R = y(null);
+		function ne() {
+			R.value?.click();
+		}
+		function z(e) {
+			let t = e.target;
+			I.value = t.value;
+		}
+		function re() {
+			I.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 Le() {
+			P.value = !1;
+		}
+		let Re = n(() => {
+			if (!f?.value) return {};
+			let e = f.value.getBoundingClientRect();
+			return {
+				left: e.left + 52 + 12 + "px",
+				bottom: window.innerHeight - e.bottom + 80 + "px",
+				position: "fixed"
+			};
+		});
+		function ze(e) {
+			e.target.classList.contains("canvas-size-backdrop") && (P.value = !1);
+		}
+		function Be(e) {
+			e.key === "Escape" && (P.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() {
+			u.setColorSlot("textColor"), u.toggleColorPalette();
+		}
+		function Ye() {
+			We.value || (u.setColorSlot("foreground"), u.toggleColorPalette());
+		}
+		function Xe() {
+			Ge.value || (u.setColorSlot("background"), u.toggleColorPalette());
+		}
+		return (n, c) => (_(), a("div", V, [
+			x.value || T.value ? (_(), a("button", {
+				key: 0,
+				class: "scroll-btn scroll-up",
+				disabled: !x.value,
+				onClick: k
+			}, [...c[3] ||= [o("svg", {
+				class: "scroll-icon",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}, [o("polyline", { points: "18 15 12 9 6 15" })], -1)]], 8, H)) : 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", {
+				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", {
+				x1: "5",
+				y1: "19",
+				x2: "19",
+				y2: "5"
+			}, null, -1)]])) : e === "circle" ? (_(), a("svg", ce, [...c[8] ||= [o("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}, null, -1)]])) : e === "rect" ? (_(), a("svg", le, [...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] ||= [
+				o("polyline", { points: "4 7 4 4 20 4 20 7" }, null, -1),
+				o("line", {
+					x1: "9",
+					y1: "20",
+					x2: "15",
+					y2: "20"
+				}, null, -1),
+				o("line", {
+					x1: "12",
+					y1: "4",
+					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", {
+				key: 1,
+				class: "scroll-btn scroll-down",
+				disabled: !T.value,
+				onClick: A
+			}, [...c[14] ||= [o("svg", {
+				class: "scroll-icon",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}, [o("polyline", { points: "6 9 12 15 18 9" })], -1)]], 8, pe)) : i("", !0),
+			c[24] ||= o("div", { class: "spacer" }, null, -1),
+			o("div", me, [o("button", {
+				class: "tool-btn",
+				title: C(d)("canvasSize.title"),
+				onClick: te
+			}, [...c[15] ||= [o("svg", {
+				class: "tool-icon",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.8",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}, [
+				o("rect", {
+					x: "2",
+					y: "2",
+					width: "20",
+					height: "14",
+					rx: "1.5"
+				}),
+				o("line", {
+					x1: "7",
+					y1: "16",
+					x2: "5",
+					y2: "22"
+				}),
+				o("line", {
+					x1: "17",
+					y1: "16",
+					x2: "19",
+					y2: "22"
+				})
+			], -1)]], 8, he), (_(), r(t, { to: "body" }, [P.value ? (_(), a("div", {
+				key: 0,
+				class: "canvas-size-backdrop",
+				onMousedown: ze
+			}, [o("div", {
+				class: "canvas-size-popover",
+				style: m(Re.value),
+				onKeydown: Be
+			}, [
+				o("div", ge, S(C(d)("canvasSize.title")), 1),
+				o("div", _e, [
+					o("label", ve, S(C(d)("canvasSize.width")), 1),
+					D(o("input", {
+						ref: "widthInput",
+						"onUpdate:modelValue": c[1] ||= (e) => F.value.width = e,
+						type: "number",
+						min: "1",
+						class: "popover-input",
+						onKeydown: O(Ie, ["enter"])
+					}, null, 544), [[
+						w,
+						F.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),
+					D(o("input", {
+						"onUpdate:modelValue": c[2] ||= (e) => F.value.height = e,
+						type: "number",
+						min: "1",
+						class: "popover-input",
+						onKeydown: O(Ie, ["enter"])
+					}, null, 544), [[
+						w,
+						F.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("span", {
+					class: "bg-color-fill",
+					style: m({ background: I.value === "transparent" ? "#ffffff" : I.value })
+				}, null, 4), o("input", {
+					ref_key: "hiddenColorInput",
+					ref: R,
+					type: "color",
+					class: "hidden-color-input",
+					value: I.value === "transparent" ? "#ffffff" : I.value,
+					onChange: z
+				}, null, 40, Ce)], 10, Se), o("button", {
+					class: p([
+						"bg-radio-btn",
+						"bg-radio-btn--transparent",
+						{ active: I.value === "transparent" }
+					]),
+					title: C(d)("canvasSize.transparent"),
+					onClick: re
+				}, [...c[18] ||= [o("svg", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round"
+				}, [o("line", {
+					x1: "5",
+					y1: "5",
+					x2: "19",
+					y2: "19"
+				})], -1)]], 10, we)])]),
+				o("div", Te, [o("button", {
+					class: "popover-btn cancel",
+					onClick: Le
+				}, S(C(d)("canvasSize.cancel")), 1), o("button", {
+					class: "popover-btn confirm",
+					onClick: Ie
+				}, S(C(d)("canvasSize.confirm")), 1)])
+			], 36)], 32)) : i("", !0)]))]),
+			o("div", Ee, [
+				Q.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: "text-color-icon",
+					style: m({ color: qe.value ? "var(--wb-text-secondary)" : Ke.value }),
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "1.8",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, [...c[19] ||= [
+					o("polyline", { points: "4 7 4 4 20 4 20 7" }, null, -1),
+					o("line", {
+						x1: "9",
+						y1: "20",
+						x2: "15",
+						y2: "20"
+					}, null, -1),
+					o("line", {
+						x1: "12",
+						y1: "4",
+						x2: "12",
+						y2: "20"
+					}, null, -1)
+				]], 4)), qe.value ? (_(), a("svg", ke, [...c[20] ||= [o("line", {
+					x1: "5",
+					y1: "12",
+					x2: "19",
+					y2: "12"
+				}, null, -1), o("line", {
+					x1: "12",
+					y1: "5",
+					x2: "12",
+					y2: "19"
+				}, null, -1)]])) : i("", !0)])], 10, De)) : i("", !0),
+				o("div", {
+					class: p(["color-indicator", {
+						active: C(u).showColorPalette && C(u).activeColorSlot === "foreground",
+						disabled: We.value
+					}]),
+					title: C(d)("color.foreground"),
+					onClick: Ye
+				}, [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", {
+					x1: "5",
+					y1: "12",
+					x2: "19",
+					y2: "12"
+				}, null, -1), o("line", {
+					x1: "12",
+					y1: "5",
+					x2: "12",
+					y2: "19"
+				}, null, -1)]])) : i("", !0)], 6)], 10, Ae),
+				o("div", {
+					class: p(["color-indicator", {
+						active: C(u).showColorPalette && C(u).activeColorSlot === "background",
+						disabled: Ge.value
+					}]),
+					title: C(d)("color.background"),
+					onClick: Xe
+				}, [o("div", {
+					class: p(["color-swatch bg", {
+						mixed: He.value,
+						transparent: !He.value && Z.value === "transparent"
+					}]),
+					style: m({ background: He.value || Z.value === "transparent" ? "none" : Z.value })
+				}, [He.value ? (_(), a("svg", Ne, [...c[22] ||= [o("line", {
+					x1: "5",
+					y1: "12",
+					x2: "19",
+					y2: "12"
+				}, null, -1), o("line", {
+					x1: "12",
+					y1: "5",
+					x2: "12",
+					y2: "19"
+				}, null, -1)]])) : Z.value === "transparent" ? (_(), a("svg", Pe, [...c[23] ||= [o("line", {
+					x1: "5",
+					y1: "5",
+					x2: "19",
+					y2: "19"
+				}, null, -1)]])) : i("", !0)], 6)], 10, Me)
+			])
+		]));
+	}
+}), Le = (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"]]);
+//#endregion
+//#region src/components/painter/utils/geometry.ts
+function ze(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;
+		s.push({
+			x: e + n * Math.cos(c),
+			y: t - o * r * Math.sin(c)
+		}), s.push({
+			x: e + n * a * Math.cos(l),
+			y: t - o * r * a * Math.sin(l)
+		});
+	}
+	return s;
+}
+function Be(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 ? [
+		{
+			x: i + o / 2,
+			y: a
+		},
+		{
+			x: i + o,
+			y: a + s
+		},
+		{
+			x: i,
+			y: a + s
+		}
+	] : [
+		{
+			x: i + o / 2,
+			y: a + s
+		},
+		{
+			x: i,
+			y: a
+		},
+		{
+			x: i + o,
+			y: a
+		}
+	];
+}
+function Ve(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) {
+	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;
+		o > e.y != c > e.y && e.x < (s - a) * (e.y - o) / (c - o) + a && (n = !n);
+	}
+	return n;
+}
+function Z(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) {
+	if (e.length === 0) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	let t = Infinity, n = Infinity, r = -Infinity, i = -Infinity;
+	for (let a of e) a.x < t && (t = a.x), a.y < n && (n = a.y), a.x > r && (r = a.x), a.y > i && (i = a.y);
+	return {
+		x: t,
+		y: n,
+		width: r - t,
+		height: i - n
+	};
+}
+function Q(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;
+			return !1;
+		case "line": return Ve(e, {
+			x: n,
+			y: r
+		}, {
+			x: n + i,
+			y: r + a
+		}) < 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);
+		}
+		case "rect": {
+			if (l && e.x >= n && e.x <= n + i && e.y >= r && e.y <= r + a) return !0;
+			let t = e.x >= n - 8 && e.x <= n + i + 8 && e.y >= r - 8 && e.y <= r + a + 8, o = e.x >= n + 8 && e.x <= n + i - 8 && e.y >= r + 8 && e.y <= r + a - 8;
+			return t && !o;
+		}
+		case "triangle": {
+			let t = Be(n, r, i, a);
+			return l && X(e, t) ? !0 : X(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);
+		}
+		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;
+	}
+}
+//#endregion
+//#region src/components/painter/composables/useDrawing.ts
+function Ue(e) {
+	let t = B(), r = ie(), i = y(!1), a = y({
+		x: 0,
+		y: 0
+	}), o = y({
+		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;
+	}
+	function D() {
+		let e = t.editingTextId;
+		if (!e || !t.strokes.find((t) => t.id === e)) return;
+		let n = T?.() ?? 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) {
+		if (!v.value) return;
+		let n = e.clientX - b.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 A(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);
+			a = Math.cos(e) * t, o = Math.sin(e) * t;
+		}
+		if (s) {
+			if (c.value) {
+				let e = Math.max(Math.abs(a), Math.abs(o));
+				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;
+				return {
+					x: t - r,
+					y: n - i,
+					width: r * 2,
+					height: i * 2
+				};
+			}
+		}
+		return e === "line" || e === "triangle" || e === "star" ? {
+			x: t,
+			y: n,
+			width: a,
+			height: o
+		} : j(t, n, t + a, n + o);
+	}
+	function j(e, t, n, r) {
+		return {
+			x: Math.min(e, n),
+			y: Math.min(t, r),
+			width: Math.abs(n - e),
+			height: Math.abs(r - t)
+		};
+	}
+	let M = n(() => {
+		if (!i.value) return null;
+		let e = r.activeTool;
+		if (e === "select" || e === "pan" || e === "zoom" || e === "text") return null;
+		let { x: n, y: c } = a.value, { x: l, y: u } = o.value;
+		return e === "pencil" ? {
+			id: "__preview__",
+			type: "pencil",
+			...He(s.value),
+			points: [...s.value],
+			strokeColor: t.foregroundColor,
+			fillColor: "none",
+			strokeWidth: t.strokeWidth
+		} : {
+			id: "__preview__",
+			type: e,
+			...A(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 P(n, r) {
+		let i = e.value;
+		if (!i) return {
+			x: 0,
+			y: 0
+		};
+		let a = i.getBoundingClientRect();
+		return {
+			x: (n - a.left) / t.zoomLevel,
+			y: (r - a.top) / t.zoomLevel
+		};
+	}
+	function ee(e) {
+		I(e.clientX, e.clientY, e.type === "mousedown" ? e : void 0);
+	}
+	function F(e) {
+		if (e.touches.length !== 1) return;
+		e.preventDefault();
+		let t = e.touches[0];
+		I(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);
+			return;
+		}
+		if (r.activeTool === "zoom" && l) {
+			let r = l.button === 2 ? .8 : 1.25, i = e.value;
+			if (i) {
+				let e = i.getBoundingClientRect();
+				t.zoomAt(n - e.left, c - e.top, r);
+			}
+			return;
+		}
+		if (r.activeTool === "text") {
+			let e = t.editingTextId;
+			if (e) {
+				let n = t.strokes.find((t) => t.id === e);
+				if (n && Q(u, n)) return;
+			} else {
+				let e = [...t.strokes].reverse().find((e) => Q(u, e));
+				if (e && e.type === "text") {
+					t.hoveredTextId = null, D(), t.pushUndo(), t.editingTextId = e.id;
+					return;
+				}
+			}
+			w.value = !0, a.value = u;
+			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));
+			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, {
+					x: e.x,
+					y: e.y,
+					width: e.width,
+					height: e.height,
+					points: e.points.map((e) => ({ ...e }))
+				});
+				t.isSelecting = !1, t.selectionBox = null;
+			} else d.value = !1, t.isSelecting = !0, t.selectionBox = {
+				x: u.x,
+				y: u.y,
+				width: 0,
+				height: 0
+			};
+		}
+	}
+	function L(e) {
+		R(e.clientX, e.clientY);
+	}
+	function te(e) {
+		if (e.touches.length !== 1) return;
+		e.preventDefault();
+		let t = e.touches[0];
+		R(t.clientX, t.clientY);
+	}
+	function R(e, n) {
+		let c = P(e, n);
+		if (r.activeTool === "text" && !i.value && !t.editingTextId) {
+			let e = [...t.strokes].reverse().find((e) => Q(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) {
+			let e = c.x - a.value.x, n = c.y - a.value.y;
+			for (let r of t.selectedStrokes) {
+				let i = f.value.get(r.id);
+				i && t.updateStroke(r.id, {
+					x: i.x + e,
+					y: i.y + n,
+					points: i.points.map((t) => ({
+						x: t.x + e,
+						y: t.y + n
+					}))
+				});
+			}
+		} else t.selectionBox = {
+			x: Math.min(a.value.x, c.x),
+			y: Math.min(a.value.y, c.y),
+			width: Math.abs(c.x - a.value.x),
+			height: Math.abs(c.y - a.value.y)
+		};
+	}
+	function ne(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;
+		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 re(e) {
+		H(e.clientX, e.clientY);
+	}
+	function V(e) {
+		let t = e.changedTouches[0];
+		t && H(t.clientX, t.clientY);
+	}
+	function H(e, n) {
+		if (r.activeTool === "zoom") return;
+		if (r.activeTool === "text") {
+			if (w.value) {
+				w.value = !1, D();
+				let e = t.buildStroke("text", a.value.x, a.value.y, 0, 0, []);
+				t.addStroke(e), t.editingTextId = e.id;
+			}
+			return;
+		}
+		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);
+		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));
+					t.selectStroke(e?.id ?? null);
+				} else {
+					let e = t.selectionBox, n = [];
+					for (let r of [...t.strokes].reverse()) {
+						let i = t.getStrokeDisplayBounds(r);
+						i.x >= e.x && i.x + i.width <= e.x + e.width && i.y >= e.y && i.y + i.height <= e.y + e.height && n.push(r.id);
+					}
+					t.selectStrokes(n);
+				}
+				t.selectionBox = null;
+			}
+			return;
+		}
+		if (u < 3) {
+			t.clearSelection();
+			return;
+		}
+		let p = r.activeTool, { x: m, y: h } = a.value;
+		if (p === "pencil") {
+			if (s.value.length < 2) {
+				t.clearSelection();
+				return;
+			}
+			let e = s.value.map((e) => ({
+				x: Math.round(e.x),
+				y: Math.round(e.y)
+			})), n = He(e);
+			if (n.width < 3 && n.height < 3) {
+				t.clearSelection();
+				return;
+			}
+			let i = t.buildStroke("pencil", n.x, n.y, n.width, n.height, e);
+			t.addStroke(i), r.setTool("select");
+			return;
+		}
+		let g = o.x - m, _ = o.y - h;
+		if (Math.abs(g) < 3 && Math.abs(_) < 3) {
+			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, []);
+		t.addStroke(y), r.setTool("select");
+	}
+	function U(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) {
+		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) {
+		t.pushUndo(), t.editingTextId = e;
+	}
+	function oe(e) {
+		let t = e.ctrlKey || e.metaKey;
+		c.value = t, l.value = e.shiftKey, u.value = e.shiftKey;
+	}
+	function se() {
+		c.value = !1, l.value = !1, u.value = !1;
+	}
+	function G(e, t) {
+		let { x: n, y: r, w: i, h: a } = e;
+		switch (t) {
+			case "nw": return {
+				x: n + i,
+				y: r + a
+			};
+			case "n": return {
+				x: n + i / 2,
+				y: r + a
+			};
+			case "ne": return {
+				x: n,
+				y: r + a
+			};
+			case "e": return {
+				x: n,
+				y: r + a / 2
+			};
+			case "se": return {
+				x: n,
+				y: r
+			};
+			case "s": return {
+				x: n + i / 2,
+				y: r
+			};
+			case "sw": return {
+				x: n + i,
+				y: r
+			};
+			case "w": return {
+				x: n + i,
+				y: r + a / 2
+			};
+			case "line-start": return {
+				x: n + i,
+				y: r + a
+			};
+			case "line-end": return {
+				x: n,
+				y: r
+			};
+			default: return {
+				x: n + i,
+				y: r + a
+			};
+		}
+	}
+	function ce(e) {
+		return e === "n" || e === "s" || e === "e" || e === "w";
+	}
+	function le(e, n, r, i) {
+		let s = t.strokes.find((t) => t.id === e);
+		if (!s) return;
+		t.pushUndo();
+		let c = me(s);
+		_.value = {
+			x: c.x,
+			y: c.y,
+			width: c.width,
+			height: c.height,
+			type: s.type
+		}, m.value = e, h.value = n, g.value = r, p.value = !0;
+		let l, u;
+		if ("touches" in i) {
+			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);
+	}
+	function ue(e) {
+		q(e.clientX, e.clientY);
+	}
+	function K(e) {
+		if (e.touches.length !== 1) return;
+		e.preventDefault();
+		let t = e.touches[0];
+		q(t.clientX, t.clientY);
+	}
+	function q(e, n) {
+		if (!p.value || !_.value || !m.value) return;
+		let r = P(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)) {
+			let { x: e, y: n, width: o, height: l } = i;
+			switch (h.value) {
+				case "n": {
+					let t = Math.abs(r.y - s);
+					c = {
+						x: e,
+						y: s - t,
+						width: o,
+						height: t * 2
+					};
+					break;
+				}
+				case "s": {
+					let t = Math.abs(r.y - s);
+					c = {
+						x: e,
+						y: s - t,
+						width: o,
+						height: t * 2
+					};
+					break;
+				}
+				case "e": {
+					let e = Math.abs(r.x - a);
+					c = {
+						x: a - e,
+						y: n,
+						width: e * 2,
+						height: l
+					};
+					break;
+				}
+				case "w": {
+					let e = Math.abs(r.x - a);
+					c = {
+						x: a - e,
+						y: n,
+						width: e * 2,
+						height: l
+					};
+					break;
+				}
+				default: c = {
+					x: e,
+					y: n,
+					width: o,
+					height: l
+				};
+			}
+			t.updateStroke(m.value, c);
+			return;
+		}
+		if (l.value) {
+			c = A(i.type, a, s, r.x, r.y), t.updateStroke(m.value, c);
+			return;
+		}
+		if (ce(h.value)) {
+			let { x: e, y: t, width: n, height: a } = i;
+			switch (h.value) {
+				case "n": {
+					let i = t + a;
+					c = {
+						x: e,
+						y: Math.min(r.y, i),
+						width: n,
+						height: Math.abs(r.y - i)
+					};
+					break;
+				}
+				case "s":
+					c = {
+						x: e,
+						y: t,
+						width: n,
+						height: Math.abs(r.y - t)
+					};
+					break;
+				case "e":
+					c = {
+						x: e,
+						y: t,
+						width: Math.abs(r.x - e),
+						height: a
+					};
+					break;
+				case "w": {
+					let i = e + n;
+					c = {
+						x: Math.min(r.x, i),
+						y: t,
+						width: Math.abs(r.x - i),
+						height: a
+					};
+					break;
+				}
+				default: c = {
+					x: e,
+					y: t,
+					width: n,
+					height: a
+				};
+			}
+		} else {
+			let e = G({
+				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);
+		}
+		if (_.value?.type === "text") {
+			c.width < 1 && (c.width = 1), t.updateStroke(m.value, {
+				x: c.x,
+				width: c.width,
+				textAutoWidth: !1
+			});
+			return;
+		}
+		t.updateStroke(m.value, c);
+	}
+	function de() {
+		pe();
+	}
+	function fe(e) {
+		e.touches.length === 0 && pe();
+	}
+	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 me(e) {
+		let { type: t } = e;
+		if (t === "line" || t === "triangle" || t === "star") {
+			let { x: t, y: n, width: r, height: i } = e;
+			return {
+				x: r >= 0 ? t : t + r,
+				y: i >= 0 ? n : n + i,
+				width: Math.abs(r),
+				height: Math.abs(i)
+			};
+		}
+		return {
+			x: e.x,
+			y: e.y,
+			width: e.width,
+			height: e.height
+		};
+	}
+	return {
+		isDrawing: i,
+		previewStroke: M,
+		onMouseDown: ee,
+		onMouseMove: L,
+		onMouseUp: re,
+		onTouchStart: F,
+		onTouchMove: te,
+		onTouchEnd: V,
+		getSVGPoint: N,
+		updateModifiers: oe,
+		clearModifiers: se,
+		isResizing: p,
+		resizeCursor: g,
+		startResize: le,
+		commitTextEdit: U,
+		cancelTextEdit: W,
+		startEditText: ae,
+		saveCurrentTextEdit: D,
+		setTextContentGetter: E
+	};
+}
+//#endregion
+//#region src/components/painter/utils/svg.ts
+function We(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}`;
+	let t = `M ${e[0].x} ${e[0].y}`;
+	for (let n = 1; n < e.length - 1; n++) {
+		let r = (e[n].x + e[n + 1].x) / 2, i = (e[n].y + e[n + 1].y) / 2;
+		t += ` Q ${e[n].x} ${e[n].y} ${r} ${i}`;
+	}
+	return t += ` L ${e[e.length - 1].x} ${e[e.length - 1].y}`, t;
+}
+function Ge(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,
+		"stroke-width": l,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	};
+	switch (t) {
+		case "pencil": return {
+			tag: "path",
+			attrs: {
+				...u,
+				fill: "none",
+				d: We(o)
+			}
+		};
+		case "line": return {
+			tag: "line",
+			attrs: {
+				...u,
+				fill: "none",
+				x1: n,
+				y1: r,
+				x2: n + i,
+				y2: r + a
+			}
+		};
+		case "circle": {
+			let e = n + i / 2, t = r + a / 2, o = Math.abs(i) / 2, s = Math.abs(a) / 2;
+			return {
+				tag: "ellipse",
+				attrs: {
+					...u,
+					cx: e,
+					cy: t,
+					rx: o,
+					ry: s
+				}
+			};
+		}
+		case "rect": return {
+			tag: "rect",
+			attrs: {
+				...u,
+				x: i >= 0 ? n : n + i,
+				y: a >= 0 ? r : r + a,
+				width: Math.abs(i),
+				height: Math.abs(a)
+			}
+		};
+		case "triangle": {
+			let e = Be(n, r, i, a).map((e) => `${e.x},${e.y}`).join(" ");
+			return {
+				tag: "polygon",
+				attrs: {
+					...u,
+					points: 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(" ");
+			return {
+				tag: "polygon",
+				attrs: {
+					...u,
+					points: e
+				}
+			};
+		}
+		case "text": return {
+			tag: "g",
+			attrs: {}
+		};
+		default: return {
+			tag: "g",
+			attrs: {}
+		};
+	}
+}
+//#endregion
+//#region src/components/painter/StrokeRenderer.vue
+var Ke = /*#__PURE__*/ Le(/* @__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, {
+			class: { selected: e.isSelected },
+			"data-stroke-id": e.stroke.id
+		}), null, 16, ["class", "data-stroke-id"]));
+	}
+}), [["__scopeId", "data-v-d3706fa4"]]), qe = { key: 0 }, Je = [
+	"x",
+	"y",
+	"width",
+	"height"
+], Ye = [
+	"x",
+	"y",
+	"onMousedown",
+	"onTouchstart"
+], Xe = [
+	"x",
+	"y",
+	"onMousedown",
+	"onTouchstart"
+], Ze = 6, $ = 8, Qe = /* @__PURE__ */ l({
+	__name: "SelectionOverlay",
+	props: {
+		stroke: {},
+		startResize: { type: Function }
+	},
+	setup(t) {
+		let r = t, s = B(), c = n(() => {
+			let e = s.getStrokeDisplayBounds(r.stroke);
+			return {
+				x: e.x - Ze,
+				y: e.y - Ze,
+				w: e.width + 12,
+				h: e.height + 12
+			};
+		}), l = n(() => r.stroke.type === "line"), u = n(() => {
+			let e = r.stroke;
+			return [{
+				name: "line-start",
+				cx: e.x,
+				cy: e.y,
+				cursor: "move"
+			}, {
+				name: "line-end",
+				cx: e.x + e.width,
+				cy: e.y + e.height,
+				cursor: "move"
+			}];
+		}), d = n(() => r.stroke.type === "text"), f = n(() => {
+			let e = c.value, t = [
+				{
+					name: "nw",
+					cx: e.x,
+					cy: e.y,
+					cursor: "nwse-resize"
+				},
+				{
+					name: "n",
+					cx: e.x + e.w / 2,
+					cy: e.y,
+					cursor: "ns-resize"
+				},
+				{
+					name: "ne",
+					cx: e.x + e.w,
+					cy: e.y,
+					cursor: "nesw-resize"
+				},
+				{
+					name: "e",
+					cx: e.x + e.w,
+					cy: e.y + e.h / 2,
+					cursor: "ew-resize"
+				},
+				{
+					name: "se",
+					cx: e.x + e.w,
+					cy: e.y + e.h,
+					cursor: "nwse-resize"
+				},
+				{
+					name: "s",
+					cx: e.x + e.w / 2,
+					cy: e.y + e.h,
+					cursor: "ns-resize"
+				},
+				{
+					name: "sw",
+					cx: e.x,
+					cy: e.y + e.h,
+					cursor: "nesw-resize"
+				},
+				{
+					name: "w",
+					cx: e.x,
+					cy: e.y + e.h / 2,
+					cursor: "ew-resize"
+				}
+			];
+			return d.value ? t.filter((e) => e.name !== "n" && e.name !== "s") : t;
+		});
+		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, [
+			o("rect", {
+				x: c.value.x,
+				y: c.value.y,
+				width: c.value.w,
+				height: c.value.h,
+				fill: "none",
+				stroke: "#6366f1",
+				"stroke-width": "2",
+				"stroke-dasharray": "6 4",
+				rx: "4"
+			}, null, 8, Je),
+			(_(!0), a(e, null, b(u.value, (e) => D((_(), a("rect", {
+				key: e.name,
+				x: e.cx - $ / 2,
+				y: e.cy - $ / 2,
+				width: $,
+				height: $,
+				fill: "white",
+				stroke: "#6366f1",
+				"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", {
+				key: e.name,
+				x: e.cx - $ / 2,
+				y: e.cy - $ / 2,
+				width: $,
+				height: $,
+				fill: "white",
+				stroke: "#6366f1",
+				"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))
+		])) : i("", !0);
+	}
+}), $e = ["viewBox"], et = [
+	"width",
+	"height",
+	"fill"
+], tt = [
+	"width",
+	"height",
+	"fill"
+], nt = [
+	"width",
+	"height",
+	"stroke"
+], rt = { class: "strokes-layer" }, it = [
+	"x",
+	"y",
+	"width"
+], at = ["contenteditable", "onDblclick"], ot = [
+	"x",
+	"y",
+	"width",
+	"height"
+], st = [
+	"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({
+	__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 e = c.editingTextId;
+			if (!e) return null;
+			let t = H.value.get(e);
+			return t ? t.innerText : null;
+		}), E(() => l.activeTool, (e) => {
+			e !== "text" && ne();
+		});
+		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 e = c.hoveredTextId;
+			if (!e) return null;
+			let t = c.strokes.find((t) => t.id === e);
+			return t ? c.getStrokeDisplayBounds(t) : null;
+		}), W = n(() => {
+			let e = c.selectedStrokes;
+			return e.length === 1 && e[0].type === "text" ? e[0] : null;
+		});
+		function ae(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));
+		}
+		E(() => c.editingTextId, (e) => {
+			e && f(() => {
+				let t = H.value.get(e);
+				if (t) {
+					t.focus();
+					let e = document.createRange();
+					e.selectNodeContents(t), e.collapse(!1);
+					let n = window.getSelection();
+					n?.removeAllRanges(), n?.addRange(e);
+				}
+			});
+		});
+		function oe(e) {
+			(l.activeTool === "text" || l.activeTool === "select") && R(e);
+		}
+		function se() {
+			c.hoveredTextId = null;
+		}
+		function G() {
+			let e = d.value?.parentElement;
+			e && c.zoomAt(e.clientWidth / 2, e.clientHeight / 2, 1.1);
+		}
+		function ce() {
+			let e = d.value?.parentElement;
+			e && c.zoomAt(e.clientWidth / 2, e.clientHeight / 2, .9);
+		}
+		function le(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()));
+		}
+		function ue(e) {
+			(v.value || P.value) && M(e);
+		}
+		function K() {
+			N();
+		}
+		let q = y(0), de = y(1), fe = y(0), pe = y(0);
+		function me(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 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;
+				if (r) {
+					let e = r.getBoundingClientRect();
+					c.continuousZoomAt(fe.value - e.left, pe.value - e.top, n);
+				}
+			}
+		}
+		function _e(e) {
+			l.activeTool === "zoom" && e.touches.length < 2 && (q.value = 0);
+		}
+		let ve = null;
+		function ye() {
+			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;
+			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;
+			t && (c.pushUndo(), c.updateStroke(t.id, { textAlign: e }), c.dataVersion++);
+		}
+		function be(e) {
+			return (t) => {
+				t ? (H.value.set(e, t), f(() => xe(e, t))) : H.value.delete(e);
+			};
+		}
+		function xe(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);
+			if (n.textAutoWidth) {
+				if (Math.abs(n.width - r) < .5 && Math.abs(n.height - i) < .5) return;
+				c.updateStroke(e, {
+					width: r,
+					height: i
+				});
+			} else {
+				let t = Math.max(n.width, r);
+				if (Math.abs(n.width - t) < .5 && Math.abs(n.height - i) < .5) return;
+				c.updateStroke(e, {
+					width: t,
+					height: i
+				});
+			}
+		}
+		return h(() => {
+			window.addEventListener("keydown", le), window.addEventListener("keydown", ae), window.addEventListener("keyup", ue), window.addEventListener("blur", K), ye(), ve = new ResizeObserver(() => ye());
+			let e = d.value?.parentElement;
+			e && ve.observe(e);
+		}), g(() => {
+			window.removeEventListener("keydown", le), window.removeEventListener("keydown", ae), window.removeEventListener("keyup", ue), window.removeEventListener("blur", K), ve?.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);
+			}, ["prevent"]),
+			onTouchmove: n[28] ||= k((e) => {
+				C(A)(e), ge(e);
+			}, ["prevent"]),
+			onTouchend: n[29] ||= (e) => {
+				C(j)(e), _e(e);
+			}
+		}, [
+			o("div", {
+				ref_key: "wrapperRef",
+				ref: d,
+				class: "canvas-wrapper",
+				style: m({
+					width: C(c).canvasWidth + "px",
+					height: C(c).canvasHeight + "px",
+					transform: C(c).canvasTransform,
+					transformOrigin: "0 0"
+				})
+			}, [(_(), a("svg", {
+				class: "canvas",
+				viewBox: C(c).viewBox,
+				width: "100%",
+				height: "100%",
+				style: m({ cursor: re.value }),
+				onMouseleave: se
+			}, [
+				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", {
+					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", {
+					key: 1,
+					x: "0",
+					y: "0",
+					width: C(c).canvasWidth,
+					height: C(c).canvasHeight,
+					fill: C(c).canvasBackgroundColor
+				}, null, 8, tt)),
+				o("rect", {
+					x: "0",
+					y: "0",
+					width: C(c).canvasWidth,
+					height: C(c).canvasHeight,
+					fill: "none",
+					stroke: C(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", {
+					key: 0,
+					x: t.x,
+					y: t.y,
+					width: t.textAutoWidth ? 1 : t.width || 1,
+					height: 1,
+					style: {
+						overflow: "visible",
+						pointerEvents: "none"
+					}
+				}, [o("div", {
+					ref_for: !0,
+					ref: be(t.id),
+					xmlns: "http://www.w3.org/1999/xhtml",
+					contenteditable: C(c).editingTextId === t.id,
+					style: m({
+						fontSize: (t.fontSize ?? 16) + "px",
+						color: t.textColor ?? t.strokeColor,
+						textAlign: t.textAlign ?? "left",
+						whiteSpace: t.textAutoWidth ? "nowrap" : "pre-wrap",
+						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",
+						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, {
+					key: 1,
+					stroke: t,
+					"is-selected": C(c).isSelected(t.id)
+				}, null, 8, ["stroke", "is-selected"]))], 64))), 128))]),
+				C(x) ? (_(), r(Ke, {
+					key: 2,
+					stroke: C(x),
+					"is-selected": !1
+				}, null, 8, ["stroke"])) : i("", !0),
+				(_(!0), a(e, null, b(C(c).selectedStrokes, (e) => (_(), r(Qe, {
+					key: "sel-" + e.id,
+					stroke: e,
+					"start-resize": C(I)
+				}, null, 8, ["stroke", "start-resize"]))), 128)),
+				C(c).isSelecting && C(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,
+					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", {
+					key: 4,
+					x: U.value.x - 4,
+					y: U.value.y - 4,
+					width: U.value.width + 8,
+					height: U.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),
+			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"])
+			}, [
+				o("button", {
+					class: "canvas-tb-btn",
+					disabled: !C(c).canUndo,
+					title: C(u)("toolbar.undo"),
+					onClick: n[0] ||= (e) => C(c).undo()
+				}, [...n[31] ||= [o("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"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("button", {
+					class: "canvas-tb-btn",
+					disabled: !C(c).canRedo,
+					title: C(u)("toolbar.redo"),
+					onClick: n[1] ||= (e) => C(c).redo()
+				}, [...n[32] ||= [o("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"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", {
+					key: 0,
+					class: "canvas-tb-btn",
+					title: C(u)("toolbar.bringToFront"),
+					onClick: n[2] ||= (e) => C(c).moveSelectedUp()
+				}, [...n[33] ||= [o("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"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", {
+					key: 1,
+					class: "canvas-tb-btn",
+					title: C(u)("toolbar.sendToBack"),
+					onClick: n[3] ||= (e) => C(c).moveSelectedDown()
+				}, [...n[34] ||= [o("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"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", {
+					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)
+			], 32),
+			V.value || C(c).showZoomIndicator ? (_(), a("div", {
+				key: 0,
+				class: "zoom-control",
+				onTouchstart: n[11] ||= k(() => {}, ["stop", "prevent"])
+			}, [
+				V.value ? (_(), a("button", {
+					key: 0,
+					class: "zoom-btn",
+					title: C(u)("zoom.zoomOut"),
+					onMousedown: k(ce, ["stop", "prevent"]),
+					onTouchstart: k(ce, ["stop", "prevent"])
+				}, [...n[36] ||= [o("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round"
+				}, [o("line", {
+					x1: "5",
+					y1: "12",
+					x2: "19",
+					y2: "12"
+				})], -1)]], 40, pt)) : i("", !0),
+				o("span", mt, S(C(c).getZoomPercent()) + "%", 1),
+				V.value ? (_(), a("button", {
+					key: 1,
+					class: "zoom-btn",
+					title: C(u)("zoom.zoomIn"),
+					onMousedown: k(G, ["stop", "prevent"]),
+					onTouchstart: k(G, ["stop", "prevent"])
+				}, [...n[37] ||= [o("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round"
+				}, [o("line", {
+					x1: "12",
+					y1: "5",
+					x2: "12",
+					y2: "19"
+				}), o("line", {
+					x1: "5",
+					y1: "12",
+					x2: "19",
+					y2: "12"
+				})], -1)]], 40, ht)) : i("", !0)
+			], 32)) : i("", !0),
+			W.value ? (_(), a("div", {
+				key: 1,
+				class: "text-format-control",
+				onTouchstart: n[22] ||= k(() => {}, ["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"])
+				}, [...n[38] ||= [o("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round"
+				}, [o("line", {
+					x1: "5",
+					y1: "12",
+					x2: "19",
+					y2: "12"
+				})], -1)]], 32),
+				o("span", gt, S(W.value.fontSize ?? C(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"])
+				}, [...n[39] ||= [o("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round"
+				}, [o("line", {
+					x1: "12",
+					y1: "5",
+					x2: "12",
+					y2: "19"
+				}), o("line", {
+					x1: "5",
+					y1: "12",
+					x2: "19",
+					y2: "12"
+				})], -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),
+				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),
+				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)
+			], 32)) : i("", !0)
+		], 32));
+	}
+}), [["__scopeId", "data-v-975e0b8b"]]), xt = { class: "palette-header" }, St = { class: "palette-title" }, Ct = { class: "current-color" }, wt = {
+	key: 0,
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round"
+}, Tt = { class: "preset-grid" }, Et = ["title", "onClick"], Dt = {
+	key: 0,
+	class: "transparent-row"
+}, Ot = { class: "palette-footer" }, kt = { class: "custom-color" }, At = ["value"], jt = { class: "custom-label" }, Mt = /*#__PURE__*/ Le(/* @__PURE__ */ l({
+	__name: "ColorPalette",
+	setup(s) {
+		let c = B(), { t: l } = ee(), u = L(), d = n(() => {
+			if (!u?.value) return {};
+			let e = u.value.getBoundingClientRect();
+			return {
+				left: e.left + 60 + "px",
+				bottom: window.innerHeight - e.bottom + 9 + "px",
+				position: "fixed"
+			};
+		}), f = [
+			"#000000",
+			"#ffffff",
+			"#6b7280",
+			"#d1d5db",
+			"#dc2626",
+			"#ef4444",
+			"#f97316",
+			"#f59e0b",
+			"#16a34a",
+			"#22c55e",
+			"#0891b2",
+			"#06b6d4",
+			"#2563eb",
+			"#3b82f6",
+			"#7c3aed",
+			"#8b5cf6",
+			"#db2777",
+			"#ec4899",
+			"#a16207",
+			"#84cc16",
+			"#0d9488",
+			"#6366f1",
+			"#d946ef",
+			"#f43f5e"
+		];
+		function h(e) {
+			let t = e.target;
+			c.setColor(t.value);
+		}
+		function g(e) {
+			c.setColor(e), c.hideColorPalette();
+		}
+		function v() {
+			c.setColor("transparent"), c.hideColorPalette();
+		}
+		return (n, s) => (_(), r(t, { to: "body" }, [C(c).showColorPalette ? (_(), a("div", {
+			key: 0,
+			class: "overlay",
+			onClick: s[1] ||= (...e) => C(c).hideColorPalette && C(c).hideColorPalette(...e)
+		}, [o("div", {
+			class: "color-palette",
+			style: m(d.value),
+			onClick: s[0] ||= k(() => {}, ["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", {
+				class: p(["current-swatch", {
+					fill: C(c).activeColorSlot === "background",
+					"current-transparent": C(c).activeColorSlot === "background" && C(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", {
+				x1: "5",
+				y1: "5",
+				x2: "19",
+				y2: "19"
+			}, null, -1)]])) : i("", !0)], 6)])]),
+			o("div", Tt, [(_(), a(e, null, b(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", {
+				class: "color-swatch transparent-swatch",
+				title: "透明（无填充）",
+				onClick: v
+			}, [...s[3] ||= [o("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "#d00",
+				"stroke-width": "2",
+				"stroke-linecap": "round"
+			}, [o("line", {
+				x1: "5",
+				y1: "5",
+				x2: "19",
+				y2: "19"
+			})], -1)]])])) : i("", !0),
+			o("div", Ot, [o("div", kt, [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,
+				class: "color-picker",
+				onChange: h
+			}, null, 40, At), o("span", jt, S(C(l)("palette.custom")), 1)])])
+		], 4)])) : i("", !0)]));
+	}
+}), [["__scopeId", "data-v-a8b8bc9c"]]), Nt = /*#__PURE__*/ Le(/* @__PURE__ */ l({
+	__name: "Painter",
+	props: {
+		theme: { default: "light" },
+		locale: { default: "zh-CN" },
+		modelValue: { default: () => ({
+			strokes: [],
+			canvasWidth: 800,
+			canvasHeight: 600
+		}) },
+		width: { default: "100%" },
+		height: { default: "100%" }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, o = n(() => r.locale === "en-US" ? "en-US" : "zh-CN"), s = n(() => {
+			let e = (e) => typeof e == "number" ? `${e}px` : e;
+			return {
+				width: e(r.width),
+				height: e(r.height)
+			};
+		});
+		P(o.value);
+		let l = y(null);
+		I(l);
+		let u = B(), d = ie();
+		u.reset(), d.reset();
+		let f = !1;
+		function h(e) {
+			return e.map((e) => ({
+				...e,
+				points: e.points.map((e) => ({ ...e }))
+			}));
+		}
+		E(() => r.theme, (e, t) => {
+			u.theme = e || "light", e === "dark" && u.foregroundColor === "#000000" ? u.foregroundColor = "#ffffff" : e === "light" && t === "dark" && u.foregroundColor === "#ffffff" && (u.foregroundColor = "#000000");
+		}, { immediate: !0 });
+		let g = n(() => `wb-theme-${r.theme}`);
+		u.setCanvasSize(r.modelValue.canvasWidth ?? 800, r.modelValue.canvasHeight ?? 600), r.modelValue.canvasBackgroundColor != null && u.setCanvasBackgroundColor(r.modelValue.canvasBackgroundColor), E(() => r.modelValue.canvasWidth, (e) => {
+			e != null && u.setCanvasSize(e, u.canvasHeight);
+		}), E(() => r.modelValue.canvasHeight, (e) => {
+			e != null && u.setCanvasSize(u.canvasWidth, e);
+		}), E(() => r.modelValue.strokes, (e) => {
+			f || u.syncFromParent(e);
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		function v() {
+			f = !0, i("update:modelValue", {
+				strokes: h(u.strokes),
+				canvasWidth: u.canvasWidth,
+				canvasHeight: u.canvasHeight,
+				canvasBackgroundColor: u.canvasBackgroundColor
+			}), setTimeout(() => {
+				f = !1;
+			}, 0);
+		}
+		return E(() => `${u.strokes.length}|${u.canvasWidth}|${u.canvasHeight}|${u.canvasBackgroundColor}|${u.dataVersion}`, () => {
+			v();
+		}), (e, t) => (_(), a("div", {
+			ref_key: "rootEl",
+			ref: l,
+			class: p(["wb-root", g.value]),
+			style: m(s.value)
+		}, [
+			c(Re),
+			c(bt),
+			c(Mt)
+		], 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 };