batchkit-devtools 0.2.0-beta.1 → 0.3.0

package/dist/mount-DTowB9fq.js

@@ -0,0 +1,884 @@
+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 { __setDevtoolsHook as Ee } from "batchkit";
+let Re = 0;
+function Ne(l) {
+  if (!l) return;
+  const t = l.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 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];
+    }
+}
+function je() {
+  const [l, t] = Q({
+    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);
+  }
+  function e(c) {
+    t((h) => {
+      const s = new Map(h.batchers);
+      return s.set(c.name, c), { ...h, batchers: s };
+    }), d();
+  }
+  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,
+          keys: [],
+          status: "scheduled",
+          scheduledAt: s.timestamp
+        };
+        p.set(s.batchId, b);
+      }
+      if (s.type === "dispatch") {
+        const b = p.get(s.batchId);
+        b && p.set(s.batchId, {
+          ...b,
+          keys: s.keys,
+          status: "dispatching",
+          dispatchedAt: s.timestamp
+        });
+      }
+      if (s.type === "resolve") {
+        const b = p.get(s.batchId);
+        b && p.set(s.batchId, {
+          ...b,
+          status: "resolved",
+          completedAt: s.timestamp,
+          duration: s.duration
+        });
+      }
+      if (s.type === "error") {
+        const b = p.get(s.batchId);
+        b && p.set(s.batchId, {
+          ...b,
+          status: "error",
+          completedAt: s.timestamp,
+          error: s.error
+        });
+      }
+      if (s.type === "abort") {
+        const b = p.get(s.batchId);
+        b && p.set(s.batchId, {
+          ...b,
+          status: "aborted",
+          completedAt: s.timestamp
+        });
+      }
+      return { ...$, events: _, batches: p };
+    }), d();
+  }
+  function u(c) {
+    return o.add(c), c(l()), () => o.delete(c);
+  }
+  function a() {
+    return l();
+  }
+  function f() {
+    t((c) => ({
+      ...c,
+      events: [],
+      batches: /* @__PURE__ */ new Map()
+    })), d();
+  }
+  function g() {
+    t((c) => ({ ...c, isOpen: !0 })), d();
+  }
+  function x() {
+    t((c) => ({ ...c, isOpen: !1 })), d();
+  }
+  function m() {
+    t((c) => ({ ...c, isOpen: !c.isOpen })), d();
+  }
+  return Ee({
+    onBatcherCreated({ fn: c, name: h, stack: s }) {
+      const $ = !h, _ = h ?? `unnamed-${++Re}`, p = c.toString().slice(0, 500), b = Ne(s);
+      return e({
+        name: _,
+        registeredAt: performance.now(),
+        isUnnamed: $,
+        fnSource: p,
+        location: b
+      }), (T) => {
+        i(_, T);
+      };
+    }
+  }), {
+    subscribe: u,
+    getStore: a,
+    clear: f,
+    open: g,
+    close: x,
+    toggle: m,
+    _setStore: t,
+    _store: l
+  };
+}
+let z = null;
+function Fe() {
+  if (typeof window > "u")
+    throw new Error("DevTools can only be used in browser environment");
+  return z || (z = De(() => je())), z;
+}
+function G() {
+  if (!z)
+    throw new Error(
+      "DevTools registry not initialized. Call initRegistry() first."
+    );
+  return z;
+}
+function Ke() {
+  const l = G();
+  if (l._store)
+    return l._store;
+  const [t, o] = Q(l.getStore());
+  return l.subscribe(o), t;
+}
+function Le(l) {
+  var t;
+  z && ((t = z._setStore) == null || t.call(z, (o) => ({
+    ...o,
+    selectedBatcher: l
+  })));
+}
+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");
+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"
+}, fe = {
+  "font-size": "13px",
+  color: "#d6d3d1",
+  "margin-bottom": "2px"
+}, qe = {
+  ...fe,
+  color: "#78716c",
+  "font-style": "italic"
+}, Pe = {
+  "font-size": "11px",
+  color: "#78716c"
+}, ne = {
+  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 = (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;
+    return {
+      gets: u,
+      batches: a
+    };
+  }, d = (e) => {
+    l.selectedBatcher === e ? l.onSelect(null) : l.onSelect(e);
+  };
+  return (() => {
+    var e = Me();
+    return r(e, Ue), v(e, k(V, {
+      get each() {
+        return t();
+      },
+      children: (i) => {
+        const u = () => o(i.name), a = () => l.selectedBatcher === i.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;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          }), f;
+        })();
+      }
+    }), 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), 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>");
+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"
+}, j = {
+  padding: "2px 6px",
+  "font-size": "10px",
+  "font-weight": "500",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.3px"
+}, nt = {
+  scheduled: {
+    ...j,
+    background: "#422006",
+    color: "#fbbf24"
+  },
+  dispatching: {
+    ...j,
+    background: "#1e3a5f",
+    color: "#60a5fa"
+  },
+  resolved: {
+    ...j,
+    background: "#14532d",
+    color: "#4ade80"
+  },
+  error: {
+    ...j,
+    background: "#450a0a",
+    color: "#f87171"
+  },
+  aborted: {
+    ...j,
+    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 = (l) => {
+  const t = (e) => e === void 0 ? "-" : e < 1 ? "<1ms" : e < 1e3 ? `${Math.round(e)}ms` : `${(e / 1e3).toFixed(2)}s`, o = (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);
+  return (() => {
+    var e = Je();
+    return r(e, Ze), v(e, k(ue, {
+      get when() {
+        return d().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var i = Qe(), u = i.firstChild;
+          return u.nextSibling, r(i, ot), i;
+        })();
+      },
+      get children() {
+        return k(V, {
+          get each() {
+            return d();
+          },
+          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;
+            }, {
+              e: void 0,
+              t: void 0
+            }), u;
+          })()
+        });
+      }
+    })), 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>");
+const dt = {
+  display: "flex",
+  "flex-direction": "column",
+  gap: "1px",
+  "font-size": "11px"
+}, ut = {
+  display: "flex",
+  gap: "12px",
+  padding: "4px 8px",
+  background: "#1c1917"
+}, vt = {
+  color: "#57534e",
+  "min-width": "60px"
+}, ft = {
+  "min-width": "60px",
+  "font-weight": "500"
+}, ht = {
+  get: "#60a5fa",
+  dedup: "#c084fc",
+  schedule: "#fbbf24",
+  dispatch: "#22d3ee",
+  resolve: "#4ade80",
+  error: "#f87171",
+  abort: "#a8a29e"
+}, gt = {
+  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 = (l) => {
+  const t = (e) => (e / 1e3).toFixed(3) + "s", o = (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 "";
+    }
+  }, d = () => [...l.events].reverse();
+  return (() => {
+    var e = st();
+    return r(e, dt), v(e, k(ue, {
+      get when() {
+        return d().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var i = at(), u = i.firstChild;
+          return u.nextSibling, r(i, bt), i;
+        })();
+      },
+      get children() {
+        return k(V, {
+          get each() {
+            return d();
+          },
+          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;
+          })()
+        });
+      }
+    })), 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>");
+const pt = {
+  display: "grid",
+  "grid-template-columns": "repeat(auto-fit, minmax(120px, 1fr))",
+  gap: "1px",
+  background: "#292524"
+}, E = {
+  padding: "12px",
+  background: "#1c1917"
+}, R = {
+  "font-size": "11px",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px",
+  color: "#78716c",
+  "margin-bottom": "4px"
+}, N = {
+  "font-size": "20px",
+  "font-weight": "500",
+  color: "#f5f5f4"
+}, re = {
+  "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;
+    return {
+      totalGets: e,
+      totalBatches: a,
+      dedupedKeys: i,
+      avgBatchSize: f,
+      avgDuration: g,
+      errors: x,
+      aborts: m,
+      dedupRate: S
+    };
+  });
+  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;
+    }, {
+      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
+    }), o;
+  })();
+};
+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');
+const Ct = {
+  padding: "12px",
+  height: "100%",
+  "overflow-y": "auto"
+}, oe = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center"
+}, le = {
+  "margin-bottom": "16px"
+}, se = {
+  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 = (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;
+        }, {
+          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;
+        }, {
+          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 = {
+  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 = {
+  ...ge,
+  background: "#292524",
+  color: "#f5f5f4",
+  "border-color": "#57534e"
+}, Dt = (l) => {
+  const t = () => ({
+    ...l.isOpen ? It : ge,
+    ...l.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;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), o;
+  })();
+};
+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) {
+  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 (l) {
+    case "right":
+      return {
+        ...t,
+        top: "0",
+        right: "0",
+        width: ae,
+        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: ae,
+        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(l, t) {
+  if (t) return "translate(0, 0)";
+  switch (l) {
+    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"
+}, K = {
+  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"
+}, H = {
+  ...K,
+  color: "#f5f5f4",
+  "border-bottom": "1px solid #f5f5f4"
+}, qt = {
+  flex: "1",
+  overflow: "auto",
+  padding: "12px",
+  background: "#0c0a09"
+}, Pt = (l) => {
+  const t = Ke(), [o, d] = Q("timeline"), e = () => l.position ?? "right";
+  Oe(() => {
+    l.defaultOpen && G().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 = () => ({
+    ...Nt(e()),
+    transform: jt(e(), t().isOpen),
+    ...l.panelStyle
+  });
+  return [k(Dt, {
+    get isOpen() {
+      return t().isOpen;
+    },
+    onClick: i,
+    get style() {
+      return l.buttonStyle;
+    },
+    get class() {
+      return l.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, {
+      get batchers() {
+        return f();
+      },
+      get events() {
+        return g();
+      },
+      get selectedBatcher() {
+        return a();
+      },
+      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, {
+        get batches() {
+          return S();
+        }
+      });
+    })(), null), v(B, (() => {
+      var n = w(() => o() === "events");
+      return () => n() && k(xt, {
+        get events() {
+          return m();
+        }
+      });
+    })(), null), v(B, (() => {
+      var n = w(() => o() === "stats");
+      return () => n() && k(yt, {
+        get events() {
+          return m();
+        },
+        get batches() {
+          return S();
+        }
+      });
+    })(), null), v(B, (() => {
+      var n = w(() => o() === "trace");
+      return () => n() && k(Tt, {
+        get batcher() {
+          return w(() => !!a())() ? f().get(a()) ?? null : null;
+        }
+      });
+    })(), 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;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), h;
+  })()];
+};
+J(["click"]);
+function Qt(l, t) {
+  if (typeof window > "u")
+    return () => {
+    };
+  Fe();
+  const o = {
+    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(o), l);
+}
+export {
+  G as g,
+  Fe as i,
+  Qt as m,
+  Ke as u
+};