@n-dx/core 0.1.0

package/packages/web/dist/viewer/components/data-display/health-gauge.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Health Gauge - A radial progress indicator for metrics like cohesion/coupling.
+ * Shows a value from 0-1 with color coding (green=good, orange=warning, red=bad).
+ */
+interface HealthGaugeProps {
+    value: number;
+    label: string;
+    size?: number;
+    inverted?: boolean;
+}
+export declare function HealthGauge({ value, label, size, inverted }: HealthGaugeProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+    style: string;
+}>;
+/**
+ * Pattern Badge - Shows a pattern or antipattern indicator.
+ */
+interface PatternBadgeProps {
+    type: "pattern" | "antipattern";
+    label: string;
+}
+export declare function PatternBadge({ type, label }: PatternBadgeProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+}>;
+/**
+ * Metric Card - A card displaying a single metric with visual indicator.
+ */
+interface MetricCardProps {
+    value: string | number;
+    label: string;
+    trend?: "up" | "down" | "neutral";
+    color?: string;
+}
+export declare function MetricCard({ value, label, trend, color }: MetricCardProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+}>;
+export {};

package/packages/web/dist/viewer/components/data-display/health-gauge.js

@@ -0,0 +1,62 @@
+import { h } from "preact";
+export function HealthGauge({ value, label, size = 80, inverted = false }) {
+    const normalized = Math.max(0, Math.min(1, value));
+    const displayValue = inverted ? 1 - normalized : normalized;
+    // Color based on health (green=good, orange=mid, red=bad)
+    const color = displayValue >= 0.7 ? "var(--green)"
+        : displayValue >= 0.4 ? "var(--orange)"
+            : "var(--red)";
+    // SVG arc parameters
+    const strokeWidth = 8;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const progress = normalized * circumference;
+    const cx = size / 2;
+    const cy = size / 2;
+    return h("div", { class: "health-gauge", style: `width: ${size}px` }, h("svg", {
+        viewBox: `0 0 ${size} ${size}`,
+        width: size,
+        height: size,
+    }, 
+    // Background circle
+    h("circle", {
+        cx,
+        cy,
+        r: radius,
+        fill: "none",
+        stroke: "var(--border)",
+        "stroke-width": strokeWidth,
+    }), 
+    // Progress arc
+    h("circle", {
+        cx,
+        cy,
+        r: radius,
+        fill: "none",
+        stroke: color,
+        "stroke-width": strokeWidth,
+        "stroke-linecap": "round",
+        "stroke-dasharray": `${progress} ${circumference}`,
+        "stroke-dashoffset": 0,
+        transform: `rotate(-90 ${cx} ${cy})`,
+        style: "transition: stroke-dasharray 0.3s ease",
+    }), 
+    // Center text
+    h("text", {
+        x: cx,
+        y: cy,
+        "text-anchor": "middle",
+        "dominant-baseline": "central",
+        class: "health-gauge-value",
+        fill: color,
+    }, normalized.toFixed(2))), h("div", { class: "health-gauge-label" }, label));
+}
+export function PatternBadge({ type, label }) {
+    const icon = type === "pattern" ? "\u2713" : "\u26A0";
+    return h("span", { class: `pattern-badge ${type}` }, h("span", { class: "pattern-icon" }, icon), label);
+}
+export function MetricCard({ value, label, trend, color }) {
+    const trendIcon = trend === "up" ? "\u2191" : trend === "down" ? "\u2193" : "";
+    return h("div", { class: "metric-card" }, h("div", { class: "metric-value", style: color ? `color: ${color}` : "" }, value, trend ? h("span", { class: `metric-trend metric-trend-${trend}` }, trendIcon) : null), h("div", { class: "metric-label" }, label));
+}
+//# sourceMappingURL=health-gauge.js.map

