npm - @glitchr/transparent - Versions diffs - 1.0.82 → 1.1.1 - Mend

@glitchr/transparent 1.0.82 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/src/js/transparent.js +737 -478

package/src/js/transparent.js CHANGED Viewed

@@ -180,77 +180,44 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         "smoothscroll_speed"   : 0,
         "smoothscroll_easing"  : "swing",
         "exceptions": [],
-        // headlock: list of url substrings/regex to preserve in <head> across page transitions
-        // (e.g. third-party widgets that inject <style>/<link> dynamically).
-        // In addition, head nodes injected dynamically AFTER initial DOMContentLoaded are
-        // preserved automatically. Use data-headlock="false" on a head element to opt-out.
-        "headlock": []
+        // headlock: list of URL substrings or regex patterns to preserve in
+        // <head> across page transitions (e.g. third-party widgets that
+        // inject <style>/<link> dynamically). Anything matching is treated
+        // as "locked" and never removed during the head merge.
+        //
+        // In addition, head nodes injected dynamically AFTER initial
+        // DOMContentLoaded are auto-preserved (snapshotted on load → not
+        // in the set → preserved).
+        //
+        // Per-element overrides:
+        //   <link data-headlock="false"> → opt-out (allow normal removal)
+        //   <link data-headlock="true">  → opt-in (always preserve)
+        //
+        // Ported from upstream 1.0.82's `headlock` design (cleaner API than
+        // the previous hardcoded SCRIPT/STYLE-never-remove heuristic).
+        "headlock": [],
+        // ── View Transitions API ────────────────────────────────────────────
+        // When true, the DOM swap is wrapped in document.startViewTransition()
+        // so the browser captures an OLD snapshot, applies the swap callback,
+        // then crossfades to the NEW state natively. Falls back transparently
+        // to the CSS-only transition path on browsers without VT support
+        // (Firefox < 144, Safari < 18.2, old Chromium). Per-element morph
+        // is opt-in via CSS:
+        //
+        //   #page { view-transition-name: page; }
+        //   .article-hero img { view-transition-name: article-hero; }
+        //
+        // Pairs the named element across the swap so the browser animates
+        // its position/size change instead of crossfading the snapshots.
+        //
+        // skip_transition_for_cache: when true, in-DOM cache hits bypass VT
+        // entirely (for Turbo-style instant-back UX). Default false because
+        // VT's 200ms crossfade is fast enough that the consistency win
+        // outweighs the saved frames.
+        "use_view_transitions": false,
+        "skip_transition_for_cache": false
     };
-    // Set of <head> children present on initial load. Anything added after is treated
-    // as dynamically injected and preserved across transitions.
-    var originalHeadNodes = new WeakSet();
-    function snapshotHeadNodes() {
-        var head = document.head;
-        if(!head) return;
-        for(var i = 0; i < head.children.length; i++)
-            originalHeadNodes.add(head.children[i]);
-    }
-    // Snapshot synchronously at module-eval time (scripts at end of <body> run before any
-    // async script can inject <style> tags, so the snapshot is clean).
-    // A DOMContentLoaded fallback is kept for the rare case where document.head is null
-    // (e.g. script loaded inside <head> before it finishes parsing).
-    snapshotHeadNodes();
-    if(!document.head)
-        document.addEventListener("DOMContentLoaded", snapshotHeadNodes, { once: true });
-    Transparent.isHeadlocked = function(el) {
-        if(!el || el.nodeType !== 1) return false;
-        // Explicit opt-out
-        var attr = el.getAttribute && el.getAttribute("data-headlock");
-        if(attr === "false") return false;
-        // Explicit opt-in via attribute
-        if(attr !== null && attr !== undefined) return true;
-        // Dynamically injected after initial load
-        if(!originalHeadNodes.has(el)) return true;
-        // URL pattern match (src/href attributes)
-        var patterns = Settings["headlock"] || [];
-        if(!patterns.length) return false;
-        var url = el.getAttribute && (el.getAttribute("src") || el.getAttribute("href"));
-        // <style> elements have no src/href — match against CSS textContent instead
-        if(!url && el.tagName === 'STYLE') url = el.textContent || '';
-        if(!url) return false;
-        for(var i = 0; i < patterns.length; i++) {
-            var p = patterns[i];
-            if(p instanceof RegExp) { if(p.test(url)) return true; }
-            else if(typeof p === "string" && p.length && url.indexOf(p) !== -1) return true;
-        }
-        return false;
-    }
-    // ─── NAVIGATION TRACE LOG ───────────────────────────────────────
-    // Gated on Settings.debug. Set 'debug': true in Transparent.ready({...})
-    // to surface a per-step trace prefixed with "[TX]" in the console.
-    // Cheap when disabled — single boolean check, no allocation.
-    function _tx(tag, extra) {
-        if (!Settings || !Settings.debug) return;
-        try {
-            var cls = document.documentElement.className;
-            var t = performance.now().toFixed(1);
-            var here = (document.querySelector("#page") || document.documentElement);
-            var lay = here.getAttribute && (here.getAttribute("data-layout") || "?");
-            var path = location.pathname;
-            console.log("%c[TX]", "color:#0a0;font-weight:bold",
-                "+" + t + "ms", tag,
-                "path=" + path,
-                "layout=" + lay,
-                "ajaxSem=" + (typeof ajaxSemaphore === "undefined" ? "?" : ajaxSemaphore),
-                "classes=[" + cls + "]",
-                extra || "");
-        } catch(e) {}
-    }
-    // ────────────────────────────────────────────────────────────────
     const State = Transparent.state = {
         ROOT       : "transparent",
@@ -269,53 +236,17 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         CLICK      : "click",
         PREACTIVE  : "pre-active",
-        FADEIN   : "fade-in",
+        ACTIVEIN   : "active-in",
         ACTIVE     : "active",
-        FADEOUT  : "fade-out",
+        ACTIVEOUT  : "active-out",
         POSTACTIVE : "post-active",
-        NOTIFICATION: "notification",
-        OFFLINE     : "offline"
+        NOTIFICATION: "notification"
     };
     var isReady    = false;
     var rescueMode = false;
-    // ─── OFFLINE DETECTION ──────────────────────────────────────────
-    // Two-source signal:
-    //   1. window 'online'/'offline' events fired by the browser when the
-    //      OS-level connectivity changes (Wi-Fi off, airplane mode, etc.)
-    //   2. AJAX network errors during navigation — if a request fails with
-    //      status 0 (and wasn't aborted), the device probably can't reach
-    //      the server even though navigator.onLine may still be true.
-    // The `html.offline` class is the public surface — the project's CSS
-    // styles the YouTube-style "Offline" banner from there. Custom events
-    // `transparent:offline` and `transparent:online` give JS hooks too.
-    var isOnline = (typeof navigator !== "undefined") ? navigator.onLine !== false : true;
-    Transparent.isOnline = function() { return isOnline; }
-    function setOnlineStatus(online) {
-        if (online === isOnline) return;  // no change
-        isOnline = online;
-        if (online) {
-            $($(document).find("html")[0]).removeClass(State.OFFLINE);
-            dispatchEvent(new Event("transparent:online"));
-        } else {
-            $($(document).find("html")[0]).addClass(State.OFFLINE);
-            dispatchEvent(new Event("transparent:offline"));
-        }
-    }
-    if (typeof window !== "undefined") {
-        window.addEventListener("online",  function() { setOnlineStatus(true); });
-        window.addEventListener("offline", function() { setOnlineStatus(false); });
-    }
-    // Apply initial state synchronously so first-paint reflects offline if applicable.
-    if (!isOnline) {
-        // Use the document element directly here — Transparent.html isn't initialized yet at module-eval time.
-        var _htmlEl = document.documentElement;
-        if (_htmlEl && _htmlEl.classList) _htmlEl.classList.add(State.OFFLINE);
-    }
-    // ────────────────────────────────────────────────────────────────
     Transparent.html = $($(document).find("html")[0]);
     Transparent.html.addClass(Transparent.state.ROOT+ " " + Transparent.state.LOADING + " " + Transparent.state.FIRST);
