devlog-ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -22,16 +22,16 @@ function F(t, e) {
   }
   return !1;
 }
-function ae(t) {
+function le(t) {
   if (t === void 0) return "undefined";
   if (t === null) return "null";
   if (typeof t == "string") return `"${t}"`;
   if (typeof t == "number" || typeof t == "boolean") return String(t);
   if (Array.isArray(t))
-    return t.length === 0 ? "[]" : t.length <= 3 ? `[${t.map(ae).join(", ")}]` : `[${t.length} items]`;
+    return t.length === 0 ? "[]" : t.length <= 3 ? `[${t.map(le).join(", ")}]` : `[${t.length} items]`;
   if (w(t)) {
     const e = Object.keys(t);
-    return e.length === 0 ? "{}" : e.length <= 2 ? `{${e.map((n) => `${n}: ${ae(t[n])}`).join(", ")}}` : `{${e.length} keys}`;
+    return e.length === 0 ? "{}" : e.length <= 2 ? `{${e.map((n) => `${n}: ${le(t[n])}`).join(", ")}}` : `{${e.length} keys}`;
   }
   return String(t);
 }
@@ -65,40 +65,40 @@ function ve(t, e, n = "", o = !1) {
     }), r;
   const s = /* @__PURE__ */ new Set([...Object.keys(t), ...Object.keys(e)]);
   for (const c of s) {
-    const l = n ? `${n}.${c}` : c, a = t[c], d = e[c], f = c in t, h = c in e;
-    !f && h ? r.push({
-      path: l,
+    const a = n ? `${n}.${c}` : c, l = t[c], d = e[c], u = c in t, h = c in e;
+    !u && h ? r.push({
+      path: a,
       type: "added",
       newValue: d
-    }) : f && !h ? r.push({
-      path: l,
+    }) : u && !h ? r.push({
+      path: a,
       type: "removed",
-      oldValue: a
-    }) : w(a) && w(d) ? r.push(...ve(a, d, l, o)) : Array.isArray(a) && Array.isArray(d) ? F(a, d) ? o && r.push({
-      path: l,
+      oldValue: l
+    }) : w(l) && w(d) ? r.push(...ve(l, d, a, o)) : Array.isArray(l) && Array.isArray(d) ? F(l, d) ? o && r.push({
+      path: a,
       type: "unchanged",
-      oldValue: a,
+      oldValue: l,
       newValue: d
     }) : r.push({
-      path: l,
+      path: a,
       type: "changed",
-      oldValue: a,
+      oldValue: l,
       newValue: d
-    }) : F(a, d) ? o && r.push({
-      path: l,
+    }) : F(l, d) ? o && r.push({
+      path: a,
       type: "unchanged",
-      oldValue: a,
+      oldValue: l,
       newValue: d
     }) : r.push({
-      path: l,
+      path: a,
       type: "changed",
-      oldValue: a,
+      oldValue: l,
       newValue: d
     });
   }
   return r;
 }
-function le(t, e) {
+function ae(t, e) {
   const n = ve(t, e, "", !1), o = {
     added: 0,
     removed: 0,
@@ -113,7 +113,7 @@ function Ft(t) {
   return t.summary.added > 0 || t.summary.removed > 0 || t.summary.changed > 0;
 }
 const Fe = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 };
-function Oe() {
+function Ae() {
   try {
     if (typeof import.meta < "u" && Fe)
       return !1;
@@ -129,11 +129,11 @@ function Oe() {
     return !0;
   }
 }
-const Ae = {
+const Oe = {
   maxLogs: 1e3,
   persist: !1,
   minLevel: "debug",
-  enabled: Oe()
+  enabled: Ae()
 };
 function He() {
   const t = "devlogger_session_id";
@@ -286,7 +286,7 @@ class Pe {
     p(this, "spans", /* @__PURE__ */ new Map());
     p(this, "subscribers", /* @__PURE__ */ new Set());
     p(this, "spanSubscribers", /* @__PURE__ */ new Set());
-    p(this, "config", { ...Ae });
+    p(this, "config", { ...Oe });
     p(this, "sessionId");
     p(this, "globalContext", {});
     this.sessionId = He();
@@ -298,7 +298,7 @@ class Pe {
     try {
       if (!this.config.enabled || se[e] < se[this.config.minLevel])
         return;
-      const c = Object.keys(this.globalContext).length > 0 || r ? { ...this.globalContext, ...r } : void 0, l = {
+      const c = Object.keys(this.globalContext).length > 0 || r ? { ...this.globalContext, ...r } : void 0, a = {
         id: ze(),
         timestamp: Date.now(),
         level: e,
@@ -309,7 +309,7 @@ class Pe {
         context: c,
         spanId: s
       };
-      this.store(l), this.notify(l);
+      this.store(a), this.notify(a);
     } catch (c) {
       typeof console < "u" && console.warn && console.warn("[DevLogger] Internal error:", c);
     }
@@ -576,22 +576,22 @@ class Pe {
         search: s,
         pretty: c = !0
       } = e;
-      let l = [...this.logs];
+      let a = [...this.logs];
       if (o !== void 0 && o > 0) {
-        const a = Date.now() - o;
-        l = l.filter((d) => d.timestamp >= a);
+        const l = Date.now() - o;
+        a = a.filter((d) => d.timestamp >= l);
       }
       if (r && r.length > 0) {
-        const a = new Set(r);
-        l = l.filter((d) => a.has(d.level));
+        const l = new Set(r);
+        a = a.filter((d) => l.has(d.level));
       }
       if (s) {
-        const a = s.toLowerCase();
-        l = l.filter(
-          (d) => d.message.toLowerCase().includes(a) || JSON.stringify(d.data).toLowerCase().includes(a)
+        const l = s.toLowerCase();
+        a = a.filter(
+          (d) => d.message.toLowerCase().includes(l) || JSON.stringify(d.data).toLowerCase().includes(l)
         );
       }
-      return n === "text" ? this.formatLogsAsText(l) : c ? JSON.stringify(l, null, 2) : JSON.stringify(l);
+      return n === "text" ? this.formatLogsAsText(a) : c ? JSON.stringify(a, null, 2) : JSON.stringify(a);
     } catch {
       return "[]";
     }
@@ -601,10 +601,10 @@ class Pe {
    */
   formatLogsAsText(e) {
     return e.map((n) => {
-      const o = new Date(n.timestamp).toISOString(), r = n.level.toUpperCase().padEnd(5), s = `${n.source.file}:${n.source.line}`, c = n.context ? ` [${Object.entries(n.context).map(([d, f]) => `${d}=${f}`).join(", ")}]` : "", l = n.spanId ? ` (span: ${n.spanId})` : "", a = n.data.length > 0 ? `
+      const o = new Date(n.timestamp).toISOString(), r = n.level.toUpperCase().padEnd(5), s = `${n.source.file}:${n.source.line}`, c = n.context ? ` [${Object.entries(n.context).map(([d, u]) => `${d}=${u}`).join(", ")}]` : "", a = n.spanId ? ` (span: ${n.spanId})` : "", l = n.data.length > 0 ? `
   Data: ${JSON.stringify(n.data)}` : "";
-      return `[${o}] ${r} ${n.message}${c}${l}
-  Source: ${s}${a}`;
+      return `[${o}] ${r} ${n.message}${c}${a}
+  Source: ${s}${l}`;
     }).join(`
 
 `);
@@ -626,7 +626,7 @@ class Pe {
    */
   diff(e, n, o, r = "info") {
     try {
-      const s = le(n, o);
+      const s = ae(n, o);
       return this.log(r, e, [
         {
           __type: "Diff",
@@ -647,7 +647,7 @@ class Pe {
    */
   computeDiff(e, n) {
     try {
-      return le(e, n);
+      return ae(e, n);
     } catch {
       return {
         changes: [],
@@ -656,7 +656,7 @@ class Pe {
     }
   }
 }
-const u = new Pe(), g = {
+const f = new Pe(), g = {
   // Background
   bgPrimary: "#1e1e1e",
   bgSecondary: "#252526",
@@ -1285,14 +1285,14 @@ function xe(t) {
   const n = t.data.length > 0, o = Ge(t.data), r = t.context && Object.keys(t.context).length > 0, s = `data-${t.id}`, c = () => {
     if (!n) return "";
     if (o) {
-      const l = t.data.find(ye);
-      if (l)
+      const a = t.data.find(ye);
+      if (a)
         return `
           <div class="log-data log-data-diff">
             <button class="log-data-toggle" data-target="${s}">
               diff
             </button>
-            <div class="log-data-content" id="${s}">${je(l)}</div>
+            <div class="log-data-content" id="${s}">${je(a)}</div>
           </div>
         `;
     }
@@ -1315,9 +1315,9 @@ function xe(t) {
     <div class="log-message">${M(t.message)}</div>
     ${c()}
   `, n) {
-    const l = e.querySelector(".log-data-toggle"), a = e.querySelector(`#${s}`);
-    l && a && l.addEventListener("click", () => {
-      l.classList.toggle("expanded"), a.classList.toggle("visible");
+    const a = e.querySelector(".log-data-toggle"), l = e.querySelector(`#${s}`);
+    a && l && a.addEventListener("click", () => {
+      a.classList.toggle("expanded"), l.classList.toggle("visible");
     });
   }
   return e;
@@ -1438,27 +1438,27 @@ class Qe {
     }
   }
 }
-const H = new Qe(), ge = 500, fe = 700;
+const H = new Qe(), ge = 500, ue = 700;
 let b = null;
 function Ze() {
   try {
     if (b && !b.closed)
       return b.focus(), b;
-    const t = Math.max(0, (screen.width - ge) / 2), e = Math.max(0, (screen.height - fe) / 2), n = tt();
+    const t = Math.max(0, (screen.width - ge) / 2), e = Math.max(0, (screen.height - ue) / 2), n = tt();
     return b = window.open(
       "",
       "devlogger-popout",
-      `width=${ge},height=${fe},left=${t},top=${e},resizable=yes,scrollbars=yes`
+      `width=${ge},height=${ue},left=${t},top=${e},resizable=yes,scrollbars=yes`
     ), b ? (b.document.open(), b.document.write(n), b.document.close(), b.addEventListener("load", () => {
       setTimeout(() => {
-        H.sendSyncResponse(u.getLogs());
+        H.sendSyncResponse(f.getLogs());
       }, 100);
     }), b) : (console.warn("[DevLogger] Pop-out blocked by browser"), null);
   } catch (t) {
     return console.warn("[DevLogger] Failed to open pop-out:", t), null;
   }
 }
-function ue() {
+function fe() {
   try {
     b && !b.closed && b.close(), b = null;
   } catch {
@@ -1901,6 +1901,7 @@ function tt() {
       <button class="btn btn-copy" id="btn-copy-json" title="Copy as JSON">JSON</button>
       <button class="btn btn-copy" id="btn-copy-text" title="Copy as Text">TXT</button>
       <button class="btn btn-timeline" id="btn-timeline" title="Toggle Timeline">Timeline</button>
+      <button class="btn btn-timeline" id="btn-timeline-pause" title="Pause/Resume Timeline" style="display: none;">⏸</button>
       <button class="btn" id="btn-clear">Clear</button>
     </div>
   </div>
@@ -1925,6 +1926,7 @@ function tt() {
       </div>
       <input type="text" class="filter-input" id="filter-search" placeholder="Search logs..." data-filter="search">
       <input type="text" class="filter-input" id="filter-file" placeholder="Filter by file..." data-filter="file" style="max-width: 120px;">
+      <button class="filter-clear-btn" title="Clear all filters">✕</button>
     </div>
     <div class="filter-status" id="filter-status" style="display: none;"></div>
   </div>
@@ -1962,6 +1964,7 @@ function tt() {
     const btnCopyJson = document.getElementById('btn-copy-json');
     const btnCopyText = document.getElementById('btn-copy-text');
     const btnTimeline = document.getElementById('btn-timeline');
+    const btnTimelinePause = document.getElementById('btn-timeline-pause');
     const timelineContainer = document.getElementById('timeline-container');
     const timelineCanvas = document.getElementById('timeline-canvas');
     const timelineTooltip = document.getElementById('timeline-tooltip');
@@ -1971,6 +1974,7 @@ function tt() {
     let timelineVisible = false;
     let timelineWindow = 30000; // 30 seconds default
     let timelineInterval = null;
+    let timelinePaused = false;
     const LEVEL_COLORS = {
       debug: '#6e6e6e',
       info: '#3794ff',
@@ -1980,6 +1984,7 @@ function tt() {
     const filterSearch = document.getElementById('filter-search');
     const filterFile = document.getElementById('filter-file');
     const filterStatus = document.getElementById('filter-status');
+    const filterClearBtn = document.querySelector('.filter-clear-btn');
 
     // Connect to broadcast channel
     function connect() {
@@ -2235,12 +2240,14 @@ function tt() {
 
     // Export logs as JSON
     function exportLogsJson() {
-      return JSON.stringify(logs, null, 2);
+      const logsToExport = getFilteredLogs();
+      return JSON.stringify(logsToExport, null, 2);
     }
 
     // Export logs as text
     function exportLogsText() {
-      return logs.map(log => {
+      const logsToExport = getFilteredLogs();
+      return logsToExport.map(log => {
         const time = new Date(log.timestamp).toISOString();
         const level = log.level.toUpperCase().padEnd(5);
         const source = log.source.file + ':' + log.source.line;
@@ -2322,12 +2329,36 @@ function tt() {
       renderAllLogs();
     });
 
+    // Filter: Clear button
+    if (filterClearBtn) {
+      filterClearBtn.addEventListener('click', () => {
+        // Reset all filters
+        filter.levels = new Set(['debug', 'info', 'warn', 'error']);
+        filter.search = '';
+        filter.file = '';
+
+        // Reset UI elements
+        filterSearch.value = '';
+        filterFile.value = '';
+        document.querySelectorAll('.filter-level-btn').forEach(btn => {
+          btn.classList.add('active');
+        });
+
+        // Re-render
+        renderAllLogs();
+      });
+    }
+
     // Timeline: Toggle button
     btnTimeline.addEventListener('click', () => {
       timelineVisible = !timelineVisible;
       timelineContainer.style.display = timelineVisible ? 'block' : 'none';
       btnTimeline.classList.toggle('active', timelineVisible);
+      btnTimelinePause.style.display = timelineVisible ? 'inline-block' : 'none';
       if (timelineVisible) {
+        timelinePaused = false;
+        btnTimelinePause.textContent = '⏸';
+        btnTimelinePause.classList.remove('active');
         resizeCanvas();
         drawTimeline();
         startTimelineRefresh();
@@ -2336,6 +2367,18 @@ function tt() {
       }
     });
 
+    // Timeline: Pause/Resume button
+    btnTimelinePause.addEventListener('click', () => {
+      timelinePaused = !timelinePaused;
+      btnTimelinePause.textContent = timelinePaused ? '▶' : '⏸';
+      btnTimelinePause.classList.toggle('active', timelinePaused);
+      if (timelinePaused) {
+        stopTimelineRefresh();
+      } else {
+        startTimelineRefresh();
+      }
+    });
+
     // Timeline: Time window buttons
     document.querySelectorAll('.timeline-btn[data-window]').forEach(btn => {
       btn.addEventListener('click', (e) => {
@@ -2566,7 +2609,7 @@ function rt(t) {
   n.className = "devlogger-toggle", n.innerHTML = "📋", n.title = "Toggle DevLogger (Ctrl+Shift+L)", n.addEventListener("click", () => j.toggle()), t.appendChild(n), i.toggleBtn = n;
   const o = document.createElement("div");
   o.className = "devlogger-container hidden";
-  const r = u.getLogs(), s = U(r, i.filter);
+  const r = f.getLogs(), s = U(r, i.filter);
   o.innerHTML = `
     <div class="devlogger-header">
       <div class="devlogger-title">
@@ -2588,11 +2631,11 @@ function rt(t) {
       <span class="devlogger-shortcut">Ctrl+Shift+L to toggle</span>
     </div>
   `, i.badge = o.querySelector(".devlogger-badge"), i.logsList = o.querySelector(".devlogger-logs"), i.filterBar = o.querySelector(".filter-bar-container"), o.querySelectorAll("[data-action]").forEach((c) => {
-    c.addEventListener("click", (l) => {
-      const a = l.currentTarget.dataset.action, d = l.currentTarget;
-      switch (a) {
+    c.addEventListener("click", (a) => {
+      const l = a.currentTarget.dataset.action, d = a.currentTarget;
+      switch (l) {
         case "clear":
-          u.clear(), H.sendClear(), y();
+          f.clear(), H.sendClear(), y();
           break;
         case "popout":
           j.popout();
@@ -2601,13 +2644,13 @@ function rt(t) {
           j.close();
           break;
         case "copy-json":
-          u.copyLogs({ format: "json" }).then((f) => {
-            he(d, f);
+          f.copyLogs({ format: "json" }).then((u) => {
+            he(d, u);
           });
           break;
         case "copy-text":
-          u.copyLogs({ format: "text" }).then((f) => {
-            he(d, f);
+          f.copyLogs({ format: "text" }).then((u) => {
+            he(d, u);
           });
           break;
       }
@@ -2616,7 +2659,7 @@ function rt(t) {
 }
 function I() {
   if (!i.filterBar) return;
-  const t = u.getLogs(), e = U(t, i.filter);
+  const t = f.getLogs(), e = U(t, i.filter);
   i.filterBar.innerHTML = ot(i.filter, t.length, e.length), it();
 }
 function it() {
@@ -2642,7 +2685,7 @@ function it() {
 }
 function y() {
   if (!i.logsList) return;
-  const t = u.getLogs(), e = U(t, i.filter);
+  const t = f.getLogs(), e = U(t, i.filter);
   if (i.logsList.innerHTML = "", t.length === 0)
     i.logsList.appendChild(Xe());
   else if (e.length === 0) {
@@ -2661,7 +2704,7 @@ function y() {
 }
 function st(t) {
   if (!i.logsList) return;
-  const e = u.getLogs(), n = U(e, i.filter);
+  const e = f.getLogs(), n = U(e, i.filter);
   if (n.some((r) => r.id === t.id)) {
     const r = i.logsList.querySelector(".devlogger-empty, .devlogger-no-results");
     r && r.remove(), i.logsList.appendChild(xe(t));
@@ -2675,7 +2718,7 @@ function we(t, e) {
 }
 function Z() {
   if (!i.filterBar) return;
-  const t = u.getLogs(), e = U(t, i.filter), n = te(i.filter), o = i.filterBar.querySelector(".filter-bar");
+  const t = f.getLogs(), e = U(t, i.filter), n = te(i.filter), o = i.filterBar.querySelector(".filter-bar");
   o && o.classList.toggle("filter-active", n);
   let r = i.filterBar.querySelector(".filter-status");
   if (n) {
@@ -2693,13 +2736,13 @@ function ne() {
 function be(t) {
   t.key.toLowerCase() === Q.key && t.ctrlKey === Q.ctrlKey && t.shiftKey === Q.shiftKey && (t.preventDefault(), j.toggle());
 }
-function at(t) {
+function lt(t) {
   switch (t.type) {
     case "CLEAR_LOGS":
-      u.clear(), y();
+      f.clear(), y();
       break;
     case "SYNC_REQUEST":
-      H.sendSyncResponse(u.getLogs());
+      H.sendSyncResponse(f.getLogs());
       break;
   }
 }
@@ -2709,14 +2752,14 @@ const j = {
    */
   init() {
     try {
-      if (i.initialized || !u.isEnabled() || typeof document > "u")
+      if (i.initialized || !f.isEnabled() || typeof document > "u")
         return;
       const t = document.createElement("div");
       t.id = "devlogger-host", document.body.appendChild(t), i.host = t;
       const e = t.attachShadow({ mode: "open" });
-      i.shadow = e, rt(e), i.unsubscribe = u.subscribe((n) => {
+      i.shadow = e, rt(e), i.unsubscribe = f.subscribe((n) => {
         st(n), H.sendLog(n);
-      }), i.channelUnsubscribe = H.subscribe(at), document.addEventListener("keydown", be), i.initialized = !0;
+      }), i.channelUnsubscribe = H.subscribe(lt), document.addEventListener("keydown", be), i.initialized = !0;
     } catch (t) {
       console.warn("[DevLogger UI] Init error:", t);
     }
@@ -2759,7 +2802,7 @@ const j = {
    * Close the pop-out window
    */
   closePopout() {
-    ue();
+    fe();
   },
   /**
    * Check if pop-out window is open
@@ -2796,7 +2839,7 @@ const j = {
    */
   destroy() {
     try {
-      ue(), i.unsubscribe && (i.unsubscribe(), i.unsubscribe = null), i.channelUnsubscribe && (i.channelUnsubscribe(), i.channelUnsubscribe = null), document.removeEventListener("keydown", be), i.host && (i.host.remove(), i.host = null), i.initialized = !1, i.visible = !1, i.shadow = null, i.container = null, i.logsList = null, i.filterBar = null, i.toggleBtn = null, i.badge = null, i.filter = z();
+      fe(), i.unsubscribe && (i.unsubscribe(), i.unsubscribe = null), i.channelUnsubscribe && (i.channelUnsubscribe(), i.channelUnsubscribe = null), document.removeEventListener("keydown", be), i.host && (i.host.remove(), i.host = null), i.initialized = !1, i.visible = !1, i.shadow = null, i.container = null, i.logsList = null, i.filterBar = null, i.toggleBtn = null, i.badge = null, i.filter = z();
     } catch {
     }
   },
@@ -2818,15 +2861,15 @@ const j = {
   errorPrefix: "[Uncaught Error]",
   rejectionPrefix: "[Unhandled Rejection]"
 };
-let N = !1, L = { ...Le }, P = null, O = null;
-function lt(t, e, n, o, r) {
+let N = !1, L = { ...Le }, P = null, A = null;
+function at(t, e, n, o, r) {
   try {
-    const s = r || (t instanceof ErrorEvent ? t.error : null), c = s?.message || String(t), l = s?.stack;
-    u.error(`${L.errorPrefix} ${c}`, {
+    const s = r || (t instanceof ErrorEvent ? t.error : null), c = s?.message || String(t), a = s?.stack;
+    f.error(`${L.errorPrefix} ${c}`, {
       source: e || "unknown",
       line: n || 0,
       column: o || 0,
-      stack: l,
+      stack: a,
       originalError: s ? {
         name: s.name,
         message: s.message,
@@ -2850,7 +2893,7 @@ function ct(t) {
       name: e.name,
       message: e.message,
       stack: e.stack
-    }) : typeof e == "string" ? n = e : (n = "Unknown rejection reason", o = { reason: e }), u.error(`${L.rejectionPrefix} ${n}`, o);
+    }) : typeof e == "string" ? n = e : (n = "Unknown rejection reason", o = { reason: e }), f.error(`${L.rejectionPrefix} ${n}`, o);
   } catch {
   }
 }
@@ -2862,7 +2905,7 @@ function dt(t = {}) {
   try {
     if (typeof window > "u")
       return;
-    L = { ...Le, ...t }, P = window.onerror, L.captureErrors && (window.onerror = lt), L.captureRejections && (O = ct, window.addEventListener("unhandledrejection", O)), N = !0;
+    L = { ...Le, ...t }, P = window.onerror, L.captureErrors && (window.onerror = at), L.captureRejections && (A = ct, window.addEventListener("unhandledrejection", A)), N = !0;
   } catch {
   }
 }
@@ -2871,17 +2914,17 @@ function gt() {
     try {
       if (typeof window > "u")
         return;
-      window.onerror = P, O && window.removeEventListener("unhandledrejection", O), P = null, O = null, N = !1;
+      window.onerror = P, A && window.removeEventListener("unhandledrejection", A), P = null, A = null, N = !1;
     } catch {
     }
 }
-function ft() {
+function ut() {
   return N;
 }
-function ut() {
+function ft() {
   return { ...L };
 }
-const Ot = {
+const At = {
   /**
    * Install global error handlers
    *
@@ -2906,11 +2949,11 @@ const Ot = {
   /**
    * Check if error capture is currently active
    */
-  isActive: ft,
+  isActive: ut,
   /**
    * Get current configuration
    */
-  getConfig: ut
+  getConfig: ft
 }, J = "devlogger_persisted_logs", oe = "devlogger_session_active", Se = {
   storage: "session",
   maxPersisted: 500,
@@ -3000,7 +3043,7 @@ function X() {
 }
 function mt() {
   if (!R) return;
-  const t = u.getLogs();
+  const t = f.getLogs();
   vt([...t]);
 }
 function yt(t = {}) {
@@ -3011,7 +3054,7 @@ function yt(t = {}) {
   try {
     if (typeof window > "u")
       return;
-    S = { ...Se, ...t }, re = pt(), ht(), W = u.subscribe(mt), window.addEventListener("beforeunload", X), window.addEventListener("pagehide", X), R = !0;
+    S = { ...Se, ...t }, re = pt(), ht(), W = f.subscribe(mt), window.addEventListener("beforeunload", X), window.addEventListener("pagehide", X), R = !0;
   } catch {
   }
 }
@@ -3033,7 +3076,7 @@ function Lt() {
 function St() {
   try {
     const t = $e();
-    return t.length === 0 ? 0 : (u.importLogs(t), t.length);
+    return t.length === 0 ? 0 : (f.importLogs(t), t.length);
   } catch {
     return 0;
   }
@@ -3047,7 +3090,7 @@ function kt() {
 function $t() {
   return { ...S };
 }
-const At = {
+const Ot = {
   /**
    * Enable log persistence
    *
@@ -3115,7 +3158,7 @@ const At = {
   ignorePatterns: [],
   context: {}
 };
-let E = null, A = null, T = null, B = !1, v = { ...Ee };
+let E = null, O = null, T = null, B = !1, v = { ...Ee };
 function Te(t) {
   for (const e of v.ignorePatterns)
     if (typeof e == "string") {
@@ -3151,90 +3194,90 @@ function Et() {
     const o = typeof e == "string" ? e : e instanceof URL ? e.href : e.url;
     if (Te(o))
       return E(e, n);
-    const { host: r, path: s } = Ie(o), c = n?.method || "GET", l = `${c} ${s}`, a = u.span(l, {
+    const { host: r, path: s } = Ie(o), c = n?.method || "GET", a = `${c} ${s}`, l = f.span(a, {
       ...v.context,
       type: "fetch",
       method: c,
       host: r
     });
-    if (a.info(`Request started: ${o}`), v.includeHeaders && n?.headers && a.debug("Request headers", n.headers), v.includeBody && n?.body)
+    if (l.info(`Request started: ${o}`), v.includeHeaders && n?.headers && l.debug("Request headers", n.headers), v.includeBody && n?.body)
       try {
-        const f = typeof n.body == "string" ? Y(n.body) : n.body;
-        a.debug("Request body", f);
+        const u = typeof n.body == "string" ? Y(n.body) : n.body;
+        l.debug("Request body", u);
       } catch {
-        a.debug("Request body", "[Unable to parse]");
+        l.debug("Request body", "[Unable to parse]");
       }
     const d = performance.now();
     try {
-      const f = await E(e, n), h = Math.round(performance.now() - d);
-      if (f.ok) {
-        if (a.info(`Response: ${f.status} ${f.statusText} (${h}ms)`), v.includeResponse)
+      const u = await E(e, n), h = Math.round(performance.now() - d);
+      if (u.ok) {
+        if (l.info(`Response: ${u.status} ${u.statusText} (${h}ms)`), v.includeResponse)
           try {
-            const K = await f.clone().text(), m = Y(Re(K, v.maxResponseLength));
-            a.debug("Response body", m);
+            const K = await u.clone().text(), m = Y(Re(K, v.maxResponseLength));
+            l.debug("Response body", m);
           } catch {
-            a.debug("Response body", "[Unable to read]");
+            l.debug("Response body", "[Unable to read]");
           }
-        a.end();
+        l.end();
       } else
-        a.warn(`Response: ${f.status} ${f.statusText} (${h}ms)`), a.fail();
-      return f;
-    } catch (f) {
+        l.warn(`Response: ${u.status} ${u.statusText} (${h}ms)`), l.fail();
+      return u;
+    } catch (u) {
       const h = Math.round(performance.now() - d);
-      throw a.error(`Request failed after ${h}ms`, f), a.fail(), f;
+      throw l.error(`Request failed after ${h}ms`, u), l.fail(), u;
     }
   };
 }
 function Tt() {
-  A = XMLHttpRequest.prototype.open, T = XMLHttpRequest.prototype.send, XMLHttpRequest.prototype.open = function(t, e, n = !0, o, r) {
+  O = XMLHttpRequest.prototype.open, T = XMLHttpRequest.prototype.send, XMLHttpRequest.prototype.open = function(t, e, n = !0, o, r) {
     const s = typeof e == "string" ? e : e.href;
     return this.__networkCapture = {
       method: t,
       url: s,
       ignored: Te(s)
-    }, A.call(this, t, e, n, o, r);
+    }, O.call(this, t, e, n, o, r);
   }, XMLHttpRequest.prototype.send = function(t) {
     const e = this.__networkCapture;
     if (!e || e.ignored)
       return T.call(this, t);
-    const { method: n, url: o } = e, { host: r, path: s } = Ie(o), c = `${n} ${s}`, l = u.span(c, {
+    const { method: n, url: o } = e, { host: r, path: s } = Ie(o), c = `${n} ${s}`, a = f.span(c, {
       ...v.context,
       type: "xhr",
       method: n,
       host: r
     });
-    if (l.info(`XHR Request started: ${o}`), v.includeBody && t)
+    if (a.info(`XHR Request started: ${o}`), v.includeBody && t)
       try {
         const d = typeof t == "string" ? Y(t) : t;
-        l.debug("Request body", d);
+        a.debug("Request body", d);
       } catch {
-        l.debug("Request body", "[Unable to parse]");
+        a.debug("Request body", "[Unable to parse]");
       }
-    const a = performance.now();
+    const l = performance.now();
     return this.addEventListener("load", () => {
-      const d = Math.round(performance.now() - a);
+      const d = Math.round(performance.now() - l);
       if (this.status >= 200 && this.status < 400) {
-        if (l.info(`Response: ${this.status} ${this.statusText} (${d}ms)`), v.includeResponse && this.responseText) {
-          const f = Y(Re(this.responseText, v.maxResponseLength));
-          l.debug("Response body", f);
+        if (a.info(`Response: ${this.status} ${this.statusText} (${d}ms)`), v.includeResponse && this.responseText) {
+          const u = Y(Re(this.responseText, v.maxResponseLength));
+          a.debug("Response body", u);
         }
-        l.end();
+        a.end();
       } else
-        l.warn(`Response: ${this.status} ${this.statusText} (${d}ms)`), l.fail();
+        a.warn(`Response: ${this.status} ${this.statusText} (${d}ms)`), a.fail();
     }), this.addEventListener("error", () => {
-      const d = Math.round(performance.now() - a);
-      l.error(`XHR Request failed after ${d}ms`), l.fail();
+      const d = Math.round(performance.now() - l);
+      a.error(`XHR Request failed after ${d}ms`), a.fail();
     }), this.addEventListener("abort", () => {
-      const d = Math.round(performance.now() - a);
-      l.warn(`XHR Request aborted after ${d}ms`), l.fail();
+      const d = Math.round(performance.now() - l);
+      a.warn(`XHR Request aborted after ${d}ms`), a.fail();
     }), this.addEventListener("timeout", () => {
-      const d = Math.round(performance.now() - a);
-      l.error(`XHR Request timeout after ${d}ms`), l.fail();
+      const d = Math.round(performance.now() - l);
+      a.error(`XHR Request timeout after ${d}ms`), a.fail();
     }), T.call(this, t);
   };
 }
 function It() {
-  A && (XMLHttpRequest.prototype.open = A, A = null), T && (XMLHttpRequest.prototype.send = T, T = null);
+  O && (XMLHttpRequest.prototype.open = O, O = null), T && (XMLHttpRequest.prototype.send = T, T = null);
 }
 const Ht = {
   /**
@@ -3244,7 +3287,7 @@ const Ht = {
     try {
       if (B)
         return;
-      v = { ...Ee, ...t }, v.captureFetch && typeof globalThis.fetch == "function" && (E = globalThis.fetch, globalThis.fetch = Et()), v.captureXHR && typeof XMLHttpRequest < "u" && Tt(), B = !0, u.debug("[NetworkCapture] Installed", {
+      v = { ...Ee, ...t }, v.captureFetch && typeof globalThis.fetch == "function" && (E = globalThis.fetch, globalThis.fetch = Et()), v.captureXHR && typeof XMLHttpRequest < "u" && Tt(), B = !0, f.debug("[NetworkCapture] Installed", {
         fetch: v.captureFetch,
         xhr: v.captureXHR
       });
@@ -3259,7 +3302,7 @@ const Ht = {
     try {
       if (!B)
         return;
-      E && (globalThis.fetch = E, E = null), It(), B = !1, u.debug("[NetworkCapture] Uninstalled");
+      E && (globalThis.fetch = E, E = null), It(), B = !1, f.debug("[NetworkCapture] Uninstalled");
     } catch (t) {
       console.warn("[NetworkCapture] Uninstall error:", t);
     }
@@ -3424,51 +3467,51 @@ class Dt {
     if (!this.canvas || !this.ctx) return;
     const e = this.ctx, n = this.canvas.width, o = this.canvas.height, r = Date.now(), s = r - this.config.timeWindow;
     e.fillStyle = "#1e1e1e", e.fillRect(0, 0, n, o), this.spanBounds.clear(), this.logBounds.clear(), this.drawTimeGrid(e, n, o, s, r);
-    const c = u.getLogs().filter((a) => a.timestamp >= s), l = u.getSpans().filter((a) => a.startTime >= s || a.endTime && a.endTime >= s);
-    this.config.showSpans && this.drawSpans(e, l, n, o, s, r), this.config.showLogs && this.drawLogs(e, c, n, o, s, r);
+    const c = f.getLogs().filter((l) => l.timestamp >= s), a = f.getSpans().filter((l) => l.startTime >= s || l.endTime && l.endTime >= s);
+    this.config.showSpans && this.drawSpans(e, a, n, o, s, r), this.config.showLogs && this.drawLogs(e, c, n, o, s, r);
   }
   drawTimeGrid(e, n, o, r, s) {
-    const c = s - r, l = 6;
+    const c = s - r, a = 6;
     e.strokeStyle = "#333", e.lineWidth = 1, e.font = "10px SF Mono, monospace", e.fillStyle = "#666";
-    for (let a = 0; a <= l; a++) {
-      const d = a / l * n, f = r + c * a / l;
+    for (let l = 0; l <= a; l++) {
+      const d = l / a * n, u = r + c * l / a;
       e.beginPath(), e.moveTo(d, 0), e.lineTo(d, o), e.stroke();
-      const h = new Date(f), C = `${h.getMinutes().toString().padStart(2, "0")}:${h.getSeconds().toString().padStart(2, "0")}`;
+      const h = new Date(u), C = `${h.getMinutes().toString().padStart(2, "0")}:${h.getSeconds().toString().padStart(2, "0")}`;
       e.fillText(C, d + 2, o - 4);
     }
   }
   drawSpans(e, n, o, r, s, c) {
-    const l = c - s, a = 20, d = 4, f = 20, h = n.filter((m) => !m.parentId);
-    let C = f;
+    const a = c - s, l = 20, d = 4, u = 20, h = n.filter((m) => !m.parentId);
+    let C = u;
     const K = (m, _, Mt = 0) => {
-      const D = (m.startTime - s) / l * o, _e = ((m.endTime || c) - s) / l * o, V = Math.max(_e - D, 2), ie = _t[m.status];
-      e.fillStyle = ie + "40", e.fillRect(D, _, V, a), e.strokeStyle = ie, e.lineWidth = 1, e.strokeRect(D, _, V, a), e.fillStyle = "#ccc", e.font = "10px SF Mono, monospace";
+      const D = (m.startTime - s) / a * o, _e = ((m.endTime || c) - s) / a * o, V = Math.max(_e - D, 2), ie = _t[m.status];
+      e.fillStyle = ie + "40", e.fillRect(D, _, V, l), e.strokeStyle = ie, e.lineWidth = 1, e.strokeRect(D, _, V, l), e.fillStyle = "#ccc", e.font = "10px SF Mono, monospace";
       const De = m.duration ? `${m.name} (${m.duration}ms)` : m.name;
       return e.fillText(De, D + 4, _ + 14, V - 8), this.spanBounds.set(m.id, {
         x: D,
         y: _,
         w: V,
-        h: a
-      }), _ + a + d;
+        h: l
+      }), _ + l + d;
     };
     for (const m of h)
       C = K(m, C);
   }
   drawLogs(e, n, o, r, s, c) {
-    const l = c - s, a = 8, d = 30;
-    for (const f of n) {
-      const h = (f.timestamp - s) / l * o, C = Rt[f.level];
-      e.fillStyle = C, e.beginPath(), e.moveTo(h, r - d), e.lineTo(h - a / 2, r - d - a), e.lineTo(h + a / 2, r - d - a), e.closePath(), e.fill(), this.logBounds.set(f.id, {
+    const a = c - s, l = 8, d = 30;
+    for (const u of n) {
+      const h = (u.timestamp - s) / a * o, C = Rt[u.level];
+      e.fillStyle = C, e.beginPath(), e.moveTo(h, r - d), e.lineTo(h - l / 2, r - d - l), e.lineTo(h + l / 2, r - d - l), e.closePath(), e.fill(), this.logBounds.set(u.id, {
         x: h,
-        y: r - d - a / 2,
-        r: a
+        y: r - d - l / 2,
+        r: l
       });
     }
   }
   handleMouseMove(e) {
     if (!this.canvas || !this.tooltip) return;
     const n = this.canvas.getBoundingClientRect(), o = e.clientX - n.left, r = e.clientY - n.top;
-    for (const s of u.getSpans()) {
+    for (const s of f.getSpans()) {
       const c = this.spanBounds.get(s.id);
       if (c && o >= c.x && o <= c.x + c.w && r >= c.y && r <= c.y + c.h) {
         this.showTooltip(e, `
@@ -3480,7 +3523,7 @@ class Dt {
         return;
       }
     }
-    for (const s of u.getLogs()) {
+    for (const s of f.getLogs()) {
       const c = this.logBounds.get(s.id);
       if (c && Math.sqrt((o - c.x) ** 2 + (r - c.y) ** 2) <= c.r) {
         this.showTooltip(e, `
@@ -3514,16 +3557,15 @@ function zt(t) {
 const Nt = "0.1.0";
 export {
   j as DevLoggerUI,
-  Ot as ErrorCapture,
-  At as LogPersistence,
+  At as ErrorCapture,
+  Ot as LogPersistence,
   Ht as NetworkCapture,
   Dt as Timeline,
   Nt as VERSION,
   ve as computeDiff,
-  le as createDiffResult,
+  ae as createDiffResult,
   zt as createTimeline,
-  ae as formatValue,
+  le as formatValue,
   Ft as hasChanges,
-  u as logger
+  f as logger
 };
-//# sourceMappingURL=index.js.map