many many fixes

src/components/UpdateBanner.js

@@ -0,0 +1,37 @@
+import { APP_VERSION } from '../engine/version.js';
+
+/**
+ * Persistent banner asking the user to reload when a newer version is deployed.
+ * Progress is saved to localStorage continuously, so reloading is safe.
+ */
+export function createUpdateBanner() {
+  const element = document.createElement('div');
+  element.className = 'update-banner';
+  element.id = 'update-banner';
+  element.setAttribute('role', 'status');
+  element.setAttribute('aria-live', 'polite');
+  element.hidden = true;
+
+  function show(latestVersion) {
+    element.innerHTML = `
+      <div class="update-banner-text">
+        <strong>New version available</strong>
+        <span>v${APP_VERSION} → v${latestVersion}</span>
+      </div>
+      <button class="update-banner-reload" id="btn-update-reload">Reload</button>
+      <button class="update-banner-dismiss" id="btn-update-dismiss" aria-label="Dismiss">✕</button>
+    `;
+    element.hidden = false;
+    requestAnimationFrame(() => element.classList.add('visible'));
+
+    element.querySelector('#btn-update-reload').addEventListener('click', () => {
+      window.location.reload();
+    });
+    element.querySelector('#btn-update-dismiss').addEventListener('click', () => {
+      element.classList.remove('visible');
+      setTimeout(() => { element.hidden = true; }, 250);
+    });
+  }
+
+  return { element, show };
+}