@gkucmierz/nano-ui 1.6.0 → 1.7.2

package/dist/nano-ui.js

@@ -96,121 +96,200 @@ var k = new class {
 	}
 }();
 typeof window < "u" && (window.Analytics = k);
+var A = {
+	name: "@gkucmierz/nano-ui",
+	version: "1.7.2",
+	license: "ISC",
+	author: "Grzegorz Kućmierz",
+	description: "High-performance, minimal footprint Vue 3 UI library, interactive 3D charts, and directives.",
+	type: "module",
+	main: "./dist/nano-ui.js",
+	module: "./dist/nano-ui.js",
+	exports: {
+		".": { import: "./dist/nano-ui.js" },
+		"./style.css": "./dist/nano-ui.css",
+		"./nano-ui.css": "./dist/nano-ui.css",
+		"./dist/*": "./dist/*"
+	},
+	publishConfig: { access: "public" },
+	files: ["dist"],
+	scripts: {
+		dev: "vite",
+		prebuild: "node scripts/generate-icons.mjs",
+		build: "vite build",
+		"prebuild:app": "node scripts/generate-icons.mjs",
+		"build:app": "vite build -c vite.config.app.js && node scripts/prerender.mjs",
+		prerender: "node scripts/prerender.mjs",
+		icons: "node scripts/generate-icons.mjs",
+		"test:e2e": "playwright test"
+	},
+	peerDependencies: { vue: "^3.0.0" },
+	devDependencies: {
+		"@playwright/test": "^1.61.1",
+		"@vitejs/plugin-vue": "^6.0.5",
+		vite: "^8.0.12",
+		vue: "^3.4.0"
+	},
+	repository: {
+		type: "git",
+		url: "https://gitea.7u.pl/gkucmierz/nano-ui.git"
+	},
+	homepage: "https://gitea.7u.pl/gkucmierz/nano-ui",
+	keywords: [
+		"vue",
+		"ui",
+		"components",
+		"directives",
+		"ripple",
+		"nano",
+		"glassmorphism",
+		"chart",
+		"donut-chart",
+		"pie-chart",
+		"3d-chart",
+		"svg-chart",
+		"interactive-charts",
+		"scrubber",
+		"precision-scrubber",
+		"high-precision",
+		"slider",
+		"jog-dial"
+	],
+	dependencies: {
+		"@gkucmierz/analytics": "^1.0.1",
+		"vue-router": "^5.0.6"
+	}
+}, j = ({ storageKey: e = "nano-ui-theme", defaultTheme: t = "dark" } = {}) => {
+	if (typeof window > "u" || typeof document > "u") return t;
+	try {
+		let n = localStorage.getItem(e), r = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches, i = n === "light" || n === "dark" ? n : r ? "dark" : t || "light";
+		return i === "light" ? document.documentElement.setAttribute("data-theme", "light") : document.documentElement.removeAttribute("data-theme"), document.documentElement.style.colorScheme = i, document.documentElement.classList.add("preload"), i;
+	} catch {
+		return t;
+	}
+};
+j();
 //#endregion
 //#region src/directives/ripple.js
-var A = { mounted(e, t) {
+var M = { mounted(e, t) {
 	e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", function(n) {
 		let r = e.getBoundingClientRect(), i = n.clientX - r.left, a = n.clientY - r.top, o = document.createElement("span"), s = Math.max(r.width, r.height), c = s / 2;
 		o.style.width = o.style.height = `${s}px`, o.style.left = `${i - c}px`, o.style.top = `${a - c}px`, o.classList.add("ripple"), t.value && typeof t.value == "string" && (o.style.backgroundColor = t.value), o.addEventListener("animationend", () => o.remove(), { once: !0 }), e.appendChild(o);
 	});
-} }, j = _({
+} }, N = _({
 	isVisible: !1,
 	text: "",
 	customClass: "",
 	targetRect: null
 });
