batchkit-devtools 0.3.4 → 0.3.6

package/dist/mount-zJ7EtgL3.js

@@ -1,904 +0,0 @@
-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(a) {
-  if (!a) return;
-  const t = a.split(`
-`);
-  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 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 [a, t] = Z({
-    batchers: /* @__PURE__ */ new Map(),
-    events: [],
-    batches: /* @__PURE__ */ new Map(),
-    selectedBatcher: null,
-    isOpen: !1
-  }), i = /* @__PURE__ */ new Set();
-  function r() {
-    const d = a();
-    for (const p of i)
-      p(d);
-  }
-  function e(d) {
-    t((p) => {
-      const o = new Map(p.batchers);
-      return o.set(d.name, d), { ...p, batchers: o };
-    }), r();
-  }
-  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: o.timestamp
-        };
-        x.set(o.batchId, h);
-      }
-      if (o.type === "dispatch") {
-        const h = x.get(o.batchId);
-        h && x.set(o.batchId, {
-          ...h,
-          keys: o.keys,
-          status: "dispatching",
-          dispatchedAt: o.timestamp
-        });
-      }
-      if (o.type === "resolve") {
-        const h = x.get(o.batchId);
-        h && x.set(o.batchId, {
-          ...h,
-          status: "resolved",
-          completedAt: o.timestamp,
-          duration: o.duration
-        });
-      }
-      if (o.type === "error") {
-        const h = x.get(o.batchId);
-        h && x.set(o.batchId, {
-          ...h,
-          status: "error",
-          completedAt: o.timestamp,
-          error: o.error
-        });
-      }
-      if (o.type === "abort") {
-        const h = x.get(o.batchId);
-        h && x.set(o.batchId, {
-          ...h,
-          status: "aborted",
-          completedAt: o.timestamp
-        });
-      }
-      return { ...y, events: k, batches: x };
-    }), r();
-  }
-  function s(d) {
-    return i.add(d), d(a()), () => i.delete(d);
-  }
-  function u() {
-    return a();
-  }
-  function v() {
-    t((d) => ({
-      ...d,
-      events: [],
-      batches: /* @__PURE__ */ new Map()
-    })), r();
-  }
-  function g() {
-    t((d) => ({ ...d, isOpen: !0 })), r();
-  }
-  function $() {
-    t((d) => ({ ...d, isOpen: !1 })), r();
-  }
-  function m() {
-    t((d) => ({ ...d, isOpen: !d.isOpen })), r();
-  }
-  return Ee({
-    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: k,
-        registeredAt: performance.now(),
-        isUnnamed: y,
-        fnSource: x,
-        location: h
-      }), (C) => {
-        l(k, C);
-      };
-    }
-  }), {
-    subscribe: s,
-    getStore: u,
-    clear: v,
-    open: g,
-    close: $,
-    toggle: m,
-    _setStore: t,
-    _store: a
-  };
-}
-let B = null;
-function Fe() {
-  if (typeof window > "u")
-    throw new Error("DevTools can only be used in browser environment");
-  return B || (B = De(() => je())), B;
-}
-function W() {
-  if (!B)
-    throw new Error(
-      "DevTools registry not initialized. Call initRegistry() first."
-    );
-  return B;
-}
-function Ke() {
-  const a = W();
-  if (a._store)
-    return a._store;
-  const [t, i] = Z(a.getStore());
-  return a.subscribe(i), t;
-}
-function Le(a) {
-  var t;
-  B && ((t = B._setStore) == null || t.call(B, (i) => ({
-    ...i,
-    selectedBatcher: a
-  })));
-}
-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"
-}, ve = {
-  padding: "8px 12px",
-  cursor: "pointer",
-  "border-bottom": "1px solid #292524",
-  "border-left": "2px solid transparent"
-}, We = {
-  ...ve,
-  background: "#1c1917",
-  "border-left-color": "#a8a29e"
-}, ge = {
-  "font-size": "13px",
-  color: "#d6d3d1",
-  "margin-bottom": "2px"
-}, qe = {
-  ...ge,
-  color: "#78716c",
-  "font-style": "italic"
-}, Pe = {
-  "font-size": "11px",
-  color: "#78716c"
-}, ie = {
-  display: "inline-flex",
-  "align-items": "center",
-  gap: "4px",
-  "margin-right": "8px"
-}, Xe = {
-  display: "flex",
-  "flex-direction": "column",
-  "align-items": "center",
-  "justify-content": "center",
-  height: "100%",
-  color: "#57534e",
-  "text-align": "center",
-  padding: "24px 12px"
-}, 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: s,
-      batches: u
-    };
-  }, r = (e) => {
-    a.selectedBatcher === e ? a.onSelect(null) : a.onSelect(e);
-  };
-  return (() => {
-    var e = Me();
-    return n(e, Ue), f(e, w(ee, {
-      get each() {
-        return t();
-      },
-      children: (l) => {
-        const s = () => i(l.name), u = () => a.selectedBatcher === l.name;
-        return (() => {
-          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
-          }), v;
-        })();
-      }
-    }), 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;
-  })();
-};
-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",
-  gap: "1px"
-}, et = {
-  display: "flex",
-  "align-items": "center",
-  gap: "12px",
-  padding: "6px 8px",
-  background: "#1c1917",
-  "font-size": "11px"
-}, tt = {
-  "font-size": "11px",
-  color: "#78716c",
-  "min-width": "80px"
-}, N = {
-  padding: "2px 6px",
-  "font-size": "10px",
-  "font-weight": "500",
-  "text-transform": "uppercase",
-  "letter-spacing": "0.3px"
-}, nt = {
-  scheduled: {
-    ...N,
-    background: "#422006",
-    color: "#fbbf24"
-  },
-  dispatching: {
-    ...N,
-    background: "#1e3a5f",
-    color: "#60a5fa"
-  },
-  resolved: {
-    ...N,
-    background: "#14532d",
-    color: "#4ade80"
-  },
-  error: {
-    ...N,
-    background: "#450a0a",
-    color: "#f87171"
-  },
-  aborted: {
-    ...N,
-    background: "#292524",
-    color: "#a8a29e"
-  }
-}, rt = {
-  flex: "1",
-  "font-size": "11px",
-  color: "#a8a29e",
-  "white-space": "nowrap",
-  overflow: "hidden",
-  "text-overflow": "ellipsis"
-}, it = {
-  "font-size": "11px",
-  color: "#57534e",
-  "min-width": "50px",
-  "text-align": "right"
-}, ot = {
-  display: "flex",
-  "flex-direction": "column",
-  "align-items": "center",
-  "justify-content": "center",
-  height: "100%",
-  color: "#57534e",
-  "text-align": "center",
-  padding: "32px"
-}, 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 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 n(e, Ze), f(e, w(j, {
-      get when() {
-        return r().length > 0;
-      },
-      get fallback() {
-        return (() => {
-          var l = Qe(), s = l.firstChild;
-          return s.nextSibling, n(l, ot), l;
-        })();
-      },
-      get children() {
-        return w(ee, {
-          get each() {
-            return r();
-          },
-          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
-            }), s;
-          })()
-        });
-      }
-    })), e;
-  })();
-};
-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",
-  gap: "1px",
-  "font-size": "11px"
-}, ut = {
-  display: "flex",
-  gap: "12px",
-  padding: "4px 8px",
-  background: "#1c1917"
-}, ft = {
-  color: "#57534e",
-  "min-width": "60px"
-}, vt = {
-  "min-width": "60px",
-  "font-weight": "500"
-}, gt = {
-  get: "#60a5fa",
-  dedup: "#c084fc",
-  schedule: "#fbbf24",
-  dispatch: "#22d3ee",
-  resolve: "#4ade80",
-  error: "#f87171",
-  abort: "#a8a29e"
-}, ht = {
-  color: "#78716c",
-  flex: "1",
-  "white-space": "nowrap",
-  overflow: "hidden",
-  "text-overflow": "ellipsis"
-}, bt = {
-  display: "flex",
-  "flex-direction": "column",
-  "align-items": "center",
-  "justify-content": "center",
-  height: "100%",
-  color: "#57534e",
-  "text-align": "center",
-  padding: "32px"
-}, xt = (a) => {
-  const t = (e) => (e / 1e3).toFixed(3) + "s", i = (e) => {
-    switch (e.type) {
-      case "get":
-        return `key: ${String(e.key)}`;
-      case "dedup":
-        return `key: ${String(e.key)} (dedup)`;
-      case "schedule":
-        return `batch: ${e.batchId}, size: ${e.size}`;
-      case "dispatch":
-        return `batch: ${e.batchId}, keys: [${e.keys.map(String).join(", ")}]`;
-      case "resolve":
-        return `batch: ${e.batchId}, ${e.duration.toFixed(1)}ms`;
-      case "error":
-        return `batch: ${e.batchId}, ${e.error.message}`;
-      case "abort":
-        return `batch: ${e.batchId}`;
-      default:
-        return "";
-    }
-  }, r = () => [...a.events].reverse();
-  return (() => {
-    var e = st();
-    return n(e, dt), f(e, w(j, {
-      get when() {
-        return r().length > 0;
-      },
-      get fallback() {
-        return (() => {
-          var l = at(), s = l.firstChild;
-          return s.nextSibling, n(l, bt), l;
-        })();
-      },
-      get children() {
-        return w(ee, {
-          get each() {
-            return r();
-          },
-          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__ */ 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"
-}, O = {
-  padding: "12px",
-  background: "#1c1917"
-}, E = {
-  "font-size": "11px",
-  "text-transform": "uppercase",
-  "letter-spacing": "0.5px",
-  color: "#78716c",
-  "margin-bottom": "4px"
-}, R = {
-  "font-size": "20px",
-  "font-weight": "500",
-  color: "#f5f5f4"
-}, oe = {
-  "font-size": "11px",
-  color: "#57534e",
-  "margin-left": "2px"
-}, 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: u,
-      dedupedKeys: l,
-      avgBatchSize: v,
-      avgDuration: g,
-      errors: $,
-      aborts: m,
-      dedupRate: _
-    };
-  });
-  return (() => {
-    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,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0,
-      d: void 0,
-      l: void 0,
-      u: void 0,
-      c: void 0,
-      w: void 0,
-      m: void 0,
-      f: void 0,
-      y: void 0,
-      g: void 0,
-      p: void 0,
-      b: void 0,
-      T: void 0,
-      A: void 0
-    }), i;
-  })();
-};
-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"
-}, se = {
-  display: "flex",
-  "flex-direction": "column",
-  "align-items": "center",
-  "justify-content": "center",
-  height: "100%",
-  color: "#57534e",
-  "text-align": "center"
-}, ae = {
-  "margin-bottom": "16px"
-}, ce = {
-  color: "#78716c",
-  "margin-bottom": "6px",
-  "font-size": "10px",
-  "text-transform": "uppercase",
-  "letter-spacing": "0.5px"
-}, he = {
-  background: "#1c1917",
-  padding: "8px 10px",
-  "font-size": "11px",
-  color: "#d6d3d1",
-  border: "1px solid #292524"
-}, zt = {
-  ...he,
-  "white-space": "pre-wrap",
-  "word-break": "break-all",
-  "max-height": "300px",
-  "overflow-y": "auto",
-  "font-family": "ui-monospace, monospace"
-}, Bt = {
-  "font-size": "14px",
-  "font-weight": "600",
-  color: "#f5f5f4",
-  "margin-bottom": "16px"
-}, 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
-        }), 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
-        }), 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",
-  width: "40px",
-  height: "40px",
-  border: "1px solid #44403c",
-  background: "#1c1917",
-  color: "#a8a29e",
-  cursor: "pointer",
-  display: "flex",
-  "align-items": "center",
-  "justify-content": "center",
-  "z-index": "99999",
-  "font-family": "ui-monospace, monospace"
-}, It = {
-  ...be,
-  background: "#292524",
-  color: "#f5f5f4",
-  "border-color": "#57534e"
-}, Dt = (a) => {
-  const t = () => ({
-    ...a.isOpen ? It : be,
-    ...a.style
-  });
-  return (() => {
-    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
-    }), i;
-  })();
-};
-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",
-    "border-color": "#44403c",
-    "border-style": "solid",
-    "border-width": "0",
-    display: "flex",
-    "flex-direction": "column",
-    overflow: "hidden",
-    "z-index": "99998",
-    "font-family": "ui-monospace, monospace",
-    color: "#d6d3d1",
-    transition: `transform ${Rt} ease-out`,
-    "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
-  };
-  switch (a) {
-    case "right":
-      return {
-        ...t,
-        top: "0",
-        right: "0",
-        width: de,
-        height: "100vh",
-        "border-left-width": "1px",
-        "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
-      };
-    case "left":
-      return {
-        ...t,
-        top: "0",
-        left: "0",
-        width: de,
-        height: "100vh",
-        "border-right-width": "1px",
-        "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
-      };
-    case "bottom":
-      return {
-        ...t,
-        bottom: "0",
-        left: "0",
-        right: "0",
-        width: "100%",
-        height: Et,
-        "border-top-width": "1px",
-        "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
-      };
-  }
-}
-function jt(a, t) {
-  if (t) return "translate(0, 0)";
-  switch (a) {
-    case "right":
-      return "translateX(100%)";
-    case "left":
-      return "translateX(-100%)";
-    case "bottom":
-      return "translateY(100%)";
-  }
-}
-const Ft = {
-  display: "flex",
-  "align-items": "center",
-  "justify-content": "space-between",
-  padding: "8px 12px",
-  background: "#1c1917",
-  "border-bottom": "1px solid #44403c",
-  "flex-shrink": "0",
-  "user-select": "none"
-}, Kt = {
-  "font-size": "11px",
-  "font-weight": "500",
-  color: "#a8a29e",
-  display: "flex",
-  "align-items": "center",
-  gap: "8px",
-  "text-transform": "uppercase",
-  "letter-spacing": "0.5px"
-}, Lt = {
-  padding: "4px 8px",
-  border: "1px solid #44403c",
-  background: "#1c1917",
-  color: "#78716c",
-  "font-size": "11px",
-  "font-family": "ui-monospace, monospace",
-  cursor: "pointer"
-}, Mt = {
-  display: "flex",
-  flex: "1",
-  "min-height": "0"
-}, Ht = {
-  width: "160px",
-  "border-right": "1px solid #44403c",
-  display: "flex",
-  "flex-direction": "column",
-  background: "#0c0a09",
-  "flex-shrink": "0",
-  "user-select": "none"
-}, Gt = {
-  padding: "8px 12px",
-  "font-size": "11px",
-  "font-weight": "500",
-  "text-transform": "uppercase",
-  "letter-spacing": "0.5px",
-  color: "#78716c",
-  "border-bottom": "1px solid #292524"
-}, Ut = {
-  flex: "1",
-  display: "flex",
-  "flex-direction": "column",
-  "min-width": "0"
-}, Wt = {
-  display: "flex",
-  "border-bottom": "1px solid #44403c",
-  background: "#1c1917",
-  "flex-shrink": "0",
-  "user-select": "none"
-}, M = {
-  padding: "8px 12px",
-  "font-size": "11px",
-  "font-weight": "500",
-  color: "#78716c",
-  cursor: "pointer",
-  "border-bottom": "1px solid transparent",
-  "margin-bottom": "-1px",
-  background: "transparent",
-  border: "none",
-  "font-family": "ui-monospace, monospace"
-}, U = {
-  ...M,
-  color: "#f5f5f4",
-  "border-bottom": "1px solid #f5f5f4"
-}, qt = {
-  flex: "1",
-  overflow: "auto",
-  padding: "12px",
-  background: "#0c0a09"
-}, Pt = (a) => {
-  const t = Ke(), [i, r] = Z("timeline"), e = () => a.position ?? "right";
-  Oe(() => {
-    a.defaultOpen && W().open();
-  });
-  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),
-    ...a.panelStyle
-  });
-  return [w(Dt, {
-    get isOpen() {
-      return t().isOpen;
-    },
-    onClick: l,
-    get style() {
-      return a.buttonStyle;
-    },
-    get class() {
-      return a.buttonClass;
-    }
-  }), (() => {
-    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 v();
-      },
-      get events() {
-        return g();
-      },
-      get selectedBatcher() {
-        return u();
-      },
-      onSelect: Le
-    }), 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 d();
-        }
-      });
-    })(), null), f(c, (() => {
-      var b = A(() => i() === "events");
-      return () => b() && w(xt, {
-        get events() {
-          return _();
-        }
-      });
-    })(), null), f(c, (() => {
-      var b = A(() => i() === "stats");
-      return () => b() && w(yt, {
-        get events() {
-          return _();
-        },
-        get batches() {
-          return d();
-        }
-      });
-    })(), null), f(c, (() => {
-      var b = A(() => i() === "trace");
-      return () => b() && w(Tt, {
-        get batcher() {
-          return m();
-        }
-      });
-    })(), 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,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0
-    }), o;
-  })()];
-};
-V(["click"]);
-function Qt(a, t) {
-  if (typeof window > "u")
-    return () => {
-    };
-  Fe();
-  const i = {
-    position: t == null ? void 0 : t.position,
-    defaultOpen: t == null ? void 0 : t.defaultOpen,
-    buttonStyle: t == null ? void 0 : t.buttonStyle,
-    buttonClass: t == null ? void 0 : t.buttonClass,
-    panelStyle: t == null ? void 0 : t.panelStyle,
-    panelClass: t == null ? void 0 : t.panelClass
-  };
-  return Ie(() => Pt(i), a);
-}
-export {
-  W as g,
-  Fe as i,
-  Qt as m,
-  Ke as u
-};