@sleetdrop/dsh-plugin-topology 0.4.0 → 0.5.0

package/lib/client/TopologyGraphView.js

@@ -2,6 +2,192 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { IconFullscreenOutline16, IconMinusOutline16, IconPlusOutline16 } from "./icons.js";
 import css from './TopologyGraphView.module.css';
+/**
+ * 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 === undefined)
+        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 === undefined)
+        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 = new Set();
+    for (const edge of scope.querySelectorAll('g.edge')) {
+        const endpoints = edgeEndpoints(edge);
+        if (endpoints === null)
+            continue;
+        const matches = selection.direction === 'out'
+            ? endpoints.source === selection.dotId
+            : endpoints.target === selection.dotId;
+        if (!matches)
+            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 !== undefined && 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 = useRef(null);
+    /** The group currently carrying the hover ring, to avoid redundant DOM work. */
+    const hoveredRef = useRef(null);
+    // Repaint the persistent selection after each render or when it changes.
+    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]);
+    // A light hover ring only: no dimming, so sweeping the pointer across the
+    // graph does not flash the whole canvas between focus states.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (container === null)
+            return;
+        // A new SVG string replaces the Graphviz DOM, so any tracked group is stale.
+        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 (_jsx("div", { ref: containerRef, className: css.graphImg, role: "img", "aria-label": alt, style: {
+            opacity: fitted ? 1 : 0,
+            transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})`,
+        }, 
+        // eslint-disable-next-line react/no-danger -- SVG is generated by our own server-side Graphviz renderer; trusted source.
+        dangerouslySetInnerHTML: { __html: svg } }));
+}
 const MIN_K = 0.05;
 /** A fit never shrinks below this scale, so the default and reset land at actual size. */
 const MIN_FIT_K = 1.0;
@@ -26,13 +212,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.
  */
-export function TopologyGraphView({ svg, alt, height, transform, onTransformChange, zoomInLabel, zoomOutLabel, resetViewLabel, zoomLevelLabel, }) {
+export function TopologyGraphView({ svg, alt, height, transform, onTransformChange, zoomInLabel, zoomOutLabel, resetViewLabel, zoomLevelLabel, onNodeClick, onEmptyClick, selectedKey, selectedDotId, direction, }) {
     const containerRef = useRef(null);
     const naturalRef = useRef(null);
     const dragRef = useRef(null);
@@ -89,16 +278,18 @@ export function TopologyGraphView({ svg, alt, height, transform, onTransformChan
         });
         setAtFit(false);
     }, [onTransformChange]);
-    const onLoad = (event) => {
-        const img = event.currentTarget;
-        naturalRef.current = { width: img.naturalWidth, height: img.naturalHeight };
-        if (transform === null)
-            fit();
-        setFitted(true);
-    };
+    // Extract natural dimensions from the SVG viewBox on first render.
+    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 === null) {
+                requestAnimationFrame(() => { fit(); });
+            }
+            setFitted(true);
+        }
+    }, [svg, transform, fit]);
     // Track the container size so the zoom-level "actual size" (100%) stays centered.
-    // ResizeObserver is unavailable in jsdom; the initial size already comes from
-    // getBoundingClientRect, so the center just won't react to resizes there.
     useEffect(() => {
         const element = containerRef.current;
         if (element === null)
@@ -137,8 +328,7 @@ export function TopologyGraphView({ svg, alt, height, transform, onTransformChan
         element.addEventListener('wheel', onWheel, { passive: false });
         return () => { element.removeEventListener('wheel', onWheel); };
     }, [onTransformChange]);
-    // Keyboard shortcuts while the pointer is over the canvas: +/− zoom, 0/F reset-to-fit,
-    // arrow keys pan. Ignored while a text field has focus.
+    // Keyboard shortcuts while the pointer is over the canvas.
     useEffect(() => {
         if (!viewportHovered)
             return;
@@ -192,6 +382,7 @@ export function TopologyGraphView({ svg, alt, height, transform, onTransformChan
             startY: event.clientY,
             baseX: view.x,
             baseY: view.y,
+            moved: false,
         };
         event.currentTarget.setPointerCapture(event.pointerId);
     };
@@ -199,16 +390,47 @@ export function TopologyGraphView({ svg, alt, height, transform, onTransformChan
         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;
+        // A pointer that stayed put is a tap, not a pan. setPointerCapture has
+        // retargeted the event to this container, so hit-test the real element.
+        if (!drag.moved) {
+            const realTarget = document.elementFromPoint(event.clientX, event.clientY);
+            const found = nodeRefFromElement(realTarget);
+            const container = containerRef.current;
+            if (found !== null && container !== null && onNodeClick !== undefined) {
+                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,
+                    // Invert the viewport transform so the anchor survives later pan/zoom.
+                    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 !== undefined) {
+                onEmptyClick();
+            }
+        }
+        dragRef.current = null;
     };
     const onDoubleClick = (event) => {
         const element = containerRef.current;
@@ -219,7 +441,6 @@ export function TopologyGraphView({ svg, alt, height, transform, onTransformChan
         const py = event.clientY - rect.top;
         zoomAround(px, py, event.shiftKey ? 1 / ZOOM_FACTOR : ZOOM_FACTOR);
     };
-    // Clicking the zoom level toggles between the reset-to-fit transform and 100% (k = 1).
     const onZoomLevelClick = () => {
         if (atFit) {
             const size = containerSize;
@@ -238,9 +459,5 @@ export function TopologyGraphView({ svg, alt, height, transform, onTransformChan
         }
     };
     const collapsed = atFit && !panelHovered;
-    const src = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-    return (_jsxs("div", { className: css.graphBox, style: { height }, children: [_jsx("div", { ref: containerRef, className: css.graphViewport, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onDoubleClick: onDoubleClick, onPointerEnter: () => { setViewportHovered(true); }, onPointerLeave: () => { setViewportHovered(false); }, children: _jsx("img", { className: css.graphImg, src: src, alt: alt, draggable: false, onLoad: onLoad, style: {
-                        opacity: fitted ? 1 : 0,
-                        transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})`,
-                    } }) }), _jsxs("div", { className: collapsed ? `${css.zoomControls} ${css.collapsed}` : css.zoomControls, onPointerEnter: () => { setPanelHovered(true); }, onPointerLeave: () => { setPanelHovered(false); }, children: [_jsx("button", { type: "button", className: `${css.iconButton} ${css.fitButton}`, onClick: fit, "aria-label": resetViewLabel, title: resetViewLabel, children: _jsx(IconFullscreenOutline16, {}) }), _jsx("button", { type: "button", className: `${css.iconButton} ${css.zoomButton}`, onClick: () => { zoomAtCenter(1 / ZOOM_FACTOR); }, "aria-label": zoomOutLabel, title: zoomOutLabel, children: _jsx(IconMinusOutline16, {}) }), _jsx("button", { type: "button", className: css.zoomLevel, onClick: onZoomLevelClick, "aria-label": zoomLevelLabel, title: zoomLevelLabel, children: formatZoom(view.k) }), _jsx("button", { type: "button", className: `${css.iconButton} ${css.zoomButton}`, onClick: () => { zoomAtCenter(ZOOM_FACTOR); }, "aria-label": zoomInLabel, title: zoomInLabel, children: _jsx(IconPlusOutline16, {}) })] })] }));
+    return (_jsxs("div", { className: css.graphBox, style: { height }, children: [_jsx("div", { ref: containerRef, className: css.graphViewport, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onDoubleClick: onDoubleClick, onPointerEnter: () => { setViewportHovered(true); }, onPointerLeave: () => { setViewportHovered(false); }, children: _jsx(SvgCanvas, { svg: svg, alt: alt, fitted: fitted, view: view, selectedKey: selectedKey ?? null, selectedDotId: selectedDotId ?? null, direction: direction ?? null }) }), _jsxs("div", { className: collapsed ? `${css.zoomControls} ${css.collapsed}` : css.zoomControls, onPointerEnter: () => { setPanelHovered(true); }, onPointerLeave: () => { setPanelHovered(false); }, children: [_jsx("button", { type: "button", className: `${css.iconButton} ${css.fitButton}`, onClick: fit, "aria-label": resetViewLabel, title: resetViewLabel, children: _jsx(IconFullscreenOutline16, {}) }), _jsx("button", { type: "button", className: `${css.iconButton} ${css.zoomButton}`, onClick: () => { zoomAtCenter(1 / ZOOM_FACTOR); }, "aria-label": zoomOutLabel, title: zoomOutLabel, children: _jsx(IconMinusOutline16, {}) }), _jsx("button", { type: "button", className: css.zoomLevel, onClick: onZoomLevelClick, "aria-label": zoomLevelLabel, title: zoomLevelLabel, children: formatZoom(view.k) }), _jsx("button", { type: "button", className: `${css.iconButton} ${css.zoomButton}`, onClick: () => { zoomAtCenter(ZOOM_FACTOR); }, "aria-label": zoomInLabel, title: zoomInLabel, children: _jsx(IconPlusOutline16, {}) })] })] }));
 }

