batchkit-devtools 0.2.0-beta.1

package/dist/components/BatcherList.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'solid-js';
+import type { BatcherInfo, TraceEvent } from '../core/types';
+interface BatcherListProps {
+    batchers: Map<string, BatcherInfo>;
+    events: TraceEvent[];
+    selectedBatcher: string | null;
+    onSelect: (name: string | null) => void;
+}
+export declare const BatcherList: Component<BatcherListProps>;
+export {};
+//# sourceMappingURL=BatcherList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BatcherList.d.ts","sourceRoot":"","sources":["../../src/components/BatcherList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAwB,MAAM,UAAU,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE7D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAiDD,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAmDnD,CAAC"}

package/dist/components/EventLog.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'solid-js';
+import type { TraceEvent } from '../core/types';
+interface EventLogProps {
+    events: TraceEvent[];
+}
+export declare const EventLog: Component<EventLogProps>;
+export {};
+//# sourceMappingURL=EventLog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EventLog.d.ts","sourceRoot":"","sources":["../../src/components/EventLog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,eAAe,CAAC;AAEhE,UAAU,aAAa;IACrB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAuDD,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,aAAa,CA0D7C,CAAC"}

package/dist/components/Panel.d.ts

@@ -0,0 +1,9 @@
+import { Component, JSX } from 'solid-js';
+export interface PanelProps {
+    buttonStyle?: JSX.CSSProperties;
+    buttonClass?: string;
+    panelStyle?: JSX.CSSProperties;
+    panelClass?: string;
+}
+export declare const Panel: Component<PanelProps>;
+//# sourceMappingURL=Panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,GAAG,EAAE,MAAM,UAAU,CAAC;AAU9D,MAAM,WAAW,UAAU;IACzB,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;AAiHD,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,UAAU,CAoGvC,CAAC"}

package/dist/components/Stats.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'solid-js';
+import type { BatchInfo, TraceEvent } from '../core/types';
+interface StatsProps {
+    events: TraceEvent[];
+    batches: BatchInfo[];
+}
+export declare const Stats: Component<StatsProps>;
+export {};
+//# sourceMappingURL=Stats.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../src/components/Stats.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3D,UAAU,UAAU;IAClB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AAkCD,eAAO,MAAM,KAAK,EAAE,SAAS,CAAC,UAAU,CAoFvC,CAAC"}

package/dist/components/Timeline.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'solid-js';
+import type { BatchInfo } from '../core/types';
+interface TimelineProps {
+    batches: BatchInfo[];
+}
+export declare const Timeline: Component<TimelineProps>;
+export {};
+//# sourceMappingURL=Timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/components/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,UAAU,aAAa;IACrB,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AAkED,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,aAAa,CAkD7C,CAAC"}

package/dist/components/ToggleButton.d.ts

@@ -0,0 +1,10 @@
+import { Component, JSX } from 'solid-js';
+interface ToggleButtonProps {
+    isOpen: boolean;
+    onClick: () => void;
+    style?: JSX.CSSProperties;
+    class?: string;
+}
+export declare const ToggleButton: Component<ToggleButtonProps>;
+export {};
+//# sourceMappingURL=ToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/components/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE1C,UAAU,iBAAiB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0BD,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,iBAAiB,CA+BrD,CAAC"}

package/dist/core/registry.d.ts

@@ -0,0 +1,6 @@
+import type { DevtoolsRegistry, DevtoolsStore } from './types';
+export declare function getRegistry(): DevtoolsRegistry;
+export declare function useStore(): import("solid-js").Accessor<DevtoolsStore>;
+export declare function setOpen(isOpen: boolean): void;
+export declare function setSelectedBatcher(name: string | null): void;
+//# sourceMappingURL=registry.d.ts.map

