vue-data-ui 3.25.0 → 3.25.2

package/dist/PenAndPaper-Co2OSRzH.js

@@ -0,0 +1,890 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { At as t, X as n, q as r, t as i } from "./lib-BPg41jWd.js";
+import { t as a } from "./BaseIcon-Oj70ytWI.js";
+import { t as o } from "./ColorPicker-sZV-tVqO.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
+		}
+	},
+	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(() => t(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());
+		}), (t, 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(t.$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
+			}, {
+				"annotator-action-color": oe(({ color: e }) => [v(t.$slots, "annotator-action-color", h(f({ color: e })))]),
+				_: 3
+			}, 8, [
+				"value",
+				"backgroundColor",
+				"buttonBorderColor",
+				"isCursorPointer"
+			])], 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(t.$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(n)({
+				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(t.$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(t.$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(t.$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 };