package/lib/client/TopologyView.d.ts

@@ -7,8 +7,8 @@ import { type TopologyTransform } from './stores.ts';
 export interface TopologyViewInjected {
     /** Read the current Host plugin topology analysis for the metrics. */
     analyze: () => Promise<TopologyAnalysis>;
-    /** Serialize the current topology in one format along the given layout direction. */
-    render: (format: RenderFormat, rankdir: Rankdir) => Promise<string>;
+    /** Serialize the current topology in one format along the given layout direction and theme. */
+    render: (format: RenderFormat, rankdir: Rankdir, theme?: 'light' | 'dark') => Promise<string>;
 }
 /** Viewer state selector: the remembered transform (null until the first fit). */
 export type ViewerStateSelector = SnapshotSelectorHook<{

package/lib/client/TopologyView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { IconChevronDownOutline14, IconDownloadOutline16, OutlineButton } from "./icons.js";
 import { TopologyGraphView } from "./TopologyGraphView.js";
+import { NodePopover } from "./NodePopover.js";
 import { createTopologyViewStore } from "./stores.js";
 import css from './TopologyView.module.css';
 const DOWNLOAD_FORMATS = [
@@ -9,11 +10,34 @@ const DOWNLOAD_FORMATS = [
     { format: 'dot', labelKey: 'downloadDot' },
     { format: 'json', labelKey: 'downloadJson' },
 ];
+/** Detect the current DSH theme from the document root's data attribute or class. */
+function detectTheme() {
+    const root = document.documentElement;
+    // DSH sets data-theme or a class on <html>; check common patterns.
+    const dataTheme = root.getAttribute('data-theme');
+    if (dataTheme === 'dark')
+        return 'dark';
+    if (dataTheme === 'light')
+        return 'light';
+    // Fallback: check computed background color luminance of <body> (more reliable than <html>).
+    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) {
+            const luminance = (parseInt(match[0] ?? '255') * 299 + parseInt(match[1] ?? '255') * 587 + parseInt(match[2] ?? '255') * 114) / 1000;
+            return luminance < 128 ? 'dark' : 'light';
+        }
+    }
+    // Also check the resolved color-scheme via matchMedia.
+    if (typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches) {
+        // Only trust this if DSH preference is 'system'; otherwise DSH overrides it.
+        // Since we can't read DSH's preference here, default to light (safer for most users).
+    }
+    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;
@@ -28,8 +52,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);
@@ -41,7 +65,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')
@@ -69,10 +93,29 @@ export function TopologyView({ useStore, actions, analyze, render, t }) {
     const [state, setState] = useState({ status: 'loading' });
     const [unresolvedOpen, setUnresolvedOpen] = useState(false);
     const [rankdir, setRankdir] = useState('LR');
+    const [theme, setTheme] = useState(detectTheme);
+    const [anchor, setAnchor] = useState(null);
+    const [direction, setDirection] = useState(null);
     const transform = useStore(store => store.transform);
+    const view = transform ?? { 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,
+    };
+    // Watch for theme changes via MutationObserver on <html> attributes.
+    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(); };
+    }, []);
+    // Load analysis + SVG, re-fetching when theme or layout changes.
     useEffect(() => {
         let current = true;
-        void Promise.all([analyze(), render('svg', rankdir)]).then(([analysis, svg]) => { if (current)
+        void Promise.all([analyze(), render('svg', rankdir, theme)]).then(([analysis, svg]) => { if (current)
             setState({ status: 'ready', analysis, svg }); }, (error) => {
             const message = error instanceof Error ? error.message : String(error);
             console.error('[plugin-topology] load failed:', error);
@@ -80,7 +123,7 @@ export function TopologyView({ useStore, actions, analyze, render, t }) {
                 setState({ status: 'error', message });
         });
         return () => { current = false; };
-    }, [request, rankdir, analyze, render]);
+    }, [request, rankdir, theme, analyze, render]);
     const retry = () => {
         setState({ status: 'loading' });
         setRequest(value => value + 1);
@@ -92,5 +135,36 @@ export function TopologyView({ useStore, actions, analyze, render, t }) {
         actions.setTransform(null);
         setRankdir(next);
     };
-    return (_jsxs("div", { className: css.root, "data-plugin-topology-view": "", children: [state.status === 'loading' ? _jsx("p", { className: css.status, children: t('loading') }) : null, state.status === 'error' ? (_jsxs("div", { className: css.failure, children: [_jsx("p", { className: css.status, role: "alert", children: t('error') }), _jsx("pre", { className: css.errorDetail, children: state.message }), _jsx(OutlineButton, { onClick: retry, children: t('retry') })] })) : null, state.status === 'ready' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.toolbar, children: [_jsx("div", { className: css.summaryGroup, children: _jsx("div", { className: css.metricStrip, children: metricRows(state.analysis, t).map(row => (_jsxs("span", { className: row.warning === true ? `${css.stat} ${css.statAlert}` : css.stat, children: [_jsx("span", { className: css.statLabel, children: row.label }), row.expandable === true ? (_jsxs("button", { type: "button", className: css.statToggle, "aria-expanded": unresolvedOpen, onClick: () => { setUnresolvedOpen(value => !value); }, children: [_jsx("span", { className: css.statValue, children: row.value }), _jsx(IconChevronDownOutline14, { className: unresolvedOpen ? `${css.statChevron} ${css.statChevronOpen}` : css.statChevron })] })) : (_jsx("span", { className: css.statValue, children: row.value }))] }, row.label))) }) }), _jsxs("div", { className: css.actions, children: [_jsxs("div", { className: css.rankdirGroup, role: "group", "aria-label": t('rankdirToggle'), children: [_jsx("button", { type: "button", className: css.rankdirOption, "aria-pressed": rankdir === 'TB', onClick: () => { onRankdirChange('TB'); }, children: "TD" }), _jsx("button", { type: "button", className: css.rankdirOption, "aria-pressed": rankdir === 'LR', onClick: () => { onRankdirChange('LR'); }, children: "LR" })] }), DOWNLOAD_FORMATS.map(({ format, labelKey }) => (_jsx(OutlineButton, { icon: _jsx(IconDownloadOutline16, { size: 14 }), onClick: () => { void download(format, rankdir, render); }, children: t(labelKey) }, format)))] })] }), unresolvedOpen ? (_jsx("div", { className: css.unresolvedPanel, children: _jsx("div", { className: css.unresolvedScroll, children: _jsxs("table", { className: css.unresolvedTable, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: css.unresolvedColPlugin, children: t('unresolvedPlugin') }), _jsx("th", { scope: "col", className: css.unresolvedColState, children: t('unresolvedState') }), _jsx("th", { scope: "col", children: t('unresolvedService') })] }) }), _jsx("tbody", { children: unresolvedRows(state.analysis).map(row => (_jsxs("tr", { children: [_jsx("td", { className: css.unresolvedPlugin, children: row.plugin }), _jsx("td", { className: css.unresolvedState, children: row.state }), _jsx("td", { className: css.unresolvedService, children: row.reasons.join(' · ') })] }, row.key))) })] }) }) })) : null, _jsxs("div", { className: css.legend, role: "note", "aria-label": t('legendLabel'), children: [_jsxs("span", { className: css.legendItem, children: [_jsx("span", { className: `${css.legendSwatch} ${css.legendIsolatedBox}`, "aria-hidden": true }), t('legendIsolated')] }), _jsxs("span", { className: css.legendItem, children: [_jsx("span", { className: `${css.legendSwatch} ${css.legendUnresolvedBox}`, "aria-hidden": true }), t('legendUnresolved')] }), _jsxs("span", { className: css.legendItem, children: [_jsx("code", { className: css.legendIdSample, children: "[42]" }), t('legendId')] })] }), _jsx("div", { className: css.body, children: _jsx(TopologyGraphView, { svg: state.svg, alt: t('title'), height: "100%", transform: transform, onTransformChange: onTransformChange, zoomInLabel: t('zoomIn'), zoomOutLabel: t('zoomOut'), resetViewLabel: t('resetView'), zoomLevelLabel: t('zoomLevel') }) })] })) : null] }));
+    const onNodeClick = useCallback((info) => {
+        // Always start from a clean highlight: switching nodes must not carry the
+        // previous node's direction over to the new one.
+        setDirection(null);
+        setAnchor(prev => {
+            // Toggle: clicking the same node closes the popover.
+            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 = useCallback(() => {
+        setAnchor(null);
+        setDirection(null);
+    }, []);
+    const closePopover = useCallback(() => {
+        setAnchor(null);
+        setDirection(null);
+    }, []);
+    /** Tapping the active pill again drops back to plain selection. */
+    const toggleDirection = useCallback((next) => {
+        setDirection(current => current === next ? null : next);
+    }, []);
+    return (_jsxs("div", { className: css.root, "data-plugin-topology-view": "", children: [state.status === 'loading' ? _jsx("p", { className: css.status, children: t('loading') }) : null, state.status === 'error' ? (_jsxs("div", { className: css.failure, children: [_jsx("p", { className: css.status, role: "alert", children: t('error') }), _jsx("pre", { className: css.errorDetail, children: state.message }), _jsx(OutlineButton, { onClick: retry, children: t('retry') })] })) : null, state.status === 'ready' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.toolbar, children: [_jsx("div", { className: css.summaryGroup, children: _jsx("div", { className: css.metricStrip, children: metricRows(state.analysis, t).map(row => (_jsxs("span", { className: row.warning === true ? `${css.stat} ${css.statAlert}` : css.stat, children: [_jsx("span", { className: css.statLabel, children: row.label }), row.expandable === true ? (_jsxs("button", { type: "button", className: css.statToggle, "aria-expanded": unresolvedOpen, onClick: () => { setUnresolvedOpen(value => !value); }, children: [_jsx("span", { className: css.statValue, children: row.value }), _jsx(IconChevronDownOutline14, { className: unresolvedOpen ? `${css.statChevron} ${css.statChevronOpen}` : css.statChevron })] })) : (_jsx("span", { className: css.statValue, children: row.value }))] }, row.label))) }) }), _jsxs("div", { className: css.actions, children: [_jsxs("div", { className: css.rankdirGroup, role: "group", "aria-label": t('rankdirToggle'), children: [_jsx("button", { type: "button", className: css.rankdirOption, "aria-pressed": rankdir === 'TB', onClick: () => { onRankdirChange('TB'); }, children: "TD" }), _jsx("button", { type: "button", className: css.rankdirOption, "aria-pressed": rankdir === 'LR', onClick: () => { onRankdirChange('LR'); }, children: "LR" })] }), DOWNLOAD_FORMATS.map(({ format, labelKey }) => (_jsx(OutlineButton, { icon: _jsx(IconDownloadOutline16, { size: 14 }), onClick: () => { void download(format, rankdir, theme, render); }, children: t(labelKey) }, format)))] })] }), unresolvedOpen ? (_jsx("div", { className: css.unresolvedPanel, children: _jsx("div", { className: css.unresolvedScroll, children: _jsxs("table", { className: css.unresolvedTable, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: css.unresolvedColPlugin, children: t('unresolvedPlugin') }), _jsx("th", { scope: "col", className: css.unresolvedColState, children: t('unresolvedState') }), _jsx("th", { scope: "col", children: t('unresolvedService') })] }) }), _jsx("tbody", { children: unresolvedRows(state.analysis).map(row => (_jsxs("tr", { children: [_jsx("td", { className: css.unresolvedPlugin, children: row.plugin }), _jsx("td", { className: css.unresolvedState, children: row.state }), _jsx("td", { className: css.unresolvedService, children: row.reasons.join(' · ') })] }, row.key))) })] }) }) })) : null, _jsxs("div", { className: css.legend, role: "note", "aria-label": t('legendLabel'), children: [_jsxs("span", { className: css.legendItem, children: [_jsx("span", { className: `${css.legendSwatch} ${css.legendIsolatedBox}`, "aria-hidden": true }), t('legendIsolated')] }), _jsxs("span", { className: css.legendItem, children: [_jsx("span", { className: `${css.legendSwatch} ${css.legendUnresolvedBox}`, "aria-hidden": true }), t('legendUnresolved')] }), _jsxs("span", { className: css.legendItem, children: [_jsx("code", { className: css.legendIdSample, children: "[42]" }), t('legendId')] })] }), _jsxs("div", { className: css.body, children: [_jsx(TopologyGraphView, { svg: state.svg, alt: t('title'), height: "100%", transform: transform, onTransformChange: onTransformChange, zoomInLabel: t('zoomIn'), zoomOutLabel: t('zoomOut'), resetViewLabel: t('resetView'), zoomLevelLabel: t('zoomLevel'), onNodeClick: onNodeClick, onEmptyClick: onEmptyClick, selectedKey: popover?.key ?? null, selectedDotId: popover?.nodeId ?? null, direction: direction }), popover !== null && (_jsx(NodePopover, { popover: popover, analysis: state.analysis, direction: direction, onToggleDirection: toggleDirection, onClose: closePopover, t: t }))] })] })) : null] }));
 }

