vue-pane 0.0.0

package/dist/vue-pane.js

@@ -0,0 +1,3076 @@
+import * as e from "vue";
+import { Fragment as t, Teleport as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, inject as d, isRef as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onMounted as _, onUnmounted as v, openBlock as y, provide as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useCssVars as D, useModel as O, useTemplateRef as ee, vModelText as te, vShow as ne, watch as k, withCtx as A, withDirectives as re, withKeys as ie } from "vue";
+//#region \0rolldown/runtime.js
+var ae = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, se = Object.getOwnPropertyNames, ce = Object.prototype.hasOwnProperty, le = (e, t) => {
+	let n = {};
+	for (var r in e) ae(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || ae(n, Symbol.toStringTag, { value: "Module" }), n;
+}, ue = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = se(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !ce.call(e, s) && s !== n && ae(e, s, {
+		get: ((e) => t[e]).bind(null, s),
+		enumerable: !(r = oe(t, s)) || r.enumerable
+	});
+	return e;
+}, de = (e, t, n) => (ue(e, t, "default"), n && ue(n, t, "default")), fe = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, pe = {}, me = {
+	viewBox: "0 0 16 16",
+	width: "10",
+	height: "10",
+	fill: "none"
+};
+function he(e, t) {
+	return y(), o("svg", me, [...t[0] ||= [
+		s("circle", {
+			cx: "8",
+			cy: "8",
+			r: "7",
+			stroke: "currentColor",
+			"stroke-width": "1.5"
+		}, null, -1),
+		s("circle", {
+			cx: "8",
+			cy: "5.5",
+			r: "1",
+			fill: "currentColor"
+		}, null, -1),
+		s("rect", {
+			x: "7",
+			y: "7.5",
+			width: "2",
+			height: "4",
+			rx: "1",
+			fill: "currentColor"
+		}, null, -1)
+	]]);
+}
+//#endregion
+//#region src/composables/usePaneConfig.ts
+var ge = {
+	expandedDefault: !0,
+	tooltipIcon: /* @__PURE__ */ fe(pe, [["render", he]])
+}, _e = Symbol("vp-config");
+function j() {
+	return d(_e, ge);
+}
+function ve(e = null) {
+	b(_e, {
+		...j(),
+		...e
+	});
+}
+//#endregion
+//#region src/composables/useFoldable.ts
+function ye(e, t) {
+	let n = e.parentElement;
+	if (!n) return 0;
+	let r = n.classList.contains(t);
+	e.style.transition = "none", r || (n.classList.add(t), e.style.height = "auto"), e.offsetHeight;
+	let i = e.clientHeight;
+	return r || (n.classList.remove(t), e.style.height = ""), e.offsetHeight, e.style.transition = "", i;
+}
+function be(e, t, n, r = "vp-folder--expanded") {
+	let i = null;
+	n && (i = localStorage?.getItem?.(n) ?? null);
+	let a = j(), o = (e) => t.value = e, s = t.value, c = x(s === void 0 ? i === null ? a.expandedDefault ?? !0 : i === "true" : s);
+	k(c, (e) => {
+		n && typeof localStorage < "u" && localStorage.setItem(n, String(e)), o(e);
+	}), _(() => {
+		let t = e.value;
+		t && c.value && (t.style.height = "auto");
+	});
+	function l(e) {
+		let t = ye(e, r);
+		c.value = !0, m(() => {
+			if (t === 0) {
+				e.style.height = "auto";
+				return;
+			}
+			e.style.paddingTop = "0", e.style.paddingBottom = "0", e.offsetHeight, e.style.height = t + "px", e.style.paddingTop = "", e.style.paddingBottom = "", e.addEventListener("transitionend", (t) => {
+				t.propertyName === "height" && c.value && (e.style.height = "auto");
+			}, { once: !0 });
+		});
+	}
+	function u(e) {
+		e.style.transition = "none", e.style.height = e.clientHeight + "px", e.offsetHeight, e.style.transition = "", e.offsetHeight, e.style.height = "0", c.value = !1, e.addEventListener("transitionend", (t) => {
+			t.propertyName === "height" && (e.style.height = "");
+		}, { once: !0 });
+	}
+	k(() => t.value, (t) => {
+		if (t === void 0 || t === c.value) return;
+		let n = e.value;
+		n && (t ? l(n) : u(n));
+	});
+	function d() {
+		let t = e.value;
+		t && (c.value ? u(t) : l(t));
+	}
+	return {
+		isExpanded: c,
+		toggle: d
+	};
+}
+//#endregion
+//#region src/components/VPane.vue
+var xe = /* @__PURE__ */ u({
+	__name: "VPane",
+	props: /*@__PURE__*/ p({
+		title: {},
+		id: {},
+		disabled: { type: Boolean },
+		config: {}
+	}, {
+		expanded: {
+			type: Boolean,
+			default: void 0
+		},
+		expandedModifiers: {}
+	}),
+	emits: ["update:expanded"],
+	setup(e) {
+		let t = O(e, "expanded");
+		e.config && ve(e.config);
+		let n = e.id ?? e.title, i = r(() => !!e.title), l = x(null), { isExpanded: u, toggle: d } = be(l, t, n ? `vp-pane-${n}` : void 0);
+		return (t, n) => (y(), o("div", { class: h(["vp-pane", {
+			"vp-pane--expanded": E(u),
+			"vp-pane--no-title": !i.value,
+			"vp--disabled": e.disabled
+		}]) }, [i.value ? (y(), o("button", {
+			key: 0,
+			class: "vp-pane__title",
+			onClick: n[0] ||= (...e) => E(d) && E(d)(...e)
+		}, [c(T(e.title) + " ", 1), n[1] ||= s("div", { class: "vp-pane__chevron" }, null, -1)])) : a("", !0), s("div", {
+			ref_key: "containerRef",
+			ref: l,
+			class: "vp-pane__content"
+		}, [C(t.$slots, "default")], 512)], 2));
+	}
+}), Se = Math.min, Ce = Math.max, we = Math.round, M = (e) => ({
+	x: e,
+	y: e
+}), Te = {
+	left: "right",
+	right: "left",
+	bottom: "top",
+	top: "bottom"
+};
+function Ee(e, t, n) {
+	return Ce(e, Se(t, n));
+}
+function De(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function N(e) {
+	return e.split("-")[0];
+}
+function Oe(e) {
+	return e.split("-")[1];
+}
+function ke(e) {
+	return e === "x" ? "y" : "x";
+}
+function Ae(e) {
+	return e === "y" ? "height" : "width";
+}
+function P(e) {
+	let t = e[0];
+	return t === "t" || t === "b" ? "y" : "x";
+}
+function je(e) {
+	return ke(P(e));
+}
+function Me(e, t, n) {
+	n === void 0 && (n = !1);
+	let r = Oe(e), i = je(e), a = Ae(i), o = i === "x" ? r === (n ? "end" : "start") ? "right" : "left" : r === "start" ? "bottom" : "top";
+	return t.reference[a] > t.floating[a] && (o = Ve(o)), [o, Ve(o)];
+}
+function Ne(e) {
+	let t = Ve(e);
+	return [
+		Pe(e),
+		t,
+		Pe(t)
+	];
+}
+function Pe(e) {
+	return e.includes("start") ? e.replace("start", "end") : e.replace("end", "start");
+}
+var Fe = ["left", "right"], Ie = ["right", "left"], Le = ["top", "bottom"], Re = ["bottom", "top"];
+function ze(e, t, n) {
+	switch (e) {
+		case "top":
+		case "bottom": return n ? t ? Ie : Fe : t ? Fe : Ie;
+		case "left":
+		case "right": return t ? Le : Re;
+		default: return [];
+	}
+}
+function Be(e, t, n, r) {
+	let i = Oe(e), a = ze(N(e), n === "start", r);
+	return i && (a = a.map((e) => e + "-" + i), t && (a = a.concat(a.map(Pe)))), a;
+}
+function Ve(e) {
+	let t = N(e);
+	return Te[t] + e.slice(t.length);
+}
+function He(e) {
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		...e
+	};
+}
+function Ue(e) {
+	return typeof e == "number" ? {
+		top: e,
+		right: e,
+		bottom: e,
+		left: e
+	} : He(e);
+}
+function We(e) {
+	let { x: t, y: n, width: r, height: i } = e;
+	return {
+		width: r,
+		height: i,
+		top: n,
+		left: t,
+		right: t + r,
+		bottom: n + i,
+		x: t,
+		y: n
+	};
+}
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+core@1.7.5/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+function Ge(e, t, n) {
+	let { reference: r, floating: i } = e, a = P(t), o = je(t), s = Ae(o), c = N(t), l = a === "y", u = r.x + r.width / 2 - i.width / 2, d = r.y + r.height / 2 - i.height / 2, f = r[s] / 2 - i[s] / 2, p;
+	switch (c) {
+		case "top":
+			p = {
+				x: u,
+				y: r.y - i.height
+			};
+			break;
+		case "bottom":
+			p = {
+				x: u,
+				y: r.y + r.height
+			};
+			break;
+		case "right":
+			p = {
+				x: r.x + r.width,
+				y: d
+			};
+			break;
+		case "left":
+			p = {
+				x: r.x - i.width,
+				y: d
+			};
+			break;
+		default: p = {
+			x: r.x,
+			y: r.y
+		};
+	}
+	switch (Oe(t)) {
+		case "start":
+			p[o] -= f * (n && l ? -1 : 1);
+			break;
+		case "end":
+			p[o] += f * (n && l ? -1 : 1);
+			break;
+	}
+	return p;
+}
+async function Ke(e, t) {
+	t === void 0 && (t = {});
+	let { x: n, y: r, platform: i, rects: a, elements: o, strategy: s } = e, { boundary: c = "clippingAncestors", rootBoundary: l = "viewport", elementContext: u = "floating", altBoundary: d = !1, padding: f = 0 } = De(t, e), p = Ue(f), m = o[d ? u === "floating" ? "reference" : "floating" : u], h = We(await i.getClippingRect({
+		element: await (i.isElement == null ? void 0 : i.isElement(m)) ?? !0 ? m : m.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(o.floating)),
+		boundary: c,
+		rootBoundary: l,
+		strategy: s
+	})), g = u === "floating" ? {
+		x: n,
+		y: r,
+		width: a.floating.width,
+		height: a.floating.height
+	} : a.reference, _ = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(o.floating)), v = await (i.isElement == null ? void 0 : i.isElement(_)) && await (i.getScale == null ? void 0 : i.getScale(_)) || {
+		x: 1,
+		y: 1
+	}, y = We(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
+		elements: o,
+		rect: g,
+		offsetParent: _,
+		strategy: s
+	}) : g);
+	return {
+		top: (h.top - y.top + p.top) / v.y,
+		bottom: (y.bottom - h.bottom + p.bottom) / v.y,
+		left: (h.left - y.left + p.left) / v.x,
+		right: (y.right - h.right + p.right) / v.x
+	};
+}
+var qe = 50, Je = async (e, t, n) => {
+	let { placement: r = "bottom", strategy: i = "absolute", middleware: a = [], platform: o } = n, s = o.detectOverflow ? o : {
+		...o,
+		detectOverflow: Ke
+	}, c = await (o.isRTL == null ? void 0 : o.isRTL(t)), l = await o.getElementRects({
+		reference: e,
+		floating: t,
+		strategy: i
+	}), { x: u, y: d } = Ge(l, r, c), f = r, p = 0, m = {};
+	for (let n = 0; n < a.length; n++) {
+		let h = a[n];
+		if (!h) continue;
+		let { name: g, fn: _ } = h, { x: v, y, data: b, reset: x } = await _({
+			x: u,
+			y: d,
+			initialPlacement: r,
+			placement: f,
+			strategy: i,
+			middlewareData: m,
+			rects: l,
+			platform: s,
+			elements: {
+				reference: e,
+				floating: t
+			}
+		});
+		u = v ?? u, d = y ?? d, m[g] = {
+			...m[g],
+			...b
+		}, x && p < qe && (p++, typeof x == "object" && (x.placement && (f = x.placement), x.rects && (l = x.rects === !0 ? await o.getElementRects({
+			reference: e,
+			floating: t,
+			strategy: i
+		}) : x.rects), {x: u, y: d} = Ge(l, f, c)), n = -1);
+	}
+	return {
+		x: u,
+		y: d,
+		placement: f,
+		strategy: i,
+		middlewareData: m
+	};
+}, Ye = function(e) {
+	return e === void 0 && (e = {}), {
+		name: "flip",
+		options: e,
+		async fn(t) {
+			var n;
+			let { placement: r, middlewareData: i, rects: a, initialPlacement: o, platform: s, elements: c } = t, { mainAxis: l = !0, crossAxis: u = !0, fallbackPlacements: d, fallbackStrategy: f = "bestFit", fallbackAxisSideDirection: p = "none", flipAlignment: m = !0, ...h } = De(e, t);
+			if ((n = i.arrow) != null && n.alignmentOffset) return {};
+			let g = N(r), _ = P(o), v = N(o) === o, y = await (s.isRTL == null ? void 0 : s.isRTL(c.floating)), b = d || (v || !m ? [Ve(o)] : Ne(o)), x = p !== "none";
+			!d && x && b.push(...Be(o, m, p, y));
+			let S = [o, ...b], C = await s.detectOverflow(t, h), w = [], T = i.flip?.overflows || [];
+			if (l && w.push(C[g]), u) {
+				let e = Me(r, a, y);
+				w.push(C[e[0]], C[e[1]]);
+			}
+			if (T = [...T, {
+				placement: r,
+				overflows: w
+			}], !w.every((e) => e <= 0)) {
+				let e = (i.flip?.index || 0) + 1, t = S[e];
+				if (t && (!(u === "alignment" && _ !== P(t)) || T.every((e) => P(e.placement) === _ ? e.overflows[0] > 0 : !0))) return {
+					data: {
+						index: e,
+						overflows: T
+					},
+					reset: { placement: t }
+				};
+				let n = T.filter((e) => e.overflows[0] <= 0).sort((e, t) => e.overflows[1] - t.overflows[1])[0]?.placement;
+				if (!n) switch (f) {
+					case "bestFit": {
+						let e = T.filter((e) => {
+							if (x) {
+								let t = P(e.placement);
+								return t === _ || t === "y";
+							}
+							return !0;
+						}).map((e) => [e.placement, e.overflows.filter((e) => e > 0).reduce((e, t) => e + t, 0)]).sort((e, t) => e[1] - t[1])[0]?.[0];
+						e && (n = e);
+						break;
+					}
+					case "initialPlacement":
+						n = o;
+						break;
+				}
+				if (r !== n) return { reset: { placement: n } };
+			}
+			return {};
+		}
+	};
+}, Xe = /*#__PURE__*/ new Set(["left", "top"]);
+async function Ze(e, t) {
+	let { placement: n, platform: r, elements: i } = e, a = await (r.isRTL == null ? void 0 : r.isRTL(i.floating)), o = N(n), s = Oe(n), c = P(n) === "y", l = Xe.has(o) ? -1 : 1, u = a && c ? -1 : 1, d = De(t, e), { mainAxis: f, crossAxis: p, alignmentAxis: m } = typeof d == "number" ? {
+		mainAxis: d,
+		crossAxis: 0,
+		alignmentAxis: null
+	} : {
+		mainAxis: d.mainAxis || 0,
+		crossAxis: d.crossAxis || 0,
+		alignmentAxis: d.alignmentAxis
+	};
+	return s && typeof m == "number" && (p = s === "end" ? m * -1 : m), c ? {
+		x: p * u,
+		y: f * l
+	} : {
+		x: f * l,
+		y: p * u
+	};
+}
+var Qe = function(e) {
+	return e === void 0 && (e = 0), {
+		name: "offset",
+		options: e,
+		async fn(t) {
+			var n;
+			let { x: r, y: i, placement: a, middlewareData: o } = t, s = await Ze(t, e);
+			return a === o.offset?.placement && (n = o.arrow) != null && n.alignmentOffset ? {} : {
+				x: r + s.x,
+				y: i + s.y,
+				data: {
+					...s,
+					placement: a
+				}
+			};
+		}
+	};
+}, $e = function(e) {
+	return e === void 0 && (e = {}), {
+		name: "shift",
+		options: e,
+		async fn(t) {
+			let { x: n, y: r, placement: i, platform: a } = t, { mainAxis: o = !0, crossAxis: s = !1, limiter: c = { fn: (e) => {
+				let { x: t, y: n } = e;
+				return {
+					x: t,
+					y: n
+				};
+			} }, ...l } = De(e, t), u = {
+				x: n,
+				y: r
+			}, d = await a.detectOverflow(t, l), f = P(N(i)), p = ke(f), m = u[p], h = u[f];
+			if (o) {
+				let e = p === "y" ? "top" : "left", t = p === "y" ? "bottom" : "right", n = m + d[e], r = m - d[t];
+				m = Ee(n, m, r);
+			}
+			if (s) {
+				let e = f === "y" ? "top" : "left", t = f === "y" ? "bottom" : "right", n = h + d[e], r = h - d[t];
+				h = Ee(n, h, r);
+			}
+			let g = c.fn({
+				...t,
+				[p]: m,
+				[f]: h
+			});
+			return {
+				...g,
+				data: {
+					x: g.x - n,
+					y: g.y - r,
+					enabled: {
+						[p]: o,
+						[f]: s
+					}
+				}
+			};
+		}
+	};
+};
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+function et() {
+	return typeof window < "u";
+}
+function F(e) {
+	return tt(e) ? (e.nodeName || "").toLowerCase() : "#document";
+}
+function I(e) {
+	var t;
+	return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
+}
+function L(e) {
+	return ((tt(e) ? e.ownerDocument : e.document) || window.document)?.documentElement;
+}
+function tt(e) {
+	return et() ? e instanceof Node || e instanceof I(e).Node : !1;
+}
+function R(e) {
+	return et() ? e instanceof Element || e instanceof I(e).Element : !1;
+}
+function z(e) {
+	return et() ? e instanceof HTMLElement || e instanceof I(e).HTMLElement : !1;
+}
+function nt(e) {
+	return !et() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof I(e).ShadowRoot;
+}
+function rt(e) {
+	let { overflow: t, overflowX: n, overflowY: r, display: i } = V(e);
+	return /auto|scroll|overlay|hidden|clip/.test(t + r + n) && i !== "inline" && i !== "contents";
+}
+function it(e) {
+	return /^(table|td|th)$/.test(F(e));
+}
+function at(e) {
+	try {
+		if (e.matches(":popover-open")) return !0;
+	} catch {}
+	try {
+		return e.matches(":modal");
+	} catch {
+		return !1;
+	}
+}
+var ot = /transform|translate|scale|rotate|perspective|filter/, st = /paint|layout|strict|content/, B = (e) => !!e && e !== "none", ct;
+function lt(e) {
+	let t = R(e) ? V(e) : e;
+	return B(t.transform) || B(t.translate) || B(t.scale) || B(t.rotate) || B(t.perspective) || !dt() && (B(t.backdropFilter) || B(t.filter)) || ot.test(t.willChange || "") || st.test(t.contain || "");
+}
+function ut(e) {
+	let t = H(e);
+	for (; z(t) && !ft(t);) {
+		if (lt(t)) return t;
+		if (at(t)) return null;
+		t = H(t);
+	}
+	return null;
+}
+function dt() {
+	return ct ??= typeof CSS < "u" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none"), ct;
+}
+function ft(e) {
+	return /^(html|body|#document)$/.test(F(e));
+}
+function V(e) {
+	return I(e).getComputedStyle(e);
+}
+function pt(e) {
+	return R(e) ? {
+		scrollLeft: e.scrollLeft,
+		scrollTop: e.scrollTop
+	} : {
+		scrollLeft: e.scrollX,
+		scrollTop: e.scrollY
+	};
+}
+function H(e) {
+	if (F(e) === "html") return e;
+	let t = e.assignedSlot || e.parentNode || nt(e) && e.host || L(e);
+	return nt(t) ? t.host : t;
+}
+function mt(e) {
+	let t = H(e);
+	return ft(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : z(t) && rt(t) ? t : mt(t);
+}
+function ht(e, t, n) {
+	t === void 0 && (t = []), n === void 0 && (n = !0);
+	let r = mt(e), i = r === e.ownerDocument?.body, a = I(r);
+	if (i) {
+		let e = gt(a);
+		return t.concat(a, a.visualViewport || [], rt(r) ? r : [], e && n ? ht(e) : []);
+	} else return t.concat(r, ht(r, [], n));
+}
+function gt(e) {
+	return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
+}
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+dom@1.7.6/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+function _t(e) {
+	let t = V(e), n = parseFloat(t.width) || 0, r = parseFloat(t.height) || 0, i = z(e), a = i ? e.offsetWidth : n, o = i ? e.offsetHeight : r, s = we(n) !== a || we(r) !== o;
+	return s && (n = a, r = o), {
+		width: n,
+		height: r,
+		$: s
+	};
+}
+function vt(e) {
+	return R(e) ? e : e.contextElement;
+}
+function yt(e) {
+	let t = vt(e);
+	if (!z(t)) return M(1);
+	let n = t.getBoundingClientRect(), { width: r, height: i, $: a } = _t(t), o = (a ? we(n.width) : n.width) / r, s = (a ? we(n.height) : n.height) / i;
+	return (!o || !Number.isFinite(o)) && (o = 1), (!s || !Number.isFinite(s)) && (s = 1), {
+		x: o,
+		y: s
+	};
+}
+var bt = /*#__PURE__*/ M(0);
+function xt(e) {
+	let t = I(e);
+	return !dt() || !t.visualViewport ? bt : {
+		x: t.visualViewport.offsetLeft,
+		y: t.visualViewport.offsetTop
+	};
+}
+function St(e, t, n) {
+	return t === void 0 && (t = !1), !n || t && n !== I(e) ? !1 : t;
+}
+function Ct(e, t, n, r) {
+	t === void 0 && (t = !1), n === void 0 && (n = !1);
+	let i = e.getBoundingClientRect(), a = vt(e), o = M(1);
+	t && (r ? R(r) && (o = yt(r)) : o = yt(e));
+	let s = St(a, n, r) ? xt(a) : M(0), c = (i.left + s.x) / o.x, l = (i.top + s.y) / o.y, u = i.width / o.x, d = i.height / o.y;
+	if (a) {
+		let e = I(a), t = r && R(r) ? I(r) : r, n = e, i = gt(n);
+		for (; i && r && t !== n;) {
+			let e = yt(i), t = i.getBoundingClientRect(), r = V(i), a = t.left + (i.clientLeft + parseFloat(r.paddingLeft)) * e.x, o = t.top + (i.clientTop + parseFloat(r.paddingTop)) * e.y;
+			c *= e.x, l *= e.y, u *= e.x, d *= e.y, c += a, l += o, n = I(i), i = gt(n);
+		}
+	}
+	return We({
+		width: u,
+		height: d,
+		x: c,
+		y: l
+	});
+}
+function wt(e, t) {
+	let n = pt(e).scrollLeft;
+	return t ? t.left + n : Ct(L(e)).left + n;
+}
+function Tt(e, t) {
+	let n = e.getBoundingClientRect();
+	return {
+		x: n.left + t.scrollLeft - wt(e, n),
+		y: n.top + t.scrollTop
+	};
+}
+function Et(e) {
+	let { elements: t, rect: n, offsetParent: r, strategy: i } = e, a = i === "fixed", o = L(r), s = t ? at(t.floating) : !1;
+	if (r === o || s && a) return n;
+	let c = {
+		scrollLeft: 0,
+		scrollTop: 0
+	}, l = M(1), u = M(0), d = z(r);
+	if ((d || !d && !a) && ((F(r) !== "body" || rt(o)) && (c = pt(r)), d)) {
+		let e = Ct(r);
+		l = yt(r), u.x = e.x + r.clientLeft, u.y = e.y + r.clientTop;
+	}
+	let f = o && !d && !a ? Tt(o, c) : M(0);
+	return {
+		width: n.width * l.x,
+		height: n.height * l.y,
+		x: n.x * l.x - c.scrollLeft * l.x + u.x + f.x,
+		y: n.y * l.y - c.scrollTop * l.y + u.y + f.y
+	};
+}
+function Dt(e) {
+	return Array.from(e.getClientRects());
+}
+function Ot(e) {
+	let t = L(e), n = pt(e), r = e.ownerDocument.body, i = Ce(t.scrollWidth, t.clientWidth, r.scrollWidth, r.clientWidth), a = Ce(t.scrollHeight, t.clientHeight, r.scrollHeight, r.clientHeight), o = -n.scrollLeft + wt(e), s = -n.scrollTop;
+	return V(r).direction === "rtl" && (o += Ce(t.clientWidth, r.clientWidth) - i), {
+		width: i,
+		height: a,
+		x: o,
+		y: s
+	};
+}
+var kt = 25;
+function At(e, t) {
+	let n = I(e), r = L(e), i = n.visualViewport, a = r.clientWidth, o = r.clientHeight, s = 0, c = 0;
+	if (i) {
+		a = i.width, o = i.height;
+		let e = dt();
+		(!e || e && t === "fixed") && (s = i.offsetLeft, c = i.offsetTop);
+	}
+	let l = wt(r);
+	if (l <= 0) {
+		let e = r.ownerDocument, t = e.body, n = getComputedStyle(t), i = e.compatMode === "CSS1Compat" && parseFloat(n.marginLeft) + parseFloat(n.marginRight) || 0, o = Math.abs(r.clientWidth - t.clientWidth - i);
+		o <= kt && (a -= o);
+	} else l <= kt && (a += l);
+	return {
+		width: a,
+		height: o,
+		x: s,
+		y: c
+	};
+}
+function jt(e, t) {
+	let n = Ct(e, !0, t === "fixed"), r = n.top + e.clientTop, i = n.left + e.clientLeft, a = z(e) ? yt(e) : M(1);
+	return {
+		width: e.clientWidth * a.x,
+		height: e.clientHeight * a.y,
+		x: i * a.x,
+		y: r * a.y
+	};
+}
+function Mt(e, t, n) {
+	let r;
+	if (t === "viewport") r = At(e, n);
+	else if (t === "document") r = Ot(L(e));
+	else if (R(t)) r = jt(t, n);
+	else {
+		let n = xt(e);
+		r = {
+			x: t.x - n.x,
+			y: t.y - n.y,
+			width: t.width,
+			height: t.height
+		};
+	}
+	return We(r);
+}
+function Nt(e, t) {
+	let n = H(e);
+	return n === t || !R(n) || ft(n) ? !1 : V(n).position === "fixed" || Nt(n, t);
+}
+function Pt(e, t) {
+	let n = t.get(e);
+	if (n) return n;
+	let r = ht(e, [], !1).filter((e) => R(e) && F(e) !== "body"), i = null, a = V(e).position === "fixed", o = a ? H(e) : e;
+	for (; R(o) && !ft(o);) {
+		let t = V(o), n = lt(o);
+		!n && t.position === "fixed" && (i = null), (a ? !n && !i : !n && t.position === "static" && i && (i.position === "absolute" || i.position === "fixed") || rt(o) && !n && Nt(e, o)) ? r = r.filter((e) => e !== o) : i = t, o = H(o);
+	}
+	return t.set(e, r), r;
+}
+function Ft(e) {
+	let { element: t, boundary: n, rootBoundary: r, strategy: i } = e, a = [...n === "clippingAncestors" ? at(t) ? [] : Pt(t, this._c) : [].concat(n), r], o = Mt(t, a[0], i), s = o.top, c = o.right, l = o.bottom, u = o.left;
+	for (let e = 1; e < a.length; e++) {
+		let n = Mt(t, a[e], i);
+		s = Ce(n.top, s), c = Se(n.right, c), l = Se(n.bottom, l), u = Ce(n.left, u);
+	}
+	return {
+		width: c - u,
+		height: l - s,
+		x: u,
+		y: s
+	};
+}
+function It(e) {
+	let { width: t, height: n } = _t(e);
+	return {
+		width: t,
+		height: n
+	};
+}
+function Lt(e, t, n) {
+	let r = z(t), i = L(t), a = n === "fixed", o = Ct(e, !0, a, t), s = {
+		scrollLeft: 0,
+		scrollTop: 0
+	}, c = M(0);
+	function l() {
+		c.x = wt(i);
+	}
+	if (r || !r && !a) if ((F(t) !== "body" || rt(i)) && (s = pt(t)), r) {
+		let e = Ct(t, !0, a, t);
+		c.x = e.x + t.clientLeft, c.y = e.y + t.clientTop;
+	} else i && l();
+	a && !r && i && l();
+	let u = i && !r && !a ? Tt(i, s) : M(0);
+	return {
+		x: o.left + s.scrollLeft - c.x - u.x,
+		y: o.top + s.scrollTop - c.y - u.y,
+		width: o.width,
+		height: o.height
+	};
+}
+function Rt(e) {
+	return V(e).position === "static";
+}
+function zt(e, t) {
+	if (!z(e) || V(e).position === "fixed") return null;
+	if (t) return t(e);
+	let n = e.offsetParent;
+	return L(e) === n && (n = n.ownerDocument.body), n;
+}
+function Bt(e, t) {
+	let n = I(e);
+	if (at(e)) return n;
+	if (!z(e)) {
+		let t = H(e);
+		for (; t && !ft(t);) {
+			if (R(t) && !Rt(t)) return t;
+			t = H(t);
+		}
+		return n;
+	}
+	let r = zt(e, t);
+	for (; r && it(r) && Rt(r);) r = zt(r, t);
+	return r && ft(r) && Rt(r) && !lt(r) ? n : r || ut(e) || n;
+}
+var Vt = async function(e) {
+	let t = this.getOffsetParent || Bt, n = this.getDimensions, r = await n(e.floating);
+	return {
+		reference: Lt(e.reference, await t(e.floating), e.strategy),
+		floating: {
+			x: 0,
+			y: 0,
+			width: r.width,
+			height: r.height
+		}
+	};
+};
+function Ht(e) {
+	return V(e).direction === "rtl";
+}
+var Ut = {
+	convertOffsetParentRelativeRectToViewportRelativeRect: Et,
+	getDocumentElement: L,
+	getClippingRect: Ft,
+	getOffsetParent: Bt,
+	getElementRects: Vt,
+	getClientRects: Dt,
+	getDimensions: It,
+	getScale: yt,
+	isElement: R,
+	isRTL: Ht
+}, Wt = Qe, Gt = $e, Kt = Ye, qt = (e, t, n) => {
+	let r = /* @__PURE__ */ new Map(), i = {
+		platform: Ut,
+		...n
+	}, a = {
+		...i.platform,
+		_c: r
+	};
+	return Je(e, t, {
+		...i,
+		platform: a
+	});
+}, U = /* @__PURE__ */ le({
+	Vue: () => e,
+	Vue2: () => void 0,
+	del: () => Zt,
+	install: () => Yt,
+	isVue2: () => !1,
+	isVue3: () => !0,
+	set: () => Xt
+});
+import * as Jt from "vue";
+de(U, Jt);
+function Yt() {}
+function Xt(e, t, n) {
+	return Array.isArray(e) ? (e.length = Math.max(e.length, t), e.splice(t, 1, n), n) : (e[t] = n, n);
+}
+function Zt(e, t) {
+	if (Array.isArray(e)) {
+		e.splice(t, 1);
+		return;
+	}
+	delete e[t];
+}
+//#endregion
+//#region node_modules/.pnpm/@floating-ui+vue@1.1.11_vue@3.5.35_typescript@6.0.3_/node_modules/@floating-ui/vue/dist/floating-ui.vue.mjs
+function Qt(e) {
+	return typeof e == "object" && !!e && "$el" in e;
+}
+function $t(e) {
+	if (Qt(e)) {
+		let t = e.$el;
+		return tt(t) && F(t) === "#comment" ? null : t;
+	}
+	return e;
+}
+function en(e) {
+	return typeof e == "function" ? e() : (0, U.unref)(e);
+}
+function tn(e) {
+	return typeof window > "u" ? 1 : (e.ownerDocument.defaultView || window).devicePixelRatio || 1;
+}
+function nn(e, t) {
+	let n = tn(e);
+	return Math.round(t * n) / n;
+}
+function rn(e, t, n) {
+	n === void 0 && (n = {});
+	let r = n.whileElementsMounted, i = (0, U.computed)(() => en(n.open) ?? !0), a = (0, U.computed)(() => en(n.middleware)), o = (0, U.computed)(() => en(n.placement) ?? "bottom"), s = (0, U.computed)(() => en(n.strategy) ?? "absolute"), c = (0, U.computed)(() => en(n.transform) ?? !0), l = (0, U.computed)(() => $t(e.value)), u = (0, U.computed)(() => $t(t.value)), d = (0, U.ref)(0), f = (0, U.ref)(0), p = (0, U.ref)(s.value), m = (0, U.ref)(o.value), h = (0, U.shallowRef)({}), g = (0, U.ref)(!1), _ = (0, U.computed)(() => {
+		let e = {
+			position: p.value,
+			left: "0",
+			top: "0"
+		};
+		if (!u.value) return e;
+		let t = nn(u.value, d.value), n = nn(u.value, f.value);
+		return c.value ? {
+			...e,
+			transform: "translate(" + t + "px, " + n + "px)",
+			...tn(u.value) >= 1.5 && { willChange: "transform" }
+		} : {
+			position: p.value,
+			left: t + "px",
+			top: n + "px"
+		};
+	}), v;
+	function y() {
+		if (l.value == null || u.value == null) return;
+		let e = i.value;
+		qt(l.value, u.value, {
+			middleware: a.value,
+			placement: o.value,
+			strategy: s.value
+		}).then((t) => {
+			d.value = t.x, f.value = t.y, p.value = t.strategy, m.value = t.placement, h.value = t.middlewareData, g.value = e !== !1;
+		});
+	}
+	function b() {
+		typeof v == "function" && (v(), v = void 0);
+	}
+	function x() {
+		if (b(), r === void 0) {
+			y();
+			return;
+		}
+		if (l.value != null && u.value != null) {
+			v = r(l.value, u.value, y);
+			return;
+		}
+	}
+	function S() {
+		i.value || (g.value = !1);
+	}
+	return (0, U.watch)([
+		a,
+		o,
+		s,
+		i
+	], y, { flush: "sync" }), (0, U.watch)([l, u], x, { flush: "sync" }), (0, U.watch)(i, S, { flush: "sync" }), (0, U.getCurrentScope)() && (0, U.onScopeDispose)(b), {
+		x: (0, U.shallowReadonly)(d),
+		y: (0, U.shallowReadonly)(f),
+		strategy: (0, U.shallowReadonly)(p),
+		placement: (0, U.shallowReadonly)(m),
+		middlewareData: (0, U.shallowReadonly)(h),
+		isPositioned: (0, U.shallowReadonly)(g),
+		floatingStyles: _,
+		update: y
+	};
+}
+//#endregion
+//#region src/composables/useTooltip.ts
+function an() {
+	let e = x(null), t = ee("floatingEl"), n = x(!1), r = x(void 0), { floatingStyles: i } = rn(e, t, {
+		placement: "top-start",
+		strategy: "fixed",
+		middleware: [
+			Wt(4),
+			Kt(),
+			Gt({ padding: 8 })
+		]
+	});
+	function a(t, i) {
+		e.value = t.currentTarget, r.value = i, n.value = !0;
+	}
+	function o() {
+		n.value = !1;
+	}
+	return {
+		floatingStyles: i,
+		visible: n,
+		activeText: r,
+		show: a,
+		hide: o
+	};
+}
+//#endregion
+//#region src/components/PFolder.vue
+var on = /* @__PURE__ */ u({
+	__name: "PFolder",
+	props: /*@__PURE__*/ p({
+		title: {},
+		tooltip: {},
+		id: {},
+		disabled: { type: Boolean }
+	}, {
+		expanded: {
+			type: Boolean,
+			default: void 0
+		},
+		expandedModifiers: {}
+	}),
+	emits: ["update:expanded"],
+	setup(e) {
+		let t = O(e, "expanded"), r = e.id ?? e.title, l = j(), u = x(null), { isExpanded: d, toggle: f } = be(u, t, r ? `vp-folder-${r}` : void 0), { floatingStyles: p, visible: m, activeText: _, show: v, hide: b } = an();
+		return (t, r) => (y(), o("div", { class: h(["vp-folder vp-container", {
+			"vp-folder--expanded": E(d),
+			"vp--disabled": e.disabled
+		}]) }, [
+			s("button", {
+				class: "vp-folder__title",
+				onClick: r[2] ||= (...e) => E(f) && E(f)(...e)
+			}, [s("div", {
+				class: "vp-folder__title-text",
+				onMouseenter: r[0] ||= (t) => e.tooltip && E(v)(t, e.tooltip),
+				onMouseleave: r[1] ||= (...e) => E(b) && E(b)(...e)
+			}, [c(T(e.title) + " ", 1), e.tooltip && E(l).tooltipIcon ? (y(), i(w(E(l).tooltipIcon), { key: 0 })) : a("", !0)], 32), r[3] ||= s("div", { class: "vp-folder__chevron" }, null, -1)]),
+			r[4] ||= s("div", { class: "vp-folder__indent" }, null, -1),
+			s("div", {
+				ref_key: "containerRef",
+				ref: u,
+				class: "vp-folder__content"
+			}, [C(t.$slots, "default")], 512),
+			e.tooltip ? (y(), i(n, {
+				key: 0,
+				to: "body"
+			}, [E(m) ? (y(), o("div", {
+				key: 0,
+				ref: "floatingEl",
+				class: "vp-tooltip",
+				style: g(E(p))
+			}, T(E(_)), 5)) : a("", !0)])) : a("", !0)
+		], 2));
+	}
+}), sn = { class: "vp-label__text" }, cn = { class: "vp-label__value" }, W = /* @__PURE__ */ u({
+	__name: "PLabel",
+	props: {
+		label: {},
+		tooltip: {}
+	},
+	setup(e) {
+		let { floatingStyles: t, visible: r, activeText: l, show: u, hide: d } = an(), f = j();
+		return (p, m) => (y(), o("div", { class: h(["vp-label", { "vp-label--no-label": !e.label }]) }, [
+			s("div", sn, [c(T(e.label) + " ", 1), e.tooltip && E(f).tooltipIcon ? (y(), i(w(E(f).tooltipIcon), {
+				key: 0,
+				onMouseenter: m[0] ||= (t) => e.tooltip && E(u)(t, e.tooltip),
+				onMouseleave: E(d)
+			}, null, 40, ["onMouseleave"])) : a("", !0)]),
+			s("div", cn, [C(p.$slots, "default")]),
+			e.tooltip ? (y(), i(n, {
+				key: 0,
+				to: "body"
+			}, [E(r) ? (y(), o("div", {
+				key: 0,
+				ref: "floatingEl",
+				class: "vp-tooltip",
+				style: g(E(t))
+			}, T(E(l)), 5)) : a("", !0)])) : a("", !0)
+		], 2));
+	}
+}), ln = { class: "vp-text" }, un = ["value"], dn = /* @__PURE__ */ u({
+	__name: "PText",
+	props: /*@__PURE__*/ p({
+		label: {},
+		tooltip: {}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = O(e, "modelValue");
+		return (n, r) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", ln, [s("input", {
+				class: "vp-text__input",
+				type: "text",
+				value: t.value,
+				onInput: r[0] ||= (e) => t.value = e.target.value
+			}, null, 40, un)])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), fn = { class: "vp-text__guide" }, pn = ["d"], mn = ["d"], hn = /* @__PURE__ */ u({
+	__name: "PNumber",
+	props: /*@__PURE__*/ p({
+		label: {},
+		tooltip: {},
+		min: {},
+		max: {},
+		step: { default: 1 }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = O(e, "modelValue"), n = x(!1), a = x(!1), c = x(String(t.value)), l = x(0);
+		k(t, (e) => {
+			a.value || (c.value = String(e));
+		});
+		function u(t) {
+			return e.min !== void 0 && (t = Math.max(e.min, t)), e.max !== void 0 && (t = Math.min(e.max, t)), t;
+		}
+		function d(t) {
+			return Math.round(t / e.step) * e.step;
+		}
+		let f = r(() => `M 0,4 L${l.value},4`), p = r(() => {
+			let e = l.value;
+			if (e === 0) return "";
+			let t = e + (e > 0 ? -1 : 1), n = Math.max(-4, Math.min(4, -t));
+			return `M ${t + n},0 L${t},4 L${t + n},8 M ${e},-1 L${e},9`;
+		}), m = r(() => {
+			let n = e.step < 1 ? String(e.step).split(".")[1]?.length ?? 0 : 0;
+			return t.value.toFixed(n);
+		});
+		function _() {
+			a.value = !0;
+		}
+		function v() {
+			a.value = !1;
+			let e = parseFloat(c.value);
+			isNaN(e) ? c.value = String(t.value) : t.value = u(e);
+		}
+		function b(n) {
+			if (n.key === "Enter") n.target.blur();
+			else if (n.key === "ArrowUp") {
+				n.preventDefault();
+				let r = n.shiftKey ? 10 : 1;
+				t.value = u(t.value + e.step * r);
+			} else if (n.key === "ArrowDown") {
+				n.preventDefault();
+				let r = n.shiftKey ? 10 : 1;
+				t.value = u(t.value - e.step * r);
+			}
+		}
+		let S = 0, C = 0;
+		function w(e) {
+			e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), n.value = !0, S = e.clientX, C = t.value, l.value = 0, document.body.style.cursor = "ew-resize";
+		}
+		function E(e) {
+			if (!n.value) return;
+			let r = e.clientX - S;
+			l.value = r, t.value = u(d(C + r));
+		}
+		function D() {
+			n.value = !1, l.value = 0, document.body.style.cursor = "";
+		}
+		return (t, r) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", { class: h(["vp-text vp-text--number", { "vp-text--dragging": n.value }]) }, [re(s("input", {
+				"onUpdate:modelValue": r[0] ||= (e) => c.value = e,
+				class: "vp-text__input",
+				type: "text",
+				onFocus: _,
+				onBlur: v,
+				onKeydown: b
+			}, null, 544), [[te, c.value]]), s("div", {
+				class: "vp-text__knob",
+				onPointerdown: w,
+				onPointermove: E,
+				onPointerup: D,
+				onPointercancel: D
+			}, [(y(), o("svg", fn, [s("path", {
+				class: "vp-text__guide-body",
+				d: f.value
+			}, null, 8, pn), s("path", {
+				class: "vp-text__guide-head",
+				d: p.value
+			}, null, 8, mn)])), s("div", {
+				class: "vp-text__drag-tooltip",
+				style: g({ left: `${l.value}px` })
+			}, T(m.value), 5)], 32)], 2)]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), gn = { class: "vp-button" }, _n = { class: "vp-button__label" }, vn = /* @__PURE__ */ u({
+	__name: "PButton",
+	props: {
+		label: {},
+		tooltip: {}
+	},
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let r = t, { floatingStyles: l, visible: u, activeText: d, show: f, hide: p } = an(), m = j();
+		return (t, h) => (y(), o("div", gn, [s("button", {
+			class: "vp-button__btn",
+			onClick: h[1] ||= (e) => r("click")
+		}, [s("span", _n, [c(T(e.label) + " ", 1), e.tooltip && E(m).tooltipIcon ? (y(), i(w(E(m).tooltipIcon), {
+			key: 0,
+			onMouseenter: h[0] ||= (t) => e.tooltip && E(f)(t, e.tooltip),
+			onMouseleave: E(p)
+		}, null, 40, ["onMouseleave"])) : a("", !0)])]), e.tooltip ? (y(), i(n, {
+			key: 0,
+			to: "body"
+		}, [E(u) ? (y(), o("div", {
+			key: 0,
+			ref: "floatingEl",
+			class: "vp-tooltip",
+			style: g(E(l))
+		}, T(E(d)), 5)) : a("", !0)])) : a("", !0)]));
+	}
+}), yn = {}, bn = { class: "vp-separator" };
+function xn(e, t) {
+	return y(), o("div", bn, [...t[0] ||= [s("hr", { class: "vp-separator__rule" }, null, -1)]]);
+}
+var Sn = /*#__PURE__*/ fe(yn, [["render", xn]]), Cn = { class: "vp-checkbox" }, wn = { class: "vp-checkbox__label" }, Tn = ["checked"], En = /* @__PURE__ */ u({
+	__name: "PCheckbox",
+	props: /*@__PURE__*/ p({
+		label: {},
+		tooltip: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			required: !0
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = O(e, "modelValue");
+		return (n, r) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", Cn, [s("label", wn, [s("input", {
+				class: "vp-checkbox__input",
+				type: "checkbox",
+				checked: t.value,
+				onChange: r[0] ||= (e) => t.value = e.target.checked
+			}, null, 40, Tn), r[1] ||= s("div", { class: "vp-checkbox__box" }, [s("svg", { viewBox: "0 0 16 16" }, [s("path", { d: "M2 8l4 4l8 -8" })])], -1)])])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), Dn = { class: "vp-select" }, On = ["value"], kn = ["value"], An = /* @__PURE__ */ u({
+	__name: "PSelect",
+	props: /*@__PURE__*/ p({
+		label: {},
+		tooltip: {},
+		options: {}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let n = O(e, "modelValue");
+		return (r, a) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", Dn, [s("select", {
+				class: "vp-select__input",
+				value: n.value,
+				onChange: a[0] ||= (e) => n.value = e.target.value
+			}, [(y(!0), o(t, null, S(e.options, (e) => (y(), o("option", {
+				key: e.value,
+				value: e.value
+			}, T(e.label), 9, kn))), 128))], 40, On), a[1] ||= s("div", { class: "vp-select__arrow" }, [s("svg", { viewBox: "0 0 16 16" }, [s("path", { d: "M 2 5 L 8 11 L 14 5" })])], -1)])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), jn = { class: "vp-monitor" }, Mn = { class: "vp-monitor__value" }, Nn = /* @__PURE__ */ u({
+	__name: "PMonitor",
+	props: {
+		value: {},
+		label: {},
+		tooltip: {}
+	},
+	setup(e) {
+		return (t, n) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", jn, [s("div", Mn, T(e.value), 1)])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), Pn = { class: "vp-monitor-multi" }, Fn = ["value"], In = /* @__PURE__ */ u({
+	__name: "PMonitorMulti",
+	props: {
+		value: {},
+		label: {},
+		tooltip: {}
+	},
+	setup(e) {
+		return (t, n) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", Pn, [s("textarea", {
+				class: "vp-monitor-multi__value",
+				readonly: "",
+				value: String(e.value)
+			}, null, 8, Fn)])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), Ln = { class: "vp-slider" }, Rn = /* @__PURE__ */ u({
+	__name: "PSlider",
+	props: /*@__PURE__*/ p({
+		label: {},
+		tooltip: {},
+		min: { default: 0 },
+		max: { default: 1 },
+		step: { default: null }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = O(e, "modelValue"), n = x(null), a = x(!1), o = r(() => {
+			let n = e.max - e.min;
+			return n === 0 ? 0 : (t.value - e.min) / n * 100;
+		});
+		function c(t) {
+			return Math.max(e.min, Math.min(e.max, t));
+		}
+		function l(r) {
+			let i = n.value;
+			if (!i) return t.value;
+			let a = i.getBoundingClientRect(), o = (r.clientX - a.left) / a.width, s = e.min + o * (e.max - e.min);
+			return e.step === null ? c(s) : c(Math.round(s / e.step) * e.step);
+		}
+		function u(e) {
+			e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), a.value = !0, t.value = l(e);
+		}
+		function d(e) {
+			a.value && (t.value = l(e));
+		}
+		function f() {
+			a.value = !1;
+		}
+		function p(n) {
+			let r = e.step ?? (e.max - e.min) / 100;
+			n.key === "ArrowRight" || n.key === "ArrowUp" ? (n.preventDefault(), t.value = c(t.value + r * (n.shiftKey ? 10 : 1))) : (n.key === "ArrowLeft" || n.key === "ArrowDown") && (n.preventDefault(), t.value = c(t.value - r * (n.shiftKey ? 10 : 1)));
+		}
+		return (t, r) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", Ln, [s("div", {
+				ref_key: "trackRef",
+				ref: n,
+				class: "vp-slider__track",
+				tabindex: "0",
+				onPointerdown: u,
+				onPointermove: d,
+				onPointerup: f,
+				onPointercancel: f,
+				onKeydown: p
+			}, [s("div", {
+				class: "vp-slider__knob",
+				style: g({ left: o.value + "%" })
+			}, null, 4)], 544)])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), zn = { class: "vp-tab" }, Bn = { class: "vp-tab__title-bar" }, Vn = ["onClick"], Hn = { class: "vp-tab-item__label" }, Un = { class: "vp-tab__content" }, Wn = { class: "vp-tab-page__content" }, Gn = /* @__PURE__ */ u({
+	__name: "PTab",
+	props: /*@__PURE__*/ p({
+		tabs: {},
+		tooltips: {}
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let r = O(e, "modelValue"), { floatingStyles: l, visible: u, activeText: d, show: f, hide: p } = an(), m = j();
+		function _(e) {
+			r.value = e;
+		}
+		return (v, b) => (y(), o("div", zn, [
+			s("div", Bn, [(y(!0), o(t, null, S(e.tabs, (t, n) => (y(), o("div", {
+				key: n,
+				class: h(["vp-tab-item", { "vp-tab-item--selected": n === r.value }])
+			}, [s("button", {
+				class: "vp-tab-item__btn",
+				onClick: (e) => _(n)
+			}, [s("span", Hn, [c(T(t) + " ", 1), e.tooltips?.[n] && E(m).tooltipIcon ? (y(), i(w(E(m).tooltipIcon), {
+				key: 0,
+				onMouseenter: (t) => e.tooltips?.[n] && E(f)(t, e.tooltips[n]),
+				onMouseleave: E(p)
+			}, null, 40, ["onMouseenter", "onMouseleave"])) : a("", !0)])], 8, Vn)], 2))), 128))]),
+			(y(), i(n, { to: "body" }, [E(u) ? (y(), o("div", {
+				key: 0,
+				ref: "floatingEl",
+				class: "vp-tooltip",
+				style: g(E(l))
+			}, T(E(d)), 5)) : a("", !0)])),
+			b[0] ||= s("div", { class: "vp-tab__indent" }, null, -1),
+			s("div", Un, [(y(!0), o(t, null, S(e.tabs, (e, t) => re((y(), o("div", {
+				key: t,
+				class: "vp-tab-page"
+			}, [s("div", Wn, [C(v.$slots, e)])])), [[ne, t === r.value]])), 128))])
+		]));
+	}
+});
+//#endregion
+//#region node_modules/.pnpm/vue-color@3.3.3_vue@3.5.35_typescript@6.0.3_/node_modules/vue-color/dist/vue-color.js
+function Kn(e) {
+	"@babel/helpers - typeof";
+	return Kn = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+		return typeof e;
+	} : function(e) {
+		return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+	}, Kn(e);
+}
+var qn = /^\s+/, Jn = /\s+$/;
+function G(e, t) {
+	if (e ||= "", t ||= {}, e instanceof G) return e;
+	if (!(this instanceof G)) return new G(e, t);
+	var n = Yn(e);
+	this._originalInput = e, this._r = n.r, this._g = n.g, this._b = n.b, this._a = n.a, this._roundA = Math.round(100 * this._a) / 100, this._format = t.format || n.format, this._gradientType = t.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = n.ok;
+}
+G.prototype = {
+	isDark: function() {
+		return this.getBrightness() < 128;
+	},
+	isLight: function() {
+		return !this.isDark();
+	},
+	isValid: function() {
+		return this._ok;
+	},
+	getOriginalInput: function() {
+		return this._originalInput;
+	},
+	getFormat: function() {
+		return this._format;
+	},
+	getAlpha: function() {
+		return this._a;
+	},
+	getBrightness: function() {
+		var e = this.toRgb();
+		return (e.r * 299 + e.g * 587 + e.b * 114) / 1e3;
+	},
+	getLuminance: function() {
+		var e = this.toRgb(), t, n, r, i, a, o;
+		return t = e.r / 255, n = e.g / 255, r = e.b / 255, i = t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4, a = n <= .03928 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4, o = r <= .03928 ? r / 12.92 : ((r + .055) / 1.055) ** 2.4, .2126 * i + .7152 * a + .0722 * o;
+	},
+	setAlpha: function(e) {
+		return this._a = yr(e), this._roundA = Math.round(100 * this._a) / 100, this;
+	},
+	toHsv: function() {
+		var e = $n(this._r, this._g, this._b);
+		return {
+			h: e.h * 360,
+			s: e.s,
+			v: e.v,
+			a: this._a
+		};
+	},
+	toHsvString: function() {
+		var e = $n(this._r, this._g, this._b), t = Math.round(e.h * 360), n = Math.round(e.s * 100), r = Math.round(e.v * 100);
+		return this._a == 1 ? "hsv(" + t + ", " + n + "%, " + r + "%)" : "hsva(" + t + ", " + n + "%, " + r + "%, " + this._roundA + ")";
+	},
+	toHsl: function() {
+		var e = Zn(this._r, this._g, this._b);
+		return {
+			h: e.h * 360,
+			s: e.s,
+			l: e.l,
+			a: this._a
+		};
+	},
+	toHslString: function() {
+		var e = Zn(this._r, this._g, this._b), t = Math.round(e.h * 360), n = Math.round(e.s * 100), r = Math.round(e.l * 100);
+		return this._a == 1 ? "hsl(" + t + ", " + n + "%, " + r + "%)" : "hsla(" + t + ", " + n + "%, " + r + "%, " + this._roundA + ")";
+	},
+	toHex: function(e) {
+		return tr(this._r, this._g, this._b, e);
+	},
+	toHexString: function(e) {
+		return "#" + this.toHex(e);
+	},
+	toHex8: function(e) {
+		return nr(this._r, this._g, this._b, this._a, e);
+	},
+	toHex8String: function(e) {
+		return "#" + this.toHex8(e);
+	},
+	toRgb: function() {
+		return {
+			r: Math.round(this._r),
+			g: Math.round(this._g),
+			b: Math.round(this._b),
+			a: this._a
+		};
+	},
+	toRgbString: function() {
+		return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
+	},
+	toPercentageRgb: function() {
+		return {
+			r: Math.round(K(this._r, 255) * 100) + "%",
+			g: Math.round(K(this._g, 255) * 100) + "%",
+			b: Math.round(K(this._b, 255) * 100) + "%",
+			a: this._a
+		};
+	},
+	toPercentageRgbString: function() {
+		return this._a == 1 ? "rgb(" + Math.round(K(this._r, 255) * 100) + "%, " + Math.round(K(this._g, 255) * 100) + "%, " + Math.round(K(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(K(this._r, 255) * 100) + "%, " + Math.round(K(this._g, 255) * 100) + "%, " + Math.round(K(this._b, 255) * 100) + "%, " + this._roundA + ")";
+	},
+	toName: function() {
+		return this._a === 0 ? "transparent" : this._a < 1 ? !1 : _r[tr(this._r, this._g, this._b, !0)] || !1;
+	},
+	toFilter: function(e) {
+		var t = "#" + rr(this._r, this._g, this._b, this._a), n = t, r = this._gradientType ? "GradientType = 1, " : "";
+		if (e) {
+			var i = G(e);
+			n = "#" + rr(i._r, i._g, i._b, i._a);
+		}
+		return "progid:DXImageTransform.Microsoft.gradient(" + r + "startColorstr=" + t + ",endColorstr=" + n + ")";
+	},
+	toString: function(e) {
+		var t = !!e;
+		e ||= this._format;
+		var n = !1, r = this._a < 1 && this._a >= 0;
+		return !t && r && (e === "hex" || e === "hex6" || e === "hex3" || e === "hex4" || e === "hex8" || e === "name") ? e === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (e === "rgb" && (n = this.toRgbString()), e === "prgb" && (n = this.toPercentageRgbString()), (e === "hex" || e === "hex6") && (n = this.toHexString()), e === "hex3" && (n = this.toHexString(!0)), e === "hex4" && (n = this.toHex8String(!0)), e === "hex8" && (n = this.toHex8String()), e === "name" && (n = this.toName()), e === "hsl" && (n = this.toHslString()), e === "hsv" && (n = this.toHsvString()), n || this.toHexString());
+	},
+	clone: function() {
+		return G(this.toString());
+	},
+	_applyModification: function(e, t) {
+		var n = e.apply(null, [this].concat([].slice.call(t)));
+		return this._r = n._r, this._g = n._g, this._b = n._b, this.setAlpha(n._a), this;
+	},
+	lighten: function() {
+		return this._applyModification(sr, arguments);
+	},
+	brighten: function() {
+		return this._applyModification(cr, arguments);
+	},
+	darken: function() {
+		return this._applyModification(lr, arguments);
+	},
+	desaturate: function() {
+		return this._applyModification(ir, arguments);
+	},
+	saturate: function() {
+		return this._applyModification(ar, arguments);
+	},
+	greyscale: function() {
+		return this._applyModification(or, arguments);
+	},
+	spin: function() {
+		return this._applyModification(ur, arguments);
+	},
+	_applyCombination: function(e, t) {
+		return e.apply(null, [this].concat([].slice.call(t)));
+	},
+	analogous: function() {
+		return this._applyCombination(mr, arguments);
+	},
+	complement: function() {
+		return this._applyCombination(dr, arguments);
+	},
+	monochromatic: function() {
+		return this._applyCombination(hr, arguments);
+	},
+	splitcomplement: function() {
+		return this._applyCombination(pr, arguments);
+	},
+	triad: function() {
+		return this._applyCombination(fr, [3]);
+	},
+	tetrad: function() {
+		return this._applyCombination(fr, [4]);
+	}
+}, G.fromRatio = function(e, t) {
+	if (Kn(e) == "object") {
+		var n = {};
+		for (var r in e) e.hasOwnProperty(r) && (r === "a" ? n[r] = e[r] : n[r] = Cr(e[r]));
+		e = n;
+	}
+	return G(e, t);
+};
+function Yn(e) {
+	var t = {
+		r: 0,
+		g: 0,
+		b: 0
+	}, n = 1, r = null, i = null, a = null, o = !1, s = !1;
+	return typeof e == "string" && (e = Er(e)), Kn(e) == "object" && (X(e.r) && X(e.g) && X(e.b) ? (t = Xn(e.r, e.g, e.b), o = !0, s = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : X(e.h) && X(e.s) && X(e.v) ? (r = Cr(e.s), i = Cr(e.v), t = er(e.h, r, i), o = !0, s = "hsv") : X(e.h) && X(e.s) && X(e.l) && (r = Cr(e.s), a = Cr(e.l), t = Qn(e.h, r, a), o = !0, s = "hsl"), e.hasOwnProperty("a") && (n = e.a)), n = yr(n), {
+		ok: o,
+		format: e.format || s,
+		r: Math.min(255, Math.max(t.r, 0)),
+		g: Math.min(255, Math.max(t.g, 0)),
+		b: Math.min(255, Math.max(t.b, 0)),
+		a: n
+	};
+}
+function Xn(e, t, n) {
+	return {
+		r: K(e, 255) * 255,
+		g: K(t, 255) * 255,
+		b: K(n, 255) * 255
+	};
+}
+function Zn(e, t, n) {
+	e = K(e, 255), t = K(t, 255), n = K(n, 255);
+	var r = Math.max(e, t, n), i = Math.min(e, t, n), a, o, s = (r + i) / 2;
+	if (r == i) a = o = 0;
+	else {
+		var c = r - i;
+		switch (o = s > .5 ? c / (2 - r - i) : c / (r + i), r) {
+			case e:
+				a = (t - n) / c + (t < n ? 6 : 0);
+				break;
+			case t:
+				a = (n - e) / c + 2;
+				break;
+			case n:
+				a = (e - t) / c + 4;
+				break;
+		}
+		a /= 6;
+	}
+	return {
+		h: a,
+		s: o,
+		l: s
+	};
+}
+function Qn(e, t, n) {
+	var r, i, a;
+	e = K(e, 360), t = K(t, 100), n = K(n, 100);
+	function o(e, t, n) {
+		return n < 0 && (n += 1), n > 1 && --n, n < 1 / 6 ? e + (t - e) * 6 * n : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e;
+	}
+	if (t === 0) r = i = a = n;
+	else {
+		var s = n < .5 ? n * (1 + t) : n + t - n * t, c = 2 * n - s;
+		r = o(c, s, e + 1 / 3), i = o(c, s, e), a = o(c, s, e - 1 / 3);
+	}
+	return {
+		r: r * 255,
+		g: i * 255,
+		b: a * 255
+	};
+}
+function $n(e, t, n) {
+	e = K(e, 255), t = K(t, 255), n = K(n, 255);
+	var r = Math.max(e, t, n), i = Math.min(e, t, n), a, o, s = r, c = r - i;
+	if (o = r === 0 ? 0 : c / r, r == i) a = 0;
+	else {
+		switch (r) {
+			case e:
+				a = (t - n) / c + (t < n ? 6 : 0);
+				break;
+			case t:
+				a = (n - e) / c + 2;
+				break;
+			case n:
+				a = (e - t) / c + 4;
+				break;
+		}
+		a /= 6;
+	}
+	return {
+		h: a,
+		s: o,
+		v: s
+	};
+}
+function er(e, t, n) {
+	e = K(e, 360) * 6, t = K(t, 100), n = K(n, 100);
+	var r = Math.floor(e), i = e - r, a = n * (1 - t), o = n * (1 - i * t), s = n * (1 - (1 - i) * t), c = r % 6, l = [
+		n,
+		o,
+		a,
+		a,
+		s,
+		n
+	][c], u = [
+		s,
+		n,
+		n,
+		o,
+		a,
+		a
+	][c], d = [
+		a,
+		a,
+		s,
+		n,
+		n,
+		o
+	][c];
+	return {
+		r: l * 255,
+		g: u * 255,
+		b: d * 255
+	};
+}
+function tr(e, t, n, r) {
+	var i = [
+		J(Math.round(e).toString(16)),
+		J(Math.round(t).toString(16)),
+		J(Math.round(n).toString(16))
+	];
+	return r && i[0].charAt(0) == i[0].charAt(1) && i[1].charAt(0) == i[1].charAt(1) && i[2].charAt(0) == i[2].charAt(1) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) : i.join("");
+}
+function nr(e, t, n, r, i) {
+	var a = [
+		J(Math.round(e).toString(16)),
+		J(Math.round(t).toString(16)),
+		J(Math.round(n).toString(16)),
+		J(wr(r))
+	];
+	return i && a[0].charAt(0) == a[0].charAt(1) && a[1].charAt(0) == a[1].charAt(1) && a[2].charAt(0) == a[2].charAt(1) && a[3].charAt(0) == a[3].charAt(1) ? a[0].charAt(0) + a[1].charAt(0) + a[2].charAt(0) + a[3].charAt(0) : a.join("");
+}
+function rr(e, t, n, r) {
+	return [
+		J(wr(r)),
+		J(Math.round(e).toString(16)),
+		J(Math.round(t).toString(16)),
+		J(Math.round(n).toString(16))
+	].join("");
+}
+G.equals = function(e, t) {
+	return !e || !t ? !1 : G(e).toRgbString() == G(t).toRgbString();
+}, G.random = function() {
+	return G.fromRatio({
+		r: Math.random(),
+		g: Math.random(),
+		b: Math.random()
+	});
+};
+function ir(e, t) {
+	t = t === 0 ? 0 : t || 10;
+	var n = G(e).toHsl();
+	return n.s -= t / 100, n.s = br(n.s), G(n);
+}
+function ar(e, t) {
+	t = t === 0 ? 0 : t || 10;
+	var n = G(e).toHsl();
+	return n.s += t / 100, n.s = br(n.s), G(n);
+}
+function or(e) {
+	return G(e).desaturate(100);
+}
+function sr(e, t) {
+	t = t === 0 ? 0 : t || 10;
+	var n = G(e).toHsl();
+	return n.l += t / 100, n.l = br(n.l), G(n);
+}
+function cr(e, t) {
+	t = t === 0 ? 0 : t || 10;
+	var n = G(e).toRgb();
+	return n.r = Math.max(0, Math.min(255, n.r - Math.round(255 * -(t / 100)))), n.g = Math.max(0, Math.min(255, n.g - Math.round(255 * -(t / 100)))), n.b = Math.max(0, Math.min(255, n.b - Math.round(255 * -(t / 100)))), G(n);
+}
+function lr(e, t) {
+	t = t === 0 ? 0 : t || 10;
+	var n = G(e).toHsl();
+	return n.l -= t / 100, n.l = br(n.l), G(n);
+}
+function ur(e, t) {
+	var n = G(e).toHsl(), r = (n.h + t) % 360;
+	return n.h = r < 0 ? 360 + r : r, G(n);
+}
+function dr(e) {
+	var t = G(e).toHsl();
+	return t.h = (t.h + 180) % 360, G(t);
+}
+function fr(e, t) {
+	if (isNaN(t) || t <= 0) throw Error("Argument to polyad must be a positive number");
+	for (var n = G(e).toHsl(), r = [G(e)], i = 360 / t, a = 1; a < t; a++) r.push(G({
+		h: (n.h + a * i) % 360,
+		s: n.s,
+		l: n.l
+	}));
+	return r;
+}
+function pr(e) {
+	var t = G(e).toHsl(), n = t.h;
+	return [
+		G(e),
+		G({
+			h: (n + 72) % 360,
+			s: t.s,
+			l: t.l
+		}),
+		G({
+			h: (n + 216) % 360,
+			s: t.s,
+			l: t.l
+		})
+	];
+}
+function mr(e, t, n) {
+	t ||= 6, n ||= 30;
+	var r = G(e).toHsl(), i = 360 / n, a = [G(e)];
+	for (r.h = (r.h - (i * t >> 1) + 720) % 360; --t;) r.h = (r.h + i) % 360, a.push(G(r));
+	return a;
+}
+function hr(e, t) {
+	t ||= 6;
+	for (var n = G(e).toHsv(), r = n.h, i = n.s, a = n.v, o = [], s = 1 / t; t--;) o.push(G({
+		h: r,
+		s: i,
+		v: a
+	})), a = (a + s) % 1;
+	return o;
+}
+G.mix = function(e, t, n) {
+	n = n === 0 ? 0 : n || 50;
+	var r = G(e).toRgb(), i = G(t).toRgb(), a = n / 100;
+	return G({
+		r: (i.r - r.r) * a + r.r,
+		g: (i.g - r.g) * a + r.g,
+		b: (i.b - r.b) * a + r.b,
+		a: (i.a - r.a) * a + r.a
+	});
+}, G.readability = function(e, t) {
+	var n = G(e), r = G(t);
+	return (Math.max(n.getLuminance(), r.getLuminance()) + .05) / (Math.min(n.getLuminance(), r.getLuminance()) + .05);
+}, G.isReadable = function(e, t, n) {
+	var r = G.readability(e, t), i, a;
+	switch (a = !1, i = Dr(n), i.level + i.size) {
+		case "AAsmall":
+		case "AAAlarge":
+			a = r >= 4.5;
+			break;
+		case "AAlarge":
+			a = r >= 3;
+			break;
+		case "AAAsmall":
+			a = r >= 7;
+			break;
+	}
+	return a;
+}, G.mostReadable = function(e, t, n) {
+	var r = null, i = 0, a, o, s, c;
+	n ||= {}, o = n.includeFallbackColors, s = n.level, c = n.size;
+	for (var l = 0; l < t.length; l++) a = G.readability(e, t[l]), a > i && (i = a, r = G(t[l]));
+	return G.isReadable(e, r, {
+		level: s,
+		size: c
+	}) || !o ? r : (n.includeFallbackColors = !1, G.mostReadable(e, ["#fff", "#000"], n));
+};
+var gr = G.names = {
+	aliceblue: "f0f8ff",
+	antiquewhite: "faebd7",
+	aqua: "0ff",
+	aquamarine: "7fffd4",
+	azure: "f0ffff",
+	beige: "f5f5dc",
+	bisque: "ffe4c4",
+	black: "000",
+	blanchedalmond: "ffebcd",
+	blue: "00f",
+	blueviolet: "8a2be2",
+	brown: "a52a2a",
+	burlywood: "deb887",
+	burntsienna: "ea7e5d",
+	cadetblue: "5f9ea0",
+	chartreuse: "7fff00",
+	chocolate: "d2691e",
+	coral: "ff7f50",
+	cornflowerblue: "6495ed",
+	cornsilk: "fff8dc",
+	crimson: "dc143c",
+	cyan: "0ff",
+	darkblue: "00008b",
+	darkcyan: "008b8b",
+	darkgoldenrod: "b8860b",
+	darkgray: "a9a9a9",
+	darkgreen: "006400",
+	darkgrey: "a9a9a9",
+	darkkhaki: "bdb76b",
+	darkmagenta: "8b008b",
+	darkolivegreen: "556b2f",
+	darkorange: "ff8c00",
+	darkorchid: "9932cc",
+	darkred: "8b0000",
+	darksalmon: "e9967a",
+	darkseagreen: "8fbc8f",
+	darkslateblue: "483d8b",
+	darkslategray: "2f4f4f",
+	darkslategrey: "2f4f4f",
+	darkturquoise: "00ced1",
+	darkviolet: "9400d3",
+	deeppink: "ff1493",
+	deepskyblue: "00bfff",
+	dimgray: "696969",
+	dimgrey: "696969",
+	dodgerblue: "1e90ff",
+	firebrick: "b22222",
+	floralwhite: "fffaf0",
+	forestgreen: "228b22",
+	fuchsia: "f0f",
+	gainsboro: "dcdcdc",
+	ghostwhite: "f8f8ff",
+	gold: "ffd700",
+	goldenrod: "daa520",
+	gray: "808080",
+	green: "008000",
+	greenyellow: "adff2f",
+	grey: "808080",
+	honeydew: "f0fff0",
+	hotpink: "ff69b4",
+	indianred: "cd5c5c",
+	indigo: "4b0082",
+	ivory: "fffff0",
+	khaki: "f0e68c",
+	lavender: "e6e6fa",
+	lavenderblush: "fff0f5",
+	lawngreen: "7cfc00",
+	lemonchiffon: "fffacd",
+	lightblue: "add8e6",
+	lightcoral: "f08080",
+	lightcyan: "e0ffff",
+	lightgoldenrodyellow: "fafad2",
+	lightgray: "d3d3d3",
+	lightgreen: "90ee90",
+	lightgrey: "d3d3d3",
+	lightpink: "ffb6c1",
+	lightsalmon: "ffa07a",
+	lightseagreen: "20b2aa",
+	lightskyblue: "87cefa",
+	lightslategray: "789",
+	lightslategrey: "789",
+	lightsteelblue: "b0c4de",
+	lightyellow: "ffffe0",
+	lime: "0f0",
+	limegreen: "32cd32",
+	linen: "faf0e6",
+	magenta: "f0f",
+	maroon: "800000",
+	mediumaquamarine: "66cdaa",
+	mediumblue: "0000cd",
+	mediumorchid: "ba55d3",
+	mediumpurple: "9370db",
+	mediumseagreen: "3cb371",
+	mediumslateblue: "7b68ee",
+	mediumspringgreen: "00fa9a",
+	mediumturquoise: "48d1cc",
+	mediumvioletred: "c71585",
+	midnightblue: "191970",
+	mintcream: "f5fffa",
+	mistyrose: "ffe4e1",
+	moccasin: "ffe4b5",
+	navajowhite: "ffdead",
+	navy: "000080",
+	oldlace: "fdf5e6",
+	olive: "808000",
+	olivedrab: "6b8e23",
+	orange: "ffa500",
+	orangered: "ff4500",
+	orchid: "da70d6",
+	palegoldenrod: "eee8aa",
+	palegreen: "98fb98",
+	paleturquoise: "afeeee",
+	palevioletred: "db7093",
+	papayawhip: "ffefd5",
+	peachpuff: "ffdab9",
+	peru: "cd853f",
+	pink: "ffc0cb",
+	plum: "dda0dd",
+	powderblue: "b0e0e6",
+	purple: "800080",
+	rebeccapurple: "663399",
+	red: "f00",
+	rosybrown: "bc8f8f",
+	royalblue: "4169e1",
+	saddlebrown: "8b4513",
+	salmon: "fa8072",
+	sandybrown: "f4a460",
+	seagreen: "2e8b57",
+	seashell: "fff5ee",
+	sienna: "a0522d",
+	silver: "c0c0c0",
+	skyblue: "87ceeb",
+	slateblue: "6a5acd",
+	slategray: "708090",
+	slategrey: "708090",
+	snow: "fffafa",
+	springgreen: "00ff7f",
+	steelblue: "4682b4",
+	tan: "d2b48c",
+	teal: "008080",
+	thistle: "d8bfd8",
+	tomato: "ff6347",
+	turquoise: "40e0d0",
+	violet: "ee82ee",
+	wheat: "f5deb3",
+	white: "fff",
+	whitesmoke: "f5f5f5",
+	yellow: "ff0",
+	yellowgreen: "9acd32"
+}, _r = G.hexNames = vr(gr);
+function vr(e) {
+	var t = {};
+	for (var n in e) e.hasOwnProperty(n) && (t[e[n]] = n);
+	return t;
+}
+function yr(e) {
+	return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
+}
+function K(e, t) {
+	xr(e) && (e = "100%");
+	var n = Sr(e);
+	return e = Math.min(t, Math.max(0, parseFloat(e))), n && (e = parseInt(e * t, 10) / 100), Math.abs(e - t) < 1e-6 ? 1 : e % t / parseFloat(t);
+}
+function br(e) {
+	return Math.min(1, Math.max(0, e));
+}
+function q(e) {
+	return parseInt(e, 16);
+}
+function xr(e) {
+	return typeof e == "string" && e.indexOf(".") != -1 && parseFloat(e) === 1;
+}
+function Sr(e) {
+	return typeof e == "string" && e.indexOf("%") != -1;
+}
+function J(e) {
+	return e.length == 1 ? "0" + e : "" + e;
+}
+function Cr(e) {
+	return e <= 1 && (e = e * 100 + "%"), e;
+}
+function wr(e) {
+	return Math.round(parseFloat(e) * 255).toString(16);
+}
+function Tr(e) {
+	return q(e) / 255;
+}
+var Y = function() {
+	var e = "(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)", t = "[\\s|\\(]+(" + e + ")[,|\\s]+(" + e + ")[,|\\s]+(" + e + ")\\s*\\)?", n = "[\\s|\\(]+(" + e + ")[,|\\s]+(" + e + ")[,|\\s]+(" + e + ")[,|\\s]+(" + e + ")\\s*\\)?";
+	return {
+		CSS_UNIT: new RegExp(e),
+		rgb: RegExp("rgb" + t),
+		rgba: RegExp("rgba" + n),
+		hsl: RegExp("hsl" + t),
+		hsla: RegExp("hsla" + n),
+		hsv: RegExp("hsv" + t),
+		hsva: RegExp("hsva" + n),
+		hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+		hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+		hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+		hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+	};
+}();
+function X(e) {
+	return !!Y.CSS_UNIT.exec(e);
+}
+function Er(e) {
+	e = e.replace(qn, "").replace(Jn, "").toLowerCase();
+	var t = !1;
+	if (gr[e]) e = gr[e], t = !0;
+	else if (e == "transparent") return {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0,
+		format: "name"
+	};
+	var n;
+	return (n = Y.rgb.exec(e)) ? {
+		r: n[1],
+		g: n[2],
+		b: n[3]
+	} : (n = Y.rgba.exec(e)) ? {
+		r: n[1],
+		g: n[2],
+		b: n[3],
+		a: n[4]
+	} : (n = Y.hsl.exec(e)) ? {
+		h: n[1],
+		s: n[2],
+		l: n[3]
+	} : (n = Y.hsla.exec(e)) ? {
+		h: n[1],
+		s: n[2],
+		l: n[3],
+		a: n[4]
+	} : (n = Y.hsv.exec(e)) ? {
+		h: n[1],
+		s: n[2],
+		v: n[3]
+	} : (n = Y.hsva.exec(e)) ? {
+		h: n[1],
+		s: n[2],
+		v: n[3],
+		a: n[4]
+	} : (n = Y.hex8.exec(e)) ? {
+		r: q(n[1]),
+		g: q(n[2]),
+		b: q(n[3]),
+		a: Tr(n[4]),
+		format: t ? "name" : "hex8"
+	} : (n = Y.hex6.exec(e)) ? {
+		r: q(n[1]),
+		g: q(n[2]),
+		b: q(n[3]),
+		format: t ? "name" : "hex"
+	} : (n = Y.hex4.exec(e)) ? {
+		r: q(n[1] + "" + n[1]),
+		g: q(n[2] + "" + n[2]),
+		b: q(n[3] + "" + n[3]),
+		a: Tr(n[4] + "" + n[4]),
+		format: t ? "name" : "hex8"
+	} : (n = Y.hex3.exec(e)) ? {
+		r: q(n[1] + "" + n[1]),
+		g: q(n[2] + "" + n[2]),
+		b: q(n[3] + "" + n[3]),
+		format: t ? "name" : "hex"
+	} : !1;
+}
+function Dr(e) {
+	var t, n;
+	return e ||= {
+		level: "AA",
+		size: "small"
+	}, t = (e.level || "AA").toUpperCase(), n = (e.size || "small").toLowerCase(), t !== "AA" && t !== "AAA" && (t = "AA"), n !== "small" && n !== "large" && (n = "small"), {
+		level: t,
+		size: n
+	};
+}
+var Or = (e, t, n = !1) => {
+	if (n) switch (t) {
+		case "rgb": return e.toRgb();
+		case "prgb": return e.toPercentageRgb();
+		case "hsl": return e.toHsl();
+		case "hsv": return e.toHsv();
+		default: return null;
+	}
+	else {
+		let n = t;
+		t === "hex" && e.getAlpha() < 1 && (n = "hex8");
+		let r = e.toString(n);
+		try {
+			r = JSON.parse(r);
+		} catch {}
+		return r;
+	}
+}, kr = (e, t) => !!(Object.prototype.hasOwnProperty.call(e, t) && typeof e[t] < "u"), Ar = (e) => typeof e > "u", Z = [
+	"update:tinyColor",
+	"update:modelValue",
+	"input"
+];
+function jr(e, t, n) {
+	let i, a, o = r({
+		get: () => {
+			let { modelValue: t, tinyColor: n, value: r } = e, o = n ?? t ?? r;
+			return Ar(a) && (Ar(r) || (a = G(r).getFormat()), Ar(t) || (a = G(t).getFormat())), Ar(i) && (typeof r == "object" && !(r instanceof G) && (i = !0), typeof t == "object" && (i = !0)), G(o);
+		},
+		set: (e) => {
+			s(e);
+		}
+	}), s = (n) => {
+		let r = G(n);
+		kr(e, "tinyColor") && t("update:tinyColor", r), kr(e, "modelValue") && t("update:modelValue", Or(r, a, i)), kr(e, "value") && t("input", Or(r, a, i));
+	};
+	return o;
+}
+var Mr = (e) => {
+	let t = {
+		x: 0,
+		y: 0
+	};
+	return e instanceof MouseEvent && (t.x = e.pageX, t.y = e.pageY), typeof TouchEvent < "u" && e instanceof TouchEvent && (t.x = e.touches?.[0] ? e.touches[0].pageX : e.changedTouches?.[0] ? e.changedTouches[0].pageX : 0, t.y = e.touches?.[0] ? e.touches[0].pageY : e.changedTouches?.[0] ? e.changedTouches[0].pageY : 0), t;
+}, Nr = () => ({
+	x: window.scrollX || window.pageXOffset || document.documentElement.scrollLeft || 0,
+	y: window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0
+}), Pr = (e) => {
+	let { x: t, y: n } = Nr(), r = e.getBoundingClientRect();
+	return {
+		x: r.left + t,
+		y: r.top + n
+	};
+}, Fr = (e) => e.code === "ArrowUp" || e.keyCode === 38 ? "up" : e.code === "ArrowDown" || e.keyCode === 40 ? "down" : e.code === "ArrowLeft" || e.keyCode === 37 ? "left" : e.code === "ArrowRight" || e.keyCode === 39 ? "right" : null;
+function Ir(e) {
+	let t = e.toString();
+	return t.indexOf(".") === -1 ? 0 : t.split(".")[1].length;
+}
+function Lr(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+var Rr = (e, t = 20) => {
+	let n, r, i;
+	return (...a) => {
+		n ? (clearTimeout(r), r = setTimeout(() => {
+			Date.now() - i >= t && (e(...a), i = Date.now());
+		}, Math.max(t - (Date.now() - i), 0))) : (e(...a), i = Date.now(), n = !0);
+	};
+}, zr = ["aria-valuetext"], Br = /* @__PURE__ */ u({
+	__name: "SaturationSlider",
+	props: {
+		hue: {},
+		tinyColor: {},
+		modelValue: {},
+		value: {}
+	},
+	emits: ["change"].concat(Z),
+	setup(e, { emit: t }) {
+		let n = t, i = e, a = x(0), c = jr(i, n), l = r(() => c.value.toHsv()), u = r(() => i.hue ?? l.value.h), d = r(() => `hsl(${u.value}, 100%, 50%)`), f = r(() => -(l.value.v * 100) + 1 + 100 + "%"), p = r(() => l.value.v <= .01 ? a.value * 100 + "%" : l.value.s * 100 + "%"), m = x(null);
+		function h(e) {
+			let t = m.value;
+			if (!t) return;
+			let n = t.clientWidth, r = t.clientHeight, { x: i, y: o } = Pr(t), { x: s, y: c } = Mr(e), d = Lr(s - i, 0, n), f = Lr(c - o, 0, r), p = d / n, h = Lr(1 - f / r, 0, 1);
+			a.value = p;
+			let g = Math.round(p * 100), v = Math.round(h * 100);
+			g === 1 && (g = .01), v === 1 && (v = .01), _({
+				h: u.value,
+				s: g,
+				v,
+				a: l.value.a
+			});
+		}
+		function _(e) {
+			c.value = e;
+		}
+		let b = Rr(h, 20);
+		function S(e) {
+			e.preventDefault(), e.type.startsWith("mouse") ? (window.addEventListener("mousemove", b), window.addEventListener("mouseup", b), window.addEventListener("mouseup", C)) : e.type.startsWith("touch") && (window.addEventListener("touchmove", b), window.addEventListener("touchend", b), window.addEventListener("touchend", C));
+		}
+		function C() {
+			w();
+		}
+		function w() {
+			window.removeEventListener("mousemove", b), window.removeEventListener("mouseup", b), window.removeEventListener("mouseup", C), window.removeEventListener("touchmove", b), window.removeEventListener("touchend", b), window.removeEventListener("touchend", C);
+		}
+		function T(e) {
+			switch (e.preventDefault(), Fr(e)) {
+				case "left": {
+					let e = l.value.s - .01;
+					_({
+						...l.value,
+						s: e >= 0 ? e : 0
+					});
+					break;
+				}
+				case "right": {
+					let e = l.value.s + .01;
+					_({
+						...l.value,
+						s: e > 1 ? 1 : e
+					});
+					break;
+				}
+				case "up": {
+					let e = l.value.v + .01;
+					_({
+						...l.value,
+						v: e > 1 ? 1 : e
+					});
+					break;
+				}
+				case "down": {
+					let e = l.value.v - .01;
+					_({
+						...l.value,
+						v: e < 0 ? 0 : e
+					});
+					break;
+				}
+			}
+		}
+		return v(() => {
+			w();
+		}), (e, t) => (y(), o("div", {
+			class: "vc-saturation-slider bg",
+			style: g({ background: d.value }),
+			ref_key: "containerRef",
+			ref: m,
+			onMousedown: S,
+			onTouchstart: S,
+			role: "application",
+			"aria-label": "Saturation and brightness picker"
+		}, [
+			t[1] ||= s("div", { class: "bg white" }, null, -1),
+			t[2] ||= s("div", { class: "bg black" }, null, -1),
+			s("div", {
+				class: "picker-wrap",
+				style: g({
+					top: f.value,
+					left: p.value
+				}),
+				role: "slider",
+				tabindex: "0",
+				"aria-valuemin": "0",
+				"aria-valuemax": "1",
+				"aria-label": "press arrow to change saturation or brightness",
+				"aria-valuenow": "?",
+				"aria-valuetext": `saturation: ${l.value.s.toFixed(0)}%, brightness: ${l.value.v.toFixed(0)}%`,
+				onKeydown: T
+			}, t[0] ||= [s("div", { class: "picker" }, null, -1)], 44, zr)
+		], 36));
+	}
+}), Q = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, Vr = /* @__PURE__ */ Q(Br, [["__scopeId", "data-v-4d048d6e"]]), Hr = (e) => typeof e < "u", Ur = { class: "vc-base-slider" }, Wr = {
+	key: 0,
+	class: "background"
+}, Gr = [
+	"aria-label",
+	"aria-valuemax",
+	"aria-valuenow"
+], Kr = /* @__PURE__ */ Q(/* @__PURE__ */ u({
+	__name: "BaseSlider",
+	props: {
+		direction: { default: "horizontal" },
+		modelValue: { default: 0 },
+		value: { default: 0 },
+		max: { default: 100 },
+		step: {},
+		ariaLabel: { default: "slider" }
+	},
+	emits: ["input", "update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, c = r(() => n.modelValue ?? n.value), l = r(() => {
+			let e = c.value / n.max;
+			return n.direction === "vertical" && (e = 1 - e), 100 * e + "%";
+		}), u = x(null);
+		function d(e) {
+			Hr(e) && (i("input", e), i("update:modelValue", e));
+		}
+		function f(e) {
+			let { direction: t, max: r } = n, i = u.value;
+			if (!i) return;
+			let a = i.clientWidth, o = i.clientHeight, { x: s, y: c } = Pr(i), { x: l, y: f } = Mr(e), p = l - s, m = f - c, h;
+			h = t === "vertical" ? m < 0 ? r : m > o ? 0 : (1 - m / o) * r : p < 0 ? 0 : p > a ? r : p / a * r, d(h);
+		}
+		let p = Rr(f);
+		function m(e) {
+			f(e), e.type.startsWith("mouse") ? (window.addEventListener("mousemove", p), window.addEventListener("mouseup", _)) : (window.addEventListener("touchmove", p), window.addEventListener("touchend", _));
+		}
+		function _() {
+			b();
+		}
+		function b() {
+			window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", _), window.removeEventListener("touchmove", p), window.removeEventListener("touchend", _);
+		}
+		function S(e) {
+			e.preventDefault();
+			let { direction: t, max: r } = n, i = Fr(e), a = n.step ?? r / 100, o = c.value, s;
+			switch (i) {
+				case "left":
+					if (t !== "horizontal") return;
+					s = o - a < 0 ? 0 : o - a;
+					break;
+				case "right":
+					if (t !== "horizontal") return;
+					s = o + a > r ? r : o + a;
+					break;
+				case "down":
+					if (t !== "vertical") return;
+					s = o - a < 0 ? 0 : o - a;
+					break;
+				case "up":
+					if (t !== "vertical") return;
+					s = o + a > r ? r : o + a;
+					break;
+			}
+			d(s);
+		}
+		return v(() => {
+			b();
+		}), (e, t) => (y(), o("div", Ur, [e.$slots.background ? (y(), o("div", Wr, [C(e.$slots, "background", {}, void 0, !0)])) : a("", !0), s("div", {
+			class: h({
+				slider: !0,
+				horizontal: e.direction === "horizontal",
+				vertical: e.direction === "vertical"
+			}),
+			ref_key: "containerRef",
+			ref: u,
+			onMousedown: m,
+			onTouchstart: m,
+			role: "slider",
+			"aria-label": e.ariaLabel,
+			"aria-valuemax": e.max,
+			"aria-valuemin": "0",
+			"aria-valuenow": c.value.toFixed(1),
+			tabindex: "0",
+			onKeydown: S
+		}, [s("div", {
+			class: "picker-wrap",
+			style: g({
+				left: e.direction === "horizontal" ? l.value : 0,
+				top: e.direction === "vertical" ? l.value : 0
+			}),
+			role: "presentation"
+		}, [C(e.$slots, "picker", {}, () => [t[0] ||= s("div", { class: "picker" }, null, -1)], !0)], 4)], 42, Gr)]));
+	}
+}), [["__scopeId", "data-v-972b0fad"]]), qr = /* @__PURE__ */ Q(/* @__PURE__ */ u({
+	__name: "HueSlider",
+	props: {
+		direction: { default: "horizontal" },
+		modelValue: { default: 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		D((e) => ({ "2f44f39d": o.value }));
+		let n = e, a = t, o = r(() => `linear-gradient(to ${n.direction === "horizontal" ? "right" : "top"}, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)`), c = r(() => {
+			let e = Number(n.modelValue);
+			return Number.isNaN(e) ? 0 : e;
+		}), l = x();
+		k(c, (e, t) => {
+			e !== 0 && e - t > 0 && (l.value = "right"), e !== 0 && e - t < 0 && (l.value = "left");
+		});
+		let u = r(() => n.direction === "vertical" ? c.value === 0 && l.value === "right" ? 0 : c.value : n.direction === "horizontal" ? c.value === 0 && l.value === "right" ? 360 : c.value : 0);
+		function d(e) {
+			f(Math.round(e));
+		}
+		function f(e) {
+			a("update:modelValue", e);
+		}
+		return (e, t) => (y(), i(Kr, {
+			class: "vc-hue-slider",
+			max: 360,
+			step: 1,
+			modelValue: u.value,
+			direction: e.direction,
+			"onUpdate:modelValue": d,
+			"aria-label": "Hue"
+		}, {
+			background: A(() => t[0] ||= [s("div", { class: "gradient" }, null, -1)]),
+			picker: A(() => [C(e.$slots, "default", {}, void 0, !0)]),
+			_: 3
+		}, 8, ["modelValue", "direction"]));
+	}
+}), [["__scopeId", "data-v-5367c985"]]), Jr = /* @__PURE__ */ Q(/* @__PURE__ */ u({
+	__name: "CheckerboardBG",
+	props: {
+		size: { default: 8 },
+		white: { default: "#fff" },
+		grey: { default: "#e6e6e6" }
+	},
+	setup(e) {
+		let t = e;
+		function n(e, t, n) {
+			if (typeof document > "u") return null;
+			var r = document.createElement("canvas");
+			r.width = r.height = n * 2;
+			var i = r.getContext("2d");
+			return i ? (i.fillStyle = e, i.fillRect(0, 0, r.width, r.height), i.fillStyle = t, i.fillRect(0, 0, n, n), i.translate(n, n), i.fillRect(0, 0, n, n), r.toDataURL()) : null;
+		}
+		function i(e, t, r) {
+			return n(e, t, r);
+		}
+		let a = r(() => `url(${i(t.white, t.grey, t.size)})`);
+		return (e, t) => (y(), o("div", {
+			class: "vc-checkerboard",
+			style: g({ backgroundImage: a.value })
+		}, null, 4));
+	}
+}), [["__scopeId", "data-v-37d61ccd"]]), Yr = /* @__PURE__ */ Q(/* @__PURE__ */ u({
+	__name: "AlphaSlider",
+	props: {
+		tinyColor: {},
+		modelValue: {},
+		value: {}
+	},
+	emits: Z,
+	setup(e, { emit: t }) {
+		let n = jr(e, t), a = r(() => {
+			let e = n.value.toRgb(), t = [
+				e.r,
+				e.g,
+				e.b
+			].join(",");
+			return "linear-gradient(to right, rgba(" + t + ", 0) 0%, rgba(" + t + ", 1) 100%)";
+		}), o = r(() => n.value.getAlpha());
+		function c(e) {
+			n.value = n.value.setAlpha(e).clone();
+		}
+		return (e, t) => (y(), i(Kr, {
+			class: "vc-alpha-slider",
+			modelValue: o.value,
+			max: 1,
+			"aria-label": "Transparency",
+			"onUpdate:modelValue": c
+		}, {
+			background: A(() => [l(Jr), s("div", {
+				class: "gradient",
+				style: g({ background: a.value })
+			}, null, 4)]),
+			_: 1
+		}, 8, ["modelValue"]));
+	}
+}), [["__scopeId", "data-v-07dd346b"]]), Xr = { class: "vc-editable-input" }, Zr = ["value", "aria-label"], Qr = {
+	key: 0,
+	class: "vc-input-desc",
+	"aria-hidden": "true"
+}, $ = /* @__PURE__ */ Q(/* @__PURE__ */ u({
+	__name: "EditableInput",
+	props: {
+		value: {},
+		label: {},
+		desc: {},
+		max: {},
+		min: {},
+		step: { default: 1 },
+		a11y: {}
+	},
+	emits: ["change", "blur"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = n.a11y?.label ?? n.label, c = `input__label__${i}__${Math.random().toString().slice(2, 5)}`;
+		function l(e) {
+			let { min: t, max: i } = n;
+			if (Hr(i) && +e > i) {
+				r("change", i);
+				return;
+			}
+			if (Hr(t) && +e < t) {
+				r("change", t);
+				return;
+			}
+			r("change", e);
+		}
+		function u(e) {
+			l(e.target?.value);
+		}
+		function d(e) {
+			r("blur", e);
+		}
+		function f(e) {
+			let t = Number(n.value);
+			if (!isNaN(t)) {
+				let r = n.step, i = Ir(r), a = Fr(e);
+				a === "up" && (l((t + r).toFixed(i)), e.preventDefault()), a === "down" && (l((t - r).toFixed(i)), e.preventDefault());
+			}
+		}
+		return (e, t) => (y(), o("div", Xr, [
+			s("input", {
+				class: "vc-input-input",
+				value: n.value,
+				onKeydown: f,
+				onInput: u,
+				onBlur: d,
+				"aria-label": E(i),
+				id: c
+			}, null, 40, Zr),
+			s("label", {
+				for: c,
+				class: "vc-input-label",
+				"aria-hidden": "true"
+			}, T(n.label), 1),
+			e.desc ? (y(), o("span", Qr, T(e.desc), 1)) : a("", !0)
+		]));
+	}
+}), [["__scopeId", "data-v-9c267b2b"]]), $r = (e) => G(e).isValid(), ei = /* @__PURE__ */ u({
+	__name: "HexInput",
+	props: {
+		value: {},
+		label: {},
+		desc: {},
+		a11y: {},
+		type: { default: "hex" },
+		withHash: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, a = {
+			label: n.type === "hex" ? "Hex" : "Hex with transparency",
+			...n.a11y
+		}, o = (e, t = "hex") => {
+			let r = "";
+			return t === "hex" && (r = G(e).toHexString()), t === "hex8" && (r = G(e).toHex8String()), n.withHash !== !0 && (r = r.replace("#", "")), r;
+		}, s = x(o(n.value, n.type));
+		k(() => n.value, (e) => {
+			G.equals(e, s.value) || (s.value = o(e, n.type));
+		});
+		let c = (e) => {
+			if (!e) return;
+			s.value = e;
+			let t = e.length;
+			e[0] === "#" && --t, !(n.type === "hex" && t % 3 != 0 && t !== 8) && (n.type === "hex8" && t !== 8 || $r(e) && r("change", e));
+		}, l = () => {
+			let e = s.value.length;
+			s.value[0] === "#" && --e, !($r(s.value) && (n.type === "hex" && e === 6 || n.type === "hex8" && e === 8)) && (s.value = o(n.value, n.type));
+		};
+		return (e, t) => (y(), i($, {
+			label: n.label,
+			a11y: a,
+			value: s.value,
+			onChange: c,
+			onBlur: l
+		}, null, 8, ["label", "value"]));
+	}
+});
+function ti() {
+	let e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+	return e.charAt(Math.floor(Math.random() * 62)) + e.charAt(Math.floor(Math.random() * 62));
+}
+var ni = (e) => {
+	let t = x(0), n = `__from__vc__hue__${ti()}`;
+	return k(e, (e) => {
+		if (e[n]) return;
+		let r = e.toHsl().h;
+		r === 0 && t.value !== 0 || (t.value = r);
+	}, { immediate: !0 }), {
+		hueRef: t,
+		updateHueRef: (r) => {
+			let i = G({
+				...e.value.toHsl(),
+				h: r
+			});
+			i[n] = !0, e.value = i, t.value = r;
+		}
+	};
+}, ri = { class: "saturation" }, ii = { class: "body" }, ai = { class: "controls" }, oi = { class: "color-wrap" }, si = ["aria-label"], ci = { class: "sliders" }, li = { class: "hue-wrap" }, ui = {
+	key: 0,
+	class: "alpha-wrap"
+}, di = {
+	key: 0,
+	class: "fieldsWrap",
+	"data-testid": "fields"
+}, fi = {
+	key: 0,
+	class: "fields"
+}, pi = { class: "field" }, mi = { class: "field" }, hi = { class: "field" }, gi = {
+	key: 0,
+	class: "field"
+}, _i = {
+	key: 1,
+	class: "fields"
+}, vi = { class: "field" }, yi = {
+	key: 2,
+	class: "fields"
+}, bi = { class: "field" }, xi = { class: "field" }, Si = { class: "field" }, Ci = {
+	key: 0,
+	class: "field"
+}, wi = {
+	class: "toggle-icon",
+	role: "presentation"
+}, Ti = {
+	style: {
+		width: "24px",
+		height: "24px"
+	},
+	viewBox: "0 0 24 24"
+}, Ei = {
+	class: "toggle-icon_highlighted",
+	role: "presentation"
+}, Di = /* @__PURE__ */ Q(/* @__PURE__ */ u({
+	__name: "ChromePicker",
+	props: {
+		disableAlpha: { type: Boolean },
+		disableFields: { type: Boolean },
+		formats: { default: () => [
+			"rgb",
+			"hex",
+			"hsl"
+		] },
+		tinyColor: {},
+		modelValue: {},
+		value: {}
+	},
+	emits: Z,
+	setup(e, { emit: t }) {
+		let n = e, c = jr(n, t), { hueRef: u, updateHueRef: d } = ni(c), p = x(0), m = x(!1), _ = r(() => {
+			let e = c.value.toRgb();
+			return "rgba(" + [
+				e.r,
+				e.g,
+				e.b,
+				c.value.getAlpha()
+			].join(",") + ")";
+		}), v = r(() => {
+			let { h: e, s: t, l: n } = c.value.toHsl();
+			return {
+				h: e.toFixed(),
+				s: `${(t * 100).toFixed()}%`,
+				l: `${(n * 100).toFixed()}%`
+			};
+		}), b = r(() => c.value.toRgb()), S = r(() => Number(c.value.getAlpha().toFixed(2))), C = /* @__PURE__ */ new Set([
+			"hex",
+			"hsl",
+			"rgb"
+		]), w = r(() => {
+			let e = /* @__PURE__ */ new Set(), t = [], r = n.formats;
+			for (let n of r) if (C.has(n)) {
+				let r = n;
+				e.has(r) || (e.add(r), t.push(r));
+			}
+			return t;
+		}), T = r(() => {
+			let { disableFields: e, formats: t } = n;
+			return !(e === !0 || !Array.isArray(t) || w.value.length === 0);
+		}), D = (e) => w.value.includes(e), O = (e) => w.value.indexOf(e), ee = (e) => {
+			c.value = e;
+		}, te = (e, t) => {
+			if (!t || isNaN(Number(t))) return;
+			let n = { [e]: t };
+			c.value = {
+				...b.value,
+				a: S.value,
+				...n
+			};
+		}, k = (e, t) => {
+			if (!t) return;
+			let n = { [e]: +t };
+			(e === "s" || e === "l") && (n[e] = t.replace("%", "") / 100), c.value = {
+				...c.value.toHsl(),
+				a: S.value,
+				...n
+			};
+		}, A = () => {
+			if (p.value === w.value.length - 1) {
+				p.value = 0;
+				return;
+			}
+			p.value++;
+		}, ae = () => {
+			m.value = !0;
+		}, oe = () => {
+			m.value = !1;
+		};
+		return (e, t) => (y(), o("div", {
+			role: "application",
+			"aria-label": "Chrome Color Picker",
+			class: h(["vc-chrome-picker", e.disableAlpha ? "alpha-disabled" : ""])
+		}, [s("div", ri, [l(Vr, {
+			tinyColor: E(c),
+			"onUpdate:tinyColor": t[0] ||= (e) => f(c) ? c.value = e : null,
+			hue: E(u)
+		}, null, 8, ["tinyColor", "hue"])]), s("div", ii, [s("div", ai, [s("div", oi, [s("div", {
+			class: "active-color",
+			style: g({ backgroundColor: _.value }),
+			role: "presentation",
+			"aria-live": "polite",
+			"aria-label": `Current color is ${_.value}`
+		}, null, 12, si), n.disableAlpha ? a("", !0) : (y(), i(Jr, { key: 0 }))]), s("div", ci, [s("div", li, [l(qr, {
+			modelValue: E(u),
+			"onUpdate:modelValue": E(d)
+		}, null, 8, ["modelValue", "onUpdate:modelValue"])]), n.disableAlpha ? a("", !0) : (y(), o("div", ui, [l(Yr, {
+			tinyColor: E(c),
+			"onUpdate:tinyColor": t[1] ||= (e) => f(c) ? c.value = e : null
+		}, null, 8, ["tinyColor"])]))])]), T.value ? (y(), o("div", di, [
+			D("rgb") ? re((y(), o("div", fi, [
+				s("div", pi, [l($, {
+					label: "r",
+					value: b.value.r,
+					onChange: t[2] ||= (e) => te("r", e),
+					a11y: { label: "Red" }
+				}, null, 8, ["value"])]),
+				s("div", mi, [l($, {
+					label: "g",
+					value: b.value.g,
+					onChange: t[3] ||= (e) => te("g", e),
+					a11y: { label: "Green" }
+				}, null, 8, ["value"])]),
+				s("div", hi, [l($, {
+					label: "b",
+					value: b.value.b,
+					onChange: t[4] ||= (e) => te("b", e),
+					a11y: { label: "Blue" }
+				}, null, 8, ["value"])]),
+				e.disableAlpha ? a("", !0) : (y(), o("div", gi, [l($, {
+					label: "a",
+					value: S.value,
+					step: .01,
+					max: 1,
+					onChange: t[5] ||= (e) => te("a", e),
+					a11y: { label: "Transparency" }
+				}, null, 8, ["value"])]))
+			], 512)), [[ne, p.value === O("rgb")]]) : a("", !0),
+			D("hex") ? re((y(), o("div", _i, [s("div", vi, [l(ei, {
+				type: S.value === 1 ? "hex" : "hex8",
+				label: "hex",
+				value: E(c).toHex8String(),
+				onChange: ee,
+				"with-hash": !0
+			}, null, 8, ["type", "value"])])], 512)), [[ne, p.value === O("hex")]]) : a("", !0),
+			D("hsl") ? re((y(), o("div", yi, [
+				s("div", bi, [l($, {
+					label: "h",
+					value: E(u).toFixed(),
+					onChange: t[6] ||= (e) => k("h", e),
+					a11y: { label: "Hue" }
+				}, null, 8, ["value"])]),
+				s("div", xi, [l($, {
+					label: "s",
+					value: v.value.s,
+					onChange: t[7] ||= (e) => k("s", e),
+					a11y: { label: "Saturation" }
+				}, null, 8, ["value"])]),
+				s("div", Si, [l($, {
+					label: "l",
+					value: v.value.l,
+					onChange: t[8] ||= (e) => k("l", e),
+					a11y: { label: "Lightness" }
+				}, null, 8, ["value"])]),
+				e.disableAlpha ? a("", !0) : (y(), o("div", Ci, [l($, {
+					label: "a",
+					value: S.value,
+					step: .01,
+					max: 1,
+					onChange: t[9] ||= (e) => k("a", e),
+					a11y: { label: "Transparency" }
+				}, null, 8, ["value"])]))
+			], 512)), [[ne, p.value === O("hsl")]]) : a("", !0),
+			w.value.length > 1 ? (y(), o("div", {
+				key: 3,
+				class: "toggle-btn",
+				onClick: A,
+				onKeydown: [ie(A, ["enter"]), ie(A, ["space"])],
+				onMouseover: ae,
+				onMouseenter: ae,
+				onMouseout: oe,
+				onFocus: ae,
+				onBlur: oe,
+				role: "button",
+				"aria-label": "Change color format",
+				tabindex: "0"
+			}, [s("div", wi, [(y(), o("svg", Ti, t[10] ||= [s("path", {
+				fill: "currentColor",
+				d: "M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
+			}, null, -1)]))]), re(s("div", Ei, null, 512), [[ne, E(m)]])], 32)) : a("", !0)
+		])) : a("", !0)])], 2));
+	}
+}), [["__scopeId", "data-v-dfdde7e0"]]);
+["change"].concat(Z), ["change"].concat(Z), Z.concat([
+	"ok",
+	"cancel",
+	"reset"
+]), ["change"].concat(Z);
+var Oi = { class: "vp-color" }, ki = { class: "vp-color__header" }, Ai = { class: "vp-color__text" }, ji = ["value"], Mi = /* @__PURE__ */ u({
+	__name: "PColor",
+	props: /*@__PURE__*/ p({
+		label: {},
+		tooltip: {},
+		alpha: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = O(e, "modelValue"), r = x(!1), c = x(null), u = x(null), { floatingStyles: d } = rn(c, u, {
+			placement: "bottom-start",
+			strategy: "fixed",
+			middleware: [
+				Wt(4),
+				Kt(),
+				Gt({ padding: 8 })
+			]
+		});
+		function f() {
+			r.value = !r.value;
+		}
+		function p(n) {
+			let r = G(n);
+			r.isValid() && (t.value = e.alpha ? r.toHex8String() : r.toHexString());
+		}
+		function m(n) {
+			let r = n.target.value, i = G(r);
+			i.isValid() && (t.value = e.alpha ? i.toHex8String() : i.toHexString());
+		}
+		function h(e) {
+			if (!r.value) return;
+			let t = e.target;
+			c.value?.contains(t) || u.value?.contains(t) || (r.value = !1);
+		}
+		return _(() => document.addEventListener("pointerdown", h)), v(() => document.removeEventListener("pointerdown", h)), (h, _) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", Oi, [s("div", ki, [s("div", {
+				ref_key: "swatchRef",
+				ref: c,
+				class: "vp-color__swatch"
+			}, [s("button", {
+				class: "vp-color__swatch-btn",
+				onClick: f
+			}, [s("div", {
+				class: "vp-color__swatch-btn__color",
+				style: g({ background: t.value })
+			}, null, 4)])], 512), s("div", Ai, [s("input", {
+				class: "vp-text__input",
+				type: "text",
+				value: t.value,
+				onChange: m
+			}, null, 40, ji)])]), (y(), i(n, { to: "body" }, [r.value ? (y(), o("div", {
+				key: 0,
+				ref_key: "pickerRef",
+				ref: u,
+				class: "vp-color__popup",
+				style: g(E(d))
+			}, [l(E(Di), {
+				"model-value": t.value,
+				"disable-alpha": !e.alpha,
+				"onUpdate:modelValue": p
+			}, null, 8, ["model-value", "disable-alpha"])], 4)) : a("", !0)]))])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+}), Ni = { class: "vp-graph" }, Pi = {
+	class: "vp-graph__svg",
+	viewBox: "0 0 100 100",
+	preserveAspectRatio: "none"
+}, Fi = ["points"], Ii = /* @__PURE__ */ u({
+	__name: "PGraph",
+	props: {
+		values: {},
+		label: {},
+		tooltip: {},
+		min: {},
+		max: {}
+	},
+	setup(e) {
+		let t = r(() => {
+			if (!e.values.length) return "";
+			let t = e.min ?? Math.min(...e.values), n = (e.max ?? Math.max(...e.values)) - t || 1;
+			return e.values.map((r, i) => `${i / (e.values.length - 1) * 100},${100 - (r - t) / n * 100}`).join(" ");
+		});
+		return (n, r) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", Ni, [(y(), o("svg", Pi, [s("polyline", { points: t.value }, null, 8, Fi)]))])]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+});
+//#endregion
+//#region src/composables/usePickerFold.ts
+function Li(e, t) {
+	let n = x(!1);
+	return k(t, (t) => {
+		let r = e.value;
+		if (r) if (n.value = !1, t) {
+			r.style.transition = "none", r.style.height = "auto", r.offsetHeight;
+			let e = r.clientHeight;
+			r.style.height = "0", r.offsetHeight, r.style.transition = "", r.offsetHeight, r.style.height = e + "px", r.addEventListener("transitionend", (e) => {
+				e.propertyName === "height" && (r.style.height = "auto", n.value = !0);
+			}, { once: !0 });
+		} else r.style.transition = "none", r.style.height = r.clientHeight + "px", r.offsetHeight, r.style.transition = "", r.offsetHeight, r.style.height = "0", r.addEventListener("transitionend", (e) => {
+			e.propertyName === "height" && (r.style.height = "");
+		}, { once: !0 });
+	}), n;
+}
+//#endregion
+//#region src/components/PPoint2d.vue?vue&type=script&setup=true&lang.ts
+var Ri = { class: "vp-point-2d__header" }, zi = { class: "vp-point-2d__inputs" }, Bi = { style: {
+	display: "flex",
+	gap: "2px"
+} }, Vi = {
+	class: "vp-text vp-text--number vp-text--first",
+	style: { flex: "1" }
+}, Hi = ["value"], Ui = {
+	class: "vp-text vp-text--number vp-text--last",
+	style: { flex: "1" }
+}, Wi = ["value"], Gi = { class: "vp-point-2d__picker-wrap" }, Ki = 160, qi = /* @__PURE__ */ u({
+	__name: "PPoint2d",
+	props: /*@__PURE__*/ p({
+		label: {},
+		tooltip: {},
+		min: { default: () => -1 },
+		max: { default: 1 }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = O(e, "modelValue"), n = x(!1), a = x(null), o = x(null), c = Li(a, n), l = r(() => t.value.x.toFixed(3)), u = r(() => t.value.y.toFixed(3));
+		function d(t) {
+			return Math.max(e.min, Math.min(e.max, t));
+		}
+		function f(e) {
+			let n = parseFloat(e.target.value);
+			isNaN(n) || (t.value = {
+				x: d(n),
+				y: t.value.y
+			});
+		}
+		function p(e) {
+			let n = parseFloat(e.target.value);
+			isNaN(n) || (t.value = {
+				x: t.value.x,
+				y: d(n)
+			});
+		}
+		function m() {
+			n.value = !n.value;
+		}
+		function v() {
+			let e = o.value;
+			if (!e) return;
+			let t = e.getContext("2d"), n = Ki;
+			t.clearRect(0, 0, n, n), t.fillStyle = "rgba(0,0,0,0.3)", t.fillRect(0, 0, n, n), t.strokeStyle = "rgba(255,255,255,0.1)", t.lineWidth = 1, t.beginPath(), t.moveTo(n / 2, 0), t.lineTo(n / 2, n), t.moveTo(0, n / 2), t.lineTo(n, n / 2), t.stroke();
+		}
+		_(() => {
+			v();
+		});
+		let b = r(() => {
+			let n = e.max - e.min;
+			return (t.value.x - e.min) / n * Ki;
+		}), S = r(() => {
+			let n = e.max - e.min;
+			return Ki - (t.value.y - e.min) / n * Ki;
+		}), C = !1;
+		function w(t) {
+			let n = o.value.getBoundingClientRect(), r = (t.clientX - n.left) / n.width, i = 1 - (t.clientY - n.top) / n.height, a = e.max - e.min;
+			return {
+				x: d(e.min + r * a),
+				y: d(e.min + i * a)
+			};
+		}
+		function T(e) {
+			e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), C = !0, t.value = w(e);
+		}
+		function D(e) {
+			C && (t.value = w(e));
+		}
+		function ee() {
+			C = !1;
+		}
+		return (t, r) => (y(), i(W, {
+			label: e.label,
+			tooltip: e.tooltip
+		}, {
+			default: A(() => [s("div", { class: h(["vp-point-2d", {
+				"vp-point-2d--expanded": n.value,
+				"vp-point-2d--complete": E(c)
+			}]) }, [s("div", Ri, [s("button", {
+				class: "vp-point-2d__btn",
+				onClick: m
+			}, [...r[2] ||= [s("svg", { viewBox: "0 0 16 16" }, [s("path", { d: "M8 2 L8 14 M2 8 L14 8" }), s("circle", {
+				cx: "8",
+				cy: "8",
+				r: "1.5"
+			})], -1)]]), s("div", zi, [s("div", Bi, [s("div", Vi, [s("input", {
+				class: "vp-text__input",
+				type: "text",
+				value: l.value,
+				onBlur: f,
+				onKeydown: r[0] ||= ie((e) => e.target.blur(), ["enter"])
+			}, null, 40, Hi)]), s("div", Ui, [s("input", {
+				class: "vp-text__input",
+				type: "text",
+				value: u.value,
+				onBlur: p,
+				onKeydown: r[1] ||= ie((e) => e.target.blur(), ["enter"])
+			}, null, 40, Wi)])])])]), s("div", {
+				ref_key: "panelRef",
+				ref: a,
+				class: "vp-point-2d__picker-panel"
+			}, [s("div", Gi, [
+				s("canvas", {
+					ref_key: "canvasRef",
+					ref: o,
+					class: "vp-point-2d__canvas",
+					height: Ki,
+					width: Ki,
+					onPointerdown: T,
+					onPointermove: D,
+					onPointerup: ee,
+					onPointercancel: ee
+				}, null, 544),
+				s("div", {
+					class: "vp-point-2d__crosshair-h",
+					style: g({ top: S.value + "px" })
+				}, null, 4),
+				s("div", {
+					class: "vp-point-2d__crosshair-v",
+					style: g({ left: b.value + "px" })
+				}, null, 4)
+			])], 512)], 2)]),
+			_: 1
+		}, 8, ["label", "tooltip"]));
+	}
+});
+//#endregion
+export { vn as PButton, En as PCheckbox, Mi as PColor, on as PFolder, Ii as PGraph, W as PLabel, Nn as PMonitor, In as PMonitorMulti, hn as PNumber, qi as PPoint2d, An as PSelect, Sn as PSeparator, Rn as PSlider, Gn as PTab, dn as PText, xe as VPane, j as usePaneConfig };