hotwire-native-dev-tools 0.3.0 → 0.3.1

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

@@ -1,4 +1,4 @@
-const E = () => `
+const T = () => `
     :host {
       all: initial;
       font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
@@ -729,7 +729,7 @@ const E = () => `
       width: 80%;
     }
   `;
-class T {
+class B {
   constructor() {
     this.printedWarnings = [];
   }
@@ -759,34 +759,34 @@ class T {
     return Array.from(document.querySelectorAll("turbo-frame")).map((t) => t.id);
   }
 }
-const a = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") || "{}")[i], l = (i, t) => {
+const c = (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));
-}, B = () => {
+}, $ = () => {
   localStorage.removeItem("hotwire-native-dev-tools");
-}, u = () => a("consoleFilterLevels") || {
+}, u = () => c("consoleFilterLevels") || {
   warn: !0,
   error: !0,
   debug: !0,
   info: !0,
   log: !0
-}, $ = (i, t) => {
+}, I = (i, t) => {
   const e = u();
   return e[i] = t, l("consoleFilterLevels", e), e;
-}, m = () => a("consoleLogBlacklist") || [], I = (i) => {
+}, m = () => c("consoleLogBlacklist") || [], F = (i) => {
   i = i.trim();
-  const t = a("consoleLogBlacklist") || [];
+  const t = c("consoleLogBlacklist") || [];
   return t.includes(i) || (t.push(i), l("consoleLogBlacklist", t)), t;
-}, F = (i) => {
-  let t = a("consoleLogBlacklist") || [];
+}, q = (i) => {
+  let t = c("consoleLogBlacklist") || [];
   return t = t.filter((e) => e !== i), l("consoleLogBlacklist", t), t;
-}, h = (i, t) => {
+}, g = (i, t) => {
   let e = null;
   return (...o) => {
     const s = () => i.apply(void 0, o);
     clearTimeout(e), e = setTimeout(s, t);
   };
-}, { userAgent: S } = window.navigator, k = /iOS/.test(S), q = /Android/.test(S), f = () => k ? "ios" : q ? "android" : "unknown", A = () => {
+}, { userAgent: k } = window.navigator, L = /iOS/.test(k), M = /Android/.test(k), f = () => L ? "ios" : M ? "android" : "unknown", A = () => {
   switch (f()) {
     case "android":
       return "Android";
@@ -795,10 +795,13 @@ const a = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") ||
     default:
       return "<unknown>";
   }
-}, M = (i) => document.querySelector(`meta[name="${i}"]`), v = (i) => {
-  const t = M(i);
+}, H = (i) => document.querySelector(`meta[name="${i}"]`), v = (i) => {
+  const t = H(i);
   return t && t.content;
-}, H = `
+}, y = (i) => {
+  const t = Array.from(i.attributes).map((e) => `${e.name}="${e.value}"`).join(" ");
+  return `&lt;${i.tagName.toLowerCase()}${t ? " " + t : ""}&gt;&lt;/${i.tagName.toLowerCase()}&gt;`;
+}, z = `
   <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)">
@@ -806,12 +809,12 @@ const a = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") ||
         </g>
     </g>
   </svg>
-`, z = `
+`, 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 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>
-`, N = `
+`, 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="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"/>
@@ -826,47 +829,47 @@ const a = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") ||
     <!--!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>
-`, P = `
+`, 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="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>
-`, D = `
+`, 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="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>
-`, O = `
+`, 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="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>
-`, j = `
+`, R = `
   <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>
-`, y = `
+`, S = `
   <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 = `
