hotwire-native-dev-tools 0.1.0 → 0.3.0

package/dist/hotwire-native-dev-tools.es.js

@@ -1,11 +1,4 @@
-var $ = Object.defineProperty;
-var L = (i) => {
-  throw TypeError(i);
-};
-var I = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var l = (i, t, e) => I(i, typeof t != "symbol" ? t + "" : t, e), F = (i, t, e) => t.has(i) || L("Cannot " + e);
-var b = (i, t, e) => (F(i, t, "read from private field"), e ? e.call(i) : t.get(i)), g = (i, t, e) => t.has(i) ? L("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e);
-const M = () => `
+const E = () => `
     :host {
       all: initial;
       font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
@@ -65,6 +58,13 @@ const M = () => `
       fill: white;
     }
 
+    .icon--black svg {
+      fill: black;
+    }
+    .icon--muted svg {
+      fill: #6c6c6c;
+    }
+
     /* Dropdown */
     .dropdown-content {
       display: none;
@@ -103,10 +103,20 @@ const M = () => `
       align-items: center;
     }
 
-    .dropdown-content button:not(:first-child) {
+    .dropdown-content .dropdown-btn-full-width:not(:first-child),
+    .dropdown-content .dropdown-entry:not(:first-child) {
       border-top: 1px solid #cecdcd;
     }
 
+    .dropdown--right .dropdown-content {
+      right: 1em;
+    }
+
+    .dropdown--scrollable .dropdown-content {
+      overflow-y: auto;
+      max-height: 100%;
+    }
+
     .settings-dropdown {
       right: 0;
       top: 2rem;
@@ -223,6 +233,8 @@ const M = () => `
     }
 
     .bottom-sheet .content {
+      display: flex;
+      flex-direction: column;
       width: 100%;
       height: 40vh;
       position: relative;
@@ -336,8 +348,8 @@ const M = () => `
       height: 100%;
       overflow: scroll;
       background-color: hsl(0deg 0% 0% / 80%);
-      backdrop-filter: blur(3px) saturate(100%);
-      -webkit-backdrop-filter: blur(3px) saturate(100%);
+      backdrop-filter: blur(30px) saturate(250%);
+      -webkit-backdrop-filter: blur(30px) saturate(250%);
       padding-bottom: 7em;
     }
     .outer-tab-content.active {
@@ -352,6 +364,25 @@ const M = () => `
       white-space: normal;
     }
 
+    .info-card {
+      border-radius: 5px;
+      background: hsl(0deg 0% 0% / 20%);
+      padding: 1em;
+      margin-bottom: 1em;
+    }
+
+    .info-card-title {
+      font-size: 1em;
+      font-weight: 700;
+      margin-bottom: 1em;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .info-card-hint {
+      font-size: 0.8em;
+    }
+
     .tab-empty-content {
       display: flex;
       justify-content: center;
@@ -583,6 +614,10 @@ const M = () => `
       text-align: center;
     }
 
+    .text-muted {
+      color: #6c6c6c;
+    }
+
     .text-ellipsis {
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -634,6 +669,10 @@ const M = () => `
       overflow: auto;
     }
 
+    .m-0 {
+      margin: 0;
+    }
+
     .mt-1 {
       margin-top: 0.25rem;
     }
@@ -682,73 +721,73 @@ const M = () => `
       width: 100%;
     }
 
+    .w-auto {
+      width: auto !important;
+    }
+
     .w-80 {
       width: 80%;
     }
   `;
-var m, u, v;
-class H {
+class T {
   constructor() {
-    l(this, "printWarning", (t, e = !0, ...o) => {
-      e && this.printedWarnings.includes(t) || (console.warn(`DevTools: ${t}`, ...o), this.printedWarnings.push(t));
-    });
-    l(this, "checkForWarnings", () => {
-      b(this, m).call(this), b(this, u).call(this), b(this, v).call(this);
-    });
-    g(this, m, () => {
-      var t;
-      window.Turbo ? ((t = window.Turbo) == null ? void 0 : t.session.drive) === !1 && setTimeout(() => {
-        var e;
-        ((e = window.Turbo) == null ? void 0 : e.session.drive) === !1 && this.printWarning("Turbo Drive is disabled. Hotwire Native will not work correctly without Turbo Drive");
-      }, 1e3) : setTimeout(() => {
-        window.Turbo || this.printWarning("Turbo is not detected. Hotwire Native will not work correctly without Turbo");
-      }, 1e3);
-    });
-    g(this, u, () => {
-      const t = this.turboFrameIds;
-      t.filter((o, s) => t.indexOf(o) !== s).forEach((o) => {
-        this.printWarning(`Multiple Turbo Frames with the same ID '${o}' detected. This can cause unexpected behavior. Ensure that each Turbo Frame has a unique ID.`);
-      });
-    });
-    g(this, v, () => {
-      const t = document.querySelectorAll("[data-turbo-permanent]");
-      t.length !== 0 && t.forEach((e) => {
-        const o = e.id;
-        if (o === "" && this.printWarning("Turbo Permanent Element detected without an ID. Turbo Permanent Elements must have a unique ID to work correctly.", !0, e), o && document.querySelectorAll(`#${o}`).length > 1) {
-          const n = `Turbo Permanent Element with ID '${o}' doesn't have a unique ID. Turbo Permanent Elements must have a unique ID to work correctly.`;
-          this.printWarning(n, !0, e);
-        }
-      });
-    });
     this.printedWarnings = [];
   }
+  printWarning = (t, e = !0, ...o) => {
+    e && this.printedWarnings.includes(t) || (console.warn(`DevTools: ${t}`, ...o), this.printedWarnings.push(t));
+  };
+  checkForWarnings = () => {
+    this.#t(), this.#e();
+  };
+  #t = () => {
+    const t = this.turboFrameIds;
+    t.filter((o, s) => t.indexOf(o) !== s).forEach((o) => {
+      this.printWarning(`Multiple Turbo Frames with the same ID '${o}' detected. This can cause unexpected behavior. Ensure that each Turbo Frame has a unique ID.`);
+    });
+  };
+  #e = () => {
+    const t = document.querySelectorAll("[data-turbo-permanent]");
+    t.length !== 0 && t.forEach((e) => {
+      const o = e.id;
+      if (o === "" && this.printWarning("Turbo Permanent Element detected without an ID. Turbo Permanent Elements must have a unique ID to work correctly.", !0, e), o && document.querySelectorAll(`#${o}`).length > 1) {
+        const n = `Turbo Permanent Element with ID '${o}' doesn't have a unique ID. Turbo Permanent Elements must have a unique ID to work correctly.`;
+        this.printWarning(n, !0, e);
+      }
+    });
+  };
   get turboFrameIds() {
     return Array.from(document.querySelectorAll("turbo-frame")).map((t) => t.id);
   }
 }
-m = new WeakMap(), u = new WeakMap(), v = new WeakMap();
-const c = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") || "{}")[i], d = (i, t) => {
+const a = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") || "{}")[i], l = (i, t) => {
   let e = JSON.parse(localStorage.getItem("hotwire-native-dev-tools") || "{}");
   e[i] = t, localStorage.setItem("hotwire-native-dev-tools", JSON.stringify(e));
