turbo-rails 2.0.2 → 2.0.16

data/app/assets/javascripts/turbo.js

@@ -1,6 +1,6 @@
 /*!
-Turbo 8.0.2
-Copyright © 2024 37signals LLC
+Turbo 8.0.13
+Copyright © 2025 37signals LLC
  */
 (function(prototype) {
   if (typeof prototype.requestSubmit == "function") return;
@@ -72,7 +72,7 @@ class FrameElement extends HTMLElement {
   static delegateConstructor=undefined;
   loaded=Promise.resolve();
   static get observedAttributes() {
-    return [ "disabled", "complete", "loading", "src" ];
+    return [ "disabled", "loading", "src" ];
   }
   constructor() {
     super();
@@ -90,11 +90,9 @@ class FrameElement extends HTMLElement {
   attributeChangedCallback(name) {
     if (name == "loading") {
       this.delegate.loadingStyleChanged();
-    } else if (name == "complete") {
-      this.delegate.completeChanged();
     } else if (name == "src") {
       this.delegate.sourceURLChanged();
-    } else {
+    } else if (name == "disabled") {
       this.delegate.disabledChanged();
     }
   }
@@ -118,6 +116,9 @@ class FrameElement extends HTMLElement {
       this.removeAttribute("refresh");
     }
   }
+  get shouldReloadWithMorph() {
+    return this.src && this.refresh === "morph";
+  }
   get loading() {
     return frameLoadingStyleFromString(this.getAttribute("loading") || "");
   }
@@ -169,122 +170,18 @@ function frameLoadingStyleFromString(style) {
   }
 }
 
-function expandURL(locatable) {
-  return new URL(locatable.toString(), document.baseURI);
-}
-
-function getAnchor(url) {
-  let anchorMatch;
-  if (url.hash) {
-    return url.hash.slice(1);
-  } else if (anchorMatch = url.href.match(/#(.*)$/)) {
-    return anchorMatch[1];
-  }
-}
-
-function getAction$1(form, submitter) {
-  const action = submitter?.getAttribute("formaction") || form.getAttribute("action") || form.action;
-  return expandURL(action);
-}
-
-function getExtension(url) {
-  return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || "";
-}
-
-function isHTML(url) {
-  return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml|php))$/);
-}
-
-function isPrefixedBy(baseURL, url) {
-  const prefix = getPrefix(url);
-  return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
-}
-
-function locationIsVisitable(location, rootLocation) {
-  return isPrefixedBy(location, rootLocation) && isHTML(location);
-}
-
-function getRequestURL(url) {
-  const anchor = getAnchor(url);
-  return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href;
-}
-
-function toCacheKey(url) {
-  return getRequestURL(url);
-}
-
-function urlsAreEqual(left, right) {
-  return expandURL(left).href == expandURL(right).href;
-}
-
-function getPathComponents(url) {
-  return url.pathname.split("/").slice(1);
-}
-
-function getLastPathComponent(url) {
-  return getPathComponents(url).slice(-1)[0];
-}
-
-function getPrefix(url) {
-  return addTrailingSlash(url.origin + url.pathname);
-}
-
-function addTrailingSlash(value) {
-  return value.endsWith("/") ? value : value + "/";
-}
-
-class FetchResponse {
-  constructor(response) {
-    this.response = response;
-  }
-  get succeeded() {
-    return this.response.ok;
-  }
-  get failed() {
-    return !this.succeeded;
-  }
-  get clientError() {
-    return this.statusCode >= 400 && this.statusCode <= 499;
-  }
-  get serverError() {
-    return this.statusCode >= 500 && this.statusCode <= 599;
-  }
-  get redirected() {
-    return this.response.redirected;
-  }
-  get location() {
-    return expandURL(this.response.url);
-  }
-  get isHTML() {
-    return this.contentType && this.contentType.match(/^(?:text\/([^\s;,]+\b)?html|application\/xhtml\+xml)\b/);
-  }
-  get statusCode() {
-    return this.response.status;
-  }
-  get contentType() {
-    return this.header("Content-Type");
-  }
-  get responseText() {
-    return this.response.clone().text();
-  }
-  get responseHTML() {
-    if (this.isHTML) {
-      return this.response.clone().text();
-    } else {
-      return Promise.resolve(undefined);
-    }
-  }
-  header(name) {
-    return this.response.headers.get(name);
-  }
-}
+const drive = {
+  enabled: true,
+  progressBarDelay: 500,
+  unvisitableExtensions: new Set([ ".7z", ".aac", ".apk", ".avi", ".bmp", ".bz2", ".css", ".csv", ".deb", ".dmg", ".doc", ".docx", ".exe", ".gif", ".gz", ".heic", ".heif", ".ico", ".iso", ".jpeg", ".jpg", ".js", ".json", ".m4a", ".mkv", ".mov", ".mp3", ".mp4", ".mpeg", ".mpg", ".msi", ".ogg", ".ogv", ".pdf", ".pkg", ".png", ".ppt", ".pptx", ".rar", ".rtf", ".svg", ".tar", ".tif", ".tiff", ".txt", ".wav", ".webm", ".webp", ".wma", ".wmv", ".xls", ".xlsx", ".xml", ".zip" ])
+};
 
 function activateScriptElement(element) {
   if (element.getAttribute("data-turbo-eval") == "false") {
     return element;
   } else {
     const createdScriptElement = document.createElement("script");
-    const cspNonce = getMetaContent("csp-nonce");
+    const cspNonce = getCspNonce();
     if (cspNonce) {
       createdScriptElement.nonce = cspNonce;
     }
@@ -322,6 +219,11 @@ function dispatch(eventName, {target: target, cancelable: cancelable, detail: de
   return event;
 }
 
+function cancelEvent(event) {
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+
 function nextRepaint() {
   if (document.visibilityState === "hidden") {
     return nextEventLoopTick();
@@ -451,6 +353,14 @@ function getMetaContent(name) {
   return element && element.content;
 }
 
+function getCspNonce() {
+  const element = getMetaElement("csp-nonce");
+  if (element) {
+    const {nonce: nonce, content: content} = element;
+    return nonce == "" ? content : nonce;
+  }
+}
+
 function setMetaContent(name, content) {
   let element = getMetaElement(name);
   if (!element) {
@@ -485,13 +395,17 @@ async function around(callback, reader) {
   return [ before, after ];
 }
 
-function doesNotTargetIFrame(anchor) {
-  if (anchor.hasAttribute("target")) {
-    for (const element of document.getElementsByName(anchor.target)) {
+function doesNotTargetIFrame(name) {
+  if (name === "_blank") {
+    return false;
+  } else if (name) {
+    for (const element of document.getElementsByName(name)) {
       if (element instanceof HTMLIFrameElement) return false;
     }
+    return true;
+  } else {
+    return true;
   }
-  return true;
 }
 
 function findLinkFromClickTarget(target) {
@@ -511,6 +425,152 @@ function debounce(fn, delay) {
   };
 }
 
+const submitter = {
+  "aria-disabled": {
+    beforeSubmit: submitter => {
+      submitter.setAttribute("aria-disabled", "true");
+      submitter.addEventListener("click", cancelEvent);
+    },
+    afterSubmit: submitter => {
+      submitter.removeAttribute("aria-disabled");
+      submitter.removeEventListener("click", cancelEvent);
+    }
+  },
+  disabled: {
+    beforeSubmit: submitter => submitter.disabled = true,
+    afterSubmit: submitter => submitter.disabled = false
+  }
+};
+
+class Config {
+  #submitter=null;
+  constructor(config) {
+    Object.assign(this, config);
+  }
+  get submitter() {
+    return this.#submitter;
+  }
+  set submitter(value) {
+    this.#submitter = submitter[value] || value;
+  }
+}
+
+const forms = new Config({
+  mode: "on",
+  submitter: "disabled"
+});
+
+const config = {
+  drive: drive,
+  forms: forms
+};
+
+function expandURL(locatable) {
+  return new URL(locatable.toString(), document.baseURI);
+}
+
+function getAnchor(url) {
+  let anchorMatch;
+  if (url.hash) {
+    return url.hash.slice(1);
+  } else if (anchorMatch = url.href.match(/#(.*)$/)) {
+    return anchorMatch[1];
+  }
+}
+
+function getAction$1(form, submitter) {
+  const action = submitter?.getAttribute("formaction") || form.getAttribute("action") || form.action;
+  return expandURL(action);
+}
+
+function getExtension(url) {
+  return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || "";
+}
+
+function isPrefixedBy(baseURL, url) {
+  const prefix = getPrefix(url);
+  return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix);
+}
+
+function locationIsVisitable(location, rootLocation) {
+  return isPrefixedBy(location, rootLocation) && !config.drive.unvisitableExtensions.has(getExtension(location));
+}
+
+function getRequestURL(url) {
+  const anchor = getAnchor(url);
+  return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href;
+}
+
+function toCacheKey(url) {
+  return getRequestURL(url);
+}
+
+function urlsAreEqual(left, right) {
+  return expandURL(left).href == expandURL(right).href;
+}
+
+function getPathComponents(url) {
+  return url.pathname.split("/").slice(1);
+}
+
+function getLastPathComponent(url) {
+  return getPathComponents(url).slice(-1)[0];
+}
+
+function getPrefix(url) {
+  return addTrailingSlash(url.origin + url.pathname);
+}
+
+function addTrailingSlash(value) {
+  return value.endsWith("/") ? value : value + "/";
+}
+
+class FetchResponse {
+  constructor(response) {
+    this.response = response;
+  }
+  get succeeded() {
+    return this.response.ok;
+  }
+  get failed() {
+    return !this.succeeded;
+  }
+  get clientError() {
+    return this.statusCode >= 400 && this.statusCode <= 499;
+  }
+  get serverError() {
+    return this.statusCode >= 500 && this.statusCode <= 599;
+  }
+  get redirected() {
+    return this.response.redirected;
+  }
+  get location() {
+    return expandURL(this.response.url);
+  }
+  get isHTML() {
+    return this.contentType && this.contentType.match(/^(?:text\/([^\s;,]+\b)?html|application\/xhtml\+xml)\b/);
+  }
+  get statusCode() {
+    return this.response.status;
+  }
+  get contentType() {
+    return this.header("Content-Type");
+  }
+  get responseText() {
+    return this.response.clone().text();
+  }
+  get responseHTML() {
+    if (this.isHTML) {
+      return this.response.clone().text();
+    } else {
+      return Promise.resolve(undefined);
+    }
+  }
+  header(name) {
+    return this.response.headers.get(name);
+  }
+}
+
 class LimitedSet extends Set {
   constructor(maxSize) {
     super();
@@ -598,7 +658,7 @@ class FetchRequest {
     this.fetchOptions = {
       credentials: "same-origin",
       redirect: "follow",
-      method: method,
+      method: method.toUpperCase(),
       headers: {
         ...this.defaultHeaders
       },
@@ -618,7 +678,7 @@ class FetchRequest {
     const [url, body] = buildResourceAndBody(this.url, fetchMethod, fetchBody, this.enctype);
     this.url = url;
     this.fetchOptions.body = body;
-    this.fetchOptions.method = fetchMethod;
+    this.fetchOptions.method = fetchMethod.toUpperCase();
   }
   get headers() {
     return this.fetchOptions.headers;
@@ -859,7 +919,7 @@ const FormSubmissionState = {
 
 class FormSubmission {
   state=FormSubmissionState.initialized;
-  static confirmMethod(message, _element, _submitter) {
+  static confirmMethod(message) {
     return Promise.resolve(confirm(message));
   }
   constructor(delegate, formElement, submitter, mustRedirect = false) {
@@ -901,7 +961,8 @@ class FormSubmission {
     const {initialized: initialized, requesting: requesting} = FormSubmissionState;
     const confirmationMessage = getAttribute("data-turbo-confirm", this.submitter, this.formElement);
     if (typeof confirmationMessage === "string") {
-      const answer = await FormSubmission.confirmMethod(confirmationMessage, this.formElement, this.submitter);
+      const confirmMethod = typeof config.forms.confirm === "function" ? config.forms.confirm : FormSubmission.confirmMethod;
+      const answer = await confirmMethod(confirmationMessage, this.formElement, this.submitter);
       if (!answer) {
         return;
       }
@@ -932,7 +993,7 @@ class FormSubmission {
   }
   requestStarted(_request) {
     this.state = FormSubmissionState.waiting;
-    this.submitter?.setAttribute("disabled", "");
+    if (this.submitter) config.forms.submitter.beforeSubmit(this.submitter);
     this.setSubmitsWith();
     markAsBusy(this.formElement);
     dispatch("turbo:submit-start", {
@@ -984,7 +1045,7 @@ class FormSubmission {
   }
   requestFinished(_request) {
     this.state = FormSubmissionState.stopped;
-    this.submitter?.removeAttribute("disabled");
+    if (this.submitter) config.forms.submitter.afterSubmit(this.submitter);
     this.resetSubmitterText();
     clearBusyState(this.formElement);
     dispatch("turbo:submit-end", {
@@ -1168,15 +1229,8 @@ function submissionDoesNotDismissDialog(form, submitter) {
 }
 
 function submissionDoesNotTargetIFrame(form, submitter) {
-  if (submitter?.hasAttribute("formtarget") || form.hasAttribute("target")) {
-    const target = submitter?.getAttribute("formtarget") || form.target;
-    for (const element of document.getElementsByName(target)) {
-      if (element instanceof HTMLIFrameElement) return false;
-    }
-    return true;
-  } else {
-    return true;
-  }
+  const target = submitter?.getAttribute("formtarget") || form.getAttribute("target");
+  return doesNotTargetIFrame(target);
 }
 
 class View {
@@ -1309,14 +1363,14 @@ class LinkInterceptor {
     document.removeEventListener("turbo:before-visit", this.willVisit);
   }
   clickBubbled=event => {
-    if (this.respondsToEventTarget(event.target)) {
+    if (this.clickEventIsSignificant(event)) {
       this.clickEvent = event;
     } else {
       delete this.clickEvent;
     }
   };
   linkClicked=event => {
-    if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
+    if (this.clickEvent && this.clickEventIsSignificant(event)) {
       if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
         this.clickEvent.preventDefault();
         event.preventDefault();
@@ -1328,9 +1382,10 @@ class LinkInterceptor {
   willVisit=_event => {
     delete this.clickEvent;
   };
-  respondsToEventTarget(target) {
-    const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
-    return element && element.closest("turbo-frame, html") == this.element;
+  clickEventIsSignificant(event) {
+    const target = event.composed ? event.target?.parentElement : event.target;
+    const element = findLinkFromClickTarget(target) || target;
+    return element instanceof Element && element.closest("turbo-frame, html") == this.element;
   }
 }
 
@@ -1360,7 +1415,7 @@ class LinkClickObserver {
     if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
       const target = event.composedPath && event.composedPath()[0] || event.target;
       const link = findLinkFromClickTarget(target);
-      if (link && doesNotTargetIFrame(link)) {
+      if (link && doesNotTargetIFrame(link.target)) {
         const location = getLocationForLink(link);
         if (this.delegate.willFollowLinkToLocation(link, location, event)) {
           event.preventDefault();
@@ -1484,12 +1539,13 @@ function createPlaceholderForPermanentElement(permanentElement) {
 
 class Renderer {
   #activeElement=null;
-  constructor(currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
+  static renderElement(currentElement, newElement) {}
+  constructor(currentSnapshot, newSnapshot, isPreview, willRender = true) {
     this.currentSnapshot = currentSnapshot;
     this.newSnapshot = newSnapshot;
     this.isPreview = isPreview;
     this.willRender = willRender;
-    this.renderElement = renderElement;
+    this.renderElement = this.constructor.renderElement;
     this.promise = new Promise(((resolve, reject) => this.resolvingFunctions = {
       resolve: resolve,
       reject: reject
@@ -1498,6 +1554,9 @@ class Renderer {
   get shouldRender() {
     return true;
   }
+  get shouldAutofocus() {
+    return true;
+  }
   get reloadReason() {
     return;
   }
@@ -1515,9 +1574,11 @@ class Renderer {
     await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
   }
   focusFirstAutofocusableElement() {
-    const element = this.connectedSnapshot.firstAutofocusableElement;
-    if (element) {
-      element.focus();
+    if (this.shouldAutofocus) {
+      const element = this.connectedSnapshot.firstAutofocusableElement;
+      if (element) {
+        element.focus();
+      }
     }
   }
   enteringBardo(currentPermanentElement) {
@@ -1625,10 +1686,675 @@ function readScrollBehavior(value, defaultValue) {
   }
 }
 
-class ProgressBar {
-  static animationDuration=300;
-  static get defaultCSS() {
-    return unindent`
+var Idiomorph = function() {
+  const noOp = () => {};
+  const defaults = {
+    morphStyle: "outerHTML",
+    callbacks: {
+      beforeNodeAdded: noOp,
+      afterNodeAdded: noOp,
+      beforeNodeMorphed: noOp,
+      afterNodeMorphed: noOp,
+      beforeNodeRemoved: noOp,
+      afterNodeRemoved: noOp,
+      beforeAttributeUpdated: noOp
+    },
+    head: {
+      style: "merge",
+      shouldPreserve: elt => elt.getAttribute("im-preserve") === "true",
+      shouldReAppend: elt => elt.getAttribute("im-re-append") === "true",
+      shouldRemove: noOp,
+      afterHeadMorphed: noOp
+    },
+    restoreFocus: true
+  };
+  function morph(oldNode, newContent, config = {}) {
+    oldNode = normalizeElement(oldNode);
+    const newNode = normalizeParent(newContent);
+    const ctx = createMorphContext(oldNode, newNode, config);
+    const morphedNodes = saveAndRestoreFocus(ctx, (() => withHeadBlocking(ctx, oldNode, newNode, (ctx => {
+      if (ctx.morphStyle === "innerHTML") {
+        morphChildren(ctx, oldNode, newNode);
+        return Array.from(oldNode.childNodes);
+      } else {
+        return morphOuterHTML(ctx, oldNode, newNode);
+      }
+    }))));
+    ctx.pantry.remove();
+    return morphedNodes;
+  }
+  function morphOuterHTML(ctx, oldNode, newNode) {
+    const oldParent = normalizeParent(oldNode);
+    let childNodes = Array.from(oldParent.childNodes);
+    const index = childNodes.indexOf(oldNode);
+    const rightMargin = childNodes.length - (index + 1);
+    morphChildren(ctx, oldParent, newNode, oldNode, oldNode.nextSibling);
+    childNodes = Array.from(oldParent.childNodes);
+    return childNodes.slice(index, childNodes.length - rightMargin);
+  }
+  function saveAndRestoreFocus(ctx, fn) {
+    if (!ctx.config.restoreFocus) return fn();
+    let activeElement = document.activeElement;
+    if (!(activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)) {
+      return fn();
+    }
+    const {id: activeElementId, selectionStart: selectionStart, selectionEnd: selectionEnd} = activeElement;
+    const results = fn();
+    if (activeElementId && activeElementId !== document.activeElement?.id) {
+      activeElement = ctx.target.querySelector(`#${activeElementId}`);
+      activeElement?.focus();
+    }
+    if (activeElement && !activeElement.selectionEnd && selectionEnd) {
+      activeElement.setSelectionRange(selectionStart, selectionEnd);
+    }
+    return results;
+  }
+  const morphChildren = function() {
+    function morphChildren(ctx, oldParent, newParent, insertionPoint = null, endPoint = null) {
+      if (oldParent instanceof HTMLTemplateElement && newParent instanceof HTMLTemplateElement) {
+        oldParent = oldParent.content;
+        newParent = newParent.content;
+      }
+      insertionPoint ||= oldParent.firstChild;
+      for (const newChild of newParent.childNodes) {
+        if (insertionPoint && insertionPoint != endPoint) {
+          const bestMatch = findBestMatch(ctx, newChild, insertionPoint, endPoint);
+          if (bestMatch) {
+            if (bestMatch !== insertionPoint) {
+              removeNodesBetween(ctx, insertionPoint, bestMatch);
+            }
+            morphNode(bestMatch, newChild, ctx);
+            insertionPoint = bestMatch.nextSibling;
+            continue;
+          }
+        }
+        if (newChild instanceof Element && ctx.persistentIds.has(newChild.id)) {
+          const movedChild = moveBeforeById(oldParent, newChild.id, insertionPoint, ctx);
+          morphNode(movedChild, newChild, ctx);
+          insertionPoint = movedChild.nextSibling;
+          continue;
+        }
+        const insertedNode = createNode(oldParent, newChild, insertionPoint, ctx);
+        if (insertedNode) {
+          insertionPoint = insertedNode.nextSibling;
+        }
+      }
+      while (insertionPoint && insertionPoint != endPoint) {
+        const tempNode = insertionPoint;
+        insertionPoint = insertionPoint.nextSibling;
+        removeNode(ctx, tempNode);
+      }
+    }
+    function createNode(oldParent, newChild, insertionPoint, ctx) {
+      if (ctx.callbacks.beforeNodeAdded(newChild) === false) return null;
+      if (ctx.idMap.has(newChild)) {
+        const newEmptyChild = document.createElement(newChild.tagName);
+        oldParent.insertBefore(newEmptyChild, insertionPoint);
+        morphNode(newEmptyChild, newChild, ctx);
+        ctx.callbacks.afterNodeAdded(newEmptyChild);
+        return newEmptyChild;
+      } else {
+        const newClonedChild = document.importNode(newChild, true);
+        oldParent.insertBefore(newClonedChild, insertionPoint);
+        ctx.callbacks.afterNodeAdded(newClonedChild);
+        return newClonedChild;
+      }
+    }
+    const findBestMatch = function() {
+      function findBestMatch(ctx, node, startPoint, endPoint) {
+        let softMatch = null;
+        let nextSibling = node.nextSibling;
+        let siblingSoftMatchCount = 0;
+        let cursor = startPoint;
+        while (cursor && cursor != endPoint) {
+          if (isSoftMatch(cursor, node)) {
+            if (isIdSetMatch(ctx, cursor, node)) {
+              return cursor;
+            }
+            if (softMatch === null) {
+              if (!ctx.idMap.has(cursor)) {
+                softMatch = cursor;
+              }
+            }
+          }
+          if (softMatch === null && nextSibling && isSoftMatch(cursor, nextSibling)) {
+            siblingSoftMatchCount++;
+            nextSibling = nextSibling.nextSibling;
+            if (siblingSoftMatchCount >= 2) {
+              softMatch = undefined;
+            }
+          }
+          if (cursor.contains(document.activeElement)) break;
+          cursor = cursor.nextSibling;
+        }
+        return softMatch || null;
+      }
+      function isIdSetMatch(ctx, oldNode, newNode) {
+        let oldSet = ctx.idMap.get(oldNode);
+        let newSet = ctx.idMap.get(newNode);
+        if (!newSet || !oldSet) return false;
+        for (const id of oldSet) {
+          if (newSet.has(id)) {
+            return true;
+          }
+        }
+        return false;
+      }
+      function isSoftMatch(oldNode, newNode) {
+        const oldElt = oldNode;
+        const newElt = newNode;
+        return oldElt.nodeType === newElt.nodeType && oldElt.tagName === newElt.tagName && (!oldElt.id || oldElt.id === newElt.id);
+      }
+      return findBestMatch;
+    }();
+    function removeNode(ctx, node) {
+      if (ctx.idMap.has(node)) {
+        moveBefore(ctx.pantry, node, null);
+      } else {
+        if (ctx.callbacks.beforeNodeRemoved(node) === false) return;
+        node.parentNode?.removeChild(node);
+        ctx.callbacks.afterNodeRemoved(node);
+      }
+    }
+    function removeNodesBetween(ctx, startInclusive, endExclusive) {
+      let cursor = startInclusive;
+      while (cursor && cursor !== endExclusive) {
+        let tempNode = cursor;
+        cursor = cursor.nextSibling;
+        removeNode(ctx, tempNode);
+      }
+      return cursor;
+    }
+    function moveBeforeById(parentNode, id, after, ctx) {
+      const target = ctx.target.querySelector(`#${id}`) || ctx.pantry.querySelector(`#${id}`);
+      removeElementFromAncestorsIdMaps(target, ctx);
+      moveBefore(parentNode, target, after);
+      return target;
+    }
+    function removeElementFromAncestorsIdMaps(element, ctx) {
+      const id = element.id;
+      while (element = element.parentNode) {
+        let idSet = ctx.idMap.get(element);
+        if (idSet) {
+          idSet.delete(id);
+          if (!idSet.size) {
+            ctx.idMap.delete(element);
+          }
+        }
+      }
+    }
+    function moveBefore(parentNode, element, after) {
+      if (parentNode.moveBefore) {
+        try {
+          parentNode.moveBefore(element, after);
+        } catch (e) {
+          parentNode.insertBefore(element, after);
+        }
+      } else {
+        parentNode.insertBefore(element, after);
+      }
+    }
+    return morphChildren;
+  }();
+  const morphNode = function() {
+    function morphNode(oldNode, newContent, ctx) {
+      if (ctx.ignoreActive && oldNode === document.activeElement) {
+        return null;
+      }
+      if (ctx.callbacks.beforeNodeMorphed(oldNode, newContent) === false) {
+        return oldNode;
+      }
+      if (oldNode instanceof HTMLHeadElement && ctx.head.ignore) ; else if (oldNode instanceof HTMLHeadElement && ctx.head.style !== "morph") {
+        handleHeadElement(oldNode, newContent, ctx);
+      } else {
+        morphAttributes(oldNode, newContent, ctx);
+        if (!ignoreValueOfActiveElement(oldNode, ctx)) {
+          morphChildren(ctx, oldNode, newContent);
+        }
+      }
+      ctx.callbacks.afterNodeMorphed(oldNode, newContent);
+      return oldNode;
+    }
+    function morphAttributes(oldNode, newNode, ctx) {
+      let type = newNode.nodeType;
+      if (type === 1) {
+        const oldElt = oldNode;
+        const newElt = newNode;
+        const oldAttributes = oldElt.attributes;
+        const newAttributes = newElt.attributes;
+        for (const newAttribute of newAttributes) {
+          if (ignoreAttribute(newAttribute.name, oldElt, "update", ctx)) {
+            continue;
+          }
+          if (oldElt.getAttribute(newAttribute.name) !== newAttribute.value) {
+            oldElt.setAttribute(newAttribute.name, newAttribute.value);
+          }
+        }
+        for (let i = oldAttributes.length - 1; 0 <= i; i--) {
+          const oldAttribute = oldAttributes[i];
+          if (!oldAttribute) continue;
+          if (!newElt.hasAttribute(oldAttribute.name)) {
+            if (ignoreAttribute(oldAttribute.name, oldElt, "remove", ctx)) {
+              continue;
+            }
+            oldElt.removeAttribute(oldAttribute.name);
+          }
+        }
+        if (!ignoreValueOfActiveElement(oldElt, ctx)) {
+          syncInputValue(oldElt, newElt, ctx);
+        }
+      }
+      if (type === 8 || type === 3) {
+        if (oldNode.nodeValue !== newNode.nodeValue) {
+          oldNode.nodeValue = newNode.nodeValue;
+        }
+      }
+    }
+    function syncInputValue(oldElement, newElement, ctx) {
+      if (oldElement instanceof HTMLInputElement && newElement instanceof HTMLInputElement && newElement.type !== "file") {
+        let newValue = newElement.value;
+        let oldValue = oldElement.value;
+        syncBooleanAttribute(oldElement, newElement, "checked", ctx);
+        syncBooleanAttribute(oldElement, newElement, "disabled", ctx);
+        if (!newElement.hasAttribute("value")) {
+          if (!ignoreAttribute("value", oldElement, "remove", ctx)) {
+            oldElement.value = "";
+            oldElement.removeAttribute("value");
+          }
+        } else if (oldValue !== newValue) {
+          if (!ignoreAttribute("value", oldElement, "update", ctx)) {
+            oldElement.setAttribute("value", newValue);
+            oldElement.value = newValue;
+          }
+        }
+      } else if (oldElement instanceof HTMLOptionElement && newElement instanceof HTMLOptionElement) {
+        syncBooleanAttribute(oldElement, newElement, "selected", ctx);
+      } else if (oldElement instanceof HTMLTextAreaElement && newElement instanceof HTMLTextAreaElement) {
+        let newValue = newElement.value;
+        let oldValue = oldElement.value;
+        if (ignoreAttribute("value", oldElement, "update", ctx)) {
+          return;
+        }
+        if (newValue !== oldValue) {
+          oldElement.value = newValue;
+        }
+        if (oldElement.firstChild && oldElement.firstChild.nodeValue !== newValue) {
+          oldElement.firstChild.nodeValue = newValue;
+        }
+      }
+    }
+    function syncBooleanAttribute(oldElement, newElement, attributeName, ctx) {
+      const newLiveValue = newElement[attributeName], oldLiveValue = oldElement[attributeName];
+      if (newLiveValue !== oldLiveValue) {
+        const ignoreUpdate = ignoreAttribute(attributeName, oldElement, "update", ctx);
+        if (!ignoreUpdate) {
+          oldElement[attributeName] = newElement[attributeName];
+        }
+        if (newLiveValue) {
+          if (!ignoreUpdate) {
+            oldElement.setAttribute(attributeName, "");
+          }
+        } else {
+          if (!ignoreAttribute(attributeName, oldElement, "remove", ctx)) {
+            oldElement.removeAttribute(attributeName);
+          }
+        }
+      }
+    }
+    function ignoreAttribute(attr, element, updateType, ctx) {
+      if (attr === "value" && ctx.ignoreActiveValue && element === document.activeElement) {
+        return true;
+      }
+      return ctx.callbacks.beforeAttributeUpdated(attr, element, updateType) === false;
+    }
+    function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
+      return !!ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
+    }
+    return morphNode;
+  }();
+  function withHeadBlocking(ctx, oldNode, newNode, callback) {
+    if (ctx.head.block) {
+      const oldHead = oldNode.querySelector("head");
+      const newHead = newNode.querySelector("head");
+      if (oldHead && newHead) {
+        const promises = handleHeadElement(oldHead, newHead, ctx);
+        return Promise.all(promises).then((() => {
+          const newCtx = Object.assign(ctx, {
+            head: {
+              block: false,
+              ignore: true
+            }
+          });
+          return callback(newCtx);
+        }));
+      }
+    }
+    return callback(ctx);
+  }
+  function handleHeadElement(oldHead, newHead, ctx) {
+    let added = [];
+    let removed = [];
+    let preserved = [];
+    let nodesToAppend = [];
+    let srcToNewHeadNodes = new Map;
+    for (const newHeadChild of newHead.children) {
+      srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
+    }
+    for (const currentHeadElt of oldHead.children) {
+      let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
+      let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
+      let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
+      if (inNewContent || isPreserved) {
+        if (isReAppended) {
+          removed.push(currentHeadElt);
+        } else {
+          srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
+          preserved.push(currentHeadElt);
+        }
+      } else {
+        if (ctx.head.style === "append") {
+          if (isReAppended) {
+            removed.push(currentHeadElt);
+            nodesToAppend.push(currentHeadElt);
+          }
+        } else {
+          if (ctx.head.shouldRemove(currentHeadElt) !== false) {
+            removed.push(currentHeadElt);
+          }
+        }
+      }
+    }
+    nodesToAppend.push(...srcToNewHeadNodes.values());
+    let promises = [];
+    for (const newNode of nodesToAppend) {
+      let newElt = document.createRange().createContextualFragment(newNode.outerHTML).firstChild;
+      if (ctx.callbacks.beforeNodeAdded(newElt) !== false) {
+        if ("href" in newElt && newElt.href || "src" in newElt && newElt.src) {
+          let resolve;
+          let promise = new Promise((function(_resolve) {
+            resolve = _resolve;
+          }));
+          newElt.addEventListener("load", (function() {
+            resolve();
+          }));
+          promises.push(promise);
+        }
+        oldHead.appendChild(newElt);
+        ctx.callbacks.afterNodeAdded(newElt);
+        added.push(newElt);
+      }
+    }
+    for (const removedElement of removed) {
+      if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
+        oldHead.removeChild(removedElement);
+        ctx.callbacks.afterNodeRemoved(removedElement);
+      }
+    }
+    ctx.head.afterHeadMorphed(oldHead, {
+      added: added,
+      kept: preserved,
+      removed: removed
+    });
+    return promises;
+  }
+  const createMorphContext = function() {
+    function createMorphContext(oldNode, newContent, config) {
+      const {persistentIds: persistentIds, idMap: idMap} = createIdMaps(oldNode, newContent);
+      const mergedConfig = mergeDefaults(config);
+      const morphStyle = mergedConfig.morphStyle || "outerHTML";
+      if (![ "innerHTML", "outerHTML" ].includes(morphStyle)) {
+        throw `Do not understand how to morph style ${morphStyle}`;
+      }
+      return {
+        target: oldNode,
+        newContent: newContent,
+        config: mergedConfig,
+        morphStyle: morphStyle,
+        ignoreActive: mergedConfig.ignoreActive,
+        ignoreActiveValue: mergedConfig.ignoreActiveValue,
+        restoreFocus: mergedConfig.restoreFocus,
+        idMap: idMap,
+        persistentIds: persistentIds,
+        pantry: createPantry(),
+        callbacks: mergedConfig.callbacks,
+        head: mergedConfig.head
+      };
+    }
+    function mergeDefaults(config) {
+      let finalConfig = Object.assign({}, defaults);
+      Object.assign(finalConfig, config);
+      finalConfig.callbacks = Object.assign({}, defaults.callbacks, config.callbacks);
+      finalConfig.head = Object.assign({}, defaults.head, config.head);
+      return finalConfig;
+    }
+    function createPantry() {
+      const pantry = document.createElement("div");
+      pantry.hidden = true;
+      document.body.insertAdjacentElement("afterend", pantry);
+      return pantry;
+    }
+    function findIdElements(root) {
+      let elements = Array.from(root.querySelectorAll("[id]"));
+      if (root.id) {
+        elements.push(root);
+      }
+      return elements;
+    }
+    function populateIdMapWithTree(idMap, persistentIds, root, elements) {
+      for (const elt of elements) {
+        if (persistentIds.has(elt.id)) {
+          let current = elt;
+          while (current) {
+            let idSet = idMap.get(current);
+            if (idSet == null) {
+              idSet = new Set;
+              idMap.set(current, idSet);
+            }
+            idSet.add(elt.id);
+            if (current === root) break;
+            current = current.parentElement;
+          }
+        }
+      }
+    }
+    function createIdMaps(oldContent, newContent) {
+      const oldIdElements = findIdElements(oldContent);
+      const newIdElements = findIdElements(newContent);
+      const persistentIds = createPersistentIds(oldIdElements, newIdElements);
+      let idMap = new Map;
+      populateIdMapWithTree(idMap, persistentIds, oldContent, oldIdElements);
+      const newRoot = newContent.__idiomorphRoot || newContent;
+      populateIdMapWithTree(idMap, persistentIds, newRoot, newIdElements);
+      return {
+        persistentIds: persistentIds,
+        idMap: idMap
+      };
+    }
+    function createPersistentIds(oldIdElements, newIdElements) {
+      let duplicateIds = new Set;
+      let oldIdTagNameMap = new Map;
+      for (const {id: id, tagName: tagName} of oldIdElements) {
+        if (oldIdTagNameMap.has(id)) {
+          duplicateIds.add(id);
+        } else {
+          oldIdTagNameMap.set(id, tagName);
+        }
+      }
+      let persistentIds = new Set;
+      for (const {id: id, tagName: tagName} of newIdElements) {
+        if (persistentIds.has(id)) {
+          duplicateIds.add(id);
+        } else if (oldIdTagNameMap.get(id) === tagName) {
+          persistentIds.add(id);
+        }
+      }
+      for (const id of duplicateIds) {
+        persistentIds.delete(id);
+      }
+      return persistentIds;
+    }
+    return createMorphContext;
+  }();
+  const {normalizeElement: normalizeElement, normalizeParent: normalizeParent} = function() {
+    const generatedByIdiomorph = new WeakSet;
+    function normalizeElement(content) {
+      if (content instanceof Document) {
+        return content.documentElement;
+      } else {
+        return content;
+      }
+    }
+    function normalizeParent(newContent) {
+      if (newContent == null) {
+        return document.createElement("div");
+      } else if (typeof newContent === "string") {
+        return normalizeParent(parseContent(newContent));
+      } else if (generatedByIdiomorph.has(newContent)) {
+        return newContent;
+      } else if (newContent instanceof Node) {
+        if (newContent.parentNode) {
+          return createDuckTypedParent(newContent);
+        } else {
+          const dummyParent = document.createElement("div");
+          dummyParent.append(newContent);
+          return dummyParent;
+        }
+      } else {
+        const dummyParent = document.createElement("div");
+        for (const elt of [ ...newContent ]) {
+          dummyParent.append(elt);
+        }
+        return dummyParent;
+      }
+    }
+    function createDuckTypedParent(newContent) {
+      return {
+        childNodes: [ newContent ],
+        querySelectorAll: s => {
+          const elements = newContent.querySelectorAll(s);
+          return newContent.matches(s) ? [ newContent, ...elements ] : elements;
+        },
+        insertBefore: (n, r) => newContent.parentNode.insertBefore(n, r),
+        moveBefore: (n, r) => newContent.parentNode.moveBefore(n, r),
+        get __idiomorphRoot() {
+          return newContent;
+        }
+      };
+    }
+    function parseContent(newContent) {
+      let parser = new DOMParser;
+      let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, "");
+      if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
+        let content = parser.parseFromString(newContent, "text/html");
+        if (contentWithSvgsRemoved.match(/<\/html>/)) {
+          generatedByIdiomorph.add(content);
+          return content;
+        } else {
+          let htmlElement = content.firstChild;
+          if (htmlElement) {
+            generatedByIdiomorph.add(htmlElement);
+          }
+          return htmlElement;
+        }
+      } else {
+        let responseDoc = parser.parseFromString("<body><template>" + newContent + "</template></body>", "text/html");
+        let content = responseDoc.body.querySelector("template").content;
+        generatedByIdiomorph.add(content);
+        return content;
+      }
+    }
+    return {
+      normalizeElement: normalizeElement,
+      normalizeParent: normalizeParent
+    };
+  }();
+  return {
+    morph: morph,
+    defaults: defaults
+  };
+}();
+
+function morphElements(currentElement, newElement, {callbacks: callbacks, ...options} = {}) {
+  Idiomorph.morph(currentElement, newElement, {
+    ...options,
+    callbacks: new DefaultIdiomorphCallbacks(callbacks)
+  });
+}
+
+function morphChildren(currentElement, newElement) {
+  morphElements(currentElement, newElement.childNodes, {
+    morphStyle: "innerHTML"
+  });
+}
+
+class DefaultIdiomorphCallbacks {
+  #beforeNodeMorphed;
+  constructor({beforeNodeMorphed: beforeNodeMorphed} = {}) {
+    this.#beforeNodeMorphed = beforeNodeMorphed || (() => true);
+  }
+  beforeNodeAdded=node => !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id));
+  beforeNodeMorphed=(currentElement, newElement) => {
+    if (currentElement instanceof Element) {
+      if (!currentElement.hasAttribute("data-turbo-permanent") && this.#beforeNodeMorphed(currentElement, newElement)) {
+        const event = dispatch("turbo:before-morph-element", {
+          cancelable: true,
+          target: currentElement,
+          detail: {
+            currentElement: currentElement,
+            newElement: newElement
+          }
+        });
+        return !event.defaultPrevented;
+      } else {
+        return false;
+      }
+    }
+  };
+  beforeAttributeUpdated=(attributeName, target, mutationType) => {
+    const event = dispatch("turbo:before-morph-attribute", {
+      cancelable: true,
+      target: target,
+      detail: {
+        attributeName: attributeName,
+        mutationType: mutationType
+      }
+    });
+    return !event.defaultPrevented;
+  };
+  beforeNodeRemoved=node => this.beforeNodeMorphed(node);
+  afterNodeMorphed=(currentElement, newElement) => {
+    if (currentElement instanceof Element) {
+      dispatch("turbo:morph-element", {
+        target: currentElement,
+        detail: {
+          currentElement: currentElement,
+          newElement: newElement
+        }
+      });
+    }
+  };
+}
+
+class MorphingFrameRenderer extends FrameRenderer {
+  static renderElement(currentElement, newElement) {
+    dispatch("turbo:before-frame-morph", {
+      target: currentElement,
+      detail: {
+        currentElement: currentElement,
+        newElement: newElement
+      }
+    });
+    morphChildren(currentElement, newElement);
+  }
+  async preservingPermanentElements(callback) {
+    return await callback();
+  }
+}
+
+class ProgressBar {
+  static animationDuration=300;
+  static get defaultCSS() {
+    return unindent`
       .turbo-progress-bar {
         position: fixed;
         display: block;
@@ -1714,8 +2440,9 @@ class ProgressBar {
     const element = document.createElement("style");
     element.type = "text/css";
     element.textContent = ProgressBar.defaultCSS;
-    if (this.cspNonce) {
-      element.nonce = this.cspNonce;
+    const cspNonce = getCspNonce();
+    if (cspNonce) {
+      element.nonce = cspNonce;
     }
     return element;
   }
@@ -1724,9 +2451,6 @@ class ProgressBar {
     element.className = "turbo-progress-bar";
     return element;
   }
-  get cspNonce() {
-    return getMetaContent("csp-nonce");
-  }
 }
 
 class HeadSnapshot extends Snapshot {
@@ -2229,16 +2953,6 @@ class Visit {
       ...this.timingMetrics
     };
   }
-  getHistoryMethodForAction(action) {
-    switch (action) {
-     case "replace":
-      return history.replaceState;
-
-     case "advance":
-     case "restore":
-      return history.pushState;
-    }
-  }
   hasPreloadedResponse() {
     return typeof this.response == "object";
   }
@@ -2259,7 +2973,9 @@ class Visit {
   }
   async render(callback) {
     this.cancelRender();
-    this.frame = await nextRepaint();
+    await new Promise((resolve => {
+      this.frame = document.visibilityState === "hidden" ? setTimeout((() => resolve()), 0) : requestAnimationFrame((() => resolve()));
+    }));
     await callback();
     delete this.frame;
   }
@@ -2339,6 +3055,9 @@ class BrowserAdapter {
     this.hideVisitProgressBar();
   }
   visitRendered(_visit) {}
+  linkPrefetchingIsEnabledForLocation(location) {
+    return true;
+  }
   formSubmissionStarted(_formSubmission) {
     this.progressBar.setValue(0);
     this.showFormProgressBarAfterDelay();
@@ -2631,7 +3350,7 @@ class LinkPrefetchObserver {
     this.#prefetchedLink = null;
   };
   #tryToUsePrefetchedRequest=event => {
-    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "get") {
+    if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "GET") {
       const cached = prefetchCache.get(event.detail.url.toString());
       if (cached) {
         event.detail.fetchRequest = cached;
@@ -2795,11 +3514,18 @@ class Navigator {
       this.adapter.formSubmissionFinished(formSubmission);
     }
   }
+  linkPrefetchingIsEnabledForLocation(location) {
+    if (typeof this.adapter.linkPrefetchingIsEnabledForLocation === "function") {
+      return this.adapter.linkPrefetchingIsEnabledForLocation(location);
+    }
+    return true;
+  }
   visitStarted(visit) {
     this.delegate.visitStarted(visit);
   }
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit);
+    delete this.currentVisit;
   }
   locationWithActionIsSamePage(location, action) {
     const anchor = getAnchor(location);
@@ -2816,819 +3542,279 @@ class Navigator {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
-  #getActionForFormSubmission(formSubmission, fetchResponse) {
-    const {submitter: submitter, formElement: formElement} = formSubmission;
-    return getVisitAction(submitter, formElement) || this.#getDefaultAction(fetchResponse);
-  }
-  #getDefaultAction(fetchResponse) {
-    const sameLocationRedirect = fetchResponse.redirected && fetchResponse.location.href === this.location?.href;
-    return sameLocationRedirect ? "replace" : "advance";
-  }
-}
-
-const PageStage = {
-  initial: 0,
-  loading: 1,
-  interactive: 2,
-  complete: 3
-};
-
-class PageObserver {
-  stage=PageStage.initial;
-  started=false;
-  constructor(delegate) {
-    this.delegate = delegate;
-  }
-  start() {
-    if (!this.started) {
-      if (this.stage == PageStage.initial) {
-        this.stage = PageStage.loading;
-      }
-      document.addEventListener("readystatechange", this.interpretReadyState, false);
-      addEventListener("pagehide", this.pageWillUnload, false);
-      this.started = true;
-    }
-  }
-  stop() {
-    if (this.started) {
-      document.removeEventListener("readystatechange", this.interpretReadyState, false);
-      removeEventListener("pagehide", this.pageWillUnload, false);
-      this.started = false;
-    }
-  }
-  interpretReadyState=() => {
-    const {readyState: readyState} = this;
-    if (readyState == "interactive") {
-      this.pageIsInteractive();
-    } else if (readyState == "complete") {
-      this.pageIsComplete();
-    }
-  };
-  pageIsInteractive() {
-    if (this.stage == PageStage.loading) {
-      this.stage = PageStage.interactive;
-      this.delegate.pageBecameInteractive();
-    }
-  }
-  pageIsComplete() {
-    this.pageIsInteractive();
-    if (this.stage == PageStage.interactive) {
-      this.stage = PageStage.complete;
-      this.delegate.pageLoaded();
-    }
-  }
-  pageWillUnload=() => {
-    this.delegate.pageWillUnload();
-  };
-  get readyState() {
-    return document.readyState;
-  }
-}
-
-class ScrollObserver {
-  started=false;
-  constructor(delegate) {
-    this.delegate = delegate;
-  }
-  start() {
-    if (!this.started) {
-      addEventListener("scroll", this.onScroll, false);
-      this.onScroll();
-      this.started = true;
-    }
-  }
-  stop() {
-    if (this.started) {
-      removeEventListener("scroll", this.onScroll, false);
-      this.started = false;
-    }
-  }
-  onScroll=() => {
-    this.updatePosition({
-      x: window.pageXOffset,
-      y: window.pageYOffset
-    });
-  };
-  updatePosition(position) {
-    this.delegate.scrollPositionChanged(position);
-  }
-}
-
-class StreamMessageRenderer {
-  render({fragment: fragment}) {
-    Bardo.preservingPermanentElements(this, getPermanentElementMapForFragment(fragment), (() => {
-      withAutofocusFromFragment(fragment, (() => {
-        withPreservedFocus((() => {
-          document.documentElement.appendChild(fragment);
-        }));
-      }));
-    }));
-  }
-  enteringBardo(currentPermanentElement, newPermanentElement) {
-    newPermanentElement.replaceWith(currentPermanentElement.cloneNode(true));
-  }
-  leavingBardo() {}
-}
-
-function getPermanentElementMapForFragment(fragment) {
-  const permanentElementsInDocument = queryPermanentElementsAll(document.documentElement);
-  const permanentElementMap = {};
-  for (const permanentElementInDocument of permanentElementsInDocument) {
-    const {id: id} = permanentElementInDocument;
-    for (const streamElement of fragment.querySelectorAll("turbo-stream")) {
-      const elementInStream = getPermanentElementById(streamElement.templateElement.content, id);
-      if (elementInStream) {
-        permanentElementMap[id] = [ permanentElementInDocument, elementInStream ];
-      }
-    }
-  }
-  return permanentElementMap;
-}
-
-async function withAutofocusFromFragment(fragment, callback) {
-  const generatedID = `turbo-stream-autofocus-${uuid()}`;
-  const turboStreams = fragment.querySelectorAll("turbo-stream");
-  const elementWithAutofocus = firstAutofocusableElementInStreams(turboStreams);
-  let willAutofocusId = null;
-  if (elementWithAutofocus) {
-    if (elementWithAutofocus.id) {
-      willAutofocusId = elementWithAutofocus.id;
-    } else {
-      willAutofocusId = generatedID;
-    }
-    elementWithAutofocus.id = willAutofocusId;
-  }
-  callback();
-  await nextRepaint();
-  const hasNoActiveElement = document.activeElement == null || document.activeElement == document.body;
-  if (hasNoActiveElement && willAutofocusId) {
-    const elementToAutofocus = document.getElementById(willAutofocusId);
-    if (elementIsFocusable(elementToAutofocus)) {
-      elementToAutofocus.focus();
-    }
-    if (elementToAutofocus && elementToAutofocus.id == generatedID) {
-      elementToAutofocus.removeAttribute("id");
-    }
-  }
-}
-
-async function withPreservedFocus(callback) {
-  const [activeElementBeforeRender, activeElementAfterRender] = await around(callback, (() => document.activeElement));
-  const restoreFocusTo = activeElementBeforeRender && activeElementBeforeRender.id;
-  if (restoreFocusTo) {
-    const elementToFocus = document.getElementById(restoreFocusTo);
-    if (elementIsFocusable(elementToFocus) && elementToFocus != activeElementAfterRender) {
-      elementToFocus.focus();
-    }
-  }
-}
-
-function firstAutofocusableElementInStreams(nodeListOfStreamElements) {
-  for (const streamElement of nodeListOfStreamElements) {
-    const elementWithAutofocus = queryAutofocusableElement(streamElement.templateElement.content);
-    if (elementWithAutofocus) return elementWithAutofocus;
-  }
-  return null;
-}
-
-class StreamObserver {
-  sources=new Set;
-  #started=false;
-  constructor(delegate) {
-    this.delegate = delegate;
-  }
-  start() {
-    if (!this.#started) {
-      this.#started = true;
-      addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
-    }
-  }
-  stop() {
-    if (this.#started) {
-      this.#started = false;
-      removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
-    }
-  }
-  connectStreamSource(source) {
-    if (!this.streamSourceIsConnected(source)) {
-      this.sources.add(source);
-      source.addEventListener("message", this.receiveMessageEvent, false);
-    }
-  }
-  disconnectStreamSource(source) {
-    if (this.streamSourceIsConnected(source)) {
-      this.sources.delete(source);
-      source.removeEventListener("message", this.receiveMessageEvent, false);
-    }
-  }
-  streamSourceIsConnected(source) {
-    return this.sources.has(source);
-  }
-  inspectFetchResponse=event => {
-    const response = fetchResponseFromEvent(event);
-    if (response && fetchResponseIsStream(response)) {
-      event.preventDefault();
-      this.receiveMessageResponse(response);
-    }
-  };
-  receiveMessageEvent=event => {
-    if (this.#started && typeof event.data == "string") {
-      this.receiveMessageHTML(event.data);
-    }
-  };
-  async receiveMessageResponse(response) {
-    const html = await response.responseHTML;
-    if (html) {
-      this.receiveMessageHTML(html);
-    }
-  }
-  receiveMessageHTML(html) {
-    this.delegate.receivedMessageFromStream(StreamMessage.wrap(html));
+  #getActionForFormSubmission(formSubmission, fetchResponse) {
+    const {submitter: submitter, formElement: formElement} = formSubmission;
+    return getVisitAction(submitter, formElement) || this.#getDefaultAction(fetchResponse);
   }
-}
-
-function fetchResponseFromEvent(event) {
-  const fetchResponse = event.detail?.fetchResponse;
-  if (fetchResponse instanceof FetchResponse) {
-    return fetchResponse;
+  #getDefaultAction(fetchResponse) {
+    const sameLocationRedirect = fetchResponse.redirected && fetchResponse.location.href === this.location?.href;
+    return sameLocationRedirect ? "replace" : "advance";
   }
 }
 
-function fetchResponseIsStream(response) {
-  const contentType = response.contentType ?? "";
-  return contentType.startsWith(StreamMessage.contentType);
-}
+const PageStage = {
+  initial: 0,
+  loading: 1,
+  interactive: 2,
+  complete: 3
+};
 
-class ErrorRenderer extends Renderer {
-  static renderElement(currentElement, newElement) {
-    const {documentElement: documentElement, body: body} = document;
-    documentElement.replaceChild(newElement, body);
-  }
-  async render() {
-    this.replaceHeadAndBody();
-    this.activateScriptElements();
-  }
-  replaceHeadAndBody() {
-    const {documentElement: documentElement, head: head} = document;
-    documentElement.replaceChild(this.newHead, head);
-    this.renderElement(this.currentElement, this.newElement);
+class PageObserver {
+  stage=PageStage.initial;
+  started=false;
+  constructor(delegate) {
+    this.delegate = delegate;
   }
-  activateScriptElements() {
-    for (const replaceableElement of this.scriptElements) {
-      const parentNode = replaceableElement.parentNode;
-      if (parentNode) {
-        const element = activateScriptElement(replaceableElement);
-        parentNode.replaceChild(element, replaceableElement);
+  start() {
+    if (!this.started) {
+      if (this.stage == PageStage.initial) {
+        this.stage = PageStage.loading;
       }
+      document.addEventListener("readystatechange", this.interpretReadyState, false);
+      addEventListener("pagehide", this.pageWillUnload, false);
+      this.started = true;
     }
   }
-  get newHead() {
-    return this.newSnapshot.headSnapshot.element;
-  }
-  get scriptElements() {
-    return document.documentElement.querySelectorAll("script");
+  stop() {
+    if (this.started) {
+      document.removeEventListener("readystatechange", this.interpretReadyState, false);
+      removeEventListener("pagehide", this.pageWillUnload, false);
+      this.started = false;
+    }
   }
-}
-
-var Idiomorph = function() {
-  let EMPTY_SET = new Set;
-  let defaults = {
-    morphStyle: "outerHTML",
-    callbacks: {
-      beforeNodeAdded: noOp,
-      afterNodeAdded: noOp,
-      beforeNodeMorphed: noOp,
-      afterNodeMorphed: noOp,
-      beforeNodeRemoved: noOp,
-      afterNodeRemoved: noOp,
-      beforeAttributeUpdated: noOp
-    },
-    head: {
-      style: "merge",
-      shouldPreserve: function(elt) {
-        return elt.getAttribute("im-preserve") === "true";
-      },
-      shouldReAppend: function(elt) {
-        return elt.getAttribute("im-re-append") === "true";
-      },
-      shouldRemove: noOp,
-      afterHeadMorphed: noOp
+  interpretReadyState=() => {
+    const {readyState: readyState} = this;
+    if (readyState == "interactive") {
+      this.pageIsInteractive();
+    } else if (readyState == "complete") {
+      this.pageIsComplete();
     }
   };
-  function morph(oldNode, newContent, config = {}) {
-    if (oldNode instanceof Document) {
-      oldNode = oldNode.documentElement;
-    }
-    if (typeof newContent === "string") {
-      newContent = parseContent(newContent);
+  pageIsInteractive() {
+    if (this.stage == PageStage.loading) {
+      this.stage = PageStage.interactive;
+      this.delegate.pageBecameInteractive();
     }
-    let normalizedContent = normalizeContent(newContent);
-    let ctx = createMorphContext(oldNode, normalizedContent, config);
-    return morphNormalizedContent(oldNode, normalizedContent, ctx);
   }
-  function morphNormalizedContent(oldNode, normalizedNewContent, ctx) {
-    if (ctx.head.block) {
-      let oldHead = oldNode.querySelector("head");
-      let newHead = normalizedNewContent.querySelector("head");
-      if (oldHead && newHead) {
-        let promises = handleHeadElement(newHead, oldHead, ctx);
-        Promise.all(promises).then((function() {
-          morphNormalizedContent(oldNode, normalizedNewContent, Object.assign(ctx, {
-            head: {
-              block: false,
-              ignore: true
-            }
-          }));
-        }));
-        return;
-      }
-    }
-    if (ctx.morphStyle === "innerHTML") {
-      morphChildren(normalizedNewContent, oldNode, ctx);
-      return oldNode.children;
-    } else if (ctx.morphStyle === "outerHTML" || ctx.morphStyle == null) {
-      let bestMatch = findBestNodeMatch(normalizedNewContent, oldNode, ctx);
-      let previousSibling = bestMatch?.previousSibling;
-      let nextSibling = bestMatch?.nextSibling;
-      let morphedNode = morphOldNodeTo(oldNode, bestMatch, ctx);
-      if (bestMatch) {
-        return insertSiblings(previousSibling, morphedNode, nextSibling);
-      } else {
-        return [];
-      }
-    } else {
-      throw "Do not understand how to morph style " + ctx.morphStyle;
+  pageIsComplete() {
+    this.pageIsInteractive();
+    if (this.stage == PageStage.interactive) {
+      this.stage = PageStage.complete;
+      this.delegate.pageLoaded();
     }
   }
-  function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-    return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
+  pageWillUnload=() => {
+    this.delegate.pageWillUnload();
+  };
+  get readyState() {
+    return document.readyState;
   }
-  function morphOldNodeTo(oldNode, newContent, ctx) {
-    if (ctx.ignoreActive && oldNode === document.activeElement) ; else if (newContent == null) {
-      if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return oldNode;
-      oldNode.remove();
-      ctx.callbacks.afterNodeRemoved(oldNode);
-      return null;
-    } else if (!isSoftMatch(oldNode, newContent)) {
-      if (ctx.callbacks.beforeNodeRemoved(oldNode) === false) return oldNode;
-      if (ctx.callbacks.beforeNodeAdded(newContent) === false) return oldNode;
-      oldNode.parentElement.replaceChild(newContent, oldNode);
-      ctx.callbacks.afterNodeAdded(newContent);
-      ctx.callbacks.afterNodeRemoved(oldNode);
-      return newContent;
-    } else {
-      if (ctx.callbacks.beforeNodeMorphed(oldNode, newContent) === false) return oldNode;
-      if (oldNode instanceof HTMLHeadElement && ctx.head.ignore) ; else if (oldNode instanceof HTMLHeadElement && ctx.head.style !== "morph") {
-        handleHeadElement(newContent, oldNode, ctx);
-      } else {
-        syncNodeFrom(newContent, oldNode, ctx);
-        if (!ignoreValueOfActiveElement(oldNode, ctx)) {
-          morphChildren(newContent, oldNode, ctx);
-        }
-      }
-      ctx.callbacks.afterNodeMorphed(oldNode, newContent);
-      return oldNode;
-    }
+}
+
+class ScrollObserver {
+  started=false;
+  constructor(delegate) {
+    this.delegate = delegate;
   }
-  function morphChildren(newParent, oldParent, ctx) {
-    let nextNewChild = newParent.firstChild;
-    let insertionPoint = oldParent.firstChild;
-    let newChild;
-    while (nextNewChild) {
-      newChild = nextNewChild;
-      nextNewChild = newChild.nextSibling;
-      if (insertionPoint == null) {
-        if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
-        oldParent.appendChild(newChild);
-        ctx.callbacks.afterNodeAdded(newChild);
-        removeIdsFromConsideration(ctx, newChild);
-        continue;
-      }
-      if (isIdSetMatch(newChild, insertionPoint, ctx)) {
-        morphOldNodeTo(insertionPoint, newChild, ctx);
-        insertionPoint = insertionPoint.nextSibling;
-        removeIdsFromConsideration(ctx, newChild);
-        continue;
-      }
-      let idSetMatch = findIdSetMatch(newParent, oldParent, newChild, insertionPoint, ctx);
-      if (idSetMatch) {
-        insertionPoint = removeNodesBetween(insertionPoint, idSetMatch, ctx);
-        morphOldNodeTo(idSetMatch, newChild, ctx);
-        removeIdsFromConsideration(ctx, newChild);
-        continue;
-      }
-      let softMatch = findSoftMatch(newParent, oldParent, newChild, insertionPoint, ctx);
-      if (softMatch) {
-        insertionPoint = removeNodesBetween(insertionPoint, softMatch, ctx);
-        morphOldNodeTo(softMatch, newChild, ctx);
-        removeIdsFromConsideration(ctx, newChild);
-        continue;
-      }
-      if (ctx.callbacks.beforeNodeAdded(newChild) === false) return;
-      oldParent.insertBefore(newChild, insertionPoint);
-      ctx.callbacks.afterNodeAdded(newChild);
-      removeIdsFromConsideration(ctx, newChild);
-    }
-    while (insertionPoint !== null) {
-      let tempNode = insertionPoint;
-      insertionPoint = insertionPoint.nextSibling;
-      removeNode(tempNode, ctx);
+  start() {
+    if (!this.started) {
+      addEventListener("scroll", this.onScroll, false);
+      this.onScroll();
+      this.started = true;
     }
   }
-  function ignoreAttribute(attr, to, updateType, ctx) {
-    if (attr === "value" && ctx.ignoreActiveValue && to === document.activeElement) {
-      return true;
+  stop() {
+    if (this.started) {
+      removeEventListener("scroll", this.onScroll, false);
+      this.started = false;
     }
-    return ctx.callbacks.beforeAttributeUpdated(attr, to, updateType) === false;
   }
-  function syncNodeFrom(from, to, ctx) {
-    let type = from.nodeType;
-    if (type === 1) {
-      const fromAttributes = from.attributes;
-      const toAttributes = to.attributes;
-      for (const fromAttribute of fromAttributes) {
-        if (ignoreAttribute(fromAttribute.name, to, "update", ctx)) {
-          continue;
-        }
-        if (to.getAttribute(fromAttribute.name) !== fromAttribute.value) {
-          to.setAttribute(fromAttribute.name, fromAttribute.value);
-        }
-      }
-      for (let i = toAttributes.length - 1; 0 <= i; i--) {
-        const toAttribute = toAttributes[i];
-        if (ignoreAttribute(toAttribute.name, to, "remove", ctx)) {
-          continue;
-        }
-        if (!from.hasAttribute(toAttribute.name)) {
-          to.removeAttribute(toAttribute.name);
-        }
-      }
-    }
-    if (type === 8 || type === 3) {
-      if (to.nodeValue !== from.nodeValue) {
-        to.nodeValue = from.nodeValue;
-      }
-    }
-    if (!ignoreValueOfActiveElement(to, ctx)) {
-      syncInputValue(from, to, ctx);
-    }
+  onScroll=() => {
+    this.updatePosition({
+      x: window.pageXOffset,
+      y: window.pageYOffset
+    });
+  };
+  updatePosition(position) {
+    this.delegate.scrollPositionChanged(position);
   }
-  function syncBooleanAttribute(from, to, attributeName, ctx) {
-    if (from[attributeName] !== to[attributeName]) {
-      let ignoreUpdate = ignoreAttribute(attributeName, to, "update", ctx);
-      if (!ignoreUpdate) {
-        to[attributeName] = from[attributeName];
-      }
-      if (from[attributeName]) {
-        if (!ignoreUpdate) {
-          to.setAttribute(attributeName, from[attributeName]);
-        }
-      } else {
-        if (!ignoreAttribute(attributeName, to, "remove", ctx)) {
-          to.removeAttribute(attributeName);
-        }
-      }
-    }
+}
+
+class StreamMessageRenderer {
+  render({fragment: fragment}) {
+    Bardo.preservingPermanentElements(this, getPermanentElementMapForFragment(fragment), (() => {
+      withAutofocusFromFragment(fragment, (() => {
+        withPreservedFocus((() => {
+          document.documentElement.appendChild(fragment);
+        }));
+      }));
+    }));
   }
-  function syncInputValue(from, to, ctx) {
-    if (from instanceof HTMLInputElement && to instanceof HTMLInputElement && from.type !== "file") {
-      let fromValue = from.value;
-      let toValue = to.value;
-      syncBooleanAttribute(from, to, "checked", ctx);
-      syncBooleanAttribute(from, to, "disabled", ctx);
-      if (!from.hasAttribute("value")) {
-        if (!ignoreAttribute("value", to, "remove", ctx)) {
-          to.value = "";
-          to.removeAttribute("value");
-        }
-      } else if (fromValue !== toValue) {
-        if (!ignoreAttribute("value", to, "update", ctx)) {
-          to.setAttribute("value", fromValue);
-          to.value = fromValue;
-        }
-      }
-    } else if (from instanceof HTMLOptionElement) {
-      syncBooleanAttribute(from, to, "selected", ctx);
-    } else if (from instanceof HTMLTextAreaElement && to instanceof HTMLTextAreaElement) {
-      let fromValue = from.value;
-      let toValue = to.value;
-      if (ignoreAttribute("value", to, "update", ctx)) {
-        return;
-      }
-      if (fromValue !== toValue) {
-        to.value = fromValue;
-      }
-      if (to.firstChild && to.firstChild.nodeValue !== fromValue) {
-        to.firstChild.nodeValue = fromValue;
-      }
-    }
+  enteringBardo(currentPermanentElement, newPermanentElement) {
+    newPermanentElement.replaceWith(currentPermanentElement.cloneNode(true));
   }
-  function handleHeadElement(newHeadTag, currentHead, ctx) {
-    let added = [];
-    let removed = [];
-    let preserved = [];
-    let nodesToAppend = [];
-    let headMergeStyle = ctx.head.style;
-    let srcToNewHeadNodes = new Map;
-    for (const newHeadChild of newHeadTag.children) {
-      srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
-    }
-    for (const currentHeadElt of currentHead.children) {
-      let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
-      let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
-      let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
-      if (inNewContent || isPreserved) {
-        if (isReAppended) {
-          removed.push(currentHeadElt);
-        } else {
-          srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
-          preserved.push(currentHeadElt);
-        }
-      } else {
-        if (headMergeStyle === "append") {
-          if (isReAppended) {
-            removed.push(currentHeadElt);
-            nodesToAppend.push(currentHeadElt);
-          }
-        } else {
-          if (ctx.head.shouldRemove(currentHeadElt) !== false) {
-            removed.push(currentHeadElt);
-          }
-        }
-      }
-    }
-    nodesToAppend.push(...srcToNewHeadNodes.values());
-    let promises = [];
-    for (const newNode of nodesToAppend) {
-      let newElt = document.createRange().createContextualFragment(newNode.outerHTML).firstChild;
-      if (ctx.callbacks.beforeNodeAdded(newElt) !== false) {
-        if (newElt.href || newElt.src) {
-          let resolve = null;
-          let promise = new Promise((function(_resolve) {
-            resolve = _resolve;
-          }));
-          newElt.addEventListener("load", (function() {
-            resolve();
-          }));
-          promises.push(promise);
-        }
-        currentHead.appendChild(newElt);
-        ctx.callbacks.afterNodeAdded(newElt);
-        added.push(newElt);
-      }
-    }
-    for (const removedElement of removed) {
-      if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
-        currentHead.removeChild(removedElement);
-        ctx.callbacks.afterNodeRemoved(removedElement);
+  leavingBardo() {}
+}
+
+function getPermanentElementMapForFragment(fragment) {
+  const permanentElementsInDocument = queryPermanentElementsAll(document.documentElement);
+  const permanentElementMap = {};
+  for (const permanentElementInDocument of permanentElementsInDocument) {
+    const {id: id} = permanentElementInDocument;
+    for (const streamElement of fragment.querySelectorAll("turbo-stream")) {
+      const elementInStream = getPermanentElementById(streamElement.templateElement.content, id);
+      if (elementInStream) {
+        permanentElementMap[id] = [ permanentElementInDocument, elementInStream ];
       }
     }
-    ctx.head.afterHeadMorphed(currentHead, {
-      added: added,
-      kept: preserved,
-      removed: removed
-    });
-    return promises;
   }
-  function noOp() {}
-  function mergeDefaults(config) {
-    let finalConfig = {};
-    Object.assign(finalConfig, defaults);
-    Object.assign(finalConfig, config);
-    finalConfig.callbacks = {};
-    Object.assign(finalConfig.callbacks, defaults.callbacks);
-    Object.assign(finalConfig.callbacks, config.callbacks);
-    finalConfig.head = {};
-    Object.assign(finalConfig.head, defaults.head);
-    Object.assign(finalConfig.head, config.head);
-    return finalConfig;
-  }
-  function createMorphContext(oldNode, newContent, config) {
-    config = mergeDefaults(config);
-    return {
-      target: oldNode,
-      newContent: newContent,
-      config: config,
-      morphStyle: config.morphStyle,
-      ignoreActive: config.ignoreActive,
-      ignoreActiveValue: config.ignoreActiveValue,
-      idMap: createIdMap(oldNode, newContent),
-      deadIds: new Set,
-      callbacks: config.callbacks,
-      head: config.head
-    };
+  return permanentElementMap;
+}
+
+async function withAutofocusFromFragment(fragment, callback) {
+  const generatedID = `turbo-stream-autofocus-${uuid()}`;
+  const turboStreams = fragment.querySelectorAll("turbo-stream");
+  const elementWithAutofocus = firstAutofocusableElementInStreams(turboStreams);
+  let willAutofocusId = null;
+  if (elementWithAutofocus) {
+    if (elementWithAutofocus.id) {
+      willAutofocusId = elementWithAutofocus.id;
+    } else {
+      willAutofocusId = generatedID;
+    }
+    elementWithAutofocus.id = willAutofocusId;
   }
-  function isIdSetMatch(node1, node2, ctx) {
-    if (node1 == null || node2 == null) {
-      return false;
+  callback();
+  await nextRepaint();
+  const hasNoActiveElement = document.activeElement == null || document.activeElement == document.body;
+  if (hasNoActiveElement && willAutofocusId) {
+    const elementToAutofocus = document.getElementById(willAutofocusId);
+    if (elementIsFocusable(elementToAutofocus)) {
+      elementToAutofocus.focus();
     }
-    if (node1.nodeType === node2.nodeType && node1.tagName === node2.tagName) {
-      if (node1.id !== "" && node1.id === node2.id) {
-        return true;
-      } else {
-        return getIdIntersectionCount(ctx, node1, node2) > 0;
-      }
+    if (elementToAutofocus && elementToAutofocus.id == generatedID) {
+      elementToAutofocus.removeAttribute("id");
     }
-    return false;
   }
-  function isSoftMatch(node1, node2) {
-    if (node1 == null || node2 == null) {
-      return false;
+}
+
+async function withPreservedFocus(callback) {
+  const [activeElementBeforeRender, activeElementAfterRender] = await around(callback, (() => document.activeElement));
+  const restoreFocusTo = activeElementBeforeRender && activeElementBeforeRender.id;
+  if (restoreFocusTo) {
+    const elementToFocus = document.getElementById(restoreFocusTo);
+    if (elementIsFocusable(elementToFocus) && elementToFocus != activeElementAfterRender) {
+      elementToFocus.focus();
     }
-    return node1.nodeType === node2.nodeType && node1.tagName === node2.tagName;
-  }
-  function removeNodesBetween(startInclusive, endExclusive, ctx) {
-    while (startInclusive !== endExclusive) {
-      let tempNode = startInclusive;
-      startInclusive = startInclusive.nextSibling;
-      removeNode(tempNode, ctx);
-    }
-    removeIdsFromConsideration(ctx, endExclusive);
-    return endExclusive.nextSibling;
-  }
-  function findIdSetMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
-    let newChildPotentialIdCount = getIdIntersectionCount(ctx, newChild, oldParent);
-    let potentialMatch = null;
-    if (newChildPotentialIdCount > 0) {
-      let potentialMatch = insertionPoint;
-      let otherMatchCount = 0;
-      while (potentialMatch != null) {
-        if (isIdSetMatch(newChild, potentialMatch, ctx)) {
-          return potentialMatch;
-        }
-        otherMatchCount += getIdIntersectionCount(ctx, potentialMatch, newContent);
-        if (otherMatchCount > newChildPotentialIdCount) {
-          return null;
-        }
-        potentialMatch = potentialMatch.nextSibling;
-      }
+  }
+}
+
+function firstAutofocusableElementInStreams(nodeListOfStreamElements) {
+  for (const streamElement of nodeListOfStreamElements) {
+    const elementWithAutofocus = queryAutofocusableElement(streamElement.templateElement.content);
+    if (elementWithAutofocus) return elementWithAutofocus;
+  }
+  return null;
+}
+
+class StreamObserver {
+  sources=new Set;
+  #started=false;
+  constructor(delegate) {
+    this.delegate = delegate;
+  }
+  start() {
+    if (!this.#started) {
+      this.#started = true;
+      addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
     }
-    return potentialMatch;
   }
-  function findSoftMatch(newContent, oldParent, newChild, insertionPoint, ctx) {
-    let potentialSoftMatch = insertionPoint;
-    let nextSibling = newChild.nextSibling;
-    let siblingSoftMatchCount = 0;
-    while (potentialSoftMatch != null) {
-      if (getIdIntersectionCount(ctx, potentialSoftMatch, newContent) > 0) {
-        return null;
-      }
-      if (isSoftMatch(newChild, potentialSoftMatch)) {
-        return potentialSoftMatch;
-      }
-      if (isSoftMatch(nextSibling, potentialSoftMatch)) {
-        siblingSoftMatchCount++;
-        nextSibling = nextSibling.nextSibling;
-        if (siblingSoftMatchCount >= 2) {
-          return null;
-        }
-      }
-      potentialSoftMatch = potentialSoftMatch.nextSibling;
+  stop() {
+    if (this.#started) {
+      this.#started = false;
+      removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
     }
-    return potentialSoftMatch;
   }
-  function parseContent(newContent) {
-    let parser = new DOMParser;
-    let contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, "");
-    if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
-      let content = parser.parseFromString(newContent, "text/html");
-      if (contentWithSvgsRemoved.match(/<\/html>/)) {
-        content.generatedByIdiomorph = true;
-        return content;
-      } else {
-        let htmlElement = content.firstChild;
-        if (htmlElement) {
-          htmlElement.generatedByIdiomorph = true;
-          return htmlElement;
-        } else {
-          return null;
-        }
-      }
-    } else {
-      let responseDoc = parser.parseFromString("<body><template>" + newContent + "</template></body>", "text/html");
-      let content = responseDoc.body.querySelector("template").content;
-      content.generatedByIdiomorph = true;
-      return content;
-    }
-  }
-  function normalizeContent(newContent) {
-    if (newContent == null) {
-      const dummyParent = document.createElement("div");
-      return dummyParent;
-    } else if (newContent.generatedByIdiomorph) {
-      return newContent;
-    } else if (newContent instanceof Node) {
-      const dummyParent = document.createElement("div");
-      dummyParent.append(newContent);
-      return dummyParent;
-    } else {
-      const dummyParent = document.createElement("div");
-      for (const elt of [ ...newContent ]) {
-        dummyParent.append(elt);
-      }
-      return dummyParent;
+  connectStreamSource(source) {
+    if (!this.streamSourceIsConnected(source)) {
+      this.sources.add(source);
+      source.addEventListener("message", this.receiveMessageEvent, false);
     }
   }
-  function insertSiblings(previousSibling, morphedNode, nextSibling) {
-    let stack = [];
-    let added = [];
-    while (previousSibling != null) {
-      stack.push(previousSibling);
-      previousSibling = previousSibling.previousSibling;
-    }
-    while (stack.length > 0) {
-      let node = stack.pop();
-      added.push(node);
-      morphedNode.parentElement.insertBefore(node, morphedNode);
-    }
-    added.push(morphedNode);
-    while (nextSibling != null) {
-      stack.push(nextSibling);
-      added.push(nextSibling);
-      nextSibling = nextSibling.nextSibling;
-    }
-    while (stack.length > 0) {
-      morphedNode.parentElement.insertBefore(stack.pop(), morphedNode.nextSibling);
-    }
-    return added;
-  }
-  function findBestNodeMatch(newContent, oldNode, ctx) {
-    let currentElement;
-    currentElement = newContent.firstChild;
-    let bestElement = currentElement;
-    let score = 0;
-    while (currentElement) {
-      let newScore = scoreElement(currentElement, oldNode, ctx);
-      if (newScore > score) {
-        bestElement = currentElement;
-        score = newScore;
-      }
-      currentElement = currentElement.nextSibling;
+  disconnectStreamSource(source) {
+    if (this.streamSourceIsConnected(source)) {
+      this.sources.delete(source);
+      source.removeEventListener("message", this.receiveMessageEvent, false);
     }
-    return bestElement;
   }
-  function scoreElement(node1, node2, ctx) {
-    if (isSoftMatch(node1, node2)) {
-      return .5 + getIdIntersectionCount(ctx, node1, node2);
+  streamSourceIsConnected(source) {
+    return this.sources.has(source);
+  }
+  inspectFetchResponse=event => {
+    const response = fetchResponseFromEvent(event);
+    if (response && fetchResponseIsStream(response)) {
+      event.preventDefault();
+      this.receiveMessageResponse(response);
     }
-    return 0;
+  };
+  receiveMessageEvent=event => {
+    if (this.#started && typeof event.data == "string") {
+      this.receiveMessageHTML(event.data);
+    }
+  };
+  async receiveMessageResponse(response) {
+    const html = await response.responseHTML;
+    if (html) {
+      this.receiveMessageHTML(html);
+    }
+  }
+  receiveMessageHTML(html) {
+    this.delegate.receivedMessageFromStream(StreamMessage.wrap(html));
   }
-  function removeNode(tempNode, ctx) {
-    removeIdsFromConsideration(ctx, tempNode);
-    if (ctx.callbacks.beforeNodeRemoved(tempNode) === false) return;
-    tempNode.remove();
-    ctx.callbacks.afterNodeRemoved(tempNode);
+}
+
+function fetchResponseFromEvent(event) {
+  const fetchResponse = event.detail?.fetchResponse;
+  if (fetchResponse instanceof FetchResponse) {
+    return fetchResponse;
   }
-  function isIdInConsideration(ctx, id) {
-    return !ctx.deadIds.has(id);
+}
+
+function fetchResponseIsStream(response) {
+  const contentType = response.contentType ?? "";
+  return contentType.startsWith(StreamMessage.contentType);
+}
+
+class ErrorRenderer extends Renderer {
+  static renderElement(currentElement, newElement) {
+    const {documentElement: documentElement, body: body} = document;
+    documentElement.replaceChild(newElement, body);
   }
-  function idIsWithinNode(ctx, id, targetNode) {
-    let idSet = ctx.idMap.get(targetNode) || EMPTY_SET;
-    return idSet.has(id);
+  async render() {
+    this.replaceHeadAndBody();
+    this.activateScriptElements();
   }
-  function removeIdsFromConsideration(ctx, node) {
-    let idSet = ctx.idMap.get(node) || EMPTY_SET;
-    for (const id of idSet) {
-      ctx.deadIds.add(id);
-    }
+  replaceHeadAndBody() {
+    const {documentElement: documentElement, head: head} = document;
+    documentElement.replaceChild(this.newHead, head);
+    this.renderElement(this.currentElement, this.newElement);
   }
-  function getIdIntersectionCount(ctx, node1, node2) {
-    let sourceSet = ctx.idMap.get(node1) || EMPTY_SET;
-    let matchCount = 0;
-    for (const id of sourceSet) {
-      if (isIdInConsideration(ctx, id) && idIsWithinNode(ctx, id, node2)) {
-        ++matchCount;
-      }
-    }
-    return matchCount;
-  }
-  function populateIdMapForNode(node, idMap) {
-    let nodeParent = node.parentElement;
-    let idElements = node.querySelectorAll("[id]");
-    for (const elt of idElements) {
-      let current = elt;
-      while (current !== nodeParent && current != null) {
-        let idSet = idMap.get(current);
-        if (idSet == null) {
-          idSet = new Set;
-          idMap.set(current, idSet);
-        }
-        idSet.add(elt.id);
-        current = current.parentElement;
+  activateScriptElements() {
+    for (const replaceableElement of this.scriptElements) {
+      const parentNode = replaceableElement.parentNode;
+      if (parentNode) {
+        const element = activateScriptElement(replaceableElement);
+        parentNode.replaceChild(element, replaceableElement);
       }
     }
   }
-  function createIdMap(oldContent, newContent) {
-    let idMap = new Map;
-    populateIdMapForNode(oldContent, idMap);
-    populateIdMapForNode(newContent, idMap);
-    return idMap;
+  get newHead() {
+    return this.newSnapshot.headSnapshot.element;
   }
-  return {
-    morph: morph,
-    defaults: defaults
-  };
-}();
+  get scriptElements() {
+    return document.documentElement.querySelectorAll("script");
+  }
+}
 
 class PageRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
@@ -3798,109 +3984,38 @@ class PageRenderer extends Renderer {
   }
 }
 
-class MorphRenderer extends PageRenderer {
-  async render() {
-    if (this.willRender) await this.#morphBody();
-  }
-  get renderMethod() {
-    return "morph";
-  }
-  async #morphBody() {
-    this.#morphElements(this.currentElement, this.newElement);
-    this.#reloadRemoteFrames();
-    dispatch("turbo:morph", {
-      detail: {
-        currentElement: this.currentElement,
-        newElement: this.newElement
-      }
-    });
-  }
-  #morphElements(currentElement, newElement, morphStyle = "outerHTML") {
-    this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement);
-    Idiomorph.morph(currentElement, newElement, {
-      ignoreActiveValue: true,
-      morphStyle: morphStyle,
+class MorphingPageRenderer extends PageRenderer {
+  static renderElement(currentElement, newElement) {
+    morphElements(currentElement, newElement, {
       callbacks: {
-        beforeNodeAdded: this.#shouldAddElement,
-        beforeNodeMorphed: this.#shouldMorphElement,
-        beforeAttributeUpdated: this.#shouldUpdateAttribute,
-        beforeNodeRemoved: this.#shouldRemoveElement,
-        afterNodeMorphed: this.#didMorphElement
-      }
-    });
-  }
-  #shouldAddElement=node => !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id));
-  #shouldMorphElement=(oldNode, newNode) => {
-    if (oldNode instanceof HTMLElement) {
-      if (!oldNode.hasAttribute("data-turbo-permanent") && (this.isMorphingTurboFrame || !this.#isFrameReloadedWithMorph(oldNode))) {
-        const event = dispatch("turbo:before-morph-element", {
-          cancelable: true,
-          target: oldNode,
-          detail: {
-            newElement: newNode
-          }
-        });
-        return !event.defaultPrevented;
-      } else {
-        return false;
-      }
-    }
-  };
-  #shouldUpdateAttribute=(attributeName, target, mutationType) => {
-    const event = dispatch("turbo:before-morph-attribute", {
-      cancelable: true,
-      target: target,
-      detail: {
-        attributeName: attributeName,
-        mutationType: mutationType
+        beforeNodeMorphed: element => !canRefreshFrame(element)
       }
     });
-    return !event.defaultPrevented;
-  };
-  #didMorphElement=(oldNode, newNode) => {
-    if (newNode instanceof HTMLElement) {
-      dispatch("turbo:morph-element", {
-        target: oldNode,
-        detail: {
-          newElement: newNode
-        }
-      });
+    for (const frame of currentElement.querySelectorAll("turbo-frame")) {
+      if (canRefreshFrame(frame)) frame.reload();
     }
-  };
-  #shouldRemoveElement=node => this.#shouldMorphElement(node);
-  #reloadRemoteFrames() {
-    this.#remoteFrames().forEach((frame => {
-      if (this.#isFrameReloadedWithMorph(frame)) {
-        this.#renderFrameWithMorph(frame);
-        frame.reload();
-      }
-    }));
-  }
-  #renderFrameWithMorph(frame) {
-    frame.addEventListener("turbo:before-frame-render", (event => {
-      event.detail.render = this.#morphFrameUpdate;
-    }), {
-      once: true
-    });
-  }
-  #morphFrameUpdate=(currentElement, newElement) => {
-    dispatch("turbo:before-frame-morph", {
-      target: currentElement,
+    dispatch("turbo:morph", {
       detail: {
         currentElement: currentElement,
         newElement: newElement
       }
     });
-    this.#morphElements(currentElement, newElement.children, "innerHTML");
-  };
-  #isFrameReloadedWithMorph(element) {
-    return element.src && element.refresh === "morph";
   }
-  #remoteFrames() {
-    return Array.from(document.querySelectorAll("turbo-frame[src]")).filter((frame => !frame.closest("[data-turbo-permanent]")));
+  async preservingPermanentElements(callback) {
+    return await callback();
+  }
+  get renderMethod() {
+    return "morph";
+  }
+  get shouldAutofocus() {
+    return false;
   }
 }
 
+function canRefreshFrame(frame) {
+  return frame instanceof FrameElement && frame.src && frame.refresh === "morph" && !frame.closest("[data-turbo-permanent]");
+}
+
 class SnapshotCache {
   keys=[];
   snapshots={};
@@ -3954,8 +4069,8 @@ class PageView extends View {
   }
   renderPage(snapshot, isPreview = false, willRender = true, visit) {
     const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage;
-    const rendererClass = shouldMorphPage ? MorphRenderer : PageRenderer;
-    const renderer = new rendererClass(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender);
+    const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer;
+    const renderer = new rendererClass(this.snapshot, snapshot, isPreview, willRender);
     if (!renderer.shouldRender) {
       this.forceReloaded = true;
     } else {
@@ -3965,7 +4080,7 @@ class PageView extends View {
   }
   renderError(snapshot, visit) {
     visit?.changeHistory();
-    const renderer = new ErrorRenderer(this.snapshot, snapshot, ErrorRenderer.renderElement, false);
+    const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
     return this.render(renderer);
   }
   clearSnapshotCache() {
@@ -4083,11 +4198,8 @@ class Session {
   frameRedirector=new FrameRedirector(this, document.documentElement);
   streamMessageRenderer=new StreamMessageRenderer;
   cache=new Cache(this);
-  drive=true;
   enabled=true;
-  progressBarDelay=500;
   started=false;
-  formMode="on";
   #pageRefreshDebouncePeriod=150;
   constructor(recentRequests) {
     this.recentRequests = recentRequests;
@@ -4146,10 +4258,11 @@ class Session {
   }
   refresh(url, requestId) {
     const isRecentRequest = requestId && this.recentRequests.has(requestId);
-    if (!isRecentRequest) {
-      this.cache.exemptPageFromPreview();
+    const isCurrentUrl = url === document.baseURI;
+    if (!isRecentRequest && !this.navigator.currentVisit && isCurrentUrl) {
       this.visit(url, {
-        action: "replace"
+        action: "replace",
+        shouldCacheSnapshot: false
       });
     }
   }
@@ -4166,10 +4279,26 @@ class Session {
     this.view.clearSnapshotCache();
   }
   setProgressBarDelay(delay) {
+    console.warn("Please replace `session.setProgressBarDelay(delay)` with `session.progressBarDelay = delay`. The function is deprecated and will be removed in a future version of Turbo.`");
     this.progressBarDelay = delay;
   }
-  setFormMode(mode) {
-    this.formMode = mode;
+  set progressBarDelay(delay) {
+    config.drive.progressBarDelay = delay;
+  }
+  get progressBarDelay() {
+    return config.drive.progressBarDelay;
+  }
+  set drive(value) {
+    config.drive.enabled = value;
+  }
+  get drive() {
+    return config.drive.enabled;
+  }
+  set formMode(value) {
+    config.forms.mode = value;
+  }
+  get formMode() {
+    return config.forms.mode;
   }
   get location() {
     return this.history.location;
@@ -4219,7 +4348,7 @@ class Session {
   }
   submittedFormLinkToLocation() {}
   canPrefetchRequestToLocation(link, location) {
-    return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation);
+    return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation) && this.navigator.linkPrefetchingIsEnabledForLocation(location);
   }
   willFollowLinkToLocation(link, location, event) {
     return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation) && this.applicationAllowsFollowingLinkToLocation(link, location, event);
@@ -4391,11 +4520,11 @@ class Session {
     });
   }
   submissionIsNavigatable(form, submitter) {
-    if (this.formMode == "off") {
+    if (config.forms.mode == "off") {
       return false;
     } else {
       const submitterIsNavigatable = submitter ? this.elementIsNavigatable(submitter) : true;
-      if (this.formMode == "optin") {
+      if (config.forms.mode == "optin") {
         return submitterIsNavigatable && form.closest('[data-turbo="true"]') != null;
       } else {
         return submitterIsNavigatable && this.elementIsNavigatable(form);
@@ -4405,7 +4534,7 @@ class Session {
   elementIsNavigatable(element) {
     const container = findClosestRecursively(element, "[data-turbo]");
     const withinFrame = findClosestRecursively(element, "turbo-frame");
-    if (this.drive || withinFrame) {
+    if (config.drive.enabled || withinFrame) {
       if (container) {
         return container.getAttribute("data-turbo") != "false";
       } else {
@@ -4473,15 +4602,18 @@ function clearCache() {
 }
 
 function setProgressBarDelay(delay) {
-  session.setProgressBarDelay(delay);
+  console.warn("Please replace `Turbo.setProgressBarDelay(delay)` with `Turbo.config.drive.progressBarDelay = delay`. The top-level function is deprecated and will be removed in a future version of Turbo.`");
+  config.drive.progressBarDelay = delay;
 }
 
 function setConfirmMethod(confirmMethod) {
-  FormSubmission.confirmMethod = confirmMethod;
+  console.warn("Please replace `Turbo.setConfirmMethod(confirmMethod)` with `Turbo.config.forms.confirm = confirmMethod`. The top-level function is deprecated and will be removed in a future version of Turbo.`");
+  config.forms.confirm = confirmMethod;
 }
 
 function setFormMode(mode) {
-  session.setFormMode(mode);
+  console.warn("Please replace `Turbo.setFormMode(mode)` with `Turbo.config.forms.mode = mode`. The top-level function is deprecated and will be removed in a future version of Turbo.`");
+  config.forms.mode = mode;
 }
 
 var Turbo = Object.freeze({
@@ -4493,6 +4625,7 @@ var Turbo = Object.freeze({
   PageSnapshot: PageSnapshot,
   FrameRenderer: FrameRenderer,
   fetch: fetchWithTurboHeaders,
+  config: config,
   start: start,
   registerAdapter: registerAdapter,
   visit: visit,
@@ -4514,6 +4647,7 @@ class FrameController {
   #connected=false;
   #hasBeenLoaded=false;
   #ignoredAttributes=new Set;
+  #shouldMorphFrame=false;
   action=null;
   constructor(element) {
     this.element = element;
@@ -4561,18 +4695,13 @@ class FrameController {
     }
   }
   sourceURLReloaded() {
-    const {src: src} = this.element;
-    this.#ignoringChangesToAttribute("complete", (() => {
-      this.element.removeAttribute("complete");
-    }));
+    const {refresh: refresh, src: src} = this.element;
+    this.#shouldMorphFrame = src && refresh === "morph";
+    this.element.removeAttribute("complete");
     this.element.src = null;
     this.element.src = src;
     return this.element.loaded;
   }
-  completeChanged() {
-    if (this.#isIgnoringChangesTo("complete")) return;
-    this.#loadSourceURL();
-  }
   loadingStyleChanged() {
     if (this.loadingStyle == FrameLoadingStyle.lazy) {
       this.appearanceObserver.start();
@@ -4605,6 +4734,7 @@ class FrameController {
         }
       }
     } finally {
+      this.#shouldMorphFrame = false;
       this.fetchResponseLoaded = () => Promise.resolve();
     }
   }
@@ -4717,9 +4847,10 @@ class FrameController {
   };
   async #loadFrameResponse(fetchResponse, document) {
     const newFrameElement = await this.extractForeignFrameElement(document.body);
+    const rendererClass = this.#shouldMorphFrame ? MorphingFrameRenderer : FrameRenderer;
     if (newFrameElement) {
       const snapshot = new Snapshot(newFrameElement);
-      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
+      const renderer = new rendererClass(this, this.view.snapshot, snapshot, false, false);
       if (this.view.renderPromise) await this.view.renderPromise;
       this.changeHistory();
       await this.view.render(renderer);
@@ -4904,13 +5035,11 @@ class FrameController {
     return this.element.hasAttribute("complete");
   }
   set complete(value) {
-    this.#ignoringChangesToAttribute("complete", (() => {
-      if (value) {
-        this.element.setAttribute("complete", "");
-      } else {
-        this.element.removeAttribute("complete");
-      }
-    }));
+    if (value) {
+      this.element.setAttribute("complete", "");
+    } else {
+      this.element.removeAttribute("complete");
+    }
   }
   get isActive() {
     return this.element.isActive && this.#connected;
@@ -4980,12 +5109,24 @@ const StreamActions = {
     this.targetElements.forEach((e => e.remove()));
   },
   replace() {
-    this.targetElements.forEach((e => e.replaceWith(this.templateContent)));
+    const method = this.getAttribute("method");
+    this.targetElements.forEach((targetElement => {
+      if (method === "morph") {
+        morphElements(targetElement, this.templateContent);
+      } else {
+        targetElement.replaceWith(this.templateContent);
+      }
+    }));
   },
   update() {
+    const method = this.getAttribute("method");
     this.targetElements.forEach((targetElement => {
-      targetElement.innerHTML = "";
-      targetElement.append(this.templateContent);
+      if (method === "morph") {
+        morphChildren(targetElement, this.templateContent);
+      } else {
+        targetElement.innerHTML = "";
+        targetElement.append(this.templateContent);
+      }
     }));
   },
   refresh() {
@@ -5024,9 +5165,9 @@ class StreamElement extends HTMLElement {
     this.duplicateChildren.forEach((c => c.remove()));
   }
   get duplicateChildren() {
-    const existingChildren = this.targetElements.flatMap((e => [ ...e.children ])).filter((c => !!c.id));
-    const newChildrenIds = [ ...this.templateContent?.children || [] ].filter((c => !!c.id)).map((c => c.id));
-    return existingChildren.filter((c => newChildrenIds.includes(c.id)));
+    const existingChildren = this.targetElements.flatMap((e => [ ...e.children ])).filter((c => !!c.getAttribute("id")));
+    const newChildrenIds = [ ...this.templateContent?.children || [] ].filter((c => !!c.getAttribute("id"))).map((c => c.getAttribute("id")));
+    return existingChildren.filter((c => newChildrenIds.includes(c.getAttribute("id"))));
   }
   get performAction() {
     if (this.action) {
@@ -5182,6 +5323,7 @@ var Turbo$1 = Object.freeze({
   StreamSourceElement: StreamSourceElement,
   cache: cache,
   clearCache: clearCache,
+  config: config,
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,
   fetch: fetchWithTurboHeaders,
@@ -5243,6 +5385,7 @@ function walk(obj) {
 }
 
 class TurboCableStreamSourceElement extends HTMLElement {
+  static observedAttributes=[ "channel", "signed-stream-name" ];
   async connectedCallback() {
     connectStreamSource(this);
     this.subscription = await subscribeTo(this.channel, {
@@ -5254,6 +5397,13 @@ class TurboCableStreamSourceElement extends HTMLElement {
   disconnectedCallback() {
     disconnectStreamSource(this);
     if (this.subscription) this.subscription.unsubscribe();
+    this.subscriptionDisconnected();
+  }
+  attributeChangedCallback() {
+    if (this.subscription) {
+      this.disconnectedCallback();
+      this.connectedCallback();
+    }
   }
   dispatchMessageEvent(data) {
     const event = new MessageEvent("message", {
@@ -5340,8 +5490,8 @@ window.Turbo = Turbo$1;
 addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
 var adapters = {
-  logger: self.console,
-  WebSocket: self.WebSocket
+  logger: typeof console !== "undefined" ? console : undefined,
+  WebSocket: typeof WebSocket !== "undefined" ? WebSocket : undefined
 };
 
 var logger = {
@@ -5383,12 +5533,11 @@ class ConnectionMonitor {
   isRunning() {
     return this.startedAt && !this.stoppedAt;
   }
-  recordPing() {
+  recordMessage() {
     this.pingedAt = now();
   }
   recordConnect() {
     this.reconnectAttempts = 0;
-    this.recordPing();
     delete this.disconnectedAt;
     logger.log("ConnectionMonitor recorded connect");
   }
@@ -5587,6 +5736,7 @@ Connection.prototype.events = {
       return;
     }
     const {identifier: identifier, message: message, reason: reason, reconnect: reconnect, type: type} = JSON.parse(event.data);
+    this.monitor.recordMessage();
     switch (type) {
      case message_types.welcome:
       if (this.triedToReconnect()) {
@@ -5602,7 +5752,7 @@ Connection.prototype.events = {
       });
 
      case message_types.ping:
-      return this.monitor.recordPing();
+      return null;
 
      case message_types.confirmation:
       this.subscriptions.confirmSubscription(identifier);