From 59fe113ba32e8b18ac9b156b01bb47a17723bb10 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 26 Feb 2026 17:15:11 +0000
Subject: [PATCH] Improve Merge States dialog: add hover highlight and clearer
 instructions

Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
---
 .../modules/dynamic/editors/states-editor.js  | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/public/modules/dynamic/editors/states-editor.js b/public/modules/dynamic/editors/states-editor.js
index e8351218..a514008a 100644
--- a/public/modules/dynamic/editors/states-editor.js
+++ b/public/modules/dynamic/editors/states-editor.js
@@ -1290,9 +1290,9 @@ function openStateMergeDialog() {
   const statesSelector = validStates
     .map(
       s => /* html */ `
-      <div data-tip="${s.fullName}">
+      <div data-id="${s.i}" data-tip="${s.fullName}" style="cursor:default">
         <input type="radio" name="rulingState" value="${s.i}" />
-        <input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}"} />
+        <input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}" />
         <label for="selectState${s.i}" class="checkbox-label">${emblem(s.i)}${s.fullName}</label>
       </div>
     `
@@ -1301,16 +1301,57 @@ function openStateMergeDialog() {
 
   alertMessage.innerHTML = /* html */ `
     <form id='mergeStatesForm' style="overflow: hidden; display: flex; flex-direction: column; gap: 1em;">
-      <header style='font-weight:bold;'>Select multiple states to merge and the ruling state to merge into</header>
+      <header style='font-weight:bold;'>Merge states</header>
+      <p style="margin:0">
+        Check the <b>checkbox</b> next to each state you want to merge.
+        Use the <b>radio button</b> to pick the <em>ruling state</em> that will absorb all others (its name, color, and capital will be kept).
+        Hover over a row to highlight the state on the map.
+      </p>
       <main style='display: grid; grid-template-columns: 1fr 1fr; gap: .3em;'>
         ${statesSelector}
       </main>
     </form>
   `;
 
+  byId("mergeStatesForm")
+    .querySelectorAll("div[data-id]")
+    .forEach(el => {
+      el.addEventListener("mouseenter", highlightStateOnMergeHover);
+      el.addEventListener("mouseleave", stateHighlightOff);
+    });
+
+  function highlightStateOnMergeHover(event) {
+    if (!layerIsOn("toggleStates")) return;
+    const state = +event.currentTarget.dataset.id;
+    if (!state) return;
+    const d = regions.select("#state" + state).attr("d");
+    if (!d) return;
+
+    stateHighlightOff();
+
+    const path = debug
+      .append("path")
+      .attr("class", "highlight")
+      .attr("d", d)
+      .attr("fill", "none")
+      .attr("stroke", "red")
+      .attr("stroke-width", 1)
+      .attr("opacity", 1)
+      .attr("filter", "url(#blur1)");
+
+    const totalLength = path.node().getTotalLength();
+    const duration = (totalLength + 5000) / 2;
+    const interpolate = d3.interpolateString(`0, ${totalLength}`, `${totalLength}, ${totalLength}`);
+    path
+      .transition()
+      .duration(duration)
+      .attrTween("stroke-dasharray", () => interpolate);
+  }
+
   $("#alert").dialog({
     width: fitContent(),
     title: `Merge states`,
+    close: stateHighlightOff,
     buttons: {
       Merge: function () {
         const formData = new FormData(byId("mergeStatesForm"));