npm - @glitchr/transparent - Versions diffs - 1.0.59 → 1.0.61 - Mend

@glitchr/transparent 1.0.59 → 1.0.61

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 (3) hide show

package/README.md CHANGED Viewed

	@@ -1,2 +1 @@
1 1	# TransparentJS
2	-

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/transparent",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "description": "Transparent SPA Application",
   "main": "src/index.js",
   "access": "public",

package/src/js/transparent.js CHANGED Viewed

@@ -179,7 +179,43 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         "smoothscroll_duration": "200ms",
         "smoothscroll_speed"   : 0,
         "smoothscroll_easing"  : "swing",
-        "exceptions": []
+        "exceptions": [],
+        // 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
     };
     const State = Transparent.state = {
@@ -219,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);
@@ -954,7 +1075,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.evalScript($("body")[0]);
         }
-        Transparent.scrollTo({top:0, left:0, duration:0});
         Transparent.activeOut();
     }
@@ -1093,8 +1213,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");
@@ -1223,11 +1358,57 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         });
         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() {
             // 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");
             $("head").children().each(function() {
@@ -1241,6 +1422,14 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     return !found;
                 });
+                // 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();
             });
@@ -1255,11 +1444,17 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     if(this.tagName != "SCRIPT" || Settings["global_code"] == true) {
-                        $("head").append(this.cloneNode(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 {
                         $("head").append(this);
+                        originalHeadNodes.add(this);
                     }
                 }
             });
@@ -1354,7 +1549,28 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 });
             });
-        }.bind(this), activeInRemainingTime > 0 ? activeInRemainingTime : 1);
+        }.bind(this);
+        // 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() {
@@ -1465,6 +1681,316 @@ 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);
+    // ── 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) {
         // Disable transparent JS (e.g. during development..)
@@ -1788,99 +2314,33 @@ 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;
-                }
-            });
-        });
+        // onbeforeunload: confirm only if the user has actually typed/edited
+        // a form input on this page. Pre-Turbo this used a snapshot-and-
+        // compare approach (formDataBefore vs formDataAfter) which 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.
+        //
+        // The replacement is the `formDirty` flag declared above, which is
+        // set only by trusted (user-originated) `input`/`change` events.
+        // No prompt unless the user genuinely typed something.
         window.onbeforeunload = function(e) {
             if(Settings.debug) console.log("Transparent onbeforeunload event called..");
             if(formSubmission) return; // Do not display on form submission
             if(Settings.disable) return;
             if(e.currentTarget == window) return;
+            if(!formDirty) return; // ← user hasn't modified anything; no prompt
-            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;
+            Transparent.html.addClass(Transparent.state.READY);
+            Transparent.activeOut();
+            dispatchEvent(new Event('load'));
-                    } else if(fieldValueBefore != fieldValueAfter) {
-                        preventDefault = true;
-                    }
-                }
-            }
-            if(Settings.debug || preventDefault) {
-                if(preventDefault) Transparent.html.addClass(Transparent.state.READY);
-                if(preventDefault) Transparent.activeOut();
-                if(preventDefault) dispatchEvent(new Event('load'));
-                return "Dude, are you sure you want to leave? Think of the kittens!";
-            }
+            return "Dude, are you sure you want to leave? Think of the kittens!";
         }
         document.addEventListener('click', __main__, false);