batchkit-devtools 0.3.3 → 0.3.4

package/dist/components/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyB,GAAG,EAAE,MAAM,UAAU,CAAC;AAUjE,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0KD,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,UAAU,CAgHvC,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyB,GAAG,EAAE,MAAM,UAAU,CAAC;AAUjE,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0KD,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,UAAU,CAsHvC,CAAC"}

package/dist/components/Trace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Trace.d.ts","sourceRoot":"","sources":["../../src/components/Trace.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,UAAU,UAAU;IAClB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAsDD,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,UAAU,CAkDvC,CAAC"}
+{"version":3,"file":"Trace.d.ts","sourceRoot":"","sources":["../../src/components/Trace.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,UAAU,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,UAAU,UAAU;IAClB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7B;AAsDD,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,UAAU,CAqDvC,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
-import { m as e } from "./mount-DTowB9fq.js";
-import { g as m, i, u as n } from "./mount-DTowB9fq.js";
+import { m as e } from "./mount-zJ7EtgL3.js";
+import { g as m, i, u as n } from "./mount-zJ7EtgL3.js";
 const o = process.env.NODE_ENV !== "development" ? () => () => {
 } : e;
 export {

package/dist/{mount-DTowB9fq.js → mount-zJ7EtgL3.js}

@@ -1,167 +1,167 @@
-import { delegateEvents as J, template as y, style as r, insert as v, createComponent as k, effect as C, memo as w, setAttribute as Y, setStyleProperty as te, addEventListener as Ae, className as ce, render as Ie } from "solid-js/web";
-import { createRoot as De, createSignal as Q, createMemo as de, For as V, Show as ue, onMount as Oe } from "solid-js";
+import { delegateEvents as V, template as S, style as n, insert as f, createComponent as w, effect as z, memo as A, setAttribute as Q, setStyleProperty as re, addEventListener as Ae, className as ue, render as Ie } from "solid-js/web";
+import { createRoot as De, createSignal as Z, createMemo as fe, For as ee, Show as j, onMount as Oe } from "solid-js";
 import { __setDevtoolsHook as Ee } from "batchkit";
 let Re = 0;
-function Ne(l) {
-  if (!l) return;
-  const t = l.split(`
+function Ne(a) {
+  if (!a) return;
+  const t = a.split(`
 `);
-  for (const o of t)
-    if (o.includes("batch") && !o.includes("batchkit") && !o.includes("node_modules")) {
-      const d = o.match(/at\s+.*?\s+\(?(.*?:\d+:\d+)\)?$/);
-      if (d) return d[1];
+  for (const i of t)
+    if (i.includes("batch") && !i.includes("batchkit") && !i.includes("node_modules")) {
+      const r = i.match(/at\s+.*?\s+\(?(.*?:\d+:\d+)\)?$/);
+      if (r) return r[1];
     }
-  for (const o of t.slice(2))
-    if (!o.includes("batchkit") && !o.includes("node_modules")) {
-      const d = o.match(/at\s+.*?\s+\(?(.*?:\d+:\d+)\)?$/);
-      if (d) return d[1];
+  for (const i of t.slice(2))
+    if (!i.includes("batchkit") && !i.includes("node_modules")) {
+      const r = i.match(/at\s+.*?\s+\(?(.*?:\d+:\d+)\)?$/);
+      if (r) return r[1];
     }
 }
 function je() {
-  const [l, t] = Q({
+  const [a, t] = Z({
     batchers: /* @__PURE__ */ new Map(),
     events: [],
     batches: /* @__PURE__ */ new Map(),
     selectedBatcher: null,
     isOpen: !1
-  }), o = /* @__PURE__ */ new Set();
-  function d() {
-    const c = l();
-    for (const h of o)
-      h(c);
+  }), i = /* @__PURE__ */ new Set();
+  function r() {
+    const d = a();
+    for (const p of i)
+      p(d);
   }
-  function e(c) {
-    t((h) => {
-      const s = new Map(h.batchers);
-      return s.set(c.name, c), { ...h, batchers: s };
-    }), d();
+  function e(d) {
+    t((p) => {
+      const o = new Map(p.batchers);
+      return o.set(d.name, d), { ...p, batchers: o };
+    }), r();
   }
-  function i(c, h) {
-    const s = { ...h, batcherName: c };
-    t(($) => {
-      const _ = [...$.events, s], p = new Map($.batches);
-      if (s.type === "schedule") {
-        const b = {
-          batchId: s.batchId,
-          batcherName: c,
+  function l(d, p) {
+    const o = { ...p, batcherName: d };
+    t((y) => {
+      const k = [...y.events, o], x = new Map(y.batches);
+      if (o.type === "schedule") {
+        const h = {
+          batchId: o.batchId,
+          batcherName: d,
           keys: [],
           status: "scheduled",
-          scheduledAt: s.timestamp
+          scheduledAt: o.timestamp
         };
-        p.set(s.batchId, b);
+        x.set(o.batchId, h);
       }
-      if (s.type === "dispatch") {
-        const b = p.get(s.batchId);
-        b && p.set(s.batchId, {
-          ...b,
-          keys: s.keys,
+      if (o.type === "dispatch") {
+        const h = x.get(o.batchId);
+        h && x.set(o.batchId, {
+          ...h,
+          keys: o.keys,
           status: "dispatching",
-          dispatchedAt: s.timestamp
+          dispatchedAt: o.timestamp
         });
       }
-      if (s.type === "resolve") {
-        const b = p.get(s.batchId);
-        b && p.set(s.batchId, {
-          ...b,
+      if (o.type === "resolve") {
+        const h = x.get(o.batchId);
+        h && x.set(o.batchId, {
+          ...h,
           status: "resolved",
-          completedAt: s.timestamp,
-          duration: s.duration
+          completedAt: o.timestamp,
+          duration: o.duration
         });
       }
-      if (s.type === "error") {
-        const b = p.get(s.batchId);
-        b && p.set(s.batchId, {
-          ...b,
+      if (o.type === "error") {
+        const h = x.get(o.batchId);
+        h && x.set(o.batchId, {
+          ...h,
           status: "error",
-          completedAt: s.timestamp,
-          error: s.error
+          completedAt: o.timestamp,
+          error: o.error
         });
       }
-      if (s.type === "abort") {
-        const b = p.get(s.batchId);
-        b && p.set(s.batchId, {
-          ...b,
+      if (o.type === "abort") {
+        const h = x.get(o.batchId);
+        h && x.set(o.batchId, {
+          ...h,
           status: "aborted",
-          completedAt: s.timestamp
+          completedAt: o.timestamp
         });
       }
-      return { ...$, events: _, batches: p };
-    }), d();
+      return { ...y, events: k, batches: x };
+    }), r();
   }
-  function u(c) {
-    return o.add(c), c(l()), () => o.delete(c);
+  function s(d) {
+    return i.add(d), d(a()), () => i.delete(d);
   }
-  function a() {
-    return l();
+  function u() {
+    return a();
   }
-  function f() {
-    t((c) => ({
-      ...c,
+  function v() {
+    t((d) => ({
+      ...d,
       events: [],
       batches: /* @__PURE__ */ new Map()
-    })), d();
+    })), r();
   }
   function g() {
-    t((c) => ({ ...c, isOpen: !0 })), d();
+    t((d) => ({ ...d, isOpen: !0 })), r();
   }
-  function x() {
-    t((c) => ({ ...c, isOpen: !1 })), d();
+  function $() {
+    t((d) => ({ ...d, isOpen: !1 })), r();
   }
   function m() {
-    t((c) => ({ ...c, isOpen: !c.isOpen })), d();
+    t((d) => ({ ...d, isOpen: !d.isOpen })), r();
   }
   return Ee({
-    onBatcherCreated({ fn: c, name: h, stack: s }) {
-      const $ = !h, _ = h ?? `unnamed-${++Re}`, p = c.toString().slice(0, 500), b = Ne(s);
+    onBatcherCreated({ fn: d, name: p, stack: o }) {
+      const y = !p, k = p ?? `unnamed-${++Re}`, x = d.toString().slice(0, 500), h = Ne(o);
       return e({
-        name: _,
+        name: k,
         registeredAt: performance.now(),
-        isUnnamed: $,
-        fnSource: p,
-        location: b
-      }), (T) => {
-        i(_, T);
+        isUnnamed: y,
+        fnSource: x,
+        location: h
+      }), (C) => {
+        l(k, C);
       };
     }
   }), {
-    subscribe: u,
-    getStore: a,
-    clear: f,
+    subscribe: s,
+    getStore: u,
+    clear: v,
     open: g,
-    close: x,
+    close: $,
     toggle: m,
     _setStore: t,
-    _store: l
+    _store: a
   };
 }
-let z = null;
+let B = null;
 function Fe() {
   if (typeof window > "u")
     throw new Error("DevTools can only be used in browser environment");
-  return z || (z = De(() => je())), z;
+  return B || (B = De(() => je())), B;
 }
-function G() {
-  if (!z)
+function W() {
+  if (!B)
     throw new Error(
       "DevTools registry not initialized. Call initRegistry() first."
     );
-  return z;
+  return B;
 }
 function Ke() {
-  const l = G();
-  if (l._store)
-    return l._store;
-  const [t, o] = Q(l.getStore());
-  return l.subscribe(o), t;
+  const a = W();
+  if (a._store)
+    return a._store;
+  const [t, i] = Z(a.getStore());
+  return a.subscribe(i), t;
 }
-function Le(l) {
+function Le(a) {
   var t;
-  z && ((t = z._setStore) == null || t.call(z, (o) => ({
-    ...o,
-    selectedBatcher: l
+  B && ((t = B._setStore) == null || t.call(B, (i) => ({
+    ...i,
+    selectedBatcher: a
   })));
 }
-var Me = /* @__PURE__ */ y("<div>"), He = /* @__PURE__ */ y("<div><div></div><div><span> gets</span><span> batches"), Ge = /* @__PURE__ */ y("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No batchers yet</div><div style=font-size:11px;color:#57534e>Call batch() to see it here");
+var Me = /* @__PURE__ */ S("<div>"), He = /* @__PURE__ */ S("<div><div></div><div><span> gets</span><span> batches"), Ge = /* @__PURE__ */ S("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No batchers yet</div><div style=font-size:11px;color:#57534e>Call batch() to see it here");
 const Ue = {
   flex: "1",
   "overflow-y": "auto"
@@ -174,18 +174,18 @@ const Ue = {
   ...ve,
   background: "#1c1917",
   "border-left-color": "#a8a29e"
-}, fe = {
+}, ge = {
   "font-size": "13px",
   color: "#d6d3d1",
   "margin-bottom": "2px"
 }, qe = {
-  ...fe,
+  ...ge,
   color: "#78716c",
   "font-style": "italic"
 }, Pe = {
   "font-size": "11px",
   color: "#78716c"
-}, ne = {
+}, ie = {
   display: "inline-flex",
   "align-items": "center",
   gap: "4px",
@@ -199,48 +199,48 @@ const Ue = {
   color: "#57534e",
   "text-align": "center",
   padding: "24px 12px"
-}, Ye = (l) => {
-  const t = de(() => Array.from(l.batchers.values())), o = (e) => {
-    const i = l.events.filter((f) => f.batcherName === e), u = i.filter((f) => f.type === "get").length, a = i.filter((f) => f.type === "resolve").length;
+}, Ye = (a) => {
+  const t = fe(() => Array.from(a.batchers.values())), i = (e) => {
+    const l = a.events.filter((v) => v.batcherName === e), s = l.filter((v) => v.type === "get").length, u = l.filter((v) => v.type === "resolve").length;
     return {
-      gets: u,
-      batches: a
+      gets: s,
+      batches: u
     };
-  }, d = (e) => {
-    l.selectedBatcher === e ? l.onSelect(null) : l.onSelect(e);
+  }, r = (e) => {
+    a.selectedBatcher === e ? a.onSelect(null) : a.onSelect(e);
   };
   return (() => {
     var e = Me();
-    return r(e, Ue), v(e, k(V, {
+    return n(e, Ue), f(e, w(ee, {
       get each() {
         return t();
       },
-      children: (i) => {
-        const u = () => o(i.name), a = () => l.selectedBatcher === i.name;
+      children: (l) => {
+        const s = () => i(l.name), u = () => a.selectedBatcher === l.name;
         return (() => {
-          var f = He(), g = f.firstChild, x = g.nextSibling, m = x.firstChild, S = m.firstChild, c = m.nextSibling, h = c.firstChild;
-          return f.$$click = () => d(i.name), v(g, () => i.name), r(x, Pe), v(m, () => u().gets, S), v(c, () => u().batches, h), C((s) => {
-            var $ = a() ? We : ve, _ = i.isUnnamed ? qe : fe, p = ne, b = ne;
-            return s.e = r(f, $, s.e), s.t = r(g, _, s.t), s.a = r(m, p, s.a), s.o = r(c, b, s.o), s;
+          var v = He(), g = v.firstChild, $ = g.nextSibling, m = $.firstChild, _ = m.firstChild, d = m.nextSibling, p = d.firstChild;
+          return v.$$click = () => r(l.name), f(g, () => l.name), n($, Pe), f(m, () => s().gets, _), f(d, () => s().batches, p), z((o) => {
+            var y = u() ? We : ve, k = l.isUnnamed ? qe : ge, x = ie, h = ie;
+            return o.e = n(v, y, o.e), o.t = n(g, k, o.t), o.a = n(m, x, o.a), o.o = n(d, h, o.o), o;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0
-          }), f;
+          }), v;
         })();
       }
-    }), null), v(e, (() => {
-      var i = w(() => t().length === 0);
-      return () => i() && (() => {
-        var u = Ge(), a = u.firstChild;
-        return a.nextSibling, r(u, Xe), u;
+    }), null), f(e, (() => {
+      var l = A(() => t().length === 0);
+      return () => l() && (() => {
+        var s = Ge(), u = s.firstChild;
+        return u.nextSibling, n(s, Xe), s;
       })();
     })(), null), e;
   })();
 };
-J(["click"]);
-var Je = /* @__PURE__ */ y("<div>"), Qe = /* @__PURE__ */ y("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No batches yet</div><div style=font-size:11px;color:#57534e>Batches appear as requests are processed"), Ve = /* @__PURE__ */ y("<div><div></div><div></div><div></div><div>");
+V(["click"]);
+var Je = /* @__PURE__ */ S("<div>"), Qe = /* @__PURE__ */ S("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No batches yet</div><div style=font-size:11px;color:#57534e>Batches appear as requests are processed"), Ve = /* @__PURE__ */ S("<div><div></div><div></div><div></div><div>");
 const Ze = {
   display: "flex",
   "flex-direction": "column",
@@ -256,7 +256,7 @@ const Ze = {
   "font-size": "11px",
   color: "#78716c",
   "min-width": "80px"
-}, j = {
+}, N = {
   padding: "2px 6px",
   "font-size": "10px",
   "font-weight": "500",
@@ -264,27 +264,27 @@ const Ze = {
   "letter-spacing": "0.3px"
 }, nt = {
   scheduled: {
-    ...j,
+    ...N,
     background: "#422006",
     color: "#fbbf24"
   },
   dispatching: {
-    ...j,
+    ...N,
     background: "#1e3a5f",
     color: "#60a5fa"
   },
   resolved: {
-    ...j,
+    ...N,
     background: "#14532d",
     color: "#4ade80"
   },
   error: {
-    ...j,
+    ...N,
     background: "#450a0a",
     color: "#f87171"
   },
   aborted: {
-    ...j,
+    ...N,
     background: "#292524",
     color: "#a8a29e"
   }
@@ -309,45 +309,45 @@ const Ze = {
   color: "#57534e",
   "text-align": "center",
   padding: "32px"
-}, lt = (l) => {
-  const t = (e) => e === void 0 ? "-" : e < 1 ? "<1ms" : e < 1e3 ? `${Math.round(e)}ms` : `${(e / 1e3).toFixed(2)}s`, o = (e) => {
+}, lt = (a) => {
+  const t = (e) => e === void 0 ? "-" : e < 1 ? "<1ms" : e < 1e3 ? `${Math.round(e)}ms` : `${(e / 1e3).toFixed(2)}s`, i = (e) => {
     if (e.length === 0) return "-";
-    const i = e.slice(0, 3).map((u) => String(u)).join(", ");
-    return e.length > 3 ? `${i} +${e.length - 3}` : i;
-  }, d = () => [...l.batches].sort((e, i) => i.scheduledAt - e.scheduledAt);
+    const l = e.slice(0, 3).map((s) => String(s)).join(", ");
+    return e.length > 3 ? `${l} +${e.length - 3}` : l;
+  }, r = () => [...a.batches].sort((e, l) => l.scheduledAt - e.scheduledAt);
   return (() => {
     var e = Je();
-    return r(e, Ze), v(e, k(ue, {
+    return n(e, Ze), f(e, w(j, {
       get when() {
-        return d().length > 0;
+        return r().length > 0;
       },
       get fallback() {
         return (() => {
-          var i = Qe(), u = i.firstChild;
-          return u.nextSibling, r(i, ot), i;
+          var l = Qe(), s = l.firstChild;
+          return s.nextSibling, n(l, ot), l;
         })();
       },
       get children() {
-        return k(V, {
+        return w(ee, {
           get each() {
-            return d();
+            return r();
           },
-          children: (i) => (() => {
-            var u = Ve(), a = u.firstChild, f = a.nextSibling, g = f.nextSibling, x = g.nextSibling;
-            return r(u, et), r(a, tt), v(a, () => i.batchId), v(f, () => i.status), r(g, rt), v(g, () => o(i.keys)), r(x, it), v(x, () => t(i.duration)), C((m) => {
-              var S = nt[i.status] || j, c = i.keys.map(String).join(", ");
-              return m.e = r(f, S, m.e), c !== m.t && Y(g, "title", m.t = c), m;
+          children: (l) => (() => {
+            var s = Ve(), u = s.firstChild, v = u.nextSibling, g = v.nextSibling, $ = g.nextSibling;
+            return n(s, et), n(u, tt), f(u, () => l.batchId), f(v, () => l.status), n(g, rt), f(g, () => i(l.keys)), n($, it), f($, () => t(l.duration)), z((m) => {
+              var _ = nt[l.status] || N, d = l.keys.map(String).join(", ");
+              return m.e = n(v, _, m.e), d !== m.t && Q(g, "title", m.t = d), m;
             }, {
               e: void 0,
               t: void 0
-            }), u;
+            }), s;
           })()
         });
       }
     })), e;
   })();
 };
-var st = /* @__PURE__ */ y("<div>"), at = /* @__PURE__ */ y("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No events</div><div style=font-size:11px;color:#57534e>Events appear as batchers process requests"), ct = /* @__PURE__ */ y("<div><span></span><span></span><span>");
+var st = /* @__PURE__ */ S("<div>"), at = /* @__PURE__ */ S("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No events</div><div style=font-size:11px;color:#57534e>Events appear as batchers process requests"), ct = /* @__PURE__ */ S("<div><span></span><span></span><span>");
 const dt = {
   display: "flex",
   "flex-direction": "column",
@@ -358,13 +358,13 @@ const dt = {
   gap: "12px",
   padding: "4px 8px",
   background: "#1c1917"
-}, vt = {
+}, ft = {
   color: "#57534e",
   "min-width": "60px"
-}, ft = {
+}, vt = {
   "min-width": "60px",
   "font-weight": "500"
-}, ht = {
+}, gt = {
   get: "#60a5fa",
   dedup: "#c084fc",
   schedule: "#fbbf24",
@@ -372,7 +372,7 @@ const dt = {
   resolve: "#4ade80",
   error: "#f87171",
   abort: "#a8a29e"
-}, gt = {
+}, ht = {
   color: "#78716c",
   flex: "1",
   "white-space": "nowrap",
@@ -387,8 +387,8 @@ const dt = {
   color: "#57534e",
   "text-align": "center",
   padding: "32px"
-}, xt = (l) => {
-  const t = (e) => (e / 1e3).toFixed(3) + "s", o = (e) => {
+}, xt = (a) => {
+  const t = (e) => (e / 1e3).toFixed(3) + "s", i = (e) => {
     switch (e.type) {
       case "get":
         return `key: ${String(e.key)}`;
@@ -407,80 +407,80 @@ const dt = {
       default:
         return "";
     }
-  }, d = () => [...l.events].reverse();
+  }, r = () => [...a.events].reverse();
   return (() => {
     var e = st();
-    return r(e, dt), v(e, k(ue, {
+    return n(e, dt), f(e, w(j, {
       get when() {
-        return d().length > 0;
+        return r().length > 0;
       },
       get fallback() {
         return (() => {
-          var i = at(), u = i.firstChild;
-          return u.nextSibling, r(i, bt), i;
+          var l = at(), s = l.firstChild;
+          return s.nextSibling, n(l, bt), l;
         })();
       },
       get children() {
-        return k(V, {
+        return w(ee, {
           get each() {
-            return d();
+            return r();
           },
-          children: (i) => (() => {
-            var u = ct(), a = u.firstChild, f = a.nextSibling, g = f.nextSibling;
-            return r(u, ut), r(a, vt), v(a, () => t(i.timestamp)), v(f, () => i.type), r(g, gt), v(g, () => o(i)), C((x) => r(f, {
-              ...ft,
-              color: ht[i.type]
-            }, x)), u;
+          children: (l) => (() => {
+            var s = ct(), u = s.firstChild, v = u.nextSibling, g = v.nextSibling;
+            return n(s, ut), n(u, ft), f(u, () => t(l.timestamp)), f(v, () => l.type), n(g, ht), f(g, () => i(l)), z(($) => n(v, {
+              ...vt,
+              color: gt[l.type]
+            }, $)), s;
           })()
         });
       }
     })), e;
   })();
 };
-var mt = /* @__PURE__ */ y("<div><div><div>Gets</div><div></div></div><div><div>Batches</div><div></div></div><div><div>Deduped</div><div><span>(<!>%)</span></div></div><div><div>Avg Size</div><div></div></div><div><div>Avg Time</div><div><span>ms</span></div></div><div><div>Err / Abort</div><div><span></span><span style=color:#57534e> / </span><span>");
+var mt = /* @__PURE__ */ S("<div><div><div>Gets</div><div></div></div><div><div>Batches</div><div></div></div><div><div>Deduped</div><div><span>(<!>%)</span></div></div><div><div>Avg Size</div><div></div></div><div><div>Avg Time</div><div><span>ms</span></div></div><div><div>Err / Abort</div><div><span></span><span style=color:#57534e> / </span><span>");
 const pt = {
   display: "grid",
   "grid-template-columns": "repeat(auto-fit, minmax(120px, 1fr))",
   gap: "1px",
   background: "#292524"
-}, E = {
+}, O = {
   padding: "12px",
   background: "#1c1917"
-}, R = {
+}, E = {
   "font-size": "11px",
   "text-transform": "uppercase",
   "letter-spacing": "0.5px",
   color: "#78716c",
   "margin-bottom": "4px"
-}, N = {
+}, R = {
   "font-size": "20px",
   "font-weight": "500",
   color: "#f5f5f4"
-}, re = {
+}, oe = {
   "font-size": "11px",
   color: "#57534e",
   "margin-left": "2px"
-}, yt = (l) => {
-  const t = de(() => {
-    const o = l.events, d = l.batches, e = o.filter((c) => c.type === "get").length, i = o.filter((c) => c.type === "dedup").length, u = d.filter((c) => c.status === "resolved"), a = u.length, f = a > 0 ? u.reduce((c, h) => c + h.keys.length, 0) / a : 0, g = a > 0 ? u.reduce((c, h) => c + (h.duration || 0), 0) / a : 0, x = d.filter((c) => c.status === "error").length, m = d.filter((c) => c.status === "aborted").length, S = e > 0 ? i / e * 100 : 0;
+}, yt = (a) => {
+  const t = fe(() => {
+    const i = a.events, r = a.batches, e = i.filter((d) => d.type === "get").length, l = i.filter((d) => d.type === "dedup").length, s = r.filter((d) => d.status === "resolved"), u = s.length, v = u > 0 ? s.reduce((d, p) => d + p.keys.length, 0) / u : 0, g = u > 0 ? s.reduce((d, p) => d + (p.duration || 0), 0) / u : 0, $ = r.filter((d) => d.status === "error").length, m = r.filter((d) => d.status === "aborted").length, _ = e > 0 ? l / e * 100 : 0;
     return {
       totalGets: e,
-      totalBatches: a,
-      dedupedKeys: i,
-      avgBatchSize: f,
+      totalBatches: u,
+      dedupedKeys: l,
+      avgBatchSize: v,
       avgDuration: g,
-      errors: x,
+      errors: $,
       aborts: m,
-      dedupRate: S
+      dedupRate: _
     };
   });
   return (() => {
-    var o = mt(), d = o.firstChild, e = d.firstChild, i = e.nextSibling, u = d.nextSibling, a = u.firstChild, f = a.nextSibling, g = u.nextSibling, x = g.firstChild, m = x.nextSibling, S = m.firstChild, c = S.firstChild, h = c.nextSibling;
-    h.nextSibling;
-    var s = g.nextSibling, $ = s.firstChild, _ = $.nextSibling, p = s.nextSibling, b = p.firstChild, T = b.nextSibling, F = T.firstChild, I = p.nextSibling, D = I.firstChild, O = D.nextSibling, A = O.firstChild, L = A.nextSibling, B = L.nextSibling;
-    return r(o, pt), v(i, () => t().totalGets), v(f, () => t().totalBatches), v(m, () => t().dedupedKeys, S), v(S, () => t().dedupRate.toFixed(0), h), v(_, () => t().avgBatchSize.toFixed(1)), v(T, () => t().avgDuration.toFixed(0), F), v(A, () => t().errors), v(B, () => t().aborts), C((n) => {
-      var M = E, U = R, W = N, q = E, P = R, X = N, be = E, xe = R, me = N, pe = re, ye = E, Se = R, $e = N, we = E, _e = R, ke = N, Ce = re, ze = E, Be = R, Te = N, Z = t().errors > 0 ? "#f87171" : "#f5f5f4", ee = t().aborts > 0 ? "#fbbf24" : "#f5f5f4";
-      return n.e = r(d, M, n.e), n.t = r(e, U, n.t), n.a = r(i, W, n.a), n.o = r(u, q, n.o), n.i = r(a, P, n.i), n.n = r(f, X, n.n), n.s = r(g, be, n.s), n.h = r(x, xe, n.h), n.r = r(m, me, n.r), n.d = r(S, pe, n.d), n.l = r(s, ye, n.l), n.u = r($, Se, n.u), n.c = r(_, $e, n.c), n.w = r(p, we, n.w), n.m = r(b, _e, n.m), n.f = r(T, ke, n.f), n.y = r(F, Ce, n.y), n.g = r(I, ze, n.g), n.p = r(D, Be, n.p), n.b = r(O, Te, n.b), Z !== n.T && te(A, "color", n.T = Z), ee !== n.A && te(B, "color", n.A = ee), n;
+    var i = mt(), r = i.firstChild, e = r.firstChild, l = e.nextSibling, s = r.nextSibling, u = s.firstChild, v = u.nextSibling, g = s.nextSibling, $ = g.firstChild, m = $.nextSibling, _ = m.firstChild, d = _.firstChild, p = d.nextSibling;
+    p.nextSibling;
+    var o = g.nextSibling, y = o.firstChild, k = y.nextSibling, x = o.nextSibling, h = x.firstChild, C = h.nextSibling, H = C.firstChild, F = x.nextSibling, I = F.firstChild, D = I.nextSibling, T = D.firstChild, K = T.nextSibling, L = K.nextSibling;
+    return n(i, pt), f(l, () => t().totalGets), f(v, () => t().totalBatches), f(m, () => t().dedupedKeys, _), f(_, () => t().dedupRate.toFixed(0), p), f(k, () => t().avgBatchSize.toFixed(1)), f(C, () => t().avgDuration.toFixed(0), H), f(T, () => t().errors), f(L, () => t().aborts), z((c) => {
+      var b = O, G = E, q = R, P = O, X = E, Y = R, J = O, xe = E, me = R, pe = oe, ye = O, Se = E, $e = R, we = O, _e = E, ke = R, Ce = oe, ze = O, Be = E, Te = R, te = t().errors > 0 ? "#f87171" : "#f5f5f4", ne = t().aborts > 0 ? "#fbbf24" : "#f5f5f4";
+      return c.e = n(r, b, c.e), c.t = n(e, G, c.t), c.a = n(l, q, c.a), c.o = n(s, P, c.o), c.i = n(u, X, c.i), c.n = n(v, Y, c.n), c.s = n(g, J, c.s), c.h = n($, xe, c.h), c.r = n(m, me, c.r), c.d = n(_, pe, c.d), c.l = n(o, ye, c.l), c.u = n(y, Se, c.u), c.c = n(k, $e, c.c), c.w = n(x, we, c.w), c.m = n(h, _e, c.m), c.f = n(C, ke, c.f), c.y = n(H, Ce, c.y), c.g = n(F, ze, c.g), c.p = n(I, Be, c.p), c.b = n(D, Te, c.b), te !== c.T && re(T, "color", c.T = te), ne !== c.A && re(L, "color", c.A = ne), c;
     }, {
       e: void 0,
       t: void 0,
@@ -504,15 +504,15 @@ const pt = {
       b: void 0,
       T: void 0,
       A: void 0
-    }), o;
+    }), i;
   })();
 };
-var ie = /* @__PURE__ */ y("<div>"), St = /* @__PURE__ */ y("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No batcher selected</div><div style=font-size:11px;color:#57534e>Click a batcher to see its trace info"), $t = /* @__PURE__ */ y("<span style=color:#78716c;font-weight:normal;font-style:italic> (unnamed)"), wt = /* @__PURE__ */ y("<div><div>Location</div><div>"), _t = /* @__PURE__ */ y("<div><div>Function</div><div>"), kt = /* @__PURE__ */ y('<div style="height:auto;padding:24px 0"><div style=font-size:11px;color:#57534e>No trace metadata available');
+var le = /* @__PURE__ */ S("<div>"), St = /* @__PURE__ */ S("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No batcher selected</div><div style=font-size:11px;color:#57534e>Click a batcher to see its trace info"), $t = /* @__PURE__ */ S("<div><div>Location</div><div>"), wt = /* @__PURE__ */ S("<div><div>Function</div><div>"), _t = /* @__PURE__ */ S('<div style="height:auto;padding:24px 0"><div style=font-size:11px;color:#57534e>No trace metadata available'), kt = /* @__PURE__ */ S("<span style=color:#78716c;font-weight:normal;font-style:italic> (unnamed)");
 const Ct = {
   padding: "12px",
   height: "100%",
   "overflow-y": "auto"
-}, oe = {
+}, se = {
   display: "flex",
   "flex-direction": "column",
   "align-items": "center",
@@ -520,9 +520,9 @@ const Ct = {
   height: "100%",
   color: "#57534e",
   "text-align": "center"
-}, le = {
+}, ae = {
   "margin-bottom": "16px"
-}, se = {
+}, ce = {
   color: "#78716c",
   "margin-bottom": "6px",
   "font-size": "10px",
@@ -546,52 +546,69 @@ const Ct = {
   "font-weight": "600",
   color: "#f5f5f4",
   "margin-bottom": "16px"
-}, Tt = (l) => {
-  const t = () => l.batcher;
-  return (() => {
-    var o = ie();
-    return r(o, Ct), v(o, (() => {
-      var d = w(() => !t());
-      return () => d() ? (() => {
-        var e = St(), i = e.firstChild;
-        return i.nextSibling, C((u) => r(e, oe, u)), e;
-      })() : [(() => {
-        var e = ie();
-        return r(e, Bt), v(e, () => t().name, null), v(e, (() => {
-          var i = w(() => !!t().isUnnamed);
-          return () => i() && $t();
-        })(), null), e;
-      })(), w(() => w(() => !!t().location)() && (() => {
-        var e = wt(), i = e.firstChild, u = i.nextSibling;
-        return v(u, () => t().location), C((a) => {
-          var f = le, g = se, x = he;
-          return a.e = r(e, f, a.e), a.t = r(i, g, a.t), a.a = r(u, x, a.a), a;
+}, Tt = (a) => (() => {
+  var t = le();
+  return n(t, Ct), f(t, w(j, {
+    get when() {
+      return a.batcher;
+    },
+    get fallback() {
+      return (() => {
+        var i = St(), r = i.firstChild;
+        return r.nextSibling, z((e) => n(i, se, e)), i;
+      })();
+    },
+    children: (i) => [(() => {
+      var r = le();
+      return n(r, Bt), f(r, () => i().name, null), f(r, (() => {
+        var e = A(() => !!i().isUnnamed);
+        return () => e() && kt();
+      })(), null), r;
+    })(), w(j, {
+      get when() {
+        return i().location;
+      },
+      get children() {
+        var r = $t(), e = r.firstChild, l = e.nextSibling;
+        return f(l, () => i().location), z((s) => {
+          var u = ae, v = ce, g = he;
+          return s.e = n(r, u, s.e), s.t = n(e, v, s.t), s.a = n(l, g, s.a), s;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), e;
-      })()), w(() => w(() => !!t().fnSource)() && (() => {
-        var e = _t(), i = e.firstChild, u = i.nextSibling;
-        return v(u, () => t().fnSource), C((a) => {
-          var f = le, g = se, x = zt;
-          return a.e = r(e, f, a.e), a.t = r(i, g, a.t), a.a = r(u, x, a.a), a;
+        }), r;
+      }
+    }), w(j, {
+      get when() {
+        return i().fnSource;
+      },
+      get children() {
+        var r = wt(), e = r.firstChild, l = e.nextSibling;
+        return f(l, () => i().fnSource), z((s) => {
+          var u = ae, v = ce, g = zt;
+          return s.e = n(r, u, s.e), s.t = n(e, v, s.t), s.a = n(l, g, s.a), s;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), e;
-      })()), w(() => w(() => !t().location && !t().fnSource)() && (() => {
-        var e = kt();
-        return e.firstChild, C((i) => r(e, {
-          ...oe
-        }, i)), e;
-      })())];
-    })()), o;
-  })();
-};
-var At = /* @__PURE__ */ y("<button>");
-const ge = {
+        }), r;
+      }
+    }), w(j, {
+      get when() {
+        return A(() => !i().location)() && !i().fnSource;
+      },
+      get children() {
+        var r = _t();
+        return r.firstChild, z((e) => n(r, {
+          ...se
+        }, e)), r;
+      }
+    })]
+  })), t;
+})();
+var At = /* @__PURE__ */ S("<button>");
+const be = {
   position: "fixed",
   bottom: "16px",
   right: "16px",
@@ -607,32 +624,32 @@ const ge = {
   "z-index": "99999",
   "font-family": "ui-monospace, monospace"
 }, It = {
-  ...ge,
+  ...be,
   background: "#292524",
   color: "#f5f5f4",
   "border-color": "#57534e"
-}, Dt = (l) => {
+}, Dt = (a) => {
   const t = () => ({
-    ...l.isOpen ? It : ge,
-    ...l.style
+    ...a.isOpen ? It : be,
+    ...a.style
   });
   return (() => {
-    var o = At();
-    return Ae(o, "click", l.onClick, !0), v(o, () => l.isOpen ? "[×]" : "[=]"), C((d) => {
-      var e = l.class, i = t(), u = l.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools", a = l.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools";
-      return e !== d.e && ce(o, d.e = e), d.t = r(o, i, d.t), u !== d.a && Y(o, "title", d.a = u), a !== d.o && Y(o, "aria-label", d.o = a), d;
+    var i = At();
+    return Ae(i, "click", a.onClick, !0), f(i, () => a.isOpen ? "[×]" : "[=]"), z((r) => {
+      var e = a.class, l = t(), s = a.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools", u = a.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools";
+      return e !== r.e && ue(i, r.e = e), r.t = n(i, l, r.t), s !== r.a && Q(i, "title", r.a = s), u !== r.o && Q(i, "aria-label", r.o = u), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), o;
+    }), i;
   })();
 };
-J(["click"]);
-var Ot = /* @__PURE__ */ y("<div><div><div><span style=color:#78716c>[=]</span>Devtools</div><button>Clear</button></div><div><div><div>Batchers</div></div><div><div><button>Timeline</button><button>Events</button><button>Stats</button><button>Trace</button></div><div>");
-const ae = "650px", Et = "350px", Rt = "0.2s";
-function Nt(l) {
+V(["click"]);
+var Ot = /* @__PURE__ */ S("<div><div><div><span style=color:#78716c>[=]</span>Devtools</div><button>Clear</button></div><div><div><div>Batchers</div></div><div><div><button>Timeline</button><button>Events</button><button>Stats</button><button>Trace</button></div><div>");
+const de = "650px", Et = "350px", Rt = "0.2s";
+function Nt(a) {
   const t = {
     position: "fixed",
     background: "#0c0a09",
@@ -648,13 +665,13 @@ function Nt(l) {
     transition: `transform ${Rt} ease-out`,
     "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
   };
-  switch (l) {
+  switch (a) {
     case "right":
       return {
         ...t,
         top: "0",
         right: "0",
-        width: ae,
+        width: de,
         height: "100vh",
         "border-left-width": "1px",
         "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
@@ -664,7 +681,7 @@ function Nt(l) {
         ...t,
         top: "0",
         left: "0",
-        width: ae,
+        width: de,
         height: "100vh",
         "border-right-width": "1px",
         "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
@@ -682,9 +699,9 @@ function Nt(l) {
       };
   }
 }
-function jt(l, t) {
+function jt(a, t) {
   if (t) return "translate(0, 0)";
-  switch (l) {
+  switch (a) {
     case "right":
       return "translateX(100%)";
     case "left":
@@ -750,7 +767,7 @@ const Ft = {
   background: "#1c1917",
   "flex-shrink": "0",
   "user-select": "none"
-}, K = {
+}, M = {
   padding: "8px 12px",
   "font-size": "11px",
   "font-weight": "500",
@@ -761,8 +778,8 @@ const Ft = {
   background: "transparent",
   border: "none",
   "font-family": "ui-monospace, monospace"
-}, H = {
-  ...K,
+}, U = {
+  ...M,
   color: "#f5f5f4",
   "border-bottom": "1px solid #f5f5f4"
 }, qt = {
@@ -770,86 +787,89 @@ const Ft = {
   overflow: "auto",
   padding: "12px",
   background: "#0c0a09"
-}, Pt = (l) => {
-  const t = Ke(), [o, d] = Q("timeline"), e = () => l.position ?? "right";
+}, Pt = (a) => {
+  const t = Ke(), [i, r] = Z("timeline"), e = () => a.position ?? "right";
   Oe(() => {
-    l.defaultOpen && G().open();
+    a.defaultOpen && W().open();
   });
-  const i = () => {
-    G().toggle();
-  }, u = () => {
-    G().clear();
-  }, a = () => t().selectedBatcher, f = () => t().batchers, g = () => t().events, x = () => t().batches, m = () => {
-    const h = a();
-    return h ? g().filter((s) => s.batcherName === h) : g();
-  }, S = () => {
-    const h = a();
-    return h ? Array.from(x().values()).filter((s) => s.batcherName === h) : Array.from(x().values());
-  }, c = () => ({
+  const l = () => {
+    W().toggle();
+  }, s = () => {
+    W().clear();
+  }, u = () => t().selectedBatcher, v = () => t().batchers, g = () => t().events, $ = () => t().batches, m = () => {
+    const o = u();
+    return o ? v().get(o) ?? null : null;
+  }, _ = () => {
+    const o = u();
+    return o ? g().filter((y) => y.batcherName === o) : g();
+  }, d = () => {
+    const o = u();
+    return o ? Array.from($().values()).filter((y) => y.batcherName === o) : Array.from($().values());
+  }, p = () => ({
     ...Nt(e()),
     transform: jt(e(), t().isOpen),
-    ...l.panelStyle
+    ...a.panelStyle
   });
-  return [k(Dt, {
+  return [w(Dt, {
     get isOpen() {
       return t().isOpen;
     },
-    onClick: i,
+    onClick: l,
     get style() {
-      return l.buttonStyle;
+      return a.buttonStyle;
     },
     get class() {
-      return l.buttonClass;
+      return a.buttonClass;
     }
   }), (() => {
-    var h = Ot(), s = h.firstChild, $ = s.firstChild;
-    $.firstChild;
-    var _ = $.nextSibling, p = s.nextSibling, b = p.firstChild, T = b.firstChild, F = b.nextSibling, I = F.firstChild, D = I.firstChild, O = D.nextSibling, A = O.nextSibling, L = A.nextSibling, B = I.nextSibling;
-    return r(s, Ft), r($, Kt), _.$$click = u, r(_, Lt), r(p, Mt), r(b, Ht), r(T, Gt), v(b, k(Ye, {
+    var o = Ot(), y = o.firstChild, k = y.firstChild;
+    k.firstChild;
+    var x = k.nextSibling, h = y.nextSibling, C = h.firstChild, H = C.firstChild, F = C.nextSibling, I = F.firstChild, D = I.firstChild, T = D.nextSibling, K = T.nextSibling, L = K.nextSibling, c = I.nextSibling;
+    return n(y, Ft), n(k, Kt), x.$$click = s, n(x, Lt), n(h, Mt), n(C, Ht), n(H, Gt), f(C, w(Ye, {
       get batchers() {
-        return f();
+        return v();
       },
       get events() {
         return g();
       },
       get selectedBatcher() {
-        return a();
+        return u();
       },
       onSelect: Le
-    }), null), r(F, Ut), r(I, Wt), D.$$click = () => d("timeline"), O.$$click = () => d("events"), A.$$click = () => d("stats"), L.$$click = () => d("trace"), r(B, qt), v(B, (() => {
-      var n = w(() => o() === "timeline");
-      return () => n() && k(lt, {
+    }), null), n(F, Ut), n(I, Wt), D.$$click = () => r("timeline"), T.$$click = () => r("events"), K.$$click = () => r("stats"), L.$$click = () => r("trace"), n(c, qt), f(c, (() => {
+      var b = A(() => i() === "timeline");
+      return () => b() && w(lt, {
         get batches() {
-          return S();
+          return d();
         }
       });
-    })(), null), v(B, (() => {
-      var n = w(() => o() === "events");
-      return () => n() && k(xt, {
+    })(), null), f(c, (() => {
+      var b = A(() => i() === "events");
+      return () => b() && w(xt, {
         get events() {
-          return m();
+          return _();
         }
       });
-    })(), null), v(B, (() => {
-      var n = w(() => o() === "stats");
-      return () => n() && k(yt, {
+    })(), null), f(c, (() => {
+      var b = A(() => i() === "stats");
+      return () => b() && w(yt, {
         get events() {
-          return m();
+          return _();
         },
         get batches() {
-          return S();
+          return d();
         }
       });
-    })(), null), v(B, (() => {
-      var n = w(() => o() === "trace");
-      return () => n() && k(Tt, {
+    })(), null), f(c, (() => {
+      var b = A(() => i() === "trace");
+      return () => b() && w(Tt, {
         get batcher() {
-          return w(() => !!a())() ? f().get(a()) ?? null : null;
+          return m();
         }
       });
-    })(), null), C((n) => {
-      var M = l.panelClass, U = c(), W = o() === "timeline" ? H : K, q = o() === "events" ? H : K, P = o() === "stats" ? H : K, X = o() === "trace" ? H : K;
-      return M !== n.e && ce(h, n.e = M), n.t = r(h, U, n.t), n.a = r(D, W, n.a), n.o = r(O, q, n.o), n.i = r(A, P, n.i), n.n = r(L, X, n.n), n;
+    })(), null), z((b) => {
+      var G = a.panelClass, q = p(), P = i() === "timeline" ? U : M, X = i() === "events" ? U : M, Y = i() === "stats" ? U : M, J = i() === "trace" ? U : M;
+      return G !== b.e && ue(o, b.e = G), b.t = n(o, q, b.t), b.a = n(D, P, b.a), b.o = n(T, X, b.o), b.i = n(K, Y, b.i), b.n = n(L, J, b.n), b;
     }, {
       e: void 0,
       t: void 0,
@@ -857,16 +877,16 @@ const Ft = {
       o: void 0,
       i: void 0,
       n: void 0
-    }), h;
+    }), o;
   })()];
 };
-J(["click"]);
-function Qt(l, t) {
+V(["click"]);
+function Qt(a, t) {
   if (typeof window > "u")
     return () => {
     };
   Fe();
-  const o = {
+  const i = {
     position: t == null ? void 0 : t.position,
     defaultOpen: t == null ? void 0 : t.defaultOpen,
     buttonStyle: t == null ? void 0 : t.buttonStyle,
@@ -874,10 +894,10 @@ function Qt(l, t) {
     panelStyle: t == null ? void 0 : t.panelStyle,
     panelClass: t == null ? void 0 : t.panelClass
   };
-  return Ie(() => Pt(o), l);
+  return Ie(() => Pt(i), a);
 }
 export {
-  G as g,
+  W as g,
   Fe as i,
   Qt as m,
   Ke as u

package/dist/mount.js

@@ -1,5 +1,5 @@
 import "solid-js/web";
-import { m as t } from "./mount-DTowB9fq.js";
+import { m as t } from "./mount-zJ7EtgL3.js";
 export {
   t as mount
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "batchkit-devtools",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "DevTools panel for BatchKit - visualize batchers, batches, and invocations",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,7 +37,7 @@
     "directory": "packages/devtools"
   },
   "peerDependencies": {
-    "batchkit": ">=0.3.3"
+    "batchkit": ">=0.3.4"
   },
   "peerDependenciesMeta": {
     "batchkit": {