-function M(e, t) {
+function P(e, t) {
 	if (!t) return;
 	let n = typeof t == "object" ? t.text : t, r = typeof t == "object" && t.class || "";
 	if (!n) return;
 	e.hasAttribute("aria-label") || e.setAttribute("aria-label", n);
 	let i = e.getBoundingClientRect();
-	j.targetRect = {
+	N.targetRect = {
 		top: i.top,
 		left: i.left,
 		width: i.width,
 		bottom: i.bottom,
 		right: i.right
-	}, j.text = n, j.customClass = r, j.isVisible = !0;
+	}, N.text = n, N.customClass = r, N.isVisible = !0;
 }
-typeof window < "u" && window.addEventListener("scroll", N, {
+typeof window < "u" && window.addEventListener("scroll", F, {
 	passive: !0,
 	capture: !0
 });
-function N() {
-	j.isVisible = !1;
+function F() {
+	N.isVisible = !1;
 }
 //#endregion
 //#region src/directives/tooltip.js
-var P = {
+var I = {
 	mounted(e, t) {
 		e._tooltipOptions = t.value;
 		let n = null, r = !1;
 		e._handleMouseEnter = () => {
-			r || M(e, e._tooltipOptions);
+			r || P(e, e._tooltipOptions);
 		}, e._handleMouseLeave = () => {
-			r || N();
+			r || F();
 		}, e._handleFocus = () => {
-			r || M(e, e._tooltipOptions);
+			r || P(e, e._tooltipOptions);
 		}, e._handleBlur = () => {
-			r || N();
+			r || F();
 		}, e._handleTouchStart = () => {
 			r = !0, n && clearTimeout(n), n = setTimeout(() => {
-				M(e, e._tooltipOptions);
+				P(e, e._tooltipOptions);
 			}, 400);
 		}, e._handleTouchEnd = () => {
-			n && clearTimeout(n), N(), setTimeout(() => {
+			n && clearTimeout(n), F(), setTimeout(() => {
 				r = !1;
 			}, 500);
 		}, e._handleTouchCancel = () => {
-			n && clearTimeout(n), N(), setTimeout(() => {
+			n && clearTimeout(n), F(), setTimeout(() => {
 				r = !1;
 			}, 500);
 		}, e._handleContextMenu = (t) => {
 			let n = typeof e._tooltipOptions == "object" ? e._tooltipOptions.text : e._tooltipOptions;
-			r && j.isVisible && j.text === n && t.preventDefault();
+			r && N.isVisible && N.text === n && t.preventDefault();
 		}, e.addEventListener("mouseenter", e._handleMouseEnter), e.addEventListener("mouseleave", e._handleMouseLeave), e.addEventListener("focus", e._handleFocus), e.addEventListener("blur", e._handleBlur), e.addEventListener("touchstart", e._handleTouchStart, { passive: !0 }), e.addEventListener("touchend", e._handleTouchEnd), e.addEventListener("touchmove", e._handleTouchCancel, { passive: !0 }), e.addEventListener("touchcancel", e._handleTouchCancel), e.addEventListener("contextmenu", e._handleContextMenu);
 	},
 	updated(e, t) {
 		e._tooltipOptions = t.value;
 		let n = typeof t.value == "object" ? t.value.text : t.value;
-		j.isVisible && j.text !== n && (e.matches(":hover") || document.activeElement === e) && M(e, t.value);
+		N.isVisible && N.text !== n && (e.matches(":hover") || document.activeElement === e) && P(e, t.value);
 	},
 	unmounted(e) {
-		e._handleMouseEnter && (e.removeEventListener("mouseenter", e._handleMouseEnter), e.removeEventListener("mouseleave", e._handleMouseLeave), e.removeEventListener("focus", e._handleFocus), e.removeEventListener("blur", e._handleBlur), e.removeEventListener("touchstart", e._handleTouchStart), e.removeEventListener("touchend", e._handleTouchEnd), e.removeEventListener("touchmove", e._handleTouchCancel), e.removeEventListener("touchcancel", e._handleTouchCancel), e.removeEventListener("contextmenu", e._handleContextMenu)), N();
+		e._handleMouseEnter && (e.removeEventListener("mouseenter", e._handleMouseEnter), e.removeEventListener("mouseleave", e._handleMouseLeave), e.removeEventListener("focus", e._handleFocus), e.removeEventListener("blur", e._handleBlur), e.removeEventListener("touchstart", e._handleTouchStart), e.removeEventListener("touchend", e._handleTouchEnd), e.removeEventListener("touchmove", e._handleTouchCancel), e.removeEventListener("touchcancel", e._handleTouchCancel), e.removeEventListener("contextmenu", e._handleContextMenu)), F();
 	}
-}, F = (e, t) => {
+}, L = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, I = /* @__PURE__ */ F({
+}, R = /* @__PURE__ */ L({
 	__name: "GlobalTooltip",
 	setup(e) {
-		let t = v(null), n = v(0), r = v(0), i = v(0), a = v(!1);
-		return w(() => j.isVisible, async (e) => {
-			if (e) {
-				if (await d(), !t.value || !j.targetRect) return;
-				let e = j.targetRect, o = t.value.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight, l = e.top, u = c - e.bottom, f = e.top - o.height - 8;
-				a.value = !1, (f < 8 || l < o.height + 8 && u > l) && (f = e.bottom + 8, a.value = !0), f + o.height > c - 8 && (f = c - o.height - 8), f < 8 && (f = 8);
-				let p = e.left + e.width / 2, m = p - o.width / 2;
-				m < 8 ? m = 8 : m + o.width > s - 8 && (m = s - o.width - 8);
-				let h = p - (m + o.width / 2), g = o.width / 2 - 12;
-				h > g && (h = g), h < -g && (h = -g), i.value = h, n.value = m, r.value = f;
-			}
+		let t = v(null), n = v(0), r = v(0), i = v(0), a = v(!1), s = async () => {
+			if (!N.isVisible || !t.value || !N.targetRect || (await d(), !t.value || !N.targetRect)) return;
+			let e = N.targetRect, o = t.value, s = o.offsetWidth || o.getBoundingClientRect().width, c = o.offsetHeight || o.getBoundingClientRect().height, l = window.innerWidth, u = window.innerHeight, f = e.top, p = u - e.bottom, m = e.top - c - 8;
+			a.value = !1, (m < 8 || f < c + 8 && p > f) && (m = e.bottom + 8, a.value = !0), m + c > u - 8 && (m = Math.max(8, u - c - 8)), m < 8 && (m = 8);
+			let h = e.left + e.width / 2, g = h - s / 2, _ = Math.max(8, l - s - 8), v = Math.max(8, Math.min(_, g)), y = h - (v + s / 2), b = Math.max(0, s / 2 - 19);
+			i.value = Math.max(-b, Math.min(b, y)), n.value = v, r.value = m;
+		};
+		return w([
+			() => N.isVisible,
+			() => N.text,
+			() => N.targetRect
+		], async ([e]) => {
+			e && await s();
+		}, { deep: !0 }), m(() => {
+			window.addEventListener("resize", s, { passive: !0 });
+		}), h(() => {
+			window.removeEventListener("resize", s);
 		}), (e, s) => (g(), o("div", {
 			ref_key: "tooltipRef",
 			ref: t,
 			class: f([
 				"global-tooltip",
 				{
-					visible: C(j).isVisible,
+					visible: C(N).isVisible,
 					"tooltip-bottom": a.value
 				},
-				C(j).customClass
+				C(N).customClass
 			]),
 			style: p({
 				transform: `translate(${n.value}px, ${r.value}px)`,
 				"--arrow-offset": `${i.value}px`
 			})
-		}, S(C(j).text), 7));
+		}, S(C(N).text), 7));
 	}
-}, [["__scopeId", "data-v-e67d9c3b"]]), L = { class: "nano-modal-title" }, R = {
+}, [["__scopeId", "data-v-d7961ba4"]]), z = { class: "nano-modal-title" }, B = {
 	key: 1,
 	class: "nano-modal-body"
-}, z = {
+}, ee = {
 	key: 2,
 	class: "nano-modal-footer"
-}, B = { class: "nano-modal-actions" }, V = /* @__PURE__ */ F({
+}, te = { class: "nano-modal-actions" }, V = /* @__PURE__ */ L({
 	__name: "NanoModal",
 	props: {
 		visible: {
@@ -292,7 +371,7 @@ var P = {
 		"cancel"
 	],
 	setup(e, { emit: u }) {
-		let m = e, _ = u, y = v(null), C = v(null), k = v(null), A = v(null), j = v(null), M = v(null), N = v(!1), P = v(!1), F = 0, I = 0, V = 0, ee = 0, te = 0, ne = 0, re = 0, ie = 0, ae = r(() => {
+		let m = e, _ = u, y = v(null), C = v(null), k = v(null), A = v(null), j = v(null), M = v(null), N = v(!1), P = v(!1), F = 0, I = 0, L = 0, R = 0, V = 0, ne = 0, re = 0, ie = 0, ae = r(() => {
 			let e = {};
 			return j.value === null ? (e.maxWidth = typeof m.width == "number" ? `${m.width}px` : m.width, e.width = "100%") : (e.width = `${j.value}px`, e.maxWidth = "none"), M.value === null ? m.height !== "auto" && (e.height = typeof m.height == "number" ? `${m.height}px` : m.height) : (e.height = `${M.value}px`, e.maxHeight = "none"), k.value !== null && A.value !== null && (e.position = "absolute", e.left = `${k.value}px`, e.top = `${A.value}px`, e.transform = "none", e.margin = "0"), e;
 		}), oe = (e) => {
@@ -301,22 +380,22 @@ var P = {
 					let e = C.value.getBoundingClientRect();
 					k.value = e.left, A.value = e.top, j.value === null && (j.value = e.width), M.value === null && (M.value = e.height);
 				}
-				V = k.value, ee = A.value, window.addEventListener("mousemove", se), window.addEventListener("mouseup", ce);
+				L = k.value, R = A.value, window.addEventListener("mousemove", se), window.addEventListener("mouseup", ce);
 			}
 		}, se = (e) => {
 			if (!N.value) return;
-			let t = V + (e.clientX - F), n = ee + (e.clientY - I), r = window.innerWidth, i = window.innerHeight, a = C.value.getBoundingClientRect();
+			let t = L + (e.clientX - F), n = R + (e.clientY - I), r = window.innerWidth, i = window.innerHeight, a = C.value.getBoundingClientRect();
 			t < 0 && (t = 0), n < 0 && (n = 0), t + a.width > r && (t = r - a.width), n + a.height > i && (n = i - a.height), k.value = t, A.value = n;
 		}, ce = () => {
 			N.value = !1, window.removeEventListener("mousemove", se), window.removeEventListener("mouseup", ce);
 		}, le = (e) => {
 			if (!m.resizable) return;
-			e.preventDefault(), e.stopPropagation(), P.value = !0, te = e.clientX, ne = e.clientY;
+			e.preventDefault(), e.stopPropagation(), P.value = !0, V = e.clientX, ne = e.clientY;
 			let t = C.value.getBoundingClientRect();
 			k.value === null && (k.value = t.left, A.value = t.top), re = t.width, ie = t.height, window.addEventListener("mousemove", ue), window.addEventListener("mouseup", de);
 		}, ue = (e) => {
 			if (!P.value) return;
-			let t = re + (e.clientX - te), n = ie + (e.clientY - ne);
+			let t = re + (e.clientX - V), n = ie + (e.clientY - ne);
 			t < m.minWidth && (t = m.minWidth), n < m.minHeight && (n = m.minHeight);
 			let r = window.innerWidth - k.value, i = window.innerHeight - A.value;
 			t > r && (t = r), n > i && (n = i), j.value = t, M.value = n;
@@ -359,7 +438,7 @@ var P = {
 						key: 0,
 						class: f(["nano-modal-header", { "is-draggable": e.draggable }]),
 						onMousedown: oe
-					}, [b(r.$slots, "header", {}, () => [s("h2", L, S(e.title), 1)], !0), s("button", {
+					}, [b(r.$slots, "header", {}, () => [s("h2", z, S(e.title), 1)], !0), s("button", {
 						class: "nano-modal-close-btn",
 						onClick: O(pe, ["stop"]),
 						"aria-label": "Close",
@@ -385,8 +464,8 @@ var P = {
 						x2: "18",
 						y2: "18"
 					})], -1)]], 32)], 34)) : a("", !0),
-					e.showBody ? (g(), o("div", R, [b(r.$slots, "body", {}, void 0, !0)])) : a("", !0),
-					e.showFooter ? (g(), o("div", z, [b(r.$slots, "footer", {}, () => [s("div", B, [e.showCancel ? E((g(), o("button", {
+					e.showBody ? (g(), o("div", B, [b(r.$slots, "body", {}, void 0, !0)])) : a("", !0),
+					e.showFooter ? (g(), o("div", ee, [b(r.$slots, "footer", {}, () => [s("div", te, [e.showCancel ? E((g(), o("button", {
 						key: 0,
 						class: "nano-btn nano-btn-secondary",
 						onClick: ge
@@ -417,21 +496,21 @@ var P = {
 			})]);
 		};
 	}
-}, [["__scopeId", "data-v-52e94a15"]]), ee = ["viewBox"], te = { key: 0 }, ne = [
+}, [["__scopeId", "data-v-52e94a15"]]), ne = ["viewBox"], re = { key: 0 }, ie = [
 	"id",
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], re = ["stop-color"], ie = ["stop-color"], ae = [
+], ae = ["stop-color"], oe = ["stop-color"], se = [
 	"id",
 	"y1",
 	"y2"
-], oe = ["stop-color"], se = ["stop-color"], ce = [
+], ce = ["stop-color"], le = ["stop-color"], ue = [
 	"id",
 	"y1",
 	"y2"
-], le = ["stop-color"], ue = ["stop-color"], de = { key: 1 }, fe = ["x", "y"], pe = { key: 2 }, me = ["d", "fill"], he = ["d", "stroke"], ge = ["d", "fill"], _e = ["d", "fill"], ve = ["d", "fill"], ye = ["d", "stroke"], be = ["d", "fill"], xe = ["d", "stroke"], Se = ["d", "stroke-width"], Ce = ["transform"], we = ["font-size"], Te = ["font-size"], Ee = ["d", "fill"], De = ["d", "stroke"], Oe = ["d", "fill"], ke = ["d", "fill"], Ae = ["d", "fill"], je = ["d", "stroke"], Me = ["d", "fill"], Ne = ["d", "stroke"], Pe = ["d", "stroke-width"], Fe = ["onMouseenter", "onClick"], Ie = ["d"], Le = ["d"], Re = ["onMouseenter", "onClick"], ze = ["d", "stroke"], Be = ["y", "fill"], Ve = ["onMouseenter", "onClick"], He = ["d", "stroke"], Ue = ["y", "fill"], We = /* @__PURE__ */ F({
+], de = ["stop-color"], fe = ["stop-color"], pe = { key: 1 }, me = ["x", "y"], he = { key: 2 }, ge = ["d", "fill"], _e = ["d", "stroke"], ve = ["d", "fill"], ye = ["d", "fill"], be = ["d", "fill"], xe = ["d", "stroke"], Se = ["d", "fill"], Ce = ["d", "stroke"], we = ["d", "stroke-width"], Te = ["transform"], Ee = ["font-size"], De = ["font-size"], Oe = ["d", "fill"], ke = ["d", "stroke"], Ae = ["d", "fill"], je = ["d", "fill"], Me = ["d", "fill"], Ne = ["d", "stroke"], Pe = ["d", "fill"], Fe = ["d", "stroke"], Ie = ["d", "stroke-width"], Le = ["onMouseenter", "onClick"], Re = ["d"], ze = ["d"], Be = ["onMouseenter", "onClick"], Ve = ["d", "stroke"], He = ["y", "fill"], Ue = ["onMouseenter", "onClick"], We = ["d", "stroke"], Ge = ["y", "fill"], Ke = /* @__PURE__ */ L({
 	__name: "ThreeDDonutChart",
 	props: {
 		data: {
@@ -629,12 +708,12 @@ var P = {
 					percentage: n
 				};
 			});
-		}), V = r(() => A.value.reduce((e, t) => e + t.value, 0)), We = r(() => {
+		}), ee = r(() => A.value.reduce((e, t) => e + t.value, 0)), te = r(() => {
 			if (c.centerValue !== void 0 && c.centerValue !== "") return c.centerValue;
-			let e = at.value.find((e) => e.item.id === C.value);
-			return e ? c.centerValueFormatter ? c.centerValueFormatter(e.item.value, e.item) : L(e.item.value) : c.centerValueFormatter ? c.centerValueFormatter(V.value, null) : c.valueDecimals === void 0 ? Math.round(V.value) : L(V.value);
-		}), Ge = r(() => {
-			let e = at.value.find((e) => e.item.id === C.value);
+			let e = ot.value.find((e) => e.item.id === C.value);
+			return e ? c.centerValueFormatter ? c.centerValueFormatter(e.item.value, e.item) : L(e.item.value) : c.centerValueFormatter ? c.centerValueFormatter(ee.value, null) : c.valueDecimals === void 0 ? Math.round(ee.value) : L(ee.value);
+		}), V = r(() => {
+			let e = ot.value.find((e) => e.item.id === C.value);
 			return e ? R(e.item.name, 12).toUpperCase() : (c.centerLabel || "").toUpperCase();
 		}), Ke = (e, t = !1) => {
 			let n = new Map(A.value.map((e) => [e.id, e])), r = new Map(e.map((e) => [e.id, e])), i = [];
@@ -695,22 +774,22 @@ var P = {
 				l < o ? (o = l, a = e, s = u) : l === o && u < s && (a = e, s = u);
 			}
 			return a;
-		}, Je = r(() => c.autoRotate && B.value && B.value.length > 0 ? qe(B.value, c.rotationAngle) : c.rotationAngle), H = v(Je.value), Ye = v(!1), Xe = v(!1), Ze = null, U = c.is3D, W = v(c.isExpanded ? 380 : 60), G = v(c.isExpanded ? 160 : 60), K = v(c.isExpanded ? 180 : 48), Qe = v(c.isExpanded ? U ? 180 * c.slopeRatio : 180 : U ? 48 * c.slopeRatio : 48), q = v(c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness)), J = v(c.isExpanded ? U ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : U ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness)), $e = c.isExpanded && U ? 32 : 0, Y = v(U && c.slopeRatio > .5 ? $e * (2 - 2 * c.slopeRatio) : $e), et = v(c.isExpanded ? 760 : 120), tt = v(c.isExpanded ? 320 : 120), X = v(c.isExpanded && c.showLabels ? 1 : 0), nt = r(() => {
-			let e = (K.value - 48) / 132;
+		}, Je = r(() => c.autoRotate && B.value && B.value.length > 0 ? qe(B.value, c.rotationAngle) : c.rotationAngle), Ye = v(Je.value), Xe = v(!1), Ze = v(!1), Qe = null, H = c.is3D, U = v(c.isExpanded ? 380 : 60), W = v(c.isExpanded ? 160 : 60), G = v(c.isExpanded ? 180 : 48), $e = v(c.isExpanded ? H ? 180 * c.slopeRatio : 180 : H ? 48 * c.slopeRatio : 48), K = v(c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness)), q = v(c.isExpanded ? H ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : H ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness)), et = c.isExpanded && H ? 32 : 0, J = v(H && c.slopeRatio > .5 ? et * (2 - 2 * c.slopeRatio) : et), tt = v(c.isExpanded ? 760 : 120), nt = v(c.isExpanded ? 320 : 120), Y = v(c.isExpanded && c.showLabels ? 1 : 0), rt = r(() => {
+			let e = (G.value - 48) / 132;
 			return 13 + 6 * Math.max(0, Math.min(1, e));
-		}), rt = r(() => {
-			let e = (K.value - 48) / 132;
+		}), it = r(() => {
+			let e = (G.value - 48) / 132;
 			return 7 + 1.5 * Math.max(0, Math.min(1, e));
-		}), it = r(() => G.value - Y.value / 2), at = r(() => {
-			let e = A.value, t = V.value;
+		}), at = r(() => W.value - J.value / 2), ot = r(() => {
+			let e = A.value, t = ee.value;
 			if (t === 0) return [];
-			let n = [], r = H.value * Math.PI / 180, i = W.value;
-			G.value;
-			let a = K.value, o = Qe.value, s = q.value, l = J.value, u = Y.value, d = it.value, f = e.filter((e) => e.value > .001);
+			let n = [], r = Ye.value * Math.PI / 180, i = U.value;
+			W.value;
+			let a = G.value, o = $e.value, s = K.value, l = q.value, u = J.value, d = at.value, f = e.filter((e) => e.value > .001);
 			if (f.length === 1) {
 				let t = f[0], n = e.indexOf(t), r = F(t, n), p = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, m = "", h = "";
 				u > 0 && (m = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - a} ${d + u} A ${a} ${o} 0 0 0 ${i + a} ${d + u} Z`, h = `M ${i - s} ${d} A ${s} ${l} 0 0 1 ${i + s} ${d} L ${i + s} ${d + u} A ${s} ${l} 0 0 0 ${i - s} ${d + u} Z`);
-				let g = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} L ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, _ = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} M ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d}`, v = h, y = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} Z`, b = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d}`, x = m, S = H.value * Math.PI / 180 + Math.PI, C = i + a * Math.cos(S), w = d + o * Math.sin(S), T = i + (a + 25) * Math.cos(S), E = d + (o + 35 * c.slopeRatio) * Math.sin(S), D = i + (a + s) / 2 * Math.cos(S), O = d + (o + l) / 2 * Math.sin(S), k = a - s, A = o - l;
+				let g = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} L ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d} Z`, _ = `M ${i - a} ${d} A ${a} ${o} 0 0 1 ${i + a} ${d} M ${i + s} ${d} A ${s} ${l} 0 0 0 ${i - s} ${d}`, v = h, y = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} L ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d} Z`, b = `M ${i + a} ${d} A ${a} ${o} 0 0 1 ${i - a} ${d} M ${i - s} ${d} A ${s} ${l} 0 0 0 ${i + s} ${d}`, x = m, S = Ye.value * Math.PI / 180 + Math.PI, C = i + a * Math.cos(S), w = d + o * Math.sin(S), T = i + (a + 25) * Math.cos(S), E = d + (o + 35 * c.slopeRatio) * Math.sin(S), D = i + (a + s) / 2 * Math.cos(S), O = d + (o + l) / 2 * Math.sin(S), k = a - s, A = o - l;
 				return [{
 					item: t,
 					index: n,
@@ -804,7 +883,7 @@ var P = {
 					M ? (P = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} M ${x} ${S} A ${s} ${l} 0 ${T} 0 ${C} ${w}`, N || (P += ` L ${h} ${v}`)) : (P = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${x} ${S} A ${s} ${l} 0 ${T} 0 ${C} ${w}`, N || (P += " Z"));
 					let F = "", I = "", L = "", R = "", z = "", B = "";
 					u > 0 && (F = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u} Z`, I = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} L ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u} Z`, M ? (L = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} M ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u}`, N || (L += ` L ${h} ${v}`)) : (L = `M ${h} ${v} A ${a} ${o} 0 ${T} 1 ${y} ${b} L ${y} ${b + u} A ${a} ${o} 0 ${T} 0 ${h} ${v + u}`, N || (L += " Z")), M ? (R = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} M ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u}`, N || (R += ` L ${C} ${w}`)) : (R = `M ${C} ${w} A ${s} ${l} 0 ${T} 1 ${x} ${S} L ${x} ${S + u} A ${s} ${l} 0 ${T} 0 ${C} ${w + u}`, N || (R += " Z")), Math.abs(r - A) < .001 && (z = `M ${h} ${v} L ${C} ${w} L ${C} ${w + u} L ${h} ${v + u} Z`), Math.abs(p - j) < .001 && (B = `M ${y} ${b} L ${x} ${S} L ${x} ${S + u} L ${y} ${b + u} Z`));
-					let V = d + o * Math.sin(m), ee = i + a * Math.cos(g), te = d + o * Math.sin(g), ne = i + (a + 25) * Math.cos(g), re = d + (o + 35 * c.slopeRatio) * Math.sin(g), ie = i + (a + s) / 2 * Math.cos(g), ae = d + (o + l) / 2 * Math.sin(g), oe = a - s, se = o - l;
+					let ee = d + o * Math.sin(m), te = i + a * Math.cos(g), V = d + o * Math.sin(g), ne = i + (a + 25) * Math.cos(g), re = d + (o + 35 * c.slopeRatio) * Math.sin(g), ie = i + (a + s) / 2 * Math.cos(g), ae = d + (o + l) / 2 * Math.sin(g), oe = a - s, se = o - l;
 					n.push({
 						item: e,
 						index: f,
@@ -817,38 +896,38 @@ var P = {
 						topStrokePath: P,
 						outerWallStrokePath: L,
 						innerWallStrokePath: R,
-						midY: V,
+						midY: ee,
 						topPath: E,
 						outerWallPath: F,
 						innerWallPath: I,
 						startCutPath: z,
 						endCutPath: B,
-						x0: ee,
-						y0: te,
+						x0: te,
+						y0: V,
 						x1: ne,
 						y1: re,
 						topGradX1: ie - oe / 2,
 						topGradY1: ae - se / 2,
 						topGradX2: ie + oe / 2,
 						topGradY2: ae + se / 2,
-						wallY1: te,
-						wallY2: te + u
+						wallY1: V,
+						wallY2: V + u
 					});
 				}), r += p;
 			}), n.sort((e, t) => e.midY - t.midY);
-		}), ot = r(() => {
+		}), st = r(() => {
 			let e = /* @__PURE__ */ new Set(), t = [];
-			return at.value.forEach((n) => {
+			return ot.value.forEach((n) => {
 				e.has(n.item.id) || (e.add(n.item.id), t.push(n));
 			}), t;
-		}), st = (e) => C.value === e.item.id ? { transform: `translate(${10 * Math.cos(e.originalMidAngle)}px, ${10 * Math.sin(e.originalMidAngle)}px)` } : {}, ct = r(() => {
-			if (X.value <= .001) return {
+		}), ct = (e) => C.value === e.item.id ? { transform: `translate(${10 * Math.cos(e.originalMidAngle)}px, ${10 * Math.sin(e.originalMidAngle)}px)` } : {}, lt = r(() => {
+			if (Y.value <= .001) return {
 				left: [],
 				right: []
 			};
 			let e = [], t = [];
-			return ot.value.forEach((n) => {
-				let r = Math.cos(n.originalMidAngle) < 0, i = Math.sin(n.originalMidAngle) > 0, a = Y.value, o = n.y0 + (i ? a : 0), s = n.y1 + (i ? a : 0), c = {
+			return st.value.forEach((n) => {
+				let r = Math.cos(n.originalMidAngle) < 0, i = Math.sin(n.originalMidAngle) > 0, a = J.value, o = n.y0 + (i ? a : 0), s = n.y1 + (i ? a : 0), c = {
 					item: n.item,
 					index: n.index,
 					color: n.color,
@@ -866,88 +945,85 @@ var P = {
 				left: e,
 				right: t
 			};
-		}), Z = r(() => ct.value.left), Q = r(() => ct.value.right), $ = (e) => {
+		}), ut = r(() => lt.value.left), dt = r(() => lt.value.right), ft = (e) => {
 			let t = C.value === e.item.id, n = e.x0, r = e.y0, i = e.finalY;
 			if (t) {
 				let t = 10 * Math.cos(e.originalMidAngle || 0), a = 10 * Math.sin(e.originalMidAngle || 0);
 				n += t, r += a, i -= 5;
 			}
-			let a = n + 30 * Math.cos(e.originalMidAngle || 0), o = r + 30 * Math.sin(e.originalMidAngle || 0), s = e.isLeft, c = Math.sin(e.originalMidAngle || 0) < 0, l = W.value, u = K.value, d = s ? l - u - 15 : l + u + 15, f = s ? Math.min(d, a - 30) : Math.max(d, a + 30);
+			let a = n + 30 * Math.cos(e.originalMidAngle || 0), o = r + 30 * Math.sin(e.originalMidAngle || 0), s = e.isLeft, c = Math.sin(e.originalMidAngle || 0) < 0, l = U.value, u = G.value, d = s ? l - u - 15 : l + u + 15, f = s ? Math.min(d, a - 30) : Math.max(d, a + 30);
 			return `M ${n} ${r} C ${a} ${o}, ${f} ${c ? Math.min(o, i) : Math.max(o, i)}, ${s ? 90 : 670} ${i}`;
-		}, lt = (e = 450) => {
+		}, pt = (e = 450) => {
 			if (c.currentLowFxMode || c.immediate) {
 				A.value.forEach((e) => {
 					e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
-				}), A.value = A.value.filter((e) => e.targetValue > 0), H.value = Je.value;
+				}), A.value = A.value.filter((e) => e.targetValue > 0), Ye.value = Je.value;
 				let e = c.is3D;
-				W.value = c.isExpanded ? 380 : 60, G.value = c.isExpanded ? 160 : 60, K.value = c.isExpanded ? 180 : 48, Qe.value = c.isExpanded ? e ? 180 * c.slopeRatio : 180 : e ? 48 * c.slopeRatio : 48, q.value = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), J.value = c.isExpanded ? e ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : e ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness);
+				U.value = c.isExpanded ? 380 : 60, W.value = c.isExpanded ? 160 : 60, G.value = c.isExpanded ? 180 : 48, $e.value = c.isExpanded ? e ? 180 * c.slopeRatio : 180 : e ? 48 * c.slopeRatio : 48, K.value = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), q.value = c.isExpanded ? e ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : e ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness);
 				let t = c.isExpanded && e ? 32 : 0;
-				Y.value = e && c.slopeRatio > .5 ? t * (2 - 2 * c.slopeRatio) : t, et.value = c.isExpanded ? 760 : 120, tt.value = c.isExpanded ? 320 : 120, X.value = c.isExpanded && c.showLabels ? 1 : 0, Ye.value = !1;
+				J.value = e && c.slopeRatio > .5 ? t * (2 - 2 * c.slopeRatio) : t, tt.value = c.isExpanded ? 760 : 120, nt.value = c.isExpanded ? 320 : 120, Y.value = c.isExpanded && c.showLabels ? 1 : 0, Xe.value = !1;
 				return;
 			}
-			u && cancelAnimationFrame(u), Ye.value = !0;
-			let t = performance.now(), n = H.value, r = Je.value, i = W.value, a = G.value, o = K.value, s = Qe.value, l = q.value, d = J.value, f = Y.value, p = et.value, m = tt.value, h = X.value, g = c.is3D, _ = c.isExpanded ? 380 : 60, v = c.isExpanded ? 160 : 60, y = c.isExpanded ? 180 : 48, b = c.isExpanded ? g ? 180 * c.slopeRatio : 180 : g ? 48 * c.slopeRatio : 48, x = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), S = c.isExpanded ? g ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : g ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness), C = c.isExpanded && g ? 32 : 0, w = g && c.slopeRatio > .5 ? C * (2 - 2 * c.slopeRatio) : C, T = c.isExpanded ? 760 : 120, E = c.isExpanded ? 320 : 120, D = c.isExpanded && c.showLabels ? 1 : 0, O = (c) => {
+			u && cancelAnimationFrame(u), Xe.value = !0;
+			let t = performance.now(), n = Ye.value, r = Je.value, i = U.value, a = W.value, o = G.value, s = $e.value, l = K.value, d = q.value, f = J.value, p = tt.value, m = nt.value, h = Y.value, g = c.is3D, _ = c.isExpanded ? 380 : 60, v = c.isExpanded ? 160 : 60, y = c.isExpanded ? 180 : 48, b = c.isExpanded ? g ? 180 * c.slopeRatio : 180 : g ? 48 * c.slopeRatio : 48, x = c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness), S = c.isExpanded ? g ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : g ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness), C = c.isExpanded && g ? 32 : 0, w = g && c.slopeRatio > .5 ? C * (2 - 2 * c.slopeRatio) : C, T = c.isExpanded ? 760 : 120, E = c.isExpanded ? 320 : 120, D = c.isExpanded && c.showLabels ? 1 : 0, O = (c) => {
 				let g = c - t, C = Math.min(1, g / e), k = 1 - (1 - C) ** 3;
 				A.value.forEach((e) => {
 					e.value = e.startValue + (e.targetValue - e.startValue) * k;
 					let t = e.startPercentage === void 0 ? 0 : e.startPercentage, n = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
 					e.percentage = Math.round(t + (n - t) * k);
-				}), H.value = n + (r - n) * k, W.value = i + (_ - i) * k, G.value = a + (v - a) * k, K.value = o + (y - o) * k, Qe.value = s + (b - s) * k, q.value = l + (x - l) * k, J.value = d + (S - d) * k, Y.value = f + (w - f) * k, et.value = p + (T - p) * k, tt.value = m + (E - m) * k, X.value = h + (D - h) * k, C < 1 ? u = requestAnimationFrame(O) : (u = null, A.value.forEach((e) => {
+				}), Ye.value = n + (r - n) * k, U.value = i + (_ - i) * k, W.value = a + (v - a) * k, G.value = o + (y - o) * k, $e.value = s + (b - s) * k, K.value = l + (x - l) * k, q.value = d + (S - d) * k, J.value = f + (w - f) * k, tt.value = p + (T - p) * k, nt.value = m + (E - m) * k, Y.value = h + (D - h) * k, C < 1 ? u = requestAnimationFrame(O) : (u = null, A.value.forEach((e) => {
 					e.value = e.targetValue, e.percentage = e.targetPercentage === void 0 ? 0 : e.targetPercentage;
-				}), A.value = A.value.filter((e) => e.targetValue > 0), W.value = _, G.value = v, K.value = y, Qe.value = b, q.value = x, J.value = S, Y.value = w, et.value = T, tt.value = E, X.value = D, Ye.value = !1);
+				}), A.value = A.value.filter((e) => e.targetValue > 0), U.value = _, W.value = v, G.value = y, $e.value = b, K.value = x, q.value = S, J.value = w, tt.value = T, nt.value = E, Y.value = D, Xe.value = !1);
 			};
 			u = requestAnimationFrame(O);
-		}, ut = (e) => {
+		}, X = (e) => {
 			if (e.isSingleSlice) return !0;
-			let t = at.value, n = -1;
+			let t = ot.value, n = -1;
 			for (let r = t.length - 1; r >= 0; r--) if (t[r].item.id === e.item.id) {
 				n = r;
 				break;
 			}
 			return t.indexOf(e) === n;
 		};
-		return w(B, (e) => {
+		return Ke(B.value || [], !0), w(B, (e) => {
 			let t = c.immediate || c.currentLowFxMode;
-			Ke(e || [], t), t || lt();
-		}, {
-			deep: !0,
-			immediate: !0
-		}), w(() => c.rotationAngle, () => {
-			Xe.value = !0, Ze && clearTimeout(Ze), Ze = setTimeout(() => {
-				Xe.value = !1;
+			Ke(e || [], t), t || pt();
+		}, { deep: !0 }), w(() => c.rotationAngle, () => {
+			Ze.value = !0, Qe && clearTimeout(Qe), Qe = setTimeout(() => {
+				Ze.value = !1;
 			}, 100);
 		}), w(Je, (e) => {
-			c.immediate || c.currentLowFxMode ? H.value = e : lt();
+			c.immediate || c.currentLowFxMode ? Ye.value = e : pt();
 		}), w(() => c.isExpanded, () => {
 			d(() => {
-				lt();
+				pt();
 			});
 		}), w(() => c.is3D, () => {
 			d(() => {
-				lt();
+				pt();
 			});
 		}), w(() => c.showLabels, () => {
 			d(() => {
-				lt();
+				pt();
 			});
 		}), w(() => c.slopeRatio, (e) => {
 			if (c.is3D) {
-				Qe.value = c.isExpanded ? 180 * e : 48;
+				$e.value = c.isExpanded ? 180 * e : 48;
 				let t = c.isExpanded ? 180 : 48, n = c.isExpanded ? 180 * e : 48;
-				q.value = t * (1 - c.thickness), J.value = n * (1 - c.thickness);
+				K.value = t * (1 - c.thickness), q.value = n * (1 - c.thickness);
 				let r = c.isExpanded ? 32 : 0;
-				Y.value = e > .5 ? r * (2 - 2 * e) : r;
+				J.value = e > .5 ? r * (2 - 2 * e) : r;
 			}
 		}), w(() => c.thickness, (e) => {
 			let t = c.is3D, n = c.isExpanded ? 180 : 48, r = c.isExpanded ? t ? 180 * c.slopeRatio : 180 : t ? 48 * c.slopeRatio : 48;
-			q.value = n * (1 - e), J.value = r * (1 - e);
+			K.value = n * (1 - e), q.value = r * (1 - e);
 		}), w(() => c.hoveredItemId, (e) => {
 			_.value !== e && (_.value = e);
 		}), w(_, (e) => {
 			c.hoveredItemId !== e && l("update:hoveredItemId", e);
 		}), m(() => {
 			document.addEventListener("click", k), d(() => {
-				lt();
+				pt();
 			});
 		}), h(() => {
 			document.removeEventListener("click", k), u && cancelAnimationFrame(u);
@@ -960,14 +1036,14 @@ var P = {
 			ref: O,
 			class: f(["donut-canvas-wrapper", {
 				"is-expanded": t.isExpanded,
-				"no-transitions": Ye.value || Xe.value || t.immediate
+				"no-transitions": Xe.value || Ze.value || t.immediate
 			}])
 		}, [(g(), o("svg", {
-			viewBox: `0 0 ${et.value} ${tt.value}`,
+			viewBox: `0 0 ${tt.value} ${nt.value}`,
 			class: "items-svg-chart",
 			xmlns: "http://www.w3.org/2000/svg"
-		}, [B.value && B.value.length > 0 ? (g(), o("defs", te, [
-			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("linearGradient", {
+		}, [B.value && B.value.length > 0 ? (g(), o("defs", re, [
+			(g(!0), o(e, null, y(st.value, (e) => (g(), o("linearGradient", {
 				key: "top-grad-" + z(e.item.id),
 				id: "top-grad-" + z(e.item.id),
 				gradientUnits: "userSpaceOnUse",
@@ -978,11 +1054,11 @@ var P = {
 			}, [s("stop", {
 				offset: "0%",
 				"stop-color": P(e.color, 1.15)
-			}, null, 8, re), s("stop", {
+			}, null, 8, ae), s("stop", {
 				offset: "100%",
 				"stop-color": N(e.color, .85)
-			}, null, 8, ie)], 8, ne))), 128)),
-			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("linearGradient", {
+			}, null, 8, oe)], 8, ie))), 128)),
+			(g(!0), o(e, null, y(st.value, (e) => (g(), o("linearGradient", {
 				key: "outer-grad-" + z(e.item.id),
 				id: "outer-grad-" + z(e.item.id),
 				gradientUnits: "userSpaceOnUse",
@@ -993,11 +1069,11 @@ var P = {
 			}, [s("stop", {
 				offset: "0%",
 				"stop-color": N(e.color, .75)
-			}, null, 8, oe), s("stop", {
+			}, null, 8, ce), s("stop", {
 				offset: "100%",
 				"stop-color": N(e.color, .5)
-			}, null, 8, se)], 8, ae))), 128)),
-			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("linearGradient", {
+			}, null, 8, le)], 8, se))), 128)),
+			(g(!0), o(e, null, y(st.value, (e) => (g(), o("linearGradient", {
 				key: "inner-grad-" + z(e.item.id),
 				id: "inner-grad-" + z(e.item.id),
 				gradientUnits: "userSpaceOnUse",
@@ -1008,11 +1084,11 @@ var P = {
 			}, [s("stop", {
 				offset: "0%",
 				"stop-color": N(e.color, .6)
-			}, null, 8, le), s("stop", {
+			}, null, 8, de), s("stop", {
 				offset: "100%",
 				"stop-color": N(e.color, .4)
-			}, null, 8, ue)], 8, ce))), 128))
-		])) : a("", !0), !B.value || B.value.length === 0 ? (g(), o("g", de, [s("text", {
+			}, null, 8, fe)], 8, ue))), 128))
+		])) : a("", !0), !B.value || B.value.length === 0 ? (g(), o("g", pe, [s("text", {
 			x: t.isExpanded ? 380 : 60,
 			y: t.isExpanded ? 160 : 60,
 			fill: "#64748b",
@@ -1020,20 +1096,20 @@ var P = {
 			"font-family": "system-ui, -apple-system, sans-serif",
 			"text-anchor": "middle",
 			"dominant-baseline": "middle"
-		}, S(t.emptyText || "No data"), 9, fe)])) : (g(), o("g", pe, [
-			(g(!0), o(e, null, y(at.value.filter((e) => e.midY < it.value), (e) => (g(), o("g", {
+		}, S(t.emptyText || "No data"), 9, me)])) : (g(), o("g", he, [
+			(g(!0), o(e, null, y(ot.value.filter((e) => e.midY < at.value), (e) => (g(), o("g", {
 				key: "slice-sub-back-" + e.item.id + "-" + e.midAngle,
 				class: f(["slice-group-3d", {
 					"is-hovered": C.value === e.item.id,
 					"is-dimmed": C.value !== null && C.value !== e.item.id
 				}]),
-				style: p(st(e))
+				style: p(ct(e))
 			}, [
 				t.isExpanded && e.innerWallPath ? (g(), o("path", {
 					key: 0,
 					d: e.innerWallPath,
 					fill: `url(#inner-grad-${z(e.item.id)})`
-				}, null, 8, me)) : a("", !0),
+				}, null, 8, ge)) : a("", !0),
 				t.isExpanded && e.innerWallStrokePath ? (g(), o("path", {
 					key: 1,
 					d: e.innerWallStrokePath,
@@ -1041,22 +1117,22 @@ var P = {
 					stroke: `url(#inner-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, he)) : a("", !0),
+				}, null, 8, _e)) : a("", !0),
 				t.isExpanded && e.startCutPath ? (g(), o("path", {
 					key: 2,
 					d: e.startCutPath,
 					fill: N(e.color, .65)
-				}, null, 8, ge)) : a("", !0),
+				}, null, 8, ve)) : a("", !0),
 				t.isExpanded && e.endCutPath ? (g(), o("path", {
 					key: 3,
 					d: e.endCutPath,
 					fill: N(e.color, .75)
-				}, null, 8, _e)) : a("", !0),
+				}, null, 8, ye)) : a("", !0),
 				t.isExpanded && e.outerWallPath ? (g(), o("path", {
 					key: 4,
 					d: e.outerWallPath,
 					fill: `url(#outer-grad-${z(e.item.id)})`
-				}, null, 8, ve)) : a("", !0),
+				}, null, 8, be)) : a("", !0),
 				t.isExpanded && e.outerWallStrokePath ? (g(), o("path", {
 					key: 5,
 					d: e.outerWallStrokePath,
@@ -1064,65 +1140,65 @@ var P = {
 					stroke: `url(#outer-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, ye)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				}, null, 8, xe)) : a("", !0),
+				X(e) ? (g(), o("path", {
 					key: 6,
 					d: e.originalTopPath,
 					fill: `url(#top-grad-${z(e.item.id)})`
-				}, null, 8, be)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				}, null, 8, Se)) : a("", !0),
+				X(e) ? (g(), o("path", {
 					key: 7,
 					d: e.topStrokePath,
 					fill: "none",
 					stroke: `url(#top-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, xe)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				}, null, 8, Ce)) : a("", !0),
+				X(e) ? (g(), o("path", {
 					key: 8,
 					d: e.topStrokePath,
 					fill: "none",
 					stroke: "rgba(255, 255, 255, 0.16)",
 					"stroke-width": t.isExpanded ? .8 : .5,
 					"stroke-linejoin": "round"
-				}, null, 8, Se)) : a("", !0)
+				}, null, 8, we)) : a("", !0)
 			], 6))), 128)),
 			c.showCenterText ? (g(), o("g", {
 				key: 0,
-				transform: `translate(${W.value}, ${G.value})`,
+				transform: `translate(${U.value}, ${W.value})`,
 				class: "center-text-group"
 			}, [s("text", {
 				x: "0",
 				y: "-3",
 				class: "center-text-value",
-				"font-size": nt.value,
+				"font-size": rt.value,
 				"font-weight": "bold",
 				"font-family": "'JetBrains Mono', monospace",
 				"text-anchor": "middle",
 				"dominant-baseline": "middle"
-			}, S(We.value), 9, we), s("text", {
+			}, S(te.value), 9, Ee), s("text", {
 				x: "0",
 				y: "10",
 				class: "center-text-label",
-				"font-size": rt.value,
+				"font-size": it.value,
 				"font-family": "system-ui, -apple-system, sans-serif",
 				"font-weight": "600",
 				"text-anchor": "middle",
 				"dominant-baseline": "middle"
-			}, S(Ge.value), 9, Te)], 8, Ce)) : a("", !0),
-			(g(!0), o(e, null, y(at.value.filter((e) => e.midY >= it.value), (e) => (g(), o("g", {
+			}, S(V.value), 9, De)], 8, Te)) : a("", !0),
+			(g(!0), o(e, null, y(ot.value.filter((e) => e.midY >= at.value), (e) => (g(), o("g", {
 				key: "slice-sub-front-" + e.item.id + "-" + e.midAngle,
 				class: f(["slice-group-3d", {
 					"is-hovered": C.value === e.item.id,
 					"is-dimmed": C.value !== null && C.value !== e.item.id
 				}]),
-				style: p(st(e))
+				style: p(ct(e))
 			}, [
 				t.isExpanded && e.innerWallPath ? (g(), o("path", {
 					key: 0,
 					d: e.innerWallPath,
 					fill: `url(#inner-grad-${z(e.item.id)})`
-				}, null, 8, Ee)) : a("", !0),
+				}, null, 8, Oe)) : a("", !0),
 				t.isExpanded && e.innerWallStrokePath ? (g(), o("path", {
 					key: 1,
 					d: e.innerWallStrokePath,
@@ -1130,22 +1206,22 @@ var P = {
 					stroke: `url(#inner-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, De)) : a("", !0),
+				}, null, 8, ke)) : a("", !0),
 				t.isExpanded && e.startCutPath ? (g(), o("path", {
 					key: 2,
 					d: e.startCutPath,
 					fill: N(e.color, .65)
-				}, null, 8, Oe)) : a("", !0),
+				}, null, 8, Ae)) : a("", !0),
 				t.isExpanded && e.endCutPath ? (g(), o("path", {
 					key: 3,
 					d: e.endCutPath,
 					fill: N(e.color, .75)
-				}, null, 8, ke)) : a("", !0),
+				}, null, 8, je)) : a("", !0),
 				t.isExpanded && e.outerWallPath ? (g(), o("path", {
 					key: 4,
 					d: e.outerWallPath,
 					fill: `url(#outer-grad-${z(e.item.id)})`
-				}, null, 8, Ae)) : a("", !0),
+				}, null, 8, Me)) : a("", !0),
 				t.isExpanded && e.outerWallStrokePath ? (g(), o("path", {
 					key: 5,
 					d: e.outerWallStrokePath,
@@ -1153,30 +1229,30 @@ var P = {
 					stroke: `url(#outer-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, je)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				}, null, 8, Ne)) : a("", !0),
+				X(e) ? (g(), o("path", {
 					key: 6,
 					d: e.originalTopPath,
 					fill: `url(#top-grad-${z(e.item.id)})`
-				}, null, 8, Me)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				}, null, 8, Pe)) : a("", !0),
+				X(e) ? (g(), o("path", {
 					key: 7,
 					d: e.topStrokePath,
 					fill: "none",
 					stroke: `url(#top-grad-${z(e.item.id)})`,
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
-				}, null, 8, Ne)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				}, null, 8, Fe)) : a("", !0),
+				X(e) ? (g(), o("path", {
 					key: 8,
 					d: e.topStrokePath,
 					fill: "none",
 					stroke: "rgba(255, 255, 255, 0.16)",
 					"stroke-width": t.isExpanded ? .8 : .5,
 					"stroke-linejoin": "round"
-				}, null, 8, Pe)) : a("", !0)
+				}, null, 8, Ie)) : a("", !0)
 			], 6))), 128)),
-			(g(!0), o(e, null, y(ot.value, (e) => (g(), o("g", {
+			(g(!0), o(e, null, y(st.value, (e) => (g(), o("g", {
 				key: "hover-trigger-" + e.item.id,
 				class: "hover-trigger-group",
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" }),
@@ -1186,18 +1262,18 @@ var P = {
 			}, [s("path", {
 				d: e.hoverPath || e.originalTopPath,
 				fill: "transparent"
-			}, null, 8, Ie), e.originalOuterWallPath ? (g(), o("path", {
+			}, null, 8, Re), e.originalOuterWallPath ? (g(), o("path", {
 				key: 0,
 				d: e.originalOuterWallPath,
 				fill: "transparent"
-			}, null, 8, Le)) : a("", !0)], 44, Fe))), 128)),
+			}, null, 8, ze)) : a("", !0)], 44, Le))), 128)),
 			s("g", {
 				class: "labels-layer",
 				style: p({
-					opacity: X.value,
-					pointerEvents: X.value > .01 ? "auto" : "none"
+					opacity: Y.value,
+					pointerEvents: Y.value > .01 ? "auto" : "none"
 				})
-			}, [(g(!0), o(e, null, y(Z.value, (e, t) => (g(), o("g", {
+			}, [(g(!0), o(e, null, y(ut.value, (e, t) => (g(), o("g", {
 				key: "label-left-" + e.item.id,
 				class: f(["label-group", {
 					"is-hovered": C.value === e.item.id,
@@ -1208,11 +1284,11 @@ var P = {
 				onClick: (t) => E(e.item.id),
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" })
 			}, [s("path", {
-				d: $(e),
+				d: ft(e),
 				fill: "none",
 				stroke: e.color,
 				"stroke-width": "1.2"
-			}, null, 8, ze), s("text", {
+			}, null, 8, Ve), s("text", {
 				x: "85",
 				y: e.finalY,
 				fill: e.color,
@@ -1222,7 +1298,7 @@ var P = {
 				"text-anchor": "end",
 				"dominant-baseline": "middle",
 				style: p(C.value === e.item.id ? "transform: translate(0, -5px);" : "")
-			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, Be)], 46, Re))), 128)), (g(!0), o(e, null, y(Q.value, (e, t) => (g(), o("g", {
+			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, He)], 46, Be))), 128)), (g(!0), o(e, null, y(dt.value, (e, t) => (g(), o("g", {
 				key: "label-right-" + e.item.id,
 				class: f(["label-group", {
 					"is-hovered": C.value === e.item.id,
@@ -1233,11 +1309,11 @@ var P = {
 				onClick: (t) => E(e.item.id),
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" })
 			}, [s("path", {
-				d: $(e),
+				d: ft(e),
 				fill: "none",
 				stroke: e.color,
 				"stroke-width": "1.2"
-			}, null, 8, He), s("text", {
+			}, null, 8, We), s("text", {
 				x: "675",
 				y: e.finalY,
 				fill: e.color,
@@ -1247,21 +1323,21 @@ var P = {
 				"text-anchor": "start",
 				"dominant-baseline": "middle",
 				style: p(C.value === e.item.id ? "transform: translate(0, -5px);" : "")
-			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, Ue)], 46, Ve))), 128))], 4)
-		]))], 8, ee))], 2));
+			}, S(R(e.item.name, 24)) + " " + S(L(e.item.value)) + " " + S(e.item.unit || "") + " (" + S(e.item.percentage) + "%) ", 13, Ge)], 46, Ue))), 128))], 4)
+		]))], 8, ne))], 2));
 	}
