@ac-design/design-system 2.6.0 → 2.7.0

package/dist/lib/components/AcGraphChart.vue_vue_type_script_setup_true_lang.js

@@ -2,27 +2,38 @@ import e from "./AcTooltip.js";
 import t from "../charts/ChartFrame.js";
 import { bindItemHover as n, useEChart as r } from "../charts/echarts.js";
 import { chartColor as i } from "../charts/shared.js";
-import { LABEL_DETAILS as a, labelDetail as o, layoutGraph as s, nodeImage as c, nodeKind as l, nodeName as u, overhang as d, truncate as ee } from "../charts/graph.js";
-import { Fragment as f, computed as p, createBlock as te, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as ne, createTextVNode as re, createVNode as ie, defineComponent as _, guardReactiveProps as ae, mergeModels as v, normalizeClass as oe, normalizeProps as se, normalizeStyle as ce, openBlock as y, ref as b, renderList as le, renderSlot as ue, resolveDynamicComponent as de, toDisplayString as x, unref as fe, useModel as pe, watch as me, withCtx as S } from "vue";
-import { Box as he, Maximize as ge, Network as _e, ZoomIn as ve, ZoomOut as ye } from "@lucide/vue";
-import { graphic as C, use as be } from "echarts/core";
-import { GraphChart as xe } from "echarts/charts";
+import { nodeImage as a } from "../charts/nodeSymbol.js";
+import { LABEL_DETAILS as o, labelDetail as s, layoutGraph as c, nodeKind as l, nodeName as u, overhang as d, truncate as ee } from "../charts/graph.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createSlots as te, createTextVNode as ne, createVNode as re, defineComponent as v, guardReactiveProps as ie, mergeModels as ae, nextTick as oe, normalizeClass as se, normalizeProps as ce, normalizeStyle as le, onBeforeUnmount as ue, openBlock as y, ref as b, renderList as de, renderSlot as fe, resolveDynamicComponent as pe, toDisplayString as x, unref as me, useModel as he, vModelText as ge, watch as S, withCtx as C, withDirectives as _e } from "vue";
+import { Box as ve, Maximize as ye, Network as be, ZoomIn as xe, ZoomOut as Se } from "@lucide/vue";
+import { graphic as Ce, use as we } from "echarts/core";
+import { GraphChart as Te } from "echarts/charts";
 //#region src/lib/components/AcGraphChart.vue?vue&type=script&setup=true&lang.ts