package/lib/client/index.js

@@ -68,8 +68,8 @@ export function apply(ctx) {
                 }
                 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}`);
                 }

package/lib/client/locales.d.ts

@@ -1,4 +1,4 @@
 export declare const NS = "pluginTopology";
-export type PluginTopologyLocaleKey = 'title' | 'loading' | 'error' | 'retry' | 'zoomIn' | 'zoomOut' | 'resetView' | 'zoomLevel' | 'downloadSvg' | 'downloadDot' | 'downloadJson' | 'metricPlugins' | 'metricDependencies' | 'metricUnresolved' | 'metricDensity' | 'metricWeakComponents' | 'metricDiameter' | 'rankdirToggle' | 'unresolvedPlugin' | 'unresolvedService' | 'unresolvedState' | 'legendLabel' | 'legendUnresolved' | 'legendIsolated' | 'legendId';
+export type PluginTopologyLocaleKey = 'title' | 'loading' | 'error' | 'retry' | 'zoomIn' | 'zoomOut' | 'resetView' | 'zoomLevel' | 'downloadSvg' | 'downloadDot' | 'downloadJson' | 'metricPlugins' | 'metricDependencies' | 'metricUnresolved' | 'metricDensity' | 'metricWeakComponents' | 'metricDiameter' | 'rankdirToggle' | 'unresolvedPlugin' | 'unresolvedService' | 'unresolvedState' | 'legendLabel' | 'legendUnresolved' | 'legendIsolated' | 'legendId' | 'popoverClose' | 'popoverSource' | 'popoverOutgoing' | 'popoverIncoming' | 'popoverUnresolved';
 export declare const en: Record<PluginTopologyLocaleKey, string>;
 export declare const zh: Record<PluginTopologyLocaleKey, string>;

package/lib/client/locales.js

@@ -25,6 +25,11 @@ export const en = {
     legendUnresolved: 'Unresolved dependency',
     legendIsolated: 'Isolated plugin',
     legendId: 'Instance creation ordinal within this run',
+    popoverClose: 'Close',
+    popoverSource: 'Source',
+    popoverOutgoing: 'Highlight outgoing dependencies (deg⁺)',
+    popoverIncoming: 'Highlight incoming dependents (deg⁻)',
+    popoverUnresolved: 'unresolved',
 };
 export const zh = {
     title: '插件拓扑',
@@ -52,4 +57,9 @@ export const zh = {
     legendUnresolved: '存在未解析依赖',
     legendIsolated: '孤立插件（无依赖边）',
     legendId: '本次运行内的创建序号',
+    popoverClose: '关闭',
+    popoverSource: '来源',
+    popoverOutgoing: '高亮它依赖的插件（出度 deg⁺）',
+    popoverIncoming: '高亮依赖它的插件（入度 deg⁻）',
+    popoverUnresolved: '未解析',
 };

package/lib/client/remote-client.js

@@ -92,6 +92,7 @@ const analyze_result$schema = z.object({
 });
 const render_parameter_0$schema = z.union([z.literal('json'), z.literal('dot'), z.literal('svg')]);
 const render_parameter_1$schema = z.union([z.literal('TB'), z.literal('LR')]);
+const render_parameter_2$schema = z.union([z.literal('light'), z.literal('dark')]).optional();
 const render_result$schema = z.string();
 export const TYPERT_REMOTE = {
     package: '@sleetdrop/dsh-plugin-topology',
@@ -136,6 +137,17 @@ export const TYPERT_REMOTE = {
                         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',