batchkit-devtools 0.3.3 → 0.3.5

package/dist/mount-Ctm2jQ14.js

@@ -0,0 +1,992 @@
+import { delegateEvents as q, template as $, style as r, insert as g, createComponent as _, effect as z, memo as I, setAttribute as P, setStyleProperty as ie, addEventListener as Ie, className as fe, render as Re } from "solid-js/web";
+import { createRoot as De, createSignal as ee, createMemo as ve, For as te, Show as A, onMount as Oe } from "solid-js";
+import { __setDevtoolsHook as Ee } from "batchkit";
+let je = 0;
+function Ne(l) {
+  if (!l) return;
+  const e = l.split(`
+`);
+  for (const i of e)
+    if (i.includes("batch") && !i.includes("batchkit") && !i.includes("node_modules")) {
+      const o = i.match(/at\s+.*?\s+\(?(.*?:\d+:\d+)\)?$/);
+      if (o) return o[1];
+    }
+  for (const i of e.slice(2))
+    if (!i.includes("batchkit") && !i.includes("node_modules")) {
+      const o = i.match(/at\s+.*?\s+\(?(.*?:\d+:\d+)\)?$/);
+      if (o) return o[1];
+    }
+}
+function Le() {
+  const [l, e] = ee({
+    batchers: /* @__PURE__ */ new Map(),
+    events: [],
+    batches: /* @__PURE__ */ new Map(),
+    selectedBatcher: null,
+    isOpen: !1,
+    config: {}
+  }), i = /* @__PURE__ */ new Set();
+  function o() {
+    const a = l();
+    for (const y of i)
+      y(a);
+  }
+  function t(a) {
+    e((y) => {
+      const s = new Map(y.batchers);
+      return s.set(a.name, a), { ...y, batchers: s };
+    }), o();
+  }
+  function n(a, y) {
+    const s = { ...y, batcherName: a };
+    e((w) => {
+      const k = [...w.events, s], S = new Map(w.batches);
+      if (s.type === "schedule") {
+        const m = {
+          batchId: s.batchId,
+          batcherName: a,
+          keys: [],
+          status: "scheduled",
+          scheduledAt: s.timestamp
+        };
+        S.set(s.batchId, m);
+      }
+      if (s.type === "dispatch") {
+        const m = S.get(s.batchId);
+        m && S.set(s.batchId, {
+          ...m,
+          keys: s.keys,
+          status: "dispatching",
+          dispatchedAt: s.timestamp
+        });
+      }
+      if (s.type === "resolve") {
+        const m = S.get(s.batchId);
+        m && S.set(s.batchId, {
+          ...m,
+          status: "resolved",
+          completedAt: s.timestamp,
+          duration: s.duration
+        });
+      }
+      if (s.type === "error") {
+        const m = S.get(s.batchId);
+        m && S.set(s.batchId, {
+          ...m,
+          status: "error",
+          completedAt: s.timestamp,
+          error: s.error
+        });
+      }
+      if (s.type === "abort") {
+        const m = S.get(s.batchId);
+        m && S.set(s.batchId, {
+          ...m,
+          status: "aborted",
+          completedAt: s.timestamp
+        });
+      }
+      return { ...w, events: k, batches: S };
+    }), o();
+  }
+  function c(a) {
+    return i.add(a), a(l()), () => i.delete(a);
+  }
+  function f() {
+    return l();
+  }
+  function u() {
+    e((a) => ({
+      ...a,
+      events: [],
+      batches: /* @__PURE__ */ new Map()
+    })), o();
+  }
+  function v() {
+    e((a) => ({ ...a, isOpen: !0 })), o();
+  }
+  function h() {
+    e((a) => ({ ...a, isOpen: !1 })), o();
+  }
+  function b() {
+    e((a) => ({ ...a, isOpen: !a.isOpen })), o();
+  }
+  return Ee({
+    onBatcherCreated({ fn: a, name: y, stack: s }) {
+      const w = !y, k = y ?? `unnamed-${++je}`, S = a.toString().slice(0, 500), m = Ne(s);
+      return t({
+        name: k,
+        registeredAt: performance.now(),
+        isUnnamed: w,
+        fnSource: S,
+        location: m
+      }), (B) => {
+        n(k, B);
+      };
+    }
+  }), {
+    subscribe: c,
+    getStore: f,
+    clear: u,
+    open: v,
+    close: h,
+    toggle: b,
+    _setStore: e,
+    _store: l
+  };
+}
+let C = null;
+function Me() {
+  if (typeof window > "u")
+    throw new Error("DevTools can only be used in browser environment");
+  return C || (C = De(() => Le())), C;
+}
+function G() {
+  if (!C)
+    throw new Error(
+      "DevTools registry not initialized. Call initRegistry() first."
+    );
+  return C;
+}
+function he() {
+  const l = G();
+  if (l._store)
+    return l._store;
+  const [e, i] = ee(l.getStore());
+  return l.subscribe(i), e;
+}
+function Fe(l) {
+  var e;
+  C && ((e = C._setStore) == null || e.call(C, (i) => ({
+    ...i,
+    selectedBatcher: l
+  })));
+}
+function Ke(l) {
+  var e;
+  C && ((e = C._setStore) == null || e.call(C, (i) => ({
+    ...i,
+    config: { ...i.config, ...l }
+  })));
+}
+var Ue = /* @__PURE__ */ $("<div>"), He = /* @__PURE__ */ $("<div><div></div><div><span> gets</span><span> batches"), We = /* @__PURE__ */ $("<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 Ge = {
+  flex: "1",
+  "overflow-y": "auto"
+}, ge = {
+  padding: "8px 12px",
+  cursor: "pointer",
+  "border-bottom": "1px solid #292524",
+  "border-left": "2px solid transparent"
+}, Pe = {
+  ...ge,
+  background: "#1c1917",
+  "border-left-color": "#a8a29e"
+}, be = {
+  "font-size": "13px",
+  color: "#d6d3d1",
+  "margin-bottom": "2px"
+}, qe = {
+  ...be,
+  color: "#78716c",
+  "font-style": "italic"
+}, Xe = {
+  "font-size": "11px",
+  color: "#78716c"
+}, le = {
+  display: "inline-flex",
+  "align-items": "center",
+  gap: "4px",
+  "margin-right": "8px"
+}, Ye = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center",
+  padding: "24px 12px"
+}, Je = (l) => {
+  const e = ve(() => Array.from(l.batchers.values())), i = (t) => {
+    const n = l.events.filter((u) => u.batcherName === t), c = n.filter((u) => u.type === "get").length, f = n.filter((u) => u.type === "resolve").length;
+    return {
+      gets: c,
+      batches: f
+    };
+  }, o = (t) => {
+    l.selectedBatcher === t ? l.onSelect(null) : l.onSelect(t);
+  };
+  return (() => {
+    var t = Ue();
+    return r(t, Ge), g(t, _(te, {
+      get each() {
+        return e();
+      },
+      children: (n) => {
+        const c = () => i(n.name), f = () => l.selectedBatcher === n.name;
+        return (() => {
+          var u = He(), v = u.firstChild, h = v.nextSibling, b = h.firstChild, x = b.firstChild, a = b.nextSibling, y = a.firstChild;
+          return u.$$click = () => o(n.name), g(v, () => n.name), r(h, Xe), g(b, () => c().gets, x), g(a, () => c().batches, y), z((s) => {
+            var w = f() ? Pe : ge, k = n.isUnnamed ? qe : be, S = le, m = le;
+            return s.e = r(u, w, s.e), s.t = r(v, k, s.t), s.a = r(b, S, s.a), s.o = r(a, m, s.o), s;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          }), u;
+        })();
+      }
+    }), null), g(t, (() => {
+      var n = I(() => e().length === 0);
+      return () => n() && (() => {
+        var c = We(), f = c.firstChild;
+        return f.nextSibling, r(c, Ye), c;
+      })();
+    })(), null), t;
+  })();
+};
+q(["click"]);
+var Qe = /* @__PURE__ */ $("<div>"), Ve = /* @__PURE__ */ $("<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"), Ze = /* @__PURE__ */ $("<div><div></div><div></div><div></div><div>");
+const et = {
+  display: "flex",
+  "flex-direction": "column",
+  gap: "1px"
+}, tt = {
+  display: "flex",
+  "align-items": "center",
+  gap: "12px",
+  padding: "6px 8px",
+  background: "#1c1917",
+  "font-size": "11px"
+}, nt = {
+  "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"
+}, rt = {
+  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"
+  }
+}, ot = {
+  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"
+}, lt = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center",
+  padding: "32px"
+}, st = (l) => {
+  const e = (t) => t === void 0 ? "-" : t < 1 ? "<1ms" : t < 1e3 ? `${Math.round(t)}ms` : `${(t / 1e3).toFixed(2)}s`, i = (t) => {
+    if (t.length === 0) return "-";
+    const n = t.slice(0, 3).map((c) => String(c)).join(", ");
+    return t.length > 3 ? `${n} +${t.length - 3}` : n;
+  }, o = () => [...l.batches].sort((t, n) => n.scheduledAt - t.scheduledAt);
+  return (() => {
+    var t = Qe();
+    return r(t, et), g(t, _(A, {
+      get when() {
+        return o().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var n = Ve(), c = n.firstChild;
+          return c.nextSibling, r(n, lt), n;
+        })();
+      },
+      get children() {
+        return _(te, {
+          get each() {
+            return o();
+          },
+          children: (n) => (() => {
+            var c = Ze(), f = c.firstChild, u = f.nextSibling, v = u.nextSibling, h = v.nextSibling;
+            return r(c, tt), r(f, nt), g(f, () => n.batchId), g(u, () => n.status), r(v, ot), g(v, () => i(n.keys)), r(h, it), g(h, () => e(n.duration)), z((b) => {
+              var x = rt[n.status] || N, a = n.keys.map(String).join(", ");
+              return b.e = r(u, x, b.e), a !== b.t && P(v, "title", b.t = a), b;
+            }, {
+              e: void 0,
+              t: void 0
+            }), c;
+          })()
+        });
+      }
+    })), t;
+  })();
+};
+var ct = /* @__PURE__ */ $("<div>"), at = /* @__PURE__ */ $("<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"), dt = /* @__PURE__ */ $("<div><span></span><span></span><span>");
+const ut = {
+  display: "flex",
+  "flex-direction": "column",
+  gap: "1px",
+  "font-size": "11px"
+}, ft = {
+  display: "flex",
+  gap: "12px",
+  padding: "4px 8px",
+  background: "#1c1917"
+}, vt = {
+  color: "#57534e",
+  "min-width": "60px"
+}, ht = {
+  "min-width": "60px",
+  "font-weight": "500"
+}, gt = {
+  get: "#60a5fa",
+  dedup: "#c084fc",
+  schedule: "#fbbf24",
+  dispatch: "#22d3ee",
+  resolve: "#4ade80",
+  error: "#f87171",
+  abort: "#a8a29e"
+}, bt = {
+  color: "#78716c",
+  flex: "1",
+  "white-space": "nowrap",
+  overflow: "hidden",
+  "text-overflow": "ellipsis"
+}, xt = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center",
+  padding: "32px"
+}, mt = (l) => {
+  const e = (t) => (t / 1e3).toFixed(3) + "s", i = (t) => {
+    switch (t.type) {
+      case "get":
+        return `key: ${String(t.key)}`;
+      case "dedup":
+        return `key: ${String(t.key)} (dedup)`;
+      case "schedule":
+        return `batch: ${t.batchId}, size: ${t.size}`;
+      case "dispatch":
+        return `batch: ${t.batchId}, keys: [${t.keys.map(String).join(", ")}]`;
+      case "resolve":
+        return `batch: ${t.batchId}, ${t.duration.toFixed(1)}ms`;
+      case "error":
+        return `batch: ${t.batchId}, ${t.error.message}`;
+      case "abort":
+        return `batch: ${t.batchId}`;
+      default:
+        return "";
+    }
+  }, o = () => [...l.events].reverse();
+  return (() => {
+    var t = ct();
+    return r(t, ut), g(t, _(A, {
+      get when() {
+        return o().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var n = at(), c = n.firstChild;
+          return c.nextSibling, r(n, xt), n;
+        })();
+      },
+      get children() {
+        return _(te, {
+          get each() {
+            return o();
+          },
+          children: (n) => (() => {
+            var c = dt(), f = c.firstChild, u = f.nextSibling, v = u.nextSibling;
+            return r(c, ft), r(f, vt), g(f, () => e(n.timestamp)), g(u, () => n.type), r(v, bt), g(v, () => i(n)), z((h) => r(u, {
+              ...ht,
+              color: gt[n.type]
+            }, h)), c;
+          })()
+        });
+      }
+    })), t;
+  })();
+};
+var pt = /* @__PURE__ */ $("<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 yt = {
+  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"
+}, j = {
+  "font-size": "20px",
+  "font-weight": "500",
+  color: "#f5f5f4"
+}, se = {
+  "font-size": "11px",
+  color: "#57534e",
+  "margin-left": "2px"
+}, St = (l) => {
+  const e = ve(() => {
+    const i = l.events, o = l.batches, t = i.filter((a) => a.type === "get").length, n = i.filter((a) => a.type === "dedup").length, c = o.filter((a) => a.status === "resolved"), f = c.length, u = f > 0 ? c.reduce((a, y) => a + y.keys.length, 0) / f : 0, v = f > 0 ? c.reduce((a, y) => a + (y.duration || 0), 0) / f : 0, h = o.filter((a) => a.status === "error").length, b = o.filter((a) => a.status === "aborted").length, x = t > 0 ? n / t * 100 : 0;
+    return {
+      totalGets: t,
+      totalBatches: f,
+      dedupedKeys: n,
+      avgBatchSize: u,
+      avgDuration: v,
+      errors: h,
+      aborts: b,
+      dedupRate: x
+    };
+  });
+  return (() => {
+    var i = pt(), o = i.firstChild, t = o.firstChild, n = t.nextSibling, c = o.nextSibling, f = c.firstChild, u = f.nextSibling, v = c.nextSibling, h = v.firstChild, b = h.nextSibling, x = b.firstChild, a = x.firstChild, y = a.nextSibling;
+    y.nextSibling;
+    var s = v.nextSibling, w = s.firstChild, k = w.nextSibling, S = s.nextSibling, m = S.firstChild, B = m.nextSibling, U = B.firstChild, L = S.nextSibling, R = L.firstChild, D = R.nextSibling, T = D.firstChild, M = T.nextSibling, F = M.nextSibling;
+    return r(i, yt), g(n, () => e().totalGets), g(u, () => e().totalBatches), g(b, () => e().dedupedKeys, x), g(x, () => e().dedupRate.toFixed(0), y), g(k, () => e().avgBatchSize.toFixed(1)), g(B, () => e().avgDuration.toFixed(0), U), g(T, () => e().errors), g(F, () => e().aborts), z((d) => {
+      var p = O, H = E, X = j, Y = O, J = E, Q = j, V = O, me = E, pe = j, ye = se, Se = O, $e = E, we = j, _e = O, ke = E, Ce = j, ze = se, Be = O, Te = E, Ae = j, re = e().errors > 0 ? "#f87171" : "#f5f5f4", oe = e().aborts > 0 ? "#fbbf24" : "#f5f5f4";
+      return d.e = r(o, p, d.e), d.t = r(t, H, d.t), d.a = r(n, X, d.a), d.o = r(c, Y, d.o), d.i = r(f, J, d.i), d.n = r(u, Q, d.n), d.s = r(v, V, d.s), d.h = r(h, me, d.h), d.r = r(b, pe, d.r), d.d = r(x, ye, d.d), d.l = r(s, Se, d.l), d.u = r(w, $e, d.u), d.c = r(k, we, d.c), d.w = r(S, _e, d.w), d.m = r(m, ke, d.m), d.f = r(B, Ce, d.f), d.y = r(U, ze, d.y), d.g = r(L, Be, d.g), d.p = r(R, Te, d.p), d.b = r(D, Ae, d.b), re !== d.T && ie(T, "color", d.T = re), oe !== d.A && ie(F, "color", d.A = oe), d;
+    }, {
+      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 Z = /* @__PURE__ */ $("<div>"), $t = /* @__PURE__ */ $("<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"), wt = /* @__PURE__ */ $("<div><div>Function</div><div>"), _t = /* @__PURE__ */ $('<div style="height:auto;padding:24px 0"><div style=font-size:11px;color:#57534e>No trace metadata available'), kt = /* @__PURE__ */ $("<span style=color:#78716c;font-weight:normal;font-style:italic> (unnamed)"), Ct = /* @__PURE__ */ $("<div><div>Location"), zt = /* @__PURE__ */ $("<a> ↗");
+function Bt(l) {
+  let e = l;
+  const i = l.match(/^https?:\/\/[^/]+(.*)$/);
+  i && (e = i[1]), e = e.split("?")[0];
+  const o = e.match(/^(.+?):(\d+)(?::(\d+))?$/);
+  return o ? {
+    path: o[1],
+    line: parseInt(o[2], 10),
+    column: o[3] ? parseInt(o[3], 10) : void 0
+  } : {
+    path: e
+  };
+}
+function Tt(l, e) {
+  const i = Bt(l);
+  if (!i) return null;
+  let {
+    path: o,
+    line: t,
+    column: n
+  } = i;
+  if (o.startsWith("/") && !o.startsWith("//") && e.projectRoot)
+    o = e.projectRoot + o;
+  else if (!o.startsWith("/"))
+    if (e.projectRoot)
+      o = e.projectRoot + "/" + o;
+    else
+      return null;
+  const c = e.editor ?? "vscode", u = {
+    vscode: "vscode://file",
+    cursor: "cursor://file",
+    webstorm: "webstorm://open?file=",
+    idea: "idea://open?file="
+  }[c];
+  if (!u) return null;
+  if (c === "webstorm" || c === "idea") {
+    let h = `${u}${encodeURIComponent(o)}`;
+    return t !== void 0 && (h += `&line=${t}`, n !== void 0 && (h += `&column=${n}`)), h;
+  }
+  let v = `${u}${o}`;
+  return t !== void 0 && (v += `:${t}`, n !== void 0 && (v += `:${n}`)), v;
+}
+const At = {
+  padding: "12px",
+  height: "100%",
+  "overflow-y": "auto"
+}, ce = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center"
+}, ae = {
+  "margin-bottom": "16px"
+}, de = {
+  color: "#78716c",
+  "margin-bottom": "6px",
+  "font-size": "10px",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px"
+}, ne = {
+  background: "#1c1917",
+  padding: "8px 10px",
+  "font-size": "11px",
+  color: "#d6d3d1",
+  border: "1px solid #292524"
+}, It = {
+  ...ne,
+  display: "block",
+  color: "#93c5fd",
+  "text-decoration": "none",
+  cursor: "pointer"
+}, Rt = {
+  "text-decoration": "underline"
+}, Dt = {
+  ...ne,
+  "white-space": "pre-wrap",
+  "word-break": "break-all",
+  "max-height": "300px",
+  "overflow-y": "auto",
+  "font-family": "ui-monospace, monospace"
+}, Ot = {
+  "font-size": "14px",
+  "font-weight": "600",
+  color: "#f5f5f4",
+  "margin-bottom": "16px"
+}, Et = (l) => {
+  const e = he(), i = () => e().config;
+  return (() => {
+    var o = Z();
+    return r(o, At), g(o, _(A, {
+      get when() {
+        return l.batcher;
+      },
+      get fallback() {
+        return (() => {
+          var t = $t(), n = t.firstChild;
+          return n.nextSibling, z((c) => r(t, ce, c)), t;
+        })();
+      },
+      children: (t) => [(() => {
+        var n = Z();
+        return r(n, Ot), g(n, () => t().name, null), g(n, (() => {
+          var c = I(() => !!t().isUnnamed);
+          return () => c() && kt();
+        })(), null), n;
+      })(), _(A, {
+        get when() {
+          return t().location;
+        },
+        children: (n) => {
+          const c = () => Tt(n(), i());
+          return (() => {
+            var f = Ct(), u = f.firstChild;
+            return g(f, _(A, {
+              get when() {
+                return c();
+              },
+              get fallback() {
+                return (() => {
+                  var v = Z();
+                  return g(v, n), z((h) => r(v, ne, h)), v;
+                })();
+              },
+              children: (v) => (() => {
+                var h = zt(), b = h.firstChild;
+                return h.$$mouseout = (x) => x.currentTarget.style.textDecoration = "none", h.$$mouseover = (x) => Object.assign(x.currentTarget.style, Rt), g(h, n, b), z((x) => {
+                  var a = v(), y = It;
+                  return a !== x.e && P(h, "href", x.e = a), x.t = r(h, y, x.t), x;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), h;
+              })()
+            }), null), z((v) => {
+              var h = ae, b = de;
+              return v.e = r(f, h, v.e), v.t = r(u, b, v.t), v;
+            }, {
+              e: void 0,
+              t: void 0
+            }), f;
+          })();
+        }
+      }), _(A, {
+        get when() {
+          return t().fnSource;
+        },
+        get children() {
+          var n = wt(), c = n.firstChild, f = c.nextSibling;
+          return g(f, () => t().fnSource), z((u) => {
+            var v = ae, h = de, b = Dt;
+            return u.e = r(n, v, u.e), u.t = r(c, h, u.t), u.a = r(f, b, u.a), u;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          }), n;
+        }
+      }), _(A, {
+        get when() {
+          return I(() => !t().location)() && !t().fnSource;
+        },
+        get children() {
+          var n = _t();
+          return n.firstChild, z((c) => r(n, {
+            ...ce
+          }, c)), n;
+        }
+      })]
+    })), o;
+  })();
+};
+q(["mouseover", "mouseout"]);
+var jt = /* @__PURE__ */ $("<button>");
+const xe = {
+  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"
+}, Nt = {
+  ...xe,
+  background: "#292524",
+  color: "#f5f5f4",
+  "border-color": "#57534e"
+}, Lt = (l) => {
+  const e = () => ({
+    ...l.isOpen ? Nt : xe,
+    ...l.style
+  });
+  return (() => {
+    var i = jt();
+    return Ie(i, "click", l.onClick, !0), g(i, () => l.isOpen ? "[×]" : "[=]"), z((o) => {
+      var t = l.class, n = e(), c = l.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools", f = l.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools";
+      return t !== o.e && fe(i, o.e = t), o.t = r(i, n, o.t), c !== o.a && P(i, "title", o.a = c), f !== o.o && P(i, "aria-label", o.o = f), o;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), i;
+  })();
+};
+q(["click"]);
+var Mt = /* @__PURE__ */ $("<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 ue = "650px", Ft = "350px", Kt = "0.2s";
+function Ut(l) {
+  const e = {
+    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 ${Kt} ease-out`,
+    "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
+  };
+  switch (l) {
+    case "right":
+      return {
+        ...e,
+        top: "0",
+        right: "0",
+        width: ue,
+        height: "100vh",
+        "border-left-width": "1px",
+        "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
+      };
+    case "left":
+      return {
+        ...e,
+        top: "0",
+        left: "0",
+        width: ue,
+        height: "100vh",
+        "border-right-width": "1px",
+        "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
+      };
+    case "bottom":
+      return {
+        ...e,
+        bottom: "0",
+        left: "0",
+        right: "0",
+        width: "100%",
+        height: Ft,
+        "border-top-width": "1px",
+        "box-shadow": "0 0 10px 0 rgba(0, 0, 0, 0.1)"
+      };
+  }
+}
+function Ht(l, e) {
+  if (e) return "translate(0, 0)";
+  switch (l) {
+    case "right":
+      return "translateX(100%)";
+    case "left":
+      return "translateX(-100%)";
+    case "bottom":
+      return "translateY(100%)";
+  }
+}
+const Wt = {
+  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"
+}, Gt = {
+  "font-size": "11px",
+  "font-weight": "500",
+  color: "#a8a29e",
+  display: "flex",
+  "align-items": "center",
+  gap: "8px",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px"
+}, Pt = {
+  padding: "4px 8px",
+  border: "1px solid #44403c",
+  background: "#1c1917",
+  color: "#78716c",
+  "font-size": "11px",
+  "font-family": "ui-monospace, monospace",
+  cursor: "pointer"
+}, qt = {
+  display: "flex",
+  flex: "1",
+  "min-height": "0"
+}, Xt = {
+  width: "160px",
+  "border-right": "1px solid #44403c",
+  display: "flex",
+  "flex-direction": "column",
+  background: "#0c0a09",
+  "flex-shrink": "0",
+  "user-select": "none"
+}, Yt = {
+  padding: "8px 12px",
+  "font-size": "11px",
+  "font-weight": "500",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px",
+  color: "#78716c",
+  "border-bottom": "1px solid #292524"
+}, Jt = {
+  flex: "1",
+  display: "flex",
+  "flex-direction": "column",
+  "min-width": "0"
+}, Qt = {
+  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"
+}, W = {
+  ...K,
+  color: "#f5f5f4",
+  "border-bottom": "1px solid #f5f5f4"
+}, Vt = {
+  flex: "1",
+  overflow: "auto",
+  padding: "12px",
+  background: "#0c0a09"
+}, Zt = (l) => {
+  const e = he(), [i, o] = ee("timeline"), t = () => l.position ?? "right";
+  Oe(() => {
+    l.defaultOpen && G().open();
+  });
+  const n = () => {
+    G().toggle();
+  }, c = () => {
+    G().clear();
+  }, f = () => e().selectedBatcher, u = () => e().batchers, v = () => e().events, h = () => e().batches, b = () => {
+    const s = f();
+    return s ? u().get(s) ?? null : null;
+  }, x = () => {
+    const s = f();
+    return s ? v().filter((w) => w.batcherName === s) : v();
+  }, a = () => {
+    const s = f();
+    return s ? Array.from(h().values()).filter((w) => w.batcherName === s) : Array.from(h().values());
+  }, y = () => ({
+    ...Ut(t()),
+    transform: Ht(t(), e().isOpen),
+    ...l.panelStyle
+  });
+  return [_(Lt, {
+    get isOpen() {
+      return e().isOpen;
+    },
+    onClick: n,
+    get style() {
+      return l.buttonStyle;
+    },
+    get class() {
+      return l.buttonClass;
+    }
+  }), (() => {
+    var s = Mt(), w = s.firstChild, k = w.firstChild;
+    k.firstChild;
+    var S = k.nextSibling, m = w.nextSibling, B = m.firstChild, U = B.firstChild, L = B.nextSibling, R = L.firstChild, D = R.firstChild, T = D.nextSibling, M = T.nextSibling, F = M.nextSibling, d = R.nextSibling;
+    return r(w, Wt), r(k, Gt), S.$$click = c, r(S, Pt), r(m, qt), r(B, Xt), r(U, Yt), g(B, _(Je, {
+      get batchers() {
+        return u();
+      },
+      get events() {
+        return v();
+      },
+      get selectedBatcher() {
+        return f();
+      },
+      onSelect: Fe
+    }), null), r(L, Jt), r(R, Qt), D.$$click = () => o("timeline"), T.$$click = () => o("events"), M.$$click = () => o("stats"), F.$$click = () => o("trace"), r(d, Vt), g(d, (() => {
+      var p = I(() => i() === "timeline");
+      return () => p() && _(st, {
+        get batches() {
+          return a();
+        }
+      });
+    })(), null), g(d, (() => {
+      var p = I(() => i() === "events");
+      return () => p() && _(mt, {
+        get events() {
+          return x();
+        }
+      });
+    })(), null), g(d, (() => {
+      var p = I(() => i() === "stats");
+      return () => p() && _(St, {
+        get events() {
+          return x();
+        },
+        get batches() {
+          return a();
+        }
+      });
+    })(), null), g(d, (() => {
+      var p = I(() => i() === "trace");
+      return () => p() && _(Et, {
+        get batcher() {
+          return b();
+        }
+      });
+    })(), null), z((p) => {
+      var H = l.panelClass, X = y(), Y = i() === "timeline" ? W : K, J = i() === "events" ? W : K, Q = i() === "stats" ? W : K, V = i() === "trace" ? W : K;
+      return H !== p.e && fe(s, p.e = H), p.t = r(s, X, p.t), p.a = r(D, Y, p.a), p.o = r(T, J, p.o), p.i = r(M, Q, p.i), p.n = r(F, V, p.n), p;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), s;
+  })()];
+};
+q(["click"]);
+function rn(l, e) {
+  if (typeof window > "u")
+    return () => {
+    };
+  Me(), (e != null && e.projectRoot || e != null && e.editor) && Ke({
+    projectRoot: e.projectRoot,
+    editor: e.editor
+  });
+  const i = {
+    position: e == null ? void 0 : e.position,
+    defaultOpen: e == null ? void 0 : e.defaultOpen,
+    buttonStyle: e == null ? void 0 : e.buttonStyle,
+    buttonClass: e == null ? void 0 : e.buttonClass,
+    panelStyle: e == null ? void 0 : e.panelStyle,
+    panelClass: e == null ? void 0 : e.panelClass
+  };
+  return Re(() => Zt(i), l);
+}
+export {
+  Ke as c,
+  G as g,
+  Me as i,
+  rn as m,
+  he as u
+};