@sleetdrop/dsh-plugin-topology 0.4.0 → 0.5.0

package/lib/client.js

@@ -4392,6 +4392,7 @@ const render_parameter_0$schema = union([
 	literal("svg")
 ]);
 const render_parameter_1$schema = union([literal("TB"), literal("LR")]);
+const render_parameter_2$schema = union([literal("light"), literal("dark")]).optional();
 const render_result$schema = string();
 const TYPERT_REMOTE = {
 	package: "@sleetdrop/dsh-plugin-topology",
@@ -4413,25 +4414,39 @@ const TYPERT_REMOTE = {
 		namespace: "pluginTopology",
 		method: "render",
 		invocation: { kind: "direct" },
-		parameters: [{
-			name: "format",
-			wire: "format",
-			source: "json",
-			codec: {
-				mode: "strict",
-				typeSymbol: "@sleetdrop/dsh-plugin-topology/types#RenderFormat",
-				create: () => render_parameter_0$schema
-			}
-		}, {
-			name: "rankdir",
-			wire: "rankdir",
-			source: "json",
-			codec: {
-				mode: "strict",
-				typeSymbol: "@sleetdrop/dsh-plugin-topology/types#Rankdir",
-				create: () => render_parameter_1$schema
+		parameters: [
+			{
+				name: "format",
+				wire: "format",
+				source: "json",
+				codec: {
+					mode: "strict",
+					typeSymbol: "@sleetdrop/dsh-plugin-topology/types#RenderFormat",
+					create: () => render_parameter_0$schema
+				}
+			},
+			{
+				name: "rankdir",
+				wire: "rankdir",
+				source: "json",
+				codec: {
+					mode: "strict",
+					typeSymbol: "@sleetdrop/dsh-plugin-topology/types#Rankdir",
+					create: () => render_parameter_1$schema
+				}
+			},
+			{
+				name: "theme",
+				wire: "theme",
+				source: "json",
+				acceptsUndefined: true,
+				codec: {
+					mode: "strict",
+					typeSymbol: "@sleetdrop/dsh-plugin-topology/types#Theme",
+					create: () => render_parameter_2$schema
+				}
 			}
-		}],
+		],
 		result: {
 			mode: "strict",
 			typeSymbol: "@sleetdrop/dsh-plugin-topology#pluginTopology/render:result",
@@ -4627,13 +4642,13 @@ function OutlineButton({ children, onClick, title, icon }) {
 
 //#endregion
 //#region \0dsh-css:/Users/jiangyuan/Documents/side-work/dsh-plugin-topology/src/client/TopologyGraphView.module.css.mjs
-const css$2 = ".s3EGUG_graphBox{flex-direction:column;min-height:0;display:flex;position:relative}.s3EGUG_graphViewport{cursor:grab;border:1px solid var(--dsw-border,#cbd5e1);background:#fff;border-radius:8px;flex:1;min-height:0;position:relative;overflow:hidden}.s3EGUG_graphViewport:active{cursor:grabbing}.s3EGUG_graphImg{transform-origin:0 0;user-select:none;pointer-events:none;position:absolute;top:0;left:0}.s3EGUG_zoomControls{border:1px solid var(--dsw-border,#cbd5e1);background:var(--dsw-surface,#fff);border-radius:8px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:12px;right:12px;box-shadow:0 6px 16px #00000014}.s3EGUG_zoomControls button{color:var(--dsw-text-secondary,#64748b);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.s3EGUG_zoomControls button:hover{color:var(--dsw-text-primary,#0f172a);border-color:var(--dsw-border,#cbd5e1)}.s3EGUG_zoomControls .s3EGUG_iconButton{width:24px;height:24px}.s3EGUG_zoomControls .s3EGUG_zoomButton{transition:opacity .15s,width .15s}.s3EGUG_zoomLevel{text-align:center;min-width:46px;height:22px;color:var(--dsw-text-secondary,#64748b);padding:0 4px;font-size:11px;line-height:1;transition:opacity .15s,width .15s}.s3EGUG_zoomLevel:hover{color:var(--dsw-text-primary,#0f172a)}.s3EGUG_zoomControls.s3EGUG_collapsed .s3EGUG_zoomButton,.s3EGUG_zoomControls.s3EGUG_collapsed .s3EGUG_zoomLevel{opacity:0;pointer-events:none;border:0;width:0;min-width:0;height:0;margin:0;padding:0;overflow:hidden}";
-const tagId$2 = "dsh-plugin-topology/TopologyGraphView.module.css";
-if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$2) + "]") === null) {
+const css$3 = ".s3EGUG_graphBox{flex-direction:column;min-height:0;display:flex;position:relative}.s3EGUG_graphViewport{cursor:grab;background:var(--dsw-alias-bg-layer-1,#fff);border:1px solid var(--dsw-alias-border-l2,#0000001a);border-radius:8px;flex:1;min-height:0;position:relative;overflow:hidden}.s3EGUG_graphViewport:active{cursor:grabbing}.s3EGUG_graphImg{transform-origin:0 0;user-select:none;width:max-content;position:absolute;top:0;left:0}.s3EGUG_graphImg .topo-hover-node>ellipse,.s3EGUG_graphImg .topo-hover-node>polygon{stroke:var(--dsw-alias-state-business-primary,#4176e6);stroke-opacity:.5;stroke-width:1.6px}.s3EGUG_graphImg .topo-selected-node>ellipse,.s3EGUG_graphImg .topo-selected-node>polygon,.s3EGUG_graphImg .topo-hl-node>ellipse,.s3EGUG_graphImg .topo-hl-node>polygon{stroke:var(--dsw-alias-state-business-primary,#4176e6);stroke-opacity:1;stroke-width:2.2px}.s3EGUG_graphImg .topo-hl-neighbor>ellipse,.s3EGUG_graphImg .topo-hl-neighbor>polygon{stroke:var(--dsw-alias-state-business-primary,#4176e6);stroke-opacity:.45;stroke-width:1.4px}.s3EGUG_graphImg .topo-hl-edge path{fill:none;stroke:var(--dsw-alias-state-business-primary,#4176e6);stroke-opacity:1;stroke-width:1.4px}.s3EGUG_graphImg .topo-hl-edge polygon{stroke:var(--dsw-alias-state-business-primary,#4176e6);stroke-opacity:1;fill:var(--dsw-alias-state-business-primary,#4176e6);fill-opacity:1}.s3EGUG_graphImg .topo-hl-edge text{fill:var(--dsw-alias-state-business-primary,#4176e6);fill-opacity:1}.s3EGUG_graphImg .topo-dimmed{opacity:.12}.s3EGUG_graphImg .topo-hover-node,.s3EGUG_graphImg .topo-selected-node,.s3EGUG_graphImg .topo-hl-node,.s3EGUG_graphImg .topo-hl-neighbor,.s3EGUG_graphImg .topo-hl-edge,.s3EGUG_graphImg .topo-dimmed{transition-property:opacity,stroke,stroke-opacity,stroke-width,fill,fill-opacity;transition-duration:.12s;transition-timing-function:ease}.s3EGUG_zoomControls{border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-layer-2,#fff);border-radius:8px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:12px;right:12px;box-shadow:0 6px 16px #00000014}.s3EGUG_zoomControls button{color:var(--dsw-alias-label-secondary,#61666b);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.s3EGUG_zoomControls button:hover{color:var(--dsw-alias-label-primary,#0f1115);border-color:var(--dsw-alias-border-l2,#0000001a)}.s3EGUG_zoomControls .s3EGUG_iconButton{width:24px;height:24px}.s3EGUG_zoomControls .s3EGUG_zoomButton{transition:opacity .15s,width .15s}.s3EGUG_zoomLevel{text-align:center;min-width:46px;height:22px;color:var(--dsw-alias-label-secondary,#61666b);padding:0 4px;font-size:11px;line-height:1;transition:opacity .15s,width .15s}.s3EGUG_zoomLevel:hover{color:var(--dsw-alias-label-primary,#0f1115)}.s3EGUG_zoomControls.s3EGUG_collapsed .s3EGUG_zoomButton,.s3EGUG_zoomControls.s3EGUG_collapsed .s3EGUG_zoomLevel{opacity:0;pointer-events:none;border:0;width:0;min-width:0;height:0;margin:0;padding:0;overflow:hidden}";
+const tagId$3 = "dsh-plugin-topology/TopologyGraphView.module.css";
+if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
 	const tag = document.createElement("style");
 	tag.dataset.plugin = "dsh-plugin-topology";
-	tag.dataset.pluginCss = tagId$2;
-	tag.textContent = css$2;
+	tag.dataset.pluginCss = tagId$3;
+	tag.textContent = css$3;
 	document.head.appendChild(tag);
 }
 var TopologyGraphView_module_css_default = {
@@ -4649,6 +4664,178 @@ var TopologyGraphView_module_css_default = {
 
 //#endregion
 //#region src/client/TopologyGraphView.tsx
+/**
+* Classes owned and toggled by the highlight layer. The hover ring is managed
+* separately by the pointer listener so a selection repaint cannot drop it.
+*/
+const HIGHLIGHT_CLASSES = [
+	"topo-selected-node",
+	"topo-hl-node",
+	"topo-hl-neighbor",
+	"topo-hl-edge",
+	"topo-dimmed"
+];
+/** Read the DOT node id and display label from a Graphviz node group. */
+function nodeRefFromElement(element) {
+	if (!(element instanceof Element)) return null;
+	const group = element.closest("g.node");
+	if (group === null) return null;
+	const dotId = group.querySelector(":scope > title")?.textContent;
+	if (dotId === null || dotId === void 0) return null;
+	const label = group.querySelector(":scope > text")?.textContent ?? dotId;
+	return {
+		ref: {
+			key: group.id,
+			dotId,
+			label
+		},
+		group
+	};
+}
+/**
+* The nearest ancestor `<g>` that wraps one whole Graphviz layout (main or
+* isolated). `composeGraphvizSvgs` places each layout in its own translated
+* group, so this is also the isolation boundary: `m:N` ids are only unique
+* inside one layout and must not be matched across both.
+*/
+function graphScope(node) {
+	let current = node;
+	while (current.parentElement !== null && current.parentElement.tagName.toLowerCase() !== "svg") current = current.parentElement;
+	return current;
+}
+/** Split a Graphviz edge `<title>` (`source-&gt;target`) into its endpoints. */
+function edgeEndpoints(edge) {
+	const title = edge.querySelector(":scope > title")?.textContent;
+	if (title === null || title === void 0) return null;
+	const arrowIdx = title.indexOf("->");
+	if (arrowIdx < 0) return null;
+	return {
+		source: title.slice(0, arrowIdx),
+		target: title.slice(arrowIdx + 2)
+	};
+}
+/** Count the drawn outgoing/incoming edges of a node inside one layout scope. */
+function edgeStats(scope, dotId) {
+	let out = 0;
+	let incoming = 0;
+	for (const edge of scope.querySelectorAll("g.edge")) {
+		const endpoints = edgeEndpoints(edge);
+		if (endpoints === null) continue;
+		if (endpoints.source === dotId) out += 1;
+		if (endpoints.target === dotId) incoming += 1;
+	}
+	return {
+		out,
+		in: incoming
+	};
+}
+/** Find the node group with the given stable element id. */
+function findNodeGroup(container, key) {
+	for (const group of container.querySelectorAll("g.node")) if (group.id === key) return group;
+	return null;
+}
+/** Drop every highlight class this module owns. */
+function clearHighlight(container) {
+	const selector = HIGHLIGHT_CLASSES.map((name) => `.${name}`).join(",");
+	for (const element of container.querySelectorAll(selector)) element.classList.remove(...HIGHLIGHT_CLASSES);
+}
+/**
+* Paint the selection: the selected node always gets a marker ring; when a
+* direction is active, only that direction's edges and their far-end nodes stay
+* lit while the rest of the same layout dims. The other layout (isolated
+* plugins) is left untouched, since it has no edges to follow.
+*/
+function applyHighlight(container, selection) {
+	clearHighlight(container);
+	if (selection === null) return;
+	const group = findNodeGroup(container, selection.key);
+	if (group === null) return;
+	group.classList.add("topo-selected-node");
+	if (selection.direction === null) return;
+	const scope = graphScope(group);
+	const lit = new Set([selection.dotId]);
+	const connectedEdges = /* @__PURE__ */ new Set();
+	for (const edge of scope.querySelectorAll("g.edge")) {
+		const endpoints = edgeEndpoints(edge);
+		if (endpoints === null) continue;
+		if (!(selection.direction === "out" ? endpoints.source === selection.dotId : endpoints.target === selection.dotId)) continue;
+		connectedEdges.add(edge);
+		lit.add(endpoints.source);
+		lit.add(endpoints.target);
+	}
+	group.classList.add("topo-hl-node");
+	for (const node of scope.querySelectorAll("g.node")) {
+		if (node === group) continue;
+		const dotId = node.querySelector(":scope > title")?.textContent;
+		if (dotId !== null && dotId !== void 0 && lit.has(dotId)) node.classList.add("topo-hl-neighbor");
+		else node.classList.add("topo-dimmed");
+	}
+	for (const edge of scope.querySelectorAll("g.edge")) edge.classList.add(connectedEdges.has(edge) ? "topo-hl-edge" : "topo-dimmed");
+}
+/**
+* Inline SVG renderer. Encapsulates the raw HTML injection behind a meaningful
+* component name so readers are not startled by the React API at call sites.
+* Hover and highlight are applied as classes on the Graphviz DOM, which React
+* does not own; the exported SVG string itself stays free of listeners.
+*/
+function SvgCanvas({ svg, alt, fitted, view, selectedKey, selectedDotId, direction }) {
+	const containerRef = (0, react.useRef)(null);
+	/** The group currently carrying the hover ring, to avoid redundant DOM work. */
+	const hoveredRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		if (container === null) return;
+		applyHighlight(container, selectedKey !== null && selectedDotId !== null ? {
+			key: selectedKey,
+			dotId: selectedDotId,
+			direction
+		} : null);
+	}, [
+		selectedKey,
+		selectedDotId,
+		direction,
+		svg
+	]);
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		if (container === null) return;
+		hoveredRef.current = null;
+		const onMouseOver = (event) => {
+			const found = nodeRefFromElement(event.target);
+			if (found === null || found.group === hoveredRef.current) return;
+			hoveredRef.current?.classList.remove("topo-hover-node");
+			hoveredRef.current = found.group;
+			found.group.classList.add("topo-hover-node");
+			container.style.cursor = "pointer";
+		};
+		const onMouseOut = (event) => {
+			const hovered = hoveredRef.current;
+			if (hovered === null) return;
+			const related = event.relatedTarget;
+			if (related !== null && hovered.contains(related)) return;
+			hovered.classList.remove("topo-hover-node");
+			hoveredRef.current = null;
+			container.style.cursor = "";
+		};
+		container.addEventListener("mouseover", onMouseOver);
+		container.addEventListener("mouseout", onMouseOut);
+		return () => {
+			container.removeEventListener("mouseover", onMouseOver);
+			container.removeEventListener("mouseout", onMouseOut);
+		};
+	}, [svg]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		className: TopologyGraphView_module_css_default.graphImg,
+		role: "img",
+		"aria-label": alt,
+		style: {
+			opacity: fitted ? 1 : 0,
+			transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})`
+		},
+		dangerouslySetInnerHTML: { __html: svg }
+	});
+}
 const MIN_K = .05;
 /** A fit never shrinks below this scale, so the default and reset land at actual size. */
 const MIN_FIT_K = 1;
@@ -4673,13 +4860,16 @@ function fitView(containerWidth, containerHeight, naturalWidth, naturalHeight) {
 	};
 }
 /**
-* Pan/zoom SVG viewer: fit-and-center on load, wheel zooms toward the cursor,
-* drag pans, double-click zooms toward the cursor, and a compact floating pill
-* (fit / zoom-out / zoom-level / zoom-in) collapses to just the fit control at
-* rest. The transform is written back to the parent store on every change so it
-* survives panel close/reopen.
+* Pan/zoom SVG viewer with drill-down interaction. Fit-and-center on load,
+* wheel zooms toward the cursor, drag pans, double-click zooms toward the
+* cursor, and a compact floating pill (fit / zoom-out / zoom-level / zoom-in)
+* collapses to just the fit control at rest.
+*
+* Hovering a node raises a ring; tapping it fires onNodeClick with viewport
+* coordinates and the drawn deg⁺/deg⁻ counts. Tapping empty space fires
+* onEmptyClick. `direction` lights only the chosen dependency direction.
 */
-function TopologyGraphView({ svg, alt, height, transform: transform$1, onTransformChange, zoomInLabel, zoomOutLabel, resetViewLabel, zoomLevelLabel }) {
+function TopologyGraphView({ svg, alt, height, transform: transform$1, onTransformChange, zoomInLabel, zoomOutLabel, resetViewLabel, zoomLevelLabel, onNodeClick, onEmptyClick, selectedKey, selectedDotId, direction }) {
 	const containerRef = (0, react.useRef)(null);
 	const naturalRef = (0, react.useRef)(null);
 	const dragRef = (0, react.useRef)(null);
@@ -4750,15 +4940,23 @@ function TopologyGraphView({ svg, alt, height, transform: transform$1, onTransfo
 		});
 		setAtFit(false);
 	}, [onTransformChange]);
-	const onLoad = (event) => {
-		const img = event.currentTarget;
-		naturalRef.current = {
-			width: img.naturalWidth,
-			height: img.naturalHeight
-		};
-		if (transform$1 === null) fit();
-		setFitted(true);
-	};
+	(0, react.useEffect)(() => {
+		const match = svg.match(/viewBox="[\d.]+ [\d.]+ ([\d.]+) ([\d.]+)"/);
+		if (match !== null) {
+			naturalRef.current = {
+				width: parseFloat(match[1] ?? "0"),
+				height: parseFloat(match[2] ?? "0")
+			};
+			if (transform$1 === null) requestAnimationFrame(() => {
+				fit();
+			});
+			setFitted(true);
+		}
+	}, [
+		svg,
+		transform$1,
+		fit
+	]);
 	(0, react.useEffect)(() => {
 		const element = containerRef.current;
 		if (element === null) return;
@@ -4860,22 +5058,46 @@ function TopologyGraphView({ svg, alt, height, transform: transform$1, onTransfo
 			startX: event.clientX,
 			startY: event.clientY,
 			baseX: view.x,
-			baseY: view.y
+			baseY: view.y,
+			moved: false
 		};
 		event.currentTarget.setPointerCapture(event.pointerId);
 	};
 	const onPointerMove = (event) => {
 		const drag = dragRef.current;
 		if (drag === null || drag.pointerId !== event.pointerId) return;
+		const dx = event.clientX - drag.startX;
+		const dy = event.clientY - drag.startY;
+		if (!drag.moved && Math.abs(dx) < 3 && Math.abs(dy) < 3) return;
+		drag.moved = true;
 		commit({
 			...view,
-			x: drag.baseX + (event.clientX - drag.startX),
-			y: drag.baseY + (event.clientY - drag.startY)
+			x: drag.baseX + dx,
+			y: drag.baseY + dy
 		});
 		setAtFit(false);
 	};
 	const onPointerEnd = (event) => {
-		if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
+		const drag = dragRef.current;
+		if (drag === null || drag.pointerId !== event.pointerId) return;
+		if (!drag.moved) {
+			const found = nodeRefFromElement(document.elementFromPoint(event.clientX, event.clientY));
+			const container = containerRef.current;
+			if (found !== null && container !== null && onNodeClick !== void 0) {
+				const rect = container.getBoundingClientRect();
+				const stats = edgeStats(graphScope(found.group), found.ref.dotId);
+				onNodeClick({
+					key: found.ref.key,
+					nodeId: found.ref.dotId,
+					label: found.ref.label,
+					anchorX: (event.clientX - rect.left - view.x) / view.k,
+					anchorY: (event.clientY - rect.top - view.y) / view.k,
+					outCount: stats.out,
+					inCount: stats.in
+				});
+			} else if (found === null && onEmptyClick !== void 0) onEmptyClick();
+		}
+		dragRef.current = null;
 	};
 	const onDoubleClick = (event) => {
 		const element = containerRef.current;
@@ -4898,7 +5120,6 @@ function TopologyGraphView({ svg, alt, height, transform: transform$1, onTransfo
 		} else fit();
 	};
 	const collapsed = atFit && !panelHovered;
-	const src = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: TopologyGraphView_module_css_default.graphBox,
 		style: { height },
@@ -4916,16 +5137,14 @@ function TopologyGraphView({ svg, alt, height, transform: transform$1, onTransfo
 			onPointerLeave: () => {
 				setViewportHovered(false);
 			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				className: TopologyGraphView_module_css_default.graphImg,
-				src,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgCanvas, {
+				svg,
 				alt,
-				draggable: false,
-				onLoad,
-				style: {
-					opacity: fitted ? 1 : 0,
-					transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})`
-				}
+				fitted,
+				view,
+				selectedKey: selectedKey ?? null,
+				selectedDotId: selectedDotId ?? null,
+				direction: direction ?? null
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: collapsed ? `${TopologyGraphView_module_css_default.zoomControls} ${TopologyGraphView_module_css_default.collapsed}` : TopologyGraphView_module_css_default.zoomControls,
@@ -4977,9 +5196,215 @@ function TopologyGraphView({ svg, alt, height, transform: transform$1, onTransfo
 	});
 }
 
