hotwire-native-dev-tools 0.1.0-rc.6 → 0.2.0

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

@@ -1,10 +1,10 @@
-var $ = Object.defineProperty;
-var L = (i) => {
+var F = Object.defineProperty;
+var T = (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);
+var q = (i, t, e) => t in i ? F(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var d = (i, t, e) => q(i, typeof t != "symbol" ? t + "" : t, e), A = (i, t, e) => t.has(i) || T("Cannot " + e);
+var g = (i, t, e) => (A(i, t, "read from private field"), e ? e.call(i) : t.get(i)), p = (i, t, e) => t.has(i) ? T("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e);
 const M = () => `
     :host {
       all: initial;
@@ -223,6 +223,8 @@ const M = () => `
     }
 
     .bottom-sheet .content {
+      display: flex;
+      flex-direction: column;
       width: 100%;
       height: 40vh;
       position: relative;
@@ -336,8 +338,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 +354,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;
@@ -634,6 +655,10 @@ const M = () => `
       overflow: auto;
     }
 
+    .m-0 {
+      margin: 0;
+    }
+
     .mt-1 {
       margin-top: 0.25rem;
     }
@@ -686,16 +711,16 @@ const M = () => `
       width: 80%;
     }
   `;
-var m, u, v;
+var v, f, w;
 class H {
   constructor() {
-    l(this, "printWarning", (t, e = !0, ...o) => {
+    d(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);
+    d(this, "checkForWarnings", () => {
+      g(this, v).call(this), g(this, f).call(this), g(this, w).call(this);
     });
-    g(this, m, () => {
+    p(this, v, () => {
       var t;
       window.Turbo ? ((t = window.Turbo) == null ? void 0 : t.session.drive) === !1 && setTimeout(() => {
         var e;
@@ -704,13 +729,13 @@ class H {
         window.Turbo || this.printWarning("Turbo is not detected. Hotwire Native will not work correctly without Turbo");
       }, 1e3);
     });
-    g(this, u, () => {
+    p(this, f, () => {
       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, () => {
+    p(this, w, () => {
       const t = document.querySelectorAll("[data-turbo-permanent]");
       t.length !== 0 && t.forEach((e) => {
         const o = e.id;
@@ -726,29 +751,29 @@ class H {
     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) => {
+v = new WeakMap(), f = new WeakMap(), w = new WeakMap();
+const a = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") || "{}")[i], h = (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 = () => {
+}, z = () => {
   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) => {
+}, N = (i, t) => {
+  const e = u();
+  return e[i] = t, h("consoleFilterLevels", e), e;
+}, m = (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: E } = window.navigator, D = /iOS/.test(E), P = /Android/.test(E), L = () => D ? "ios" : P ? "android" : "unknown", O = () => {
+  switch (L()) {
     case "android":
       return "Android";
     case "ios":
@@ -756,7 +781,10 @@ const c = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") ||
     default:
       return "<unknown>";
   }
-}, P = `
+}, R = (i) => document.querySelector(`meta[name="${i}"]`), y = (i) => {
+  const t = R(i);
+  return t && t.content;
+}, j = `
   <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,59 +792,59 @@ const c = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") ||
         </g>
     </g>
   </svg>
-`, R = `
+`, V = `
   <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 = `
+`, Y = `
   <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 = `
+`, S = `
   <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 = `
+`, k = `
   <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 = `
+`, W = `
   <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 = `
+`, U = `
   <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 = `
+`, X = `
   <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 = `
+`, G = `
   <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>
 `;
-class U {
+class K {
   constructor(t) {
-    l(this, "render", p(() => {
+    d(this, "render", m(() => {
       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;
+    d(this, "animateErrorBorder", m(() => {
+      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");
@@ -842,7 +870,7 @@ class U {
   }
   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() {
@@ -852,7 +880,7 @@ class U {
       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 = j, 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);
@@ -867,7 +895,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, h(this.settingKey, { x: this.currentX, y: this.currentY });
   }
   drag(t) {
     if (!this.currentlyDragging) return;
@@ -880,21 +908,39 @@ class U {
     o.style.transform = `translate3d(${t}px, ${e}px, 0)`;
   }
 }
-class J {
+class Z {
   constructor(t) {
-    l(this, "handleTabClick", (t) => {
+    d(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;
@@ -903,9 +949,9 @@ class J {
       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,9 +960,10 @@ 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">${G}</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="btn-switch-to-single-tab-sheet" data-tab-id="single-tab-info">Info</button>
                 <button class="pin-bottom-sheet">Pin Bottom Sheet</button>
               </div>
             </div>
@@ -924,13 +971,13 @@ class J {
 
           <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">${k}</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">${X}</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 +986,7 @@ 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>
+                <button class="btn-icon btn-clear-tab btn-clear-console-logs">${k}</button>
               </div>
 
               <div class="console-search mt-2 ${s ? "" : "d-none"}">
@@ -947,10 +994,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">${k}</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">${W}</button>
             </div>
           </div>
         </div>
@@ -964,7 +1011,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">${U}</button>
                 </div>
               </div>
 
@@ -991,10 +1038,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">${S}</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 ${O()} 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 +1053,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">${S}</button>
                 <h3 class="ms-1">Settings</h3>
               </div>
               <div class="mb-3">
@@ -1018,25 +1065,65 @@ 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-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">${S}</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>${y("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>${y("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>${y("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,7 +1131,7 @@ class J {
     `, this.devTools.shadowRoot.appendChild(this.bottomSheet);
   }
   renderConsoleLogs() {
-    const t = this.bottomSheet.querySelector(".tab-content-console-logs"), e = y(), o = this.state.consoleSearch;
+    const t = this.bottomSheet.querySelector(".tab-content-console-logs"), e = u(), 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>';
   }
   renderBridgeComponents() {
@@ -1069,7 +1156,7 @@ class J {
     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" ? Y : V}
         </div>
         <div class="w-100 overflow-auto">
           <div class="d-flex justify-content-between">
@@ -1077,9 +1164,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 b = typeof c == "object" && c !== null ? JSON.stringify(c) : c;
+      return `<div class="white-space-collapse">${r}: ${b}</div>`;
     }).join("")}
           </div>
         </div>
