@gkucmierz/nano-ui 1.6.0 → 1.7.1

package/dist/nano-ui.js

@@ -176,17 +176,23 @@ var P = {
 }, I = /* @__PURE__ */ F({
 	__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 (!j.isVisible || !t.value || !j.targetRect || (await d(), !t.value || !j.targetRect)) return;
+			let e = j.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([
+			() => j.isVisible,
+			() => j.text,
+			() => j.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,
@@ -204,7 +210,7 @@ var P = {
 			})
 		}, S(C(j).text), 7));
 	}
-}, [["__scopeId", "data-v-e67d9c3b"]]), L = { class: "nano-modal-title" }, R = {
+}, [["__scopeId", "data-v-d7961ba4"]]), L = { class: "nano-modal-title" }, R = {
 	key: 1,
 	class: "nano-modal-body"
 }, z = {
@@ -631,10 +637,10 @@ var P = {
 			});
 		}), V = r(() => A.value.reduce((e, t) => e + t.value, 0)), We = r(() => {
 			if (c.centerValue !== void 0 && c.centerValue !== "") return c.centerValue;
-			let e = at.value.find((e) => e.item.id === C.value);
+			let e = X.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 = X.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 +701,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, $e = c.is3D, H = v(c.isExpanded ? 380 : 60), U = v(c.isExpanded ? 160 : 60), W = v(c.isExpanded ? 180 : 48), G = v(c.isExpanded ? $e ? 180 * c.slopeRatio : 180 : $e ? 48 * c.slopeRatio : 48), K = v(c.isExpanded ? 180 * (1 - c.thickness) : 48 * (1 - c.thickness)), q = v(c.isExpanded ? $e ? 180 * (1 - c.thickness) * c.slopeRatio : 180 * (1 - c.thickness) : $e ? 48 * (1 - c.thickness) * c.slopeRatio : 48 * (1 - c.thickness)), et = c.isExpanded && $e ? 32 : 0, J = v($e && 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 = (W.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 = (W.value - 48) / 132;
 			return 7 + 1.5 * Math.max(0, Math.min(1, e));
-		}), it = r(() => G.value - Y.value / 2), at = r(() => {
+		}), at = r(() => U.value - J.value / 2), X = r(() => {
 			let e = A.value, t = V.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 = H.value;
+			U.value;
+			let a = W.value, o = G.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,
@@ -838,17 +844,17 @@ var P = {
 			}), n.sort((e, t) => e.midY - t.midY);
 		}), ot = r(() => {
 			let e = /* @__PURE__ */ new Set(), t = [];
-			return at.value.forEach((n) => {
+			return X.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 {
+			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 = {
+				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,40 +872,40 @@ var P = {
 				left: e,
 				right: t
 			};
-		}), Z = r(() => ct.value.left), Q = r(() => ct.value.right), $ = (e) => {
+		}), lt = r(() => ct.value.left), ut = r(() => ct.value.right), dt = (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 = H.value, u = W.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) => {
+		}, ft = (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);
+				H.value = c.isExpanded ? 380 : 60, U.value = c.isExpanded ? 160 : 60, W.value = c.isExpanded ? 180 : 48, G.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 = H.value, a = U.value, o = W.value, s = G.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, H.value = i + (_ - i) * k, U.value = a + (v - a) * k, W.value = o + (y - o) * k, G.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), H.value = _, U.value = v, W.value = y, G.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) => {
+		}, pt = (e) => {
 			if (e.isSingleSlice) return !0;
-			let t = at.value, n = -1;
+			let t = X.value, n = -1;
 			for (let r = t.length - 1; r >= 0; r--) if (t[r].item.id === e.item.id) {
 				n = r;
 				break;
@@ -908,46 +914,46 @@ var P = {
 		};
 		return w(B, (e) => {
 			let t = c.immediate || c.currentLowFxMode;
-			Ke(e || [], t), t || lt();
+			Ke(e || [], t), t || ft();
 		}, {
 			deep: !0,
 			immediate: !0
 		}), w(() => c.rotationAngle, () => {
-			Xe.value = !0, Ze && clearTimeout(Ze), Ze = setTimeout(() => {
-				Xe.value = !1;
+			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 : ft();
 		}), w(() => c.isExpanded, () => {
 			d(() => {
-				lt();
+				ft();
 			});
 		}), w(() => c.is3D, () => {
 			d(() => {
-				lt();
+				ft();
 			});
 		}), w(() => c.showLabels, () => {
 			d(() => {
-				lt();
+				ft();
 			});
 		}), w(() => c.slopeRatio, (e) => {
 			if (c.is3D) {
-				Qe.value = c.isExpanded ? 180 * e : 48;
+				G.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();
+				ft();
 			});
 		}), h(() => {
 			document.removeEventListener("click", k), u && cancelAnimationFrame(u);
@@ -960,10 +966,10 @@ 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, [
@@ -1021,7 +1027,7 @@ var P = {
 			"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", {
+			(g(!0), o(e, null, y(X.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,
@@ -1065,12 +1071,12 @@ var P = {
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
 				}, null, 8, ye)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				pt(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", {
+				pt(e) ? (g(), o("path", {
 					key: 7,
 					d: e.topStrokePath,
 					fill: "none",
@@ -1078,7 +1084,7 @@ var P = {
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
 				}, null, 8, xe)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				pt(e) ? (g(), o("path", {
 					key: 8,
 					d: e.topStrokePath,
 					fill: "none",
@@ -1089,13 +1095,13 @@ var P = {
 			], 6))), 128)),
 			c.showCenterText ? (g(), o("g", {
 				key: 0,
-				transform: `translate(${W.value}, ${G.value})`,
+				transform: `translate(${H.value}, ${U.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",
@@ -1104,13 +1110,13 @@ var P = {
 				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", {
+			(g(!0), o(e, null, y(X.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,
@@ -1154,12 +1160,12 @@ var P = {
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
 				}, null, 8, je)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				pt(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", {
+				pt(e) ? (g(), o("path", {
 					key: 7,
 					d: e.topStrokePath,
 					fill: "none",
@@ -1167,7 +1173,7 @@ var P = {
 					"stroke-width": "0.8",
 					"stroke-linejoin": "round"
 				}, null, 8, Ne)) : a("", !0),
-				ut(e) ? (g(), o("path", {
+				pt(e) ? (g(), o("path", {
 					key: 8,
 					d: e.topStrokePath,
 					fill: "none",
@@ -1194,10 +1200,10 @@ var P = {
 			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(lt.value, (e, t) => (g(), o("g", {
 				key: "label-left-" + e.item.id,
 				class: f(["label-group", {
 					"is-hovered": C.value === e.item.id,
@@ -1208,7 +1214,7 @@ var P = {
 				onClick: (t) => E(e.item.id),
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" })
 			}, [s("path", {
-				d: $(e),
+				d: dt(e),
 				fill: "none",
 				stroke: e.color,
 				"stroke-width": "1.2"
@@ -1222,7 +1228,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, Be)], 46, Re))), 128)), (g(!0), o(e, null, y(ut.value, (e, t) => (g(), o("g", {
 				key: "label-right-" + e.item.id,
 				class: f(["label-group", {
 					"is-hovered": C.value === e.item.id,
@@ -1233,7 +1239,7 @@ var P = {
 				onClick: (t) => E(e.item.id),
 				style: p({ cursor: c.selectable && !j.value ? "pointer" : "default" })
 			}, [s("path", {
-				d: $(e),
+				d: dt(e),
 				fill: "none",
 				stroke: e.color,
 				"stroke-width": "1.2"
@@ -1261,7 +1267,7 @@ var P = {
 	"y1",
 	"x2",
 	"y2"
-], H = { class: "nano-scrub-popup-val" }, Ye = { class: "nano-scrub-popup-res" }, Xe = /* @__PURE__ */ F(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+], Ye = { class: "nano-scrub-popup-val" }, Xe = { class: "nano-scrub-popup-res" }, Ze = /* @__PURE__ */ F(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
 	__name: "PrecisionScrubber",
 	props: {
 		modelValue: {
@@ -1366,21 +1372,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", Ye, S(k.value), 1),
+				s("div", Xe, S(E.value), 1)
 			], 4)
 		])) : a("", !0)]))], 64));
 	}
-}), [["__scopeId", "data-v-21b41bc4"]]), Ze = { class: "header-inner" }, U = {
+}), [["__scopeId", "data-v-21b41bc4"]]), Qe = { class: "header-inner" }, $e = {
 	key: 0,
 	class: "header-left"
-}, W = {
+}, H = {
 	key: 1,
 	class: "header-center"
-}, G = {
+}, U = {
 	key: 2,
 	class: "header-right"
-}, K = /* @__PURE__ */ F({
+}, W = /* @__PURE__ */ F({
 	__name: "MutatingHeader",
 	props: {
 		threshold: {
@@ -1451,39 +1457,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", Qe, [
+			t.$slots.left ? (g(), o("div", $e, [b(t.$slots, "left", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+			t.$slots.center ? (g(), o("div", H, [b(t.$slots, "center", { isStuck: l.value }, void 0, !0)])) : a("", !0),
+			t.$slots.right ? (g(), o("div", U, [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"]]), G = [
 	"viewBox",
 	"width",
 	"height"
-], q = ["points"], J = ["points"], $e = ["points"], Y = ["points"], et = [
+], K = ["points"], q = ["points"], et = ["points"], J = ["points"], tt = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], tt = ["x", "y"], X = [
+], nt = ["x", "y"], Y = [
 	"points",
 	"fill",
 	"stroke",
 	"opacity"
-], nt = [
+], rt = [
 	"points",
 	"fill",
 	"stroke"
-], rt = [
+], it = [
 	"cx",
 	"cy",
 	"fill"
-], it = /* @__PURE__ */ F({
+], at = /* @__PURE__ */ F({
 	__name: "TopologyRadar",
 	props: {
 		size: {
@@ -1552,25 +1558,25 @@ 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, K),
 			s("polygon", {
 				points: f(.75),
 				fill: "none",
 				stroke: "var(--nano-radar-grid-subtle, rgba(255,255,255,0.05))",
 				"stroke-width": "1"
-			}, null, 8, J),
+			}, null, 8, q),
 			s("polygon", {
 				points: f(.5),
 				fill: "none",
 				stroke: "var(--nano-radar-grid-subtle, rgba(255,255,255,0.05))",
 				"stroke-width": "1"
-			}, null, 8, $e),
+			}, null, 8, et),
 			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, J),
 			(g(!0), o(e, null, y(t.labels, (e, n) => (g(), o("line", {
 				key: "axis-" + n,
 				x1: t.size / 2,
@@ -1579,7 +1585,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, tt))), 128)),
 			(g(!0), o(e, null, y(t.labels, (e, t) => (g(), o("text", {
 				key: "label-" + t,
 				x: d(115, t).x,
@@ -1590,7 +1596,7 @@ var P = {
 				"font-weight": "bold",
 				"text-anchor": "middle",
 				"dominant-baseline": "middle"
-			}, S(e), 9, tt))), 128)),
+			}, S(e), 9, nt))), 128)),
 			(g(!0), o(e, null, y(t.history, (e, n) => (g(), o("polygon", {
 				key: "hist-" + n,
 				points: m(e),
@@ -1598,7 +1604,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, Y))), 128)),
 			t.history.length > 0 ? (g(), o("polygon", {
 				key: 0,
 				points: m(t.history[t.history.length - 1]),
@@ -1606,7 +1612,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, rt)) : 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,10 +1620,10 @@ 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, it))), 128)) : a("", !0)
+		], 8, G))], 4));
 	}
-}, [["__scopeId", "data-v-bb4bd598"]]), at = ["for"], ot = [
+}, [["__scopeId", "data-v-bb4bd598"]]), X = ["for"], ot = [
 	"checked",
 	"disabled",
 	"name",
@@ -1711,9 +1717,348 @@ var P = {
 			}, null, 40, ot),
 			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));
+		], 10, X));
+	}
+}, [["__scopeId", "data-v-50b63887"]]), lt = { class: "rotator-fallback" }, ut = { class: "fallback-angle" }, dt = /* @__PURE__ */ F({
+	__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", lt, [t[0] ||= s("span", { class: "fallback-icon" }, "⚡", -1), s("span", ut, S(Math.round(y(C.value))) + "°", 1)])], !0)], 4)], 4));
+	}
+}, [["__scopeId", "data-v-abbbb111"]]), ft = {
+	key: 0,
+	class: "code-block-header"
+}, pt = { class: "code-block-title-group" }, mt = {
+	key: 0,
+	class: "code-block-title"
+}, ht = {
+	key: 1,
+	class: "code-block-lang"
+}, gt = { class: "code-block-actions" }, _t = ["aria-label"], vt = {
+	key: 0,
+	class: "action-svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, yt = {
+	key: 1,
+	class: "action-svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, bt = ["aria-label"], xt = {
+	key: 0,
+	class: "action-svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, St = {
+	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"
+}, Ct = /* @__PURE__ */ F({
+	__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", ft, [s("div", pt, [b(t.$slots, "header", {}, () => [e.title ? (g(), o("span", mt, S(e.title), 1)) : a("", !0), e.lang ? (g(), o("span", ht, S(e.lang), 1)) : a("", !0)], !0)]), s("div", gt, [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", yt, [...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", vt, [...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, _t)), [[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", St, [...n[3] ||= [s("polyline", { points: "20 6 9 17 4 12" }, null, -1)]])) : (g(), o("svg", xt, [...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, bt)), [[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"
+			}, [s("code", null, [b(t.$slots, "default", {}, () => [c(S(e.code), 1)], !0)])], 512)], 4)], 2);
+		};
 	}
-}, [["__scopeId", "data-v-50b63887"]]), Z = {
+}, [["__scopeId", "data-v-9bc464f3"]]), Z = {
 	instant: 100,
 	fast: 150,
 	normal: 200,
@@ -1775,7 +2120,7 @@ var P = {
 		ease: Q.linear,
 		css: `${Z.ripple}ms ${Q.linear}`
 	}
-}, lt = {
+}, wt = {
 	"--nano-duration-fast": `${Z.fast}ms`,
 	"--nano-duration": `${Z.normal}ms`,
 	"--nano-duration-toggle": `${Z.toggle}ms`,
@@ -1797,8 +2142,8 @@ 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 Tt = { 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", Ze), e.component("TopologyRadar", at), e.component("MutatingHeader", W), e.component("NanoSwitch", ct), e.component("KineticRotator", dt), e.component("NanoCodeBlock", Ct);
 } };
 //#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 { I as GlobalTooltip, dt as KineticRotator, W as MutatingHeader, Ct as NanoCodeBlock, V as NanoModal, ct as NanoSwitch, Ze as PrecisionScrubber, A as Ripple, We as ThreeDDonutChart, at as TopologyRadar, Tt as default, Z as durations, Q as easings, N as hideTooltip, M as showTooltip, P as tooltipDirective, j as tooltipState, wt as transitionVariables, $ as transitions };