From e26705c57366d91c0cd9c5ac743f6760441743dd Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Thu, 7 May 2026 18:17:49 +0000
Subject: [PATCH 1/9] Fix for bug #1421 - UI Tour corrupts main tools menu

---
 src/modules/ui-tour.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index 8bfdc11d5..dd569bfbb 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -30,7 +30,8 @@ function showHeightmapCustomizationPanel() {
 function hideHeightmapCustomizationPanel() {
   const toolsContent = byId("toolsContent");
   const customizationMenu = byId("customizationMenu");
-  if (customizationMenu) customizationMenu.style.display = "none";
+  if (!customizationMenu || customizationMenu.style.display !== "block") return;
+  customizationMenu.style.display = "none";
   if (toolsContent) toolsContent.style.display = "block";
 }
 

From 484d909ce180dfd4a903256542883d90d3e91090 Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Thu, 7 May 2026 18:25:53 +0000
Subject: [PATCH 2/9] Adding tests to cover the failure found with bug #1421

---
 tests/e2e/ui-tour.spec.ts | 68 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/tests/e2e/ui-tour.spec.ts b/tests/e2e/ui-tour.spec.ts
index 7499ff642..93417aca1 100644
--- a/tests/e2e/ui-tour.spec.ts
+++ b/tests/e2e/ui-tour.spec.ts
@@ -442,4 +442,72 @@ test.describe("UI Tour", () => {
     await expect(page.locator("#customizationMenu")).toBeHidden();
     await expect(page.locator("#options")).toBeHidden();
   });
+
+  // ── Regression: toolsContent must not leak when closing early (bug #1421) ──
+
+  test("closing tour on Layers tab step does not show toolsContent when menu is reopened", async ({
+    page,
+  }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to Layers Tab step — options panel is open, Layers tab is active.
+    await advanceSteps(page, 4);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[4]);
+
+    await page.locator(".driver-popover-close-btn").click();
+    await page.waitForSelector(".driver-popover", { state: "hidden" });
+
+    // Reopen the options panel.
+    await page.locator("#optionsTrigger").click();
+    await expect(page.locator("#options")).toBeVisible();
+
+    // Only the Layers tab content should be visible — not toolsContent.
+    await expect(page.locator("#layersContent")).toBeVisible();
+    await expect(page.locator("#toolsContent")).toBeHidden();
+  });
+
+  test("closing tour on Style tab step does not show toolsContent when menu is reopened", async ({
+    page,
+  }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to Style Tab step — options panel is open, Style tab is active.
+    await advanceSteps(page, 7);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[7]);
+
+    await page.locator(".driver-popover-close-btn").click();
+    await page.waitForSelector(".driver-popover", { state: "hidden" });
+
+    // Reopen the options panel.
+    await page.locator("#optionsTrigger").click();
+    await expect(page.locator("#options")).toBeVisible();
+
+    // Only the Style tab content should be visible — not toolsContent.
+    await expect(page.locator("#styleContent")).toBeVisible();
+    await expect(page.locator("#toolsContent")).toBeHidden();
+  });
+
+  test("closing tour on Options tab step does not show toolsContent when menu is reopened", async ({
+    page,
+  }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to Options Tab step — options panel is open, Options tab is active.
+    await advanceSteps(page, 10);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[10]);
+
+    await page.locator(".driver-popover-close-btn").click();
+    await page.waitForSelector(".driver-popover", { state: "hidden" });
+
+    // Reopen the options panel.
+    await page.locator("#optionsTrigger").click();
+    await expect(page.locator("#options")).toBeVisible();
+
+    // Only the Options tab content should be visible — not toolsContent.
+    await expect(page.locator("#optionsContent")).toBeVisible();
+    await expect(page.locator("#toolsContent")).toBeHidden();
+  });
 });

From c4193f39637f8cd9f5f5f31f3264d09637c8fd0c Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Fri, 8 May 2026 13:38:21 +0000
Subject: [PATCH 3/9] Trying to tweak UI Tour button and fixing the back
 navigation issue

---
 src/index.html            |  10 ++-
 src/modules/ui-tour.ts    |  20 +++++-
 tests/e2e/ui-tour.spec.ts | 129 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 154 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index 11dbf51e0..0ccdccaf6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8635,8 +8635,14 @@
     <script defer src="modules/io/load.js?v=1.120.5"></script>
     <script defer src="modules/io/cloud.js?v=1.114.0"></script>
     <script defer src="modules/io/export.js?v=1.120.5"></script>