-}, [["__scopeId", "data-v-acd0447d"]]), Ge = { class: "nano-scrub-label" }, Ke = {
+}, [["__scopeId", "data-v-6b25a1b8"]]), qe = { class: "nano-scrub-label" }, Je = {
 	key: 0,
 	class: "nano-scrub-overlay"
-}, qe = {
+}, Ye = {
 	key: 1,
 	class: "nano-scrub-svg-line"
-}, Je = [
+}, Xe = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], H = { class: "nano-scrub-popup-val" }, Ye = { class: "nano-scrub-popup-res" }, Xe = /* @__PURE__ */ F(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+], Ze = { class: "nano-scrub-popup-val" }, Qe = { class: "nano-scrub-popup-res" }, H = /* @__PURE__ */ L(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
 	__name: "PrecisionScrubber",
 	props: {
 		modelValue: {
@@ -1339,7 +1415,7 @@ var P = {
 		}, r.$attrs), [s("div", {
 			class: "nano-scrub-progress",
 			style: p({ width: O.value + "%" })
-		}, null, 4), s("span", Ge, S(n.label), 1)], 16), (g(), i(t, { to: "body" }, [m.value ? (g(), o("div", Ke, [
+		}, null, 4), s("span", qe, S(n.label), 1)], 16), (g(), i(t, { to: "body" }, [m.value ? (g(), o("div", Je, [
 			h.value ? (g(), o("div", {
 				key: 0,
 				class: "nano-scrub-anchor",
@@ -1348,7 +1424,7 @@ var P = {
 					top: x.value + "px"
 				})
 			}, null, 4)) : a("", !0),
-			h.value ? (g(), o("svg", qe, [s("line", {
+			h.value ? (g(), o("svg", Ye, [s("line", {
 				x1: b.value,
 				y1: x.value,
 				x2: w.value,
@@ -1357,7 +1433,7 @@ var P = {
 				"stroke-dasharray": "4,4",
 				"stroke-width": "1.5",
 				opacity: "0.6"
-			}, null, 8, Je)])) : a("", !0),
+			}, null, 8, Xe)])) : a("", !0),
 			s("div", {
 				class: "nano-scrub-popup",
 				style: p({
@@ -1366,21 +1442,21 @@ var P = {
 				})
 			}, [
 				c[0] ||= s("div", { class: "nano-scrub-popup-title" }, "Scrubbing Mode", -1),
-				s("div", H, S(k.value), 1),
-				s("div", Ye, S(E.value), 1)
+				s("div", Ze, S(k.value), 1),
+				s("div", Qe, S(E.value), 1)
 			], 4)
 		])) : a("", !0)]))], 64));
 	}