package/packages/web/dist/viewer/components/data-display/health-gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"health-gauge.js","sourceRoot":"","sources":["../../../../src/viewer/components/data-display/health-gauge.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/viewer/components/data-display/mini-charts.d.ts

@@ -0,0 +1,36 @@
+interface BarChartItem {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface BarChartProps {
+    data: BarChartItem[];
+    width?: number;
+    height?: number;
+}
+export declare function BarChart({ data, width, height }: BarChartProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    viewBox: string;
+    class: string;
+    preserveAspectRatio: string;
+}> | null;
+interface FlowNode {
+    id: string;
+    label: string;
+    color: string;
+}
+interface FlowEdge {
+    from: string;
+    to: string;
+    weight: number;
+}
+interface FlowDiagramProps {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    width?: number;
+    height?: number;
+    onNodeClick?: (id: string) => void;
+}
+export declare function FlowDiagram({ nodes, edges, onNodeClick, }: FlowDiagramProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+}> | null;
+export {};

package/packages/web/dist/viewer/components/data-display/mini-charts.js

@@ -0,0 +1,124 @@
+import { h } from "preact";
+export function BarChart({ data, width = 500, height }) {
+    if (data.length === 0)
+        return null;
+    const barHeight = 22;
+    const gap = 4;
+    const labelWidth = 150;
+    const valueWidth = 50;
+    const chartHeight = height ?? data.length * (barHeight + gap);
+    const barArea = width - labelWidth - valueWidth - 16;
+    const maxVal = Math.max(...data.map((d) => d.value), 1);
+    return h("svg", {
+        viewBox: `0 0 ${width} ${chartHeight}`,
+        class: "chart-block",
+        preserveAspectRatio: "xMinYMin meet",
+    }, data.map((d, i) => {
+        const y = i * (barHeight + gap);
+        const barW = Math.max((d.value / maxVal) * barArea, 2);
+        return h("g", { key: d.label }, 
+        // Label
+        h("text", {
+            x: labelWidth - 8,
+            y: y + barHeight / 2 + 4,
+            "text-anchor": "end",
+            class: "bar-chart-label",
+        }, truncateLabel(d.label)), 
+        // Bar
+        h("rect", {
+            x: labelWidth,
+            y: y + 2,
+            width: barW,
+            height: barHeight - 4,
+            rx: 3,
+            fill: d.color || "var(--accent)",
+            opacity: 0.85,
+        }), 
+        // Value
+        h("text", {
+            x: labelWidth + barW + 6,
+            y: y + barHeight / 2 + 4,
+            class: "bar-chart-value",
+        }, String(d.value)));
+    }));
+}
+function truncate(s, n) {
+    return s.length > n ? s.slice(0, n - 1) + "\u2026" : s;
+}
+function truncateLabel(s) {
+    return s.length > 22 ? s.slice(0, 21) + "\u2026" : s;
+}
+export function FlowDiagram({ nodes, edges, onNodeClick, }) {
+    if (nodes.length === 0)
+        return null;
+    // Responsive sizing via viewBox
+    const intrinsicW = 700;
+    const intrinsicH = Math.max(400, 200 + nodes.length * 30);
+    const cx = intrinsicW / 2;
+    const cy = intrinsicH / 2;
+    const radius = Math.min(cx, cy) - 60;
+    const nodeRadius = 22;
+    const labelTruncLen = nodes.length <= 6 ? Infinity : 20;
+    // Position nodes in a circle
+    const positions = new Map();
+    nodes.forEach((n, i) => {
+        const angle = (2 * Math.PI * i) / nodes.length - Math.PI / 2;
+        positions.set(n.id, {
+            x: cx + radius * Math.cos(angle),
+            y: cy + radius * Math.sin(angle),
+        });
+    });
+    const maxWeight = Math.max(...edges.map((e) => e.weight), 1);
+    return h("div", { class: "flow-diagram" }, h("svg", {
+        viewBox: `0 0 ${intrinsicW} ${intrinsicH}`,
+        preserveAspectRatio: "xMidYMid meet",
+        class: "chart-block",
+        style: "max-width: 800px; margin: 0 auto 16px;",
+    }, 
+    // Edges
+    edges.map((e, i) => {
+        const from = positions.get(e.from);
+        const to = positions.get(e.to);
+        if (!from || !to)
+            return null;
+        const sw = Math.max(1, (e.weight / maxWeight) * 4);
+        const opacity = 0.3 + (e.weight / maxWeight) * 0.5;
+        const isHigh = e.weight / maxWeight > 0.5;
+        // Curved path via control point offset from midpoint
+        const mx = (from.x + to.x) / 2;
+        const my = (from.y + to.y) / 2;
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const offset = Math.min(30, Math.sqrt(dx * dx + dy * dy) * 0.15);
+        const cpx = mx - (dy / Math.sqrt(dx * dx + dy * dy + 1)) * offset;
+        const cpy = my + (dx / Math.sqrt(dx * dx + dy * dy + 1)) * offset;
+        return h("path", {
+            key: `edge-${i}`,
+            class: "flow-edge",
+            d: `M ${from.x} ${from.y} Q ${cpx} ${cpy} ${to.x} ${to.y}`,
+            stroke: isHigh ? "var(--orange)" : "var(--border)",
+            "stroke-width": sw,
+            opacity,
+        });
+    }), 
+    // Nodes
+    nodes.map((n) => {
+        const pos = positions.get(n.id);
+        return h("g", {
+            key: n.id,
+            class: "flow-node",
+            transform: `translate(${pos.x},${pos.y})`,
+            onClick: onNodeClick ? () => onNodeClick(n.id) : undefined,
+        }, h("circle", {
+            r: nodeRadius,
+            fill: n.color,
+            stroke: n.color,
+            "stroke-width": 2,
+            opacity: 0.8,
+        }), h("text", {
+            y: nodeRadius + 16,
+            "text-anchor": "middle",
+        }, truncate(n.label, labelTruncLen)));
+    })));
+}
+//# sourceMappingURL=mini-charts.js.map

package/packages/web/dist/viewer/components/data-display/mini-charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mini-charts.js","sourceRoot":"","sources":["../../../../src/viewer/components/data-display/mini-charts.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/viewer/components/data-display/tree-view.d.ts

@@ -0,0 +1,18 @@
+import { VNode } from "preact";
+export interface TreeNode {
+    id: string;
+    children: TreeNode[];
+    [key: string]: unknown;
+}
+interface TreeViewProps {
+    nodes: TreeNode[];
+    renderNode: (node: TreeNode, depth: number) => VNode<any>;
+    defaultExpandDepth?: number;
+    filterMatch?: Set<string> | null;
+}
+export declare function TreeView({ nodes, renderNode, defaultExpandDepth, filterMatch, }: TreeViewProps): VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+    role: "tree";
+    "aria-label": string;
+}>;
+export {};

package/packages/web/dist/viewer/components/data-display/tree-view.js

@@ -0,0 +1,107 @@
+import { h } from "preact";
+import { useState } from "preact/hooks";
+export function TreeView({ nodes, renderNode, defaultExpandDepth = 2, filterMatch, }) {
+    const [expanded, setExpanded] = useState(() => {
+        const set = new Set();
+        function autoExpand(ns, depth) {
+            for (const n of ns) {
+                if (depth < defaultExpandDepth) {
+                    set.add(n.id);
+                    autoExpand(n.children, depth + 1);
+                }
+            }
+        }
+        autoExpand(nodes, 0);
+        return set;
+    });
+    const effectiveExpanded = filterMatch
+        ? expandForFilter(nodes, filterMatch)
+        : expanded;
+    const toggle = (id) => {
+        if (filterMatch)
+            return;
+        const next = new Set(expanded);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        setExpanded(next);
+    };
+    function renderNodes(ns, depth, parentIsLast = false) {
+        return ns.map((node, idx) => {
+            const hasChildren = node.children.length > 0;
+            const isOpen = effectiveExpanded.has(node.id);
+            const isLast = idx === ns.length - 1;
+            if (filterMatch && !nodeMatchesFilter(node, filterMatch))
+                return null;
+            const indent = depth * 24;
+            return h("div", {
+                key: node.id,
+                class: "tree-node",
+            }, h("div", {
+                class: `tree-node-row${hasChildren ? " tree-node-expandable" : ""}`,
+                style: `padding-left: ${indent + 8}px`,
+                onClick: hasChildren ? () => toggle(node.id) : undefined,
+                role: hasChildren ? "treeitem" : undefined,
+                "aria-expanded": hasChildren ? String(isOpen) : undefined,
+                tabIndex: hasChildren ? 0 : undefined,
+                onKeyDown: hasChildren ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        toggle(node.id);
+                    }
+                } : undefined,
+            }, 
+            // Connector lines: vertical line from parent, horizontal branch to this node
+            depth > 0
+                ? h("span", {
+                    class: `tree-line${isLast ? " tree-line-last" : ""}`,
+                    style: `left: ${indent - 12}px`,
+                    "aria-hidden": "true",
+                })
+                : null, 
+            // Expand/collapse icon
+            h("span", {
+                class: `tree-chevron${hasChildren && isOpen ? " tree-chevron-open" : ""}`,
+                "aria-hidden": "true",
+            }, hasChildren ? "\u25B6" : "\u2500"), 
+            // Node content rendered by parent
+            h("span", { class: "tree-node-content" }, renderNode(node, depth))), 
+            // Children (indented)
+            hasChildren && isOpen
+                ? h("div", {
+                    class: "tree-children",
+                    role: "group",
+                }, renderNodes(node.children, depth + 1, isLast))
+                : null);
+        }).filter(Boolean);
+    }
+    return h("div", {
+        class: "route-tree",
+        role: "tree",
+        "aria-label": "Tree view",
+    }, renderNodes(nodes, 0));
+}
+function expandForFilter(nodes, matchSet) {
+    const result = new Set();
+    function walk(ns) {
+        let anyMatch = false;
+        for (const n of ns) {
+            const childMatch = walk(n.children);
+            const selfMatch = matchSet.has(n.id);
+            if (selfMatch || childMatch) {
+                result.add(n.id);
+                anyMatch = true;
+            }
+        }
+        return anyMatch;
+    }
+    walk(nodes);
+    return result;
+}
+function nodeMatchesFilter(node, matchSet) {
+    if (matchSet.has(node.id))
+        return true;
+    return node.children.some((c) => nodeMatchesFilter(c, matchSet));
+}
+//# sourceMappingURL=tree-view.js.map

