devlog-ui 0.1.6 → 1.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
-var Me = Object.defineProperty;
-var Be = (t, e, n) => e in t ? Me(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var p = (t, e, n) => Be(t, typeof e != "symbol" ? e + "" : e, n);
-const se = {
+var Fe = Object.defineProperty;
+var He = (t, e, n) => e in t ? Fe(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var p = (t, e, n) => He(t, typeof e != "symbol" ? e + "" : e, n);
+const le = {
   debug: 0,
   info: 1,
   warn: 2,
@@ -10,35 +10,35 @@ const se = {
 function w(t) {
   return t !== null && typeof t == "object" && !Array.isArray(t);
 }
-function F(t, e) {
+function A(t, e) {
   if (t === e) return !0;
   if (typeof t != typeof e) return !1;
   if (t === null || e === null) return t === e;
   if (Array.isArray(t) && Array.isArray(e))
-    return t.length !== e.length ? !1 : t.every((n, o) => F(n, e[o]));
+    return t.length !== e.length ? !1 : t.every((n, o) => A(n, e[o]));
   if (w(t) && w(e)) {
     const n = Object.keys(t), o = Object.keys(e);
-    return n.length !== o.length ? !1 : n.every((r) => F(t[r], e[r]));
+    return n.length !== o.length ? !1 : n.every((r) => A(t[r], e[r]));
   }
   return !1;
 }
-function le(t) {
+function ce(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(le).join(", ")}]` : `[${t.length} items]`;
+    return t.length === 0 ? "[]" : t.length <= 3 ? `[${t.map(ce).join(", ")}]` : `[${t.length} items]`;
   if (w(t)) {
     const e = Object.keys(t);
-    return e.length === 0 ? "{}" : e.length <= 2 ? `{${e.map((n) => `${n}: ${le(t[n])}`).join(", ")}}` : `{${e.length} keys}`;
+    return e.length === 0 ? "{}" : e.length <= 2 ? `{${e.map((n) => `${n}: ${ce(t[n])}`).join(", ")}}` : `{${e.length} keys}`;
   }
   return String(t);
 }
-function ve(t, e, n = "", o = !1) {
+function ye(t, e, n = "", o = !1) {
   const r = [];
   if (!w(t) && !w(e))
-    return F(t, e) ? o && r.push({
+    return A(t, e) ? o && r.push({
       path: n || "(root)",
       type: "unchanged",
       oldValue: t,
@@ -64,42 +64,42 @@ function ve(t, e, n = "", o = !1) {
       newValue: e
     }), r;
   const s = /* @__PURE__ */ new Set([...Object.keys(t), ...Object.keys(e)]);
-  for (const c of s) {
-    const a = n ? `${n}.${c}` : c, l = t[c], d = e[c], u = c in t, h = c in e;
+  for (const a of s) {
+    const l = n ? `${n}.${a}` : a, c = t[a], d = e[a], u = a in t, h = a in e;
     !u && h ? r.push({
-      path: a,
+      path: l,
       type: "added",
       newValue: d
     }) : u && !h ? r.push({
-      path: a,
+      path: l,
       type: "removed",
-      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,
+      oldValue: c
+    }) : w(c) && w(d) ? r.push(...ye(c, d, l, o)) : Array.isArray(c) && Array.isArray(d) ? A(c, d) ? o && r.push({
+      path: l,
       type: "unchanged",
-      oldValue: l,
+      oldValue: c,
       newValue: d
     }) : r.push({
-      path: a,
+      path: l,
       type: "changed",
-      oldValue: l,
+      oldValue: c,
       newValue: d
-    }) : F(l, d) ? o && r.push({
-      path: a,
+    }) : A(c, d) ? o && r.push({
+      path: l,
       type: "unchanged",
-      oldValue: l,
+      oldValue: c,
       newValue: d
     }) : r.push({
-      path: a,
+      path: l,
       type: "changed",
-      oldValue: l,
+      oldValue: c,
       newValue: d
     });
   }
   return r;
 }
-function ae(t, e) {
-  const n = ve(t, e, "", !1), o = {
+function de(t, e) {
+  const n = ye(t, e, "", !1), o = {
     added: 0,
     removed: 0,
     changed: 0,
@@ -109,13 +109,13 @@ function ae(t, e) {
     o[r.type]++;
   return { changes: n, summary: o };
 }
-function Ft(t) {
+function qt(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 Ae() {
+const Oe = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 };
+function ze() {
   try {
-    if (typeof import.meta < "u" && Fe)
+    if (typeof import.meta < "u" && Oe)
       return !1;
     const t = globalThis.process;
     if (t?.env) {
@@ -129,13 +129,16 @@ function Ae() {
     return !0;
   }
 }
-const Oe = {
+const Ne = {
   maxLogs: 1e3,
   persist: !1,
   minLevel: "debug",
-  enabled: Ae()
+  enabled: ze(),
+  shortcutAction: "toggle",
+  showToggleButton: !0,
+  spanCollapsed: !1
 };
-function He() {
+function Pe() {
   const t = "devlogger_session_id";
   try {
     const e = sessionStorage.getItem(t);
@@ -147,10 +150,10 @@ function He() {
     return `session_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
   }
 }
-function ze() {
+function qe() {
   return `log_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
-function me() {
+function xe() {
   try {
     const t = new Error().stack;
     if (!t)
@@ -165,7 +168,7 @@ function me() {
       if (r)
         return {
           function: r[1] || void 0,
-          file: ce(r[2] || "unknown"),
+          file: ge(r[2] || "unknown"),
           line: parseInt(r[3] || "0", 10),
           column: parseInt(r[4] || "0", 10)
         };
@@ -173,7 +176,7 @@ function me() {
       if (s)
         return {
           function: s[1] || void 0,
-          file: ce(s[2] || "unknown"),
+          file: ge(s[2] || "unknown"),
           line: parseInt(s[3] || "0", 10),
           column: parseInt(s[4] || "0", 10)
         };
@@ -183,12 +186,12 @@ function me() {
     return { file: "unknown", line: 0 };
   }
 }
-function ce(t) {
+function ge(t) {
   let e = t.replace(/^webpack:\/\/[^/]*\//, "").replace(/^\/@fs/, "").replace(/^file:\/\//, "").replace(/\?.*$/, "");
   const n = e.split("/");
   return n.length > 2 && (e = n.slice(-2).join("/")), e;
 }
-function Ne() {
+function Ue() {
   return `span_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
 class G {
@@ -197,13 +200,13 @@ class G {
     p(this, "_event");
     p(this, "_ended", !1);
     this.logger = e, this._event = {
-      id: Ne(),
+      id: Ue(),
       name: n,
       startTime: Date.now(),
       status: "running",
       parentId: r,
       context: o,
-      source: me(),
+      source: xe(),
       sessionId: e.getSessionId()
     }, e.notifySpan(this._event);
   }
@@ -253,7 +256,7 @@ class G {
     this._ended || (this._ended = !0, this._event.endTime = Date.now(), this._event.duration = this._event.endTime - this._event.startTime, this._event.status = e, this.logger.notifySpan(this._event));
   }
 }
-class ee {
+class te {
   constructor(e, n) {
     p(this, "logger");
     p(this, "context");
@@ -277,41 +280,41 @@ class ee {
   }
   /** Create a new context logger with merged context */
   withContext(e) {
-    return new ee(this.logger, { ...this.context, ...e });
+    return new te(this.logger, { ...this.context, ...e });
   }
 }
-class Pe {
+class Ve {
   constructor() {
     p(this, "logs", []);
     p(this, "spans", /* @__PURE__ */ new Map());
     p(this, "subscribers", /* @__PURE__ */ new Set());
     p(this, "spanSubscribers", /* @__PURE__ */ new Set());
-    p(this, "config", { ...Oe });
+    p(this, "config", { ...Ne });
     p(this, "sessionId");
     p(this, "globalContext", {});
-    this.sessionId = He();
+    this.sessionId = Pe();
   }
   /**
    * Core logging method - all public methods delegate to this
    */
   log(e, n, o, r, s) {
     try {
-      if (!this.config.enabled || se[e] < se[this.config.minLevel])
+      if (!this.config.enabled || le[e] < le[this.config.minLevel])
         return;
-      const c = Object.keys(this.globalContext).length > 0 || r ? { ...this.globalContext, ...r } : void 0, a = {
-        id: ze(),
+      const a = Object.keys(this.globalContext).length > 0 || r ? { ...this.globalContext, ...r } : void 0, l = {
+        id: qe(),
         timestamp: Date.now(),
         level: e,
         message: String(n),
         data: this.safeCloneData(o),
-        source: me(),
+        source: xe(),
         sessionId: this.sessionId,
-        context: c,
+        context: a,
         spanId: s
       };
-      this.store(a), this.notify(a);
-    } catch (c) {
-      typeof console < "u" && console.warn && console.warn("[DevLogger] Internal error:", c);
+      this.store(l), this.notify(l);
+    } catch (a) {
+      typeof console < "u" && console.warn && console.warn("[DevLogger] Internal error:", a);
     }
   }
   /**
@@ -561,7 +564,7 @@ class Pe {
    * Create a context-bound logger
    */
   withContext(e) {
-    return new ee(this, e);
+    return new te(this, e);
   }
   // ========== Export API ==========
   /**
@@ -574,24 +577,24 @@ class Pe {
         lastMs: o,
         levels: r,
         search: s,
-        pretty: c = !0
+        pretty: a = !0
       } = e;
-      let a = [...this.logs];
+      let l = [...this.logs];
       if (o !== void 0 && o > 0) {
-        const l = Date.now() - o;
-        a = a.filter((d) => d.timestamp >= l);
+        const c = Date.now() - o;
+        l = l.filter((d) => d.timestamp >= c);
       }
       if (r && r.length > 0) {
-        const l = new Set(r);
-        a = a.filter((d) => l.has(d.level));
+        const c = new Set(r);
+        l = l.filter((d) => c.has(d.level));
       }
       if (s) {
-        const l = s.toLowerCase();
-        a = a.filter(
-          (d) => d.message.toLowerCase().includes(l) || JSON.stringify(d.data).toLowerCase().includes(l)
+        const c = s.toLowerCase();
+        l = l.filter(
+          (d) => d.message.toLowerCase().includes(c) || JSON.stringify(d.data).toLowerCase().includes(c)
         );
       }
-      return n === "text" ? this.formatLogsAsText(a) : c ? JSON.stringify(a, null, 2) : JSON.stringify(a);
+      return n === "text" ? this.formatLogsAsText(l) : a ? JSON.stringify(l, null, 2) : JSON.stringify(l);
     } catch {
       return "[]";
     }
@@ -601,10 +604,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, u]) => `${d}=${u}`).join(", ")}]` : "", a = n.spanId ? ` (span: ${n.spanId})` : "", l = n.data.length > 0 ? `
+      const o = new Date(n.timestamp).toISOString(), r = n.level.toUpperCase().padEnd(5), s = `${n.source.file}:${n.source.line}`, a = n.context ? ` [${Object.entries(n.context).map(([d, u]) => `${d}=${u}`).join(", ")}]` : "", l = n.spanId ? ` (span: ${n.spanId})` : "", c = n.data.length > 0 ? `
   Data: ${JSON.stringify(n.data)}` : "";
-      return `[${o}] ${r} ${n.message}${c}${a}
-  Source: ${s}${l}`;
+      return `[${o}] ${r} ${n.message}${a}${l}
+  Source: ${s}${c}`;
     }).join(`
 
 `);
@@ -626,7 +629,7 @@ class Pe {
    */
   diff(e, n, o, r = "info") {
     try {
-      const s = ae(n, o);
+      const s = de(n, o);
       return this.log(r, e, [
         {
           __type: "Diff",
@@ -647,7 +650,7 @@ class Pe {
    */
   computeDiff(e, n) {
     try {
-      return ae(e, n);
+      return de(e, n);
     } catch {
       return {
         changes: [],
@@ -656,7 +659,7 @@ class Pe {
     }
   }
 }
-const f = new Pe(), g = {
+const f = new Ve(), g = {
   // Background
   bgPrimary: "#1e1e1e",
   bgSecondary: "#252526",
@@ -678,7 +681,7 @@ const f = new Pe(), g = {
   // Interactive
   buttonBg: "#0e639c",
   buttonHover: "#1177bb"
-}, qe = `
+}, je = `
   :host {
     --bg-primary: ${g.bgPrimary};
     --bg-secondary: ${g.bgSecondary};
@@ -896,6 +899,90 @@ const f = new Pe(), g = {
     padding-left: 10px;
   }
 
+  .span-group {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .span-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--bg-secondary);
+    cursor: pointer;
+  }
+
+  .span-header:hover {
+    background: var(--bg-hover);
+  }
+
+  .span-toggle {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 2px;
+  }
+
+  .span-toggle::before {
+    content: '▾';
+    display: inline-block;
+    transition: transform 0.15s ease;
+  }
+
+  .span-group.collapsed .span-toggle::before {
+    transform: rotate(-90deg);
+  }
+
+  .span-title {
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--text-primary);
+  }
+
+  .span-status {
+    font-size: 10px;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 3px;
+    color: var(--text-primary);
+    background: var(--bg-primary);
+  }
+
+  .span-status-running {
+    color: ${g.levelInfo};
+    background: rgba(55, 148, 255, 0.15);
+  }
+
+  .span-status-success {
+    color: ${g.levelInfo};
+    background: rgba(55, 148, 255, 0.15);
+  }
+
+  .span-status-error {
+    color: ${g.levelError};
+    background: rgba(241, 76, 76, 0.15);
+  }
+
+  .span-duration {
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  .span-count {
+    margin-left: auto;
+    color: var(--text-secondary);
+    font-size: 11px;
+  }
+
+  .span-logs {
+    padding-left: 4px;
+  }
+
+  .span-group.collapsed .span-logs {
+    display: none;
+  }
+
   .log-message {
     color: var(--text-primary);
     word-break: break-word;
@@ -1220,14 +1307,14 @@ const f = new Pe(), g = {
     color: ${g.levelInfo};
   }
 `;
-function Ue(t) {
+function We(t) {
   const e = new Date(t), n = e.getHours().toString().padStart(2, "0"), o = e.getMinutes().toString().padStart(2, "0"), r = e.getSeconds().toString().padStart(2, "0"), s = e.getMilliseconds().toString().padStart(3, "0");
   return `${n}:${o}:${r}.${s}`;
 }
-function de(t) {
+function ue(t) {
   return t.file === "unknown" ? "unknown" : `${t.file}:${t.line}`;
 }
-function ye(t) {
+function we(t) {
   return t !== null && typeof t == "object" && t.__type === "Diff" && t.diff !== void 0;
 }
 function $(t) {
@@ -1243,23 +1330,23 @@ function $(t) {
   }
   return String(t);
 }
-function Ve(t) {
+function Ge(t) {
   const e = `diff-${t.type}`, n = t.type === "added" ? "+" : t.type === "removed" ? "-" : t.type === "changed" ? "~" : " ";
   let o = "";
   return t.type === "added" ? o = $(t.newValue) : t.type === "removed" ? o = $(t.oldValue) : t.type === "changed" && (o = `${$(t.oldValue)} → ${$(t.newValue)}`), `<div class="diff-entry ${e}"><span class="diff-icon">${n}</span> <span class="diff-path">${t.path}</span>: <span class="diff-value">${o}</span></div>`;
 }
-function je(t) {
+function Je(t) {
   const { diff: e } = t, { summary: n, changes: o } = e;
   let r = '<div class="diff-container">';
   if (r += '<div class="diff-summary">', n.added > 0 && (r += `<span class="diff-count diff-added">+${n.added}</span>`), n.removed > 0 && (r += `<span class="diff-count diff-removed">-${n.removed}</span>`), n.changed > 0 && (r += `<span class="diff-count diff-changed">~${n.changed}</span>`), n.added === 0 && n.removed === 0 && n.changed === 0 && (r += '<span class="diff-count diff-unchanged">No changes</span>'), r += "</div>", o.length > 0) {
     r += '<div class="diff-changes">';
     for (const s of o)
-      r += Ve(s);
+      r += Ge(s);
     r += "</div>";
   }
   return r += "</div>", r;
 }
-function We(t) {
+function Xe(t) {
   if (t.length === 0)
     return "";
   try {
@@ -1269,30 +1356,30 @@ function We(t) {
     return "[Unable to display data]";
   }
 }
-function Ge(t) {
-  return t.some(ye);
+function Ye(t) {
+  return t.some(we);
 }
 function M(t) {
   const e = document.createElement("div");
   return e.textContent = t, e.innerHTML;
 }
-function Je(t) {
+function Ke(t) {
   return !t || Object.keys(t).length === 0 ? "" : Object.entries(t).map(([e, n]) => `${e}=${n}`).join(" · ");
 }
-function xe(t) {
+function J(t) {
   const e = document.createElement("div");
   e.className = `log-entry${t.spanId ? " log-entry-in-span" : ""}`, e.dataset.id = t.id, t.spanId && (e.dataset.spanId = t.spanId);
-  const n = t.data.length > 0, o = Ge(t.data), r = t.context && Object.keys(t.context).length > 0, s = `data-${t.id}`, c = () => {
+  const n = t.data.length > 0, o = Ye(t.data), r = t.context && Object.keys(t.context).length > 0, s = `data-${t.id}`, a = () => {
     if (!n) return "";
     if (o) {
-      const a = t.data.find(ye);
-      if (a)
+      const l = t.data.find(we);
+      if (l)
         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(a)}</div>
+            <div class="log-data-content" id="${s}">${Je(l)}</div>
           </div>
         `;
     }
@@ -1301,42 +1388,42 @@ function xe(t) {
         <button class="log-data-toggle" data-target="${s}">
           ${t.data.length} item${t.data.length > 1 ? "s" : ""}
         </button>
-        <pre class="log-data-content" id="${s}">${M(We(t.data))}</pre>
+        <pre class="log-data-content" id="${s}">${M(Xe(t.data))}</pre>
       </div>
     `;
   };
   if (e.innerHTML = `
     <div class="log-entry-header">
       <span class="log-level log-level-${t.level}">${t.level}</span>
-      <span class="log-time">${Ue(t.timestamp)}</span>
-      ${r ? `<span class="log-context" title="Context">${M(Je(t.context))}</span>` : ""}
-      <span class="log-source" title="${M(de(t.source))}">${M(de(t.source))}</span>
+      <span class="log-time">${We(t.timestamp)}</span>
+      ${r ? `<span class="log-context" title="Context">${M(Ke(t.context))}</span>` : ""}
+      <span class="log-source" title="${M(ue(t.source))}">${M(ue(t.source))}</span>
     </div>
     <div class="log-message">${M(t.message)}</div>
-    ${c()}
+    ${a()}
   `, n) {
-    const a = e.querySelector(".log-data-toggle"), l = e.querySelector(`#${s}`);
-    a && l && a.addEventListener("click", () => {
-      a.classList.toggle("expanded"), l.classList.toggle("visible");
+    const l = e.querySelector(".log-data-toggle"), c = e.querySelector(`#${s}`);
+    l && c && l.addEventListener("click", () => {
+      l.classList.toggle("expanded"), c.classList.toggle("visible");
     });
   }
   return e;
 }
-function Xe() {
+function Qe() {
   const t = document.createElement("div");
   return t.className = "devlogger-empty", t.textContent = "No logs yet...", t;
 }
-const Ye = "devlogger-sync";
-function Ke() {
+const Ze = "devlogger-sync";
+function et() {
   return `sender_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
-class Qe {
+class tt {
   constructor() {
     p(this, "channel", null);
     p(this, "handlers", /* @__PURE__ */ new Set());
     p(this, "senderId");
     p(this, "isConnected", !1);
-    this.senderId = Ke(), this.connect();
+    this.senderId = et(), this.connect();
   }
   /**
    * Connect to the broadcast channel
@@ -1347,7 +1434,7 @@ class Qe {
         console.warn("[DevLogger] BroadcastChannel not supported");
         return;
       }
-      this.channel = new BroadcastChannel(Ye), this.channel.onmessage = (e) => {
+      this.channel = new BroadcastChannel(Ze), this.channel.onmessage = (e) => {
         this.handleMessage(e.data);
       }, this.channel.onmessageerror = () => {
         console.warn("[DevLogger] Channel message error");
@@ -1438,36 +1525,36 @@ class Qe {
     }
   }
 }
-const H = new Qe(), ge = 500, ue = 700;
+const z = new tt(), fe = 500, pe = 700;
 let b = null;
-function Ze() {
+function nt() {
   try {
     if (b && !b.closed)
       return b.focus(), b;
-    const t = Math.max(0, (screen.width - ge) / 2), e = Math.max(0, (screen.height - ue) / 2), n = tt();
+    const t = Math.max(0, (screen.width - fe) / 2), e = Math.max(0, (screen.height - pe) / 2), n = rt();
     return b = window.open(
       "",
       "devlogger-popout",
-      `width=${ge},height=${ue},left=${t},top=${e},resizable=yes,scrollbars=yes`
+      `width=${fe},height=${pe},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(f.getLogs());
+        z.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 fe() {
+function he() {
   try {
     b && !b.closed && b.close(), b = null;
   } catch {
   }
 }
-function et() {
+function ot() {
   return b !== null && !b.closed;
 }
-function tt() {
+function rt() {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -2532,14 +2619,14 @@ function tt() {
 </body>
 </html>`;
 }
-function z() {
+function N() {
   return {
     levels: /* @__PURE__ */ new Set(["debug", "info", "warn", "error"]),
     search: "",
     file: ""
   };
 }
-function nt(t, e) {
+function st(t, e) {
   if (e.levels.size > 0 && !e.levels.has(t.level) || e.file && !t.source.file.toLowerCase().includes(e.file.toLowerCase()))
     return !1;
   if (e.search) {
@@ -2549,14 +2636,14 @@ function nt(t, e) {
   }
   return !0;
 }
-function U(t, e) {
-  return t.filter((n) => nt(n, e));
+function V(t, e) {
+  return t.filter((n) => st(n, e));
 }
-function te(t) {
+function ne(t) {
   return !(t.levels.size === 4) || t.search !== "" || t.file !== "";
 }
-function ot(t, e, n) {
-  const o = te(t);
+function it(t, e, n) {
+  const o = ne(t);
   return `
     <div class="filter-bar ${o ? "filter-active" : ""}">
       <div class="filter-row">
@@ -2567,10 +2654,10 @@ function ot(t, e, n) {
           <button class="filter-level-btn ${t.levels.has("error") ? "active" : ""}" data-level="error" title="Error">E</button>
         </div>
         <div class="filter-search">
-          <input type="text" class="filter-input" placeholder="Search logs..." value="${pe(t.search)}" data-filter="search">
+          <input type="text" class="filter-input" placeholder="Search logs..." value="${be(t.search)}" data-filter="search">
         </div>
         <div class="filter-file">
-          <input type="text" class="filter-input filter-file-input" placeholder="Filter by file..." value="${pe(t.file)}" data-filter="file">
+          <input type="text" class="filter-input filter-file-input" placeholder="Filter by file..." value="${be(t.file)}" data-filter="file">
         </div>
         ${o ? '<button class="filter-clear-btn" title="Clear filters">✕</button>' : ""}
       </div>
@@ -2578,11 +2665,24 @@ function ot(t, e, n) {
     </div>
   `;
 }
-function pe(t) {
+function be(t) {
   return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
-const Q = { key: "l", ctrlKey: !0, shiftKey: !0 };
-function he(t, e) {
+const Z = { key: "l", ctrlKey: !0, shiftKey: !0 };
+function oe() {
+  return f.getConfig().shortcutAction === "popout" ? "popout" : "toggle";
+}
+function at() {
+  return oe() === "popout" ? "Ctrl+Shift+L to open pop-out" : "Ctrl+Shift+L to toggle";
+}
+function lt(t) {
+  const e = document.createElement("div");
+  return e.textContent = t, e.innerHTML;
+}
+function Le(t) {
+  return t.duration === void 0 ? "running" : `${Math.round(t.duration)}ms`;
+}
+function ve(t, e) {
   const n = t.textContent;
   t.textContent = e ? "✓" : "✗", t.disabled = !0, setTimeout(() => {
     t.textContent = n, t.disabled = !1;
@@ -2599,70 +2699,72 @@ const i = {
   toggleBtn: null,
   badge: null,
   unsubscribe: null,
+  spanUnsubscribe: null,
   channelUnsubscribe: null,
-  filter: z()
+  filter: N()
 };
-function rt(t) {
+function ct(t) {
   const e = document.createElement("style");
-  e.textContent = qe, t.appendChild(e);
-  const n = document.createElement("button");
-  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 = f.getLogs(), s = U(r, i.filter);
-  o.innerHTML = `
+  if (e.textContent = je, t.appendChild(e), f.getConfig().showToggleButton) {
+    const s = document.createElement("button");
+    s.className = "devlogger-toggle", s.innerHTML = "📋", s.title = oe() === "popout" ? "Toggle DevLogger" : "Toggle DevLogger (Ctrl+Shift+L)", s.addEventListener("click", () => F.toggle()), t.appendChild(s), i.toggleBtn = s;
+  }
+  const n = document.createElement("div");
+  n.className = "devlogger-container hidden";
+  const o = f.getLogs(), r = V(o, i.filter);
+  n.innerHTML = `
     <div class="devlogger-header">
       <div class="devlogger-title">
         DevLogger
-        <span class="devlogger-badge">${s.length}</span>
+        <span class="devlogger-badge">${r.length}</span>
       </div>
       <div class="devlogger-actions">
         <button class="devlogger-btn" data-action="copy-json" title="Copy as JSON">JSON</button>
         <button class="devlogger-btn" data-action="copy-text" title="Copy as Text">TXT</button>
         <button class="devlogger-btn" data-action="clear" title="Clear logs">Clear</button>
         <button class="devlogger-btn devlogger-btn-primary" data-action="popout" title="Open in new window">Pop-out</button>
-        <button class="devlogger-btn" data-action="close" title="Close (Ctrl+Shift+L)">✕</button>
+        <button class="devlogger-btn" data-action="close" title="Close">✕</button>
       </div>
     </div>
     <div class="filter-bar-container"></div>
     <div class="devlogger-logs"></div>
     <div class="devlogger-footer">
-      <span class="devlogger-log-count">${r.length} logs</span>
-      <span class="devlogger-shortcut">Ctrl+Shift+L to toggle</span>
+      <span class="devlogger-log-count">${o.length} logs</span>
+      <span class="devlogger-shortcut">${at()}</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", (a) => {
-      const l = a.currentTarget.dataset.action, d = a.currentTarget;
+  `, i.badge = n.querySelector(".devlogger-badge"), i.logsList = n.querySelector(".devlogger-logs"), i.filterBar = n.querySelector(".filter-bar-container"), n.querySelectorAll("[data-action]").forEach((s) => {
+    s.addEventListener("click", (a) => {
+      const l = a.currentTarget.dataset.action, c = a.currentTarget;
       switch (l) {
         case "clear":
-          f.clear(), H.sendClear(), y();
+          f.clear(), z.sendClear(), y();
           break;
         case "popout":
-          j.popout();
+          F.popout();
           break;
         case "close":
-          j.close();
+          F.close();
           break;
         case "copy-json":
-          f.copyLogs({ format: "json" }).then((u) => {
-            he(d, u);
+          f.copyLogs({ format: "json" }).then((d) => {
+            ve(c, d);
           });
           break;
         case "copy-text":
-          f.copyLogs({ format: "text" }).then((u) => {
-            he(d, u);
+          f.copyLogs({ format: "text" }).then((d) => {
+            ve(c, d);
           });
           break;
       }
     });
-  }), t.appendChild(o), i.container = o, I(), y();
+  }), t.appendChild(n), i.container = n, I(), y();
 }
 function I() {
   if (!i.filterBar) return;
-  const t = f.getLogs(), e = U(t, i.filter);
-  i.filterBar.innerHTML = ot(i.filter, t.length, e.length), it();
+  const t = f.getLogs(), e = V(t, i.filter);
+  i.filterBar.innerHTML = it(i.filter, t.length, e.length), dt();
 }
-function it() {
+function dt() {
   if (!i.filterBar) return;
   i.filterBar.querySelectorAll(".filter-level-btn").forEach((o) => {
     o.addEventListener("click", (r) => {
@@ -2672,22 +2774,22 @@ function it() {
   });
   const t = i.filterBar.querySelector('[data-filter="search"]');
   t && t.addEventListener("input", (o) => {
-    i.filter.search = o.target.value, Z(), y();
+    i.filter.search = o.target.value, ee(), y();
   });
   const e = i.filterBar.querySelector('[data-filter="file"]');
   e && e.addEventListener("input", (o) => {
-    i.filter.file = o.target.value, Z(), y();
+    i.filter.file = o.target.value, ee(), y();
   });
   const n = i.filterBar.querySelector(".filter-clear-btn");
   n && n.addEventListener("click", () => {
-    i.filter = z(), I(), y();
+    i.filter = N(), I(), y();
   });
 }
 function y() {
   if (!i.logsList) return;
-  const t = f.getLogs(), e = U(t, i.filter);
+  const t = f.getLogs(), e = V(t, i.filter);
   if (i.logsList.innerHTML = "", t.length === 0)
-    i.logsList.appendChild(Xe());
+    i.logsList.appendChild(Qe());
   else if (e.length === 0) {
     const n = document.createElement("div");
     n.className = "devlogger-no-results", n.innerHTML = `
@@ -2695,58 +2797,121 @@ function y() {
       <span class="devlogger-no-results-text">No logs match your filter</span>
     `, i.logsList.appendChild(n);
   } else {
-    const n = document.createDocumentFragment();
-    for (const o of e)
-      n.appendChild(xe(o));
+    const n = document.createDocumentFragment(), o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
+    for (const a of e) {
+      if (!a.spanId) {
+        n.appendChild(J(a));
+        continue;
+      }
+      let l = o.get(a.spanId);
+      if (!l) {
+        const d = f.getSpan(a.spanId);
+        l = Ce(a.spanId, d), o.set(a.spanId, l);
+        const u = l.querySelector(".span-logs");
+        u && r.set(a.spanId, u), n.appendChild(l);
+      }
+      const c = r.get(a.spanId);
+      c && c.appendChild(J(a)), s.set(a.spanId, (s.get(a.spanId) ?? 0) + 1);
+    }
+    for (const [a, l] of s) {
+      const d = o.get(a)?.querySelector(".span-count");
+      d && (d.textContent = `${l} log${l === 1 ? "" : "s"}`);
+    }
     i.logsList.appendChild(n);
   }
-  we(e.length, t.length), ne();
+  Se(e.length, t.length), re();
 }
-function st(t) {
+function gt(t) {
   if (!i.logsList) return;
-  const e = f.getLogs(), n = U(e, i.filter);
+  const e = f.getLogs(), n = V(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));
+    if (r && r.remove(), t.spanId) {
+      let s = i.logsList.querySelector(`.span-group[data-span-id="${t.spanId}"]`);
+      if (!s) {
+        const l = f.getSpan(t.spanId);
+        s = Ce(t.spanId, l), i.logsList.appendChild(s);
+      }
+      const a = s.querySelector(".span-logs");
+      a && (a.appendChild(J(t)), ut(s, a));
+    } else
+      i.logsList.appendChild(J(t));
   }
-  we(n.length, e.length), Z(), ne();
+  Se(n.length, e.length), ee(), re();
 }
-function we(t, e) {
+function Se(t, e) {
   i.badge && (i.badge.textContent = String(t));
   const n = i.container?.querySelector(".devlogger-log-count");
-  n && (te(i.filter) ? n.textContent = `${t} of ${e} logs` : n.textContent = `${e} logs`);
+  n && (ne(i.filter) ? n.textContent = `${t} of ${e} logs` : n.textContent = `${e} logs`);
 }
-function Z() {
+function ee() {
   if (!i.filterBar) return;
-  const t = f.getLogs(), e = U(t, i.filter), n = te(i.filter), o = i.filterBar.querySelector(".filter-bar");
+  const t = f.getLogs(), e = V(t, i.filter), n = ne(i.filter), o = i.filterBar.querySelector(".filter-bar");
   o && o.classList.toggle("filter-active", n);
   let r = i.filterBar.querySelector(".filter-status");
   if (n) {
     r || (r = document.createElement("div"), r.className = "filter-status", o?.appendChild(r)), r.textContent = `Showing ${e.length} of ${t.length} logs`;
     let s = i.filterBar.querySelector(".filter-clear-btn");
     s || (s = document.createElement("button"), s.className = "filter-clear-btn", s.setAttribute("title", "Clear filters"), s.textContent = "✕", s.addEventListener("click", () => {
-      i.filter = z(), I(), y();
+      i.filter = N(), I(), y();
     }), i.filterBar.querySelector(".filter-row")?.appendChild(s));
   } else
     r?.remove(), i.filterBar.querySelector(".filter-clear-btn")?.remove();
 }
-function ne() {
+function re() {
   i.logsList && i.visible && (i.logsList.scrollTop = i.logsList.scrollHeight);
 }
-function be(t) {
-  t.key.toLowerCase() === Q.key && t.ctrlKey === Q.ctrlKey && t.shiftKey === Q.shiftKey && (t.preventDefault(), j.toggle());
-}
-function lt(t) {
+function ut(t, e) {
+  const n = t.querySelector(".span-count");
+  if (n) {
+    const o = e.querySelectorAll(".log-entry").length;
+    n.textContent = `${o} log${o === 1 ? "" : "s"}`;
+  }
+}
+function Ce(t, e) {
+  const n = document.createElement("div");
+  n.className = "span-group", n.dataset.spanId = t;
+  const o = e?.name ?? "Span", r = e?.status ?? "running", s = e ? Le(e) : "running", a = document.createElement("div");
+  a.className = "span-header", a.innerHTML = `
+    <button class="span-toggle" type="button" aria-label="Toggle span logs"></button>
+    <span class="span-title">${lt(o)}</span>
+    <span class="span-status span-status-${r}">${r}</span>
+    <span class="span-duration">${s}</span>
+    <span class="span-count">0 logs</span>
+  `;
+  const l = document.createElement("div");
+  l.className = "span-logs", f.getConfig().spanCollapsed && n.classList.add("collapsed");
+  const c = a.querySelector(".span-toggle"), d = () => {
+    n.classList.toggle("collapsed");
+  };
+  return a.addEventListener("click", (u) => {
+    u.target?.closest(".span-toggle") || d();
+  }), c?.addEventListener("click", () => d()), n.appendChild(a), n.appendChild(l), n;
+}
+function ft(t) {
+  const e = i.logsList?.querySelector(`.span-group[data-span-id="${t.id}"]`);
+  if (!e) return;
+  const n = e.querySelector(".span-title");
+  n && (n.textContent = t.name);
+  const o = e.querySelector(".span-status");
+  o && (o.textContent = t.status, o.className = `span-status span-status-${t.status}`);
+  const r = e.querySelector(".span-duration");
+  r && (r.textContent = Le(t));
+}
+function me(t) {
+  t.key.toLowerCase() === Z.key && t.ctrlKey === Z.ctrlKey && t.shiftKey === Z.shiftKey && (t.preventDefault(), oe() === "popout" ? F.popout() : F.toggle());
+}
+function pt(t) {
   switch (t.type) {
     case "CLEAR_LOGS":
       f.clear(), y();
       break;
     case "SYNC_REQUEST":
-      H.sendSyncResponse(f.getLogs());
+      z.sendSyncResponse(f.getLogs());
       break;
   }
 }
-const j = {
+const F = {
   /**
    * Initialize the overlay UI
    */
@@ -2757,9 +2922,11 @@ const j = {
       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 = f.subscribe((n) => {
-        st(n), H.sendLog(n);
-      }), i.channelUnsubscribe = H.subscribe(lt), document.addEventListener("keydown", be), i.initialized = !0;
+      i.shadow = e, ct(e), i.unsubscribe = f.subscribe((n) => {
+        gt(n), z.sendLog(n);
+      }), i.spanUnsubscribe = f.subscribeSpans((n) => {
+        ft(n);
+      }), i.channelUnsubscribe = z.subscribe(pt), document.addEventListener("keydown", me), i.initialized = !0;
     } catch (t) {
       console.warn("[DevLogger UI] Init error:", t);
     }
@@ -2769,7 +2936,7 @@ const j = {
    */
   open() {
     try {
-      i.initialized || this.init(), i.container && (i.container.classList.remove("hidden"), i.visible = !0, ne());
+      i.initialized || this.init(), i.container && (i.container.classList.remove("hidden"), i.visible = !0, re());
     } catch {
     }
   },
@@ -2793,7 +2960,7 @@ const j = {
    */
   popout() {
     try {
-      i.initialized || this.init(), Ze();
+      i.initialized || this.init(), nt();
     } catch (t) {
       console.warn("[DevLogger] Failed to open pop-out:", t);
     }
@@ -2802,13 +2969,13 @@ const j = {
    * Close the pop-out window
    */
   closePopout() {
-    fe();
+    he();
   },
   /**
    * Check if pop-out window is open
    */
   isPopoutOpen() {
-    return et();
+    return ot();
   },
   /**
    * Set filter state
@@ -2830,7 +2997,7 @@ const j = {
    */
   clearFilter() {
     try {
-      i.filter = z(), I(), y();
+      i.filter = N(), I(), y();
     } catch {
     }
   },
@@ -2839,7 +3006,7 @@ const j = {
    */
   destroy() {
     try {
-      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();
+      he(), i.unsubscribe && (i.unsubscribe(), i.unsubscribe = null), i.spanUnsubscribe && (i.spanUnsubscribe(), i.spanUnsubscribe = null), i.channelUnsubscribe && (i.channelUnsubscribe(), i.channelUnsubscribe = null), document.removeEventListener("keydown", me), 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.spanUnsubscribe = null, i.filter = N();
     } catch {
     }
   },
@@ -2855,21 +3022,21 @@ const j = {
   isInitialized() {
     return i.initialized;
   }
-}, Le = {
+}, ke = {
   captureErrors: !0,
   captureRejections: !0,
   errorPrefix: "[Uncaught Error]",
   rejectionPrefix: "[Unhandled Rejection]"
 };
-let N = !1, L = { ...Le }, P = null, A = null;
-function at(t, e, n, o, r) {
+let P = !1, L = { ...ke }, q = null, H = null;
+function ht(t, e, n, o, r) {
   try {
-    const s = r || (t instanceof ErrorEvent ? t.error : null), c = s?.message || String(t), a = s?.stack;
-    f.error(`${L.errorPrefix} ${c}`, {
+    const s = r || (t instanceof ErrorEvent ? t.error : null), a = s?.message || String(t), l = s?.stack;
+    f.error(`${L.errorPrefix} ${a}`, {
       source: e || "unknown",
       line: n || 0,
       column: o || 0,
-      stack: a,
+      stack: l,
       originalError: s ? {
         name: s.name,
         message: s.message,
@@ -2878,14 +3045,14 @@ function at(t, e, n, o, r) {
     });
   } catch {
   }
-  if (P)
+  if (q)
     try {
-      return P(t, e, n, o, r) ?? !1;
+      return q(t, e, n, o, r) ?? !1;
     } catch {
     }
   return !1;
 }
-function ct(t) {
+function bt(t) {
   try {
     const e = t.reason;
     let n, o = {};
@@ -2897,34 +3064,34 @@ function ct(t) {
   } catch {
   }
 }
-function dt(t = {}) {
-  if (N) {
+function vt(t = {}) {
+  if (P) {
     L = { ...L, ...t };
     return;
   }
   try {
     if (typeof window > "u")
       return;
-    L = { ...Le, ...t }, P = window.onerror, L.captureErrors && (window.onerror = at), L.captureRejections && (A = ct, window.addEventListener("unhandledrejection", A)), N = !0;
+    L = { ...ke, ...t }, q = window.onerror, L.captureErrors && (window.onerror = ht), L.captureRejections && (H = bt, window.addEventListener("unhandledrejection", H)), P = !0;
   } catch {
   }
 }
-function gt() {
-  if (N)
+function mt() {
+  if (P)
     try {
       if (typeof window > "u")
         return;
-      window.onerror = P, A && window.removeEventListener("unhandledrejection", A), P = null, A = null, N = !1;
+      window.onerror = q, H && window.removeEventListener("unhandledrejection", H), q = null, H = null, P = !1;
     } catch {
     }
 }
-function ut() {
-  return N;
+function yt() {
+  return P;
 }
-function ft() {
+function xt() {
   return { ...L };
 }
-const At = {
+const Ut = {
   /**
    * Install global error handlers
    *
@@ -2941,25 +3108,25 @@ const At = {
    * });
    * ```
    */
-  install: dt,
+  install: vt,
   /**
    * Uninstall global error handlers and restore originals
    */
-  uninstall: gt,
+  uninstall: mt,
   /**
    * Check if error capture is currently active
    */
-  isActive: ut,
+  isActive: yt,
   /**
    * Get current configuration
    */
-  getConfig: ft
-}, J = "devlogger_persisted_logs", oe = "devlogger_session_active", Se = {
+  getConfig: xt
+}, X = "devlogger_persisted_logs", se = "devlogger_session_active", $e = {
   storage: "session",
   maxPersisted: 500,
   debounceMs: 100
 };
-let R = !1, S = { ...Se }, q = [], x = null, re = !1, W = null;
+let R = !1, S = { ...$e }, U = [], x = null, ie = !1, W = null;
 function k() {
   try {
     return typeof window > "u" ? null : S.storage === "local" ? localStorage : sessionStorage;
@@ -2967,52 +3134,52 @@ function k() {
     return null;
   }
 }
-function pt() {
+function wt() {
   try {
     const t = k();
-    return t ? t.getItem(oe) === "active" : !1;
+    return t ? t.getItem(se) === "active" : !1;
   } catch {
     return !1;
   }
 }
-function ht() {
+function Lt() {
   try {
     const t = k();
     if (!t) return;
-    t.setItem(oe, "active");
+    t.setItem(se, "active");
   } catch {
   }
 }
-function Ce() {
+function Ee() {
   try {
     const t = k();
     if (!t) return;
-    t.removeItem(oe);
+    t.removeItem(se);
   } catch {
   }
 }
-function ke(t) {
+function Te(t) {
   try {
     const e = k();
     if (!e) return;
     const n = t.slice(-S.maxPersisted), o = JSON.stringify(n);
-    e.setItem(J, o);
+    e.setItem(X, o);
   } catch (e) {
     if (e instanceof DOMException && e.name === "QuotaExceededError")
       try {
         const n = k();
         if (!n) return;
         const o = t.slice(-Math.floor(S.maxPersisted / 2));
-        n.setItem(J, JSON.stringify(o));
+        n.setItem(X, JSON.stringify(o));
       } catch {
       }
   }
 }
-function $e() {
+function Ie() {
   try {
     const t = k();
     if (!t) return [];
-    const e = t.getItem(J);
+    const e = t.getItem(X);
     if (!e) return [];
     const n = JSON.parse(e);
     return Array.isArray(n) ? n.filter(
@@ -3022,31 +3189,31 @@ function $e() {
     return [];
   }
 }
-function bt() {
+function St() {
   try {
     const t = k();
     if (!t) return;
-    t.removeItem(J);
+    t.removeItem(X);
   } catch {
   }
 }
-function vt(t) {
-  q = t, x && clearTimeout(x), x = setTimeout(() => {
-    ke(q), x = null;
+function Ct(t) {
+  U = t, x && clearTimeout(x), x = setTimeout(() => {
+    Te(U), x = null;
   }, S.debounceMs);
 }
-function X() {
+function Y() {
   try {
-    x && (clearTimeout(x), x = null), q.length > 0 && ke(q), Ce();
+    x && (clearTimeout(x), x = null), U.length > 0 && Te(U), Ee();
   } catch {
   }
 }
-function mt() {
+function kt() {
   if (!R) return;
   const t = f.getLogs();
-  vt([...t]);
+  Ct([...t]);
 }
-function yt(t = {}) {
+function $t(t = {}) {
   if (R) {
     S = { ...S, ...t };
     return;
@@ -3054,43 +3221,43 @@ function yt(t = {}) {
   try {
     if (typeof window > "u")
       return;
-    S = { ...Se, ...t }, re = pt(), ht(), W = f.subscribe(mt), window.addEventListener("beforeunload", X), window.addEventListener("pagehide", X), R = !0;
+    S = { ...$e, ...t }, ie = wt(), Lt(), W = f.subscribe(kt), window.addEventListener("beforeunload", Y), window.addEventListener("pagehide", Y), R = !0;
   } catch {
   }
 }
-function xt() {
+function Et() {
   if (R)
     try {
       if (typeof window > "u")
         return;
-      x && (clearTimeout(x), x = null), W && (W(), W = null), window.removeEventListener("beforeunload", X), window.removeEventListener("pagehide", X), Ce(), R = !1;
+      x && (clearTimeout(x), x = null), W && (W(), W = null), window.removeEventListener("beforeunload", Y), window.removeEventListener("pagehide", Y), Ee(), R = !1;
     } catch {
     }
 }
-function wt() {
-  return re;
+function Tt() {
+  return ie;
 }
-function Lt() {
-  return $e();
+function It() {
+  return Ie();
 }
-function St() {
+function Rt() {
   try {
-    const t = $e();
+    const t = Ie();
     return t.length === 0 ? 0 : (f.importLogs(t), t.length);
   } catch {
     return 0;
   }
 }
-function Ct() {
-  bt(), q = [], re = !1;
+function Dt() {
+  St(), U = [], ie = !1;
 }
-function kt() {
+function _t() {
   return R;
 }
-function $t() {
+function Mt() {
   return { ...S };
 }
-const Ot = {
+const Vt = {
   /**
    * Enable log persistence
    *
@@ -3106,23 +3273,23 @@ const Ot = {
    * });
    * ```
    */
-  enable: yt,
+  enable: $t,
   /**
    * Disable log persistence
    */
-  disable: xt,
+  disable: Et,
   /**
    * Check if persistence is enabled
    */
-  isActive: kt,
+  isActive: _t,
   /**
    * Check if the last session had a crash (unclean shutdown)
    */
-  hadCrash: wt,
+  hadCrash: Tt,
   /**
    * Get persisted logs from previous session (without importing)
    */
-  getPersistedLogs: Lt,
+  getPersistedLogs: It,
   /**
    * Rehydrate logs from storage into the logger
    * Call this at app startup to restore logs from previous session
@@ -3139,16 +3306,16 @@ const Ot = {
    * }
    * ```
    */
-  rehydrate: St,
+  rehydrate: Rt,
   /**
    * Clear all persisted logs
    */
-  clear: Ct,
+  clear: Dt,
   /**
    * Get current configuration
    */
-  getConfig: $t
-}, Ee = {
+  getConfig: Mt
+}, Re = {
   captureFetch: !0,
   captureXHR: !0,
   includeHeaders: !1,
@@ -3158,8 +3325,8 @@ const Ot = {
   ignorePatterns: [],
   context: {}
 };
-let E = null, O = null, T = null, B = !1, v = { ...Ee };
-function Te(t) {
+let E = null, O = null, T = null, B = !1, v = { ...Re };
+function De(t) {
   for (const e of v.ignorePatterns)
     if (typeof e == "string") {
       if (t.includes(e)) return !0;
@@ -3167,7 +3334,7 @@ function Te(t) {
       return !0;
   return !1;
 }
-function Ie(t) {
+function _e(t) {
   try {
     const e = new URL(t, window.location.origin);
     return {
@@ -3179,107 +3346,107 @@ function Ie(t) {
     return { host: "unknown", path: t, full: t };
   }
 }
-function Re(t, e) {
+function Me(t, e) {
   return t.length <= e ? t : t.slice(0, e) + "... (truncated)";
 }
-function Y(t) {
+function K(t) {
   try {
     return JSON.parse(t);
   } catch {
     return t;
   }
 }
-function Et() {
+function Bt() {
   return async function(e, n) {
     const o = typeof e == "string" ? e : e instanceof URL ? e.href : e.url;
-    if (Te(o))
+    if (De(o))
       return E(e, n);
-    const { host: r, path: s } = Ie(o), c = n?.method || "GET", a = `${c} ${s}`, l = f.span(a, {
+    const { host: r, path: s } = _e(o), a = n?.method || "GET", l = `${a} ${s}`, c = f.span(l, {
       ...v.context,
       type: "fetch",
-      method: c,
+      method: a,
       host: r
     });
-    if (l.info(`Request started: ${o}`), v.includeHeaders && n?.headers && l.debug("Request headers", n.headers), v.includeBody && n?.body)
+    if (c.info(`Request started: ${o}`), v.includeHeaders && n?.headers && c.debug("Request headers", n.headers), v.includeBody && n?.body)
       try {
-        const u = typeof n.body == "string" ? Y(n.body) : n.body;
-        l.debug("Request body", u);
+        const u = typeof n.body == "string" ? K(n.body) : n.body;
+        c.debug("Request body", u);
       } catch {
-        l.debug("Request body", "[Unable to parse]");
+        c.debug("Request body", "[Unable to parse]");
       }
     const d = performance.now();
     try {
       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)
+        if (c.info(`Response: ${u.status} ${u.statusText} (${h}ms)`), v.includeResponse)
           try {
-            const K = await u.clone().text(), m = Y(Re(K, v.maxResponseLength));
-            l.debug("Response body", m);
+            const Q = await u.clone().text(), m = K(Me(Q, v.maxResponseLength));
+            c.debug("Response body", m);
           } catch {
-            l.debug("Response body", "[Unable to read]");
+            c.debug("Response body", "[Unable to read]");
           }
-        l.end();
+        c.end();
       } else
-        l.warn(`Response: ${u.status} ${u.statusText} (${h}ms)`), l.fail();
+        c.warn(`Response: ${u.status} ${u.statusText} (${h}ms)`), c.fail();
       return u;
     } catch (u) {
       const h = Math.round(performance.now() - d);
-      throw l.error(`Request failed after ${h}ms`, u), l.fail(), u;
+      throw c.error(`Request failed after ${h}ms`, u), c.fail(), u;
     }
   };
 }
-function Tt() {
+function At() {
   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)
+      ignored: De(s)
     }, 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}`, a = f.span(c, {
+    const { method: n, url: o } = e, { host: r, path: s } = _e(o), a = `${n} ${s}`, l = f.span(a, {
       ...v.context,
       type: "xhr",
       method: n,
       host: r
     });
-    if (a.info(`XHR Request started: ${o}`), v.includeBody && t)
+    if (l.info(`XHR Request started: ${o}`), v.includeBody && t)
       try {
-        const d = typeof t == "string" ? Y(t) : t;
-        a.debug("Request body", d);
+        const d = typeof t == "string" ? K(t) : t;
+        l.debug("Request body", d);
       } catch {
-        a.debug("Request body", "[Unable to parse]");
+        l.debug("Request body", "[Unable to parse]");
       }
-    const l = performance.now();
+    const c = performance.now();
     return this.addEventListener("load", () => {
-      const d = Math.round(performance.now() - l);
+      const d = Math.round(performance.now() - c);
       if (this.status >= 200 && this.status < 400) {
-        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);
+        if (l.info(`Response: ${this.status} ${this.statusText} (${d}ms)`), v.includeResponse && this.responseText) {
+          const u = K(Me(this.responseText, v.maxResponseLength));
+          l.debug("Response body", u);
         }
-        a.end();
+        l.end();
       } else
-        a.warn(`Response: ${this.status} ${this.statusText} (${d}ms)`), a.fail();
+        l.warn(`Response: ${this.status} ${this.statusText} (${d}ms)`), l.fail();
     }), this.addEventListener("error", () => {
-      const d = Math.round(performance.now() - l);
-      a.error(`XHR Request failed after ${d}ms`), a.fail();
+      const d = Math.round(performance.now() - c);
+      l.error(`XHR Request failed after ${d}ms`), l.fail();
     }), this.addEventListener("abort", () => {
-      const d = Math.round(performance.now() - l);
-      a.warn(`XHR Request aborted after ${d}ms`), a.fail();
+      const d = Math.round(performance.now() - c);
+      l.warn(`XHR Request aborted after ${d}ms`), l.fail();
     }), this.addEventListener("timeout", () => {
-      const d = Math.round(performance.now() - l);
-      a.error(`XHR Request timeout after ${d}ms`), a.fail();
+      const d = Math.round(performance.now() - c);
+      l.error(`XHR Request timeout after ${d}ms`), l.fail();
     }), T.call(this, t);
   };
 }
-function It() {
+function Ft() {
   O && (XMLHttpRequest.prototype.open = O, O = null), T && (XMLHttpRequest.prototype.send = T, T = null);
 }
-const Ht = {
+const jt = {
   /**
    * Install network capture hooks
    */
@@ -3287,7 +3454,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, f.debug("[NetworkCapture] Installed", {
+      v = { ...Re, ...t }, v.captureFetch && typeof globalThis.fetch == "function" && (E = globalThis.fetch, globalThis.fetch = Bt()), v.captureXHR && typeof XMLHttpRequest < "u" && At(), B = !0, f.debug("[NetworkCapture] Installed", {
         fetch: v.captureFetch,
         xhr: v.captureXHR
       });
@@ -3302,7 +3469,7 @@ const Ht = {
     try {
       if (!B)
         return;
-      E && (globalThis.fetch = E, E = null), It(), B = !1, f.debug("[NetworkCapture] Uninstalled");
+      E && (globalThis.fetch = E, E = null), Ft(), B = !1, f.debug("[NetworkCapture] Uninstalled");
     } catch (t) {
       console.warn("[NetworkCapture] Uninstall error:", t);
     }
@@ -3325,17 +3492,17 @@ const Ht = {
   addIgnorePattern(t) {
     v.ignorePatterns.push(t);
   }
-}, Rt = {
+}, Ht = {
   debug: "#6e6e6e",
   info: "#3794ff",
   warn: "#cca700",
   error: "#f14c4c"
-}, _t = {
+}, Ot = {
   running: "#3794ff",
   success: "#4caf50",
   error: "#f14c4c"
 };
-class Dt {
+class zt {
   constructor(e) {
     p(this, "container");
     p(this, "config");
@@ -3443,8 +3610,8 @@ class Dt {
       e.addEventListener("click", (n) => {
         const o = n.currentTarget, r = parseInt(o.dataset.window || "60000", 10);
         this.setTimeWindow(r), this.container.querySelectorAll("[data-window]").forEach((s) => {
-          const c = s;
-          c === o ? (c.style.background = "#0e639c", c.style.borderColor = "#0e639c", c.style.color = "white") : (c.style.background = "transparent", c.style.borderColor = "#3c3c3c", c.style.color = "#858585");
+          const a = s;
+          a === o ? (a.style.background = "#0e639c", a.style.borderColor = "#0e639c", a.style.color = "white") : (a.style.background = "transparent", a.style.borderColor = "#3c3c3c", a.style.color = "#858585");
         });
       });
     }), this.canvas && (this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this)), this.canvas.addEventListener("mouseleave", this.handleMouseLeave.bind(this))), this.startRefresh();
@@ -3467,44 +3634,44 @@ 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 = 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);
+    const a = f.getLogs().filter((c) => c.timestamp >= s), l = f.getSpans().filter((c) => c.startTime >= s || c.endTime && c.endTime >= s);
+    this.config.showSpans && this.drawSpans(e, l, n, o, s, r), this.config.showLogs && this.drawLogs(e, a, n, o, s, r);
   }
   drawTimeGrid(e, n, o, r, s) {
-    const c = s - r, a = 6;
+    const a = s - r, l = 6;
     e.strokeStyle = "#333", e.lineWidth = 1, e.font = "10px SF Mono, monospace", e.fillStyle = "#666";
-    for (let l = 0; l <= a; l++) {
-      const d = l / a * n, u = r + c * l / a;
+    for (let c = 0; c <= l; c++) {
+      const d = c / l * n, u = r + a * c / l;
       e.beginPath(), e.moveTo(d, 0), e.lineTo(d, o), e.stroke();
       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 a = c - s, l = 20, d = 4, u = 20, h = n.filter((m) => !m.parentId);
+  drawSpans(e, n, o, r, s, a) {
+    const l = a - s, c = 20, d = 4, u = 20, h = n.filter((m) => !m.parentId);
     let C = u;
-    const K = (m, _, Mt = 0) => {
-      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: l
-      }), _ + l + d;
+    const Q = (m, D, Nt = 0) => {
+      const _ = (m.startTime - s) / l * o, Be = ((m.endTime || a) - s) / l * o, j = Math.max(Be - _, 2), ae = Ot[m.status];
+      e.fillStyle = ae + "40", e.fillRect(_, D, j, c), e.strokeStyle = ae, e.lineWidth = 1, e.strokeRect(_, D, j, c), e.fillStyle = "#ccc", e.font = "10px SF Mono, monospace";
+      const Ae = m.duration ? `${m.name} (${m.duration}ms)` : m.name;
+      return e.fillText(Ae, _ + 4, D + 14, j - 8), this.spanBounds.set(m.id, {
+        x: _,
+        y: D,
+        w: j,
+        h: c
+      }), D + c + d;
     };
     for (const m of h)
-      C = K(m, C);
+      C = Q(m, C);
   }
-  drawLogs(e, n, o, r, s, c) {
-    const a = c - s, l = 8, d = 30;
+  drawLogs(e, n, o, r, s, a) {
+    const l = a - s, c = 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, {
+      const h = (u.timestamp - s) / l * o, C = Ht[u.level];
+      e.fillStyle = C, e.beginPath(), e.moveTo(h, r - d), e.lineTo(h - c / 2, r - d - c), e.lineTo(h + c / 2, r - d - c), e.closePath(), e.fill(), this.logBounds.set(u.id, {
         x: h,
-        y: r - d - l / 2,
-        r: l
+        y: r - d - c / 2,
+        r: c
       });
     }
   }
@@ -3512,8 +3679,8 @@ class Dt {
     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 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) {
+      const a = this.spanBounds.get(s.id);
+      if (a && o >= a.x && o <= a.x + a.w && r >= a.y && r <= a.y + a.h) {
         this.showTooltip(e, `
           <strong>${s.name}</strong><br>
           Status: ${s.status}<br>
@@ -3524,8 +3691,8 @@ class Dt {
       }
     }
     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) {
+      const a = this.logBounds.get(s.id);
+      if (a && Math.sqrt((o - a.x) ** 2 + (r - a.y) ** 2) <= a.r) {
         this.showTooltip(e, `
             <strong>[${s.level.toUpperCase()}]</strong> ${s.message}<br>
             <small>${new Date(s.timestamp).toISOString()}</small>
@@ -3551,21 +3718,21 @@ class Dt {
     this.stopRefresh(), this.container.innerHTML = "";
   }
 }
-function zt(t) {
-  return new Dt(t);
+function Wt(t) {
+  return new zt(t);
 }
-const Nt = "0.1.0";
+const Gt = "0.1.0";
 export {
-  j as DevLoggerUI,
-  At as ErrorCapture,
-  Ot as LogPersistence,
-  Ht as NetworkCapture,
-  Dt as Timeline,
-  Nt as VERSION,
-  ve as computeDiff,
-  ae as createDiffResult,
-  zt as createTimeline,
-  le as formatValue,
-  Ft as hasChanges,
+  F as DevLoggerUI,
+  Ut as ErrorCapture,
+  Vt as LogPersistence,
+  jt as NetworkCapture,
+  zt as Timeline,
+  Gt as VERSION,
+  ye as computeDiff,
+  de as createDiffResult,
+  Wt as createTimeline,
+  ce as formatValue,
+  qt as hasChanges,
   f as logger
 };