-}), [["__scopeId", "data-v-21b41bc4"]]), Ze = { class: "header-inner" }, U = {
+}), [["__scopeId", "data-v-21b41bc4"]]), U = { class: "header-inner" }, W = {
 	key: 0,
 	class: "header-left"
-}, W = {
+}, G = {
 	key: 1,
 	class: "header-center"
-}, G = {
+}, $e = {
 	key: 2,
 	class: "header-right"
-}, K = /* @__PURE__ */ F({
+}, K = /* @__PURE__ */ L({
 	__name: "MutatingHeader",
 	props: {
 		threshold: {
@@ -1451,39 +1527,39 @@ var P = {
 				"--floating-margin": e.floatingMargin,
 				"--floating-radius": e.floatingRadius
 			})
-		}, [s("div", Ze, [
-			t.$slots.left ? (g(), o("div", U, [b(t.$slots, "left", { isStuck: l.value }, void 0, !0)])) : a("", !0),
-			t.$slots.center ? (g(), o("div", W, [b(t.$slots, "center", { isStuck: l.value }, void 0, !0)])) : a("", !0),
-			t.$slots.right ? (g(), o("div", G, [b(t.$slots, "right", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+		}, [s("div", U, [
+			t.$slots.left ? (g(), o("div", W, [b(t.$slots, "left", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+			t.$slots.center ? (g(), o("div", G, [b(t.$slots, "center", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+			t.$slots.right ? (g(), o("div", $e, [b(t.$slots, "right", { isStuck: l.value }, void 0, !0)])) : a("", !0),
 			!t.$slots.left && !t.$slots.center && !t.$slots.right ? b(t.$slots, "default", {
 				key: 3,
 				isStuck: l.value
 			}, void 0, !0) : a("", !0)
 		])], 6));
 	}
-}, [["__scopeId", "data-v-fd47d0d0"]]), Qe = [
+}, [["__scopeId", "data-v-fd47d0d0"]]), q = [
 	"viewBox",
 	"width",
 	"height"
-], q = ["points"], J = ["points"], $e = ["points"], Y = ["points"], et = [
+], et = ["points"], J = ["points"], tt = ["points"], nt = ["points"], Y = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], tt = ["x", "y"], X = [
+], rt = ["x", "y"], it = [
 	"points",
 	"fill",
 	"stroke",
 	"opacity"
-], nt = [
+], at = [
 	"points",
 	"fill",
 	"stroke"
-], rt = [
+], ot = [
 	"cx",
 	"cy",
 	"fill"
-], it = /* @__PURE__ */ F({
+], st = /* @__PURE__ */ L({
 	__name: "TopologyRadar",
 	props: {
 		size: {
@@ -1552,7 +1628,7 @@ var P = {
 				fill: "var(--nano-radar-grid-bg, rgba(15,23,42,0.8))",
 				stroke: "var(--nano-radar-grid-stroke, rgba(255,255,255,0.1))",
 				"stroke-width": "1"
-			}, null, 8, q),
+			}, null, 8, et),
 			s("polygon", {
 				points: f(.75),
 				fill: "none",
@@ -1564,13 +1640,13 @@ var P = {
 				fill: "none",
 				stroke: "var(--nano-radar-grid-subtle, rgba(255,255,255,0.05))",
 				"stroke-width": "1"
-			}, null, 8, $e),
+			}, null, 8, tt),
 			s("polygon", {
 				points: f(.25),
 				fill: "none",
 				stroke: "var(--nano-radar-grid-subtle, rgba(255,255,255,0.05))",
 				"stroke-width": "1"
-			}, null, 8, Y),
+			}, null, 8, nt),
 			(g(!0), o(e, null, y(t.labels, (e, n) => (g(), o("line", {
 				key: "axis-" + n,
 				x1: t.size / 2,
@@ -1579,7 +1655,7 @@ var P = {
 				y2: d(100, n).y,
 				stroke: "var(--nano-radar-grid-stroke, rgba(255,255,255,0.1))",
 				"stroke-width": "1"
-			}, null, 8, et))), 128)),
+			}, null, 8, Y))), 128)),
 			(g(!0), o(e, null, y(t.labels, (e, t) => (g(), o("text", {
 				key: "label-" + t,
 				x: d(115, t).x,
@@ -1590,7 +1666,7 @@ var P = {
 				"font-weight": "bold",
 				"text-anchor": "middle",
 				"dominant-baseline": "middle"
-			}, S(e), 9, tt))), 128)),
+			}, S(e), 9, rt))), 128)),
 			(g(!0), o(e, null, y(t.history, (e, n) => (g(), o("polygon", {
 				key: "hist-" + n,
 				points: m(e),
@@ -1598,7 +1674,7 @@ var P = {
 				stroke: t.color,
 				"stroke-width": 1,
 				opacity: .1 + n / Math.max(1, t.history.length) * .4
-			}, null, 8, X))), 128)),
+			}, null, 8, it))), 128)),
 			t.history.length > 0 ? (g(), o("polygon", {
 				key: 0,
 				points: m(t.history[t.history.length - 1]),
@@ -1606,7 +1682,7 @@ var P = {
 				stroke: t.color,
 				"stroke-width": "2.5",
 				style: { filter: "drop-shadow(0 0 8px rgba(0, 229, 255, 0.5))" }
-			}, null, 8, nt)) : a("", !0),
+			}, null, 8, at)) : a("", !0),
 			t.history.length > 0 ? (g(!0), o(e, { key: 1 }, y(t.history[t.history.length - 1], (e, n) => (g(), o("circle", {
 				key: "pt-" + n,
 				cx: d(e, n).x,
@@ -1614,19 +1690,19 @@ var P = {
 				r: "3",
 				fill: t.color,
 				style: { filter: "drop-shadow(0 0 5px rgba(0, 229, 255, 0.8))" }
-			}, null, 8, rt))), 128)) : a("", !0)
-		], 8, Qe))], 4));
+			}, null, 8, ot))), 128)) : a("", !0)
+		], 8, q))], 4));
 	}