package/packages/web/dist/viewer/components/data-display/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../../../src/viewer/components/data-display/tree-view.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/viewer/components/data-display/zone-map.d.ts

@@ -0,0 +1,28 @@
+import type { Zone, ZoneCrossing } from "../../external.js";
+/**
+ * Zone Map - A hierarchical visualization of zones and their connections.
+ * Shows zones as grouped boxes with connection lines between them.
+ */
+interface ZoneMapProps {
+    zones: Zone[];
+    crossings: ZoneCrossing[];
+    selectedZone?: string | null;
+    onZoneClick?: (zoneId: string) => void;
+}
+export declare function ZoneMap({ zones, crossings, selectedZone, onZoneClick }: ZoneMapProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+}>;
+/**
+ * Zone Detail Popup - Shows detailed info when a zone is selected.
+ */
+interface ZoneDetailProps {
+    zone: Zone;
+    crossings: ZoneCrossing[];
+    allZones: Zone[];
+    onClose: () => void;
+    onFileClick?: (path: string) => void;
+}
+export declare function ZoneDetail({ zone, crossings, allZones, onClose, onFileClick }: ZoneDetailProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+}>;
+export {};

package/packages/web/dist/viewer/components/data-display/zone-map.js

@@ -0,0 +1,197 @@
+import { h } from "preact";
+import { useState, useMemo } from "preact/hooks";
+import { getZoneColorByIndex, basename } from "../../utils.js";
+export function ZoneMap({ zones, crossings, selectedZone, onZoneClick }) {
+    const [hoveredZone, setHoveredZone] = useState(null);
+    // Calculate zone metrics for sizing
+    const zoneMetrics = useMemo(() => {
+        const metrics = new Map();
+        for (const z of zones) {
+            metrics.set(z.id, {
+                files: z.files.length,
+                incoming: 0,
+                outgoing: 0,
+                cohesion: z.cohesion,
+                coupling: z.coupling,
+            });
+        }
+        for (const c of crossings) {
+            const from = metrics.get(c.fromZone);
+            const to = metrics.get(c.toZone);
+            if (from)
+                from.outgoing++;
+            if (to)
+                to.incoming++;
+        }
+        return metrics;
+    }, [zones, crossings]);
+    // Group crossings by zone pairs for connection rendering
+    const connectionCounts = useMemo(() => {
+        const counts = new Map();
+        for (const c of crossings) {
+            const key = [c.fromZone, c.toZone].sort().join(":");
+            counts.set(key, (counts.get(key) || 0) + 1);
+        }
+        return counts;
+    }, [crossings]);
+    // Get unique zone pairs with connections
+    const connections = useMemo(() => {
+        const pairs = [];
+        const seen = new Set();
+        for (const c of crossings) {
+            const key = [c.fromZone, c.toZone].sort().join(":");
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            const reverseKey = `${c.toZone}:${c.fromZone}`;
+            const forwardCount = crossings.filter(x => x.fromZone === c.fromZone && x.toZone === c.toZone).length;
+            const reverseCount = crossings.filter(x => x.fromZone === c.toZone && x.toZone === c.fromZone).length;
+            pairs.push({
+                from: c.fromZone,
+                to: c.toZone,
+                count: forwardCount + reverseCount,
+                bidirectional: forwardCount > 0 && reverseCount > 0,
+            });
+        }
+        return pairs.sort((a, b) => b.count - a.count);
+    }, [crossings]);
+    // Calculate grid layout
+    const cols = Math.ceil(Math.sqrt(zones.length));
+    const rows = Math.ceil(zones.length / cols);
+    const maxFiles = Math.max(...zones.map(z => z.files.length), 1);
+    return h("div", { class: "zone-map" }, h("div", { class: "zone-map-header" }, h("h4", null, "Architecture Map"), h("div", { class: "zone-map-legend" }, h("span", { class: "legend-item" }, h("span", { class: "legend-dot", style: "background: var(--green)" }), "High cohesion"), h("span", { class: "legend-item" }, h("span", { class: "legend-dot", style: "background: var(--orange)" }), "Bidirectional"), h("span", { class: "legend-item" }, h("span", { class: "legend-line" }), "Dependency"))), h("div", {
+        class: "zone-map-grid",
+        style: `grid-template-columns: repeat(${cols}, 1fr)`,
+    }, zones.map((zone, i) => {
+        const color = getZoneColorByIndex(i);
+        const metrics = zoneMetrics.get(zone.id);
+        const isSelected = selectedZone === zone.id;
+        const isHovered = hoveredZone === zone.id;
+        const isHighlighted = isSelected || isHovered;
+        // Scale box size by file count
+        const sizeScale = 0.7 + (zone.files.length / maxFiles) * 0.3;
+        // Health indicator color
+        const healthColor = zone.cohesion >= 0.7 ? "var(--green)"
+            : zone.cohesion >= 0.4 ? "var(--orange)"
+                : "var(--red)";
+        // Coupling indicator
+        const couplingLevel = zone.coupling >= 0.5 ? "high" : zone.coupling >= 0.3 ? "mid" : "low";
+        return h("div", {
+            key: zone.id,
+            class: `zone-map-node ${isSelected ? "selected" : ""} ${isHovered ? "hovered" : ""}`,
+            style: `
+            --zone-color: ${color};
+            transform: scale(${isHighlighted ? 1.05 : sizeScale});
+            border-color: ${isHighlighted ? color : "var(--border)"};
+          `,
+            onClick: () => onZoneClick?.(zone.id),
+            onMouseEnter: () => setHoveredZone(zone.id),
+            onMouseLeave: () => setHoveredZone(null),
+        }, h("div", { class: "zone-map-node-header" }, h("span", { class: "zone-map-node-dot", style: `background: ${color}` }), h("span", { class: "zone-map-node-name" }, zone.name)), h("div", { class: "zone-map-node-body" }, h("div", { class: "zone-map-node-stat" }, h("span", { class: "stat-value" }, zone.files.length), h("span", { class: "stat-label" }, "files")), h("div", { class: "zone-map-node-health" }, h("span", {
+            class: "health-dot",
+            style: `background: ${healthColor}`,
+            title: `Cohesion: ${zone.cohesion.toFixed(2)}`,
+        }), h("span", {
+            class: `coupling-indicator ${couplingLevel}`,
+            title: `Coupling: ${zone.coupling.toFixed(2)}`,
+        }, zone.coupling > 0.3 ? "\u26A0" : ""))), zone.subZones && zone.subZones.length > 0
+            ? h("div", { class: "zone-map-node-subzones" }, h("span", { class: "subzone-badge" }, `${zone.subZones.length} sub-zones`))
+            : null, metrics && (metrics.incoming > 0 || metrics.outgoing > 0)
+            ? h("div", { class: "zone-map-node-io" }, h("span", { class: "io-in", title: "Incoming deps" }, "\u2190", metrics.incoming), h("span", { class: "io-out", title: "Outgoing deps" }, metrics.outgoing, "\u2192"))
+            : null);
+    })), 
+    // Connection summary
+    connections.length > 0
+        ? h("div", { class: "zone-map-connections" }, h("h5", null, "Zone Dependencies"), h("div", { class: "connection-list" }, connections.slice(0, 10).map(conn => {
+            const fromZone = zones.find(z => z.id === conn.from);
+            const toZone = zones.find(z => z.id === conn.to);
+            if (!fromZone || !toZone)
+                return null;
+            const fromIdx = zones.indexOf(fromZone);
+            const toIdx = zones.indexOf(toZone);
+            return h("div", {
+                key: `${conn.from}-${conn.to}`,
+                class: `connection-item ${conn.bidirectional ? "bidirectional" : ""}`,
+            }, h("span", {
+                class: "connection-zone",
+                style: `--zone-color: ${getZoneColorByIndex(fromIdx)}`,
+            }, fromZone.name), h("span", { class: "connection-arrow" }, conn.bidirectional ? "\u21C4" : "\u2192"), h("span", {
+                class: "connection-zone",
+                style: `--zone-color: ${getZoneColorByIndex(toIdx)}`,
+            }, toZone.name), h("span", { class: "connection-count" }, conn.count));
+        }), connections.length > 10
+            ? h("div", { class: "connection-more" }, `+${connections.length - 10} more connections`)
+            : null))
+        : null);
+}
+export function ZoneDetail({ zone, crossings, allZones, onClose, onFileClick }) {
+    const [showFiles, setShowFiles] = useState(false);
+    // Get connections for this zone
+    const incoming = crossings.filter(c => c.toZone === zone.id);
+    const outgoing = crossings.filter(c => c.fromZone === zone.id);
+    // Group by source/target zone
+    const incomingByZone = groupBy(incoming, c => c.fromZone);
+    const outgoingByZone = groupBy(outgoing, c => c.toZone);
+    const zoneIdx = allZones.indexOf(zone);
+    const color = getZoneColorByIndex(zoneIdx);
+    return h("div", { class: "zone-detail-overlay" }, h("div", { class: "zone-detail-panel", style: `--zone-color: ${color}` }, h("div", { class: "zone-detail-header" }, h("h3", null, zone.name), h("button", { class: "close-btn", onClick: onClose }, "\u2715")), h("p", { class: "zone-detail-desc" }, zone.description), 
+    // Metrics row
+    h("div", { class: "zone-detail-metrics" }, h("div", { class: "metric" }, h("span", { class: "metric-val" }, zone.files.length), h("span", { class: "metric-lbl" }, "files")), h("div", { class: "metric" }, h("span", {
+        class: "metric-val",
+        style: `color: ${zone.cohesion >= 0.7 ? "var(--green)" : zone.cohesion >= 0.4 ? "var(--orange)" : "var(--red)"}`,
+    }, zone.cohesion.toFixed(2)), h("span", { class: "metric-lbl" }, "cohesion")), h("div", { class: "metric" }, h("span", {
+        class: "metric-val",
+        style: `color: ${zone.coupling <= 0.3 ? "var(--green)" : zone.coupling <= 0.5 ? "var(--orange)" : "var(--red)"}`,
+    }, zone.coupling.toFixed(2)), h("span", { class: "metric-lbl" }, "coupling"))), 
+    // Entry points
+    zone.entryPoints.length > 0
+        ? h("div", { class: "zone-detail-section" }, h("h4", null, "Entry Points"), h("ul", { class: "entry-point-list" }, zone.entryPoints.slice(0, 5).map(ep => h("li", { key: ep, class: "mono-sm" }, basename(ep))), zone.entryPoints.length > 5
+            ? h("li", { class: "more" }, `+${zone.entryPoints.length - 5} more`)
+            : null))
+        : null, 
+    // Insights
+    zone.insights && zone.insights.length > 0
+        ? h("div", { class: "zone-detail-section" }, h("h4", null, "Insights"), h("ul", { class: "insight-list" }, zone.insights.slice(0, 5).map((ins, i) => h("li", { key: i }, ins)), zone.insights.length > 5
+            ? h("li", { class: "more" }, `+${zone.insights.length - 5} more`)
+            : null))
+        : null, 
+    // Dependencies
+    (Object.keys(incomingByZone).length > 0 || Object.keys(outgoingByZone).length > 0)
+        ? h("div", { class: "zone-detail-section" }, h("h4", null, "Dependencies"), h("div", { class: "dep-grid" }, Object.keys(outgoingByZone).length > 0
+            ? h("div", { class: "dep-col" }, h("span", { class: "dep-label" }, "Depends on:"), ...Object.entries(outgoingByZone).slice(0, 5).map(([zoneId, items]) => {
+                const targetZone = allZones.find(z => z.id === zoneId);
+                return h("div", { key: zoneId, class: "dep-item" }, targetZone?.name || zoneId, h("span", { class: "dep-count" }, items.length));
+            }))
+            : null, Object.keys(incomingByZone).length > 0
+            ? h("div", { class: "dep-col" }, h("span", { class: "dep-label" }, "Used by:"), ...Object.entries(incomingByZone).slice(0, 5).map(([zoneId, items]) => {
+                const sourceZone = allZones.find(z => z.id === zoneId);
+                return h("div", { key: zoneId, class: "dep-item" }, sourceZone?.name || zoneId, h("span", { class: "dep-count" }, items.length));
+            }))
+            : null))
+        : null, 
+    // Files toggle
+    h("div", { class: "zone-detail-section" }, h("button", {
+        class: "toggle-files-btn",
+        onClick: () => setShowFiles(!showFiles),
+    }, showFiles ? "Hide files" : `Show ${zone.files.length} files`), showFiles
+        ? h("ul", { class: "file-list" }, zone.files.map(f => h("li", {
+            key: f,
+            class: "file-item mono-sm",
+            onClick: onFileClick ? () => onFileClick(f) : undefined,
+        }, f, zone.entryPoints.includes(f)
+            ? h("span", { class: "entry-badge" }, "entry")
+            : null)))
+        : null)));
+}
+// Helper
+function groupBy(items, key) {
+    const result = {};
+    for (const item of items) {
+        const k = key(item);
+        if (!result[k])
+            result[k] = [];
+        result[k].push(item);
+    }
+    return result;
+}
+//# sourceMappingURL=zone-map.js.map