fix(web): harden, polish and optimize the web UI per the Sept 2026 audit (#568)

* fix(web): harden, polish and optimize the web UI per the September 2026 audit

Works through docs/archive/WEB_UI_AUDIT_2026-09.md (health 8/20).

Implementation integrity (P0)
- app.css now defines every utility class the templates and JS use,
  including .hidden, so the ~145 JS show/hide toggles work. Button reset,
  and base component rules (.btn, .form-control) wrapped in :where() so
  utility classes on the same element win. New static-audit test fails
  when a used utility class has no rule.

Accessibility
- Focus rings render (the old ring rule referenced undefined variables);
  one :focus-visible outline everywhere; skip link; labelled nav landmarks.
- Shared dialog helper (js/utils/dialog.js): role/aria-modal, focus trap,
  Escape, focus return, applied to every modal.
- Named icon-only buttons and labelled ~70 form fields.
- Toasts announced once; errors persist >= 10s; one showNotification.
- Captive WiFi page: live region, timeouts, dark mode, 16px inputs.

Performance (Pi Zero 2 W)
- SSE streams and tab timers pause when hidden or off-tab; the display
  stream only runs while a preview is visible. app-shell.js deferred.
- Widget scripts served as one versioned bundle (/assets/widgets.js):
  52 -> 21 script tags, 66 -> 35 requests on first load.
- Stdlib gzip fallback when flask-compress is missing: first-load JS/CSS
  1358 KB -> 291 KB on the wire. SSE untouched.

Theming and responsive
- File managers, form fields and Fonts upload on theme tokens; bare
  inputs themed in dark mode; no more white surfaces.
- No horizontal overflow at 375px on any tab; 44px touch targets on
  coarse pointers; reduced-motion respected; header title truncates.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): clear Codacy findings on #568

- json-file-manager: focus-trap releases kept in a Map (no dynamic
  property access or delete; no value-returning forEach callback)
- notification / schedule-picker: style and day-label lookups via Map
- app.js: move the pending-queue assignment out of the expression
- diff_viewer / error_handler: named function declarations instead of
  arrow consts

No behavior change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* test: check the OAuth widget ships in the widget bundle

base.html no longer tags widget scripts one by one; they load through
/assets/widgets.js. Assert the page requests the bundle and the bundle
contains google-oauth.js, which is what the test was protecting.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): address review feedback on #568

- widget bundle version fingerprints every file (name, mtime_ns, size)
- gzip fallback appends Accept-Encoding to an existing Vary header
- dialog helper: releasing a non-top dialog no longer moves focus out of
  the dialog the user is in
- labels: file-upload targets its file input; fallback config fields get
  label for/id pairs; native color input has a fallback name
- utility audit also reads class names inside bound :class expressions

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): give the native color-picker input an accessible name

CodeRabbit flagged this on PR #568 as an outside-diff finding (never
posted inline, so it was missed in the round of fixes that addressed
the other 6 review comments). The <input type="color"> only carried a
title attribute; screen readers don't reliably announce title, and
there's no other label naming the control when showHexInput is false.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): clear Codacy findings in app-shell.js

- drop the unused catch binding on the SSE JSON parse
- move the pending-notification queue assignment out of the expression

No behavior change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): contain plugin widgets/ dir and bound style-editor retries

From CodeRabbit review on #568 (code that arrived with the main merge):
- serve_plugin_widget resolves widgets/ with resolve_under before
  resolving the manifest script under it, so a symlinked widgets
  directory can't become the containment base (CWE-22). New test.
- style-editor init stops polling after ~10s when the widget never
  registers and leaves the plain fallback fields in place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

web_interface/widget_bundle.py

@@ -0,0 +1,107 @@
+"""Single-request bundle for the config-form widget scripts.
+
+Every page used to carry one <script> tag per widget (34 of them, ~700 KB
+uncompressed). On a Pi Zero 2 W serving a phone over WiFi, each tag is a
+separate request the Python server has to answer. The files are plain scripts
+that register themselves on window/LEDMatrixWidgets at load time, so
+concatenating them in the same order is exactly equivalent to loading them
+one by one — no module wrapper, no scope change.
+
+The individual files stay on disk and keep working as direct URLs, which is
+what plugin-loader.js and any third-party page expect.
+
+BUNDLE_ORDER is the authority for which widgets ship; test_widget_scripts.py
+checks it against the directory so a new widget can't be forgotten.
+"""
+import hashlib
+from pathlib import Path
+from threading import Lock
+
+WIDGETS_DIR = Path(__file__).parent / "static" / "v3" / "js" / "widgets"
+
+# Load order matters: the registry and base class must exist before the
+# widgets that call them, and notification.js owns window.showNotification.
+BUNDLE_ORDER = [
+    "registry.js",
+    "base-widget.js",
+    "notification.js",
+    "plugin-order-list.js",
+    "file-upload.js",
+    "checkbox-group.js",
+    "custom-feeds.js",
+    "array-table.js",
+    "google-calendar-picker.js",
+    "google-oauth.js",
+    "day-selector.js",
+    "time-range.js",
+    "time-picker.js",
+    "file-upload-single.js",
+    "plugin-file-manager.js",
+    "schedule-picker.js",
+    # Basic input widgets
+    "text-input.js",
+    "number-input.js",
+    "textarea.js",
+    "select-dropdown.js",
+    "font-selector.js",
+    "style-editor.js",
+    "toggle-switch.js",
+    "radio-group.js",
+    "date-picker.js",
+    "slider.js",
+    "color-picker.js",
+    "email-input.js",
+    "url-input.js",
+    "password-input.js",
+    "timezone-selector.js",
+    "plugin-loader.js",
+    # Reusable JSON file manager (used via x-widget: json-file-manager)
+    "json-file-manager.js",
+]
+
+# Widget files that must NOT be bundled, with the reason.
+EXCLUDED = {
+    # Documentation example (docs/widget-guide.md); it registers the name
+    # 'color-picker' and would shadow the real color-picker.js.
+    "example-color-picker.js": "documentation example",
+}
+
+_lock = Lock()
+_cache = {"version": None, "body": None}
+
+
+def bundle_paths():
+    """Widget files in load order (only those present on disk)."""
+    return [WIDGETS_DIR / name for name in BUNDLE_ORDER if (WIDGETS_DIR / name).is_file()]
+
+
+def bundle_version():
+    """Cache-busting token: a fingerprint of every bundled file.
+
+    Uses each file's name, nanosecond mtime and size, so an edit that lands
+    in the same second as another file's, or leaves mtime behind the newest
+    file, still changes the token (and the URL).
+    """
+    digest = hashlib.sha256()
+    for path in bundle_paths():
+        stat = path.stat()
+        digest.update(f"{path.name}:{stat.st_mtime_ns}:{stat.st_size};".encode())
+    return digest.hexdigest()[:12]
+
+
+def build_bundle():
+    """Concatenated widget sources, rebuilt only when a file changes."""
+    version = bundle_version()
+    with _lock:
+        if _cache["version"] == version and _cache["body"] is not None:
+            return _cache["body"], version
+        parts = []
+        for path in bundle_paths():
+            source = path.read_text(encoding="utf-8")
+            # A file ending in a line comment would swallow the next file's
+            # first line, and a missing semicolon can join two statements.
+            parts.append("/* %s */\n%s\n;\n" % (path.name, source))
+        body = "".join(parts)
+        _cache["version"] = version
+        _cache["body"] = body
+        return body, version