hotwire-native-dev-tools 0.1.0-rc.0

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

@@ -0,0 +1,1567 @@
+var $ = Object.defineProperty;
+var x = (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) || x("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) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e);
+const H = () => `
+    :host {
+      all: initial;
+      font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+      --font-size: 16px;
+      font-size: var(--font-size) !important;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    p, span, h1, h2, h3, h4, h5, h6, div, a, button, input, label {
+      font-size: inherit;
+    }
+
+
+    a {
+      color: white;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+    }
+
+    button {
+      user-select: none;
+      -webkit-user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    input {
+      display: block;
+      padding: 3px;
+      box-sizing: border-box;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+
+    input:focus {
+      outline: none;
+    }
+
+    .btn-icon {
+      background-color: transparent;
+      border: none;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5em;
+      height: 100%;
+    }
+
+    .btn-icon svg {
+      width: 1rem;
+      height: 1rem;
+      fill: white;
+    }
+
+    /* Dropdown */
+    .dropdown-content {
+      display: none;
+      position: absolute;
+      z-index: 1000;
+      background: white;
+      border: 1px solid #ddd;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      min-width: 200px;
+      max-width: 300px;
+      opacity: 0;
+      transform: scale(0.9);
+      transition: opacity 0.2s, transform 0.2s;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .dropdown-content.dropdown-open {
+      display: block;
+      opacity: 1;
+      transform: scale(1);
+      pointer-events: auto;
+    }
+
+    .dropdown-content > * {
+      padding: 12px;
+    }
+
+    .dropdown-content button,
+    .dropdown-content label {
+      color: black;
+      width: 100%;
+      border: none;
+      display: flex;
+      align-items: center;
+    }
+
+    .dropdown-content button:not(:first-child) {
+      border-top: 1px solid #cecdcd;
+    }
+
+    .settings-dropdown {
+      right: 0;
+      top: 2rem;
+    }
+
+    /* Floating bubble */
+    #floating-bubble {
+      display: flex;
+      background-color: hsl(0deg 0% 0% / 60%);
+      border-radius: 50%;
+      touch-action: none;
+      user-select: none;
+      z-index: 10000000;
+      position: fixed;
+      top: 10px;
+      left: 10px;
+
+      /* Remove tap highlight on iOS */
+      -webkit-user-select: none;
+      -webkit-tap-highlight-color: transparent;
+
+      /* Keep width, height, and border in sync with bubbleSize in FloatingBubble.js */
+      width: 4.75rem;
+      height: 4.75rem;
+      border: 0.3rem solid rgba(136, 136, 136, 0.5);
+    }
+
+    #floating-bubble svg {
+      transform: scale(0.6);
+      fill: #b1b1b1;
+    }
+
+    #floating-bubble .animation-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    #floating-bubble .error-border {
+      position: absolute;
+      top: -30px;
+      left: -30px;
+      width: calc(100% + 60px);
+      height: calc(100% + 60px);
+      border-radius: 50%;
+    }
+
+    #floating-bubble .error-border circle {
+      transform-origin: center;
+      transform: rotate(-90deg);
+    }
+
+    #floating-bubble .error-border circle.animate {
+      animation: error-border-progress 0.8s ease-out forwards;
+    }
+
+    #floating-bubble .animation-container.fade-out {
+      animation: fade-out 0.4s ease-out forwards;
+    }
+
+    /*
+      The "stroke-dasharray" defines the start of the animation
+      The value is calculated by the formula: 2 * Math.PI * radius
+      In this case: 2 * Math.PI * 90 = 565
+    */
+    @keyframes error-border-progress {
+      from {
+        stroke-dashoffset: 565;
+      }
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    @keyframes fade-out {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    /* Bottom Sheet */
+    .bottom-sheet {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      max-height: 100%;
+      display: flex;
+      opacity: 0;
+      pointer-events: none;
+      align-items: center;
+      flex-direction: column;
+      justify-content: flex-end;
+      transition: 0.1s linear;
+      z-index: 10000001;
+    }
+
+    .bottom-sheet .sheet-overlay.active {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      opacity: 0.2;
+      background: #000;
+    }
+
+    .bottom-sheet .content {
+      width: 100%;
+      height: 40vh;
+      position: relative;
+      color: white;
+      transform: translateY(100%);
+      border-radius: 12px 12px 0 0;
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
+      transition: 0.3s ease;
+      overflow-y: hidden;
+    }
+
+    .bottom-sheet .log-entry {
+      border-bottom: 1px solid #6c6c6c;
+      white-space: collapse;
+    }
+
+    .bottom-sheet .log-entry-icon svg {
+      width: 1rem;
+      fill: white;
+    }
+
+    .bottom-sheet.show {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .bottom-sheet.show .content {
+      transform: translateY(0%);
+    }
+
+    .bottom-sheet.dragging .content {
+      transition: none;
+    }
+    .bottom-sheet.fullscreen .content {
+      border-radius: 0;
+      overflow-y: hidden;
+    }
+
+    .bottom-sheet .log-entry-message.warn {
+      color: #f39c12;
+    }
+
+    .bottom-sheet .log-entry-message.error {
+      color: #ED4E4C;
+    }
+
+    .bottom-sheet .tab-action-bar {
+      display: none;
+      justify-content: space-between;
+      background-color: rgb(49, 54, 63);
+      padding: 0.5rem;
+      padding-right: 1rem;
+      padding-left: 1rem;
+    }
+
+    .bottom-sheet .tab-action-bar.active {
+      display: flex;
+    }
+
+    .bottom-sheet .tab-action-bar button:active svg {
+      fill: #6c6c6c;
+    }
+
+    .bottom-sheet .btn-clear-tab,
+    .bottom-sheet .btn-reload-tab {
+      margin-left: auto;
+    }
+
+    /* Bottom Sheet Tabs */
+    .tablist {
+      display: flex;
+      overflow: hidden;
+      background-color: #EEEEEE;
+    }
+
+    .tablist .tablink {
+      color: black;
+      background-color: inherit;
+      width: 100%;
+      border: none;
+      outline: none;
+      padding: 14px 16px;
+      font-size: 0.8em;
+    }
+
+    .tablist .tablink.active {
+      background-color: #31363f;
+      color: white;
+    }
+
+    .tab-contents {
+      height: 100%;
+      overflow: scroll;
+    }
+
+    .outer-tab-content {
+      display: none;
+      border-top: none;
+      height: 100%;
+      overflow: scroll;
+      background-color: hsl(0deg 0% 0% / 80%);
+      backdrop-filter: blur(3px) saturate(100%);
+      -webkit-backdrop-filter: blur(3px) saturate(100%);
+      padding-bottom: 7em;
+    }
+    .outer-tab-content.active {
+      display: block;
+    }
+    .inner-tab-content {
+      padding: 1rem;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+    .single-tab-content .inner-tab-content {
+      white-space: normal;
+    }
+
+    .tab-empty-content {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      padding: 1em;
+    }
+
+    .bottom-sheet .tablink-dropdown {
+      border: none;
+      outline: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5em;
+      width: 2rem;
+    }
+
+    .bottom-sheet .tablink-dropdown  svg {
+      width: 1rem;
+      height: 1rem;
+      fill: #121212;
+    }
+
+    .bottom-sheet .tablink-dropdown:active {
+      background-color: #31363f;
+    }
+    .bottom-sheet .tablink-dropdown:active svg {
+      fill: white;
+    }
+
+    /* Bottom Sheet Stack Visualization */
+    .bottom-sheet .viewstack-card {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 10px;
+      margin: 10px 0;
+      background: white;
+      color: black;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      overflow: auto;
+    }
+
+    .bottom-sheet .viewstack-card.current-view {
+      border: 2px solid #f1f208;
+    }
+
+    .bottom-sheet .tab-container {
+      background: #EEEEEE;
+    }
+
+    .bottom-sheet .main-view {
+      border-color: #4e6080;
+      background: #31363F;
+    }
+
+    .bottom-sheet .hotwire-view {
+      border-color: #6db1b5;
+      background: #76ABAE;
+    }
+
+    .bottom-sheet .child-container {
+      margin-left: 30px;
+      position: relative;
+    }
+
+    .bottom-sheet .child-container::before {
+      content: "";
+      position: absolute;
+      left: -15px;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: #ddd;
+    }
+
+    .bottom-sheet .view-title {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+
+      font-weight: bold;
+      color: white;
+      margin-bottom: 5px;
+    }
+
+    .bottom-sheet .view-title-details {
+      color: #efefef;
+      font-size: 0.6em;
+    }
+
+    .bottom-sheet .tab-container .view-title-details {
+      color: #6c6c6c;
+    }
+
+    .bottom-sheet .view-url {
+      color: #000000;
+      font-size: 0.9em;
+      margin-top: 5px;
+      word-break: break-all;
+    }
+
+    .bottom-sheet .non-identified-view {
+      background: #EEEEEE;
+    }
+    .bottom-sheet .non-identified-view .view-title-details {
+      color: #6c6c6c;
+    }
+
+    .bottom-sheet .viewstack-card pre {
+      font-size: 0.8em;
+    }
+
+    /* Bottom Sheet Bridge Components */
+    .bottom-sheet .bridge-components-collapse-btn {
+      background: none;
+      border: none;
+      color: white;
+      width: 100%;
+      text-align: left;
+      border-bottom: 1px solid #eee;
+      padding: 0.5em 0em;
+      font-size: 0.9em;
+    }
+
+    .tab-content-bridge-components {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      padding: 0.5em 0em;
+    }
+
+    .tab-content-bridge-components .bridge-component {
+      position: relative;
+      padding-left: 15px;
+    }
+
+    .tab-content-bridge-components .bridge-component::before {
+      content: "•";
+      color: #eee;
+      font-size: 1.5em;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .tab-content-bridge-components .bridge-component.connected::before {
+      color: #5cff00
+    }
+
+    /* Collapsibles */
+    .collapse-target {
+      display: none;
+    }
+
+    .collapse-target.active {
+      display: block;
+    }
+
+    .collapse:not(.no-chevron):after {
+      content: '\\25BC';
+      font-size: 13px;
+      color: #777;
+      float: right;
+      margin-left: 5px;
+    }
+
+    .collapse:not(.no-chevron).active:after {
+      content: "\\25B2";
+    }
+
+    /* Custom checkbox toggles */
+    .toggle {
+      display: inline-block;
+      user-select: none;
+    }
+
+    .toggle-switch {
+      display: inline-block;
+      background: #ccc;
+      border-radius: 16px;
+      width: 29px;
+      height: 16px;
+      position: relative;
+      vertical-align: middle;
+      transition: background 0.15s;
+    }
+    .toggle-switch:before,
+    .toggle-switch:after {
+      content: "";
+    }
+    .toggle-switch:before {
+      display: block;
+      background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      transition: left 0.15s;
+    }
+    .toggle-checkbox:checked + .toggle-switch {
+      background: #56c080;
+    }
+    .toggle-checkbox:checked + .toggle-switch:before {
+      left: 15px;
+    }
+
+    .toggle-checkbox {
+      position: absolute;
+      visibility: hidden;
+    }
+
+    .toggle-label {
+      position: relative;
+      margin-left: 3px;
+      top: 2px;
+    }
+
+    /* Utility classes */
+    .d-none {
+      display: none;
+    }
+
+    .text-center {
+      text-align: center;
+    }
+
+    .text-ellipsis {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .d-flex {
+      display: flex;
+    }
+
+    .flex-column {
+      flex-direction: column;
+    }
+
+    .justify-content-between {
+      justify-content: space-between;
+    }
+
+    .justify-content-end {
+      justify-content: flex-end;
+    }
+
+    .align-items-center {
+      align-items: center;
+    }
+
+    .flex-grow-1 {
+      flex-grow: 1;
+    }
+
+    .border-bottom {
+      border-bottom: 1px solid #c5c1c1;
+    }
+
+    .no-wrap {
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .white-space-collapse {
+      white-space: collapse;
+    }
+
+    .overflow-auto {
+      overflow: auto;
+    }
+
+    .mt-1 {
+      margin-top: 0.25rem;
+    }
+
+    .mt-2 {
+      margin-top: 0.5rem;
+    }
+
+    .mt-4 {
+      margin-top: 1.5rem;
+    }
+
+    .ms-1 {
+      margin-left: 0.25rem;
+    }
+
+    .mb-2 {
+      margin-bottom: 0.5rem;
+    }
+
+    .mb-3 {
+      margin-bottom: 1rem;
+    }
+
+    .mb-4 {
+      margin-bottom: 1.5rem;
+    }
+
+    .gap-1 {
+      gap: 0.25rem;
+    }
+
+    .gap-3 {
+      gap: 1rem;
+    }
+
+    .pb-2 {
+      padding-bottom: 0.5rem;
+    }
+
+    .pt-2 {
+      padding-top: 0.5rem;
+    }
+
+    .w-100 {
+      width: 100%;
+    }
+
+    .w-80 {
+      width: 80%;
+    }
+  `;
+var u, m, v;
+class M {
+  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, u).call(this), b(this, m).call(this), b(this, v).call(this);
+    });
+    g(this, u, () => {
+      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, m, () => {
+      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 = [];
+  }
+  get turboFrameIds() {
+    return Array.from(document.querySelectorAll("turbo-frame")).map((t) => t.id);
+  }
+}
+u = new WeakMap(), m = new WeakMap(), v = new WeakMap();
+const c = (i) => JSON.parse(localStorage.getItem("hotwire-native-dev-tools") || "{}")[i], d = (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 = () => {
+  localStorage.removeItem("hotwire-native-dev-tools");
+}, y = () => c("consoleFilterLevels") || {
+  warn: !0,
+  error: !0,
+  debug: !0,
+  info: !0,
+  log: !0
+}, N = (i, t) => {
+  const e = y();
+  return e[i] = t, d("consoleFilterLevels", e), e;
+}, p = (i, t) => {
+  let e = null;
+  return (...o) => {
+    const s = () => i.apply(void 0, o);
+    clearTimeout(e), e = setTimeout(s, t);
+  };
+}, { userAgent: E } = window.navigator, z = /iOS/.test(E), A = /Android/.test(E), S = () => z ? "ios" : A ? "android" : "unknown", D = () => {
+  switch (S()) {
+    case "android":
+      return "Android";
+    case "ios":
+      return "iOS";
+    default:
+      return "<unknown>";
+  }
+}, P = `
+  <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)">
+            <path d="M783.777,159.685L683.006,262.542L765.948,268.939L622.459,394.208L690.389,396.4L490.537,479.149L569.424,402.053L511.312,400.203L639.22,296.093L533.548,287.812L783.777,159.685Z"/>
+        </g>
+    </g>
+  </svg>
+`, 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="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 = `
+  <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 = `
+  <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 = `
+  <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 = `
+  <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 = `
+  <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 = `
+  <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 = `
+  <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 = `
+  <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 {
+  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;
+  }
+  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;
+    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");
+    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);
+  }
+  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);
+  }
+  click(t) {
+    this.clickCallback && this.clickCallback(t);
+  }
+  onClick(t) {
+    this.clickCallback = t;
+  }
+  dragStart(t) {
+    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 });
+  }
+  drag(t) {
+    if (!this.currentlyDragging) return;
+    const e = t.touches[0], o = e.clientX - this.initialX, s = e.clientY - this.initialY;
+    this.currentX = Math.max(-this.bubbleSize + this.minVisible, Math.min(o, window.innerWidth - this.minVisible)), this.currentY = Math.max(-this.bubbleSize + this.minVisible, Math.min(s, window.innerHeight - this.minVisible)), this.xOffset = this.currentX, this.yOffset = this.currentY, this.animationFrame || (this.animationFrame = requestAnimationFrame(() => {
+      this.setTranslate(this.currentX, this.currentY, this.dragItem), this.animationFrame = null;
+    }));
+  }
+  setTranslate(t, e, o) {
+    o.style.transform = `translate3d(${t}px, ${e}px, 0)`;
+  }
+}
+class J {
+  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")) || 50;
+  }
+  render() {
+    this.createBottomSheet(), this.sheetContent = this.bottomSheet.querySelector(".content"), this.sheetOverlay = this.bottomSheet.querySelector(".sheet-overlay"), this.addEventListeners();
+  }
+  update(t) {
+    this.state = t, this.checkNativeFeatures(), this.renderConsoleLogs(), this.renderBridgeComponents(), this.renderBridgeLogs(), this.renderEvents(), this.renderNativeStack();
+  }
+  createBottomSheet() {
+    var n;
+    const t = (n = this.devTools.shadowRoot) == null ? void 0 : n.querySelector(".bottom-sheet");
+    if (t) {
+      this.bottomSheet = t;
+      return;
+    }
+    const e = this.state.activeTab, o = y(), 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="content">
+        <div class="top-part">
+          <div class="tablist">
+            <button class="tablink ${e === "tab-bridge-components" ? "active" : ""}" data-tab-id="tab-bridge-components">Bridge</button>
+            <button class="tablink ${e === "tab-console-logs" ? "active" : ""}" data-tab-id="tab-console-logs">Console</button>
+            <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="dropdown d-flex">
+              <button class="dropdown-trigger tablink-dropdown">${X}</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>
+              </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>
+            </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>
+                <div class="dropdown">
+                  <button class="dropdown-trigger btn-icon">${W}</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>
+                    <label><input type="checkbox" ${o.debug ? "checked" : ""} data-console-filter="debug" /> Debug</label>
+                    <label><input type="checkbox" ${o.info ? "checked" : ""} data-console-filter="info" /> Info</label>
+                    <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>
+
+              <div class="console-search mt-2 ${s ? "" : "d-none"}">
+                <input type="search" class="console-search-input" value="${s}" placeholder="Search console logs" />
+              </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>
+            </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>
+            </div>
+          </div>
+        </div>
+
+        <div class="tab-contents">
+          <div id="tab-bridge-components" class="outer-tab-content ${e === "tab-bridge-components" ? "active" : ""}">
+            <div class="inner-tab-content">
+              <button class="collapse bridge-components-collapse-btn" type="button" data-collapse-target="bridge-components-collapse">
+                Registered Bridge Components: <span class="bridge-components-amount">${this.state.supportedBridgeComponents.length}</span>
+              </button>
+              <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>
+                </div>
+              </div>
+
+              <div class="tab-content-bridge-logs">
+              </div>
+            </div>
+          </div>
+
+          <div id="tab-console-logs" class="outer-tab-content ${e === "tab-console-logs" ? "active" : ""}">
+            <div class="inner-tab-content tab-content-console-logs">
+            </div>
+          </div>
+
+          <div id="tab-event-logs" class="outer-tab-content ${e === "tab-event-logs" ? "active" : ""}">
+            <div class="inner-tab-content tab-content-event-logs">
+            </div>
+          </div>
+
+          <div id="tab-native-stack" class="outer-tab-content ${e === "tab-native-stack" ? "active" : ""}">
+            <div class="inner-tab-content tab-content-native-stack">
+            </div>
+          </div>
+
+          <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>
+                <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>
+              <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()}
+              <p class"mt-1">For more information, check out the documentation:</p>
+              <a href="${this.registerBridgeComponentHelpURL()}">${this.registerBridgeComponentHelpURL()}</a>
+            </div>
+          </div>
+
+          <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>
+                <h3 class="ms-1">Settings</h3>
+              </div>
+              <div class="mb-3">
+                <label for="bottom-sheet-height"> Bottom Sheet Height</label>
+                <input type="range" id="bottom-sheet-height" class="w-100" min="10" max="100" value="${this.sheetHeight}" step="1" />
+              </div>
+              <div class="mb-4">
+                <label for="font-size-input"> Font Size</label>
+                <input id="font-size-input" type="number" inputmode="numeric" class="w-100" value="${c("fontSize") || 16}" />
+              </div>
+              <div class="mb-3">
+                <label class="toggle">
+                  <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" ${c("autoOpen") === !0 ? "checked" : ""} />
+                  <div class="toggle-switch"></div>
+                  <span class="toggle-label">Auto Open</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `, 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>';
+  }
+  renderBridgeComponents() {
+    const t = this.state.supportedBridgeComponents.length;
+    this.bottomSheet.querySelector(".bridge-components-amount").textContent = t;
+    const e = this.bridgeComponentIdentifiers, o = this.bottomSheet.querySelector(".tab-content-bridge-components");
+    o.innerHTML = t ? this.state.supportedBridgeComponents.map((s) => `<div class="bridge-component ${e.includes(s) ? "connected" : ""}">${s}</div>`).join("") : '<div class="tab-empty-content d-flex flex-column text-center"><span>No bridge components found</span></div>';
+  }
+  renderBridgeLogs() {
+    const t = this.bottomSheet.querySelector(".tab-content-bridge-logs");
+    t.innerHTML = this.state.bridgeLogs.length ? this.state.bridgeLogs.map((e) => this.bridgeLogHTML(e.direction, e.componentName, e.eventName, e.eventArgs, e.time)).join("") : `<div class="tab-empty-content d-flex flex-column text-center"><span>${this.state.bridgeIsConnected ? "No bridge communication yet" : "Bridge is not connected <br><small>(Neither window.HotwireNative nor window.Strada is defined)</small>"}</span></div>`;
+  }
+  renderEvents() {
+    const t = this.bottomSheet.querySelector(".tab-content-event-logs");
+    t.innerHTML = this.state.eventLogs.length ? this.state.eventLogs.map((e) => this.eventMessageHTML(e.eventName, e.time)).join("") : '<div class="tab-empty-content"><span>No events captured yet</span></div>';
+  }
+  renderNativeStack() {
+    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>";
+  }
+  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}
+        </div>
+        <div class="w-100 overflow-auto">
+          <div class="d-flex justify-content-between">
+            <strong class="w-80 text-ellipsis">${e}#${o}</strong>
+            <small>${n}</small>
+          </div>
+          <div>
+            ${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>`;
+    }).join("")}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  consoleLogHTML(t, e, o) {
+    return `
+      <div class="log-entry pt-2 pb-2">
+        <div class="w-100">
+          <div class="d-flex justify-content-end">
+            <small>${o}</small>
+          </div>
+          <div class="log-entry-message ${t}">
+            ${e}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  eventMessageHTML(t, e) {
+    return `
+      <div class="log-entry pt-2 pb-2">
+        <div class="w-100">
+          <div class="d-flex justify-content-end">
+            <small>${e}</small>
+          </div>
+          <div class="log-entry-message">
+            ${t}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  nativeViewStackHTML(t) {
+    var k;
+    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">
+          ${(() => {
+      try {
+        return new URL(t.url).pathname;
+      } catch {
+        return t.url;
+      }
+    })()}
+         </div>` : "", L = (() => {
+      try {
+        const h = t.pathConfigurationProperties;
+        return JSON.stringify(typeof h == "string" ? JSON.parse(h) : h, null, 2);
+      } catch {
+        return t.pathConfigurationProperties;
+      }
+    })(), T = L ? `<pre class="view-path-configuration">${L}</pre>` : "", B = (k = t.children) != null && k.length ? `<div class="child-container">
+          ${t.children.map((h) => this.nativeViewStackHTML(h)).join("")}
+         </div>` : "";
+    return `
+      <div>
+        <div class="${r} collapse no-chevron" data-collapse-target="path-configuration-properties-${a}">
+          <div>
+            <div class="view-title">
+              ${t.title == "null" ? "" : t.title}
+              <div class="view-title-details">${t.type}</div>
+            </div>
+            ${w}
+          </div>
+          <div id="path-configuration-properties-${a}" class="collapse-target">
+            ${T}
+          </div>
+        </div>
+        ${B}
+      </div>
+    `;
+  }
+  switchToSingleTabSheet(t) {
+    this.sheetContent.querySelector(".top-part").classList.add("d-none"), this.devTools.shadowRoot.querySelectorAll(".outer-tab-content").forEach((e) => e.classList.remove("active")), this.devTools.shadowRoot.getElementById(t).classList.add("active");
+  }
+  switchToMultiTabSheet() {
+    this.sheetContent.querySelector(".top-part").classList.remove("d-none"), this.devTools.shadowRoot.querySelectorAll(".outer-tab-content").forEach((t) => t.classList.remove("active")), this.devTools.shadowRoot.querySelectorAll(".tablink, .outer-tab-content").forEach((t) => {
+      t.id == this.state.activeTab && t.classList.add("active");
+    });
+  }
+  registerBridgeComponentExample() {
+    switch (S()) {
+      case "android":
+        return `
+<pre class="overflow-auto">
+  Hotwire.registerBridgeComponents(
+    BridgeComponentFactory("my-component", ::MyComponent)
+  )
+</pre>
+`;
+      case "ios":
+        return `
+<pre class="overflow-auto">
+  Hotwire.registerBridgeComponents([
+      MyComponent.self
+  ])
+</pre>`;
+      default:
+        return "";
+    }
+  }
+  registerBridgeComponentHelpURL() {
+    switch (S()) {
+      case "android":
+        return "https://native.hotwired.dev/android/bridge-components";
+      case "ios":
+        return "https://native.hotwired.dev/ios/bridge-components";
+      default:
+        return "https://native.hotwired.dev";
+    }
+  }
+  checkNativeFeatures() {
+    this.state.supportsNativeStackView && this.bottomSheet.querySelector(".tablink[data-tab-id='tab-native-stack']").classList.remove("d-none");
+  }
+  addEventListeners() {
+    this.bottomSheet.hasEventListeners || (this.sheetOverlay.addEventListener("click", () => {
+      this.hideBottomSheet(), this.switchToMultiTabSheet();
+    }), this.bottomSheet.querySelector(".tablist").addEventListener("click", (t) => this.handleTabClick(t)), this.bottomSheet.querySelector(".btn-clear-console-logs").addEventListener("click", () => {
+      this.devTools.state.clearConsoleLogs(), this.renderConsoleLogs();
+    }), this.bottomSheet.querySelector(".btn-clear-bridge-logs").addEventListener("click", () => {
+      this.devTools.state.clearBridgeLogs(), this.renderBridgeLogs();
+    }), this.bottomSheet.querySelector(".btn-clear-events").addEventListener("click", () => {
+      this.devTools.state.clearEventLogs(), this.renderEvents();
+    }), this.bottomSheet.querySelector(".btn-reload-stack").addEventListener("click", () => {
+      this.bottomSheet.querySelector(".native-stack-wrapper").style.opacity = 0.5, this.devTools.refetchNativeStack();
+    }), 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);
+      });
+    }), this.bottomSheet.querySelectorAll(".btn-close-single-mode").forEach((t) => {
+      t.addEventListener("click", () => {
+        this.switchToMultiTabSheet();
+      });
+    }), 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;
+      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();
+    }), this.bottomSheet.querySelector(".console-search-input").addEventListener("input", (t) => {
+      this.devTools.state.setConsoleSearchValue(t.target.value.toLowerCase()), this.renderConsoleLogs();
+    }), this.bottomSheet.querySelector("#bottom-sheet-height").addEventListener("change", (t) => {
+      const e = t.target.value;
+      this.sheetHeight = parseInt(e), d("bottomSheetHeight", e), this.updateSheetHeight(e);
+    }), this.bottomSheet.querySelector("#console-error-animation-setting").addEventListener("change", (t) => {
+      d("errorAnimationEnabled", t.target.checked);
+    }), this.bottomSheet.querySelector("#font-size-input").addEventListener("change", (t) => {
+      const e = t.target.value;
+      d("fontSize", e), this.devTools.setCSSProperty("--font-size", `${e}px`);
+    }), this.bottomSheet.querySelector("#auto-open-setting").addEventListener("change", (t) => {
+      d("autoOpen", 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");
+    }), 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);
+        }
+        return;
+      }
+      const o = t.target.closest(".dropdown-trigger");
+      if (o) {
+        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");
+      });
+    }), this.bottomSheet.hasEventListeners = !0);
+  }
+  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");
+  }
+  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");
+  }
+  showBottomSheet() {
+    this.bottomSheet.classList.add("show"), 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 = "auto";
+  }
+  updateSheetHeight(t) {
+    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");
+  }
+  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;
+    this.updateSheetHeight(o);
+  }
+  dragStop() {
+    this.isDragging = !1, this.bottomSheet.classList.remove("dragging");
+    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);
+  }
+  // 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) {
+    console.log(`HotwireDevTools: ${t}`);
+  }
+  // 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)) || [];
+  }
+  get currentUrl() {
+    return window.location.href;
+  }
+}
+class G {
+  constructor() {
+    this.state = {
+      consoleLogs: [],
+      bridgeLogs: [],
+      eventLogs: [],
+      nativeStack: [],
+      supportedBridgeComponents: [],
+      bridgeIsConnected: !1,
+      supportsNativeStackView: !1,
+      consoleSearch: "",
+      activeTab: c("activeTab") || "tab-bridge-components"
+    }, this.listeners = [];
+  }
+  subscribe(t) {
+    this.listeners.push(t);
+  }
+  notify() {
+    this.listeners.forEach((t) => t(this.state));
+  }
+  addConsoleLog(t, e) {
+    const o = { type: t, message: e, time: this.currentTime };
+    this.state.consoleLogs.push(o), this.notify();
+  }
+  addBridgeLog(t, e, o, s) {
+    const n = { direction: t, componentName: e, eventName: o, eventArgs: s, time: this.currentTime };
+    this.state.bridgeLogs.push(n), this.notify();
+  }
+  addEventLog(t) {
+    const e = { eventName: t, time: this.currentTime };
+    this.state.eventLogs.push(e), this.notify();
+  }
+  setNativeStack(t) {
+    this.state.nativeStack = t, this.notify();
+  }
+  setSupportsNativeStack(t) {
+    this.state.supportsNativeStackView = t, this.notify();
+  }
+  setBridgeIsConnected(t) {
+    this.state.bridgeIsConnected = t, this.notify();
+  }
+  setSupportedBridgeComponents(t) {
+    this.state.supportedBridgeComponents = t, this.notify();
+  }
+  clearConsoleLogs() {
+    this.state.consoleLogs = [], this.notify();
+  }
+  clearBridgeLogs() {
+    this.state.bridgeLogs = [], this.notify();
+  }
+  clearEventLogs() {
+    this.state.eventLogs = [], this.notify();
+  }
+  setActiveTab(t) {
+    this.state.activeTab = t, d("activeTab", t);
+  }
+  setConsoleSearchValue(t) {
+    this.state.consoleSearch = t;
+  }
+  get currentTime() {
+    return (/* @__PURE__ */ new Date()).toLocaleTimeString();
+  }
+}
+class K {
+  bridgeIsConnected() {
+    var t, e;
+    return !!((t = window.HotwireNative) != null && t.web || (e = window.Strada) != null && e.web);
+  }
+  // Send a message to the native side
+  send(t, e = {}, o = null) {
+    if (!this.bridgeIsConnected())
+      return Promise.reject("Bridge is not connected");
+    const s = {
+      ...e,
+      metadata: {
+        url: window.location.href
+      }
+    };
+    return this.bridge.send({
+      component: "dev-tools",
+      event: t,
+      data: s,
+      callback: o
+    });
+  }
+  isComponentSupported(t) {
+    return this.bridgeIsConnected() ? this.bridge.supportsComponent(t) : !1;
+  }
+  getSupportedComponents() {
+    var t;
+    return ((t = document.documentElement.dataset.bridgeComponents) == null ? void 0 : t.split(" ")) || [];
+  }
+  get bridge() {
+    var t, e;
+    return ((t = window.HotwireNative) == null ? void 0 : t.web) || ((e = window.Strada) == null ? void 0 : e.web);
+  }
+}
+class Z {
+  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 = H(), 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 M(), 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() {
+    this.options.enabled && (this.setupShadowRoot(), this.bubble.render(), this.bottomSheet.render(), this.originalConsole || (this.originalConsole = window.console, this.addConsoleProxy()), this.originalBridge ? this.callNativeBridgeComponent() : window.HotwireNative || window.Strada ? this.nativeBridgeGotConnected() : document.addEventListener("web-bridge:ready", () => {
+      this.nativeBridgeGotConnected();
+    }), this.addEventListeners(), this.diagnosticsChecker.checkForWarnings(), this.bubble.onClick(() => {
+      this.bottomSheet.showBottomSheet(), this.nativeBridge.send("vibrate");
+    }), c("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());
+  }
+  callNativeBridgeComponent() {
+    this.nativeBridge.bridgeIsConnected() && this.nativeBridge.send("connect", {}, (t) => {
+      this.fetchNativeStack();
+    });
+  }
+  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();
+  }
+  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;
+      }
+    });
+    window.Strada && (window.Strada.web = new Proxy(this.originalBridge, t())), window.HotwireNative && (window.HotwireNative.web = new Proxy(this.originalBridge, t()));
+  }
+  addConsoleProxy() {
+    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));
+      }
+    });
+  }
+  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);
+    });
+  }
+  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(" ");
+        return `&lt;${s.tagName.toLowerCase()}${r ? " " + r : ""}&gt;&lt;/${s.tagName.toLowerCase()}&gt;`;
+      }
+      if (typeof s == "object")
+        try {
+          return `<pre>${JSON.stringify(s, null, 2)}</pre>`;
+        } catch {
+          return `<pre>${s}</pre>`;
+        }
+      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());
+  }
+  refetchNativeStack() {
+    this.nativeBridge.send("currentStackInfo", {}, (t) => {
+      this.state.setNativeStack(t.data.stack);
+    });
+  }
+  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]);
+    }), window.addEventListener(
+      "resize",
+      () => {
+        this.bubble.render();
+      },
+      { passive: !0 }
+    ), this.hasEventListeners = !0);
+  }
+  listenForTurboEvents() {
+    if (this.eventsRegistered) return;
+    [
+      "turbo:click",
+      "turbo:before-visit",
+      "turbo:visit",
+      "turbo:before-cache",
+      "turbo:before-render",
+      "turbo:render",
+      "turbo:load",
+      "turbo:morph",
+      "turbo:before-morph-element",
+      "turbo:before-morph-attribute",
+      "turbo:morph-element",
+      "turbo:submit-start",
+      "turbo:submit-end",
+      "turbo:before-frame-render",
+      "turbo:frame-render",
+      "turbo:frame-load",
+      "turbo:frame-missing",
+      "turbo:before-stream-render",
+      "turbo:before-fetch-request",
+      "turbo:before-fetch-response",
+      "turbo:before-prefetch",
+      "turbo:fetch-request-error"
+    ].forEach((e) => {
+      window.addEventListener(
+        e,
+        (o) => {
+          this.state.addEventLog(e);
+        },
+        { passive: !0 }
+      );
+    }), this.eventsRegistered = !0;
+  }
+  startBridgeComponentObserver() {
+    this.bridgeComponentObserver || (this.bridgeComponentObserver = new MutationObserver((t) => {
+      for (const e of t)
+        e.type === "attributes" && e.attributeName === "data-bridge-components" && this.updateSupportedBridgeComponents();
+    }), this.bridgeComponentObserver.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-bridge-components"]
+    }));
+  }
+  updateSupportedBridgeComponents() {
+    this.state.setSupportedBridgeComponents(this.nativeBridge.getSupportedComponents().sort());
+  }
+  getCSSProperty(t) {
+    return getComputedStyle(this.shadowContainer).getPropertyValue(t).trim();
+  }
+  setCSSProperty(t, e) {
+    this.shadowContainer.style.setProperty(t, e);
+  }
+  get shadowContainer() {
+    const t = document.getElementById("hotwire-native-dev-tools-shadow-container");
+    if (t)
+      return t;
+    const e = document.createElement("div");
+    return e.id = "hotwire-native-dev-tools-shadow-container", e.setAttribute("data-native-prevent-pull-to-refresh", ""), document.body.appendChild(e), e;
+  }
+  get currentTime() {
+    return (/* @__PURE__ */ new Date()).toLocaleTimeString();
+  }
+}
+const _ = (i = {}) => {
+  const t = new Z(i);
+  t.options.enabled && (t.setup(), document.addEventListener(
+    "turbo:load",
+    () => {
+      t.setup();
+    },
+    { passive: !0 }
+  ));
+};
+export {
+  _ as setupDevTools
+};
+//# sourceMappingURL=hotwire-native-dev-tools.es.js.map