@@ -1115,8 +1202,8 @@ 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">
+    var C;
+    const e = (l) => l == null ? void 0 : l.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"}`, b = "viewstack-" + Math.random().toString(16).slice(2), B = t.url ? `<div class="view-url">
           ${(() => {
       try {
         return new URL(t.url).pathname;
@@ -1124,31 +1211,31 @@ class J {
         return t.url;
       }
     })()}
-         </div>` : "", k = (() => {
+         </div>` : "", x = (() => {
       try {
-        const h = t.pathConfigurationProperties;
-        return JSON.stringify(typeof h == "string" ? JSON.parse(h) : h, null, 2);
+        const l = t.pathConfigurationProperties;
+        return JSON.stringify(typeof l == "string" ? JSON.parse(l) : l, 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 ? `<pre class="view-path-configuration">${x}</pre>` : "", I = (C = t.children) != null && C.length ? `<div class="child-container">
+          ${t.children.map((l) => this.nativeViewStackHTML(l)).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-${b}">
           <div>
             <div class="view-title">
               ${t.title == "null" ? "" : t.title}
               <div class="view-title-details">${t.type}</div>
             </div>
-            ${w}
+            ${B}
           </div>
-          <div id="path-configuration-properties-${a}" class="collapse-target">
-            ${T}
+          <div id="path-configuration-properties-${b}" class="collapse-target">
+            ${$}
           </div>
         </div>
-        ${B}
+        ${I}
       </div>
     `;
   }
@@ -1161,7 +1248,7 @@ class J {
     });
   }
   registerBridgeComponentExample() {
-    switch (S()) {
+    switch (L()) {
       case "android":
         return `
 <pre class="overflow-auto">
@@ -1182,7 +1269,7 @@ class J {
     }
   }
   registerBridgeComponentHelpURL() {
-    switch (S()) {
+    switch (L()) {
       case "android":
         return "https://native.hotwired.dev/android/bridge-components";
       case "ios":
@@ -1218,7 +1305,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();
+      N(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 +1313,26 @@ 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), h("bottomSheetHeight", e), this.updateSheetHeight(e);
     }), this.bottomSheet.querySelector("#console-error-animation-setting").addEventListener("change", (t) => {
-      d("errorAnimationEnabled", t.target.checked);
+      h("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)), h("fontSize", e), this.devTools.setCSSProperty("--font-size", `${e}px`);
     }), this.bottomSheet.querySelector("#auto-open-setting").addEventListener("change", (t) => {
-      d("autoOpen", t.target.checked);
+      h("autoOpen", t.target.checked);
+    }), this.bottomSheet.querySelector("#scroll-to-latest-log-setting").addEventListener("change", (t) => {
+      h("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;
+      h("bottomSheetPinned", !t), this.sheetOverlay.classList.toggle("active"), this.bottomSheet.querySelector(".settings-dropdown").classList.remove("dropdown-open");
     }), 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;
       }
@@ -1257,6 +1346,12 @@ class J {
       });
     }), this.bottomSheet.hasEventListeners = !0);
   }
+  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) => {
@@ -1264,14 +1359,17 @@ class J {
     }), e.classList.toggle("dropdown-open");
   }
   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(() => {
+      const e = this.devTools.shadowRoot.getElementById(t), o = e == null ? void 0 : e.querySelector(".log-entry:last-child");
+      o == null || o.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;
   }
@@ -1293,6 +1391,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) {
@@ -1307,7 +1414,7 @@ class J {
     return window.location.href;
   }
 }
-class G {
+class Q {
   constructor() {
     this.state = {
       consoleLogs: [],
@@ -1318,7 +1425,7 @@ class G {
       bridgeIsConnected: !1,
       supportsNativeStackView: !1,
       consoleSearch: "",
-      activeTab: c("activeTab") || "tab-bridge-components"
+      activeTab: this.storedActiveTab
     }, this.listeners = [];
   }
   subscribe(t) {
@@ -1361,16 +1468,22 @@ class G {
     this.state.eventLogs = [], this.notify();
   }
   setActiveTab(t) {
-    this.state.activeTab = t, d("activeTab", t);
+    this.state.activeTab = t, h("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 _ {
   bridgeIsConnected() {
     var t, e;
     return !!((t = window.HotwireNative) != null && t.web || (e = window.Strada) != null && e.web);
@@ -1404,21 +1517,21 @@ class K {
     return ((t = window.HotwireNative) == null ? void 0 : t.web) || ((e = window.Strada) == null ? void 0 : e.web);
   }
 }
-class Z {
+class tt {
   constructor(t = {}) {
-    l(this, "update", p((t) => {
+    d(this, "update", m((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(() => {
+    d(this, "fetchNativeStack", m(() => {
       this.nativeBridge.send("currentStackInfo", {}, (t) => {
         this.state.setSupportsNativeStack(!0), this.state.setNativeStack(t.data.stack);
       });
     }, 1e3));
-    l(this, "injectCSSToShadowRoot", async () => {
+    d(this, "injectCSSToShadowRoot", async () => {
       if (this.shadowRoot.querySelector("style")) return;
       const t = document.createElement("style");
       t.textContent = M(), this.shadowRoot.appendChild(t);
@@ -1427,7 +1540,7 @@ class Z {
       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 && z(), this.state = new Q(), this.bubble = new K(this), this.bottomSheet = new Z(this), this.nativeBridge = new _(this), this.diagnosticsChecker = new H(), 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,7 +1548,7 @@ 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;
@@ -1451,7 +1564,7 @@ class Z {
       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 = () => ({
@@ -1472,14 +1585,14 @@ class Z {
   }
   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")
@@ -1510,7 +1623,9 @@ class Z {
         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 +1691,8 @@ class Z {
     return (/* @__PURE__ */ new Date()).toLocaleTimeString();
   }
 }
-const _ = (i = {}) => {
-  const t = new Z(i);
+const ot = (i = {}) => {
+  const t = new tt(i);
   t.options.enabled && (t.setup(), document.addEventListener(
     "turbo:load",
     () => {
@@ -1587,6 +1702,6 @@ const _ = (i = {}) => {
   ));
 };
 export {
-  _ as setupDevTools
+  ot as setupDevTools
 };
 //# sourceMappingURL=hotwire-native-dev-tools.es.js.map