vue-data-ui 3.25.5 → 3.25.7

package/dist/{vue-ui-annotator-DZ0O8Xa5.js → vue-ui-annotator-CTQHAPho.js}

@@ -1,13 +1,13 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { C as t, It as n, Zt as r, q as i } from "./lib-Dql7cqyA.js";
 import { n as a, t as o } from "./useHints-Dq_w2E8B.js";
-import { t as s } from "./useConfig-C_mX5pOZ.js";
+import { t as s } from "./useConfig-CIQZ6_r7.js";
 import { t as c } from "./usePrinter-DISD7q5m.js";
 import { t as l } from "./dom-to-png-C6cQJ5Hq.js";
 import { t as ee } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t as u } from "./BaseIcon-t83PDe9k.js";
-import { t as te } from "./vue-ui-accordion-DRf3NQyH.js";
-import { t as ne } from "./ColorPicker-Bn3MY7eL.js";
+import { t as u } from "./BaseIcon-D8R6_sKH.js";
+import { t as te } from "./vue-ui-accordion-BSmBUjwZ.js";
+import { t as ne } from "./ColorPicker-CUy15T72.js";
 import { Fragment as re, Teleport as ie, computed as ae, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as oe, guardReactiveProps as se, nextTick as ce, normalizeClass as g, normalizeProps as le, normalizeStyle as _, onBeforeUnmount as ue, onMounted as de, openBlock as v, ref as y, renderList as fe, renderSlot as b, toDisplayString as x, unref as pe, vModelCheckbox as me, vModelText as he, watch as ge, withCtx as S, withDirectives as _e, withModifiers as ve } from "vue";
 //#region src/registerAnnotatorShortcuts.js
 function ye(e) {
@@ -338,18 +338,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				height: 12,
 				width: 12
 			}
-		}), z = y(!1), Jt = y(1), Yt = y(void 0), Xt = y(1), Zt = y(1), B = y("start"), Qt = y(20), $t = y(100), en = n, V = y(null), tn = y(null), H = y(null), nn = y(null), rn = y(null), an = y(!1), on = y({
+		}), z = y(!1), Jt = y(1), Yt = y(void 0), Xt = y(1), Zt = y(1), B = y("start"), Qt = y(20), $t = y(100), en = n, tn = y(null), nn = y(null), V = y(null), rn = y(null), an = y(null), on = y(!1), sn = y({
 			row: 0,
 			col: 0
-		}), U = y(null), W = y(!1), G = y(null), K = y({
+		}), H = y(null), U = y(!1), W = y(null), G = y({
 			x: 0,
 			y: 0
-		}), sn = y(null), q = y([]), cn = y(!1), ln = y(null), un = y({
+		}), cn = y(null), ln = y([]), un = y(!1), dn = y(null), fn = y({
 			undo: 0,
 			redo: 0
-		}), dn = y(null);
+		}), pn = y(null);
 		y(null), y(null);
-		let fn = y(null), J = ae(() => {
+		let mn = y(null), K = ae(() => {
 			let e = s().vue_ui_annotator;
 			if (!Object.keys(be.config || {}).length) return e;
 			let n = r({
@@ -357,15 +357,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				userConfig: be.config
 			});
 			return t(n);
-		}), pn = y(J.value.style.paletteColor);
+		}), hn = y(K.value.style.paletteColor), q = ae(() => K.value.style.buttons), J = ae(() => K.value.style);
 		a({
-			config: () => J.value,
+			config: () => K.value,
 			dataset: () => [],
 			component: "VueUiAnnotator",
 			rules: [o.noHint]
 		});
