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

package/dist/mates-devtools.es.js

@@ -1,5 +1,5 @@
-import { keyframes as Ce, globalCSS as Te, event as Me, html as s, 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 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", {
   "0%": { background: "var(--dt-flash-bg)", color: "#fff" },
   "100%": { background: "transparent", color: "var(--dt-text-muted)" }
 }), ot = {
@@ -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 = Be({
   // ─── Floating Action Button ───────────────────────────────────────────────
   fab: {
     position: "fixed",
@@ -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: `${Oe} 0.6s ease forwards`
   },
   // ─── Logs tab ─────────────────────────────────────────────────────────────
   logsPanel: {
@@ -808,33 +808,33 @@ 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) {
+}), zt = /* @__PURE__ */ new Set(), lt = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), vt = Le("devtools");
+function De(t, e) {
   try {
-    At.add(t);
+    zt.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 });
+    n || (n = /* @__PURE__ */ new Set(), lt.set(e, n)), n.add(t), dt.set(t, 1), vt.trigger({ type: "mount", component: t });
   } catch {
   }
 }
-function Oe(t, e) {
+function Ne(t, e) {
   try {
-    if (At.delete(t), e) {
+    if (zt.delete(t), e) {
       const n = lt.get(e);
       n && n.delete(t);
     }
-    bt.trigger({ type: "unmount", component: t });
+    vt.trigger({ type: "unmount", component: t });
   } catch {
   }
 }
-function De(t) {
+function je(t) {
   try {
     const e = dt.get(t) ?? 0;
-    dt.set(t, e + 1), bt.trigger({ type: "render", component: t });
+    dt.set(t, e + 1), vt.trigger({ type: "render", component: t });
   } catch {
   }
 }
-function xt(t) {
+function $t(t) {
   try {
     return dt.get(t) ?? 0;
   } catch {
@@ -848,16 +848,16 @@ function Z(t) {
   }
   return 0;
 }
-function Tt(t) {
+function It(t) {
   try {
     return t._parentComponent ?? null;
   } catch {
   }
   return null;
 }
-function Qt() {
+function ee() {
   try {
-    return Array.from(At).filter((t) => {
+    return Array.from(zt).filter((t) => {
       const e = t._view || t.oldView;
       return !e?.__devtools__ && !e?.skipDevToolsRender;
     });
@@ -865,7 +865,7 @@ function Qt() {
   }
   return [];
 }
-function $r(t) {
+function Cr(t) {
   try {
     const e = lt.get(t);
     return e ? Array.from(e) : [];
@@ -880,18 +880,18 @@ function tt(t) {
   }
   return "";
 }
-function Ne(t) {
+function Ve(t) {
   try {
     return t._view || t.oldView || null;
   } catch {
   }
   return null;
 }
-function je() {
+function We() {
   try {
-    const t = Qt(), e = /* @__PURE__ */ new Map();
+    const t = ee(), e = /* @__PURE__ */ new Map();
     for (const o of t) {
-      const i = Ne(o);
+      const i = Ve(o);
       if (!i) continue;
       let c = e.get(i);
       c || (c = [], e.set(i, c)), c.push(o);
@@ -905,7 +905,7 @@ function je() {
       });
     try {
       n.sort((o, i) => {
-        const c = (a) => a.instances.reduce(
+        const c = (s) => s.instances.reduce(
           (d, l) => Math.min(d, Z(l)),
           1 / 0
         );
@@ -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;"
-}, jt = /* @__PURE__ */ new WeakMap();
-let Zt = null;
-function te(t) {
+}, Wt = /* @__PURE__ */ new WeakMap();
+let ne = null;
+function re(t) {
   try {
-    Zt = t;
+    ne = t;
   } catch {
   }
 }
-function ee(t) {
+function oe(t) {
   try {
-    let e = jt.get(t);
-    return e || (e = /* @__PURE__ */ new Set(), jt.set(t, e)), e;
+    let e = Wt.get(t);
+    return e || (e = /* @__PURE__ */ new Set(), Wt.set(t, e)), e;
   } catch {
     return /* @__PURE__ */ new Set();
   }
 }
-function Ve(t, e) {
+function Ge(t, e) {
   try {
-    return ee(t).has(e);
+    return oe(t).has(e);
   } catch {
     return !1;
   }
 }
-function We(t, e) {
+function Ye(t, e) {
   try {
-    const n = ee(t);
+    const n = oe(t);
     n.has(e) ? n.delete(e) : n.add(e);
     try {
-      Zt?.();
+      ne?.();
     } catch {
     }
   } catch {
   }
 }
-function Ge(t) {
+function Ue(t) {
   try {
     return t == null ? !1 : typeof t == "object";
   } catch {
     return !1;
   }
 }
-function vt(t) {
+function _t(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 Gt(t, e = 60) {
   try {
-    const n = vt(t);
+    const n = _t(t);
     if (n === "array") {
       const o = t;
       if (o.length === 0) return "[]";
-      const i = o.slice(0, 5).map((a) => Wt(a)).join(", "), c = o.length > 5 ? ", …" : "";
+      const i = o.slice(0, 5).map((s) => Yt(s)).join(", "), c = o.length > 5 ? ", …" : "";
       return `[${i}${c}]  (${o.length})`;
     }
     if (n === "map")
@@ -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(", "), a = i.length > 4 ? ", …" : "", d = `{${c}${a}}`;
+      const c = i.slice(0, 4).map((l) => `${l}: ${Yt(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 Vt(t, e = 60) {
     return "";
   }
 }
-function Wt(t) {
+function Yt(t) {
   try {
-    switch (vt(t)) {
+    switch (_t(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 Xe(t) {
   try {
-    switch (vt(t)) {
+    switch (_t(t)) {
       case "string":
-        return s`<span style="${f.string}">"${String(t)}"</span>`;
+        return a`<span style="${f.string}">"${String(t)}"</span>`;
       case "number":
-        return s`<span style="${f.number}">${String(t)}</span>`;
+        return a`<span style="${f.number}">${String(t)}</span>`;
       case "boolean":
-        return s`<span style="${f.boolean}">${String(t)}</span>`;
+        return a`<span style="${f.boolean}">${String(t)}</span>`;
       case "null":
-        return s`<span style="${f.null}">null</span>`;
+        return a`<span style="${f.null}">null</span>`;
       case "undefined":
-        return s`<span style="${f.undefined}">undefined</span>`;
+        return a`<span style="${f.undefined}">undefined</span>`;
       case "function":
-        return s`<span style="${f.function}"
+        return a`<span style="${f.function}"
           >ƒ ${t.name || "anonymous"}()</span
         >`;
       case "symbol":
-        return s`<span style="${f.symbol}">${String(t)}</span>`;
+        return a`<span style="${f.symbol}">${String(t)}</span>`;
       case "date":
-        return s`<span style="${f.string}"
+        return a`<span style="${f.string}"
           >${t.toISOString()}</span
         >`;
       case "regexp":
-        return s`<span style="${f.string}">${String(t)}</span>`;
+        return a`<span style="${f.string}">${String(t)}</span>`;
       default:
-        return s`<span style="${f.preview}">${String(t)}</span>`;
+        return a`<span style="${f.preview}">${String(t)}</span>`;
     }
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Ue(t) {
+function qe(t) {
   try {
     if (t instanceof Map)
       return Array.from(t.entries()).map(([e, n]) => ({
@@ -1128,43 +1128,43 @@ function Ue(t) {
 function O(t, e, n, o = "root", i = 0) {
   try {
     if (i > 15)
-      return s`
+      return a`
         <div style="${f.row}">
-          ${e != null ? s`<span style="${f.key}">${e}</span
+          ${e != null ? a`<span style="${f.key}">${e}</span
                 ><span style="${f.colon}">:</span>` : k}
           <span style="${f.preview}">[max depth]</span>
         </div>
       `;
-    const c = Ge(n), a = c && Ve(t, o);
+    const c = Ue(n), s = c && Ge(t, o);
     if (!c)
-      return s`
+      return a`
         <div style="${f.row}">
           <span style="${f.toggle}"></span>
-          ${e != null ? s`<span style="${f.key}">${e}</span
+          ${e != null ? a`<span style="${f.key}">${e}</span
                 ><span style="${f.colon}">:</span>` : k}
-          ${Ye(n)}
+          ${Xe(n)}
         </div>
       `;
-    const d = a ? Ue(n) : [], l = vt(n);
-    return s`
+    const d = s ? qe(n) : [], l = _t(n);
+    return a`
       <div>
         <div
           style="${f.row}cursor:pointer;user-select:none;"
           @click=${(u) => {
       try {
-        u.stopPropagation(), We(t, o);
+        u.stopPropagation(), Ye(t, o);
       } catch {
       }
     }}
         >
-          <span style="${f.toggle}">${a ? "▼" : "▶"}</span>
-          ${e != null ? s`<span style="${f.key}">${e}</span
+          <span style="${f.toggle}">${s ? "▼" : "▶"}</span>
+          ${e != null ? a`<span style="${f.key}">${e}</span
                 ><span style="${f.colon}">:</span>` : k}
-          ${a ? s`<span style="${f.preview}"
-                >${l === "array" ? `Array(${n.length})` : l === "object" ? "{" : Vt(n)}</span
-              >` : s`<span style="${f.preview}">${Vt(n)}</span>`}
+          ${s ? a`<span style="${f.preview}"
+                >${l === "array" ? `Array(${n.length})` : l === "object" ? "{" : Gt(n)}</span
+              >` : a`<span style="${f.preview}">${Gt(n)}</span>`}
         </div>
-        ${a ? s`
+        ${s ? a`
               <div style="${f.children}">
                 ${d.map(
       (u) => O(
@@ -1175,38 +1175,38 @@ function O(t, e, n, o = "root", i = 0) {
         i + 1
       )
     )}
-                ${d.length === 0 ? s`<div style="${f.row}">
+                ${d.length === 0 ? a`<div style="${f.row}">
                       <span style="${f.preview}">(empty)</span>
                     </div>` : k}
               </div>
-              ${l === "object" && a ? s`<div style="${f.row};margin-left:14px;">
+              ${l === "object" && s ? a`<div style="${f.row};margin-left:14px;">
                     <span style="${f.preview}">}</span>
                   </div>` : k}
             ` : k}
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function _r(t, e, n = "root") {
+function Tr(t, e, n = "root") {
   try {
     const o = Object.keys(e);
-    return o.length === 0 ? s`<div style="color:#777;font-size:13px;padding:2px 0;">
+    return o.length === 0 ? a`<div style="color:#777;font-size:13px;padding:2px 0;">
         No data
-      </div>` : s`
+      </div>` : a`
       ${o.map(
       (i) => O(t, i, e[i], `${n}.${i}`, 0)
     )}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Xe(t) {
+function Je(t) {
   try {
     const e = Object.keys(t);
-    return e.length === 0 ? s`<div style="color: #777; font-size: 13px;">No props</div>` : s`
+    return e.length === 0 ? a`<div style="color: #777; font-size: 13px;">No props</div>` : a`
       ${T(
       e,
       (n) => n,
@@ -1214,12 +1214,12 @@ function Xe(t) {
     )}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function qe(t) {
+function Ke(t) {
   try {
-    return !t || t.size === 0 ? s`<div style="color: #777; font-size: 13px;">No scopes</div>` : s`
+    return !t || t.size === 0 ? a`<div style="color: #777; font-size: 13px;">No scopes</div>` : a`
       ${[...t?.entries() || []].map(
       ([e, n]) => {
         try {
@@ -1234,12 +1234,12 @@ function qe(t) {
                 i[l] = "[error reading]";
               }
             }
-          let a = Object.getPrototypeOf(n);
-          for (; a && a !== Object.prototype; ) {
-            for (const l of Object.getOwnPropertyNames(a)) {
+          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")
                 continue;
-              if (Object.getOwnPropertyDescriptor(a, l)?.get) {
+              if (Object.getOwnPropertyDescriptor(s, l)?.get) {
                 c.add(l);
                 try {
                   i[`${l} (get)`] = n[l];
@@ -1248,10 +1248,10 @@ function qe(t) {
                 }
               }
             }
-            a = Object.getPrototypeOf(a);
+            s = Object.getPrototypeOf(s);
           }
           const d = n;
-          return s`
+          return a`
               <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,9 +1259,9 @@ function qe(t) {
                   ${o}
                 </div>
                 <div style="margin-left:4px;">
-                  ${Object.keys(i).length === 0 ? s`<div style="color:#666;font-size:13px;">
+                  ${Object.keys(i).length === 0 ? a`<div style="color:#666;font-size:13px;">
                         (empty scope)
-                      </div>` : s`
+                      </div>` : a`
                         ${Object.keys(i).map(
             (l) => O(
               d,
@@ -1276,16 +1276,16 @@ function qe(t) {
               </div>
             `;
         } catch {
-          return s``;
+          return a``;
         }
       }
     )}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Je(t) {
+function Qe(t) {
   try {
     if (!t) return [];
     const e = [];
@@ -1304,10 +1304,10 @@ function Je(t) {
     return [];
   }
 }
-function Ke(t) {
+function Ze(t) {
   try {
-    const e = Je(t);
-    return e.length === 0 ? s`<div style="color: #777; font-size: 13px;">No atoms</div>` : s`
+    const e = Qe(t);
+    return e.length === 0 ? a`<div style="color: #777; font-size: 13px;">No atoms</div>` : a`
       ${T(
       e,
       (n) => n.id,
@@ -1318,12 +1318,12 @@ function Ke(t) {
     )}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Qe(t) {
+function tn(t) {
   try {
-    return !t || t.length === 0 ? s`<div style="color: #777; font-size: 13px;">No state</div>` : s`
+    return !t || t.length === 0 ? a`<div style="color: #777; font-size: 13px;">No state</div>` : a`
       ${t.map((e, n) => {
       const o = t.length === 1 ? "state" : `state#${n + 1}`;
       let i;
@@ -1336,10 +1336,10 @@ function Qe(t) {
     })}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Ze(t) {
+function en(t) {
   try {
     const e = {
       onMount: 0,
@@ -1421,52 +1421,52 @@ function Ze(t) {
     };
   }
 }
-function tn(t, e) {
+function nn(t, e) {
   try {
-    return s`
+    return a`
       <span class="${r.hookPill}">
         <span class="${r.hookPillLabel}">${t}</span>
         <span class="${r.hookPillCount}">${e}</span>
       </span>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function ne(t) {
+function ie(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 : s`
+    const e = en(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) => tn(o.label, o.count))}
+        ${n.map((o) => nn(o.label, o.count))}
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function en(t, e) {
+function rn(t, e) {
   try {
-    t.stopPropagation(), st(e);
+    t.stopPropagation(), at(e);
   } catch {
   }
 }
-function nn(t) {
+function on(t) {
   try {
     const e = [];
-    let n = Tt(t);
+    let n = It(t);
     for (; n; )
-      e.push(tt(n)), n = Tt(n);
+      e.push(tt(n)), n = It(n);
     return e.reverse(), e;
   } catch {
     return [];
   }
 }
-function re(t) {
+function ce(t) {
   try {
-    const e = nn(t), n = tt(t);
+    const e = on(t), n = tt(t);
     if (e.length === 0)
-      return s`
+      return a`
         <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(
-        s`<span class="${r.breadcrumbSeparator}">›</span>`
+        a`<span class="${r.breadcrumbSeparator}">›</span>`
       ), o.push(
-        s`<span class="${r.breadcrumbSegment}">${e[i]}</span>`
+        a`<span class="${r.breadcrumbSegment}">${e[i]}</span>`
       );
-    return o.push(s`<span class="${r.breadcrumbSeparator}">›</span>`), o.push(
-      s`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
+    return o.push(a`<span class="${r.breadcrumbSeparator}">›</span>`), o.push(
+      a`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
         >${n}</span
       >`
-    ), s` <div class="${r.inspectorBreadcrumb}">${o}</div> `;
+    ), a` <div class="${r.inspectorBreadcrumb}">${o}</div> `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function oe(t) {
+function ae(t) {
   try {
-    return s`
+    return a`
       <div class="${r.instanceDetails}">
         <div class="${r.sectionHeader}">Props</div>
-        ${Xe(t._props || {})}
+        ${Je(t._props || {})}
 
         <div class="${r.sectionHeader}">State</div>
-        ${Qe(t._useStates)}
+        ${tn(t._useStates)}
 
         <div class="${r.sectionHeader}">Atoms</div>
-        ${Ke(t.cleanups)}
+        ${Ze(t.cleanups)}
 
         <div class="${r.sectionHeader}">Scopes</div>
-        ${qe(t.scopes)}
+        ${Ke(t.scopes)}
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Gt() {
+function Ut() {
   try {
-    return s`
+    return a`
       <div class="${r.inspector}">
         <div class="${r.empty}">Select a component to inspect</div>
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Yt(t) {
+function Xt(t) {
   try {
-    const e = tt(t), n = t.componentId, o = Z(t), i = xt(t);
-    return s`
+    const e = tt(t), n = t.componentId, o = Z(t), i = $t(t);
+    return a`
       <div class="${r.inspector}">
-        ${re(t)}
+        ${ce(t)}
         <div class="${r.inspectorTitle}">
           <span>${e}</span>
           <span class="${r.instanceCount}">
@@ -1537,7 +1537,7 @@ function Yt(t) {
             style="opacity: 1;"
             @click=${(c) => {
       try {
-        en(c, t);
+        rn(c, t);
       } catch {
       }
     }}
@@ -1560,17 +1560,17 @@ function Yt(t) {
           </button>
         </div>
 
-        ${ne(t)} ${oe(t)}
+        ${ie(t)} ${ae(t)}
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function rn(t, e, n, o) {
+function cn(t, e, n, o) {
   try {
     const { name: i, instances: c } = t;
-    return s`
+    return a`
       <div class="${r.inspector}">
         <div class="${r.inspectorTitle}">
           <span>${i}</span>
@@ -1582,13 +1582,13 @@ function rn(t, e, n, o) {
         <ul class="${r.instanceList}">
           ${T(
       c,
-      (a) => a.componentId,
-      (a) => {
-        const d = a.componentId, l = Z(a), u = xt(a), y = e === d;
-        return s`
+      (s) => s.componentId,
+      (s) => {
+        const d = s.componentId, l = Z(s), u = $t(s), y = e === d;
+        return a`
                 <li class="${r.instanceGroup}">
                   <div
-                    class="${r.instanceItem} ${y ? Pe : ""}"
+                    class="${r.instanceItem} ${y ? Fe : ""}"
                     @click=${() => {
           try {
             n(d);
@@ -1611,7 +1611,7 @@ function rn(t, e, n, o) {
                       class="${r.componentHighlightBtn}"
                       @click=${(g) => {
           try {
-            g.stopPropagation(), o(a);
+            g.stopPropagation(), o(s);
           } catch {
           }
         }}
@@ -1633,9 +1633,9 @@ function rn(t, e, n, o) {
                       </svg>
                     </button>
                   </div>
-                  ${y ? s`
-                        ${re(a)} ${ne(a)}
-                        ${oe(a)}
+                  ${y ? a`
+                        ${ce(s)} ${ie(s)}
+                        ${ae(s)}
                       ` : k}
                 </li>
               `;
@@ -1645,27 +1645,27 @@ function rn(t, e, n, o) {
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-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 ? Xt(t.selectedComponent) : Ut();
     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 ? Xt(e.instances[0]) : cn(
       e,
       n,
       o,
       i
-    ) : Gt();
+    ) : Ut();
   } catch {
-    return s``;
+    return a``;
   }
 }
 const I = /* @__PURE__ */ new Set();
 let V = null, W = null, G = null, Y = null, ut = !1, pt = !1;
-const ft = qt(0);
+const ft = Kt(0);
 ft.skipDevToolsLog = !0;
 function A() {
   try {
@@ -1681,41 +1681,41 @@ function U(t) {
     pt = !1;
   }
 }
-function on() {
+function an() {
   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, a, ...d) {
+    window.setTimeout = function(c, s, ...d) {
       let l;
       try {
         if (typeof c != "function")
-          return l = t(c, a, ...d), l;
+          return l = t(c, s, ...d), l;
         const u = c;
         l = t(function(...g) {
           try {
             return I.delete(l) && A(), u.apply(this, g.length ? g : d);
           } catch {
           }
-        }, a, ...d), pt || (I.add(l), A());
+        }, s, ...d), pt || (I.add(l), A());
       } catch {
-        l = t(c, a, ...d);
+        l = t(c, s, ...d);
       }
       return l;
-    }, window.setInterval = function(c, a, ...d) {
+    }, window.setInterval = function(c, s, ...d) {
       let l;
       try {
         if (typeof c != "function")
-          return l = e(c, a, ...d), l;
+          return l = e(c, s, ...d), l;
         const u = c;
         l = e(function(...g) {
           try {
             return u.apply(this, g.length ? g : d);
           } catch {
           }
-        }, a, ...d), pt || (I.add(l), A());
+        }, s, ...d), pt || (I.add(l), A());
       } catch {
-        l = e(c, a, ...d);
+        l = e(c, s, ...d);
       }
       return l;
     }, window.clearTimeout = function(c) {
@@ -1734,49 +1734,49 @@ function on() {
   } catch {
   }
 }
-function cn() {
+function sn() {
   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 wt = /* @__PURE__ */ new WeakMap();
-let sn = 0;
-function an(t) {
-  return wt.has(t) || wt.set(t, `mdt-hl-${++sn}`), wt.get(t);
+const St = /* @__PURE__ */ new WeakMap();
+let ln = 0;
+function dn(t) {
+  return St.has(t) || St.set(t, `mdt-hl-${++ln}`), St.get(t);
 }
-function ie(t, e, n) {
+function se(t, e, n) {
   try {
     const o = n.get(e), i = o !== void 0 && o !== t;
     n.set(e, t);
-    const c = an(e);
+    const c = dn(e);
     return i && U(
       () => setTimeout(() => {
         try {
-          const a = document.getElementById(c);
-          if (!a) return;
-          a.classList.remove("mdt-highlight-flash"), a.offsetWidth, a.classList.add("mdt-highlight-flash"), setTimeout(() => {
+          const s = document.getElementById(c);
+          if (!s) return;
+          s.classList.remove("mdt-highlight-flash"), s.offsetWidth, s.classList.add("mdt-highlight-flash"), setTimeout(() => {
             try {
-              a.classList.remove("mdt-highlight-flash");
+              s.classList.remove("mdt-highlight-flash");
             } catch {
             }
           }, 600);
         } catch {
         }
       }, 0)
-    ), s`<span id="${c}" class="mdt-highlight">${t}</span>`;
+    ), a`<span id="${c}" class="mdt-highlight">${t}</span>`;
   } catch {
-    return s``;
+    return a``;
   }
 }
-const ln = /* @__PURE__ */ new WeakMap();
-let kt = "";
-function dn(t) {
+const un = /* @__PURE__ */ new WeakMap();
+let Ct = "";
+function pn(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,7 +1784,7 @@ function dn(t) {
     return 0;
   }
 }
-function St(t) {
+function Tt(t) {
   try {
     let e = 1 / 0;
     for (const n of t.instances) {
@@ -1796,7 +1796,7 @@ function St(t) {
     return 0;
   }
 }
-function un({
+function fn({
   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 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);
     }), l = (u) => {
       try {
-        kt = u.target.value, i();
+        Ct = u.target.value, i();
       } catch {
       }
     };
-    return s`
+    return a`
       <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=${Ct}
             @input=${l}
           />
         </div>
-        ${d.length === 0 ? s`<div class="${r.empty}">
+        ${d.length === 0 ? a`<div class="${r.empty}">
               ${c ? "No matching components" : "No components mounted"}
-            </div>` : s`
+            </div>` : a`
               <ul class="${r.componentList}">
                 ${T(
       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 s`
+        const y = pn(u), g = e === u.viewFn, x = Tt(u), rt = u.instances.length, jt = u.instances[0];
+        return a`
                       <li
-                        class="${r.componentItem} ${g ? Kt : ""}"
+                        class="${r.componentItem} ${g ? te : ""}"
                         @click=${() => {
           try {
             n(u.viewFn);
@@ -1843,27 +1843,27 @@ function un({
           }
         }}
                       >
-                        ${ie(
+                        ${se(
           y,
-          Dt,
-          ln
+          jt,
+          un
         )}
                         <span class="${r.componentName}"
                           >${u.name}</span
                         >
-                        ${rt > 1 ? s`<span
+                        ${rt > 1 ? a`<span
                               class="${r.componentCount} ${g ? r.componentCountSelected : ""}"
                               >×${rt}</span
                             >` : ""}
                         <span
                           class="${r.componentBadge} ${g ? r.componentBadgeSelected : ""}"
-                          >depth ${b}</span
+                          >depth ${x}</span
                         >
                         <button
                           class="${r.componentHighlightBtn} ${g ? r.componentHighlightBtnSelected : ""}"
-                          @click=${(Nt) => {
+                          @click=${(Vt) => {
           try {
-            Nt.stopPropagation(), o(Dt);
+            Vt.stopPropagation(), o(jt);
           } catch {
           }
         }}
@@ -1895,11 +1895,11 @@ function un({
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-const pn = /* @__PURE__ */ new WeakMap(), Ct = /* @__PURE__ */ new WeakSet();
-function fn(t) {
+const hn = /* @__PURE__ */ new WeakMap(), Mt = /* @__PURE__ */ new WeakSet();
+function gn(t) {
   try {
     const e = new Set(t), n = /* @__PURE__ */ new Map();
     for (const c of t)
@@ -1912,21 +1912,21 @@ function fn(t) {
       });
     const o = [];
     for (const c of t) {
-      const a = n.get(c), d = Tt(c);
+      const s = n.get(c), d = It(c);
       if (d && e.has(d)) {
         const l = n.get(d);
         if (l) {
-          l.children.push(a);
+          l.children.push(s);
           continue;
         }
       }
-      o.push(a);
+      o.push(s);
     }
     const i = (c) => {
       try {
-        c.sort((a, d) => a.depth - d.depth || a.name.localeCompare(d.name));
-        for (const a of c)
-          i(a.children);
+        c.sort((s, d) => s.depth - d.depth || s.name.localeCompare(d.name));
+        for (const s of c)
+          i(s.children);
       } catch {
       }
     };
@@ -1935,11 +1935,11 @@ function fn(t) {
     return [];
   }
 }
-function ce(t, e, n, o, i) {
+function le(t, e, n, o, i) {
   try {
-    const c = t.children.length > 0, a = Ct.has(t.component), d = xt(t.component), l = e === t.id, u = t.depth * 16, y = (b) => {
+    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) => {
       try {
-        b.stopPropagation(), a ? Ct.delete(t.component) : Ct.add(t.component), i();
+        x.stopPropagation(), s ? Mt.delete(t.component) : Mt.add(t.component), i();
       } catch {
       }
     }, g = () => {
@@ -1948,25 +1948,25 @@ function ce(t, e, n, o, i) {
       } catch {
       }
     };
-    return s`
+    return a`
       <li
-        class="${r.componentItem} ${l ? Kt : ""}"
+        class="${r.componentItem} ${l ? te : ""}"
         style="margin-left: ${u}px;"
         @click=${g}
       >
-        ${c ? s`<span class="${r.treeToggle}" @click=${y}
-              >${a ? "▶" : "▼"}</span
-            >` : s`<span class="${r.treeLeaf}">·</span>`}
-        ${ie(d, t.component, pn)}
+        ${c ? a`<span class="${r.treeToggle}" @click=${y}
+              >${s ? "▶" : "▼"}</span
+            >` : a`<span class="${r.treeLeaf}">·</span>`}
+        ${se(d, t.component, hn)}
         <span class="${r.componentName}">${t.name}</span>
         <span class="${r.componentBadge}"
           >#${t.id.toString().slice(2, 6)}</span
         >
         <button
           class="${r.componentHighlightBtn}"
-          @click=${(b) => {
+          @click=${(x) => {
       try {
-        b.stopPropagation(), o(t.component);
+        x.stopPropagation(), o(t.component);
       } catch {
       }
     }}
@@ -1990,11 +1990,11 @@ function ce(t, e, n, o, i) {
           </svg>
         </button>
       </li>
-      ${c && !a ? T(
+      ${c && !s ? T(
       t.children,
-      (b) => b.component,
-      (b) => ce(
-        b,
+      (x) => x.component,
+      (x) => le(
+        x,
         e,
         n,
         o,
@@ -2003,26 +2003,26 @@ function ce(t, e, n, o, i) {
     ) : k}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function hn({
+function mn({
   selectedComponentId: t,
   onSelectComponent: e,
   onHighlight: n,
   renderCallback: o
 }) {
   try {
-    const i = Qt(), c = fn(i);
-    return s`
+    const i = ee(), c = gn(i);
+    return a`
       <div class="${r.content}">
-        ${c.length === 0 ? s`<div class="${r.empty}">No components mounted</div>` : s`
+        ${c.length === 0 ? a`<div class="${r.empty}">No components mounted</div>` : a`
               <ul class="${r.componentList}">
                 ${T(
       c,
-      (a) => a.component,
-      (a) => ce(
-        a,
+      (s) => s.component,
+      (s) => le(
+        s,
         t,
         e,
         n,
@@ -2034,23 +2034,23 @@ function hn({
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-const se = () => (Ie(() => {
+const de = () => (Qt(() => {
   try {
     console.log(ft());
   } catch {
   }
 }), () => {
   try {
-    return s`Active Timers (${ft()})`;
+    return a`Active Timers (${ft()})`;
   } catch {
-    return s``;
+    return a``;
   }
 });
-se.skipDevToolsRender = !0;
-function gn({
+de.skipDevToolsRender = !0;
+function bn({
   activeTab: t,
   onTabChange: e,
   onMinimise: n,
@@ -2058,7 +2058,7 @@ function gn({
   unreadLogCount: i
 }) {
   try {
-    return s`
+    return a`
       <div class="${r.header}">
         <div class="${r.headerLeft}">
           <div class="${r.title}">🔧 Mates DevTools</div>
@@ -2084,7 +2084,7 @@ function gn({
     }}
             >
               Logs
-              ${i > 0 ? s`<span class="${r.tabBadge}"
+              ${i > 0 ? a`<span class="${r.tabBadge}"
                     >${i > 99 ? "99+" : i}</span
                   >` : ""}
             </button>
@@ -2102,7 +2102,7 @@ function gn({
           </nav>
         </div>
         <div>
-          <button style="margin-left: 10px">${Be(se)}</button>
+          <button style="margin-left: 10px">${Ee(de)}</button>
         </div>
         <div class="${r.controls}">
           <button
@@ -2133,11 +2133,11 @@ function gn({
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 let it = null;
-function mn(t) {
+function yn(t) {
   try {
     return it = t, () => {
       it === t && (it = null);
@@ -2147,28 +2147,28 @@ function mn(t) {
   return () => {
   };
 }
-let v = !1;
-function yn() {
-  v = !0;
+let $ = !1;
+function xn() {
+  $ = !0;
 }
-function bn() {
-  v = !1;
+function vn() {
+  $ = !1;
 }
-function wr() {
-  return v;
+function Mr() {
+  return $;
 }
-const xn = 100, R = [];
-let ae = 1, $t = 0;
-const le = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
+const $n = 100, R = [];
+let ue = 1, wt = 0;
+const pe = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
 function S(t, e, n) {
   try {
-    R.length >= xn && R.shift(), R.push({
-      id: ae++,
+    R.length >= $n && R.shift(), R.push({
+      id: ue++,
       ts: performance.now(),
       category: t,
       label: e,
       detail: n
-    }), $t++;
+    }), wt++;
     try {
       it?.();
     } catch {
@@ -2176,7 +2176,7 @@ function S(t, e, n) {
   } catch {
   }
 }
-function Rt(t) {
+function Pt(t) {
   try {
     if (t === void 0) return "undefined";
     if (t === null) return "null";
@@ -2191,70 +2191,70 @@ function Rt(t) {
   }
   return "";
 }
-function vn() {
+function _n() {
   return R;
 }
-function kr() {
+function Ir() {
   return R.length;
 }
-function $n() {
-  return $t;
+function wn() {
+  return wt;
 }
-function _n() {
+function kn() {
   try {
-    $t = 0;
+    wt = 0;
   } catch {
   }
 }
-function wn() {
+function Sn() {
   try {
-    R.length = 0, $t = 0, ae = 1;
+    R.length = 0, wt = 0, ue = 1;
   } catch {
   }
 }
-function kn(t) {
+function Cn(t) {
   try {
-    if (!v) return;
+    if (!$) return;
     S("mount", t, "mounted");
   } catch {
   }
 }
-function Sn(t, e) {
+function Tn(t, e) {
   try {
-    if (!v) return;
+    if (!$) return;
     S("update", t, `updated (${e.toFixed(2)}ms)`);
   } catch {
   }
 }
-function Cn(t) {
+function Mn(t) {
   try {
-    if (!v) return;
+    if (!$) return;
     S("cleanup", t, "cleaned up");
   } catch {
   }
 }
-function Tn(t, e) {
+function In(t, e) {
   try {
-    if (!v) return;
-    S("setter", t, Rt(e));
+    if (!$) return;
+    S("setter", t, Pt(e));
   } catch {
   }
 }
-function Mn(t) {
+function Bn(t) {
   try {
-    if (!v) return;
+    if (!$) return;
     S("action", t);
   } catch {
   }
 }
-function In(t, e) {
+function Ln(t, e) {
   try {
-    if (!v || le.has(t)) return;
-    S("event", t, e !== void 0 ? Rt(e) : void 0);
+    if (!$ || pe.has(t)) return;
+    S("event", t, e !== void 0 ? Pt(e) : void 0);
   } catch {
   }
 }
-const zt = 80, de = 120;
+const Ht = 80, fe = 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 Bn(t, e, n) {
+function En(t, e, n) {
   try {
-    if (!v) return;
+    if (!$) return;
     const o = n ? `pending · ${F(n, 50)}` : "pending";
-    S("fetch", F(`${t} ${e}`, zt), o);
+    S("fetch", F(`${t} ${e}`, Ht), o);
   } catch {
   }
 }
-function ue(t, e, n, o) {
+function he(t, e, n, o) {
   try {
-    if (!v) return;
+    if (!$) return;
     S(
       "fetch",
-      F(`${t} ${e}`, zt),
-      F(`${n} · ${o.toFixed(0)}ms`, de)
+      F(`${t} ${e}`, Ht),
+      F(`${n} · ${o.toFixed(0)}ms`, fe)
     );
   } catch {
   }
 }
-function pe(t, e, n, o) {
+function ge(t, e, n, o) {
   try {
-    if (!v) return;
+    if (!$) return;
     S(
       "fetch",
-      F(`${t} ${e}`, zt),
+      F(`${t} ${e}`, Ht),
       F(
         `error · ${o.toFixed(0)}ms · ${n}`,
-        de
+        fe
       )
     );
   } catch {
   }
 }
-function Ln(t, e) {
+function An(t, e) {
   try {
-    if (!v || le.has(t)) return;
+    if (!$ || pe.has(t)) return;
     S(
       "event",
       `${t} (cleanup)`,
-      e !== void 0 ? Rt(e) : void 0
+      e !== void 0 ? Pt(e) : void 0
     );
   } catch {
   }
@@ -2314,7 +2314,7 @@ const E = {
   action: "#81c784",
   event: "#ffb74d",
   fetch: "#ce93d8"
-}, En = {
+}, Rn = {
   mount: "MNT",
   update: "UPD",
   cleanup: "CLN",
@@ -2323,14 +2323,14 @@ const E = {
   event: "EVT",
   fetch: "NET"
 };
-let $ = "all";
-const An = {
+let _ = "all";
+const zn = {
   all: null,
   lifecycle: ["mount", "update", "cleanup"],
   logs: ["setter", "action", "event"],
   network: ["fetch"]
 };
-function Rn(t) {
+function Pn(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 Rn(t) {
     return "";
   }
 }
-function zn() {
+function Hn() {
   try {
-    const t = vn(), e = An[$];
+    const t = _n(), e = zn[_];
     if (!e) return t;
     const n = new Set(e);
     return t.filter((o) => n.has(o.category));
@@ -2348,19 +2348,19 @@ function zn() {
     return [];
   }
 }
-function Pn({ onClear: t, renderCallback: e }) {
+function Fn({ onClear: t, renderCallback: e }) {
   try {
-    _n();
-    const n = zn();
-    return s`
+    kn();
+    const n = Hn();
+    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 Pn({ 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 Pn({ 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 Pn({ 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 Pn({ onClear: t, renderCallback: e }) {
               class="${r.button}"
               @click=${() => {
       try {
-        wn(), t();
+        Sn(), t();
       } catch {
       }
     }}
@@ -2422,21 +2422,21 @@ function Pn({ onClear: t, renderCallback: e }) {
         </div>
 
         <div class="${r.logsContainer}">
-          ${n.length === 0 ? s`<div class="${r.empty}">
+          ${n.length === 0 ? a`<div class="${r.empty}">
                 No logs yet. Interact with the app to see activity.
               </div>` : T(
       n,
       (o) => o.id,
-      (o) => s`
+      (o) => a`
                   <div class="${r.logEntry}">
-                    <span class="${r.logTs}">${Rn(o.ts)}</span>
+                    <span class="${r.logTs}">${Pn(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
+                      >${Rn[o.category]}</span
                     >
                     <span class="${r.logLabel}">${o.label}</span>
-                    ${o.detail ? s`<span class="${r.logDetail}"
+                    ${o.detail ? a`<span class="${r.logDetail}"
                           >${o.detail}</span
                         >` : k}
                   </div>
@@ -2446,28 +2446,28 @@ function Pn({ onClear: t, renderCallback: e }) {
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 let et = !1;
-function Hn() {
+function On() {
   try {
     et = !0;
   } catch {
   }
 }
-function Fn() {
+function Dn() {
   try {
     et = !1;
   } catch {
   }
 }
-function Sr() {
+function Br() {
   return et;
 }
-const On = 100, Q = /* @__PURE__ */ new Map();
-let fe = 1, ct = null;
-function Dn(t) {
+const Nn = 100, Q = /* @__PURE__ */ new Map();
+let me = 1, ct = null;
+function jn(t) {
   try {
     return ct = t, () => {
       try {
@@ -2480,18 +2480,18 @@ function Dn(t) {
   return () => {
   };
 }
-function he(t, e, n) {
+function be(t, e, n) {
   try {
     if (!et) return;
     const o = {
-      id: fe++,
+      id: me++,
       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);
+    i || (i = [], Q.set(t, i)), i.length >= Nn && i.shift(), i.push(o);
     try {
       ct?.();
     } catch {
@@ -2499,25 +2499,25 @@ function he(t, e, n) {
   } catch {
   }
 }
-function Cr(t, e) {
+function Lr(t, e) {
   try {
-    if (!et) return Xt;
+    if (!et) return Jt;
     const n = performance.now();
-    return () => he(t, e, performance.now() - n);
+    return () => be(t, e, performance.now() - n);
   } catch {
   }
-  return Xt;
+  return Jt;
 }
-function Xt() {
+function Jt() {
 }
-function Nn() {
+function Vn() {
   try {
     const t = [];
     for (const [e, n] of Q) {
       if (n.length === 0) continue;
       let o = 0, i = 0, c = 1 / 0;
-      for (const a of n)
-        o += a.durationMs, a.durationMs > i && (i = a.durationMs), a.durationMs < c && (c = a.durationMs);
+      for (const s of n)
+        o += s.durationMs, s.durationMs > i && (i = s.durationMs), s.durationMs < c && (c = s.durationMs);
       t.push({
         name: e,
         renderCount: n.length,
@@ -2534,7 +2534,7 @@ function Nn() {
   }
   return [];
 }
-function ge() {
+function ye() {
   try {
     const t = [];
     for (const e of Q.values())
@@ -2544,29 +2544,29 @@ function ge() {
   }
   return [];
 }
-function Tr(t = 50) {
+function Er(t = 50) {
   try {
-    const e = ge();
+    const e = ye();
     return e.sort((n, o) => o.ts - n.ts), e.length > t ? e.slice(0, t) : e;
   } catch {
   }
   return [];
 }
-function jn(t = 20) {
+function Wn(t = 20) {
   try {
-    const e = ge();
+    const e = ye();
     return e.sort((n, o) => o.durationMs - n.durationMs), e.length > t ? e.slice(0, t) : e;
   } catch {
   }
   return [];
 }
-function Vn() {
+function Gn() {
   try {
-    Q.clear(), fe = 1;
+    Q.clear(), me = 1;
   } catch {
   }
 }
-qt(0);
+Kt(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 me(t, e) {
+function xe(t, e) {
   try {
     return e <= 0 ? 0 : Math.max(2, Math.min(100, t / e * 100));
   } catch {
     return 0;
   }
 }
-function ye(t) {
+function ve(t) {
   try {
     return t < 16 ? "#66bb6a" : t <= 20 ? "#ffb74d" : "#ef5350";
   } catch {
@@ -2589,14 +2589,14 @@ function ye(t) {
   }
 }
 let N = "summary";
-function Wn(t) {
+function Yn(t) {
   try {
     if (t.length === 0)
-      return s`<div class="${r.empty}">
+      return a`<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 s`
+    return a`
       <table class="${r.perfTable}">
         <thead>
           <tr>
@@ -2613,8 +2613,8 @@ function Wn(t) {
       t,
       (n) => n.name,
       (n) => {
-        const o = ye(n.lastMs);
-        return s`
+        const o = ve(n.lastMs);
+        return a`
                 <tr class="${r.perfRow}">
                   <td class="${r.perfCell} ${r.perfName}">
                     ${n.name}
@@ -2635,7 +2635,7 @@ function Wn(t) {
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${me(
+                        style="width: ${xe(
           n.totalMs,
           e
         )}%; background: ${o};"
@@ -2653,17 +2653,17 @@ function Wn(t) {
       </table>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Gn(t, e) {
+function Un(t, e) {
   try {
     if (t.length === 0)
-      return s`<div class="${r.empty}">
+      return a`<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 s`
+    return a`
       <table class="${r.perfTable}">
         <thead>
           <tr>
@@ -2677,16 +2677,16 @@ function Gn(t, e) {
       t,
       (i) => i.id,
       (i) => {
-        const c = ye(i.durationMs), a = o ? () => {
+        const c = ve(i.durationMs), s = o ? () => {
           try {
             e(i.instanceId);
           } catch {
           }
         } : void 0;
-        return s`
+        return a`
                 <tr
                   class="${r.perfRow} ${o ? r.perfRowClickable : ""}"
-                  @click=${a}
+                  @click=${s}
                   title=${o ? `Go to ${i.componentName} in Components tab` : ""}
                 >
                   <td class="${r.perfCell} ${r.perfName}">
@@ -2699,7 +2699,7 @@ function Gn(t, e) {
                     <div class="${r.perfBarWrap}">
                       <div
                         class="${r.perfBar}"
-                        style="width: ${me(
+                        style="width: ${xe(
           i.durationMs,
           n
         )}%; background: ${c};"
@@ -2714,17 +2714,17 @@ function Gn(t, e) {
       </table>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-function Yn({
+function Xn({
   onClear: t,
   renderCallback: e,
   onNavigateToComponent: n
 }) {
   try {
-    const o = Nn(), i = jn(30);
-    return s`
+    const o = Vn(), i = Wn(30);
+    return a`
       <div class="${r.perfPanel}">
         <div class="${r.perfToolbar}">
           <div class="${r.perfTabs}">
@@ -2756,7 +2756,7 @@ function Yn({
               class="${r.button}"
               @click=${() => {
       try {
-        Vn(), t();
+        Gn(), t();
       } catch {
       }
     }}
@@ -2768,58 +2768,58 @@ function Yn({
         </div>
 
         <div class="${r.perfContent}">
-          ${N === "summary" ? Wn(o) : Gn(i, n ?? null)}
+          ${N === "summary" ? Yn(o) : Un(i, n ?? null)}
         </div>
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-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 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 B = null;
-function Pt() {
+function Ft() {
   try {
     const t = document.documentElement;
     B === null && (B = parseFloat(getComputedStyle(t).paddingBottom) || 0), t.style.paddingBottom = `${B + z}px`;
   } catch {
   }
 }
-function Ht() {
+function Ot() {
   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 Dt = !1, $e = 0, _e = 0, gt = !1, q = null, J = null, K = null, P = null, H = null;
+function Qn() {
   try {
     H !== null && (clearTimeout(H), H = null);
   } catch {
   }
 }
-function gt() {
+function mt() {
   try {
-    Jn(), P && (P.remove(), P = null);
+    Qn(), P && (P.remove(), P = null);
   } catch {
   }
 }
-function st(t) {
+function at(t) {
   try {
     let e = function() {
       try {
         const c = document.createElement("div");
         c.className = r.domHighlight, document.body.appendChild(c), P = c;
-        const a = n.getBoundingClientRect();
-        i ? (c.style.position = "fixed", c.style.top = `${a.top}px`, c.style.left = `${a.left}px`) : (c.style.top = `${a.top + window.scrollY}px`, c.style.left = `${a.left + window.scrollX}px`), c.style.width = `${a.width}px`, c.style.height = `${a.height}px`, H = U(
+        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(
           () => setTimeout(() => {
             try {
               P === c && (c.classList.add("fade-out"), H = U(
                 () => setTimeout(() => {
                   try {
-                    P === c && gt();
+                    P === c && mt();
                   } catch {
                   }
                 }, 600)
@@ -2831,55 +2831,55 @@ function st(t) {
       } catch {
       }
     };
-    gt();
+    mt();
     const n = t.firstElementChild ?? t, o = getComputedStyle(n).position, i = o === "fixed" || o === "sticky";
     if (i)
       e();
     else {
-      const c = n.getBoundingClientRect(), a = c.top >= 0 && c.bottom <= (window.innerHeight || document.documentElement.clientHeight);
-      a || n.scrollIntoView({ behavior: "smooth", block: "center" }), H = U(
-        () => setTimeout(e, a ? 0 : 400)
+      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)
       );
     }
   } catch {
   }
 }
-function ve() {
+function we() {
   try {
-    if (x === null) return null;
+    if (v === null) return null;
     for (const t of D)
       for (const e of t.instances)
-        if (e.componentId === x) return e;
+        if (e.componentId === v) return e;
     return null;
   } catch {
   }
   return null;
 }
-function Ot() {
+function Nt() {
   try {
-    return _ === null ? null : D.find((t) => t.viewFn === _) ?? null;
+    return w === null ? null : D.find((t) => t.viewFn === w) ?? null;
   } catch {
   }
   return null;
 }
-function Kn() {
+function Zn() {
   try {
-    if (m === null) return null;
-    const t = Ot();
+    if (b === null) return null;
+    const t = Nt();
     return t ? t.instances.find(
-      (e) => e.componentId === m
+      (e) => e.componentId === b
     ) ?? null : null;
   } catch {
   }
   return null;
 }
-function _t() {
+function kt() {
   try {
-    D = je(), x !== null && !ve() && (x = null), _ !== null && !Ot() ? (_ = null, m = null) : m !== null && !Kn() && (m = null);
+    D = We(), v !== null && !we() && (v = null), w !== null && !Nt() ? (w = null, b = null) : b !== null && !Zn() && (b = null);
   } catch {
   }
 }
-function mt() {
+function bt() {
   try {
     return L && !C;
   } catch {
@@ -2888,61 +2888,61 @@ function mt() {
 }
 function nt() {
   try {
-    return w?.querySelector(`.${r.panel}`) ?? null;
+    return m?.querySelector(`.${r.panel}`) ?? null;
   } catch {
   }
   return null;
 }
-function Qn(t) {
+function tr(t) {
   try {
-    x = x === t ? null : t, h();
+    v = v === t ? null : t, h();
   } catch {
   }
 }
-function Zn(t) {
+function er(t) {
   try {
-    _ === t ? (_ = null, m = null) : (_ = t, m = null), h();
+    w === t ? (w = null, b = null) : (w = t, b = null), h();
   } catch {
   }
 }
-function tr(t) {
+function nr(t) {
   try {
-    m = m === t ? null : t, h();
+    b = b === t ? null : t, h();
   } catch {
   }
 }
-function er(t) {
+function rr(t) {
   try {
-    x = t, X = "components", _t(), _ = null, m = null;
+    v = t, X = "components", kt(), w = null, b = null;
     for (const e of D) {
       for (const n of e.instances)
         if (n.componentId === t) {
-          _ = e.viewFn, m = t;
+          w = e.viewFn, b = t;
           break;
         }
-      if (_) break;
+      if (w) break;
     }
     h();
   } catch {
   }
 }
-function nr(t) {
+function or(t) {
   try {
     X = t, h();
   } catch {
   }
 }
-function rr() {
+function ir() {
   try {
     if (!L || C) return;
-    C = !0, nt()?.classList.remove(r.panelVisible), p && (p.style.display = ""), Ht();
+    C = !0, nt()?.classList.remove(r.panelVisible), p && (p.style.display = ""), Ot();
   } catch {
   }
 }
-function or() {
+function cr() {
   try {
     if (!C) return;
-    C = !1, p && (p.style.display = "none"), _t(), h(), Pt(), requestAnimationFrame(() => {
+    C = !1, p && (p.style.display = "none"), kt(), h(), Ft(), requestAnimationFrame(() => {
       try {
         requestAnimationFrame(() => {
           try {
@@ -2956,9 +2956,9 @@ function or() {
   } catch {
   }
 }
-function ir() {
+function ar() {
   try {
-    L = !1, C = !1, x = null, $e(), gt(), Ht();
+    L = !1, C = !1, v = null, ke(), mt(), Ot();
     const t = nt();
     if (t) {
       t.classList.remove(r.panelVisible);
@@ -2966,21 +2966,21 @@ function ir() {
       const n = () => {
         try {
           if (e) return;
-          e = !0, t.removeEventListener("transitionend", n), It();
+          e = !0, t.removeEventListener("transitionend", n), Lt();
         } catch {
         }
       };
       t.addEventListener("transitionend", n, { once: !0 }), U(() => setTimeout(n, 350));
     } else
-      It();
+      Lt();
     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), sr(), dr(), _t(), h(), Pt(), requestAnimationFrame(() => {
+    L = !0, C = !1, p && (p.style.display = "none"), z = Math.round(window.innerHeight * Kn), lr(), gr(), kt(), h(), Ft(), requestAnimationFrame(() => {
       try {
         requestAnimationFrame(() => {
           try {
@@ -2994,34 +2994,34 @@ function cr() {
   } catch {
   }
 }
-function sr() {
+function lr() {
   try {
-    Hn(), q || (q = mn(() => {
+    On(), q || (q = yn(() => {
       try {
-        mt() && h();
+        bt() && h();
       } catch {
       }
-    })), J || (J = Dn(() => {
+    })), J || (J = jn(() => {
       try {
-        mt() && h();
+        bt() && h();
       } catch {
       }
     }));
   } catch {
   }
 }
-function $e() {
+function ke() {
   try {
-    Fn(), q && (q(), q = null), J && (J(), J = null);
+    Dn(), q && (q(), q = null), J && (J(), J = null);
   } catch {
   }
 }
-const Mt = "mates-devtools-vars";
-function ar() {
+const Bt = "mates-devtools-vars";
+function dr() {
   try {
-    if (document.getElementById(Mt)) return;
+    if (document.getElementById(Bt)) return;
     const t = document.createElement("style");
-    t.id = Mt, t.textContent = `
+    t.id = Bt, t.textContent = `
     #mates-devtools {
       --dt-bg:           #1a1a1a;
       --dt-bg-2:         #222222;
@@ -3054,7 +3054,8 @@ function ar() {
     }
 
     @media (prefers-color-scheme: light) {
-      #mates-devtools {
+      #mates-devtools,
+      #mates-devtools-fab {
         --dt-bg:           #f5f5f5;
         --dt-bg-2:         #ebebeb;
         --dt-bg-3:         #e0e0e0;
@@ -3085,38 +3086,96 @@ function ar() {
         --dt-flash-bg:     rgba(0,160,90,0.3);
       }
     }
+
+    #mates-devtools[data-theme="light"],
+    #mates-devtools-fab[data-theme="light"] {
+      --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);
+    }
   `, document.head.appendChild(t);
   } catch {
   }
 }
-function lr() {
+function ur() {
   try {
-    document.getElementById(Mt)?.remove();
+    document.getElementById(Bt)?.remove();
   } catch {
   }
 }
-function dr() {
+function pr() {
   try {
-    if (w) return;
-    ar(), w = document.createElement("div"), w.id = "mates-devtools", document.body.appendChild(w);
+    const t = xt.resolved;
+    p && (p.dataset.theme = t), m && (m.dataset.theme = t);
   } catch {
   }
 }
-function It() {
+function fr() {
   try {
-    if (!w) return;
-    Jt(s``, w), w.remove(), w = null, lr();
+    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() {
+  try {
+    ht?.(), ht = null;
+  } catch {
+  }
+}
+function gr() {
+  try {
+    if (m) return;
+    dr(), m = document.createElement("div"), m.id = "mates-devtools", m.dataset.theme = xt.resolved, document.body.appendChild(m);
+  } catch {
+  }
+}
+function Lt() {
+  try {
+    if (!m) return;
+    Zt(a``, m), m.remove(), m = null, ur();
   } catch {
   }
 }
 function h() {
   try {
-    if (!w || !L) return;
+    if (!m || !L) return;
     const t = (() => {
       try {
         switch (X) {
           case "components":
-            return s`
+            return a`
               <div class="${r.body}">
                 <div class="${r.leftColumn}">
                   <div class="${r.leftTabs}">
@@ -3177,78 +3236,78 @@ function h() {
                       </svg>
                     </button>
                   </div>
-                  ${M === "list" ? un({
+                  ${M === "list" ? fn({
               groups: D,
-              selectedViewFn: _,
-              onSelectGroup: Zn,
-              onHighlight: (e) => st(e),
+              selectedViewFn: w,
+              onSelectGroup: er,
+              onHighlight: (e) => at(e),
               renderCallback: h
-            }) : hn({
-              selectedComponentId: x,
-              onSelectComponent: Qn,
-              onHighlight: (e) => st(e),
+            }) : mn({
+              selectedComponentId: v,
+              onSelectComponent: tr,
+              onHighlight: (e) => at(e),
               renderCallback: h
             })}
                 </div>
-                ${Ut(M === "list" ? {
-              selectedGroup: Ot(),
-              selectedInstanceId: m,
-              onSelectInstance: tr,
-              onHighlight: (e) => st(e)
+                ${qt(M === "list" ? {
+              selectedGroup: Nt(),
+              selectedInstanceId: b,
+              onSelectInstance: nr,
+              onHighlight: (e) => at(e)
             } : {
-              selectedComponent: ve()
+              selectedComponent: we()
             })}
               </div>
             `;
           case "logs":
-            return Pn({
+            return Fn({
               onClear: h,
               renderCallback: h
             });
           case "performance":
-            return Yn({
+            return Xn({
               onClear: h,
               renderCallback: h,
-              onNavigateToComponent: er
+              onNavigateToComponent: rr
             });
           default:
-            return s``;
+            return a``;
         }
       } catch {
       }
-      return s``;
+      return a``;
     })();
-    Jt(
-      s`
+    Zt(
+      a`
         <div class="${r.panel}" style="height: ${z}px;">
-          <div class="${r.resizeHandle}" @mousedown=${ur}></div>
-          ${gn({
+          <div class="${r.resizeHandle}" @mousedown=${mr}></div>
+          ${bn({
         activeTab: X,
-        onTabChange: nr,
-        onMinimise: rr,
-        onClose: ir,
-        unreadLogCount: X === "logs" ? 0 : $n()
+        onTabChange: or,
+        onMinimise: ir,
+        onClose: ar,
+        unreadLogCount: X === "logs" ? 0 : wn()
       })}
           ${t}
         </div>
       `,
-      w
+      m
     );
   } catch {
   }
 }
-function ur(t) {
+function mr(t) {
   try {
     t.preventDefault();
     const e = t.clientY, n = z, o = (c) => {
       try {
-        const a = window.innerHeight * Xn;
+        const s = window.innerHeight * Jn;
         z = Math.max(
-          Un,
-          Math.min(a, n + (e - c.clientY))
+          qn,
+          Math.min(s, n + (e - c.clientY))
         );
         const d = nt();
-        d && (d.style.height = `${z}px`), Pt();
+        d && (d.style.height = `${z}px`), Ft();
       } catch {
       }
     }, i = () => {
@@ -3261,95 +3320,95 @@ function ur(t) {
   } catch {
   }
 }
-function pr() {
+function br() {
   try {
     if (p) return;
-    p = document.createElement("div"), 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.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);
   } catch {
   }
 }
-function fr() {
+function yr() {
   try {
     if (!p) return;
-    p.removeEventListener("mousedown", we), p.removeEventListener("click", _e), p.remove(), p = null;
+    p.removeEventListener("mousedown", Ce), p.removeEventListener("click", Se), p.remove(), p = null;
   } catch {
   }
 }
-function _e() {
+function Se() {
   try {
-    if (ht) {
-      ht = !1;
+    if (gt) {
+      gt = !1;
       return;
     }
-    C ? or() : cr();
+    C ? cr() : sr();
   } catch {
   }
 }
-function we(t) {
+function Ce(t) {
   try {
-    t.preventDefault(), Ft = !0, ht = !1;
+    t.preventDefault(), Dt = !0, gt = !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);
+    $e = t.clientX - e.left, _e = t.clientY - e.top, p.classList.add(r.fabDragging), document.addEventListener("mousemove", Te), document.addEventListener("mouseup", Me);
   } catch {
   }
 }
-function ke(t) {
+function Te(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 (!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`;
   } catch {
   }
 }
-function Se() {
+function Me() {
   try {
-    Ft = !1, p?.classList.remove(r.fabDragging), document.removeEventListener("mousemove", ke), document.removeEventListener("mouseup", Se);
+    Dt = !1, p?.classList.remove(r.fabDragging), document.removeEventListener("mousemove", Te), document.removeEventListener("mouseup", Me);
   } catch {
   }
 }
-function hr() {
+function xr() {
   try {
-    on(), pr(), K || (K = bt.__subscribe((t) => {
+    an(), fr(), br(), K || (K = vt.__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" && (v !== null && t.component.componentId === v && (v = null), b !== null && t.component.componentId === b && (b = null)), kt(), bt() && h();
       } catch {
       }
-    })), te(() => {
+    })), re(() => {
       try {
-        mt() && h();
+        bt() && h();
       } catch {
       }
     });
   } catch {
   }
 }
-function gr() {
+function vr() {
   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();
+    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();
   } catch {
   }
 }
-const at = [];
-let Bt = null, Lt = null, Et = null;
-function mr() {
+const st = [];
+let Et = null, At = null, Rt = null;
+function $r() {
   try {
-    Bt = Ae((t, e) => {
+    Et = ze((t, e) => {
       try {
         const n = (e.method ?? "GET").toUpperCase();
-        at.push({ method: n, url: t, startTs: performance.now() });
+        st.push({ method: n, url: t, startTs: performance.now() });
       } catch {
       }
       return { url: t, options: e };
-    }), Lt = Re((t) => {
+    }), At = Pe((t) => {
       try {
-        const e = at.shift(), n = e?.method ?? "", o = e?.url ?? t.url ?? "", i = e ? performance.now() - e.startTs : 0;
-        ue(n, o, t.status, i);
+        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);
       } catch {
       }
       return t;
-    }), Et = ze((t) => {
+    }), Rt = He((t) => {
       try {
-        const e = at.shift(), n = e ? performance.now() - e.startTs : 0;
-        pe(
+        const e = st.shift(), n = e ? performance.now() - e.startTs : 0;
+        ge(
           e?.method ?? "",
           e?.url ?? "",
           t.message,
@@ -3361,103 +3420,103 @@ function mr() {
   } catch {
   }
 }
-function yr() {
+function _r() {
   try {
-    Bt?.(), Lt?.(), Et?.(), Bt = null, Lt = null, Et = null, at.length = 0;
+    Et?.(), At?.(), Rt?.(), Et = null, At = null, Rt = null, st.length = 0;
   } catch {
   }
 }
-function br() {
+function wr() {
   try {
-    if (Le()) return;
-    Ee({
-      registerComponent: Fe,
-      unregisterComponent: Oe,
-      notifyRender: De,
+    if (Ae()) return;
+    Re({
+      registerComponent: De,
+      unregisterComponent: Ne,
+      notifyRender: je,
       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();
+      logComponentMount: Cn,
+      logComponentRender: Tn,
+      logComponentUnmount: Mn,
+      logAtomSet: In,
+      logAtomUpdate: Bn,
+      logEventTrigger: Ln,
+      logCleanupEventTrigger: An,
+      logFetchRequest: En,
+      logFetchResponse: he,
+      logFetchError: ge,
+      recordRender: be
+    }), xn(), $r();
   } catch {
   }
 }
 let yt = !1;
-function Mr() {
+function Ar() {
   try {
     if (yt) return;
-    yt = !0, br(), hr();
+    yt = !0, wr(), xr();
   } catch {
   }
 }
-function Ir() {
+function Rr() {
   try {
     if (!yt) return;
-    yt = !1, yr(), gr();
+    yt = !1, _r(), vr();
   } 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,
+  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,
   Z as getComponentDepth,
-  je as getComponentGroups,
+  We 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,
+  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,
   O as renderValueTree,
-  _r as renderValueTreeEntries,
-  te as setValueTreeRenderCallback,
-  Cr as startRenderTiming,
+  Tr as renderValueTreeEntries,
+  re as setValueTreeRenderCallback,
+  Lr as startRenderTiming,
   r as styles,
-  Oe as unregisterComponent
+  Ne as unregisterComponent
 };