+//#endregion
+//#region \0dsh-css:/Users/jiangyuan/Documents/side-work/dsh-plugin-topology/src/client/NodePopover.module.css.mjs
+const css$2 = ".iw1Z3a_popover{z-index:10;border:1px solid var(--dsw-alias-border-l3,#0000001f);background:var(--dsw-alias-bg-layer-2,#fff);pointer-events:auto;border-radius:8px;flex-direction:column;gap:6px;min-width:180px;max-width:280px;padding:10px 12px;font-size:12px;display:flex;position:absolute;box-shadow:0 8px 24px #0000001f}.iw1Z3a_header{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.iw1Z3a_nameLink{color:var(--dsw-alias-state-business-primary,#4176e6);word-break:break-word;font-size:13px;font-weight:600;line-height:1.3;text-decoration:none}.iw1Z3a_nameLink:hover{text-decoration:underline}.iw1Z3a_namePlain{color:var(--dsw-alias-label-primary,#0f172a);word-break:break-word;font-size:13px;font-weight:600;line-height:1.3}.iw1Z3a_closeButton{width:18px;height:18px;color:var(--dsw-alias-label-secondary,#61666b);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.iw1Z3a_closeButton:hover{background:var(--dsw-alias-interactive-bg-hover,#2631480f);color:var(--dsw-alias-label-primary,#0f1115)}.iw1Z3a_metaRow{align-items:center;gap:6px;display:flex}.iw1Z3a_stateBadge{border-radius:4px;width:fit-content;padding:1px 6px;font-size:10px;font-weight:500;line-height:1.5;display:inline-block}.iw1Z3a_stateActive{background:var(--dsw-alias-state-business-tertiary,#e4edfd);color:var(--dsw-alias-state-business-primary,#4176e6)}.iw1Z3a_stateFailed{background:var(--dsw-alias-interactive-bg-hover-danger,#ec13130d);color:var(--dsw-alias-state-error-primary,#ec1313)}.iw1Z3a_stateOther{background:var(--dsw-alias-interactive-bg-hover,#2631480f);color:var(--dsw-alias-label-secondary,#61666b)}.iw1Z3a_row{align-items:baseline;gap:6px;display:flex}.iw1Z3a_rowLabel{color:var(--dsw-alias-label-secondary,#61666b);white-space:nowrap;font-size:11px}.iw1Z3a_rowValue{color:var(--dsw-alias-label-primary,#0f1115);word-break:break-all;font-size:11px}.iw1Z3a_sourceValue{font-family:var(--ds-font-family-code,monospace);font-size:10px}.iw1Z3a_depPills{gap:6px;margin-top:2px;display:flex}.iw1Z3a_depPill{border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-interactive-bg-hover,#2631480f);color:var(--dsw-alias-label-secondary,#61666b);cursor:pointer;border-radius:999px;align-items:center;gap:5px;padding:2px 9px;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.iw1Z3a_depPill:hover:not(:disabled){border-color:var(--dsw-alias-state-business-primary,#4176e6);color:var(--dsw-alias-state-business-primary,#4176e6)}.iw1Z3a_depPill:disabled{opacity:.4;cursor:default}.iw1Z3a_depPillActive,.iw1Z3a_depPillActive:hover:not(:disabled){border-color:var(--dsw-alias-state-business-primary,#4176e6);background:color-mix(in srgb, var(--dsw-alias-state-business-primary,#4176e6) 14%, transparent);color:var(--dsw-alias-state-business-primary,#4176e6)}.iw1Z3a_degMark{font-size:11px;line-height:1}.iw1Z3a_degValue{font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;line-height:1}.iw1Z3a_unresolvedBadge{background:var(--dsw-alias-interactive-bg-hover-danger,#ec13130d);color:var(--dsw-alias-state-error-primary,#ec1313);border-radius:3px;padding:1px 5px;font-size:10px;font-weight:500;display:inline-block}";
+const tagId$2 = "dsh-plugin-topology/NodePopover.module.css";
+if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$2) + "]") === null) {
+	const tag = document.createElement("style");
+	tag.dataset.plugin = "dsh-plugin-topology";
+	tag.dataset.pluginCss = tagId$2;
+	tag.textContent = css$2;
+	document.head.appendChild(tag);
+}
+var NodePopover_module_css_default = {
+	"closeButton": "iw1Z3a_closeButton",
+	"degMark": "iw1Z3a_degMark",
+	"degValue": "iw1Z3a_degValue",
+	"depPill": "iw1Z3a_depPill",
+	"depPillActive": "iw1Z3a_depPillActive",
+	"depPills": "iw1Z3a_depPills",
+	"header": "iw1Z3a_header",
+	"metaRow": "iw1Z3a_metaRow",
+	"nameLink": "iw1Z3a_nameLink",
+	"namePlain": "iw1Z3a_namePlain",
+	"popover": "iw1Z3a_popover",
+	"row": "iw1Z3a_row",
+	"rowLabel": "iw1Z3a_rowLabel",
+	"rowValue": "iw1Z3a_rowValue",
+	"sourceValue": "iw1Z3a_sourceValue",
+	"stateActive": "iw1Z3a_stateActive",
+	"stateBadge": "iw1Z3a_stateBadge",
+	"stateFailed": "iw1Z3a_stateFailed",
+	"stateOther": "iw1Z3a_stateOther",
+	"unresolvedBadge": "iw1Z3a_unresolvedBadge"
+};
+
+//#endregion
+//#region src/client/NodePopover.tsx
+/** Gap between the anchor and the card's top-left corner, in px. */
+const OFFSET = 8;
+/** Build an npm registry URL from a source specifier, or null for local paths. */
+function npmUrl(source) {
+	if (source === void 0) return null;
+	if (source.startsWith("/") || source.startsWith(".") || source.includes(":\\")) return null;
+	return `https://www.npmjs.com/package/${encodeURIComponent(source)}`;
+}
+function stateBadgeClass(state) {
+	if (state === "ACTIVE") return `${NodePopover_module_css_default.stateBadge} ${NodePopover_module_css_default.stateActive}`;
+	if (state === "FAILED") return `${NodePopover_module_css_default.stateBadge} ${NodePopover_module_css_default.stateFailed}`;
+	return `${NodePopover_module_css_default.stateBadge} ${NodePopover_module_css_default.stateOther}`;
+}
+/** The worst lifecycle state in a group, so a broken instance is never hidden. */
+function worstState(states) {
+	if (states.includes("FAILED")) return "FAILED";
+	if (states.includes("PENDING")) return "PENDING";
+	return states[0] ?? "ACTIVE";
+}
+/**
+* Resolve the runtime facts the panel shows. Single instances map straight to a
+* snapshot node; merged render nodes (`m:N`, several same-named instances drawn
+* as one) are recovered from the ordinals in the rendered label.
+*/
+function resolveNode(nodeId, svgLabel, analysis) {
+	const direct = analysis.collapsed.nodes.find((node) => node.id === nodeId);
+	if (direct !== void 0) return {
+		node: direct,
+		unresolved: analysis.graph.unresolved.filter((dep) => dep.plugin === nodeId).length
+	};
+	const bracket = svgLabel.match(/\[([^\]]*)\]\s*$/);
+	const baseName = svgLabel.replace(/\s*\[[^\]]*\]\s*$/, "").trim();
+	const ordinals = bracket === null ? [] : bracket[1].split(",").map((part) => part.trim()).filter((part) => part !== "" && part !== "…");
+	let members = analysis.collapsed.nodes.filter((node) => node.label === baseName);
+	if (ordinals.length > 0) {
+		const wanted = new Set(ordinals.map((ordinal) => `p:${ordinal}`));
+		const matched = members.filter((node) => wanted.has(node.id));
+		if (matched.length > 0) members = matched;
+	}
+	const source = members.find((member) => member.source !== void 0)?.source;
+	return {
+		node: {
+			id: nodeId,
+			kind: "plugin",
+			label: baseName === "" ? svgLabel : baseName,
+			state: worstState(members.map((member) => member.state)),
+			parent: null,
+			inject: [],
+			...source === void 0 ? {} : { source }
+		},
+		unresolved: members.reduce((total, member) => total + analysis.graph.unresolved.filter((dep) => dep.plugin === member.id).length, 0)
+	};
+}
+/**
+* Floating detail card anchored to a clicked graph node. It shows only facts
+* that need the running process to know (state, load source, drawn in/out
+* degree) and links the name out to npm for everything else. The deg⁺/deg⁻
+* pills drive the graph highlight, so the panel itself stays a one-screen read.
+*/
+function NodePopover({ popover, analysis, direction, onToggleDirection, onClose, t }) {
+	const ref = (0, react.useRef)(null);
+	const { node, unresolved } = resolveNode(popover.nodeId, popover.label, analysis);
+	const url = npmUrl(node.source);
+	(0, react.useEffect)(() => {
+		const el = ref.current;
+		if (el === null) return;
+		const parent = el.parentElement;
+		if (parent === null) return;
+		const bounds = parent.getBoundingClientRect();
+		const own = el.getBoundingClientRect();
+		const maxLeft = Math.max(OFFSET, bounds.width - own.width - OFFSET);
+		const maxTop = Math.max(OFFSET, bounds.height - own.height - OFFSET);
+		el.style.left = `${Math.min(Math.max(OFFSET, popover.x + OFFSET), maxLeft)}px`;
+		el.style.top = `${Math.min(Math.max(OFFSET, popover.y + OFFSET), maxTop)}px`;
+	}, [popover.x, popover.y]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: NodePopover_module_css_default.popover,
+		style: {
+			left: popover.x + OFFSET,
+			top: popover.y + OFFSET
+		},
+		role: "dialog",
+		"aria-label": node.label,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: NodePopover_module_css_default.header,
+				children: [url !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					className: NodePopover_module_css_default.nameLink,
+					href: url,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					children: node.label
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: NodePopover_module_css_default.namePlain,
+					children: node.label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: NodePopover_module_css_default.closeButton,
+					onClick: onClose,
+					"aria-label": t("popoverClose"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCloseOutline16, { size: 12 })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: NodePopover_module_css_default.metaRow,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: stateBadgeClass(node.state),
+					children: node.state
+				}), unresolved > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: NodePopover_module_css_default.unresolvedBadge,
+					children: [
+						t("popoverUnresolved"),
+						" ",
+						unresolved
+					]
+				})]
+			}),
+			node.source !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: NodePopover_module_css_default.row,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: NodePopover_module_css_default.rowLabel,
+					children: t("popoverSource")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `${NodePopover_module_css_default.rowValue} ${NodePopover_module_css_default.sourceValue}`,
+					children: node.source
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: NodePopover_module_css_default.depPills,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: direction === "out" ? `${NodePopover_module_css_default.depPill} ${NodePopover_module_css_default.depPillActive}` : NodePopover_module_css_default.depPill,
+					"aria-pressed": direction === "out",
+					"aria-label": t("popoverOutgoing"),
+					title: t("popoverOutgoing"),
+					disabled: popover.outCount === 0,
+					onClick: () => {
+						onToggleDirection("out");
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: NodePopover_module_css_default.degMark,
+						children: "deg⁺"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: NodePopover_module_css_default.degValue,
+						children: popover.outCount
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: direction === "in" ? `${NodePopover_module_css_default.depPill} ${NodePopover_module_css_default.depPillActive}` : NodePopover_module_css_default.depPill,
+					"aria-pressed": direction === "in",
+					"aria-label": t("popoverIncoming"),
+					title: t("popoverIncoming"),
+					disabled: popover.inCount === 0,
+					onClick: () => {
+						onToggleDirection("in");
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: NodePopover_module_css_default.degMark,
+						children: "deg⁻"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: NodePopover_module_css_default.degValue,
+						children: popover.inCount
+					})]
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region \0dsh-css:/Users/jiangyuan/Documents/side-work/dsh-plugin-topology/src/client/TopologyView.module.css.mjs
-const css$1 = ".rve-MG_root{box-sizing:border-box;width:100%;height:100%;min-height:0;padding:var(--dsw-space-4,16px);gap:var(--dsw-space-3,12px);flex-direction:column;display:flex;overflow:hidden}.rve-MG_status{color:var(--dsw-text-secondary,#64748b);margin:0}.rve-MG_failure{align-items:flex-start;gap:var(--dsw-space-2,8px);flex-direction:column;display:flex}.rve-MG_errorDetail{background:var(--dsw-surface-hover,#f1f5f9);max-width:100%;font-family:var(--ds-font-family-code,monospace);color:var(--dsw-alias-state-error-primary,#dc2626);white-space:pre-wrap;word-break:break-all;border-radius:6px;margin:0;padding:8px 10px;font-size:11px;line-height:1.5;overflow:auto}.rve-MG_toolbar{justify-content:space-between;align-items:center;gap:var(--dsw-space-3,12px);display:flex}.rve-MG_summaryGroup{align-items:center;gap:6px;min-width:0;display:flex}.rve-MG_actions{justify-content:flex-end;align-items:center;gap:var(--dsw-space-2,8px);flex-wrap:wrap;flex-shrink:0;display:flex}.rve-MG_rankdirGroup{border:1px solid var(--dsw-border,#cbd5e1);background:var(--dsw-surface,#fff);border-radius:6px;align-items:center;gap:0;padding:2px;display:inline-flex}.rve-MG_rankdirOption{min-width:32px;height:22px;color:var(--dsw-text-secondary,#64748b);text-align:center;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:0 8px;font-size:11px}.rve-MG_rankdirOption[aria-pressed=true]{background:var(--dsw-alias-state-business-primary,#3b82f6);color:#fff;font-weight:500}.rve-MG_metricStrip{flex-wrap:wrap;align-items:center;gap:6px 20px;padding:2px 0;display:flex}.rve-MG_stat{align-items:center;gap:6px;display:inline-flex}.rve-MG_statLabel{color:var(--dsw-text-secondary,#64748b);font-size:12px}.rve-MG_statValue{font-variant-numeric:tabular-nums;color:var(--dsw-text-primary,#0f172a);font-size:15px;font-weight:600;line-height:1}.rve-MG_statAlert .rve-MG_statValue{color:var(--dsw-alias-state-error-primary,#dc2626)}.rve-MG_statToggle{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:0;display:inline-flex}.rve-MG_statChevron{color:var(--dsw-text-secondary,#64748b);transition:transform .15s}.rve-MG_statChevronOpen{transform:rotate(180deg)}.rve-MG_unresolvedPanel{border:1px solid var(--dsw-border,#cbd5e1);background:var(--dsw-surface,#fff);border-radius:8px;overflow:hidden}.rve-MG_unresolvedScroll{max-height:260px;overflow-y:auto}.rve-MG_unresolvedTable{table-layout:fixed;border-collapse:collapse;width:100%;font-size:12px}.rve-MG_unresolvedTable th,.rve-MG_unresolvedTable td{text-align:left;padding:8px 12px}.rve-MG_unresolvedTable thead th{z-index:1;background:var(--dsw-surface,#fff);color:var(--dsw-text-secondary,#64748b);border-bottom:1px solid var(--dsw-border,#cbd5e1);font-size:11px;font-weight:500;position:sticky;top:0}.rve-MG_unresolvedTable tbody tr+tr td{border-top:1px solid var(--dsw-border,#cbd5e1)}.rve-MG_unresolvedTable .rve-MG_unresolvedColPlugin{width:180px}.rve-MG_unresolvedTable .rve-MG_unresolvedColState{width:110px}.rve-MG_unresolvedPlugin{font-family:var(--ds-font-family-code,monospace);color:var(--dsw-text-primary,#0f172a);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.rve-MG_unresolvedState{color:var(--dsw-text-secondary,#64748b);white-space:nowrap;font-size:11px}.rve-MG_unresolvedService{font-family:var(--ds-font-family-code,monospace);color:var(--dsw-alias-state-error-primary,#dc2626);overflow-wrap:anywhere}.rve-MG_legend{color:var(--dsw-text-secondary,#64748b);flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:11px;display:flex}.rve-MG_legendItem{align-items:center;gap:6px;display:inline-flex}.rve-MG_legendSwatch{flex:none;display:inline-block}.rve-MG_legendUnresolvedBox{border:1.5px solid var(--dsw-alias-state-error-primary,#dc2626);background:var(--dsw-surface,#fff);border-radius:50%;width:12px;height:12px}.rve-MG_legendIsolatedBox{background:#f8fafc;border:1px dashed #94a3b8;border-radius:2px;width:12px;height:12px}.rve-MG_legendIdSample{font-family:var(--ds-font-family-code,monospace);color:var(--dsw-text-secondary,#64748b)}.rve-MG_body{flex:1;min-height:0}";
+const css$1 = ".rve-MG_root{box-sizing:border-box;flex-direction:column;gap:12px;width:100%;height:100%;min-height:0;padding:16px;display:flex;overflow:hidden}.rve-MG_status{color:var(--dsw-alias-label-secondary,#61666b);margin:0}.rve-MG_failure{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.rve-MG_errorDetail{background:var(--dsw-alias-interactive-bg-hover,#2631480f);max-width:100%;font-family:var(--ds-font-family-code,monospace);color:var(--dsw-alias-state-error-primary,#dc2626);white-space:pre-wrap;word-break:break-all;border-radius:6px;margin:0;padding:8px 10px;font-size:11px;line-height:1.5;overflow:auto}.rve-MG_toolbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.rve-MG_summaryGroup{align-items:center;gap:6px;min-width:0;display:flex}.rve-MG_actions{flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;gap:8px;display:flex}.rve-MG_rankdirGroup{border:1px solid var(--dsw-alias-border-l3,#0000001f);background:var(--dsw-alias-bg-layer-2,#fff);border-radius:6px;align-items:center;gap:0;padding:2px;display:inline-flex}.rve-MG_rankdirOption{min-width:32px;height:22px;color:var(--dsw-alias-label-secondary,#61666b);text-align:center;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:0 8px;font-size:11px}.rve-MG_rankdirOption[aria-pressed=true]{background:var(--dsw-alias-state-business-primary,#3b82f6);color:var(--dsw-alias-label-primary-foreground,#fff);font-weight:500}.rve-MG_metricStrip{flex-wrap:wrap;align-items:center;gap:6px 20px;padding:2px 0;display:flex}.rve-MG_stat{align-items:center;gap:6px;display:inline-flex}.rve-MG_statLabel{color:var(--dsw-alias-label-secondary,#61666b);font-size:12px}.rve-MG_statValue{font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-primary,#0f1115);font-size:15px;font-weight:600;line-height:1}.rve-MG_statAlert .rve-MG_statValue{color:var(--dsw-alias-state-error-primary,#dc2626)}.rve-MG_statToggle{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:0;display:inline-flex}.rve-MG_statChevron{color:var(--dsw-alias-label-secondary,#61666b);transition:transform .15s}.rve-MG_statChevronOpen{transform:rotate(180deg)}.rve-MG_unresolvedPanel{border:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-layer-2,#fff);border-radius:8px;overflow:hidden}.rve-MG_unresolvedScroll{max-height:260px;overflow-y:auto}.rve-MG_unresolvedTable{table-layout:fixed;border-collapse:collapse;width:100%;font-size:12px}.rve-MG_unresolvedTable th,.rve-MG_unresolvedTable td{text-align:left;padding:8px 12px}.rve-MG_unresolvedTable thead th{z-index:1;background:var(--dsw-alias-bg-layer-2,#fff);color:var(--dsw-alias-label-secondary,#61666b);border-bottom:1px solid var(--dsw-alias-border-l2,#0000001a);font-size:11px;font-weight:500;position:sticky;top:0}.rve-MG_unresolvedTable tbody tr+tr td{border-top:1px solid var(--dsw-alias-border-l2,#0000001a)}.rve-MG_unresolvedTable .rve-MG_unresolvedColPlugin{width:180px}.rve-MG_unresolvedTable .rve-MG_unresolvedColState{width:110px}.rve-MG_unresolvedPlugin{font-family:var(--ds-font-family-code,monospace);color:var(--dsw-alias-label-primary,#0f1115);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.rve-MG_unresolvedState{color:var(--dsw-alias-label-secondary,#61666b);white-space:nowrap;font-size:11px}.rve-MG_unresolvedService{font-family:var(--ds-font-family-code,monospace);color:var(--dsw-alias-state-error-primary,#dc2626);overflow-wrap:anywhere}.rve-MG_legend{color:var(--dsw-alias-label-secondary,#61666b);flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:11px;display:flex}.rve-MG_legendItem{align-items:center;gap:6px;display:inline-flex}.rve-MG_legendSwatch{flex:none;display:inline-block}.rve-MG_legendUnresolvedBox{border:1.5px solid var(--dsw-alias-state-error-primary,#dc2626);background:var(--dsw-alias-bg-layer-2,#fff);border-radius:50%;width:12px;height:12px}.rve-MG_legendIsolatedBox{border:1px dashed var(--dsw-alias-label-caption,#94a3b8);background:var(--dsw-alias-bg-base,#f8fafc);border-radius:2px;width:12px;height:12px}.rve-MG_legendIdSample{font-family:var(--ds-font-family-code,monospace);color:var(--dsw-alias-label-secondary,#61666b)}.rve-MG_body{flex:1;min-height:0;position:relative}";
 const tagId$1 = "dsh-plugin-topology/TopologyView.module.css";
 if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 	const tag = document.createElement("style");
