vue-data-ui 3.26.5 → 3.27.1-beta.0

package/dist/PenAndPaper-C1EcBgJW.js

@@ -1,906 +0,0 @@
-import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { $ as t, Pt as n, X as r, t as i } from "./lib-TWIH5fGr.js";
-import { t as a } from "./BaseIcon-CIK6Sqo3.js";
-import { t as o } from "./ColorPicker-Cb7qpvFt.js";
-import { computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, guardReactiveProps as f, nextTick as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as ee, onMounted as te, openBlock as ne, ref as _, renderSlot as v, toDisplayString as re, unref as ie, vModelText as ae, watch as y, withCtx as oe, withDirectives as se } from "vue";
-//#region src/atoms/PenAndPaper.vue
-var ce = /* @__PURE__ */ e({ default: () => b }), le = {
-	"aria-hidden": "true",
-	viewBox: "0 0 6 12",
-	style: { width: "100%" }
-}, ue = ["fill"], de = ["fill"], fe = ["fill"], pe = ["disabled"], me = 750, he = 8, ge = 2, b = {
-	__name: "PenAndPaper",
-	props: {
-		svgRef: {
-			type: [
-				Object,
-				null,
-				void 0
-			],
-			required: !0
-		},
-		color: {
-			type: String,
-			default: "#2D353C"
-		},
-		backgroundColor: {
-			type: String,
-			default: "#FFFFFF"
-		},
-		active: {
-			type: Boolean,
-			default: !1
-		},
-		scale: {
-			type: Number,
-			default: 1
-		},
-		isCursorPointer: {
-			type: Boolean,
-			default: !1
-		},
-		palette: {
-			type: Array,
-			default: () => [
-				"#000000",
-				"#FFFFFF",
-				"#FF5733",
-				"#33FF57",
-				"#3357FF",
-				"#FFC300",
-				"#800080",
-				"#FF1493",
-				"#00CED1"
-			]
-		}
-	},
-	emits: ["close"],
-	setup(e, { emit: ce }) {
-		let b = e, _e = ce, x = _([]), S = _([]), C = _(b.color), w = _(2), T = _(!1), ve = _(""), E = _(null), D = _(null), O = _(null), ye = _(null), k = _(null), be = _(null), A = _(!1), j = _(null), xe = _(""), M = _(""), N = _(!1), Se = _(!1), P = _(null), Ce = _(null), we = _(!1), F = _(""), Te = /* @__PURE__ */ new Map(), Ee = _(`arrow-def-${r()}`), I = _(!1), L = _(null), De = _({
-			x: 0,
-			y: 0
-		}), R = _([""]), z = _({
-			row: 0,
-			col: 0
-		}), B = _(16), Oe = _(!1), ke = _(""), Ae = _(!1), je = [
-			"arrow",
-			"text",
-			"line",
-			"draw"
-		], V = _(0), H = s(() => je[V.value]), Me = {
-			arrow: "plotArrow",
-			text: "text",
-			line: "plotLine",
-			draw: "annotator"
-		}, Ne = _("url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVh2YQcchQnSyIijhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB020wn4lIuvyqFXhGGiAhCiMnMMpKZxSx8x9c9Any9i/Es/3N/jgG1YDEgIBHPMcO0iTeIZzZtg/M+scjKskp8Tjxu0gWJH7muePzGueSywDNFM5ueJxaJpVIXK13MyqZGPE0cVTWd8oWcxyrnLc5atc7a9+QvDBf0lQzXaY4ggSUkkYIEBXVUUIWNGK06KRbStB/38Q+7/hS5FHJVwMixgBo0yK4f/A9+d2sVpya9pHAc6H1xnI9RILQLtBqO833sOK0TIPgMXOkdf60JzH6S3uho0SNgcBu4uO5oyh5wuQMMPRmyKbtSkKZQLALvZ/RNeSByC/Sveb2193H6AGSpq+Ub4OAQGCtR9rrPu/u6e/v3TLu/H5C7crM1WjgWAAAABmJLR0QAqwB5AHWF+8OUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwUExIUagzGcQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjTldAxDoNQDIPhL0+q1L33P1AvAhN7xfK6WAgoLfSfrNiykpQtE+7RLzx2vgF9D3o8lWDmn1QVVMP0LZQGmNtqp1/cmou0XHdG/+sYeGZwFBqPCub8rkcvvAGvsi1VYarR8wAAAABJRU5ErkJggg==') 5 5, auto");
-		function Pe(e) {
-			let t = e?.target;
-			if (!(t instanceof Element)) return null;
-			let n = t.closest(".vue-data-ui-doodle");
-			return n && E.value?.contains(n) ? n : null;
-		}
-		function Fe(e) {
-			let t = e?.target;
-			if (!(t instanceof Element)) return null;
-			let n = t.closest(".vue-data-ui-selection-handle");
-			return n && E.value?.contains(n) ? n : null;
-		}
-		function Ie(e) {
-			let t = e?.target;
-			if (!(t instanceof Element)) return null;
-			let n = t.closest(".vue-data-ui-selection-delete");
-			return n && E.value?.contains(n) ? n : null;
-		}
-		function Le(e) {
-			if (!e) return "";
-			let t = e.getAttribute("data-doodle-id");
-			return t || (t = r(), e.setAttribute("data-doodle-id", t)), t;
-		}
-		function U() {
-			return E.value ? Array.from(E.value.children).filter((e) => e.classList?.contains("vue-data-ui-doodle")).map((e) => e.outerHTML).join("") : "";
-		}
-		function Re(e) {
-			if (!E.value) return;
-			K();
-			let t = E.value.querySelector(".vue-data-ui-svg-caret");
-			if (t && t.remove(), Array.from(E.value.children).forEach((e) => {
-				e.classList?.contains("vue-data-ui-doodle") && e.remove();
-			}), e) {
-				let t = document.createElementNS(i, "g");
-				t.innerHTML = e, Array.from(t.children).forEach((e) => E.value.appendChild(e));
-			}
-		}
-		function W(e, t = null) {
-			if (e === U()) return;
-			let n = Date.now(), r = x.value[x.value.length - 1];
-			t && r?.mergeKey === t && n - r.timestamp <= me ? r.timestamp = n : x.value.push({
-				state: e,
-				mergeKey: t,
-				timestamp: n
-			}), S.value = [];
-		}
-		function ze(e) {
-			let t = e.touches?.[0] || e.changedTouches?.[0];
-			return {
-				x: t ? t.clientX : e.clientX,
-				y: t ? t.clientY : e.clientY
-			};
-		}
-		function Be(e, t) {
-			let n = b.svgRef;
-			if (!n || !e) return null;
-			let { x: r, y: i } = ze(t), a = n.createSVGPoint();
-			a.x = r, a.y = i;
-			let o = e.getScreenCTM()?.inverse();
-			return o ? a.matrixTransform(o) : null;
-		}
-		function Ve(e, t, n, r, i, a) {
-			let o = i - n, s = a - r, c = o * o + s * s;
-			if (!c) return Math.hypot(e - n, t - r);
-			let l = Math.max(0, Math.min(1, ((e - n) * o + (t - r) * s) / c)), u = n + l * o, d = r + l * s;
-			return Math.hypot(e - u, t - d);
-		}
-		function He(e, t) {
-			let n = Be(e, t);
-			if (!n) return !1;
-			let r = e.tagName.toLowerCase(), i = he * b.scale;
-			if (r === "line") {
-				let t = Number(e.getAttribute("x1")), r = Number(e.getAttribute("y1")), a = Number(e.getAttribute("x2")), o = Number(e.getAttribute("y2")), s = Number(e.getAttribute("stroke-width")) || 0;
-				return Ve(n.x, n.y, t, r, a, o) <= Math.max(i, s / 2);
-			}
-			if (r === "circle") {
-				let t = Number(e.getAttribute("cx")), r = Number(e.getAttribute("cy")), a = Number(e.getAttribute("r")) || 0;
-				return Math.hypot(n.x - t, n.y - r) <= a + i;
-			}
-			if (r === "text") try {
-				let t = e.getBBox();
-				return n.x >= t.x - i && n.x <= t.x + t.width + i && n.y >= t.y - i && n.y <= t.y + t.height + i;
-			} catch {
-				return !1;
-			}
-			if (r === "path") try {
-				let t = e.getBBox();
-				if (n.x < t.x - i || n.x > t.x + t.width + i || n.y < t.y - i || n.y > t.y + t.height + i) return !1;
-				if (typeof e.isPointInStroke == "function") {
-					let t = e.getAttribute("stroke-width"), r = Math.max(Number(t) || 0, i * 2);
-					e.setAttribute("stroke-width", r);
-					let a = e.isPointInStroke(n);
-					return t === null ? e.removeAttribute("stroke-width") : e.setAttribute("stroke-width", t), a;
-				}
-				let r = e.getTotalLength(), a = Math.max(2 * b.scale, 2);
-				for (let t = 0; t <= r; t += a) {
-					let r = e.getPointAtLength(t);
-					if (Math.hypot(n.x - r.x, n.y - r.y) <= i) return !0;
-				}
-			} catch {
-				return !1;
-			}
-			return !1;
-		}
-		function Ue(e) {
-			return Pe(e) || E.value && Array.from(E.value.querySelectorAll(".vue-data-ui-doodle")).reverse().find((t) => He(t, e)) || null;
-		}
-		function We() {
-			be.value?.parentNode && be.value.parentNode.removeChild(be.value), be.value = null;
-		}
-		function G() {
-			if (We(), !I.value && b.active && E.value && k.value && E.value.contains(k.value)) try {
-				let e = k.value, t = e.getBBox(), n = 4 * b.scale, r = document.createElementNS(i, "g");
-				r.setAttribute("class", "vue-data-ui-selection-overlay");
-				let a = document.createElementNS(i, "rect");
-				if (a.setAttribute("class", "vue-data-ui-selection-box"), a.setAttribute("x", t.x - n), a.setAttribute("y", t.y - n), a.setAttribute("width", Math.max(t.width + n * 2, n * 2)), a.setAttribute("height", Math.max(t.height + n * 2, n * 2)), a.setAttribute("fill", "none"), a.setAttribute("stroke", b.color), a.setAttribute("stroke-width", Math.max(1, b.scale)), a.setAttribute("stroke-dasharray", `${4 * b.scale} ${3 * b.scale}`), a.setAttribute("pointer-events", "none"), r.appendChild(a), e.tagName.toLowerCase() === "line") {
-					let t = Math.max(4, 5 * b.scale), n = Math.max(1, 1.5 * b.scale);
-					[{
-						endpoint: "start",
-						x: Number(e.getAttribute("x1")),
-						y: Number(e.getAttribute("y1"))
-					}, {
-						endpoint: "end",
-						x: Number(e.getAttribute("x2")),
-						y: Number(e.getAttribute("y2"))
-					}].forEach(({ endpoint: e, x: a, y: o }) => {
-						let s = document.createElementNS(i, "circle");
-						s.setAttribute("class", "vue-data-ui-selection-handle"), s.setAttribute("data-line-endpoint", e), s.setAttribute("cx", a), s.setAttribute("cy", o), s.setAttribute("r", t), s.setAttribute("fill", b.backgroundColor), s.setAttribute("stroke", b.color), s.setAttribute("stroke-width", n), s.setAttribute("pointer-events", "all"), r.appendChild(s);
-					});
-				}
-				let o = Math.max(20, 24 * b.scale), s = Math.max(1, b.scale), c = t.x + t.width + n + 4 * b.scale, l = t.y - n - o - 4 * b.scale, u = document.createElementNS(i, "g");
-				u.setAttribute("class", "vue-data-ui-selection-delete"), u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-label", "Delete selected drawing"), u.setAttribute("pointer-events", "all");
-				let d = document.createElementNS(i, "rect");
-				d.setAttribute("x", c), d.setAttribute("y", l), d.setAttribute("width", o), d.setAttribute("height", o), d.setAttribute("rx", 4 * b.scale), d.setAttribute("fill", b.backgroundColor), d.setAttribute("stroke", J.value), d.setAttribute("stroke-width", s), d.setAttribute("vector-effect", "non-scaling-stroke");
-				let f = o / 24, p = document.createElementNS(i, "path");
-				p.setAttribute("d", "M 8 8 L 16 16 M 16 8 L 8 16"), p.setAttribute("transform", `translate(${c} ${l}) scale(${f})`), p.setAttribute("fill", "none"), p.setAttribute("stroke", b.color), p.setAttribute("stroke-width", Math.max(1.25, 1.5 * b.scale)), p.setAttribute("stroke-linecap", "round"), p.setAttribute("stroke-linejoin", "round"), p.setAttribute("vector-effect", "non-scaling-stroke"), p.setAttribute("pointer-events", "none"), u.appendChild(d), u.appendChild(p), u.addEventListener("keydown", (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), Ge(e));
-				}), r.appendChild(u);
-				let m = e.getAttribute("transform");
-				m && r.setAttribute("transform", m), E.value.appendChild(r), be.value = r;
-			} catch {
-				We();
-			}
-		}
-		function K() {
-			k.value = null, A.value = !1, j.value = null, xe.value = "", M.value = "", N.value = !1, Se.value = !1, P.value = null, Ce.value = null, We(), Z();
-		}
-		function Ge(e = null) {
-			if (!b.active || !k.value || !E.value || !E.value.contains(k.value)) return;
-			e?.cancelable && e.preventDefault(), e?.stopPropagation?.(), e?.stopImmediatePropagation?.();
-			let t = U();
-			k.value.remove(), W(t), K();
-		}
-		function Ke(e) {
-			return e ? e.tagName.toLowerCase() === "text" || e.tagName.toLowerCase() === "circle" ? e.getAttribute("fill") : e.getAttribute("stroke") : null;
-		}
-		function qe(e) {
-			if (e) {
-				we.value = !0;
-				try {
-					let t = e.tagName.toLowerCase(), n = Ke(e);
-					if (n && (C.value = n), t === "text") {
-						V.value = je.indexOf("text");
-						let t = Number(e.getAttribute("font-size"));
-						Number.isFinite(t) && b.scale && (B.value = t / b.scale);
-						return;
-					}
-					if (t === "line" ? V.value = e.hasAttribute("marker-end") ? je.indexOf("arrow") : je.indexOf("line") : V.value = je.indexOf("draw"), t === "circle") {
-						let t = Number(e.getAttribute("r"));
-						Number.isFinite(t) && b.scale && (w.value = t * 2 / b.scale);
-					} else {
-						let t = Number(e.getAttribute("stroke-width"));
-						Number.isFinite(t) && b.scale && (w.value = t / b.scale);
-					}
-				} finally {
-					p(() => {
-						we.value = !1;
-					});
-				}
-			}
-		}
-		function Je(e) {
-			b.active && e && E.value?.contains(e) && (Le(e), k.value = e, qe(e), p(G));
-		}
-		function Ye(e) {
-			if (!b.active || !E.value || I.value) return;
-			if (Ie(e)) {
-				Ge(e);
-				return;
-			}
-			let t = Fe(e);
-			if (t && k.value && k.value.tagName.toLowerCase() === "line") {
-				e.cancelable && e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation?.();
-				let n = t.getAttribute("data-line-endpoint");
-				if (!["start", "end"].includes(n)) return;
-				P.value = n, Ce.value = Be(k.value, e), A.value = !1, N.value = !1, Se.value = !1, M.value = U(), Z(e);
-				return;
-			}
-			let n = Ue(e);
-			if (!n) {
-				K();
-				return;
-			}
-			e.cancelable && e.preventDefault(), Se.value = k.value === n, Je(n);
-			let { x: r, y: i } = Y(e);
-			A.value = !0, N.value = !1, j.value = {
-				x: r,
-				y: i
-			}, xe.value = n.getAttribute("transform") || "", M.value = U(), Z(e);
-		}
-		function Xe(e) {
-			if (!b.active || !k.value) return;
-			if (Z(e), P.value) {
-				let t = Be(k.value, e);
-				if (!t) return;
-				let n = Ce.value;
-				if (!N.value && n && Math.hypot(t.x - n.x, t.y - n.y) < ge * b.scale) return;
-				e.cancelable && e.preventDefault(), N.value = !0, P.value === "start" ? (k.value.setAttribute("x1", t.x), k.value.setAttribute("y1", t.y)) : (k.value.setAttribute("x2", t.x), k.value.setAttribute("y2", t.y)), G();
-				return;
-			}
-			if (!A.value || !j.value) return;
-			let { x: t, y: n } = Y(e), r = t - j.value.x, i = n - j.value.y, a = Math.hypot(r, i);
-			if (!N.value && a < ge * b.scale) return;
-			e.cancelable && e.preventDefault(), N.value = !0;
-			let o = xe.value.trim();
-			k.value.setAttribute("transform", `${o ? `${o} ` : ""}translate(${r} ${i})`), G();
-		}
-		function q(e) {
-			let t = k.value, n = !P.value && t && t.tagName.toLowerCase() === "text" && Se.value && !N.value && !I.value;
-			if (N.value && M.value && W(M.value), A.value = !1, j.value = null, M.value = "", N.value = !1, Se.value = !1, P.value = null, Ce.value = null, xe.value = t?.getAttribute("transform") || "", t && E.value?.contains(t) && G(), n && t && E.value?.contains(t)) {
-				nt(t, e), Z(e);
-				return;
-			}
-			Z(e);
-		}
-		function Ze(e) {
-			if (!b.active || !k.value || we.value) return;
-			let t = k.value, n = t.tagName.toLowerCase();
-			if (Ke(t) === e) return;
-			let r = U();
-			if (n === "text" || n === "circle") t.setAttribute("fill", e);
-			else if (t.setAttribute("stroke", e), n === "line" && t.hasAttribute("marker-end")) {
-				let n = _t(e);
-				n && t.setAttribute("marker-end", `url(#${n})`);
-			}
-			I.value && t === L.value || W(r, `color:${Le(t)}`), G(), I.value && t === L.value && ct();
-		}
-		function Qe(e) {
-			if (!b.active || !k.value || we.value) return;
-			let t = k.value, n = t.tagName.toLowerCase();
-			if (n === "text") return;
-			let r = Number(e) * b.scale;
-			if ((n === "circle" ? Number(t.getAttribute("r")) * 2 : Number(t.getAttribute("stroke-width"))) === r) return;
-			let i = U();
-			n === "circle" ? t.setAttribute("r", r / 2) : t.setAttribute("stroke-width", r), W(i, `size:${Le(t)}`), G();
-		}
-		function $e(e) {
-			if (!b.active || !k.value || we.value) return;
-			let t = k.value;
-			if (t.tagName.toLowerCase() !== "text") return;
-			let n = Number(e) * b.scale;
-			if (Number(t.getAttribute("font-size")) === n) return;
-			let r = U();
-			t.setAttribute("font-size", n), Array.from(t.children).forEach((e, t) => {
-				e.setAttribute("dy", t === 0 ? "0" : `${n * 1.2}`);
-			}), I.value && t === L.value || W(r, `font-size:${Le(t)}`), G(), I.value && t === L.value && ct();
-		}
-		y(C, Ze), y(w, Qe), y(B, $e);
-		function et() {
-			V.value + 1 >= je.length ? V.value = 0 : V.value += 1;
-		}
-		function tt(e) {
-			if (!E.value || !b.active || H.value !== "text" || I.value || Fe(e) || Ue(e)) return;
-			K();
-			let t = U(), { x: n, y: a } = Y(e);
-			De.value = {
-				x: n,
-				y: a
-			}, R.value = [""], z.value = {
-				row: 0,
-				col: 0
-			}, Oe.value = !1, ke.value = t, Ae.value = !1;
-			let o = document.createElementNS(i, "text");
-			o.setAttribute("x", n), o.setAttribute("y", a), o.setAttribute("fill", C.value), o.setAttribute("font-size", B.value * b.scale), o.setAttribute("font-family", "sans-serif"), o.setAttribute("class", "vue-data-ui-doodle"), o.setAttribute("data-doodle-id", r()), o.setAttribute("dominant-baseline", "hanging"), o.setAttribute("pointer-events", "all");
-			let s = document.createElementNS(i, "tspan");
-			s.setAttribute("x", n), s.setAttribute("dy", "0"), s.setAttribute("dominant-baseline", "hanging"), s.textContent = "", o.appendChild(s), o.style.pointerEvents = "none", o.style.userSelect = "none", E.value.appendChild(o), k.value = o, L.value = o, I.value = !0, We(), window.addEventListener("keydown", rt), window.addEventListener("mousedown", lt, !0), it(), ct();
-		}
-		function nt(e) {
-			if (!b.active || !E.value || I.value || !e || e.tagName.toLowerCase() !== "text" || !E.value.contains(e)) return;
-			let t = U();
-			k.value = e, qe(e);
-			let n = Number(e.getAttribute("x")) || 0, r = Number(e.getAttribute("y")) || 0, i = Array.from(e.children).map((e) => {
-				let t = e.textContent || "";
-				return t === "​" ? "" : t.split("​").join("");
-			}), a = i.length ? i : [e.textContent || ""], o = Math.max(0, a.length - 1);
-			De.value = {
-				x: n,
-				y: r
-			}, R.value = a, z.value = {
-				row: o,
-				col: a[o]?.length || 0
-			}, ke.value = t, Ae.value = !0, Oe.value = !0, L.value = e, I.value = !0, e.style.pointerEvents = "none", We(), window.addEventListener("keydown", rt), window.addEventListener("mousedown", lt, !0), it(), ct();
-		}
-		function rt(e) {
-			if (!I.value) return;
-			let { row: t, col: n } = z.value, r = R.value.slice(), i = !1;
-			if (e.key === "Enter") {
-				let a = r[t], o = a.slice(0, n), s = a.slice(n);
-				r.splice(t, 1, o, s), t += 1, n = 0, i = !0, e.preventDefault();
-			} else if (e.key === "Backspace") {
-				if (n > 0) r[t] = r[t].slice(0, n - 1) + r[t].slice(n), --n, i = !0;
-				else if (t > 0) {
-					let e = r[t - 1].length;
-					r[t - 1] += r[t], r.splice(t, 1), --t, n = e, i = !0;
-				}
-				e.preventDefault();
-			} else if (e.key === "Delete") n < r[t].length ? (r[t] = r[t].slice(0, n) + r[t].slice(n + 1), i = !0) : t < r.length - 1 && (r[t] += r[t + 1], r.splice(t + 1, 1), i = !0), e.preventDefault();
-			else if (e.key === "ArrowLeft") n > 0 ? --n : t > 0 && (--t, n = r[t].length), i = !0, e.preventDefault();
-			else if (e.key === "ArrowRight") n < r[t].length ? n += 1 : t < r.length - 1 && (t += 1, n = 0), i = !0, e.preventDefault();
-			else if (e.key === "ArrowUp") t > 0 && (--t, n = Math.min(n, r[t].length), i = !0), e.preventDefault();
-			else if (e.key === "ArrowDown") t < r.length - 1 && (t += 1, n = Math.min(n, r[t].length), i = !0), e.preventDefault();
-			else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) r[t] = r[t].slice(0, n) + e.key + r[t].slice(n), n += 1, i = !0, e.preventDefault();
-			else if (e.key === "Escape") {
-				ut(!1, !0);
-				return;
-			} else e.key === "Tab" && e.preventDefault();
-			i && (R.value = r, z.value = {
-				row: t,
-				col: n
-			}, it(), ct());
-		}
-		function it() {
-			let e = L.value;
-			if (!e) return;
-			let { x: t } = De.value;
-			for (; e.firstChild;) e.removeChild(e.firstChild);
-			R.value.forEach((n, r) => {
-				let a = document.createElementNS(i, "tspan");
-				a.setAttribute("x", t), a.setAttribute("dominant-baseline", "hanging"), a.setAttribute("dy", r === 0 ? "0" : `${B.value * 1.2 * b.scale}`), a.textContent = n.length ? n : "​", e.appendChild(a);
-			});
-		}
-		let at = _(null);
-		function ot() {
-			at.value !== null && (clearInterval(at.value), at.value = null);
-		}
-		function st(e) {
-			ot();
-			let t = !0;
-			e.style.opacity = "1", at.value = setInterval(() => {
-				if (!E.value || !e || !E.value.contains(e)) {
-					ot();
-					return;
-				}
-				t = !t, e.style.opacity = t ? "1" : "0";
-			}, 500);
-		}
-		function ct() {
-			let e = E.value?.querySelector(".vue-data-ui-svg-caret");
-			e && E.value && E.value.removeChild(e);
-			let t = L.value;
-			if (!t || !E.value) return;
-			let { x: n, y: r } = De.value, { row: a, col: o } = z.value, s = B.value * b.scale, c = t.childNodes[a];
-			if (!c) return;
-			let l = c.textContent.slice(0, o);
-			l.endsWith(" ") && (l += "\xA0");
-			let u = document.createElementNS(i, "text");
-			u.setAttribute("x", n), u.setAttribute("y", r), u.setAttribute("font-size", s), u.setAttribute("font-family", "sans-serif"), u.textContent = l || "", E.value.appendChild(u);
-			let d = u.getBBox();
-			E.value.removeChild(u);
-			let f = r + a * s * 1.2, p = n + d.width, m = document.createElementNS(i, "rect");
-			m.setAttribute("x", p), m.setAttribute("y", f), m.setAttribute("rx", 1), m.setAttribute("width", 2), m.setAttribute("height", s), m.setAttribute("fill", C.value), m.setAttribute("class", "vue-data-ui-svg-caret"), m.setAttribute("pointer-events", "none");
-			let h = t.getAttribute("transform");
-			h && m.setAttribute("transform", h), E.value.appendChild(m), st(m);
-		}
-		function lt(e) {
-			L.value && (L.value.contains(e.target) || ut(!1));
-		}
-		function ut(e = !1, t = !1) {
-			window.removeEventListener("keydown", rt), window.removeEventListener("mousedown", lt, !0), ot();
-			let n = E.value?.querySelector(".vue-data-ui-svg-caret");
-			n && n.remove();
-			let r = L.value, i = ke.value, a = R.value.every((e) => !e.length);
-			if (t) {
-				I.value = !1, L.value = null, R.value = [""], z.value = {
-					row: 0,
-					col: 0
-				}, Oe.value = !1, ke.value = "", Ae.value = !1, Re(i);
-				return;
-			}
-			r && E.value?.contains(r) && (e || a ? r.remove() : r.style.pointerEvents = "all"), I.value = !1, L.value = null, R.value = [""], z.value = {
-				row: 0,
-				col: 0
-			}, Oe.value = !1, ke.value = "", Ae.value = !1, W(i), r && E.value?.contains(r) ? Je(r) : K();
-		}
-		let J = s(() => n(b.color, .6));
-		function dt() {
-			if (!E.value) return;
-			let e = E.value.querySelector(".vue-data-ui-mask");
-			if (e && E.value.removeChild(e), b.active) {
-				let e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-				e.setAttribute("class", "vue-data-ui-mask"), e.setAttribute("width", "100%"), e.setAttribute("height", "100%"), e.setAttribute("fill", "transparent"), e.setAttribute("pointer-events", "all"), E.value.insertBefore(e, E.value.firstChild);
-			}
-		}
-		function Y(e) {
-			let t = b.svgRef;
-			if (!t) return {
-				x: 0,
-				y: 0
-			};
-			let n = t.createSVGPoint(), r = e.touches?.length || e.changedTouches?.length ? e.touches?.[0] || e.changedTouches?.[0] : null, i = r ? r.clientX : e.clientX, a = r ? r.clientY : e.clientY;
-			n.x = i, n.y = a;
-			let o = t.getScreenCTM()?.inverse();
-			return o ? n.matrixTransform(o) : {
-				x: 0,
-				y: 0
-			};
-		}
-		function ft(e) {
-			let t = e.trim().split(/\s+/);
-			if (t.length < 4) return e;
-			let n = t.slice(1).map(Number);
-			if (n.length % 2 != 0) return e;
-			let r = pt(n), i = [`M ${r[0]} ${r[1]}`];
-			for (let e = 2; e < r.length - 2; e += 2) {
-				let t = r[e - 2], n = r[e - 1], a = r[e], o = r[e + 1], s = (t + a) / 2, c = (n + o) / 2;
-				i.push(`Q ${t} ${n} ${s} ${c}`);
-			}
-			let a = r[r.length - 2], o = r[r.length - 1];
-			return i.push(`L ${a} ${o}`), i.join(" ");
-		}
-		function pt(e, t = 1) {
-			let n = [...e];
-			for (let r = 2; r < e.length - 2; r += 2) {
-				let i = e[r], a = e[r + 1], o = e[r - 2], s = e[r - 1], c = e[r + 2], l = e[r + 3];
-				n[r] = i + t * ((o + c) / 2 - i), n[r + 1] = a + t * ((s + l) / 2 - a);
-			}
-			return n;
-		}
-		function mt(e) {
-			let t = e.trim().split(/\s+/), n = "", r = "", i = null, a = null;
-			for (let e = 0; e < t.length; e += 1) {
-				let o = t[e];
-				if (isNaN(o)) {
-					if (r = o, r === "M" || r === "L") i = parseFloat(t[++e]), a = parseFloat(t[++e]), n += `${r}${i} ${a}`;
-					else if (r === "Q") {
-						let r = parseFloat(t[++e]), o = parseFloat(t[++e]), s = parseFloat(t[++e]), c = parseFloat(t[++e]);
-						n += r === i && o === a ? `t${s - i} ${c - a}` : `q${r - i} ${o - a} ${s - i} ${c - a}`, i = s, a = c;
-					}
-				} else {
-					let s = parseFloat(o), c = parseFloat(t[++e]);
-					if (r === "L") {
-						let e = s - i, t = c - a;
-						n += e === 0 ? `v${t}` : t === 0 ? `h${e}` : `l${e} ${t}`, i = s, a = c;
-					} else if (r === "Q") {
-						let r = s, o = c, l = parseFloat(t[++e]), u = parseFloat(t[++e]);
-						n += r === i && o === a ? `t${l - i} ${u - a}` : `q${r - i} ${o - a} ${l - i} ${u - a}`, i = l, a = u;
-					}
-				}
-			}
-			return n;
-		}
-		function ht(e) {
-			if (H.value !== "draw" || !b.active || !E.value || Fe(e) || Ue(e)) return;
-			e.cancelable && e.preventDefault(), K(), F.value = U(), T.value = !0;
-			let { x: t, y: n } = Y(e);
-			ye.value = {
-				x: t,
-				y: n
-			}, ve.value = `M ${t} ${n}`, D.value = document.createElementNS(i, "path"), D.value.setAttribute("stroke", C.value), D.value.setAttribute("stroke-width", w.value * b.scale), D.value.setAttribute("fill", "none"), D.value.setAttribute("stroke-linecap", "round"), D.value.setAttribute("stroke-linejoin", "round"), D.value.setAttribute("class", "vue-data-ui-doodle"), D.value.setAttribute("data-doodle-id", r()), D.value.setAttribute("pointer-events", "stroke"), E.value.appendChild(D.value);
-		}
-		function gt(e) {
-			if (e.cancelable && e.preventDefault(), !T.value || !E.value || !D.value) return;
-			let { x: t, y: n } = Y(e);
-			ve.value += ` ${t} ${n}`, D.value.setAttribute("d", ve.value);
-		}
-		function _t(e) {
-			let t = b.svgRef;
-			if (!t) return null;
-			let n = t.querySelector(`defs#${Ee.value}`);
-			n || (n = document.createElementNS(i, "defs"), n.setAttribute("id", Ee.value), t.appendChild(n));
-			let a = String(e).trim();
-			if (Te.has(a)) return Te.get(a);
-			let o = `arrow-${r()}`, s = document.createElementNS(i, "marker");
-			s.setAttribute("id", o), s.setAttribute("markerUnits", "strokeWidth"), s.setAttribute("markerWidth", "6"), s.setAttribute("markerHeight", "6"), s.setAttribute("refX", "4"), s.setAttribute("refY", "3"), s.setAttribute("orient", "auto"), s.setAttribute("viewBox", "0 0 6 6");
-			let c = document.createElementNS(i, "path");
-			return c.setAttribute("d", "M 0 0 L 6 3 L 0 6 z"), c.setAttribute("fill", e), c.setAttribute("stroke", "none"), s.appendChild(c), n.appendChild(s), Te.set(a, o), o;
-		}
-		function vt(e) {
-			if (!["line", "arrow"].includes(H.value) || !b.active || !E.value || Fe(e) || Ue(e)) return;
-			e.cancelable && e.preventDefault(), K(), F.value = U(), T.value = !0;
-			let { x: t, y: n } = Y(e);
-			if (ye.value = {
-				x: t,
-				y: n
-			}, O.value = document.createElementNS(i, "line"), O.value.setAttribute("stroke", C.value), O.value.setAttribute("stroke-width", w.value * b.scale), O.value.setAttribute("stroke-linecap", "round"), O.value.setAttribute("class", "vue-data-ui-doodle"), O.value.setAttribute("data-doodle-id", r()), O.value.setAttribute("pointer-events", "stroke"), O.value.setAttribute("x1", t), O.value.setAttribute("y1", n), O.value.setAttribute("x2", t), O.value.setAttribute("y2", n), H.value === "arrow") {
-				let e = _t(C.value);
-				e && O.value.setAttribute("marker-end", `url(#${e})`);
-			}
-			E.value.appendChild(O.value);
-		}
-		function yt(e) {
-			if (e.cancelable && e.preventDefault(), !["line", "arrow"].includes(H.value) || !T.value || !E.value || !O.value) return;
-			let { x: t, y: n } = Y(e);
-			O.value.setAttribute("x2", t), O.value.setAttribute("y2", n);
-		}
-		function bt(e) {
-			if (T.value && E.value && O.value) {
-				let { x: t, y: n } = Y(e);
-				O.value.setAttribute("x2", t), O.value.setAttribute("y2", n), W(F.value), O.value = null, F.value = "";
-			}
-			T.value = !1;
-		}
-		function X(e) {
-			if (T.value && E.value && D.value) {
-				let { x: t, y: n } = Y(e);
-				if (ye.value && ye.value.x === t && ye.value.y === n) {
-					D.value.remove();
-					let e = document.createElementNS(i, "circle");
-					e.setAttribute("cx", t), e.setAttribute("cy", n), e.setAttribute("r", w.value * b.scale / 2), e.setAttribute("fill", C.value), e.setAttribute("class", "vue-data-ui-doodle"), e.setAttribute("data-doodle-id", r()), e.setAttribute("pointer-events", "all"), E.value.appendChild(e);
-				} else D.value.setAttribute("d", mt(ft(ve.value)));
-				W(F.value), F.value = "", D.value = null;
-			}
-			T.value = !1;
-		}
-		function xt() {
-			if (!x.value.length || !E.value) return;
-			let e = U(), t = x.value.pop();
-			S.value.push({
-				state: e,
-				mergeKey: null,
-				timestamp: Date.now()
-			}), Re(t.state);
-		}
-		function St() {
-			if (!S.value.length || !E.value) return;
-			let e = U(), t = S.value.pop();
-			x.value.push({
-				state: e,
-				mergeKey: null,
-				timestamp: Date.now()
-			}), Re(t.state);
-		}
-		function Ct() {
-			I.value && ut(!1), K(), E.value && (E.value.innerHTML = ""), x.value = [], S.value = [], Oe.value = !1, ke.value = "", Ae.value = !1, F.value = "", dt();
-		}
-		y(H, () => {
-			b.active && (Tt(), wt(), Z());
-		});
-		function wt() {
-			b.svgRef && b.active && (b.svgRef.addEventListener("mousedown", Ye), b.svgRef.addEventListener("mousemove", Xe), b.svgRef.addEventListener("mouseup", q), b.svgRef.addEventListener("mouseleave", q), b.svgRef.addEventListener("touchstart", Ye, { passive: !1 }), b.svgRef.addEventListener("touchmove", Xe, { passive: !1 }), b.svgRef.addEventListener("touchend", q), b.svgRef.addEventListener("touchcancel", q), H.value === "draw" ? (b.svgRef.addEventListener("mousedown", ht), b.svgRef.addEventListener("mousemove", gt), b.svgRef.addEventListener("mouseup", X), b.svgRef.addEventListener("mouseleave", X), b.svgRef.addEventListener("touchstart", ht, { passive: !1 }), b.svgRef.addEventListener("touchmove", gt, { passive: !1 }), b.svgRef.addEventListener("touchend", X), b.svgRef.addEventListener("touchcancel", X)) : ["line", "arrow"].includes(H.value) ? (b.svgRef.addEventListener("mousedown", vt), b.svgRef.addEventListener("mousemove", yt), b.svgRef.addEventListener("mouseup", bt), b.svgRef.addEventListener("touchstart", vt, { passive: !1 }), b.svgRef.addEventListener("touchmove", yt, { passive: !1 }), b.svgRef.addEventListener("touchend", bt), b.svgRef.addEventListener("touchcancel", bt)) : H.value === "text" && (b.svgRef.addEventListener("mousedown", tt), b.svgRef.addEventListener("touchstart", tt, { passive: !1 })), E.value && (E.value.style.pointerEvents = "auto"));
-		}
-		function Tt() {
-			b.svgRef && (b.svgRef.removeEventListener("mousedown", Ye), b.svgRef.removeEventListener("mousemove", Xe), b.svgRef.removeEventListener("mouseup", q), b.svgRef.removeEventListener("mouseleave", q), b.svgRef.removeEventListener("touchstart", Ye), b.svgRef.removeEventListener("touchmove", Xe), b.svgRef.removeEventListener("touchend", q), b.svgRef.removeEventListener("touchcancel", q), b.svgRef.removeEventListener("mousedown", ht), b.svgRef.removeEventListener("mousemove", gt), b.svgRef.removeEventListener("mouseup", X), b.svgRef.removeEventListener("mouseleave", X), b.svgRef.removeEventListener("touchstart", ht), b.svgRef.removeEventListener("touchmove", gt), b.svgRef.removeEventListener("touchend", X), b.svgRef.removeEventListener("touchcancel", X), b.svgRef.removeEventListener("mousedown", vt), b.svgRef.removeEventListener("mousemove", yt), b.svgRef.removeEventListener("mouseup", bt), b.svgRef.removeEventListener("touchstart", vt), b.svgRef.removeEventListener("touchmove", yt), b.svgRef.removeEventListener("touchend", bt), b.svgRef.removeEventListener("touchcancel", bt), b.svgRef.removeEventListener("mousedown", tt), b.svgRef.removeEventListener("touchstart", tt), E.value && (E.value.style.pointerEvents = "none"));
-		}
-		y(() => b.active, (e) => {
-			e ? wt() : (K(), Tt()), Z();
-		}), y(() => b.active, () => {
-			p(() => {
-				dt();
-			});
-		}), y(() => b.active, (e) => {
-			b.svgRef && (e ? b.svgRef.style.touchAction = "none" : b.svgRef.style.touchAction = "");
-		}, { immediate: !0 });
-		function Z(e = null) {
-			if (E.value) {
-				if (!b.active) {
-					E.value.style.cursor = "";
-					return;
-				}
-				if (I.value) {
-					E.value.style.cursor = "text";
-					return;
-				}
-				if (e && Ie(e)) {
-					E.value.style.cursor = "pointer";
-					return;
-				}
-				if (P.value || e && Fe(e)) {
-					E.value.style.cursor = "move";
-					return;
-				}
-				if (A.value && k.value) {
-					E.value.style.cursor = "grabbing";
-					return;
-				}
-				if (e && k.value && E.value.contains(k.value) && He(k.value, e)) {
-					E.value.style.cursor = "grab";
-					return;
-				}
-				H.value === "text" ? E.value.style.cursor = "text" : ["line", "arrow"].includes(H.value) ? E.value.style.cursor = "crosshair" : E.value.style.cursor = Ne.value;
-			}
-		}
-		let Q = _(null), Et = _(null), Dt = _(!1), $ = _({
-			x: 0,
-			y: 0
-		}), Ot = _(null), kt = _(null), At = s(() => ({
-			backgroundColor: b.backgroundColor,
-			"--vue-ui-pen-and-paper-drag-x": `${$.value.x}px`,
-			"--vue-ui-pen-and-paper-drag-y": `${$.value.y}px`
-		}));
-		function jt() {
-			return {
-				width: document.documentElement.clientWidth || window.innerWidth,
-				height: document.documentElement.clientHeight || window.innerHeight
-			};
-		}
-		function Mt() {
-			if (!Q.value) return null;
-			let e = [
-				Q.value,
-				Q.value.querySelector(".vue-ui-pen-and-paper-drag-handle"),
-				Q.value.querySelector(".vertical-range")
-			].filter(Boolean).map((e) => e.getBoundingClientRect());
-			return {
-				left: Math.min(...e.map((e) => e.left)),
-				top: Math.min(...e.map((e) => e.top)),
-				right: Math.max(...e.map((e) => e.right)),
-				bottom: Math.max(...e.map((e) => e.bottom))
-			};
-		}
-		function Nt(e) {
-			if (e.pointerType === "mouse" && e.button !== 0 || !Q.value) return;
-			e.preventDefault(), e.stopPropagation();
-			let t = Mt();
-			t && (Dt.value = !0, kt.value = e.pointerId, Ot.value = {
-				clientX: e.clientX,
-				clientY: e.clientY,
-				offsetX: $.value.x,
-				offsetY: $.value.y,
-				rect: t
-			}, window.addEventListener("pointermove", Pt), window.addEventListener("pointerup", Ft), window.addEventListener("pointercancel", Ft));
-		}
-		function Pt(e) {
-			if (!Dt.value || !Ot.value || e.pointerId !== kt.value) return;
-			e.preventDefault();
-			let t = Ot.value, { width: n, height: r } = jt(), i = e.clientX - t.clientX, a = e.clientY - t.clientY, o = Math.min(Math.max(i, -t.rect.left), n - t.rect.right), s = Math.min(Math.max(a, -t.rect.top), r - t.rect.bottom);
-			$.value = {
-				x: t.offsetX + o,
-				y: t.offsetY + s
-			};
-		}
-		function Ft(e) {
-			(e?.pointerId === void 0 || kt.value === null || e.pointerId === kt.value) && (Dt.value = !1, Ot.value = null, kt.value = null, window.removeEventListener("pointermove", Pt), window.removeEventListener("pointerup", Ft), window.removeEventListener("pointercancel", Ft));
-		}
-		function It() {
-			if (!Q.value || !b.active) return;
-			let e = Mt();
-			if (!e) return;
-			let { width: t, height: n } = jt(), r = 0, i = 0;
-			e.left < 0 ? r = -e.left : e.right > t && (r = t - e.right), e.top < 0 ? i = -e.top : e.bottom > n && (i = n - e.bottom), (r || i) && ($.value = {
-				x: $.value.x + r,
-				y: $.value.y + i
-			});
-		}
-		return te(() => {
-			window.addEventListener("resize", It), p(() => {
-				b.svgRef && (E.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), E.value.setAttribute("class", "vue-data-ui-doodles"), b.svgRef.appendChild(E.value), Z(), b.active ? wt() : Tt(), dt());
-			});
-		}), y(() => b.active, async (e) => {
-			if (!e) {
-				Ft(), $.value = {
-					x: 0,
-					y: 0
-				};
-				return;
-			}
-			await p(), Et.value?.focus();
-		}, { flush: "post" }), ee(() => {
-			ot(), K(), Ft(), window.removeEventListener("resize", It), E.value && b.svgRef && (E.value.remove(), Tt());
-		}), (n, r) => e.active ? (ne(), l("div", {
-			key: 0,
-			ref_key: "menuRef",
-			ref: Q,
-			"data-dom-to-png-ignore": "",
-			class: m(["vue-ui-pen-and-paper-actions", { "vue-ui-pen-and-paper-actions-dragging": Dt.value }]),
-			style: g(At.value)
-		}, [
-			u("button", {
-				type: "button",
-				class: "vue-ui-pen-and-paper-drag-handle",
-				"aria-label": "Move drawing toolbar",
-				style: g({
-					backgroundColor: e.backgroundColor,
-					border: `1px solid ${J.value}`,
-					color: e.color
-				}),
-				onPointerdown: Nt
-			}, [(ne(), l("svg", le, [
-				u("circle", {
-					fill: e.color,
-					cx: "3",
-					cy: "3",
-					r: "0.7"
-				}, null, 8, ue),
-				u("circle", {
-					fill: e.color,
-					cx: "3",
-					cy: "6",
-					r: "0.7"
-				}, null, 8, de),
-				u("circle", {
-					fill: e.color,
-					cx: "3",
-					cy: "9",
-					r: "0.7"
-				}, null, 8, fe)
-			]))], 36),
-			u("button", {
-				ref_key: "buttonToggle",
-				ref: Et,
-				class: "vue-ui-pen-and-paper-action",
-				onClick: r[0] ||= (e) => _e("close"),
-				style: g({
-					backgroundColor: e.backgroundColor,
-					border: `1px solid ${J.value}`,
-					cursor: e.isCursorPointer ? "pointer" : "default"
-				})
-			}, [v(n.$slots, "annotator-action-close", {}, () => [d(a, {
-				name: "close",
-				stroke: e.color
-			}, null, 8, ["stroke"])])], 4),
-			u("button", {
-				class: "vue-ui-pen-and-paper-action",
-				tabindex: "-1",
-				style: g(`padding: 0 !important; cursor: ${e.isCursorPointer ? "pointer" : "default"}`)
-			}, [d(o, {
-				value: C.value,
-				"onUpdate:value": r[1] ||= (e) => C.value = e,
-				backgroundColor: e.backgroundColor,
-				buttonBorderColor: J.value,
-				isCursorPointer: e.isCursorPointer,
-				palette: e.palette
-			}, {
-				"annotator-action-color": oe(({ color: e }) => [v(n.$slots, "annotator-action-color", h(f({ color: e })))]),
-				_: 3
-			}, 8, [
-				"value",
-				"backgroundColor",
-				"buttonBorderColor",
-				"isCursorPointer",
-				"palette"
-			])], 4),
-			u("button", {
-				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": H.value === "text" }]),
-				onClick: r[2] ||= (e) => et(),
-				style: g({
-					backgroundColor: e.backgroundColor,
-					border: `1px solid ${J.value}`,
-					cursor: e.isCursorPointer ? "pointer" : "default"
-				})
-			}, [v(n.$slots, "annotator-action-draw", h(f({ mode: H.value })), () => [d(a, {
-				name: Me[H.value],
-				stroke: e.color
-			}, null, 8, ["name", "stroke"])]), u("div", { style: g({
-				position: "absolute",
-				bottom: "-20px",
-				color: J.value,
-				width: "100%",
-				textAlign: "center",
-				fontSize: "12px",
-				fontVariantNumeric: "tabular-nums"
-			}) }, re(ie(t)({
-				v: H.value === "text" ? Math.round(B.value) : Math.round(w.value),
-				s: "px",
-				r: 1
-			})), 5)], 6),
-			u("button", {
-				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !x.value.length }]),
-				disabled: !x.value.length,
-				onClick: xt,
-				style: g({
-					backgroundColor: e.backgroundColor,
-					border: `1px solid ${J.value}`,
-					marginTop: "20px",
-					cursor: e.isCursorPointer ? "pointer" : "default"
-				})
-			}, [v(n.$slots, "annotator-action-undo", h(f({ disabled: !x.value.length })), () => [d(a, {
-				name: "refresh",
-				stroke: e.color
-			}, null, 8, ["stroke"])])], 14, pe),
-			u("button", {
-				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !S.value.length }]),
-				onClick: St,
-				style: g({
-					backgroundColor: e.backgroundColor,
-					border: `1px solid ${J.value}`,
-					cursor: e.isCursorPointer ? "pointer" : "default"
-				})
-			}, [v(n.$slots, "annotator-action-redo", h(f({ disabled: !S.value.length })), () => [d(a, {
-				name: "refresh",
-				stroke: e.color,
-				style: { transform: "scaleX(-1)" }
-			}, null, 8, ["stroke"])])], 6),
-			u("button", {
-				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !x.value.length }]),
-				onClick: Ct,
-				style: g({
-					backgroundColor: e.backgroundColor,
-					border: `1px solid ${J.value}`,
-					cursor: e.isCursorPointer ? "pointer" : "default"
-				})
-			}, [v(n.$slots, "annotator-action-delete", h(f({ disabled: !x.value.length })), () => [d(a, {
-				name: "trash",
-				stroke: e.color
-			}, null, 8, ["stroke"])])], 6),
-			H.value === "text" ? se((ne(), l("input", {
-				key: 0,
-				ref: "range",
-				type: "range",
-				class: "vertical-range",
-				min: 3,
-				max: 48,
-				step: 1,
-				"onUpdate:modelValue": r[3] ||= (e) => B.value = e,
-				style: g({ accentColor: e.color })
-			}, null, 4)), [[ae, B.value]]) : se((ne(), l("input", {
-				key: 1,
-				ref: "range",
-				type: "range",
-				class: "vertical-range",
-				min: .5,
-				max: 12,
-				step: .1,
-				"onUpdate:modelValue": r[4] ||= (e) => w.value = e,
-				style: g({ accentColor: e.color })
-			}, null, 4)), [[ae, w.value]])
-		], 6)) : c("", !0);
-	}
-};
-//#endregion
-export { b as n, ce as t };