-}, [["__scopeId", "data-v-bb4bd598"]]), at = ["for"], ot = [
+}, [["__scopeId", "data-v-bb4bd598"]]), ct = ["for"], lt = [
 	"checked",
 	"disabled",
 	"name",
 	"id",
 	"aria-checked"
-], st = {
+], ut = {
 	key: 0,
 	class: "nano-switch-label"
-}, ct = /* @__PURE__ */ F({
+}, dt = /* @__PURE__ */ L({
 	__name: "NanoSwitch",
 	props: {
 		modelValue: {
@@ -1708,12 +1784,351 @@ var P = {
 				onChange: p,
 				role: "switch",
 				"aria-checked": u.value ? "mixed" : d.value
-			}, null, 40, ot),
+			}, null, 40, lt),
 			n[0] ||= s("div", { class: "nano-switch-slider" }, null, -1),
-			e.label || t.$slots.default ? (g(), o("span", st, [b(t.$slots, "default", {}, () => [c(S(e.label), 1)], !0)])) : a("", !0)
-		], 10, at));
+			e.label || t.$slots.default ? (g(), o("span", ut, [b(t.$slots, "default", {}, () => [c(S(e.label), 1)], !0)])) : a("", !0)
+		], 10, ct));
 	}
-}, [["__scopeId", "data-v-50b63887"]]), Z = {
+}, [["__scopeId", "data-v-50b63887"]]), ft = { class: "rotator-fallback" }, pt = { class: "fallback-angle" }, X = /* @__PURE__ */ L({
+	__name: "KineticRotator",
+	props: {
+		modelValue: {
+			type: Number,
+			default: 0
+		},
+		duration: {
+			type: Number,
+			default: 1e3
+		},
+		speedMultiplier: {
+			type: Number,
+			default: 1
+		},
+		step: {
+			type: Number,
+			default: 90
+		},
+		shortestPath: {
+			type: Boolean,
+			default: !0
+		},
+		timingMode: {
+			type: String,
+			default: "proportional",
+			validator: (e) => ["proportional", "fixed"].includes(e)
+		},
+		inertiaThreshold: {
+			type: Number,
+			default: .25
+		},
+		size: {
+			type: [Number, String],
+			default: 260
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"settled",
+		"frame"
+	],
+	setup(e, { expose: t, emit: n }) {
+		let i = e, a = n, c = (e, t) => (t - 2) * e * e * e + (3 - 2 * t) * e * e + t * e, l = (e, t) => 3 * (t - 2) * e * e + 2 * (3 - 2 * t) * e + t, u = (e, t) => 6 * (t - 2) * e + 2 * (3 - 2 * t), d = (e) => e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2, f = (e) => e < .5 ? 12 * e * e : 3 * (-2 * e + 2) ** 2, _ = (e) => e < .5 ? 24 * e : 24 * e - 24, y = (e) => (e % 360 + 360) % 360, x = (e, t) => {
+			let n = y(e);
+			return ((y(t) - n + 180) % 360 + 360) % 360 - 180;
+		}, C = v(i.modelValue), T = v(i.modelValue), E = v(0), D = v(0), O = v(!1), k = v(1), A = v(0), j = null, M = null, N = r(() => {
+			let e = typeof i.size == "number" ? `${i.size}px` : i.size;
+			return {
+				width: e,
+				height: e
+			};
+		}), P = (e) => {
+			if (!j) return {
+				angle: C.value,
+				vel: 0,
+				acc: 0,
+				p: 1
+			};
+			let t = e - j.startTime, n = Math.max(0, Math.min(1, t / j.duration)), r = j.v0 === void 0 ? d(n) : c(n, j.v0), i = j.startAngle + (j.targetAngle - j.startAngle) * r, a = j.v0 === void 0 ? f(n) : l(n, j.v0), o = j.targetAngle - j.startAngle;
+			return {
+				angle: i,
+				vel: o * a / j.duration * 1e3,
+				acc: o * (j.v0 === void 0 ? _(n) : u(n, j.v0)) / (j.duration * j.duration) * 1e6,
+				p: n
+			};
+		}, F = (e) => {
+			if (!j) {
+				O.value = !1, E.value = 0, D.value = 0, k.value = 1;
+				return;
+			}
+			let { angle: t, vel: n, acc: r, p: i } = P(e);
+			if (C.value = t, E.value = n, D.value = r, k.value = i, a("frame", {
+				currentAngle: t,
+				targetAngle: j.targetAngle,
+				velocity: n,
+				acceleration: r,
+				progress: i,
+				isMoving: !0,
+				v0: j.v0 || 0,
+				timestamp: e
+			}), i < 1) M = requestAnimationFrame(F);
+			else {
+				C.value = j.targetAngle, E.value = 0, D.value = 0, k.value = 1, O.value = !1;
+				let t = j.targetAngle;
+				j = null, a("update:modelValue", t), a("settled", {
+					angle: t,
+					normalizedAngle: y(t)
+				}), a("frame", {
+					currentAngle: t,
+					targetAngle: t,
+					velocity: 0,
+					acceleration: 0,
+					progress: 1,
+					isMoving: !1,
+					v0: 0,
+					timestamp: e
+				});
+			}
+		}, I = (e, { isRelative: t = !1, delta: n = 0 } = {}) => {
+			let r = performance.now(), o = C.value, s = E.value;
+			if (j && O.value) {
+				let e = P(r);
+				o = e.angle, s = e.vel;
+			}
+			let c = e;
+			if (i.shortestPath) {
+				let r = 0;
+				if (t) {
+					let e = T.value;
+					r = y(e + n);
+				} else r = y(e);
+				let a = x(o, r);
+				if (i.inertiaThreshold > 0 && Math.abs(s) > 20 && (s > 0 && a < 0 || s < 0 && a > 0)) {
+					let e = a > 0 ? a - 360 : a + 360;
+					360 - 2 * Math.abs(a) < Math.abs(s) * i.inertiaThreshold && (a = e);
+				}
+				c = o + a;
+			}
+			T.value = c, a("change", c);
+			let l = c - o;
+			if (Math.abs(l) < .05) {
+				C.value = c, E.value = 0, D.value = 0, k.value = 1, O.value = !1, j = null, a("update:modelValue", c);
+				return;
+			}
+			let u = Math.max(.01, i.speedMultiplier), d = i.timingMode === "fixed" ? i.duration / u : i.duration / u * Math.max(.2, Math.abs(l) / i.step), f = 0;
+			Math.abs(l) > .01 && Math.abs(s) > .1 && (f = s / 1e3 * d / l, f = Math.max(-2.5, Math.min(2.5, f))), A.value = f, O.value = !0, j = {
+				startAngle: o,
+				targetAngle: c,
+				startTime: r,
+				duration: d,
+				v0: f
+			}, M && cancelAnimationFrame(M), M = requestAnimationFrame(F);
+		}, L = (e) => {
+			I(T.value + e, {
+				isRelative: !0,
+				delta: e
+			});
+		}, R = (e) => {
+			I(e, { isRelative: !1 });
+		}, z = () => {
+			M && cancelAnimationFrame(M), j = null, C.value = 0, T.value = 0, E.value = 0, D.value = 0, k.value = 1, O.value = !1, A.value = 0, a("update:modelValue", 0), a("settled", {
+				angle: 0,
+				normalizedAngle: 0
+			});
+		}, B = () => {
+			if (!j || !O.value) return;
+			let e = performance.now(), { p: t } = P(e);
+			if (t >= 1) return;
+			let n = j.targetAngle - j.startAngle, r = Math.max(.01, i.speedMultiplier), a = i.timingMode === "fixed" ? i.duration / r : i.duration / r * Math.max(.2, Math.abs(n) / i.step);
+			j.duration = a, j.startTime = e - t * a;
+		};
+		return w([
+			() => i.duration,
+			() => i.speedMultiplier,
+			() => i.timingMode
+		], B), w(() => i.modelValue, (e) => {
+			Math.abs(e - T.value) > .01 && R(e);
+		}), m(() => {
+			C.value = i.modelValue, T.value = i.modelValue;
+		}), h(() => {
+			M && cancelAnimationFrame(M);
+		}), t({
+			currentAngle: C,
+			targetAngle: T,
+			velocity: E,
+			acceleration: D,
+			isMoving: O,
+			progress: k,
+			v0: A,
+			rotateBy: L,
+			setAngle: R,
+			reset: z,
+			updateActiveDuration: B
+		}), (e, t) => (g(), o("div", {
+			class: "nano-kinetic-rotator",
+			style: p(N.value)
+		}, [s("div", {
+			class: "rotator-tile",
+			style: p({ transform: `rotate(${C.value}deg)` })
+		}, [b(e.$slots, "default", {
+			currentAngle: C.value,
+			targetAngle: T.value,
+			normalizedAngle: y(C.value),
+			velocity: E.value,
+			acceleration: D.value,
+			isMoving: O.value,
+			progress: k.value
+		}, () => [s("div", ft, [t[0] ||= s("span", { class: "fallback-icon" }, "⚡", -1), s("span", pt, S(Math.round(y(C.value))) + "°", 1)])], !0)], 4)], 4));
+	}
+}, [["__scopeId", "data-v-abbbb111"]]), mt = {
+	key: 0,
+	class: "code-block-header"
+}, ht = { class: "code-block-title-group" }, gt = {
+	key: 0,
+	class: "code-block-title"
+}, _t = {
+	key: 1,
+	class: "code-block-lang"
+}, vt = { class: "code-block-actions" }, yt = ["aria-label"], bt = {
+	key: 0,
+	class: "action-svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, xt = {
+	key: 1,
+	class: "action-svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, St = ["aria-label"], Ct = {
+	key: 0,
+	class: "action-svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, wt = {
+	key: 1,
+	class: "action-svg success-icon",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2.5",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, Tt = /* @__PURE__ */ L({
+	__name: "NanoCodeBlock",
+	props: {
+		title: {
+			type: String,
+			default: ""
+		},
+		lang: {
+			type: String,
+			default: ""
+		},
+		code: {
+			type: String,
+			default: ""
+		},
+		defaultWrap: {
+			type: Boolean,
+			default: !1
+		},
+		allowWrap: {
+			type: Boolean,
+			default: !0
+		},
+		allowCopy: {
+			type: Boolean,
+			default: !0
+		},
+		maxHeight: {
+			type: [Number, String],
+			default: null
+		}
+	},
+	emits: ["update:wrap", "copied"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, l = v(n.defaultWrap), u = v(!1), d = v(null), m = null, h = () => {
+			l.value = !l.value, i("update:wrap", l.value);
+		}, _ = async () => {
+			let e = n.code;
+			if (!e && d.value && (e = d.value.innerText || d.value.textContent || ""), e) try {
+				if (navigator.clipboard && navigator.clipboard.writeText) await navigator.clipboard.writeText(e);
+				else {
+					let t = document.createElement("textarea");
+					t.value = e, t.style.position = "fixed", t.style.opacity = "0", document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
+				}
+				u.value = !0, i("copied", e), m && clearTimeout(m), m = setTimeout(() => {
+					u.value = !1;
+				}, 2e3);
+			} catch (e) {
+				console.error("Failed to copy code snippet:", e);
+			}
+		}, y = r(() => {
+			if (n.maxHeight) return typeof n.maxHeight == "number" ? `${n.maxHeight}px` : n.maxHeight;
+		});
+		return (t, n) => {
+			let r = x("tooltip");
+			return g(), o("div", { class: f(["nano-code-block", { "is-wrapped": l.value }]) }, [e.title || e.lang || t.$slots.header || e.allowWrap || e.allowCopy ? (g(), o("div", mt, [s("div", ht, [b(t.$slots, "header", {}, () => [e.title ? (g(), o("span", gt, S(e.title), 1)) : a("", !0), e.lang ? (g(), o("span", _t, S(e.lang), 1)) : a("", !0)], !0)]), s("div", vt, [e.allowWrap ? E((g(), o("button", {
+				key: 0,
+				type: "button",
+				class: f(["code-action-btn", { active: l.value }]),
+				onClick: h,
+				"aria-label": l.value ? "Unwrap lines (Scroll mode)" : "Wrap lines (Word-wrap mode)"
+			}, [l.value ? (g(), o("svg", xt, [...n[1] ||= [
+				s("line", {
+					x1: "3",
+					y1: "6",
+					x2: "21",
+					y2: "6"
+				}, null, -1),
+				s("line", {
+					x1: "3",
+					y1: "12",
+					x2: "21",
+					y2: "12"
+				}, null, -1),
+				s("line", {
+					x1: "3",
+					y1: "18",
+					x2: "21",
+					y2: "18"
+				}, null, -1)
+			]])) : (g(), o("svg", bt, [...n[0] ||= [s("polyline", { points: "9 10 4 15 9 20" }, null, -1), s("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }, null, -1)]]))], 10, yt)), [[r, l.value ? "Unwrap lines (Scroll)" : "Wrap lines"]]) : a("", !0), e.allowCopy ? E((g(), o("button", {
+				key: 1,
+				type: "button",
+				class: f(["code-action-btn", { copied: u.value }]),
+				onClick: _,
+				"aria-label": u.value ? "Copied to clipboard" : "Copy code to clipboard"
+			}, [u.value ? (g(), o("svg", wt, [...n[3] ||= [s("polyline", { points: "20 6 9 17 4 12" }, null, -1)]])) : (g(), o("svg", Ct, [...n[2] ||= [s("rect", {
+				x: "9",
+				y: "9",
+				width: "13",
+				height: "13",
+				rx: "2",
+				ry: "2"
+			}, null, -1), s("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }, null, -1)]]))], 10, St)), [[r, u.value ? "Copied!" : "Copy code"]]) : a("", !0)])])) : a("", !0), s("div", {
+				class: "code-block-body",
+				style: p({ maxHeight: y.value })
+			}, [s("pre", {
+				ref_key: "preRef",
+				ref: d,
+				class: "code-block-pre"
+			}, [b(t.$slots, "default", {}, () => [c(S(e.code), 1)], !0)], 512)], 4)], 2);
+		};
+	}
+}, [["__scopeId", "data-v-3f0f2177"]]), Z = {
 	instant: 100,
 	fast: 150,
 	normal: 200,
@@ -1775,7 +2190,7 @@ var P = {
 		ease: Q.linear,
 		css: `${Z.ripple}ms ${Q.linear}`
 	}
-}, lt = {
+}, Et = {
 	"--nano-duration-fast": `${Z.fast}ms`,
 	"--nano-duration": `${Z.normal}ms`,
 	"--nano-duration-toggle": `${Z.toggle}ms`,
@@ -1797,8 +2212,12 @@ var P = {
 //#endregion
 //#region src/index.js
 k.init("nano-ui", "https://analytics.7u.pl");
-var ut = { install(e) {
-	e.directive("ripple", A), e.directive("tooltip", P), e.component("GlobalTooltip", I), e.component("NanoModal", V), e.component("ThreeDDonutChart", We), e.component("PrecisionScrubber", Xe), e.component("TopologyRadar", it), e.component("MutatingHeader", K), e.component("NanoSwitch", ct);
-} };
+var Dt = A.version, Ot = { isPreTag: (e) => e === "pre" || e === "NanoCodeBlock" || e === "nano-code-block" }, kt = {
+	version: A.version,
+	install(e, { directivePrefix: t = "", componentPrefix: n = "" } = {}) {
+		let r = t ? `${t}-` : "", i = n ? `${n}` : "";
+		e.directive(`${r}ripple`, M), e.directive(`${r}tooltip`, I), e.component(`${i}GlobalTooltip`, R), e.component(`${i}NanoModal`, V), e.component(`${i}ThreeDDonutChart`, Ke), e.component(`${i}PrecisionScrubber`, H), e.component(`${i}TopologyRadar`, st), e.component(`${i}MutatingHeader`, K), e.component(`${i}NanoSwitch`, dt), e.component(`${i}KineticRotator`, X), e.component(`${i}NanoCodeBlock`, Tt);
+	}
+};
 //#endregion
-export { I as GlobalTooltip, K as MutatingHeader, V as NanoModal, ct as NanoSwitch, Xe as PrecisionScrubber, A as Ripple, We as ThreeDDonutChart, it as TopologyRadar, ut as default, Z as durations, Q as easings, N as hideTooltip, M as showTooltip, P as tooltipDirective, j as tooltipState, lt as transitionVariables, $ as transitions };
+export { R as GlobalTooltip, X as KineticRotator, K as MutatingHeader, Tt as NanoCodeBlock, V as NanoModal, dt as NanoSwitch, H as PrecisionScrubber, M as Ripple, Ke as ThreeDDonutChart, st as TopologyRadar, kt as default, Z as durations, Q as easings, F as hideTooltip, j as initTheme, Ot as nanoCompilerOptions, P as showTooltip, I as tooltipDirective, N as tooltipState, Et as transitionVariables, $ as transitions, Dt as version };