@@ -5039,11 +5464,22 @@ const DOWNLOAD_FORMATS = [
 		labelKey: "downloadJson"
 	}
 ];
+/** Detect the current DSH theme from the document root's data attribute or class. */
+function detectTheme() {
+	const dataTheme = document.documentElement.getAttribute("data-theme");
+	if (dataTheme === "dark") return "dark";
+	if (dataTheme === "light") return "light";
+	const bg = getComputedStyle(document.body).backgroundColor;
+	if (bg !== "" && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+		const match = bg.match(/(\d+)/g);
+		if (match !== null && match.length >= 3) return (parseInt(match[0] ?? "255") * 299 + parseInt(match[1] ?? "255") * 587 + parseInt(match[2] ?? "255") * 114) / 1e3 < 128 ? "dark" : "light";
+	}
+	if (typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches) {}
+	return "light";
+}
 /**
 * The health-oriented metrics: scale, the broken-dependency signal, and the
-* three coupling/depth/fragmentation facts. Cycle invariants (isDag, SCC) and
-* descriptive counts (average path, source/sink) are omitted — the former is
-* constant on an inject/provide graph, the latter carry no health signal.
+* three coupling/depth/fragmentation facts.
 */
 function metricRows(analysis, t) {
 	const m = analysis.graphMetrics;
@@ -5078,8 +5514,8 @@ function metricRows(analysis, t) {
 	];
 }
 /** Trigger a browser download of the rendered document. */
