mates-devtools 0.1.0-beta.6 → 0.1.0-beta.7

package/dist/mates-devtools.es.js

@@ -1,8 +1,8 @@
-import { keyframes as Ce, globalCSS as Te, event as Me, html as a, nothing as k, repeat as T, atom as qt, effect as Ie, x as Be, render as Jt, isDevToolsInstalled as Le, installDevToolsHooks as Ee, interceptBefore as Ae, interceptAfter as Re, interceptError as ze } from "mates";
-const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
+import { keyframes as Re, globalCSS as ze, event as Pe, html as c, nothing as w, repeat as k, atom as ee, effect as He, x as Fe, matesLogEvent as Oe, render as ne, isDevToolsInstalled as Ne, installDevToolsHooks as De, FetchUtils as je } from "mates";
+const re = "selected", Ve = "selected", We = Re("mates-dt-flash", {
   "0%": { background: "var(--dt-flash-bg)", color: "#fff" },
   "100%": { background: "transparent", color: "var(--dt-text-muted)" }
-}), ot = {
+}), st = {
   "&::-webkit-scrollbar": { width: "6px" },
   "&::-webkit-scrollbar-track": { background: "transparent" },
   "&::-webkit-scrollbar-thumb": {
@@ -12,7 +12,7 @@ const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
   "&::-webkit-scrollbar-thumb:hover": {
     background: "var(--dt-scrollbar-hover)"
   }
-}, r = Te({
+}, r = ze({
   // ─── Floating Action Button ───────────────────────────────────────────────
   fab: {
     position: "fixed",
@@ -230,7 +230,7 @@ const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
   content: {
     flex: "1",
     overflowY: "auto",
-    ...ot
+    ...st
   },
   componentSearch: {
     width: "100%",
@@ -383,7 +383,7 @@ const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
     minWidth: "0",
     overflowY: "auto",
     padding: "10px",
-    ...ot
+    ...st
   },
   inspectorBreadcrumb: {
     display: "flex",
@@ -600,7 +600,7 @@ const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
     transition: "background 0.1s, color 0.1s"
   },
   highlightFlash: {
-    animation: `${He} 0.6s ease forwards`
+    animation: `${We} 0.6s ease forwards`
   },
   // ─── Logs tab ─────────────────────────────────────────────────────────────
   logsPanel: {
@@ -656,7 +656,7 @@ const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
     flex: "1",
     overflowY: "auto",
     padding: "4px 0",
-    ...ot
+    ...st
   },
   logEntry: {
     display: "flex",
@@ -743,7 +743,7 @@ const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
   perfContent: {
     flex: "1",
     overflowY: "auto",
-    ...ot
+    ...st
   },
   perfTable: {
     width: "100%",
@@ -808,56 +808,56 @@ const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
     color: "var(--dt-text-dim)",
     marginLeft: "5px"
   }
-}), At = /* @__PURE__ */ new Set(), lt = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), bt = Me("devtools");
-function Fe(t, e) {
+}), Ft = /* @__PURE__ */ new Set(), ft = /* @__PURE__ */ new WeakMap(), gt = /* @__PURE__ */ new WeakMap(), $t = Pe("devtools");
+function Ge(t, e) {
   try {
-    At.add(t);
-    let n = lt.get(e);
-    n || (n = /* @__PURE__ */ new Set(), lt.set(e, n)), n.add(t), dt.set(t, 1), bt.trigger({ type: "mount", component: t });
+    Ft.add(t);
+    let n = ft.get(e);
+    n || (n = /* @__PURE__ */ new Set(), ft.set(e, n)), n.add(t), gt.set(t, 1), $t.trigger({ type: "mount", component: t });
   } catch {
   }
 }
-function Oe(t, e) {
+function Ue(t, e) {
   try {
-    if (At.delete(t), e) {
-      const n = lt.get(e);
+    if (Ft.delete(t), e) {
+      const n = ft.get(e);
       n && n.delete(t);
     }
-    bt.trigger({ type: "unmount", component: t });
+    $t.trigger({ type: "unmount", component: t });
   } catch {
   }
 }
-function De(t) {
+function Ye(t) {
   try {
-    const e = dt.get(t) ?? 0;
-    dt.set(t, e + 1), bt.trigger({ type: "render", component: t });
+    const e = gt.get(t) ?? 0;
+    gt.set(t, e + 1), $t.trigger({ type: "render", component: t });
   } catch {
   }
 }
-function xt(t) {
+function _t(t) {
   try {
-    return dt.get(t) ?? 0;
+    return gt.get(t) ?? 0;
   } catch {
   }
   return 0;
 }
-function Z(t) {
+function nt(t) {
   try {
     return t._depth ?? 0;
   } catch {
   }
   return 0;
 }
-function Tt(t) {
+function Et(t) {
   try {
     return t._parentComponent ?? null;
   } catch {
   }
   return null;
 }
-function Qt() {
+function oe() {
   try {
-    return Array.from(At).filter((t) => {
+    return Array.from(Ft).filter((t) => {
       const e = t._view || t.oldView;
       return !e?.__devtools__ && !e?.skipDevToolsRender;
     });
@@ -865,36 +865,36 @@ function Qt() {
   }
   return [];
 }
-function $r(t) {
+function Or(t) {
   try {
-    const e = lt.get(t);
+    const e = ft.get(t);
     return e ? Array.from(e) : [];
   } catch {
   }
   return [];
 }
-function tt(t) {
+function rt(t) {
   try {
     return (t._view || t.oldView)?.name || "Anonymous";
   } catch {
   }
   return "";
 }
-function Ne(t) {
+function Xe(t) {
   try {
     return t._view || t.oldView || null;
   } catch {
   }
   return null;
 }
-function je() {
+function qe() {
   try {
-    const t = Qt(), e = /* @__PURE__ */ new Map();
+    const t = oe(), e = /* @__PURE__ */ new Map();
     for (const o of t) {
-      const i = Ne(o);
+      const i = Xe(o);
       if (!i) continue;
-      let c = e.get(i);
-      c || (c = [], e.set(i, c)), c.push(o);
+      let s = e.get(i);
+      s || (s = [], e.set(i, s)), s.push(o);
     }
     const n = [];
     for (const [o, i] of e)
@@ -905,11 +905,11 @@ function je() {
       });
     try {
       n.sort((o, i) => {
-        const c = (s) => s.instances.reduce(
-          (d, l) => Math.min(d, Z(l)),
+        const s = (a) => a.instances.reduce(
+          (d, l) => Math.min(d, nt(l)),
           1 / 0
         );
-        return c(o) - c(i);
+        return s(o) - s(i);
       });
     } catch {
     }
@@ -933,62 +933,62 @@ const f = {
   preview: "color:#888;font-style:italic;",
   children: "margin-left:14px;padding-left:6px;border-left:1px solid #333;",
   badge: "color:#777;font-size:11px;margin-left:4px;background:#2a2a2a;padding:0 4px;border-radius:3px;"
-}, jt = /* @__PURE__ */ new WeakMap();
-let Zt = null;
-function te(t) {
+}, Yt = /* @__PURE__ */ new WeakMap();
+let ie = null;
+function ce(t) {
   try {
-    Zt = t;
+    ie = t;
   } catch {
   }
 }
-function ee(t) {
+function se(t) {
   try {
-    let e = jt.get(t);
-    return e || (e = /* @__PURE__ */ new Set(), jt.set(t, e)), e;
+    let e = Yt.get(t);
+    return e || (e = /* @__PURE__ */ new Set(), Yt.set(t, e)), e;
   } catch {
     return /* @__PURE__ */ new Set();
   }
 }
-function Ve(t, e) {
+function Je(t, e) {
   try {
-    return ee(t).has(e);
+    return se(t).has(e);
   } catch {
     return !1;
   }
 }
-function We(t, e) {
+function Ke(t, e) {
   try {
-    const n = ee(t);
+    const n = se(t);
     n.has(e) ? n.delete(e) : n.add(e);
     try {
-      Zt?.();
+      ie?.();
     } catch {
     }
   } catch {
   }
 }
-function Ge(t) {
+function Qe(t) {
   try {
     return t == null ? !1 : typeof t == "object";
   } catch {
     return !1;
   }
 }
-function vt(t) {
+function wt(t) {
   try {
     return t === null ? "null" : t === void 0 ? "undefined" : Array.isArray(t) ? "array" : t instanceof Date ? "date" : t instanceof RegExp ? "regexp" : t instanceof Map ? "map" : t instanceof Set ? "set" : typeof t;
   } catch {
     return "";
   }
 }
-function Vt(t, e = 60) {
+function Xt(t, e = 60) {
   try {
-    const n = vt(t);
+    const n = wt(t);
     if (n === "array") {
       const o = t;
       if (o.length === 0) return "[]";
-      const i = o.slice(0, 5).map((s) => Wt(s)).join(", "), c = o.length > 5 ? ", …" : "";
-      return `[${i}${c}]  (${o.length})`;
+      const i = o.slice(0, 5).map((a) => qt(a)).join(", "), s = o.length > 5 ? ", …" : "";
+      return `[${i}${s}]  (${o.length})`;
     }
     if (n === "map")
       return `Map(${t.size})`;
@@ -1001,7 +1001,7 @@ function Vt(t, e = 60) {
     if (n === "object") {
       const o = t, i = Object.keys(o);
       if (i.length === 0) return "{}";
-      const c = i.slice(0, 4).map((l) => `${l}: ${Wt(o[l])}`).join(", "), s = i.length > 4 ? ", …" : "", d = `{${c}${s}}`;
+      const s = i.slice(0, 4).map((l) => `${l}: ${qt(o[l])}`).join(", "), a = i.length > 4 ? ", …" : "", d = `{${s}${a}}`;
       return d.length > e ? d.slice(0, e - 1) + "…}" : d;
     }
     return String(t);
@@ -1009,9 +1009,9 @@ function Vt(t, e = 60) {
     return "";
   }
 }
-function Wt(t) {
+function qt(t) {
   try {
-    switch (vt(t)) {
+    switch (wt(t)) {
       case "string": {
         const n = t;
         return n.length > 30 ? `"${n.slice(0, 27)}…"` : `"${n}"`;
@@ -1044,39 +1044,39 @@ function Wt(t) {
     return "";
   }
 }
-function Ye(t) {
+function Ze(t) {
   try {
-    switch (vt(t)) {
+    switch (wt(t)) {
       case "string":
-        return a`<span style="${f.string}">"${String(t)}"</span>`;
+        return c`<span style="${f.string}">"${String(t)}"</span>`;
       case "number":
-        return a`<span style="${f.number}">${String(t)}</span>`;
+        return c`<span style="${f.number}">${String(t)}</span>`;
       case "boolean":
-        return a`<span style="${f.boolean}">${String(t)}</span>`;
+        return c`<span style="${f.boolean}">${String(t)}</span>`;
       case "null":
-        return a`<span style="${f.null}">null</span>`;
+        return c`<span style="${f.null}">null</span>`;
       case "undefined":
-        return a`<span style="${f.undefined}">undefined</span>`;
+        return c`<span style="${f.undefined}">undefined</span>`;
       case "function":
-        return a`<span style="${f.function}"
+        return c`<span style="${f.function}"
           >ƒ ${t.name || "anonymous"}()</span
         >`;
       case "symbol":
-        return a`<span style="${f.symbol}">${String(t)}</span>`;
+        return c`<span style="${f.symbol}">${String(t)}</span>`;
       case "date":
-        return a`<span style="${f.string}"
+        return c`<span style="${f.string}"
           >${t.toISOString()}</span
         >`;
       case "regexp":
-        return a`<span style="${f.string}">${String(t)}</span>`;
+        return c`<span style="${f.string}">${String(t)}</span>`;
       default:
-        return a`<span style="${f.preview}">${String(t)}</span>`;
+        return c`<span style="${f.preview}">${String(t)}</span>`;
     }
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Ue(t) {
+function tn(t) {
   try {
     if (t instanceof Map)
       return Array.from(t.entries()).map(([e, n]) => ({
@@ -1125,49 +1125,49 @@ function Ue(t) {
     return [];
   }
 }
-function O(t, e, n, o = "root", i = 0) {
+function N(t, e, n, o = "root", i = 0) {
   try {
     if (i > 15)
-      return a`
+      return c`
         <div style="${f.row}">
-          ${e != null ? a`<span style="${f.key}">${e}</span
-                ><span style="${f.colon}">:</span>` : k}
+          ${e != null ? c`<span style="${f.key}">${e}</span
+                ><span style="${f.colon}">:</span>` : w}
           <span style="${f.preview}">[max depth]</span>
         </div>
       `;
-    const c = Ge(n), s = c && Ve(t, o);
-    if (!c)
-      return a`
+    const s = Qe(n), a = s && Je(t, o);
+    if (!s)
+      return c`
         <div style="${f.row}">
           <span style="${f.toggle}"></span>
-          ${e != null ? a`<span style="${f.key}">${e}</span
-                ><span style="${f.colon}">:</span>` : k}
-          ${Ye(n)}
+          ${e != null ? c`<span style="${f.key}">${e}</span
+                ><span style="${f.colon}">:</span>` : w}
+          ${Ze(n)}
         </div>
       `;
-    const d = s ? Ue(n) : [], l = vt(n);
-    return a`
+    const d = a ? tn(n) : [], l = wt(n);
+    return c`
       <div>
         <div
           style="${f.row}cursor:pointer;user-select:none;"
           @click=${(u) => {
       try {
-        u.stopPropagation(), We(t, o);
+        u.stopPropagation(), Ke(t, o);
       } catch {
       }
     }}
         >
-          <span style="${f.toggle}">${s ? "▼" : "▶"}</span>
-          ${e != null ? a`<span style="${f.key}">${e}</span
-                ><span style="${f.colon}">:</span>` : k}
-          ${s ? a`<span style="${f.preview}"
-                >${l === "array" ? `Array(${n.length})` : l === "object" ? "{" : Vt(n)}</span
-              >` : a`<span style="${f.preview}">${Vt(n)}</span>`}
+          <span style="${f.toggle}">${a ? "▼" : "▶"}</span>
+          ${e != null ? c`<span style="${f.key}">${e}</span
+                ><span style="${f.colon}">:</span>` : w}
+          ${a ? c`<span style="${f.preview}"
+                >${l === "array" ? `Array(${n.length})` : l === "object" ? "{" : Xt(n)}</span
+              >` : c`<span style="${f.preview}">${Xt(n)}</span>`}
         </div>
-        ${s ? a`
+        ${a ? c`
               <div style="${f.children}">
                 ${d.map(
-      (u) => O(
+      (u) => N(
         t,
         u.key,
         u.value,
@@ -1175,58 +1175,58 @@ function O(t, e, n, o = "root", i = 0) {
         i + 1
       )
     )}
-                ${d.length === 0 ? a`<div style="${f.row}">
+                ${d.length === 0 ? c`<div style="${f.row}">
                       <span style="${f.preview}">(empty)</span>
-                    </div>` : k}
+                    </div>` : w}
               </div>
-              ${l === "object" && s ? a`<div style="${f.row};margin-left:14px;">
+              ${l === "object" && a ? c`<div style="${f.row};margin-left:14px;">
                     <span style="${f.preview}">}</span>
-                  </div>` : k}
-            ` : k}
+                  </div>` : w}
+            ` : w}
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function _r(t, e, n = "root") {
+function Nr(t, e, n = "root") {
   try {
     const o = Object.keys(e);
-    return o.length === 0 ? a`<div style="color:#777;font-size:13px;padding:2px 0;">
+    return o.length === 0 ? c`<div style="color:#777;font-size:13px;padding:2px 0;">
         No data
-      </div>` : a`
+      </div>` : c`
       ${o.map(
-      (i) => O(t, i, e[i], `${n}.${i}`, 0)
+      (i) => N(t, i, e[i], `${n}.${i}`, 0)
     )}
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Xe(t) {
+function en(t) {
   try {
     const e = Object.keys(t);
-    return e.length === 0 ? a`<div style="color: #777; font-size: 13px;">No props</div>` : a`
-      ${T(
+    return e.length === 0 ? c`<div style="color: #777; font-size: 13px;">No props</div>` : c`
+      ${k(
       e,
       (n) => n,
-      (n) => O(t, n, t[n], `props.${n}`, 0)
+      (n) => N(t, n, t[n], `props.${n}`, 0)
     )}
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function qe(t) {
+function nn(t) {
   try {
-    return !t || t.size === 0 ? a`<div style="color: #777; font-size: 13px;">No scopes</div>` : a`
+    return !t || t.size === 0 ? c`<div style="color: #777; font-size: 13px;">No scopes</div>` : c`
       ${[...t?.entries() || []].map(
       ([e, n]) => {
         try {
-          const o = e.name || "AnonymousScope", i = {}, c = /* @__PURE__ */ new Set();
+          const o = e.name || "AnonymousScope", i = {}, s = /* @__PURE__ */ new Set();
           for (const l of Object.keys(n))
             if (!(l === "__isScope___" || l === "reset")) {
-              c.add(l);
+              s.add(l);
               try {
                 const u = n[l];
                 u && typeof u == "function" && u.__isAtom___ ? i[`${l} (atom)`] = u.get() : i[l] = u;
@@ -1234,13 +1234,13 @@ function qe(t) {
                 i[l] = "[error reading]";
               }
             }
-          let s = Object.getPrototypeOf(n);
-          for (; s && s !== Object.prototype; ) {
-            for (const l of Object.getOwnPropertyNames(s)) {
-              if (c.has(l) || l === "constructor" || l === "__isScope___" || l === "reset")
+          let a = Object.getPrototypeOf(n);
+          for (; a && a !== Object.prototype; ) {
+            for (const l of Object.getOwnPropertyNames(a)) {
+              if (s.has(l) || l === "constructor" || l === "__isScope___" || l === "reset")
                 continue;
-              if (Object.getOwnPropertyDescriptor(s, l)?.get) {
-                c.add(l);
+              if (Object.getOwnPropertyDescriptor(a, l)?.get) {
+                s.add(l);
                 try {
                   i[`${l} (get)`] = n[l];
                 } catch {
@@ -1248,10 +1248,10 @@ function qe(t) {
                 }
               }
             }
-            s = Object.getPrototypeOf(s);
+            a = Object.getPrototypeOf(a);
           }
           const d = n;
-          return a`
+          return c`
               <div style="margin-bottom:6px;">
                 <div
                   style="color:#4ec9b0;font-weight:500;font-size:13px;margin-bottom:2px;font-family:'SF Mono',Monaco,Consolas,monospace;"
@@ -1259,11 +1259,11 @@ function qe(t) {
                   ${o}
                 </div>
                 <div style="margin-left:4px;">
-                  ${Object.keys(i).length === 0 ? a`<div style="color:#666;font-size:13px;">
+                  ${Object.keys(i).length === 0 ? c`<div style="color:#666;font-size:13px;">
                         (empty scope)
-                      </div>` : a`
+                      </div>` : c`
                         ${Object.keys(i).map(
-            (l) => O(
+            (l) => N(
               d,
               l,
               i[l],
@@ -1276,16 +1276,16 @@ function qe(t) {
               </div>
             `;
         } catch {
-          return a``;
+          return c``;
         }
       }
     )}
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Je(t) {
+function rn(t) {
   try {
     if (!t) return [];
     const e = [];
@@ -1304,26 +1304,26 @@ function Je(t) {
     return [];
   }
 }
-function Ke(t) {
+function on(t) {
   try {
-    const e = Je(t);
-    return e.length === 0 ? a`<div style="color: #777; font-size: 13px;">No atoms</div>` : a`
-      ${T(
+    const e = rn(t);
+    return e.length === 0 ? c`<div style="color: #777; font-size: 13px;">No atoms</div>` : c`
+      ${k(
       e,
       (n) => n.id,
       (n, o) => {
-        const i = e.length === 1 ? "atom" : `atom#${o + 1}`, c = typeof n.value == "object" && n.value !== null ? n.value : n.key;
-        return O(c, i, n.value, `atom_${n.id}`, 0);
+        const i = e.length === 1 ? "atom" : `atom#${o + 1}`, s = typeof n.value == "object" && n.value !== null ? n.value : n.key;
+        return N(s, i, n.value, `atom_${n.id}`, 0);
       }
     )}
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Qe(t) {
+function cn(t) {
   try {
-    return !t || t.length === 0 ? a`<div style="color: #777; font-size: 13px;">No state</div>` : a`
+    return !t || t.length === 0 ? c`<div style="color: #777; font-size: 13px;">No state</div>` : c`
       ${t.map((e, n) => {
       const o = t.length === 1 ? "state" : `state#${n + 1}`;
       let i;
@@ -1332,14 +1332,14 @@ function Qe(t) {
       } catch {
         i = e.state;
       }
-      return O(i, o, i, `useState_${n}`, 0);
+      return N(i, o, i, `useState_${n}`, 0);
     })}
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Ze(t) {
+function sn(t) {
   try {
     const e = {
       onMount: 0,
@@ -1421,52 +1421,52 @@ function Ze(t) {
     };
   }
 }
-function tn(t, e) {
+function an(t, e) {
   try {
-    return a`
+    return c`
       <span class="${r.hookPill}">
         <span class="${r.hookPillLabel}">${t}</span>
         <span class="${r.hookPillCount}">${e}</span>
       </span>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function ne(t) {
+function ae(t) {
   try {
-    const e = Ze(t), n = [];
-    return e.onMount > 0 && n.push({ label: "onMount", count: e.onMount }), e.onCleanup > 0 && n.push({ label: "onCleanup", count: e.onCleanup }), e.onPaint > 0 && n.push({ label: "onPaint", count: e.onPaint }), e.onAllMount > 0 && n.push({ label: "onAllMount", count: e.onAllMount }), e.effects > 0 && n.push({ label: "effect", count: e.effects }), e.on > 0 && n.push({ label: "on", count: e.on }), e.setters > 0 && n.push({ label: "setter", count: e.setters }), e.useState > 0 && n.push({ label: "useState", count: e.useState }), e.atoms > 0 && n.push({ label: "atom", count: e.atoms }), e.events > 0 && n.push({ label: "event", count: e.events }), e.channels > 0 && n.push({ label: "channel", count: e.channels }), n.length === 0 ? k : a`
+    const e = sn(t), n = [];
+    return e.onMount > 0 && n.push({ label: "onMount", count: e.onMount }), e.onCleanup > 0 && n.push({ label: "onCleanup", count: e.onCleanup }), e.onPaint > 0 && n.push({ label: "onPaint", count: e.onPaint }), e.onAllMount > 0 && n.push({ label: "onAllMount", count: e.onAllMount }), e.effects > 0 && n.push({ label: "effect", count: e.effects }), e.on > 0 && n.push({ label: "on", count: e.on }), e.setters > 0 && n.push({ label: "setter", count: e.setters }), e.useState > 0 && n.push({ label: "useState", count: e.useState }), e.atoms > 0 && n.push({ label: "atom", count: e.atoms }), e.events > 0 && n.push({ label: "event", count: e.events }), e.channels > 0 && n.push({ label: "channel", count: e.channels }), n.length === 0 ? w : c`
       <div class="${r.hooksSummary}">
-        ${n.map((o) => tn(o.label, o.count))}
+        ${n.map((o) => an(o.label, o.count))}
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function en(t, e) {
+function ln(t, e) {
   try {
-    t.stopPropagation(), at(e);
+    t.stopPropagation(), ut(e);
   } catch {
   }
 }
-function nn(t) {
+function dn(t) {
   try {
     const e = [];
-    let n = Tt(t);
+    let n = Et(t);
     for (; n; )
-      e.push(tt(n)), n = Tt(n);
+      e.push(rt(n)), n = Et(n);
     return e.reverse(), e;
   } catch {
     return [];
   }
 }
-function re(t) {
+function le(t) {
   try {
-    const e = nn(t), n = tt(t);
+    const e = dn(t), n = rt(t);
     if (e.length === 0)
-      return a`
+      return c`
         <div class="${r.inspectorBreadcrumb}">
           <span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
             >${n}</span
@@ -1476,57 +1476,57 @@ function re(t) {
     const o = [];
     for (let i = 0; i < e.length; i++)
       i > 0 && o.push(
-        a`<span class="${r.breadcrumbSeparator}">›</span>`
+        c`<span class="${r.breadcrumbSeparator}">›</span>`
       ), o.push(
-        a`<span class="${r.breadcrumbSegment}">${e[i]}</span>`
+        c`<span class="${r.breadcrumbSegment}">${e[i]}</span>`
       );
-    return o.push(a`<span class="${r.breadcrumbSeparator}">›</span>`), o.push(
-      a`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
+    return o.push(c`<span class="${r.breadcrumbSeparator}">›</span>`), o.push(
+      c`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
         >${n}</span
       >`
-    ), a` <div class="${r.inspectorBreadcrumb}">${o}</div> `;
+    ), c` <div class="${r.inspectorBreadcrumb}">${o}</div> `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function oe(t) {
+function de(t) {
   try {
-    return a`
+    return c`
       <div class="${r.instanceDetails}">
         <div class="${r.sectionHeader}">Props</div>
-        ${Xe(t._props || {})}
+        ${en(t._props || {})}
 
         <div class="${r.sectionHeader}">State</div>
-        ${Qe(t._useStates)}
+        ${cn(t._useStates)}
 
         <div class="${r.sectionHeader}">Atoms</div>
-        ${Ke(t.cleanups)}
+        ${on(t.cleanups)}
 
         <div class="${r.sectionHeader}">Scopes</div>
-        ${qe(t.scopes)}
+        ${nn(t.scopes)}
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Gt() {
+function Jt() {
   try {
-    return a`
+    return c`
       <div class="${r.inspector}">
         <div class="${r.empty}">Select a component to inspect</div>
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Yt(t) {
+function Kt(t) {
   try {
-    const e = tt(t), n = t.componentId, o = Z(t), i = xt(t);
-    return a`
+    const e = rt(t), n = t.componentId, o = nt(t), i = _t(t);
+    return c`
       <div class="${r.inspector}">
-        ${re(t)}
+        ${le(t)}
         <div class="${r.inspectorTitle}">
           <span>${e}</span>
           <span class="${r.instanceCount}">
@@ -1535,9 +1535,9 @@ function Yt(t) {
           <button
             class="${r.highlightBtn}"
             style="opacity: 1;"
-            @click=${(c) => {
+            @click=${(s) => {
       try {
-        en(c, t);
+        ln(s, t);
       } catch {
       }
     }}
@@ -1560,35 +1560,35 @@ function Yt(t) {
           </button>
         </div>
 
-        ${ne(t)} ${oe(t)}
+        ${ae(t)} ${de(t)}
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function rn(t, e, n, o) {
+function un(t, e, n, o) {
   try {
-    const { name: i, instances: c } = t;
-    return a`
+    const { name: i, instances: s } = t;
+    return c`
       <div class="${r.inspector}">
         <div class="${r.inspectorTitle}">
           <span>${i}</span>
           <span class="${r.instanceCount}">
-            ${c.length} instance${c.length !== 1 ? "s" : ""}
+            ${s.length} instance${s.length !== 1 ? "s" : ""}
           </span>
         </div>
 
         <ul class="${r.instanceList}">
-          ${T(
-      c,
-      (s) => s.componentId,
-      (s) => {
-        const d = s.componentId, l = Z(s), u = xt(s), y = e === d;
-        return a`
+          ${k(
+      s,
+      (a) => a.componentId,
+      (a) => {
+        const d = a.componentId, l = nt(a), u = _t(a), y = e === d;
+        return c`
                 <li class="${r.instanceGroup}">
                   <div
-                    class="${r.instanceItem} ${y ? Pe : ""}"
+                    class="${r.instanceItem} ${y ? Ve : ""}"
                     @click=${() => {
           try {
             n(d);
@@ -1609,9 +1609,9 @@ function rn(t, e, n, o) {
                     >
                     <button
                       class="${r.componentHighlightBtn}"
-                      @click=${(g) => {
+                      @click=${(h) => {
           try {
-            g.stopPropagation(), o(s);
+            h.stopPropagation(), o(a);
           } catch {
           }
         }}
@@ -1633,10 +1633,10 @@ function rn(t, e, n, o) {
                       </svg>
                     </button>
                   </div>
-                  ${y ? a`
-                        ${re(s)} ${ne(s)}
-                        ${oe(s)}
-                      ` : k}
+                  ${y ? c`
+                        ${le(a)} ${ae(a)}
+                        ${de(a)}
+                      ` : w}
                 </li>
               `;
       }
@@ -1645,138 +1645,138 @@ function rn(t, e, n, o) {
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Ut(t) {
+function Qt(t) {
   try {
     if ("selectedComponent" in t && t.selectedComponent !== void 0)
-      return t.selectedComponent ? Yt(t.selectedComponent) : Gt();
+      return t.selectedComponent ? Kt(t.selectedComponent) : Jt();
     const { selectedGroup: e, selectedInstanceId: n, onSelectInstance: o, onHighlight: i } = t;
-    return e ? e.instances.length === 1 ? Yt(e.instances[0]) : rn(
+    return e ? e.instances.length === 1 ? Kt(e.instances[0]) : un(
       e,
       n,
       o,
       i
-    ) : Gt();
+    ) : Jt();
   } catch {
-    return a``;
+    return c``;
   }
 }
 const I = /* @__PURE__ */ new Set();
-let V = null, W = null, G = null, Y = null, ut = !1, pt = !1;
-const ft = qt(0);
-ft.skipDevToolsLog = !0;
+let W = null, G = null, U = null, Y = null, ht = !1, mt = !1;
+const yt = ee(0);
+yt.skipDevToolsLog = !0;
 function A() {
   try {
-    ft.set(I.size);
+    yt.set(I.size);
   } catch {
   }
 }
-function U(t) {
-  pt = !0;
+function X(t) {
+  mt = !0;
   try {
     return t();
   } finally {
-    pt = !1;
+    mt = !1;
   }
 }
-function on() {
+function pn() {
   try {
-    if (ut) return;
-    ut = !0, V = window.setTimeout, W = window.setInterval, G = window.clearTimeout, Y = window.clearInterval;
-    const t = V, e = W, n = G, o = Y;
-    window.setTimeout = function(c, s, ...d) {
+    if (ht) return;
+    ht = !0, W = window.setTimeout, G = window.setInterval, U = window.clearTimeout, Y = window.clearInterval;
+    const t = W, e = G, n = U, o = Y;
+    window.setTimeout = function(s, a, ...d) {
       let l;
       try {
-        if (typeof c != "function")
-          return l = t(c, s, ...d), l;
-        const u = c;
-        l = t(function(...g) {
+        if (typeof s != "function")
+          return l = t(s, a, ...d), l;
+        const u = s;
+        l = t(function(...h) {
           try {
-            return I.delete(l) && A(), u.apply(this, g.length ? g : d);
+            return I.delete(l) && A(), u.apply(this, h.length ? h : d);
           } catch {
           }
-        }, s, ...d), pt || (I.add(l), A());
+        }, a, ...d), mt || (I.add(l), A());
       } catch {
-        l = t(c, s, ...d);
+        l = t(s, a, ...d);
       }
       return l;
-    }, window.setInterval = function(c, s, ...d) {
+    }, window.setInterval = function(s, a, ...d) {
       let l;
       try {
-        if (typeof c != "function")
-          return l = e(c, s, ...d), l;
-        const u = c;
-        l = e(function(...g) {
+        if (typeof s != "function")
+          return l = e(s, a, ...d), l;
+        const u = s;
+        l = e(function(...h) {
           try {
-            return u.apply(this, g.length ? g : d);
+            return u.apply(this, h.length ? h : d);
           } catch {
           }
-        }, s, ...d), pt || (I.add(l), A());
+        }, a, ...d), mt || (I.add(l), A());
       } catch {
-        l = e(c, s, ...d);
+        l = e(s, a, ...d);
       }
       return l;
-    }, window.clearTimeout = function(c) {
+    }, window.clearTimeout = function(s) {
       try {
-        c !== void 0 && I.delete(c) && A();
+        s !== void 0 && I.delete(s) && A();
       } catch {
       }
-      n(c);
-    }, window.clearInterval = function(c) {
+      n(s);
+    }, window.clearInterval = function(s) {
       try {
-        c !== void 0 && I.delete(c) && A();
+        s !== void 0 && I.delete(s) && A();
       } catch {
       }
-      o(c);
+      o(s);
     };
   } catch {
   }
 }
-function cn() {
+function fn() {
   try {
-    if (!ut) return;
-    ut = !1, V && (window.setTimeout = V), W && (window.setInterval = W), G && (window.clearTimeout = G), Y && (window.clearInterval = Y), V = null, W = null, G = null, Y = null, I.clear(), A();
+    if (!ht) return;
+    ht = !1, W && (window.setTimeout = W), G && (window.setInterval = G), U && (window.clearTimeout = U), Y && (window.clearInterval = Y), W = null, G = null, U = null, Y = null, I.clear(), A();
   } catch {
   }
 }
-const wt = /* @__PURE__ */ new WeakMap();
-let an = 0;
-function sn(t) {
-  return wt.has(t) || wt.set(t, `mdt-hl-${++an}`), wt.get(t);
+const Tt = /* @__PURE__ */ new WeakMap();
+let gn = 0;
+function hn(t) {
+  return Tt.has(t) || Tt.set(t, `mdt-hl-${++gn}`), Tt.get(t);
 }
-function ie(t, e, n) {
+function ue(t, e, n) {
   try {
     const o = n.get(e), i = o !== void 0 && o !== t;
     n.set(e, t);
-    const c = sn(e);
-    return i && U(
+    const s = hn(e);
+    return i && X(
       () => setTimeout(() => {
         try {
-          const s = document.getElementById(c);
-          if (!s) return;
-          s.classList.remove("mdt-highlight-flash"), s.offsetWidth, s.classList.add("mdt-highlight-flash"), setTimeout(() => {
+          const a = document.getElementById(s);
+          if (!a) return;
+          a.classList.remove("mdt-highlight-flash"), a.offsetWidth, a.classList.add("mdt-highlight-flash"), setTimeout(() => {
             try {
-              s.classList.remove("mdt-highlight-flash");
+              a.classList.remove("mdt-highlight-flash");
             } catch {
             }
           }, 600);
         } catch {
         }
       }, 0)
-    ), a`<span id="${c}" class="mdt-highlight">${t}</span>`;
+    ), c`<span id="${s}" class="mdt-highlight">${t}</span>`;
   } catch {
-    return a``;
+    return c``;
   }
 }
-const ln = /* @__PURE__ */ new WeakMap();
-let kt = "";
-function dn(t) {
+const mn = /* @__PURE__ */ new WeakMap();
+let Mt = "";
+function yn(t) {
   try {
     let e = 0;
     for (const n of t.instances) {
-      const o = xt(n);
+      const o = _t(n);
       o > e && (e = o);
     }
     return e;
@@ -1784,11 +1784,11 @@ function dn(t) {
     return 0;
   }
 }
-function St(t) {
+function It(t) {
   try {
     let e = 1 / 0;
     for (const n of t.instances) {
-      const o = Z(n);
+      const o = nt(n);
       o < e && (e = o);
     }
     return e === 1 / 0 ? 0 : e;
@@ -1796,7 +1796,7 @@ function St(t) {
     return 0;
   }
 }
-function un({
+function bn({
   groups: t,
   selectedViewFn: e,
   onSelectGroup: n,
@@ -1804,38 +1804,38 @@ function un({
   renderCallback: i
 }) {
   try {
-    const c = kt.trim().toLowerCase(), d = [...c ? t.filter((u) => u.name.toLowerCase().includes(c)) : t].sort((u, y) => {
-      const g = St(u), b = St(y);
-      return g - b || u.name.localeCompare(y.name);
+    const s = Mt.trim().toLowerCase(), d = [...s ? t.filter((u) => u.name.toLowerCase().includes(s)) : t].sort((u, y) => {
+      const h = It(u), b = It(y);
+      return h - b || u.name.localeCompare(y.name);
     }), l = (u) => {
       try {
-        kt = u.target.value, i();
+        Mt = u.target.value, i();
       } catch {
       }
     };
-    return a`
+    return c`
       <div class="${r.content}">
         <div style="padding: 0 0 6px 0; flex-shrink: 0;">
           <input
             class="${r.componentSearch}"
             type="text"
             placeholder="Search components…"
-            .value=${kt}
+            .value=${Mt}
             @input=${l}
           />
         </div>
-        ${d.length === 0 ? a`<div class="${r.empty}">
-              ${c ? "No matching components" : "No components mounted"}
-            </div>` : a`
+        ${d.length === 0 ? c`<div class="${r.empty}">
+              ${s ? "No matching components" : "No components mounted"}
+            </div>` : c`
               <ul class="${r.componentList}">
-                ${T(
+                ${k(
       d,
       (u) => u.viewFn,
       (u) => {
-        const y = dn(u), g = e === u.viewFn, b = St(u), rt = u.instances.length, Dt = u.instances[0];
-        return a`
+        const y = yn(u), h = e === u.viewFn, b = It(u), ct = u.instances.length, Gt = u.instances[0];
+        return c`
                       <li
-                        class="${r.componentItem} ${g ? Kt : ""}"
+                        class="${r.componentItem} ${h ? re : ""}"
                         @click=${() => {
           try {
             n(u.viewFn);
@@ -1843,27 +1843,27 @@ function un({
           }
         }}
                       >
-                        ${ie(
+                        ${ue(
           y,
-          Dt,
-          ln
+          Gt,
+          mn
         )}
                         <span class="${r.componentName}"
                           >${u.name}</span
                         >
-                        ${rt > 1 ? a`<span
-                              class="${r.componentCount} ${g ? r.componentCountSelected : ""}"
-                              >×${rt}</span
+                        ${ct > 1 ? c`<span
+                              class="${r.componentCount} ${h ? r.componentCountSelected : ""}"
+                              >×${ct}</span
                             >` : ""}
                         <span
-                          class="${r.componentBadge} ${g ? r.componentBadgeSelected : ""}"
+                          class="${r.componentBadge} ${h ? r.componentBadgeSelected : ""}"
                           >depth ${b}</span
                         >
                         <button
-                          class="${r.componentHighlightBtn} ${g ? r.componentHighlightBtnSelected : ""}"
-                          @click=${(Nt) => {
+                          class="${r.componentHighlightBtn} ${h ? r.componentHighlightBtnSelected : ""}"
+                          @click=${(Ut) => {
           try {
-            Nt.stopPropagation(), o(Dt);
+            Ut.stopPropagation(), o(Gt);
           } catch {
           }
         }}
@@ -1895,38 +1895,38 @@ function un({
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-const pn = /* @__PURE__ */ new WeakMap(), Ct = /* @__PURE__ */ new WeakSet();
-function fn(t) {
+const xn = /* @__PURE__ */ new WeakMap(), Bt = /* @__PURE__ */ new WeakSet();
+function vn(t) {
   try {
     const e = new Set(t), n = /* @__PURE__ */ new Map();
-    for (const c of t)
-      n.set(c, {
-        component: c,
-        name: tt(c),
-        depth: Z(c),
-        id: c.componentId,
+    for (const s of t)
+      n.set(s, {
+        component: s,
+        name: rt(s),
+        depth: nt(s),
+        id: s.componentId,
         children: []
       });
     const o = [];
-    for (const c of t) {
-      const s = n.get(c), d = Tt(c);
+    for (const s of t) {
+      const a = n.get(s), d = Et(s);
       if (d && e.has(d)) {
         const l = n.get(d);
         if (l) {
-          l.children.push(s);
+          l.children.push(a);
           continue;
         }
       }
-      o.push(s);
+      o.push(a);
     }
-    const i = (c) => {
+    const i = (s) => {
       try {
-        c.sort((s, d) => s.depth - d.depth || s.name.localeCompare(d.name));
-        for (const s of c)
-          i(s.children);
+        s.sort((a, d) => a.depth - d.depth || a.name.localeCompare(d.name));
+        for (const a of s)
+          i(a.children);
       } catch {
       }
     };
@@ -1935,29 +1935,29 @@ function fn(t) {
     return [];
   }
 }
-function ce(t, e, n, o, i) {
+function pe(t, e, n, o, i) {
   try {
-    const c = t.children.length > 0, s = Ct.has(t.component), d = xt(t.component), l = e === t.id, u = t.depth * 16, y = (b) => {
+    const s = t.children.length > 0, a = Bt.has(t.component), d = _t(t.component), l = e === t.id, u = t.depth * 16, y = (b) => {
       try {
-        b.stopPropagation(), s ? Ct.delete(t.component) : Ct.add(t.component), i();
+        b.stopPropagation(), a ? Bt.delete(t.component) : Bt.add(t.component), i();
       } catch {
       }
-    }, g = () => {
+    }, h = () => {
       try {
         n(t.id);
       } catch {
       }
     };
-    return a`
+    return c`
       <li
-        class="${r.componentItem} ${l ? Kt : ""}"
+        class="${r.componentItem} ${l ? re : ""}"
         style="margin-left: ${u}px;"
-        @click=${g}
+        @click=${h}
       >
-        ${c ? a`<span class="${r.treeToggle}" @click=${y}
-              >${s ? "▶" : "▼"}</span
-            >` : a`<span class="${r.treeLeaf}">·</span>`}
-        ${ie(d, t.component, pn)}
+        ${s ? c`<span class="${r.treeToggle}" @click=${y}
+              >${a ? "▶" : "▼"}</span
+            >` : c`<span class="${r.treeLeaf}">·</span>`}
+        ${ue(d, t.component, xn)}
         <span class="${r.componentName}">${t.name}</span>
         <span class="${r.componentBadge}"
           >#${t.id.toString().slice(2, 6)}</span
@@ -1990,39 +1990,39 @@ function ce(t, e, n, o, i) {
           </svg>
         </button>
       </li>
-      ${c && !s ? T(
+      ${s && !a ? k(
       t.children,
       (b) => b.component,
-      (b) => ce(
+      (b) => pe(
         b,
         e,
         n,
         o,
         i
       )
-    ) : k}
+    ) : w}
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function hn({
+function $n({
   selectedComponentId: t,
   onSelectComponent: e,
   onHighlight: n,
   renderCallback: o
 }) {
   try {
-    const i = Qt(), c = fn(i);
-    return a`
+    const i = oe(), s = vn(i);
+    return c`
       <div class="${r.content}">
-        ${c.length === 0 ? a`<div class="${r.empty}">No components mounted</div>` : a`
+        ${s.length === 0 ? c`<div class="${r.empty}">No components mounted</div>` : c`
               <ul class="${r.componentList}">
-                ${T(
-      c,
-      (s) => s.component,
-      (s) => ce(
-        s,
+                ${k(
+      s,
+      (a) => a.component,
+      (a) => pe(
+        a,
         t,
         e,
         n,
@@ -2034,31 +2034,32 @@ function hn({
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-const ae = () => (Ie(() => {
+const fe = () => (He(() => {
   try {
-    console.log(ft());
+    console.log(yt());
   } catch {
   }
 }), () => {
   try {
-    return a`Active Timers (${ft()})`;
+    return c`Active Timers (${yt()})`;
   } catch {
-    return a``;
+    return c``;
   }
 });
-ae.skipDevToolsRender = !0;
-function gn({
+fe.skipDevToolsRender = !0;
+function _n({
   activeTab: t,
   onTabChange: e,
   onMinimise: n,
   onClose: o,
-  unreadLogCount: i
+  unreadLogCount: i,
+  unreadUserLogCount: s
 }) {
   try {
-    return a`
+    return c`
       <div class="${r.header}">
         <div class="${r.headerLeft}">
           <div class="${r.title}">🔧 Mates DevTools</div>
@@ -2084,10 +2085,24 @@ function gn({
     }}
             >
               Logs
-              ${i > 0 ? a`<span class="${r.tabBadge}"
+              ${i > 0 ? c`<span class="${r.tabBadge}"
                     >${i > 99 ? "99+" : i}</span
                   >` : ""}
             </button>
+            <button
+              class="${r.tabBtn} ${t === "user-logs" ? "active" : ""}"
+              @click=${() => {
+      try {
+        e("user-logs");
+      } catch {
+      }
+    }}
+            >
+              User Logs
+              ${s > 0 ? c`<span class="${r.tabBadge}"
+                    >${s > 99 ? "99+" : s}</span
+                  >` : ""}
+            </button>
             <button
               class="${r.tabBtn} ${t === "performance" ? "active" : ""}"
               @click=${() => {
@@ -2102,7 +2117,7 @@ function gn({
           </nav>
         </div>
         <div>
-          <button style="margin-left: 10px">${Be(ae)}</button>
+          <button style="margin-left: 10px">${Fe(fe)}</button>
         </div>
         <div class="${r.controls}">
           <button
@@ -2133,14 +2148,14 @@ function gn({
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-let it = null;
-function mn(t) {
+let at = null;
+function wn(t) {
   try {
-    return it = t, () => {
-      it === t && (it = null);
+    return at = t, () => {
+      at === t && (at = null);
     };
   } catch {
   }
@@ -2148,35 +2163,35 @@ function mn(t) {
   };
 }
 let v = !1;
-function yn() {
+function Sn() {
   v = !0;
 }
-function bn() {
+function kn() {
   v = !1;
 }
-function wr() {
+function Dr() {
   return v;
 }
-const xn = 100, R = [];
-let se = 1, $t = 0;
-const le = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
-function S(t, e, n) {
+const Cn = 100, z = [];
+let ge = 1, St = 0;
+const he = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
+function C(t, e, n) {
   try {
-    R.length >= xn && R.shift(), R.push({
-      id: se++,
+    z.length >= Cn && z.shift(), z.push({
+      id: ge++,
       ts: performance.now(),
       category: t,
       label: e,
       detail: n
-    }), $t++;
+    }), St++;
     try {
-      it?.();
+      at?.();
     } catch {
     }
   } catch {
   }
 }
-function Rt(t) {
+function Ot(t) {
   try {
     if (t === void 0) return "undefined";
     if (t === null) return "null";
@@ -2191,117 +2206,117 @@ function Rt(t) {
   }
   return "";
 }
-function vn() {
-  return R;
+function Tn() {
+  return z;
 }
-function kr() {
-  return R.length;
+function jr() {
+  return z.length;
 }
-function $n() {
-  return $t;
+function Mn() {
+  return St;
 }
-function _n() {
+function In() {
   try {
-    $t = 0;
+    St = 0;
   } catch {
   }
 }
-function wn() {
+function Bn() {
   try {
-    R.length = 0, $t = 0, se = 1;
+    z.length = 0, St = 0, ge = 1;
   } catch {
   }
 }
-function kn(t) {
+function Ln(t) {
   try {
     if (!v) return;
-    S("mount", t, "mounted");
+    C("mount", t, "mounted");
   } catch {
   }
 }
-function Sn(t, e) {
+function En(t, e) {
   try {
     if (!v) return;
-    S("update", t, `updated (${e.toFixed(2)}ms)`);
+    C("update", t, `updated (${e.toFixed(2)}ms)`);
   } catch {
   }
 }
-function Cn(t) {
+function An(t) {
   try {
     if (!v) return;
-    S("cleanup", t, "cleaned up");
+    C("cleanup", t, "cleaned up");
   } catch {
   }
 }
-function Tn(t, e) {
+function Rn(t, e) {
   try {
     if (!v) return;
-    S("setter", t, Rt(e));
+    C("setter", t, Ot(e));
   } catch {
   }
 }
-function Mn(t) {
+function zn(t) {
   try {
     if (!v) return;
-    S("action", t);
+    C("action", t);
   } catch {
   }
 }
-function In(t, e) {
+function Pn(t, e) {
   try {
-    if (!v || le.has(t)) return;
-    S("event", t, e !== void 0 ? Rt(e) : void 0);
+    if (!v || he.has(t)) return;
+    C("event", t, e !== void 0 ? Ot(e) : void 0);
   } catch {
   }
 }
-const zt = 80, de = 120;
-function F(t, e) {
+const Nt = 80, me = 120;
+function O(t, e) {
   try {
     return t.length > e ? t.slice(0, e - 1) + "…" : t;
   } catch {
   }
   return "";
 }
-function Bn(t, e, n) {
+function Hn(t, e, n) {
   try {
     if (!v) return;
-    const o = n ? `pending · ${F(n, 50)}` : "pending";
-    S("fetch", F(`${t} ${e}`, zt), o);
+    const o = n ? `pending · ${O(n, 50)}` : "pending";
+    C("fetch", O(`${t} ${e}`, Nt), o);
   } catch {
   }
 }
-function ue(t, e, n, o) {
+function ye(t, e, n, o) {
   try {
     if (!v) return;
-    S(
+    C(
       "fetch",
-      F(`${t} ${e}`, zt),
-      F(`${n} · ${o.toFixed(0)}ms`, de)
+      O(`${t} ${e}`, Nt),
+      O(`${n} · ${o.toFixed(0)}ms`, me)
     );
   } catch {
   }
 }
-function pe(t, e, n, o) {
+function be(t, e, n, o) {
   try {
     if (!v) return;
-    S(
+    C(
       "fetch",
-      F(`${t} ${e}`, zt),
-      F(
+      O(`${t} ${e}`, Nt),
+      O(
         `error · ${o.toFixed(0)}ms · ${n}`,
-        de
+        me
       )
     );
   } catch {
   }
 }
-function Ln(t, e) {
+function Fn(t, e) {
   try {
-    if (!v || le.has(t)) return;
-    S(
+    if (!v || he.has(t)) return;
+    C(
       "event",
       `${t} (cleanup)`,
-      e !== void 0 ? Rt(e) : void 0
+      e !== void 0 ? Ot(e) : void 0
     );
   } catch {
   }
@@ -2314,7 +2329,7 @@ const E = {
   action: "#81c784",
   event: "#ffb74d",
   fetch: "#ce93d8"
-}, En = {
+}, On = {
   mount: "MNT",
   update: "UPD",
   cleanup: "CLN",
@@ -2324,13 +2339,13 @@ const E = {
   fetch: "NET"
 };
 let $ = "all";
-const An = {
+const Nn = {
   all: null,
   lifecycle: ["mount", "update", "cleanup"],
   logs: ["setter", "action", "event"],
   network: ["fetch"]
 };
-function Rn(t) {
+function Dn(t) {
   try {
     const e = t / 1e3 | 0, n = t % 1e3, o = e / 60 | 0, i = e % 60;
     return `${String(o).padStart(2, "0")}:${String(i).padStart(2, "0")}.${String(n | 0).padStart(3, "0")}`;
@@ -2338,9 +2353,9 @@ function Rn(t) {
     return "";
   }
 }
-function zn() {
+function jn() {
   try {
-    const t = vn(), e = An[$];
+    const t = Tn(), e = Nn[$];
     if (!e) return t;
     const n = new Set(e);
     return t.filter((o) => n.has(o.category));
@@ -2348,11 +2363,11 @@ function zn() {
     return [];
   }
 }
-function Pn({ onClear: t, renderCallback: e }) {
+function Vn({ onClear: t, renderCallback: e }) {
   try {
-    _n();
-    const n = zn();
-    return a`
+    In();
+    const n = jn();
+    return c`
       <div class="${r.logsPanel}">
         <div class="${r.logsToolbar}">
           <div class="${r.logsFilterRow}">
@@ -2410,7 +2425,7 @@ function Pn({ onClear: t, renderCallback: e }) {
               class="${r.button}"
               @click=${() => {
       try {
-        wn(), t();
+        Bn(), t();
       } catch {
       }
     }}
@@ -2422,23 +2437,23 @@ function Pn({ onClear: t, renderCallback: e }) {
         </div>
 
         <div class="${r.logsContainer}">
-          ${n.length === 0 ? a`<div class="${r.empty}">
+          ${n.length === 0 ? c`<div class="${r.empty}">
                 No logs yet. Interact with the app to see activity.
-              </div>` : T(
+              </div>` : k(
       n,
       (o) => o.id,
-      (o) => a`
+      (o) => c`
                   <div class="${r.logEntry}">
-                    <span class="${r.logTs}">${Rn(o.ts)}</span>
+                    <span class="${r.logTs}">${Dn(o.ts)}</span>
                     <span
                       class="${r.logBadge}"
                       style="background: ${E[o.category]}22; color: ${E[o.category]}; border-color: ${E[o.category]}44;"
-                      >${En[o.category]}</span
+                      >${On[o.category]}</span
                     >
                     <span class="${r.logLabel}">${o.label}</span>
-                    ${o.detail ? a`<span class="${r.logDetail}"
+                    ${o.detail ? c`<span class="${r.logDetail}"
                           >${o.detail}</span
-                        >` : k}
+                        >` : w}
                   </div>
                 `
     )}
@@ -2446,32 +2461,32 @@ function Pn({ onClear: t, renderCallback: e }) {
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-let et = !1;
-function Hn() {
+let ot = !1;
+function Wn() {
   try {
-    et = !0;
+    ot = !0;
   } catch {
   }
 }
-function Fn() {
+function Gn() {
   try {
-    et = !1;
+    ot = !1;
   } catch {
   }
 }
-function Sr() {
-  return et;
+function Vr() {
+  return ot;
 }
-const On = 100, Q = /* @__PURE__ */ new Map();
-let fe = 1, ct = null;
-function Dn(t) {
+const Un = 100, et = /* @__PURE__ */ new Map();
+let xe = 1, lt = null;
+function Yn(t) {
   try {
-    return ct = t, () => {
+    return lt = t, () => {
       try {
-        ct === t && (ct = null);
+        lt === t && (lt = null);
       } catch {
       }
     };
@@ -2480,50 +2495,50 @@ function Dn(t) {
   return () => {
   };
 }
-function he(t, e, n) {
+function ve(t, e, n) {
   try {
-    if (!et) return;
+    if (!ot) return;
     const o = {
-      id: fe++,
+      id: xe++,
       ts: performance.now(),
       durationMs: n,
       componentName: t,
       instanceId: e
     };
-    let i = Q.get(t);
-    i || (i = [], Q.set(t, i)), i.length >= On && i.shift(), i.push(o);
+    let i = et.get(t);
+    i || (i = [], et.set(t, i)), i.length >= Un && i.shift(), i.push(o);
     try {
-      ct?.();
+      lt?.();
     } catch {
     }
   } catch {
   }
 }
-function Cr(t, e) {
+function Wr(t, e) {
   try {
-    if (!et) return Xt;
+    if (!ot) return Zt;
     const n = performance.now();
-    return () => he(t, e, performance.now() - n);
+    return () => ve(t, e, performance.now() - n);
   } catch {
   }
-  return Xt;
+  return Zt;
 }
-function Xt() {
+function Zt() {
 }
-function Nn() {
+function Xn() {
   try {
     const t = [];
-    for (const [e, n] of Q) {
+    for (const [e, n] of et) {
       if (n.length === 0) continue;
-      let o = 0, i = 0, c = 1 / 0;
-      for (const s of n)
-        o += s.durationMs, s.durationMs > i && (i = s.durationMs), s.durationMs < c && (c = s.durationMs);
+      let o = 0, i = 0, s = 1 / 0;
+      for (const a of n)
+        o += a.durationMs, a.durationMs > i && (i = a.durationMs), a.durationMs < s && (s = a.durationMs);
       t.push({
         name: e,
         renderCount: n.length,
         avgMs: o / n.length,
         maxMs: i,
-        minMs: c,
+        minMs: s,
         lastMs: n[n.length - 1].durationMs,
         totalMs: o,
         timings: n
@@ -2534,69 +2549,69 @@ function Nn() {
   }
   return [];
 }
-function ge() {
+function $e() {
   try {
     const t = [];
-    for (const e of Q.values())
+    for (const e of et.values())
       for (let n = 0; n < e.length; n++) t.push(e[n]);
     return t;
   } catch {
   }
   return [];
 }
-function Tr(t = 50) {
+function Gr(t = 50) {
   try {
-    const e = ge();
+    const e = $e();
     return e.sort((n, o) => o.ts - n.ts), e.length > t ? e.slice(0, t) : e;
   } catch {
   }
   return [];
 }
-function jn(t = 20) {
+function qn(t = 20) {
   try {
-    const e = ge();
+    const e = $e();
     return e.sort((n, o) => o.durationMs - n.durationMs), e.length > t ? e.slice(0, t) : e;
   } catch {
   }
   return [];
 }
-function Vn() {
+function Jn() {
   try {
-    Q.clear(), fe = 1;
+    et.clear(), xe = 1;
   } catch {
   }
 }
-qt(0);
-function j(t) {
+ee(0);
+function V(t) {
   try {
     return t < 0.01 ? "<0.01ms" : t < 1 ? `${t.toFixed(2)}ms` : t < 10 ? `${t.toFixed(1)}ms` : `${t.toFixed(0)}ms`;
   } catch {
     return "";
   }
 }
-function me(t, e) {
+function _e(t, e) {
   try {
     return e <= 0 ? 0 : Math.max(2, Math.min(100, t / e * 100));
   } catch {
     return 0;
   }
 }
-function ye(t) {
+function we(t) {
   try {
     return t < 16 ? "#66bb6a" : t <= 20 ? "#ffb74d" : "#ef5350";
   } catch {
     return "";
   }
 }
-let N = "summary";
-function Wn(t) {
+let j = "summary";
+function Kn(t) {
   try {
     if (t.length === 0)
-      return a`<div class="${r.empty}">
+      return c`<div class="${r.empty}">
         No render data yet. Interact with the app to see component performance.
       </div>`;
     const e = Math.max(...t.map((n) => n.totalMs));
-    return a`
+    return c`
       <table class="${r.perfTable}">
         <thead>
           <tr>
@@ -2609,12 +2624,12 @@ function Wn(t) {
           </tr>
         </thead>
         <tbody>
-          ${T(
+          ${k(
       t,
       (n) => n.name,
       (n) => {
-        const o = ye(n.lastMs);
-        return a`
+        const o = we(n.lastMs);
+        return c`
                 <tr class="${r.perfRow}">
                   <td class="${r.perfCell} ${r.perfName}">
                     ${n.name}
@@ -2623,25 +2638,25 @@ function Wn(t) {
                     ${n.renderCount}
                   </td>
                   <td class="${r.perfCell} ${r.perfNum}">
-                    ${j(n.avgMs)}
+                    ${V(n.avgMs)}
                   </td>
                   <td class="${r.perfCell} ${r.perfNum}">
-                    ${j(n.maxMs)}
+                    ${V(n.maxMs)}
                   </td>
                   <td class="${r.perfCell} ${r.perfNum}">
-                    ${j(n.lastMs)}
+                    ${V(n.lastMs)}
                   </td>
                   <td class="${r.perfCell}">
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${me(
+                        style="width: ${_e(
           n.totalMs,
           e
         )}%; background: ${o};"
                       ></div>
                       <span class="${r.perfBarLabel}"
-                        >${j(n.totalMs)}</span
+                        >${V(n.totalMs)}</span
                       >
                     </div>
                   </td>
@@ -2653,17 +2668,17 @@ function Wn(t) {
       </table>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Gn(t, e) {
+function Qn(t, e) {
   try {
     if (t.length === 0)
-      return a`<div class="${r.empty}">
+      return c`<div class="${r.empty}">
         No render data yet. Interact with the app to see slow renders.
       </div>`;
     const n = Math.max(...t.map((i) => i.durationMs)), o = !!e;
-    return a`
+    return c`
       <table class="${r.perfTable}">
         <thead>
           <tr>
@@ -2673,36 +2688,36 @@ function Gn(t, e) {
           </tr>
         </thead>
         <tbody>
-          ${T(
+          ${k(
       t,
       (i) => i.id,
       (i) => {
-        const c = ye(i.durationMs), s = o ? () => {
+        const s = we(i.durationMs), a = o ? () => {
           try {
             e(i.instanceId);
           } catch {
           }
         } : void 0;
-        return a`
+        return c`
                 <tr
                   class="${r.perfRow} ${o ? r.perfRowClickable : ""}"
-                  @click=${s}
+                  @click=${a}
                   title=${o ? `Go to ${i.componentName} in Components tab` : ""}
                 >
                   <td class="${r.perfCell} ${r.perfName}">
                     ${i.componentName}
                   </td>
                   <td class="${r.perfCell} ${r.perfNum}">
-                    ${j(i.durationMs)}
+                    ${V(i.durationMs)}
                   </td>
                   <td class="${r.perfCell}">
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${me(
+                        style="width: ${_e(
           i.durationMs,
           n
-        )}%; background: ${c};"
+        )}%; background: ${s};"
                       ></div>
                     </div>
                   </td>
@@ -2714,25 +2729,25 @@ function Gn(t, e) {
       </table>
     `;
   } catch {
-    return a``;
+    return c``;
   }
 }
-function Yn({
+function Zn({
   onClear: t,
   renderCallback: e,
   onNavigateToComponent: n
 }) {
   try {
-    const o = Nn(), i = jn(30);
-    return a`
+    const o = Xn(), i = qn(30);
+    return c`
       <div class="${r.perfPanel}">
         <div class="${r.perfToolbar}">
           <div class="${r.perfTabs}">
             <button
-              class="${r.perfTabBtn} ${N === "summary" ? "active" : ""}"
+              class="${r.perfTabBtn} ${j === "summary" ? "active" : ""}"
               @click=${() => {
       try {
-        N = "summary", e();
+        j = "summary", e();
       } catch {
       }
     }}
@@ -2740,10 +2755,10 @@ function Yn({
               Summary
             </button>
             <button
-              class="${r.perfTabBtn} ${N === "slowest" ? "active" : ""}"
+              class="${r.perfTabBtn} ${j === "slowest" ? "active" : ""}"
               @click=${() => {
       try {
-        N = "slowest", e();
+        j = "slowest", e();
       } catch {
       }
     }}
@@ -2756,7 +2771,7 @@ function Yn({
               class="${r.button}"
               @click=${() => {
       try {
-        Vn(), t();
+        Jn(), t();
       } catch {
       }
     }}
@@ -2768,58 +2783,207 @@ function Yn({
         </div>
 
         <div class="${r.perfContent}">
-          ${N === "summary" ? Wn(o) : Gn(i, n ?? null)}
+          ${j === "summary" ? Kn(o) : Qn(i, n ?? null)}
         </div>
       </div>
     `;
   } catch {
-    return a``;
+    return c``;
+  }
+}
+const tr = 100, q = [];
+let Se = 1, kt = 0, dt = null, te = null;
+function er(t) {
+  try {
+    return dt = t, () => {
+      dt === t && (dt = null);
+    };
+  } catch {
   }
+  return () => {
+  };
 }
-let L = !1, C = !1, X = "components", M = "list", x = null, _ = null, m = null, D = [], p = null, w = null, z = 0;
-const Un = 150, Xn = 0.8, qn = 0.5;
+function nr(t) {
+  try {
+    return t === null ? "null" : t === void 0 ? "undefined" : typeof t == "string" ? t : t instanceof Error ? `${t.name}: ${t.message}` : typeof t == "function" ? "ƒ()" : JSON.stringify(t);
+  } catch {
+    try {
+      return String(t);
+    } catch {
+      return "";
+    }
+  }
+}
+function ke() {
+  try {
+    if (te) return;
+    te = Oe.__subscribe((t) => {
+      try {
+        q.length >= tr && q.shift(), q.push({
+          id: Se++,
+          ts: t.ts ?? performance.now(),
+          level: t.level,
+          message: nr(t.message),
+          data: t.data
+        }), kt++;
+        try {
+          dt?.();
+        } catch {
+        }
+      } catch {
+      }
+    });
+  } catch {
+  }
+}
+function rr() {
+  return q;
+}
+function or() {
+  return kt;
+}
+function ir() {
+  try {
+    kt = 0;
+  } catch {
+  }
+}
+function cr() {
+  try {
+    q.length = 0, kt = 0, Se = 1;
+  } catch {
+  }
+}
+const Lt = {
+  log: "#4fc3f7",
+  warn: "#ffb74d",
+  error: "#ef5350"
+}, sr = {
+  log: "LOG",
+  warn: "WRN",
+  error: "ERR"
+};
+function ar(t) {
+  try {
+    const e = t / 1e3 | 0, n = t % 1e3, o = e / 60 | 0, i = e % 60;
+    return `${String(o).padStart(2, "0")}:${String(i).padStart(2, "0")}.${String(n | 0).padStart(3, "0")}`;
+  } catch {
+    return "";
+  }
+}
+function lr(t) {
+  if (t == null) return "";
+  try {
+    return JSON.stringify(t, null, 2);
+  } catch {
+    try {
+      return String(t);
+    } catch {
+      return "";
+    }
+  }
+}
+function dr({ onClear: t, renderCallback: e }) {
+  try {
+    ir();
+    const n = rr();
+    return c`
+      <div class="${r.logsPanel}">
+        <div class="${r.logsToolbar}">
+          <div class="${r.logsFilterRow}">
+            <span style="font-size:0.72rem;color:var(--mdt-text-muted);padding:0 4px;">
+              User logs from <code style="font-size:0.7rem;opacity:.8;">log()</code> / <code style="font-size:0.7rem;opacity:.8;">logError()</code>
+            </span>
+          </div>
+          <div class="${r.logsActions}">
+            <span class="${r.logsCount}">${n.length} entries</span>
+            <button
+              class="${r.button}"
+              @click=${() => {
+      try {
+        cr(), t();
+      } catch {
+      }
+    }}
+              title="Clear user logs"
+            >🗑</button>
+          </div>
+        </div>
+
+        <div class="${r.logsContainer}">
+          ${n.length === 0 ? c`<div class="${r.empty}">
+                No user logs yet. Call <code>log("message", data)</code> or <code>logError(...)</code> from your app.
+              </div>` : k(
+      [...n].reverse(),
+      (o) => o.id,
+      (o) => {
+        const i = lr(o.data);
+        return c`
+                    <div class="${r.logEntry}" style="align-items:flex-start;flex-direction:column;gap:2px;padding:5px 8px;">
+                      <div style="display:flex;align-items:center;gap:6px;width:100%;">
+                        <span class="${r.logTs}">${ar(o.ts)}</span>
+                        <span
+                          class="${r.logBadge}"
+                          style="background:${Lt[o.level]}22;color:${Lt[o.level]};border-color:${Lt[o.level]}44;"
+                        >${sr[o.level]}</span>
+                        <span class="${r.logLabel}" style="flex:1;">${o.message}</span>
+                      </div>
+                      ${i ? c`<pre style="margin:0 0 0 52px;font-size:0.68rem;color:var(--mdt-text-muted);white-space:pre-wrap;word-break:break-all;max-height:120px;overflow:auto;">${i}</pre>` : w}
+                    </div>
+                  `;
+      }
+    )}
+        </div>
+      </div>
+    `;
+  } catch {
+    return c``;
+  }
+}
+let L = !1, T = !1, R = "components", M = "list", x = null, _ = null, m = null, D = [], p = null, S = null, P = 0;
+const ur = 150, pr = 0.8, fr = 0.5;
 let B = null;
-function Pt() {
+function Dt() {
   try {
     const t = document.documentElement;
-    B === null && (B = parseFloat(getComputedStyle(t).paddingBottom) || 0), t.style.paddingBottom = `${B + z}px`;
+    B === null && (B = parseFloat(getComputedStyle(t).paddingBottom) || 0), t.style.paddingBottom = `${B + P}px`;
   } catch {
   }
 }
-function Ht() {
+function jt() {
   try {
     if (B === null) return;
     document.documentElement.style.paddingBottom = B === 0 ? "" : `${B}px`, B = null;
   } catch {
   }
 }
-let Ft = !1, be = 0, xe = 0, ht = !1, q = null, J = null, K = null, P = null, H = null;
-function Jn() {
+let Vt = !1, Ce = 0, Te = 0, bt = !1, J = null, K = null, Q = null, Z = null, H = null, F = null;
+function gr() {
   try {
-    H !== null && (clearTimeout(H), H = null);
+    F !== null && (clearTimeout(F), F = null);
   } catch {
   }
 }
-function gt() {
+function xt() {
   try {
-    Jn(), P && (P.remove(), P = null);
+    gr(), H && (H.remove(), H = null);
   } catch {
   }
 }
-function at(t) {
+function ut(t) {
   try {
     let e = function() {
       try {
-        const c = document.createElement("div");
-        c.className = r.domHighlight, document.body.appendChild(c), P = c;
-        const s = n.getBoundingClientRect();
-        i ? (c.style.position = "fixed", c.style.top = `${s.top}px`, c.style.left = `${s.left}px`) : (c.style.top = `${s.top + window.scrollY}px`, c.style.left = `${s.left + window.scrollX}px`), c.style.width = `${s.width}px`, c.style.height = `${s.height}px`, H = U(
+        const s = document.createElement("div");
+        s.className = r.domHighlight, document.body.appendChild(s), H = s;
+        const a = n.getBoundingClientRect();
+        i ? (s.style.position = "fixed", s.style.top = `${a.top}px`, s.style.left = `${a.left}px`) : (s.style.top = `${a.top + window.scrollY}px`, s.style.left = `${a.left + window.scrollX}px`), s.style.width = `${a.width}px`, s.style.height = `${a.height}px`, F = X(
           () => setTimeout(() => {
             try {
-              P === c && (c.classList.add("fade-out"), H = U(
+              H === s && (s.classList.add("fade-out"), F = X(
                 () => setTimeout(() => {
                   try {
-                    P === c && gt();
+                    H === s && xt();
                   } catch {
                   }
                 }, 600)
@@ -2831,20 +2995,20 @@ function at(t) {
       } catch {
       }
     };
-    gt();
+    xt();
     const n = t.firstElementChild ?? t, o = getComputedStyle(n).position, i = o === "fixed" || o === "sticky";
     if (i)
       e();
     else {
-      const c = n.getBoundingClientRect(), s = c.top >= 0 && c.bottom <= (window.innerHeight || document.documentElement.clientHeight);
-      s || n.scrollIntoView({ behavior: "smooth", block: "center" }), H = U(
-        () => setTimeout(e, s ? 0 : 400)
+      const s = n.getBoundingClientRect(), a = s.top >= 0 && s.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+      a || n.scrollIntoView({ behavior: "smooth", block: "center" }), F = X(
+        () => setTimeout(e, a ? 0 : 400)
       );
     }
   } catch {
   }
 }
-function ve() {
+function Me() {
   try {
     if (x === null) return null;
     for (const t of D)
@@ -2855,17 +3019,17 @@ function ve() {
   }
   return null;
 }
-function Ot() {
+function Wt() {
   try {
     return _ === null ? null : D.find((t) => t.viewFn === _) ?? null;
   } catch {
   }
   return null;
 }
-function Kn() {
+function hr() {
   try {
     if (m === null) return null;
-    const t = Ot();
+    const t = Wt();
     return t ? t.instances.find(
       (e) => e.componentId === m
     ) ?? null : null;
@@ -2873,47 +3037,47 @@ function Kn() {
   }
   return null;
 }
-function _t() {
+function Ct() {
   try {
-    D = je(), x !== null && !ve() && (x = null), _ !== null && !Ot() ? (_ = null, m = null) : m !== null && !Kn() && (m = null);
+    D = qe(), x !== null && !Me() && (x = null), _ !== null && !Wt() ? (_ = null, m = null) : m !== null && !hr() && (m = null);
   } catch {
   }
 }
-function mt() {
+function tt() {
   try {
-    return L && !C;
+    return L && !T;
   } catch {
   }
   return !1;
 }
-function nt() {
+function it() {
   try {
-    return w?.querySelector(`.${r.panel}`) ?? null;
+    return S?.querySelector(`.${r.panel}`) ?? null;
   } catch {
   }
   return null;
 }
-function Qn(t) {
+function mr(t) {
   try {
-    x = x === t ? null : t, h();
+    x = x === t ? null : t, g();
   } catch {
   }
 }
-function Zn(t) {
+function yr(t) {
   try {
-    _ === t ? (_ = null, m = null) : (_ = t, m = null), h();
+    _ === t ? (_ = null, m = null) : (_ = t, m = null), g();
   } catch {
   }
 }
-function tr(t) {
+function br(t) {
   try {
-    m = m === t ? null : t, h();
+    m = m === t ? null : t, g();
   } catch {
   }
 }
-function er(t) {
+function xr(t) {
   try {
-    x = t, X = "components", _t(), _ = null, m = null;
+    x = t, R = "components", Ct(), _ = null, m = null;
     for (const e of D) {
       for (const n of e.instances)
         if (n.componentId === t) {
@@ -2922,31 +3086,31 @@ function er(t) {
         }
       if (_) break;
     }
-    h();
+    g();
   } catch {
   }
 }
-function nr(t) {
+function vr(t) {
   try {
-    X = t, h();
+    R = t, g();
   } catch {
   }
 }
-function rr() {
+function $r() {
   try {
-    if (!L || C) return;
-    C = !0, nt()?.classList.remove(r.panelVisible), p && (p.style.display = ""), Ht();
+    if (!L || T) return;
+    T = !0, it()?.classList.remove(r.panelVisible), p && (p.style.display = ""), jt();
   } catch {
   }
 }
-function or() {
+function _r() {
   try {
-    if (!C) return;
-    C = !1, p && (p.style.display = "none"), _t(), h(), Pt(), requestAnimationFrame(() => {
+    if (!T) return;
+    T = !1, p && (p.style.display = "none"), Ct(), g(), Dt(), requestAnimationFrame(() => {
       try {
         requestAnimationFrame(() => {
           try {
-            nt()?.classList.add(r.panelVisible);
+            it()?.classList.add(r.panelVisible);
           } catch {
           }
         });
@@ -2956,35 +3120,35 @@ function or() {
   } catch {
   }
 }
-function ir() {
+function wr() {
   try {
-    L = !1, C = !1, x = null, $e(), gt(), Ht();
-    const t = nt();
+    L = !1, T = !1, x = null, Ie(), xt(), jt();
+    const t = it();
     if (t) {
       t.classList.remove(r.panelVisible);
       let e = !1;
       const n = () => {
         try {
           if (e) return;
-          e = !0, t.removeEventListener("transitionend", n), It();
+          e = !0, t.removeEventListener("transitionend", n), Rt();
         } catch {
         }
       };
-      t.addEventListener("transitionend", n, { once: !0 }), U(() => setTimeout(n, 350));
+      t.addEventListener("transitionend", n, { once: !0 }), X(() => setTimeout(n, 350));
     } else
-      It();
+      Rt();
     p && (p.style.display = "");
   } catch {
   }
 }
-function cr() {
+function Sr() {
   try {
     if (L) return;
-    L = !0, C = !1, p && (p.style.display = "none"), z = Math.round(window.innerHeight * qn), ar(), dr(), _t(), h(), Pt(), requestAnimationFrame(() => {
+    L = !0, T = !1, p && (p.style.display = "none"), P = Math.round(window.innerHeight * fr), kr(), Mr(), Ct(), g(), Dt(), requestAnimationFrame(() => {
       try {
         requestAnimationFrame(() => {
           try {
-            nt()?.classList.add(r.panelVisible);
+            it()?.classList.add(r.panelVisible);
           } catch {
           }
         });
@@ -2994,34 +3158,39 @@ function cr() {
   } catch {
   }
 }
-function ar() {
+function kr() {
   try {
-    Hn(), q || (q = mn(() => {
+    Wn(), J || (J = wn(() => {
       try {
-        mt() && h();
+        tt() && g();
       } catch {
       }
-    })), J || (J = Dn(() => {
+    })), K || (K = Yn(() => {
       try {
-        mt() && h();
+        tt() && g();
+      } catch {
+      }
+    })), ke(), Z || (Z = er(() => {
+      try {
+        tt() && g();
       } catch {
       }
     }));
   } catch {
   }
 }
-function $e() {
+function Ie() {
   try {
-    Fn(), q && (q(), q = null), J && (J(), J = null);
+    Gn(), J && (J(), J = null), K && (K(), K = null), Z && (Z(), Z = null);
   } catch {
   }
 }
-const Mt = "mates-devtools-vars";
-function sr() {
+const At = "mates-devtools-vars";
+function Cr() {
   try {
-    if (document.getElementById(Mt)) return;
+    if (document.getElementById(At)) return;
     const t = document.createElement("style");
-    t.id = Mt, t.textContent = `
+    t.id = At, t.textContent = `
     #mates-devtools {
       --dt-bg:           #1a1a1a;
       --dt-bg-2:         #222222;
@@ -3088,34 +3257,34 @@ function sr() {
   } catch {
   }
 }
-function lr() {
+function Tr() {
   try {
-    document.getElementById(Mt)?.remove();
+    document.getElementById(At)?.remove();
   } catch {
   }
 }
-function dr() {
+function Mr() {
   try {
-    if (w) return;
-    sr(), w = document.createElement("div"), w.id = "mates-devtools", document.body.appendChild(w);
+    if (S) return;
+    Cr(), S = document.createElement("div"), S.id = "mates-devtools", document.body.appendChild(S);
   } catch {
   }
 }
-function It() {
+function Rt() {
   try {
-    if (!w) return;
-    Jt(a``, w), w.remove(), w = null, lr();
+    if (!S) return;
+    ne(c``, S), S.remove(), S = null, Tr();
   } catch {
   }
 }
-function h() {
+function g() {
   try {
-    if (!w || !L) return;
+    if (!S || !L) return;
     const t = (() => {
       try {
-        switch (X) {
+        switch (R) {
           case "components":
-            return a`
+            return c`
               <div class="${r.body}">
                 <div class="${r.leftColumn}">
                   <div class="${r.leftTabs}">
@@ -3123,7 +3292,7 @@ function h() {
                       class="${r.leftTabBtn} ${M === "list" ? "active" : ""}"
                       @click=${() => {
               try {
-                M = "list", h();
+                M = "list", g();
               } catch {
               }
             }}
@@ -3152,7 +3321,7 @@ function h() {
                       class="${r.leftTabBtn} ${M === "tree" ? "active" : ""}"
                       @click=${() => {
               try {
-                M = "tree", h();
+                M = "tree", g();
               } catch {
               }
             }}
@@ -3176,78 +3345,84 @@ function h() {
                       </svg>
                     </button>
                   </div>
-                  ${M === "list" ? un({
+                  ${M === "list" ? bn({
               groups: D,
               selectedViewFn: _,
-              onSelectGroup: Zn,
-              onHighlight: (e) => at(e),
-              renderCallback: h
-            }) : hn({
+              onSelectGroup: yr,
+              onHighlight: (e) => ut(e),
+              renderCallback: g
+            }) : $n({
               selectedComponentId: x,
-              onSelectComponent: Qn,
-              onHighlight: (e) => at(e),
-              renderCallback: h
+              onSelectComponent: mr,
+              onHighlight: (e) => ut(e),
+              renderCallback: g
             })}
                 </div>
-                ${Ut(M === "list" ? {
-              selectedGroup: Ot(),
+                ${Qt(M === "list" ? {
+              selectedGroup: Wt(),
               selectedInstanceId: m,
-              onSelectInstance: tr,
-              onHighlight: (e) => at(e)
+              onSelectInstance: br,
+              onHighlight: (e) => ut(e)
             } : {
-              selectedComponent: ve()
+              selectedComponent: Me()
             })}
               </div>
             `;
           case "logs":
-            return Pn({
-              onClear: h,
-              renderCallback: h
+            return Vn({
+              onClear: g,
+              renderCallback: g
+            });
+          case "user-logs":
+            return dr({
+              onClear: g,
+              renderCallback: g
             });
           case "performance":
-            return Yn({
-              onClear: h,
-              renderCallback: h,
-              onNavigateToComponent: er
+            return Zn({
+              onClear: g,
+              renderCallback: g,
+              onNavigateToComponent: xr
             });
           default:
-            return a``;
+            return c``;
         }
       } catch {
       }
-      return a``;
+      return c``;
     })();
-    Jt(
-      a`
-        <div class="${r.panel}" style="height: ${z}px;">
-          <div class="${r.resizeHandle}" @mousedown=${ur}></div>
-          ${gn({
-        activeTab: X,
-        onTabChange: nr,
-        onMinimise: rr,
-        onClose: ir,
-        unreadLogCount: X === "logs" ? 0 : $n()
+    ne(
+      c`
+        <div class="${r.panel}" style="height: ${P}px;">
+          <div class="${r.resizeHandle}" @mousedown=${Ir}></div>
+          ${_n({
+        activeTab: R,
+        onTabChange: vr,
+        onMinimise: $r,
+        onClose: wr,
+        unreadLogCount: R === "logs" ? 0 : Mn(),
+        unreadUserLogCount: R === "user-logs" ? 0 : or()
       })}
           ${t}
         </div>
       `,
-      w
+      S
     );
   } catch {
   }
 }
-function ur(t) {
+function Ir(t) {
   try {
     t.preventDefault();
-    const e = t.clientY, n = z, o = (c) => {
+    const e = t.clientY, n = P, o = (s) => {
       try {
-        const s = window.innerHeight * Xn;
-        z = Math.max(
-          Un,
-          Math.min(s, n + (e - c.clientY))
+        const a = window.innerHeight * pr;
+        P = Math.max(
+          ur,
+          Math.min(a, n + (e - s.clientY))
         );
-        const d = nt();
-        d && (d.style.height = `${z}px`), Pt();
+        const d = it();
+        d && (d.style.height = `${P}px`), Dt();
       } catch {
       }
     }, i = () => {
@@ -3260,99 +3435,102 @@ function ur(t) {
   } catch {
   }
 }
-function pr() {
+function Br() {
   try {
     if (p) return;
-    p = document.createElement("div"), p.id = "mates-devtools-fab", p.className = r.fab, p.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>', p.style.bottom = "50px", p.style.right = "50px", p.addEventListener("mousedown", we), p.addEventListener("click", _e), document.body.appendChild(p);
+    p = document.createElement("div"), p.id = "mates-devtools-fab", p.className = r.fab, p.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>', p.style.bottom = "50px", p.style.right = "50px", p.addEventListener("mousedown", Le), p.addEventListener("click", Be), document.body.appendChild(p);
   } catch {
   }
 }
-function fr() {
+function Lr() {
   try {
     if (!p) return;
-    p.removeEventListener("mousedown", we), p.removeEventListener("click", _e), p.remove(), p = null;
+    p.removeEventListener("mousedown", Le), p.removeEventListener("click", Be), p.remove(), p = null;
   } catch {
   }
 }
-function _e() {
+function Be() {
   try {
-    if (ht) {
-      ht = !1;
+    if (bt) {
+      bt = !1;
       return;
     }
-    C ? or() : cr();
+    T ? _r() : Sr();
   } catch {
   }
 }
-function we(t) {
+function Le(t) {
   try {
-    t.preventDefault(), Ft = !0, ht = !1;
+    t.preventDefault(), Vt = !0, bt = !1;
     const e = p.getBoundingClientRect();
-    be = t.clientX - e.left, xe = t.clientY - e.top, p.classList.add(r.fabDragging), document.addEventListener("mousemove", ke), document.addEventListener("mouseup", Se);
+    Ce = t.clientX - e.left, Te = t.clientY - e.top, p.classList.add(r.fabDragging), document.addEventListener("mousemove", Ee), document.addEventListener("mouseup", Ae);
   } catch {
   }
 }
-function ke(t) {
+function Ee(t) {
   try {
-    if (!Ft || !p) return;
-    ht = !0, p.style.bottom = "auto", p.style.right = "auto", p.style.left = `${Math.max(0, Math.min(window.innerWidth - 48, t.clientX - be))}px`, p.style.top = `${Math.max(0, Math.min(window.innerHeight - 48, t.clientY - xe))}px`;
+    if (!Vt || !p) return;
+    bt = !0, p.style.bottom = "auto", p.style.right = "auto", p.style.left = `${Math.max(0, Math.min(window.innerWidth - 48, t.clientX - Ce))}px`, p.style.top = `${Math.max(0, Math.min(window.innerHeight - 48, t.clientY - Te))}px`;
   } catch {
   }
 }
-function Se() {
+function Ae() {
   try {
-    Ft = !1, p?.classList.remove(r.fabDragging), document.removeEventListener("mousemove", ke), document.removeEventListener("mouseup", Se);
+    Vt = !1, p?.classList.remove(r.fabDragging), document.removeEventListener("mousemove", Ee), document.removeEventListener("mouseup", Ae);
   } catch {
   }
 }
-function hr() {
+function Er() {
   try {
-    on(), pr(), K || (K = bt.__subscribe((t) => {
+    pn(), Br(), Q || (Q = $t.__subscribe((t) => {
       try {
-        t?.type === "unmount" && (x !== null && t.component.componentId === x && (x = null), m !== null && t.component.componentId === m && (m = null)), _t(), mt() && h();
+        t?.type === "unmount" && (x !== null && t.component.componentId === x && (x = null), m !== null && t.component.componentId === m && (m = null)), Ct(), tt() && g();
       } catch {
       }
-    })), te(() => {
+    })), ce(() => {
       try {
-        mt() && h();
+        tt() && g();
       } catch {
       }
     });
   } catch {
   }
 }
-function gr() {
+function Ar() {
   try {
-    cn(), te(null), gt(), $e(), bn(), Ht(), K && (K(), K = null), L = !1, C = !1, M = "list", x = null, _ = null, m = null, D = [], It(), fr();
+    fn(), ce(null), xt(), Ie(), kn(), jt(), Q && (Q(), Q = null), L = !1, T = !1, M = "list", x = null, _ = null, m = null, D = [], Rt(), Lr();
   } catch {
   }
 }
-const st = [];
-let Bt = null, Lt = null, Et = null;
-function mr() {
+const pt = [];
+let zt = null, Pt = null, Ht = null;
+function Rr() {
+  const t = new je();
   try {
-    Bt = Ae((t, e) => {
-      try {
-        const n = (e.method ?? "GET").toUpperCase();
-        st.push({ method: n, url: t, startTs: performance.now() });
-      } catch {
+    zt = t.interceptBefore(
+      (e, n) => {
+        try {
+          const o = (n.method ?? "GET").toUpperCase();
+          pt.push({ method: o, url: e, startTs: performance.now() });
+        } catch {
+        }
+        return { url: e, options: n };
       }
-      return { url: t, options: e };
-    }), Lt = Re((t) => {
+    ), Pt = t.interceptAfter((e) => {
       try {
-        const e = st.shift(), n = e?.method ?? "", o = e?.url ?? t.url ?? "", i = e ? performance.now() - e.startTs : 0;
-        ue(n, o, t.status, i);
+        const n = pt.shift(), o = n?.method ?? "", i = n?.url ?? e.url ?? "", s = n ? performance.now() - n.startTs : 0;
+        ye(o, i, e.status, s);
       } catch {
       }
-      return t;
-    }), Et = ze((t) => {
+      return e;
+    }), Ht = t.interceptError((e) => {
       try {
-        const e = st.shift(), n = e ? performance.now() - e.startTs : 0;
-        pe(
-          e?.method ?? "",
-          e?.url ?? "",
-          t.message,
-          n
+        const n = pt.shift(), o = n ? performance.now() - n.startTs : 0;
+        be(
+          n?.method ?? "",
+          n?.url ?? "",
+          e.message,
+          o
         );
       } catch {
       }
@@ -3360,103 +3538,103 @@ function mr() {
   } catch {
   }
 }
-function yr() {
+function zr() {
   try {
-    Bt?.(), Lt?.(), Et?.(), Bt = null, Lt = null, Et = null, st.length = 0;
+    zt?.(), Pt?.(), Ht?.(), zt = null, Pt = null, Ht = null, pt.length = 0;
   } catch {
   }
 }
-function br() {
+function Pr() {
   try {
-    if (Le()) return;
-    Ee({
-      registerComponent: Fe,
-      unregisterComponent: Oe,
-      notifyRender: De,
-      getComponentName: tt,
-      logComponentMount: kn,
-      logComponentRender: Sn,
-      logComponentUnmount: Cn,
-      logAtomSet: Tn,
-      logAtomUpdate: Mn,
-      logEventTrigger: In,
-      logCleanupEventTrigger: Ln,
-      logFetchRequest: Bn,
-      logFetchResponse: ue,
-      logFetchError: pe,
-      recordRender: he
-    }), yn(), mr();
+    if (Ne()) return;
+    De({
+      registerComponent: Ge,
+      unregisterComponent: Ue,
+      notifyRender: Ye,
+      getComponentName: rt,
+      logComponentMount: Ln,
+      logComponentRender: En,
+      logComponentUnmount: An,
+      logAtomSet: Rn,
+      logAtomUpdate: zn,
+      logEventTrigger: Pn,
+      logCleanupEventTrigger: Fn,
+      logFetchRequest: Hn,
+      logFetchResponse: ye,
+      logFetchError: be,
+      recordRender: ve
+    }), Sn(), ke(), Rr();
   } catch {
   }
 }
-let yt = !1;
-function Mr() {
+let vt = !1;
+function Ur() {
   try {
-    if (yt) return;
-    yt = !0, br(), hr();
+    if (vt) return;
+    vt = !0, Pr(), Er();
   } catch {
   }
 }
-function Ir() {
+function Yr() {
   try {
-    if (!yt) return;
-    yt = !1, yr(), gr();
+    if (!vt) return;
+    vt = !1, zr(), Ar();
   } catch {
   }
 }
 export {
-  wn as clearLogs,
-  Vn as clearPerfData,
-  yn as connectLogStore,
-  Hn as connectPerfStore,
-  gr as destroyDevTools,
-  Ir as destroyMatesDevTools,
-  bt as devToolsEvent,
-  bn as disconnectLogStore,
-  Fn as disconnectPerfStore,
-  Qt as getAllComponents,
-  Z as getComponentDepth,
-  je as getComponentGroups,
-  tt as getComponentName,
-  $r as getComponentsByView,
-  kr as getLogCount,
-  vn as getLogs,
-  Nn as getPerfSummaries,
-  Tr as getRecentTimings,
-  xt as getRenderVersion,
-  jn as getSlowestRenders,
-  $n as getUnreadLogCount,
-  wr as isLogStoreConnected,
-  Sr as isPerfStoreConnected,
-  Tn as logAtomSet,
-  Mn as logAtomUpdate,
-  Ln as logCleanupEventTrigger,
-  kn as logComponentMount,
-  Sn as logComponentRender,
-  Cn as logComponentUnmount,
-  In as logEventTrigger,
-  _n as markLogsRead,
-  De as notifyRender,
-  mn as onLogEntry,
-  Dn as onPerfEntry,
-  he as recordRender,
-  Fe as registerComponent,
-  Ke as renderAtomsViewer,
-  Ut as renderComponentInspector,
-  un as renderComponentList,
-  hn as renderComponentTree,
-  gn as renderHeader,
-  ne as renderHooksViewer,
-  Pn as renderLogsViewer,
-  Mr as renderMatesDevTools,
-  Yn as renderPerfViewer,
-  Xe as renderPropsViewer,
-  qe as renderScopesViewer,
-  Qe as renderUseStateViewer,
-  O as renderValueTree,
-  _r as renderValueTreeEntries,
-  te as setValueTreeRenderCallback,
-  Cr as startRenderTiming,
+  Bn as clearLogs,
+  Jn as clearPerfData,
+  Sn as connectLogStore,
+  Wn as connectPerfStore,
+  Ar as destroyDevTools,
+  Yr as destroyMatesDevTools,
+  $t as devToolsEvent,
+  kn as disconnectLogStore,
+  Gn as disconnectPerfStore,
+  oe as getAllComponents,
+  nt as getComponentDepth,
+  qe as getComponentGroups,
+  rt as getComponentName,
+  Or as getComponentsByView,
+  jr as getLogCount,
+  Tn as getLogs,
+  Xn as getPerfSummaries,
+  Gr as getRecentTimings,
+  _t as getRenderVersion,
+  qn as getSlowestRenders,
+  Mn as getUnreadLogCount,
+  Dr as isLogStoreConnected,
+  Vr as isPerfStoreConnected,
+  Rn as logAtomSet,
+  zn as logAtomUpdate,
+  Fn as logCleanupEventTrigger,
+  Ln as logComponentMount,
+  En as logComponentRender,
+  An as logComponentUnmount,
+  Pn as logEventTrigger,
+  In as markLogsRead,
+  Ye as notifyRender,
+  wn as onLogEntry,
+  Yn as onPerfEntry,
+  ve as recordRender,
+  Ge as registerComponent,
+  on as renderAtomsViewer,
+  Qt as renderComponentInspector,
+  bn as renderComponentList,
+  $n as renderComponentTree,
+  _n as renderHeader,
+  ae as renderHooksViewer,
+  Vn as renderLogsViewer,
+  Ur as renderMatesDevTools,
+  Zn as renderPerfViewer,
+  en as renderPropsViewer,
+  nn as renderScopesViewer,
+  cn as renderUseStateViewer,
+  N as renderValueTree,
+  Nr as renderValueTreeEntries,
+  ce as setValueTreeRenderCallback,
+  Wr as startRenderTiming,
   r as styles,
-  Oe as unregisterComponent
+  Ue as unregisterComponent
 };