-var Se = { class: "font-medium text-heading" }, Ce = {
+var Ee = { class: "font-medium text-heading" }, De = {
 	key: 0,
 	class: "mt-0.5 flex items-center gap-1.5 text-muted"
-}, we = {
+}, Oe = {
 	key: 2,
 	class: "mt-1.5 border-t border-border pt-1.5 text-muted"
-}, Te = {
+}, ke = {
 	key: 0,
-	class: "w-10 text-center text-xs text-muted tabular-nums",
-	"aria-hidden": "true"
-}, Ee = ["aria-label", "onClick"], w = "graph", De = 1.25, T = 16, Oe = 48, ke = .2, Ae = 4, E = "", D = /*@__PURE__*/ _({
+	class: "flex h-7 w-12 cursor-text items-center justify-center rounded-full text-xs text-muted tabular-nums transition-colors focus-within:bg-surface-sunken focus-within:text-heading focus-within:ring-2 focus-within:ring-ring hover:bg-surface-sunken hover:text-heading motion-reduce:transition-none"
+}, Ae = [
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext"
+], je = ["aria-label", "onClick"], w = "graph", Me = 1.25, T = 16, Ne = .05, Pe = 48, Fe = .2, Ie = 4, Le = 80, E = "", Re = /*@__PURE__*/ v({
 	__name: "AcGraphChart",
-	props: /*@__PURE__*/ v({
+	props: /*@__PURE__*/ ae({
 		nodes: {},
 		links: { default: () => [] },
+		groups: { default: () => [] },
+		highlight: { default: "neighbors" },
+		highlightOnHover: {
+			type: Boolean,
+			default: !1
+		},
 		direction: { default: "LR" },
 		height: { default: 480 },
 		shape: { default: "circle" },
@@ -57,124 +68,186 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 		selected: { default: null },
 		selectedModifiers: {}
 	}),
-	emits: /*@__PURE__*/ v(["node-click"], ["update:selected"]),
-	setup(_, { emit: v }) {
-		be([xe]);
-		let D = _, O = pe(_, "selected"), je = v, Me = [.25, 1.5], Ne = [
-			["wheel", ut],
-			["mousewheel", ut],
-			["touchstart", dt],
-			["touchmove", dt],
-			["touchend", dt]
-		], k = {
+	emits: /*@__PURE__*/ ae(["node-click"], ["update:selected"]),
+	setup(v, { expose: ae, emit: Re }) {
+		we([Te]);
+		let D = v, O = he(v, "selected"), ze = Re, k = [.25, 1.5], Be = [
+			["wheel", It],
+			["mousewheel", It],
+			["touchstart", Lt],
+			["touchmove", Lt],
+			["touchend", Lt]
+		], A = {
 			success: "var(--color-success)",
 			info: "var(--color-info)",
 			warning: "var(--color-warning)",
 			danger: "var(--color-danger)",
 			neutral: void 0
-		}, Pe = {
+		}, Ve = {
 			success: "Healthy",
 			info: "Info",
 			warning: "Warning",
 			danger: "Critical",
 			neutral: ""
-		}, Fe = {
+		}, He = {
 			success: "text-success-strong",
 			info: "text-info-strong",
 			warning: "text-warning-strong",
 			danger: "text-danger-strong",
 			neutral: "text-muted"
-		}, Ie = {
+		}, Ue = {
 			success: "bg-success",
 			info: "bg-info",
 			warning: "bg-warning",
 			danger: "bg-danger",
 			neutral: "bg-border-dark"
-		}, A = b(), j = b([]), M = b(0), N = b(null), Le = b(), P = b(null), F = null, I = null, L = !1, R = null, Re = /* @__PURE__ */ new Map(), z = /* @__PURE__ */ new Map(), B = p(() => new Map(D.nodes.map((e) => [e.id, e]))), ze = p(() => [...new Set(D.nodes.map((e) => e.kind ?? E).filter((e) => e !== E))]), Be = p(() => new Map(ze.value.map((e, t) => [e, i(D.kindColors?.[e], t)])));
-		function Ve(e) {
-			return Be.value.get(e.kind ?? E) ?? "var(--color-muted)";
+		}, We = b(), j = b([]), Ge = b(0), M = b(null), Ke = b(), N = b(null), qe = b(null), P = b(""), F = null, I = null, Je = !1, L, R = null, Ye = /* @__PURE__ */ new Map(), Xe = /* @__PURE__ */ new Map(), z = p(() => new Map(D.nodes.map((e) => [e.id, e]))), Ze = p(() => new Map(D.groups.map((e) => [e.id, e]))), Qe = p(() => [...new Set(D.nodes.map((e) => e.kind ?? E).filter((e) => e !== E))]), $e = p(() => new Map(Qe.value.map((e, t) => [e, i(D.kindColors?.[e], t)])));
+		function et(e) {
+			return $e.value.get(e.kind ?? E) ?? "var(--color-muted)";
 		}
-		function V(e) {
+		function B(e) {
 			return e ?? "neutral";
 		}
-		function H(e) {
-			return e.statusText || Pe[V(e.status)];
+		function tt(e) {
+			return e.statusText || Ve[B(e.status)];
 		}
-		function U(e) {
+		function nt(e) {
 			return e.status === "warning" || e.status === "danger";
 		}
-		function He(e) {
-			return e.icon ?? D.kindIcons?.[e.kind ?? E] ?? he;
+		function rt(e) {
+			return e.icon ?? D.kindIcons?.[e.kind ?? E] ?? ve;
 		}
-		let W = p(() => D.nodes.filter((e) => !j.value.includes(e.kind ?? E))), G = p(() => new Set(W.value.map((e) => e.id))), K = p(() => D.links.filter((e) => B.value.has(e.source) && B.value.has(e.target))), Ue = p(() => K.value.filter((e) => G.value.has(e.source) && G.value.has(e.target))), We = p(() => s(W.value.map((e) => ({
+		let V = p(() => D.nodes.filter((e) => !j.value.includes(e.kind ?? E))), H = p(() => new Set(V.value.map((e) => e.id))), U = p(() => D.links.filter((e) => z.value.has(e.source) && z.value.has(e.target))), W = p(() => U.value.filter((e) => H.value.has(e.source) && H.value.has(e.target))), it = p(() => c(V.value.map((e) => ({
 			id: e.id,
 			label: e.label,
-			kind: e.kind ?? E,
+			kind: lt(e),
 			group: e.group,
-			badge: U(e)
-		})), Ue.value.map((e) => ({
+			badge: nt(e)
+		})), W.value.map((e) => ({
 			source: e.source,
 			target: e.target,
 			label: e.label ?? ""
-		})), D.direction)), q = p(() => {
-			let e = We.value, { centers: t } = e, n = Math.max(t.maxX - t.minX, 2), r = Math.max(t.maxY - t.minY, 2), i = Math.max(M.value - 32, 1), s = Math.max(D.height - T - (D.zoom ? Oe : T), 1), c = 1, l = "full", u = d(e, c, l);
-			for (l of a) {
-				u = d(e, c, l);
-				for (let t = 0; t < 4; t++) c = Math.max(Math.min(1, (i - u.left - u.right) / n, (s - u.top - u.bottom) / r), .05), u = d(e, c, l);
-				if (a.indexOf(o(c)) <= a.indexOf(l)) break;
-			}
+		})), D.direction, new Map(D.groups.filter((e) => e.parent).map((e) => [e.id, e.parent])))), G = p(() => {
+			let e = it.value, { centers: t } = e, n = Math.max(t.maxX - t.minX, 2), r = Math.max(t.maxY - t.minY, 2), i = Math.max(Ge.value - 32, 1), a = Math.max(D.height - T - (D.zoom ? Pe : T), 1), c = 1, l = "full", u = d(e, c, l);
+			for (l of o) if (c = at(e, l, n, r, i, a), u = d(e, c, l), o.indexOf(s(c)) <= o.indexOf(l)) break;
 			let ee = n * c + u.left + u.right, f = r * c + u.top + u.bottom;
 			return {
 				layout: e,
 				scale: c,
 				detail: l,
 				left: T + (i - ee) / 2 + u.left,
-				top: T + (s - f) / 2 + u.top,
+				top: T + (a - f) / 2 + u.top,
 				width: n * c,
 				height: r * c,
 				center: [(t.minX + t.maxX) / 2, (t.minY + t.maxY) / 2]
 			};
-		}), Ge = p(() => O.value && G.value.has(O.value) ? O.value : void 0), Ke = p(() => {
-			let e = Ge.value;
-			if (!e) return null;
-			let t = /* @__PURE__ */ new Set([e]);
-			for (let n of K.value) n.source === e && t.add(n.target), n.target === e && t.add(n.source);
-			return t;
-		}), qe = p(() => Math.round((P.value ?? q.value.scale) * 100)), J = p(() => P.value === null ? q.value.detail : o(P.value));
+		});
+		function at(e, t, n, r, i, a) {
+			let o = (o) => {
+				let s = d(e, o, t);
+				return n * o + s.left + s.right <= i && r * o + s.top + s.bottom <= a;
+			};
+			if (o(1)) return 1;
+			let s = Ne, c = 1;
+			for (let e = 0; e < 20; e++) {
+				let e = (s + c) / 2;
+				o(e) ? s = e : c = e;
+			}
+			return s;
+		}
+		let ot = p(() => O.value && H.value.has(O.value) ? O.value : void 0), st = p(() => {
+			let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+			for (let n of W.value) e.set(n.source, [...e.get(n.source) ?? [], n.target]), t.set(n.target, [...t.get(n.target) ?? [], n.source]);
+			return {
+				out: e,
+				into: t
+			};
+		}), ct = p(() => {
+			let e = qe.value;
+			if (e && "link" in e) return ft(e.link);
+			let t = e && "node" in e ? e.node : ot.value;
+			return t && H.value.has(t) ? dt(t) : null;
+		}), K = p(() => Math.round((N.value ?? G.value.scale) * 100)), q = p(() => N.value === null ? G.value.detail : s(N.value));
+		function lt(e) {
+			return e.sublabel || e.kind || E;
+		}
+		function J(e, t) {
+			let n = t ? st.value.out : st.value.into, r = new Set(e), i = [...e];
+			for (; i.length;) for (let e of n.get(i.pop()) ?? []) r.has(e) || (r.add(e), i.push(e));
+			return r;
+		}
+		function ut(e, t) {
+			let n = /* @__PURE__ */ new Set();
+			return W.value.forEach((r, i) => {
+				(e.has(r.source) && e.has(r.target) || t.has(r.source) && t.has(r.target)) && n.add(i);
+			}), {
+				nodes: /* @__PURE__ */ new Set([...e, ...t]),
+				links: n
+			};
+		}
+		function dt(e) {
+			if (D.highlight === "path") return ut(J([e], !0), J([e], !1));
+			let t = {
+				nodes: /* @__PURE__ */ new Set([e]),
+				links: /* @__PURE__ */ new Set()
+			};
+			return W.value.forEach((n, r) => {
+				(n.source === e || n.target === e) && (t.links.add(r), t.nodes.add(n.source), t.nodes.add(n.target));
+			}), t;
+		}
+		function ft(e) {
+			let t = W.value[e];
+			if (!t) return null;
+			let n = D.highlight === "path" ? ut(J([t.target], !0), J([t.source], !1)) : {
+				nodes: /* @__PURE__ */ new Set([t.source, t.target]),
+				links: /* @__PURE__ */ new Set()
+			};
+			return n.links.add(e), n;
+		}
 		function Y(e) {
 			return e.replace(/[{}]/g, "");
 		}
-		function Je(e, t, n) {
-			let r = V(t.status), i = He(t), a = n ? e.primary : k[r] ? e.color(k[r]) : e.borderDark, o = e.color(Ve(t)), s = n ? 3 : 2, l = [
-				typeof i == "string" ? `t:${i}` : `c:${Ye(i)}`,
-				o,
-				a,
+		function pt(e, t, n) {
+			let r = B(t.status), i = rt(t), o = n ? e.primary : A[r] ? e.color(A[r]) : e.borderDark, s = e.color(et(t)), c = n ? 3 : 2, l = [
+				typeof i == "string" ? `t:${i}` : `c:${mt(i)}`,
 				s,
+				o,
+				c,
 				e.surface,
 				D.shape
-			].join("|"), u = Re.get(l);
-			return u || (u = c({
+			].join("|"), u = Ye.get(l);
+			return u || (u = a({
 				icon: i,
-				iconColor: o,
+				iconColor: s,
 				fill: e.surface,
-				ring: a,
-				ringWidth: s,
+				ring: o,
+				ringWidth: c,
 				shape: D.shape,
 				font: e.font
-			}), Re.set(l, u)), u;
+			}), Ye.set(l, u)), u;
+		}
+		function mt(e) {
+			let t = Xe.get(e);
+			return t === void 0 && (t = Xe.size, Xe.set(e, t)), t;
 		}
-		function Ye(e) {
-			let t = z.get(e);
-			return t === void 0 && (t = z.size, z.set(e, t)), t;
+		function ht(e) {
+			let t = nt(e) ? `{${e.status}|!}` : "";
+			if (q.value === "badge") return t;
+			let n = `${t ? `${t} ` : ""}{name|${Y(u(e.label))}}`, r = lt(e);
+			return r && q.value === "full" ? `${n}\n{kind|${Y(l(r))}}` : n;
+		}
+		function gt(e, t) {
+			let n = A[B(t.status)];
+			return n ? e.color(n) : t.color ? e.color(i(t.color, 0)) : e.borderDark;
+		}
+		function _t(e) {
+			return e.color && !A[B(e.status)] ? i(e.color, 0) : "var(--color-primary)";
 		}
-		function Xe(e) {
-			let t = U(e) ? `{${e.status}|!}` : "";
-			if (J.value === "badge") return t;
-			let n = `${t ? `${t} ` : ""}{name|${Y(u(e.label))}}`;
-			return e.kind && J.value === "full" ? `${n}\n{kind|${Y(l(e.kind))}}` : n;
+		function vt(e) {
+			if (e.arrow !== void 0) return e.arrow ? ["none", "arrow"] : ["none", "none"];
 		}
-		function Ze(e) {
-			let t = q.value, n = F?.frame === t ? F : null, r = Ke.value, i = Ge.value, a = new Map(W.value.map((e, t) => [e.id, t])), o = (t, n) => ({
+		function yt(e) {
+			let t = G.value, n = F?.frame === t ? F : null, r = ct.value, i = ot.value, a = new Map(V.value.map((e, t) => [e.id, t])), o = (t, n) => ({
 				backgroundColor: e.color(t),
 				color: e.color(n),
 				width: 14,
@@ -196,8 +269,8 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 				roam: !0,
 				roamTrigger: "global",
 				scaleLimit: {
-					min: Math.min(1, Me[0] / t.scale),
-					max: Math.max(1, Me[1] / t.scale)
+					min: Math.min(1, k[0] / t.scale),
+					max: Math.max(1, k[1] / t.scale)
 				},
 				zoom: n?.zoom ?? 1,
 				center: n?.center ?? t.center,
@@ -238,35 +311,40 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 					padding: [2, 6],
 					borderRadius: 6
 				},
-				data: W.value.map((n) => {
-					let [a, o] = t.layout.positions.get(n.id), s = r && !r.has(n.id) ? ke : 1;
+				data: V.value.map((n) => {
+					let [a, o] = t.layout.positions.get(n.id), s = r && !r.nodes.has(n.id) ? Fe : 1;
 					return {
 						id: n.id,
 						name: n.id,
 						x: a,
 						y: o,
-						symbol: Je(e, n, n.id === i),
+						symbol: pt(e, n, n.id === i),
 						symbolSize: 40 * t.scale,
 						itemStyle: { opacity: s },
 						label: {
-							formatter: Xe(n),
+							formatter: ht(n),
 							opacity: s
 						}
 					};
 				}),
-				links: Ue.value.map((t) => {
-					let n = !!i && (t.source === i || t.target === i), r = V(t.status), o = n ? e.primary : k[r] ? e.color(k[r]) : e.borderDark, s = i && !n ? ke : 1;
+				links: W.value.map((t, n) => {
+					let i = !!r?.links.has(n), o = i ? e.color(_t(t)) : gt(e, t), s = r && !i ? Fe : 1, c = i ? {
+						shadowBlur: 6,
+						shadowColor: e.alpha(_t(t), .45)
+					} : {};
 					return {
 						source: a.get(t.source),
 						target: a.get(t.target),
+						symbol: vt(t),
 						lineStyle: {
 							color: o,
-							width: n ? 2.5 : 1.5,
-							type: t.dashed ? "dashed" : "solid",
+							width: i ? 2.5 : 1.5,
+							type: t.style ?? (t.dashed ? "dashed" : "solid"),
 							opacity: s,
-							curveness: 0
+							curveness: 0,
+							...c
 						},
-						label: t.label && J.value === "full" ? {
+						label: t.label && q.value === "full" ? {
 							show: !0,
 							formatter: Y(t.label),
 							opacity: s
@@ -276,140 +354,173 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 			};
 		}
 		let X = r({
-			host: A,
+			host: We,
 			renderer: () => D.renderer,
 			option: (e) => ({
 				animation: D.animation && !e.reducedMotion,
 				animationDurationUpdate: 300,
 				textStyle: { fontFamily: e.font },
-				series: [Ze(e)]
+				series: [yt(e)]
 			}),
-			setup: Qe
+			setup: bt
 		});
-		function Qe(e) {
+		function bt(e) {
 			let t = e.getZr();
 			R = {
-				root: new C.Group({ silent: !0 }),
+				root: new Ce.Group({ silent: !0 }),
 				items: /* @__PURE__ */ new Map()
-			}, t.add(R.root), n(e, st, ct), t.on("mousedown", (e) => {
+			}, t.add(R.root), n(e, Nt, Pt), t.on("mousedown", (e) => {
 				I = [e.offsetX, e.offsetY];
 			}), t.on("click", (e) => {
-				!e.target && !$e(e) && (O.value = null);
+				!e.target && !Ct(e) && (O.value = null);
 			}), e.on("click", (e) => {
-				let t = e, n = t.data?.id ? B.value.get(t.data.id) : void 0;
-				t.dataType === "node" && n && t.event?.event && !$e(t.event) && lt(n, t.event.event);
-			}), e.on("graphroam", () => tt(e)), e.on("rendered", () => et(e));
+				let t = e, n = t.data?.id ? z.value.get(t.data.id) : void 0;
+				t.dataType === "node" && n && t.event?.event && !Ct(t.event) && Ft(n, t.event.event);
+			}), e.on("mouseover", (e) => xt(e)), e.on("mouseout", St), t.on("globalout", () => Z(null)), e.on("graphroam", () => Tt(e)), e.on("rendered", () => wt(e));
 		}
-		function $e(e) {
-			return !!I && Math.hypot(e.offsetX - I[0], e.offsetY - I[1]) > Ae;
+		function xt(e) {
+			D.highlightOnHover && (e.dataType === "node" && e.data?.id ? Z({ node: e.data.id }) : e.dataType === "edge" && e.dataIndex !== void 0 && Z({ link: e.dataIndex }));
 		}
-		function Z(e, t) {
+		function St() {
+			clearTimeout(L), L = setTimeout(() => Z(null), Le);
+		}
+		function Z(e) {
+			clearTimeout(L);
+			let t = qe.value;
+			t === e || t && e && JSON.stringify(t) === JSON.stringify(e) || (qe.value = e);
+		}
+		function Ct(e) {
+			return !!I && Math.hypot(e.offsetX - I[0], e.offsetY - I[1]) > Ie;
+		}
+		function Q(e, t) {
 			return e.convertToPixel({ seriesId: w }, t);
 		}
-		function et(e) {
+		function wt(e) {
 			let t = X.theme.value;
 			if (!R || !t) return;
 			let n = /* @__PURE__ */ new Set();
-			for (let r of q.value.layout.groups) {
-				let i = Z(e, [r.x, r.y]), a = Z(e, [r.x + r.width, r.y + r.height]);
-				if (!i || !a) continue;
+			for (let r of G.value.layout.groups) {
+				let a = Q(e, [r.x, r.y]), o = Q(e, [r.x + r.width, r.y + r.height]);
+				if (!a || !o) continue;
 				n.add(r.name);
-				let o = (a[0] - i[0]) / r.width, s = {
-					x: i[0],
-					y: i[1],
-					width: a[0] - i[0],
-					height: a[1] - i[1],
-					r: 10 * o
-				}, c = i[1] + 15 * o, l = [
-					s.x,
-					s.y,
-					s.width,
-					s.height,
+				let s = (o[0] - a[0]) / r.width, c = {
+					x: a[0],
+					y: a[1],
+					width: o[0] - a[0],
+					height: o[1] - a[1],
+					r: 10 * s
+				}, l = a[1] + 15 * s, u = Ze.value.get(r.name), d = u?.color ? i(u.color, 0) : void 0, f = r.depth && q.value === "badge" ? "" : ee(u?.label || r.name, 40), p = u?.description && q.value === "full" ? ee(u.description, 32) : "", m = [
+					c.x,
+					c.y,
+					c.width,
+					c.height,
 					t.surface,
 					t.borderDark,
-					t.muted
-				].map(String).join("|"), u = R.items.get(r.name);
-				u || (u = {
-					rect: new C.Rect({
+					t.muted,
+					f,
+					p,
+					d
+				].map(String).join("|"), h = R.items.get(r.name);
+				h || (h = {
+					rect: new Ce.Rect({
 						z: 1,
 						silent: !0
 					}),
-					text: new C.Text({
+					text: new Ce.Text({
 						z: 1,
 						silent: !0
 					}),
 					sig: ""
-				}, R.root.add(u.rect), R.root.add(u.text), R.items.set(r.name, u)), u.sig !== l && (u.sig = l, u.rect.setShape(s), u.rect.setStyle({
+				}, R.root.add(h.rect), R.root.add(h.text), R.items.set(r.name, h)), h.rect.attr("z2", r.depth * 2), h.text.attr("z2", r.depth * 2 + 1), h.sig !== m && (h.sig = m, h.rect.setShape(c), h.rect.setStyle(d ? {
+					fill: t.alpha(d, .06),
+					stroke: t.alpha(d, .6),
+					lineWidth: 1.5
+				} : {
 					fill: t.color("var(--color-surface-muted)"),
 					stroke: t.borderDark,
 					lineWidth: 1
-				}), u.text.setStyle({
-					text: ee(r.name, 40),
-					x: i[0] + 10 * o,
-					y: c,
-					fill: t.muted,
-					font: `500 11px ${t.font}`,
-					verticalAlign: "middle"
+				}), h.text.setStyle({
+					text: p ? `{name|${Y(f)}}  {description|${Y(p)}}` : f && `{name|${Y(f)}}`,
+					x: a[0] + 10 * s,
+					y: l,
+					verticalAlign: "middle",
+					rich: {
+						name: {
+							fill: d ? t.heading : t.muted,
+							font: `${d ? 600 : 500} 11px ${t.font}`
+						},
+						description: {
+							fill: t.muted,
+							font: `400 11px ${t.font}`
+						}
+					}
 				}));
 			}
 			for (let [e, t] of R.items) n.has(e) || (R.root.remove(t.rect), R.root.remove(t.text), R.items.delete(e));
 		}
-		function tt(e) {
-			N.value = null, et(e);
-			let t = q.value, n = e.convertFromPixel({ seriesId: w }, [t.left + t.width / 2, t.top + t.height / 2]), r = Z(e, [0, 0]), i = Z(e, [100, 0]);
+		function Tt(e) {
+			M.value = null, Z(null), wt(e);
+			let t = G.value, n = e.convertFromPixel({ seriesId: w }, [t.left + t.width / 2, t.top + t.height / 2]), r = Q(e, [0, 0]), i = Q(e, [100, 0]);
 			if (!n || !r || !i) return;
 			let a = (i[0] - r[0]) / 100;
 			F = {
 				frame: t,
 				zoom: a / t.scale,
 				center: n
-			}, P.value = Math.round(a * 1e3) / 1e3;
+			}, N.value = Math.round(a * 1e3) / 1e3;
 		}
-		let nt = p(() => ze.value.map((e) => ({
+		let Et = p(() => Qe.value.map((e) => ({
 			key: e,
 			name: e,
-			color: Be.value.get(e)
+			color: $e.value.get(e)
 		})));
-		function rt(e) {
-			let t = (e) => B.value.get(e)?.label ?? e;
+		function Dt(e) {
+			let t = (e) => z.value.get(e)?.label ?? e;
 			return {
-				targets: K.value.filter((t) => t.source === e).map((e) => t(e.target)),
-				sources: K.value.filter((t) => t.target === e).map((e) => t(e.source))
+				targets: U.value.filter((t) => t.source === e).map((e) => t(e.target)),
+				sources: U.value.filter((t) => t.target === e).map((e) => t(e.source))
 			};
 		}
-		let it = p(() => ({
-			columns: [
-				"Resource",
-				"Kind",
-				"Status",
-				"Connects to",
-				"Connected from"
-			],
-			rows: D.nodes.map((e) => {
-				let { targets: t, sources: n } = rt(e.id);
-				return [
-					e.label,
-					e.kind ?? "",
-					H(e),
-					t.join(", ") || "None",
-					n.join(", ") || "None"
-				];
-			})
-		}));
-		function at(e, t) {
+		function Ot(e) {
+			return e ? Ze.value.get(e)?.label || e : "";
+		}
+		let kt = p(() => {
+			let e = D.nodes.some((e) => e.group);
+			return {
+				columns: [
+					"Resource",
+					"Kind",
+					"Status",
+					"Connects to",
+					"Connected from",
+					...e ? ["Group"] : []
+				],
+				rows: D.nodes.map((t) => {
+					let { targets: n, sources: r } = Dt(t.id), i = [
+						t.label,
+						t.kind ?? "",
+						tt(t),
+						n.join(", ") || "None",
+						r.join(", ") || "None"
+					];
+					return e ? [...i, Ot(t.group) || "None"] : i;
+				})
+			};
+		});
+		function At(e, t) {
 			return `${e} ${t}${e === 1 ? "" : "s"}`;
 		}
-		let ot = p(() => {
-			let e = D.nodes.filter(U).length, t = `Topology: ${at(D.nodes.length, "resource")}, ${at(K.value.length, "connection")}${e ? `, ${e} with problems` : ""}.`;
+		let jt = p(() => {
+			let e = D.nodes.filter(nt).length, t = `Topology: ${At(D.nodes.length, "resource")}, ${At(U.value.length, "connection")}${e ? `, ${e} with problems` : ""}.`;
 			return [D.title, D.description || t].filter(Boolean).join(". ");
-		}), Q = p(() => N.value ? B.value.get(String(N.value.datum.id)) : void 0), $ = p(() => Q.value ? {
-			node: Q.value,
-			...rt(Q.value.id)
+		}), Mt = p(() => M.value ? z.value.get(String(M.value.datum.id)) : void 0), $ = p(() => Mt.value ? {
+			node: Mt.value,
+			...Dt(Mt.value.id)
 		} : void 0);
-		function st(e) {
-			let t = e.dataType === "node" ? B.value.get(String(e.data?.id)) : void 0;
-			if (!t || !D.tooltip) return ct();
-			N.value = {
+		function Nt(e) {
+			let t = e.dataType === "node" ? z.value.get(String(e.data?.id)) : void 0;
+			if (!t || !D.tooltip) return Pt();
+			M.value = {
 				clientX: e.clientX,
 				clientY: e.clientY,
 				title: t.label,
@@ -418,21 +529,21 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 				index: e.dataIndex
 			};
 		}
-		function ct() {
-			N.value = null;
+		function Pt() {
+			M.value = null;
 		}
-		function lt(e, t) {
-			O.value = O.value === e.id ? null : e.id, Le.value?.focus({ preventScroll: !0 }), je("node-click", e, t);
+		function Ft(e, t) {
+			O.value = O.value === e.id ? null : e.id, Ke.value?.focus({ preventScroll: !0 }), ze("node-click", e, t);
 		}
-		function ut(e) {
+		function It(e) {
 			let t = e;
 			!t.ctrlKey && !t.metaKey && e.stopPropagation();
 		}
-		function dt(e) {
+		function Lt(e) {
 			let t = e;
-			t.type === "touchstart" && t.touches.length > 1 && (L = !0), L || e.stopPropagation(), t.type === "touchend" && !t.touches.length && (L = !1);
+			t.type === "touchstart" && t.touches.length > 1 && (Je = !0), Je || e.stopPropagation(), t.type === "touchend" && !t.touches.length && (Je = !1);
 		}
-		function ft(e) {
+		function Rt(e) {
 			let t = X.chart.value;
 			t && t.dispatchAction({
 				type: "graphRoam",
@@ -442,16 +553,16 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 				originY: t.getHeight() / 2
 			});
 		}
-		function pt() {
-			ft(De);
+		function zt() {
+			Rt(Me);
 		}
-		function mt() {
-			ft(1 / De);
+		function Bt() {
+			Rt(1 / Me);
 		}
-		function ht() {
-			let e = X.chart.value, t = q.value;
+		function Vt() {
+			let e = X.chart.value, t = G.value;
 			if (!e) return;
-			let n = F?.frame === t ? F.zoom : 1, r = Z(e, t.center);
+			let n = F?.frame === t ? F.zoom : 1, r = Q(e, t.center);
 			r && (e.dispatchAction({
 				type: "graphRoam",
 				seriesId: w,
@@ -463,95 +574,152 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 				seriesId: w,
 				dx: t.left + t.width / 2 - r[0],
 				dy: t.top + t.height / 2 - r[1]
-			}), P.value = null);
+			}), N.value = null);
+		}
+		let Ht = p(() => ({
+			min: Math.round(Math.min(k[0], G.value.scale) * 100),
+			max: Math.round(Math.max(k[1], G.value.scale) * 100)
+		}));
+		function Ut(e) {
+			if (!Number.isFinite(e)) return;
+			let { min: t, max: n } = Ht.value;
+			Rt(Math.min(n, Math.max(t, e)) / 100 / (N.value ?? G.value.scale));
+		}
+		function Wt() {
+			let e = Number.parseFloat(P.value);
+			Number.isFinite(e) && Math.round(e) !== K.value && Ut(e), P.value = String(K.value);
 		}
-		let gt = [
+		function Gt(e) {
+			let t = e.shiftKey ? 10 : 1;
+			if (e.key === "Enter") Wt();
+			else if (e.key === "ArrowUp") Ut(K.value + t);
+			else if (e.key === "ArrowDown") Ut(K.value - t);
+			else if (e.key === "Escape") P.value = String(K.value), oe(() => e.target.select());
+			else return;
+			e.preventDefault();
+		}
+		async function Kt(e) {
+			let t = z.value.get(e);
+			if (!t) return !1;
+			let n = t.kind ?? E;
+			j.value.includes(n) && (j.value = j.value.filter((e) => e !== n)), O.value = e, await oe(), await new Promise((e) => requestAnimationFrame(e));
+			let r = X.chart.value, i = G.value.layout.positions.get(e), a = r && i ? Q(r, i) : void 0;
+			if (!r || !a) return !0;
+			let o = D.height - (D.zoom ? Pe : T);
+			return r.dispatchAction({
+				type: "graphRoam",
+				seriesId: w,
+				dx: r.getWidth() / 2 - a[0],
+				dy: (T + o) / 2 - a[1]
+			}), !0;
+		}
+		let qt = [
 			{
 				label: "Zoom out",
-				icon: ye,
-				action: mt
+				icon: Se,
+				action: Bt
 			},
 			{
 				label: "Zoom in",
-				icon: ve,
-				action: pt
+				icon: xe,
+				action: zt
 			},
 			{
 				label: "Fit to view",
-				icon: ge,
-				action: ht
+				icon: ye,
+				action: Vt
 			}
 		];
-		function _t(e) {
+		function Jt(e) {
 			e.key === "Escape" && !e.defaultPrevented && O.value && (e.preventDefault(), O.value = null);
 		}
-		return me(q, () => P.value = null), me(A, (e, t) => {
-			for (let [n, r] of Ne) t?.removeEventListener(n, r, { capture: !0 }), e?.addEventListener(n, r, {
+		return S(G, () => N.value = null), S(K, (e) => P.value = String(e), { immediate: !0 }), S(() => D.highlightOnHover, (e) => !e && Z(null)), S(We, (e, t) => {
+			for (let [n, r] of Be) t?.removeEventListener(n, r, { capture: !0 }), e?.addEventListener(n, r, {
 				capture: !0,
 				passive: !0
 			});
-		}), (n, r) => (y(), te(t, {
+		}), ue(() => clearTimeout(L)), ae({
+			focusNode: Kt,
+			fit: Vt,
+			zoomIn: zt,
+			zoomOut: Bt,
+			zoomTo: Ut
+		}), (n, r) => (y(), m(t, {
 			hidden: j.value,
-			"onUpdate:hidden": r[0] ||= (e) => j.value = e,
-			width: M.value,
-			"onUpdate:width": r[1] ||= (e) => M.value = e,
+			"onUpdate:hidden": r[2] ||= (e) => j.value = e,
+			width: Ge.value,
+			"onUpdate:width": r[3] ||= (e) => Ge.value = e,
 			testid: "ac-graph-chart",
-			height: _.height,
-			loading: _.loading,
-			empty: !_.nodes.length,
-			"empty-text": _.emptyText,
-			"empty-icon": fe(_e),
-			legend: _.legend,
-			"legend-items": nt.value,
-			summary: ot.value,
-			title: _.title,
-			description: _.description,
-			table: it.value,
-			tip: N.value,
-			tooltip: _.tooltip,
-			onKeydown: _t
-		}, ne({
-			tooltip: S(() => [$.value ? ue(n.$slots, "tooltip", se(ae($.value)), () => [
-				g("p", Se, x($.value.node.label), 1),
-				$.value.node.kind ? (y(), h("p", Ce, [g("span", {
+			height: v.height,
+			loading: v.loading,
+			empty: !v.nodes.length,
+			"empty-text": v.emptyText,
+			"empty-icon": me(be),
+			legend: v.legend,
+			"legend-items": Et.value,
+			summary: jt.value,
+			title: v.title,
+			description: v.description,
+			table: kt.value,
+			tip: M.value,
+			tooltip: v.tooltip,
+			onKeydown: Jt
+		}, te({
+			tooltip: C(() => [$.value ? fe(n.$slots, "tooltip", ce(ie($.value)), () => [
+				_("p", Ee, x($.value.node.label), 1),
+				$.value.node.kind ? (y(), g("p", De, [_("span", {
 					class: "size-2 shrink-0 rounded-full",
-					style: ce({ backgroundColor: Ve($.value.node) }),
+					style: le({ backgroundColor: et($.value.node) }),
 					"aria-hidden": "true"
-				}, null, 4), re(" " + x($.value.node.kind), 1)])) : m("", !0),
-				H($.value.node) ? (y(), h("p", {
+				}, null, 4), ne(" " + x($.value.node.kind), 1)])) : h("", !0),
+				tt($.value.node) ? (y(), g("p", {
 					key: 1,
-					class: oe(["mt-1 flex items-center gap-1.5", Fe[V($.value.node.status)]])
-				}, [g("span", {
-					class: oe(["size-2 shrink-0 rounded-full", Ie[V($.value.node.status)]]),
+					class: se(["mt-1 flex items-center gap-1.5", He[B($.value.node.status)]])
+				}, [_("span", {
+					class: se(["size-2 shrink-0 rounded-full", Ue[B($.value.node.status)]]),
 					"aria-hidden": "true"
-				}, null, 2), re(" " + x(H($.value.node)), 1)], 2)) : m("", !0),
-				$.value.node.description ? (y(), h("p", we, x($.value.node.description), 1)) : m("", !0)
-			], void 0, 0) : m("", !0)]),
-			default: S(() => [g("div", {
+				}, null, 2), ne(" " + x(tt($.value.node)), 1)], 2)) : h("", !0),
+				$.value.node.description ? (y(), g("p", Oe, x($.value.node.description), 1)) : h("", !0)
+			], void 0, 0) : h("", !0)]),
+			default: C(() => [_("div", {
 				ref_key: "host",
-				ref: A,
+				ref: We,
 				class: "size-full"
 			}, null, 512)]),
 			_: 2
-		}, [_.zoom ? {
+		}, [v.zoom ? {
 			name: "controls",
-			fn: S(() => [g("div", {
+			fn: C(() => [_("div", {
 				ref_key: "controls",
-				ref: Le,
+				ref: Ke,
 				class: "absolute right-3 bottom-3 flex items-center gap-0.5 rounded-full border border-border bg-surface/90 p-1 shadow-sm backdrop-blur focus:outline-none",
 				role: "group",
 				"aria-label": "Zoom",
 				tabindex: "-1"
-			}, [(y(), h(f, null, le(gt, (t) => (y(), h(f, { key: t.label }, [t.label === "Zoom in" ? (y(), h("span", Te, x(qe.value) + "%", 1)) : m("", !0), ie(e, { content: t.label }, {
-				default: S(() => [g("button", {
+			}, [(y(), g(f, null, de(qt, (t) => (y(), g(f, { key: t.label }, [t.label === "Zoom in" ? (y(), g("label", ke, [_e(_("input", {
+				"onUpdate:modelValue": r[0] ||= (e) => P.value = e,
+				type: "text",
+				inputmode: "numeric",
+				role: "spinbutton",
+				"aria-label": "Zoom percentage",
+				"aria-valuenow": K.value,
+				"aria-valuemin": Ht.value.min,
+				"aria-valuemax": Ht.value.max,
+				"aria-valuetext": `${K.value}%`,
+				class: "m-0 w-[3ch] border-0 bg-transparent p-0 text-right text-xs text-inherit tabular-nums outline-none",
+				onKeydown: Gt,
+				onBlur: Wt,
+				onFocus: r[1] ||= (e) => e.target.select()
+			}, null, 40, Ae), [[ge, P.value]]), r[4] ||= ne("% ", -1)])) : h("", !0), re(e, { content: t.label }, {
+				default: C(() => [_("button", {
 					type: "button",
 					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
 					"aria-label": t.label,
 					onClick: t.action
-				}, [(y(), te(de(t.icon), {
+				}, [(y(), m(pe(t.icon), {
 					class: "size-4",
 					"aria-hidden": "true"
-				}))], 8, Ee)]),
+				}))], 8, je)]),
 				_: 2
 			}, 1032, ["content"])], 64))), 64))], 512)]),
 			key: "0"
@@ -575,4 +743,4 @@ var Se = { class: "font-medium text-heading" }, Ce = {
 	}
 });
 //#endregion
-export { D as default };
+export { Re as default };