+`, V = `
   <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 V {
+class Y {
   constructor(t) {
     this.devTools = t, this.bubbleSize = 4.75 * 16 + 0.3 * 16, this.minVisible = this.bubbleSize * 0.5, this.currentlyDragging = !1;
   }
-  render = h(() => {
+  render = g(() => {
     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 } = a(this.settingKey) || t;
+    const t = { x: window.innerWidth - 100, y: window.innerHeight - 100 }, { x: e, y: o } = c(this.settingKey) || t;
     this.currentX = this.initialX = this.xOffset = e, this.currentY = this.initialY = this.yOffset = o;
   }
   createDragItem() {
@@ -875,7 +878,7 @@ class V {
       this.dragItem = t;
       return;
     }
-    this.dragItem = document.createElement("div"), this.dragItem.id = "floating-bubble", this.dragItem.innerHTML = H, this.devTools.shadowRoot.appendChild(this.dragItem);
+    this.dragItem = document.createElement("div"), this.dragItem.id = "floating-bubble", this.dragItem.innerHTML = z, 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);
@@ -883,8 +886,8 @@ class V {
   click(t) {
     this.clickCallback && this.clickCallback(t);
   }
-  animateErrorBorder = h(() => {
-    if (!this.dragItem || a("errorAnimationEnabled") === !1) return;
+  animateErrorBorder = g(() => {
+    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");
@@ -926,9 +929,9 @@ class V {
     o.style.transform = `translate3d(${t}px, ${e}px, 0)`;
   }
 }
-class Y {
+class U {
   constructor(t) {
-    this.devTools = t, this.state = t.state.state, this.sheetHeight = parseInt(a("bottomSheetHeight")) || 55;
+    this.devTools = t, this.state = t.state.state, this.sheetHeight = parseInt(c("bottomSheetHeight")) || 55;
   }
   render() {
     this.createBottomSheet(), this.sheetContent = this.bottomSheet.querySelector(".content"), this.sheetOverlay = this.bottomSheet.querySelector(".sheet-overlay"), this.addEventListeners();
@@ -936,7 +939,7 @@ class Y {
   // 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.scrollToLatestLog(this.state.activeTab), this.state.shouldScrollToLatestLog = !0;
+    this.state = t, this.checkNativeFeatures(), this.renderConsoleLogs(), this.renderBridgeComponents(), this.renderBridgeLogs(), this.renderEvents(), this.renderNativeStack(), this.renderInfos(), this.scrollToLatestLog(this.state.activeTab), this.state.shouldScrollToLatestLog = !0;
   }
   // Called when another native tab of the mobile app
   // updates devtools-related local storage.
@@ -948,7 +951,7 @@ class Y {
       { key: "errorAnimationEnabled", setter: (o) => this.updateErrorAnimation(o) },
       { key: "autoOpen", setter: (o) => this.updateAutoOpen(o) }
     ].forEach(({ key: o, setter: s }) => {
-      const n = a(o);
+      const n = c(o);
       n !== void 0 && s(n);
     });
     const e = u();
@@ -962,7 +965,7 @@ class Y {
     }
     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 ${a("bottomSheetPinned") === !0 ? "" : "active"}"></div>
+      <div class="sheet-overlay ${c("bottomSheetPinned") === !0 ? "" : "active"}"></div>
       <div class="content">
         <div class="top-part">
           <div class="tablist">
@@ -971,7 +974,7 @@ class Y {
             <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">${y}</button>
+              <button class="dropdown-trigger tablink-dropdown">${S}</button>
               <div class="dropdown-content settings-dropdown">
                 <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>
@@ -987,9 +990,9 @@ class Y {
             </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">${O}</button>
+                <button class="btn-icon btn-search-console">${j}</button>
                 <div class="dropdown">
-                  <button class="dropdown-trigger btn-icon">${j}</button>
+                  <button class="dropdown-trigger btn-icon">${R}</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>
@@ -999,7 +1002,7 @@ class Y {
                   </div>
                 </div>
                 <div class="dropdown dropdown--scrollable">
-                  <button class="dropdown-trigger btn-icon">${R}</button>
+                  <button class="dropdown-trigger btn-icon">${V}</button>
                   <div class="dropdown-content console-log-blacklist">
                   </div>
                 </div>
@@ -1014,7 +1017,7 @@ class Y {
               <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">${P}</button>
+              <button class="btn-icon btn-reload-tab btn-reload-stack">${D}</button>
             </div>
           </div>
         </div>
@@ -1028,7 +1031,7 @@ class Y {
               <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">${D}</button>
+                  <button class="btn-icon btn-help btn-switch-to-single-tab-sheet mt-1" data-tab-id="single-tab-bridge-component-help">${O}</button>
                 </div>
               </div>
 
@@ -1082,28 +1085,28 @@ class Y {
               </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="${a("fontSize") || 16}" step="1" list="font-size-setting-markers" />
+                <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" />
                 <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" ${a("errorAnimationEnabled") !== !1 ? "checked" : ""} />
+                  <input class="toggle-checkbox" type="checkbox" id="console-error-animation-setting" ${c("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" ${a("autoOpen") === !0 ? "checked" : ""} />
+                  <input class="toggle-checkbox" type="checkbox" id="auto-open-setting" ${c("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" : ""} />
+                  <input class="toggle-checkbox" type="checkbox" id="scroll-to-latest-log-setting" ${c("scrollToLatestLog") === !0 ? "checked" : ""} />
                   <div class="toggle-switch"></div>
                   <span class="toggle-label">Automatically Scroll to New Logs</span>
                 </label>
@@ -1127,36 +1130,6 @@ class Y {
           </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>
       </div>
@@ -1195,26 +1168,61 @@ class Y {
     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}`;
+  renderInfos() {
+    const t = `
+      <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>
+    `;
+    this.bottomSheet.querySelector("#single-tab-info").innerHTML = t;
+  }
+  renderPathConfigurationCheck = g((t) => {
+    const e = L ? 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);
+          const r = o.data.properties;
+          return JSON.stringify(typeof r == "string" ? JSON.parse(r) : r, 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;
+      })(), n = s ? `<pre class="view-path-configuration">${s}</pre>` : "", a = this.bottomSheet.querySelector("#path-configuration-check-properties-output");
+      a.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" ? N : z}
+          ${t === "send" ? P : N}
         </div>
         <div class="w-100 overflow-auto">
           <div class="d-flex justify-content-between">
@@ -1222,9 +1230,9 @@ class Y {
             <small>${n}</small>
           </div>
           <div class="overflow-auto">
-            ${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>`;
+            ${Object.entries(s).map(([a, r]) => {
+      const h = typeof r == "object" && r !== null ? JSON.stringify(r) : r;
+      return `<div class="white-space-collapse">${a}: ${h}</div>`;
     }).join("")}
           </div>
         </div>
@@ -1243,7 +1251,7 @@ class Y {
               ${e}
             </div>
             <div class="dropdown dropdown--right">
-              <button class="dropdown-trigger btn-icon">${y}</button>
+              <button class="dropdown-trigger btn-icon">${S}</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>
@@ -1269,7 +1277,7 @@ class Y {
     `;
   }
   nativeViewStackHTML(t) {
-    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">
+    const e = (d) => d?.replace(/\/+$/, ""), o = ["UINavigationController", "NavigatorHost"].includes(t.type), s = t.type === "UITabBarController", n = ["VisitableViewController", "HotwireWebFragment", "BackStackEntry"].includes(t.type), r = `viewstack-card ${e(t.url) === e(this.currentUrl) ? "current-view" : ""} ${o ? "main-view" : n ? "hotwire-view" : s ? "tab-container" : "non-identified-view"}`, h = "viewstack-" + Math.random().toString(16).slice(2), x = t.url ? `<div class="view-url">
           ${(() => {
       try {
         return new URL(t.url).pathname;
@@ -1284,24 +1292,24 @@ class Y {
       } catch {
         return t.pathConfigurationProperties;
       }
-    })(), x = w ? `<pre class="view-path-configuration">${w}</pre>` : "", C = t.children?.length ? `<div class="child-container">
+    })(), C = w ? `<pre class="view-path-configuration">${w}</pre>` : "", E = t.children?.length ? `<div class="child-container">
           ${t.children.map((d) => this.nativeViewStackHTML(d)).join("")}
          </div>` : "";
     return `
       <div>
-        <div class="${c} collapse no-chevron" data-collapse-target="path-configuration-properties-${g}">
+        <div class="${r} collapse no-chevron" data-collapse-target="path-configuration-properties-${h}">
           <div>
             <div class="view-title">
               ${t.title == "null" ? "" : t.title}
               <div class="view-title-details">${t.type}</div>
             </div>
-            ${L}
-          </div>
-          <div id="path-configuration-properties-${g}" class="collapse-target">
             ${x}
           </div>
+          <div id="path-configuration-properties-${h}" class="collapse-target">
+            ${C}
+          </div>
         </div>
-        ${C}
+        ${E}
       </div>
     `;
   }
@@ -1361,17 +1369,13 @@ class Y {
     }), 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 && (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", () => {
-        this.switchToMultiTabSheet();
+        o && (o === "single-tab-path-configuration-check" && this.bottomSheet.querySelector("#path-configuration-check-url").value === "/" && this.renderPathConfigurationCheck("/"), o === "single-tab-info" && this.renderInfos(), this.switchToSingleTabSheet(o));
       });
     }), this.bottomSheet.querySelector(".top-part").addEventListener("touchstart", this.dragStart.bind(this), { passive: !0 }), this.bottomSheet.addEventListener("touchmove", this.dragging.bind(this), { passive: !0 }), this.bottomSheet.addEventListener("touchend", this.dragStop.bind(this), { passive: !0 }), this.bottomSheet.querySelector(".console-filter-levels").addEventListener("click", ({ target: t }) => {
       const e = t.closest("input[type='checkbox']");
       if (!e) return;
       const o = e.dataset.consoleFilter, s = e.checked;
-      $(o, s), this.renderConsoleLogs();
+      I(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();
@@ -1390,17 +1394,17 @@ class Y {
     }), 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 = a("bottomSheetPinned") === !0;
+      const t = c("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}`);
+        const a = e.getAttribute("data-collapse-target"), r = this.bottomSheet.querySelector(`#${a}`);
         if (r) {
-          const c = e.classList.toggle("active");
-          r.classList.toggle("active", c);
+          const h = e.classList.toggle("active");
+          r.classList.toggle("active", h);
         }
         return;
       }
@@ -1413,6 +1417,10 @@ class Y {
         this.handleDropdownActionClick(t);
         return;
       }
+      if (t.target.closest(".btn-close-single-mode")) {
+        this.switchToMultiTabSheet();
+        return;
+      }
       this.closeAllDropdowns(t);
     }), this.bottomSheet.hasEventListeners = !0);
   }
@@ -1443,19 +1451,19 @@ class Y {
     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();
+        F(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());
+      } else e.classList.contains("btn-remove-console-log-blacklist-entry") && (q(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.state.shouldScrollToLatestLog && (this.scrollToLatestLog(t), this.state.shouldScrollToLatestLog = !1);
   }
   scrollToLatestLog(t) {
-    a("scrollToLatestLog") == !0 && requestAnimationFrame(() => {
+    c("scrollToLatestLog") == !0 && requestAnimationFrame(() => {
       this.devTools.shadowRoot.getElementById(t)?.querySelector(".log-entry:last-child")?.scrollIntoView({ behavior: "instant", block: "center" });
     });
   }
@@ -1503,7 +1511,7 @@ class Y {
     return window.location.href;
   }
 }
-class U {
+class W {
   constructor() {
     this.state = {
       consoleLogs: [],
@@ -1569,10 +1577,10 @@ class U {
     return (/* @__PURE__ */ new Date()).toLocaleTimeString();
   }
   get storedActiveTab() {
-    return a("activeTab") || "tab-bridge-components";
+    return c("activeTab") || "tab-bridge-components";
   }
 }
-class W {
+class X {
   bridgeIsConnected() {
     return !!(window.HotwireNative?.web || window.Strada?.web);
   }
@@ -1603,13 +1611,13 @@ class W {
     return window.HotwireNative?.web || window.Strada?.web;
   }
 }
-class X {
+class J {
   constructor(t = {}) {
     this.options = {
       enabled: !0,
       reset: !1,
       ...t
-    }, 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());
+    }, this.options.enabled && (this.options.reset && $(), this.state = new W(), this.bubble = new Y(this), this.bottomSheet = new U(this), this.nativeBridge = new X(this), this.diagnosticsChecker = new B(), 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() {
@@ -1617,7 +1625,7 @@ class X {
       this.nativeBridgeGotConnected();
     }), this.addEventListeners(), this.diagnosticsChecker.checkForWarnings(), this.bubble.onClick(() => {
       this.bottomSheet.showBottomSheet(), this.nativeBridge.send("vibrate");
-    }), a("autoOpen") === !0 && this.bottomSheet.showBottomSheet());
+    }), c("autoOpen") === !0 && this.bottomSheet.showBottomSheet());
   }
   nativeBridgeGotConnected() {
     this.originalBridge || (this.originalBridge = window.HotwireNative?.web || window.Strada?.web, this.addBridgeProxy(), this.state.setBridgeIsConnected(!0), this.callNativeBridgeComponent(), this.updateSupportedBridgeComponents(), this.startBridgeComponentObserver());
@@ -1627,7 +1635,7 @@ class X {
       this.fetchNativeStack();
     });
   }
-  update = h((t) => {
+  update = g((t) => {
     this.bottomSheet.update(t);
   }, 200);
   setupShadowRoot() {
@@ -1635,13 +1643,13 @@ class X {
       this.shadowRoot = this.shadowContainer.shadowRoot, this.injectCSSToShadowRoot();
       return;
     }
-    this.shadowRoot = this.shadowContainer.attachShadow({ mode: "open" }), this.setCSSProperty("--font-size", `${a("fontSize") || 16}px`), this.injectCSSToShadowRoot();
+    this.shadowRoot = this.shadowContainer.attachShadow({ mode: "open" }), this.setCSSProperty("--font-size", `${c("fontSize") || 16}px`), this.injectCSSToShadowRoot();
   }
   addBridgeProxy() {
     const t = () => ({
       get: (e, o, s) => {
         const n = Reflect.get(e, o, s);
-        return typeof n == "function" && (o === "send" || o === "receive") ? (...r) => (this.interceptedBridgeMessage(o, r), n.apply(e, r)) : typeof n == "function" ? (...r) => n.apply(e, r) : n;
+        return typeof n == "function" && (o === "send" || o === "receive") ? (...a) => (this.interceptedBridgeMessage(o, a), n.apply(e, a)) : typeof n == "function" ? (...a) => n.apply(e, a) : n;
       }
     });
     window.Strada && (window.Strada.web = new Proxy(this.originalBridge, t())), window.HotwireNative && (window.HotwireNative.web = new Proxy(this.originalBridge, t()));
@@ -1656,21 +1664,29 @@ class X {
   }
   interceptedBridgeMessage(t, e) {
     e.forEach((o) => {
-      const s = o.component, n = o.event, { metadata: r, ...c } = o.data;
-      s !== "dev-tools" && this.state.addBridgeLog(t, s, n, c);
+      const s = o.component, n = o.event, { metadata: a, ...r } = o.data;
+      s !== "dev-tools" && this.state.addBridgeLog(t, s, n, r);
     });
   }
   interceptedConsoleMessage(t, e) {
     const o = e.map((s) => {
-      if (s instanceof Element) {
-        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 (s instanceof Element)
+        return y(s);
+      if (s instanceof Error) {
+        let a = `${s.name}: ${s.message}
+`;
+        return s.stack && (a += `
+${s.stack}`), `<pre>${a}</pre>`;
       }
-      if (typeof s == "object")
+      if (typeof s == "object" && s !== null)
         try {
-          return `<pre>${JSON.stringify(s, null, 2)}</pre>`;
+          return `<pre>${JSON.stringify(
+            s,
+            (a, r) => r === window ? "[Window Object]" : r instanceof HTMLElement ? y(r) : r,
+            2
+          )}</pre>`;
         } catch {
-          return `<pre>${s}</pre>`;
+          return `<pre>${s.toString()}</pre>`;
         }
       return s.toString().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     }).join(" ");
@@ -1680,7 +1696,7 @@ class X {
   // 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(() => {
+  fetchNativeStack = g(() => {
     this.nativeBridge.send("currentStackInfo", {}, (t) => {
       this.state.setSupportsNativeStack(!0), this.state.setNativeStack(t.data.stack);
     });
@@ -1693,12 +1709,12 @@ class X {
   injectCSSToShadowRoot = async () => {
     if (this.shadowRoot.querySelector("style")) return;
     const t = document.createElement("style");
-    t.textContent = E(), this.shadowRoot.appendChild(t);
+    t.textContent = T(), 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]);
+      const { message: e, filename: o, lineno: s, colno: n } = t, a = `${e} at ${o}:${s}:${n}`;
+      this.interceptedConsoleMessage("error", [a]);
     }), window.addEventListener("unhandledrejection", (t) => {
       this.interceptedConsoleMessage("error", [t.reason?.message]);
     }), window.addEventListener(
@@ -1775,8 +1791,8 @@ class X {
     return (/* @__PURE__ */ new Date()).toLocaleTimeString();
   }
 }
-const J = (i = {}) => {
-  const t = new X(i);
+const G = (i = {}) => {
+  const t = new J(i);
   t.options.enabled && (t.setup(), document.addEventListener(
     "turbo:load",
     () => {
@@ -1786,6 +1802,6 @@ const J = (i = {}) => {
   ));
 };
 export {
-  J as setupDevTools
+  G as setupDevTools
 };
 //# sourceMappingURL=hotwire-native-dev-tools.es.js.map