Blur the page whenever the window isn't in front

Losing focus -- another tab, another window, another app -- now puts the
whole page behind a blur, so an app switcher's snapshot or a glance over
the shoulder gives nothing away. It comes back on focus, on the tab
becoming visible again, and on the first touch or key, which lands on the
veil rather than on a page nobody could see.

Painted as a backdrop filter on a fixed overlay above everything the app
can show: a filter on the page itself would make every fixed element
position against the wrong box.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MPZFnNdHbPGDTqQUNiE4ZN

frontend/js/privacy.js

@@ -0,0 +1,60 @@
+window.App = window.App || {};
+App.privacy = App.privacy || {};
+
+(function() {
+    // The moment this window stops being the one in front -- another tab,
+    // another window, another app -- the page goes behind a blur. What the site
+    // is showing is nobody else's business: not a glance over the shoulder, not
+    // the app switcher's snapshot, not a screen share of the tab next door.
+    const ON = 'is-on';
+    let veil = null;
+    let veiled = false;
+
+    const element = function() {
+        if (!veil || !veil.isConnected) veil = document.getElementById('privacy-veil');
+        return veil;
+    };
+
+    const setVeiled = function(next) {
+        const el = element();
+        if (!el || next === veiled) return;
+        veiled = next;
+        el.classList.toggle(ON, next);
+    };
+
+    const cover = function() { setVeiled(true); };
+    const uncover = function() { setVeiled(false); };
+
+    function start() {
+        if (!element()) return;
+
+        // Leaving. Any one of these can be the last event before the window is
+        // out of sight, so each covers on its own, and covers at once: a blur
+        // that lands after the app switcher took its picture is no blur at all.
+        window.addEventListener('blur', cover);
+        window.addEventListener('pagehide', cover);
+        document.addEventListener('visibilitychange', function() {
+            if (document.visibilityState === 'hidden') cover();
+            else uncover();
+        });
+
+        // Coming back.
+        window.addEventListener('focus', uncover);
+        window.addEventListener('pageshow', uncover);
+
+        // A backstop, for whatever the browser did or didn't report: someone
+        // using the page is someone looking at it. The first touch lands on the
+        // veil and lifts it instead of reaching the thing underneath, which is
+        // the right way round for a tap that was meant for a page you could see.
+        ['pointerdown', 'touchstart', 'keydown', 'wheel'].forEach(function(name) {
+            window.addEventListener(name, uncover, { capture: true, passive: true });
+        });
+    }
+
+    App.privacy = {
+        start: start,
+        cover: cover,
+        uncover: uncover,
+        isVeiled: function() { return veiled; }
+    };
+})();