unpoly-rails 3.11.0 → 3.12.0

data/assets/unpoly/unpoly.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.11.0'
+    version: '3.12.0'
 };
 
 
@@ -394,6 +394,9 @@ up.util = (function () {
         return setTimeout(callback, millis);
     }
     function queueTask(task) {
+        setTimeout(task);
+    }
+    function queueFastTask(task) {
         const channel = new MessageChannel();
         channel.port1.onmessage = () => task();
         channel.port2.postMessage(0);
@@ -775,7 +778,7 @@ up.util = (function () {
     function scanFunctions(...values) {
         return values.flat().filter(isFunction);
     }
-    function cleaner() {
+    function cleaner(order = 'lifo') {
         let fns = [];
         let track = function (values, transform) {
             values = scanFunctions(...values).map(transform);
@@ -788,9 +791,9 @@ up.util = (function () {
             track(values, up.error.guardFn);
         };
         api.clean = function (...args) {
-            let { length } = fns;
-            for (let i = length - 1; i >= 0; i--)
-                fns[i](...args);
+            if (order === 'lifo')
+                fns.reverse();
+            fns.forEach((fn) => fn(...args));
             fns = [];
         };
         return api;
@@ -966,6 +969,7 @@ up.util = (function () {
         isBasicObjectProperty,
         isCrossOrigin,
         task: queueTask,
+        fastTask: queueFastTask,
         isEqual,
         getSimpleTokens,
         getComplexTokens,
@@ -1031,6 +1035,9 @@ up.error = (function () {
             reportError(error);
         }
     }
+    function guardPromise(promise) {
+        return promise.catch(reportError);
+    }
     function guardFn(fn) {
         return (...args) => guard(() => fn(...args));
     }
@@ -1040,6 +1047,7 @@ up.error = (function () {
         muteUncriticalRejection,
         muteUncriticalSync,
         guard,
+        guardPromise,
         guardFn,
     };
 })();
@@ -1353,6 +1361,10 @@ up.element = (function () {
         return `.${klass}`;
     }
     function createBrokenDocumentFromHTML(html) {
+        const firstTag = firstTagNameInHTML(html);
+        if (['TR', 'TD', 'TH', 'THEAD', 'TBODY'].includes(firstTag)) {
+            html = `<table>${html}</table>`;
+        }
         return new DOMParser().parseFromString(html, 'text/html');
     }
     function revivedClone(element) {
@@ -1641,6 +1653,14 @@ up.element = (function () {
             return [element.parentElement, 'beforeend'];
         }
     }
+    const FIRST_TAG_NAME_PATTERN = /^\s*(<!--[^-]*.*?-->\s*)*<([a-z-!]+)\b/i;
+    function firstTagNameInHTML(html) {
+        return FIRST_TAG_NAME_PATTERN.exec(html)?.[2].toUpperCase();
+    }
+    function isFullDocumentHTML(html) {
+        let firstTag = firstTagNameInHTML(html);
+        return firstTag === 'HTML' || firstTag === '!DOCTYPE';
+    }
     return {
         subtree,
         subtreeFirst,
@@ -1709,6 +1729,8 @@ up.element = (function () {
         matchSelectorMap,
         elementLikeMatches,
         documentPosition,
+        firstTagNameInHTML,
+        isFullDocumentHTML,
     };
 })();
 
@@ -1917,7 +1939,7 @@ up.OptionsParser = class OptionsParser {
         this._fail = parserOptions.fail;
         this._closest = parserOptions.closest;
         this._attrPrefix = parserOptions.attrPrefix || 'up-';
-        this._defaults = parserOptions.defaults || {};
+        this._defaults = parserOptions.defaults ?? {};
     }
     string(key, keyOptions) {
         this.parse(e.attr, key, keyOptions);
@@ -1947,7 +1969,9 @@ up.OptionsParser = class OptionsParser {
         for (let attrName of attrNames) {
             value ??= this._parseFromAttr(attrValueFn, this._element, attrName);
         }
-        value ??= keyOptions.default ?? this._defaults[key];
+        if (this._defaults !== false) {
+            value ??= keyOptions.default ?? this._defaults[key];
+        }
         if (u.isDefined(value)) {
             let normalizeFn = keyOptions.normalize;
             if (normalizeFn) {
@@ -2045,6 +2069,14 @@ up.Rect = class Rect extends up.Record {
     static fromElement(element) {
         return new (this)(element.getBoundingClientRect());
     }
+    static fromElementAsFixed(element) {
+        let fixedClone = element.cloneNode(true);
+        element.after(fixedClone);
+        fixedClone.style.position = 'fixed';
+        let rect = this.fromElement(fixedClone);
+        fixedClone.remove();
+        return rect;
+    }
 };
 
 
@@ -2119,6 +2151,11 @@ up.Change = class Change {
     deriveFailOptions() {
         return up.RenderOptions.deriveFailOptions(this.options);
     }
+    ensureLayerAlive(layer = this.layer) {
+        if (!layer.isAlive()) {
+            throw new up.Aborted("Layer is already " + layer.state);
+        }
+    }
 };
 
 
@@ -2139,18 +2176,18 @@ up.Change.Addition = class Addition extends up.Change {
     handleLayerChangeRequests() {
         if (this.layer.isOverlay()) {
             this._tryAcceptLayerFromServer();
-            this.abortWhenLayerClosed();
+            this.ensureLayerAlive();
             this.layer.tryAcceptForLocation(this._responseOptions());
-            this.abortWhenLayerClosed();
+            this.ensureLayerAlive();
             this._tryDismissLayerFromServer();
-            this.abortWhenLayerClosed();
+            this.ensureLayerAlive();
             this.layer.tryDismissForLocation(this._responseOptions());
-            this.abortWhenLayerClosed();
+            this.ensureLayerAlive();
         }
         this.layer.asCurrent(() => {
             for (let eventPlan of this._eventPlans) {
                 up.emit({ ...eventPlan, ...this._responseOptions() });
-                this.abortWhenLayerClosed();
+                this.ensureLayerAlive();
             }
         });
     }
@@ -2164,11 +2201,6 @@ up.Change.Addition = class Addition extends up.Change {
             this.layer.dismiss(this._dismissLayer, this._responseOptions());
         }
     }
-    abortWhenLayerClosed(layer = this.layer) {
-        if (layer.isClosed()) {
-            throw new up.Aborted('Layer was closed');
-        }
-    }
     _setSource({ oldElement, newElement, source }) {
         if (source === 'keep') {
             source = (oldElement && up.fragment.source(oldElement));
@@ -2282,16 +2314,16 @@ up.RenderJob = (_a = class RenderJob {
                 }
             }
         }
-        _handleAbortOption(request) {
+        _handleAbortOption({ bindFragments, bindLayer, origin, layer, request }) {
             let { abort } = this.renderOptions;
-            if (!abort || !up.network.isBusy())
+            if (!abort)
                 return;
-            let { bindFragments, bindLayer, origin, layer } = this._getChange().getPreflightProps();
             let abortOptions = {
                 except: request,
                 logOnce: ['up.render()', 'Change with { abort } option will abort other requests'],
                 newLayer: (layer === 'new'),
                 origin,
+                jid: this.renderOptions.jid,
             };
             if (abort === 'target') {
                 up.fragment.abort(bindFragments, { ...abortOptions });
@@ -2417,7 +2449,7 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
         else {
             this._content = this.responseDoc.select(this.target);
         }
-        if (!this._content || this._baseLayer.isClosed()) {
+        if (!this._content || !this._baseLayer.isAlive()) {
             throw new up.CannotMatch();
         }
     }
@@ -2438,7 +2470,7 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
         this.layer.setContent(this._content);
         this.responseDoc.finalizeElement(this._content);
         this.setReloadAttrs({ newElement: this._content, source: this.options.source });
-        up.hello(this.layer.element, { ...this.options, layer: this.layer, dataRoot: this._content });
+        this._helloPromise = up.hello(this.layer.element, { ...this.options, layer: this.layer, dataRoot: this._content });
         this._newOverlayResult = new up.RenderResult({
             layer: this.layer,
             fragments: [this._content],
@@ -2447,9 +2479,9 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
         });
         this._handleScroll();
         this._newOverlayResult.finished = this._finish();
-        this.layer.opening = false;
+        this.layer.state = 'opened';
         this._emitOpenedEvent();
-        this.abortWhenLayerClosed();
+        this.ensureLayerAlive();
     }
     _renderOtherLayers() {
         if (this._otherLayersResult)
@@ -2462,16 +2494,16 @@ up.Change.OpenLayer = class OpenLayer extends up.Change.Addition {
     }
     async _finish() {
         await this.layer.startOpenAnimation();
-        this.abortWhenLayerClosed();
+        this.ensureLayerAlive();
         this._handleFocus();
+        await this._helloPromise;
         return this._newOverlayResult;
     }
     _buildLayer() {
-        const buildOptions = { ...this.options, opening: true };
         const beforeNew = (optionsWithLayerDefaults) => {
             return this.options = up.RenderOptions.finalize(optionsWithLayerDefaults);
         };
-        return up.layer.build(buildOptions, beforeNew);
+        return up.layer.build(this.options, beforeNew);
     }
     _handleHistory() {
         if (this.layer.history === 'auto') {
@@ -2595,7 +2627,10 @@ up.Change.UpdateLayer = (_a = class UpdateLayer extends up.Change.Addition {
                 this.layer.peel({ history: !this._hasHistory() });
             }
             if (this.options.abort !== false) {
-                up.fragment.abort(this._getFragments(), { reason: 'Fragment is being replaced' });
+                up.fragment.abort(this._getFragments(), {
+                    reason: 'Fragment is being replaced',
+                    jid: this.options.jid,
+                });
             }
             Object.assign(this.layer.context, this._context);
             if (this._hasHistory()) {
@@ -2699,6 +2734,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
         this._steps = u.copy(u.assert(options.steps));
         this._passRenderOptions = u.assert(options.passRenderOptions);
         this._noneOptions = options.noneOptions || {};
+        this._finishDelays = [];
     }
     execute(responseDoc) {
         this.responseDoc = responseDoc;
@@ -2715,15 +2751,20 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
         }
         else {
             this._steps.reverse();
-            const motionEndPromises = this._steps.map((step) => this._executeStep(step));
-            this.renderResult.finished = this._finish(motionEndPromises);
+            up.fragment.mutate(() => {
+                const motionEndPromises = this._steps.map((step) => this._executeStep(step));
+                this.renderResult.finished = this._finish(motionEndPromises);
+            });
         }
         return this.renderResult;
     }
-    async _finish(motionEndPromises) {
-        await Promise.all(motionEndPromises);
+    _delayFinish(delay) {
+        this._finishDelays.push(delay);
+    }
+    async _finish() {
+        await Promise.all(this._finishDelays);
         for (let step of this._steps) {
-            this.abortWhenLayerClosed(step.layer);
+            this.ensureLayerAlive(step.layer);
         }
         return this.renderResult;
     }
@@ -2738,7 +2779,8 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
                 if (keepPlan) {
                     this._handleFocus(step.oldElement, step);
                     this._handleScroll(step.oldElement, step);
-                    return Promise.resolve();
+                    up.fragment.emitKept(keepPlan);
+                    break;
                 }
                 else {
                     this._preserveDescendantKeepables(step);
@@ -2759,13 +2801,15 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
                         afterDetach() {
                             e.cleanJQuery();
                             up.fragment.emitDestroyed(step.oldElement, { parent, log: false });
+                            step.afterDetach?.();
                         },
                         scrollNew: () => {
                             this._handleFocus(step.newElement, step);
                             this._handleScroll(step.newElement, step);
                         }
                     };
-                    return up.morph(step.oldElement, step.newElement, step.transition, morphOptions);
+                    this._delayFinish(up.morph(step.oldElement, step.newElement, step.transition, morphOptions));
+                    break;
                 }
             }
             case 'content': {
@@ -2776,12 +2820,14 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
                     placement: 'swap',
                     oldElement: oldWrapper,
                     newElement: newWrapper,
-                    focus: false
+                    focus: false,
+                    afterDetach: () => {
+                        e.unwrap(newWrapper);
+                        this._handleFocus(step.oldElement, step);
+                    },
                 };
-                return this._executeStep(wrapperStep).then(() => {
-                    e.unwrap(newWrapper);
-                    this._handleFocus(step.oldElement, step);
-                });
+                this._executeStep(wrapperStep);
+                break;
             }
             case 'before':
             case 'after': {
@@ -2791,7 +2837,8 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
                 this._welcomeElement(wrapper, step);
                 this._handleFocus(wrapper, step);
                 this._handleScroll(wrapper, step);
-                return up.animate(wrapper, step.animation, step).then(() => e.unwrap(wrapper));
+                this._delayFinish(up.animate(wrapper, step.animation, step).then(() => e.unwrap(wrapper)));
+                break;
             }
             default: {
                 up.fail('Unknown placement: %o', step.placement);
@@ -2801,7 +2848,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
     _welcomeElement(element, step) {
         this.responseDoc.finalizeElement(element);
         this.setReloadAttrs(step);
-        up.hello(element, step);
+        this._delayFinish(up.hello(element, step));
         this._addToResult(element);
     }
     _preserveDescendantKeepables(step) {
@@ -2842,6 +2889,7 @@ up.Change.UpdateSteps = class UpdateSteps extends up.Change.Addition {
     _finalizeDescendantKeepables(step) {
         for (let keepPlan of step.descendantKeepPlans) {
             keepPlan.oldElement.classList.remove('up-keeping');
+            up.fragment.emitKept(keepPlan);
         }
     }
     _willChangeBody() {
@@ -2875,7 +2923,7 @@ up.Change.CloseLayer = class CloseLayer extends up.Change {
     constructor(options) {
         super(options);
         this._verb = options.verb;
-        this._layer = up.layer.get(options);
+        this.layer = up.layer.get(options);
         this._origin = options.origin;
         this._value = options.value;
         this._preventable = options.preventable ?? true;
@@ -2883,61 +2931,62 @@ up.Change.CloseLayer = class CloseLayer extends up.Change {
         this._history = options.history ?? true;
     }
     execute() {
-        if (!this._layer.isOpen())
-            return;
+        this.ensureLayerAlive();
         up.browser.assertConfirmed(this.options);
         if (this._emitCloseEvent().defaultPrevented && this._preventable) {
             throw new up.Aborted('Close event was prevented');
         }
         this._emitClosingEvent();
-        up.fragment.abort({ reason: 'Layer is closing', layer: this._layer });
-        const { parent } = this._layer;
-        this._layer.peel();
-        this._layer.stack.remove(this._layer);
+        up.fragment.abort({ reason: 'Layer is closing', layer: this.layer });
+        this.layer.state = 'closing';
+        const { parent } = this.layer;
+        this.layer.peel();
+        this._handleFocus(parent);
+        this.layer.teardownHandlers();
+        this.layer.destroyElements(this.options);
+        this.layer.stack.remove(this.layer);
         if (this._history) {
             parent.restoreHistory();
         }
-        this._handleFocus(parent);
-        this._layer.teardownHandlers();
-        this._layer.destroyElements(this.options);
+        this.layer.state = 'closed';
         this._emitClosedEvent(parent);
     }
     _emitCloseEvent() {
-        let event = this._layer.emit(this._buildEvent(`up:layer:${this._verb}`), {
-            callback: this._layer.callback(`on${u.upperCaseFirst(this._verb)}`),
-            log: [`Will ${this._verb} ${this._layer} with value %o`, this._value]
+        let event = this.layer.emit(this._buildEvent(`up:layer:${this._verb}`), {
+            callback: this.layer.callback(`on${u.upperCaseFirst(this._verb)}`),
+            log: [`Will ${this._verb} ${this.layer} with value %o`, this._value]
         });
         this._value = event.value;
         return event;
     }
     _emitClosingEvent() {
         let event = this._buildEvent(`up:layer:${this._verb}ing`);
-        this._layer.emit(event, { log: false });
+        this.layer.emit(event, { log: false });
     }
     _emitClosedEvent(formerParent) {
         const verbPast = `${this._verb}ed`;
         const verbPastUpperCaseFirst = u.upperCaseFirst(verbPast);
-        return this._layer.emit(this._buildEvent(`up:layer:${verbPast}`), {
+        return this.layer.emit(this._buildEvent(`up:layer:${verbPast}`), {
             baseLayer: formerParent,
-            callback: this._layer.callback(`on${verbPastUpperCaseFirst}`),
+            callback: this.layer.callback(`on${verbPastUpperCaseFirst}`),
             ensureBubbles: true,
-            log: [`${verbPastUpperCaseFirst} ${this._layer} with value %o`, this._value]
+            log: [`${verbPastUpperCaseFirst} ${this.layer} with value %o`, this._value]
         });
     }
     _buildEvent(name) {
         return up.event.build(name, {
-            layer: this._layer,
+            layer: this.layer,
             value: this._value,
             origin: this._origin,
             response: this._response,
         });
     }
     _handleFocus(formerParent) {
-        let hadFocus = this._layer.hasFocus();
-        this._layer.overlayFocus.teardown();
+        let hadFocus = this.layer.hasFocus();
+        this.layer.overlayFocus.teardown();
         formerParent.overlayFocus?.moveToFront();
         if (hadFocus) {
-            let newFocusElement = this._layer.origin || formerParent.element;
+            let newFocusElement = this.layer.origin || formerParent.element;
             up.focus(newFocusElement, { preventScroll: true });
         }
     }
@@ -2958,11 +3007,12 @@ up.Change.FromURL = (_a = class FromURL extends up.Change {
                 up.network.loadPage(this.options);
                 return u.unresolvablePromise();
             }
-            let request = this.request = up.request(this._getRequestAttrs());
+            let requestAttrs = this._getRequestAttrs();
+            let request = this.request = up.request(requestAttrs);
             this.options.onRequestKnown?.(request);
             if (this.options.preload)
                 return request;
-            this.options.handleAbort?.(request);
+            this.options.handleAbort({ request, ...requestAttrs });
             request.runPreviews(this.options);
             return await u.always(request, (responseOrError) => this._onRequestSettled(responseOrError));
         }
@@ -3044,6 +3094,7 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
                     log: ['Loaded fragment from %s', this._response.description],
                     skip: () => this._skip()
                 });
+                this._assetRenderableResponse();
             }
             let fail = u.evalOption(this.options.fail, this._response) ?? !this._response.ok;
             if (fail) {
@@ -3051,6 +3102,11 @@ up.Change.FromResponse = (_a = class FromResponse extends up.Change {
             }
             return this._updateContentFromResponse(this.options);
         }
+        _assetRenderableResponse() {
+            if (!up.fragment.config.renderableResponse(this._response)) {
+                throw new up.CannotParse(['Cannot render response with content-type "%s" (configure with up.fragment.config.renderableResponse)', this._response.contentType]);
+            }
+        }
         _skip() {
             up.puts('up.render()', 'Skipping ' + this._response.description);
             this.options.target = ':none';
@@ -3200,7 +3256,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             return plans;
         }
         _isRenderableLayer(layer) {
-            return (layer === 'new') || layer.isOpen();
+            return (layer === 'new') || layer.isAlive();
         }
         _filterLayers() {
             this._layers = u.filter(this._layers, this._isRenderableLayer);
@@ -3238,7 +3294,7 @@ up.Change.FromContent = (_a = class FromContent extends up.Change {
             if (assets) {
                 up.script.assertAssetsOK(assets, plan.options);
             }
-            this.options.handleAbort?.(null);
+            this.options.handleAbort(this.getPreflightProps());
         }
         _getResponseDoc() {
             if (this._preflight)
@@ -3345,6 +3401,7 @@ up.CompilerPass = class CompilerPass {
         this._data = data;
         this._dataRoot = dataRoot || root;
         this._dataMap = dataMap;
+        this._compilePromises = [];
         meta ||= {};
         meta.layer = layer;
         this._meta = meta;
@@ -3356,6 +3413,7 @@ up.CompilerPass = class CompilerPass {
                 this._runCompiler(compiler);
             }
         });
+        return Promise.all(this._compilePromises);
     }
     setCompileData() {
         if (this._data) {
@@ -3385,7 +3443,7 @@ up.CompilerPass = class CompilerPass {
                 this._compileOneElement(compiler, match);
             }
         }
-        return up.migrate.postCompile?.(matches, compiler);
+        up.migrate.postCompile?.(matches, compiler);
     }
     _compileOneElement(compiler, element) {
         const compileArgs = [element];
@@ -3393,8 +3451,8 @@ up.CompilerPass = class CompilerPass {
             const data = up.script.data(element);
             compileArgs.push(data, this._meta);
         }
-        const result = this._applyCompilerFunction(compiler, element, compileArgs);
-        up.destructor(element, result);
+        let onDestructor = (destructor) => up.destructor(element, destructor);
+        this._applyCompilerFunction(compiler, element, compileArgs, onDestructor);
     }
     _compileBatch(compiler, elements) {
         const compileArgs = [elements];
@@ -3402,26 +3460,38 @@ up.CompilerPass = class CompilerPass {
             const dataList = u.map(elements, up.script.data);
             compileArgs.push(dataList, this._meta);
         }
-        const result = this._applyCompilerFunction(compiler, elements, compileArgs);
-        if (result) {
-            up.fail('Compilers with { batch: true } cannot return destructors');
+        let onDestructor = () => this._reportBatchCompilerWithDestructor(compiler);
+        this._applyCompilerFunction(compiler, elements, compileArgs, onDestructor);
+    }
+    async _applyCompilerFunction(compiler, elementOrElements, compileArgs, onDestructor) {
+        let maybeDestructor = up.error.guard(() => compiler.apply(elementOrElements, compileArgs));
+        if (u.isPromise(maybeDestructor)) {
+            let guardedPromise = up.error.guardPromise(maybeDestructor);
+            this._compilePromises.push(guardedPromise);
+            maybeDestructor = await guardedPromise;
         }
+        if (maybeDestructor)
+            onDestructor(maybeDestructor);
     }
-    _applyCompilerFunction(compiler, elementOrElements, compileArgs) {
-        return up.error.guard(() => compiler.apply(elementOrElements, compileArgs));
+    _reportBatchCompilerWithDestructor(compiler) {
+        let error = new up.Error(['Batch compiler (%s) cannot return a destructor', compiler.selector]);
+        reportError(error);
     }
     _select(selector) {
         return up.fragment.subtree(this._root, u.evalOption(selector), { layer: this._layer });
     }
     _selectOnce(compiler) {
         let matches = this._select(compiler.selector);
-        return u.filter(matches, (element) => {
-            let appliedCompilers = (element.upAppliedCompilers ||= new Set());
-            if (!appliedCompilers.has(compiler)) {
-                appliedCompilers.add(compiler);
-                return true;
-            }
-        });
+        if (!compiler.rerun) {
+            matches = u.filter(matches, (element) => {
+                let appliedCompilers = (element.upAppliedCompilers ||= new Set());
+                if (!appliedCompilers.has(compiler)) {
+                    appliedCompilers.add(compiler);
+                    return true;
+                }
+            });
+        }
+        return matches;
     }
 };
 
@@ -3842,19 +3912,24 @@ up.SelectorTracker = class SelectorTracker {
         this._addCallback = addCallback;
         this._layer = options.layer || 'any';
         this._filter = options.filter || u.identity;
-        this._live = options.live ?? true;
         this._knownMatches = new Map();
+        this._syncScheduled = false;
     }
     start() {
-        this._sync();
+        this._scheduleSync();
         return u.sequence(this._trackFragments(), () => this._removeAllMatches());
     }
     _trackFragments() {
-        if (this._live) {
-            return up.on('up:fragment:inserted up:fragment:destroyed', () => this._sync());
+        return up.on('up:fragment:inserted up:fragment:destroyed', () => this._scheduleSync());
+    }
+    _scheduleSync() {
+        if (!this._syncScheduled) {
+            this._syncScheduled = true;
+            up.fragment.afterMutate(() => this._sync());
         }
     }
     _sync() {
+        this._syncScheduled = false;
         let removeMap = new Map(this._knownMatches);
         this._knownMatches.clear();
         for (let newMatch of this._currentMatches) {
@@ -3899,7 +3974,7 @@ up.FieldWatcher = class FieldWatcher {
         this._processedValues = this._readFieldValues();
         this._currentTimer = null;
         this._callbackRunning = false;
-        return u.sequence(up.form.trackFields(this._root, (field) => this._watchField(field)), this._trackAbort(), this._trackReset(), () => this._abort());
+        return u.sequence(this._trackFields(), this._trackAbort(), this._trackReset(), () => this._abort());
     }
     _ensureWatchable() {
         const fail = (message) => up.fail(message, this._logPrefix, this._root);
@@ -3913,6 +3988,14 @@ up.FieldWatcher = class FieldWatcher {
             fail('%s can only watch fields with a name (%o)');
         }
     }
+    _trackFields() {
+        if (up.form.isField(this._root)) {
+            return this._watchField(this._root);
+        }
+        else {
+            return up.form.trackFields(this._root, (field) => this._watchField(field));
+        }
+    }
     _trackAbort() {
         let guard = ({ target }) => target.contains(this._region);
         return up.on('up:fragment:aborted', { guard }, () => this._abort());
@@ -4558,35 +4641,47 @@ up.FragmentFocus = class FragmentFocus extends up.FragmentProcessor {
 /***/ (() => {
 
 const e = up.element;
+const u = up.util;
 up.FragmentPolling = class FragmentPolling {
+    static forFragment(fragment) {
+        return fragment.upPolling ||= new this(fragment);
+    }
     constructor(fragment) {
         this._options = up.radio.pollOptions(fragment);
         this._fragment = fragment;
         up.destructor(fragment, this._onFragmentDestroyed.bind(this));
-        up.fragment.onAborted(fragment, this._onFragmentAborted.bind(this));
-        this._state = 'initialized';
-        this._abortable = true;
+        this._state = 'stopped';
+        this._forceIntent = null;
+        this._reloadJID = u.uid();
         this._loading = false;
         this._satisfyInterval();
     }
-    static forFragment(fragment) {
-        return fragment.upPolling ||= new this(fragment);
-    }
     onPollAttributeObserved() {
         this._start();
     }
+    _onFragmentAborted({ newLayer, jid }) {
+        const isOurAbort = (jid === this._reloadJID);
+        if (isOurAbort || newLayer)
+            return;
+        this._stop();
+    }
+    _onFragmentKept() {
+        if (this._forceIntent !== 'stop') {
+            this._start();
+        }
+    }
     _onFragmentDestroyed() {
         this._stop();
     }
     _start(options) {
         Object.assign(this._options, options);
-        if (this._state !== 'started') {
+        if (this._state === 'stopped') {
             if (!up.fragment.isTargetable(this._fragment)) {
                 up.warn('[up-poll]', 'Cannot poll untargetable fragment %o', this._fragment);
                 return;
             }
             this._state = 'started';
-            this._ensureEventsBound();
+            this._bindEvents();
             this._scheduleRemainingTime();
         }
     }
@@ -4594,28 +4689,31 @@ up.FragmentPolling = class FragmentPolling {
         if (this._state === 'started') {
             this._clearReloadTimer();
             this._state = 'stopped';
-            this._unbindEvents?.();
         }
     }
     forceStart(options) {
         Object.assign(this._options, options);
-        this.forceStarted = true;
+        this._forceIntent = 'start';
         this._start();
     }
     forceStop() {
+        this._forceIntent = 'stop';
         this._stop();
-        this.forceStarted = false;
     }
-    _ensureEventsBound() {
-        if (!this._unbindEvents) {
-            this._unbindEvents = up.on('visibilitychange up:layer:opened up:layer:dismissed up:layer:accepted', this._onVisibilityChange.bind(this));
-        }
+    _bindEvents() {
+        if (this._eventsBound)
+            return;
+        this._eventsBound = true;
+        up.destructor(this._fragment, up.on('visibilitychange up:layer:opened up:layer:dismissed up:layer:accepted', this._onVisibilityChange.bind(this)));
+        up.fragment.onAborted(this._fragment, this._onFragmentAborted.bind(this));
+        up.fragment.onKept(this._fragment, this._onFragmentKept.bind(this));
     }
     _onVisibilityChange() {
         if (this._isFragmentVisible()) {
             this._scheduleRemainingTime();
         }
         else {
+            this._clearReloadTimer();
         }
     }
     _isFragmentVisible() {
@@ -4627,17 +4725,17 @@ up.FragmentPolling = class FragmentPolling {
         this._reloadTimer = null;
     }
     _scheduleRemainingTime() {
-        if (!this._reloadTimer && !this._loading) {
-            this._clearReloadTimer();
-            this._reloadTimer = setTimeout(this._onTimerReached.bind(this), this._getRemainingDelay());
-        }
+        if (this._reloadTimer || this._loading || this._state === 'stopped')
+            return;
+        this._clearReloadTimer();
+        this._reloadTimer = setTimeout(this._onTimerReached.bind(this), this._getRemainingDelay());
     }
     _onTimerReached() {
         this._reloadTimer = null;
         this._tryReload();
     }
     _tryReload() {
-        if (this._state !== 'started') {
+        if (this._state === 'stopped') {
             return;
         }
         if (!up.fragment.isAlive(this._fragment)) {
@@ -4666,24 +4764,10 @@ up.FragmentPolling = class FragmentPolling {
     }
     _reloadNow() {
         this._clearReloadTimer();
-        let oldAbortable = this._abortable;
-        try {
-            this._abortable = false;
-            this._loading = true;
-            up.reload(this._fragment, this._reloadOptions()).then(this._onReloadSuccess.bind(this), this._onReloadFailure.bind(this));
-        }
-        finally {
-            this._abortable = oldAbortable;
-        }
-    }
-    _reloadOptions() {
+        this._loading = true;
         let guardEvent = up.event.build('up:fragment:poll', { log: ['Polling fragment', this._fragment] });
-        return { ...this._options, guardEvent };
-    }
-    _onFragmentAborted({ newLayer }) {
-        if (this._abortable && !newLayer) {
-            this._stop();
-        }
+        let reloadOptions = { ...this._options, guardEvent, jid: this._reloadJID };
+        up.reload(this._fragment, reloadOptions).then(this._onReloadSuccess.bind(this), this._onReloadFailure.bind(this));
     }
     _onReloadSuccess({ fragment }) {
         this._loading = false;
@@ -4696,8 +4780,7 @@ up.FragmentPolling = class FragmentPolling {
         }
     }
     _onFragmentSwapped(newFragment) {
-        this._stop();
-        if (this.forceStarted && up.fragment.matches(this._fragment, newFragment)) {
+        if (this._forceIntent === 'start' && up.fragment.matches(this._fragment, newFragment)) {
             this.constructor.forFragment(newFragment).forceStart(this._options);
         }
     }
@@ -4843,11 +4926,8 @@ up.Layer = class Layer extends up.Record {
     isOverlay() {
         return this.stack.isOverlay(this);
     }
-    isOpen() {
-        return this.stack.isOpen(this);
-    }
-    isClosed() {
-        return this.stack.isClosed(this);
+    isAlive() {
+        throw new up.NotImplemented();
     }
     get parent() {
         return this.stack.parentOf(this);
@@ -5019,7 +5099,7 @@ up.Layer = class Layer extends up.Record {
         if (newLocation !== liveLocation && this.showsLiveHistory() && push) {
             up.history.push(newLocation);
         }
-        if (newLocation !== prevSavedLocation && !this.opening) {
+        if (newLocation !== prevSavedLocation && this.state !== 'opening') {
             this.emit('up:layer:location:changed', { location: newLocation, previousLocation: prevSavedLocation, log: false });
         }
     }
@@ -5069,11 +5149,11 @@ up.Layer.Overlay = (_a = class Overlay extends up.Layer {
                 'dismissEvent',
                 'acceptLocation',
                 'dismissLocation',
-                'opening'
             ];
         }
         constructor(options) {
             super(options);
+            this.state = 'opening';
             if (this.dismissable === true) {
                 this.dismissable = ['button', 'key', 'outside'];
             }
@@ -5263,7 +5343,6 @@ up.Layer.Overlay = (_a = class Overlay extends up.Layer {
             super.teardownHandlers();
             this._unbindParentClicked?.();
             this._unbindEscapePressed?.();
-            this.overlayFocus.teardown();
         }
         destroyElements(options) {
             const animation = () => this.startCloseAnimation(options);
@@ -5302,9 +5381,12 @@ up.Layer.Overlay = (_a = class Overlay extends up.Layer {
                 boxAnimation,
                 backdropAnimation,
                 easing: options.easing || this.closeEasing,
-                duration: options.duration || this.closeDuration
+                duration: options.duration || this.closeDuration,
             });
         }
+        isAlive() {
+            return ['opening', 'opened'].includes(this.state);
+        }
         accept(value = null, options = {}) {
             return this._executeCloseChange('accept', value, options);
         }
@@ -5372,7 +5454,7 @@ up.Layer.OverlayWithTether = class OverlayWithTether extends up.Layer.Overlay {
         this._tether.stop();
     }
     sync() {
-        if (this.isOpen()) {
+        if (this.isAlive()) {
             if (this.isDetached() || this._tether.isDetached()) {
                 this.dismiss(':detached', {
                     animation: false,
@@ -5409,7 +5491,7 @@ up.Layer.OverlayWithViewport = class OverlayWithViewport extends up.Layer.Overla
         up.viewport.bodyShifter.lowerStack();
     }
     sync() {
-        if (this.isDetached() && this.isOpen()) {
+        if (this.isDetached() && this.isAlive()) {
             this.constructor.getParentElement().appendChild(this.element);
         }
     }
@@ -5445,6 +5527,9 @@ up.Layer.Root = (_a = class Root extends up.Layer {
         sync() {
             this.setupHandlers();
         }
+        isAlive() {
+            return true;
+        }
         accept() {
             this._cannotCloseRoot();
         }
@@ -5647,12 +5732,6 @@ up.LayerStack = class LayerStack {
         this._currentOverrides = [];
         this.root.reset();
     }
-    isOpen(layer) {
-        return u.contains(this.layers, layer);
-    }
-    isClosed(layer) {
-        return !this.isOpen(layer);
-    }
     parentOf(layer) {
         return this.layers[layer.index - 1];
     }
@@ -6506,6 +6585,7 @@ up.RenderOptions = (function () {
         'fallback',
         'abort',
         'abortable',
+        'handleAbort',
         'confirm',
         'feedback',
         'disable',
@@ -7429,6 +7509,7 @@ up.Request.XHRRenderer = (_a = class XHRRenderer {
 /***/ (() => {
 
 const u = up.util;
+const HTML_CONTENT_TYPE = /^(text\/html|application\/xhtml\+xml) *(;|$)/i;
 up.Response = class Response extends up.Record {
     keys() {
         return [
@@ -7474,6 +7555,9 @@ up.Response = class Response extends up.Record {
     get contentType() {
         return this.header('Content-Type');
     }
+    isHTML() {
+        return HTML_CONTENT_TYPE.test(this.contentType);
+    }
     get cspInfo() {
         let policy = this.header('Content-Security-Policy') || this.header('Content-Security-Policy-Report-Only');
         return up.protocol.cspInfoFromHeader(policy);
@@ -7525,7 +7609,6 @@ up.Response = class Response extends up.Record {
 var _a;
 const u = up.util;
 const e = up.element;
-const FULL_DOCUMENT_PATTERN = /^\s*(<!--[^-]*.*?-->\s*)*<(html|!DOCTYPE)\b/i;
 up.ResponseDoc = (_a = class ResponseDoc {
         constructor({ document, fragment, content, target, origin, data, cspInfo, match }) {
             if (document) {
@@ -7552,7 +7635,7 @@ up.ResponseDoc = (_a = class ResponseDoc {
                 this._isFullDocument = true;
             }
             else if (u.isString(value)) {
-                this._isFullDocument = FULL_DOCUMENT_PATTERN.test(value);
+                this._isFullDocument = e.isFullDocumentHTML(value);
                 let htmlParser = (html) => [e.createBrokenDocumentFromHTML(html)];
                 let nodes = up.fragment.provideNodes(value, { origin, data, htmlParser });
                 if (nodes[0] instanceof Document) {
@@ -7775,21 +7858,27 @@ up.RevealMotion = class RevealMotion {
             return up.Rect.fromElement(this._viewport);
         }
     }
-    _selectObstructions(selector) {
+    _computeObstructionRects(selector) {
         let elements = up.fragment.all(selector, { layer: this._obstructionsLayer });
-        return u.filter(elements, e.isVisible);
+        elements = u.filter(elements, e.isVisible);
+        return u.map(elements, (element) => {
+            if (e.style(element, 'position') === 'sticky') {
+                return up.Rect.fromElementAsFixed(element);
+            }
+            else {
+                return up.Rect.fromElement(element);
+            }
+        });
     }
     _substractObstructions(viewportRect) {
-        for (let obstruction of this._selectObstructions(this._topObstructionSelector)) {
-            let obstructionRect = up.Rect.fromElement(obstruction);
+        for (let obstructionRect of this._computeObstructionRects(this._topObstructionSelector)) {
             let diff = obstructionRect.bottom - viewportRect.top;
             if (diff > 0) {
                 viewportRect.top += diff;
                 viewportRect.height -= diff;
             }
         }
-        for (let obstruction of this._selectObstructions(this._bottomObstructionSelector)) {
-            let obstructionRect = up.Rect.fromElement(obstruction);
+        for (let obstructionRect of this._computeObstructionRects(this._bottomObstructionSelector)) {
             let diff = viewportRect.bottom - obstructionRect.top;
             if (diff > 0) {
                 viewportRect.height -= diff;
@@ -8086,12 +8175,11 @@ up.framework = (function () {
             console.error("Unpoly cannot boot: %s", issue);
         }
     }
-    function mustBootManually() {
-        let unpolyScript = document.currentScript;
-        if (unpolyScript?.async) {
+    function mustManualBoot() {
+        if (document.currentScript?.async) {
             return true;
         }
-        if (unpolyScript?.getAttribute('up-boot') === 'manual') {
+        if (document.querySelector('[up-boot=manual]:is(html, script)')) {
             return true;
         }
         if (document.readyState === 'complete') {
@@ -8100,7 +8188,7 @@ up.framework = (function () {
     }
     function onEvaled() {
         up.emit('up:framework:evaled', { log: false });
-        if (mustBootManually()) {
+        if (mustManualBoot()) {
             console.debug('Call up.boot() after you have configured Unpoly');
         }
         else {
@@ -8167,6 +8255,12 @@ up.event = (function () {
     function on(...args) {
         return buildListenerGroup(args).bind();
     }
+    function onAncestor(fragment, eventType, callback) {
+        let guard = (event) => event.target.contains(fragment);
+        let unsubscribe = up.on(eventType, { guard }, callback);
+        up.destructor(fragment, unsubscribe);
+        return unsubscribe;
+    }
     function off(...args) {
         return buildListenerGroup(args).unbind();
     }
@@ -8248,6 +8342,7 @@ up.event = (function () {
     on('up:framework:reset', reset);
     return {
         on,
+        onAncestor,
         off,
         build,
         emit,
@@ -8590,6 +8685,7 @@ up.script = (function () {
             isDefault: up.framework.evaling,
             priority: 0,
             batch: false,
+            rerun: false,
         });
         return Object.assign(callback, options, overrides);
     }
@@ -8616,25 +8712,35 @@ up.script = (function () {
         up.emit(fragment, 'up:fragment:compile', { log: false });
         let compilers = options.compilers || registeredMacros.concat(registeredCompilers);
         const pass = new up.CompilerPass(fragment, compilers, options);
-        pass.run();
+        return pass.run();
     }
-    function registerDestructor(element, destructor) {
-        let fns = u.scanFunctions(destructor);
+    function registerDestructor(element, value) {
+        let fns = u.scanFunctions(value);
         if (!fns.length)
             return;
-        let registry = (element.upDestructors ||= buildDestructorRegistry(element));
-        registry.guard(fns);
+        if (element.isConnected) {
+            let registry = (element.upDestructors ||= buildDestructorRegistry(element));
+            registry.guard(fns);
+        }
+        else {
+            up.puts('up.destructor()', 'Immediately calling destructor for detached element (%o)', element);
+            for (let fn of fns)
+                up.error.guard(fn, element);
+        }
     }
     function buildDestructorRegistry(element) {
         let registry = u.cleaner();
         registry(e.addClassTemp(element, 'up-can-clean'));
         return registry;
     }
-    function hello(element, options = {}) {
+    async function hello(element, options = {}) {
         element = up.fragment.get(element, options);
         up.puts('up.hello()', "Compiling fragment %o", element);
-        compile(element, options);
-        up.fragment.emitInserted(element);
+        await up.fragment.mutate(async () => {
+            let compilePromise = compile(element, options);
+            up.fragment.emitInserted(element);
+            await compilePromise;
+        });
         return element;
     }
     function clean(fragment, options = {}) {
@@ -8760,30 +8866,44 @@ up.history = (function () {
     let nextPreviousLocation;
     let nextTrackOptions;
     let adoptedBases = new up.FIFOCache({ capacity: 100, normalizeKey: getBase });
-    function isAdopted(location) {
-        return !!adoptedBases.get(location);
-    }
     function reset() {
         previousLocation = undefined;
         nextPreviousLocation = undefined;
         nextTrackOptions = undefined;
         adoptedBases.clear();
         trackCurrentLocation({ reason: null, alreadyHandled: true });
-        adopt();
+        adoptBase();
     }
     function currentLocation() {
         return u.normalizeURL(location.href);
     }
+    function withTrackOptions(trackOptions, fn) {
+        try {
+            nextTrackOptions = trackOptions;
+            fn();
+        }
+        finally {
+            nextTrackOptions = undefined;
+        }
+    }
     function trackCurrentLocation(trackOptions) {
-        let { reason, alreadyHandled } = nextTrackOptions || trackOptions;
+        let { reason, alreadyHandled, pauseTracking } = nextTrackOptions || trackOptions;
+        if (pauseTracking)
+            return;
         let location = currentLocation();
+        if (isAdoptedState()) {
+            adoptBase(location);
+        }
+        else if (isAdoptedBase(location)) {
+            adoptState();
+        }
         if (nextPreviousLocation !== location) {
             previousLocation = nextPreviousLocation;
             nextPreviousLocation = location;
             if (reason === 'detect') {
                 reason = (getBase(location) === getBase(previousLocation)) ? 'hash' : 'pop';
             }
-            let willHandle = !alreadyHandled && isAdopted(location);
+            let willHandle = !alreadyHandled && isAdoptedBase(location);
             let locationChangedEvent = up.event.build('up:location:changed', {
                 reason,
                 location,
@@ -8817,17 +8937,33 @@ up.history = (function () {
         placeAdoptedHistoryEntry('pushState', location, trackOptions);
     }
     function placeAdoptedHistoryEntry(method, location, trackOptions) {
-        adopt(location);
+        adoptBase(location);
         if (config.enabled) {
-            nextTrackOptions = trackOptions;
-            history[method](null, '', location);
-            nextTrackOptions = undefined;
+            withTrackOptions(trackOptions, function () {
+                history[method](null, { up: true }, location);
+            });
         }
     }
-    function adopt(location = currentLocation()) {
+    function isAdoptedBase(location) {
+        return !!adoptedBases.get(location);
+    }
+    function adoptBase(location = currentLocation()) {
         location = u.normalizeURL(location);
         adoptedBases.set(location, true);
     }
+    function isAdoptedState() {
+        return history.state?.up;
+    }
+    function adoptState() {
+        let { state } = history;
+        if (isAdoptedState())
+            return;
+        if (u.isBlank(state) || u.isObject(state)) {
+            withTrackOptions({ pauseTracking: true }, function () {
+                history.replaceState({ ...state, up: true }, '');
+            });
+        }
+    }
     function restoreLocation(location) {
         up.error.muteUncriticalRejection(up.render({
             guardEvent: up.event.build('up:location:restore', { location, log: `Restoring location ${location}` }),
@@ -8898,7 +9034,8 @@ up.history = (function () {
     }
     function adoptInitialHistoryEntry() {
         if (up.protocol.initialRequestMethod() === 'GET') {
-            adopt();
+            adoptState();
+            adoptBase();
         }
     }
     up.on('up:framework:boot', function ({ mode }) {
@@ -9035,6 +9172,7 @@ up.fragment = (function () {
         autoScroll: ['hash', 'layer-if-main'],
         autoRevalidate: (response) => response.expired,
         skipResponse: defaultSkipResponse,
+        renderableResponse: (response) => response.isHTML(),
         normalizeKeepHTML: defaultNormalizeKeepHTML
     }));
     u.delegate(config, ['mainTargets'], () => up.layer.config.any);
@@ -9071,12 +9209,13 @@ up.fragment = (function () {
         const options = parseTargetAndOptions(args);
         return render({ ...options, navigate: true });
     });
-    function emitFragmentKeep(keepPlan) {
-        let { oldElement, newElement: newFragment, newData, renderOptions } = keepPlan;
+    function emitFragmentKeep({ oldElement, newElement: newFragment, newData, renderOptions }) {
         const log = ['Keeping fragment %o', oldElement];
-        const callback = e.callbackAttr(keepPlan.oldElement, 'up-on-keep', { exposedKeys: ['newFragment', 'newData'] });
-        const event = up.event.build('up:fragment:keep', { newFragment, newData, renderOptions });
-        return up.emit(oldElement, event, { log, callback });
+        const callback = e.callbackAttr(oldElement, 'up-on-keep', { exposedKeys: ['newFragment', 'newData'] });
+        return up.emit(oldElement, 'up:fragment:keep', { log, callback, newFragment, newData, renderOptions });
+    }
+    function emitFragmentKept({ oldElement, newElement: newFragment, newData }) {
+        return up.emit(oldElement, 'up:fragment:kept', { log: true, newFragment, newData });
     }
     function findKeepPlan(options) {
         if (options.keep === false)
@@ -9170,9 +9309,7 @@ up.fragment = (function () {
         }
         return new up.FragmentFinder({
             selector,
-            origin: options.origin,
-            layer: options.layer,
-            match: options.match,
+            ...u.pick(options, ['layer', 'match', 'origin', 'destroying']),
         }).find();
     }
     function getFirstDescendant(...args) {
@@ -9210,8 +9347,9 @@ up.fragment = (function () {
     }
     function destroy(...args) {
         const options = parseTargetAndOptions(args);
-        if (options.element = getSmart(options.target, options)) {
-            new up.Change.DestroyFragment(options).execute();
+        const element = getSmart(options.target, options);
+        if (element) {
+            new up.Change.DestroyFragment({ ...options, element }).execute();
         }
         return up.migrate.formerlyAsync?.('up.destroy()');
     }
@@ -9394,7 +9532,7 @@ up.fragment = (function () {
                 targets.unshift(...replaced);
             }
             else if (LAYER_PSEUDO.test(target)) {
-                if (layer === 'new' || layer.opening)
+                if (layer === 'new' || layer.state === 'opening')
                     continue;
                 let firstSwappableTarget = toTarget(layer.getFirstSwappableElement(), options);
                 targets.unshift(target.replace(LAYER_PSEUDO, firstSwappableTarget));
@@ -9508,7 +9646,7 @@ up.fragment = (function () {
     function abort(...args) {
         let options = parseTargetAndOptions(args);
         let testFn;
-        let { reason, newLayer } = options;
+        let { reason, newLayer, jid } = options;
         let elements;
         if (options.target) {
             elements = getAll(options.target, options);
@@ -9524,14 +9662,14 @@ up.fragment = (function () {
         let testFnWithAbortable = (request) => request.abortable && testFn(request);
         up.network.abort(testFnWithAbortable, { ...options, reason });
         for (let element of elements) {
-            up.emit(element, 'up:fragment:aborted', { reason, newLayer, log: false });
+            up.emit(element, 'up:fragment:aborted', { reason, newLayer, jid, log: reason });
         }
     }
     function onAborted(fragment, callback) {
-        let guard = (event) => event.target.contains(fragment);
-        let unsubscribe = up.on('up:fragment:aborted', { guard }, callback);
-        up.destructor(fragment, unsubscribe);
-        return unsubscribe;
+        return up.event.onAncestor(fragment, 'up:fragment:aborted', callback);
+    }
+    function onKept(fragment, callback) {
+        return up.event.onAncestor(fragment, 'up:fragment:kept', callback);
     }
     function onFirstIntersect(element, callback, { margin = 0 } = {}) {
         if (e.isIntersectingWindow(element, { margin })) {
@@ -9604,6 +9742,26 @@ up.fragment = (function () {
         let tracker = new up.SelectorTracker(...parsedArgs);
         return tracker.start();
     }
+    let mutateLevel = 0;
+    let afterMutateCleaner = u.cleaner('fifo');
+    function mutate(callback) {
+        try {
+            mutateLevel++;
+            return callback();
+        }
+        finally {
+            if (--mutateLevel === 0)
+                afterMutateCleaner.clean();
+        }
+    }
+    function afterMutate(callback) {
+        if (mutateLevel === 0) {
+            callback();
+        }
+        else {
+            afterMutateCleaner(callback);
+        }
+    }
     up.on('up:framework:boot', function () {
         const { documentElement } = document;
         up.hello(documentElement);
@@ -9631,6 +9789,7 @@ up.fragment = (function () {
         emitInserted: emitFragmentInserted,
         emitDestroyed: emitFragmentDestroyed,
         emitKeep: emitFragmentKeep,
+        emitKept: emitFragmentKept,
         keepPlan: findKeepPlan,
         defaultNormalizeKeepHTML,
         successKey,
@@ -9647,6 +9806,7 @@ up.fragment = (function () {
         shouldRevalidate,
         abort,
         onAborted,
+        onKept,
         onFirstIntersect,
         splitTarget,
         parseTargetSteps,
@@ -9659,6 +9819,8 @@ up.fragment = (function () {
         provideNodes,
         cloneTemplate,
         trackSelector,
+        mutate,
+        afterMutate,
     };
 })();
 up.reload = up.fragment.reload;
@@ -9756,7 +9918,7 @@ up.viewport = (function () {
             return () => {
                 let doReveal = () => reveal(match, { top: true, behavior });
                 if (strong)
-                    u.task(doReveal);
+                    u.fastTask(doReveal);
                 return doReveal();
             };
         }
@@ -10938,6 +11100,7 @@ up.link = (function () {
                 'up-href': e.attr(childLink, 'href'),
                 ...e.upAttrs(childLink)
             });
+            childLink.upExpandedPair = area.upExpandedPair = [area, childLink];
             e.addClasses(area, e.upClasses(childLink));
             makeFollowable(area);
         }
@@ -11039,6 +11202,7 @@ up.form = (function () {
         return up.render(submitOptions(form, options));
     });
     function submitOptions(form, options, parserOptions) {
+        form = up.fragment.get(form);
         form = getForm(form);
         options = u.options(options);
         let parser = new up.OptionsParser(form, options, parserOptions);
@@ -11053,6 +11217,7 @@ up.form = (function () {
         options.origin ||= up.viewport.focusedElementWithin(form) || options.submitButton || form;
         options.activeElements = u.uniq([options.origin, options.submitButton, form].filter(u.isElement));
         parser.include(up.link.followOptions);
+        Object.assign(options, submitButtonOverrides(options.submitButton));
         return options;
     }
     function watchOptions(field, options, parserOptions = {}) {
@@ -11140,14 +11305,22 @@ up.form = (function () {
         const parser = new up.OptionsParser(form, options, parserOptions);
         parser.string('contentType', { attr: 'enctype' });
         parser.json('headers');
-        const params = up.Params.fromForm(form);
+        const paramParts = [
+            up.Params.fromForm(form),
+            e.jsonAttr(form, 'up-params'),
+        ];
+        const headerParts = [
+            e.jsonAttr(form, 'up-headers'),
+        ];
         const submitButton = (options.submitButton ??= findSubmitButtons(form)[0]);
         if (submitButton) {
-            params.addField(submitButton);
+            paramParts.push(up.Params.fromFields(submitButton), e.jsonAttr(submitButton, 'up-params'));
+            headerParts.push(e.jsonAttr(submitButton, 'up-headers'));
             options.method ||= submitButton.getAttribute('formmethod');
             options.url ||= submitButton.getAttribute('formaction');
         }
-        options.params = up.Params.merge(params, options.params);
+        options.params = up.Params.merge(...paramParts, options.params);
+        options.headers = u.merge(...headerParts, options.headers);
         parser.string('url', { attr: 'action', default: up.fragment.source(form) });
         parser.string('method', {
             attr: ['up-method', 'data-method', 'method'],
@@ -11159,6 +11332,12 @@ up.form = (function () {
         }
         return options;
     }
+    function submitButtonOverrides(submitButton) {
+        if (!submitButton)
+            return {};
+        let followOptions = up.link.followOptions(submitButton, {}, { defaults: false });
+        return u.omit(followOptions, ['method', 'url', 'guardEvent', 'origin', 'params', 'headers']);
+    }
     function watch(...args) {
         let [root, options, callback] = u.args(args, 'val', 'options', 'callback');
         root = up.element.get(root);
@@ -11216,9 +11395,22 @@ up.form = (function () {
         }
         return options;
     }
-    function getForm(elementOrSelector, options = {}) {
-        const element = up.fragment.get(elementOrSelector, options);
-        return element.form || element.closest('form');
+    function getForm(element) {
+        return getLiteralForm(element) || getClosestForm(element) || getAssociatedForm(element);
+    }
+    function getLiteralForm(element) {
+        if (element instanceof HTMLFormElement)
+            return element;
+    }
+    function getClosestForm(element) {
+        return element.closest('form');
+    }
+    function getAssociatedForm(element) {
+        let formID = element.getAttribute('form');
+        if (formID) {
+            let selector = 'form' + e.idSelector(formID);
+            return up.fragment.get(selector, { layer: element });
+        }
     }
     function getFormValidator(form) {
         return form.upFormValidator ||= setupFormValidator(form);
@@ -11229,15 +11421,15 @@ up.form = (function () {
         up.destructor(form, stop);
         return validator;
     }
-    function getRegion(origin, options) {
+    function getRegion(origin) {
+        return getOriginRegion(origin) || up.layer.current.element;
+    }
+    function getOriginRegion(origin) {
         if (origin) {
-            return getForm(origin, options) || up.layer.get(origin).element;
-        }
-        else {
-            return up.layer.current.element;
+            return getForm(origin) || up.layer.get(origin)?.element;
         }
     }
-    function trackFields(...args) {
+    const trackFields = up.mockable(function (...args) {
         let [root, { guard }, callback] = u.args(args, 'val', 'options', 'callback');
         let filter = function (fields) {
             let region = getRegion(root);
@@ -11247,9 +11439,8 @@ up.form = (function () {
                     && (!guard || guard(field));
             });
         };
-        const live = true;
-        return up.fragment.trackSelector(fieldSelector(), { filter, live }, callback);
-    }
+        return up.fragment.trackSelector(fieldSelector(), { filter }, callback);
+    });
     function focusedField() {
         return u.presence(document.activeElement, isField);
     }
@@ -11258,14 +11449,18 @@ up.form = (function () {
         return config.matches(form, 'submitSelectors');
     }
     up.on('submit', config.selectorFn('submitSelectors'), function (event, form) {
+        const submitButton = u.presence(event.submitter, isSubmitButton);
+        if (submitButton?.getAttribute('up-submit') === 'false')
+            return;
         if (event.defaultPrevented)
             return;
-        const submitButton = u.presence(event.submitter, isSubmitButton);
         up.event.halt(event, { log: true });
         up.error.muteUncriticalRejection(submit(form, { submitButton }));
     });
-    up.compiler('form', function (form) {
-        getFormValidator(form);
+    up.compiler('[up-validate]', { rerun: true }, function (element) {
+        let form = getForm(element);
+        if (form)
+            getFormValidator(form);
     });
     up.compiler('[up-switch]', (switcher) => {
         return new up.Switcher(switcher).start();
@@ -11277,6 +11472,7 @@ up.form = (function () {
         submit,
         submitOptions,
         destinationOptions,
+        submitButtonOverrides,
         watchOptions,
         validateOptions,
         isSubmittable,
@@ -11353,8 +11549,8 @@ up.status = (function () {
     function getMatchableLayerLocation(layer) {
         return u.matchableURL(layer.location);
     }
-    function findActivatableArea(element) {
-        return e.ancestor(element, SELECTOR_LINK) || element;
+    function findActivatableAreas(element) {
+        return element.upExpandedPair || [element];
     }
     function runPreviews(request, renderOptions) {
         let { bindLayer } = request;
@@ -11415,7 +11611,7 @@ up.status = (function () {
     }
     function getActiveElements({ origin, activeElements }) {
         activeElements ||= u.wrapList(origin);
-        return activeElements.map(findActivatableArea);
+        return u.flatMap(activeElements, findActivatableAreas);
     }
     function getFeedbackClassesPreviewFn(feedbackOption, fragments) {
         if (!feedbackOption)