@@ -324,6 +255,91 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
     }
+    // ── Server-rendered element tracking ───────────────────────────────────
+    //
+    // SPA head/body merging removes elements not present in the new page's
+    // HTML response — correct for server-rendered tags (per-page CSS,
+    // <meta>, page-specific <script>), but it ALSO nukes anything that a
+    // third-party loader injected at runtime: Brevo's chat widget <style>
+    // and <div>, Google Analytics tags, Intercom, Crisp, Hotjar, etc.
+    // These elements are never in any page's HTML response, so the merge
+    // removes them on every nav → user sees the chat widget lose all its
+    // CSS and explode to full screen (visible in the user's screenshot of
+    // navigating /articles → /).
+    //
+    // Fix: maintain a WeakSet of elements known to be server-rendered. The
+    // initial document's head + body children are server-rendered. Anything
+    // we ADD via the SPA merge later is also server-rendered (it came from
+    // a server HTML response). Anything else — third-party script
+    // injections that happen AFTER snapshot — is never added to the set
+    // and is therefore preserved across navs.
+    //
+    // WeakSet means removed elements get garbage-collected → no leak.
+    //
+    // MutationObserver auto-tags elements added by ANY route, so even
+    // body-script appends or head-script appends elsewhere in this library
+    // stay correctly classified.
+    // Ported from upstream 1.0.82 — `headlock` design.
+    //
+    // Replaces the previous hardcoded "never remove SCRIPT/STYLE" rule
+    // with a finer-grained API: snapshot the initial head children, then
+    // on the next swap, *preserve* anything that's either (a) not in the
+    // snapshot (= dynamically injected after load), or (b) matches a
+    // configured URL pattern in Settings.headlock, or (c) has a
+    // data-headlock attribute (true/non-empty = lock, "false" = unlock).
+    //
+    // Two key wins over the previous local impl:
+    //   1. The previous impl never removed any <script>/<style> at all,
+    //      which caused per-page stylesheets to leak across navigations
+    //      (e.g. layout1's inline <style> persisting on layout2). The new
+    //      design only locks dynamically-injected ones.
+    //   2. Project code can pass `headlock: ["brevo.com", "googletag", /hotjar/]`
+    //      in Transparent.ready({...}) to explicitly opt-in third-party
+    //      URLs by substring or regex.
+    var originalHeadNodes = new WeakSet();
+    function snapshotHeadNodes() {
+        if (document.head) {
+            for (var i = 0; i < document.head.children.length; i++) {
+                originalHeadNodes.add(document.head.children[i]);
+            }
+        }
+    }
+    // Snapshot synchronously at module-eval time. Defer scripts run after
+    // the parser has built the <head> but before async third-party loaders
+    // execute, so the snapshot captures the server-rendered <head> cleanly.
+    // The DOMContentLoaded fallback handles the rare case where the script
+    // ran before <head> was complete (e.g. in-head non-defer placement).
+    snapshotHeadNodes();
+    if (!document.head) {
+        document.addEventListener("DOMContentLoaded", snapshotHeadNodes, { once: true });
+    }
+    Transparent.isHeadlocked = function(el) {
+        if (!el || el.nodeType !== 1) return false;
+        // Explicit attribute opt-out wins over everything else.
+        var attr = el.getAttribute && el.getAttribute("data-headlock");
+        if (attr === "false") return false;
+        // Explicit attribute opt-in (any non-"false" value).
+        if (attr !== null && attr !== undefined) return true;
+        // Auto-lock anything injected after the initial snapshot — by
+        // definition, third-party widgets and their CSS.
+        if (!originalHeadNodes.has(el)) return true;
+        // URL-pattern matching: src for <script>/<link>/<iframe>, href for
+        // <link>, or full textContent for inline <style> blocks. Substring
+        // matches on strings; .test() matches on RegExp.
+        var patterns = Settings["headlock"] || [];
+        if (!patterns.length) return false;
+        var url = el.getAttribute && (el.getAttribute("src") || el.getAttribute("href"));
+        if (!url && el.tagName === 'STYLE') url = el.textContent || '';
+        if (!url) return false;
+        for (var i = 0; i < patterns.length; i++) {
+            var p = patterns[i];
+            if (p instanceof RegExp) { if (p.test(url)) return true; }
+            else if (typeof p === "string" && p.length && url.indexOf(p) !== -1) return true;
+        }
+        return false;
+    };
     window.addEventListener("DOMContentLoaded", function()
     {
         Transparent.loader = $($(document).find(Settings.loader)[0] ?? Transparent.html);
@@ -414,17 +430,84 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         return this;
     }
+    // ── In-memory live-DOM cache ────────────────────────────────────────────
+    //
+    // Turbo-style: store cloned <html> Element nodes per uuid so popstate
+    // (back/forward) can short-circuit the XHR + sessionStorage round-trip
+    // + DOMParser.parseFromString cycle. Result: back/forward feels instant.
+    //
+    // Key vs sessionStorage flow:
+    //   - sessionStorage: outerHTML serialize (slow) → string (5-10MB
+    //     quota) → JSON read → DOMParser parse (slow). Whole cycle on
+    //     every popstate. Used as the fallback when the live cache misses.
+    //   - liveDomCache: cloneNode(true) of the rendered <html> element
+    //     stored in a Map<uuid, {node, scroll, ts}>. Bounded with LRU.
+    //     No serialization, no parsing — just the live DOM node ready
+    //     for the swap to consume.
+    //
+    // setResponse populates BOTH (live cache + sessionStorage). The
+    // sessionStorage write is kept so tab reloads and cross-process
+    // restores keep working. getLiveResponse() is the new fast-path API
+    // used by handleResponse before the DOMParser fallback.
+    Transparent._liveDomCache = new Map();
+    Transparent.liveDomCacheMax = 25;
+    Transparent.liveDomCacheTTL = 5 * 60 * 1000; // 5 min
+    Transparent.getLiveResponse = function(uuid) {
+        var entry = Transparent._liveDomCache.get(uuid);
+        if (!entry) return null;
+        if (Date.now() - entry.ts > Transparent.liveDomCacheTTL) {
+            Transparent._liveDomCache.delete(uuid);
+            return null;
+        }
+        // LRU bump: re-insert to move to the back of the iteration order.
+        Transparent._liveDomCache.delete(uuid);
+        Transparent._liveDomCache.set(uuid, entry);
+        // Return a CLONE so the caller's swap mutations don't poison
+        // the cache for future popstate hits. The clone is detached
+        // from any document so it's safe to pass to the swap.
+        return entry.node.cloneNode(true);
+    };
+    Transparent.setLiveResponse = function(uuid, htmlEl, scrollableXY) {
+        if (!htmlEl || htmlEl.nodeType !== 1) return;
+        Transparent._liveDomCache.set(uuid, {
+            node: htmlEl.cloneNode(true),
+            scroll: scrollableXY || [],
+            ts: Date.now()
+        });
+        // LRU evict — Map iteration order is insertion order.
+        while (Transparent._liveDomCache.size > Transparent.liveDomCacheMax) {
+            var firstKey = Transparent._liveDomCache.keys().next().value;
+            Transparent._liveDomCache.delete(firstKey);
+        }
+    };
+    Transparent.clearLiveResponse = function() {
+        Transparent._liveDomCache.clear();
+    };
     Transparent.setResponse = function(uuid, responseText, scrollableXY, exceptionRaised = false)
     {
-        if(isDomEntity(responseText))
+        // Populate live-DOM cache FIRST while we still have the node.
+        // The outerHTML conversion below loses the node identity.
+        if (isDomEntity(responseText)) {
+            Transparent.setLiveResponse(uuid, responseText, scrollableXY);
             responseText = responseText.outerHTML;
+        }
         var array = JSON.parse(sessionStorage.getItem('transparent')) || [];
         if (!array.includes(uuid)) {
             array.push(uuid);
+            // Enforce the LRU cap. NB: entries are stored under
+            // `transparent[response][<uuid>]` / `transparent[position][<uuid>]`,
+            // so eviction must remove THOSE keys — the previous code removed
+            // `transparent[<uuid>]`, which never existed, leaving the real
+            // response/position blobs orphaned. They then accumulated past the
+            // cap until QuotaExceededError forced a full sessionStorage.clear().
             while(array.length > Settings["response_limit"])
-                sessionStorage.removeItem('transparent['+array.shift()+']');
+                removeResponseEntry(array.shift());
         }
         try {
@@ -438,15 +521,42 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         } catch(e) {
+            // On quota, evict the oldest cached pages (targeted) and retry
+            // once, instead of nuking ALL sessionStorage — sessionStorage.clear()
+            // also wipes unrelated app state and the entire page cache.
+            if (e.name === 'QuotaExceededError' && exceptionRaised === false) {
+                evictOldestResponses(Math.max(1, Math.ceil(array.length / 2)));
+                return Transparent.setResponse(uuid, responseText, scrollableXY, true);
+            }
+            // Last resort if a single page is itself too big to ever fit.
             if (e.name === 'QuotaExceededError')
                 sessionStorage.clear();
-            return exceptionRaised === false ? Transparent.setResponse(uuid, responseText, scrollableXY, true) : this;
+            return this;
         }
         return this;
     }
+    // Remove both blobs for a cached page uuid (response HTML + scroll position).
+    function removeResponseEntry(uuid) {
+        try {
+            sessionStorage.removeItem('transparent[response]['+uuid+']');
+            sessionStorage.removeItem('transparent[position]['+uuid+']');
+        } catch (e) {}
+    }
+    // Drop the N oldest cached pages and rewrite the index. Used to recover
+    // from a QuotaExceededError without discarding the whole cache.
+    function evictOldestResponses(count) {
+        try {
+            var array = JSON.parse(sessionStorage.getItem('transparent')) || [];
+            for (var i = 0; i < count && array.length; i++)
+                removeResponseEntry(array.shift());
+            sessionStorage.setItem('transparent', JSON.stringify(array));
+        } catch (e) {}
+    }
     Transparent.setResponseText = function(uuid, responseText, exceptionRaised = false)
     {
         if(isDomEntity(responseText))
@@ -554,7 +664,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         if($(Transparent.html).hasClass(Transparent.state.FIRST)) {
             Transparent.scrollToHash(location.hash, {}, function() {
-                Transparent.fadeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
+                Transparent.activeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
             });
         }
@@ -895,37 +1005,28 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         return {delay:delay, duration:duration};
     }
-    var fadeInTime = 0;
-    var fadeInRemainingTime = 0;
-    // Schedule fn for after the currently in-flight fadeIn animation has
-    // finished. Used by handleResponse's three reload/redirect paths to
-    // ensure the loader is at full opacity before the browser unloads.
-    function _waitForFadeIn(fn) {
-        var elapsed = Date.now() - fadeInTime;
-        var remaining = fadeInRemainingTime - elapsed;
-        if (remaining > 0) setTimeout(fn, remaining + 30);
-        else fn();
-    }
-    Transparent.fadeIn = function(activeCallback = function() {}) {
-        _tx("fadeIn ENTRY");
+    var activeInTime = 0;
+    var activeInRemainingTime = 0;
+    Transparent.activeIn = function(activeCallback = function() {}) {
         if(!Transparent.html.hasClass(Transparent.state.PREACTIVE)) {
             Transparent.html.addClass(Transparent.state.PREACTIVE);
             dispatchEvent(new Event('transparent:'+Transparent.state.PREACTIVE));
         }
         var active = Transparent.activeTime();
-        fadeInTime = Date.now();
-        fadeInRemainingTime = active.delay+active.duration;
+        activeInTime = Date.now();
+        activeInRemainingTime = active.delay+active.duration;
         Transparent.html.removeClass(Transparent.state.PREACTIVE);
-        if(!Transparent.html.hasClass(Transparent.state.FADEIN)) {
-            Transparent.html.addClass(Transparent.state.FADEIN);
-            dispatchEvent(new Event('transparent:'+Transparent.state.FADEIN));
+        if(!Transparent.html.hasClass(Transparent.state.ACTIVEIN)) {
+            Transparent.html.addClass(Transparent.state.ACTIVEIN);
+            dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEIN));
         }
         Transparent.callback(function() {
-            Transparent.html.removeClass(Transparent.state.FADEIN);
+            Transparent.html.removeClass(Transparent.state.ACTIVEIN);
             if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
                 Transparent.html.addClass(Transparent.state.ACTIVE);
                 dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
@@ -935,23 +1036,23 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.callback(function() {
                 activeCallback();
-                fadeInRemainingTime = 0;
+                activeInRemainingTime = 0;
             }.bind(this), active.duration);
         }.bind(this), active.delay);
     }
-    Transparent.fadeOut = function(activeCallback = function() {}) {
-        _tx("fadeOut ENTRY");
+    Transparent.activeOut = function(activeCallback = function() {}) {
         if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
             Transparent.html.addClass(Transparent.state.ACTIVE);
             dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
         }
-        if(!Transparent.html.hasClass(Transparent.state.FADEOUT)) {
-            Transparent.html.addClass(Transparent.state.FADEOUT);
-            dispatchEvent(new Event('transparent:'+Transparent.state.FADEOUT));
+        if(!Transparent.html.hasClass(Transparent.state.ACTIVEOUT)) {
+            Transparent.html.addClass(Transparent.state.ACTIVEOUT);
+            dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEOUT));
         }
         var active = Transparent.activeTime();
@@ -963,7 +1064,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             var active = Transparent.activeTime();
             Transparent.callback(function() {
-                Transparent.html.removeClass(Transparent.state.FADEOUT);
+                Transparent.html.removeClass(Transparent.state.ACTIVEOUT);
                 if(Transparent.html.hasClass(Transparent.state.LOADING)) {
                     dispatchEvent(new Event('transparent:'+Transparent.state.LOADING));
@@ -1068,25 +1169,10 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.evalScript($("body")[0]);
         }
-        Transparent.fadeOut();
+        Transparent.activeOut();
     }
-    Transparent.userScroll = function(el = undefined) {
-        // Defensive: closestScrollable() can return a value without .prop
-        // when called from event handlers on transient DOM (e.g. ajaxer
-        // result containers, sticky-scrollpercent triggers fired during
-        // infinite-scroll while the page is transitioning). The app-defer.js
-        // wrapper around $.fn.closestScrollable is supposed to enforce the
-        // jQuery return, but races with timing-sensitive callers can still
-        // hit this. Default to true ("user is scrolling, don't autoscroll").
-        try {
-            var $target  = $(el === undefined ? document.documentElement : el);
-            if (!$target || !$target.length) return true;
-            var $scroll  = $target.closestScrollable && $target.closestScrollable();
-            if (!$scroll || typeof $scroll.prop !== "function") return true;
-            return $scroll.prop("user-scroll") ?? true;
-        } catch (e) { return true; }
-    }
+    Transparent.userScroll = function(el = undefined) { return $(el === undefined ? document.documentElement : el).closestScrollable().prop("user-scroll") ?? true; }
     Transparent.scrollTo = function(dict, el = window, callback = function() {})
     {
         setTimeout(function() {
@@ -1221,8 +1307,23 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                         image.onload = function() {
                             this.classList.add("loaded");
                             this.classList.remove("loading");
+                            this.classList.remove("error");
                             if(lazybox) lazybox.classList.add("loaded");
                             if(lazybox) lazybox.classList.remove("loading");
+                            if(lazybox) lazybox.classList.remove("error");
+                        };
+                        // Error handler for broken / missing images (404, ACL,
+                        // DNS failure, malformed URL). Without this, lazy-loaded
+                        // images that fail just stay invisible. The .error
+                        // class lets project CSS render a placeholder.
+                        image.onerror = function() {
+                            this.classList.add("error");
+                            this.classList.remove("loading");
+                            this.classList.remove("loaded");
+                            if(lazybox) lazybox.classList.add("error");
+                            if(lazybox) lazybox.classList.remove("loading");
+                            if(lazybox) lazybox.classList.remove("loaded");
                         };
                         if(lazybox) lazybox.classList.add("loading");
@@ -1350,42 +1451,60 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             $(this).stop();
         });
-        // Defer the DOM swap until #page's opacity transition has had a
-        // chance to finish. Read the transition-duration from getComputedStyle
-        // (closure-local — no module state shared between navigations) so
-        // this stays in sync with whatever the project's CSS uses. Without
-        // this delay, a fast/cached AJAX response can land the swap while
-        // #page is still partway through the LOADING-induced fade-out,
-        // making the content change visible to the user (the original
-        // flicker).
-        var _swapDelay = 1;
-        try {
-            var _pageEl = $(Settings.identifier)[0];
-            if (_pageEl) {
-                var _dur = 1000 * Transparent.parseDuration(
-                    window.getComputedStyle(_pageEl).transitionDuration || "0"
-                );
-                if (_dur > 1) _swapDelay = _dur;
-            }
-        } catch(e) {}
+        activeInRemainingTime = activeInRemainingTime - (Date.now() - activeInTime);
-        setTimeout(function() {
+        // Whole-swap body extracted so we can dispatch it either through
+        // document.startViewTransition() for browsers that support it (with
+        // Settings.use_view_transitions on), or directly for the legacy path.
+        // Identical behavior in both branches — VT just wraps it so the
+        // browser captures OLD/NEW snapshots and crossfades natively.
+        var _doSwapBody = function() {
-            _tx("onLoad BODY (after " + _swapDelay + "ms)");
             // Transfert attributes
             Transparent.transferAttributes(dom);
+            // ── Track-reload check ──────────────────────────────────────
+            // Mirrors Turbo's <... data-turbo-track="reload"> mechanism.
+            // Put `data-track="reload"` on critical <script> / <link>
+            // bundles in <head>. On nav, if the set of tracked URLs
+            // differs between current and new HTML, force a full reload
+            // instead of an SPA swap — because the user's loaded JS/CSS
+            // no longer matches what the server is serving (e.g. after
+            // a deploy that bumped asset hashes). The browser then
+            // re-downloads everything cleanly.
+            //
+            // Match key: tagName + src/href (or textContent for inline).
+            // Same logic as Turbo: the SET of tracked URLs must match.
+            (function checkTrackedReload() {
+                function trackedSrcs(root) {
+                    var srcs = [];
+                    var els = root.querySelectorAll('[data-track="reload"]');
+                    for (var i = 0; i < els.length; i++) {
+                        var el = els[i];
+                        var src = el.getAttribute('src') || el.getAttribute('href') ||
+                                  (el.textContent || '').slice(0, 200);
+                        if (src) srcs.push(el.tagName + ':' + src);
+                    }
+                    return srcs.sort();
+                }
+                var currentSrcs = trackedSrcs(document.head);
+                if (!currentSrcs.length) return; // nothing tracked → skip
+                var newDoc = dom.documentElement ? dom : (dom[0] || dom);
+                var newHead = newDoc.head || newDoc.querySelector('head');
+                if (!newHead) return;
+                var newSrcs = trackedSrcs(newHead);
+                // Compare as JSON of sorted arrays — order-independent.
+                if (JSON.stringify(currentSrcs) === JSON.stringify(newSrcs)) return;
+                if (Settings.debug) {
+                    console.log('Transparent track-reload: asset mismatch, forcing reload',
+                                { current: currentSrcs, new: newSrcs });
+                }
+                // Full reload to the requested URL.
+                window.location.href = window.location.toString();
+            })();
             // Replace head..
             var head = $(dom).find("head");
-            // Snapshot hrefs of already-loaded stylesheets so we can detect new ones
-            // added by the head merge and wait for them to finish loading before
-            // making #page visible (prevents FOUC on cold-cache layout transitions).
-            var _existingStyleHrefs = {};
-            $("head").children("link[rel='stylesheet']").each(function() {
-                var h = this.getAttribute("href"); if(h) _existingStyleHrefs[h] = true;
-            });
             $("head").children().each(function() {
                 var el   = this;
@@ -1394,16 +1513,16 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 head.children().each(function() {
                     found = this.isEqualNode(el);
-                    // Also match identical <style> tags by content
-                    if(!found && el.tagName === 'STYLE' && this.tagName === 'STYLE' &&
-                       el.textContent && this.textContent &&
-                       el.textContent.length > 100 && this.textContent.length === el.textContent.length) {
-                        found = this.textContent === el.textContent;
-                    }
                     return !found;
                 });
-                // Preserve headlocked nodes (dynamically injected widgets, url-matched, etc.)
+                // Preserve headlocked nodes: anything injected dynamically
+                // after initial load (auto), URL-pattern matches in
+                // Settings.headlock, or explicit data-headlock="true".
+                // This is the win over the previous "never remove SCRIPT/
+                // STYLE" rule — per-page server-rendered <style> blocks
+                // (e.g. layout1 inline CSS) still get swapped, only
+                // third-party / dynamically-injected ones are locked.
                 if(!found && Transparent.isHeadlocked(el)) found = true;
                 if(!found) this.remove();
             });
@@ -1416,35 +1535,20 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 $("head").children().each(function() { found |= this.isEqualNode(el); });
                 if(!found) {
-                    if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
-                        // For inline scripts (without src), recreate so the browser will execute.
-                        // Simply re-appending the same <script> node doesn't execute it.
-                        if(!this.src || this.src === '') {
-                            var script = document.createElement("script");
-                            script.text = this.innerHTML;
-                            var i = -1, attrs = this.attributes, attr;
-                            var N = attrs.length;
-                            while ( ++i < N ) {
-                                if(attrs[i].name !== 'src') {
-                                    script.setAttribute( attrs[i].name, attrs[i].value );
-                                }
-                            }
-                            $("head").append(script);
-                            originalHeadNodes.add(script);
-                        } else {
-                            $("head").append(this);
-                            originalHeadNodes.add(this);
-                        }
+                    if(this.tagName != "SCRIPT" || Settings["global_code"] == true) {
+                        var clone = this.cloneNode(true);
+                        $("head").append(clone);
+                        // Register the new node as "original" so it falls
+                        // through to URL-pattern matching on the next swap
+                        // (and isn't auto-locked as third-party content).
+                        originalHeadNodes.add(clone);
                     } else {
-                        var clonedEl = this.cloneNode(true);
-                        $("head").append(clonedEl);
-                        // Register as an "original" node so it falls through to URL-pattern
-                        // matching on future transitions — prevents layout CSS added by
-                        // Transparent itself from being auto-headlocked as third-party content.
-                        originalHeadNodes.add(clonedEl);
+                        $("head").append(this);
+                        originalHeadNodes.add(this);
                     }
                 }
             });
@@ -1458,27 +1562,10 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 $("body").children().each(function() { found |= this.isEqualNode(el); });
                 if(!found) {
-                    if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
-                        // Same inline-script recreation as for <head>.
-                        if(!this.src || this.src === '') {
-                            var script = document.createElement("script");
-                            script.text = this.innerHTML;
-                            var i = -1, attrs = this.attributes, attr;
-                            var N = attrs.length;
-                            while ( ++i < N ) {
-                                if(attrs[i].name !== 'src') {
-                                    script.setAttribute( attrs[i].name, attrs[i].value );
-                                }
-                            }
-                            $("body").append(script);
-                        } else {
-                            $("body").append(this);
-                        }
-                    } else {
+                    if(this.tagName != "SCRIPT" || Settings["global_code"] == true) {
                         $("body").append(this.cloneNode(true));
+                    } else {
+                        $("body").append(this);
                     }
                 }
             });
@@ -1495,13 +1582,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             // Make sure name/layout keep the same after a page change (tolerance for POST or GET requests)
             if(oldPage.attr("data-layout") != undefined && page.attr("data-layout") != undefined) {
-                // X = prevLayout, Y = newLayout — must match the formula in handleResponse
-                // (line ~1852: SWITCH.replace("X", prevLayout).replace("Y", newLayout)).
-                // If these disagreed, the cleanup filter below would not recognize the
-                // switchLayout class that handleResponse added to <html> and would strip
-                // it before its CSS transition could play — visible as a race only in
-                // whichever direction the project's CSS actually styles.
-                var switchLayout = Transparent.state.SWITCH.replace("X", oldPage.attr("data-layout")).replace("Y", page.attr("data-layout"));
+                var switchLayout = Transparent.state.SWITCH.replace("X", page.attr("data-layout")).replace("Y", oldPage.attr("data-layout"));
                 page.attr("data-layout-prev", oldPage.attr("data-layout"));
             }
@@ -1510,13 +1591,10 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             var  oldHtmlClass = Array.from(($(Transparent.html).attr("class") || "").split(" "));
             var removeHtmlClass = oldHtmlClass.filter(x => !htmlClass.includes(x) && switchLayout != x && !states.includes(x));
-            _tx("onLoad classMgmt", "switchLayout=" + switchLayout + " remove=[" + removeHtmlClass.join(",") + "] add=[" + htmlClass.join(",") + "]");
             Transparent.html.removeClass(removeHtmlClass).addClass(htmlClass);
-            _tx("onLoad PAGE_SWAP_BEGIN", "oldLayout=" + (oldPage.attr("data-layout")||"?") + " newLayout=" + (page.attr("data-layout")||"?"));
             $(page).insertBefore(oldPage);
             oldPage.remove();
-            _tx("onLoad PAGE_SWAP_DONE");
             if(Settings["global_code"] == true) Transparent.evalScript($(page)[0]);
             document.dispatchEvent(new Event('DOMContentLoaded'));
@@ -1552,77 +1630,41 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 }
             }
