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

package/dist/mates-devtools.es.js

@@ -1,5 +1,5 @@
-import { keyframes as Ie, globalCSS as Be, event as Le, html as a, nothing as k, repeat as T, atom as Kt, effect as Qt, x as Ee, render as Zt, themeAtom as xt, isDevToolsInstalled as Ae, installDevToolsHooks as Re, interceptBefore as ze, interceptAfter as Pe, interceptError as He } from "mates";
-const te = "selected", Fe = "selected", Oe = Ie("mates-dt-flash", {
+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", {
   "0%": { background: "var(--dt-flash-bg)", color: "#fff" },
   "100%": { background: "transparent", color: "var(--dt-text-muted)" }
 }), ot = {
@@ -12,7 +12,7 @@ const te = "selected", Fe = "selected", Oe = Ie("mates-dt-flash", {
   "&::-webkit-scrollbar-thumb:hover": {
     background: "var(--dt-scrollbar-hover)"
   }
-}, r = Be({
+}, r = Te({
   // ─── Floating Action Button ───────────────────────────────────────────────
   fab: {
     position: "fixed",
@@ -600,7 +600,7 @@ const te = "selected", Fe = "selected", Oe = Ie("mates-dt-flash", {
     transition: "background 0.1s, color 0.1s"
   },
   highlightFlash: {
-    animation: `${Oe} 0.6s ease forwards`
+    animation: `${He} 0.6s ease forwards`
   },
   // ─── Logs tab ─────────────────────────────────────────────────────────────
   logsPanel: {
@@ -808,33 +808,33 @@ const te = "selected", Fe = "selected", Oe = Ie("mates-dt-flash", {
     color: "var(--dt-text-dim)",
     marginLeft: "5px"
   }
-}), zt = /* @__PURE__ */ new Set(), lt = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), vt = Le("devtools");
-function De(t, e) {
+}), At = /* @__PURE__ */ new Set(), lt = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), bt = Me("devtools");
+function Fe(t, e) {
   try {
-    zt.add(t);
+    At.add(t);
     let n = lt.get(e);
-    n || (n = /* @__PURE__ */ new Set(), lt.set(e, n)), n.add(t), dt.set(t, 1), vt.trigger({ type: "mount", component: t });
+    n || (n = /* @__PURE__ */ new Set(), lt.set(e, n)), n.add(t), dt.set(t, 1), bt.trigger({ type: "mount", component: t });
   } catch {
   }
 }
-function Ne(t, e) {
+function Oe(t, e) {
   try {
-    if (zt.delete(t), e) {
+    if (At.delete(t), e) {
       const n = lt.get(e);
       n && n.delete(t);
     }
-    vt.trigger({ type: "unmount", component: t });
+    bt.trigger({ type: "unmount", component: t });
   } catch {
   }
 }
-function je(t) {
+function De(t) {
   try {
     const e = dt.get(t) ?? 0;
-    dt.set(t, e + 1), vt.trigger({ type: "render", component: t });
+    dt.set(t, e + 1), bt.trigger({ type: "render", component: t });
   } catch {
   }
 }
-function $t(t) {
+function xt(t) {
   try {
     return dt.get(t) ?? 0;
   } catch {
@@ -848,16 +848,16 @@ function Z(t) {
   }
   return 0;
 }
-function It(t) {
+function Tt(t) {
   try {
     return t._parentComponent ?? null;
   } catch {
   }
   return null;
 }
-function ee() {
+function Qt() {
   try {
-    return Array.from(zt).filter((t) => {
+    return Array.from(At).filter((t) => {
       const e = t._view || t.oldView;
       return !e?.__devtools__ && !e?.skipDevToolsRender;
     });
@@ -865,7 +865,7 @@ function ee() {
   }
   return [];
 }
-function Cr(t) {
+function $r(t) {
   try {
     const e = lt.get(t);
     return e ? Array.from(e) : [];
@@ -880,18 +880,18 @@ function tt(t) {
   }
   return "";
 }
-function Ve(t) {
+function Ne(t) {
   try {
     return t._view || t.oldView || null;
   } catch {
   }
   return null;
 }
-function We() {
+function je() {
   try {
-    const t = ee(), e = /* @__PURE__ */ new Map();
+    const t = Qt(), e = /* @__PURE__ */ new Map();
     for (const o of t) {
-      const i = Ve(o);
+      const i = Ne(o);
       if (!i) continue;
       let c = e.get(i);
       c || (c = [], e.set(i, c)), c.push(o);
@@ -933,61 +933,61 @@ 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;"
-}, Wt = /* @__PURE__ */ new WeakMap();
-let ne = null;
-function re(t) {
+}, jt = /* @__PURE__ */ new WeakMap();
+let Zt = null;
+function te(t) {
   try {
-    ne = t;
+    Zt = t;
   } catch {
   }
 }
-function oe(t) {
+function ee(t) {
   try {
-    let e = Wt.get(t);
-    return e || (e = /* @__PURE__ */ new Set(), Wt.set(t, e)), e;
+    let e = jt.get(t);
+    return e || (e = /* @__PURE__ */ new Set(), jt.set(t, e)), e;
   } catch {
     return /* @__PURE__ */ new Set();
   }
 }
-function Ge(t, e) {
+function Ve(t, e) {
   try {
-    return oe(t).has(e);
+    return ee(t).has(e);
   } catch {
     return !1;
   }
 }
-function Ye(t, e) {
+function We(t, e) {
   try {
-    const n = oe(t);
+    const n = ee(t);
     n.has(e) ? n.delete(e) : n.add(e);
     try {
-      ne?.();
+      Zt?.();
     } catch {
     }
   } catch {
   }
 }
-function Ue(t) {
+function Ge(t) {
   try {
     return t == null ? !1 : typeof t == "object";
   } catch {
     return !1;
   }
 }
-function _t(t) {
+function vt(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 Gt(t, e = 60) {
+function Vt(t, e = 60) {
   try {
-    const n = _t(t);
+    const n = vt(t);
     if (n === "array") {
       const o = t;
       if (o.length === 0) return "[]";
-      const i = o.slice(0, 5).map((s) => Yt(s)).join(", "), c = o.length > 5 ? ", …" : "";
+      const i = o.slice(0, 5).map((s) => Wt(s)).join(", "), c = o.length > 5 ? ", …" : "";
       return `[${i}${c}]  (${o.length})`;
     }
     if (n === "map")
@@ -1001,7 +1001,7 @@ function Gt(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}: ${Yt(o[l])}`).join(", "), s = i.length > 4 ? ", …" : "", d = `{${c}${s}}`;
+      const c = i.slice(0, 4).map((l) => `${l}: ${Wt(o[l])}`).join(", "), s = i.length > 4 ? ", …" : "", d = `{${c}${s}}`;
       return d.length > e ? d.slice(0, e - 1) + "…}" : d;
     }
     return String(t);
@@ -1009,9 +1009,9 @@ function Gt(t, e = 60) {
     return "";
   }
 }
-function Yt(t) {
+function Wt(t) {
   try {
-    switch (_t(t)) {
+    switch (vt(t)) {
       case "string": {
         const n = t;
         return n.length > 30 ? `"${n.slice(0, 27)}…"` : `"${n}"`;
@@ -1044,9 +1044,9 @@ function Yt(t) {
     return "";
   }
 }
-function Xe(t) {
+function Ye(t) {
   try {
-    switch (_t(t)) {
+    switch (vt(t)) {
       case "string":
         return a`<span style="${f.string}">"${String(t)}"</span>`;
       case "number":
@@ -1076,7 +1076,7 @@ function Xe(t) {
     return a``;
   }
 }
-function qe(t) {
+function Ue(t) {
   try {
     if (t instanceof Map)
       return Array.from(t.entries()).map(([e, n]) => ({
@@ -1135,24 +1135,24 @@ function O(t, e, n, o = "root", i = 0) {
           <span style="${f.preview}">[max depth]</span>
         </div>
       `;
-    const c = Ue(n), s = c && Ge(t, o);
+    const c = Ge(n), s = c && Ve(t, o);
     if (!c)
       return a`
         <div style="${f.row}">
           <span style="${f.toggle}"></span>
           ${e != null ? a`<span style="${f.key}">${e}</span
                 ><span style="${f.colon}">:</span>` : k}
-          ${Xe(n)}
+          ${Ye(n)}
         </div>
       `;
-    const d = s ? qe(n) : [], l = _t(n);
+    const d = s ? Ue(n) : [], l = vt(n);
     return a`
       <div>
         <div
           style="${f.row}cursor:pointer;user-select:none;"
           @click=${(u) => {
       try {
-        u.stopPropagation(), Ye(t, o);
+        u.stopPropagation(), We(t, o);
       } catch {
       }
     }}
@@ -1161,8 +1161,8 @@ function O(t, e, n, o = "root", i = 0) {
           ${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" ? "{" : Gt(n)}</span
-              >` : a`<span style="${f.preview}">${Gt(n)}</span>`}
+                >${l === "array" ? `Array(${n.length})` : l === "object" ? "{" : Vt(n)}</span
+              >` : a`<span style="${f.preview}">${Vt(n)}</span>`}
         </div>
         ${s ? a`
               <div style="${f.children}">
@@ -1189,7 +1189,7 @@ function O(t, e, n, o = "root", i = 0) {
     return a``;
   }
 }
-function Tr(t, e, n = "root") {
+function _r(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;">
@@ -1203,7 +1203,7 @@ function Tr(t, e, n = "root") {
     return a``;
   }
 }
-function Je(t) {
+function Xe(t) {
   try {
     const e = Object.keys(t);
     return e.length === 0 ? a`<div style="color: #777; font-size: 13px;">No props</div>` : a`
@@ -1217,7 +1217,7 @@ function Je(t) {
     return a``;
   }
 }
-function Ke(t) {
+function qe(t) {
   try {
     return !t || t.size === 0 ? a`<div style="color: #777; font-size: 13px;">No scopes</div>` : a`
       ${[...t?.entries() || []].map(
@@ -1285,7 +1285,7 @@ function Ke(t) {
     return a``;
   }
 }
-function Qe(t) {
+function Je(t) {
   try {
     if (!t) return [];
     const e = [];
@@ -1304,9 +1304,9 @@ function Qe(t) {
     return [];
   }
 }
-function Ze(t) {
+function Ke(t) {
   try {
-    const e = Qe(t);
+    const e = Je(t);
     return e.length === 0 ? a`<div style="color: #777; font-size: 13px;">No atoms</div>` : a`
       ${T(
       e,
@@ -1321,7 +1321,7 @@ function Ze(t) {
     return a``;
   }
 }
-function tn(t) {
+function Qe(t) {
   try {
     return !t || t.length === 0 ? a`<div style="color: #777; font-size: 13px;">No state</div>` : a`
       ${t.map((e, n) => {
@@ -1339,7 +1339,7 @@ function tn(t) {
     return a``;
   }
 }
-function en(t) {
+function Ze(t) {
   try {
     const e = {
       onMount: 0,
@@ -1421,7 +1421,7 @@ function en(t) {
     };
   }
 }
-function nn(t, e) {
+function tn(t, e) {
   try {
     return a`
       <span class="${r.hookPill}">
@@ -1433,38 +1433,38 @@ function nn(t, e) {
     return a``;
   }
 }
-function ie(t) {
+function ne(t) {
   try {
-    const e = en(t), n = [];
+    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`
       <div class="${r.hooksSummary}">
-        ${n.map((o) => nn(o.label, o.count))}
+        ${n.map((o) => tn(o.label, o.count))}
       </div>
     `;
   } catch {
     return a``;
   }
 }
-function rn(t, e) {
+function en(t, e) {
   try {
     t.stopPropagation(), at(e);
   } catch {
   }
 }
-function on(t) {
+function nn(t) {
   try {
     const e = [];
-    let n = It(t);
+    let n = Tt(t);
     for (; n; )
-      e.push(tt(n)), n = It(n);
+      e.push(tt(n)), n = Tt(n);
     return e.reverse(), e;
   } catch {
     return [];
   }
 }
-function ce(t) {
+function re(t) {
   try {
-    const e = on(t), n = tt(t);
+    const e = nn(t), n = tt(t);
     if (e.length === 0)
       return a`
         <div class="${r.inspectorBreadcrumb}">
@@ -1489,28 +1489,28 @@ function ce(t) {
     return a``;
   }
 }
-function ae(t) {
+function oe(t) {
   try {
     return a`
       <div class="${r.instanceDetails}">
         <div class="${r.sectionHeader}">Props</div>
-        ${Je(t._props || {})}
+        ${Xe(t._props || {})}
 
         <div class="${r.sectionHeader}">State</div>
-        ${tn(t._useStates)}
+        ${Qe(t._useStates)}
 
         <div class="${r.sectionHeader}">Atoms</div>
-        ${Ze(t.cleanups)}
+        ${Ke(t.cleanups)}
 
         <div class="${r.sectionHeader}">Scopes</div>
-        ${Ke(t.scopes)}
+        ${qe(t.scopes)}
       </div>
     `;
   } catch {
     return a``;
   }
 }
-function Ut() {
+function Gt() {
   try {
     return a`
       <div class="${r.inspector}">
@@ -1521,12 +1521,12 @@ function Ut() {
     return a``;
   }
 }
-function Xt(t) {
+function Yt(t) {
   try {
-    const e = tt(t), n = t.componentId, o = Z(t), i = $t(t);
+    const e = tt(t), n = t.componentId, o = Z(t), i = xt(t);
     return a`
       <div class="${r.inspector}">
-        ${ce(t)}
+        ${re(t)}
         <div class="${r.inspectorTitle}">
           <span>${e}</span>
           <span class="${r.instanceCount}">
@@ -1537,7 +1537,7 @@ function Xt(t) {
             style="opacity: 1;"
             @click=${(c) => {
       try {
-        rn(c, t);
+        en(c, t);
       } catch {
       }
     }}
@@ -1560,14 +1560,14 @@ function Xt(t) {
           </button>
         </div>
 
-        ${ie(t)} ${ae(t)}
+        ${ne(t)} ${oe(t)}
       </div>
     `;
   } catch {
     return a``;
   }
 }
-function cn(t, e, n, o) {
+function rn(t, e, n, o) {
   try {
     const { name: i, instances: c } = t;
     return a`
@@ -1584,11 +1584,11 @@ function cn(t, e, n, o) {
       c,
       (s) => s.componentId,
       (s) => {
-        const d = s.componentId, l = Z(s), u = $t(s), y = e === d;
+        const d = s.componentId, l = Z(s), u = xt(s), y = e === d;
         return a`
                 <li class="${r.instanceGroup}">
                   <div
-                    class="${r.instanceItem} ${y ? Fe : ""}"
+                    class="${r.instanceItem} ${y ? Pe : ""}"
                     @click=${() => {
           try {
             n(d);
@@ -1634,8 +1634,8 @@ function cn(t, e, n, o) {
                     </button>
                   </div>
                   ${y ? a`
-                        ${ce(s)} ${ie(s)}
-                        ${ae(s)}
+                        ${re(s)} ${ne(s)}
+                        ${oe(s)}
                       ` : k}
                 </li>
               `;
@@ -1648,24 +1648,24 @@ function cn(t, e, n, o) {
     return a``;
   }
 }
-function qt(t) {
+function Ut(t) {
   try {
     if ("selectedComponent" in t && t.selectedComponent !== void 0)
-      return t.selectedComponent ? Xt(t.selectedComponent) : Ut();
+      return t.selectedComponent ? Yt(t.selectedComponent) : Gt();
     const { selectedGroup: e, selectedInstanceId: n, onSelectInstance: o, onHighlight: i } = t;
-    return e ? e.instances.length === 1 ? Xt(e.instances[0]) : cn(
+    return e ? e.instances.length === 1 ? Yt(e.instances[0]) : rn(
       e,
       n,
       o,
       i
-    ) : Ut();
+    ) : Gt();
   } catch {
     return a``;
   }
 }
 const I = /* @__PURE__ */ new Set();
 let V = null, W = null, G = null, Y = null, ut = !1, pt = !1;
-const ft = Kt(0);
+const ft = qt(0);
 ft.skipDevToolsLog = !0;
 function A() {
   try {
@@ -1681,7 +1681,7 @@ function U(t) {
     pt = !1;
   }
 }
-function an() {
+function on() {
   try {
     if (ut) return;
     ut = !0, V = window.setTimeout, W = window.setInterval, G = window.clearTimeout, Y = window.clearInterval;
@@ -1734,23 +1734,23 @@ function an() {
   } catch {
   }
 }
-function sn() {
+function cn() {
   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();
   } catch {
   }
 }
-const St = /* @__PURE__ */ new WeakMap();
-let ln = 0;
-function dn(t) {
-  return St.has(t) || St.set(t, `mdt-hl-${++ln}`), St.get(t);
+const wt = /* @__PURE__ */ new WeakMap();
+let an = 0;
+function sn(t) {
+  return wt.has(t) || wt.set(t, `mdt-hl-${++an}`), wt.get(t);
 }
-function se(t, e, n) {
+function ie(t, e, n) {
   try {
     const o = n.get(e), i = o !== void 0 && o !== t;
     n.set(e, t);
-    const c = dn(e);
+    const c = sn(e);
     return i && U(
       () => setTimeout(() => {
         try {
@@ -1770,13 +1770,13 @@ function se(t, e, n) {
     return a``;
   }
 }
-const un = /* @__PURE__ */ new WeakMap();
-let Ct = "";
-function pn(t) {
+const ln = /* @__PURE__ */ new WeakMap();
+let kt = "";
+function dn(t) {
   try {
     let e = 0;
     for (const n of t.instances) {
-      const o = $t(n);
+      const o = xt(n);
       o > e && (e = o);
     }
     return e;
@@ -1784,7 +1784,7 @@ function pn(t) {
     return 0;
   }
 }
-function Tt(t) {
+function St(t) {
   try {
     let e = 1 / 0;
     for (const n of t.instances) {
@@ -1796,7 +1796,7 @@ function Tt(t) {
     return 0;
   }
 }
-function fn({
+function un({
   groups: t,
   selectedViewFn: e,
   onSelectGroup: n,
@@ -1804,12 +1804,12 @@ function fn({
   renderCallback: i
 }) {
   try {
-    const c = Ct.trim().toLowerCase(), d = [...c ? t.filter((u) => u.name.toLowerCase().includes(c)) : t].sort((u, y) => {
-      const g = Tt(u), x = Tt(y);
-      return g - x || u.name.localeCompare(y.name);
+    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);
     }), l = (u) => {
       try {
-        Ct = u.target.value, i();
+        kt = u.target.value, i();
       } catch {
       }
     };
@@ -1820,7 +1820,7 @@ function fn({
             class="${r.componentSearch}"
             type="text"
             placeholder="Search components…"
-            .value=${Ct}
+            .value=${kt}
             @input=${l}
           />
         </div>
@@ -1832,10 +1832,10 @@ function fn({
       d,
       (u) => u.viewFn,
       (u) => {
-        const y = pn(u), g = e === u.viewFn, x = Tt(u), rt = u.instances.length, jt = u.instances[0];
+        const y = dn(u), g = e === u.viewFn, b = St(u), rt = u.instances.length, Dt = u.instances[0];
         return a`
                       <li
-                        class="${r.componentItem} ${g ? te : ""}"
+                        class="${r.componentItem} ${g ? Kt : ""}"
                         @click=${() => {
           try {
             n(u.viewFn);
@@ -1843,10 +1843,10 @@ function fn({
           }
         }}
                       >
-                        ${se(
+                        ${ie(
           y,
-          jt,
-          un
+          Dt,
+          ln
         )}
                         <span class="${r.componentName}"
                           >${u.name}</span
@@ -1857,13 +1857,13 @@ function fn({
                             >` : ""}
                         <span
                           class="${r.componentBadge} ${g ? r.componentBadgeSelected : ""}"
-                          >depth ${x}</span
+                          >depth ${b}</span
                         >
                         <button
                           class="${r.componentHighlightBtn} ${g ? r.componentHighlightBtnSelected : ""}"
-                          @click=${(Vt) => {
+                          @click=${(Nt) => {
           try {
-            Vt.stopPropagation(), o(jt);
+            Nt.stopPropagation(), o(Dt);
           } catch {
           }
         }}
@@ -1898,8 +1898,8 @@ function fn({
     return a``;
   }
 }
-const hn = /* @__PURE__ */ new WeakMap(), Mt = /* @__PURE__ */ new WeakSet();
-function gn(t) {
+const pn = /* @__PURE__ */ new WeakMap(), Ct = /* @__PURE__ */ new WeakSet();
+function fn(t) {
   try {
     const e = new Set(t), n = /* @__PURE__ */ new Map();
     for (const c of t)
@@ -1912,7 +1912,7 @@ function gn(t) {
       });
     const o = [];
     for (const c of t) {
-      const s = n.get(c), d = It(c);
+      const s = n.get(c), d = Tt(c);
       if (d && e.has(d)) {
         const l = n.get(d);
         if (l) {
@@ -1935,11 +1935,11 @@ function gn(t) {
     return [];
   }
 }
-function le(t, e, n, o, i) {
+function ce(t, e, n, o, i) {
   try {
-    const c = t.children.length > 0, s = Mt.has(t.component), d = $t(t.component), l = e === t.id, u = t.depth * 16, y = (x) => {
+    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) => {
       try {
-        x.stopPropagation(), s ? Mt.delete(t.component) : Mt.add(t.component), i();
+        b.stopPropagation(), s ? Ct.delete(t.component) : Ct.add(t.component), i();
       } catch {
       }
     }, g = () => {
@@ -1950,23 +1950,23 @@ function le(t, e, n, o, i) {
     };
     return a`
       <li
-        class="${r.componentItem} ${l ? te : ""}"
+        class="${r.componentItem} ${l ? Kt : ""}"
         style="margin-left: ${u}px;"
         @click=${g}
       >
         ${c ? a`<span class="${r.treeToggle}" @click=${y}
               >${s ? "▶" : "▼"}</span
             >` : a`<span class="${r.treeLeaf}">·</span>`}
-        ${se(d, t.component, hn)}
+        ${ie(d, t.component, pn)}
         <span class="${r.componentName}">${t.name}</span>
         <span class="${r.componentBadge}"
           >#${t.id.toString().slice(2, 6)}</span
         >
         <button
           class="${r.componentHighlightBtn}"
-          @click=${(x) => {
+          @click=${(b) => {
       try {
-        x.stopPropagation(), o(t.component);
+        b.stopPropagation(), o(t.component);
       } catch {
       }
     }}
@@ -1992,9 +1992,9 @@ function le(t, e, n, o, i) {
       </li>
       ${c && !s ? T(
       t.children,
-      (x) => x.component,
-      (x) => le(
-        x,
+      (b) => b.component,
+      (b) => ce(
+        b,
         e,
         n,
         o,
@@ -2006,14 +2006,14 @@ function le(t, e, n, o, i) {
     return a``;
   }
 }
-function mn({
+function hn({
   selectedComponentId: t,
   onSelectComponent: e,
   onHighlight: n,
   renderCallback: o
 }) {
   try {
-    const i = ee(), c = gn(i);
+    const i = Qt(), c = fn(i);
     return a`
       <div class="${r.content}">
         ${c.length === 0 ? a`<div class="${r.empty}">No components mounted</div>` : a`
@@ -2021,7 +2021,7 @@ function mn({
                 ${T(
       c,
       (s) => s.component,
-      (s) => le(
+      (s) => ce(
         s,
         t,
         e,
@@ -2037,7 +2037,7 @@ function mn({
     return a``;
   }
 }
-const de = () => (Qt(() => {
+const ae = () => (Ie(() => {
   try {
     console.log(ft());
   } catch {
@@ -2049,8 +2049,8 @@ const de = () => (Qt(() => {
     return a``;
   }
 });
-de.skipDevToolsRender = !0;
-function bn({
+ae.skipDevToolsRender = !0;
+function gn({
   activeTab: t,
   onTabChange: e,
   onMinimise: n,
@@ -2102,7 +2102,7 @@ function bn({
           </nav>
         </div>
         <div>
-          <button style="margin-left: 10px">${Ee(de)}</button>
+          <button style="margin-left: 10px">${Be(ae)}</button>
         </div>
         <div class="${r.controls}">
           <button
@@ -2137,7 +2137,7 @@ function bn({
   }
 }
 let it = null;
-function yn(t) {
+function mn(t) {
   try {
     return it = t, () => {
       it === t && (it = null);
@@ -2147,28 +2147,28 @@ function yn(t) {
   return () => {
   };
 }
-let $ = !1;
-function xn() {
-  $ = !0;
+let v = !1;
+function yn() {
+  v = !0;
 }
-function vn() {
-  $ = !1;
+function bn() {
+  v = !1;
 }
-function Mr() {
-  return $;
+function wr() {
+  return v;
 }
-const $n = 100, R = [];
-let ue = 1, wt = 0;
-const pe = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
+const xn = 100, R = [];
+let se = 1, $t = 0;
+const le = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
 function S(t, e, n) {
   try {
-    R.length >= $n && R.shift(), R.push({
-      id: ue++,
+    R.length >= xn && R.shift(), R.push({
+      id: se++,
       ts: performance.now(),
       category: t,
       label: e,
       detail: n
-    }), wt++;
+    }), $t++;
     try {
       it?.();
     } catch {
@@ -2176,7 +2176,7 @@ function S(t, e, n) {
   } catch {
   }
 }
-function Pt(t) {
+function Rt(t) {
   try {
     if (t === void 0) return "undefined";
     if (t === null) return "null";
@@ -2191,70 +2191,70 @@ function Pt(t) {
   }
   return "";
 }
-function _n() {
+function vn() {
   return R;
 }
-function Ir() {
+function kr() {
   return R.length;
 }
-function wn() {
-  return wt;
+function $n() {
+  return $t;
 }
-function kn() {
+function _n() {
   try {
-    wt = 0;
+    $t = 0;
   } catch {
   }
 }
-function Sn() {
+function wn() {
   try {
-    R.length = 0, wt = 0, ue = 1;
+    R.length = 0, $t = 0, se = 1;
   } catch {
   }
 }
-function Cn(t) {
+function kn(t) {
   try {
-    if (!$) return;
+    if (!v) return;
     S("mount", t, "mounted");
   } catch {
   }
 }
-function Tn(t, e) {
+function Sn(t, e) {
   try {
-    if (!$) return;
+    if (!v) return;
     S("update", t, `updated (${e.toFixed(2)}ms)`);
   } catch {
   }
 }
-function Mn(t) {
+function Cn(t) {
   try {
-    if (!$) return;
+    if (!v) return;
     S("cleanup", t, "cleaned up");
   } catch {
   }
 }
-function In(t, e) {
+function Tn(t, e) {
   try {
-    if (!$) return;
-    S("setter", t, Pt(e));
+    if (!v) return;
+    S("setter", t, Rt(e));
   } catch {
   }
 }
-function Bn(t) {
+function Mn(t) {
   try {
-    if (!$) return;
+    if (!v) return;
     S("action", t);
   } catch {
   }
 }
-function Ln(t, e) {
+function In(t, e) {
   try {
-    if (!$ || pe.has(t)) return;
-    S("event", t, e !== void 0 ? Pt(e) : void 0);
+    if (!v || le.has(t)) return;
+    S("event", t, e !== void 0 ? Rt(e) : void 0);
   } catch {
   }
 }
-const Ht = 80, fe = 120;
+const zt = 80, de = 120;
 function F(t, e) {
   try {
     return t.length > e ? t.slice(0, e - 1) + "…" : t;
@@ -2262,46 +2262,46 @@ function F(t, e) {
   }
   return "";
 }
-function En(t, e, n) {
+function Bn(t, e, n) {
   try {
-    if (!$) return;
+    if (!v) return;
     const o = n ? `pending · ${F(n, 50)}` : "pending";
-    S("fetch", F(`${t} ${e}`, Ht), o);
+    S("fetch", F(`${t} ${e}`, zt), o);
   } catch {
   }
 }
-function he(t, e, n, o) {
+function ue(t, e, n, o) {
   try {
-    if (!$) return;
+    if (!v) return;
     S(
       "fetch",
-      F(`${t} ${e}`, Ht),
-      F(`${n} · ${o.toFixed(0)}ms`, fe)
+      F(`${t} ${e}`, zt),
+      F(`${n} · ${o.toFixed(0)}ms`, de)
     );
   } catch {
   }
 }
-function ge(t, e, n, o) {
+function pe(t, e, n, o) {
   try {
-    if (!$) return;
+    if (!v) return;
     S(
       "fetch",
-      F(`${t} ${e}`, Ht),
+      F(`${t} ${e}`, zt),
       F(
         `error · ${o.toFixed(0)}ms · ${n}`,
-        fe
+        de
       )
     );
   } catch {
   }
 }
-function An(t, e) {
+function Ln(t, e) {
   try {
-    if (!$ || pe.has(t)) return;
+    if (!v || le.has(t)) return;
     S(
       "event",
       `${t} (cleanup)`,
-      e !== void 0 ? Pt(e) : void 0
+      e !== void 0 ? Rt(e) : void 0
     );
   } catch {
   }
@@ -2314,7 +2314,7 @@ const E = {
   action: "#81c784",
   event: "#ffb74d",
   fetch: "#ce93d8"
-}, Rn = {
+}, En = {
   mount: "MNT",
   update: "UPD",
   cleanup: "CLN",
@@ -2323,14 +2323,14 @@ const E = {
   event: "EVT",
   fetch: "NET"
 };
-let _ = "all";
-const zn = {
+let $ = "all";
+const An = {
   all: null,
   lifecycle: ["mount", "update", "cleanup"],
   logs: ["setter", "action", "event"],
   network: ["fetch"]
 };
-function Pn(t) {
+function Rn(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 +2338,9 @@ function Pn(t) {
     return "";
   }
 }
-function Hn() {
+function zn() {
   try {
-    const t = _n(), e = zn[_];
+    const t = vn(), e = An[$];
     if (!e) return t;
     const n = new Set(e);
     return t.filter((o) => n.has(o.category));
@@ -2348,19 +2348,19 @@ function Hn() {
     return [];
   }
 }
-function Fn({ onClear: t, renderCallback: e }) {
+function Pn({ onClear: t, renderCallback: e }) {
   try {
-    kn();
-    const n = Hn();
+    _n();
+    const n = zn();
     return a`
       <div class="${r.logsPanel}">
         <div class="${r.logsToolbar}">
           <div class="${r.logsFilterRow}">
             <button
-              class="${r.logsFilterBtn} ${_ === "all" ? "active" : ""}"
+              class="${r.logsFilterBtn} ${$ === "all" ? "active" : ""}"
               @click=${() => {
       try {
-        _ = "all", e();
+        $ = "all", e();
       } catch {
       }
     }}
@@ -2368,11 +2368,11 @@ function Fn({ onClear: t, renderCallback: e }) {
               All
             </button>
             <button
-              class="${r.logsFilterBtn} ${_ === "lifecycle" ? "active" : ""}"
+              class="${r.logsFilterBtn} ${$ === "lifecycle" ? "active" : ""}"
               style="--mdt-filter-color: ${E.mount}"
               @click=${() => {
       try {
-        _ = _ === "lifecycle" ? "all" : "lifecycle", e();
+        $ = $ === "lifecycle" ? "all" : "lifecycle", e();
       } catch {
       }
     }}
@@ -2380,11 +2380,11 @@ function Fn({ onClear: t, renderCallback: e }) {
               Mounts / Updates
             </button>
             <button
-              class="${r.logsFilterBtn} ${_ === "logs" ? "active" : ""}"
+              class="${r.logsFilterBtn} ${$ === "logs" ? "active" : ""}"
               style="--mdt-filter-color: ${E.setter}"
               @click=${() => {
       try {
-        _ = _ === "logs" ? "all" : "logs", e();
+        $ = $ === "logs" ? "all" : "logs", e();
       } catch {
       }
     }}
@@ -2392,11 +2392,11 @@ function Fn({ onClear: t, renderCallback: e }) {
               Logs
             </button>
             <button
-              class="${r.logsFilterBtn} ${_ === "network" ? "active" : ""}"
+              class="${r.logsFilterBtn} ${$ === "network" ? "active" : ""}"
               style="--mdt-filter-color: ${E.fetch}"
               @click=${() => {
       try {
-        _ = _ === "network" ? "all" : "network", e();
+        $ = $ === "network" ? "all" : "network", e();
       } catch {
       }
     }}
@@ -2410,7 +2410,7 @@ function Fn({ onClear: t, renderCallback: e }) {
               class="${r.button}"
               @click=${() => {
       try {
-        Sn(), t();
+        wn(), t();
       } catch {
       }
     }}
@@ -2429,11 +2429,11 @@ function Fn({ onClear: t, renderCallback: e }) {
       (o) => o.id,
       (o) => a`
                   <div class="${r.logEntry}">
-                    <span class="${r.logTs}">${Pn(o.ts)}</span>
+                    <span class="${r.logTs}">${Rn(o.ts)}</span>
                     <span
                       class="${r.logBadge}"
                       style="background: ${E[o.category]}22; color: ${E[o.category]}; border-color: ${E[o.category]}44;"
-                      >${Rn[o.category]}</span
+                      >${En[o.category]}</span
                     >
                     <span class="${r.logLabel}">${o.label}</span>
                     ${o.detail ? a`<span class="${r.logDetail}"
@@ -2450,24 +2450,24 @@ function Fn({ onClear: t, renderCallback: e }) {
   }
 }
 let et = !1;
-function On() {
+function Hn() {
   try {
     et = !0;
   } catch {
   }
 }
-function Dn() {
+function Fn() {
   try {
     et = !1;
   } catch {
   }
 }
-function Br() {
+function Sr() {
   return et;
 }
-const Nn = 100, Q = /* @__PURE__ */ new Map();
-let me = 1, ct = null;
-function jn(t) {
+const On = 100, Q = /* @__PURE__ */ new Map();
+let fe = 1, ct = null;
+function Dn(t) {
   try {
     return ct = t, () => {
       try {
@@ -2480,18 +2480,18 @@ function jn(t) {
   return () => {
   };
 }
-function be(t, e, n) {
+function he(t, e, n) {
   try {
     if (!et) return;
     const o = {
-      id: me++,
+      id: fe++,
       ts: performance.now(),
       durationMs: n,
       componentName: t,
       instanceId: e
     };
     let i = Q.get(t);
-    i || (i = [], Q.set(t, i)), i.length >= Nn && i.shift(), i.push(o);
+    i || (i = [], Q.set(t, i)), i.length >= On && i.shift(), i.push(o);
     try {
       ct?.();
     } catch {
@@ -2499,18 +2499,18 @@ function be(t, e, n) {
   } catch {
   }
 }
-function Lr(t, e) {
+function Cr(t, e) {
   try {
-    if (!et) return Jt;
+    if (!et) return Xt;
     const n = performance.now();
-    return () => be(t, e, performance.now() - n);
+    return () => he(t, e, performance.now() - n);
   } catch {
   }
-  return Jt;
+  return Xt;
 }
-function Jt() {
+function Xt() {
 }
-function Vn() {
+function Nn() {
   try {
     const t = [];
     for (const [e, n] of Q) {
@@ -2534,7 +2534,7 @@ function Vn() {
   }
   return [];
 }
-function ye() {
+function ge() {
   try {
     const t = [];
     for (const e of Q.values())
@@ -2544,29 +2544,29 @@ function ye() {
   }
   return [];
 }
-function Er(t = 50) {
+function Tr(t = 50) {
   try {
-    const e = ye();
+    const e = ge();
     return e.sort((n, o) => o.ts - n.ts), e.length > t ? e.slice(0, t) : e;
   } catch {
   }
   return [];
 }
-function Wn(t = 20) {
+function jn(t = 20) {
   try {
-    const e = ye();
+    const e = ge();
     return e.sort((n, o) => o.durationMs - n.durationMs), e.length > t ? e.slice(0, t) : e;
   } catch {
   }
   return [];
 }
-function Gn() {
+function Vn() {
   try {
-    Q.clear(), me = 1;
+    Q.clear(), fe = 1;
   } catch {
   }
 }
-Kt(0);
+qt(0);
 function j(t) {
   try {
     return t < 0.01 ? "<0.01ms" : t < 1 ? `${t.toFixed(2)}ms` : t < 10 ? `${t.toFixed(1)}ms` : `${t.toFixed(0)}ms`;
@@ -2574,14 +2574,14 @@ function j(t) {
     return "";
   }
 }
-function xe(t, e) {
+function me(t, e) {
   try {
     return e <= 0 ? 0 : Math.max(2, Math.min(100, t / e * 100));
   } catch {
     return 0;
   }
 }
-function ve(t) {
+function ye(t) {
   try {
     return t < 16 ? "#66bb6a" : t <= 20 ? "#ffb74d" : "#ef5350";
   } catch {
@@ -2589,7 +2589,7 @@ function ve(t) {
   }
 }
 let N = "summary";
-function Yn(t) {
+function Wn(t) {
   try {
     if (t.length === 0)
       return a`<div class="${r.empty}">
@@ -2613,7 +2613,7 @@ function Yn(t) {
       t,
       (n) => n.name,
       (n) => {
-        const o = ve(n.lastMs);
+        const o = ye(n.lastMs);
         return a`
                 <tr class="${r.perfRow}">
                   <td class="${r.perfCell} ${r.perfName}">
@@ -2635,7 +2635,7 @@ function Yn(t) {
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${xe(
+                        style="width: ${me(
           n.totalMs,
           e
         )}%; background: ${o};"
@@ -2656,7 +2656,7 @@ function Yn(t) {
     return a``;
   }
 }
-function Un(t, e) {
+function Gn(t, e) {
   try {
     if (t.length === 0)
       return a`<div class="${r.empty}">
@@ -2677,7 +2677,7 @@ function Un(t, e) {
       t,
       (i) => i.id,
       (i) => {
-        const c = ve(i.durationMs), s = o ? () => {
+        const c = ye(i.durationMs), s = o ? () => {
           try {
             e(i.instanceId);
           } catch {
@@ -2699,7 +2699,7 @@ function Un(t, e) {
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${xe(
+                        style="width: ${me(
           i.durationMs,
           n
         )}%; background: ${c};"
@@ -2717,13 +2717,13 @@ function Un(t, e) {
     return a``;
   }
 }
-function Xn({
+function Yn({
   onClear: t,
   renderCallback: e,
   onNavigateToComponent: n
 }) {
   try {
-    const o = Vn(), i = Wn(30);
+    const o = Nn(), i = jn(30);
     return a`
       <div class="${r.perfPanel}">
         <div class="${r.perfToolbar}">
@@ -2756,7 +2756,7 @@ function Xn({
               class="${r.button}"
               @click=${() => {
       try {
-        Gn(), t();
+        Vn(), t();
       } catch {
       }
     }}
@@ -2768,7 +2768,7 @@ function Xn({
         </div>
 
         <div class="${r.perfContent}">
-          ${N === "summary" ? Yn(o) : Un(i, n ?? null)}
+          ${N === "summary" ? Wn(o) : Gn(i, n ?? null)}
         </div>
       </div>
     `;
@@ -2776,33 +2776,33 @@ function Xn({
     return a``;
   }
 }
-let L = !1, C = !1, X = "components", M = "list", v = null, w = null, b = null, D = [], p = null, m = null, ht = null, z = 0;
-const qn = 150, Jn = 0.8, Kn = 0.5;
+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;
 let B = null;
-function Ft() {
+function Pt() {
   try {
     const t = document.documentElement;
     B === null && (B = parseFloat(getComputedStyle(t).paddingBottom) || 0), t.style.paddingBottom = `${B + z}px`;
   } catch {
   }
 }
-function Ot() {
+function Ht() {
   try {
     if (B === null) return;
     document.documentElement.style.paddingBottom = B === 0 ? "" : `${B}px`, B = null;
   } catch {
   }
 }
-let Dt = !1, $e = 0, _e = 0, gt = !1, q = null, J = null, K = null, P = null, H = null;
-function Qn() {
+let Ft = !1, be = 0, xe = 0, ht = !1, q = null, J = null, K = null, P = null, H = null;
+function Jn() {
   try {
     H !== null && (clearTimeout(H), H = null);
   } catch {
   }
 }
-function mt() {
+function gt() {
   try {
-    Qn(), P && (P.remove(), P = null);
+    Jn(), P && (P.remove(), P = null);
   } catch {
   }
 }
@@ -2819,7 +2819,7 @@ function at(t) {
               P === c && (c.classList.add("fade-out"), H = U(
                 () => setTimeout(() => {
                   try {
-                    P === c && mt();
+                    P === c && gt();
                   } catch {
                   }
                 }, 600)
@@ -2831,7 +2831,7 @@ function at(t) {
       } catch {
       }
     };
-    mt();
+    gt();
     const n = t.firstElementChild ?? t, o = getComputedStyle(n).position, i = o === "fixed" || o === "sticky";
     if (i)
       e();
@@ -2844,42 +2844,42 @@ function at(t) {
   } catch {
   }
 }
-function we() {
+function ve() {
   try {
-    if (v === null) return null;
+    if (x === null) return null;
     for (const t of D)
       for (const e of t.instances)
-        if (e.componentId === v) return e;
+        if (e.componentId === x) return e;
     return null;
   } catch {
   }
   return null;
 }
-function Nt() {
+function Ot() {
   try {
-    return w === null ? null : D.find((t) => t.viewFn === w) ?? null;
+    return _ === null ? null : D.find((t) => t.viewFn === _) ?? null;
   } catch {
   }
   return null;
 }
-function Zn() {
+function Kn() {
   try {
-    if (b === null) return null;
-    const t = Nt();
+    if (m === null) return null;
+    const t = Ot();
     return t ? t.instances.find(
-      (e) => e.componentId === b
+      (e) => e.componentId === m
     ) ?? null : null;
   } catch {
   }
   return null;
 }
-function kt() {
+function _t() {
   try {
-    D = We(), v !== null && !we() && (v = null), w !== null && !Nt() ? (w = null, b = null) : b !== null && !Zn() && (b = null);
+    D = je(), x !== null && !ve() && (x = null), _ !== null && !Ot() ? (_ = null, m = null) : m !== null && !Kn() && (m = null);
   } catch {
   }
 }
-function bt() {
+function mt() {
   try {
     return L && !C;
   } catch {
@@ -2888,61 +2888,61 @@ function bt() {
 }
 function nt() {
   try {
-    return m?.querySelector(`.${r.panel}`) ?? null;
+    return w?.querySelector(`.${r.panel}`) ?? null;
   } catch {
   }
   return null;
 }
-function tr(t) {
+function Qn(t) {
   try {
-    v = v === t ? null : t, h();
+    x = x === t ? null : t, h();
   } catch {
   }
 }
-function er(t) {
+function Zn(t) {
   try {
-    w === t ? (w = null, b = null) : (w = t, b = null), h();
+    _ === t ? (_ = null, m = null) : (_ = t, m = null), h();
   } catch {
   }
 }
-function nr(t) {
+function tr(t) {
   try {
-    b = b === t ? null : t, h();
+    m = m === t ? null : t, h();
   } catch {
   }
 }
-function rr(t) {
+function er(t) {
   try {
-    v = t, X = "components", kt(), w = null, b = null;
+    x = t, X = "components", _t(), _ = null, m = null;
     for (const e of D) {
       for (const n of e.instances)
         if (n.componentId === t) {
-          w = e.viewFn, b = t;
+          _ = e.viewFn, m = t;
           break;
         }
-      if (w) break;
+      if (_) break;
     }
     h();
   } catch {
   }
 }
-function or(t) {
+function nr(t) {
   try {
     X = t, h();
   } catch {
   }
 }
-function ir() {
+function rr() {
   try {
     if (!L || C) return;
-    C = !0, nt()?.classList.remove(r.panelVisible), p && (p.style.display = ""), Ot();
+    C = !0, nt()?.classList.remove(r.panelVisible), p && (p.style.display = ""), Ht();
   } catch {
   }
 }
-function cr() {
+function or() {
   try {
     if (!C) return;
-    C = !1, p && (p.style.display = "none"), kt(), h(), Ft(), requestAnimationFrame(() => {
+    C = !1, p && (p.style.display = "none"), _t(), h(), Pt(), requestAnimationFrame(() => {
       try {
         requestAnimationFrame(() => {
           try {
@@ -2956,9 +2956,9 @@ function cr() {
   } catch {
   }
 }
-function ar() {
+function ir() {
   try {
-    L = !1, C = !1, v = null, ke(), mt(), Ot();
+    L = !1, C = !1, x = null, $e(), gt(), Ht();
     const t = nt();
     if (t) {
       t.classList.remove(r.panelVisible);
@@ -2966,21 +2966,21 @@ function ar() {
       const n = () => {
         try {
           if (e) return;
-          e = !0, t.removeEventListener("transitionend", n), Lt();
+          e = !0, t.removeEventListener("transitionend", n), It();
         } catch {
         }
       };
       t.addEventListener("transitionend", n, { once: !0 }), U(() => setTimeout(n, 350));
     } else
-      Lt();
+      It();
     p && (p.style.display = "");
   } catch {
   }
 }
-function sr() {
+function cr() {
   try {
     if (L) return;
-    L = !0, C = !1, p && (p.style.display = "none"), z = Math.round(window.innerHeight * Kn), lr(), gr(), kt(), h(), Ft(), requestAnimationFrame(() => {
+    L = !0, C = !1, p && (p.style.display = "none"), z = Math.round(window.innerHeight * qn), ar(), dr(), _t(), h(), Pt(), requestAnimationFrame(() => {
       try {
         requestAnimationFrame(() => {
           try {
@@ -2994,34 +2994,34 @@ function sr() {
   } catch {
   }
 }
-function lr() {
+function ar() {
   try {
-    On(), q || (q = yn(() => {
+    Hn(), q || (q = mn(() => {
       try {
-        bt() && h();
+        mt() && h();
       } catch {
       }
-    })), J || (J = jn(() => {
+    })), J || (J = Dn(() => {
       try {
-        bt() && h();
+        mt() && h();
       } catch {
       }
     }));
   } catch {
   }
 }
-function ke() {
+function $e() {
   try {
-    Dn(), q && (q(), q = null), J && (J(), J = null);
+    Fn(), q && (q(), q = null), J && (J(), J = null);
   } catch {
   }
 }
-const Bt = "mates-devtools-vars";
-function dr() {
+const Mt = "mates-devtools-vars";
+function sr() {
   try {
-    if (document.getElementById(Bt)) return;
+    if (document.getElementById(Mt)) return;
     const t = document.createElement("style");
-    t.id = Bt, t.textContent = `
+    t.id = Mt, t.textContent = `
     #mates-devtools {
       --dt-bg:           #1a1a1a;
       --dt-bg-2:         #222222;
@@ -3053,42 +3053,8 @@ function dr() {
       --dt-flash-bg:     rgba(0,180,100,0.45);
     }
 
-    @media (prefers-color-scheme: light) {
-      #mates-devtools,
-      #mates-devtools-fab {
-        --dt-bg:           #f5f5f5;
-        --dt-bg-2:         #ebebeb;
-        --dt-bg-3:         #e0e0e0;
-        --dt-bg-input:     #ffffff;
-        --dt-bg-hover:     #e8e8e8;
-        --dt-bg-selected:  #dbeafe;
-        --dt-bg-active:    rgba(59,130,246,0.12);
-        --dt-border:       #cccccc;
-        --dt-border-2:     #d4d4d4;
-        --dt-border-3:     #e4e4e4;
-        --dt-border-selected: #3b82f6;
-        --dt-text:         #333333;
-        --dt-text-bright:  #111111;
-        --dt-text-muted:   #666666;
-        --dt-text-dim:     #888888;
-        --dt-text-dimmer:  #999999;
-        --dt-text-selected: #1d4ed8;
-        --dt-accent:       #0077e6;
-        --dt-accent-2:     #3b82f6;
-        --dt-scrollbar:    #bbbbbb;
-        --dt-scrollbar-hover: #999999;
-        --dt-prop-key:     #0070c1;
-        --dt-prop-val:     #a31515;
-        --dt-scope-name:   #007f6a;
-        --dt-hook-count:   #0070c1;
-        --dt-instance-border: #3b82f6;
-        --dt-instance-bg:  #f0f4ff;
-        --dt-flash-bg:     rgba(0,160,90,0.3);
-      }
-    }
-
-    #mates-devtools[data-theme="light"],
-    #mates-devtools-fab[data-theme="light"] {
+    :root[data-theme="light"] #mates-devtools,
+    :root[data-theme="light"] #mates-devtools-fab {
       --dt-bg:           #f5f5f5;
       --dt-bg-2:         #ebebeb;
       --dt-bg-3:         #e0e0e0;
@@ -3122,55 +3088,29 @@ function dr() {
   } catch {
   }
 }
-function ur() {
-  try {
-    document.getElementById(Bt)?.remove();
-  } catch {
-  }
-}
-function pr() {
-  try {
-    const t = xt.resolved;
-    p && (p.dataset.theme = t), m && (m.dataset.theme = t);
-  } catch {
-  }
-}
-function fr() {
-  try {
-    if (ht) return;
-    pr(), ht = Qt(() => {
-      try {
-        const t = xt.resolved;
-        p && (p.dataset.theme = t), m && (m.dataset.theme = t);
-      } catch {
-      }
-    });
-  } catch {
-  }
-}
-function hr() {
+function lr() {
   try {
-    ht?.(), ht = null;
+    document.getElementById(Mt)?.remove();
   } catch {
   }
 }
-function gr() {
+function dr() {
   try {
-    if (m) return;
-    dr(), m = document.createElement("div"), m.id = "mates-devtools", m.dataset.theme = xt.resolved, document.body.appendChild(m);
+    if (w) return;
+    sr(), w = document.createElement("div"), w.id = "mates-devtools", document.body.appendChild(w);
   } catch {
   }
 }
-function Lt() {
+function It() {
   try {
-    if (!m) return;
-    Zt(a``, m), m.remove(), m = null, ur();
+    if (!w) return;
+    Jt(a``, w), w.remove(), w = null, lr();
   } catch {
   }
 }
 function h() {
   try {
-    if (!m || !L) return;
+    if (!w || !L) return;
     const t = (() => {
       try {
         switch (X) {
@@ -3236,39 +3176,39 @@ function h() {
                       </svg>
                     </button>
                   </div>
-                  ${M === "list" ? fn({
+                  ${M === "list" ? un({
               groups: D,
-              selectedViewFn: w,
-              onSelectGroup: er,
+              selectedViewFn: _,
+              onSelectGroup: Zn,
               onHighlight: (e) => at(e),
               renderCallback: h
-            }) : mn({
-              selectedComponentId: v,
-              onSelectComponent: tr,
+            }) : hn({
+              selectedComponentId: x,
+              onSelectComponent: Qn,
               onHighlight: (e) => at(e),
               renderCallback: h
             })}
                 </div>
-                ${qt(M === "list" ? {
-              selectedGroup: Nt(),
-              selectedInstanceId: b,
-              onSelectInstance: nr,
+                ${Ut(M === "list" ? {
+              selectedGroup: Ot(),
+              selectedInstanceId: m,
+              onSelectInstance: tr,
               onHighlight: (e) => at(e)
             } : {
-              selectedComponent: we()
+              selectedComponent: ve()
             })}
               </div>
             `;
           case "logs":
-            return Fn({
+            return Pn({
               onClear: h,
               renderCallback: h
             });
           case "performance":
-            return Xn({
+            return Yn({
               onClear: h,
               renderCallback: h,
-              onNavigateToComponent: rr
+              onNavigateToComponent: er
             });
           default:
             return a``;
@@ -3277,37 +3217,37 @@ function h() {
       }
       return a``;
     })();
-    Zt(
+    Jt(
       a`
         <div class="${r.panel}" style="height: ${z}px;">
-          <div class="${r.resizeHandle}" @mousedown=${mr}></div>
-          ${bn({
+          <div class="${r.resizeHandle}" @mousedown=${ur}></div>
+          ${gn({
         activeTab: X,
-        onTabChange: or,
-        onMinimise: ir,
-        onClose: ar,
-        unreadLogCount: X === "logs" ? 0 : wn()
+        onTabChange: nr,
+        onMinimise: rr,
+        onClose: ir,
+        unreadLogCount: X === "logs" ? 0 : $n()
       })}
           ${t}
         </div>
       `,
-      m
+      w
     );
   } catch {
   }
 }
-function mr(t) {
+function ur(t) {
   try {
     t.preventDefault();
     const e = t.clientY, n = z, o = (c) => {
       try {
-        const s = window.innerHeight * Jn;
+        const s = window.innerHeight * Xn;
         z = Math.max(
-          qn,
+          Un,
           Math.min(s, n + (e - c.clientY))
         );
         const d = nt();
-        d && (d.style.height = `${z}px`), Ft();
+        d && (d.style.height = `${z}px`), Pt();
       } catch {
       }
     }, i = () => {
@@ -3320,95 +3260,95 @@ function mr(t) {
   } catch {
   }
 }
-function br() {
+function pr() {
   try {
     if (p) return;
-    p = document.createElement("div"), p.id = "mates-devtools-fab", p.className = r.fab, p.dataset.theme = xt.resolved, 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", Ce), p.addEventListener("click", Se), 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", we), p.addEventListener("click", _e), document.body.appendChild(p);
   } catch {
   }
 }
-function yr() {
+function fr() {
   try {
     if (!p) return;
-    p.removeEventListener("mousedown", Ce), p.removeEventListener("click", Se), p.remove(), p = null;
+    p.removeEventListener("mousedown", we), p.removeEventListener("click", _e), p.remove(), p = null;
   } catch {
   }
 }
-function Se() {
+function _e() {
   try {
-    if (gt) {
-      gt = !1;
+    if (ht) {
+      ht = !1;
       return;
     }
-    C ? cr() : sr();
+    C ? or() : cr();
   } catch {
   }
 }
-function Ce(t) {
+function we(t) {
   try {
-    t.preventDefault(), Dt = !0, gt = !1;
+    t.preventDefault(), Ft = !0, ht = !1;
     const e = p.getBoundingClientRect();
-    $e = t.clientX - e.left, _e = t.clientY - e.top, p.classList.add(r.fabDragging), document.addEventListener("mousemove", Te), document.addEventListener("mouseup", Me);
+    be = t.clientX - e.left, xe = t.clientY - e.top, p.classList.add(r.fabDragging), document.addEventListener("mousemove", ke), document.addEventListener("mouseup", Se);
   } catch {
   }
 }
-function Te(t) {
+function ke(t) {
   try {
-    if (!Dt || !p) return;
-    gt = !0, p.style.bottom = "auto", p.style.right = "auto", p.style.left = `${Math.max(0, Math.min(window.innerWidth - 48, t.clientX - $e))}px`, p.style.top = `${Math.max(0, Math.min(window.innerHeight - 48, t.clientY - _e))}px`;
+    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`;
   } catch {
   }
 }
-function Me() {
+function Se() {
   try {
-    Dt = !1, p?.classList.remove(r.fabDragging), document.removeEventListener("mousemove", Te), document.removeEventListener("mouseup", Me);
+    Ft = !1, p?.classList.remove(r.fabDragging), document.removeEventListener("mousemove", ke), document.removeEventListener("mouseup", Se);
   } catch {
   }
 }
-function xr() {
+function hr() {
   try {
-    an(), fr(), br(), K || (K = vt.__subscribe((t) => {
+    on(), pr(), K || (K = bt.__subscribe((t) => {
       try {
-        t?.type === "unmount" && (v !== null && t.component.componentId === v && (v = null), b !== null && t.component.componentId === b && (b = null)), kt(), bt() && h();
+        t?.type === "unmount" && (x !== null && t.component.componentId === x && (x = null), m !== null && t.component.componentId === m && (m = null)), _t(), mt() && h();
       } catch {
       }
-    })), re(() => {
+    })), te(() => {
       try {
-        bt() && h();
+        mt() && h();
       } catch {
       }
     });
   } catch {
   }
 }
-function vr() {
+function gr() {
   try {
-    sn(), re(null), mt(), ke(), vn(), Ot(), K && (K(), K = null), hr(), L = !1, C = !1, M = "list", v = null, w = null, b = null, D = [], Lt(), yr();
+    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();
   } catch {
   }
 }
 const st = [];
-let Et = null, At = null, Rt = null;
-function $r() {
+let Bt = null, Lt = null, Et = null;
+function mr() {
   try {
-    Et = ze((t, e) => {
+    Bt = Ae((t, e) => {
       try {
         const n = (e.method ?? "GET").toUpperCase();
         st.push({ method: n, url: t, startTs: performance.now() });
       } catch {
       }
       return { url: t, options: e };
-    }), At = Pe((t) => {
+    }), Lt = Re((t) => {
       try {
         const e = st.shift(), n = e?.method ?? "", o = e?.url ?? t.url ?? "", i = e ? performance.now() - e.startTs : 0;
-        he(n, o, t.status, i);
+        ue(n, o, t.status, i);
       } catch {
       }
       return t;
-    }), Rt = He((t) => {
+    }), Et = ze((t) => {
       try {
         const e = st.shift(), n = e ? performance.now() - e.startTs : 0;
-        ge(
+        pe(
           e?.method ?? "",
           e?.url ?? "",
           t.message,
@@ -3420,103 +3360,103 @@ function $r() {
   } catch {
   }
 }
-function _r() {
+function yr() {
   try {
-    Et?.(), At?.(), Rt?.(), Et = null, At = null, Rt = null, st.length = 0;
+    Bt?.(), Lt?.(), Et?.(), Bt = null, Lt = null, Et = null, st.length = 0;
   } catch {
   }
 }
-function wr() {
+function br() {
   try {
-    if (Ae()) return;
-    Re({
-      registerComponent: De,
-      unregisterComponent: Ne,
-      notifyRender: je,
+    if (Le()) return;
+    Ee({
+      registerComponent: Fe,
+      unregisterComponent: Oe,
+      notifyRender: De,
       getComponentName: tt,
-      logComponentMount: Cn,
-      logComponentRender: Tn,
-      logComponentUnmount: Mn,
-      logAtomSet: In,
-      logAtomUpdate: Bn,
-      logEventTrigger: Ln,
-      logCleanupEventTrigger: An,
-      logFetchRequest: En,
-      logFetchResponse: he,
-      logFetchError: ge,
-      recordRender: be
-    }), xn(), $r();
+      logComponentMount: kn,
+      logComponentRender: Sn,
+      logComponentUnmount: Cn,
+      logAtomSet: Tn,
+      logAtomUpdate: Mn,
+      logEventTrigger: In,
+      logCleanupEventTrigger: Ln,
+      logFetchRequest: Bn,
+      logFetchResponse: ue,
+      logFetchError: pe,
+      recordRender: he
+    }), yn(), mr();
   } catch {
   }
 }
 let yt = !1;
-function Ar() {
+function Mr() {
   try {
     if (yt) return;
-    yt = !0, wr(), xr();
+    yt = !0, br(), hr();
   } catch {
   }
 }
-function Rr() {
+function Ir() {
   try {
     if (!yt) return;
-    yt = !1, _r(), vr();
+    yt = !1, yr(), gr();
   } catch {
   }
 }
 export {
-  Sn as clearLogs,
-  Gn as clearPerfData,
-  xn as connectLogStore,
-  On as connectPerfStore,
-  vr as destroyDevTools,
-  Rr as destroyMatesDevTools,
-  vt as devToolsEvent,
-  vn as disconnectLogStore,
-  Dn as disconnectPerfStore,
-  ee as getAllComponents,
+  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,
-  We as getComponentGroups,
+  je as getComponentGroups,
   tt as getComponentName,
-  Cr as getComponentsByView,
-  Ir as getLogCount,
-  _n as getLogs,
-  Vn as getPerfSummaries,
-  Er as getRecentTimings,
-  $t as getRenderVersion,
-  Wn as getSlowestRenders,
-  wn as getUnreadLogCount,
-  Mr as isLogStoreConnected,
-  Br as isPerfStoreConnected,
-  In as logAtomSet,
-  Bn as logAtomUpdate,
-  An as logCleanupEventTrigger,
-  Cn as logComponentMount,
-  Tn as logComponentRender,
-  Mn as logComponentUnmount,
-  Ln as logEventTrigger,
-  kn as markLogsRead,
-  je as notifyRender,
-  yn as onLogEntry,
-  jn as onPerfEntry,
-  be as recordRender,
-  De as registerComponent,
-  Ze as renderAtomsViewer,
-  qt as renderComponentInspector,
-  fn as renderComponentList,
-  mn as renderComponentTree,
-  bn as renderHeader,
-  ie as renderHooksViewer,
-  Fn as renderLogsViewer,
-  Ar as renderMatesDevTools,
-  Xn as renderPerfViewer,
-  Je as renderPropsViewer,
-  Ke as renderScopesViewer,
-  tn as renderUseStateViewer,
+  $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,
-  Tr as renderValueTreeEntries,
-  re as setValueTreeRenderCallback,
-  Lr as startRenderTiming,
+  _r as renderValueTreeEntries,
+  te as setValueTreeRenderCallback,
+  Cr as startRenderTiming,
   r as styles,
-  Ne as unregisterComponent
+  Oe as unregisterComponent
 };