phoenix_live_view 1.2.0-rc.2 → 1.2.0

package/priv/static/phoenix_live_view.js

@@ -37,14 +37,14 @@ var LiveView = (() => {
   // js/phoenix_live_view/index.ts
   var phoenix_live_view_exports = {};
   __export(phoenix_live_view_exports, {
-    LiveSocket: () => LiveSocket2,
+    LiveSocket: () => LiveSocket,
     ViewHook: () => ViewHook,
     createHook: () => createHook,
     getFileURLForUpload: () => getFileURLForUpload,
     isUsedInput: () => isUsedInput
   });
 
-  // js/phoenix_live_view/constants.js
+  // js/phoenix_live_view/constants.ts
   var CONSECUTIVE_RELOADS = "consecutive-reloads";
   var MAX_RELOADS = 10;
   var RELOAD_JITTER_MIN = 5e3;
@@ -186,12 +186,12 @@ var LiveView = (() => {
       }
       this.uploadChannel.leave();
       this.errored = true;
-      clearTimeout(this.chunkTimer);
+      this.chunkTimer != null && clearTimeout(this.chunkTimer);
       this.entry.error(reason);
     }
     upload() {
       this.uploadChannel.onError((reason) => this.error(reason));
-      this.uploadChannel.join().receive("ok", (_data) => this.readNextChunk()).receive("error", (reason) => this.error(reason));
+      this.uploadChannel.join().receive("ok", (_data) => this.readNextChunk()).receive("error", ({ reason }) => this.error(reason));
     }
     isDone() {
       return this.offset >= this.entry.file.size;
@@ -203,7 +203,8 @@ var LiveView = (() => {
         this.chunkSize + this.offset
       );
       reader.onload = (e) => {
-        if (e.target.error === null) {
+        var _a, _b;
+        if (((_a = e.target) == null ? void 0 : _a.error) === null) {
           this.offset += /** @type {ArrayBuffer} */
           e.target.result.byteLength;
           this.pushChunk(
@@ -211,7 +212,7 @@ var LiveView = (() => {
             e.target.result
           );
         } else {
-          return logError("Read error: " + e.target.error);
+          return logError("Read error: " + ((_b = e.target) == null ? void 0 : _b.error));
         }
       };
       reader.readAsArrayBuffer(blob);
@@ -232,8 +233,23 @@ var LiveView = (() => {
     }
   };
 
-  // js/phoenix_live_view/utils.js
+  // js/phoenix_live_view/utils.ts
   var logError = (msg, obj) => console.error && console.error(msg, obj);
+  var ensureSameOrigin = (href, kind) => {
+    let url;
+    try {
+      url = new URL(href, window.location.href);
+    } catch (e) {
+      throw new Error(
+        `expected ${kind} destination to be a valid URL, got: ${href}`
+      );
+    }
+    if (url.origin !== window.location.origin) {
+      throw new Error(
+        `cannot ${kind} to "${href}" because its origin does not match the current origin "${window.location.origin}". Use window.location directly for cross-origin navigation.`
+      );
+    }
+  };
   var isCid = (cid) => {
     const type = typeof cid;
     return type === "number" || type === "string" && /^(0|[1-9]\d*)$/.test(cid);
@@ -274,12 +290,13 @@ var LiveView = (() => {
   var clone = (obj) => {
     return JSON.parse(JSON.stringify(obj));
   };
-  var closestPhxBinding = (el, binding, borderEl) => {
+  var closestPhxBinding = (startEl, binding, borderEl) => {
+    let el = startEl;
     do {
-      if (el.matches(`[${binding}]`) && !el.disabled) {
+      if (el.matches(`[${binding}]`) && !("disabled" in el && el.disabled)) {
         return el;
       }
-      el = el.parentElement || el.parentNode;
+      el = el.parentElement;
     } while (el !== null && el.nodeType === 1 && !(borderEl && borderEl.isSameNode(el) || el.matches(PHX_VIEW_SELECTOR)));
     return null;
   };
@@ -311,7 +328,7 @@ var LiveView = (() => {
     return false;
   };
 
-  // js/phoenix_live_view/browser.js
+  // js/phoenix_live_view/browser.ts
   var Browser = {
     canPushState() {
       return typeof history.pushState !== "undefined";
@@ -358,7 +375,7 @@ var LiveView = (() => {
             }
           });
         }
-      } else {
+      } else if (to) {
         this.redirect(to);
       }
     },
@@ -375,7 +392,7 @@ var LiveView = (() => {
     deleteCookie(name) {
       document.cookie = `${name}=; max-age=-1; path=/`;
     },
-    redirect(toURL, flash, navigate = (url) => {
+    redirect(toURL, flash = null, navigate = (url) => {
       window.location.href = url;
     }) {
       if (flash) {
@@ -396,11 +413,21 @@ var LiveView = (() => {
   };
   var browser_default = Browser;
 
-  // js/phoenix_live_view/dom.js
+  // js/phoenix_live_view/dom.ts
   var DOM = {
     byId(id) {
       return document.getElementById(id) || logError(`no id found for ${id}`);
     },
+    elementFromTarget(target) {
+      if (!(target instanceof Node)) {
+        return null;
+      }
+      if (target.nodeType === Node.ELEMENT_NODE) {
+        return target;
+      } else {
+        return target.parentElement;
+      }
+    },
     removeClass(el, className) {
       el.classList.remove(className);
       if (el.classList.length === 0) {
@@ -438,12 +465,20 @@ var LiveView = (() => {
         inputsOutsideForm
       );
     },
-    findComponentNodeList(viewId, cid, doc2 = document) {
-      return this.all(
-        doc2,
+    findComponent(viewId, cid, doc2 = document) {
+      return doc2.querySelector(
         `[${PHX_VIEW_REF}="${viewId}"][${PHX_COMPONENT}="${cid}"]`
       );
     },
+    getComponent(viewId, cid, doc2 = document) {
+      const el = this.findComponent(viewId, cid, doc2);
+      if (!el) {
+        throw new Error(
+          `no component found matching viewId ${viewId} and cid ${cid}`
+        );
+      }
+      return el;
+    },
     isPhxDestroyed(node) {
       return node.id && DOM.private(node, "destroyed") ? true : false;
     },
@@ -836,11 +871,23 @@ var LiveView = (() => {
         focused.setSelectionRange(selectionStart, selectionEnd);
       }
     },
-    isFormInput(el) {
-      if (el.localName && customElements.get(el.localName)) {
-        return customElements.get(el.localName)[`formAssociated`];
+    /**
+     * Returns true if the element is an input that can be focused and edited by the user,
+     * so we can skip patching it if it has focus.
+     */
+    isEditableInput(el) {
+      return this.isFormAssociated(el) && !(el instanceof HTMLButtonElement) && !(el instanceof HTMLInputElement && el.type === "button");
+    },
+    isFormAssociated(el) {
+      if (!(el instanceof HTMLElement))
+        return false;
+      if (el.localName) {
+        const customEl = customElements.get(el.localName);
+        if (customEl) {
+          return customEl.formAssociated === true;
+        }
       }
-      return /^(?:input|select|textarea)$/i.test(el.tagName) && el.type !== "button";
+      return el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement || el instanceof HTMLButtonElement;
     },
     syncAttrsToProps(el) {
       if (el instanceof HTMLInputElement && CHECKABLE_INPUTS.indexOf(el.type.toLocaleLowerCase()) >= 0) {
@@ -857,13 +904,13 @@ var LiveView = (() => {
       if (DOM.isPhxUpdate(container, phxUpdate, ["append", "prepend", PHX_STREAM])) {
         const toRemove = [];
         container.childNodes.forEach((childNode) => {
-          if (!childNode.id) {
-            const isEmptyTextNode = childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue.trim() === "";
+          if (!("id" in childNode) || !childNode.id) {
+            const isEmptyTextNode = childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue && childNode.nodeValue.trim() === "";
             if (!isEmptyTextNode && childNode.nodeType !== Node.COMMENT_NODE) {
               logError(
                 `only HTML element tags with an id are allowed inside containers with phx-update.
 
-removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
+removing illegal node: "${("outerHTML" in childNode && childNode.outerHTML || childNode.nodeValue || "").trim()}"
 
 `
               );
@@ -891,9 +938,12 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         Object.keys(attrs).forEach(
           (attr) => newContainer.setAttribute(attr, attrs[attr])
         );
-        retainedAttrs.forEach(
-          (attr) => newContainer.setAttribute(attr, container.getAttribute(attr))
-        );
+        retainedAttrs.forEach((attr) => {
+          const value = container.getAttribute(attr);
+          if (value !== null) {
+            newContainer.setAttribute(attr, value);
+          }
+        });
         newContainer.innerHTML = container.innerHTML;
         container.replaceWith(newContainer);
         return newContainer;
@@ -1145,7 +1195,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           [],
           (existing) => existing.concat(newFiles)
         );
-        inputEl.value = null;
+        inputEl.value = "";
       } else {
         if (dataTransfer && dataTransfer.files.length > 0) {
           inputEl.files = dataTransfer.files;
@@ -1228,20 +1278,20 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
   };
 
-  // js/phoenix_live_view/aria.js
+  // js/phoenix_live_view/aria.ts
   var ARIA = {
     anyOf(instance, classes) {
-      return classes.find((name) => instance instanceof name);
+      return classes.some((name) => instance instanceof name);
     },
-    isFocusable(el, interactiveOnly) {
-      return el instanceof HTMLAnchorElement && el.rel !== "ignore" || el instanceof HTMLAreaElement && el.href !== void 0 || !el.disabled && this.anyOf(el, [
+    isFocusable(el, interactiveOnly = false) {
+      return el instanceof HTMLAnchorElement && el.rel !== "ignore" || el instanceof HTMLAreaElement && el.href !== void 0 || !("disabled" in el && el.disabled) && this.anyOf(el, [
         HTMLInputElement,
         HTMLSelectElement,
         HTMLTextAreaElement,
         HTMLButtonElement
-      ]) || el instanceof HTMLIFrameElement || el.tabIndex >= 0 && el.getAttribute("aria-hidden") !== "true" || !interactiveOnly && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true";
+      ]) || el instanceof HTMLIFrameElement || el instanceof HTMLElement && el.tabIndex >= 0 && el.getAttribute("aria-hidden") !== "true" || !interactiveOnly && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true";
     },
-    attemptFocus(el, interactiveOnly) {
+    attemptFocus(el, interactiveOnly = false) {
       if (this.isFocusable(el, interactiveOnly)) {
         try {
           el.focus();
@@ -1258,6 +1308,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
         child = child.nextElementSibling;
       }
+      return false;
     },
     focusFirst(el) {
       let child = el.firstElementChild;
@@ -1267,6 +1318,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
         child = child.nextElementSibling;
       }
+      return false;
     },
     focusLast(el) {
       let child = el.lastElementChild;
@@ -1276,79 +1328,12 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
         child = child.previousElementSibling;
       }
+      return false;
     }
   };
   var aria_default = ARIA;
 
-  // js/phoenix_live_view/hooks.js
-  var Hooks = {
-    LiveFileUpload: {
-      activeRefs() {
-        return this.el.getAttribute(PHX_ACTIVE_ENTRY_REFS);
-      },
-      preflightedRefs() {
-        return this.el.getAttribute(PHX_PREFLIGHTED_REFS);
-      },
-      mounted() {
-        this.js().ignoreAttributes(this.el, ["value"]);
-        this.preflightedWas = this.preflightedRefs();
-      },
-      updated() {
-        const newPreflights = this.preflightedRefs();
-        if (this.preflightedWas !== newPreflights) {
-          this.preflightedWas = newPreflights;
-          if (newPreflights === "") {
-            this.__view().cancelSubmit(this.el.form);
-          }
-        }
-        if (this.activeRefs() === "") {
-          this.el.value = null;
-        }
-        this.el.dispatchEvent(new CustomEvent(PHX_LIVE_FILE_UPDATED));
-      }
-    },
-    LiveImgPreview: {
-      mounted() {
-        this.ref = this.el.getAttribute("data-phx-entry-ref");
-        this.inputEl = document.getElementById(
-          this.el.getAttribute(PHX_UPLOAD_REF)
-        );
-        this.url = LiveUploader.getEntryDataURL(this.inputEl, this.ref);
-        this.el.src = this.url;
-      },
-      destroyed() {
-        URL.revokeObjectURL(this.url);
-      }
-    },
-    FocusWrap: {
-      mounted() {
-        this.focusStart = this.el.firstElementChild;
-        this.focusEnd = this.el.lastElementChild;
-        this.focusStart.addEventListener("focus", (e) => {
-          if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
-            const nextFocus = e.target.nextElementSibling;
-            aria_default.attemptFocus(nextFocus) || aria_default.focusFirst(nextFocus);
-          } else {
-            aria_default.focusLast(this.el);
-          }
-        });
-        this.focusEnd.addEventListener("focus", (e) => {
-          if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
-            const nextFocus = e.target.previousElementSibling;
-            aria_default.attemptFocus(nextFocus) || aria_default.focusLast(nextFocus);
-          } else {
-            aria_default.focusFirst(this.el);
-          }
-        });
-        if (!this.el.contains(document.activeElement)) {
-          this.el.addEventListener("phx:show-end", () => this.el.focus());
-          if (window.getComputedStyle(this.el).display !== "none") {
-            aria_default.focusFirst(this.el);
-          }
-        }
-      }
-    }
-  };
+  // js/phoenix_live_view/hooks.ts
   var findScrollContainer = (el) => {
     if (["HTML", "BODY"].indexOf(el.nodeName.toUpperCase()) >= 0)
       return null;
@@ -1389,7 +1374,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     const rect = el.getBoundingClientRect();
     return Math.ceil(rect.top) >= top(scrollContainer) && Math.floor(rect.top) <= bottom(scrollContainer);
   };
-  Hooks.InfiniteScroll = {
+  var InfiniteScroll = {
     mounted() {
       this.scrollContainer = findScrollContainer(this.el);
       let scrollBefore = scrollTop(this.scrollContainer);
@@ -1465,9 +1450,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         } else if (isScrollingDown && topOverran && rect.top <= 0) {
           topOverran = false;
         }
-        if (topEvent && isScrollingUp && isAtViewportTop(firstChild, this.scrollContainer)) {
+        if (topEvent && isScrollingUp && firstChild && isAtViewportTop(firstChild, this.scrollContainer)) {
           onFirstChildAtTop(topEvent, firstChild);
-        } else if (bottomEvent && isScrollingDown && isAtViewportBottom(lastChild, this.scrollContainer)) {
+        } else if (bottomEvent && isScrollingDown && lastChild && isAtViewportBottom(lastChild, this.scrollContainer)) {
           onLastChildAtBottom(bottomEvent, lastChild);
         }
         scrollBefore = scrollNow;
@@ -1531,9 +1516,80 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return rect;
     }
   };
+  var LiveFileUpload = {
+    activeRefs() {
+      return this.el.getAttribute(PHX_ACTIVE_ENTRY_REFS);
+    },
+    preflightedRefs() {
+      return this.el.getAttribute(PHX_PREFLIGHTED_REFS);
+    },
+    mounted() {
+      this.js().ignoreAttributes(this.el, ["value"]);
+      this.preflightedWas = this.preflightedRefs();
+    },
+    updated() {
+      const newPreflights = this.preflightedRefs();
+      if (this.preflightedWas !== newPreflights) {
+        this.preflightedWas = newPreflights;
+        if (newPreflights === "") {
+          this.__view().cancelSubmit(this.el.form);
+        }
+      }
+      if (this.activeRefs() === "") {
+        this.el.value = "";
+      }
+      this.el.dispatchEvent(new CustomEvent(PHX_LIVE_FILE_UPDATED));
+    }
+  };
+  var LiveImgPreview = {
+    mounted() {
+      this.ref = this.el.getAttribute("data-phx-entry-ref");
+      this.inputEl = document.getElementById(
+        this.el.getAttribute(PHX_UPLOAD_REF)
+      );
+      this.url = LiveUploader.getEntryDataURL(this.inputEl, this.ref);
+      this.el.src = this.url;
+    },
+    destroyed() {
+      URL.revokeObjectURL(this.url);
+    }
+  };
+  var Hooks = {
+    LiveFileUpload,
+    LiveImgPreview,
+    FocusWrap: {
+      mounted() {
+        this.focusStart = this.el.firstElementChild;
+        this.focusEnd = this.el.lastElementChild;
+        this.focusStart.addEventListener("focus", (e) => {
+          if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
+            const nextFocus = e.target.nextElementSibling;
+            aria_default.attemptFocus(nextFocus) || aria_default.focusFirst(nextFocus);
+          } else {
+            aria_default.focusLast(this.el);
+          }
+        });
+        this.focusEnd.addEventListener("focus", (e) => {
+          if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
+            const nextFocus = e.target.previousElementSibling;
+            aria_default.attemptFocus(nextFocus) || aria_default.focusLast(nextFocus);
+          } else {
+            aria_default.focusFirst(this.el);
+          }
+        });
+        if (!this.el.contains(document.activeElement)) {
+          this.el.addEventListener("phx:show-end", () => this.el.focus());
+          if (window.getComputedStyle(this.el).display !== "none") {
+            aria_default.focusFirst(this.el);
+          }
+        }
+      }
+    },
+    InfiniteScroll
+  };
   var hooks_default = Hooks;
 
-  // js/phoenix_live_view/element_ref.js
+  // js/phoenix_live_view/element_ref.ts
   var ElementRef = class {
     static onUnlock(el, callback) {
       if (!dom_default.isLocked(el) && !el.closest(`[${PHX_REF_LOCK}]`)) {
@@ -1629,11 +1685,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         this.el.removeAttribute(PHX_REF_LOADING);
         const disabledVal = this.el.getAttribute(PHX_DISABLED);
         const readOnlyVal = this.el.getAttribute(PHX_READONLY);
-        if (readOnlyVal !== null) {
+        if (readOnlyVal !== null && "readOnly" in this.el) {
           this.el.readOnly = readOnlyVal === "true" ? true : false;
           this.el.removeAttribute(PHX_READONLY);
         }
-        if (disabledVal !== null) {
+        if (disabledVal !== null && "disabled" in this.el) {
           this.el.disabled = disabledVal === "true" ? true : false;
           this.el.removeAttribute(PHX_DISABLED);
         }
@@ -1660,6 +1716,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     isLoadingUndoneBy(ref) {
       return this.loadingRef === null ? false : this.loadingRef <= ref;
     }
+    /** @internal */
     isLockUndoneBy(ref) {
       return this.lockRef === null ? false : this.lockRef <= ref;
     }
@@ -1672,7 +1729,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
   };
 
-  // js/phoenix_live_view/dom_post_morph_restorer.js
+  // js/phoenix_live_view/dom_post_morph_restorer.ts
   var DOMPostMorphRestorer = class {
     constructor(containerBefore, containerAfter, updateType) {
       const idsBefore = /* @__PURE__ */ new Set();
@@ -2263,47 +2320,48 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
   var morphdom = morphdomFactory(morphAttrs);
   var morphdom_esm_default = morphdom;
 
-  // js/phoenix_live_view/dom_patch.js
+  // js/phoenix_live_view/dom_patch.ts
   var DOMPatch = class {
-    constructor(view, container, id, html, streams, targetCID, opts = {}) {
+    constructor(view, container, html, streams, targetCID, opts = {}) {
+      var _a;
       this.view = view;
       this.liveSocket = view.liveSocket;
       this.container = container;
-      this.id = id;
       this.rootID = view.root.id;
       this.html = html;
       this.streams = streams;
       this.streamInserts = {};
       this.streamComponentRestore = {};
       this.targetCID = targetCID;
-      this.cidPatch = isCid(this.targetCID);
       this.pendingRemoves = [];
       this.phxRemove = this.liveSocket.binding("remove");
-      this.targetContainer = this.isCIDPatch() ? this.targetCIDContainer(html) : container;
-      this.callbacks = {
-        beforeadded: [],
-        beforeupdated: [],
-        beforephxChildAdded: [],
-        afteradded: [],
-        afterupdated: [],
-        afterdiscarded: [],
-        afterphxChildAdded: [],
-        aftertransitionsDiscarded: []
-      };
+      this.targetContainer = targetCID ? dom_default.getComponent(this.view.id, targetCID) : container;
+      this.beforeUpdatedCallbacks = [];
+      this.afterAddedCallbacks = [];
+      this.afterUpdatedCallbacks = [];
+      this.afterPhxChildAddedCallbacks = [];
+      this.afterDiscardedCallbacks = [];
+      this.afterTransitionsDiscardedCallbacks = [];
       this.withChildren = opts.withChildren || opts.undoRef !== void 0 || false;
-      this.undoRef = opts.undoRef;
+      this.undoRef = (_a = opts.undoRef) != null ? _a : null;
+    }
+    beforeUpdated(callback) {
+      this.beforeUpdatedCallbacks.push(callback);
     }
-    before(kind, callback) {
-      this.callbacks[`before${kind}`].push(callback);
+    afterAdded(callback) {
+      this.afterAddedCallbacks.push(callback);
     }
-    after(kind, callback) {
-      this.callbacks[`after${kind}`].push(callback);
+    afterUpdated(callback) {
+      this.afterUpdatedCallbacks.push(callback);
     }
-    trackBefore(kind, ...args) {
-      this.callbacks[`before${kind}`].forEach((callback) => callback(...args));
+    afterPhxChildAdded(callback) {
+      this.afterPhxChildAddedCallbacks.push(callback);
     }
-    trackAfter(kind, ...args) {
-      this.callbacks[`after${kind}`].forEach((callback) => callback(...args));
+    afterDiscarded(callback) {
+      this.afterDiscardedCallbacks.push(callback);
+    }
+    afterTransitionsDiscarded(callback) {
+      this.afterTransitionsDiscardedCallbacks.push(callback);
     }
     markPrunableContentForRemoval() {
       const phxUpdate = this.liveSocket.binding(PHX_UPDATE);
@@ -2318,10 +2376,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     perform(isJoinPatch) {
       const { view, liveSocket, html, container } = this;
       let targetContainer = this.targetContainer;
-      if (this.isCIDPatch() && !this.targetContainer) {
-        return;
-      }
-      if (this.isCIDPatch()) {
+      if (this.targetCID) {
         const closestLock = targetContainer.closest(`[${PHX_REF_LOCK}]`);
         if (closestLock && !closestLock.isSameNode(targetContainer)) {
           const clonedTree = dom_default.private(closestLock, PHX_REF_LOCK);
@@ -2353,6 +2408,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           // another case is the recursive patch of a stream item that was kept on reset (-> onBeforeNodeAdded)
           childrenOnly: targetContainer2.getAttribute(PHX_COMPONENT) === null && !withChildren,
           getNodeKey: (node) => {
+            if (!(node instanceof Element))
+              return null;
             if (dom_default.isPhxDestroyed(node)) {
               return null;
             }
@@ -2360,9 +2417,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               return node.id;
             }
             if (dom_default.private(node, "clientsideIdAttribute")) {
-              return node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
+              return node.getAttribute(PHX_MAGIC_ID);
             }
-            return node.id || node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
+            return node.id || node.getAttribute(PHX_MAGIC_ID);
           },
           // skip indexing from children when container is stream
           skipFromChildren: (from) => {
@@ -2383,7 +2440,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
                 const nonStreamChild = Array.from(parent.children).find(
                   (c) => !c.hasAttribute(PHX_STREAM_REF)
                 );
-                parent.insertBefore(child, nonStreamChild);
+                parent.insertBefore(child, nonStreamChild != null ? nonStreamChild : null);
               } else {
                 parent.appendChild(child);
               }
@@ -2394,11 +2451,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           },
           onBeforeNodeAdded: (el) => {
             var _a;
+            if (!(el instanceof Element)) {
+              return el;
+            }
             if (((_a = this.getStreamInsert(el)) == null ? void 0 : _a.updateOnly) && !this.streamComponentRestore[el.id]) {
               return false;
             }
             dom_default.maintainPrivateHooks(el, el, phxViewportTop, phxViewportBottom);
-            this.trackBefore("added", el);
             let morphedEl = el;
             if (this.streamComponentRestore[el.id]) {
               morphedEl = this.streamComponentRestore[el.id];
@@ -2408,9 +2467,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             return morphedEl;
           },
           onNodeAdded: (el) => {
-            if (el.getAttribute) {
-              this.maybeReOrderStream(el, true);
+            if (!(el instanceof Element)) {
+              added.push(el);
+              return;
             }
+            this.maybeReOrderStream(el, true);
             if (dom_default.isPortalTemplate(el)) {
               portalCallbacks.push(() => this.teleport(el, morph));
             }
@@ -2423,7 +2484,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               externalFormTriggered = el;
             }
             if (dom_default.isPhxChild(el) && view.ownsElement(el) || dom_default.isPhxSticky(el) && view.ownsElement(el.parentNode)) {
-              this.trackAfter("phxChildAdded", el);
+              this.trackAfterPhxChildAdded(el);
             }
             if (el.nodeName === "SCRIPT" && el.hasAttribute(PHX_RUNTIME_HOOK)) {
               this.handleRuntimeHook(el, source);
@@ -2432,7 +2493,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           },
           onNodeDiscarded: (el) => this.onNodeDiscarded(el),
           onBeforeNodeDiscarded: (el) => {
-            if (el.getAttribute && el.getAttribute(PHX_PRUNE) !== null) {
+            var _a;
+            if (!(el instanceof Element)) {
+              return true;
+            }
+            if (el.getAttribute(PHX_PRUNE) !== null) {
               return true;
             }
             if (el.parentElement !== null && el.id && dom_default.isPhxUpdate(el.parentElement, phxUpdate, [
@@ -2442,7 +2507,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             ])) {
               return false;
             }
-            if (el.getAttribute && el.getAttribute(PHX_TELEPORTED_REF)) {
+            if (el.getAttribute(PHX_TELEPORTED_REF)) {
               return false;
             }
             if (this.maybePendingRemove(el)) {
@@ -2453,7 +2518,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
             if (dom_default.isPortalTemplate(el)) {
               const teleportedEl = document.getElementById(
-                el.content.firstElementChild.id
+                ((_a = el.content.firstElementChild) == null ? void 0 : _a.id) || ""
               );
               if (teleportedEl) {
                 teleportedEl.remove();
@@ -2484,7 +2549,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               phxViewportBottom
             );
             dom_default.cleanChildNodes(toEl, phxUpdate);
-            const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
+            const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isEditableInput(fromEl);
             const focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
             if (this.skipCIDSibling(toEl)) {
               this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
@@ -2505,7 +2570,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               return false;
             }
             if (dom_default.isIgnored(fromEl, phxUpdate) || fromEl.form && fromEl.form.isSameNode(externalFormTriggered)) {
-              this.trackBefore("updated", fromEl, toEl);
+              this.trackBeforeUpdated(fromEl, toEl);
               dom_default.mergeAttrs(fromEl, toEl, {
                 isIgnored: dom_default.isIgnored(fromEl, phxUpdate)
               });
@@ -2535,7 +2600,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               return false;
             }
             if (isFocusedFormEl && fromEl.type !== "hidden" && !focusedSelectChanged) {
-              this.trackBefore("updated", fromEl, toEl);
+              this.trackBeforeUpdated(fromEl, toEl);
               dom_default.mergeFocusedInput(fromEl, toEl);
               dom_default.syncAttrsToProps(fromEl);
               updates.push(fromEl);
@@ -2556,15 +2621,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               }
               dom_default.syncAttrsToProps(toEl);
               dom_default.applyStickyOperations(toEl);
-              this.trackBefore("updated", fromEl, toEl);
+              this.trackBeforeUpdated(fromEl, toEl);
               return fromEl;
             }
           }
         };
         morphdom_esm_default(targetContainer2, source, morphCallbacks);
       };
-      this.trackBefore("added", container);
-      this.trackBefore("updated", container, container);
+      this.trackBeforeUpdated(container, container);
       liveSocket.time("morphdom", () => {
         this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
           inserts.forEach(([key, streamAt, limit, updateOnly]) => {
@@ -2600,13 +2664,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         this.view.portalElementIds.forEach((id) => {
           const el = document.getElementById(id);
           if (el) {
-            const source = document.getElementById(
-              el.getAttribute(PHX_TELEPORTED_SRC)
-            );
-            if (!source) {
-              el.remove();
-              this.onNodeDiscarded(el);
-              this.view.dropPortalElementId(id);
+            const srcId = el.getAttribute(PHX_TELEPORTED_SRC);
+            if (srcId) {
+              const source = document.getElementById(srcId);
+              if (!source) {
+                el.remove();
+                this.onNodeDiscarded(el);
+                this.view.dropPortalElementId(id);
+              }
             }
           }
         });
@@ -2634,8 +2699,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         () => dom_default.restoreFocus(focused, selectionStart, selectionEnd)
       );
       dom_default.dispatchEvent(document, "phx:update");
-      added.forEach((el) => this.trackAfter("added", el));
-      updates.forEach((el) => this.trackAfter("updated", el));
+      added.forEach((el) => this.trackAfterAdded(el));
+      updates.forEach((el) => this.trackAfterUpdated(el));
       this.transitionPendingRemoves();
       if (externalFormTriggered) {
         liveSocket.unload();
@@ -2657,11 +2722,29 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       return true;
     }
+    trackBeforeUpdated(fromEl, toEl) {
+      this.beforeUpdatedCallbacks.forEach((cb) => cb(fromEl, toEl));
+    }
+    trackAfterAdded(el) {
+      this.afterAddedCallbacks.forEach((cb) => cb(el));
+    }
+    trackAfterUpdated(el) {
+      this.afterUpdatedCallbacks.forEach((cb) => cb(el));
+    }
+    trackAfterPhxChildAdded(el) {
+      this.afterPhxChildAddedCallbacks.forEach((cb) => cb(el));
+    }
+    trackAfterDiscarded(el) {
+      this.afterDiscardedCallbacks.forEach((cb) => cb(el));
+    }
+    trackAfterTransitionsDiscarded(els) {
+      this.afterTransitionsDiscardedCallbacks.forEach((cb) => cb(els));
+    }
     onNodeDiscarded(el) {
       if (dom_default.isPhxChild(el) || dom_default.isPhxSticky(el)) {
         this.liveSocket.destroyViewByEl(el);
       }
-      this.trackAfter("discarded", el);
+      this.trackAfterDiscarded(el);
     }
     maybePendingRemove(node) {
       if (node.getAttribute && node.getAttribute(this.phxRemove) !== null) {
@@ -2696,7 +2779,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         (el2) => el2.setAttribute(PHX_STREAM_REF, ref)
       );
     }
-    maybeReOrderStream(el, isNew) {
+    maybeReOrderStream(el, isNew = false) {
       const { ref, streamAt, reset } = this.getStreamInsert(el);
       if (streamAt === void 0) {
         return;
@@ -2752,11 +2835,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
     maybeLimitStream(el) {
       const { limit } = this.getStreamInsert(el);
-      const children = limit !== null && Array.from(el.parentElement.children);
-      if (limit && limit < 0 && children.length > limit * -1) {
-        children.slice(0, children.length + limit).forEach((child) => this.removeStreamChildElement(child));
-      } else if (limit && limit >= 0 && children.length > limit) {
-        children.slice(limit).forEach((child) => this.removeStreamChildElement(child));
+      if (limit !== null) {
+        const children = Array.from(el.parentElement.children);
+        if (limit < 0 && children.length > limit * -1) {
+          children.slice(0, children.length + limit).forEach((child) => this.removeStreamChildElement(child));
+        } else if (limit >= 0 && children.length > limit) {
+          children.slice(limit).forEach((child) => this.removeStreamChildElement(child));
+        }
       }
     }
     transitionPendingRemoves() {
@@ -2770,7 +2855,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
             el.remove();
           });
-          this.trackAfter("transitionsDiscarded", pendingRemoves);
+          this.trackAfterTransitionsDiscarded(pendingRemoves);
         });
       }
     }
@@ -2784,9 +2869,6 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       toEl.value = fromEl.value;
       return !fromEl.isEqualNode(toEl);
     }
-    isCIDPatch() {
-      return this.cidPatch;
-    }
     skipCIDSibling(el) {
       return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);
     }
@@ -2794,7 +2876,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       if (!fromEl.hasAttribute(PHX_REF_SRC))
         return fromEl;
       const ref = new ElementRef(fromEl);
-      if (ref.lockRef === null || this.undoRef !== void 0 && ref.isLockUndoneBy(this.undoRef)) {
+      if (!fromEl.hasAttribute(PHX_REF_LOCK) || this.undoRef !== null && ref.isLockUndoneBy(this.undoRef)) {
         return fromEl;
       }
       dom_default.applyStickyOperations(fromEl);
@@ -2805,24 +2887,10 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return isFocusedFormEl ? fromEl : clone2;
     }
     copyNestedPrivateLock(fromEl, toEl) {
-      if (this.undoRef === void 0 || !dom_default.private(toEl, PHX_REF_LOCK))
+      if (this.undoRef === null || !dom_default.private(toEl, PHX_REF_LOCK))
         return;
       dom_default.putPrivate(fromEl, PHX_REF_LOCK, dom_default.private(toEl, PHX_REF_LOCK));
     }
-    targetCIDContainer(html) {
-      if (!this.isCIDPatch()) {
-        return;
-      }
-      const [first, ...rest] = dom_default.findComponentNodeList(
-        this.view.id,
-        this.targetCID
-      );
-      if (rest.length === 0 && dom_default.childNodeLength(html) === 1) {
-        return first;
-      } else {
-        return first && first.parentNode;
-      }
-    }
     indexOf(parent, child) {
       return Array.from(parent.children).indexOf(child);
     }
@@ -2862,12 +2930,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.view.pushPortalElementId(toTeleport.id);
     }
     handleRuntimeHook(el, source) {
+      var _a, _b;
       const name = el.getAttribute(PHX_RUNTIME_HOOK);
       let nonce = el.hasAttribute("nonce") ? el.getAttribute("nonce") : null;
       if (el.hasAttribute("nonce")) {
         const template = document.createElement("template");
         template.innerHTML = source;
-        nonce = template.content.querySelector(`script[${PHX_RUNTIME_HOOK}="${CSS.escape(name)}"]`).getAttribute("nonce");
+        nonce = (_b = (_a = template.content.querySelector(`script[${PHX_RUNTIME_HOOK}="${CSS.escape(name)}"]`)) == null ? void 0 : _a.getAttribute("nonce")) != null ? _b : null;
       }
       const script = document.createElement("script");
       script.textContent = el.textContent;
@@ -3389,7 +3458,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
         if (eventType === "change") {
           let { newCid, _target } = args;
-          _target = _target || (dom_default.isFormInput(sourceEl) ? sourceEl.name : void 0);
+          _target = _target || (dom_default.isFormAssociated(sourceEl) ? sourceEl.name : void 0);
           if (_target) {
             pushOpts._target = _target;
           }
@@ -3903,6 +3972,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       },
       navigate(href, opts = {}) {
+        ensureSameOrigin(href, "navigate");
         const customEvent = new CustomEvent("phx:exec");
         liveSocket.historyRedirect(
           customEvent,
@@ -3913,6 +3983,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         );
       },
       patch(href, opts = {}) {
+        ensureSameOrigin(href, "patch");
         const customEvent = new CustomEvent("phx:exec");
         liveSocket.pushHistoryPatch(
           customEvent,
@@ -3935,15 +4006,19 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     get liveSocket() {
       return this.__liveSocket();
     }
+    /** @internal */
     static makeID() {
       return viewHookID++;
     }
+    /** @internal */
     static elementID(el) {
       return dom_default.private(el, HOOK_ID);
     }
+    /** @internal */
     static deadHook(el) {
       return dom_default.private(el, DEAD_HOOK) === true;
     }
+    /** @internal */
     constructor(view, el, callbacks) {
       this.el = el;
       this.__attachView(view);
@@ -4097,7 +4172,12 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           }
         );
         const promises = targetPair.map(({ view, targetCtx }) => {
-          return view.pushHookEvent(this.el, targetCtx, event, payload || {});
+          return view.pushHookEvent(
+            this.el,
+            targetCtx,
+            event,
+            payload || {}
+          );
         });
         return Promise.allSettled(promises);
       }
@@ -4149,7 +4229,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
   };
 
-  // js/phoenix_live_view/view.js
+  // js/phoenix_live_view/view.ts
   var prependFormDataKey = (key, prefix) => {
     const isArray = key.endsWith("[]");
     let baseKey = isArray ? key.slice(0, -2) : key;
@@ -4164,7 +4244,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       const liveViewEl = el.closest(PHX_VIEW_SELECTOR);
       return liveViewEl ? dom_default.private(liveViewEl, "view") : null;
     }
-    constructor(el, liveSocket, parentView, flash, liveReferer) {
+    constructor(el, liveSocket, parentView, flash = null, liveReferer = null) {
+      this.rendered = null;
       this.isDead = false;
       this.liveSocket = liveSocket;
       this.flash = flash;
@@ -4213,6 +4294,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.root.children[this.id] = {};
       this.formsForRecovery = {};
       this.channel = this.liveSocket.channel(`lv:${this.id}`, () => {
+        var _a;
         const url = this.href && this.expandURL(this.href);
         return {
           redirect: this.redirect ? url : void 0,
@@ -4220,7 +4302,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           params: this.connectParams(liveReferer),
           session: this.getSession(),
           static: this.getStatic(),
-          flash: this.flash,
+          flash: (_a = this.flash) != null ? _a : void 0,
           sticky: this.el.hasAttribute(PHX_STICKY)
         };
       });
@@ -4238,13 +4320,15 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
     connectParams(liveReferer) {
       const params = this.liveSocket.params(this.el);
-      const manifest = dom_default.all(document, `[${this.binding(PHX_TRACK_STATIC)}]`).map((node) => node.src || node.href).filter((url) => typeof url === "string");
+      const manifest = dom_default.all(document, `[${this.binding(PHX_TRACK_STATIC)}]`).map(
+        (node) => "src" in node && node.src || "href" in node && node.href
+      ).filter((url) => typeof url === "string");
       if (manifest.length > 0) {
         params["_track_static"] = manifest;
       }
       params["_mounts"] = this.joinCount;
       params["_mount_attempts"] = this.joinAttempts;
-      params["_live_referer"] = liveReferer;
+      params["_live_referer"] = liveReferer != null ? liveReferer : void 0;
       this.joinAttempts++;
       return params;
     }
@@ -4268,7 +4352,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       if (this.parent) {
         delete this.root.children[this.parent.id][this.id];
       }
-      clearTimeout(this.loaderTimer);
+      this.loaderTimer != null && clearTimeout(this.loaderTimer);
       const onFinished = () => {
         callback();
         for (const id in this.viewHooks) {
@@ -4290,7 +4374,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.el.classList.add(...classes);
     }
     showLoader(timeout) {
-      clearTimeout(this.loaderTimer);
+      this.loaderTimer != null && clearTimeout(this.loaderTimer);
       if (timeout) {
         this.loaderTimer = setTimeout(() => this.showLoader(), timeout);
       } else {
@@ -4308,8 +4392,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       );
     }
     hideLoader() {
-      clearTimeout(this.loaderTimer);
-      clearTimeout(this.disconnectedTimer);
+      this.loaderTimer != null && clearTimeout(this.loaderTimer);
+      this.disconnectedTimer != null && clearTimeout(this.disconnectedTimer);
       this.setContainerClasses(PHX_CONNECTED_CLASS);
       this.execAll(this.binding("connected"));
     }
@@ -4339,11 +4423,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         );
       }
       if (isCid(phxTarget)) {
-        const targets = dom_default.findComponentNodeList(this.id, phxTarget, dom);
-        if (targets.length === 0) {
+        const target = dom_default.findComponent(this.id, phxTarget, dom);
+        if (!target) {
           logError(`no component found matching phx-target of ${phxTarget}`);
         } else {
-          callback(this, parseInt(phxTarget));
+          callback(
+            this,
+            typeof phxTarget === "number" ? phxTarget : parseInt(phxTarget)
+          );
         }
       } else {
         const targets = Array.from(dom.querySelectorAll(phxTarget));
@@ -4470,7 +4557,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
     }
     attachTrueDocEl() {
-      this.el = dom_default.byId(this.id);
+      const el = dom_default.byId(this.id);
+      if (!el) {
+        throw new Error("unable to find root element for view");
+      }
+      this.el = el;
       this.el.setAttribute(PHX_ROOT_ID, this.root.id);
     }
     // this is invoked for dead and live views, so we must filter by
@@ -4519,7 +4610,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       }
       this.attachTrueDocEl();
-      const patch = new DOMPatch(this, this.el, this.id, html, streams, null);
+      const patch = new DOMPatch(this, this.el, html, streams, null);
       patch.markPrunableContentForRemoval();
       this.performPatch(patch, false, true);
       this.joinNewChildren();
@@ -4565,7 +4656,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let phxChildrenAdded = false;
       const updatedHookIds = /* @__PURE__ */ new Set();
       this.liveSocket.triggerDOM("onPatchStart", [patch.targetContainer]);
-      patch.after("added", (el) => {
+      patch.afterAdded((el) => {
         this.liveSocket.triggerDOM("onNodeAdded", [el]);
         const phxViewportTop = this.binding(PHX_VIEWPORT_TOP);
         const phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM);
@@ -4575,33 +4666,32 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           this.maybeMounted(el);
         }
       });
-      patch.after("phxChildAdded", (el) => {
+      patch.afterPhxChildAdded((el) => {
         if (dom_default.isPhxSticky(el)) {
           this.liveSocket.joinRootViews();
         } else {
           phxChildrenAdded = true;
         }
       });
-      patch.before("updated", (fromEl, toEl) => {
+      patch.beforeUpdated((fromEl, toEl) => {
         const hook = this.triggerBeforeUpdateHook(fromEl, toEl);
         if (hook) {
           updatedHookIds.add(fromEl.id);
         }
         js_default.onBeforeElUpdated(fromEl, toEl);
       });
-      patch.after("updated", (el) => {
+      patch.afterUpdated((el) => {
         if (updatedHookIds.has(el.id)) {
           const hook = this.getHook(el);
           hook && hook.__updated();
         }
       });
-      patch.after("discarded", (el) => {
+      patch.afterDiscarded((el) => {
         if (el.nodeType === Node.ELEMENT_NODE) {
           removedEls.push(el);
         }
       });
-      patch.after(
-        "transitionsDiscarded",
+      patch.afterTransitionsDiscarded(
         (els) => this.afterElementsRemoved(els, pruneCids)
       );
       patch.perform(isJoinPatch);
@@ -4639,12 +4729,20 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       dom_default.findPhxChildren(document, this.id).forEach((el) => this.joinChild(el));
     }
     maybeRecoverForms(html, callback) {
+      var _a;
       const phxChange = this.binding("change");
       const oldForms = this.root.formsForRecovery;
       const template = document.createElement("template");
       template.innerHTML = html;
+      if (!template.content.firstElementChild) {
+        return;
+      }
       dom_default.all(template.content, `[${PHX_PORTAL}]`).forEach((portalTemplate) => {
-        template.content.firstElementChild.appendChild(
+        var _a2;
+        if (!(portalTemplate instanceof HTMLTemplateElement)) {
+          return;
+        }
+        (_a2 = template.content.firstElementChild) == null ? void 0 : _a2.appendChild(
           portalTemplate.content.firstElementChild
         );
       });
@@ -4652,8 +4750,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       rootEl.id = this.id;
       rootEl.setAttribute(PHX_ROOT_ID, this.root.id);
       rootEl.setAttribute(PHX_SESSION, this.getSession());
-      rootEl.setAttribute(PHX_STATIC, this.getStatic());
-      rootEl.setAttribute(PHX_PARENT_ID, this.parent ? this.parent.id : null);
+      rootEl.setAttribute(PHX_STATIC, (_a = this.getStatic()) != null ? _a : "");
+      this.parent && rootEl.setAttribute(PHX_PARENT_ID, this.parent.id);
       const formsToRecover = (
         // we go over all forms in the new DOM; because this is only the HTML for the current
         // view, we can be sure that all forms are owned by this view:
@@ -4689,7 +4787,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       if (el.id === this.id) {
         return this;
       } else {
-        return (_a = this.children[el.getAttribute(PHX_PARENT_ID)]) == null ? void 0 : _a[el.id];
+        return this.children && ((_a = this.children[el.getAttribute(PHX_PARENT_ID)]) == null ? void 0 : _a[el.id]);
       }
     }
     destroyDescendent(id) {
@@ -4763,7 +4861,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       } else if (!isEmpty(diff)) {
         this.liveSocket.time("full patch complete", () => {
           const [html, streams] = this.renderContainer(diff, "update");
-          const patch = new DOMPatch(this, this.el, this.id, html, streams, null);
+          const patch = new DOMPatch(this, this.el, html, streams, null);
           phxChildrenAdded = this.performPatch(patch, true);
         });
       }
@@ -4785,7 +4883,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       if (isEmpty(diff))
         return false;
       const { buffer: html, streams } = this.rendered.componentToString(cid);
-      const patch = new DOMPatch(this, this.el, this.id, html, streams, cid);
+      const patch = new DOMPatch(this, this.el, html, streams, cid);
       const childrenAdded = this.performPatch(patch, true);
       return childrenAdded;
     }
@@ -4915,11 +5013,12 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     expandURL(to) {
       return to.startsWith("/") ? `${window.location.protocol}//${window.location.host}${to}` : to;
     }
-    /**
-     * @param {{to: string, flash?: string, reloadToken?: string}} redirect
-     */
-    onRedirect({ to, flash, reloadToken }) {
-      this.liveSocket.redirect(to, flash, reloadToken);
+    onRedirect({
+      to,
+      flash,
+      reloadToken
+    }) {
+      this.liveSocket.redirect(to, flash != null ? flash : null, reloadToken != null ? reloadToken : null);
     }
     isDestroyed() {
       return this.destroyed;
@@ -4927,10 +5026,6 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     joinDead() {
       this.isDead = true;
     }
-    joinPush() {
-      this.joinPush = this.joinPush || this.channel.join();
-      return this.joinPush;
-    }
     join(callback) {
       this.showLoader(this.liveSocket.loaderTimeout);
       this.bindChannel();
@@ -4952,6 +5047,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       });
     }
     onJoinError(resp) {
+      if (resp.events) {
+        this.liveSocket.dispatchEvents(resp.events);
+      }
       if (resp.reason === "reload") {
         this.log("error", () => [
           `failed mount with ${resp.status}. Falling back to page reload`,
@@ -5169,7 +5267,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     undoElRef(el, ref, phxEvent) {
       const elRef = new ElementRef(el);
       elRef.maybeUndo(ref, phxEvent, (clonedTree) => {
-        const patch = new DOMPatch(this, el, this.id, clonedTree, [], null, {
+        const patch = new DOMPatch(this, el, clonedTree, /* @__PURE__ */ new Set(), null, {
           undoRef: ref
         });
         const phxChildrenAdded = this.performPatch(patch, true);
@@ -5201,10 +5299,10 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
         el.setAttribute(PHX_REF_SRC, this.refSrc());
         if (loading) {
-          el.setAttribute(PHX_REF_LOADING, newRef);
+          el.setAttribute(PHX_REF_LOADING, newRef.toString());
         }
         if (lock) {
-          el.setAttribute(PHX_REF_LOCK, newRef);
+          el.setAttribute(PHX_REF_LOCK, newRef.toString());
         }
         if (!loading || opts.submitter && !(el === opts.submitter || el === opts.form)) {
           continue;
@@ -5225,14 +5323,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         const disableText = el.getAttribute(disableWith);
         if (disableText !== null) {
           if (!el.getAttribute(PHX_DISABLE_WITH_RESTORE)) {
-            el.setAttribute(PHX_DISABLE_WITH_RESTORE, el.textContent);
+            el.setAttribute(PHX_DISABLE_WITH_RESTORE, el.textContent || "");
           }
           if (disableText !== "") {
             el.textContent = disableText;
           }
           el.setAttribute(
             PHX_DISABLED,
-            el.getAttribute(PHX_DISABLED) || el.disabled
+            el.getAttribute(PHX_DISABLED) || ("disabled" in el ? String(el.disabled) : "")
           );
           el.setAttribute("disabled", "");
         }
@@ -5306,7 +5404,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       const cidOrSelector = opts.target || target.getAttribute(this.binding("target"));
       if (isCid(cidOrSelector)) {
-        return parseInt(cidOrSelector);
+        return typeof cidOrSelector === "number" ? cidOrSelector : parseInt(cidOrSelector);
       } else if (targetCtx && (cidOrSelector !== null || opts.target)) {
         return this.closestComponentID(targetCtx);
       } else {
@@ -5356,7 +5454,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         event,
         value: payload,
         cid: this.closestComponentID(targetCtx)
-      }).then(({ resp: _resp, reply, ref }) => ({ reply, ref }));
+      }).then(
+        ({ resp: _resp, reply, ref }) => ({ reply, ref })
+      );
     }
     extractMeta(el, meta, value) {
       const prefix = this.binding("value-");
@@ -5388,7 +5488,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       return meta;
     }
-    serializeForm(form, opts, onlyNames = []) {
+    serializeForm(form, opts = {}, onlyNames = []) {
       const { submitter } = opts;
       let injectedElement;
       if (submitter && submitter.name) {
@@ -5414,6 +5514,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       const params = new URLSearchParams();
       const { inputsUnused, onlyHiddenInputs } = Array.from(form.elements).reduce(
         (acc, input) => {
+          if (!dom_default.isFormAssociated(input)) {
+            return acc;
+          }
           const { inputsUnused: inputsUnused2, onlyHiddenInputs: onlyHiddenInputs2 } = acc;
           const key = input.name;
           if (!key) {
@@ -5600,27 +5703,30 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         return el.hasAttribute(this.binding(PHX_DISABLE_WITH));
       };
       const filterButton = (el) => el.tagName == "BUTTON";
-      const filterInput = (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
+      const filterInput = (el) => ["INPUT", "TEXTAREA"].includes(el.tagName);
       const formElements = Array.from(formEl.elements);
       const disables = formElements.filter(filterDisables);
       const buttons = formElements.filter(filterButton).filter(filterIgnored);
       const inputs = formElements.filter(filterInput).filter(filterIgnored);
       buttons.forEach((button) => {
-        button.setAttribute(PHX_DISABLED, button.disabled);
+        button.setAttribute(PHX_DISABLED, button.disabled.toString());
         button.disabled = true;
       });
       inputs.forEach((input) => {
-        input.setAttribute(PHX_READONLY, input.readOnly);
+        input.setAttribute(PHX_READONLY, input.readOnly.toString());
         input.readOnly = true;
-        if (input.files) {
-          input.setAttribute(PHX_DISABLED, input.disabled);
+        if (input instanceof HTMLInputElement && input.files) {
+          input.setAttribute(PHX_DISABLED, input.disabled.toString());
           input.disabled = true;
         }
       });
       const formEls = disables.concat(buttons).concat(inputs).map((el) => {
         return { el, loading: true, lock: true };
       });
-      const els = [{ el: formEl, loading: true, lock: false }].concat(formEls).reverse();
+      const els = [
+        { el: formEl, loading: true, lock: false },
+        ...formEls
+      ].reverse();
       return this.putRef(els, phxEvent, "submit", opts);
     }
     pushFormSubmit(formEl, targetCtx, phxEvent, submitter, opts, onReply) {
@@ -5751,7 +5857,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
     targetCtxElement(targetCtx) {
       if (isCid(targetCtx)) {
-        const [target] = dom_default.findComponentNodeList(this.id, targetCtx);
+        const target = dom_default.findComponent(this.id, targetCtx);
         return target;
       } else if (targetCtx) {
         return targetCtx;
@@ -5764,7 +5870,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       const phxTarget = newForm.getAttribute(this.binding("target")) || newForm;
       const phxEvent = newForm.getAttribute(this.binding(PHX_AUTO_RECOVER)) || newForm.getAttribute(this.binding("change"));
       const inputs = Array.from(oldForm.elements).filter(
-        (el) => dom_default.isFormInput(el) && el.name && !el.hasAttribute(phxChange)
+        (el) => dom_default.isFormAssociated(el) && el.name && !el.hasAttribute(phxChange)
       );
       if (inputs.length === 0) {
         callback();
@@ -5810,7 +5916,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         null,
         "click"
       ) : null;
-      const fallback = () => this.liveSocket.redirect(window.location.href);
+      const fallback = () => this.liveSocket.redirect(window.location.href, null, null);
       const url = href.startsWith("/") ? `${location.protocol}//${location.host}${href}` : href;
       this.pushWithReply(refGen, "live_patch", { url }).then(
         ({ resp }) => {
@@ -5839,14 +5945,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return dom_default.all(
         document,
         `#${CSS.escape(this.id)} form[${phxChange}], [${PHX_TELEPORTED_REF}="${CSS.escape(this.id)}"] form[${phxChange}]`
-      ).filter((form) => form.id).filter((form) => form.elements.length > 0).filter(
+      ).filter((form) => form instanceof HTMLFormElement).filter((form) => form.id).filter((form) => form.elements.length > 0).filter(
         (form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore"
       ).map((form) => {
         const clonedForm = form.cloneNode(true);
         morphdom_esm_default(clonedForm, form, {
           onBeforeElUpdated: (fromEl, toEl) => {
             dom_default.copyPrivates(fromEl, toEl);
-            if (fromEl.getAttribute("form") === form.id) {
+            if (fromEl.getAttribute("form") === form.id && fromEl.parentNode) {
               fromEl.parentNode.removeChild(fromEl);
               return false;
             }
@@ -5857,10 +5963,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           `[form="${CSS.escape(form.id)}"]`
         );
         Array.from(externalElements).forEach((el) => {
-          const clonedEl = (
-            /** @type {HTMLElement} */
-            el.cloneNode(true)
-          );
+          const clonedEl = el.cloneNode(true);
           morphdom_esm_default(clonedEl, el);
           dom_default.copyPrivates(clonedEl, el);
           clonedEl.removeAttribute("form");
@@ -5874,7 +5977,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
     maybePushComponentsDestroyed(destroyedCIDs) {
       let willDestroyCIDs = destroyedCIDs.filter((cid) => {
-        return dom_default.findComponentNodeList(this.id, cid).length === 0;
+        return dom_default.findComponent(this.id, cid) === null;
       });
       const onError = (error) => {
         if (!this.isDestroyed()) {
@@ -5886,7 +5989,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         this.pushWithReply(null, "cids_will_destroy", { cids: willDestroyCIDs }).then(() => {
           this.liveSocket.requestDOMUpdate(() => {
             let completelyDestroyCIDs = willDestroyCIDs.filter((cid) => {
-              return dom_default.findComponentNodeList(this.id, cid).length === 0;
+              return dom_default.findComponent(this.id, cid) === null;
             });
             if (completelyDestroyCIDs.length > 0) {
               this.pushWithReply(null, "cids_destroyed", {
@@ -5907,7 +6010,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       dom_default.putPrivate(form, PHX_HAS_SUBMITTED, true);
       const inputs = Array.from(form.elements);
       inputs.forEach((input) => dom_default.putPrivate(input, PHX_HAS_SUBMITTED, true));
-      this.liveSocket.blurActiveElement(this);
+      this.liveSocket.blurActiveElement();
       this.pushFormSubmit(form, targetCtx, phxEvent, submitter, opts, () => {
         this.liveSocket.restorePreviouslyActiveFocus();
       });
@@ -5934,10 +6037,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
   };
 
-  // js/phoenix_live_view/live_socket.js
+  // js/phoenix_live_view/live_socket.ts
   var isUsedInput = (el) => dom_default.isUsedInput(el);
   var LiveSocket = class {
+    /**
+     * Creates a new LiveSocket instance.
+     */
     constructor(url, phxSocket, opts = {}) {
+      /** @internal */
       this.unloaded = false;
       if (!phxSocket || phxSocket.constructor.name === "Object") {
         throw new Error(`
@@ -5950,7 +6057,6 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       this.socket = new phxSocket(url, opts);
       this.bindingPrefix = opts.bindingPrefix || BINDING_PREFIX;
-      this.opts = opts;
       this.params = closure(opts.params || {});
       this.viewLogger = opts.viewLogger;
       this.metadataCallbacks = opts.metadata || {};
@@ -5991,7 +6097,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         opts.dom || {}
       );
       this.transitions = new TransitionSet();
-      this.currentHistoryPosition = parseInt(this.sessionStorage.getItem(PHX_LV_HISTORY_POSITION)) || 0;
+      this.currentHistoryPosition = parseInt(this.sessionStorage.getItem(PHX_LV_HISTORY_POSITION) || "0") || 0;
       window.addEventListener("pagehide", (_e) => {
         this.unloaded = true;
       });
@@ -6002,47 +6108,94 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       });
     }
     // public
+    /**
+     * Returns the version of the LiveView client.
+     */
     version() {
-      return "1.2.0-rc.2";
+      return "1.2.0";
     }
+    /**
+     * Returns true if profiling is enabled. See {@link enableProfiling} and {@link disableProfiling}.
+     */
     isProfileEnabled() {
       return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
     }
+    /**
+     * Returns true if debugging is enabled. See {@link enableDebug} and {@link disableDebug}.
+     */
     isDebugEnabled() {
       return this.sessionStorage.getItem(PHX_LV_DEBUG) === "true";
     }
+    /**
+     * Returns true if debugging is disabled. See {@link enableDebug} and {@link disableDebug}.
+     */
     isDebugDisabled() {
       return this.sessionStorage.getItem(PHX_LV_DEBUG) === "false";
     }
+    /**
+     * Enables debugging.
+     *
+     * When debugging is enabled, the LiveView client will log debug information to the console.
+     * See [Debugging client events](https://phoenix-live-view.hexdocs.pm/js-interop.html#debugging-client-events) for more information.
+     */
     enableDebug() {
       this.sessionStorage.setItem(PHX_LV_DEBUG, "true");
     }
+    /**
+     * Enables profiling.
+     *
+     * When profiling is enabled, the LiveView client will log profiling information to the console.
+     */
     enableProfiling() {
       this.sessionStorage.setItem(PHX_LV_PROFILE, "true");
     }
+    /**
+     * Disables debugging.
+     */
     disableDebug() {
       this.sessionStorage.setItem(PHX_LV_DEBUG, "false");
     }
+    /**
+     * Disables profiling.
+     */
     disableProfiling() {
       this.sessionStorage.removeItem(PHX_LV_PROFILE);
     }
+    /**
+     * Enables latency simulation.
+     *
+     * When latency simulation is enabled, the LiveView client will add a delay to requests and responses from the server.
+     * See [Simulating Latency](https://phoenix-live-view.hexdocs.pm/js-interop.html#simulating-latency) for more information.
+     */
     enableLatencySim(upperBoundMs) {
       this.enableDebug();
       console.log(
         "latency simulator enabled for the duration of this browser session. Call disableLatencySim() to disable"
       );
-      this.sessionStorage.setItem(PHX_LV_LATENCY_SIM, upperBoundMs);
+      this.sessionStorage.setItem(PHX_LV_LATENCY_SIM, upperBoundMs.toString());
     }
+    /**
+     * Disables latency simulation.
+     */
     disableLatencySim() {
       this.sessionStorage.removeItem(PHX_LV_LATENCY_SIM);
     }
+    /**
+     * Returns the current latency simulation upper bound.
+     */
     getLatencySim() {
       const str = this.sessionStorage.getItem(PHX_LV_LATENCY_SIM);
       return str ? parseInt(str) : null;
     }
+    /**
+     * Returns the Phoenix Socket instance.
+     */
     getSocket() {
       return this.socket;
     }
+    /**
+     * Connects to the LiveView server.
+     */
     connect() {
       if (window.location.hostname === "localhost" && !this.isDebugDisabled()) {
         this.enableDebug();
@@ -6065,23 +6218,29 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         document.addEventListener("DOMContentLoaded", () => doConnect());
       }
     }
+    /**
+     * Disconnects from the LiveView server.
+     */
     disconnect(callback) {
-      clearTimeout(this.reloadWithJitterTimer);
+      this.reloadWithJitterTimer != null && clearTimeout(this.reloadWithJitterTimer);
       if (this.serverCloseRef) {
-        this.socket.off(this.serverCloseRef);
+        this.socket.off([this.serverCloseRef]);
         this.serverCloseRef = null;
       }
       this.socket.disconnect(callback);
     }
+    /**
+     * Can be used to replace the transport used by the underlying Phoenix Socket.
+     */
     replaceTransport(transport) {
-      clearTimeout(this.reloadWithJitterTimer);
+      this.reloadWithJitterTimer != null && clearTimeout(this.reloadWithJitterTimer);
       this.socket.replaceTransport(transport);
       this.connect();
     }
     /**
-     * @param {HTMLElement} el
-     * @param {import("./js_commands").EncodedJS} encodedJS
-     * @param {string | null} [eventType]
+     * Executes an encoded JS command, targeting the given element.
+     *
+     * See [`Phoenix.LiveView.JS`](https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.JS.html) for more information.
      */
     execJS(el, encodedJS, eventType = null) {
       const e = new CustomEvent("phx:exec", { detail: { sourceElement: el } });
@@ -6091,12 +6250,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
      * Returns an object with methods to manipulate the DOM and execute JavaScript.
      * The applied changes integrate with server DOM patching.
      *
-     * @returns {import("./js_commands").LiveSocketJSCommands}
+     * See [JavaScript interoperability](https://phoenix-live-view.hexdocs.pm/js-interop.html) for more information.
      */
     js() {
       return js_commands_default(this, "js");
     }
     // private
+    /** @internal */
     unload() {
       if (this.unloaded) {
         return;
@@ -6108,9 +6268,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.destroyAllViews();
       this.disconnect();
     }
+    /** @internal */
     triggerDOM(kind, args) {
       this.domCallbacks[kind](...args);
     }
+    /** @internal */
     time(name, func) {
       if (!this.isProfileEnabled() || !console.time) {
         return func();
@@ -6120,6 +6282,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       console.timeEnd(name);
       return result;
     }
+    /** @internal */
     log(view, kind, msgCallback) {
       if (this.viewLogger) {
         const [msg, obj] = msgCallback();
@@ -6129,16 +6292,20 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         debug(view, kind, msg, obj);
       }
     }
+    /** @internal */
     requestDOMUpdate(callback) {
       this.transitions.after(callback);
     }
+    /** @internal */
     asyncTransition(promise) {
       this.transitions.addAsyncTransition(promise);
     }
+    /** @internal */
     transition(time, onStart, onDone = function() {
     }) {
       this.transitions.addTransition(time, onStart, onDone);
     }
+    /** @internal */
     onChannel(channel, event, cb) {
       channel.on(event, (data) => {
         const latency = this.getLatencySim();
@@ -6149,8 +6316,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
     }
+    /** @internal */
     reloadWithJitter(view, log) {
-      clearTimeout(this.reloadWithJitterTimer);
+      this.reloadWithJitterTimer != null && clearTimeout(this.reloadWithJitterTimer);
       this.disconnect();
       const minMs = this.reloadJitterMin;
       const maxMs = this.reloadJitterMax;
@@ -6178,22 +6346,25 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             `exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`
           ]);
         }
-        if (this.hasPendingLink()) {
-          window.location = this.pendingLink;
+        if (this.pendingLink !== null) {
+          window.location.href = this.pendingLink;
         } else {
           window.location.reload();
         }
       }, afterMs);
     }
+    /** @internal */
     getHookDefinition(name) {
       if (!name) {
         return;
       }
       return this.maybeInternalHook(name) || this.hooks[name] || this.maybeRuntimeHook(name);
     }
+    /** @internal */
     maybeInternalHook(name) {
       return name && name.startsWith("Phoenix.") && hooks_default[name.split(".")[1]];
     }
+    /** @internal */
     maybeRuntimeHook(name) {
       const runtimeHook = document.querySelector(
         `script[${PHX_RUNTIME_HOOK}="${CSS.escape(name)}"]`
@@ -6215,21 +6386,27 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         runtimeHook
       );
     }
+    /** @internal */
     isUnloaded() {
       return this.unloaded;
     }
+    /** @internal */
     isConnected() {
       return this.socket.isConnected();
     }
+    /** @internal */
     getBindingPrefix() {
       return this.bindingPrefix;
     }
+    /** @internal */
     binding(kind) {
       return `${this.getBindingPrefix()}${kind}`;
     }
+    /** @internal */
     channel(topic, params) {
       return this.socket.channel(topic, params);
     }
+    /** @internal */
     joinDeadView() {
       const body = document.body;
       if (body && !this.isPhxView(body) && !this.isPhxView(document.firstElementChild)) {
@@ -6246,6 +6423,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       }
     }
+    /** @internal */
     joinRootViews() {
       let rootsFound = false;
       dom_default.all(
@@ -6267,6 +6445,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       );
       return rootsFound;
     }
+    /** @internal */
     redirect(to, flash, reloadToken) {
       if (reloadToken) {
         browser_default.setCookie(PHX_RELOAD_STATUS, reloadToken, 60);
@@ -6274,7 +6453,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.unload();
       browser_default.redirect(to, flash);
     }
+    /** @internal */
     replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)) {
+      if (!this.main) {
+        return;
+      }
       const liveReferer = this.currentLocation.href;
       this.outgoingMainEl = this.outgoingMainEl || this.main.el;
       const stickies = dom_default.findPhxSticky(document) || [];
@@ -6301,6 +6484,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
     }
+    /** @internal */
     transitionRemoves(elements, callback) {
       const removeAttr = this.binding("remove");
       const silenceEvents = (e) => {
@@ -6322,14 +6506,17 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         callback && callback();
       });
     }
+    /** @internal */
     isPhxView(el) {
       return el.getAttribute && el.getAttribute(PHX_SESSION) !== null;
     }
+    /** @internal */
     newRootView(el, flash, liveReferer) {
       const view = new View(el, this, null, flash, liveReferer);
       this.roots[view.id] = view;
       return view;
     }
+    /** @internal */
     owner(childEl, callback) {
       let view;
       const viewEl = dom_default.closestViewEl(childEl);
@@ -6343,9 +6530,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       return view && callback ? callback(view) : view;
     }
+    /** @internal */
     withinOwners(childEl, callback) {
       this.owner(childEl, (view) => callback(view, childEl));
     }
+    /** @internal */
     getViewByEl(el) {
       const rootId = el.getAttribute(PHX_ROOT_ID);
       return maybe(
@@ -6353,9 +6542,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         (root) => root.getDescendentByEl(el)
       );
     }
+    /** @internal */
     getRootById(id) {
       return this.roots[id];
     }
+    /** @internal */
     destroyAllViews() {
       for (const id in this.roots) {
         this.roots[id].destroy();
@@ -6363,6 +6554,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       this.main = null;
     }
+    /** @internal */
     destroyViewByEl(el) {
       const root = this.getRootById(el.getAttribute(PHX_ROOT_ID));
       if (root && root.id === el.id) {
@@ -6372,28 +6564,30 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         root.destroyDescendent(el.id);
       }
     }
+    /** @internal */
     getActiveElement() {
       return document.activeElement;
     }
+    /** @internal */
     dropActiveElement(view) {
       if (this.prevActive && view.ownsElement(this.prevActive)) {
         this.prevActive = null;
       }
     }
+    /** @internal */
     restorePreviouslyActiveFocus() {
       if (this.prevActive && this.prevActive !== document.body && this.prevActive instanceof HTMLElement) {
         this.prevActive.focus();
       }
     }
+    /** @internal */
     blurActiveElement() {
       this.prevActive = this.getActiveElement();
       if (this.prevActive !== document.body && this.prevActive instanceof HTMLElement) {
         this.prevActive.blur();
       }
     }
-    /**
-     * @param {{dead?: boolean}} [options={}]
-     */
+    /** @internal */
     bindTopLevelEvents({ dead } = {}) {
       if (this.boundTopLevelEvents) {
         return;
@@ -6440,7 +6634,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         { blur: "focusout", focus: "focusin" },
         (e, type, view, targetEl, phxEvent, phxTarget) => {
           if (!phxTarget) {
-            const data = __spreadValues({ key: e.key }, this.eventMeta(type, e, targetEl));
+            const data = __spreadValues({}, this.eventMeta(type, e, targetEl));
             js_default.exec(e, type, phxEvent, view, targetEl, ["push", { data }]);
           }
         }
@@ -6456,10 +6650,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       );
       this.on("dragover", (e) => e.preventDefault());
       this.on("dragenter", (e) => {
-        const dropzone = closestPhxBinding(
-          e.target,
-          this.binding(PHX_DROP_TARGET)
-        );
+        let target = e.target && dom_default.elementFromTarget(e.target);
+        if (!target) {
+          return;
+        }
+        const dropzone = closestPhxBinding(target, this.binding(PHX_DROP_TARGET));
         if (!dropzone || !(dropzone instanceof HTMLElement)) {
           return;
         }
@@ -6468,10 +6663,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
       this.on("dragleave", (e) => {
-        const dropzone = closestPhxBinding(
-          e.target,
-          this.binding(PHX_DROP_TARGET)
-        );
+        let target = e.target && dom_default.elementFromTarget(e.target);
+        if (!target) {
+          return;
+        }
+        const dropzone = closestPhxBinding(target, this.binding(PHX_DROP_TARGET));
         if (!dropzone || !(dropzone instanceof HTMLElement)) {
           return;
         }
@@ -6481,15 +6677,19 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
       this.on("drop", (e) => {
+        let target = e.target && dom_default.elementFromTarget(e.target);
+        if (!target) {
+          return;
+        }
         e.preventDefault();
-        const dropzone = closestPhxBinding(
-          e.target,
-          this.binding(PHX_DROP_TARGET)
-        );
+        const dropzone = closestPhxBinding(target, this.binding(PHX_DROP_TARGET));
         if (!dropzone || !(dropzone instanceof HTMLElement)) {
           return;
         }
         this.js().removeClass(dropzone, PHX_DROP_TARGET_ACTIVE_CLASS);
+        if (!e.dataTransfer) {
+          return;
+        }
         const dropTargetId = dropzone.getAttribute(this.binding(PHX_DROP_TARGET));
         const dropTarget = dropTargetId && document.getElementById(dropTargetId);
         const files = Array.from(e.dataTransfer.files || []);
@@ -6500,7 +6700,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         dropTarget.dispatchEvent(new Event("input", { bubbles: true }));
       });
       this.on(PHX_TRACK_UPLOADS, (e) => {
-        const uploadTarget = e.target;
+        const uploadTarget = e.target && dom_default.elementFromTarget(e.target);
         if (!dom_default.isUploadInput(uploadTarget)) {
           return;
         }
@@ -6511,47 +6711,67 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         uploadTarget.dispatchEvent(new Event("input", { bubbles: true }));
       });
     }
+    /** @internal */
     eventMeta(eventName, e, targetEl) {
       const callback = this.metadataCallbacks[eventName];
       return callback ? callback(e, targetEl) : {};
     }
+    /** @internal */
     setPendingLink(href) {
       this.linkRef++;
       this.pendingLink = href;
       this.resetReloadStatus();
       return this.linkRef;
     }
-    // anytime we are navigating or connecting, drop reload cookie in case
-    // we issue the cookie but the next request was interrupted and the server never dropped it
+    /**
+     * @internal
+     * anytime we are navigating or connecting, drop reload cookie in case
+     * we issue the cookie but the next request was interrupted and the server never dropped it
+     */
     resetReloadStatus() {
       browser_default.deleteCookie(PHX_RELOAD_STATUS);
     }
+    /** @internal */
     commitPendingLink(linkRef) {
       if (this.linkRef !== linkRef) {
         return false;
-      } else {
+      }
+      if (this.pendingLink !== null) {
         this.href = this.pendingLink;
         this.pendingLink = null;
-        return true;
       }
+      return true;
     }
+    /** @internal */
     getHref() {
       return this.href;
     }
+    /** @internal */
     hasPendingLink() {
       return !!this.pendingLink;
     }
+    /** @internal */
     bind(events, callback) {
       for (const event in events) {
         const browserEventName = events[event];
         this.on(browserEventName, (e) => {
           const binding = this.binding(event);
           const windowBinding = this.binding(`window-${event}`);
-          const targetPhxEvent = e.target.getAttribute && e.target.getAttribute(binding);
+          const targetPhxEvent = e.target instanceof Element && e.target.getAttribute(binding);
+          if (!(e.target instanceof Element)) {
+            return;
+          }
           if (targetPhxEvent) {
             this.debounce(e.target, e, browserEventName, () => {
               this.withinOwners(e.target, (view) => {
-                callback(e, event, view, e.target, targetPhxEvent, null);
+                callback(
+                  e,
+                  event,
+                  view,
+                  e.target,
+                  targetPhxEvent,
+                  null
+                );
               });
             });
           } else {
@@ -6559,7 +6779,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               const phxEvent = el.getAttribute(windowBinding);
               this.debounce(el, e, browserEventName, () => {
                 this.withinOwners(el, (view) => {
-                  callback(e, event, view, el, phxEvent, "window");
+                  callback(
+                    e,
+                    event,
+                    view,
+                    el,
+                    phxEvent,
+                    "window"
+                  );
                 });
               });
             });
@@ -6567,23 +6794,31 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       }
     }
+    /** @internal */
     bindClicks() {
       this.on("mousedown", (e) => this.clickStartedAtTarget = e.target);
-      this.bindClick("click", "click");
+      this.bindClick();
     }
-    bindClick(eventName, bindingName) {
-      const click = this.binding(bindingName);
+    /** @internal */
+    bindClick() {
+      const click = this.binding("click");
       window.addEventListener(
-        eventName,
+        "click",
         (e) => {
-          let target = null;
+          let target = e.target && dom_default.elementFromTarget(e.target);
+          if (!target) {
+            return;
+          }
           if (e.detail === 0)
-            this.clickStartedAtTarget = e.target;
-          const clickStartedAtTarget = this.clickStartedAtTarget || e.target;
-          target = closestPhxBinding(e.target, click);
+            this.clickStartedAtTarget = target;
+          const clickStartedAtTarget = this.clickStartedAtTarget || target;
+          target = closestPhxBinding(target, click);
           this.dispatchClickAway(e, clickStartedAtTarget);
           this.clickStartedAtTarget = null;
-          const phxEvent = target && target.getAttribute(click);
+          if (!target) {
+            return;
+          }
+          const phxEvent = target.getAttribute(click);
           if (!phxEvent) {
             if (dom_default.isNewPageClick(e, window.location)) {
               this.unload();
@@ -6608,6 +6843,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         false
       );
     }
+    /** @internal */
     dispatchClickAway(e, clickStartedAt) {
       const phxClickAway = this.binding("click-away");
       const portal = clickStartedAt.closest(`[${PHX_TELEPORTED_SRC}]`);
@@ -6638,6 +6874,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
     }
+    /** @internal */
     bindNav() {
       if (!browser_default.canPushState()) {
         return;
@@ -6647,7 +6884,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       let scrollTimer = null;
       window.addEventListener("scroll", (_e) => {
-        clearTimeout(scrollTimer);
+        scrollTimer != null && clearTimeout(scrollTimer);
         scrollTimer = setTimeout(() => {
           browser_default.updateCurrentState(
             (state) => Object.assign(state, { scroll: window.scrollY })
@@ -6681,7 +6918,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             const callback = () => {
               this.maybeScroll(scroll);
             };
-            if (this.main.isConnected() && navType === "patch" && id === this.main.id) {
+            if (this.main && this.main.isConnected() && navType === "patch" && id === this.main.id) {
               this.main.pushLinkPatch(event, href, null, callback);
             } else {
               this.replaceMain(href, null, callback);
@@ -6693,13 +6930,25 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       window.addEventListener(
         "click",
         (e) => {
-          const target = closestPhxBinding(e.target, PHX_LIVE_LINK);
+          let el = e.target && dom_default.elementFromTarget(e.target);
+          if (!el) {
+            return;
+          }
+          const target = closestPhxBinding(
+            el,
+            PHX_LIVE_LINK
+          );
           const type = target && target.getAttribute(PHX_LIVE_LINK);
           if (!type || !this.isConnected() || !this.main || dom_default.wantsNewTab(e)) {
             return;
           }
           const href = target.href instanceof SVGAnimatedString ? target.href.baseVal : target.href;
           const linkState = target.getAttribute(PHX_LINK_STATE);
+          if (linkState !== "replace" && linkState !== "push") {
+            throw new Error(
+              `expected ${PHX_LINK_STATE} to be "replace" or "push", got: ${linkState}`
+            );
+          }
           e.preventDefault();
           e.stopImmediatePropagation();
           if (this.pendingLink === href) {
@@ -6724,6 +6973,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         false
       );
     }
+    /** @internal */
     maybeScroll(scroll) {
       if (typeof scroll === "number") {
         requestAnimationFrame(() => {
@@ -6731,19 +6981,23 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       }
     }
+    /** @internal */
     dispatchEvent(event, payload = {}) {
       dom_default.dispatchEvent(window, `phx:${event}`, { detail: payload });
     }
+    /** @internal */
     dispatchEvents(events) {
       events.forEach(([event, payload]) => this.dispatchEvent(event, payload));
     }
+    /** @internal */
     withPageLoading(info, callback) {
       dom_default.dispatchEvent(window, "phx:page-loading-start", { detail: info });
       const done = () => dom_default.dispatchEvent(window, "phx:page-loading-stop", { detail: info });
       return callback ? callback(done) : done;
     }
+    /** @internal */
     pushHistoryPatch(e, href, linkState, targetEl) {
-      if (!this.isConnected() || !this.main.isMain()) {
+      if (!this.isConnected() || !(this.main && this.main.isMain())) {
         return browser_default.redirect(href);
       }
       this.withPageLoading({ to: href, kind: "patch" }, (done) => {
@@ -6753,6 +7007,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       });
     }
+    /** @internal */
     historyPatch(href, linkState, linkRef = this.setPendingLink(href)) {
       if (!this.commitPendingLink(linkRef)) {
         return;
@@ -6777,12 +7032,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       });
       this.registerNewLocation(window.location);
     }
+    /** @internal */
     historyRedirect(e, href, linkState, flash, targetEl) {
       const clickLoading = targetEl && e.isTrusted && e.type !== "popstate";
       if (clickLoading) {
         targetEl.classList.add("phx-click-loading");
       }
-      if (!this.isConnected() || !this.main.isMain()) {
+      if (!this.isConnected() || !(this.main && this.main.isMain())) {
         return browser_default.redirect(href, flash);
       }
       if (/^\/$|^\/[^\/]+.*$/.test(href)) {
@@ -6823,6 +7079,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       });
     }
+    /** @internal */
     registerNewLocation(newLocation) {
       const { pathname, search } = this.currentLocation;
       if (pathname + search === newLocation.pathname + newLocation.search) {
@@ -6832,10 +7089,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         return true;
       }
     }
+    /** @internal */
     bindForms() {
       let iterations = 0;
       let externalFormSubmitted = false;
       this.on("submit", (e) => {
+        if (!(e.target instanceof HTMLFormElement))
+          return;
         const phxSubmit = e.target.getAttribute(this.binding("submit"));
         const phxChange = e.target.getAttribute(this.binding("change"));
         if (!externalFormSubmitted && phxChange && !phxSubmit) {
@@ -6853,6 +7113,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
       this.on("submit", (e) => {
+        if (!(e.target instanceof HTMLFormElement))
+          return;
         const phxEvent = e.target.getAttribute(this.binding("submit"));
         if (!phxEvent) {
           if (dom_default.isUnloadableFormSubmit(e)) {
@@ -6871,7 +7133,10 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       });
       for (const type of ["change", "input"]) {
         this.on(type, (e) => {
-          if (e instanceof CustomEvent && (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement || e.target instanceof HTMLTextAreaElement) && e.target.form === void 0) {
+          if (!dom_default.isFormAssociated(e.target)) {
+            return;
+          }
+          if (e instanceof CustomEvent && e.target.form === void 0) {
             if (e.detail && e.detail.dispatcher) {
               throw new Error(
                 `dispatching a custom ${type} event is only supported on input elements inside a form`
@@ -6879,9 +7144,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
             return;
           }
-          const phxChange = this.binding("change");
           const input = e.target;
-          if (this.blockPhxChangeWhileComposing && e.isComposing) {
+          const phxChange = this.binding("change");
+          if (this.blockPhxChangeWhileComposing && e instanceof InputEvent && e.isComposing) {
             const key = `composition-listener-${type}`;
             if (!dom_default.private(input, key)) {
               dom_default.putPrivate(input, key, true);
@@ -6921,7 +7186,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               dom_default.putPrivate(input, PHX_HAS_FOCUSED, true);
               js_default.exec(e, "change", phxEvent, view, input, [
                 "push",
-                { _target: e.target.name, dispatcher }
+                { _target: input.name, dispatcher }
               ]);
             });
           });
@@ -6930,7 +7195,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.on("reset", (e) => {
         const form = e.target;
         dom_default.resetForm(form);
-        const input = Array.from(form.elements).find((el) => el.type === "reset");
+        const input = Array.from(form.elements).find(
+          (el) => "type" in el && el.type === "reset"
+        );
         if (input) {
           window.requestAnimationFrame(() => {
             input.dispatchEvent(
@@ -6940,6 +7207,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
     }
+    /** @internal */
     debounce(el, event, eventType, callback) {
       if (eventType === "blur" || eventType === "focusout") {
         return callback();
@@ -6964,11 +7232,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         );
       });
     }
+    /** @internal */
     silenceEvents(callback) {
       this.silenced = true;
       callback();
       this.silenced = false;
     }
+    /** @internal */
     on(event, callback) {
       this.boundEventNames.add(event);
       window.addEventListener(event, (e) => {
@@ -6977,6 +7247,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       });
     }
+    /** @internal */
     jsQuerySelectorAll(sourceEl, query, defaultQuery) {
       const all = this.domCallbacks.jsQuerySelectorAll;
       return all ? all(sourceEl, query, defaultQuery) : defaultQuery();
@@ -7038,7 +7309,6 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
   };
 
   // js/phoenix_live_view/index.ts
-  var LiveSocket2 = LiveSocket;
   function createHook(el, callbacks) {
     let existingHook = dom_default.getCustomElHook(el);
     if (existingHook) {