archtracker-mcp 0.6.0 → 0.7.0

package/dist/web/viewer.js

@@ -0,0 +1,1572 @@
+"use strict";
+(() => {
+  // src/web/client/viewer.ts
+  var w = window;
+  var I18N = {
+    en: {
+      "tab.graph": "Graph",
+      "tab.hierarchy": "Hierarchy",
+      "stats.files": "Files",
+      "stats.edges": "Edges",
+      "stats.circular": "Circular",
+      "settings.title": "Settings",
+      "settings.theme": "Theme",
+      "settings.fontSize": "Font Size",
+      "settings.nodeSize": "Node Size",
+      "settings.linkOpacity": "Link Opacity",
+      "settings.gravity": "Gravity",
+      "settings.language": "Language",
+      "settings.export": "Export",
+      "impact.title": "Impact Simulation",
+      "impact.btn": "Impact",
+      "impact.transitive": "files affected",
+      "search.placeholder": "Search files...",
+      "legend.circular": "Circular dep",
+      "legend.orphan": "Orphan",
+      "legend.highCoupling": "High coupling",
+      "legend.imports": "imports",
+      "legend.importedBy": "imported by",
+      "detail.importedBy": "Imported by",
+      "detail.imports": "Imports",
+      "detail.none": "none",
+      "detail.dir": "Dir",
+      "detail.dependencies": "Dependencies",
+      "detail.dependents": "Dependents",
+      "tooltip.imports": "imports",
+      "tooltip.importedBy": "imported by",
+      "help.graph": "Scroll: zoom \xB7 Drag: pan \xB7 Click: select \xB7 / search",
+      "help.hierarchy": "Scroll to navigate \xB7 Click to highlight",
+      "help.diff": "Green=added \xB7 Red=removed \xB7 Yellow=modified \xB7 Blue=affected",
+      "tab.diff": "Diff",
+      "diff.addedLabel": "Added",
+      "diff.removedLabel": "Removed",
+      "diff.modifiedLabel": "Modified",
+      "diff.affectedLabel": "Affected",
+      "diff.showAll": "Show all",
+      "diff.focusChanges": "Focus changes",
+      "diff.noImpact": "No downstream impact",
+      "diff.affectedByChange": "Affected by this change"
+    },
+    ja: {
+      "tab.graph": "\u30B0\u30E9\u30D5",
+      "tab.hierarchy": "\u968E\u5C64\u56F3",
+      "stats.files": "\u30D5\u30A1\u30A4\u30EB",
+      "stats.edges": "\u30A8\u30C3\u30B8",
+      "stats.circular": "\u5FAA\u74B0\u53C2\u7167",
+      "settings.title": "\u8A2D\u5B9A",
+      "settings.theme": "\u30C6\u30FC\u30DE",
+      "settings.fontSize": "\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA",
+      "settings.nodeSize": "\u30CE\u30FC\u30C9\u30B5\u30A4\u30BA",
+      "settings.linkOpacity": "\u30EA\u30F3\u30AF\u900F\u660E\u5EA6",
+      "settings.gravity": "\u91CD\u529B",
+      "settings.language": "\u8A00\u8A9E",
+      "settings.export": "\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8",
+      "impact.title": "\u5F71\u97FF\u7BC4\u56F2\u30B7\u30DF\u30E5\u30EC\u30FC\u30B7\u30E7\u30F3",
+      "impact.btn": "\u5F71\u97FF",
+      "impact.transitive": "\u30D5\u30A1\u30A4\u30EB\u306B\u5F71\u97FF",
+      "search.placeholder": "\u30D5\u30A1\u30A4\u30EB\u691C\u7D22...",
+      "legend.circular": "\u5FAA\u74B0\u53C2\u7167",
+      "legend.orphan": "\u5B64\u7ACB",
+      "legend.highCoupling": "\u9AD8\u7D50\u5408",
+      "legend.imports": "import\u5148",
+      "legend.importedBy": "import\u5143",
+      "detail.importedBy": "import\u5143",
+      "detail.imports": "import\u5148",
+      "detail.none": "\u306A\u3057",
+      "detail.dir": "\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA",
+      "detail.dependencies": "\u4F9D\u5B58\u5148",
+      "detail.dependents": "\u88AB\u4F9D\u5B58",
+      "tooltip.imports": "import\u5148",
+      "tooltip.importedBy": "import\u5143",
+      "help.graph": "\u30B9\u30AF\u30ED\u30FC\u30EB: \u30BA\u30FC\u30E0 \xB7 \u30C9\u30E9\u30C3\u30B0: \u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF: \u9078\u629E \xB7 / \u691C\u7D22",
+      "help.hierarchy": "\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u79FB\u52D5 \xB7 \u30AF\u30EA\u30C3\u30AF\u3067\u30CF\u30A4\u30E9\u30A4\u30C8",
+      "help.diff": "\u7DD1=\u8FFD\u52A0 \xB7 \u8D64=\u524A\u9664 \xB7 \u9EC4=\u5909\u66F4 \xB7 \u9752=\u5F71\u97FF",
+      "tab.diff": "\u5DEE\u5206",
+      "diff.addedLabel": "\u8FFD\u52A0",
+      "diff.removedLabel": "\u524A\u9664",
+      "diff.modifiedLabel": "\u5909\u66F4",
+      "diff.affectedLabel": "\u5F71\u97FF",
+      "diff.showAll": "\u5168\u8868\u793A",
+      "diff.focusChanges": "\u5909\u66F4\u306E\u307F\u8868\u793A",
+      "diff.noImpact": "\u4E0B\u6D41\u3078\u306E\u5F71\u97FF\u306A\u3057",
+      "diff.affectedByChange": "\u3053\u306E\u5909\u66F4\u306E\u5F71\u97FF\u7BC4\u56F2"
+    }
+  };
+  var currentLang = w.__ARCH.locale;
+  function applyI18n() {
+    const msgs = I18N[currentLang] || I18N.en;
+    document.querySelectorAll("[data-i18n]").forEach((el) => {
+      const key = el.getAttribute("data-i18n");
+      if (msgs[key]) el.textContent = msgs[key];
+    });
+    document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
+      const key = el.getAttribute("data-i18n-placeholder");
+      if (msgs[key]) el.placeholder = msgs[key];
+    });
+    document.querySelectorAll(".lang-btn").forEach((b) => b.classList.toggle("active", b.dataset.lang === currentLang));
+  }
+  w.setLang = (lang) => {
+    currentLang = lang;
+    applyI18n();
+    saveSettings();
+  };
+  function i(key) {
+    return (I18N[currentLang] || I18N.en)[key] || key;
+  }
+  function esc(s) {
+    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  var STORAGE_KEY = "archtracker-settings";
+  function saveSettings() {
+    const s = { theme: document.body.getAttribute("data-theme") || "dark", fontSize: document.getElementById("font-size-val").textContent, nodeSize: document.getElementById("node-size-val").textContent, linkOpacity: document.getElementById("link-opacity-val").textContent, gravity: document.getElementById("gravity-val").textContent, layerGravity: document.getElementById("layer-gravity-val").textContent, lang: currentLang, projectTitle: document.getElementById("project-title").textContent };
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } catch (_e) {
+    }
+  }
+  function loadSettings() {
+    try {
+      return JSON.parse(localStorage.getItem(STORAGE_KEY)) || null;
+    } catch (_e) {
+      return null;
+    }
+  }
+  var nodeScale = 1;
+  var baseLinkOpacity = 0.4;
+  w.toggleSettings = () => document.getElementById("settings-panel").classList.toggle("open");
+  w.setTheme = (theme) => {
+    document.body.setAttribute("data-theme", theme === "light" ? "light" : "");
+    document.querySelectorAll(".theme-btn[data-theme-val]").forEach((b) => b.classList.toggle("active", b.dataset.themeVal === theme));
+    saveSettings();
+  };
+  w.setFontSize = (v) => {
+    document.getElementById("font-size-val").textContent = v;
+    const scale = v / 13;
+    if (typeof node !== "undefined") {
+      node.select("text").attr("font-size", (d) => (d.dependents >= 3 ? 12 : 10) * scale);
+    }
+    saveSettings();
+  };
+  w.setNodeScale = (v) => {
+    nodeScale = v / 100;
+    document.getElementById("node-size-val").textContent = v;
+    if (typeof node !== "undefined") {
+      node.select("circle").attr("r", (d) => nodeRadius(d) * nodeScale);
+      node.select("text").attr("dx", (d) => nodeRadius(d) * nodeScale + 4);
+      simulation.force("collision", d3.forceCollide().radius((d) => nodeRadius(d) * nodeScale + 4));
+      simulation.alpha(0.3).restart();
+    }
+    saveSettings();
+  };
+  w.setLinkOpacity = (v) => {
+    baseLinkOpacity = v / 100;
+    document.getElementById("link-opacity-val").textContent = v;
+    if (typeof link !== "undefined") link.attr("opacity", baseLinkOpacity);
+    saveSettings();
+  };
+  var gravityStrength = 150;
+  w.setGravity = (v) => {
+    gravityStrength = +v;
+    document.getElementById("gravity-val").textContent = v;
+    if (typeof simulation !== "undefined") {
+      if (typeof updateLayerPhysics === "function") {
+        updateLayerPhysics();
+      } else {
+        simulation.force("charge", d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+      }
+      simulation.alpha(0.5).restart();
+    }
+    saveSettings();
+  };
+  var layerGravity = 12;
+  w.setLayerGravity = (v) => {
+    layerGravity = +v;
+    document.getElementById("layer-gravity-val").textContent = v;
+    if (typeof simulation !== "undefined" && typeof updateLayerPhysics === "function") {
+      updateLayerPhysics();
+      simulation.alpha(0.5).restart();
+    }
+    saveSettings();
+  };
+  w.exportSVG = () => {
+    const activeView = document.querySelector(".view.active svg");
+    if (!activeView) return;
+    const clone = activeView.cloneNode(true);
+    clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    const blob = new Blob([clone.outerHTML], { type: "image/svg+xml" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = (document.getElementById("project-title").textContent || "graph") + ".svg";
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+  w.exportPNG = () => {
+    const activeView = document.querySelector(".view.active svg");
+    if (!activeView) return;
+    const clone = activeView.cloneNode(true);
+    clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    const svgStr = new XMLSerializer().serializeToString(clone);
+    const canvas = document.createElement("canvas");
+    const bbox = activeView.getBoundingClientRect();
+    canvas.width = bbox.width * 2;
+    canvas.height = bbox.height * 2;
+    const ctx = canvas.getContext("2d");
+    ctx.scale(2, 2);
+    const img = new Image();
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0);
+      const a = document.createElement("a");
+      a.href = canvas.toDataURL("image/png");
+      a.download = (document.getElementById("project-title").textContent || "graph") + ".png";
+      a.click();
+    };
+    img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgStr)));
+  };
+  var DATA = w.__ARCH.data;
+  var LAYERS = w.__ARCH.layers;
+  var CROSS_EDGES = w.__ARCH.crossEdges;
+  var W = window.innerWidth;
+  var H = window.innerHeight - 44;
+  var circularSet = new Set(DATA.circularFiles);
+  var titleEl = document.getElementById("project-title");
+  titleEl.textContent = DATA.projectName;
+  titleEl.addEventListener("blur", () => {
+    if (!titleEl.textContent.trim()) titleEl.textContent = DATA.projectName;
+    document.title = titleEl.textContent + " \u2014 Architecture Viewer";
+    saveSettings();
+  });
+  titleEl.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      titleEl.blur();
+    }
+  });
+  var _savedSettings = loadSettings();
+  if (_savedSettings) {
+    if (_savedSettings.theme) w.setTheme(_savedSettings.theme);
+    if (_savedSettings.lang) {
+      currentLang = _savedSettings.lang;
+      applyI18n();
+    }
+    if (_savedSettings.projectTitle) {
+      titleEl.textContent = _savedSettings.projectTitle;
+      document.title = _savedSettings.projectTitle + " \u2014 Architecture Viewer";
+    }
+    if (_savedSettings.fontSize) {
+      document.getElementById("font-size-slider").value = _savedSettings.fontSize;
+      document.getElementById("font-size-val").textContent = _savedSettings.fontSize;
+    }
+    if (_savedSettings.nodeSize) {
+      document.getElementById("node-size-slider").value = _savedSettings.nodeSize;
+      document.getElementById("node-size-val").textContent = _savedSettings.nodeSize;
+      nodeScale = _savedSettings.nodeSize / 100;
+    }
+    if (_savedSettings.linkOpacity) {
+      document.getElementById("link-opacity-slider").value = _savedSettings.linkOpacity;
+      document.getElementById("link-opacity-val").textContent = _savedSettings.linkOpacity;
+      baseLinkOpacity = _savedSettings.linkOpacity / 100;
+    }
+    if (_savedSettings.gravity) {
+      document.getElementById("gravity-slider").value = _savedSettings.gravity;
+      document.getElementById("gravity-val").textContent = _savedSettings.gravity;
+      gravityStrength = +_savedSettings.gravity;
+    }
+    if (_savedSettings.layerGravity) {
+      document.getElementById("layer-gravity-slider").value = _savedSettings.layerGravity;
+      document.getElementById("layer-gravity-val").textContent = _savedSettings.layerGravity;
+      layerGravity = +_savedSettings.layerGravity;
+    }
+  }
+  document.getElementById("s-files").textContent = String(DATA.nodes.length);
+  document.getElementById("s-edges").textContent = String(DATA.links.length);
+  document.getElementById("s-circular").textContent = String(DATA.circularFiles.length);
+  var dirColor = d3.scaleOrdinal().domain(DATA.dirs).range(["#58a6ff", "#3fb950", "#d2a8ff", "#f0883e", "#79c0ff", "#56d4dd", "#db61a2", "#f778ba", "#ffa657", "#7ee787"]);
+  var layerColorMap = {};
+  var activeLayers = /* @__PURE__ */ new Set();
+  if (LAYERS) {
+    LAYERS.forEach((l) => {
+      layerColorMap[l.name] = l.color;
+    });
+    document.getElementById("layer-gravity-setting").style.display = "";
+  }
+  function nodeColor(d) {
+    if (circularSet.has(d.id)) return "#f97583";
+    if (d.isOrphan) return "#484f58";
+    if (LAYERS && d.layer && layerColorMap[d.layer] && activeLayers.size !== 1) return layerColorMap[d.layer];
+    return dirColor(d.dir);
+  }
+  function nodeRadius(d) {
+    return Math.max(5, Math.min(22, 4 + d.dependents * 1.8));
+  }
+  function fileName(id) {
+    return id.split("/").pop();
+  }
+  var hierBuilt = false;
+  var diffBuilt = false;
+  var hierRelayout = null;
+  var hierSyncFromTab = null;
+  document.querySelectorAll(".tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      document.querySelectorAll(".tab").forEach((t) => t.classList.remove("active"));
+      document.querySelectorAll(".view").forEach((v) => v.classList.remove("active"));
+      tab.classList.add("active");
+      document.getElementById(tab.dataset.view).classList.add("active");
+      if (tab.dataset.view === "hier-view") {
+        if (!hierBuilt) {
+          buildHierarchy();
+          hierBuilt = true;
+        }
+        if (hierSyncFromTab) {
+          hierSyncFromTab();
+          hierRelayout();
+        }
+      }
+      if (tab.dataset.view === "diff-view") {
+        if (!diffBuilt && buildDiffView) {
+          buildDiffView();
+          diffBuilt = true;
+        }
+      }
+    });
+  });
+  var tooltip = document.getElementById("tooltip");
+  var tooltipHideTimer = null;
+  var tooltipLocked = false;
+  function showTooltip(e, d) {
+    clearTimeout(tooltipHideTimer);
+    document.getElementById("tt-name").textContent = d.id;
+    document.getElementById("tt-dep-count").textContent = d.deps;
+    document.getElementById("tt-dpt-count").textContent = d.dependents;
+    const out = (d.dependencies || []).map((x) => '<div class="tt-out">\u2192 ' + esc(x) + "</div>");
+    const inc = (d.dependentsList || []).map((x) => '<div class="tt-in">\u2190 ' + esc(x) + "</div>");
+    document.getElementById("tt-details").innerHTML = [...out, ...inc].join("");
+    tooltip.style.display = "block";
+    positionTooltip(e);
+  }
+  function positionTooltip(e) {
+    const gap = 24;
+    const tw = 420, th = tooltip.offsetHeight || 200;
+    let x = e.clientX + gap;
+    let y = e.clientY - th - 12;
+    if (x + tw > window.innerWidth) x = e.clientX - tw - gap;
+    if (y < 50) y = e.clientY + gap;
+    if (y + th > window.innerHeight) y = window.innerHeight - th - 8;
+    if (x < 8) x = 8;
+    tooltip.style.left = x + "px";
+    tooltip.style.top = y + "px";
+  }
+  function scheduleHideTooltip() {
+    clearTimeout(tooltipHideTimer);
+    tooltipHideTimer = setTimeout(() => {
+      if (!tooltipLocked) {
+        tooltip.style.display = "none";
+        if (!pinnedNode) resetGraphHighlight();
+      }
+    }, 250);
+  }
+  tooltip.addEventListener("mouseenter", () => {
+    clearTimeout(tooltipHideTimer);
+    tooltipLocked = true;
+  });
+  tooltip.addEventListener("mouseleave", () => {
+    tooltipLocked = false;
+    scheduleHideTooltip();
+  });
+  var svg = d3.select("#graph-svg").attr("width", W).attr("height", H);
+  var g = svg.append("g");
+  var zoom = d3.zoom().scaleExtent([0.05, 10]).on("zoom", (e) => g.attr("transform", e.transform));
+  svg.call(zoom);
+  svg.call(zoom.transform, d3.zoomIdentity.translate(W / 2, H / 2).scale(0.7));
+  w.zoomIn = () => svg.transition().duration(300).call(zoom.scaleBy, 1.4);
+  w.zoomOut = () => svg.transition().duration(300).call(zoom.scaleBy, 0.7);
+  w.zoomFit = () => {
+    const b = g.node().getBBox();
+    if (!b.width) return;
+    const s = Math.min(W / (b.width + 80), H / (b.height + 80)) * 0.9;
+    svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity.translate(W / 2 - (b.x + b.width / 2) * s, H / 2 - (b.y + b.height / 2) * s).scale(s));
+  };
+  var defs = svg.append("defs");
+  ["#30363d", "#58a6ff", "#3fb950"].forEach((c, idx) => {
+    defs.append("marker").attr("id", "arrow-" + idx).attr("viewBox", "0 -4 8 8").attr("refX", 8).attr("refY", 0).attr("markerWidth", 7).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M0,-3.5L8,0L0,3.5Z").attr("fill", c);
+  });
+  var link = g.append("g").selectAll("line").data(DATA.links).join("line").attr("stroke", (d) => d.type === "type-only" ? "#1f3d5c" : "#30363d").attr("stroke-width", 1).attr("stroke-dasharray", (d) => d.type === "type-only" ? "4,3" : d.type === "dynamic" ? "6,3" : null).attr("marker-end", "url(#arrow-0)").attr("opacity", baseLinkOpacity);
+  defs.append("marker").attr("id", "arrow-cross").attr("viewBox", "0 -4 8 8").attr("refX", 8).attr("refY", 0).attr("markerWidth", 7).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M0,-3.5L8,0L0,3.5Z").attr("fill", "#f0883e");
+  var crossLinkData = (CROSS_EDGES || []).map((e) => ({
+    source: e.fromLayer + "/" + e.fromFile,
+    target: e.toLayer + "/" + e.toFile,
+    sourceLayer: e.fromLayer,
+    targetLayer: e.toLayer,
+    type: e.type || "api-call",
+    label: e.label || e.type || ""
+  })).filter((e) => DATA.nodes.some((n) => n.id === e.source) && DATA.nodes.some((n) => n.id === e.target));
+  var crossLinkG = g.append("g");
+  var crossLink = crossLinkG.selectAll("line").data(crossLinkData).join("line").attr("stroke", "#f0883e").attr("stroke-width", 2).attr("stroke-dasharray", "8,4").attr("marker-end", "url(#arrow-cross)").attr("opacity", 0.7);
+  var crossLabel = crossLinkG.selectAll("text").data(crossLinkData).join("text").text((d) => d.label).attr("font-size", 9).attr("fill", "#f0883e").attr("text-anchor", "middle").attr("opacity", 0.8).attr("pointer-events", "none");
+  var node = g.append("g").selectAll("g").data(DATA.nodes).join("g").attr("cursor", "pointer").call(d3.drag().on("start", dragStart).on("drag", dragging).on("end", dragEnd));
+  node.append("circle").attr("r", (d) => nodeRadius(d) * nodeScale).attr("fill", nodeColor).attr("stroke", (d) => d.deps >= 5 ? "var(--yellow)" : nodeColor(d)).attr("stroke-width", (d) => d.deps >= 5 ? 2.5 : 1.5).attr("stroke-opacity", (d) => d.deps >= 5 ? 0.8 : 0.3);
+  node.append("text").text((d) => fileName(d.id).replace(/\.tsx?$/, "")).attr("dx", (d) => nodeRadius(d) * nodeScale + 4).attr("dy", 3.5).attr("font-size", (d) => d.dependents >= 3 ? 12 : 10).attr("font-weight", (d) => d.dependents >= 3 ? 600 : 400).attr("fill", (d) => d.dependents >= 3 ? "var(--text)" : "var(--text-dim)").attr("opacity", (d) => d.dependents >= 1 || d.deps >= 3 ? 1 : 0.5).attr("pointer-events", "none");
+  var simulation = d3.forceSimulation(DATA.nodes).force("link", d3.forceLink(DATA.links).id((d) => d.id).distance(70).strength(0.25)).force("charge", d3.forceManyBody().strength(-gravityStrength).distanceMax(500)).force("center", d3.forceCenter(0, 0)).force("collision", d3.forceCollide().radius((d) => nodeRadius(d) * nodeScale + 4)).force("x", d3.forceX(0).strength(0.03)).force("y", d3.forceY(0).strength(0.03)).on("tick", () => {
+    link.each(function(d) {
+      const dx = d.target.x - d.source.x, dy = d.target.y - d.source.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      const rT = nodeRadius(d.target) * nodeScale, rS = nodeRadius(d.source) * nodeScale;
+      d3.select(this).attr("x1", d.source.x + dx / dist * rS).attr("y1", d.source.y + dy / dist * rS).attr("x2", d.target.x - dx / dist * rT).attr("y2", d.target.y - dy / dist * rT);
+    });
+    node.attr("transform", (d) => `translate(${d.x},${d.y})`);
+  });
+  var hullGroup = null;
+  var activeDirs = new Set(DATA.dirs);
+  var dirCounts = {};
+  DATA.nodes.forEach((n) => dirCounts[n.dir] = (dirCounts[n.dir] || 0) + 1);
+  var applyLayerFilter = null;
+  var updateLayerPhysics = null;
+  var crossLinksUserEnabled = true;
+  if (LAYERS && LAYERS.length > 0) {
+    let getLayerCenters = function() {
+      if (activeLayers.size <= 1) return allLayerCenters;
+      const selected = LAYERS.filter((l) => activeLayers.has(l.name));
+      const count = selected.length;
+      const compactRadius = Math.max(40, Math.min(W, H) * 0.03 * Math.sqrt(count));
+      const centers = {};
+      selected.forEach((l, idx) => {
+        const angle = 2 * Math.PI * idx / count - Math.PI / 2;
+        centers[l.name] = { x: Math.cos(angle) * compactRadius, y: Math.sin(angle) * compactRadius };
+      });
+      return centers;
+    }, clusterForce = function() {
+      let nodes;
+      function force(alpha) {
+        const centroids = {};
+        const counts = {};
+        nodes.forEach((n) => {
+          if (!n.layer) return;
+          if (!centroids[n.layer]) {
+            centroids[n.layer] = { x: 0, y: 0 };
+            counts[n.layer] = 0;
+          }
+          centroids[n.layer].x += n.x;
+          centroids[n.layer].y += n.y;
+          counts[n.layer]++;
+        });
+        Object.keys(centroids).forEach((k) => {
+          centroids[k].x /= counts[k];
+          centroids[k].y /= counts[k];
+        });
+        const strength = 0.2;
+        nodes.forEach((n) => {
+          if (!n.layer || !centroids[n.layer]) return;
+          n.vx += (centroids[n.layer].x - n.x) * alpha * strength;
+          n.vy += (centroids[n.layer].y - n.y) * alpha * strength;
+        });
+      }
+      force.initialize = (n) => {
+        nodes = n;
+      };
+      return force;
+    }, updateHulls = function() {
+      if (!hullGroup) return;
+      hullGroup.selectAll("*").remove();
+      LAYERS.forEach((layer) => {
+        if (activeLayers.size > 0 && !activeLayers.has(layer.name)) return;
+        const layerNodes = DATA.nodes.filter((n) => n.layer === layer.name);
+        if (layerNodes.length === 0) return;
+        const points = [];
+        layerNodes.forEach((n) => {
+          if (n.x == null || n.y == null) return;
+          const r = nodeRadius(n) * nodeScale + 30;
+          for (let a = 0; a < Math.PI * 2; a += Math.PI / 4) {
+            points.push([n.x + Math.cos(a) * r, n.y + Math.sin(a) * r]);
+          }
+        });
+        if (points.length < 3) {
+          const cx = layerNodes.reduce((s, n) => s + (n.x || 0), 0) / layerNodes.length;
+          const cy = layerNodes.reduce((s, n) => s + (n.y || 0), 0) / layerNodes.length;
+          const maxR = Math.max(60, ...layerNodes.map((n) => {
+            const dx = (n.x || 0) - cx, dy = (n.y || 0) - cy;
+            return Math.sqrt(dx * dx + dy * dy) + nodeRadius(n) * nodeScale + 30;
+          }));
+          hullGroup.append("circle").attr("cx", cx).attr("cy", cy).attr("r", maxR).attr("class", "layer-hull").attr("fill", layer.color).attr("stroke", layer.color);
+          hullGroup.append("text").attr("class", "layer-hull-label").attr("x", cx).attr("y", cy - maxR - 8).attr("text-anchor", "middle").attr("fill", layer.color).text(layer.name);
+          return;
+        }
+        const hull = d3.polygonHull(points);
+        if (!hull) return;
+        hullGroup.append("path").attr("class", "layer-hull").attr("d", d3.line().curve(d3.curveCatmullRomClosed.alpha(0.5))(hull)).attr("fill", layer.color).attr("stroke", layer.color);
+        const topPt = hull.reduce((best, p) => p[1] < best[1] ? p : best, hull[0]);
+        hullGroup.append("text").attr("class", "layer-hull-label").attr("x", topPt[0]).attr("y", topPt[1] - 10).attr("text-anchor", "middle").attr("fill", layer.color).text(layer.name);
+      });
+    }, syncLayerTabUI = function() {
+      allTab.classList.toggle("active", activeLayers.size === 0);
+      layerTabsEl.querySelectorAll(".layer-tab[data-layer]").forEach((t) => {
+        t.classList.toggle("active", activeLayers.has(t.dataset.layer));
+      });
+      layerRowEl.querySelectorAll(".layer-pill[data-layer]").forEach((p) => {
+        p.classList.toggle("active", activeLayers.has(p.dataset.layer));
+      });
+    };
+    getLayerCenters2 = getLayerCenters, clusterForce2 = clusterForce, updateHulls2 = updateHulls, syncLayerTabUI2 = syncLayerTabUI;
+    const allLayerCount = LAYERS.length;
+    const allBaseRadius = Math.max(60, Math.min(W, H) * 0.04 * Math.sqrt(allLayerCount));
+    const allLayerCenters = {};
+    LAYERS.forEach((l, idx) => {
+      const angle = 2 * Math.PI * idx / allLayerCount - Math.PI / 2;
+      allLayerCenters[l.name] = { x: Math.cos(angle) * allBaseRadius, y: Math.sin(angle) * allBaseRadius };
+    });
+    const layerStrength = layerGravity / 100;
+    simulation.force("x", null).force("y", null).force("center", null);
+    simulation.force("layerX", d3.forceX((d) => allLayerCenters[d.layer]?.x || 0).strength((d) => d.layer ? layerStrength : 0.03));
+    simulation.force("layerY", d3.forceY((d) => allLayerCenters[d.layer]?.y || 0).strength((d) => d.layer ? layerStrength : 0.03));
+    simulation.force("cluster", clusterForce());
+    simulation.force("link").strength((l) => {
+      const sLayer = l.source.layer ?? l.source;
+      const tLayer = l.target.layer ?? l.target;
+      return sLayer === tLayer ? 0.4 : 0.1;
+    });
+    hullGroup = g.insert("g", ":first-child");
+    simulation.on("tick", () => {
+      link.each(function(d) {
+        const dx = d.target.x - d.source.x, dy = d.target.y - d.source.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const rT = nodeRadius(d.target) * nodeScale, rS = nodeRadius(d.source) * nodeScale;
+        d3.select(this).attr("x1", d.source.x + dx / dist * rS).attr("y1", d.source.y + dy / dist * rS).attr("x2", d.target.x - dx / dist * rT).attr("y2", d.target.y - dy / dist * rT);
+      });
+      node.attr("transform", (d) => `translate(${d.x},${d.y})`);
+      if (crossLinkData.length > 0) {
+        const nodeById = {};
+        DATA.nodes.forEach((n) => {
+          nodeById[n.id] = n;
+        });
+        crossLink.each(function(d) {
+          const sN = nodeById[d.source], tN = nodeById[d.target];
+          if (!sN || !tN) return;
+          const dx = tN.x - sN.x, dy = tN.y - sN.y;
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+          const rS = nodeRadius(sN) * nodeScale, rT = nodeRadius(tN) * nodeScale;
+          d3.select(this).attr("x1", sN.x + dx / dist * rS).attr("y1", sN.y + dy / dist * rS).attr("x2", tN.x - dx / dist * rT).attr("y2", tN.y - dy / dist * rT);
+        });
+        crossLabel.each(function(d) {
+          const sN = nodeById[d.source], tN = nodeById[d.target];
+          if (!sN || !tN) return;
+          d3.select(this).attr("x", (sN.x + tN.x) / 2).attr("y", (sN.y + tN.y) / 2 - 6);
+        });
+      }
+      updateHulls();
+    });
+    const layerLegend = document.getElementById("layer-legend");
+    LAYERS.forEach((layer) => {
+      const item = document.createElement("div");
+      item.className = "legend-item";
+      item.innerHTML = '<div class="legend-dot" style="background:' + esc(layer.color) + '"></div> ' + esc(layer.name);
+      layerLegend.appendChild(item);
+    });
+    if (CROSS_EDGES && CROSS_EDGES.length > 0) {
+      const crossItem = document.createElement("div");
+      crossItem.className = "legend-item";
+      crossItem.innerHTML = '<span style="color:#f0883e;font-size:11px">- - \u2192</span> Cross-layer link';
+      layerLegend.appendChild(crossItem);
+    }
+    const sep = document.createElement("hr");
+    sep.style.cssText = "border:none;border-top:1px solid var(--border);margin:6px 0;";
+    layerLegend.appendChild(sep);
+    const layerTabsEl = document.getElementById("layer-tabs");
+    const allTab = document.createElement("div");
+    allTab.className = "layer-tab active";
+    allTab.textContent = "All";
+    allTab.onclick = () => {
+      activeLayers.clear();
+      syncLayerTabUI();
+      applyLayerFilter();
+      if (hierBuilt && hierSyncFromTab) {
+        hierSyncFromTab();
+        hierRelayout();
+      }
+    };
+    layerTabsEl.appendChild(allTab);
+    LAYERS.forEach((layer) => {
+      const tab = document.createElement("div");
+      tab.className = "layer-tab";
+      tab.dataset.layer = layer.name;
+      tab.innerHTML = '<div class="lt-dot" style="background:' + esc(layer.color) + '"></div>' + esc(layer.name);
+      tab.onclick = (e) => {
+        if (e.shiftKey) {
+          activeLayers.clear();
+          activeLayers.add(layer.name);
+        } else {
+          if (activeLayers.has(layer.name)) activeLayers.delete(layer.name);
+          else activeLayers.add(layer.name);
+        }
+        syncLayerTabUI();
+        applyLayerFilter();
+        if (hierBuilt && hierSyncFromTab) {
+          hierSyncFromTab();
+          hierRelayout();
+        }
+      };
+      layerTabsEl.appendChild(tab);
+    });
+    applyLayerFilter = function() {
+      const isSingleLayer = activeLayers.size === 1;
+      const hasLayerFilter = activeLayers.size > 0;
+      node.attr("display", (d) => {
+        if (!activeDirs.has(d.dir)) return "none";
+        if (hasLayerFilter && !activeLayers.has(d.layer)) return "none";
+        return null;
+      });
+      link.attr("display", (l) => {
+        const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        const sN = DATA.nodes.find((n) => n.id === s), tN = DATA.nodes.find((n) => n.id === t);
+        if (!sN || !tN) return "none";
+        if (!activeDirs.has(sN.dir) || !activeDirs.has(tN.dir)) return "none";
+        if (hasLayerFilter && (!activeLayers.has(sN.layer) || !activeLayers.has(tN.layer))) return "none";
+        return null;
+      });
+      node.select("circle").attr("fill", nodeColor).attr("stroke", (d) => d.deps >= 5 ? "var(--yellow)" : nodeColor(d));
+      if (typeof crossLink !== "undefined") {
+        if (!crossLinksUserEnabled || isSingleLayer) {
+          crossLink.attr("display", "none");
+          crossLabel.attr("display", "none");
+        } else if (hasLayerFilter) {
+          crossLink.attr("display", (d) => activeLayers.has(d.sourceLayer) && activeLayers.has(d.targetLayer) ? null : "none");
+          crossLabel.attr("display", (d) => activeLayers.has(d.sourceLayer) && activeLayers.has(d.targetLayer) ? null : "none");
+        } else {
+          crossLink.attr("display", null);
+          crossLabel.attr("display", null);
+        }
+      }
+      const visibleNodes = DATA.nodes.filter((d) => {
+        if (!activeDirs.has(d.dir)) return false;
+        if (hasLayerFilter && !activeLayers.has(d.layer)) return false;
+        return true;
+      });
+      const visibleIds = new Set(visibleNodes.map((n) => n.id));
+      const visibleEdges = DATA.links.filter((l) => {
+        const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return visibleIds.has(s) && visibleIds.has(t);
+      });
+      document.getElementById("s-files").textContent = String(visibleNodes.length);
+      document.getElementById("s-edges").textContent = String(visibleEdges.length);
+      const visCirc = DATA.circularFiles.filter((f) => visibleIds.has(f));
+      document.getElementById("s-circular").textContent = String(visCirc.length);
+      updateHulls();
+      updateLayerPhysics();
+      simulation.alpha(0.6).restart();
+      setTimeout(() => w.zoomFit(), 600);
+    };
+    updateLayerPhysics = function() {
+      const isSingleLayer = activeLayers.size === 1;
+      const lStrength = layerGravity / 100;
+      if (isSingleLayer) {
+        simulation.force("charge", d3.forceManyBody().strength(-gravityStrength * 3).distanceMax(800));
+        simulation.force("layerX", d3.forceX(0).strength(0.03));
+        simulation.force("layerY", d3.forceY(0).strength(0.03));
+      } else {
+        const centers = getLayerCenters();
+        simulation.force("charge", d3.forceManyBody().strength(-gravityStrength).distanceMax(500));
+        simulation.force("layerX", d3.forceX((d) => centers[d.layer]?.x || 0).strength((d) => d.layer ? lStrength : 0.03));
+        simulation.force("layerY", d3.forceY((d) => centers[d.layer]?.y || 0).strength((d) => d.layer ? lStrength : 0.03));
+      }
+    };
+    const layerRowEl = document.getElementById("filter-layer-row");
+    const dirPanelEl = document.getElementById("filter-dir-panel");
+    const dirToggle = document.createElement("div");
+    dirToggle.id = "filter-dir-toggle";
+    dirToggle.textContent = "\u25B8 Dirs";
+    dirToggle.onclick = () => {
+      dirToggle.classList.toggle("open");
+      dirPanelEl.classList.toggle("open");
+      dirToggle.textContent = dirPanelEl.classList.contains("open") ? "\u25BE Dirs" : "\u25B8 Dirs";
+    };
+    layerRowEl.appendChild(dirToggle);
+    if (crossLinkData.length > 0) {
+      document.getElementById("cross-layer-setting").style.display = "";
+      w.toggleCrossLinks = () => {
+        crossLinksUserEnabled = !crossLinksUserEnabled;
+        const btn = document.getElementById("cross-link-toggle");
+        btn.textContent = crossLinksUserEnabled ? "ON" : "OFF";
+        btn.classList.toggle("active", crossLinksUserEnabled);
+        applyLayerFilter();
+      };
+    }
+    LAYERS.forEach((layer) => {
+      const layerNodes = DATA.nodes.filter((n) => n.layer === layer.name);
+      const pill = document.createElement("div");
+      pill.className = "layer-pill";
+      pill.dataset.layer = layer.name;
+      pill.innerHTML = '<div class="lp-dot" style="background:' + esc(layer.color) + '"></div>' + esc(layer.name) + ' <span class="lp-count">' + layerNodes.length + "</span>";
+      pill.onclick = () => {
+        if (activeLayers.has(layer.name)) activeLayers.delete(layer.name);
+        else activeLayers.add(layer.name);
+        syncLayerTabUI();
+        applyLayerFilter();
+      };
+      pill.onmouseenter = () => {
+        if (pinnedNode) return;
+        node.select("circle").transition().duration(120).attr("opacity", (d) => d.layer === layer.name ? 1 : 0.1);
+        node.select("text").transition().duration(120).attr("opacity", (d) => d.layer === layer.name ? 1 : 0.05);
+      };
+      pill.onmouseleave = () => {
+        if (pinnedNode) return;
+        node.select("circle").transition().duration(150).attr("opacity", 1);
+        node.select("text").transition().duration(150).attr("opacity", (d) => d.dependents >= 1 || d.deps >= 3 ? 1 : 0.5);
+      };
+      layerRowEl.appendChild(pill);
+      const layerDirs = [...new Set(layerNodes.map((n) => n.dir))].sort();
+      if (layerDirs.length > 0) {
+        const group = document.createElement("div");
+        group.className = "dir-group";
+        const label = document.createElement("div");
+        label.className = "dir-group-label";
+        label.innerHTML = '<div class="dg-dot" style="background:' + esc(layer.color) + '"></div>' + esc(layer.name);
+        group.appendChild(label);
+        const pillsWrap = document.createElement("div");
+        pillsWrap.className = "dir-group-pills";
+        layerDirs.forEach((dir) => {
+          const dp = document.createElement("div");
+          dp.className = "filter-pill active";
+          const shortDir = dir.includes("/") ? dir.substring(dir.indexOf("/") + 1) : dir;
+          dp.innerHTML = '<div class="pill-dot" style="background:' + dirColor(dir) + '"></div>' + esc(shortDir || ".") + ' <span class="pill-count">' + (dirCounts[dir] || 0) + "</span>";
+          dp.onclick = () => {
+            if (activeDirs.has(dir)) {
+              activeDirs.delete(dir);
+              dp.classList.remove("active");
+            } else {
+              activeDirs.add(dir);
+              dp.classList.add("active");
+            }
+            applyLayerFilter();
+          };
+          pillsWrap.appendChild(dp);
+        });
+        group.appendChild(pillsWrap);
+        dirPanelEl.appendChild(group);
+      }
+    });
+    w._origApplyFilter = applyFilter;
+  }
+  var getLayerCenters2;
+  var clusterForce2;
+  var updateHulls2;
+  var syncLayerTabUI2;
+  setTimeout(() => w.zoomFit(), 1500);
+  if (_savedSettings) {
+    if (_savedSettings.fontSize) w.setFontSize(_savedSettings.fontSize);
+  }
+  var pinnedNode = null;
+  function highlightNode(d) {
+    const conn = /* @__PURE__ */ new Set([d.id]);
+    DATA.links.forEach((l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (s === d.id) conn.add(t);
+      if (t === d.id) conn.add(s);
+    });
+    node.select("circle").transition().duration(150).attr("opacity", (n) => conn.has(n.id) ? 1 : 0.1);
+    node.select("text").transition().duration(150).attr("opacity", (n) => conn.has(n.id) ? 1 : 0.05);
+    link.transition().duration(150).attr("opacity", (l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return s === d.id || t === d.id ? 0.9 : 0.03;
+    }).attr("stroke", (l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (s === d.id) return "#58a6ff";
+      if (t === d.id) return "#3fb950";
+      return l.type === "type-only" ? "#1f3d5c" : "#30363d";
+    }).attr("stroke-width", (l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return s === d.id || t === d.id ? 2 : 1;
+    }).attr("marker-end", (l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (s === d.id) return "url(#arrow-1)";
+      if (t === d.id) return "url(#arrow-2)";
+      return "url(#arrow-0)";
+    });
+  }
+  function resetGraphHighlight() {
+    pinnedNode = null;
+    node.select("circle").transition().duration(200).attr("opacity", 1);
+    node.select("text").transition().duration(200).attr("opacity", (d) => d.dependents >= 1 || d.deps >= 3 ? 1 : 0.5);
+    link.transition().duration(200).attr("opacity", baseLinkOpacity).attr("stroke", (d) => d.type === "type-only" ? "#1f3d5c" : "#30363d").attr("stroke-width", 1).attr("marker-end", "url(#arrow-0)");
+  }
+  node.on("mouseover", (e, d) => {
+    showTooltip(e, d);
+    if (!pinnedNode) highlightNode(d);
+  }).on("mousemove", (e) => positionTooltip(e)).on("mouseout", () => {
+    scheduleHideTooltip();
+  });
+  node.on("click", (e, d) => {
+    e.stopPropagation();
+    pinnedNode = d;
+    highlightNode(d);
+    showDetail(d);
+  });
+  svg.on("click", () => {
+    resetGraphHighlight();
+    tooltip.style.display = "none";
+    tooltipLocked = false;
+    w.closeDetail();
+  });
+  function showDetail(d) {
+    const p = document.getElementById("detail");
+    document.getElementById("d-name").textContent = d.id;
+    document.getElementById("d-meta").innerHTML = i("detail.dir") + ": " + esc(d.dir) + "<br>" + i("detail.dependencies") + ": " + d.deps + " \xB7 " + i("detail.dependents") + ": " + d.dependents;
+    const deptL = document.getElementById("d-dependents"), depsL = document.getElementById("d-deps");
+    deptL.innerHTML = (d.dependentsList || []).map((x) => '<li data-focus="' + esc(x) + '">\u2190 ' + esc(x) + "</li>").join("") || '<li style="color:var(--text-muted)">' + i("detail.none") + "</li>";
+    depsL.innerHTML = (d.dependencies || []).map((x) => '<li data-focus="' + esc(x) + '">\u2192 ' + esc(x) + "</li>").join("") || '<li style="color:var(--text-muted)">' + i("detail.none") + "</li>";
+    p.classList.add("open");
+  }
+  document.getElementById("d-dependents").addEventListener("click", function(e) {
+    const li = e.target.closest("li[data-focus]");
+    if (li) w.focusNode(li.dataset.focus);
+  });
+  document.getElementById("d-deps").addEventListener("click", function(e) {
+    const li = e.target.closest("li[data-focus]");
+    if (li) w.focusNode(li.dataset.focus);
+  });
+  w.closeDetail = () => document.getElementById("detail").classList.remove("open");
+  w.focusNode = (id) => {
+    const n = DATA.nodes.find((x) => x.id === id);
+    if (!n) return;
+    showDetail(n);
+    svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity.translate(W / 2 - n.x * 1.5, H / 2 - n.y * 1.5).scale(1.5));
+  };
+  function dragStart(e, d) {
+    if (!e.active) simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+  function dragging(e, d) {
+    d.fx = e.x;
+    d.fy = e.y;
+  }
+  function dragEnd(e, _d) {
+    if (!e.active) simulation.alphaTarget(0);
+  }
+  var searchInput = document.getElementById("search");
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "/" && document.activeElement !== searchInput) {
+      e.preventDefault();
+      searchInput.focus();
+    }
+    if (e.key === "Escape") {
+      searchInput.value = "";
+      searchInput.blur();
+      resetGraphHighlight();
+    }
+  });
+  searchInput.addEventListener("input", (e) => {
+    const q = e.target.value.toLowerCase();
+    if (!q) {
+      resetGraphHighlight();
+      return;
+    }
+    node.select("circle").attr("opacity", (d) => d.id.toLowerCase().includes(q) ? 1 : 0.06);
+    node.select("text").attr("opacity", (d) => d.id.toLowerCase().includes(q) ? 1 : 0.04);
+    link.attr("opacity", 0.03);
+  });
+  if (!LAYERS) {
+    const filterRowEl = document.getElementById("filter-layer-row");
+    DATA.dirs.forEach((dir) => {
+      const pill = document.createElement("div");
+      pill.className = "filter-pill active";
+      pill.innerHTML = '<div class="pill-dot" style="background:' + dirColor(dir) + '"></div>' + esc(dir || ".") + ' <span class="pill-count">' + dirCounts[dir] + "</span>";
+      pill.onclick = () => {
+        if (activeDirs.has(dir)) {
+          activeDirs.delete(dir);
+          pill.classList.remove("active");
+        } else {
+          activeDirs.add(dir);
+          pill.classList.add("active");
+        }
+        applyFilter();
+      };
+      pill.onmouseenter = () => {
+        if (pinnedNode) return;
+        node.select("circle").transition().duration(120).attr("opacity", (d) => d.dir === dir ? 1 : 0.1);
+        node.select("text").transition().duration(120).attr("opacity", (d) => d.dir === dir ? 1 : 0.05);
+      };
+      pill.onmouseleave = () => {
+        if (pinnedNode) return;
+        node.select("circle").transition().duration(150).attr("opacity", 1);
+        node.select("text").transition().duration(150).attr("opacity", (d) => d.dependents >= 1 || d.deps >= 3 ? 1 : 0.5);
+      };
+      filterRowEl.appendChild(pill);
+    });
+  }
+  function applyFilter() {
+    if (LAYERS) {
+      if (typeof applyLayerFilter === "function") {
+        applyLayerFilter();
+        return;
+      }
+    }
+    node.attr("display", (d) => activeDirs.has(d.dir) ? null : "none");
+    link.attr("display", (l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      const sD = DATA.nodes.find((n) => n.id === s)?.dir, tD = DATA.nodes.find((n) => n.id === t)?.dir;
+      return activeDirs.has(sD) && activeDirs.has(tD) ? null : "none";
+    });
+  }
+  var impactMode = false;
+  var impactBadge = document.getElementById("impact-badge");
+  w.toggleImpactMode = () => {
+    impactMode = !impactMode;
+    document.getElementById("impact-btn").classList.toggle("active", impactMode);
+    if (!impactMode) {
+      impactBadge.style.display = "none";
+      resetGraphHighlight();
+    }
+  };
+  function getTransitiveDependents(startId) {
+    const result = /* @__PURE__ */ new Set();
+    const queue = [startId];
+    const revMap = {};
+    DATA.links.forEach((l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (!revMap[t]) revMap[t] = [];
+      revMap[t].push(s);
+    });
+    while (queue.length) {
+      const id = queue.shift();
+      if (result.has(id)) continue;
+      result.add(id);
+      (revMap[id] || []).forEach((x) => queue.push(x));
+    }
+    return result;
+  }
+  node.on("click", (e, d) => {
+    if (!impactMode) {
+      e.stopPropagation();
+      pinnedNode = d;
+      highlightNode(d);
+      showDetail(d);
+      return;
+    }
+    e.stopPropagation();
+    const affected = getTransitiveDependents(d.id);
+    node.select("circle").transition().duration(200).attr("opacity", (n) => affected.has(n.id) ? 1 : 0.06).attr("stroke", (n) => affected.has(n.id) && n.id !== d.id ? "var(--red)" : n.deps >= 5 ? "var(--yellow)" : nodeColor(n)).attr("stroke-width", (n) => affected.has(n.id) ? 3 : 1.5);
+    node.select("text").transition().duration(200).attr("opacity", (n) => affected.has(n.id) ? 1 : 0.04);
+    link.transition().duration(200).attr("opacity", (l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return affected.has(s) && affected.has(t) ? 0.8 : 0.03;
+    }).attr("stroke", (l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      return affected.has(s) && affected.has(t) ? "var(--red)" : l.type === "type-only" ? "#1f3d5c" : "#30363d";
+    });
+    impactBadge.textContent = d.id.split("/").pop() + " \u2192 " + (affected.size - 1) + " " + i("impact.transitive");
+    impactBadge.style.display = "block";
+  });
+  window.addEventListener("resize", () => {
+    const ww = window.innerWidth, hh = window.innerHeight - 44;
+    svg.attr("width", ww).attr("height", hh);
+  });
+  function buildHierarchy() {
+    const hSvg = d3.select("#hier-svg");
+    const hG = hSvg.append("g");
+    const hZoom = d3.zoom().scaleExtent([0.1, 4]).on("zoom", (e) => hG.attr("transform", e.transform));
+    hSvg.call(hZoom);
+    const nodeMap = {};
+    DATA.nodes.forEach((n) => nodeMap[n.id] = n);
+    const importsMap = {};
+    DATA.links.forEach((l) => {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (!importsMap[s]) importsMap[s] = [];
+      importsMap[s].push(t);
+    });
+    const entryPoints = DATA.nodes.filter((n) => n.dependents === 0).map((n) => n.id);
+    const layers = {};
+    const visited = /* @__PURE__ */ new Set();
+    const queue = entryPoints.map((id) => ({ id, layer: 0 }));
+    DATA.nodes.forEach((n) => {
+      if (n.isOrphan) layers[n.id] = 0;
+    });
+    while (queue.length > 0) {
+      const { id, layer } = queue.shift();
+      if (visited.has(id) && (layers[id] ?? -1) >= layer) continue;
+      layers[id] = Math.max(layers[id] ?? 0, layer);
+      visited.add(id);
+      (importsMap[id] || []).forEach((t) => queue.push({ id: t, layer: layer + 1 }));
+    }
+    DATA.nodes.forEach((n) => {
+      if (!(n.id in layers)) layers[n.id] = 0;
+    });
+    const maxLayer = Math.max(0, ...Object.values(layers));
+    const layerGroups = {};
+    for (let li = 0; li <= maxLayer; li++) layerGroups[li] = [];
+    Object.entries(layers).forEach(([id, l]) => layerGroups[l].push(id));
+    Object.values(layerGroups).forEach((arr) => arr.sort((a, b) => (nodeMap[a]?.dir || "").localeCompare(nodeMap[b]?.dir || "") || a.localeCompare(b)));
+    const boxW = 200, boxH = 30, gapX = 24, gapY = 70, padY = 60, padX = 40;
+    const positions = {};
+    let maxRowWidth = 0;
+    for (let layer = 0; layer <= maxLayer; layer++) {
+      const items = layerGroups[layer];
+      maxRowWidth = Math.max(maxRowWidth, items.length * (boxW + gapX) - gapX);
+    }
+    for (let layer = 0; layer <= maxLayer; layer++) {
+      const items = layerGroups[layer], rowWidth = items.length * (boxW + gapX) - gapX, startX = padX + (maxRowWidth - rowWidth) / 2;
+      items.forEach((id, idx) => {
+        positions[id] = { x: startX + idx * (boxW + gapX), y: padY + layer * (boxH + gapY) };
+      });
+    }
+    const totalW = maxRowWidth + padX * 2, totalH = padY * 2 + (maxLayer + 1) * (boxH + gapY);
+    hSvg.attr("width", Math.max(totalW, W)).attr("height", Math.max(totalH, H));
+    const linkG = hG.append("g");
+    DATA.links.forEach((l) => {
+      const sId = l.source.id ?? l.source, tId = l.target.id ?? l.target;
+      const s = positions[sId], t = positions[tId];
+      if (!s || !t) return;
+      const x1 = s.x + boxW / 2, y1 = s.y + boxH, x2 = t.x + boxW / 2, y2 = t.y, midY = (y1 + y2) / 2;
+      linkG.append("path").attr("class", "hier-link").attr("d", `M${x1},${y1} C${x1},${midY} ${x2},${midY} ${x2},${y2}`).attr("stroke", l.type === "type-only" ? "#1f3d5c" : "var(--border)").attr("stroke-dasharray", l.type === "type-only" ? "4,3" : null).attr("data-source", sId).attr("data-target", tId);
+    });
+    hSvg.append("defs").append("marker").attr("id", "harrow").attr("viewBox", "0 -3 6 6").attr("refX", 6).attr("refY", 0).attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto").append("path").attr("d", "M0,-3L6,0L0,3Z").attr("fill", "var(--border)");
+    linkG.selectAll("path").attr("marker-end", "url(#harrow)");
+    for (let layer = 0; layer <= maxLayer; layer++) {
+      if (!layerGroups[layer].length) continue;
+      hG.append("text").attr("class", "hier-layer-label").attr("font-size", 11).attr("data-depth-idx", layer).attr("x", 12).attr("y", padY + layer * (boxH + gapY) + boxH / 2 + 4).text("L" + layer);
+    }
+    const nodeG = hG.append("g");
+    DATA.nodes.forEach((n) => {
+      const pos = positions[n.id];
+      if (!pos) return;
+      const gn = nodeG.append("g").attr("class", "hier-node").attr("transform", `translate(${pos.x},${pos.y})`);
+      gn.append("rect").attr("width", boxW).attr("height", boxH).attr("fill", "var(--bg-card)").attr("stroke", nodeColor(n)).attr("stroke-width", circularSet.has(n.id) ? 2 : 1.5);
+      gn.append("text").attr("x", 8).attr("y", boxH / 2 + 4).attr("font-size", 11).text(fileName(n.id).length > 24 ? fileName(n.id).slice(0, 22) + "\u2026" : fileName(n.id));
+      gn.append("text").attr("x", boxW - 8).attr("y", boxH / 2 + 4).attr("text-anchor", "end").attr("font-size", 10).attr("fill", "var(--text-muted)").text(n.dependents > 0 ? "\u2191" + n.dependents : "");
+      gn.append("text").attr("x", 8).attr("y", -4).attr("font-size", 9).attr("fill", dirColor(n.dir)).attr("opacity", 0.7).text(n.dir);
+      gn.node().__data_id = n.id;
+      gn.on("mouseover", (e) => {
+        showTooltip(e, n);
+        if (!hierPinned) hierHighlight(n.id);
+      }).on("mousemove", (e) => positionTooltip(e)).on("mouseout", () => {
+        scheduleHideTooltip();
+        if (!hierPinned) hierResetHighlight();
+      }).on("click", (e) => {
+        e.stopPropagation();
+        hierPinned = n.id;
+        hierHighlight(n.id);
+        showHierDetail(n);
+      });
+    });
+    let hierPinned = null;
+    function hierHighlight(nId) {
+      linkG.selectAll("path").attr("stroke", function() {
+        const s = this.getAttribute("data-source"), t = this.getAttribute("data-target");
+        if (s === nId) return "#58a6ff";
+        if (t === nId) return "#3fb950";
+        return this.getAttribute("stroke-dasharray") ? "#1f3d5c" : "var(--border)";
+      }).attr("stroke-width", function() {
+        const s = this.getAttribute("data-source"), t = this.getAttribute("data-target");
+        return s === nId || t === nId ? 2.5 : 1;
+      }).attr("opacity", function() {
+        const s = this.getAttribute("data-source"), t = this.getAttribute("data-target");
+        return s === nId || t === nId ? 1 : 0.15;
+      });
+      nodeG.selectAll(".hier-node").attr("opacity", function() {
+        const id = this.__data_id;
+        if (id === nId) return 1;
+        const connected = DATA.links.some((l) => {
+          const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+          return s === nId && t === id || t === nId && s === id;
+        });
+        return connected ? 1 : 0.3;
+      });
+    }
+    function hierResetHighlight() {
+      hierPinned = null;
+      linkG.selectAll("path").attr("stroke", function() {
+        return this.getAttribute("stroke-dasharray") ? "#1f3d5c" : "var(--border)";
+      }).attr("stroke-width", 1).attr("opacity", 1);
+      nodeG.selectAll(".hier-node").attr("opacity", 1);
+    }
+    function showHierDetail(n) {
+      const p = document.getElementById("hier-detail");
+      document.getElementById("hd-name").textContent = n.id;
+      document.getElementById("hd-meta").innerHTML = i("detail.dir") + ": " + esc(n.dir) + "<br>" + i("detail.dependencies") + ": " + n.deps + " \xB7 " + i("detail.dependents") + ": " + n.dependents;
+      document.getElementById("hd-dependents").innerHTML = (n.dependentsList || []).map((x) => "<li>\u2190 " + esc(x) + "</li>").join("") || '<li style="color:var(--text-muted)">' + i("detail.none") + "</li>";
+      document.getElementById("hd-deps").innerHTML = (n.dependencies || []).map((x) => "<li>\u2192 " + esc(x) + "</li>").join("") || '<li style="color:var(--text-muted)">' + i("detail.none") + "</li>";
+      p.classList.add("open");
+    }
+    w.closeHierDetail = () => {
+      document.getElementById("hier-detail").classList.remove("open");
+      hierResetHighlight();
+      tooltip.style.display = "none";
+      tooltipLocked = false;
+    };
+    hSvg.on("click", () => {
+      w.closeHierDetail();
+    });
+    const hFilterRow = document.getElementById("hier-filter-row");
+    const hFilterBar = document.getElementById("hier-filter-bar");
+    if (hFilterBar) hFilterBar.style.display = "";
+    const hActiveLayers = /* @__PURE__ */ new Set();
+    function hierRelayoutInner() {
+      function isVisible(nId) {
+        const nd = nodeMap[nId];
+        if (!nd) return false;
+        if (LAYERS && nd.layer && hActiveLayers.size > 0 && !hActiveLayers.has(nd.layer)) return false;
+        return true;
+      }
+      const visibleDepths = [];
+      const visLayerGroups = {};
+      for (let depth = 0; depth <= maxLayer; depth++) {
+        const visItems = layerGroups[depth].filter(function(id) {
+          return isVisible(id);
+        });
+        if (visItems.length > 0) {
+          visLayerGroups[depth] = visItems;
+          visibleDepths.push(depth);
+        }
+      }
+      const newPositions = {};
+      let newMaxRowWidth = 0;
+      visibleDepths.forEach(function(depth) {
+        newMaxRowWidth = Math.max(newMaxRowWidth, visLayerGroups[depth].length * (boxW + gapX) - gapX);
+      });
+      visibleDepths.forEach(function(depth, yIdx) {
+        const items = visLayerGroups[depth];
+        const rowWidth = items.length * (boxW + gapX) - gapX;
+        const startX = padX + (newMaxRowWidth - rowWidth) / 2;
+        items.forEach(function(id, idx) {
+          newPositions[id] = { x: startX + idx * (boxW + gapX), y: padY + yIdx * (boxH + gapY) };
+        });
+      });
+      const newTotalW = (newMaxRowWidth || 0) + padX * 2;
+      const newTotalH = padY * 2 + Math.max(1, visibleDepths.length) * (boxH + gapY);
+      hSvg.attr("width", Math.max(newTotalW, W)).attr("height", Math.max(newTotalH, H));
+      nodeG.selectAll(".hier-node").each(function() {
+        const nId = this.__data_id;
+        const el = d3.select(this);
+        if (!isVisible(nId) || !newPositions[nId]) {
+          el.attr("display", "none");
+        } else {
+          el.attr("display", null).transition().duration(300).attr("transform", "translate(" + newPositions[nId].x + "," + newPositions[nId].y + ")");
+        }
+      });
+      linkG.selectAll("path").each(function() {
+        const sId = this.getAttribute("data-source");
+        const tId = this.getAttribute("data-target");
+        const el = d3.select(this);
+        if (!isVisible(sId) || !isVisible(tId) || !newPositions[sId] || !newPositions[tId]) {
+          el.attr("display", "none");
+        } else {
+          const s = newPositions[sId], t = newPositions[tId];
+          const x1 = s.x + boxW / 2, y1 = s.y + boxH;
+          const x2 = t.x + boxW / 2, y2 = t.y;
+          const midY = (y1 + y2) / 2;
+          el.attr("display", null).transition().duration(300).attr("d", "M" + x1 + "," + y1 + " C" + x1 + "," + midY + " " + x2 + "," + midY + " " + x2 + "," + y2);
+        }
+      });
+      hG.selectAll(".hier-layer-label").each(function() {
+        const depthIdx = +this.getAttribute("data-depth-idx");
+        const el = d3.select(this);
+        const yIdx = visibleDepths.indexOf(depthIdx);
+        if (yIdx === -1) {
+          el.attr("display", "none");
+        } else {
+          el.attr("display", null).transition().duration(300).attr("y", padY + yIdx * (boxH + gapY) + boxH / 2 + 4);
+        }
+      });
+      if (hierPinned && !isVisible(hierPinned)) {
+        w.closeHierDetail();
+      }
+    }
+    function hierSyncFromTabInner() {
+      if (!LAYERS) return;
+      hActiveLayers.clear();
+      activeLayers.forEach(function(name) {
+        hActiveLayers.add(name);
+      });
+      hFilterRow.querySelectorAll(".layer-pill").forEach(function(p) {
+        const ln = p.dataset.layer;
+        if (ln === "all") {
+          p.classList.toggle("active", hActiveLayers.size === 0);
+        } else {
+          p.classList.toggle("active", hActiveLayers.has(ln));
+        }
+      });
+    }
+    if (LAYERS) {
+      const allPill = document.createElement("div");
+      allPill.className = "layer-pill active";
+      allPill.style.fontWeight = "400";
+      allPill.textContent = "All";
+      allPill.dataset.layer = "all";
+      allPill.onclick = () => {
+        hActiveLayers.clear();
+        hFilterRow.querySelectorAll(".layer-pill").forEach((p) => p.classList.remove("active"));
+        allPill.classList.add("active");
+        hierRelayoutInner();
+      };
+      hFilterRow.appendChild(allPill);
+      LAYERS.forEach((layer) => {
+        const pill = document.createElement("div");
+        pill.className = "layer-pill";
+        pill.dataset.layer = layer.name;
+        const count = DATA.nodes.filter((n) => n.layer === layer.name).length;
+        pill.innerHTML = '<div class="lp-dot" style="background:' + esc(layer.color) + '"></div>' + esc(layer.name) + ' <span class="lp-count">' + count + "</span>";
+        pill.onclick = (e) => {
+          if (e.shiftKey) {
+            hActiveLayers.clear();
+            hActiveLayers.add(layer.name);
+          } else {
+            if (hActiveLayers.has(layer.name)) hActiveLayers.delete(layer.name);
+            else hActiveLayers.add(layer.name);
+          }
+          hFilterRow.querySelectorAll(".layer-pill").forEach(function(p) {
+            const ln = p.dataset.layer;
+            if (ln === "all") p.classList.toggle("active", hActiveLayers.size === 0);
+            else p.classList.toggle("active", hActiveLayers.has(ln));
+          });
+          hierRelayoutInner();
+        };
+        hFilterRow.appendChild(pill);
+      });
+    } else {
+      const hActiveDirs = new Set(DATA.dirs);
+      DATA.dirs.forEach((dir) => {
+        const pill = document.createElement("div");
+        pill.className = "filter-pill active";
+        pill.innerHTML = '<div class="pill-dot" style="background:' + dirColor(dir) + '"></div>' + esc(dir || ".") + ' <span class="pill-count">' + (dirCounts[dir] || 0) + "</span>";
+        pill.onclick = () => {
+          if (hActiveDirs.has(dir)) {
+            hActiveDirs.delete(dir);
+            pill.classList.remove("active");
+          } else {
+            hActiveDirs.add(dir);
+            pill.classList.add("active");
+          }
+          nodeG.selectAll(".hier-node").attr("opacity", function() {
+            const nId = this.__data_id;
+            return hActiveDirs.has(nodeMap[nId]?.dir) ? 1 : 0.1;
+          });
+        };
+        hFilterRow.appendChild(pill);
+      });
+    }
+    hierRelayout = hierRelayoutInner;
+    hierSyncFromTab = hierSyncFromTabInner;
+    hSvg.call(hZoom.transform, d3.zoomIdentity.translate(
+      Math.max(0, (W - totalW) / 2),
+      20
+    ).scale(Math.min(1, W / (totalW + 40), H / (totalH + 40))));
+    if (activeLayers.size > 0) {
+      hierSyncFromTabInner();
+      hierRelayoutInner();
+    }
+  }
+  var DIFF = w.__ARCH.diff;
+  var buildDiffView = null;
+  if (DIFF) {
+    let isDiffNode = function(id) {
+      return addedSet.has(id) || removedSet.has(id) || modifiedSet.has(id) || affectedSet.has(id);
+    }, diffStatus = function(id) {
+      if (addedSet.has(id)) return "Added";
+      if (removedSet.has(id)) return "Removed";
+      if (modifiedSet.has(id)) return "Modified";
+      if (affectedSet.has(id)) return "Affected";
+      return "Unchanged";
+    }, diffStatusColor = function(id) {
+      if (addedSet.has(id)) return "var(--green)";
+      if (removedSet.has(id)) return "var(--red)";
+      if (modifiedSet.has(id)) return "var(--yellow)";
+      if (affectedSet.has(id)) return "var(--accent)";
+      return "var(--text-muted)";
+    }, getImpactChain = function(startId) {
+      const result = /* @__PURE__ */ new Set();
+      const queue = [startId];
+      while (queue.length) {
+        const id = queue.shift();
+        if (result.has(id)) continue;
+        result.add(id);
+        (diffRevMap[id] || []).forEach(function(x) {
+          queue.push(x);
+        });
+      }
+      return result;
+    }, applyDiffFilter = function() {
+      dNode.attr("display", function(d) {
+        if (!diffFocusMode) return null;
+        return isDiffNode(d.id) ? null : "none";
+      });
+      dNode.select("circle").attr("opacity", function(d) {
+        if (diffFocusMode) return isDiffNode(d.id) ? 1 : 0;
+        return isDiffNode(d.id) ? 1 : 0.12;
+      });
+      dNode.select("text").attr("opacity", function(d) {
+        if (diffFocusMode) return isDiffNode(d.id) ? 1 : 0;
+        return isDiffNode(d.id) ? 1 : 0.08;
+      });
+      dLink.attr("display", function(l) {
+        if (!diffFocusMode) return null;
+        const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return isDiffNode(s) && isDiffNode(t) ? null : "none";
+      });
+      dLink.attr("opacity", function(l) {
+        const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        if (isDiffNode(s) && isDiffNode(t)) return 0.6;
+        if (isDiffNode(s) || isDiffNode(t)) return 0.15;
+        return diffFocusMode ? 0 : 0.05;
+      });
+      dLink.attr("stroke", function(l) {
+        const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        if (isDiffNode(s) && isDiffNode(t)) return diffStatusColor(s);
+        return "#30363d";
+      });
+      dNode.select("circle").attr("stroke-width", function(d) {
+        return isDiffNode(d.id) ? 3 : 1;
+      });
+    }, resetDiffHighlight = function() {
+      applyDiffFilter();
+    }, highlightDiffImpact = function(d) {
+      const chain = getImpactChain(d.id);
+      dNode.select("circle").transition().duration(200).attr("opacity", function(n) {
+        return chain.has(n.id) ? 1 : 0.04;
+      }).attr("stroke-width", function(n) {
+        return chain.has(n.id) && n.id !== d.id ? 3 : isDiffNode(n.id) ? 3 : 1;
+      }).attr("stroke", function(n) {
+        return chain.has(n.id) && n.id !== d.id ? "var(--red)" : diffStatusColor(n.id);
+      });
+      dNode.select("text").transition().duration(200).attr("opacity", function(n) {
+        return chain.has(n.id) ? 1 : 0.03;
+      });
+      dLink.transition().duration(200).attr("opacity", function(l) {
+        const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return chain.has(s) && chain.has(t) ? 0.8 : 0.03;
+      }).attr("stroke", function(l) {
+        const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+        return chain.has(s) && chain.has(t) ? "var(--red)" : "#30363d";
+      });
+      return chain;
+    }, showDiffDetail = function(d) {
+      const panel = document.getElementById("diff-detail");
+      document.getElementById("dd-name").textContent = d.id;
+      const statusEl = document.getElementById("dd-status");
+      statusEl.textContent = diffStatus(d.id);
+      statusEl.style.color = diffStatusColor(d.id);
+      document.getElementById("dd-meta").innerHTML = i("detail.dir") + ": " + esc(d.dir) + "<br>" + i("detail.dependencies") + ": " + d.deps + " \xB7 " + i("detail.dependents") + ": " + d.dependents;
+      const chain = getImpactChain(d.id);
+      chain.delete(d.id);
+      const affectedList = document.getElementById("dd-affected");
+      if (chain.size > 0) {
+        affectedList.innerHTML = Array.from(chain).map(function(id) {
+          return '<li style="color:' + diffStatusColor(id) + '">\u2190 ' + esc(id) + ' <span style="font-size:10px;color:var(--text-muted)">(' + diffStatus(id) + ")</span></li>";
+        }).join("");
+      } else {
+        affectedList.innerHTML = '<li style="color:var(--text-muted)">' + i("diff.noImpact") + "</li>";
+      }
+      const depsList = document.getElementById("dd-deps");
+      depsList.innerHTML = (d.dependencies || []).map(function(x) {
+        return '<li style="color:' + diffStatusColor(x) + '">\u2192 ' + esc(x) + "</li>";
+      }).join("") || '<li style="color:var(--text-muted)">' + i("detail.none") + "</li>";
+      panel.style.display = "block";
+    };
+    isDiffNode2 = isDiffNode, diffStatus2 = diffStatus, diffStatusColor2 = diffStatusColor, getImpactChain2 = getImpactChain, applyDiffFilter2 = applyDiffFilter, resetDiffHighlight2 = resetDiffHighlight, highlightDiffImpact2 = highlightDiffImpact, showDiffDetail2 = showDiffDetail;
+    document.getElementById("diff-tab").style.display = "";
+    const addedSet = new Set(DIFF.added || []);
+    const removedSet = new Set(DIFF.removed || []);
+    const modifiedSet = new Set(DIFF.modified || []);
+    const affectedSet = new Set((DIFF.affectedDependents || []).map((a) => a.file));
+    document.getElementById("diff-added-count").textContent = String(addedSet.size);
+    document.getElementById("diff-removed-count").textContent = String(removedSet.size);
+    document.getElementById("diff-modified-count").textContent = String(modifiedSet.size);
+    document.getElementById("diff-affected-count").textContent = String(affectedSet.size);
+    const diffRevMap = {};
+    DATA.links.forEach(function(l) {
+      const s = l.source.id ?? l.source, t = l.target.id ?? l.target;
+      if (!diffRevMap[t]) diffRevMap[t] = [];
+      diffRevMap[t].push(s);
+    });
+    let diffFocusMode = false;
+    let dNode, dLink, dSim, simNodes, simLinks;
+    w.toggleDiffFocus = function() {
+      diffFocusMode = !diffFocusMode;
+      const btn = document.getElementById("diff-focus-btn");
+      btn.classList.toggle("active", diffFocusMode);
+      btn.textContent = diffFocusMode ? i("diff.showAll") : i("diff.focusChanges");
+      if (!diffBuilt) return;
+      applyDiffFilter();
+    };
+    w.closeDiffDetail = function() {
+      document.getElementById("diff-detail").style.display = "none";
+      if (diffBuilt) resetDiffHighlight();
+    };
+    buildDiffView = function() {
+      const dSvg = d3.select("#diff-svg").attr("width", W).attr("height", H);
+      const dG = dSvg.append("g");
+      const dZoom = d3.zoom().scaleExtent([0.05, 10]).on("zoom", (e) => dG.attr("transform", e.transform));
+      dSvg.call(dZoom);
+      function diffColor(d) {
+        if (addedSet.has(d.id)) return "var(--green)";
+        if (removedSet.has(d.id)) return "var(--red)";
+        if (modifiedSet.has(d.id)) return "var(--yellow)";
+        if (affectedSet.has(d.id)) return "var(--accent)";
+        return "#30363d";
+      }
+      const dDefs = dSvg.append("defs");
+      dDefs.append("marker").attr("id", "darrow").attr("viewBox", "0 -4 8 8").attr("refX", 8).attr("refY", 0).attr("markerWidth", 7).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M0,-3.5L8,0L0,3.5Z").attr("fill", "#30363d");
+      [["var(--green)", "darrow-g"], ["var(--red)", "darrow-r"], ["var(--yellow)", "darrow-y"], ["var(--accent)", "darrow-a"]].forEach(function(pair) {
+        dDefs.append("marker").attr("id", pair[1]).attr("viewBox", "0 -4 8 8").attr("refX", 8).attr("refY", 0).attr("markerWidth", 7).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M0,-3.5L8,0L0,3.5Z").attr("fill", pair[0]);
+      });
+      simNodes = DATA.nodes.map((d) => ({ ...d, x: void 0, y: void 0, vx: void 0, vy: void 0 }));
+      simLinks = DATA.links.map((d) => ({ source: d.source.id ?? d.source, target: d.target.id ?? d.target, type: d.type }));
+      dLink = dG.append("g").selectAll("line").data(simLinks).join("line").attr("stroke", "#30363d").attr("stroke-width", 1).attr("marker-end", "url(#darrow)").attr("opacity", 0.05);
+      dNode = dG.append("g").selectAll("g").data(simNodes).join("g").attr("cursor", "pointer");
+      dNode.append("circle").attr("r", (d) => nodeRadius(d) * nodeScale).attr("fill", diffColor).attr("stroke", diffColor).attr("stroke-width", (d) => isDiffNode(d.id) ? 3 : 1).attr("opacity", (d) => isDiffNode(d.id) ? 1 : 0.12);
+      dNode.append("text").text((d) => fileName(d.id).replace(/\.tsx?$/, "")).attr("dx", (d) => nodeRadius(d) * nodeScale + 4).attr("dy", 3.5).attr("font-size", 11).attr("fill", (d) => isDiffNode(d.id) ? "var(--text)" : "var(--text-muted)").attr("opacity", (d) => isDiffNode(d.id) ? 1 : 0.08).attr("pointer-events", "none");
+      dSim = d3.forceSimulation(simNodes).force("link", d3.forceLink(simLinks).id((d) => d.id).distance(70).strength(0.25)).force("charge", d3.forceManyBody().strength(-150).distanceMax(500)).force("center", d3.forceCenter(0, 0)).force("collision", d3.forceCollide().radius((d) => nodeRadius(d) * nodeScale + 4));
+      let dHullGroup = null;
+      if (LAYERS && LAYERS.length > 0) {
+        const dLayerCenters = {};
+        const dLayerCount = LAYERS.length;
+        const dBaseRadius = Math.max(60, Math.min(W, H) * 0.04 * Math.sqrt(dLayerCount));
+        LAYERS.forEach(function(l, idx) {
+          const angle = 2 * Math.PI * idx / dLayerCount - Math.PI / 2;
+          dLayerCenters[l.name] = { x: Math.cos(angle) * dBaseRadius, y: Math.sin(angle) * dBaseRadius };
+        });
+        dSim.force("center", null);
+        dSim.force("layerX", d3.forceX(function(d) {
+          return dLayerCenters[d.layer]?.x || 0;
+        }).strength(function(d) {
+          return d.layer ? 0.12 : 0.03;
+        }));
+        dSim.force("layerY", d3.forceY(function(d) {
+          return dLayerCenters[d.layer]?.y || 0;
+        }).strength(function(d) {
+          return d.layer ? 0.12 : 0.03;
+        }));
+        dSim.force("link").strength(function(l) {
+          const sL = l.source.layer ?? l.source, tL = l.target.layer ?? l.target;
+          return sL === tL ? 0.4 : 0.1;
+        });
+        dSim.force("cluster", (function() {
+          let ns;
+          function f(alpha) {
+            const centroids = {}, counts = {};
+            ns.forEach(function(n) {
+              if (!n.layer) return;
+              if (!centroids[n.layer]) {
+                centroids[n.layer] = { x: 0, y: 0 };
+                counts[n.layer] = 0;
+              }
+              centroids[n.layer].x += n.x;
+              centroids[n.layer].y += n.y;
+              counts[n.layer]++;
+            });
+            Object.keys(centroids).forEach(function(k) {
+              centroids[k].x /= counts[k];
+              centroids[k].y /= counts[k];
+            });
+            ns.forEach(function(n) {
+              if (!n.layer || !centroids[n.layer]) return;
+              n.vx += (centroids[n.layer].x - n.x) * alpha * 0.2;
+              n.vy += (centroids[n.layer].y - n.y) * alpha * 0.2;
+            });
+          }
+          f.initialize = function(n) {
+            ns = n;
+          };
+          return f;
+        })());
+        dHullGroup = dG.insert("g", ":first-child");
+      }
+      function updateDiffHulls() {
+        if (!dHullGroup) return;
+        dHullGroup.selectAll("*").remove();
+        LAYERS.forEach(function(layer) {
+          const layerNodes = simNodes.filter(function(n) {
+            return n.layer === layer.name;
+          });
+          if (layerNodes.length === 0) return;
+          if (diffFocusMode && !layerNodes.some(function(n) {
+            return isDiffNode(n.id);
+          })) return;
+          const hasDiff = layerNodes.some(function(n) {
+            return isDiffNode(n.id);
+          });
+          const points = [];
+          layerNodes.forEach(function(n) {
+            if (n.x == null || n.y == null) return;
+            if (diffFocusMode && !isDiffNode(n.id)) return;
+            const r = nodeRadius(n) * nodeScale + 30;
+            for (let a = 0; a < Math.PI * 2; a += Math.PI / 4) {
+              points.push([n.x + Math.cos(a) * r, n.y + Math.sin(a) * r]);
+            }
+          });
+          const fillOp = hasDiff ? 0.15 : 0.06;
+          const strokeOp = hasDiff ? 0.6 : 0.2;
+          const sw = hasDiff ? 2.5 : 1;
+          if (points.length < 6) {
+            const cx = layerNodes.reduce(function(s, n) {
+              return s + (n.x || 0);
+            }, 0) / layerNodes.length;
+            const cy = layerNodes.reduce(function(s, n) {
+              return s + (n.y || 0);
+            }, 0) / layerNodes.length;
+            dHullGroup.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 50).attr("fill", layer.color).attr("fill-opacity", fillOp).attr("stroke", layer.color).attr("stroke-opacity", strokeOp).attr("stroke-width", sw);
+          } else {
+            const hull = d3.polygonHull(points);
+            if (hull) {
+              dHullGroup.append("path").attr("d", "M" + hull.map(function(p) {
+                return p.join(",");
+              }).join("L") + "Z").attr("fill", layer.color).attr("fill-opacity", fillOp).attr("stroke", layer.color).attr("stroke-opacity", strokeOp).attr("stroke-width", sw).attr("stroke-dasharray", hasDiff ? null : "6,3");
+            }
+          }
+          const visNodes = diffFocusMode ? layerNodes.filter(function(n) {
+            return isDiffNode(n.id);
+          }) : layerNodes;
+          if (visNodes.length === 0) return;
+          const lx = visNodes.reduce(function(s, n) {
+            return s + (n.x || 0);
+          }, 0) / visNodes.length;
+          const ly = Math.min.apply(null, visNodes.map(function(n) {
+            return n.y || 0;
+          })) - 25;
+          dHullGroup.append("text").attr("x", lx).attr("y", ly).attr("text-anchor", "middle").attr("fill", layer.color).attr("fill-opacity", hasDiff ? 0.9 : 0.4).attr("font-size", 12).attr("font-weight", 600).text(layer.name);
+        });
+      }
+      let dTickCount = 0;
+      dSim.on("tick", function() {
+        dLink.each(function(d) {
+          const dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dist = Math.sqrt(dx * dx + dy * dy) || 1;
+          const rT = nodeRadius(d.target) * nodeScale, rS = nodeRadius(d.source) * nodeScale;
+          d3.select(this).attr("x1", d.source.x + dx / dist * rS).attr("y1", d.source.y + dy / dist * rS).attr("x2", d.target.x - dx / dist * rT).attr("y2", d.target.y - dy / dist * rT);
+        });
+        dNode.attr("transform", function(d) {
+          return "translate(" + d.x + "," + d.y + ")";
+        });
+        if (++dTickCount % 5 === 0) updateDiffHulls();
+      });
+      dNode.on("click", function(e, d) {
+        e.stopPropagation();
+        highlightDiffImpact(d);
+        showDiffDetail(d);
+      });
+      dSvg.on("click", function() {
+        w.closeDiffDetail();
+      });
+      dNode.on("mouseover", function(e, d) {
+        showTooltip(e, d);
+      }).on("mousemove", function(e) {
+        positionTooltip(e);
+      }).on("mouseout", function() {
+        scheduleHideTooltip();
+      });
+      applyDiffFilter();
+      let dAutoFitDone = false;
+      dSim.on("end", function() {
+        if (dAutoFitDone) return;
+        dAutoFitDone = true;
+        const b = dG.node().getBBox();
+        if (!b.width) return;
+        const s = Math.min(W / (b.width + 80), H / (b.height + 80)) * 0.9;
+        dSvg.call(dZoom.transform, d3.zoomIdentity.translate(W / 2 - (b.x + b.width / 2) * s, H / 2 - (b.y + b.height / 2) * s).scale(s));
+      });
+    };
+  }
+  var isDiffNode2;
+  var diffStatus2;
+  var diffStatusColor2;
+  var getImpactChain2;
+  var applyDiffFilter2;
+  var resetDiffHighlight2;
+  var highlightDiffImpact2;
+  var showDiffDetail2;
+  applyI18n();
+})();