-            // Collect link[rel="stylesheet"] elements inserted by the head merge above
-            var _newStyleLinks = [];
-            $("head").children("link[rel='stylesheet']").each(function() {
-                var h = this.getAttribute("href");
-                if(h && !_existingStyleHrefs[h]) _newStyleLinks.push(this);
+            $('head').append(function() {
+                $(Settings.identifier).append(function() {
+                        // Callback if needed, or any other actions
+                        callback();
+                        // Trigger onload event
+                        dispatchEvent(new Event('transparent:load'));
+                        dispatchEvent(new Event('load'));
+                });
             });
-            // Wait for any newly added layout stylesheets to finish loading before
-            // calling callback() / fadeOut() — otherwise #page becomes visible while
-            // the new CSS is still being parsed, causing a flash of unstyled content.
-            (function() {
-                function doCallback() {
-                    _tx("doCallback FIRES → callback() (which starts fadeOut)");
-                    // requestAnimationFrame here guarantees the browser has had one
-                    // full frame to apply the new page's stylesheets and re-layout
-                    // before fadeOut starts. Without it, fadeOut can animate the
-                    // loader away while the new page is still rendered with the
-                    // previous layout's styles — the article→home flicker the
-                    // [TX] trace masked via instrumentation overhead.
-                    requestAnimationFrame(function() {
-                        $('head').append(function() {
-                            $(Settings.identifier).append(function() {
-                                callback();
-                                dispatchEvent(new Event('transparent:load'));
-                                dispatchEvent(new Event('load'));
-                            });
-                        });
-                    });
-                }
-                // For cached stylesheets, the browser may fire `load` synchronously on
-                // DOM insertion — BEFORE we can attach a listener — so listener-only
-                // waits get stuck on the 3 s guard. `.sheet !== null` indicates the
-                // CSSStyleSheet is already parsed and ready, which is the right
-                // condition to count it as "done." Cross-origin sheets still expose
-                // `.sheet` even though `.cssRules` throws — `.sheet !== null` is
-                // portable.
-                function isStyleLoaded(link) {
-                    try { return link.sheet !== null; } catch(e) { return true; }
-                }
-                var pending = _newStyleLinks.filter(function(l) { return !isStyleLoaded(l); });
-                _tx("stylesheet-wait BEGIN", "newLinks=" + _newStyleLinks.length + " cachedSkipped=" + (_newStyleLinks.length - pending.length) + " pending=" + pending.length);
-                if(pending.length === 0) {
-                    _tx("stylesheet-wait IMMEDIATE → doCallback");
-                    doCallback();
-                } else {
-                    var remaining = pending.length;
-                    var fired = false;
-                    // Safety valve: if a stylesheet fails or stalls, don't block forever.
-                    var guard = setTimeout(function() {
-                        if(!fired) {
-                            _tx("stylesheet-wait GUARD fired (3s)", "remaining=" + remaining);
-                            fired = true; doCallback();
-                        }
-                    }, 3000);
-                    pending.forEach(function(link) {
-                        function onDone(e) {
-                            _tx("stylesheet-wait link.load", "remaining=" + (remaining-1) + " href=" + link.getAttribute("href"));
-                            if(--remaining <= 0 && !fired) {
-                                fired = true;
-                                clearTimeout(guard);
-                                _tx("stylesheet-wait ALL_LOADED → doCallback");
-                                doCallback();
-                            }
-                        }
-                        link.addEventListener('load',  onDone, {once:true});
-                        link.addEventListener('error', onDone, {once:true});
-                    });
-                }
-            })();
+        }.bind(this);
-        }.bind(this), _swapDelay);
+        // Dispatch the swap. With VT enabled AND supported, wrap in
+        // document.startViewTransition() so the browser captures OLD/NEW
+        // snapshots and crossfades natively. The setTimeout wait is for
+        // the CSS fade-out to complete BEFORE VT begins, so VT captures
+        // the already-faded state cleanly. Errors inside the callback
+        // don't abort the swap — fall back to direct execution.
+        var _vtEnabled = Settings["use_view_transitions"]
+                         && typeof document.startViewTransition === "function";
+        setTimeout(function() {
+            if (_vtEnabled) {
+                try {
+                    document.startViewTransition(_doSwapBody);
+                } catch (e) {
+                    if (Settings.debug) console.warn("Transparent VT failed, falling back:", e);
+                    _doSwapBody();
+                }
+            } else {
+                _doSwapBody();
+            }
+        }, activeInRemainingTime > 0 ? activeInRemainingTime : 1);
     }
     function uuidv4() {
@@ -1733,8 +1775,326 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
     var ajaxSemaphore = false;
     var formSubmission = false;
+    // ── User-typed form dirty tracking ──────────────────────────────────────
+    //
+    // True if the user has modified any form input via a real keystroke /
+    // click / select. False after a fresh navigation OR after a form submit.
+    // Used by onbeforeunload to decide whether to confirm.
+    //
+    // `e.isTrusted` filters out programmatic value mutations from JS init
+    // code (Select2 setting the hidden field after dropdown selection,
+    // Editor.js syncing JSON to a hidden <textarea>, datepicker init writing
+    // a normalized value, etc.). Without this filter, the previous value-
+    // comparison logic (formDataBefore vs formDataAfter) flagged every
+    // page-with-form as "dirty" by the time the user hit Ctrl+W, even
+    // when they hadn't typed anything.
+    var formDirty = false;
+    document.addEventListener('input', function(e) {
+        if (!e.isTrusted) return;
+        if (!e.target || !e.target.form) return;
+        formDirty = true;
+    }, true);
+    document.addEventListener('change', function(e) {
+        if (!e.isTrusted) return;
+        if (!e.target || !e.target.form) return;
+        formDirty = true;
+    }, true);
+    // Reset on user-initiated submit so the post-submit redirect doesn't
+    // double-prompt. The existing `formSubmission` flag already handles
+    // the synchronous prompt path; this clears state for any follow-up.
+    document.addEventListener('submit', function() { formDirty = false; }, true);
+    // Reset on every navigation. transparent.js re-dispatches DOMContentLoaded
+    // after each SPA swap (see _doSwap, ~line 1567), so this fires on the
+    // initial load AND on each in-place navigation. Without it the flag leaks
+    // across SPA navigations: typing on page A, then navigating to a form
+    // page B, would leave formDirty=true and wrongly prompt on reload of B
+    // even though the user never touched B. A freshly-loaded page is never
+    // dirty until the user types on it (any restored draft is already saved).
+    document.addEventListener('DOMContentLoaded', function() { formDirty = false; });
+    // ── Transparent.formMemory ──────────────────────────────────────────────
+    //
+    // Persistent draft store for forms — survives accidental close, refresh,
+    // power loss, browser crash. Keyed by URL + form identity (name or id).
+    //
+    // Save triggers:
+    //   - debounced (500ms) on user `input`/`change` events
+    //   - synchronously on beforeunload (last-resort capture for fields
+    //     mutated by JS like Editor.js / Select2 that don't fire trusted
+    //     `input` events)
+    //
+    // Restore: silently on initial DOMContentLoaded AND after each SPA swap
+    // (transparent.js re-dispatches DOMContentLoaded post-swap, line ~1375).
+    // Restored fields get `data-restored-from-draft=""` for optional
+    // project-level toast / styling.
+    //
+    // Clear: on form submit + on TTL expiry (7 days) + manually via
+    // `Transparent.formMemory.clear(form)`.
+    //
+    // Opt-out:
+    //   - `<form data-no-persist>` — entire form skipped
+    //   - `<input data-no-persist>` — single field skipped
+    //   - Auto-skipped: type="password", type="file", type="submit"/button,
+    //     and any hidden field whose name contains `_token` or `csrf`
+    //     (Symfony CSRF token field). These are never persisted.
+    //
+    // Editor.js compatibility: Editor.js reads its initial JSON from
+    // `data-edjs` attribute (not `.value`). On restore, if the field is a
+    // <textarea data-edjs>, we mirror the restored value into `data-edjs`
+    // too so Editor.js renders the draft when its init pass runs.
+    Transparent.formMemory = (function() {
+        var KEY_PREFIX  = 'tx-form-memory:';
+        var DEFAULT_TTL = 7 * 24 * 60 * 60 * 1000; // 7 days
+        var DEBOUNCE    = 500;
+        var saveTimers = new WeakMap();
+        var api = {
+            enabled : true,
+            ttl     : DEFAULT_TTL,
+            debounce: DEBOUNCE,
+        };
+        function shouldSkipField(field) {
+            if (!field.name) return true;
+            var type = (field.type || '').toLowerCase();
+            if (type === 'password' || type === 'file') return true;
+            if (type === 'submit' || type === 'button' || type === 'reset') return true;
+            if (field.hasAttribute && field.hasAttribute('data-no-persist')) return true;
+            // CSRF tokens — never persist. Matches Symfony's `_token` and
+            // any other token-named hidden input (`csrf`, `_csrf_token`, ...).
+            if (type === 'hidden') {
+                var n = field.name.toLowerCase();
+                if (n.indexOf('_token') !== -1 || n.indexOf('csrf') !== -1) return true;
+            }
+            return false;
+        }
+        function shouldSkipForm(form) {
+            if (!form) return true;
+            if (form.hasAttribute && form.hasAttribute('data-no-persist')) return true;
+            if (!form.name && !form.id) return true; // need identity for key
+            return false;
+        }
+        function getKey(form) {
+            return KEY_PREFIX + location.pathname + ':' + (form.name || form.id);
+        }
+        function readLS(key) {
+            try { return localStorage.getItem(key); } catch (e) { return null; }
+        }
+        function writeLS(key, val) {
+            try { localStorage.setItem(key, val); } catch (e) {
+                // Quota exceeded or storage disabled — fail silent. The
+                // user keeps their work in memory, just loses persistence.
+            }
+        }
+        function removeLS(key) {
+            try { localStorage.removeItem(key); } catch (e) {}
+        }
+        api.save = function(form) {
+            if (!api.enabled) return;
+            if (shouldSkipForm(form)) return;
+            var data = {};
+            var elements = form.elements;
+            for (var i = 0; i < elements.length; i++) {
+                var field = elements[i];
+                if (shouldSkipField(field)) continue;
+                var type = (field.type || '').toLowerCase();
+                if (type === 'checkbox' || type === 'radio') {
+                    if (!field.checked) continue;
+                    if (data[field.name] === undefined) {
+                        data[field.name] = field.value;
+                    } else if (Array.isArray(data[field.name])) {
+                        data[field.name].push(field.value);
+                    } else {
+                        data[field.name] = [data[field.name], field.value];
+                    }
+                } else if (field.tagName === 'SELECT' && field.multiple) {
+                    var sel = [];
+                    for (var j = 0; j < field.options.length; j++) {
+                        if (field.options[j].selected) sel.push(field.options[j].value);
+                    }
+                    data[field.name] = sel;
+                } else {
+                    data[field.name] = field.value;
+                }
+            }
+            if (Object.keys(data).length === 0) {
+                // No persistable fields with data — clear any stale entry
+                // rather than write an empty record (avoids restoring "all
+                // empty" later and overwriting newly-pre-filled fields).
+                removeLS(getKey(form));
+                return;
+            }
+            writeLS(getKey(form), JSON.stringify({ t: Date.now(), d: data }));
+        };
+        api.restore = function(form) {
+            if (!api.enabled) return;
+            if (shouldSkipForm(form)) return;
+            var key = getKey(form);
+            var raw = readLS(key);
+            if (!raw) return;
+            var entry;
+            try { entry = JSON.parse(raw); }
+            catch (e) { removeLS(key); return; }
+            if (!entry || !entry.t || !entry.d) { removeLS(key); return; }
+            if (Date.now() - entry.t > api.ttl) { removeLS(key); return; }
+            Object.keys(entry.d).forEach(function(name) {
+                var value = entry.d[name];
+                // Use attr-selector with CSS.escape to handle names like
+                // `Article[content]` that contain brackets.
+                var sel = '[name="' + (typeof CSS !== 'undefined' && CSS.escape
+                                       ? CSS.escape(name)
+                                       : name.replace(/(["\\\[\]])/g, '\\$1')) + '"]';
+                var fields = form.querySelectorAll(sel);
+                if (fields.length === 0) return;
+                for (var k = 0; k < fields.length; k++) {
+                    var field = fields[k];
+                    if (shouldSkipField(field)) continue;
+                    var type = (field.type || '').toLowerCase();
+                    if (type === 'checkbox' || type === 'radio') {
+                        field.checked = Array.isArray(value)
+                            ? (value.indexOf(field.value) !== -1)
+                            : (field.value === value);
+                    } else if (field.tagName === 'SELECT' && field.multiple) {
+                        if (Array.isArray(value)) {
+                            for (var m = 0; m < field.options.length; m++) {
+                                field.options[m].selected = (value.indexOf(field.options[m].value) !== -1);
+                            }
+                        }
+                    } else {
+                        field.value = value;
+                        // Editor.js mirrors: Editor.js reads its initial JSON
+                        // from the `data-edjs` attribute, not from .value. So
+                        // we have to mirror the restored value into the attr
+                        // for the upcoming Editor.js init pass to pick it up.
+                        if (field.tagName === 'TEXTAREA' && field.hasAttribute('data-edjs')) {
+                            field.setAttribute('data-edjs', value);
+                        }
+                    }
+                    field.setAttribute('data-restored-from-draft', '');
+                }
+            });
+        };
+        api.clear = function(form) {
+            if (!form) return;
+            if (shouldSkipForm(form)) return;
+            removeLS(getKey(form));
+        };
+        api.restoreAll = function() {
+            var forms = document.querySelectorAll('form');
+            for (var i = 0; i < forms.length; i++) api.restore(forms[i]);
+        };
+        api.saveAll = function() {
+            var forms = document.querySelectorAll('form');
+            for (var i = 0; i < forms.length; i++) api.save(forms[i]);
+        };
+        api.clearExpired = function() {
+            var ttl = api.ttl;
+            var now = Date.now();
+            try {
+                for (var i = localStorage.length - 1; i >= 0; i--) {
+                    var key = localStorage.key(i);
+                    if (!key || key.indexOf(KEY_PREFIX) !== 0) continue;
+                    var raw;
+                    try { raw = localStorage.getItem(key); }
+                    catch (e) { continue; }
+                    var entry = null;
+                    try { entry = JSON.parse(raw); } catch (e) {}
+                    if (!entry || !entry.t || (now - entry.t > ttl)) {
+                        removeLS(key);
+                    }
+                }
+            } catch (e) {}
+        };
+        // Debounced per-form save scheduler. WeakMap → no leak when forms
+        // get removed from the DOM (e.g., on SPA swap).
+        function debouncedSave(form) {
+            if (!form || shouldSkipForm(form)) return;
+            var existing = saveTimers.get(form);
+            if (existing) clearTimeout(existing);
+            saveTimers.set(form, setTimeout(function() {
+                api.save(form);
+            }, api.debounce));
+        }
+        // Event wiring. Capture phase + isTrusted gate matches the
+        // formDirty pattern above — programmatic field mutations from
+        // Select2/Editor.js init code don't trigger a save here, which is
+        // correct (those are not "user changes"; saving them would persist
+        // server-rendered defaults as if they were user input).
+        document.addEventListener('input', function(e) {
+            if (!e.isTrusted) return;
+            if (!e.target || !e.target.form) return;
+            debouncedSave(e.target.form);
+        }, true);
+        document.addEventListener('change', function(e) {
+            if (!e.isTrusted) return;
+            if (!e.target || !e.target.form) return;
+            debouncedSave(e.target.form);
+        }, true);
+        // Successful submit clears the draft. We listen in capture so we
+        // run before any user-side submit handler that might cancel.
+        document.addEventListener('submit', function(e) {
+            if (e.target && e.target.tagName === 'FORM') {
+                api.clear(e.target);
+            }
+        }, true);
+        // Last-resort save on page exit. Catches state mutated only by JS
+        // (Editor.js content syncs, Select2 hidden-field writes) that
+        // never fired trusted input/change events. Synchronous because
+        // beforeunload doesn't await microtasks.
+        window.addEventListener('beforeunload', function() {
+            if (!api.enabled) return;
+            // Only save if the user has actually typed something — same
+            // gate as the unload-confirm prompt above. If formDirty is
+            // false, drafts written from the debounced handler are stale
+            // and we don't want to refresh them on every page-close.
+            if (formDirty) api.saveAll();
+        });
+        // Initial restore. If we're already past DOMContentLoaded (defer
+        // scripts run after parsing but before DCL), run synchronously.
+        // For SPA navs, transparent.js re-dispatches DOMContentLoaded in
+        // _doSwap (around line 1375), so this same listener fires again
+        // on every swap — no extra wiring needed.
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', api.restoreAll);
+        } else {
+            api.restoreAll();
+        }
+        document.addEventListener('DOMContentLoaded', api.restoreAll);
+        // Cleanup expired entries — once at startup, deferred so it
+        // doesn't block first paint.
+        setTimeout(api.clearExpired, 2000);
+        return api;
+    })();
     function __main__(e) {
-        _tx("__main__ ENTRY", "event=" + e.type + (e.target && e.target.tagName ? " target=" + e.target.tagName : ""));
         // Disable transparent JS (e.g. during development..)
         if(Settings.disable) return;
@@ -1826,17 +2186,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         if (ajaxSemaphore) return;
         if (url == location) return;
-        // Block navigation when offline. Project CSS / JS can react to
-        // html.offline + the transparent:offline event to surface a banner.
-        // The event is re-dispatched here on each attempted navigation so a
-        // listener can briefly flash/highlight the banner to acknowledge the
-        // click instead of doing nothing silently.
-        if (!isOnline || (typeof navigator !== "undefined" && navigator.onLine === false)) {
-            setOnlineStatus(false);
-            dispatchEvent(new Event("transparent:offline"));
-            return;
-        }
         if((e.type == Transparent.state.CLICK || e.type == Transparent.state.HASHCHANGE) && url.pathname == location.pathname && url.search == location.search && type != "POST") {
             if(!url.hash) return;
@@ -1862,7 +2211,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         $(Transparent.html).stop();
         Transparent.html.addClass(Transparent.state.LOADING);
-        Transparent.fadeIn();
+        Transparent.activeIn();
         function isJsonResponse(str) {
             try { JSON.parse(str); return true; }
@@ -1870,7 +2219,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         }
         function handleResponse(uuid, status = 200, method = null, data = null, xhr = null, request = null) {
-            _tx("handleResponse ENTRY", "status=" + status + " method=" + method);
             ajaxSemaphore = false;
@@ -1906,7 +2254,26 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     Transparent.setResponse(uuid, responseText);
             }
-            var dom = new DOMParser().parseFromString(responseText, "text/html");
+            // Try the in-memory live-DOM cache first. On popstate (back/forward)
+            // we just stored the outgoing page node via setLiveResponse, so the
+            // round-trip is: snapshot → cache → instant retrieve. No serialize,
+            // no DOMParser cost. Falls back to the parse path on miss (first-
+            // time nav, cache eviction, expired entry, etc.).
+            var dom = null;
+            if (Transparent.getLiveResponse) {
+                var liveNode = Transparent.getLiveResponse(uuid);
+                if (liveNode) {
+                    // The cache stores the full <html> element. Wrap it in a
+                    // minimal Document-shaped object that the swap path can
+                    // navigate the same way it navigates a DOMParser result.
+                    var docShell = document.implementation.createHTMLDocument('');
+                    docShell.replaceChild(liveNode, docShell.documentElement);
+                    dom = docShell;
+                }
+            }
+            if (!dom) {
+                dom = new DOMParser().parseFromString(responseText, "text/html");
+            }
             if(request && request.getResponseHeader("Content-Type") == "application/json") {
                 if(!isJsonResponse(responseText)) {
@@ -1956,18 +2323,12 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 history.pushState({uuid: uuid, status:status, method: method, data: {}, href: responseURL}, '', responseURL);
             // Page not recognized.. just go fetch by yourself.. no POST information transmitted..
-            // Defer the redirect until fadeIn settles, same reasoning as the
-            // html.reload path above.
-            if(!Transparent.isPage(dom)) {
-                _waitForFadeIn(function() { window.location.href = url; });
-                return;
-            }
+            if(!Transparent.isPage(dom))
+                return window.location.href = url;
             // Layout not compatible.. needs to be reloaded (exception when POST is detected..)
-            if(!Transparent.isCompatiblePage(dom, method, data)) {
-                _waitForFadeIn(function() { window.location.href = url; });
-                return;
-            }
+            if(!Transparent.isCompatiblePage(dom, method, data))
+                return window.location.href = url;
             // Mark layout as known
             if(!Transparent.isKnownLayout(dom)) {
@@ -1995,46 +2356,16 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 Transparent.html.addClass(Transparent.state.SAME);
             var switchLayout = Transparent.state.SWITCH.replace("X", prevLayout).replace("Y", newLayout);
-            _tx("handleResponse switchLayout", "prev=" + prevLayout + " new=" + newLayout + " adds=." + switchLayout);
             Transparent.html.addClass(switchLayout);
             dispatchEvent(new Event('transparent:'+switchLayout));
-            if($(dom).find("html").hasClass(Transparent.state.RELOAD) || $(dom).find("html").hasClass(Transparent.state.DISABLE)) {
-                // Defer the reload until fadeIn has finished, so the loader is
-                // at full opacity when the browser unloads. Without this, a
-                // fast AJAX response can fire reload() while fadeIn is still
-                // mid-animation: the browser swaps to a page that starts with
-                // .active (loader at 100%), and the user perceives a snap
-                // from in-progress opacity to full. Reading as "fade-out then
-                // fade-in" because the partial loader receded as the browser
-                // swapped frames.
-                _waitForFadeIn(function() { window.location.reload(); });
-                return;
-            }
-            // Kick off preloads for stylesheets the new page needs but aren't yet in <head>.
-            // They download in parallel during the fadeIn animation so onLoad() finds them
-            // already cached — eliminating FOUC on cold-cache layout transitions.
-            (function() {
-                var loaded = {};
-                $("head").children("link[rel='stylesheet']").each(function() {
-                    var h = this.getAttribute("href"); if(h) loaded[h] = true;
-                });
-                $(dom).find("head").children("link[rel='stylesheet']").each(function() {
-                    var h = this.getAttribute("href");
-                    if(!h || loaded[h]) return;
-                    if($("head").find("link[rel='preload'][href='" + h.replace(/'/g, "\\'") + "']").length) return;
-                    var pl = document.createElement("link");
-                    pl.rel = "preload"; pl.as = "style"; pl.href = h;
-                    document.head.appendChild(pl);
-                });
-            })();
+            if($(dom).find("html").hasClass(Transparent.state.RELOAD) || $(dom).find("html").hasClass(Transparent.state.DISABLE))
+                return window.location.reload();
             return Transparent.onLoad(uuid, dom, function() {
-                Transparent.fadeOut(function() {
+                Transparent.activeOut(function() {
                     Transparent.html
                         .removeClass(switchLayout)
@@ -2057,7 +2388,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             if(history.state)
                 Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
-            $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in fadeIn callback)
+            $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in activeIn callback)
             // Submit ajax request..
             if(form) form.dispatchEvent(new SubmitEvent("submit", { submitter: formTrigger }));
@@ -2072,18 +2403,8 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 processData: false,
                 headers: Settings["headers"] || {},
                 xhr: function () { return xhr; },
-                success: function (html, status, request) { _tx("ajax SUCCESS", "status=" + request.status); return handleResponse(uuid, request.status, type, data, xhr, request); },
-                error:   function (request, ajaxOptions, thrownError) {
-                    _tx("ajax ERROR", "status=" + request.status + " textStatus=" + ajaxOptions);
-                    // status=0 with non-abort textStatus typically means the device
-                    // couldn't reach the server: dropped connection, DNS failure,
-                    // captive portal, etc. Flip to offline so the project's banner
-                    // surfaces even if navigator.onLine still reports true.
-                    if (request.status === 0 && ajaxOptions !== "abort") {
-                        setOnlineStatus(false);
-                    }
-                    return handleResponse(uuid, request.status, type, data, xhr, request);
-                }
+                success: function (html, status, request) { return handleResponse(uuid, request.status, type, data, xhr, request); },
+                error:   function (request, ajaxOptions, thrownError) { return handleResponse(uuid, request.status, type, data, xhr, request); }
             });
         }
@@ -2114,100 +2435,38 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         window.onpopstate   = __main__; // Onpopstate pop out straight to previous page.. this creates a jump while changing pages with hash..
         window.onhashchange = __main__;
-        var formDataBefore = {};
-        $(window).on("load", function() {
-            formDataBefore = {};
-            $("form").each(function() {
-                var formData = new FormData();
-                var formInput = $("[name^='"+this.name+"\[']");
-                    formInput.each(function() {
-                        if(this.type == "file") {
-                            for(var i = 0; i < this.files.length; i++)
-                                formData.append(this.name+"["+i+"]", this.files[i].name+";"+this.files[i].size+";"+this.files[i].lastModified);
-                        } else formData.append(this.name, this.value);
-                    });
-                for (var [fieldName,fieldValue] of formData.entries()) {
-                    if(!fieldName.endsWith("[]") && fieldName != "undefined")
-                        formDataBefore[fieldName] = fieldValue;
-                }
-            });
-        });
-        window.onbeforeunload = function(e) {
-            if(Settings.debug) console.log("Transparent onbeforeunload event called..");
-            if(formSubmission) return; // Do not display on form submission
+        // onbeforeunload confirmation REMOVED. It produced spurious "are you
+        // sure you want to leave?" blocks on any page with a form even when the
+        // user never typed: the dirty flag was flipped by any trusted change
+        // event (a <select>/checkbox toggle, Select2/datepicker init firing a
+        // real change, browser autofill, …), and the `e.currentTarget == window`
+        // guard below is unreliable across browsers. More importantly it's now
+        // obsolete: Transparent.formMemory persists every form's content to
+        // localStorage (debounced on input + saved synchronously on unload) and
+        // restores it on the next load, so reloading or closing the tab never
+        // loses typed input. The draft save on beforeunload (in the formMemory
+        // IIFE above) is kept; only the blocking confirmation is gone.
+        var __onbeforeunload_disabled = function(e) {
+            if(Settings.debug) console.log("Transparent onbeforeunload (no-op; drafts auto-saved)");
+            if(formSubmission) return;
             if(Settings.disable) return;
+            // No return value → browser never shows the leave/reload confirmation.
+        };
-            if(e.currentTarget == window) return;
-            var preventDefault = false;
-            var formDataAfter = [];
-            $("form").each(function() {
-                var formData = new FormData();
-                var formInput = $("[name^='"+this.name+"\[']");
-                formInput.each(function() {
-                    if(this.type == "file") {
-                        for(var i = 0; i < this.files.length; i++)
-                            formData.append(this.name+"["+i+"]", this.files[i].name+";"+this.files[i].size+";"+this.files[i].lastModified);
-                    } else formData.append(this.name, this.value);
-                });
-                for (var [fieldName,fieldValue] of formData.entries()) {
-                    if(!fieldName.endsWith("[]") && fieldName != "undefined")
-                        formDataAfter[fieldName] = fieldValue;
-                }
-            });
-            var formDataBeforeKeys    = Object.keys(formDataBefore);
-            var formDataAfterKeys     = Object.keys(formDataAfter);
-            function same(a, b) { return JSON.stringify(a) === JSON.stringify(b); }
-            function sameKeys(a, b) {
-                var aKeys = Object.keys(a).sort();
-                var bKeys = Object.keys(b).sort();
-                return JSON.stringify(aKeys) === JSON.stringify(bKeys);
-            }
-            if(!sameKeys(formDataBeforeKeys, formDataAfterKeys)) preventDefault = true;
-            else {
-                for (var [fieldName,fieldValueAfter] of Object.entries(formDataAfter)) {
-                    var fieldValueBefore = formDataBefore[fieldName];
-                    if(fieldValueBefore instanceof File) {
-                        if(!fieldValueAfter instanceof File) preventDefault = true;
-                        else if (fieldValueBefore.size != fieldValueAfter.size) preventDefault = true;
-                    } else if(fieldValueBefore != fieldValueAfter) {
-                        preventDefault = true;
-                    }
-                }
-            }
-            if(Settings.debug || preventDefault) {
-                if(preventDefault) Transparent.html.addClass(Transparent.state.READY);
-                if(preventDefault) Transparent.fadeOut();
-                if(preventDefault) dispatchEvent(new Event('load'));
-                return "Dude, are you sure you want to leave? Think of the kittens!";
-            }
-        }
+        // Legacy snapshot-and-compare confirm (formDataBefore vs formDataAfter)
+        // gave
+        // false positives because JS init code mutates form values after
+        // load — Select2 writes selected text to hidden fields, Editor.js
+        // serializes its JSON to a <textarea>, datepicker normalizes
+        // formats, etc. — so by the time the user hit Ctrl+W the snapshot
+        // and the current state always differed, and the browser always
+        // prompted even on read-only pages.
+        //
+        // false positives because JS init code mutated form values after load.
+        // Both that and the formDirty replacement are gone: the content is
+        // already in localStorage (saved on input + on unload), so leaving the
+        // page never loses it and a confirmation only gets in the way.
+        window.onbeforeunload = __onbeforeunload_disabled;
         document.addEventListener('click', __main__, false);