-}, q = () => {
+}, B = () => {
   localStorage.removeItem("hotwire-native-dev-tools");
-}, y = () => c("consoleFilterLevels") || {
+}, u = () => a("consoleFilterLevels") || {
   warn: !0,
   error: !0,
   debug: !0,
   info: !0,
   log: !0
-}, z = (i, t) => {
-  const e = y();
-  return e[i] = t, d("consoleFilterLevels", e), e;
-}, p = (i, t) => {
+}, $ = (i, t) => {
+  const e = u();
+  return e[i] = t, l("consoleFilterLevels", e), e;
+}, m = () => a("consoleLogBlacklist") || [], I = (i) => {
+  i = i.trim();
+  const t = a("consoleLogBlacklist") || [];
+  return t.includes(i) || (t.push(i), l("consoleLogBlacklist", t)), t;
+}, F = (i) => {
+  let t = a("consoleLogBlacklist") || [];
+  return t = t.filter((e) => e !== i), l("consoleLogBlacklist", t), t;
+}, h = (i, t) => {
   let e = null;
   return (...o) => {
     const s = () => i.apply(void 0, o);
     clearTimeout(e), e = setTimeout(s, t);
   };
-}, { userAgent: E } = window.navigator, A = /iOS/.test(E), N = /Android/.test(E), S = () => A ? "ios" : N ? "android" : "unknown", D = () => {
-  switch (S()) {
+}, { userAgent: S } = window.navigator, k = /iOS/.test(S), q = /Android/.test(S), f = () => k ? "ios" : q ? "android" : "unknown", A = () => {
+  switch (f()) {
     case "android":
       return "Android";
     case "ios":
@@ -756,7 +795,10 @@ const c = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") ||
     default:
       return "<unknown>";
   }
-}, P = `
+}, M = (i) => document.querySelector(`meta[name="${i}"]`), v = (i) => {
+  const t = M(i);
+  return t && t.content;
+}, H = `
   <svg width="100%" height="100%" viewBox="0 0 294 320">
     <g transform="matrix(1,0,0,1,-28.38,-15.268)">
         <g transform="matrix(1,0,0,1,-462.157,-144.417)">
@@ -764,95 +806,76 @@ const c = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") ||
         </g>
     </g>
   </svg>
-`, R = `
+`, z = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 215c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71L280 392c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-214.1-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 103c9.4-9.4 24.6-9.4 33.9 0L385 215z"/>
   </svg>
-`, j = `
+`, N = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM127 297c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l71 71L232 120c0-13.3 10.7-24 24-24s24 10.7 24 24l0 214.1 71-71c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 409c-9.4 9.4-24.6 9.4-33.9 0L127 297z"/>
   </svg>
-`, C = `
+`, b = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>
   </svg>
-`, f = `
+`, p = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/>
   </svg>
-`, O = `
+`, P = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8c-5.9 16.7-24.2 25.4-40.8 19.5s-25.4-24.2-19.5-40.8C55.6 150.7 73.2 122 97.6 97.6c87.2-87.2 228.3-87.5 315.8-1L455 55c6.9-6.9 17.2-8.9 26.2-5.2s14.8 12.5 14.8 22.2l0 128c0 13.3-10.7 24-24 24l-8.4 0c0 0 0 0 0 0L344 224c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l41.1-41.1c-62.6-61.5-163.1-61.2-225.3 1zM16 312c0-13.3 10.7-24 24-24l7.6 0 .7 0L168 288c9.7 0 18.5 5.8 22.2 14.8s1.7 19.3-5.2 26.2l-41.1 41.1c62.6 61.5 163.1 61.2 225.3-1c17.5-17.5 30.1-38 37.8-59.8c5.9-16.7 24.2-25.4 40.8-19.5s25.4 24.2 19.5 40.8c-10.8 30.6-28.4 59.3-52.9 83.8c-87.2 87.2-228.3 87.5-315.8 1L57 457c-6.9 6.9-17.2 8.9-26.2 5.2S16 449.7 16 440l0-119.6 0-.7 0-7.6z"/>
   </svg>
-`, V = `
+`, D = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
   </svg>
-`, Y = `
+`, O = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
   </svg>
-`, W = `
+`, j = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/>
   </svg>
-`, X = `
+`, y = `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512">
     <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
     <path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/>
   </svg>
+`, R = `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+    <!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+    <path d="M431.2 476.5L163.5 208.8C141.1 240.2 128 278.6 128 320C128 426 214 512 320 512C361.5 512 399.9 498.9 431.2 476.5zM476.5 431.2C498.9 399.8 512 361.4 512 320C512 214 426 128 320 128C278.5 128 240.1 141.1 208.8 163.5L476.5 431.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z"/>
+  </svg>
 `;
-class U {
+class V {
   constructor(t) {
-    l(this, "render", p(() => {
-      this.setPosition(), this.createDragItem(), this.setTranslate(this.initialX, this.initialY, this.dragItem), this.addEventListeners();
-    }, 50));
-    l(this, "animateErrorBorder", p(() => {
-      if (!this.dragItem || c("errorAnimationEnabled") === !1) return;
-      let t = this.dragItem.querySelector(".error-border"), e = this.dragItem.querySelector(".error-border circle");
-      t && t.remove();
-      const o = document.createElement("div");
-      o.className = "animation-container", o.innerHTML = `
-      <svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" class="error-border">
-        <defs>
-          <linearGradient id="errorGradient" gradientTransform="rotate(45)">
-            <stop offset="0%" stop-color="#e4241a" />
-            <stop offset="50%" stop-color="#dd1f15" />
-            <stop offset="100%" stop-color="#f6160a" />
-          </linearGradient>
-        </defs>
-        <circle cx="90" cy="90" r="90" fill="none" stroke="url(#errorGradient)" stroke-width="21"
-                stroke-dasharray="565" stroke-dashoffset="565" stroke-linecap="round" />
-      </svg>
-    `, this.dragItem.appendChild(o), e = this.dragItem.querySelector(".error-border circle"), e.classList.add("animate"), setTimeout(() => {
-        o.classList.add("fade-out");
-      }, 1300), setTimeout(() => {
-        o && o.parentNode && o.remove();
-      }, 1800);
-    }, 100));
     this.devTools = t, this.bubbleSize = 4.75 * 16 + 0.3 * 16, this.minVisible = this.bubbleSize * 0.5, this.currentlyDragging = !1;
   }
+  render = h(() => {
+    this.setPosition(), this.createDragItem(), this.setTranslate(this.initialX, this.initialY, this.dragItem), this.addEventListeners();
+  }, 50);
   setPosition() {
     this.settingKey = window.innerWidth < window.innerHeight ? "bubblePosPortrait" : "bubblePosLandscape";
-    const t = { x: window.innerWidth - 100, y: window.innerHeight - 100 }, { x: e, y: o } = c(this.settingKey) || t;
+    const t = { x: window.innerWidth - 100, y: window.innerHeight - 100 }, { x: e, y: o } = a(this.settingKey) || t;
     this.currentX = this.initialX = this.xOffset = e, this.currentY = this.initialY = this.yOffset = o;
   }
   createDragItem() {
-    var e;
-    const t = (e = this.devTools.shadowRoot) == null ? void 0 : e.getElementById("floating-bubble");
+    const t = this.devTools.shadowRoot?.getElementById("floating-bubble");
     if (t) {
       this.dragItem = t;
       return;
     }
-    this.dragItem = document.createElement("div"), this.dragItem.id = "floating-bubble", this.dragItem.innerHTML = P, this.devTools.shadowRoot.appendChild(this.dragItem);
+    this.dragItem = document.createElement("div"), this.dragItem.id = "floating-bubble", this.dragItem.innerHTML = H, this.devTools.shadowRoot.appendChild(this.dragItem);
   }
   addEventListeners() {
     this.dragItem.hasEventListeners || (this.dragItem.addEventListener("click", this.click.bind(this), { passive: !0 }), this.dragItem.addEventListener("touchstart", this.dragStart.bind(this), { passive: !0 }), this.dragItem.addEventListener("touchend", this.dragEnd.bind(this), { passive: !0 }), this.dragItem.addEventListener("touchmove", this.drag.bind(this), { passive: !0 }), this.dragItem.hasEventListeners = !0);
@@ -860,6 +883,29 @@ class U {
   click(t) {
     this.clickCallback && this.clickCallback(t);
   }
+  animateErrorBorder = h(() => {
+    if (!this.dragItem || a("errorAnimationEnabled") === !1) return;
+    let t = this.dragItem.querySelector(".error-border"), e = this.dragItem.querySelector(".error-border circle");
+    t && t.remove();
+    const o = document.createElement("div");
+    o.className = "animation-container", o.innerHTML = `
+      <svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" class="error-border">
+        <defs>
+          <linearGradient id="errorGradient" gradientTransform="rotate(45)">
+            <stop offset="0%" stop-color="#e4241a" />
+            <stop offset="50%" stop-color="#dd1f15" />
+            <stop offset="100%" stop-color="#f6160a" />
+          </linearGradient>
+        </defs>
+        <circle cx="90" cy="90" r="90" fill="none" stroke="url(#errorGradient)" stroke-width="21"
+                stroke-dasharray="565" stroke-dashoffset="565" stroke-linecap="round" />
+      </svg>
+    `, this.dragItem.appendChild(o), e = this.dragItem.querySelector(".error-border circle"), e.classList.add("animate"), setTimeout(() => {
+      o.classList.add("fade-out");
+    }, 1300), setTimeout(() => {
+      o && o.parentNode && o.remove();
+    }, 1800);
+  }, 100);
   onClick(t) {
     this.clickCallback = t;
   }
@@ -867,7 +913,7 @@ class U {
     t.target.closest("#floating-bubble") && (this.currentlyDragging = !0, this.initialX = t.touches[0].clientX - this.xOffset, this.initialY = t.touches[0].clientY - this.yOffset);
   }
   dragEnd() {
-    this.initialX = this.currentX, this.initialY = this.currentY, this.currentlyDragging = !1, d(this.settingKey, { x: this.currentX, y: this.currentY });
+    this.initialX = this.currentX, this.initialY = this.currentY, this.currentlyDragging = !1, l(this.settingKey, { x: this.currentX, y: this.currentY });
   }
   drag(t) {
     if (!this.currentlyDragging) return;
@@ -880,32 +926,43 @@ class U {
     o.style.transform = `translate3d(${t}px, ${e}px, 0)`;
   }
 }
-class J {
+class Y {
   constructor(t) {
-    l(this, "handleTabClick", (t) => {
-      const e = t.target.closest(".tablink");
-      if (!e) return;
-      const o = e.dataset.tabId;
-      this.devTools.state.setActiveTab(o), this.updateTabView(o);
-    });
-    this.devTools = t, this.state = t.state.state, this.sheetHeight = parseInt(c("bottomSheetHeight")) || 55;
+    this.devTools = t, this.state = t.state.state, this.sheetHeight = parseInt(a("bottomSheetHeight")) || 55;
   }
   render() {
     this.createBottomSheet(), this.sheetContent = this.bottomSheet.querySelector(".content"), this.sheetOverlay = this.bottomSheet.querySelector(".sheet-overlay"), this.addEventListeners();
   }
+  // Called when the in-memory state changes,
+  // such as when a new console or bridge log is captured.
   update(t) {
-    this.state = t, this.checkNativeFeatures(), this.renderConsoleLogs(), this.renderBridgeComponents(), this.renderBridgeLogs(), this.renderEvents(), this.renderNativeStack();
+    this.state = t, this.checkNativeFeatures(), this.renderConsoleLogs(), this.renderBridgeComponents(), this.renderBridgeLogs(), this.renderEvents(), this.renderNativeStack(), this.scrollToLatestLog(this.state.activeTab), this.state.shouldScrollToLatestLog = !0;
+  }
+  // Called when another native tab of the mobile app
+  // updates devtools-related local storage.
+  applySettingsFromStorage() {
+    [
+      { key: "bottomSheetHeight", setter: (o) => this.updateSheetHeight(o) },
+      { key: "activeTab", setter: (o) => this.updateTabView(o) },
+      { key: "fontSize", setter: (o) => this.updateFontSize(o) },
+      { key: "errorAnimationEnabled", setter: (o) => this.updateErrorAnimation(o) },
+      { key: "autoOpen", setter: (o) => this.updateAutoOpen(o) }
+    ].forEach(({ key: o, setter: s }) => {
+      const n = a(o);
+      n !== void 0 && s(n);
+    });
+    const e = u();
+    e && this.updateConsoleFilter(e);
   }
   createBottomSheet() {
-    var n;
-    const t = (n = this.devTools.shadowRoot) == null ? void 0 : n.querySelector(".bottom-sheet");
+    const t = this.devTools.shadowRoot?.querySelector(".bottom-sheet");
     if (t) {
       this.bottomSheet = t;
       return;
     }
-    const e = this.state.activeTab, o = y(), s = this.state.consoleSearch;
+    const e = this.state.activeTab, o = u(), s = this.state.consoleSearch;
     this.bottomSheet = document.createElement("div"), this.bottomSheet.classList.add("bottom-sheet"), this.bottomSheet.innerHTML = `
-      <div class="sheet-overlay ${c("bottomSheetPinned") === !0 ? "" : "active"}"></div>
+      <div class="sheet-overlay ${a("bottomSheetPinned") === !0 ? "" : "active"}"></div>
       <div class="content">
         <div class="top-part">
           <div class="tablist">
@@ -914,23 +971,25 @@ class J {
             <button class="tablink ${e === "tab-event-logs" ? "active" : ""}" data-tab-id="tab-event-logs">Events</button>
             <button class="tablink ${e === "tab-native-stack" ? "active" : ""} d-none" data-tab-id="tab-native-stack">Stack</button>
             <div class="tablink-settings dropdown d-flex">
-              <button class="dropdown-trigger tablink-dropdown">${X}</button>
+              <button class="dropdown-trigger tablink-dropdown">${y}</button>
               <div class="dropdown-content settings-dropdown">
-                <button class="btn-switch-to-single-tab-sheet" data-tab-id="single-tab-settings">Settings</button>
-                <button class="pin-bottom-sheet">Pin Bottom Sheet</button>
+                <button class="dropdown-btn-full-width btn-switch-to-single-tab-sheet" data-tab-id="single-tab-settings">Settings</button>
+                <button class="dropdown-btn-full-width btn-switch-to-single-tab-sheet" data-tab-id="single-tab-info">Info</button>
+                <button class="dropdown-btn-full-width btn-switch-to-single-tab-sheet d-none" data-tab-id="single-tab-path-configuration-check">PathConfiguration Check</button>
+                <button class="dropdown-btn-full-width pin-bottom-sheet">Pin Bottom Sheet</button>
               </div>
             </div>
           </div>
 
           <div class="tab-action-bars">
             <div class="tab-action-bar tab-bridge-components ${e === "tab-bridge-components" ? "active" : ""}">
-              <button class="btn-icon btn-clear-tab btn-clear-bridge-logs">${f}</button>
+              <button class="btn-icon btn-clear-tab btn-clear-bridge-logs">${p}</button>
             </div>
             <div class="tab-action-bar d-flex flex-column tab-console-logs ${e === "tab-console-logs" ? "active" : ""}">
               <div class="d-flex">
-                <button class="btn-icon btn-search-console">${Y}</button>
+                <button class="btn-icon btn-search-console">${O}</button>
                 <div class="dropdown">
-                  <button class="dropdown-trigger btn-icon">${W}</button>
+                  <button class="dropdown-trigger btn-icon">${j}</button>
                   <div class="dropdown-content console-filter-levels">
                     <label><input type="checkbox" ${o.warn ? "checked" : ""} data-console-filter="warn" /> Warnings</label>
                     <label><input type="checkbox" ${o.error ? "checked" : ""} data-console-filter="error" /> Errors</label>
@@ -939,7 +998,12 @@ class J {
                     <label><input type="checkbox" ${o.log ? "checked" : ""} data-console-filter="log" /> Logs</label>
                   </div>
                 </div>
-                <button class="btn-icon btn-clear-tab btn-clear-console-logs">${f}</button>
+                <div class="dropdown dropdown--scrollable">
+                  <button class="dropdown-trigger btn-icon">${R}</button>
+                  <div class="dropdown-content console-log-blacklist">
+                  </div>
+                </div>
+                <button class="btn-icon btn-clear-tab btn-clear-console-logs">${p}</button>
               </div>
 
               <div class="console-search mt-2 ${s ? "" : "d-none"}">
@@ -947,10 +1011,10 @@ class J {
               </div>
             </div>
             <div class="tab-action-bar tab-event-logs ${e === "tab-event-logs" ? "active" : ""}">
-              <button class="btn-icon btn-clear-tab btn-clear-events">${f}</button>
+              <button class="btn-icon btn-clear-tab btn-clear-events">${p}</button>
             </div>
             <div class="tab-action-bar tab-native-stack ${e === "tab-native-stack" ? "active" : ""}">
-              <button class="btn-icon btn-reload-tab btn-reload-stack">${O}</button>
+              <button class="btn-icon btn-reload-tab btn-reload-stack">${P}</button>
             </div>
           </div>
         </div>
@@ -964,7 +1028,7 @@ class J {
               <div id="bridge-components-collapse" class="collapse-target">
                 <div class="d-flex justify-content-between border-bottom">
                   <div class="tab-content-bridge-components flex-grow-1"></div>
-                  <button class="btn-icon btn-help btn-switch-to-single-tab-sheet mt-1" data-tab-id="single-tab-bridge-component-help">${V}</button>
+                  <button class="btn-icon btn-help btn-switch-to-single-tab-sheet mt-1" data-tab-id="single-tab-bridge-component-help">${D}</button>
                 </div>
               </div>
 
@@ -991,10 +1055,10 @@ class J {
           <div id="single-tab-bridge-component-help" class="single-tab-content outer-tab-content">
             <div class="inner-tab-content">
               <div class="d-flex align-items-center mb-3">
-                <button class="btn-icon btn-close-single-mode">${C}</button>
+                <button class="btn-icon btn-close-single-mode">${b}</button>
                 <h3 class="ms-1">Bridge Components</h3>
               </div>
-              <p>This list shows all the bridge components that the ${D()} app supports. Components that are active on this page are marked with a green dot.</p>
+              <p>This list shows all the bridge components that the ${A()} app supports. Components that are active on this page are marked with a green dot.</p>
               <h3 class="mt-4">Why is my bridge component not on the list?</h3>
               <p class="mt-2">Bridge components are automatically detected when they are registered in the native code. If your component is not on the list, make sure it is registered correctly.</p>
               ${this.registerBridgeComponentExample()}
@@ -1006,7 +1070,7 @@ class J {
           <div id="single-tab-settings" class="single-tab-content outer-tab-content">
             <div class="inner-tab-content">
               <div class="d-flex align-items-center mb-3">
-                <button class="btn-icon btn-close-single-mode">${C}</button>
+                <button class="btn-icon btn-close-single-mode">${b}</button>
                 <h3 class="ms-1">Settings</h3>
               </div>
               <div class="mb-3">
@@ -1018,25 +1082,80 @@ class J {
               </div>
               <div class="mb-4">
                 <label for="font-size-setting"> Font Size</label>
-                <input type="range" id="font-size-setting" class="w-100" min="8" max="24" value="${c("fontSize") || 16}" step="1" list="font-size-setting-markers" />
+                <input type="range" id="font-size-setting" class="w-100" min="8" max="24" value="${a("fontSize") || 16}" step="1" list="font-size-setting-markers" />
                 <datalist id="font-size-setting-markers">
                   <option value="16"></option>
                 </datalist>
               </div>
               <div class="mb-3">
                 <label class="toggle">
-                  <input class="toggle-checkbox" type="checkbox" id="console-error-animation-setting" ${c("errorAnimationEnabled") !== !1 ? "checked" : ""} />
+                  <input class="toggle-checkbox" type="checkbox" id="console-error-animation-setting" ${a("errorAnimationEnabled") !== !1 ? "checked" : ""} />
                   <div class="toggle-switch"></div>
                   <span class="toggle-label">Console Error Animation</span>
                 </label>
               </div>
               <div class="mb-3">
                 <label class="toggle">
-                  <input class="toggle-checkbox" type="checkbox" id="auto-open-setting" ${c("autoOpen") === !0 ? "checked" : ""} />
+                  <input class="toggle-checkbox" type="checkbox" id="auto-open-setting" ${a("autoOpen") === !0 ? "checked" : ""} />
                   <div class="toggle-switch"></div>
                   <span class="toggle-label">Auto Open</span>
                 </label>
               </div>
+              <div class="mb-3">
+                <label class="toggle">
+                  <input class="toggle-checkbox" type="checkbox" id="scroll-to-latest-log-setting" ${a("scrollToLatestLog") === !0 ? "checked" : ""} />
+                  <div class="toggle-switch"></div>
+                  <span class="toggle-label">Automatically Scroll to New Logs</span>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <div id="single-tab-path-configuration-check" class="single-tab-content outer-tab-content">
+            <div class="inner-tab-content">
+              <div class="d-flex align-items-center mb-3">
+                <button class="btn-icon btn-close-single-mode">${b}</button>
+                <h3 class="ms-1">PathConfiguration Check</h3>
+              </div>
+              <div class="mb-3">
+                <label for="path-configuration-check-url">URL</label>
+                <input id="path-configuration-check-url" class="w-100" value="/" />
+              </div>
+              <div id="path-configuration-check-properties-output" class="overflow-auto">
+              </div>
+            </div>
+          </div>
+
+          <div id="single-tab-info" class="single-tab-content outer-tab-content">
+            <div class="inner-tab-content">
+              <div class="d-flex align-items-center mb-3">
+                <button class="btn-icon btn-close-single-mode">${b}</button>
+                <h3 class="ms-1">Info</h3>
+              </div>
+              <div class="info-card">
+                <div class="info-card-title">Current URL</div>
+                <div class="current-url">${this.currentUrl}</div>
+              </div>
+              <div class="info-card">
+                <div class="info-card-title">User Agent</div>
+                <div class="user-agent">${navigator.userAgent}</div>
+              </div>
+              <div class="info-card">
+                <div class="info-card-title"><pre class="m-0">turbo-cache-control:</pre> <span>${v("turbo-cache-control") || "-"}</span></div>
+                <div class="info-card-hint"><strong>no-cache:</strong> always fetched from the network, even on restore</div>
+                <div class="info-card-hint"><strong>no-preview:</strong> skipped in preview, used only on restore</div>
+                <div class="info-card-hint"><strong>unset:</strong> shows cached preview if the cache is valid</div>
+              </div>
+              <div class="info-card">
+                <div class="info-card-title"><pre class="m-0">turbo-refresh-method:</pre> <span>${v("turbo-refresh-method") || "-"}</span></div>
+                <div class="info-card-hint"><strong>replace (default):</strong> replaces the entire &lt;body&gt; on revisit</div>
+                <div class="info-card-hint"><strong>morph:</strong> updates only changed DOM elements, preserving state</div>
+              </div>
+              <div class="info-card">
+                <div class="info-card-title"><pre class="m-0">turbo-visit-control:</pre> <span>${v("turbo-visit-control") || "-"}</span></div>
+                <div class="info-card-hint"><strong>reload:</strong> forces a full page reload</div>
+                <div class="info-card-hint"><strong>unset:</strong> allows Turbo to handle the visit normally</div>
+              </div>
             </div>
           </div>
         </div>
@@ -1044,8 +1163,19 @@ class J {
     `, this.devTools.shadowRoot.appendChild(this.bottomSheet);
   }
   renderConsoleLogs() {
-    const t = this.bottomSheet.querySelector(".tab-content-console-logs"), e = y(), o = this.state.consoleSearch;
-    t.innerHTML = this.state.consoleLogs.length ? this.state.consoleLogs.filter((s) => e[s.type]).filter((s) => o ? s.message.toLowerCase().includes(o.toLowerCase()) : !0).map((s) => this.consoleLogHTML(s.type, s.message, s.time)).join("") : '<div class="tab-empty-content"><span>No console logs yet</span></div>';
+    const t = this.bottomSheet.querySelector(".tab-content-console-logs"), e = u(), o = m(), s = this.state.consoleSearch;
+    t.innerHTML = this.state.consoleLogs.length ? this.state.consoleLogs.filter((n) => e[n.type]).filter((n) => s ? n.message.toLowerCase().includes(s.toLowerCase()) : !0).filter((n) => !o.includes(n.message.trim())).map((n) => this.consoleLogHTML(n.type, n.message, n.time)).join("") : '<div class="tab-empty-content"><span>No console logs yet</span></div>', this.renderConsoleBlacklist();
+  }
+  renderConsoleBlacklist() {
+    this.bottomSheet.querySelector(".console-log-blacklist").innerHTML = m().length ? `
+      ${m().map(
+      (t) => `
+            <div class="d-flex justify-content-between align-items-center dropdown-entry">
+              <label class="console-log-blacklist-entry-text">${t}</label>
+              <button class="btn-icon btn-remove-console-log-blacklist-entry icon--muted dropdown-content-action w-auto" data-entry="${t}">${p}</button>
+            </div>
+          `
+    ).join("")}` : '<div class="text-center text-muted">No blacklisted logs</div>';
   }
   renderBridgeComponents() {
     const t = this.state.supportedBridgeComponents.length;
@@ -1065,11 +1195,26 @@ class J {
     const t = this.bottomSheet.querySelector(".tab-content-native-stack");
     t.innerHTML = '<div class="native-stack-wrapper">' + (this.state.nativeStack.length ? this.state.nativeStack.map((e) => this.nativeViewStackHTML(e)).join("") : '<div class="tab-empty-content"><span>No native stack captured yet</span></div>') + "</div>";
   }
+  renderPathConfigurationCheck = h((t) => {
+    const e = k ? t : `${window.location.origin}${t}`;
+    this.devTools.nativeBridge.send("propertiesForUrl", { url: e }, (o) => {
+      this.bottomSheet.querySelector("#path-configuration-check-properties-output").style.opacity = 1;
+      const s = (() => {
+        try {
+          const c = o.data.properties;
+          return JSON.stringify(typeof c == "string" ? JSON.parse(c) : c, null, 2);
+        } catch {
+          return o.data.properties;
+        }
+      })(), n = s ? `<pre class="view-path-configuration">${s}</pre>` : "", r = this.bottomSheet.querySelector("#path-configuration-check-properties-output");
+      r.innerHTML = n;
+    });
+  }, 500);
   bridgeLogHTML(t, e, o, s, n) {
     return `
       <div class="log-entry d-flex gap-3 pt-2 pb-2">
         <div class="log-entry-icon d-flex justify-content-center align-items-center">
-          ${t === "send" ? j : R}
+          ${t === "send" ? N : z}
         </div>
         <div class="w-100 overflow-auto">
           <div class="d-flex justify-content-between">
@@ -1077,9 +1222,9 @@ class J {
             <small>${n}</small>
           </div>
           <div class="overflow-auto">
-            ${Object.entries(s).map(([r, a]) => {
-      const w = typeof a == "object" && a !== null ? JSON.stringify(a) : a;
-      return `<div class="white-space-collapse">${r}: ${w}</div>`;
+            ${Object.entries(s).map(([r, c]) => {
+      const g = typeof c == "object" && c !== null ? JSON.stringify(c) : c;
+      return `<div class="white-space-collapse">${r}: ${g}</div>`;
     }).join("")}
           </div>
         </div>
@@ -1093,8 +1238,17 @@ class J {
           <div class="d-flex justify-content-end">
             <small>${o}</small>
           </div>
-          <div class="log-entry-message ${t}">
-            ${e}
+          <div class="d-flex justify-content-between">
+            <div class="log-entry-message ${t}">
+              ${e}
+            </div>
+            <div class="dropdown dropdown--right">
+              <button class="dropdown-trigger btn-icon">${y}</button>
+              <div class="dropdown-content">
+                <button class="dropdown-btn-full-width dropdown-content-action console-log-action-hide-console-log">Ignore this log</button>
+                <button class="dropdown-btn-full-width dropdown-content-action console-log-action-copy-console-log">Copy log message</button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1115,8 +1269,7 @@ class J {
     `;
   }
   nativeViewStackHTML(t) {
-    var x;
-    const e = ["UINavigationController", "NavigatorHost"].includes(t.type), o = t.type === "UITabBarController", s = ["VisitableViewController", "HotwireWebFragment", "BackStackEntry"].includes(t.type), r = `viewstack-card ${t.url === this.currentUrl ? "current-view" : ""} ${e ? "main-view" : s ? "hotwire-view" : o ? "tab-container" : "non-identified-view"}`, a = "viewstack-" + Math.random().toString(16).slice(2), w = t.url ? `<div class="view-url">
+    const e = (d) => d?.replace(/\/+$/, ""), o = ["UINavigationController", "NavigatorHost"].includes(t.type), s = t.type === "UITabBarController", n = ["VisitableViewController", "HotwireWebFragment", "BackStackEntry"].includes(t.type), c = `viewstack-card ${e(t.url) === e(this.currentUrl) ? "current-view" : ""} ${o ? "main-view" : n ? "hotwire-view" : s ? "tab-container" : "non-identified-view"}`, g = "viewstack-" + Math.random().toString(16).slice(2), L = t.url ? `<div class="view-url">
           ${(() => {
       try {
         return new URL(t.url).pathname;
@@ -1124,31 +1277,31 @@ class J {
         return t.url;
       }
     })()}
-         </div>` : "", k = (() => {
+         </div>` : "", w = (() => {
       try {
-        const h = t.pathConfigurationProperties;
-        return JSON.stringify(typeof h == "string" ? JSON.parse(h) : h, null, 2);
+        const d = t.pathConfigurationProperties;
+        return JSON.stringify(typeof d == "string" ? JSON.parse(d) : d, null, 2);
       } catch {
         return t.pathConfigurationProperties;
       }
-    })(), T = k ? `<pre class="view-path-configuration">${k}</pre>` : "", B = (x = t.children) != null && x.length ? `<div class="child-container">
-          ${t.children.map((h) => this.nativeViewStackHTML(h)).join("")}
+    })(), x = w ? `<pre class="view-path-configuration">${w}</pre>` : "", C = t.children?.length ? `<div class="child-container">
+          ${t.children.map((d) => this.nativeViewStackHTML(d)).join("")}
          </div>` : "";
     return `
       <div>
-        <div class="${r} collapse no-chevron" data-collapse-target="path-configuration-properties-${a}">
+        <div class="${c} collapse no-chevron" data-collapse-target="path-configuration-properties-${g}">
           <div>
             <div class="view-title">
               ${t.title == "null" ? "" : t.title}
               <div class="view-title-details">${t.type}</div>
             </div>
-            ${w}
+            ${L}
           </div>
-          <div id="path-configuration-properties-${a}" class="collapse-target">
-            ${T}
+          <div id="path-configuration-properties-${g}" class="collapse-target">
+            ${x}
           </div>
         </div>
-        ${B}
+        ${C}
       </div>
     `;
   }
@@ -1161,7 +1314,7 @@ class J {
     });
   }
   registerBridgeComponentExample() {
-    switch (S()) {
+    switch (f()) {
       case "android":
         return `
 <pre class="overflow-auto">
@@ -1182,7 +1335,7 @@ class J {
     }
   }
   registerBridgeComponentHelpURL() {
-    switch (S()) {
+    switch (f()) {
       case "android":
         return "https://native.hotwired.dev/android/bridge-components";
       case "ios":
@@ -1192,7 +1345,7 @@ class J {
     }
   }
   checkNativeFeatures() {
-    this.state.supportsNativeStackView && this.bottomSheet.querySelector(".tablink[data-tab-id='tab-native-stack']").classList.remove("d-none");
+    this.state.supportsNativeStackView && (this.bottomSheet.querySelector(".tablink[data-tab-id='tab-native-stack']").classList.remove("d-none"), this.bottomSheet.querySelector(".btn-switch-to-single-tab-sheet[data-tab-id='single-tab-path-configuration-check']").classList.remove("d-none"));
   }
   addEventListeners() {
     this.bottomSheet.hasEventListeners || (this.sheetOverlay.addEventListener("click", () => {
@@ -1208,7 +1361,7 @@ class J {
     }), this.bottomSheet.querySelectorAll(".btn-switch-to-single-tab-sheet").forEach((t) => {
       t.addEventListener("click", (e) => {
         const o = e.target.closest("[data-tab-id]").dataset.tabId;
-        o && this.switchToSingleTabSheet(o);
+        o && (o === "single-tab-path-configuration-check" && this.bottomSheet.querySelector("#path-configuration-check-url").value === "/" && this.renderPathConfigurationCheck("/"), this.switchToSingleTabSheet(o));
       });
     }), this.bottomSheet.querySelectorAll(".btn-close-single-mode").forEach((t) => {
       t.addEventListener("click", () => {
@@ -1218,7 +1371,7 @@ class J {
       const e = t.closest("input[type='checkbox']");
       if (!e) return;
       const o = e.dataset.consoleFilter, s = e.checked;
-      z(o, s), this.renderConsoleLogs();
+      $(o, s), this.renderConsoleLogs();
     }), this.bottomSheet.querySelector(".btn-search-console").addEventListener("click", () => {
       const t = this.bottomSheet.querySelector(".console-search");
       t.classList.toggle("d-none"), t.querySelector("input").focus();
@@ -1226,24 +1379,28 @@ class J {
       this.devTools.state.setConsoleSearchValue(t.target.value.toLowerCase()), this.renderConsoleLogs();
     }), this.bottomSheet.querySelector("#bottom-sheet-height-setting").addEventListener("change", (t) => {
       const e = t.target.value;
-      this.sheetHeight = parseInt(e), d("bottomSheetHeight", e), this.updateSheetHeight(e);
+      this.sheetHeight = parseInt(e), l("bottomSheetHeight", e), this.updateSheetHeight(e);
     }), this.bottomSheet.querySelector("#console-error-animation-setting").addEventListener("change", (t) => {
-      d("errorAnimationEnabled", t.target.checked);
+      l("errorAnimationEnabled", t.target.checked);
     }), this.bottomSheet.querySelector("#font-size-setting").addEventListener("change", (t) => {
       let e = t.target.value;
-      e = Math.max(8, Math.min(24, e)), d("fontSize", e), this.devTools.setCSSProperty("--font-size", `${e}px`);
+      e = Math.max(8, Math.min(24, e)), l("fontSize", e), this.devTools.setCSSProperty("--font-size", `${e}px`);
     }), this.bottomSheet.querySelector("#auto-open-setting").addEventListener("change", (t) => {
-      d("autoOpen", t.target.checked);
+      l("autoOpen", t.target.checked);
+    }), this.bottomSheet.querySelector("#scroll-to-latest-log-setting").addEventListener("change", (t) => {
+      l("scrollToLatestLog", t.target.checked);
     }), this.bottomSheet.querySelector(".pin-bottom-sheet").addEventListener("click", () => {
-      const t = c("bottomSheetPinned") === !0;
-      d("bottomSheetPinned", !t), this.sheetOverlay.classList.toggle("active"), this.bottomSheet.querySelector(".settings-dropdown").classList.remove("dropdown-open");
+      const t = a("bottomSheetPinned") === !0;
+      l("bottomSheetPinned", !t), this.sheetOverlay.classList.toggle("active"), this.bottomSheet.querySelector(".settings-dropdown").classList.remove("dropdown-open");
+    }), this.bottomSheet.querySelector("#path-configuration-check-url").addEventListener("input", (t) => {
+      this.bottomSheet.querySelector("#path-configuration-check-properties-output").style.opacity = 0.5, this.renderPathConfigurationCheck(t.target.value);
     }), this.bottomSheet.addEventListener("click", (t) => {
       const e = t.target.closest(".collapse");
       if (e && this.bottomSheet.contains(e)) {
         const n = e.getAttribute("data-collapse-target"), r = this.bottomSheet.querySelector(`#${n}`);
         if (r) {
-          const a = e.classList.toggle("active");
-          r.classList.toggle("active", a);
+          const c = e.classList.toggle("active");
+          r.classList.toggle("active", c);
         }
         return;
       }
@@ -1252,26 +1409,59 @@ class J {
         t.preventDefault(), this.toggleDropdown(o);
         return;
       }
-      this.bottomSheet.querySelectorAll(".dropdown-content.dropdown-open").forEach((n) => {
-        n.closest(".dropdown").contains(t.target) || n.classList.remove("dropdown-open");
-      });
+      if (t.target.closest(".dropdown-content-action")) {
+        this.handleDropdownActionClick(t);
+        return;
+      }
+      this.closeAllDropdowns(t);
     }), this.bottomSheet.hasEventListeners = !0);
   }
+  closeAllDropdowns(t) {
+    this.bottomSheet.querySelectorAll(".dropdown-content.dropdown-open").forEach((o) => {
+      o.closest(".dropdown").contains(t.target) || o.classList.remove("dropdown-open");
+    });
+  }
+  updateConsoleFilter(t) {
+    this.bottomSheet.querySelectorAll(".console-filter-levels input[type='checkbox']").forEach((e) => {
+      const o = e.dataset.consoleFilter, s = t[o];
+      e.checked = s;
+    });
+  }
   toggleDropdown(t) {
     const e = t.nextElementSibling || t.closest(".dropdown").querySelector(".dropdown-content");
     this.bottomSheet.querySelectorAll(".dropdown-content.dropdown-open").forEach((o) => {
       o !== e && o.classList.remove("dropdown-open");
     }), e.classList.toggle("dropdown-open");
   }
+  handleTabClick = (t) => {
+    const e = t.target.closest(".tablink");
+    if (!e) return;
+    const o = e.dataset.tabId;
+    this.devTools.state.setActiveTab(o), this.updateTabView(o);
+  };
+  handleDropdownActionClick = (t) => {
+    const e = t.target.closest(".dropdown-content-action");
+    if (e)
+      if (e.classList.contains("console-log-action-hide-console-log"))
+        I(e.closest(".log-entry").querySelector(".log-entry-message").textContent), this.renderConsoleLogs();
+      else if (e.classList.contains("console-log-action-copy-console-log")) {
+        const s = e.closest(".log-entry").querySelector(".log-entry-message").textContent;
+        navigator.clipboard.writeText(s).then(() => {
+          this.closeAllDropdowns(t);
+        });
+      } else e.classList.contains("btn-remove-console-log-blacklist-entry") && (F(e.dataset.entry.trim()), this.renderConsoleLogs());
+  };
   updateTabView(t) {
-    this.devTools.shadowRoot.querySelectorAll(".tablink, .outer-tab-content").forEach((e) => e.classList.remove("active")), this.devTools.shadowRoot.querySelectorAll(".tab-action-bar").forEach((e) => e.classList.remove("active")), this.devTools.shadowRoot.querySelector(`[data-tab-id="${t}"]`).classList.add("active"), this.devTools.shadowRoot.getElementById(t).classList.add("active"), this.devTools.shadowRoot.querySelector(`.tab-action-bar.${t}`).classList.add("active");
+    this.devTools.shadowRoot.querySelectorAll(".tablink, .outer-tab-content").forEach((e) => e.classList.remove("active")), this.devTools.shadowRoot.querySelectorAll(".tab-action-bar").forEach((e) => e.classList.remove("active")), this.devTools.shadowRoot.querySelector(`[data-tab-id="${t}"]`).classList.add("active"), this.devTools.shadowRoot.getElementById(t).classList.add("active"), this.devTools.shadowRoot.querySelector(`.tab-action-bar.${t}`).classList.add("active"), this.state.shouldScrollToLatestLog && (this.scrollToLatestLog(t), this.state.shouldScrollToLatestLog = !1);
+  }
+  scrollToLatestLog(t) {
+    a("scrollToLatestLog") == !0 && requestAnimationFrame(() => {
+      this.devTools.shadowRoot.getElementById(t)?.querySelector(".log-entry:last-child")?.scrollIntoView({ behavior: "instant", block: "center" });
+    });
   }
   showBottomSheet() {
     this.bottomSheet.classList.contains("show") || (this.bottomSheet.classList.add("show"), this.originalOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", this.updateSheetHeight(this.sheetHeight));
   }
-  updateSheetHeight(t) {
-    this.sheetContent.style.height = `${t}vh`;
-  }
   hideBottomSheet() {
     this.bottomSheet.classList.remove("show"), document.body.style.overflow = this.originalOverflow;
   }
@@ -1279,13 +1469,11 @@ class J {
     this.sheetContent.style.height = `${t}vh`, this.bottomSheet.classList.toggle("fullscreen", t === 100);
   }
   dragStart(t) {
-    var e;
-    this.isDragging = !0, this.startY = t.pageY || ((e = t.touches) == null ? void 0 : e[0].pageY), this.startHeight = parseInt(this.sheetContent.style.height), this.bottomSheet.classList.add("dragging");
+    this.isDragging = !0, this.startY = t.pageY || t.touches?.[0].pageY, this.startHeight = parseInt(this.sheetContent.style.height), this.bottomSheet.classList.add("dragging");
   }
   dragging(t) {
-    var s;
     if (!this.isDragging) return;
-    const e = this.startY - (t.pageY || ((s = t.touches) == null ? void 0 : s[0].pageY)), o = this.startHeight + e / window.innerHeight * 100;
+    const e = this.startY - (t.pageY || t.touches?.[0].pageY), o = this.startHeight + e / window.innerHeight * 100;
     this.updateSheetHeight(o);
   }
   dragStop() {
@@ -1293,6 +1481,15 @@ class J {
     const t = 10, e = parseInt(this.sheetContent.style.height), o = Math.max(0, this.sheetHeight - t), s = Math.min(100, this.sheetHeight + t);
     e < o ? this.hideBottomSheet() : e > s ? this.updateSheetHeight(100) : this.updateSheetHeight(this.sheetHeight);
   }
+  updateFontSize(t) {
+    this.devTools.setCSSProperty("--font-size", `${t}px`), this.bottomSheet.querySelector("#font-size-setting").value = t;
+  }
+  updateErrorAnimation(t) {
+    this.bottomSheet.querySelector("#console-error-animation-setting").checked = t;
+  }
+  updateAutoOpen(t) {
+    this.bottomSheet.querySelector("#auto-open-setting").checked = t;
+  }
   // Helper function to log messages, without causing a rerender of the bottom sheet
   // (Messages with a `HotwireDevTools` prefix will not be logged in the bottom sheet)
   log(t) {
@@ -1300,14 +1497,13 @@ class J {
   }
   // Get all the `static component = "..."` from the bridge components
   get bridgeComponentIdentifiers() {
-    var t;
-    return ((t = window.Stimulus) == null ? void 0 : t.controllers.map((e) => e.component).filter((e) => e !== void 0)) || [];
+    return window.Stimulus?.controllers.map((t) => t.component).filter((t) => t !== void 0) || [];
   }
   get currentUrl() {
     return window.location.href;
   }
 }
-class G {
+class U {
   constructor() {
     this.state = {
       consoleLogs: [],
@@ -1318,7 +1514,7 @@ class G {
       bridgeIsConnected: !1,
       supportsNativeStackView: !1,
       consoleSearch: "",
-      activeTab: c("activeTab") || "tab-bridge-components"
+      activeTab: this.storedActiveTab
     }, this.listeners = [];
   }
   subscribe(t) {
@@ -1361,19 +1557,24 @@ class G {
     this.state.eventLogs = [], this.notify();
   }
   setActiveTab(t) {
-    this.state.activeTab = t, d("activeTab", t);
+    this.state.activeTab = t, l("activeTab", t);
   }
   setConsoleSearchValue(t) {
     this.state.consoleSearch = t;
   }
+  updateLocalStorageSettings() {
+    this.state.activeTab = this.storedActiveTab;
+  }
   get currentTime() {
     return (/* @__PURE__ */ new Date()).toLocaleTimeString();
   }
+  get storedActiveTab() {
+    return a("activeTab") || "tab-bridge-components";
+  }
 }
-class K {
+class W {
   bridgeIsConnected() {
-    var t, e;
-    return !!((t = window.HotwireNative) != null && t.web || (e = window.Strada) != null && e.web);
+    return !!(window.HotwireNative?.web || window.Strada?.web);
   }
   // Send a message to the native side
   send(t, e = {}, o = null) {
@@ -1396,38 +1597,19 @@ class K {
     return this.bridgeIsConnected() ? this.bridge.supportsComponent(t) : !1;
   }
   getSupportedComponents() {
-    var t;
-    return ((t = document.documentElement.dataset.bridgeComponents) == null ? void 0 : t.split(" ")) || [];
+    return document.documentElement.dataset.bridgeComponents?.split(" ") || [];
   }
   get bridge() {
-    var t, e;
-    return ((t = window.HotwireNative) == null ? void 0 : t.web) || ((e = window.Strada) == null ? void 0 : e.web);
+    return window.HotwireNative?.web || window.Strada?.web;
   }
 }
-class Z {
+class X {
   constructor(t = {}) {
-    l(this, "update", p((t) => {
-      this.bottomSheet.update(t);
-    }, 200));
-    // Fetch the current stack from the native side
-    // The debounce on this function is intentionally high,
-    // to ensure the native side has enough time to set the ViewController / Fragment titles.
-    // With a lower debounce, the view controller / fragment title would often be empty.
-    l(this, "fetchNativeStack", p(() => {
-      this.nativeBridge.send("currentStackInfo", {}, (t) => {
-        this.state.setSupportsNativeStack(!0), this.state.setNativeStack(t.data.stack);
-      });
-    }, 1e3));
-    l(this, "injectCSSToShadowRoot", async () => {
-      if (this.shadowRoot.querySelector("style")) return;
-      const t = document.createElement("style");
-      t.textContent = M(), this.shadowRoot.appendChild(t);
-    });
     this.options = {
       enabled: !0,
       reset: !1,
       ...t
-    }, this.options.enabled && (this.options.reset && q(), this.state = new G(), this.bubble = new U(this), this.bottomSheet = new J(this), this.nativeBridge = new K(this), this.diagnosticsChecker = new H(), this.state.subscribe(this.update.bind(this)), this.listenForTurboEvents());
+    }, this.options.enabled && (this.options.reset && B(), this.state = new U(), this.bubble = new V(this), this.bottomSheet = new Y(this), this.nativeBridge = new W(this), this.diagnosticsChecker = new T(), this.state.subscribe(this.update.bind(this)), this.listenForTurboEvents());
   }
   // Setup gets called initially and on every turbo:load event, eg. when navigating to a new page
   setup() {
@@ -1435,23 +1617,25 @@ class Z {
       this.nativeBridgeGotConnected();
     }), this.addEventListeners(), this.diagnosticsChecker.checkForWarnings(), this.bubble.onClick(() => {
       this.bottomSheet.showBottomSheet(), this.nativeBridge.send("vibrate");
-    }), c("autoOpen") === !0 && this.bottomSheet.showBottomSheet());
+    }), a("autoOpen") === !0 && this.bottomSheet.showBottomSheet());
   }
   nativeBridgeGotConnected() {
-    var t, e;
-    this.originalBridge || (this.originalBridge = ((t = window.HotwireNative) == null ? void 0 : t.web) || ((e = window.Strada) == null ? void 0 : e.web), this.addBridgeProxy(), this.state.setBridgeIsConnected(!0), this.callNativeBridgeComponent(), this.updateSupportedBridgeComponents(), this.startBridgeComponentObserver());
+    this.originalBridge || (this.originalBridge = window.HotwireNative?.web || window.Strada?.web, this.addBridgeProxy(), this.state.setBridgeIsConnected(!0), this.callNativeBridgeComponent(), this.updateSupportedBridgeComponents(), this.startBridgeComponentObserver());
   }
   callNativeBridgeComponent() {
     this.nativeBridge.bridgeIsConnected() && this.nativeBridge.send("connect", {}, (t) => {
       this.fetchNativeStack();
     });
   }
+  update = h((t) => {
+    this.bottomSheet.update(t);
+  }, 200);
   setupShadowRoot() {
     if (this.shadowContainer.shadowRoot) {
       this.shadowRoot = this.shadowContainer.shadowRoot, this.injectCSSToShadowRoot();
       return;
     }
-    this.shadowRoot = this.shadowContainer.attachShadow({ mode: "open" }), this.setCSSProperty("--font-size", `${c("fontSize") || 16}px`), this.injectCSSToShadowRoot();
+    this.shadowRoot = this.shadowContainer.attachShadow({ mode: "open" }), this.setCSSProperty("--font-size", `${a("fontSize") || 16}px`), this.injectCSSToShadowRoot();
   }
   addBridgeProxy() {
     const t = () => ({
@@ -1466,20 +1650,20 @@ class Z {
     window.console = new Proxy(this.originalConsole, {
       get: (t, e, o) => {
         const s = Reflect.get(t, e, o);
-        return (...n) => (this.interceptedConsoleMessage(e, n), s == null ? void 0 : s.apply(t, n));
+        return (...n) => (this.interceptedConsoleMessage(e, n), s?.apply(t, n));
       }
     });
   }
   interceptedBridgeMessage(t, e) {
     e.forEach((o) => {
-      const s = o.component, n = o.event, { metadata: r, ...a } = o.data;
-      s !== "dev-tools" && this.state.addBridgeLog(t, s, n, a);
+      const s = o.component, n = o.event, { metadata: r, ...c } = o.data;
+      s !== "dev-tools" && this.state.addBridgeLog(t, s, n, c);
     });
   }
   interceptedConsoleMessage(t, e) {
     const o = e.map((s) => {
       if (s instanceof Element) {
-        const r = Array.from(s.attributes).map((a) => `${a.name}="${a.value}"`).join(" ");
+        const r = Array.from(s.attributes).map((c) => `${c.name}="${c.value}"`).join(" ");
         return `&lt;${s.tagName.toLowerCase()}${r ? " " + r : ""}&gt;&lt;/${s.tagName.toLowerCase()}&gt;`;
       }
       if (typeof s == "object")
@@ -1490,27 +1674,42 @@ class Z {
         }
       return s.toString().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     }).join(" ");
-    o.includes("hotwire-native-dev-tools") || o.includes("HotwireDevTools") || (this.state.addConsoleLog(t, o), t === "error" && this.bubble.animateErrorBorder());
+    o.includes("hotwire-native-dev-tools") || o.includes("HotwireDevTools") || (this.state.addConsoleLog(t, o), t === "error" && (m().includes(o) || this.bubble.animateErrorBorder()));
   }
+  // Fetch the current stack from the native side
+  // The debounce on this function is intentionally high,
+  // to ensure the native side has enough time to set the ViewController / Fragment titles.
+  // With a lower debounce, the view controller / fragment title would often be empty.
+  fetchNativeStack = h(() => {
+    this.nativeBridge.send("currentStackInfo", {}, (t) => {
+      this.state.setSupportsNativeStack(!0), this.state.setNativeStack(t.data.stack);
+    });
+  }, 1e3);
   refetchNativeStack() {
     this.nativeBridge.send("currentStackInfo", {}, (t) => {
       this.state.setNativeStack(t.data.stack);
     });
   }
+  injectCSSToShadowRoot = async () => {
+    if (this.shadowRoot.querySelector("style")) return;
+    const t = document.createElement("style");
+    t.textContent = E(), this.shadowRoot.appendChild(t);
+  };
   addEventListeners() {
     this.hasEventListeners || (window.addEventListener("error", (t) => {
       const { message: e, filename: o, lineno: s, colno: n } = t, r = `${e} at ${o}:${s}:${n}`;
       this.interceptedConsoleMessage("error", [r]);
     }), window.addEventListener("unhandledrejection", (t) => {
-      var e;
-      this.interceptedConsoleMessage("error", [(e = t.reason) == null ? void 0 : e.message]);
+      this.interceptedConsoleMessage("error", [t.reason?.message]);
     }), window.addEventListener(
       "resize",
       () => {
         this.bubble.render();
       },
       { passive: !0 }
-    ), this.hasEventListeners = !0);
+    ), window.addEventListener("storage", (t) => {
+      t.key === "hotwire-native-dev-tools" && (this.state.updateLocalStorageSettings(), this.bubble.render(), this.bottomSheet.update(this.state.state), this.bottomSheet.applySettingsFromStorage());
+    }), this.hasEventListeners = !0);
   }
   listenForTurboEvents() {
     if (this.eventsRegistered) return;
@@ -1576,8 +1775,8 @@ class Z {
     return (/* @__PURE__ */ new Date()).toLocaleTimeString();
   }
 }
-const _ = (i = {}) => {
-  const t = new Z(i);
+const J = (i = {}) => {
+  const t = new X(i);
   t.options.enabled && (t.setup(), document.addEventListener(
     "turbo:load",
     () => {
@@ -1587,6 +1786,6 @@ const _ = (i = {}) => {
   ));
 };
 export {
-  _ as setupDevTools
+  J as setupDevTools
 };
 //# sourceMappingURL=hotwire-native-dev-tools.es.js.map