-  <div id="tourPromptButton" style="display:none" data-tip="Take an interactive tour of the map generator">
-    <img src="images/tour-button-icon.png" alt="Take a tour" />
+  <div id="tourPromptButton" style="display:none" class="css-1pr1015" data-tip="Take an interactive tour of the map generator">
+    <button type="button" aria-label="Launch UI Tour" class="css-1gnpdxz">
+      <div aria-hidden="true" class="css-eiheq7">
+         <svg preserveAspectRatio="xMidYMid" viewBox="0 0 58 52" height="30px" width="30px">
+           <path d="M20 10 L20 42 L42 26 Z" fill="#000000"/>
+         </svg>
+      </div>
+    </button>
   </div>
   </body>
 </html>
diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index dd569bfbb..d1a60c1df 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -72,6 +72,9 @@ function start() {
       },
       {
         element: "#tooltip",
+        onHighlightStarted: () => {
+          document.body.classList.add("tour-free-roam");
+        },
         popover: {
           title: "Hover Tooltips",
           description:
@@ -84,6 +87,7 @@ function start() {
         element: "#optionsTrigger",
         onHighlightStarted: () => {
           document.body.classList.remove("tour-free-roam");
+          closeOptionsPanel();
         },
         popover: {
           title: "Open the Options Menu",
@@ -201,6 +205,7 @@ function start() {
       {
         element: "#configureWorld",
         onHighlightStarted: () => {
+          closeDialogs();
           clickTab("optionsTab");
         },
         popover: {
@@ -209,7 +214,6 @@ function start() {
             "This button opens the World Configurator where you can set the map's position on the globe, adjust equatorial and polar temperatures, and configure precipitation to shape the world's climate.",
           side: "right",
           onNextClick: () => {
-            editWorld();
             tour.moveNext();
           },
         },
@@ -217,6 +221,9 @@ function start() {
       {
         element: "#worldConfigurator",
         disableActiveInteraction: false,
+        onHighlightStarted: () => {
+          editWorld();
+        },
         popover: {
           title: "World Configurator",
           description:
@@ -254,7 +261,6 @@ function start() {
             "Open the Heightmap editor to manually sculpt terrain by raising or lowering elevation. Changes here reshape coastlines, rivers, and biomes.",
           side: "right",
           onNextClick: () => {
-            showHeightmapCustomizationPanel();
             tour.moveNext();
           },
         },
@@ -262,6 +268,9 @@ function start() {
       {
         element: "#customizationMenu",
         disableActiveInteraction: false,
+        onHighlightStarted: () => {
+          showHeightmapCustomizationPanel();
+        },
         onDeselected: () => {
           hideHeightmapCustomizationPanel();
         },
@@ -302,13 +311,15 @@ function start() {
       // ── Export / Save / Load ─────────────────────────────────────────────────
       {
         element: "#exportButton",
+        onHighlightStarted: () => {
+          closeDialogs();
+        },
         popover: {
           title: "Export",
           description:
             "Click Export to open the export dialog where you can download the map as an SVG, PNG, or JPEG image, split it into tiles, or export the world data as JSON.",
           side: "top",
           onNextClick: () => {
-            showExportPane();
             tour.moveNext();
           },
         },
@@ -316,6 +327,9 @@ function start() {
       {
         element: "#exportMapData",
         disableActiveInteraction: false,
+        onHighlightStarted: () => {
+          showExportPane();
+        },
         popover: {
           title: "Export Options",
           description:
diff --git a/tests/e2e/ui-tour.spec.ts b/tests/e2e/ui-tour.spec.ts
index 93417aca1..7a40708da 100644
--- a/tests/e2e/ui-tour.spec.ts
+++ b/tests/e2e/ui-tour.spec.ts
@@ -47,6 +47,16 @@ async function nextStep(page: Page, expectedTitle: string) {
   );
 }
 
+/** Click Previous and wait for the popover title to become expectedTitle. */
+async function prevStep(page: Page, expectedTitle: string) {
+  await page.locator(".driver-popover-prev-btn").click();
+  await page.waitForFunction(
+    (title: string) => document.querySelector(".driver-popover-title")?.textContent?.trim() === title,
+    expectedTitle,
+    { timeout: 5000 },
+  );
+}
+
 /** Click Next N times with a fixed delay — used for bulk advancing where we
  *  don't need to assert intermediate titles. */
 async function advanceSteps(page: Page, count: number) {
@@ -365,6 +375,125 @@ test.describe("UI Tour", () => {
     await expect(page.locator("#exportMapData")).toBeHidden();
   });
 
+  // ── Back navigation ────────────────────────────────────────────────────────
+
+  test("back to Hover Tooltips step restores tour-free-roam class", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance past Navigate the Map so tour-free-roam is added, then to Open
+    // the Options Menu where onHighlightStarted removes it.
+    await nextStep(page, STEP_TITLES[1]); // → Navigate the Map
+    await nextStep(page, STEP_TITLES[2]); // → Hover Tooltips (free-roam added by onNextClick)
+    await nextStep(page, STEP_TITLES[3]); // → Open the Options Menu (free-roam removed)
+    await expect(page.locator("body")).not.toHaveClass(/tour-free-roam/);
+
+    // Go back: onHighlightStarted on Hover Tooltips must re-add the class.
+    await prevStep(page, STEP_TITLES[2]);
+    await expect(page.locator("body")).toHaveClass(/tour-free-roam/);
+  });
+
+  test("back to Open the Options Menu step closes the options panel", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to Layers Tab so the options panel is open.
+    await advanceSteps(page, 4);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[4]);
+    await expect(page.locator("#options")).toBeVisible();
+
+    // Go back to Open the Options Menu: onHighlightStarted must close the panel.
+    await prevStep(page, STEP_TITLES[3]);
+    await expect(page.locator("#options")).toBeHidden();
+  });
+
+  test("back from World Configurator to Configure World closes the dialog", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to World Configurator step — dialog is open.
+    await advanceSteps(page, 13);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[13]);
+    await expect(page.locator("#worldConfigurator")).toBeVisible();
+
+    // Go back: onHighlightStarted on Configure World must close the dialog.
+    await prevStep(page, STEP_TITLES[12]);
+    await expect(page.locator("#worldConfigurator")).toBeHidden();
+    await expect(page.locator("#optionsContent")).toBeVisible();
+  });
+
+  test("back from Tools Tab to World Configurator reopens the dialog", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to Tools Tab — World Configurator dialog is closed.
+    await advanceSteps(page, 14);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[14]);
+    await expect(page.locator("#worldConfigurator")).toBeHidden();
+
+    // Go back: onHighlightStarted on World Configurator must reopen the dialog.
+    await prevStep(page, STEP_TITLES[13]);
+    await expect(page.locator("#worldConfigurator")).toBeVisible();
+  });
+
+  test("back from About Tab to Heightmap Editor shows the customization panel", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to About Tab — customization panel was hidden when leaving step 16.
+    await advanceSteps(page, 17);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[17]);
+    await expect(page.locator("#customizationMenu")).toBeHidden();
+
+    // Go back: onHighlightStarted on Heightmap Editor must show the panel.
+    await prevStep(page, STEP_TITLES[16]);
+    await expect(page.locator("#customizationMenu")).toBeVisible();
+    await expect(page.locator("#toolsContent")).toBeHidden();
+  });
+
+  test("back from Heightmap Editor to Edit the Heightmap hides the customization panel", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Arrive at Heightmap Editor from About Tab backward (panel visible).
+    await advanceSteps(page, 17);
+    await prevStep(page, STEP_TITLES[16]);
+    await expect(page.locator("#customizationMenu")).toBeVisible();
+
+    // Go back one more: onDeselected on Heightmap Editor must hide the panel.
+    await prevStep(page, STEP_TITLES[15]);
+    await expect(page.locator("#customizationMenu")).toBeHidden();
+    await expect(page.locator("#toolsContent")).toBeVisible();
+  });
+
+  test("back from Export Options to Export closes the export dialog", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to Export Options — export dialog is open.
+    await advanceSteps(page, 20);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[20]);
+    await expect(page.locator("#exportMapData")).toBeVisible();
+
+    // Go back: onHighlightStarted on Export must close the dialog.
+    await prevStep(page, STEP_TITLES[19]);
+    await expect(page.locator("#exportMapData")).toBeHidden();
+  });
+
+  test("back from Save and Load Maps to Export Options reopens the export dialog", async ({ page }) => {
+    await page.evaluate(() => (window as any).UITour.start());
+    await page.waitForSelector(".driver-popover", { state: "visible" });
+
+    // Advance to the final step — export dialog was closed by step 20's onNextClick.
+    await advanceSteps(page, 21);
+    expect(await popoverTitle(page)).toBe(STEP_TITLES[21]);
+    await expect(page.locator("#exportMapData")).toBeHidden();
+
+    // Go back: onHighlightStarted on Export Options must reopen the dialog.
+    await prevStep(page, STEP_TITLES[20]);
+    await expect(page.locator("#exportMapData")).toBeVisible();
+  });
+
   // ── Cleanup ────────────────────────────────────────────────────────────────
 
   test("dismissing the tour removes driver-active and closes the options panel", async ({

From a598d606ffa466903274a5459f3cf26bd6aa15e3 Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Fri, 8 May 2026 15:51:34 -0400
Subject: [PATCH 4/9] Fixes for UI Tour: new button styling, keyboard
 navigation of tour, changed color of tour titles, fixed back nav issue

---
 public/index.css       | 38 +++++++++++++++++++++++++-------------
 src/index.html         | 12 +++++-------
 src/modules/ui-tour.ts | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/public/index.css b/public/index.css
index 0e825c539..9dbf0389d 100644
--- a/public/index.css
+++ b/public/index.css
@@ -2411,32 +2411,44 @@ svg.button {
 
 #tourPromptButton {
   position: fixed;
-  bottom: 87px;
-  right: 26px;
-  width: 56px;
-  height: 56px;
+  bottom: 100px;
+  right: 36px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
+  background-color: var(--bg-main);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   user-select: none;
   animation: fadeIn 1s ease-in;
-  transform: scale(0.65);
-  opacity: var(--bg-opacity);
   z-index: 9999;
-  overflow: hidden;
 }
 
-#tourPromptButton img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+#tourPromptButton button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+#tourPromptButton svg path {
+  fill: #000000;
+  stroke: none;
 }
 
 #tourPromptButton:hover {
-  transform: scale(0.7);
-  opacity: 1;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+}
+
+#tourPromptButton:hover svg path {
+  fill: none;
+  stroke: #000000;
+  stroke-width: 5;
+  stroke-linejoin: round;
 }
 
 @media print {
diff --git a/src/index.html b/src/index.html
index 0ccdccaf6..4eaa912b3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8635,13 +8635,11 @@
     <script defer src="modules/io/load.js?v=1.120.5"></script>
     <script defer src="modules/io/cloud.js?v=1.114.0"></script>
     <script defer src="modules/io/export.js?v=1.120.5"></script>
-  <div id="tourPromptButton" style="display:none" class="css-1pr1015" data-tip="Take an interactive tour of the map generator">
-    <button type="button" aria-label="Launch UI Tour" class="css-1gnpdxz">
-      <div aria-hidden="true" class="css-eiheq7">
-         <svg preserveAspectRatio="xMidYMid" viewBox="0 0 58 52" height="30px" width="30px">
-           <path d="M20 10 L20 42 L42 26 Z" fill="#000000"/>
-         </svg>
-      </div>
+  <div id="tourPromptButton" style="display:none" data-tip="Take an interactive tour of the map generator">
+    <button type="button" aria-label="Launch UI Tour">
+      <svg preserveAspectRatio="xMidYMid" viewBox="0 0 58 52" height="30px" width="30px">
+        <path d="M20 10 L20 42 L42 26 Z"/>
+      </svg>
     </button>
   </div>
   </body>
diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index d1a60c1df..3e7fbb8d0 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -1,7 +1,18 @@
 import { driver } from "driver.js";
 import "driver.js/dist/driver.css";
+
 const byId = (id: string) => document.getElementById(id);
 
+let stylesInjected = false;
+function injectTourStyles(): void {
+  if (stylesInjected) return;
+  stylesInjected = true;
+  const style = document.createElement("style");
+  style.textContent =
+    ".driver-popover-title,.driver-popover-description,.driver-popover-progress-text{color:#000!important}";
+  document.head.appendChild(style);
+}
+
 function clickTab(tabId: string) {
   byId(tabId)?.click();
 }
@@ -36,12 +47,15 @@ function hideHeightmapCustomizationPanel() {
 }
 
 function start() {
+  injectTourStyles();
   closeOptionsPanel();
 
   const tour = driver({
     showProgress: true,
     allowClose: true,
+    allowKeyboardControl: false,
     onDestroyStarted: () => {
+      document.removeEventListener("keydown", handleKeydown);
       hideHeightmapCustomizationPanel();
       closeDialogs();
       tour.destroy();
@@ -357,6 +371,26 @@ function start() {
     ],
   });
 
+  function handleKeydown(e: KeyboardEvent): void {
+    if (!tour.isActive()) return;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        document.querySelector<HTMLElement>(".driver-popover-next-btn")?.click();
+        e.preventDefault();
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        document.querySelector<HTMLElement>(".driver-popover-prev-btn")?.click();
+        e.preventDefault();
+        break;
+      case "Escape":
+        tour.destroy();
+        break;
+    }
+  }
+
+  document.addEventListener("keydown", handleKeydown);
   tour.drive();
 }
 

From 8bb318b41dcefe2237bfe6a1b75daa934eafc6b0 Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Fri, 8 May 2026 16:04:51 -0400
Subject: [PATCH 5/9] Fixing lint error

---
 src/modules/ui-tour.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index 3e7fbb8d0..8b9806e82 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -376,12 +376,16 @@ function start() {
     switch (e.key) {
       case "ArrowRight":
       case "ArrowDown":
-        document.querySelector<HTMLElement>(".driver-popover-next-btn")?.click();
+        document
+          .querySelector<HTMLElement>(".driver-popover-next-btn")
+          ?.click();
         e.preventDefault();
         break;
       case "ArrowLeft":
       case "ArrowUp":
-        document.querySelector<HTMLElement>(".driver-popover-prev-btn")?.click();
+        document
+          .querySelector<HTMLElement>(".driver-popover-prev-btn")
+          ?.click();
         e.preventDefault();
         break;
       case "Escape":

From 2da7fb2f7a9a6cd14f1db17d29c32bd56e2f3500 Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Fri, 8 May 2026 16:07:35 -0400
Subject: [PATCH 6/9] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/modules/ui-tour.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index 8b9806e82..bc66ed7cb 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -371,22 +371,32 @@ function start() {
     ],
   });
 
+  function isEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return false;
+    if (target.isContentEditable) return true;
+    return !!target.closest(
+      "input, textarea, select, [contenteditable], [contenteditable='plaintext-only']"
+    );
+  }
+
   function handleKeydown(e: KeyboardEvent): void {
-    if (!tour.isActive()) return;
+    if (!tour.isActive() || isEditableTarget(e.target)) return;
     switch (e.key) {
       case "ArrowRight":
       case "ArrowDown":
+        e.preventDefault();
+        e.stopPropagation();
         document
           .querySelector<HTMLElement>(".driver-popover-next-btn")
           ?.click();
-        e.preventDefault();
         break;
       case "ArrowLeft":
       case "ArrowUp":
+        e.preventDefault();
+        e.stopPropagation();
         document
           .querySelector<HTMLElement>(".driver-popover-prev-btn")
           ?.click();
-        e.preventDefault();
         break;
       case "Escape":
         tour.destroy();

From 174dbf55d1f18e66a79f65e8526bd317563a161d Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Fri, 8 May 2026 16:09:17 -0400
Subject: [PATCH 7/9] fixing lint findings

---
 src/modules/ui-tour.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index bc66ed7cb..973ec7c76 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -375,7 +375,7 @@ function start() {
     if (!(target instanceof HTMLElement)) return false;
     if (target.isContentEditable) return true;
     return !!target.closest(
-      "input, textarea, select, [contenteditable], [contenteditable='plaintext-only']"
+      "input, textarea, select, [contenteditable], [contenteditable='plaintext-only']",
     );
   }
 

From 51b7b9e94e998873b006676606207384c4644aa9 Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe.mcmahon.home@gmail.com>
Date: Tue, 12 May 2026 00:52:04 +0000
Subject: [PATCH 8/9] Changing directjs use

---
 public/index.css       | 20 +++++++++----------
 src/modules/ui-tour.ts | 45 ++++++++++++------------------------------
 2 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/public/index.css b/public/index.css
index 9dbf0389d..813017b61 100644
--- a/public/index.css
+++ b/public/index.css
@@ -2477,7 +2477,7 @@ svg.button {
     background: #25252a;
   }
 }
-.driver-popover {
+.fmg-tour.driver-popover {
   background-color: #1a1a2e;
   border: 1px solid #4a4a6a;
   color: #c8c8d0;
@@ -2485,7 +2485,7 @@ svg.button {
   border-radius: 4px;
 }
 
-.driver-popover-title {
+.fmg-tour .driver-popover-title {
   color: #e8d5a3;
   font-size: 1.1em;
   border-bottom: 1px solid #4a4a6a;
@@ -2493,12 +2493,12 @@ svg.button {
   margin-bottom: 0.5em;
 }
 
-.driver-popover-description {
+.fmg-tour .driver-popover-description {
   font-size: 0.9em;
   line-height: 1.5;
 }
 
-.driver-popover-footer button {
+.fmg-tour .driver-popover-footer button {
   background-color: #3a3a5c;
   border: 1px solid #5a5a7a;
   color: #c8c8d0;
@@ -2506,28 +2506,28 @@ svg.button {
   cursor: pointer;
 }
 
-.driver-popover-footer button:hover {
+.fmg-tour .driver-popover-footer button:hover {
   background-color: #4a4a6c;
 }
 
-.driver-popover-progress-text {
+.fmg-tour .driver-popover-progress-text {
   color: #8a8aaa;
   font-size: 0.8em;
 }
 
-.driver-popover-arrow-side-left.driver-popover-arrow {
+.fmg-tour .driver-popover-arrow-side-left.driver-popover-arrow {
   border-left-color: #4a4a6a;
 }
 
-.driver-popover-arrow-side-right.driver-popover-arrow {
+.fmg-tour .driver-popover-arrow-side-right.driver-popover-arrow {
   border-right-color: #4a4a6a;
 }
 
-.driver-popover-arrow-side-top.driver-popover-arrow {
+.fmg-tour .driver-popover-arrow-side-top.driver-popover-arrow {
   border-top-color: #4a4a6a;
 }
 
-.driver-popover-arrow-side-bottom.driver-popover-arrow {
+.fmg-tour .driver-popover-arrow-side-bottom.driver-popover-arrow {
   border-bottom-color: #4a4a6a;
 }
 
diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index 973ec7c76..cb33b65af 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -3,16 +3,6 @@ import "driver.js/dist/driver.css";
 
 const byId = (id: string) => document.getElementById(id);
 
-let stylesInjected = false;
-function injectTourStyles(): void {
-  if (stylesInjected) return;
-  stylesInjected = true;
-  const style = document.createElement("style");
-  style.textContent =
-    ".driver-popover-title,.driver-popover-description,.driver-popover-progress-text{color:#000!important}";
-  document.head.appendChild(style);
-}
-
 function clickTab(tabId: string) {
   byId(tabId)?.click();
 }
@@ -47,13 +37,16 @@ function hideHeightmapCustomizationPanel() {
 }
 
 function start() {
-  injectTourStyles();
   closeOptionsPanel();
 
   const tour = driver({
     showProgress: true,
     allowClose: true,
-    allowKeyboardControl: false,
+    popoverClass: "fmg-tour",
+    overlayColor: "rgb(0,0,0)",
+    overlayOpacity: 0.75,
+    stagePadding: 4,
+    stageRadius: 4,
     onDestroyStarted: () => {
       document.removeEventListener("keydown", handleKeydown);
       hideHeightmapCustomizationPanel();
@@ -381,26 +374,14 @@ function start() {
 
   function handleKeydown(e: KeyboardEvent): void {
     if (!tour.isActive() || isEditableTarget(e.target)) return;
-    switch (e.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        e.preventDefault();
-        e.stopPropagation();
-        document
-          .querySelector<HTMLElement>(".driver-popover-next-btn")
-          ?.click();
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        e.preventDefault();
-        e.stopPropagation();
-        document
-          .querySelector<HTMLElement>(".driver-popover-prev-btn")
-          ?.click();
-        break;
-      case "Escape":
-        tour.destroy();
-        break;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      document.querySelector<HTMLElement>(".driver-popover-next-btn")?.click();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      document.querySelector<HTMLElement>(".driver-popover-prev-btn")?.click();
     }
   }
 

From 33cfe8174f0bc423469a4016a77a998aab007a1d Mon Sep 17 00:00:00 2001
From: Joe McMahon <joe@mcmahongroup.org>
Date: Mon, 11 May 2026 21:11:15 -0400
Subject: [PATCH 9/9] Updated use of driverjs

---
 package-lock.json      | 14 +-------------
 public/index.css       | 29 ++---------------------------
 src/modules/ui-tour.ts | 19 +++++++++++++++++++
 3 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 82f789204..75ad21d92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "polylabel": "^2.0.1"
       },
       "devDependencies": {
-        "@biomejs/biome": "^2.4.13",
+        "@biomejs/biome": "^2.4.6",
         "@playwright/test": "^1.57.0",
         "@types/d3": "^7.4.3",
         "@types/delaunator": "^5.0.3",
@@ -104,9 +104,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT OR Apache-2.0",
       "optional": true,
       "os": [
@@ -124,9 +121,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT OR Apache-2.0",
       "optional": true,
       "os": [
@@ -144,9 +138,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT OR Apache-2.0",
       "optional": true,
       "os": [
@@ -164,9 +155,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT OR Apache-2.0",
       "optional": true,
       "os": [
diff --git a/public/index.css b/public/index.css
index 813017b61..d8fe775f6 100644
--- a/public/index.css
+++ b/public/index.css
@@ -2478,17 +2478,12 @@ svg.button {
   }
 }
 .fmg-tour.driver-popover {
-  background-color: #1a1a2e;
-  border: 1px solid #4a4a6a;
-  color: #c8c8d0;
-  font-family: Georgia, serif;
   border-radius: 4px;
 }
 
 .fmg-tour .driver-popover-title {
-  color: #e8d5a3;
   font-size: 1.1em;
-  border-bottom: 1px solid #4a4a6a;
+  border-bottom: 1px solid;
   padding-bottom: 0.4em;
   margin-bottom: 0.5em;
 }
@@ -2499,38 +2494,18 @@ svg.button {
 }
 
 .fmg-tour .driver-popover-footer button {
-  background-color: #3a3a5c;
-  border: 1px solid #5a5a7a;
-  color: #c8c8d0;
   border-radius: 3px;
   cursor: pointer;
 }
 
 .fmg-tour .driver-popover-footer button:hover {
-  background-color: #4a4a6c;
+  background-color: #e0e0e0;
 }
 
 .fmg-tour .driver-popover-progress-text {
-  color: #8a8aaa;
   font-size: 0.8em;
 }
 
-.fmg-tour .driver-popover-arrow-side-left.driver-popover-arrow {
-  border-left-color: #4a4a6a;
-}
-
-.fmg-tour .driver-popover-arrow-side-right.driver-popover-arrow {
-  border-right-color: #4a4a6a;
-}
-
-.fmg-tour .driver-popover-arrow-side-top.driver-popover-arrow {
-  border-top-color: #4a4a6a;
-}
-
-.fmg-tour .driver-popover-arrow-side-bottom.driver-popover-arrow {
-  border-bottom-color: #4a4a6a;
-}
-
 /* Tooltip demo step: hide overlay and restore all pointer events so the map is fully hoverable */
 body.tour-free-roam .driver-overlay {
   opacity: 0 !important;
diff --git a/src/modules/ui-tour.ts b/src/modules/ui-tour.ts
index cb33b65af..0db2ce8a2 100644
--- a/src/modules/ui-tour.ts
+++ b/src/modules/ui-tour.ts
@@ -47,6 +47,25 @@ function start() {
     overlayOpacity: 0.75,
     stagePadding: 4,
     stageRadius: 4,
+    onPopoverRender: (popover) => {
+      Object.assign(popover.wrapper.style, {
+        backgroundColor: "#ffffff",
+        color: "#000000",
+        border: "1px solid #cccccc",
+        fontFamily: "Georgia, serif",
+      });
+      popover.title.style.color = "#000000";
+      popover.title.style.borderBottomColor = "#cccccc";
+      popover.progress.style.color = "#666666";
+      popover.closeButton.style.color = "#000000";
+      for (const btn of [popover.previousButton, popover.nextButton]) {
+        Object.assign(btn.style, {
+          backgroundColor: "#f0f0f0",
+          border: "1px solid #cccccc",
+          color: "#000000",
+        });
+      }
+    },
     onDestroyStarted: () => {
       document.removeEventListener("keydown", handleKeydown);
       hideHeightmapCustomizationPanel();