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

package/dist/mates-devtools.es.js

@@ -1,4 +1,4 @@
-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";
+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)" }
@@ -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
         );
@@ -987,7 +987,7 @@ function Vt(t, e = 60) {
     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) => Wt(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}: ${Wt(o[l])}`).join(", "), s = i.length > 4 ? ", …" : "", d = `{${c}${s}}`;
       return d.length > e ? d.slice(0, e - 1) + "…}" : d;
     }
     return String(t);
@@ -1048,32 +1048,32 @@ function Ye(t) {
   try {
     switch (vt(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) {
@@ -1128,25 +1128,25 @@ 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 = Ge(n), s = c && Ve(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)}
         </div>
       `;
-    const d = a ? Ue(n) : [], l = vt(n);
-    return s`
+    const d = s ? Ue(n) : [], l = vt(n);
+    return a`
       <div>
         <div
           style="${f.row}cursor:pointer;user-select:none;"
@@ -1157,14 +1157,14 @@ function O(t, e, n, o = "root", i = 0) {
       }
     }}
         >
-          <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}"
+          ${s ? a`<span style="${f.preview}"
                 >${l === "array" ? `Array(${n.length})` : l === "object" ? "{" : Vt(n)}</span
-              >` : s`<span style="${f.preview}">${Vt(n)}</span>`}
+              >` : a`<span style="${f.preview}">${Vt(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") {
   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) {
   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) {
   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,13 +1276,13 @@ function qe(t) {
               </div>
             `;
         } catch {
-          return s``;
+          return a``;
         }
       }
     )}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function Je(t) {
@@ -1307,7 +1307,7 @@ function Je(t) {
 function Ke(t) {
   try {
     const e = Je(t);
-    return e.length === 0 ? s`<div style="color: #777; font-size: 13px;">No atoms</div>` : s`
+    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) {
   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,7 +1336,7 @@ function Qe(t) {
     })}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function Ze(t) {
@@ -1423,31 +1423,31 @@ function Ze(t) {
 }
 function tn(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) {
   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`
+    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))}
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function en(t, e) {
   try {
-    t.stopPropagation(), st(e);
+    t.stopPropagation(), at(e);
   } catch {
   }
 }
@@ -1466,7 +1466,7 @@ function re(t) {
   try {
     const e = nn(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,22 +1476,22 @@ 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) {
   try {
-    return s`
+    return a`
       <div class="${r.instanceDetails}">
         <div class="${r.sectionHeader}">Props</div>
         ${Xe(t._props || {})}
@@ -1507,24 +1507,24 @@ function oe(t) {
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function Gt() {
   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) {
   try {
     const e = tt(t), n = t.componentId, o = Z(t), i = xt(t);
-    return s`
+    return a`
       <div class="${r.inspector}">
         ${re(t)}
         <div class="${r.inspectorTitle}">
@@ -1564,13 +1564,13 @@ function Yt(t) {
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function rn(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,10 +1582,10 @@ 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 = xt(s), y = e === d;
+        return a`
                 <li class="${r.instanceGroup}">
                   <div
                     class="${r.instanceItem} ${y ? Pe : ""}"
@@ -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`
+                        ${re(s)} ${ne(s)}
+                        ${oe(s)}
                       ` : k}
                 </li>
               `;
@@ -1645,7 +1645,7 @@ function rn(t, e, n, o) {
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function Ut(t) {
@@ -1660,7 +1660,7 @@ function Ut(t) {
       i
     ) : Gt();
   } catch {
-    return s``;
+    return a``;
   }
 }
 const I = /* @__PURE__ */ new Set();
@@ -1686,36 +1686,36 @@ function on() {
     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) {
@@ -1742,32 +1742,32 @@ function cn() {
   }
 }
 const wt = /* @__PURE__ */ new WeakMap();
-let sn = 0;
-function an(t) {
-  return wt.has(t) || wt.set(t, `mdt-hl-${++sn}`), wt.get(t);
+let an = 0;
+function sn(t) {
+  return wt.has(t) || wt.set(t, `mdt-hl-${++an}`), wt.get(t);
 }
 function ie(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 = sn(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();
@@ -1813,7 +1813,7 @@ function un({
       } catch {
       }
     };
-    return s`
+    return a`
       <div class="${r.content}">
         <div style="padding: 0 0 6px 0; flex-shrink: 0;">
           <input
@@ -1824,16 +1824,16 @@ function un({
             @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`
+        return a`
                       <li
                         class="${r.componentItem} ${g ? Kt : ""}"
                         @click=${() => {
@@ -1851,7 +1851,7 @@ function un({
                         <span class="${r.componentName}"
                           >${u.name}</span
                         >
-                        ${rt > 1 ? s`<span
+                        ${rt > 1 ? a`<span
                               class="${r.componentCount} ${g ? r.componentCountSelected : ""}"
                               >×${rt}</span
                             >` : ""}
@@ -1895,7 +1895,7 @@ function un({
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 const pn = /* @__PURE__ */ new WeakMap(), Ct = /* @__PURE__ */ new WeakSet();
@@ -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 = Tt(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 {
       }
     };
@@ -1937,9 +1937,9 @@ function fn(t) {
 }
 function ce(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 = Ct.has(t.component), d = xt(t.component), l = e === t.id, u = t.depth * 16, y = (b) => {
       try {
-        b.stopPropagation(), a ? Ct.delete(t.component) : Ct.add(t.component), i();
+        b.stopPropagation(), s ? Ct.delete(t.component) : Ct.add(t.component), i();
       } catch {
       }
     }, g = () => {
@@ -1948,15 +1948,15 @@ function ce(t, e, n, o, i) {
       } catch {
       }
     };
-    return s`
+    return a`
       <li
         class="${r.componentItem} ${l ? Kt : ""}"
         style="margin-left: ${u}px;"
         @click=${g}
       >
-        ${c ? s`<span class="${r.treeToggle}" @click=${y}
-              >${a ? "▶" : "▼"}</span
-            >` : s`<span class="${r.treeLeaf}">·</span>`}
+        ${c ? a`<span class="${r.treeToggle}" @click=${y}
+              >${s ? "▶" : "▼"}</span
+            >` : a`<span class="${r.treeLeaf}">·</span>`}
         ${ie(d, t.component, pn)}
         <span class="${r.componentName}">${t.name}</span>
         <span class="${r.componentBadge}"
@@ -1990,7 +1990,7 @@ function ce(t, e, n, o, i) {
           </svg>
         </button>
       </li>
-      ${c && !a ? T(
+      ${c && !s ? T(
       t.children,
       (b) => b.component,
       (b) => ce(
@@ -2003,7 +2003,7 @@ function ce(t, e, n, o, i) {
     ) : k}
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function hn({
@@ -2014,15 +2014,15 @@ function hn({
 }) {
   try {
     const i = Qt(), c = fn(i);
-    return s`
+    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) => ce(
+        s,
         t,
         e,
         n,
@@ -2034,22 +2034,22 @@ function hn({
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
-const se = () => (Ie(() => {
+const ae = () => (Ie(() => {
   try {
     console.log(ft());
   } catch {
   }
 }), () => {
   try {
-    return s`Active Timers (${ft()})`;
+    return a`Active Timers (${ft()})`;
   } catch {
-    return s``;
+    return a``;
   }
 });
-se.skipDevToolsRender = !0;
+ae.skipDevToolsRender = !0;
 function gn({
   activeTab: t,
   onTabChange: e,
@@ -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">${Be(ae)}</button>
         </div>
         <div class="${r.controls}">
           <button
@@ -2133,7 +2133,7 @@ function gn({
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 let it = null;
@@ -2158,12 +2158,12 @@ function wr() {
   return v;
 }
 const xn = 100, R = [];
-let ae = 1, $t = 0;
+let se = 1, $t = 0;
 const le = /* @__PURE__ */ new Set(["devtools", "DOMReady", "Paint"]);
 function S(t, e, n) {
   try {
     R.length >= xn && R.shift(), R.push({
-      id: ae++,
+      id: se++,
       ts: performance.now(),
       category: t,
       label: e,
@@ -2208,7 +2208,7 @@ function _n() {
 }
 function wn() {
   try {
-    R.length = 0, $t = 0, ae = 1;
+    R.length = 0, $t = 0, se = 1;
   } catch {
   }
 }
@@ -2352,7 +2352,7 @@ function Pn({ onClear: t, renderCallback: e }) {
   try {
     _n();
     const n = zn();
-    return s`
+    return a`
       <div class="${r.logsPanel}">
         <div class="${r.logsToolbar}">
           <div class="${r.logsFilterRow}">
@@ -2422,12 +2422,12 @@ 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
@@ -2436,7 +2436,7 @@ function Pn({ onClear: t, renderCallback: e }) {
                       >${En[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,7 +2446,7 @@ function Pn({ onClear: t, renderCallback: e }) {
       </div>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 let et = !1;
@@ -2516,8 +2516,8 @@ function Nn() {
     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,
@@ -2592,11 +2592,11 @@ let N = "summary";
 function Wn(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>
@@ -2614,7 +2614,7 @@ function Wn(t) {
       (n) => n.name,
       (n) => {
         const o = ye(n.lastMs);
-        return s`
+        return a`
                 <tr class="${r.perfRow}">
                   <td class="${r.perfCell} ${r.perfName}">
                     ${n.name}
@@ -2653,17 +2653,17 @@ function Wn(t) {
       </table>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function Gn(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 = ye(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}">
@@ -2714,7 +2714,7 @@ function Gn(t, e) {
       </table>
     `;
   } catch {
-    return s``;
+    return a``;
   }
 }
 function Yn({
@@ -2724,7 +2724,7 @@ function Yn({
 }) {
   try {
     const o = Nn(), i = jn(30);
-    return s`
+    return a`
       <div class="${r.perfPanel}">
         <div class="${r.perfToolbar}">
           <div class="${r.perfTabs}">
@@ -2773,7 +2773,7 @@ function Yn({
       </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;
@@ -2806,14 +2806,14 @@ function gt() {
   } 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(
@@ -2836,9 +2836,9 @@ function st(t) {
     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 {
@@ -2980,7 +2980,7 @@ function ir() {
 function cr() {
   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 * qn), ar(), dr(), _t(), h(), Pt(), requestAnimationFrame(() => {
       try {
         requestAnimationFrame(() => {
           try {
@@ -2994,7 +2994,7 @@ function cr() {
   } catch {
   }
 }
-function sr() {
+function ar() {
   try {
     Hn(), q || (q = mn(() => {
       try {
@@ -3017,7 +3017,7 @@ function $e() {
   }
 }
 const Mt = "mates-devtools-vars";
-function ar() {
+function sr() {
   try {
     if (document.getElementById(Mt)) return;
     const t = document.createElement("style");
@@ -3053,37 +3053,36 @@ function ar() {
       --dt-flash-bg:     rgba(0,180,100,0.45);
     }
 
-    @media (prefers-color-scheme: light) {
-      #mates-devtools {
-        --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);
-      }
+    :root[data-theme="light"] #mates-devtools,
+    :root[data-theme="light"] #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);
     }
   `, document.head.appendChild(t);
   } catch {
@@ -3098,14 +3097,14 @@ function lr() {
 function dr() {
   try {
     if (w) return;
-    ar(), w = document.createElement("div"), w.id = "mates-devtools", document.body.appendChild(w);
+    sr(), w = document.createElement("div"), w.id = "mates-devtools", document.body.appendChild(w);
   } catch {
   }
 }
 function It() {
   try {
     if (!w) return;
-    Jt(s``, w), w.remove(), w = null, lr();
+    Jt(a``, w), w.remove(), w = null, lr();
   } catch {
   }
 }
@@ -3116,7 +3115,7 @@ function h() {
       try {
         switch (X) {
           case "components":
-            return s`
+            return a`
               <div class="${r.body}">
                 <div class="${r.leftColumn}">
                   <div class="${r.leftTabs}">
@@ -3181,12 +3180,12 @@ function h() {
               groups: D,
               selectedViewFn: _,
               onSelectGroup: Zn,
-              onHighlight: (e) => st(e),
+              onHighlight: (e) => at(e),
               renderCallback: h
             }) : hn({
               selectedComponentId: x,
               onSelectComponent: Qn,
-              onHighlight: (e) => st(e),
+              onHighlight: (e) => at(e),
               renderCallback: h
             })}
                 </div>
@@ -3194,7 +3193,7 @@ function h() {
               selectedGroup: Ot(),
               selectedInstanceId: m,
               onSelectInstance: tr,
-              onHighlight: (e) => st(e)
+              onHighlight: (e) => at(e)
             } : {
               selectedComponent: ve()
             })}
@@ -3212,14 +3211,14 @@ function h() {
               onNavigateToComponent: er
             });
           default:
-            return s``;
+            return a``;
         }
       } catch {
       }
-      return s``;
+      return a``;
     })();
     Jt(
-      s`
+      a`
         <div class="${r.panel}" style="height: ${z}px;">
           <div class="${r.resizeHandle}" @mousedown=${ur}></div>
           ${gn({
@@ -3242,10 +3241,10 @@ function ur(t) {
     t.preventDefault();
     const e = t.clientY, n = z, o = (c) => {
       try {
-        const a = window.innerHeight * Xn;
+        const s = window.innerHeight * Xn;
         z = Math.max(
           Un,
-          Math.min(a, n + (e - c.clientY))
+          Math.min(s, n + (e - c.clientY))
         );
         const d = nt();
         d && (d.style.height = `${z}px`), Pt();
@@ -3264,7 +3263,7 @@ function ur(t) {
 function pr() {
   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.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 {
   }
 }
@@ -3328,27 +3327,27 @@ function gr() {
   } catch {
   }
 }
-const at = [];
+const st = [];
 let Bt = null, Lt = null, Et = null;
 function mr() {
   try {
     Bt = Ae((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) => {
       try {
-        const e = at.shift(), n = e?.method ?? "", o = e?.url ?? t.url ?? "", i = e ? performance.now() - e.startTs : 0;
+        const e = st.shift(), n = e?.method ?? "", o = e?.url ?? t.url ?? "", i = e ? performance.now() - e.startTs : 0;
         ue(n, o, t.status, i);
       } catch {
       }
       return t;
     }), Et = ze((t) => {
       try {
-        const e = at.shift(), n = e ? performance.now() - e.startTs : 0;
+        const e = st.shift(), n = e ? performance.now() - e.startTs : 0;
         pe(
           e?.method ?? "",
           e?.url ?? "",
@@ -3363,7 +3362,7 @@ function mr() {
 }
 function yr() {
   try {
-    Bt?.(), Lt?.(), Et?.(), Bt = null, Lt = null, Et = null, at.length = 0;
+    Bt?.(), Lt?.(), Et?.(), Bt = null, Lt = null, Et = null, st.length = 0;
   } catch {
   }
 }

package/dist/mates-devtools.umd.js

@@ -554,37 +554,36 @@
       --dt-flash-bg:     rgba(0,180,100,0.45);
     }
 
-    @media (prefers-color-scheme: light) {
-      #mates-devtools {
-        --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);
-      }
+    :root[data-theme="light"] #mates-devtools,
+    :root[data-theme="light"] #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);
     }
   `,document.head.appendChild(t)}catch{}}function or(){try{document.getElementById(Dt)?.remove()}catch{}}function ir(){try{if(S)return;rr(),S=document.createElement("div"),S.id="mates-devtools",document.body.appendChild(S)}catch{}}function Ot(){try{if(!S)return;i.render(i.html``,S),S.remove(),S=null,or()}catch{}}function g(){try{if(!S||!I)return;const t=(()=>{try{switch(Z){case"components":return i.html`
               <div class="${r.body}">
@@ -647,4 +646,4 @@
           ${fe({activeTab:Z,onTabChange:Kn,onMinimise:Qn,onClose:tr,unreadLogCount:Z==="logs"?0:xe()})}
           ${t}
         </div>
-      `,S)}catch{}}function cr(t){try{t.preventDefault();const e=t.clientY,n=D,o=l=>{try{const a=window.innerHeight*jn;D=Math.max(Nn,Math.min(a,n+(e-l.clientY)));const u=rt();u&&(u.style.height=`${D}px`),Pt()}catch{}},c=()=>{try{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",c)}catch{}};document.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}catch{}}function lr(){try{if(f)return;f=document.createElement("div"),f.className=r.fab,f.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>',f.style.bottom="50px",f.style.right="50px",f.addEventListener("mousedown",Ke),f.addEventListener("click",Je),document.body.appendChild(f)}catch{}}function ar(){try{if(!f)return;f.removeEventListener("mousedown",Ke),f.removeEventListener("click",Je),f.remove(),f=null}catch{}}function Je(){try{if(ht){ht=!1;return}C?Zn():er()}catch{}}function Ke(t){try{t.preventDefault(),Ht=!0,ht=!1;const e=f.getBoundingClientRect();Ue=t.clientX-e.left,Ye=t.clientY-e.top,f.classList.add(r.fabDragging),document.addEventListener("mousemove",Qe),document.addEventListener("mouseup",Ze)}catch{}}function Qe(t){try{if(!Ht||!f)return;ht=!0,f.style.bottom="auto",f.style.right="auto",f.style.left=`${Math.max(0,Math.min(window.innerWidth-48,t.clientX-Ue))}px`,f.style.top=`${Math.max(0,Math.min(window.innerHeight-48,t.clientY-Ye))}px`}catch{}}function Ze(){try{Ht=!1,f?.classList.remove(r.fabDragging),document.removeEventListener("mousemove",Qe),document.removeEventListener("mouseup",Ze)}catch{}}function sr(){try{xn(),lr(),nt||(nt=N.__subscribe(t=>{try{t?.type==="unmount"&&($!==null&&t.component.componentId===$&&($=null),y!==null&&t.component.componentId===y&&(y=null)),yt(),bt()&&g()}catch{}})),kt(()=>{try{bt()&&g()}catch{}})}catch{}}function tn(){try{$n(),kt(null),gt(),qe(),me(),zt(),nt&&(nt(),nt=null),I=!1,C=!1,B="list",$=null,w=null,y=null,F=[],Ot(),ar()}catch{}}const vt=[];let Vt=null,Nt=null,jt=null;function dr(){try{Vt=i.interceptBefore((t,e)=>{try{const n=(e.method??"GET").toUpperCase();vt.push({method:n,url:t,startTs:performance.now()})}catch{}return{url:t,options:e}}),Nt=i.interceptAfter(t=>{try{const e=vt.shift(),n=e?.method??"",o=e?.url??t.url??"",c=e?performance.now()-e.startTs:0;Be(n,o,t.status,c)}catch{}return t}),jt=i.interceptError(t=>{try{const e=vt.shift(),n=e?performance.now()-e.startTs:0;Le(e?.method??"",e?.url??"",t.message,n)}catch{}})}catch{}}function ur(){try{Vt?.(),Nt?.(),jt?.(),Vt=null,Nt=null,jt=null,vt.length=0}catch{}}function pr(){try{if(i.isDevToolsInstalled())return;i.installDevToolsHooks({registerComponent:Gt,unregisterComponent:Ut,notifyRender:Yt,getComponentName:A,logComponentMount:we,logComponentRender:Se,logComponentUnmount:ke,logAtomSet:Ce,logAtomUpdate:Te,logEventTrigger:Me,logCleanupEventTrigger:Ee,logFetchRequest:Ln,logFetchResponse:Be,logFetchError:Le,recordRender:Rt}),ge(),dr()}catch{}}let xt=!1;function fr(){try{if(xt)return;xt=!0,pr(),sr()}catch{}}function hr(){try{if(!xt)return;xt=!1,ur(),tn()}catch{}}s.clearLogs=_e,s.clearPerfData=Ne,s.connectLogStore=ge,s.connectPerfStore=Re,s.destroyDevTools=tn,s.destroyMatesDevTools=hr,s.devToolsEvent=N,s.disconnectLogStore=me,s.disconnectPerfStore=Pe,s.getAllComponents=St,s.getComponentDepth=E,s.getComponentGroups=Xt,s.getComponentName=A,s.getComponentsByView=cn,s.getLogCount=Bn,s.getLogs=ve,s.getPerfSummaries=De,s.getRecentTimings=Dn,s.getRenderVersion=j,s.getSlowestRenders=Ve,s.getUnreadLogCount=xe,s.isLogStoreConnected=Mn,s.isPerfStoreConnected=zn,s.logAtomSet=Ce,s.logAtomUpdate=Te,s.logCleanupEventTrigger=Ee,s.logComponentMount=we,s.logComponentRender=Se,s.logComponentUnmount=ke,s.logEventTrigger=Me,s.markLogsRead=$e,s.notifyRender=Yt,s.onLogEntry=he,s.onPerfEntry=He,s.recordRender=Rt,s.registerComponent=Gt,s.renderAtomsViewer=ne,s.renderComponentInspector=Tt,s.renderComponentList=se,s.renderComponentTree=ue,s.renderHeader=fe,s.renderHooksViewer=Ct,s.renderLogsViewer=Ae,s.renderMatesDevTools=fr,s.renderPerfViewer=Ge,s.renderPropsViewer=te,s.renderScopesViewer=ee,s.renderUseStateViewer=re,s.renderValueTree=T,s.renderValueTreeEntries=fn,s.setValueTreeRenderCallback=kt,s.startRenderTiming=Fn,s.styles=r,s.unregisterComponent=Ut,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
+      `,S)}catch{}}function cr(t){try{t.preventDefault();const e=t.clientY,n=D,o=l=>{try{const a=window.innerHeight*jn;D=Math.max(Nn,Math.min(a,n+(e-l.clientY)));const u=rt();u&&(u.style.height=`${D}px`),Pt()}catch{}},c=()=>{try{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",c)}catch{}};document.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}catch{}}function lr(){try{if(f)return;f=document.createElement("div"),f.id="mates-devtools-fab",f.className=r.fab,f.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>',f.style.bottom="50px",f.style.right="50px",f.addEventListener("mousedown",Ke),f.addEventListener("click",Je),document.body.appendChild(f)}catch{}}function ar(){try{if(!f)return;f.removeEventListener("mousedown",Ke),f.removeEventListener("click",Je),f.remove(),f=null}catch{}}function Je(){try{if(ht){ht=!1;return}C?Zn():er()}catch{}}function Ke(t){try{t.preventDefault(),Ht=!0,ht=!1;const e=f.getBoundingClientRect();Ue=t.clientX-e.left,Ye=t.clientY-e.top,f.classList.add(r.fabDragging),document.addEventListener("mousemove",Qe),document.addEventListener("mouseup",Ze)}catch{}}function Qe(t){try{if(!Ht||!f)return;ht=!0,f.style.bottom="auto",f.style.right="auto",f.style.left=`${Math.max(0,Math.min(window.innerWidth-48,t.clientX-Ue))}px`,f.style.top=`${Math.max(0,Math.min(window.innerHeight-48,t.clientY-Ye))}px`}catch{}}function Ze(){try{Ht=!1,f?.classList.remove(r.fabDragging),document.removeEventListener("mousemove",Qe),document.removeEventListener("mouseup",Ze)}catch{}}function sr(){try{xn(),lr(),nt||(nt=N.__subscribe(t=>{try{t?.type==="unmount"&&($!==null&&t.component.componentId===$&&($=null),y!==null&&t.component.componentId===y&&(y=null)),yt(),bt()&&g()}catch{}})),kt(()=>{try{bt()&&g()}catch{}})}catch{}}function tn(){try{$n(),kt(null),gt(),qe(),me(),zt(),nt&&(nt(),nt=null),I=!1,C=!1,B="list",$=null,w=null,y=null,F=[],Ot(),ar()}catch{}}const vt=[];let Vt=null,Nt=null,jt=null;function dr(){try{Vt=i.interceptBefore((t,e)=>{try{const n=(e.method??"GET").toUpperCase();vt.push({method:n,url:t,startTs:performance.now()})}catch{}return{url:t,options:e}}),Nt=i.interceptAfter(t=>{try{const e=vt.shift(),n=e?.method??"",o=e?.url??t.url??"",c=e?performance.now()-e.startTs:0;Be(n,o,t.status,c)}catch{}return t}),jt=i.interceptError(t=>{try{const e=vt.shift(),n=e?performance.now()-e.startTs:0;Le(e?.method??"",e?.url??"",t.message,n)}catch{}})}catch{}}function ur(){try{Vt?.(),Nt?.(),jt?.(),Vt=null,Nt=null,jt=null,vt.length=0}catch{}}function pr(){try{if(i.isDevToolsInstalled())return;i.installDevToolsHooks({registerComponent:Gt,unregisterComponent:Ut,notifyRender:Yt,getComponentName:A,logComponentMount:we,logComponentRender:Se,logComponentUnmount:ke,logAtomSet:Ce,logAtomUpdate:Te,logEventTrigger:Me,logCleanupEventTrigger:Ee,logFetchRequest:Ln,logFetchResponse:Be,logFetchError:Le,recordRender:Rt}),ge(),dr()}catch{}}let xt=!1;function fr(){try{if(xt)return;xt=!0,pr(),sr()}catch{}}function hr(){try{if(!xt)return;xt=!1,ur(),tn()}catch{}}s.clearLogs=_e,s.clearPerfData=Ne,s.connectLogStore=ge,s.connectPerfStore=Re,s.destroyDevTools=tn,s.destroyMatesDevTools=hr,s.devToolsEvent=N,s.disconnectLogStore=me,s.disconnectPerfStore=Pe,s.getAllComponents=St,s.getComponentDepth=E,s.getComponentGroups=Xt,s.getComponentName=A,s.getComponentsByView=cn,s.getLogCount=Bn,s.getLogs=ve,s.getPerfSummaries=De,s.getRecentTimings=Dn,s.getRenderVersion=j,s.getSlowestRenders=Ve,s.getUnreadLogCount=xe,s.isLogStoreConnected=Mn,s.isPerfStoreConnected=zn,s.logAtomSet=Ce,s.logAtomUpdate=Te,s.logCleanupEventTrigger=Ee,s.logComponentMount=we,s.logComponentRender=Se,s.logComponentUnmount=ke,s.logEventTrigger=Me,s.markLogsRead=$e,s.notifyRender=Yt,s.onLogEntry=he,s.onPerfEntry=He,s.recordRender=Rt,s.registerComponent=Gt,s.renderAtomsViewer=ne,s.renderComponentInspector=Tt,s.renderComponentList=se,s.renderComponentTree=ue,s.renderHeader=fe,s.renderHooksViewer=Ct,s.renderLogsViewer=Ae,s.renderMatesDevTools=fr,s.renderPerfViewer=Ge,s.renderPropsViewer=te,s.renderScopesViewer=ee,s.renderUseStateViewer=re,s.renderValueTree=T,s.renderValueTreeEntries=fn,s.setValueTreeRenderCallback=kt,s.startRenderTiming=Fn,s.styles=r,s.unregisterComponent=Ut,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/Mates-DevTools/src/MatesDevTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MatesDevTools.d.ts","sourceRoot":"","sources":["../../../../src/MatesDevTools.ts"],"names":[],"mappings":"AA0HA,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAmFtD;AA2HD,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAyB7D;AA4iBD,wBAAgB,cAAc,IAAI,IAAI,CAwCrC;AAED,wBAAgB,eAAe,IAAI,IAAI,CA2BtC"}
+{"version":3,"file":"MatesDevTools.d.ts","sourceRoot":"","sources":["../../../../src/MatesDevTools.ts"],"names":[],"mappings":"AA0HA,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAmFtD;AA2HD,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAyB7D;AA6iBD,wBAAgB,cAAc,IAAI,IAAI,CAwCrC;AAED,wBAAgB,eAAe,IAAI,IAAI,CA2BtC"}

package/dist/types/lib/Template/x-x.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"x-x.d.ts","sourceRoot":"","sources":["../../../../../lib/Template/x-x.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,2BAA2B,CAAC;AAwBhF,qBAAa,SAAU,SAAQ,WAAW;IACxC,OAAO,CAAC,MAAM,CAAsB;IAE7B,QAAQ,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,IAAI,SAAe;IAC1B,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAEV;IACT,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAU;IAE3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/B,MAAM,EAAE,GAAG,CAAC,UAAU,GAAG,EAAE,MAAM,GAAG,CAAC,CAAa;IAEzD,gFAAgF;IACzE,UAAU,EAAE;QAAE,KAAK,EAAE,GAAG,CAAC;QAAC,IAAI,EAAE,GAAG,CAAA;KAAE,EAAE,CAAM;IAEpD,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,KAAK,EAAE,GAAG;IAIvC,WAAW,SAAM;IAExB,iGAAiG;IAC1F,MAAM,SAAK;IAClB,sEAAsE;IAC/D,gBAAgB,EAAE,SAAS,GAAG,IAAI,CAAQ;IACjD,kFAAkF;IAC3E,cAAc,SAAK;IAE1B,+CAA+C;IACxC,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,EAAE,CAAM;IACzD,2EAA2E;IACpE,WAAW,EAAE,OAAO,CAAQ;IAG5B,qBAAqB,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAa;IACnD,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI;IAKjC,aAAa,EAAE,IAAI,GAAG,gBAAgB,CAAQ;IAC9C,UAAU,EAAE,IAAI,GAAG,gBAAgB,CAAQ;;IAwBlD,IAAI,KAAK,CAAC,GAAG,qBAAA,EAGZ;IAED,IAAI,KAAK,wBAER;IAEM,OAAO,EAAE,GAAG,CAAC;IAEpB,OAAO,CAAC,cAAc,CAAS;IAM/B;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAmBxB,IAAI,IAAI,CAAC,GAAG,KAAA,EAyBX;IAED,IAAI,IAAI,QAEP;IAMD,gBAAgB;IAIhB,iBAAiB;IAgCjB,oBAAoB;IAqBpB,OAAO,CAAC,qBAAqB,CAa3B;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ;IAazC,OAAO;IA6CP,OAAO,CAAC,eAAe;IAqFvB,OAAO,CAAC,kBAAkB;CA0E3B"}
+{"version":3,"file":"x-x.d.ts","sourceRoot":"","sources":["../../../../../lib/Template/x-x.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,2BAA2B,CAAC;AAahF,qBAAa,SAAU,SAAQ,WAAW;IACxC,OAAO,CAAC,MAAM,CAAsB;IAE7B,QAAQ,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,IAAI,SAAe;IAC1B,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAEV;IACT,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAU;IAE3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/B,MAAM,EAAE,GAAG,CAAC,UAAU,GAAG,EAAE,MAAM,GAAG,CAAC,CAAa;IAEzD,gFAAgF;IACzE,UAAU,EAAE;QAAE,KAAK,EAAE,GAAG,CAAC;QAAC,IAAI,EAAE,GAAG,CAAA;KAAE,EAAE,CAAM;IAEpD,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,KAAK,EAAE,GAAG;IAIvC,WAAW,SAAM;IAExB,iGAAiG;IAC1F,MAAM,SAAK;IAClB,sEAAsE;IAC/D,gBAAgB,EAAE,SAAS,GAAG,IAAI,CAAQ;IACjD,kFAAkF;IAC3E,cAAc,SAAK;IAE1B,+CAA+C;IACxC,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,EAAE,CAAM;IACzD,2EAA2E;IACpE,WAAW,EAAE,OAAO,CAAQ;IAG5B,qBAAqB,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAa;IACnD,YAAY,CAAC,QAAQ,EAAE,MAAM,IAAI;IAKjC,aAAa,EAAE,IAAI,GAAG,gBAAgB,CAAQ;IAC9C,UAAU,EAAE,IAAI,GAAG,gBAAgB,CAAQ;;IAwBlD,IAAI,KAAK,CAAC,GAAG,qBAAA,EAGZ;IAED,IAAI,KAAK,wBAER;IAEM,OAAO,EAAE,GAAG,CAAC;IAEpB,OAAO,CAAC,cAAc,CAAS;IAM/B;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAmBxB,IAAI,IAAI,CAAC,GAAG,KAAA,EAyBX;IAED,IAAI,IAAI,QAEP;IAMD,gBAAgB;IAIhB,iBAAiB;IAgCjB,oBAAoB;IAqBpB,OAAO,CAAC,qBAAqB,CAa3B;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ;IAazC,OAAO;IA6CP,OAAO,CAAC,eAAe;IAqFvB,OAAO,CAAC,kBAAkB;CA0E3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mates-devtools",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.6",
   "description": "In-app DevTools panel for the Mates framework",
   "type": "module",
   "main": "./dist/mates-devtools.umd.js",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "happy-dom": "^20.8.4",
-    "mates": "0.1.0-beta.11",
+    "mates": "0.1.0-beta.12",
     "typescript": "^5.3.2",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"