-async function download(format, rankdir, render) {
-	const content = await render(format, rankdir);
+async function download(format, rankdir, theme, render) {
+	const content = await render(format, rankdir, theme);
 	const mime = format === "json" ? "application/json" : format === "dot" ? "text/vnd.graphviz" : "image/svg+xml";
 	const blob = new Blob([content], { type: mime });
 	const url = URL.createObjectURL(blob);
@@ -5091,7 +5527,7 @@ async function download(format, rankdir, render) {
 	anchor.remove();
 	URL.revokeObjectURL(url);
 }
-/** Group unresolved dependencies per plugin, so one row carries every missing service. */
+/** Group unresolved dependencies per plugin. */
 function unresolvedRows(analysis) {
 	const labels = new Map(analysis.graph.nodes.filter((node) => node.kind === "plugin").map((node) => [node.id, node.label]));
 	const groups = /* @__PURE__ */ new Map();
@@ -5122,10 +5558,40 @@ function TopologyView({ useStore, actions, analyze, render, t }) {
 	const [state, setState] = (0, react.useState)({ status: "loading" });
 	const [unresolvedOpen, setUnresolvedOpen] = (0, react.useState)(false);
 	const [rankdir, setRankdir] = (0, react.useState)("LR");
+	const [theme, setTheme] = (0, react.useState)(detectTheme);
+	const [anchor, setAnchor] = (0, react.useState)(null);
+	const [direction, setDirection] = (0, react.useState)(null);
 	const transform$1 = useStore((store) => store.transform);
+	const view = transform$1 ?? {
+		x: 0,
+		y: 0,
+		k: 1
+	};
+	const popover = anchor === null ? null : {
+		...anchor,
+		x: view.x + anchor.anchorX * view.k,
+		y: view.y + anchor.anchorY * view.k
+	};
+	(0, react.useEffect)(() => {
+		const observer = new MutationObserver(() => {
+			const next = detectTheme();
+			setTheme((prev) => prev === next ? prev : next);
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"data-theme",
+				"class",
+				"style"
+			]
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
 	(0, react.useEffect)(() => {
 		let current = true;
-		Promise.all([analyze(), render("svg", rankdir)]).then(([analysis, svg]) => {
+		Promise.all([analyze(), render("svg", rankdir, theme)]).then(([analysis, svg]) => {
 			if (current) setState({
 				status: "ready",
 				analysis,
@@ -5145,6 +5611,7 @@ function TopologyView({ useStore, actions, analyze, render, t }) {
 	}, [
 		request,
 		rankdir,
+		theme,
 		analyze,
 		render
 	]);
@@ -5160,6 +5627,33 @@ function TopologyView({ useStore, actions, analyze, render, t }) {
 		actions.setTransform(null);
 		setRankdir(next);
 	};
+	const onNodeClick = (0, react.useCallback)((info) => {
+		setDirection(null);
+		setAnchor((prev) => {
+			if (prev !== null && prev.nodeId === info.nodeId) return null;
+			return {
+				key: info.key,
+				nodeId: info.nodeId,
+				label: info.label,
+				anchorX: info.anchorX,
+				anchorY: info.anchorY,
+				outCount: info.outCount,
+				inCount: info.inCount
+			};
+		});
+	}, []);
+	const onEmptyClick = (0, react.useCallback)(() => {
+		setAnchor(null);
+		setDirection(null);
+	}, []);
+	const closePopover = (0, react.useCallback)(() => {
+		setAnchor(null);
+		setDirection(null);
+	}, []);
+	/** Tapping the active pill again drops back to plain selection. */
+	const toggleDirection = (0, react.useCallback)((next) => {
+		setDirection((current) => current === next ? null : next);
+	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: TopologyView_module_css_default.root,
 		"data-plugin-topology-view": "",
@@ -5241,7 +5735,7 @@ function TopologyView({ useStore, actions, analyze, render, t }) {
 						}), DOWNLOAD_FORMATS.map(({ format, labelKey }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutlineButton, {
 							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconDownloadOutline16, { size: 14 }),
 							onClick: () => {
-								download(format, rankdir, render);
+								download(format, rankdir, theme, render);
 							},
 							children: t(labelKey)
 						}, format))]
@@ -5313,9 +5807,9 @@ function TopologyView({ useStore, actions, analyze, render, t }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: TopologyView_module_css_default.body,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopologyGraphView, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopologyGraphView, {
 						svg: state.svg,
 						alt: t("title"),
 						height: "100%",
@@ -5324,8 +5818,20 @@ function TopologyView({ useStore, actions, analyze, render, t }) {
 						zoomInLabel: t("zoomIn"),
 						zoomOutLabel: t("zoomOut"),
 						resetViewLabel: t("resetView"),
-						zoomLevelLabel: t("zoomLevel")
-					})
+						zoomLevelLabel: t("zoomLevel"),
+						onNodeClick,
+						onEmptyClick,
+						selectedKey: popover?.key ?? null,
+						selectedDotId: popover?.nodeId ?? null,
+						direction
+					}), popover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodePopover, {
+						popover,
+						analysis: state.analysis,
+						direction,
+						onToggleDirection: toggleDirection,
+						onClose: closePopover,
+						t
+					})]
 				})
 			] }) : null
 		]
@@ -5334,7 +5840,7 @@ function TopologyView({ useStore, actions, analyze, render, t }) {
 
 //#endregion
 //#region \0dsh-css:/Users/jiangyuan/Documents/side-work/dsh-plugin-topology/src/client/panel.module.css.mjs
-const css = ".F01v1a_layer{align-items:center;width:100%;display:flex}.F01v1a_rail{justify-content:center}.F01v1a_trigger{box-sizing:border-box;cursor:pointer;width:calc(100% + 4px);height:42px;color:var(--dsw-alias-label-primary,#0f172a);background:0 0;border:none;border-radius:12px;flex:none;align-items:center;gap:8px;margin:4px -2px;padding:0 10px 0 8px;font-family:inherit;font-size:14px;line-height:22px;display:flex;overflow:hidden}.F01v1a_trigger:hover{background:var(--dsw-alias-interactive-bg-hover,#f1f5f9)}.F01v1a_triggerLabel{white-space:nowrap;overflow:hidden}.F01v1a_panel{border:1px solid var(--dsw-border,#cbd5e1);background:var(--dsw-surface,#fff);z-index:30;border-radius:12px;flex-direction:column;width:min(840px,100vw - 48px);height:min(680px,100vh - 48px);display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 18px 48px #0000002e}.F01v1a_maximized{width:calc(100vw - 32px);height:calc(100vh - 32px)}.F01v1a_header{border-bottom:1px solid var(--dsw-border,#cbd5e1);background:var(--dsw-surface,#fff);justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;display:flex}.F01v1a_headerActions{align-items:center;gap:4px;display:inline-flex}.F01v1a_title{color:var(--dsw-text-primary,#0f172a);font-size:14px;font-weight:600}.F01v1a_close{width:24px;height:24px;color:var(--dsw-text-secondary,#64748b);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.F01v1a_close:hover{color:var(--dsw-text-primary,#0f172a);background:var(--dsw-surface-hover,#f1f5f9)}.F01v1a_body{flex-direction:column;flex:1;min-height:0;display:flex}.pluginTopologyButton{border:1px solid var(--dsw-border,#cbd5e1);background:var(--dsw-surface,#fff);height:26px;color:var(--dsw-text-primary,#0f172a);cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:0 10px;font-family:inherit;font-size:12px;line-height:1;display:inline-flex}.pluginTopologyButton:hover{border-color:var(--dsw-alias-state-business-primary,#3b82f6)}";
+const css = ".F01v1a_layer{align-items:center;width:100%;display:flex}.F01v1a_rail{justify-content:center}.F01v1a_trigger{box-sizing:border-box;cursor:pointer;width:calc(100% + 4px);height:42px;color:var(--dsw-alias-label-primary,#0f172a);background:0 0;border:none;border-radius:12px;flex:none;align-items:center;gap:8px;margin:4px -2px;padding:0 10px 0 8px;font-family:inherit;font-size:14px;line-height:22px;display:flex;overflow:hidden}.F01v1a_trigger:hover{background:var(--dsw-alias-interactive-bg-hover,#f1f5f9)}.F01v1a_triggerLabel{white-space:nowrap;overflow:hidden}.F01v1a_panel{border:1px solid var(--dsw-alias-border-l3,#0000001f);background:var(--dsw-alias-bg-layer-2,#fff);z-index:30;border-radius:12px;flex-direction:column;width:min(840px,100vw - 48px);height:min(680px,100vh - 48px);display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 18px 48px #0000002e}.F01v1a_maximized{width:calc(100vw - 32px);height:calc(100vh - 32px)}.F01v1a_header{border-bottom:1px solid var(--dsw-alias-border-l2,#0000001a);background:var(--dsw-alias-bg-layer-2,#fff);justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;display:flex}.F01v1a_headerActions{align-items:center;gap:4px;display:inline-flex}.F01v1a_title{color:var(--dsw-alias-label-primary,#0f1115);font-size:14px;font-weight:600}.F01v1a_close{width:24px;height:24px;color:var(--dsw-alias-label-secondary,#61666b);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.F01v1a_close:hover{color:var(--dsw-alias-label-primary,#0f1115);background:var(--dsw-alias-interactive-bg-hover,#2631480f)}.F01v1a_body{flex-direction:column;flex:1;min-height:0;display:flex}.pluginTopologyButton{border:1px solid var(--dsw-alias-border-l3,#0000001f);background:var(--dsw-alias-bg-layer-2,#fff);height:26px;color:var(--dsw-alias-label-primary,#0f1115);cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:0 10px;font-family:inherit;font-size:12px;line-height:1;display:inline-flex}.pluginTopologyButton:hover{border-color:var(--dsw-alias-state-business-primary,#3b82f6)}";
 const tagId = "dsh-plugin-topology/panel.module.css";
 if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 	const tag = document.createElement("style");
@@ -5476,7 +5982,12 @@ const en = {
 	legendLabel: "Legend",
 	legendUnresolved: "Unresolved dependency",
 	legendIsolated: "Isolated plugin",
-	legendId: "Instance creation ordinal within this run"
+	legendId: "Instance creation ordinal within this run",
+	popoverClose: "Close",
+	popoverSource: "Source",
+	popoverOutgoing: "Highlight outgoing dependencies (deg⁺)",
+	popoverIncoming: "Highlight incoming dependents (deg⁻)",
+	popoverUnresolved: "unresolved"
 };
 const zh = {
 	title: "插件拓扑",
@@ -5503,7 +6014,12 @@ const zh = {
 	legendLabel: "图例",
 	legendUnresolved: "存在未解析依赖",
 	legendIsolated: "孤立插件（无依赖边）",
-	legendId: "本次运行内的创建序号"
+	legendId: "本次运行内的创建序号",
+	popoverClose: "关闭",
+	popoverSource: "来源",
+	popoverOutgoing: "高亮它依赖的插件（出度 deg⁺）",
+	popoverIncoming: "高亮依赖它的插件（入度 deg⁻）",
+	popoverUnresolved: "未解析"
 };
 
 //#endregion
@@ -5542,8 +6058,8 @@ function apply(ctx) {
 				if (!result.ok) throw new Error(`pluginTopology.analyze failed: ${result.error.code}: ${result.error.message}`);
 				return result.value;
 			},
-			render: async (format, rankdir) => {
-				const result = await namespaceOf().render(format, rankdir);
+			render: async (format, rankdir, theme) => {
+				const result = await namespaceOf().render(format, rankdir, theme);
 				if (!result.ok) throw new Error(`pluginTopology.render failed: ${result.error.code}: ${result.error.message}`);
 				return result.value;
 			}