-		let Y = ae(() => J.value.useCursorPointer), X = ae(() => {
-			let e = J.value.style.tooltips;
+		let Y = ae(() => K.value.useCursorPointer), X = ae(() => {
+			let e = J.value.tooltips;
 			return {
 				backgroundColor: e.backgroundColor,
 				color: e.color,
@@ -373,7 +373,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				borderRadius: `${e.borderRadius}px`,
 				boxShadow: e.boxShadow
 			};
-		}), mn = ae(() => L.value.filter((e) => e.type !== "group" || Array.isArray(e.source) && e.source.length > 0).length > 1), hn = ae(() => en[$t.value > 98 ? 98 : $t.value]), gn = ae(() => {
+		}), gn = ae(() => L.value.filter((e) => e.type !== "group" || Array.isArray(e.source) && e.source.length > 0).length > 1), _n = ae(() => en[$t.value > 98 ? 98 : $t.value]), vn = ae(() => {
 			switch (!0) {
 				case D.value: return "default";
 				case k.value: return "move";
@@ -381,11 +381,11 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				case A.value: return "move";
 				default: return "";
 			}
-		}), _n = ae(() => L.value), vn = y(null);
-		function yn(e) {
+		}), yn = ae(() => L.value), bn = y(null);
+		function xn(e) {
 			return e ? !!(F.value && F.value.id === e.id) : !1;
 		}
-		function bn(e = "") {
+		function Sn(e = "") {
 			let t = String(e).trim().split(/\s+/).map(Number).filter(Number.isFinite), n = [];
 			for (let e = 0; e + 1 < t.length; e += 2) n.push({
 				x: t[e],
@@ -393,11 +393,11 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 			});
 			return n;
 		}
-		function xn(e = []) {
+		function Cn(e = []) {
 			return e.map(({ x: e, y: t }) => `${e} ${t}`).join(" ");
 		}
-		function Sn(e = "") {
-			let t = bn(e);
+		function wn(e = "") {
+			let t = Sn(e);
 			if (!t.length) return null;
 			let n = t.map((e) => e.x), r = t.map((e) => e.y), i = Math.min(...n), a = Math.max(...n), o = Math.min(...r), s = Math.max(...r);
 			return {
@@ -409,9 +409,9 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				height: Math.max(1, s - o)
 			};
 		}
-		function Cn(e) {
+		function Tn(e) {
 			if (!e || !M.value || !A.value || !F.value || F.value.id !== e.id) return "";
-			let t = J.value.style.color || "grey", n = J.value.style.backgroundColor || "rgba(255,255,255,0.95)", r = ({ handle: r, x: i, y: a, cursor: o = "nwse-resize" }) => `
+			let t = J.value.color || "grey", n = J.value.backgroundColor || "rgba(255,255,255,0.95)", r = ({ handle: r, x: i, y: a, cursor: o = "nwse-resize" }) => `
         <circle
             data-dom-to-png-ignore
             id="${e.id}"
@@ -441,7 +441,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 			})}
         `;
 			if (e.type === "line") {
-				let t = Sn(e.path);
+				let t = wn(e.path);
 				return t ? r({
 					handle: "line-scale",
 					x: t.maxX,
@@ -449,7 +449,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				}) : "";
 			}
 			if (e.type === "circle") {
-				let t = Math.max(1, Number(e.circleRadius) || 1), n = tn.value === "circle-radius" && H.value?.shapeId === e.id && H.value?.handlePoint ? H.value.handlePoint : null;
+				let t = Math.max(1, Number(e.circleRadius) || 1), n = nn.value === "circle-radius" && V.value?.shapeId === e.id && V.value?.handlePoint ? V.value.handlePoint : null;
 				return r({
 					handle: "circle-radius",
 					x: n?.x ?? e.x + t,
@@ -492,9 +492,9 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				y: e.y + e.rectHeight
 			}) : "";
 		}
-		function wn(e) {
-			if (!e || e.type === "text" && P.value && nn.value === e.id) return "";
-			let t = yn(e) ? "initial" : "none";
+		function En(e) {
+			if (!e || e.type === "text" && P.value && rn.value === e.id) return "";
+			let t = xn(e) ? "initial" : "none";
 			switch (e.type) {
 				case "rect": return `
                 <rect
@@ -538,7 +538,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
             `;
 				}
 				case "line": {
-					let n = Sn(e.path);
+					let n = wn(e.path);
 					return n ? `
                 <rect
                     style="stroke-dasharray: 10; display:${t}"
@@ -553,7 +553,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
             ` : "";
 				}
 				case "text": {
-					let n = vn.value ? Array.from(vn.value.getElementsByTagName("text")).find((t) => t.getAttribute("data-shape-id") === e.id) : null;
+					let n = bn.value ? Array.from(bn.value.getElementsByTagName("text")).find((t) => t.getAttribute("data-shape-id") === e.id) : null;
 					if (!n) return "";
 					let { x: r, y: i, width: a, height: o } = n.getBBox();
 					return `
@@ -572,7 +572,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				default: return "";
 			}
 		}
-		function Tn(e, t = !1) {
+		function Dn(e, t = !1) {
 			switch (!0) {
 				case e.type === "circle": return `
                 <g id="${e.id}" style="display:${D.value ? "initial" : "none"};">
@@ -651,25 +651,25 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
             `;
 			}
 		}
-		function En(e = "") {
+		function On(e = "") {
 			return String(e).replace(/&nbsp;/g, "\xA0");
 		}
-		function Dn(e) {
-			return String(e?.textContent ?? "").split(Tt).map(En);
+		function kn(e) {
+			return String(e?.textContent ?? "").split(Tt).map(On);
 		}
-		function On(e, t) {
+		function An(e, t) {
 			if (!e) return;
 			let n = t.length ? t : [""];
 			e.textContent = n.join(Tt), e.lines = Math.max(0, n.length - 1);
 		}
-		function kn(e = "") {
+		function jn(e = "") {
 			return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 		}
-		function An(e = "") {
-			return kn(En(e)) || "&#8203;";
+		function Mn(e = "") {
+			return jn(On(e)) || "&#8203;";
 		}
-		function jn(e, t, n = !1) {
-			let r = Dn(e), i = Math.max(1, r.length), a = r.reduce((e, t) => Math.max(e, t.length), 0), o = Math.max(24, a * e.fontSize * .7 + 16), s = e.textAlign === "middle" ? e.x - o / 2 : e.textAlign === "end" ? e.x - o : e.x, c = Math.max(e.fontSize * 1.2, e.fontSize * i);
+		function Nn(e, t, n = !1) {
+			let r = kn(e), i = Math.max(1, r.length), a = r.reduce((e, t) => Math.max(e, t.length), 0), o = Math.max(24, a * e.fontSize * .7 + 16), s = e.textAlign === "middle" ? e.x - o / 2 : e.textAlign === "end" ? e.x - o : e.x, c = Math.max(e.fontSize * 1.2, e.fontSize * i);
 			return `
         <g id="${e.id}">
             <rect
@@ -698,11 +698,11 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
             >
                 ${t.join("")}
             </text>
-            ${Tn(e, n)}
+            ${Dn(e, n)}
         </g>
     `;
 		}
-		let Mn = ae(() => _n.value.map((e) => {
+		let Pn = ae(() => yn.value.map((e) => {
 			switch (!0) {
 				case e && e.type === "arrow": {
 					let t = e.strokeWidth > 3 ? 5 : 10, n = e.strokeWidth > 3 ? 2.5 : 5, r = `marker_${e.id}`, i = Math.max(24, Number(e.strokeWidth || 1) + 24);
@@ -724,7 +724,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
           </marker>
           </defs>
           <g id="${e.id}">
-              ${wn(e)}
+              ${En(e)}
               <path
                   id="${e.id}"
                   data-shape-hit-area="true"
@@ -745,8 +745,8 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
                   pointer-events="stroke"
                   marker-end="url(#${r})"
               />
-              ${Cn(e)}
               ${Tn(e)}
+              ${Dn(e)}
           </g>
           `,
 						id: e.id
@@ -755,7 +755,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				case e && e.type === "circle": return {
 					html: `
           <g id="${e.id}">
-              ${wn(e)}
+              ${En(e)}
               <circle 
               id="${e.id}" 
               cx="${e.x}" 
@@ -767,10 +767,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
               style="${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}"
               >
               </circle>
-              ${Cn(e)}
+              ${Tn(e)}
           </g>
           
-          ${Tn(e)}`,
+          ${Dn(e)}`,
 					id: e.id
 				};
 				case e && e.type === "group": return {
@@ -785,19 +785,19 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
                 width="${e.rectWidth}"
                 stroke="grey"
                 stroke-width="1"
-                style="rx:1 !important; ry:1 !important; ${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}; display:${j.value || D.value || yn(e) ? "initial" : "none"};"
+                style="rx:1 !important; ry:1 !important; ${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}; display:${j.value || D.value || xn(e) ? "initial" : "none"};"
                         />
             <g id="${e.id}">
             ${e.content ? e.content : ""}
             </g>
-            ${Cn(e)}
             ${Tn(e)}
+            ${Dn(e)}
             </g> `,
 					id: e.id
 				};
 				case e && e.type === "rect": return {
 					html: `<g id="${e.id}">
-            ${wn(e)}
+            ${En(e)}
             <rect
                 id="${A.value ? "" : e.id}"
                 x="${e.x}"
@@ -809,8 +809,8 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
                 stroke-width="${e.strokeWidth}"
                 style="rx:1 !important; ry:1 !important; ${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}"
             />
-            ${Cn(e)}
             ${Tn(e)}
+            ${Dn(e)}
             </g> `,
 					id: e.id
 				};
@@ -819,7 +819,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					return {
 						html: `
                 <g id="${e.id}">
-                    ${wn(e)}
+                    ${En(e)}
                     <path
                         id="${e.id}"
                         data-shape-hit-area="true"
@@ -838,15 +838,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
                         style="stroke:${e.color + e.alpha} !important; fill:none; stroke-width:${e.strokeWidth} !important; stroke-linecap: round !important; stroke-linejoin: round !important; ${e.isDash ? `stroke-dasharray: ${e.strokeWidth * 3}` : ""}"
                         pointer-events="stroke"
                     />
-                    ${Cn(e)}
                     ${Tn(e)}
+                    ${Dn(e)}
                 </g>
                 `,
 						id: e.id
 					};
 				}
 				case e && e.type === "text": {
-					let t = Dn(e), n = [];
+					let t = kn(e), n = [];
 					for (let r = 0; r < t.length; r += 1) n.push(`
         ${e.isBulletTextMode ? `<tspan
                         data-bullet-line="${r}"
@@ -860,11 +860,11 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
                     id="${e.id}"
                     x="${e.x}"
                     y="${e.y + e.fontSize * r}"
-                >${An(t[r])}</tspan>`);
+                >${Mn(t[r])}</tspan>`);
 					return {
 						html: `
-            ${wn(e)}
-            ${jn(e, n, e.isBulletTextMode)}
+            ${En(e)}
+            ${Nn(e, n, e.isBulletTextMode)}
             `,
 						id: e.id
 					};
@@ -879,7 +879,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				return Array.isArray(e) ? e.map((e) => Z(e)) : typeof e == "object" ? Object.fromEntries(Object.entries(e).map(([e, t]) => [e, Z(t)])) : e;
 			}
 		}
-		function Nn(e = !1) {
+		function Fn(e = !1) {
 			if (!w.value || !Lt.value) return;
 			T.value.end = {
 				x: I.value.x,
@@ -903,43 +903,43 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				case ["rect", "group"].includes(w.value): L.value.at(-1).rectWidth = Z(T.value.end.x - L.value.at(-1).x) > 0 ? Z(T.value.end.x - L.value.at(-1).x) : 20, L.value.at(-1).rectHeight = Z(T.value.end.y - L.value.at(-1).y) > 0 ? Z(T.value.end.y - L.value.at(-1).y) : 20;
 			}
 		}
-		function Pn() {
+		function In() {
 			if (!Lt.value) {
-				dn.value = null;
+				pn.value = null;
 				return;
 			}
-			Nn(), dn.value = requestAnimationFrame(Pn);
+			Fn(), pn.value = requestAnimationFrame(In);
 		}
-		function Fn(e) {
+		function Ln(e) {
 			let t = L.value.findIndex((t) => t.id === e);
 			if (t > -1 && t !== L.value.length - 1) {
 				let [e] = L.value.splice(t, 1);
 				L.value.push(e);
 			}
 		}
-		function In(e) {
+		function Rn(e) {
 			let t = e;
-			for (; t && t !== vn.value;) {
+			for (; t && t !== bn.value;) {
 				let e = t.id;
 				if (e && L.value.some((t) => t.id === e)) return e;
 				t = t.parentElement;
 			}
 			return null;
 		}
-		function Ln(e) {
+		function zn(e) {
 			if (!M.value) return null;
-			let t = In(e?.target);
+			let t = Rn(e?.target);
 			if (t) return t;
-			let n = vn.value?.querySelector(".annotator__glass");
+			let n = bn.value?.querySelector(".annotator__glass");
 			if (!n) return null;
 			let r = e?.touches?.[0] || e?.changedTouches?.[0], i = r ? r.clientX : e?.clientX, a = r ? r.clientY : e?.clientY;
 			if (!Number.isFinite(i) || !Number.isFinite(a)) return null;
 			let o = n.style.pointerEvents;
 			n.style.pointerEvents = "none";
 			let s = document.elementFromPoint(i, a);
-			return n.style.pointerEvents = o || "all", In(s);
+			return n.style.pointerEvents = o || "all", Rn(s);
 		}
-		function Rn(e = {}) {
+		function Bn(e = {}) {
 			let { maxEntries: t = 200, maxBytes: n = 2e6 } = e, r = {
 				open: !1,
 				before: null,
@@ -953,9 +953,9 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				lastSelectedShape: Z(F.value)
 			}), s = (e) => {
 				let t = JSON.parse(e);
-				L.value = t.shapes, F.value = t.lastSelectedShape?.id ? L.value.find((e) => e.id === t.lastSelectedShape.id) : void 0, E.value = F.value ? { id: F.value.id } : void 0, nn.value = null, rn.value = null, an.value = !1, P.value = !1, z.value = !1, U.value = null;
+				L.value = t.shapes, F.value = t.lastSelectedShape?.id ? L.value.find((e) => e.id === t.lastSelectedShape.id) : void 0, E.value = F.value ? { id: F.value.id } : void 0, rn.value = null, an.value = null, on.value = !1, P.value = !1, z.value = !1, H.value = null;
 			}, c = () => {
-				un.value.undo = r.undo.length, un.value.redo = r.redo.length;
+				fn.value.undo = r.undo.length, fn.value.redo = r.redo.length;
 			}, l = (e, o) => {
 				let s = r[e];
 				for (s.push(o), i[e] += a(o); s.length > t || i[e] > n;) {
@@ -996,24 +996,24 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				}
 			};
 		}
-		function zn() {
-			if (!sn.value) return;
-			let e = sn.value.getBoundingClientRect();
-			K.value = {
+		function Vn() {
+			if (!cn.value) return;
+			let e = cn.value.getBoundingClientRect();
+			G.value = {
 				x: e.left + e.width / 2,
 				y: e.top
 			};
 		}
 		function Q(e, t, n = "top") {
-			G.value = e, sn.value = t.currentTarget || t.target, zn(), W.value = !0, window.addEventListener("scroll", zn, !0), window.addEventListener("resize", zn, { passive: !0 });
+			W.value = e, cn.value = t.currentTarget || t.target, Vn(), U.value = !0, window.addEventListener("scroll", Vn, !0), window.addEventListener("resize", Vn, { passive: !0 });
 		}
 		function $() {
-			W.value = !1, G.value = null, sn.value = null, window.removeEventListener("scroll", zn, !0), window.removeEventListener("resize", zn);
+			U.value = !1, W.value = null, cn.value = null, window.removeEventListener("scroll", Vn, !0), window.removeEventListener("resize", Vn);
 		}
-		function Bn(e) {
-			let t = In(e?.target) || E.value?.id || Nt.value, n = L.value.find((e) => e.id === t);
+		function Hn(e) {
+			let t = Rn(e?.target) || E.value?.id || Nt.value, n = L.value.find((e) => e.id === t);
 			if (!n) {
-				V.value = null;
+				tn.value = null;
 				return;
 			}
 			F.value = n, E.value = { id: n.id };
@@ -1022,13 +1022,13 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				case "rect":
 				case "circle":
 				case "text":
-					V.value = {
+					tn.value = {
 						dx: r - n.x,
 						dy: i - n.y
 					};
 					break;
 				case "arrow":
-					V.value = {
+					tn.value = {
 						dx: r - n.x,
 						dy: i - n.y,
 						endDx: r - n.endX,
@@ -1036,30 +1036,30 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					};
 					break;
 				case "line":
-					V.value = {
+					tn.value = {
 						startX: r,
 						startY: i,
 						path: n.path
 					};
 					break;
 				case "group":
-					V.value = {
+					tn.value = {
 						dx: r - (n.x || 0),
 						dy: i - (n.y || 0)
 					};
 					break;
-				default: V.value = {
+				default: tn.value = {
 					dx: 0,
 					dy: 0
 				};
 			}
 		}
-		function Vn(e, t) {
-			if (tn.value = t || null, H.value = null, e) {
+		function Un(e, t) {
+			if (nn.value = t || null, V.value = null, e) {
 				if (e.type === "line" && t === "line-scale") {
-					let t = bn(e.path), n = Sn(e.path);
+					let t = Sn(e.path), n = wn(e.path);
 					if (!t.length || !n) return;
-					H.value = {
+					V.value = {
 						shapeId: e.id,
 						points: t,
 						bounds: n
@@ -1068,7 +1068,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				}
 				if (e.type === "rect" && t?.startsWith("rect-")) {
 					let t = Number(e.x) || 0, n = Number(e.y) || 0, r = t + Math.max(0, Number(e.rectWidth) || 0), i = n + Math.max(0, Number(e.rectHeight) || 0);
-					H.value = {
+					V.value = {
 						shapeId: e.id,
 						bounds: {
 							left: t,
@@ -1081,7 +1081,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				}
 				if (e.type === "circle" && t === "circle-radius") {
 					let t = Math.max(1, Number(e.circleRadius) || 1);
-					H.value = {
+					V.value = {
 						shapeId: e.id,
 						anchor: {
 							x: (Number(e.x) || 0) - t,
@@ -1095,7 +1095,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				}
 			}
 		}
-		function Hn(e) {
+		function Wn(e) {
 			let t = L.value.find((e) => e.id === F.value.id);
 			switch (!0) {
 				case e === "front":
@@ -1107,7 +1107,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				default: return;
 			}
 		}
-		function Un() {
+		function Gn() {
 			if (!F.value?.id) return;
 			let e = {
 				...F.value,
@@ -1117,98 +1117,98 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 			};
 			L.value.push(e);
 		}
-		function Wn(e) {
-			e && (e.color && (pn.value = e.color), Number.isFinite(Number(e.strokeWidth)) && (Mt.value = Number(e.strokeWidth)), "isDash" in e && (It.value = !!e.isDash), e.type === "circle" ? (R.value.circle.filled = !!e.isFilled, w.value = "circle") : e.type === "rect" ? (R.value.rect.filled = !!e.isFilled, w.value = "rect") : e.type === "arrow" ? w.value = "arrow" : e.type === "line" ? w.value = "line" : e.type === "text" && (B.value = e.textAlign || "start", Qt.value = Number(e.fontSize) || Qt.value, Pt.value = !!e.isBold, zt.value = !!e.isItalic, Ht.value = !!e.isUnderline, Ft.value = !!e.isBulletTextMode));
+		function Kn(e) {
+			e && (e.color && (hn.value = e.color), Number.isFinite(Number(e.strokeWidth)) && (Mt.value = Number(e.strokeWidth)), "isDash" in e && (It.value = !!e.isDash), e.type === "circle" ? (R.value.circle.filled = !!e.isFilled, w.value = "circle") : e.type === "rect" ? (R.value.rect.filled = !!e.isFilled, w.value = "rect") : e.type === "arrow" ? w.value = "arrow" : e.type === "line" ? w.value = "line" : e.type === "text" && (B.value = e.textAlign || "start", Qt.value = Number(e.fontSize) || Qt.value, Pt.value = !!e.isBold, zt.value = !!e.isItalic, Ht.value = !!e.isUnderline, Ft.value = !!e.isBulletTextMode));
 		}
-		function Gn(e) {
+		function qn(e) {
 			if (!M.value) {
 				Nt.value = void 0;
 				return;
 			}
-			e.preventDefault(), Ut.value = !1, Nt.value = In(e.target) || void 0;
+			e.preventDefault(), Ut.value = !1, Nt.value = Rn(e.target) || void 0;
 		}
-		function Kn() {
-			let e = nn.value;
-			if (!e || !vn.value || !P.value) {
-				U.value = null;
+		function Jn() {
+			let e = rn.value;
+			if (!e || !bn.value || !P.value) {
+				H.value = null;
 				return;
 			}
 			ce(() => {
-				if (!vn.value || !P.value || nn.value !== e) {
-					U.value = null;
+				if (!bn.value || !P.value || rn.value !== e) {
+					H.value = null;
 					return;
 				}
 				let t = L.value.find((t) => t.id === e);
 				if (!t || t.type !== "text") {
-					U.value = null;
+					H.value = null;
 					return;
 				}
-				let n = Array.from(vn.value.getElementsByTagName("text")).find((t) => t.getAttribute("data-shape-id") === e);
+				let n = Array.from(bn.value.getElementsByTagName("text")).find((t) => t.getAttribute("data-shape-id") === e);
 				if (!n) {
-					U.value = null;
+					H.value = null;
 					return;
 				}
-				let r = Dn(t), i = Math.max(0, Math.min(on.value.row, r.length - 1)), a = r[i] || "", o = Math.max(0, Math.min(on.value.col, a.length)), s = a.slice(0, o), c = document.createElementNS("http://www.w3.org/2000/svg", "text");
-				c.setAttribute("font-size", String(t.fontSize)), c.setAttribute("font-family", n.getAttribute("font-family") || "Helvetica"), c.setAttribute("font-weight", t.isBold ? "bold" : "normal"), c.setAttribute("font-style", t.isItalic ? "italic" : "normal"), c.setAttribute("visibility", "hidden"), c.setAttribute("pointer-events", "none"), vn.value.appendChild(c);
+				let r = kn(t), i = Math.max(0, Math.min(sn.value.row, r.length - 1)), a = r[i] || "", o = Math.max(0, Math.min(sn.value.col, a.length)), s = a.slice(0, o), c = document.createElementNS("http://www.w3.org/2000/svg", "text");
+				c.setAttribute("font-size", String(t.fontSize)), c.setAttribute("font-family", n.getAttribute("font-family") || "Helvetica"), c.setAttribute("font-weight", t.isBold ? "bold" : "normal"), c.setAttribute("font-style", t.isItalic ? "italic" : "normal"), c.setAttribute("visibility", "hidden"), c.setAttribute("pointer-events", "none"), bn.value.appendChild(c);
 				let l = (e) => (c.textContent = e || "​", typeof c.getComputedTextLength == "function" ? c.getComputedTextLength() : c.getBBox().width), ee = l(s), u = l(a);
 				c.remove();
 				let te = t.x;
 				t.textAlign === "middle" ? te -= u / 2 : t.textAlign === "end" && (te -= u);
 				let ne = t.y + t.fontSize * i;
-				U.value = {
+				H.value = {
 					x: te + ee,
 					y1: ne - t.fontSize * .85,
 					y2: ne + t.fontSize * .15,
-					color: t.color || J.value.style.color
+					color: t.color || J.value.color
 				};
 			});
 		}
-		function qn(e, { isNew: t = !1 } = {}) {
+		function Yn(e, { isNew: t = !1 } = {}) {
 			if (!e || e.type !== "text") return;
-			if (P.value && nn.value === e.id) {
-				let t = Dn(e), n = Math.max(0, t.length - 1);
-				on.value = {
+			if (P.value && rn.value === e.id) {
+				let t = kn(e), n = Math.max(0, t.length - 1);
+				sn.value = {
 					row: n,
 					col: (t[n] || "").length
-				}, z.value = !0, Kn();
+				}, z.value = !0, Jn();
 				return;
 			}
-			P.value && Jn(), t || q.value?.begin?.(), F.value = e, E.value = { id: e.id }, nn.value = e.id, rn.value = t ? null : Z(e), an.value = t;
-			let n = Dn(e), r = Math.max(0, n.length - 1);
-			on.value = {
+			P.value && Xn(), t || ln.value?.begin?.(), F.value = e, E.value = { id: e.id }, rn.value = e.id, an.value = t ? null : Z(e), on.value = t;
+			let n = kn(e), r = Math.max(0, n.length - 1);
+			sn.value = {
 				row: r,
 				col: (n[r] || "").length
-			}, Wn(e), N.value = !0, P.value = !0, z.value = !0, O.value = !1, w.value = void 0, U.value = null, Kn();
+			}, Kn(e), N.value = !0, P.value = !0, z.value = !0, O.value = !1, w.value = void 0, H.value = null, Jn();
 		}
-		function Jn({ cancel: e = !1 } = {}) {
-			let t = nn.value;
+		function Xn({ cancel: e = !1 } = {}) {
+			let t = rn.value;
 			if (!t) {
-				P.value = !1, z.value = !1, U.value = null;
+				P.value = !1, z.value = !1, H.value = null;
 				return;
 			}
 			let n = L.value.find((e) => e.id === t);
 			if (e) {
-				if (an.value) L.value = L.value.filter((e) => e.id !== t), n = null;
-				else if (rn.value) {
+				if (on.value) L.value = L.value.filter((e) => e.id !== t), n = null;
+				else if (an.value) {
 					let e = L.value.findIndex((e) => e.id === t);
-					e !== -1 && (L.value[e] = Z(rn.value), n = L.value[e]);
+					e !== -1 && (L.value[e] = Z(an.value), n = L.value[e]);
 				}
-			} else n && Dn(n).every((e) => e.length === 0) && (L.value = L.value.filter((e) => e.id !== t), n = null);
-			nn.value = null, rn.value = null, an.value = !1, on.value = {
+			} else n && kn(n).every((e) => e.length === 0) && (L.value = L.value.filter((e) => e.id !== t), n = null);
+			rn.value = null, an.value = null, on.value = !1, sn.value = {
 				row: 0,
 				col: 0
-			}, P.value = !1, z.value = !1, U.value = null, q.value?.end?.(), n ? (F.value = n, E.value = { id: n.id }) : F.value?.id === t && (F.value = void 0, E.value = void 0);
+			}, P.value = !1, z.value = !1, H.value = null, ln.value?.end?.(), n ? (F.value = n, E.value = { id: n.id }) : F.value?.id === t && (F.value = void 0, E.value = void 0);
 		}
-		function Yn() {
+		function Zn() {
 			if (P.value) {
-				Jn();
+				Xn();
 				return;
 			}
 			let e = F.value;
-			!e || e.type !== "text" || Dn(e).every((e) => e.length === 0) && (L.value = L.value.filter((t) => t.id !== e.id), F.value = L.value.at(-1));
+			!e || e.type !== "text" || kn(e).every((e) => e.length === 0) && (L.value = L.value.filter((t) => t.id !== e.id), F.value = L.value.at(-1));
 		}
-		function Xn() {
-			q.value?.begin?.();
+		function Qn() {
+			ln.value?.begin?.();
 			let e = {
 				id: `text_${i()}`,
 				type: "text",
@@ -1221,42 +1221,42 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				isBold: Z(Pt.value),
 				isItalic: Z(zt.value),
 				isUnderline: Z(Ht.value),
-				color: Z(pn.value),
+				color: Z(hn.value),
 				isBulletTextMode: Z(Ft.value)
 			};
-			L.value.push(e), F.value = e, E.value = { id: e.id }, qn(e, { isNew: !0 });
+			L.value.push(e), F.value = e, E.value = { id: e.id }, Yn(e, { isNew: !0 });
 		}
-		let Zn = 0;
-		function Qn(e) {
-			if (!(!M.value || D.value) && (e.preventDefault(), e.stopPropagation(), Nr(e), !In(e.target) && !(Date.now() < Zn))) {
-				if (P.value && Jn(), N.value && !A.value) {
-					Xn();
+		let $n = 0;
+		function er(e) {
+			if (!(!M.value || D.value) && (e.preventDefault(), e.stopPropagation(), Fr(e), !Rn(e.target) && !(Date.now() < $n))) {
+				if (P.value && Xn(), N.value && !A.value) {
+					Qn();
 					return;
 				}
-				!O.value && !j.value && (F.value = void 0, E.value = void 0, Nt.value = void 0, k.value || (w.value = void 0)), z.value = !1, U.value = null;
+				!O.value && !j.value && (F.value = void 0, E.value = void 0, Nt.value = void 0, k.value || (w.value = void 0)), z.value = !1, H.value = null;
 			}
 		}
-		function $n(e) {
-			!F.value || F.value.type !== "text" || (F.value.textAlign = e, B.value = e, Kn());
+		function tr(e) {
+			!F.value || F.value.type !== "text" || (F.value.textAlign = e, B.value = e, Jn());
 		}
-		function er() {
-			P.value && Jn(), q.value?.undo?.();
+		function nr() {
+			P.value && Xn(), ln.value?.undo?.();
 		}
-		function tr() {
-			P.value && Jn(), q.value?.redo?.();
+		function rr() {
+			P.value && Xn(), ln.value?.redo?.();
 		}
-		function nr(e) {
-			if (!P.value || !nn.value) return;
-			let t = L.value.find((e) => e.id === nn.value);
+		function ir(e) {
+			if (!P.value || !rn.value) return;
+			let t = L.value.find((e) => e.id === rn.value);
 			if (!t || t.type !== "text") {
-				Jn();
+				Xn();
 				return;
 			}
-			let n = Dn(t);
+			let n = kn(t);
 			n.length || (n = [""]);
-			let r = Math.max(0, Math.min(on.value.row, n.length - 1)), i = Math.max(0, Math.min(on.value.col, n[r].length)), a = !1, o = !1;
+			let r = Math.max(0, Math.min(sn.value.row, n.length - 1)), i = Math.max(0, Math.min(sn.value.col, n[r].length)), a = !1, o = !1;
 			if (e.key === "Escape") {
-				e.preventDefault(), Jn({ cancel: !0 });
+				e.preventDefault(), Xn({ cancel: !0 });
 				return;
 			}
 			if (e.key === "Enter") {
@@ -1279,12 +1279,12 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 			else if (e.key === "Tab") e.preventDefault(), n[r] = n[r].slice(0, i) + "    " + n[r].slice(i), i += 4, a = !0;
 			else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) e.preventDefault(), n[r] = n[r].slice(0, i) + e.key + n[r].slice(i), i += e.key.length, a = !0;
 			else return;
-			a && (t.isBold = Z(Pt.value), t.isItalic = Z(zt.value), t.isUnderline = Z(Ht.value), On(t, n)), (a || o) && (on.value = {
+			a && (t.isBold = Z(Pt.value), t.isItalic = Z(zt.value), t.isUnderline = Z(Ht.value), An(t, n)), (a || o) && (sn.value = {
 				row: r,
 				col: i
-			}, z.value = !0, Kn());
+			}, z.value = !0, Jn());
 		}
-		function rr(e) {
+		function ar(e) {
 			if (!e) return null;
 			switch (e.type) {
 				case "arrow": return {
@@ -1310,7 +1310,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					bottom: e.y + e.rectHeight
 				};
 				case "line": {
-					let t = Sn(e.path);
+					let t = wn(e.path);
 					return t ? {
 						left: t.minX,
 						top: t.minY,
@@ -1327,13 +1327,13 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				default: return null;
 			}
 		}
-		function ir(e, t) {
-			let n = rr(e);
+		function or(e, t) {
+			let n = ar(e);
 			if (!n) return !1;
 			let r = Math.min(t.x, t.x + t.rectWidth), i = Math.min(t.y, t.y + t.rectHeight), a = Math.max(t.x, t.x + t.rectWidth), o = Math.max(t.y, t.y + t.rectHeight);
 			return r <= n.left && i <= n.top && a >= n.right && o >= n.bottom;
 		}
-		function ar(e, t) {
+		function sr(e, t) {
 			let n = Z(e), r = Number(t.x) || 0, i = Number(t.y) || 0;
 			switch (n.type) {
 				case "circle":
@@ -1344,17 +1344,17 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				case "arrow":
 					n.x = r + (Number(n.diffX) || 0), n.y = i + (Number(n.diffY) || 0), n.endX = r + (Number(n.diffEndX) || 0), n.endY = i + (Number(n.diffEndY) || 0);
 					break;
-				case "line": Array.isArray(n.diffPoints) && n.diffPoints.length && (n.path = xn(n.diffPoints.map((e) => ({
+				case "line": Array.isArray(n.diffPoints) && n.diffPoints.length && (n.path = Cn(n.diffPoints.map((e) => ({
 					x: r + e.x,
 					y: i + e.y
 				}))));
 			}
 			return n.id = n.oldId || n.id, delete n.diffX, delete n.diffY, delete n.diffEndX, delete n.diffEndY, delete n.diffPoints, n;
 		}
-		function or(e) {
-			return e.type === "group" ? (e.source || []).flatMap((t) => t.type === "group" ? or(ar(t, e)) : [ar(t, e)]) : [Z(e)];
+		function cr(e) {
+			return e.type === "group" ? (e.source || []).flatMap((t) => t.type === "group" ? cr(sr(t, e)) : [sr(t, e)]) : [Z(e)];
 		}
-		function sr(e, t) {
+		function lr(e, t) {
 			let n = {
 				...Z(e),
 				id: t.id,
@@ -1364,23 +1364,23 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				diffEndX: Number.isFinite(Number(e.endX)) ? Number(e.endX) - t.x : 0,
 				diffEndY: Number.isFinite(Number(e.endY)) ? Number(e.endY) - t.y : 0
 			};
-			return e.type === "line" && (n.diffPoints = bn(e.path).map((e) => ({
+			return e.type === "line" && (n.diffPoints = Sn(e.path).map((e) => ({
 				x: e.x - t.x,
 				y: e.y - t.y
 			}))), n;
 		}
-		function cr() {
+		function ur() {
 			if (Wt.value = [], w.value !== "group") return j.value = !1, L.value = L.value.filter((e) => e.type !== "group"), null;
 			let e = L.value.at(-1);
 			if (!e || e.type !== "group") return null;
-			let t = L.value.filter((t) => t.id !== e.id && ir(t, e));
+			let t = L.value.filter((t) => t.id !== e.id && or(t, e));
 			if (t.length < 2) return L.value = L.value.filter((t) => t.id !== e.id), null;
-			let n = t.flatMap((e) => or(e));
-			Wt.value = n.map((t) => sr(t, e)), e.source = Wt.value, e.content = "";
+			let n = t.flatMap((e) => cr(e));
+			Wt.value = n.map((t) => lr(t, e)), e.source = Wt.value, e.content = "";
 			let r = new Set(t.map((e) => e.id));
-			return L.value = L.value.filter((t) => t.id === e.id || !r.has(t.id)), lr(e), e;
+			return L.value = L.value.filter((t) => t.id === e.id || !r.has(t.id)), dr(e), e;
 		}
-		function lr(e) {
+		function dr(e) {
 			e.content = "";
 			let t = e.x || 0, n = e.y || 0;
 			(e.source || []).forEach((r) => {
@@ -1446,10 +1446,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						break;
 					}
 					case "line": {
-						let i = xn(Array.isArray(r.diffPoints) && r.diffPoints.length ? r.diffPoints.map((e) => ({
+						let i = Cn(Array.isArray(r.diffPoints) && r.diffPoints.length ? r.diffPoints.map((e) => ({
 							x: t + e.x,
 							y: n + e.y
-						})) : bn(r.path));
+						})) : Sn(r.path));
 						e.content += `
           <path
             id="${r.id}"
@@ -1488,10 +1488,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				}
 			});
 		}
-		function ur(e) {
-			e.relatedTarget && vn.value && vn.value.contains(e.relatedTarget) || (Ut.value = !0, Nt.value = void 0);
+		function fr(e) {
+			e.relatedTarget && bn.value && bn.value.contains(e.relatedTarget) || (Ut.value = !0, Nt.value = void 0);
 		}
-		function dr() {
+		function pr() {
 			if (Lt.value = !0, !w.value && !j.value || !Lt.value) return;
 			Rt.value = !0, T.value.start = {
 				x: I.value.x,
@@ -1507,16 +1507,16 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						endX: I.value.x,
 						endY: I.value.y,
 						type: w.value,
-						color: Z(pn.value),
+						color: Z(hn.value),
 						strokeWidth: Z(Math.abs(Mt.value)),
 						isDash: Z(It.value)
 					}), F.value = L.value.at(-1);
 					break;
 				case w.value === "circle":
 					L.value.push({
-						alpha: R.value.circle.filled ? hn.value : "",
+						alpha: R.value.circle.filled ? _n.value : "",
 						id: e,
-						color: Z(pn.value),
+						color: Z(hn.value),
 						isFilled: Z(R.value.circle.filled),
 						circleRadius: Z(R.value.circle.radius),
 						circleStrokeWidth: Z(R.value.circle.strokeWidth),
@@ -1529,12 +1529,12 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					break;
 				case w.value === "line":
 					L.value.push({
-						alpha: Z(hn.value),
+						alpha: Z(_n.value),
 						id: e,
 						x: I.value.x,
 						y: I.value.y,
 						type: w.value,
-						color: Z(pn.value),
+						color: Z(hn.value),
 						strokeWidth: Z(Math.abs(Mt.value)),
 						isDash: Z(It.value),
 						path: `${I.value.x} ${I.value.y}`
@@ -1542,9 +1542,9 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					break;
 				case w.value === "rect":
 					L.value.push({
-						alpha: R.value.rect.filled ? hn.value : "",
+						alpha: R.value.rect.filled ? _n.value : "",
 						id: e,
-						color: Z(pn.value),
+						color: Z(hn.value),
 						isFilled: Z(R.value.rect.filled),
 						rectStrokeWidth: Z(R.value.rect.strokeWidth),
 						rectHeight: Z(R.value.rect.height),
@@ -1572,48 +1572,48 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					content: ""
 				});
 			}
-			dn.value ||= requestAnimationFrame(Pn);
+			pn.value ||= requestAnimationFrame(In);
 		}
-		function fr(e) {
+		function mr(e) {
 			if (!M.value) return;
-			Nr(e);
-			let t = Ln(e), n = t ? L.value.find((e) => e.id === t) : null;
-			if (P.value && nn.value && t !== nn.value && Jn(), D.value) {
+			Fr(e);
+			let t = zn(e), n = t ? L.value.find((e) => e.id === t) : null;
+			if (P.value && rn.value && t !== rn.value && Xn(), D.value) {
 				Bt.value = !1;
 				return;
 			}
 			if (n) {
-				let t = Number.isFinite(e?.timeStamp) ? e.timeStamp : Date.now(), r = vr.id === n.id && t - vr.at >= 0 && t - vr.at <= Et;
-				if (vr = r ? {
+				let t = Number.isFinite(e?.timeStamp) ? e.timeStamp : Date.now(), r = br.id === n.id && t - br.at >= 0 && t - br.at <= Et;
+				if (br = r ? {
 					id: null,
 					at: 0
 				} : {
 					id: n.id,
 					at: t
 				}, r) {
-					e.preventDefault(), e.stopPropagation(), Bt.value = !1, V.value = null, tn.value = null, H.value = null, _r(n);
+					e.preventDefault(), e.stopPropagation(), Bt.value = !1, tn.value = null, nn.value = null, V.value = null, yr(n);
 					return;
 				}
-			} else vr = {
+			} else br = {
 				id: null,
 				at: 0
 			};
 			if (e.preventDefault(), e.stopPropagation(), Bt.value = !0, e.pointerId != null) {
 				try {
-					vn.value?.setPointerCapture?.(e.pointerId);
+					bn.value?.setPointerCapture?.(e.pointerId);
 				} catch {}
-				fn.value = e.pointerId;
-			} else fn.value = null;
+				mn.value = e.pointerId;
+			} else mn.value = null;
 			if (O.value) {
 				if (n) {
-					Bt.value = !1, O.value = !1, F.value = n, E.value = { id: n.id }, Wn(n);
+					Bt.value = !1, O.value = !1, F.value = n, E.value = { id: n.id }, Kn(n);
 					return;
 				}
-				q.value?.begin?.(), dr();
+				ln.value?.begin?.(), pr();
 				return;
 			}
 			if (j.value) {
-				q.value?.begin?.(), dr();
+				ln.value?.begin?.(), pr();
 				return;
 			}
 			if (k.value) {
@@ -1621,60 +1621,60 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					Bt.value = !1, E.value = void 0;
 					return;
 				}
-				q.value?.begin?.(), Fn(n.id);
+				ln.value?.begin?.(), Ln(n.id);
 				let t = L.value.find((e) => e.id === n.id);
-				F.value = t, E.value = { id: t.id }, Bn({ target: e.target });
+				F.value = t, E.value = { id: t.id }, Hn({ target: e.target });
 				return;
 			}
 			if (A.value) {
 				if (!n) {
-					Bt.value = !1, E.value = void 0, V.value = null, tn.value = null, H.value = null;
+					Bt.value = !1, E.value = void 0, tn.value = null, nn.value = null, V.value = null;
 					return;
 				}
 				let t = e.target?.getAttribute?.("data-resize-handle") || null;
-				F.value = n, E.value = { id: n.id }, Wn(n), t ? (V.value = null, Vn(n, t)) : (tn.value = null, H.value = null, Bn(e)), q.value?.begin?.();
+				F.value = n, E.value = { id: n.id }, Kn(n), t ? (tn.value = null, Un(n, t)) : (nn.value = null, V.value = null, Hn(e)), ln.value?.begin?.();
 			}
 		}
-		function pr(e) {
-			if (!e || !e.id || !V.value && (Bn({ target: { id: e.id } }), !V.value)) return;
+		function hr(e) {
+			if (!e || !e.id || !tn.value && (Hn({ target: { id: e.id } }), !tn.value)) return;
 			let t = I.value.x, n = I.value.y;
 			switch (F.value = e, e.type) {
 				case "arrow": {
-					let { dx: r, dy: i, endDx: a, endDy: o } = V.value;
+					let { dx: r, dy: i, endDx: a, endDy: o } = tn.value;
 					e.x = t - r, e.y = n - i, e.endX = t - (a ?? r), e.endY = n - (o ?? i);
 					break;
 				}
 				case "circle":
 				case "rect":
 				case "text": {
-					let { dx: r, dy: i } = V.value;
+					let { dx: r, dy: i } = tn.value;
 					e.x = t - r, e.y = n - i;
 					break;
 				}
 				case "line": {
-					let { startX: r, startY: i, path: a } = V.value, o = t - r, s = n - i;
-					e.path = xn(bn(a).map((e) => ({
+					let { startX: r, startY: i, path: a } = tn.value, o = t - r, s = n - i;
+					e.path = Cn(Sn(a).map((e) => ({
 						x: e.x + o,
 						y: e.y + s
 					})));
-					let c = Sn(e.path);
+					let c = wn(e.path);
 					c && (e.x = c.minX, e.y = c.minY);
 					break;
 				}
 				case "group": {
-					let { dx: r, dy: i } = V.value;
-					e.x = t - r, e.y = n - i, lr(e);
+					let { dx: r, dy: i } = tn.value;
+					e.x = t - r, e.y = n - i, dr(e);
 					break;
 				}
 			}
 		}
-		function mr() {
+		function gr() {
 			let e = E.value?.id || Nt.value;
 			if (!e) return;
 			let t = L.value.find((t) => t.id === e);
-			t && pr(t);
+			t && hr(t);
 		}
-		function hr() {
+		function _r() {
 			let e = E.value?.id;
 			if (!e) return;
 			let t = L.value.find((t) => t.id === e);
@@ -1682,20 +1682,20 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 			let n = I.value.x, r = I.value.y;
 			switch (w.value = t.type, F.value = t, t.type) {
 				case "arrow":
-					tn.value === "arrow-start" ? (t.x = n, t.y = r) : tn.value === "arrow-end" && (t.endX = n, t.endY = r);
+					nn.value === "arrow-start" ? (t.x = n, t.y = r) : nn.value === "arrow-end" && (t.endX = n, t.endY = r);
 					break;
 				case "line": {
-					if (tn.value !== "line-scale" || !H.value?.bounds || !H.value?.points) return;
-					let { bounds: e, points: i } = H.value, a = Math.max(1, n - e.minX), o = Math.max(1, r - e.minY), s = a / Math.max(1, e.width), c = o / Math.max(1, e.height);
-					t.path = xn(i.map((t) => ({
+					if (nn.value !== "line-scale" || !V.value?.bounds || !V.value?.points) return;
+					let { bounds: e, points: i } = V.value, a = Math.max(1, n - e.minX), o = Math.max(1, r - e.minY), s = a / Math.max(1, e.width), c = o / Math.max(1, e.height);
+					t.path = Cn(i.map((t) => ({
 						x: e.minX + (t.x - e.minX) * s,
 						y: e.minY + (t.y - e.minY) * c
 					}))), t.x = e.minX, t.y = e.minY;
 					break;
 				}
 				case "circle": {
-					if (tn.value !== "circle-radius" || H.value?.shapeId !== t.id || !H.value?.anchor) return;
-					let e = H.value.anchor, i = n, a = r, o = i - e.x, s = a - e.y, c = Math.hypot(o, s);
+					if (nn.value !== "circle-radius" || V.value?.shapeId !== t.id || !V.value?.anchor) return;
+					let e = V.value.anchor, i = n, a = r, o = i - e.x, s = a - e.y, c = Math.hypot(o, s);
 					if (c < 2) {
 						if (c > 0) {
 							let e = 2 / c;
@@ -1703,15 +1703,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						} else o = 2, s = 0;
 						i = e.x + o, a = e.y + s, c = 2;
 					}
-					t.x = e.x + o / 2, t.y = e.y + s / 2, t.circleRadius = c / 2, H.value.handlePoint = {
+					t.x = e.x + o / 2, t.y = e.y + s / 2, t.circleRadius = c / 2, V.value.handlePoint = {
 						x: i,
 						y: a
 					};
 					break;
 				}
 				case "rect": {
-					let e = tn.value, i = H.value?.bounds;
-					if (!e?.startsWith("rect-") || H.value?.shapeId !== t.id || !i) return;
+					let e = nn.value, i = V.value?.bounds;
+					if (!e?.startsWith("rect-") || V.value?.shapeId !== t.id || !i) return;
 					let a = i.left, o = i.top, s = i.right, c = i.bottom;
 					switch (e) {
 						case "rect-nw":
@@ -1732,85 +1732,85 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					break;
 				}
 				case "group":
-					if (tn.value !== "group-scale") return;
+					if (nn.value !== "group-scale") return;
 					t.rectWidth = Math.max(20, n - t.x), t.rectHeight = Math.max(20, r - t.y);
 			}
 		}
-		function gr(e) {
+		function vr(e) {
 			if (!M.value || D.value) return;
-			e.preventDefault(), e.stopPropagation(), Nr(e);
-			let t = Ln(e);
-			t && (Nt.value = t), k.value && Bt.value ? mr() : A.value && Bt.value && (tn.value ? hr() : mr());
+			e.preventDefault(), e.stopPropagation(), Fr(e);
+			let t = zn(e);
+			t && (Nt.value = t), k.value && Bt.value ? gr() : A.value && Bt.value && (nn.value ? _r() : gr());
 		}
-		function _r(e) {
+		function yr(e) {
 			if (e) {
-				if (P.value && nn.value !== e.id && Jn(), F.value = e, E.value = { id: e.id }, k.value = !1, D.value = !1, A.value = !0, j.value = !1, O.value = !1, e.type === "text") {
-					w.value = void 0, Wn(e), qn(e);
+				if (P.value && rn.value !== e.id && Xn(), F.value = e, E.value = { id: e.id }, k.value = !1, D.value = !1, A.value = !0, j.value = !1, O.value = !1, e.type === "text") {
+					w.value = void 0, Kn(e), Yn(e);
 					return;
 				}
-				N.value = !1, P.value = !1, z.value = !1, U.value = null, Wn(e);
+				N.value = !1, P.value = !1, z.value = !1, H.value = null, Kn(e);
 			}
 		}
-		let vr = {
+		let br = {
 			id: null,
 			at: 0
-		}, yr = {
+		}, xr = {
 			id: null,
 			at: 0
 		};
-		function br(e, t) {
+		function Sr(e, t) {
 			if (!M.value) return;
-			let n = t || In(e.target);
+			let n = t || Rn(e.target);
 			if (!n) return;
-			yr = {
+			xr = {
 				id: null,
 				at: 0
 			};
 			let r = L.value.find((e) => e.id === n);
-			r && _r(r);
+			r && yr(r);
 		}
-		function xr(e, t) {
+		function Cr(e, t) {
 			if (!M.value) return;
-			let n = t || In(e.target);
+			let n = t || Rn(e.target);
 			if (!n) return;
 			let r = L.value.find((e) => e.id === n);
 			if (!r) return;
-			let i = Number.isFinite(e?.timeStamp) ? e.timeStamp : Date.now(), a = yr.id === n && i - yr.at >= 0 && i - yr.at <= Et;
-			if (yr = a ? {
+			let i = Number.isFinite(e?.timeStamp) ? e.timeStamp : Date.now(), a = xr.id === n && i - xr.at >= 0 && i - xr.at <= Et;
+			if (xr = a ? {
 				id: null,
 				at: 0
 			} : {
 				id: n,
 				at: i
 			}, a && !D.value) {
-				_r(r);
+				yr(r);
 				return;
 			}
 			let o = F.value?.id === n, s = N.value;
 			if (D.value) {
-				P.value && Jn(), q.value?.begin?.(), L.value = L.value.filter((e) => e.id !== n), F.value?.id === n && (F.value = void 0), E.value = void 0, q.value?.end?.();
+				P.value && Xn(), ln.value?.begin?.(), L.value = L.value.filter((e) => e.id !== n), F.value?.id === n && (F.value = void 0), E.value = void 0, ln.value?.end?.();
 				return;
 			}
-			if (P.value && nn.value && nn.value !== n && Jn(), F.value = r, E.value = { id: r.id }, k.value) {
-				z.value = !1, U.value = null;
+			if (P.value && rn.value && rn.value !== n && Xn(), F.value = r, E.value = { id: r.id }, k.value) {
+				z.value = !1, H.value = null;
 				return;
 			}
-			if (Wn(r), r.type === "text") {
+			if (Kn(r), r.type === "text") {
 				let e = !k.value && !A.value && !O.value && !j.value;
-				N.value = e, e && (s || o) && qn(r);
+				N.value = e, e && (s || o) && Yn(r);
 				return;
 			}
-			N.value = !1, z.value = !1, U.value = null;
+			N.value = !1, z.value = !1, H.value = null;
 		}
-		let Sr = y(null);
-		function Cr(e, t) {
-			for (t(e), e = e.firstChild; e;) Cr(e, t), e = e.nextSibling;
+		let wr = y(null);
+		function Tr(e, t) {
+			for (t(e), e = e.firstChild; e;) Tr(e, t), e = e.nextSibling;
 		}
-		function wr() {
-			P.value && Jn(), Vt.value = !0, D.value = !1, k.value = !1, A.value = !1, N.value = !1, P.value = !1, j.value = !1, w.value = void 0, z.value = !1, ce(async () => {
-				let e = Sr.value;
+		function Er() {
+			P.value && Xn(), Vt.value = !0, D.value = !1, k.value = !1, A.value = !1, N.value = !1, P.value = !1, j.value = !1, w.value = void 0, z.value = !1, ce(async () => {
+				let e = wr.value;
 				if (e) {
-					Cr(e, (e) => {
+					Tr(e, (e) => {
 						e && e.nodeType === 1 && (e.setAttribute("font-family", "Helvetica"), e.style.fontFamily = "Helvetica");
 					});
 					try {
@@ -1836,55 +1836,55 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					} catch (e) {
 						console.error("Error generating image:", e);
 					} finally {
-						Vt.value = !1, Cr(e, (e) => {
-							e && e.nodeType === 1 && (e.setAttribute("font-family", J.value.style.fontFamily), e.style.fontFamily = J.value.style.fontFamily);
+						Vt.value = !1, Tr(e, (e) => {
+							e && e.nodeType === 1 && (e.setAttribute("font-family", J.value.fontFamily), e.style.fontFamily = J.value.fontFamily);
 						});
 					}
 				}
 			});
 		}
-		function Tr(e) {
+		function Dr(e) {
 			let t = O.value && Lt.value && F.value && [
 				"arrow",
 				"circle",
 				"line",
 				"rect"
 			].includes(F.value.type) ? L.value.find((e) => e.id === F.value.id) : null;
-			if (!D.value && e && (e.preventDefault(), e.stopPropagation()), Lt.value = !1, Bt.value = !1, V.value = null, tn.value = null, H.value = null, fn.value != null) {
+			if (!D.value && e && (e.preventDefault(), e.stopPropagation()), Lt.value = !1, Bt.value = !1, tn.value = null, nn.value = null, V.value = null, mn.value != null) {
 				try {
-					vn.value?.releasePointerCapture?.(fn.value);
+					bn.value?.releasePointerCapture?.(mn.value);
 				} catch {}
-				fn.value = null;
+				mn.value = null;
 			}
-			dn.value &&= (cancelAnimationFrame(dn.value), null);
-			let n = j.value ? cr() : null;
-			q.value?.end(), n && (j.value = !1, k.value = !0, A.value = !1, O.value = !1, D.value = !1, N.value = !1, P.value = !1, z.value = !1, U.value = null, F.value = n, E.value = { id: n.id }, Nt.value = void 0, Zn = Date.now() + 250), t && (Zn = Date.now() + 250, _r(t));
+			pn.value &&= (cancelAnimationFrame(pn.value), null);
+			let n = j.value ? ur() : null;
+			ln.value?.end(), n && (j.value = !1, k.value = !0, A.value = !1, O.value = !1, D.value = !1, N.value = !1, P.value = !1, z.value = !1, H.value = null, F.value = n, E.value = { id: n.id }, Nt.value = void 0, $n = Date.now() + 250), t && ($n = Date.now() + 250, yr(t));
 		}
-		function Er() {
+		function Or() {
 			!F.value || !F.value.id.includes("rect") || (F.value.isFilled = !F.value.isFilled);
 		}
-		function Dr() {
+		function kr() {
 			!F.value || !F.value.id.includes("circle") || (F.value.isFilled = !F.value.isFilled);
 		}
-		function Or(e = pn.value) {
-			let t = typeof e == "string" && e.length ? e : pn.value;
-			if (pn.value = t, !F.value || k.value) return;
+		function Ar(e = hn.value) {
+			let t = typeof e == "string" && e.length ? e : hn.value;
+			if (hn.value = t, !F.value || k.value) return;
 			let n = L.value.find((e) => e.id === F.value.id);
 			if (n) {
 				if (n.color = Z(t), F.value = n, ["arrow", "text"].includes(n.type)) {
-					Kn();
+					Jn();
 					return;
 				}
-				n.alpha = Z(hn.value);
+				n.alpha = Z(_n.value);
 			}
 		}
-		function kr() {
+		function jr() {
 			!F.value || F.value.type === "text" || (F.value.isDash = Z(It.value));
 		}
-		function Ar() {
-			!F.value || ["arrow", "text"].includes(F.value.type) || (F.value.alpha = Z(hn.value));
+		function Mr() {
+			!F.value || ["arrow", "text"].includes(F.value.type) || (F.value.alpha = Z(_n.value));
 		}
-		function jr() {
+		function Nr() {
 			!F.value || ![
 				"arrow",
 				"circle",
@@ -1892,35 +1892,35 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				"line"
 			].includes(F.value.type) || (F.value.strokeWidth = Z(Math.abs(Mt.value)));
 		}
-		function Mr() {
-			!F.value || F.value.type !== "text" || (F.value.isBold = Z(Pt.value), F.value.isItalic = Z(zt.value), F.value.isUnderline = Z(Ht.value), F.value.fontSize = Z(Qt.value), F.value.isBulletTextMode = Z(Ft.value), Kn());
+		function Pr() {
+			!F.value || F.value.type !== "text" || (F.value.isBold = Z(Pt.value), F.value.isItalic = Z(zt.value), F.value.isUnderline = Z(Ht.value), F.value.fontSize = Z(Qt.value), F.value.isBulletTextMode = Z(Ft.value), Jn());
 		}
-		function Nr(e) {
-			if (e.preventDefault(), !vn.value) return;
-			let t = vn.value.getBoundingClientRect(), n, r;
+		function Fr(e) {
+			if (e.preventDefault(), !bn.value) return;
+			let t = bn.value.getBoundingClientRect(), n, r;
 			e.touches && e.touches.length > 0 ? (n = e.touches[0].clientX, r = e.touches[0].clientY) : (n = e.clientX, r = e.clientY), I.value.x = (n - t.left) / t.width * qt.value, I.value.y = (r - t.top) / t.height * Kt.value;
 		}
-		function Pr(e) {
-			if (z.value = !1, Yn(), e === w.value) {
+		function Ir(e) {
+			if (z.value = !1, Zn(), e === w.value) {
 				w.value = void 0, O.value = !1;
 				return;
 			}
 			O.value = !0, D.value = !1, k.value = !1, A.value = !1, N.value = !1, w.value = e;
 		}
-		function Fr() {
-			P.value && Jn(), M.value = !M.value, M.value || (k.value = !1, A.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, F.value = void 0, E.value = void 0, Nt.value = void 0, Wt.value = [], z.value = !1, D.value = !1), xe("toggleOpenState", { isOpen: M.value });
+		function Lr() {
+			P.value && Xn(), M.value = !M.value, M.value || (k.value = !1, A.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, F.value = void 0, E.value = void 0, Nt.value = void 0, Wt.value = [], z.value = !1, D.value = !1), xe("toggleOpenState", { isOpen: M.value });
 		}
-		function Ir() {
-			P.value && Jn(), xe("saveAnnotations", {
+		function Rr() {
+			P.value && Xn(), xe("saveAnnotations", {
 				shapes: L.value,
 				lastSelectedShape: F.value
 			});
 		}
-		let Lr = null;
+		let zr = null;
 		return de(() => {
-			if (Sr.value) {
+			if (wr.value) {
 				let e = !1;
-				Cr(Sr.value, (t) => {
+				Tr(wr.value, (t) => {
 					if (!e && [
 						"DIV",
 						"svg",
@@ -1932,7 +1932,7 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					}
 				});
 			}
-			cn.value = (() => {
+			un.value = (() => {
 				if (typeof navigator > "u") return !1;
 				let e = navigator.userAgentData?.platform ?? "";
 				if (e) return /mac|ios/i.test(e);
@@ -1944,12 +1944,12 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				e.forEach((e) => {
 					Xt.value = e.contentRect.width, Zt.value = e.contentRect.height, Jt.value = e.contentRect.height / e.contentRect.width, Kt.value = Jt.value * 1e3;
 				});
-			}).observe(Yt.value), ln.value = (e) => nr(e), window.addEventListener("keydown", ln.value), q.value = Rn(), q.value.size) {
-				let e = q.value.size();
-				un.value.undo = e.undo, un.value.redo = e.redo;
+			}).observe(Yt.value), dn.value = (e) => ir(e), window.addEventListener("keydown", dn.value), ln.value = Bn(), ln.value.size) {
+				let e = ln.value.size();
+				fn.value.undo = e.undo, fn.value.redo = e.redo;
 			}
-			Lr = ye({
-				isMacLike: cn,
+			zr = ye({
+				isMacLike: un,
 				isSummaryOpen: M,
 				isWriting: P,
 				isDeleteMode: D,
@@ -1962,45 +1962,45 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				showCaret: z,
 				lastSelectedShape: F,
 				shapes: L,
-				history: q,
-				setShapeTo: Pr,
-				undoLastShape: er,
-				redoLastShape: tr
+				history: ln,
+				setShapeTo: Ir,
+				undoLastShape: nr,
+				redoLastShape: rr
 			});
 		}), ue(() => {
-			$(), dn.value && cancelAnimationFrame(dn.value), ln.value && window.removeEventListener("keydown", ln.value), Lr && Lr(), window.removeEventListener("keydown", nr);
+			$(), pn.value && cancelAnimationFrame(pn.value), dn.value && window.removeEventListener("keydown", dn.value), zr && zr(), window.removeEventListener("keydown", ir);
 		}), ge(L, (e) => {
 			e.length === 0 && (F.value = void 0);
 		}), ge(N, (e) => {
 			if (!e && P.value) {
-				Jn();
+				Xn();
 				return;
 			}
-			z.value = !!(e && P.value), z.value && Kn();
+			z.value = !!(e && P.value), z.value && Jn();
 		}), (e, t) => (v(), p("div", Se, [m("div", Ce, [
 			b(e.$slots, "toggle", le(se({
-				toggle: Fr,
+				toggle: Lr,
 				isOpen: M.value
 			})), () => [oe(te, {
 				config: {
 					maxHeight: 1e3,
 					useCursorPointer: Y.value,
 					head: {
-						backgroundColor: J.value.style.backgroundColor,
-						color: J.value.style.color,
-						iconColor: J.value.style.color,
+						backgroundColor: J.value.backgroundColor,
+						color: J.value.color,
+						iconColor: J.value.color,
 						iconSize: 20,
 						icon: M.value ? "close" : "annotator",
 						padding: "6px"
 					},
 					body: {
-						backgroundColor: J.value.style.backgroundColor,
-						color: J.value.style.color
+						backgroundColor: J.value.backgroundColor,
+						color: J.value.color
 					}
 				},
-				onToggle: Fr
+				onToggle: Lr
 			}, {
-				title: S(({ color: e }) => [m("div", { style: _({ color: e }) }, x(J.value.translations.title), 5)]),
+				title: S(({ color: e }) => [m("div", { style: _({ color: e }) }, x(K.value.translations.title), 5)]),
 				content: S(({ backgroundColor: e }) => [m("div", { id: `toggle_default_${kt.value}` }, null, 8, we)]),
 				_: 1
 			}, 8, ["config"])], !0),
@@ -2015,10 +2015,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				m("button", {
 					disabled: L.value.length === 0,
 					style: _({
-						background: k.value ? J.value.style.buttons.controls.selected.backgroundColor : J.value.style.buttons.controls.backgroundColor,
-						border: k.value ? J.value.style.buttons.controls.selected.border : J.value.style.buttons.controls.border,
-						color: k.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: k.value ? q.value.controls.selected.backgroundColor : q.value.controls.backgroundColor,
+						border: k.value ? q.value.controls.selected.border : q.value.controls.border,
+						color: k.value ? q.value.controls.selected.color : q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2027,24 +2027,24 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[0] ||= (e) => {
-						Yn(), k.value = !k.value, D.value = !1, O.value = !1, A.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1;
+						Zn(), k.value = !k.value, D.value = !1, O.value = !1, A.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1;
 					},
-					onMouseenter: t[1] ||= (e) => J.value.style.showTooltips && Q("move", e, "top"),
+					onMouseenter: t[1] ||= (e) => J.value.showTooltips && Q("move", e, "top"),
 					onMouseleave: $,
-					onFocus: t[2] ||= (e) => J.value.style.showTooltips && Q("move", e, "top"),
+					onFocus: t[2] ||= (e) => J.value.showTooltips && Q("move", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-move", le(se({ active: k.value })), () => [oe(u, {
 					name: "move",
-					stroke: k.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: k.value ? q.value.controls.selected.color : q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "move",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "move",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipMove) + " ", 1), t[91] ||= m("kbd", null, "M", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipMove) + " ", 1), t[91] ||= m("kbd", null, "M", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2055,10 +2055,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				m("button", {
 					disabled: L.value.length === 0,
 					style: _({
-						background: A.value ? J.value.style.buttons.controls.selected.backgroundColor : J.value.style.buttons.controls.backgroundColor,
-						border: A.value ? J.value.style.buttons.controls.selected.border : J.value.style.buttons.controls.border,
-						color: A.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: A.value ? q.value.controls.selected.backgroundColor : q.value.controls.backgroundColor,
+						border: A.value ? q.value.controls.selected.border : q.value.controls.border,
+						color: A.value ? q.value.controls.selected.color : q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2067,24 +2067,24 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[3] ||= (e) => {
-						Yn(), A.value = !A.value, k.value = !1, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1;
+						Zn(), A.value = !A.value, k.value = !1, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1;
 					},
-					onMouseenter: t[4] ||= (e) => J.value.style.showTooltips && Q("resize", e, "top"),
+					onMouseenter: t[4] ||= (e) => J.value.showTooltips && Q("resize", e, "top"),
 					onMouseleave: $,
-					onFocus: t[5] ||= (e) => J.value.style.showTooltips && Q("resize", e, "top"),
+					onFocus: t[5] ||= (e) => J.value.showTooltips && Q("resize", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-resize", le(se({ active: A.value })), () => [oe(u, {
 					name: "resize",
-					stroke: A.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: A.value ? q.value.controls.selected.color : q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "resize",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "resize",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipResize) + " ", 1), t[92] ||= m("kbd", null, "R", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipResize) + " ", 1), t[92] ||= m("kbd", null, "R", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2095,10 +2095,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				m("button", {
 					disabled: L.value.length === 0,
 					style: _({
-						background: D.value ? J.value.style.buttons.controls.selected.backgroundColor : J.value.style.buttons.controls.backgroundColor,
-						border: D.value ? J.value.style.buttons.controls.selected.border : J.value.style.buttons.controls.border,
-						color: D.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: D.value ? q.value.controls.selected.backgroundColor : q.value.controls.backgroundColor,
+						border: D.value ? q.value.controls.selected.border : q.value.controls.border,
+						color: D.value ? q.value.controls.selected.color : q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2107,24 +2107,24 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[6] ||= (e) => {
-						Yn(), D.value = !D.value, k.value = !1, A.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1;
+						Zn(), D.value = !D.value, k.value = !1, A.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1;
 					},
-					onMouseenter: t[7] ||= (e) => J.value.style.showTooltips && Q("delete", e, "top"),
+					onMouseenter: t[7] ||= (e) => J.value.showTooltips && Q("delete", e, "top"),
 					onMouseleave: $,
-					onFocus: t[8] ||= (e) => J.value.style.showTooltips && Q("delete", e, "top"),
+					onFocus: t[8] ||= (e) => J.value.showTooltips && Q("delete", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-delete", le(se({ active: D.value })), () => [oe(u, {
 					name: "trash",
-					stroke: D.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: D.value ? q.value.controls.selected.color : q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "delete",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "delete",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipDelete) + " ", 1), t[93] ||= m("kbd", null, "D", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipDelete) + " ", 1), t[93] ||= m("kbd", null, "D", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2133,12 +2133,12 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"styleObject"
 				])) : f("", !0)], 46, ke),
 				m("button", {
-					disabled: !mn.value,
+					disabled: !gn.value,
 					style: _({
-						background: j.value ? J.value.style.buttons.controls.selected.backgroundColor : J.value.style.buttons.controls.backgroundColor,
-						border: j.value ? J.value.style.buttons.controls.selected.border : J.value.style.buttons.controls.border,
-						color: j.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: j.value ? q.value.controls.selected.backgroundColor : q.value.controls.backgroundColor,
+						border: j.value ? q.value.controls.selected.border : q.value.controls.border,
+						color: j.value ? q.value.controls.selected.color : q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2147,24 +2147,24 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[9] ||= (e) => {
-						Yn(), Pr("group"), j.value = !j.value, D.value = !1, k.value = !1, A.value = !1, N.value = !1, P.value = !1, w.value = "group", z.value = !1;
+						Zn(), Ir("group"), j.value = !j.value, D.value = !1, k.value = !1, A.value = !1, N.value = !1, P.value = !1, w.value = "group", z.value = !1;
 					},
-					onMouseenter: t[10] ||= (e) => J.value.style.showTooltips && Q("selectAndGroup", e, "top"),
+					onMouseenter: t[10] ||= (e) => J.value.showTooltips && Q("selectAndGroup", e, "top"),
 					onMouseleave: $,
-					onFocus: t[11] ||= (e) => J.value.style.showTooltips && Q("selectAndGroup", e, "top"),
+					onFocus: t[11] ||= (e) => J.value.showTooltips && Q("selectAndGroup", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-select-group", le(se({ active: j.value })), () => [oe(u, {
 					name: "selectAndGroup",
-					stroke: j.value ? J.value.style.buttons.controls.selected.color : J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: j.value ? q.value.controls.selected.color : q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "selectAndGroup",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "selectAndGroup",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipGroup) + " ", 1), t[94] ||= m("kbd", null, "G", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipGroup) + " ", 1), t[94] ||= m("kbd", null, "G", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2175,10 +2175,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				m("button", {
 					disabled: L.value.length === 0,
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2186,24 +2186,24 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[12] ||= (e) => {
-						A.value = !1, k.value = !0, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1, Hn("front");
+						A.value = !1, k.value = !0, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1, Wn("front");
 					},
-					onMouseenter: t[13] ||= (e) => J.value.style.showTooltips && Q("bringToFront", e, "top"),
+					onMouseenter: t[13] ||= (e) => J.value.showTooltips && Q("bringToFront", e, "top"),
 					onMouseleave: $,
-					onFocus: t[14] ||= (e) => J.value.style.showTooltips && Q("bringToFront", e, "top"),
+					onFocus: t[14] ||= (e) => J.value.showTooltips && Q("bringToFront", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-bring-to-front", {}, () => [oe(u, {
 					name: "bringToFront",
-					stroke: J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "bringToFront",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "bringToFront",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipBringToFront), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipBringToFront), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2214,10 +2214,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				m("button", {
 					disabled: L.value.length === 0,
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2225,24 +2225,24 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[15] ||= (e) => {
-						A.value = !1, k.value = !0, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1, Hn("back");
+						A.value = !1, k.value = !0, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1, Wn("back");
 					},
-					onMouseenter: t[16] ||= (e) => J.value.style.showTooltips && Q("bringToBack", e, "top"),
+					onMouseenter: t[16] ||= (e) => J.value.showTooltips && Q("bringToBack", e, "top"),
 					onMouseleave: $,
-					onFocus: t[17] ||= (e) => J.value.style.showTooltips && Q("bringToBack", e, "top"),
+					onFocus: t[17] ||= (e) => J.value.showTooltips && Q("bringToBack", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-bring-to-back", {}, () => [oe(u, {
 					name: "bringToBack",
-					stroke: J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "bringToBack",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "bringToBack",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipBringToBack), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipBringToBack), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2253,10 +2253,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				m("button", {
 					disabled: L.value.length === 0 || w.value === "line",
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2264,25 +2264,25 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[18] ||= (e) => {
-						Yn(), A.value = !1, k.value = !0, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1, Un();
+						Zn(), A.value = !1, k.value = !0, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, z.value = !1, Gn();
 					},
-					onMouseenter: t[19] ||= (e) => J.value.style.showTooltips && Q("duplicate", e, "top"),
+					onMouseenter: t[19] ||= (e) => J.value.showTooltips && Q("duplicate", e, "top"),
 					onMouseleave: $,
-					onFocus: t[20] ||= (e) => J.value.style.showTooltips && Q("duplicate", e, "top"),
+					onFocus: t[20] ||= (e) => J.value.showTooltips && Q("duplicate", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-copy", {}, () => [oe(u, {
 					name: "copy",
-					stroke: J.value.style.buttons.controls.color,
+					stroke: q.value.controls.color,
 					size: 18
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "duplicate",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "duplicate",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipDuplicate), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipDuplicate), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2291,12 +2291,12 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"styleObject"
 				])) : f("", !0)], 44, Ne),
 				m("button", {
-					disabled: un.value.undo === 0,
+					disabled: fn.value.undo === 0,
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2305,27 +2305,27 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[21] ||= (e) => {
-						A.value = !1, k.value = !1, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1, er();
+						A.value = !1, k.value = !1, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1, nr();
 					},
-					onMouseenter: t[22] ||= (e) => J.value.style.showTooltips && Q("undoLast", e, "top"),
+					onMouseenter: t[22] ||= (e) => J.value.showTooltips && Q("undoLast", e, "top"),
 					onMouseleave: $,
-					onFocus: t[23] ||= (e) => J.value.style.showTooltips && Q("undoLast", e, "top"),
+					onFocus: t[23] ||= (e) => J.value.showTooltips && Q("undoLast", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-undo", {}, () => [oe(u, {
 					name: "refresh",
-					stroke: J.value.style.buttons.controls.color,
+					stroke: q.value.controls.color,
 					size: 20
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "undoLast",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "undoLast",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
 					default: S(() => [
-						h(x(J.value.translations.tooltipUndo) + " ", 1),
-						m("kbd", null, x(cn.value ? "⌘" : "Ctrl"), 1),
+						h(x(K.value.translations.tooltipUndo) + " ", 1),
+						m("kbd", null, x(un.value ? "⌘" : "Ctrl"), 1),
 						t[95] ||= m("kbd", null, "Z", -1)
 					]),
 					_: 1
@@ -2336,12 +2336,12 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"styleObject"
 				])) : f("", !0)], 44, Pe),
 				m("button", {
-					disabled: un.value.redo === 0,
+					disabled: fn.value.redo === 0,
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2350,28 +2350,28 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[24] ||= (e) => {
-						A.value = !1, k.value = !1, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1, tr();
+						A.value = !1, k.value = !1, D.value = !1, O.value = !1, j.value = !1, N.value = !1, P.value = !1, w.value = void 0, z.value = !1, rr();
 					},
-					onMouseenter: t[25] ||= (e) => J.value.style.showTooltips && Q("redoLast", e, "top"),
+					onMouseenter: t[25] ||= (e) => J.value.showTooltips && Q("redoLast", e, "top"),
 					onMouseleave: $,
-					onFocus: t[26] ||= (e) => J.value.style.showTooltips && Q("redoLast", e, "top"),
+					onFocus: t[26] ||= (e) => J.value.showTooltips && Q("redoLast", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-redo", {}, () => [oe(u, {
 					name: "refresh",
-					stroke: J.value.style.buttons.controls.color,
+					stroke: q.value.controls.color,
 					size: 20,
 					style: { transform: "rotateX(0deg) rotateY(180deg)" }
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "redoLast",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "redoLast",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
 					default: S(() => [
-						h(x(J.value.translations.tooltipRedo) + " ", 1),
-						m("kbd", null, x(cn.value ? "⌘" : "Ctrl"), 1),
+						h(x(K.value.translations.tooltipRedo) + " ", 1),
+						m("kbd", null, x(un.value ? "⌘" : "Ctrl"), 1),
 						t[96] ||= m("kbd", null, "Y", -1)
 					]),
 					_: 1
@@ -2381,36 +2381,36 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"y",
 					"styleObject"
 				])) : f("", !0)], 44, Fe),
-				J.value.style.showPrint ? (v(), p("button", {
+				J.value.showPrint ? (v(), p("button", {
 					key: 0,
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
 						"button-tool": !0,
 						tooltip: !0
 					}),
-					onClick: wr,
-					onMouseenter: t[27] ||= (e) => J.value.style.showTooltips && Q("printPdf", e, "top"),
+					onClick: Er,
+					onMouseenter: t[27] ||= (e) => J.value.showTooltips && Q("printPdf", e, "top"),
 					onMouseleave: $,
-					onFocus: t[28] ||= (e) => J.value.style.showTooltips && Q("printPdf", e, "top"),
+					onFocus: t[28] ||= (e) => J.value.showTooltips && Q("printPdf", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-print", {}, () => [oe(u, {
 					name: "printer",
-					stroke: J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "printPdf",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "printPdf",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipPdf), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipPdf), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2418,13 +2418,13 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"y",
 					"styleObject"
 				])) : f("", !0)], 36)) : f("", !0),
-				J.value.style.showImage ? (v(), p("button", {
+				J.value.showImage ? (v(), p("button", {
 					key: 1,
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
@@ -2432,23 +2432,23 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					onClick: t[29] ||= (...e) => pe(jt) && pe(jt)(...e),
-					onMouseenter: t[30] ||= (e) => J.value.style.showTooltips && Q("printImage", e, "top"),
+					onMouseenter: t[30] ||= (e) => J.value.showTooltips && Q("printImage", e, "top"),
 					onMouseleave: $,
-					onFocus: t[31] ||= (e) => J.value.style.showTooltips && Q("printImage", e, "top"),
+					onFocus: t[31] ||= (e) => J.value.showTooltips && Q("printImage", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-export-image", {}, () => [oe(u, {
 					name: "image",
-					stroke: J.value.style.buttons.controls.color,
+					stroke: q.value.controls.color,
 					size: 20
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "printImage",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "printImage",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipImage), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipImage), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2456,36 +2456,36 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"y",
 					"styleObject"
 				])) : f("", !0)], 36)) : f("", !0),
-				J.value.style.showSave ? (v(), p("button", {
+				J.value.showSave ? (v(), p("button", {
 					key: 2,
 					style: _({
-						background: J.value.style.buttons.controls.backgroundColor,
-						border: J.value.style.buttons.controls.border,
-						color: J.value.style.buttons.controls.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: q.value.controls.backgroundColor,
+						border: q.value.controls.border,
+						color: q.value.controls.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					class: g({
 						"button-tool": !0,
 						tooltip: !0
 					}),
-					onClick: Ir,
-					onMouseenter: t[32] ||= (e) => J.value.style.showTooltips && Q("saveAction", e, "top"),
+					onClick: Rr,
+					onMouseenter: t[32] ||= (e) => J.value.showTooltips && Q("saveAction", e, "top"),
 					onMouseleave: $,
-					onFocus: t[33] ||= (e) => J.value.style.showTooltips && Q("saveAction", e, "top"),
+					onFocus: t[33] ||= (e) => J.value.showTooltips && Q("saveAction", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-save", {}, () => [oe(u, {
 					name: "save",
-					stroke: J.value.style.buttons.controls.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: q.value.controls.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "saveAction",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "saveAction",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipSave), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipSave), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2501,34 +2501,34 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: w.value === "circle" ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "circle" ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: w.value === "circle" ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: w.value === "circle" ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: w.value === "circle" ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: w.value === "circle" ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[34] ||= (e) => {
-						Pr("circle"), j.value = !1;
+						Ir("circle"), j.value = !1;
 					},
-					onMouseenter: t[35] ||= (e) => J.value.style.showTooltips && Q("setCircle", e, "top"),
+					onMouseenter: t[35] ||= (e) => J.value.showTooltips && Q("setCircle", e, "top"),
 					onMouseleave: $,
-					onFocus: t[36] ||= (e) => J.value.style.showTooltips && Q("setCircle", e, "top"),
+					onFocus: t[36] ||= (e) => J.value.showTooltips && Q("setCircle", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-circle", le(se({ filled: R.value.circle.filled })), () => [(v(), p("svg", Le, [m("circle", {
 					cx: 6,
 					cy: 6,
 					r: "4",
-					fill: R.value.circle.filled ? (w.value, pn.value + hn.value) : "none",
+					fill: R.value.circle.filled ? (w.value, hn.value + _n.value) : "none",
 					stroke: "currentColor"
-				}, null, 8, Re)]))], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}, null, 8, Re)]))], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setCircle",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setCircle",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeCircle) + " ", 1), t[97] ||= m("kbd", null, "C", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeCircle) + " ", 1), t[97] ||= m("kbd", null, "C", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2536,16 +2536,16 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"y",
 					"styleObject"
 				])) : f("", !0)], 38),
-				w.value === "circle" ? (v(), p("div", ze, [m("label", Be, [h(x(J.value.translations.filled) + " ", 1), _e(m("input", {
+				w.value === "circle" ? (v(), p("div", ze, [m("label", Be, [h(x(K.value.translations.filled) + " ", 1), _e(m("input", {
 					type: "checkbox",
 					"onUpdate:modelValue": t[37] ||= (e) => R.value.circle.filled = e,
-					onChange: Dr,
+					onChange: kr,
 					checked: R.value.circle.filled,
 					style: _({
 						all: "revert",
 						appearance: "auto",
 						"-webkit-appearance": "auto",
-						accentColor: J.value.style.color + " !important"
+						accentColor: J.value.color + " !important"
 					})
 				}, null, 44, Ve), [[me, R.value.circle.filled]])])])) : f("", !0),
 				m("button", {
@@ -2555,18 +2555,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: w.value === "rect" ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "rect" ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: w.value === "rect" ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: w.value === "rect" ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: w.value === "rect" ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: w.value === "rect" ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[38] ||= (e) => {
-						Pr("rect"), j.value = !1;
+						Ir("rect"), j.value = !1;
 					},
-					onMouseenter: t[39] ||= (e) => J.value.style.showTooltips && Q("setRect", e, "top"),
+					onMouseenter: t[39] ||= (e) => J.value.showTooltips && Q("setRect", e, "top"),
 					onMouseleave: $,
-					onFocus: t[40] ||= (e) => J.value.style.showTooltips && Q("setRect", e, "top"),
+					onFocus: t[40] ||= (e) => J.value.showTooltips && Q("setRect", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-rect", le(se({ filled: R.value.rect.filled })), () => [(v(), p("svg", He, [m("rect", {
 					x: "3",
@@ -2577,17 +2577,17 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					},
 					height: "6",
 					width: "6",
-					fill: R.value.rect.filled ? (w.value, pn.value + hn.value) : "none",
+					fill: R.value.rect.filled ? (w.value, hn.value + _n.value) : "none",
 					stroke: "currentColor"
-				}, null, 8, Ue)]))], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}, null, 8, Ue)]))], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setRect",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setRect",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeRect) + " ", 1), t[98] ||= m("kbd", null, "S", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeRect) + " ", 1), t[98] ||= m("kbd", null, "S", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2595,16 +2595,16 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"y",
 					"styleObject"
 				])) : f("", !0)], 38),
-				w.value === "rect" ? (v(), p("div", We, [m("label", Ge, [h(x(J.value.translations.filled) + " ", 1), _e(m("input", {
+				w.value === "rect" ? (v(), p("div", We, [m("label", Ge, [h(x(K.value.translations.filled) + " ", 1), _e(m("input", {
 					type: "checkbox",
 					"onUpdate:modelValue": t[41] ||= (e) => R.value.rect.filled = e,
-					onChange: Er,
+					onChange: Or,
 					checked: R.value.rect.filled,
 					style: _({
 						all: "revert",
 						appearance: "auto",
 						"-webkit-appearance": "auto",
-						accentColor: J.value.style.color + " !important"
+						accentColor: J.value.color + " !important"
 					})
 				}, null, 44, Ke), [[me, R.value.rect.filled]])])])) : f("", !0),
 				m("button", {
@@ -2614,18 +2614,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: w.value === "arrow" ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "arrow" ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: w.value === "arrow" ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: w.value === "arrow" ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: w.value === "arrow" ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: w.value === "arrow" ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[42] ||= (e) => {
-						Pr("arrow"), j.value = !1;
+						Ir("arrow"), j.value = !1;
 					},
-					onMouseenter: t[43] ||= (e) => J.value.style.showTooltips && Q("setArrow", e, "top"),
+					onMouseenter: t[43] ||= (e) => J.value.showTooltips && Q("setArrow", e, "top"),
 					onMouseleave: $,
-					onFocus: t[44] ||= (e) => J.value.style.showTooltips && Q("setArrow", e, "top"),
+					onFocus: t[44] ||= (e) => J.value.showTooltips && Q("setArrow", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-arrow", {}, () => [(v(), p("svg", qe, [m("path", {
 					stroke: R.value.arrow.filled ? w.value === "arrow" ? "white" : "grey" : "none",
@@ -2634,15 +2634,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					fill: "none",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, null, 8, Je)]))], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}, null, 8, Je)]))], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setArrow",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setArrow",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeArrow) + " ", 1), t[99] ||= m("kbd", null, "A", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeArrow) + " ", 1), t[99] ||= m("kbd", null, "A", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2657,18 +2657,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: w.value === "line" ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: w.value === "line" ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: w.value === "line" ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: w.value === "line" ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: w.value === "line" ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: w.value === "line" ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[45] ||= (e) => {
-						Pr("line"), j.value = !1;
+						Ir("line"), j.value = !1;
 					},
-					onMouseenter: t[46] ||= (e) => J.value.style.showTooltips && Q("setFreehand", e, "top"),
+					onMouseenter: t[46] ||= (e) => J.value.showTooltips && Q("setFreehand", e, "top"),
 					onMouseleave: $,
-					onFocus: t[47] ||= (e) => J.value.style.showTooltips && Q("setFreehand", e, "top"),
+					onFocus: t[47] ||= (e) => J.value.showTooltips && Q("setFreehand", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-freehand", {}, () => [t[100] ||= m("svg", {
 					width: "80%",
@@ -2682,15 +2682,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					stroke: "none",
 					d: "M0 0h24v24H0z",
 					fill: "none"
-				}), m("path", { d: "M3 15c2 3 4 4 7 4s7 -3 7 -7s-3 -7 -6 -7s-5 1.5 -5 4s2 5 6 5s8.408 -2.453 10 -5" })], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				}), m("path", { d: "M3 15c2 3 4 4 7 4s7 -3 7 -7s-3 -7 -6 -7s-5 1.5 -5 4s2 5 6 5s8.408 -2.453 10 -5" })], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setFreehand",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setFreehand",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeFreehand) + " ", 1), t[101] ||= m("kbd", null, "L", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeFreehand) + " ", 1), t[101] ||= m("kbd", null, "L", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2703,10 +2703,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"circle",
 					"rect",
 					"line"
-				].includes(w.value) ? (v(), p("div", Ye, [m("div", Xe, [m("label", Ze, [h(x(J.value.translations.thickness) + " ", 1), _e(m("input", {
+				].includes(w.value) ? (v(), p("div", Ye, [m("div", Xe, [m("label", Ze, [h(x(K.value.translations.thickness) + " ", 1), _e(m("input", {
 					type: "number",
 					"onUpdate:modelValue": t[48] ||= (e) => Mt.value = e,
-					onInput: jr,
+					onInput: Nr,
 					min: 1,
 					style: {
 						padding: "0 4px",
@@ -2719,17 +2719,17 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"arrow",
 					"circle",
 					"rect"
-				].includes(w.value) ? (v(), p("div", Qe, [m("div", $e, [m("label", et, [h(x(J.value.translations.dashedLines) + " ", 1), _e(m("input", {
+				].includes(w.value) ? (v(), p("div", Qe, [m("div", $e, [m("label", et, [h(x(K.value.translations.dashedLines) + " ", 1), _e(m("input", {
 					name: "dashStyle",
 					type: "checkbox",
 					"onUpdate:modelValue": t[49] ||= (e) => It.value = e,
-					onChange: kr,
+					onChange: jr,
 					checked: It.value,
 					style: _({
 						all: "revert",
 						appearance: "auto",
 						"-webkit-appearance": "auto",
-						accentColor: J.value.style.color + " !important"
+						accentColor: J.value.color + " !important"
 					})
 				}, null, 44, tt), [[me, It.value]])])])])) : f("", !0),
 				m("button", {
@@ -2739,31 +2739,31 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: N.value ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: N.value ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: N.value ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: N.value ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: N.value ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: N.value ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[50] ||= (e) => {
-						Yn(), N.value = !N.value, D.value = !1, k.value = !1, A.value = !1, j.value = !1, O.value = !1, w.value = void 0;
+						Zn(), N.value = !N.value, D.value = !1, k.value = !1, A.value = !1, j.value = !1, O.value = !1, w.value = void 0;
 					},
-					onMouseenter: t[51] ||= (e) => J.value.style.showTooltips && Q("setText", e, "top"),
+					onMouseenter: t[51] ||= (e) => J.value.showTooltips && Q("setText", e, "top"),
 					onMouseleave: $,
-					onFocus: t[52] ||= (e) => J.value.style.showTooltips && Q("setText", e, "top"),
+					onFocus: t[52] ||= (e) => J.value.showTooltips && Q("setText", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text", le(se({ active: N.value })), () => [oe(u, {
 					name: "text",
-					stroke: N.value ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color
-				}, null, 8, ["stroke"])], !0), J.value.style.showTooltips ? (v(), d(C, {
+					stroke: N.value ? q.value.shapes.selected.color : q.value.shapes.color
+				}, null, 8, ["stroke"])], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setText",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setText",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeText) + " ", 1), t[102] ||= m("kbd", null, "T", -1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeText) + " ", 1), t[102] ||= m("kbd", null, "T", -1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2771,10 +2771,10 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"y",
 					"styleObject"
 				])) : f("", !0)], 38),
-				N.value ? (v(), p("div", nt, [m("div", rt, [m("label", it, [h(x(J.value.translations.fontSize) + " ", 1), _e(m("input", {
+				N.value ? (v(), p("div", nt, [m("div", rt, [m("label", it, [h(x(K.value.translations.fontSize) + " ", 1), _e(m("input", {
 					type: "number",
 					"onUpdate:modelValue": t[53] ||= (e) => Qt.value = e,
-					onInput: Mr,
+					onInput: Pr,
 					style: {
 						padding: "0 4px",
 						width: "40px",
@@ -2789,18 +2789,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: B.value === "start" ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: B.value === "start" ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: B.value === "start" ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: B.value === "start" ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: B.value === "start" ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: B.value === "start" ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[54] ||= (e) => {
-						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, B.value = "start", $n("start");
+						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, B.value = "start", tr("start");
 					},
-					onMouseenter: t[55] ||= (e) => J.value.style.showTooltips && Q("setAlignStart", e, "top"),
+					onMouseenter: t[55] ||= (e) => J.value.showTooltips && Q("setAlignStart", e, "top"),
 					onMouseleave: $,
-					onFocus: t[56] ||= (e) => J.value.style.showTooltips && Q("setAlignStart", e, "top"),
+					onFocus: t[56] ||= (e) => J.value.showTooltips && Q("setAlignStart", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text-align-left", {}, () => [t[103] ||= m("svg", {
 					width: "80%",
@@ -2819,15 +2819,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					m("path", { d: "M4 6l16 0" }),
 					m("path", { d: "M4 12l10 0" }),
 					m("path", { d: "M4 18l14 0" })
-				], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setAlignStart",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setAlignStart",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeTextLeft), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeTextLeft), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2842,19 +2842,19 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: B.value === "middle" ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: B.value === "middle" ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: B.value === "middle" ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: B.value === "middle" ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: B.value === "middle" ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: B.value === "middle" ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					disabled: Ft.value,
 					onClick: t[57] ||= (e) => {
-						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, B.value = "middle", $n("middle");
+						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, B.value = "middle", tr("middle");
 					},
-					onMouseenter: t[58] ||= (e) => J.value.style.showTooltips && Q("setAlignMiddle", e, "top"),
+					onMouseenter: t[58] ||= (e) => J.value.showTooltips && Q("setAlignMiddle", e, "top"),
 					onMouseleave: $,
-					onFocus: t[59] ||= (e) => J.value.style.showTooltips && Q("setAlignMiddle", e, "top"),
+					onFocus: t[59] ||= (e) => J.value.showTooltips && Q("setAlignMiddle", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text-align-center", {}, () => [t[104] ||= m("svg", {
 					width: "80%",
@@ -2873,15 +2873,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					m("path", { d: "M4 6l16 0" }),
 					m("path", { d: "M8 12l8 0" }),
 					m("path", { d: "M6 18l12 0" })
-				], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setAlignMiddle",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setAlignMiddle",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeTextCenter), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeTextCenter), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2896,19 +2896,19 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: B.value === "end" ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: B.value === "end" ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: B.value === "end" ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: B.value === "end" ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: B.value === "end" ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: B.value === "end" ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					disabled: Ft.value,
 					onClick: t[60] ||= (e) => {
-						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, B.value = "end", $n("end");
+						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, B.value = "end", tr("end");
 					},
-					onMouseenter: t[61] ||= (e) => J.value.style.showTooltips && Q("setAlignEnd", e, "top"),
+					onMouseenter: t[61] ||= (e) => J.value.showTooltips && Q("setAlignEnd", e, "top"),
 					onMouseleave: $,
-					onFocus: t[62] ||= (e) => J.value.style.showTooltips && Q("setAlignEnd", e, "top"),
+					onFocus: t[62] ||= (e) => J.value.showTooltips && Q("setAlignEnd", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text-align-right", {}, () => [t[105] ||= m("svg", {
 					width: "80%",
@@ -2927,15 +2927,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					m("path", { d: "M4 6l16 0" }),
 					m("path", { d: "M10 12l10 0" }),
 					m("path", { d: "M6 18l14 0" })
-				], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setAlignEnd",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setAlignEnd",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeTextRight), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeTextRight), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -2950,18 +2950,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: Ft.value ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: Ft.value ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: Ft.value ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: Ft.value ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: Ft.value ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: Ft.value ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[63] ||= (e) => {
-						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, Ft.value = !Ft.value, B.value = "start", $n("start"), Mr();
+						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, Ft.value = !Ft.value, B.value = "start", tr("start"), Pr();
 					},
-					onMouseenter: t[64] ||= (e) => J.value.style.showTooltips && Q("setBulletMode", e, "top"),
+					onMouseenter: t[64] ||= (e) => J.value.showTooltips && Q("setBulletMode", e, "top"),
 					onMouseleave: $,
-					onFocus: t[65] ||= (e) => J.value.style.showTooltips && Q("setBulletMode", e, "top"),
+					onFocus: t[65] ||= (e) => J.value.showTooltips && Q("setBulletMode", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text-bullet-points", {}, () => [t[106] ||= m("svg", {
 					width: "100%",
@@ -2983,15 +2983,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					m("path", { d: "M5 6l0 .01" }),
 					m("path", { d: "M5 12l0 .01" }),
 					m("path", { d: "M5 18l0 .01" })
-				], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setBulletMode",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setBulletMode",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeTextBullet), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeTextBullet), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -3006,18 +3006,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: Pt.value ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: Pt.value ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: Pt.value ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: Pt.value ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: Pt.value ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: Pt.value ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[66] ||= (e) => {
-						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, Pt.value = !Pt.value, Mr();
+						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, Pt.value = !Pt.value, Pr();
 					},
-					onMouseenter: t[67] ||= (e) => J.value.style.showTooltips && Q("setBold", e, "top"),
+					onMouseenter: t[67] ||= (e) => J.value.showTooltips && Q("setBold", e, "top"),
 					onMouseleave: $,
-					onFocus: t[68] ||= (e) => J.value.style.showTooltips && Q("setBold", e, "top"),
+					onFocus: t[68] ||= (e) => J.value.showTooltips && Q("setBold", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text-bold", {}, () => [t[107] ||= m("svg", {
 					width: "100%",
@@ -3035,15 +3035,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					}),
 					m("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7h-6z" }),
 					m("path", { d: "M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" })
-				], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setBold",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setBold",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeTextBold), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeTextBold), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -3058,18 +3058,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: zt.value ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: zt.value ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: zt.value ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: zt.value ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: zt.value ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: zt.value ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[69] ||= (e) => {
-						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, zt.value = !zt.value, Mr();
+						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, zt.value = !zt.value, Pr();
 					},
-					onMouseenter: t[70] ||= (e) => J.value.style.showTooltips && Q("setItalic", e, "top"),
+					onMouseenter: t[70] ||= (e) => J.value.showTooltips && Q("setItalic", e, "top"),
 					onMouseleave: $,
-					onFocus: t[71] ||= (e) => J.value.style.showTooltips && Q("setItalic", e, "top"),
+					onFocus: t[71] ||= (e) => J.value.showTooltips && Q("setItalic", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text-italic", {}, () => [t[108] ||= m("svg", {
 					width: "100%",
@@ -3089,15 +3089,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					m("path", { d: "M11 5l6 0" }),
 					m("path", { d: "M7 19l6 0" }),
 					m("path", { d: "M14 5l-4 14" })
-				], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setItalic",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setItalic",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeTextItalic), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeTextItalic), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -3112,18 +3112,18 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: _({
-						background: Ht.value ? J.value.style.buttons.shapes.selected.backgroundColor : J.value.style.buttons.shapes.backgroundColor,
-						border: Ht.value ? J.value.style.buttons.shapes.selected.border : J.value.style.buttons.shapes.border,
-						color: Ht.value ? J.value.style.buttons.shapes.selected.color : J.value.style.buttons.shapes.color,
-						borderRadius: `${J.value.style.buttons.borderRadius}px`,
+						background: Ht.value ? q.value.shapes.selected.backgroundColor : q.value.shapes.backgroundColor,
+						border: Ht.value ? q.value.shapes.selected.border : q.value.shapes.border,
+						color: Ht.value ? q.value.shapes.selected.color : q.value.shapes.color,
+						borderRadius: `${q.value.borderRadius}px`,
 						cursor: Y.value ? "pointer" : "default"
 					}),
 					onClick: t[72] ||= (e) => {
-						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, Ht.value = !Ht.value, Mr();
+						D.value = !1, k.value = !1, A.value = !1, O.value = !1, j.value = !1, w.value = void 0, Ht.value = !Ht.value, Pr();
 					},
-					onMouseenter: t[73] ||= (e) => J.value.style.showTooltips && Q("setUnderline", e, "top"),
+					onMouseenter: t[73] ||= (e) => J.value.showTooltips && Q("setUnderline", e, "top"),
 					onMouseleave: $,
-					onFocus: t[74] ||= (e) => J.value.style.showTooltips && Q("setUnderline", e, "top"),
+					onFocus: t[74] ||= (e) => J.value.showTooltips && Q("setUnderline", e, "top"),
 					onBlur: $
 				}, [b(e.$slots, "icon-text-underline", {}, () => [t[109] ||= m("svg", {
 					width: "100%",
@@ -3141,15 +3141,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					}),
 					m("path", { d: "M7 5v5a5 5 0 0 0 10 0v-5" }),
 					m("path", { d: "M5 19h14" })
-				], -1)], !0), J.value.style.showTooltips ? (v(), d(C, {
+				], -1)], !0), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setUnderline",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setUnderline",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeTextUnderline), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeTextUnderline), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -3163,22 +3163,22 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 						tooltip: !0
 					}),
 					style: { borderRadius: "6px" },
-					onMouseenter: t[77] ||= (e) => J.value.style.showTooltips && Q("setColor", e, "top"),
+					onMouseenter: t[77] ||= (e) => J.value.showTooltips && Q("setColor", e, "top"),
 					onMouseleave: $,
-					onFocus: t[78] ||= (e) => J.value.style.showTooltips && Q("setColor", e, "top"),
+					onFocus: t[78] ||= (e) => J.value.showTooltips && Q("setColor", e, "top"),
 					onBlur: $
 				}, [oe(ne, {
-					value: pn.value,
-					"onUpdate:value": [t[75] ||= (e) => pn.value = e, t[76] ||= (e) => Or(e)],
-					backgroundColor: J.value.style.backgroundColor,
-					buttonBorderColor: J.value.style.color,
+					value: hn.value,
+					"onUpdate:value": [t[75] ||= (e) => hn.value = e, t[76] ||= (e) => Ar(e)],
+					backgroundColor: J.value.backgroundColor,
+					buttonBorderColor: J.value.color,
 					isCursorPointer: Y.value,
-					palette: J.value.style.palette,
+					palette: J.value.palette,
 					teleported: ""
 				}, {
 					"annotator-action-color": S(({ color: t }) => [b(e.$slots, "icon-color", le(se({
 						color: t,
-						backgroundColor: pn.value
+						backgroundColor: hn.value
 					})), void 0, !0)]),
 					_: 3
 				}, 8, [
@@ -3187,15 +3187,15 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"buttonBorderColor",
 					"isCursorPointer",
 					"palette"
-				])], 32), J.value.style.showTooltips ? (v(), d(C, {
+				])], 32), J.value.showTooltips ? (v(), d(C, {
 					key: 0,
-					show: W.value && G.value === "setColor",
-					x: K.value.x,
-					y: K.value.y - 6,
+					show: U.value && W.value === "setColor",
+					x: G.value.x,
+					y: G.value.y - 6,
 					placement: "top",
 					styleObject: X.value
 				}, {
-					default: S(() => [h(x(J.value.translations.tooltipShapeColor), 1)]),
+					default: S(() => [h(x(K.value.translations.tooltipShapeColor), 1)]),
 					_: 1
 				}, 8, [
 					"show",
@@ -3203,23 +3203,23 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					"y",
 					"styleObject"
 				])) : f("", !0)]),
-				m("div", ht, [m("label", gt, [h(x(J.value.translations.colorAlpha) + ": " + x($t.value > 98 ? 100 : $t.value) + " % ", 1), _e(m("input", {
+				m("div", ht, [m("label", gt, [h(x(K.value.translations.colorAlpha) + ": " + x($t.value > 98 ? 100 : $t.value) + " % ", 1), _e(m("input", {
 					name: "colorTransparency",
 					type: "range",
 					"onUpdate:modelValue": t[79] ||= (e) => $t.value = e,
-					onInput: Ar,
+					onInput: Mr,
 					min: 0,
 					max: 100,
 					style: _({
 						width: "100%",
-						accentColor: J.value.style.color + " !important"
+						accentColor: J.value.color + " !important"
 					})
 				}, null, 36), [[he, $t.value]])])])
 			])])], 8, ["to"])) : f("", !0)
 		]), m("div", {
 			class: "annotator annotator__wrapper",
 			ref_key: "drawSvgContainer",
-			ref: Sr,
+			ref: wr,
 			style: { position: "relative" },
 			id: kt.value,
 			"data-annotator-content": ""
@@ -3228,11 +3228,11 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				class: "annotator__content-layer",
 				style: _(`${M.value ? "pointer-events: none;" : ""}`)
 			}, [b(e.$slots, "default", {}, void 0, !0)], 4),
-			M.value || J.value.alwaysVisible ? (v(), p("svg", {
+			M.value || K.value.alwaysVisible ? (v(), p("svg", {
 				id: "annotatorSvg",
 				key: Gt.value,
 				ref_key: "mainSvg",
-				ref: vn,
+				ref: bn,
 				class: g({
 					annotator__overlay: !0,
 					"annotator__overlay--inactive": !M.value,
@@ -3242,21 +3242,21 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 				viewBox: `0 0 ${qt.value} ${Kt.value}`,
 				width: Xt.value,
 				height: Zt.value,
-				onPointerdown: t[83] ||= (e) => fr(e),
-				onPointerup: t[84] ||= (e) => Tr(e),
-				onTouchend: t[85] ||= (e) => Tr(e),
-				onTouchstart: t[86] ||= (e) => Nr(e),
+				onPointerdown: t[83] ||= (e) => mr(e),
+				onPointerup: t[84] ||= (e) => Dr(e),
+				onTouchend: t[85] ||= (e) => Dr(e),
+				onTouchstart: t[86] ||= (e) => Fr(e),
 				onPointermove: t[87] ||= (e) => {
-					Nr(e), gr(e);
+					Fr(e), vr(e);
 				},
-				onPointerout: t[88] ||= (e) => ur(e),
-				onPointerover: t[89] ||= (e) => Gn(e),
-				onClick: t[90] ||= (e) => Qn(e),
+				onPointerout: t[88] ||= (e) => fr(e),
+				onPointerover: t[89] ||= (e) => qn(e),
+				onClick: t[90] ||= (e) => er(e),
 				style: _({
 					position: "absolute",
 					top: 0,
 					left: 0,
-					cursor: gn.value,
+					cursor: vn.value,
 					fontFamily: "Helvetica",
 					zIndex: 1e8,
 					pointerEvents: M.value ? "all" : "none"
@@ -3271,28 +3271,28 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 					fill: "transparent",
 					"pointer-events": M.value ? "all" : "none",
 					style: { cursor: "inherit" },
-					onPointerdown: t[80] ||= ve((e) => fr(e), ["stop", "prevent"]),
+					onPointerdown: t[80] ||= ve((e) => mr(e), ["stop", "prevent"]),
 					onPointermove: t[81] ||= ve((e) => {
-						Nr(e), gr(e);
+						Fr(e), vr(e);
 					}, ["stop", "prevent"]),
-					onPointerup: ve(Tr, ["stop", "prevent"]),
-					onClick: t[82] ||= ve((e) => Qn(e), ["stop", "prevent"])
+					onPointerup: ve(Dr, ["stop", "prevent"]),
+					onClick: t[82] ||= ve((e) => er(e), ["stop", "prevent"])
 				}, null, 40, yt),
-				(v(!0), p(re, null, fe(Mn.value, (e) => (v(), p("g", {
+				(v(!0), p(re, null, fe(Pn.value, (e) => (v(), p("g", {
 					key: e.id,
 					innerHTML: e.html,
 					style: _({ pointerEvents: M.value ? null : "none" }),
-					onClick: (t) => xr(t, e.id),
-					onDblclick: ve((t) => br(t, e.id), ["stop", "prevent"])
+					onClick: (t) => Cr(t, e.id),
+					onDblclick: ve((t) => Sr(t, e.id), ["stop", "prevent"])
 				}, null, 44, bt))), 128)),
-				U.value && P.value ? (v(), p("line", {
+				H.value && P.value ? (v(), p("line", {
 					key: 0,
 					class: "vue-ui-annotator-caret",
-					x1: U.value.x,
-					x2: U.value.x,
-					y1: U.value.y1,
-					y2: U.value.y2,
-					stroke: U.value.color,
+					x1: H.value.x,
+					x2: H.value.x,
+					y1: H.value.y1,
+					y2: H.value.y2,
+					stroke: H.value.color,
 					"stroke-width": "2",
 					"pointer-events": "none",
 					"vector-effect": "non-scaling-stroke"
@@ -3320,6 +3320,6 @@ var be = { class: "teleport-tooltip__inner" }, C = /*#__PURE__*/ ee({
 			}, null, 8, Ct)], 8, St)) : f("", !0)
 		], 8, _t)]));
 	}
-}, [["__scopeId", "data-v-c9b9850e"]]);
+}, [["__scopeId", "data-v-9a06c054"]]);
 //#endregion
 export { xe as n, Dt as t };