package/dist/core/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/core/registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,gBAAgB,EAChB,aAAa,EAEd,MAAM,SAAS,CAAC;AA8IjB,wBAAgB,WAAW,IAAI,gBAAgB,CAU9C;AAED,wBAAgB,QAAQ,+CAYvB;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,OAAO,QAOtC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,QAOrD"}

package/dist/core/types.d.ts

@@ -0,0 +1,84 @@
+export type TraceEventType = 'get' | 'dedup' | 'schedule' | 'dispatch' | 'resolve' | 'error' | 'abort';
+export interface TraceEventBase {
+    type: TraceEventType;
+    timestamp: number;
+    batcherName: string;
+}
+export interface GetEvent extends TraceEventBase {
+    type: 'get';
+    key: unknown;
+}
+export interface DedupEvent extends TraceEventBase {
+    type: 'dedup';
+    key: unknown;
+}
+export interface ScheduleEvent extends TraceEventBase {
+    type: 'schedule';
+    batchId: string;
+    size: number;
+}
+export interface DispatchEvent extends TraceEventBase {
+    type: 'dispatch';
+    batchId: string;
+    keys: unknown[];
+}
+export interface ResolveEvent extends TraceEventBase {
+    type: 'resolve';
+    batchId: string;
+    duration: number;
+}
+export interface ErrorEvent extends TraceEventBase {
+    type: 'error';
+    batchId: string;
+    error: Error;
+}
+export interface AbortEvent extends TraceEventBase {
+    type: 'abort';
+    batchId: string;
+}
+export type TraceEvent = GetEvent | DedupEvent | ScheduleEvent | DispatchEvent | ResolveEvent | ErrorEvent | AbortEvent;
+export interface BatcherInfo {
+    name: string;
+    registeredAt: number;
+}
+export interface BatchInfo {
+    batchId: string;
+    batcherName: string;
+    keys: unknown[];
+    status: 'scheduled' | 'dispatching' | 'resolved' | 'error' | 'aborted';
+    scheduledAt: number;
+    dispatchedAt?: number;
+    completedAt?: number;
+    duration?: number;
+    error?: Error;
+}
+export interface BatcherStats {
+    totalGets: number;
+    totalBatches: number;
+    dedupedKeys: number;
+    avgBatchSize: number;
+    avgDuration: number;
+}
+export interface DevtoolsStore {
+    batchers: Map<string, BatcherInfo>;
+    events: TraceEvent[];
+    batches: Map<string, BatchInfo>;
+    selectedBatcher: string | null;
+    isOpen: boolean;
+}
+export interface DevtoolsRegistry {
+    register(info: BatcherInfo): void;
+    unregister(name: string): void;
+    emit(name: string, event: Omit<TraceEvent, 'batcherName'>): void;
+    subscribe(listener: (store: DevtoolsStore) => void): () => void;
+    getStore(): DevtoolsStore;
+    clear(): void;
+    _setStore?: (fn: (prev: DevtoolsStore) => DevtoolsStore) => void;
+    _store?: () => DevtoolsStore;
+}
+declare global {
+    interface Window {
+        __BATCHKIT_DEVTOOLS__?: DevtoolsRegistry;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { getRegistry, useStore } from './core/registry';
+export type { BatcherInfo, BatchInfo, DevtoolsRegistry, DevtoolsStore, TraceEvent, TraceEventType, } from './core/types';
+export type { MountOptions } from './mount';
+export { mount } from './mount';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EACV,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,711 @@
+import { createRoot as Se, createSignal as q, createMemo as Z, For as G, Show as D } from "solid-js";
+import { delegateEvents as P, template as w, style as t, insert as g, createComponent as S, effect as E, memo as we, setAttribute as N, setStyleProperty as W, addEventListener as _e, className as ee, render as $e } from "solid-js/web";
+function Ce() {
+  const [l, n] = q({
+    batchers: /* @__PURE__ */ new Map(),
+    events: [],
+    batches: /* @__PURE__ */ new Map(),
+    selectedBatcher: null,
+    isOpen: !1
+  }), s = /* @__PURE__ */ new Set();
+  function c() {
+    const u = l();
+    for (const h of s)
+      h(u);
+  }
+  function e(u) {
+    n((h) => {
+      const i = new Map(h.batchers);
+      return i.set(u.name, u), { ...h, batchers: i };
+    }), c();
+  }
+  function r(u) {
+    n((h) => {
+      const i = new Map(h.batchers);
+      return i.delete(u), { ...h, batchers: i };
+    }), c();
+  }
+  function a(u, h) {
+    const i = { ...h, batcherName: u };
+    n((d) => {
+      const y = [...d.events, i], b = new Map(d.batches);
+      if (i.type === "schedule") {
+        const p = {
+          batchId: i.batchId,
+          batcherName: u,
+          keys: [],
+          status: "scheduled",
+          scheduledAt: i.timestamp
+        };
+        b.set(i.batchId, p);
+      }
+      if (i.type === "dispatch") {
+        const p = b.get(i.batchId);
+        p && b.set(i.batchId, {
+          ...p,
+          keys: i.keys,
+          status: "dispatching",
+          dispatchedAt: i.timestamp
+        });
+      }
+      if (i.type === "resolve") {
+        const p = b.get(i.batchId);
+        p && b.set(i.batchId, {
+          ...p,
+          status: "resolved",
+          completedAt: i.timestamp,
+          duration: i.duration
+        });
+      }
+      if (i.type === "error") {
+        const p = b.get(i.batchId);
+        p && b.set(i.batchId, {
+          ...p,
+          status: "error",
+          completedAt: i.timestamp,
+          error: i.error
+        });
+      }
+      if (i.type === "abort") {
+        const p = b.get(i.batchId);
+        p && b.set(i.batchId, {
+          ...p,
+          status: "aborted",
+          completedAt: i.timestamp
+        });
+      }
+      return { ...d, events: y, batches: b };
+    }), c();
+  }
+  function v(u) {
+    return s.add(u), u(l()), () => s.delete(u);
+  }
+  function f() {
+    return l();
+  }
+  function x() {
+    n((u) => ({
+      ...u,
+      events: [],
+      batches: /* @__PURE__ */ new Map()
+    })), c();
+  }
+  return {
+    register: e,
+    unregister: r,
+    emit: a,
+    subscribe: v,
+    getStore: f,
+    clear: x,
+    _setStore: n,
+    _store: l
+  };
+}
+function J() {
+  if (typeof window > "u")
+    throw new Error("DevTools can only be used in browser environment");
+  return window.__BATCHKIT_DEVTOOLS__ || (window.__BATCHKIT_DEVTOOLS__ = Se(() => Ce())), window.__BATCHKIT_DEVTOOLS__;
+}
+function ke() {
+  const l = J();
+  if (l._store)
+    return l._store;
+  const [n, s] = q(l.getStore());
+  return l.subscribe(s), n;
+}
+function Be(l) {
+  var n;
+  if (typeof window < "u" && window.__BATCHKIT_DEVTOOLS__) {
+    const s = window.__BATCHKIT_DEVTOOLS__;
+    (n = s._setStore) == null || n.call(s, (c) => ({ ...c, isOpen: l }));
+  }
+}
+function Te(l) {
+  var n;
+  if (typeof window < "u" && window.__BATCHKIT_DEVTOOLS__) {
+    const s = window.__BATCHKIT_DEVTOOLS__;
+    (n = s._setStore) == null || n.call(s, (c) => ({ ...c, selectedBatcher: l }));
+  }
+}
+var ze = /* @__PURE__ */ w("<div>"), Ae = /* @__PURE__ */ w("<div><div></div><div><span> gets</span><span> batches"), Ie = /* @__PURE__ */ w("<div><div style=font-size:11px;color:#78716c;margin-bottom:4px>No batchers</div><div style=font-size:11px;color:#57534e>Create a batcher with a name");
+const Oe = {
+  flex: "1",
+  "overflow-y": "auto"
+}, te = {
+  padding: "8px 12px",
+  cursor: "pointer",
+  "border-bottom": "1px solid #292524",
+  "border-left": "2px solid transparent"
+}, De = {
+  ...te,
+  background: "#1c1917",
+  "border-left-color": "#a8a29e"
+}, Ee = {
+  "font-size": "13px",
+  color: "#d6d3d1",
+  "margin-bottom": "2px"
+}, Ke = {
+  "font-size": "11px",
+  color: "#78716c"
+}, X = {
+  display: "inline-flex",
+  "align-items": "center",
+  gap: "4px",
+  "margin-right": "8px"
+}, Le = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center",
+  padding: "24px 12px"
+}, Me = (l) => {
+  const n = Z(() => Array.from(l.batchers.values())), s = (e) => {
+    const r = l.events.filter((f) => f.batcherName === e), a = r.filter((f) => f.type === "get").length, v = r.filter((f) => f.type === "resolve").length;
+    return {
+      gets: a,
+      batches: v
+    };
+  }, c = (e) => {
+    l.selectedBatcher === e ? l.onSelect(null) : l.onSelect(e);
+  };
+  return (() => {
+    var e = ze();
+    return t(e, Oe), g(e, S(G, {
+      get each() {
+        return n();
+      },
+      children: (r) => {
+        const a = () => s(r.name), v = () => l.selectedBatcher === r.name;
+        return (() => {
+          var f = Ae(), x = f.firstChild, u = x.nextSibling, h = u.firstChild, i = h.firstChild, d = h.nextSibling, y = d.firstChild;
+          return f.$$click = () => c(r.name), t(x, Ee), g(x, () => r.name), t(u, Ke), g(h, () => a().gets, i), g(d, () => a().batches, y), E((b) => {
+            var p = v() ? De : te, _ = X, $ = X;
+            return b.e = t(f, p, b.e), b.t = t(h, _, b.t), b.a = t(d, $, b.a), b;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          }), f;
+        })();
+      }
+    }), null), g(e, (() => {
+      var r = we(() => n().length === 0);
+      return () => r() && (() => {
+        var a = Ie(), v = a.firstChild;
+        return v.nextSibling, t(a, Le), a;
+      })();
+    })(), null), e;
+  })();
+};
+P(["click"]);
+var je = /* @__PURE__ */ w("<div>"), He = /* @__PURE__ */ w("<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"), Fe = /* @__PURE__ */ w("<div><div></div><div></div><div></div><div>");
+const Re = {
+  display: "flex",
+  "flex-direction": "column",
+  gap: "1px"
+}, Ve = {
+  display: "flex",
+  "align-items": "center",
+  gap: "12px",
+  padding: "6px 8px",
+  background: "#1c1917",
+  "font-size": "11px"
+}, Ne = {
+  "font-size": "11px",
+  color: "#78716c",
+  "min-width": "80px"
+}, O = {
+  padding: "2px 6px",
+  "font-size": "10px",
+  "font-weight": "500",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.3px"
+}, qe = {
+  scheduled: {
+    ...O,
+    background: "#422006",
+    color: "#fbbf24"
+  },
+  dispatching: {
+    ...O,
+    background: "#1e3a5f",
+    color: "#60a5fa"
+  },
+  resolved: {
+    ...O,
+    background: "#14532d",
+    color: "#4ade80"
+  },
+  error: {
+    ...O,
+    background: "#450a0a",
+    color: "#f87171"
+  },
+  aborted: {
+    ...O,
+    background: "#292524",
+    color: "#a8a29e"
+  }
+}, Ge = {
+  flex: "1",
+  "font-size": "11px",
+  color: "#a8a29e",
+  "white-space": "nowrap",
+  overflow: "hidden",
+  "text-overflow": "ellipsis"
+}, Pe = {
+  "font-size": "11px",
+  color: "#57534e",
+  "min-width": "50px",
+  "text-align": "right"
+}, Je = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center",
+  padding: "32px"
+}, Qe = (l) => {
+  const n = (e) => e === void 0 ? "-" : e < 1 ? "<1ms" : e < 1e3 ? `${Math.round(e)}ms` : `${(e / 1e3).toFixed(2)}s`, s = (e) => {
+    if (e.length === 0) return "-";
+    const r = e.slice(0, 3).map((a) => String(a)).join(", ");
+    return e.length > 3 ? `${r} +${e.length - 3}` : r;
+  }, c = () => [...l.batches].sort((e, r) => r.scheduledAt - e.scheduledAt);
+  return (() => {
+    var e = je();
+    return t(e, Re), g(e, S(D, {
+      get when() {
+        return c().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var r = He(), a = r.firstChild;
+          return a.nextSibling, t(r, Je), r;
+        })();
+      },
+      get children() {
+        return S(G, {
+          get each() {
+            return c();
+          },
+          children: (r) => (() => {
+            var a = Fe(), v = a.firstChild, f = v.nextSibling, x = f.nextSibling, u = x.nextSibling;
+            return t(a, Ve), t(v, Ne), g(v, () => r.batchId), g(f, () => r.status), t(x, Ge), g(x, () => s(r.keys)), t(u, Pe), g(u, () => n(r.duration)), E((h) => {
+              var i = qe[r.status] || O, d = r.keys.map(String).join(", ");
+              return h.e = t(f, i, h.e), d !== h.t && N(x, "title", h.t = d), h;
+            }, {
+              e: void 0,
+              t: void 0
+            }), a;
+          })()
+        });
+      }
+    })), e;
+  })();
+};
+var Ue = /* @__PURE__ */ w("<div>"), We = /* @__PURE__ */ w("<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"), Xe = /* @__PURE__ */ w("<div><span></span><span></span><span>");
+const Ye = {
+  display: "flex",
+  "flex-direction": "column",
+  gap: "1px",
+  "font-size": "11px"
+}, Ze = {
+  display: "flex",
+  gap: "12px",
+  padding: "4px 8px",
+  background: "#1c1917"
+}, et = {
+  color: "#57534e",
+  "min-width": "60px"
+}, tt = {
+  "min-width": "60px",
+  "font-weight": "500"
+}, nt = {
+  get: "#60a5fa",
+  dedup: "#c084fc",
+  schedule: "#fbbf24",
+  dispatch: "#22d3ee",
+  resolve: "#4ade80",
+  error: "#f87171",
+  abort: "#a8a29e"
+}, it = {
+  color: "#78716c",
+  flex: "1",
+  "white-space": "nowrap",
+  overflow: "hidden",
+  "text-overflow": "ellipsis"
+}, rt = {
+  display: "flex",
+  "flex-direction": "column",
+  "align-items": "center",
+  "justify-content": "center",
+  height: "100%",
+  color: "#57534e",
+  "text-align": "center",
+  padding: "32px"
+}, ot = (l) => {
+  const n = (e) => (e / 1e3).toFixed(3) + "s", s = (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 "";
+    }
+  }, c = () => [...l.events].reverse();
+  return (() => {
+    var e = Ue();
+    return t(e, Ye), g(e, S(D, {
+      get when() {
+        return c().length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var r = We(), a = r.firstChild;
+          return a.nextSibling, t(r, rt), r;
+        })();
+      },
+      get children() {
+        return S(G, {
+          get each() {
+            return c();
+          },
+          children: (r) => (() => {
+            var a = Xe(), v = a.firstChild, f = v.nextSibling, x = f.nextSibling;
+            return t(a, Ze), t(v, et), g(v, () => n(r.timestamp)), g(f, () => r.type), t(x, it), g(x, () => s(r)), E((u) => t(f, {
+              ...tt,
+              color: nt[r.type]
+            }, u)), a;
+          })()
+        });
+      }
+    })), e;
+  })();
+};
+var st = /* @__PURE__ */ w("<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 lt = {
+  display: "grid",
+  "grid-template-columns": "repeat(auto-fit, minmax(120px, 1fr))",
+  gap: "1px",
+  background: "#292524"
+}, z = {
+  padding: "12px",
+  background: "#1c1917"
+}, A = {
+  "font-size": "11px",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px",
+  color: "#78716c",
+  "margin-bottom": "4px"
+}, I = {
+  "font-size": "20px",
+  "font-weight": "500",
+  color: "#f5f5f4"
+}, Y = {
+  "font-size": "11px",
+  color: "#57534e",
+  "margin-left": "2px"
+}, ct = (l) => {
+  const n = Z(() => {
+    const s = l.events, c = l.batches, e = s.filter((d) => d.type === "get").length, r = s.filter((d) => d.type === "dedup").length, a = c.filter((d) => d.status === "resolved"), v = a.length, f = v > 0 ? a.reduce((d, y) => d + y.keys.length, 0) / v : 0, x = v > 0 ? a.reduce((d, y) => d + (y.duration || 0), 0) / v : 0, u = c.filter((d) => d.status === "error").length, h = c.filter((d) => d.status === "aborted").length, i = e > 0 ? r / e * 100 : 0;
+    return {
+      totalGets: e,
+      totalBatches: v,
+      dedupedKeys: r,
+      avgBatchSize: f,
+      avgDuration: x,
+      errors: u,
+      aborts: h,
+      dedupRate: i
+    };
+  });
+  return (() => {
+    var s = st(), c = s.firstChild, e = c.firstChild, r = e.nextSibling, a = c.nextSibling, v = a.firstChild, f = v.nextSibling, x = a.nextSibling, u = x.firstChild, h = u.nextSibling, i = h.firstChild, d = i.firstChild, y = d.nextSibling;
+    y.nextSibling;
+    var b = x.nextSibling, p = b.firstChild, _ = p.nextSibling, $ = b.nextSibling, K = $.firstChild, C = K.nextSibling, B = C.firstChild, T = $.nextSibling, L = T.firstChild, k = L.nextSibling, m = k.firstChild, M = m.nextSibling, j = M.nextSibling;
+    return t(s, lt), g(r, () => n().totalGets), g(f, () => n().totalBatches), g(h, () => n().dedupedKeys, i), g(i, () => n().dedupRate.toFixed(0), y), g(_, () => n().avgBatchSize.toFixed(1)), g(C, () => n().avgDuration.toFixed(0), B), g(m, () => n().errors), g(j, () => n().aborts), E((o) => {
+      var F = z, R = A, ie = I, re = z, oe = A, se = I, le = z, ce = A, ae = I, de = Y, ue = z, ve = A, fe = I, he = z, ge = A, be = I, xe = Y, pe = z, me = A, ye = I, Q = n().errors > 0 ? "#f87171" : "#f5f5f4", U = n().aborts > 0 ? "#fbbf24" : "#f5f5f4";
+      return o.e = t(c, F, o.e), o.t = t(e, R, o.t), o.a = t(r, ie, o.a), o.o = t(a, re, o.o), o.i = t(v, oe, o.i), o.n = t(f, se, o.n), o.s = t(x, le, o.s), o.h = t(u, ce, o.h), o.r = t(h, ae, o.r), o.d = t(i, de, o.d), o.l = t(b, ue, o.l), o.u = t(p, ve, o.u), o.c = t(_, fe, o.c), o.w = t($, he, o.w), o.m = t(K, ge, o.m), o.f = t(C, be, o.f), o.y = t(B, xe, o.y), o.g = t(T, pe, o.g), o.p = t(L, me, o.p), o.b = t(k, ye, o.b), Q !== o.T && W(m, "color", o.T = Q), U !== o.A && W(j, "color", o.A = U), o;
+    }, {
+      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
+    }), s;
+  })();
+};
+var at = /* @__PURE__ */ w('<button><svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4 6h16M4 12h16M4 18h10"stroke=currentColor stroke-width=2 stroke-linecap=square></path><circle cx=19 cy=18 r=2.5 fill=currentColor>');
+const ne = {
+  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"
+}, dt = {
+  ...ne,
+  background: "#292524",
+  color: "#f5f5f4",
+  "border-color": "#57534e"
+}, ut = (l) => {
+  const n = () => ({
+    ...l.isOpen ? dt : ne,
+    ...l.style
+  });
+  return (() => {
+    var s = at();
+    return _e(s, "click", l.onClick, !0), E((c) => {
+      var e = l.class, r = n(), a = l.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools", v = l.isOpen ? "Close BatchKit DevTools" : "Open BatchKit DevTools";
+      return e !== c.e && ee(s, c.e = e), c.t = t(s, r, c.t), a !== c.a && N(s, "title", c.a = a), v !== c.o && N(s, "aria-label", c.o = v), c;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), s;
+  })();
+};
+P(["click"]);
+var vt = /* @__PURE__ */ w("<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></div><div>");
+const ft = {
+  position: "fixed",
+  bottom: "72px",
+  right: "16px",
+  width: "640px",
+  "max-width": "calc(100vw - 32px)",
+  height: "420px",
+  "max-height": "calc(100vh - 120px)",
+  background: "#0c0a09",
+  border: "1px solid #44403c",
+  display: "flex",
+  "flex-direction": "column",
+  overflow: "hidden",
+  "z-index": "99998",
+  "font-family": "ui-monospace, monospace",
+  color: "#d6d3d1"
+}, ht = {
+  display: "flex",
+  "align-items": "center",
+  "justify-content": "space-between",
+  padding: "8px 12px",
+  background: "#1c1917",
+  "border-bottom": "1px solid #44403c"
+}, gt = {
+  "font-size": "11px",
+  "font-weight": "500",
+  color: "#a8a29e",
+  display: "flex",
+  "align-items": "center",
+  gap: "8px",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px"
+}, bt = {
+  padding: "4px 8px",
+  border: "1px solid #44403c",
+  background: "#1c1917",
+  color: "#78716c",
+  "font-size": "11px",
+  "font-family": "ui-monospace, monospace",
+  cursor: "pointer"
+}, xt = {
+  display: "flex",
+  flex: "1",
+  "min-height": "0"
+}, pt = {
+  width: "180px",
+  "border-right": "1px solid #44403c",
+  display: "flex",
+  "flex-direction": "column",
+  background: "#0c0a09"
+}, mt = {
+  padding: "8px 12px",
+  "font-size": "11px",
+  "font-weight": "500",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px",
+  color: "#78716c",
+  "border-bottom": "1px solid #292524"
+}, yt = {
+  flex: "1",
+  display: "flex",
+  "flex-direction": "column",
+  "min-width": "0"
+}, St = {
+  display: "flex",
+  "border-bottom": "1px solid #44403c",
+  background: "#1c1917"
+}, H = {
+  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"
+}, V = {
+  ...H,
+  color: "#f5f5f4",
+  "border-bottom": "1px solid #f5f5f4"
+}, wt = {
+  flex: "1",
+  overflow: "auto",
+  padding: "12px",
+  background: "#0c0a09"
+}, _t = (l) => {
+  const n = ke(), [s, c] = q("timeline"), e = () => {
+    Be(!n().isOpen);
+  }, r = () => {
+    J().clear();
+  }, a = () => n().selectedBatcher, v = () => n().batchers, f = () => n().events, x = () => n().batches, u = () => {
+    const i = a();
+    return i ? f().filter((d) => d.batcherName === i) : f();
+  }, h = () => {
+    const i = a();
+    return i ? Array.from(x().values()).filter((d) => d.batcherName === i) : Array.from(x().values());
+  };
+  return [S(ut, {
+    get isOpen() {
+      return n().isOpen;
+    },
+    onClick: e,
+    get style() {
+      return l.buttonStyle;
+    },
+    get class() {
+      return l.buttonClass;
+    }
+  }), S(D, {
+    get when() {
+      return n().isOpen;
+    },
+    get children() {
+      var i = vt(), d = i.firstChild, y = d.firstChild;
+      y.firstChild;
+      var b = y.nextSibling, p = d.nextSibling, _ = p.firstChild, $ = _.firstChild, K = _.nextSibling, C = K.firstChild, B = C.firstChild, T = B.nextSibling, L = T.nextSibling, k = C.nextSibling;
+      return t(d, ht), t(y, gt), b.$$click = r, t(b, bt), t(p, xt), t(_, pt), t($, mt), g(_, S(Me, {
+        get batchers() {
+          return v();
+        },
+        get events() {
+          return f();
+        },
+        get selectedBatcher() {
+          return a();
+        },
+        onSelect: Te
+      }), null), t(K, yt), t(C, St), B.$$click = () => c("timeline"), T.$$click = () => c("events"), L.$$click = () => c("stats"), t(k, wt), g(k, S(D, {
+        get when() {
+          return s() === "timeline";
+        },
+        get children() {
+          return S(Qe, {
+            get batches() {
+              return h();
+            }
+          });
+        }
+      }), null), g(k, S(D, {
+        get when() {
+          return s() === "events";
+        },
+        get children() {
+          return S(ot, {
+            get events() {
+              return u();
+            }
+          });
+        }
+      }), null), g(k, S(D, {
+        get when() {
+          return s() === "stats";
+        },
+        get children() {
+          return S(ct, {
+            get events() {
+              return u();
+            },
+            get batches() {
+              return h();
+            }
+          });
+        }
+      }), null), E((m) => {
+        var M = l.panelClass, j = {
+          ...ft,
+          ...l.panelStyle
+        }, o = s() === "timeline" ? V : H, F = s() === "events" ? V : H, R = s() === "stats" ? V : H;
+        return M !== m.e && ee(i, m.e = M), m.t = t(i, j, m.t), m.a = t(B, o, m.a), m.o = t(T, F, m.o), m.i = t(L, R, m.i), m;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      }), i;
+    }
+  })];
+};
+P(["click"]);
+function kt(l, n) {
+  if (typeof window > "u")
+    return () => {
+    };
+  J();
+  const s = {
+    buttonStyle: n == null ? void 0 : n.buttonStyle,
+    buttonClass: n == null ? void 0 : n.buttonClass,
+    panelStyle: n == null ? void 0 : n.panelStyle,
+    panelClass: n == null ? void 0 : n.panelClass
+  };
+  return $e(() => _t(s), l);
+}
+export {
+  J as getRegistry,
+  kt as mount,
+  ke as useStore
+};

package/dist/mount.d.ts

@@ -0,0 +1,8 @@
+export interface MountOptions {
+    buttonStyle?: Record<string, string>;
+    buttonClass?: string;
+    panelStyle?: Record<string, string>;
+    panelClass?: string;
+}
+export declare function mount(container: HTMLElement, options?: MountOptions): () => void;
+//# sourceMappingURL=mount.d.ts.map

package/dist/mount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,KAAK,CACnB,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,YAAY,GACrB,MAAM,IAAI,CAiBZ"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "batchkit-devtools",
+  "version": "0.2.0-beta.1",
+  "description": "DevTools panel for BatchKit - visualize batchers, batches, and invocations",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "batchkit",
+    "devtools",
+    "debugging"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "batchkit": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "batchkit": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "solid-js": "^1.9.5"
+  },
+  "devDependencies": {
+    "bun-types": "latest",
+    "typescript": "5.3.3",
+    "vite": "^6.3.5",
+    "vite-plugin-solid": "^2.11.6"
+  }
+}