Phase 5b and Phase 6: TypeScript restructure, jsdom tests, regex filters and per-playlist buffer in the UI

TypeScript:
- menu_ts.ts split into menu.ts, content.ts, popup.ts and xmltv.ts; the
  other files drop their _ts suffix. Bundle order fixed in ts/tsconfig.json.
- All 94 string event handlers (setAttribute("onclick", "javascript: ..."))
  replaced with addEventListener closures. changeButtonAction, which
  rewrote an onclick attribute from select values, is gone.
- Settings rows are generated from one SETTINGS_FIELDS table instead of
  ~20 copy-pasted blocks; rendered HTML is byte-identical to before.
  saveSettings now serialises password inputs, so a changed Plex token is
  actually sent (the server treats the mask as unchanged).
- createLayout rebuilds the menu list only when the set of visible items
  changes, so focus in the menu survives a refresh.
- announce()/alertUser(): alerts are mirrored into an aria-live region.
- Filter popup offers a third type, Regular Expression (regex-filter), and
  the filter table labels it. Playlist popups get a Buffer select
  (default / none / xTeVe / FFmpeg / VLC) saved as the playlist's
  "buffer" parameter; the tuner field stays editable when the
  playlist's own buffer is active.

Tests: tests/ holds 27 jsdom tests (Node's built-in runner, jsdom pinned)
that load the built bundle with a fixture server payload: menu visibility
rules, mapping table renders names as text, settings panel fields, popup
flows, sorting, bulk select, layout refresh keeps nodes, live region,
regex option, buffer select. npm test runs in the Drone webui-check step.
README-DEV documents the layout and the test workflow.

tests/layout.test.js

@@ -0,0 +1,116 @@
+"use strict";
+
+const test = require("node:test");
+const assert = require("node:assert/strict");
+
+const {loadApp, SHELL_HTML} = require("./harness");
+const {makeServer} = require("./fixture");
+
+function menuKeys(document) {
+  return Array.from(document.querySelectorAll("#main-menu li")).map(li => li.getAttribute("data-menu"));
+}
+
+test("createLayout keeps the menu nodes when the visible items are unchanged", () => {
+  const app = loadApp({server: makeServer()});
+  app.window.createLayout();
+
+  const before = Array.from(app.document.querySelectorAll("#main-menu li"));
+  const focused = before[2];
+  focused.setAttribute("tabindex", "0");
+  focused.focus();
+  assert.equal(app.document.activeElement, focused);
+
+  app.window.SERVER = makeServer({clientInfo: {streams: "9", errors: "3"}});
+  app.window.createLayout();
+
+  const after = Array.from(app.document.querySelectorAll("#main-menu li"));
+  assert.equal(after.length, before.length);
+  for (let i = 0; i < before.length; i++) {
+    assert.equal(after[i], before[i], "menu node " + i + " is the same object");
+  }
+  assert.equal(app.document.activeElement, focused, "focus survives the refresh");
+
+  assert.equal(app.document.getElementById("streams").textContent, "9", "client info refreshed");
+  const errorCard = Array.from(app.document.querySelectorAll("#status-cards .status-card")).find(c => c.textContent.startsWith("Errors"));
+  assert.ok(errorCard.className.includes("status-card-error"), "status cards refreshed");
+});
+
+test("createLayout rebuilds the menu when the visible items change", () => {
+  const app = loadApp({server: makeServer()});
+  app.window.createLayout();
+  assert.deepEqual(menuKeys(app.document), ["playlist", "filter", "xmltv", "mapping", "settings", "log"]);
+
+  const playlist = app.document.querySelector('#main-menu li[data-menu="playlist"]');
+
+  app.window.SERVER = makeServer({settings: {"authentication.web": true}});
+  app.window.createLayout();
+  assert.deepEqual(menuKeys(app.document), ["playlist", "filter", "xmltv", "mapping", "users", "settings", "log", "logout"]);
+  assert.notEqual(app.document.querySelector('#main-menu li[data-menu="playlist"]'), playlist, "list was rebuilt");
+
+  const active = app.document.querySelector("#main-menu li.menu-active");
+  assert.ok(active, "active item restored after rebuild");
+  assert.equal(active.getAttribute("data-menu"), "playlist");
+
+  app.window.SERVER = makeServer({clientInfo: {epgSource: "PMS"}});
+  app.window.createLayout();
+  assert.deepEqual(menuKeys(app.document), ["playlist", "filter", "settings", "log"]);
+});
+
+test("createLayout keeps the active menu when another item is selected", () => {
+  const app = loadApp({server: makeServer()});
+  app.window.createLayout();
+  app.document.querySelector('#main-menu li[data-menu="mapping"]').click();
+  assert.equal(app.document.body.getAttribute("data-active-menu"), "mapping");
+
+  app.window.SERVER = makeServer();
+  app.window.createLayout();
+  assert.equal(app.document.body.getAttribute("data-active-menu"), "mapping");
+  assert.equal(app.document.querySelector("#main-menu li.menu-active").getAttribute("data-menu"), "mapping");
+  assert.equal(app.document.querySelectorAll("#content_table tr").length, 6, "mapping content left in place");
+});
+
+test("alertUser mirrors the message into the existing live region", () => {
+  const app = loadApp({server: makeServer()});
+  app.window.alertUser("Something went wrong");
+
+  assert.deepEqual(app.alerts, ["Something went wrong"]);
+  assert.equal(app.document.getElementById("sr-announcer").textContent, "Something went wrong");
+  assert.equal(app.document.getElementById("announcer"), null, "no second region created");
+});
+
+test("announce creates a polite live region when the page has none", () => {
+  const html = SHELL_HTML.replace(/<p id="sr-announcer"[^>]*><\/p>/, "");
+  const app = loadApp({server: makeServer(), html});
+  assert.equal(app.document.getElementById("sr-announcer"), null);
+
+  app.window.announce("Saved");
+
+  const region = app.document.getElementById("announcer");
+  assert.ok(region, "region created");
+  assert.equal(region.getAttribute("aria-live"), "polite");
+  assert.equal(region.className, "sr-only");
+  assert.equal(region.textContent, "Saved");
+
+  app.window.announce("Again");
+  assert.equal(app.document.querySelectorAll("#announcer").length, 1);
+  assert.equal(region.textContent, "Again");
+});
+
+test("server error responses alert and announce", () => {
+  const app = loadApp({server: makeServer()});
+  app.window.createLayout();
+
+  app.evalIn('new Server("saveSettings").request({settings: {}})');
+  const socket = app.sockets[app.sockets.length - 1];
+  socket.readyState = 1;
+  socket.onopen();
+  const sent = JSON.parse(socket.sent[0]);
+
+  socket.onmessage({data: JSON.stringify({id: sent.id, status: false, err: "Setting rejected"})});
+
+  return new Promise(resolve => setImmediate(resolve)).then(() => {
+    assert.deepEqual(app.alerts, ["Setting rejected"]);
+    assert.equal(app.document.getElementById("sr-announcer").textContent, "Setting rejected");
+    assert.equal(app.document.getElementById("connection-indicator").className, "status-offline");
+  });
+});