From b4ce4ede42e3a2e0053f01fe57cd40fa2a2db2c9 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 02:06:26 +0000
Subject: [PATCH] Fix: color changes re-render in-place without page flash

theme-changed now dispatches theme-refresh event instead of
full navigate(). Map re-renders markers, packets re-renders
table rows. No teardown/rebuild, no flash.
---
 public/app.js     |  5 ++++-
 public/index.html |  8 ++++----
 public/live.js    | 14 +++++++++++++-
 public/map.js     | 14 +++++++++++++-
 public/packets.js | 14 +++++++++++++-
 5 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/public/app.js b/public/app.js
index 985a90c..eb47d96 100644
--- a/public/app.js
+++ b/public/app.js
@@ -315,7 +315,10 @@ function navigate() {
 }
 
 window.addEventListener('hashchange', navigate);
-window.addEventListener('theme-changed', () => { if (typeof navigate === 'function') navigate(); });
+window.addEventListener('theme-changed', () => {
+  // Notify current page to re-render without full teardown
+  window.dispatchEvent(new CustomEvent('theme-refresh'));
+});
 window.addEventListener('DOMContentLoaded', () => {
   connectWS();
 
diff --git a/public/index.html b/public/index.html
index 1b77ad8..3214953 100644
--- a/public/index.html
+++ b/public/index.html
@@ -85,10 +85,10 @@
   <script src="region-filter.js?v=1774325000"></script>
   <script src="hop-resolver.js?v=1774223973"></script>
   <script src="hop-display.js?v=1774221932"></script>
-  <script src="app.js?v=1774229496"></script>
+  <script src="app.js?v=1774231586"></script>
   <script src="home.js?v=1774350000"></script>
-  <script src="packets.js?v=1774225004"></script>
-  <script src="map.js?v=1774220756" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="packets.js?v=1774231586"></script>
+  <script src="map.js?v=1774231586" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774221131" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="traces.js?v=1774135052" onerror="console.error('Failed to load:', this.src)"></script>
@@ -96,7 +96,7 @@
   <script src="audio.js?v=1774208460" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="audio-v1-constellation.js?v=1774207165" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="audio-lab.js?v=1774229396" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="live.js?v=1774229396" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="live.js?v=1774231586" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="observers.js?v=1774290000" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/live.js b/public/live.js
index 010a657..294b657 100644
--- a/public/live.js
+++ b/public/live.js
@@ -2237,5 +2237,17 @@
     VCR.buffer = []; VCR.playhead = -1; VCR.mode = 'LIVE'; VCR.missedCount = 0; VCR.speed = 1;
   }
 
-  registerPage('live', { init, destroy });
+  let _themeRefreshHandler = null;
+
+  registerPage('live', {
+    init: function(app, routeParam) {
+      _themeRefreshHandler = () => { /* live map rebuilds on next packet */ };
+      window.addEventListener('theme-refresh', _themeRefreshHandler);
+      return init(app, routeParam);
+    },
+    destroy: function() {
+      if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
+      return destroy();
+    }
+  });
 })();
diff --git a/public/map.js b/public/map.js
index 76d2f73..02e8698 100644
--- a/public/map.js
+++ b/public/map.js
@@ -680,5 +680,17 @@
     }
   }
 
-  registerPage('map', { init, destroy });
+  let _themeRefreshHandler = null;
+
+  registerPage('map', {
+    init: function(app, routeParam) {
+      _themeRefreshHandler = () => { if (markerLayer) renderMarkers(); };
+      window.addEventListener('theme-refresh', _themeRefreshHandler);
+      return init(app, routeParam);
+    },
+    destroy: function() {
+      if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
+      return destroy();
+    }
+  });
 })();
diff --git a/public/packets.js b/public/packets.js
index 82464b8..69e02c0 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -1695,7 +1695,19 @@
     } catch {}
   }
 
-  registerPage('packets', { init, destroy });
+  let _themeRefreshHandler = null;
+
+  registerPage('packets', {
+    init: function(app, routeParam) {
+      _themeRefreshHandler = () => { if (typeof renderTableRows === 'function') renderTableRows(); };
+      window.addEventListener('theme-refresh', _themeRefreshHandler);
+      return init(app, routeParam);
+    },
+    destroy: function() {
+      if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
+      return destroy();
+    }
+  });
 
   // Standalone packet detail page: #/packet/123 or #/packet/HASH
   registerPage('packet-detail', {