@concavejs/devtools 0.0.1-alpha.10

package/dist/client-CRYWrjNv.js

@@ -0,0 +1,3590 @@
+import { jsxs as n, jsx as t, Fragment as et } from "react/jsx-runtime";
+import { createRoot as he } from "react-dom/client";
+import me, { useState as z, useMemo as V, useEffect as U, useRef as Ct, useCallback as J } from "react";
+let kt = null;
+function Wt() {
+  if (kt !== null) return kt;
+  try {
+    const e = "__concave_test__";
+    localStorage.setItem(e, "1"), localStorage.removeItem(e), kt = !0;
+  } catch {
+    kt = !1;
+  }
+  return kt;
+}
+function Vt(e) {
+  if (!Wt()) return null;
+  try {
+    return localStorage.getItem(e);
+  } catch {
+    return null;
+  }
+}
+function Jt(e, r) {
+  if (Wt())
+    try {
+      localStorage.setItem(e, r);
+    } catch {
+    }
+}
+function Yt(e) {
+  if (Wt())
+    try {
+      localStorage.removeItem(e);
+    } catch {
+    }
+}
+const be = "0.0.1-alpha.9", Zt = {
+  version: be
+}, de = Zt.version.length > 0 ? Zt.version : "0.0.0", ce = de;
+de.split("-")[0];
+const ge = "concave-devtools-events", fe = "concave-devtools-settings", te = 200;
+class Nt {
+  events = [];
+  maxEvents;
+  listeners = /* @__PURE__ */ new Set();
+  focusListeners = /* @__PURE__ */ new Set();
+  settingsListeners = /* @__PURE__ */ new Set();
+  subscriptions = /* @__PURE__ */ new Map();
+  snapshots = [];
+  maxSnapshots = 50;
+  isPaused = !1;
+  focusedEventId = null;
+  storageKey;
+  settingsKey;
+  persistenceEnabled;
+  recentEventIds = /* @__PURE__ */ new Set();
+  persistTimer = null;
+  settings = {
+    persistEvents: !0,
+    maxEvents: 1e3,
+    captureLogLines: !0,
+    autoPauseOnError: !1,
+    wsLatencyMs: 0,
+    wsJitterMs: 0
+  };
+  static MIN_EVENTS = 100;
+  static MAX_EVENTS = 1e4;
+  static MAX_SIMULATED_LATENCY_MS = 5e3;
+  constructor(r = 1e3, a = "global") {
+    const s = typeof r == "number" ? { maxEvents: r, storageScope: a } : r, d = (s.storageScope ?? "global").trim() || "global";
+    this.storageKey = `${ge}:${d}`, this.settingsKey = `${fe}:${d}`, this.persistenceEnabled = s.enablePersistence !== !1, this.maxEvents = s.maxEvents ?? 1e3, this.persistenceEnabled || (this.settings.persistEvents = !1), this.loadSettings(), this.persistenceEnabled || (this.settings.persistEvents = !1), this.loadPersistedEvents();
+  }
+  /**
+   * Add an event to the store
+   */
+  addEvent(r) {
+    if (!this.isPaused && !(r.type === "log" && !this.settings.captureLogLines) && !this.recentEventIds.has(r.id)) {
+      if (this.recentEventIds.add(r.id), this.recentEventIds.size > te) {
+        const a = this.recentEventIds.size - te, s = this.recentEventIds.values();
+        for (let d = 0; d < a; d++)
+          this.recentEventIds.delete(s.next().value);
+      }
+      if (this.reconcilePendingOperation(r), this.events.push(r), this.events.length > this.maxEvents + 100 && (this.events = this.events.slice(-this.maxEvents)), r.type === "subscription")
+        this.updateSubscription(r);
+      else if (r.type === "query" && r.status === "success") {
+        const a = this.subscriptions.get(r.queryId);
+        a && (a.previousValue = a.currentValue, a.updateCount++, a.lastUpdate = r.timestamp, a.currentValue = r.result, a.status = "active");
+      } else if (r.type === "query" && r.status === "error") {
+        const a = this.subscriptions.get(r.queryId);
+        a && (a.status = "error", a.error = r.error);
+      }
+      this.settings.autoPauseOnError && !this.isPaused && ("status" in r && r.status === "error" || r.type === "log" && r.level === "error") && (this.isPaused = !0), this.persistenceEnabled && this.settings.persistEvents && !this.persistTimer && (this.persistTimer = setTimeout(() => {
+        this.persistTimer = null, this.persistEvents();
+      }, 500)), this.listeners.forEach((a) => {
+        a(r);
+      });
+    }
+  }
+  /**
+   * Subscribe to new events
+   */
+  subscribe(r) {
+    return this.listeners.add(r), () => this.listeners.delete(r);
+  }
+  /**
+   * Subscribe to focus/navigation changes across panels
+   */
+  subscribeFocus(r) {
+    return this.focusListeners.add(r), () => this.focusListeners.delete(r);
+  }
+  /**
+   * Subscribe to settings changes
+   */
+  subscribeSettings(r) {
+    return this.settingsListeners.add(r), () => this.settingsListeners.delete(r);
+  }
+  /**
+   * Set the currently focused event (for cross-panel navigation)
+   */
+  setFocusedEventId(r) {
+    this.focusedEventId = r, this.focusListeners.forEach((a) => {
+      a(r);
+    });
+  }
+  /**
+   * Get focused event id
+   */
+  getFocusedEventId() {
+    return this.focusedEventId;
+  }
+  /**
+   * Get all events
+   */
+  getAllEvents() {
+    return [...this.events];
+  }
+  /**
+   * Get events by type
+   */
+  getEventsByType(r) {
+    return this.events.filter((a) => a.type === r);
+  }
+  /**
+   * Get recent events
+   */
+  getRecentEvents(r) {
+    return this.events.slice(-r);
+  }
+  /**
+   * Get events for a specific function
+   */
+  getEventsByFunction(r) {
+    return this.events.filter((a) => "udfPath" in a ? a.udfPath === r : !1);
+  }
+  /**
+   * Get active subscriptions
+   */
+  getActiveSubscriptions() {
+    return Array.from(this.subscriptions.values()).filter((r) => r.status === "active" || r.status === "error");
+  }
+  /**
+   * Get subscription by query ID
+   */
+  getSubscription(r) {
+    return this.subscriptions.get(r);
+  }
+  /**
+   * Calculate performance metrics
+   */
+  getPerformanceMetrics() {
+    const r = (b) => {
+      const N = typeof b == "number" ? b : typeof b == "string" ? Number(b) : Number.NaN;
+      return !Number.isFinite(N) || N < 0 ? null : N;
+    }, a = (b) => {
+      const N = [];
+      for (const k of b) {
+        if (k.status !== "success") continue;
+        const y = r(k.endToEndDurationMs ?? k.duration);
+        y !== null && N.push({ event: k, duration: y });
+      }
+      return N;
+    }, s = a(this.getEventsByType("query")), d = a(this.getEventsByType("mutation")), x = a(this.getEventsByType("action")), c = (b) => b.length === 0 ? 0 : b.reduce((k, y) => k + y, 0) / b.length, m = (b, N) => {
+      if (b.length === 0) return 0;
+      const k = [...b].sort((S, $) => S - $), y = Math.floor(k.length * N);
+      return k[Math.min(y, k.length - 1)] || 0;
+    }, w = [
+      ...s.map(({ event: b, duration: N }) => ({
+        type: "query",
+        eventId: b.id,
+        udfPath: b.udfPath,
+        duration: N,
+        timestamp: b.timestamp
+      })),
+      ...d.map(({ event: b, duration: N }) => ({
+        type: "mutation",
+        eventId: b.id,
+        udfPath: b.udfPath,
+        duration: N,
+        timestamp: b.timestamp
+      })),
+      ...x.map(({ event: b, duration: N }) => ({
+        type: "action",
+        eventId: b.id,
+        udfPath: b.udfPath,
+        duration: N,
+        timestamp: b.timestamp
+      }))
+    ].sort((b, N) => N.duration - b.duration).slice(0, 10), v = s.map(({ duration: b }) => b), E = d.map(({ duration: b }) => b), f = x.map(({ duration: b }) => b);
+    return {
+      totalQueries: s.length,
+      totalMutations: d.length,
+      totalActions: x.length,
+      avgQueryDuration: c(v),
+      avgMutationDuration: c(E),
+      avgActionDuration: c(f),
+      p50QueryDuration: m(v, 0.5),
+      p50MutationDuration: m(E, 0.5),
+      p50ActionDuration: m(f, 0.5),
+      p90QueryDuration: m(v, 0.9),
+      p90MutationDuration: m(E, 0.9),
+      p90ActionDuration: m(f, 0.9),
+      p95QueryDuration: m(v, 0.95),
+      p95MutationDuration: m(E, 0.95),
+      p95ActionDuration: m(f, 0.95),
+      p99QueryDuration: m(v, 0.99),
+      p99MutationDuration: m(E, 0.99),
+      p99ActionDuration: m(f, 0.99),
+      slowestOperations: w
+    };
+  }
+  /**
+   * Clear all events
+   */
+  clear() {
+    this.events = [], this.subscriptions.clear(), this.snapshots = [], this.setFocusedEventId(null), this.recentEventIds.clear(), Yt(this.storageKey), this.listeners.forEach((r) => {
+      r({
+        id: "clear",
+        timestamp: Date.now(),
+        type: "log",
+        level: "info",
+        message: "DevTools cleared"
+      });
+    });
+  }
+  /**
+   * Pause event capture
+   */
+  pause() {
+    this.isPaused = !0;
+  }
+  /**
+   * Resume event capture
+   */
+  resume() {
+    this.isPaused = !1;
+  }
+  /**
+   * Check if paused
+   */
+  isPausedState() {
+    return this.isPaused;
+  }
+  /**
+   * Create a snapshot of current state (for time-travel)
+   */
+  createSnapshot() {
+    const r = {
+      timestamp: Date.now(),
+      events: [...this.events],
+      subscriptions: Array.from(this.subscriptions.entries())
+    };
+    this.snapshots.push(r), this.snapshots.length > this.maxSnapshots && this.snapshots.shift();
+  }
+  /**
+   * Restore from a snapshot
+   */
+  restoreSnapshot(r) {
+    const a = this.snapshots.find((s) => s.timestamp === r);
+    return a ? (this.events = [...a.events], this.subscriptions = new Map(a.subscriptions), this.setFocusedEventId(null), this.listeners.forEach((s) => {
+      s({
+        id: "restore",
+        timestamp: Date.now(),
+        type: "log",
+        level: "info",
+        message: `Restored to snapshot from ${new Date(r).toLocaleTimeString()}`
+      });
+    }), !0) : !1;
+  }
+  /**
+   * Get all snapshots
+   */
+  getSnapshots() {
+    return [...this.snapshots];
+  }
+  /**
+   * Export session data
+   */
+  exportSession() {
+    return {
+      version: ce,
+      exportedAt: Date.now(),
+      events: [...this.events],
+      subscriptions: Array.from(this.subscriptions.entries()),
+      metadata: {
+        userAgent: navigator.userAgent,
+        url: window.location.href
+      }
+    };
+  }
+  /**
+   * Import session data
+   */
+  importSession(r) {
+    try {
+      if (!r || typeof r != "object" || !r.version || !r.events)
+        throw new Error("Invalid session format");
+      if (this.events = [], this.subscriptions.clear(), this.setFocusedEventId(null), this.events = this.sanitizeEvents(r.events).slice(-this.maxEvents), Array.isArray(r.subscriptions)) {
+        const a = r.subscriptions.filter(
+          (s) => Array.isArray(s) && s.length === 2 && typeof s[0] == "number" && Number.isFinite(s[0]) && typeof s[1] == "object" && s[1] !== null
+        );
+        this.subscriptions = new Map(a);
+      }
+      return this.listeners.forEach((a) => {
+        a({
+          id: "import",
+          timestamp: Date.now(),
+          type: "log",
+          level: "info",
+          message: `Imported ${this.events.length} events`
+        });
+      }), !0;
+    } catch (a) {
+      return console.error("[DevTools] Failed to import session:", a), !1;
+    }
+  }
+  /**
+   * Save settings
+   */
+  saveSettings(r) {
+    this.settings = { ...this.settings, ...r }, this.persistenceEnabled || (this.settings.persistEvents = !1);
+    const a = this.normalizeMaxEvents(this.settings.maxEvents);
+    this.settings.maxEvents !== a && (this.settings.maxEvents = a), a !== this.maxEvents && (this.maxEvents = a), this.events.length > this.maxEvents && (this.events = this.events.slice(-this.maxEvents)), this.normalizeLatencySettings(), this.syncLatencyConfig(), this.persistenceEnabled && Jt(this.settingsKey, JSON.stringify(this.settings)), this.notifySettingsChanged();
+  }
+  /**
+   * Get settings
+   */
+  getSettings() {
+    return { ...this.settings };
+  }
+  /**
+   * Whether this store supports local persistence
+   */
+  isPersistenceEnabled() {
+    return this.persistenceEnabled;
+  }
+  /**
+   * Load settings from localStorage
+   */
+  loadSettings() {
+    if (this.persistenceEnabled) {
+      try {
+        const r = Vt(this.settingsKey);
+        r && (this.settings = { ...this.settings, ...JSON.parse(r) }, this.maxEvents = this.normalizeMaxEvents(this.settings.maxEvents), this.settings.maxEvents = this.maxEvents, this.normalizeLatencySettings());
+      } catch (r) {
+        console.warn("[DevTools] Failed to load settings:", r);
+      }
+      this.syncLatencyConfig();
+    }
+  }
+  /**
+   * Push latency settings to the shared window config object
+   * that the WebSocket interceptors read on every send/receive.
+   */
+  syncLatencyConfig() {
+    try {
+      window.__concaveDevToolsLatencyConfig = {
+        latencyMs: this.settings.wsLatencyMs || 0,
+        jitterMs: this.settings.wsJitterMs || 0
+      };
+    } catch {
+    }
+  }
+  notifySettingsChanged() {
+    const r = this.getSettings();
+    this.settingsListeners.forEach((a) => {
+      a(r);
+    });
+  }
+  /**
+   * Persist events to localStorage
+   */
+  persistEvents() {
+    if (!(!this.persistenceEnabled || !this.settings.persistEvents))
+      try {
+        const r = this.events.slice(-100);
+        Jt(this.storageKey, JSON.stringify(r));
+      } catch (r) {
+        console.warn("[DevTools] Failed to persist events:", r);
+      }
+  }
+  /**
+   * Load persisted events from localStorage
+   */
+  loadPersistedEvents() {
+    if (!(!this.persistenceEnabled || !this.settings.persistEvents))
+      try {
+        const r = Vt(this.storageKey);
+        if (r) {
+          const a = this.sanitizeEvents(JSON.parse(r));
+          this.events = a.slice(-this.maxEvents);
+        }
+      } catch (r) {
+        console.warn("[DevTools] Failed to load persisted events:", r), Yt(this.storageKey);
+      }
+  }
+  /**
+   * Update subscription tracking
+   */
+  updateSubscription(r) {
+    r.status === "added" ? this.subscriptions.set(r.queryId, {
+      queryId: r.queryId,
+      udfPath: r.udfPath,
+      args: r.args,
+      componentPath: r.componentPath,
+      addedAt: r.timestamp,
+      updateCount: 0,
+      lastUpdate: r.timestamp,
+      status: "active"
+    }) : r.status === "removed" && this.subscriptions.delete(r.queryId);
+  }
+  sanitizeEvents(r) {
+    return Array.isArray(r) ? r.filter((a) => this.isEventLike(a)) : [];
+  }
+  isEventLike(r) {
+    if (!r || typeof r != "object") return !1;
+    const a = r;
+    return !(typeof a.id != "string" || typeof a.type != "string" || typeof a.timestamp != "number" || !Number.isFinite(a.timestamp));
+  }
+  normalizeMaxEvents(r) {
+    const a = typeof r == "number" ? r : Number(r);
+    if (!Number.isFinite(a))
+      return 1e3;
+    const s = Math.round(a);
+    return Math.min(Nt.MAX_EVENTS, Math.max(Nt.MIN_EVENTS, s));
+  }
+  normalizeLatencySettings() {
+    const r = (d) => {
+      const x = typeof d == "number" ? d : Number(d);
+      if (!Number.isFinite(x))
+        return 0;
+      const c = Math.round(x);
+      return Math.min(Nt.MAX_SIMULATED_LATENCY_MS, Math.max(0, c));
+    }, a = r(this.settings.wsLatencyMs);
+    let s = r(this.settings.wsJitterMs);
+    a > 0 && s > a && (s = a), this.settings.wsLatencyMs = a, this.settings.wsJitterMs = s;
+  }
+  isOperationEvent(r) {
+    return r.type === "query" || r.type === "mutation" || r.type === "action";
+  }
+  isTerminalOperationEvent(r) {
+    return this.isOperationEvent(r) && (r.status === "success" || r.status === "error");
+  }
+  isMatchingPendingOperation(r, a) {
+    return !this.isOperationEvent(r) || r.type !== a.type || r.status !== "pending" ? !1 : a.type === "query" ? r.type === "query" && r.queryId === a.queryId : r.type !== "query" && r.requestId === a.requestId;
+  }
+  reconcilePendingOperation(r) {
+    this.isTerminalOperationEvent(r) && this.events.length !== 0 && (this.events = this.events.filter((a) => !this.isMatchingPendingOperation(a, r)));
+  }
+}
+let Ot = null;
+function we() {
+  return Ot || (Ot = new Nt()), Ot;
+}
+const ve = "#f97316", ye = 6, ke = "M16 6 Q 9.2 13.3 8 22 Q 16 19 24 22 Q 22.8 13.3 16 6 Z";
+function F(e) {
+  const r = document.featurePolicy ?? document.permissionsPolicy;
+  (r ? r.allowsFeature("clipboard-write") : !0) && navigator.clipboard?.writeText ? navigator.clipboard.writeText(e).then(jt, () => {
+    ee(e), jt();
+  }) : (ee(e), jt());
+}
+function jt() {
+  const e = document.createElement("div");
+  e.textContent = "Copied!", e.style.cssText = "position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:99999999;padding:4px 12px;border-radius:6px;font:500 11px/1.4 system-ui,sans-serif;color:#e4e4e7;background:rgba(39,39,42,0.95);border:1px solid rgba(63,63,70,0.6);box-shadow:0 4px 12px rgba(0,0,0,0.4);pointer-events:none;animation:dt-fade-in 0.15s ease-out;opacity:1;transition:opacity 0.2s;", document.body.appendChild(e), setTimeout(() => {
+    e.style.opacity = "0";
+  }, 600), setTimeout(() => {
+    e.remove();
+  }, 800);
+}
+function ee(e) {
+  const r = document.createElement("textarea");
+  r.value = e, r.style.cssText = "position:fixed;opacity:0;pointer-events:none;", document.body.appendChild(r), r.select();
+  try {
+    document.execCommand("copy");
+  } catch {
+  }
+  document.body.removeChild(r);
+}
+function Pt() {
+  const e = document.getElementById("concave-devtools-host");
+  return e ? document.activeElement === e || e.contains(document.activeElement) : !1;
+}
+function pe() {
+  return document.getElementById("concave-devtools-host")?.shadowRoot?.activeElement ?? null;
+}
+function ct(e) {
+  return Array.isArray(e) && e.length === 1 ? e[0] : e;
+}
+const Ne = {
+  maxStringLength: 40,
+  stringTailLength: 10,
+  maxArrayItems: 2,
+  maxObjectEntries: 2,
+  maxDepth: 2
+};
+function Ee(e, r, a) {
+  if (e.length <= r)
+    return e;
+  const s = Math.max(12, r), d = Math.max(
+    4,
+    Math.min(a, Math.floor(s / 2))
+  ), x = Math.max(6, s - d - 1);
+  return `${e.slice(0, x)}…${e.slice(-d)}`;
+}
+function Mt(e, r = {}, a = 0) {
+  const s = {
+    ...Ne,
+    ...r
+  };
+  if (e === null) return "null";
+  if (e === void 0) return "undefined";
+  if (typeof e == "string")
+    return `"${Ee(
+      e,
+      s.maxStringLength,
+      s.stringTailLength
+    )}"`;
+  if (typeof e == "number" || typeof e == "boolean")
+    return String(e);
+  if (Array.isArray(e)) {
+    if (e.length === 0) return "[]";
+    if (a >= s.maxDepth) return "[…]";
+    const d = e.slice(0, s.maxArrayItems).map((c) => Mt(c, s, a + 1)), x = e.length > s.maxArrayItems ? ", …" : "";
+    return `[${d.join(", ")}${x}]`;
+  }
+  if (typeof e == "object") {
+    const d = Object.entries(e);
+    if (d.length === 0) return "{}";
+    if (a >= s.maxDepth) return "{…}";
+    const x = d.slice(0, s.maxObjectEntries).map(([m, w]) => `${m}: ${Mt(w, s, a + 1)}`), c = d.length > s.maxObjectEntries ? ", …" : "";
+    return `{${x.join(", ")}${c}}`;
+  }
+  return String(e);
+}
+function at(e, r = 180) {
+  try {
+    const a = JSON.stringify(e, null, 2);
+    return a ? a.length <= r ? a : `${a.slice(0, r - 1)}…` : "";
+  } catch {
+    return String(e);
+  }
+}
+function Et({
+  data: e,
+  label: r,
+  onCopy: a,
+  maxHeight: s = 300
+}) {
+  const [d, x] = z(!0), [c, m] = z("tree"), [w, v] = z(""), E = () => {
+    F(JSON.stringify(e, null, 2)), a?.();
+  }, f = V(() => JSON.stringify(e, null, 2), [e]), b = V(() => {
+    if (!w) return null;
+    const k = /* @__PURE__ */ new Set(), y = w.toLowerCase();
+    function S($, P) {
+      if ($ === null) {
+        "null".includes(y) && k.add(P);
+        return;
+      }
+      if (typeof $ == "string" || typeof $ == "number" || typeof $ == "boolean") {
+        String($).toLowerCase().includes(y) && k.add(P);
+        return;
+      }
+      if (Array.isArray($)) {
+        for (let M = 0; M < $.length; M++) {
+          const q = `${P}[${M}]`;
+          S($[M], q);
+        }
+        return;
+      }
+      if (typeof $ == "object")
+        for (const [M, q] of Object.entries($)) {
+          const R = `${P}.${M}`;
+          M.toLowerCase().includes(y) && k.add(R), S(q, R);
+        }
+    }
+    return S(e, "$"), k;
+  }, [e, w]), N = b?.size ?? 0;
+  return /* @__PURE__ */ n("div", { className: "flex flex-col gap-1 text-[12px]", role: "region", "aria-label": r || "Data Inspector", children: [
+    r && /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: "flex items-center gap-1 bg-transparent border-none text-dt-text-tertiary cursor-pointer text-[11px] font-semibold uppercase tracking-wider p-0 hover:text-dt-text-secondary transition-colors",
+          onClick: () => x(!d),
+          "aria-expanded": d,
+          "aria-controls": `inspector-content-${r}`,
+          "aria-label": `${d ? "Collapse" : "Expand"} ${r}`,
+          children: [
+            /* @__PURE__ */ t("span", { className: `text-[10px] transition-transform ${d ? "rotate-90" : ""}`, "aria-hidden": "true", children: "▶" }),
+            /* @__PURE__ */ t("span", { children: r })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-0.5", role: "toolbar", "aria-label": "Inspector actions", children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `px-1.5 py-0.5 text-[10px] bg-transparent border border-transparent rounded cursor-pointer transition-all ${c === "tree" ? "bg-white/10 text-dt-text-secondary border-dt-border-light" : "text-dt-text-muted hover:text-dt-text-tertiary"}`,
+            onClick: () => m("tree"),
+            title: "Tree view",
+            "aria-label": "Tree view",
+            "aria-pressed": c === "tree",
+            children: "Tree"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `px-1.5 py-0.5 text-[10px] bg-transparent border border-transparent rounded cursor-pointer transition-all ${c === "raw" ? "bg-white/10 text-dt-text-secondary border-dt-border-light" : "text-dt-text-muted hover:text-dt-text-tertiary"}`,
+            onClick: () => m("raw"),
+            title: "Raw JSON",
+            "aria-label": "Raw JSON view",
+            "aria-pressed": c === "raw",
+            children: "Raw"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: "p-0.5 bg-transparent border-none text-dt-text-muted cursor-pointer rounded hover:text-dt-text-tertiary transition-colors text-[12px]",
+            onClick: E,
+            title: "Copy JSON",
+            "aria-label": "Copy JSON to clipboard",
+            children: /* @__PURE__ */ n("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ t("path", { d: "M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" }),
+              /* @__PURE__ */ t("path", { d: "M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" })
+            ] })
+          }
+        )
+      ] })
+    ] }),
+    d && /* @__PURE__ */ n("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-zinc-950/50 rounded-t border border-b-0 border-dt-border-light", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            className: "flex-1 bg-transparent border-none text-[10px] font-mono text-dt-text-secondary placeholder-dt-text-muted/40 outline-none",
+            placeholder: "Filter...",
+            value: w,
+            onChange: (k) => v(k.target.value)
+          }
+        ),
+        w && /* @__PURE__ */ n(et, { children: [
+          /* @__PURE__ */ n("span", { className: "text-[9px] text-dt-text-muted/60 font-mono", children: [
+            N,
+            " match",
+            N !== 1 ? "es" : ""
+          ] }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "bg-transparent border-none text-dt-text-muted cursor-pointer text-[10px] p-0 hover:text-dt-text-secondary",
+              onClick: () => v(""),
+              "aria-label": "Clear search",
+              children: "×"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "overflow-auto bg-zinc-950/50 rounded-b border border-dt-border-light p-2 font-mono text-[11px]",
+          id: r ? `inspector-content-${r}` : void 0,
+          style: { maxHeight: s },
+          role: "region",
+          "aria-label": `${r || "Data"} content`,
+          children: c === "tree" ? /* @__PURE__ */ t(Ut, { data: e, matchingPaths: b, searchTerm: w }) : /* @__PURE__ */ t("pre", { className: "text-dt-text-muted whitespace-pre-wrap break-all m-0", "aria-readonly": "true", children: w ? /* @__PURE__ */ t(Ce, { text: f, term: w }) : f })
+        }
+      )
+    ] })
+  ] });
+}
+function Ce({ text: e, term: r }) {
+  if (!r) return /* @__PURE__ */ t(et, { children: e });
+  const a = [], s = e.toLowerCase(), d = r.toLowerCase();
+  let x = 0, c = s.indexOf(d, x), m = 0;
+  for (; c !== -1; )
+    c > x && a.push(e.slice(x, c)), a.push(
+      /* @__PURE__ */ t("mark", { className: "bg-yellow-400/30 text-yellow-200 rounded-sm px-px", children: e.slice(c, c + r.length) }, m++)
+    ), x = c + r.length, c = s.indexOf(d, x);
+  return x < e.length && a.push(e.slice(x)), /* @__PURE__ */ t(et, { children: a });
+}
+function Ut({ data: e, depth: r = 0, path: a = "$", matchingPaths: s, searchTerm: d }) {
+  const x = s ? Ft(a, s) : !1, [c, m] = z(r < 2), w = s?.has(a) ?? !1, v = c || !!s && x;
+  if (e === null)
+    return /* @__PURE__ */ t("span", { className: `italic ${w ? "bg-yellow-400/25 rounded-sm px-0.5 text-yellow-200" : "text-dt-text-muted"}`, children: "null" });
+  if (typeof e == "string")
+    return /* @__PURE__ */ n("span", { className: w ? "bg-yellow-400/25 rounded-sm px-0.5 text-yellow-200" : "text-dt-success", children: [
+      '"',
+      d ? /* @__PURE__ */ t(re, { text: e, term: d }) : e,
+      '"'
+    ] });
+  if (typeof e == "number")
+    return /* @__PURE__ */ t("span", { className: w ? "bg-yellow-400/25 rounded-sm px-0.5 text-yellow-200" : "text-dt-query", children: e });
+  if (typeof e == "boolean")
+    return /* @__PURE__ */ t("span", { className: w ? "bg-yellow-400/25 rounded-sm px-0.5 text-yellow-200" : "text-dt-mutation", children: e.toString() });
+  if (Array.isArray(e))
+    return e.length === 0 ? /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "[]" }) : /* @__PURE__ */ n("div", { className: "inline", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "bg-transparent border-none cursor-pointer p-0 text-inherit font-inherit inline-flex items-center gap-0.5",
+          onClick: () => m(!v),
+          "aria-expanded": v,
+          "aria-label": `${v ? "Collapse" : "Expand"} array with ${e.length} items`,
+          children: [
+            /* @__PURE__ */ t("span", { className: `text-[10px] transition-transform inline-block ${v ? "rotate-90" : ""}`, "aria-hidden": "true", children: "▶" }),
+            /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "[" }),
+            !v && /* @__PURE__ */ n("span", { className: "text-dt-text-muted/60 italic text-[10px]", children: [
+              e.length,
+              " items..."
+            ] }),
+            !v && /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "]" })
+          ]
+        }
+      ),
+      v && /* @__PURE__ */ n(et, { children: [
+        /* @__PURE__ */ t("div", { className: "pl-4 border-l border-dt-border-light/30 ml-1", children: e.map((E, f) => {
+          const b = `${a}[${f}]`;
+          return s && !Ft(b, s) && !s.has(b) ? null : /* @__PURE__ */ n("div", { className: "py-px", children: [
+            /* @__PURE__ */ n("span", { className: "text-dt-text-tertiary", children: [
+              f,
+              ":"
+            ] }),
+            " ",
+            /* @__PURE__ */ t(Ut, { data: E, depth: r + 1, path: b, matchingPaths: s, searchTerm: d })
+          ] }, f);
+        }) }),
+        /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "]" })
+      ] })
+    ] });
+  if (typeof e == "object") {
+    const E = Object.entries(e);
+    return E.length === 0 ? /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "{}" }) : /* @__PURE__ */ n("div", { className: "inline", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "bg-transparent border-none cursor-pointer p-0 text-inherit font-inherit inline-flex items-center gap-0.5",
+          onClick: () => m(!v),
+          "aria-expanded": v,
+          "aria-label": `${v ? "Collapse" : "Expand"} object with ${E.length} keys`,
+          children: [
+            /* @__PURE__ */ t("span", { className: `text-[10px] transition-transform inline-block ${v ? "rotate-90" : ""}`, "aria-hidden": "true", children: "▶" }),
+            /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "{" }),
+            !v && /* @__PURE__ */ n("span", { className: "text-dt-text-muted/60 italic text-[10px]", children: [
+              E.length,
+              " keys..."
+            ] }),
+            !v && /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "}" })
+          ]
+        }
+      ),
+      v && /* @__PURE__ */ n(et, { children: [
+        /* @__PURE__ */ t("div", { className: "pl-4 border-l border-dt-border-light/30 ml-1", children: E.map(([f, b]) => {
+          const N = `${a}.${f}`, k = s?.has(N) && d && f.toLowerCase().includes(d.toLowerCase());
+          return s && !Ft(N, s) && !s.has(N) ? null : /* @__PURE__ */ n("div", { className: "py-px", children: [
+            /* @__PURE__ */ n("span", { className: k ? "bg-yellow-400/25 rounded-sm px-0.5 text-yellow-200" : "text-dt-text-tertiary", children: [
+              '"',
+              d ? /* @__PURE__ */ t(re, { text: f, term: d }) : f,
+              '":'
+            ] }),
+            " ",
+            /* @__PURE__ */ t(Ut, { data: b, depth: r + 1, path: N, matchingPaths: s, searchTerm: d })
+          ] }, f);
+        }) }),
+        /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "}" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: String(e) });
+}
+function Ft(e, r) {
+  for (const a of r)
+    if (a.startsWith(e) && a !== e) return !0;
+  return !1;
+}
+function re({ text: e, term: r }) {
+  if (!r) return /* @__PURE__ */ t(et, { children: e });
+  const a = e.toLowerCase(), s = r.toLowerCase(), d = [];
+  let x = 0, c = a.indexOf(s, x), m = 0;
+  for (; c !== -1; )
+    c > x && d.push(e.slice(x, c)), d.push(
+      /* @__PURE__ */ t("mark", { className: "bg-yellow-400/30 text-yellow-200 rounded-sm px-px", children: e.slice(c, c + r.length) }, m++)
+    ), x = c + r.length, c = a.indexOf(s, x);
+  return x < e.length && d.push(e.slice(x)), /* @__PURE__ */ t(et, { children: d });
+}
+const oe = "minmax(0,1fr) 56px 56px 62px 34px minmax(150px,1fr)", Me = 140, Se = 1e-4;
+function lt(e) {
+  return Number.isFinite(e) ? `${Math.max(0, e).toFixed(3).replace(/\.0+$/, "").replace(/(\.\d*?)0+$/, "$1")}ms` : "0ms";
+}
+function gt(e) {
+  return `+${lt(Math.max(0, e))}`;
+}
+function ue(e) {
+  return Number.isFinite(e) ? Math.max(0, Math.min(100, e)) : 0;
+}
+function It(e, r = 40) {
+  if (e.length <= r) return e;
+  const a = Math.max(6, Math.floor((r - 3) / 2));
+  return `${e.slice(0, a)}...${e.slice(-a)}`;
+}
+function ne(e) {
+  if (typeof e == "string") return e.length > 60 ? `${e.slice(0, 57)}...` : e;
+  if (typeof e == "number" || typeof e == "boolean") return String(e);
+  if (e === null) return "null";
+  try {
+    const r = JSON.stringify(e);
+    return r ? r.length > 80 ? `${r.slice(0, 77)}...` : r : String(e);
+  } catch {
+    return String(e);
+  }
+}
+function $e(e) {
+  const r = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+  for (const m of e.spans) {
+    const w = m.parentId ?? null;
+    a.set(m.id, w);
+    const v = r.get(w) ?? [];
+    v.push(m), r.set(w, v);
+  }
+  for (const m of r.values())
+    m.sort((w, v) => w.startMs - v.startMs || w.name.localeCompare(v.name));
+  const s = [], d = /* @__PURE__ */ new Set(), x = (m, w) => {
+    if (d.has(m.id)) return;
+    d.add(m.id);
+    const v = r.get(m.id) ?? [], E = v.reduce((f, b) => !Number.isFinite(b.durationMs) || b.durationMs <= 0 ? f : f + b.durationMs, 0);
+    s.push({
+      span: m,
+      depth: w,
+      hasChildren: v.length > 0,
+      directChildDurationMs: E
+    });
+    for (const f of v) x(f, w + 1);
+  }, c = e.spans.find((m) => m.id === e.rootSpanId);
+  c && x(c, 0);
+  for (const m of r.get(null) ?? []) x(m, 0);
+  for (const m of e.spans) x(m, 0);
+  return { rows: s, parentById: a, childrenByParent: r };
+}
+function De(e) {
+  const r = e.attributes ? Object.keys(e.attributes).join(" ") : "", a = e.events?.map((s) => s.name).join(" ") ?? "";
+  return `${e.name} ${e.kind} ${e.status} ${r} ${a}`.toLowerCase();
+}
+function ae(e, r, a, s) {
+  const d = Number.isFinite(e) ? e : a, x = Number.isFinite(r) && r > 0 ? r : 0, c = (d - a) / s * 100, m = Math.min(99.8, ue(c)), w = x / s * 100, v = Math.max(0.3, 100 - m), E = Math.max(0.3, Math.min(w || 0.3, v));
+  return { leftPct: m, widthPct: E };
+}
+function Kt(e, r) {
+  const a = e.replace("#", "");
+  if (a.length !== 6) return `rgba(59,130,246,${r})`;
+  const s = parseInt(a.slice(0, 2), 16), d = parseInt(a.slice(2, 4), 16), x = parseInt(a.slice(4, 6), 16);
+  return `rgba(${s}, ${d}, ${x}, ${r})`;
+}
+function xe(e) {
+  if (e.status === "error") return "#ef4444";
+  const r = e.kind.toLowerCase();
+  return r.includes("query") || r.includes("db") || r.includes("scan") || r.includes("read") ? "#60a5fa" : r.includes("mutation") || r.includes("write") || r.includes("commit") ? "#a78bfa" : r.includes("action") || r.includes("http") || r.includes("fetch") || r.includes("network") ? "#34d399" : "#3b82f6";
+}
+function Ie(e, r) {
+  const a = xe(e);
+  return {
+    backgroundColor: Kt(a, r ? 1 : 0.86),
+    borderColor: Kt(a, r ? 1 : 0.65),
+    color: "#fff",
+    boxShadow: r ? "0 0 0 1px rgba(255,255,255,0.92), 0 0 0 2px rgba(0,0,0,0.45)" : "0 0 0 1px rgba(0,0,0,0.18)",
+    zIndex: r ? 6 : 2,
+    filter: r ? "brightness(1.06)" : "none"
+  };
+}
+function Le(e) {
+  const r = xe(e);
+  return {
+    backgroundColor: Kt(r, 0.95)
+  };
+}
+function Ae(e) {
+  const r = /* @__PURE__ */ new Map();
+  for (const s of e) {
+    const d = r.get(s.depth) ?? [];
+    d.push(s), r.set(s.depth, d);
+  }
+  const a = [];
+  for (const [s] of Array.from(r.entries()).sort((d, x) => d[0] - x[0])) {
+    const x = [...r.get(s) ?? []].sort(
+      (w, v) => w.span.startMs - v.span.startMs || v.span.durationMs - w.span.durationMs || w.span.name.localeCompare(v.span.name)
+    ), c = [], m = [];
+    for (const w of x) {
+      const v = Number.isFinite(w.span.startMs) ? w.span.startMs : 0, E = v + Math.max(0, Number.isFinite(w.span.durationMs) ? w.span.durationMs : 0), f = Number.isFinite(w.span.endMs) ? Math.max(v, w.span.endMs) : E;
+      let b = -1;
+      for (let N = 0; N < c.length; N++)
+        if (v >= c[N] - Se) {
+          b = N;
+          break;
+        }
+      b === -1 ? (b = c.length, c.push(f), m.push([])) : c[b] = Math.max(c[b], f), m[b].push(w);
+    }
+    a.push(...m);
+  }
+  return a;
+}
+function Te({ trace: e, maxHeight: r = 680 }) {
+  const [a, s] = z(!0), [d, x] = z("waterfall"), [c, m] = z(e.rootSpanId || e.spans[0]?.id || null), [w, v] = z(""), [E, f] = z(!1), [b, N] = z(/* @__PURE__ */ new Set()), [k, y] = z(null), S = V(() => $e(e), [e]), $ = V(() => Math.min(...e.spans.map((l) => l.startMs), 0), [e.spans]), P = V(() => Math.max(...e.spans.map((l) => l.endMs), 0), [e.spans]), M = V(() => {
+    const l = Math.max(0, P - $);
+    return Math.max(e.summary.totalDurationMs, l, 1);
+  }, [P, $, e.summary.totalDurationMs]), q = V(() => Math.max(220, r - 180), [r]), R = V(
+    () => e.spans.reduce((l, h) => l + (h.status === "error" ? 1 : 0), 0),
+    [e.spans]
+  ), p = w.trim().toLowerCase(), u = p.length > 0 || E, i = V(() => {
+    if (!u) return null;
+    const l = /* @__PURE__ */ new Set(), h = (g) => {
+      let T = S.parentById.get(g) ?? null;
+      for (; T && !l.has(T); )
+        l.add(T), T = S.parentById.get(T) ?? null;
+    }, _ = (g) => {
+      const T = [g];
+      for (; T.length > 0; ) {
+        const A = T.pop();
+        if (l.has(A)) continue;
+        l.add(A);
+        const O = S.childrenByParent.get(A) ?? [];
+        for (const j of O) T.push(j.id);
+      }
+    };
+    for (const g of e.spans)
+      E && g.status !== "error" || p.length > 0 && !De(g).includes(p) || (h(g.id), _(g.id));
+    return l;
+  }, [u, S.childrenByParent, S.parentById, p, E, e.spans]), C = V(() => {
+    const l = [], h = !u, _ = [];
+    for (const g of S.rows) {
+      for (; _.length > 0 && g.depth <= _[_.length - 1]; )
+        _.pop();
+      const T = h && _.length > 0, A = !i || i.has(g.span.id), O = !T && A;
+      O && l.push(g), h && O && g.hasChildren && b.has(g.span.id) && _.push(g.depth);
+    }
+    return l;
+  }, [S.rows, u, i, b]), I = V(() => Ae(C), [C]), L = V(() => {
+    const l = /* @__PURE__ */ new Map();
+    for (const h of e.spans) l.set(h.id, h);
+    return l;
+  }, [e.spans]), X = V(() => {
+    const l = /* @__PURE__ */ new Map();
+    for (const h of S.rows) l.set(h.span.id, h);
+    return l;
+  }, [S.rows]);
+  U(() => {
+    const l = e.rootSpanId || e.spans[0]?.id || null;
+    (!c || !e.spans.some((h) => h.id === c)) && m(l);
+  }, [c, e]), U(() => {
+    C.length !== 0 && (!c || !C.some((l) => l.span.id === c)) && m(C[0].span.id);
+  }, [c, C]), U(() => {
+    y(null);
+  }, [d, e]);
+  const rt = V(
+    () => S.rows.find((l) => l.span.id === c) ?? null,
+    [S.rows, c]
+  )?.span ?? null, D = (k ? L.get(k) ?? null : null) ?? rt, tt = D ? X.get(D.id) ?? null : null, ot = tt ? Math.max(0, tt.span.durationMs - tt.directChildDurationMs) : 0, it = D ? (() => {
+    const l = S.parentById.get(D.id) ?? null;
+    return l ? L.get(l) ?? null : null;
+  })() : null, pt = D ? D.startMs - $ : 0, mt = V(
+    () => D?.attributes ? Object.entries(D.attributes).slice(0, 20) : [],
+    [D]
+  ), wt = V(() => D?.events?.slice(0, 40) ?? [], [D]), vt = (l) => {
+    N((h) => {
+      const _ = new Set(h);
+      return _.has(l) ? _.delete(l) : _.add(l), _;
+    });
+  }, bt = () => {
+    N(new Set(S.rows.filter((l) => l.hasChildren).map((l) => l.span.id)));
+  }, St = () => {
+    N(/* @__PURE__ */ new Set());
+  }, o = () => {
+    v(""), f(!1);
+  };
+  return /* @__PURE__ */ n("div", { className: "flex flex-col gap-1 text-[12px]", role: "region", "aria-label": "Trace Viewer", children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: "flex items-center gap-1 bg-transparent border-none text-dt-text-tertiary cursor-pointer text-[11px] font-semibold uppercase tracking-wider p-0 hover:text-dt-text-secondary",
+          onClick: () => s((l) => !l),
+          "aria-expanded": a,
+          "aria-controls": "trace-viewer-content",
+          children: [
+            /* @__PURE__ */ t("span", { className: `text-[10px] ${a ? "rotate-90" : ""}`, "aria-hidden": "true", children: ">" }),
+            /* @__PURE__ */ n("span", { children: [
+              "Trace (",
+              e.summary.spanCount,
+              " spans, ",
+              e.summary.eventCount,
+              " events)"
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+        /* @__PURE__ */ t("span", { className: "hidden sm:inline-flex px-1.5 py-0.5 rounded bg-dt-bg-tertiary text-[10px] font-mono text-dt-text-muted", children: lt(e.summary.totalDurationMs) }),
+        /* @__PURE__ */ n("span", { className: "hidden sm:inline-flex px-1.5 py-0.5 rounded bg-dt-bg-tertiary text-[10px] font-mono text-dt-text-muted", children: [
+          R,
+          " err"
+        ] }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: "p-0.5 bg-transparent border-none text-dt-text-muted cursor-pointer rounded hover:text-dt-text-tertiary text-[12px]",
+            onClick: () => F(JSON.stringify(e, null, 2)),
+            title: "Copy trace JSON",
+            "aria-label": "Copy trace JSON",
+            children: /* @__PURE__ */ n("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", children: [
+              /* @__PURE__ */ t("path", { d: "M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" }),
+              /* @__PURE__ */ t("path", { d: "M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" })
+            ] })
+          }
+        )
+      ] })
+    ] }),
+    a && /* @__PURE__ */ n(
+      "div",
+      {
+        id: "trace-viewer-content",
+        className: "flex flex-col min-h-0 rounded border border-dt-border bg-dt-bg-secondary overflow-hidden",
+        style: { maxHeight: r },
+        children: [
+          /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center gap-1.5 px-2 py-1.5 border-b border-dt-border bg-dt-bg-secondary", children: [
+            /* @__PURE__ */ n("div", { className: "inline-flex rounded border border-dt-border-light overflow-hidden", children: [
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => x("waterfall"),
+                  className: `h-6 px-2 text-[10px] font-semibold uppercase tracking-wide ${d === "waterfall" ? "bg-dt-info/15 text-dt-info" : "bg-transparent text-dt-text-muted hover:text-dt-text-secondary"}`,
+                  children: "Waterfall"
+                }
+              ),
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => x("flamegraph"),
+                  className: `h-6 px-2 border-l border-dt-border-light text-[10px] font-semibold uppercase tracking-wide ${d === "flamegraph" ? "bg-dt-info/15 text-dt-info" : "bg-transparent text-dt-text-muted hover:text-dt-text-secondary"}`,
+                  children: "Flamegraph"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                value: w,
+                onChange: (l) => v(l.target.value),
+                placeholder: "Filter spans",
+                className: "h-6 flex-1 min-w-[120px] bg-dt-bg-tertiary border border-dt-border-light rounded px-2 text-[10px] font-mono text-dt-text-secondary placeholder:text-dt-text-muted/50 outline-none focus:border-dt-info/40"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => f((l) => !l),
+                className: `h-6 px-2 rounded text-[10px] font-semibold uppercase tracking-wide border ${E ? "bg-dt-error/15 border-dt-error/40 text-dt-error" : "bg-transparent border-dt-border-light text-dt-text-muted hover:text-dt-text-secondary"}`,
+                children: "Errors"
+              }
+            ),
+            u && /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: o,
+                className: "h-6 px-2 rounded text-[10px] font-semibold uppercase tracking-wide border border-dt-border-light text-dt-text-muted hover:text-dt-text-secondary",
+                children: "Clear"
+              }
+            ),
+            /* @__PURE__ */ n("span", { className: "ml-auto text-[9px] font-mono text-dt-text-muted/70", children: [
+              C.length,
+              "/",
+              S.rows.length
+            ] }),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: bt,
+                disabled: u,
+                className: "text-[9px] uppercase text-dt-text-muted hover:text-dt-text-secondary disabled:opacity-40 disabled:cursor-not-allowed",
+                children: "Collapse"
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: St,
+                disabled: u,
+                className: "text-[9px] uppercase text-dt-text-muted hover:text-dt-text-secondary disabled:opacity-40 disabled:cursor-not-allowed",
+                children: "Expand"
+              }
+            )
+          ] }),
+          d === "waterfall" ? /* @__PURE__ */ n(et, { children: [
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: "grid gap-2 px-2 py-1 border-b border-dt-border-light bg-dt-bg-tertiary/30 text-[9px] uppercase tracking-wider text-dt-text-muted/70 font-mono",
+                style: { gridTemplateColumns: oe },
+                children: [
+                  /* @__PURE__ */ t("span", { children: "Span" }),
+                  /* @__PURE__ */ t("span", { className: "text-right", children: "Self" }),
+                  /* @__PURE__ */ t("span", { className: "text-right", children: "Total" }),
+                  /* @__PURE__ */ t("span", { className: "text-right", children: "Start" }),
+                  /* @__PURE__ */ t("span", { className: "text-right", children: "Evt" }),
+                  /* @__PURE__ */ t("span", { children: "Timeline" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ n("div", { className: "min-h-0 overflow-y-auto p-1 bg-dt-bg-secondary/30", style: { maxHeight: q }, children: [
+              /* @__PURE__ */ t("div", { className: "space-y-0.5", children: C.map((l) => {
+                const { span: h } = l, _ = Number.isFinite(h.durationMs) && h.durationMs > 0 ? h.durationMs : 0, g = Math.max(0, _ - l.directChildDurationMs), T = h.startMs - $, A = h.events?.length ?? 0, { leftPct: O, widthPct: j } = ae(
+                  h.startMs,
+                  _,
+                  $,
+                  M
+                ), Q = c === h.id, K = b.has(h.id);
+                return /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: `grid gap-2 items-center rounded border px-1 py-[2px] select-none cursor-pointer ${Q ? "bg-dt-info/10 border-dt-info/30" : "border-transparent hover:bg-white/[0.03]"}`,
+                    style: { gridTemplateColumns: oe },
+                    onMouseDown: (Y) => Y.preventDefault(),
+                    onClick: () => {
+                      m(h.id), y(h.id);
+                    },
+                    children: [
+                      /* @__PURE__ */ n("div", { className: "min-w-0 flex items-center gap-1", style: { paddingLeft: `${l.depth * 8}px` }, children: [
+                        l.hasChildren ? /* @__PURE__ */ t(
+                          "button",
+                          {
+                            type: "button",
+                            onMouseDown: (Y) => Y.preventDefault(),
+                            onClick: (Y) => {
+                              Y.stopPropagation(), vt(h.id);
+                            },
+                            className: "w-3 h-3 flex items-center justify-center text-[9px] text-dt-text-muted hover:text-dt-text-secondary",
+                            title: K ? "Expand" : "Collapse",
+                            children: /* @__PURE__ */ t("span", { className: `inline-block ${K ? "" : "rotate-90"}`, children: ">" })
+                          }
+                        ) : /* @__PURE__ */ t("span", { className: "w-3 h-3" }),
+                        /* @__PURE__ */ t(
+                          "span",
+                          {
+                            className: `w-1.5 h-1.5 rounded-full shrink-0 ${h.status === "error" ? "bg-dt-error" : "bg-dt-success"}`
+                          }
+                        ),
+                        /* @__PURE__ */ t("span", { className: "font-mono text-[9px] uppercase text-dt-text-muted/70 shrink-0", children: h.kind }),
+                        /* @__PURE__ */ t(
+                          "span",
+                          {
+                            className: "font-mono text-[10px] leading-tight text-dt-text-secondary truncate",
+                            title: h.name,
+                            children: h.name
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ t("div", { className: "font-mono text-[10px] text-dt-text-muted text-right", children: lt(g) }),
+                      /* @__PURE__ */ t("div", { className: "font-mono text-[10px] text-dt-text-muted text-right", children: lt(_) }),
+                      /* @__PURE__ */ t("div", { className: "font-mono text-[10px] text-dt-text-muted text-right", children: gt(T) }),
+                      /* @__PURE__ */ t("div", { className: "font-mono text-[10px] text-dt-text-muted text-right", children: A }),
+                      /* @__PURE__ */ n("div", { className: "relative h-2 rounded bg-dt-bg-tertiary border border-dt-border-light/50 overflow-hidden", children: [
+                        Q && h.events?.slice(0, 80).map((Y, nt) => {
+                          const ut = Math.min(
+                            99.8,
+                            ue((Y.atMs - $) / M * 100)
+                          );
+                          return /* @__PURE__ */ t(
+                            "span",
+                            {
+                              className: "absolute top-0 bottom-0 w-px bg-white/55",
+                              style: { left: `${ut}%` }
+                            },
+                            `${h.id}:${nt}:${Y.name}`
+                          );
+                        }),
+                        /* @__PURE__ */ t(
+                          "div",
+                          {
+                            className: "absolute top-0 bottom-0 rounded",
+                            style: { left: `${O}%`, width: `${j}%`, ...Le(h) }
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  h.id
+                );
+              }) }),
+              C.length === 0 && /* @__PURE__ */ t("div", { className: "mt-2 px-2 py-4 text-[11px] text-dt-text-muted text-center border border-dt-border-light/40 rounded", children: "No spans match the current filter." })
+            ] })
+          ] }) : /* @__PURE__ */ t("div", { className: "flex-1 min-h-0 overflow-auto bg-dt-bg-secondary/30", style: { maxHeight: q }, children: /* @__PURE__ */ n("div", { className: "min-w-[820px] p-2", children: [
+            /* @__PURE__ */ n("div", { className: "mb-2", children: [
+              /* @__PURE__ */ t("div", { className: "relative h-4 text-[9px] font-mono text-dt-text-muted/70 mb-1", children: [0, 25, 50, 75, 100].map((l) => /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "absolute top-0",
+                  style: {
+                    left: `${l}%`,
+                    transform: l === 0 ? "translateX(0)" : l === 100 ? "translateX(-100%)" : "translateX(-50%)"
+                  },
+                  children: l === 0 ? "0ms" : lt(M * l / 100)
+                },
+                `tick-${l}`
+              )) }),
+              /* @__PURE__ */ t("div", { className: "relative h-5 border border-dt-border-light/50 rounded bg-dt-bg-tertiary/40", children: [0, 25, 50, 75, 100].map((l) => /* @__PURE__ */ t("div", { className: "absolute inset-y-0", style: { left: `${l}%` }, children: /* @__PURE__ */ t("div", { className: "absolute inset-y-0 w-px bg-white/10" }) }, `line-${l}`)) })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "mb-2 h-7 rounded border border-dt-border-light/50 bg-dt-bg-tertiary/35 px-2 flex items-center gap-2 text-[10px] font-mono overflow-hidden", children: D ? /* @__PURE__ */ n(et, { children: [
+              /* @__PURE__ */ t("span", { className: "text-dt-text-secondary truncate max-w-[38%]", title: D.name, children: D.name }),
+              /* @__PURE__ */ t("span", { className: "text-dt-text-muted uppercase", children: D.kind }),
+              /* @__PURE__ */ t("span", { className: D.status === "error" ? "text-dt-error" : "text-dt-success", children: D.status }),
+              it && /* @__PURE__ */ n("span", { className: "text-dt-text-muted/80 truncate max-w-[20%]", title: it.name, children: [
+                "parent ",
+                It(it.name, 24)
+              ] }),
+              /* @__PURE__ */ n("span", { className: "ml-auto text-dt-text-muted", children: [
+                "start ",
+                gt(pt)
+              ] }),
+              /* @__PURE__ */ n("span", { className: "text-dt-text-muted", children: [
+                "self ",
+                lt(ot)
+              ] }),
+              /* @__PURE__ */ n("span", { className: "text-dt-text-muted", children: [
+                "total ",
+                lt(D.durationMs)
+              ] }),
+              /* @__PURE__ */ n("span", { className: "text-dt-text-muted", children: [
+                "evt ",
+                D.events?.length ?? 0
+              ] })
+            ] }) : /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "Hover a span for details" }) }),
+            /* @__PURE__ */ t("div", { className: "space-y-[3px]", children: I.map((l, h) => /* @__PURE__ */ t(
+              "div",
+              {
+                className: "relative h-5 rounded bg-dt-bg-tertiary/35 border border-dt-border-light/40 overflow-hidden",
+                children: l.map((_) => {
+                  const g = _.span, T = Number.isFinite(g.durationMs) && g.durationMs > 0 ? g.durationMs : 0, { leftPct: A, widthPct: O } = ae(
+                    g.startMs,
+                    T,
+                    $,
+                    M
+                  ), j = c === g.id, Q = O > 24 ? It(g.name, 28) : O > 14 ? g.kind : "";
+                  return /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onMouseDown: (K) => K.preventDefault(),
+                      onMouseEnter: () => y(g.id),
+                      onMouseLeave: () => y((K) => K === g.id ? null : K),
+                      onFocus: () => y(g.id),
+                      onBlur: () => y((K) => K === g.id ? null : K),
+                      onClick: () => {
+                        m(g.id), y(g.id);
+                      },
+                      className: "absolute top-0.5 h-[16px] rounded-sm border px-1 text-[9px] font-mono text-left overflow-hidden whitespace-nowrap text-ellipsis",
+                      style: { left: `${A}%`, width: `${O}%`, ...Ie(g, j) },
+                      title: `${g.name} (${g.kind}) ${lt(T)} @ ${gt(g.startMs - $)}`,
+                      children: Q
+                    },
+                    g.id
+                  );
+                })
+              },
+              `lane-${h}`
+            )) }),
+            I.length === 0 && /* @__PURE__ */ t("div", { className: "mt-2 px-2 py-4 text-[11px] text-dt-text-muted text-center border border-dt-border-light/40 rounded", children: "No spans match the current filter." })
+          ] }) }),
+          /* @__PURE__ */ t("div", { className: "border-t border-dt-border bg-dt-bg-secondary", children: /* @__PURE__ */ t("div", { className: "overflow-auto p-2 pr-1", style: { maxHeight: Me }, children: D ? /* @__PURE__ */ n("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ t("span", { className: "font-mono text-[9px] uppercase text-dt-text-muted/70", children: D.kind }),
+              /* @__PURE__ */ t("span", { className: "font-mono text-[11px] text-dt-text-secondary truncate", title: D.name, children: D.name }),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: `ml-auto text-[9px] uppercase font-semibold ${D.status === "error" ? "text-dt-error" : "text-dt-success"}`,
+                  children: D.status
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n("div", { className: "grid grid-cols-2 gap-1 text-[9px] font-mono text-dt-text-muted/80", children: [
+              /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 rounded bg-dt-bg-tertiary", children: [
+                "start ",
+                gt(D.startMs - $)
+              ] }),
+              /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 rounded bg-dt-bg-tertiary", children: [
+                "end ",
+                gt(D.endMs - $)
+              ] }),
+              /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 rounded bg-dt-bg-tertiary", children: [
+                "self ",
+                lt(ot)
+              ] }),
+              /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 rounded bg-dt-bg-tertiary", children: [
+                "total ",
+                lt(D.durationMs)
+              ] })
+            ] }),
+            it && /* @__PURE__ */ n("div", { className: "text-[9px] font-mono text-dt-text-muted/70", title: it.name, children: [
+              "parent ",
+              It(it.name, 56)
+            ] }),
+            e.requestId && /* @__PURE__ */ n("div", { className: "text-[9px] font-mono text-dt-text-muted/70", title: e.requestId, children: [
+              "request ",
+              It(e.requestId, 56)
+            ] }),
+            mt.length > 0 && /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: mt.map(([l, h]) => /* @__PURE__ */ n(
+              "div",
+              {
+                className: "px-1.5 py-0.5 rounded bg-dt-bg-tertiary text-[9px] font-mono text-dt-text-muted/90 break-all",
+                title: `${l}: ${ne(h)}`,
+                children: [
+                  /* @__PURE__ */ n("span", { className: "text-dt-text-muted/70", children: [
+                    l,
+                    "="
+                  ] }),
+                  /* @__PURE__ */ t("span", { className: "text-dt-text-secondary", children: ne(h) })
+                ]
+              },
+              l
+            )) }),
+            wt.length > 0 && /* @__PURE__ */ t("div", { className: "space-y-0.5", children: wt.map((l, h) => /* @__PURE__ */ n(
+              "div",
+              {
+                className: "font-mono text-[10px] text-dt-text-muted/90",
+                children: [
+                  /* @__PURE__ */ t("span", { className: "text-dt-text-muted/70", children: gt(l.atMs - $) }),
+                  " ",
+                  /* @__PURE__ */ t("span", { className: "text-dt-info/90", children: l.name }),
+                  l.attributes ? ` ${JSON.stringify(l.attributes)}` : ""
+                ]
+              },
+              `${D.id}:${h}:${l.name}`
+            )) })
+          ] }) : /* @__PURE__ */ t("div", { className: "flex items-center justify-center text-[11px] text-dt-text-muted min-h-14", children: "Select a span to inspect details." }) }) })
+        ]
+      }
+    )
+  ] });
+}
+const Xt = me.forwardRef(
+  ({ value: e, onValueChange: r, onClear: a, placeholder: s, className: d = "", ...x }, c) => {
+    const m = () => {
+      a ? a() : r("");
+    };
+    return /* @__PURE__ */ n("div", { className: `relative flex items-center ${d === "stretch" ? "flex-1" : ""}`, role: "search", children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          ...x,
+          ref: c,
+          type: "search",
+          className: "w-full bg-dt-bg-tertiary/50 border border-dt-border-light rounded-md px-2.5 pr-7 py-1 text-[11px] text-dt-text-secondary placeholder:text-dt-text-muted/50 outline-none focus:border-dt-info/50 focus:bg-dt-bg-tertiary transition-colors font-sans [&::-webkit-search-cancel-button]:hidden",
+          value: e,
+          onChange: (w) => r(w.target.value),
+          placeholder: s,
+          spellCheck: x.spellCheck ?? !1,
+          "aria-label": x["aria-label"] || s || "Search"
+        }
+      ),
+      e && /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: "absolute right-1.5 p-0.5 bg-transparent border-none text-dt-text-muted cursor-pointer rounded hover:text-dt-text-tertiary transition-colors",
+          onClick: m,
+          "aria-label": "Clear search",
+          title: "Clear search",
+          children: /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708Z" }) })
+        }
+      )
+    ] });
+  }
+);
+function Gt({ x: e, y: r, items: a, onClose: s }) {
+  const [d, x] = z(-1), c = Ct(null), [m, w] = z({ x: e, y: r });
+  U(() => {
+    const f = c.current;
+    if (!f) return;
+    const b = 8, N = f.getBoundingClientRect(), k = window.innerWidth, y = window.innerHeight;
+    let S = e, $ = r;
+    e + N.width > k - b && (S = Math.max(b, k - N.width - b)), r + N.height > y - b && ($ = Math.max(b, y - N.height - b)), (S !== m.x || $ !== m.y) && w({ x: S, y: $ });
+  }, [e, r]), U(() => {
+    const f = (S) => {
+      c.current && !c.current.contains(S.target) && s();
+    }, b = (S) => {
+      c.current && !c.current.contains(S.target) && s();
+    }, N = () => s(), k = () => s(), y = setTimeout(() => {
+      document.addEventListener("mousedown", f), document.addEventListener("contextmenu", b);
+    }, 0);
+    return window.addEventListener("scroll", N, !0), window.addEventListener("blur", k), () => {
+      clearTimeout(y), document.removeEventListener("mousedown", f), document.removeEventListener("contextmenu", b), window.removeEventListener("scroll", N, !0), window.removeEventListener("blur", k);
+    };
+  }, [s]);
+  const v = a.map((f, b) => ({ ...f, index: b })).filter((f) => !f.disabled), E = J(
+    (f) => {
+      if (f.key === "Escape") {
+        f.preventDefault(), f.stopPropagation(), s();
+        return;
+      }
+      if (f.key === "ArrowDown") {
+        f.preventDefault(), x((b) => {
+          const N = v.findIndex((y) => y.index === b), k = N < v.length - 1 ? N + 1 : 0;
+          return v[k].index;
+        });
+        return;
+      }
+      if (f.key === "ArrowUp") {
+        f.preventDefault(), x((b) => {
+          const N = v.findIndex((y) => y.index === b), k = N > 0 ? N - 1 : v.length - 1;
+          return v[k].index;
+        });
+        return;
+      }
+      if (f.key === "Enter") {
+        f.preventDefault(), d >= 0 && !a[d].disabled && (a[d].action(), s());
+        return;
+      }
+    },
+    [s, d, a, v]
+  );
+  return U(() => (window.addEventListener("keydown", E, !0), () => window.removeEventListener("keydown", E, !0)), [E]), U(() => {
+    v.length > 0 && d === -1 && x(v[0].index);
+  }, []), /* @__PURE__ */ t(
+    "div",
+    {
+      ref: c,
+      className: "fixed z-[9999999] min-w-[180px] max-w-[280px] bg-zinc-900/[0.98] backdrop-blur-lg border border-dt-border rounded-lg shadow-2xl py-1 animate-[dt-fade-in_0.1s_ease-out]",
+      style: { top: m.y, left: m.x },
+      role: "menu",
+      onContextMenu: (f) => f.preventDefault(),
+      children: a.map((f, b) => /* @__PURE__ */ n("div", { children: [
+        f.separator && b > 0 && /* @__PURE__ */ t("div", { className: "border-t border-dt-border-light/40 my-0.5", role: "separator" }),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            className: `flex items-center w-full px-3 py-1.5 text-[12px] text-left bg-transparent border-none cursor-pointer transition-colors ${f.disabled ? "opacity-40 pointer-events-none text-dt-text-muted" : d === b ? "bg-white/[0.08] text-dt-text-secondary" : "text-dt-text-secondary hover:bg-white/[0.06]"}`,
+            role: "menuitem",
+            tabIndex: -1,
+            disabled: f.disabled,
+            onMouseEnter: () => {
+              f.disabled || x(b);
+            },
+            onClick: (N) => {
+              N.stopPropagation(), f.disabled || (f.action(), s());
+            },
+            children: [
+              /* @__PURE__ */ t("span", { className: "flex-1 truncate", children: f.label }),
+              f.shortcut && /* @__PURE__ */ t("span", { className: "text-dt-text-muted font-mono text-[11px] ml-4 shrink-0", children: f.shortcut })
+            ]
+          }
+        )
+      ] }, b))
+    }
+  );
+}
+function zt(e) {
+  return e.type === "query" || e.type === "mutation" || e.type === "action";
+}
+function Ht(e) {
+  return e.type === "auth";
+}
+function Lt(e) {
+  return zt(e) || Ht(e);
+}
+const _e = `
+.cdv-json-key { color: var(--color-dt-text-tertiary); }
+.cdv-json-string { color: var(--color-dt-success); }
+.cdv-json-number { color: var(--color-dt-query); }
+.cdv-json-boolean { color: var(--color-dt-mutation); }
+.cdv-json-null { color: var(--color-dt-text-muted); }
+.cdv-json-value { color: var(--color-dt-text-secondary); }
+`, At = 100, ie = 100, ft = 4e3, ze = {
+  maxStringLength: 128,
+  stringTailLength: 24,
+  maxArrayItems: 4,
+  maxObjectEntries: 4,
+  maxDepth: 3
+};
+function Rt(e) {
+  if (e == null) return "";
+  if (typeof e == "string")
+    return e.length > ft ? e.slice(0, ft) : e;
+  try {
+    const r = JSON.stringify(e);
+    return r ? r.length > ft ? r.slice(0, ft) : r : "";
+  } catch {
+    const r = String(e);
+    return r.length > ft ? r.slice(0, ft) : r;
+  }
+}
+function Pe(e) {
+  const [r, a] = e.split("-", 3);
+  return r === "query" && a ? `Q${a}` : r === "mutation" && a ? `M${a}` : r === "action" && a ? `A${a}` : e;
+}
+function qe({ eventStore: e, panelConnectionState: r }) {
+  const [a, s] = z([]), [d, x] = z("all"), [c, m] = z(""), [w, v] = z(At), [E, f] = z(null), [b, N] = z(0), [k, y] = z(null), [S, $] = z(null), P = Ct(null), M = E && zt(E) ? E : null, q = E && Ht(E) ? E : null, R = J(() => {
+    v(At), N(0);
+  }, []), p = J(
+    (o) => {
+      x(o), R();
+    },
+    [R]
+  ), u = J(
+    (o) => {
+      m(o), R();
+    },
+    [R]
+  );
+  U(() => {
+    const o = () => {
+      s(e.getAllEvents());
+    }, l = e.subscribe(o);
+    return o(), l;
+  }, [e]), U(() => {
+    const o = (h) => {
+      if (!h) return;
+      const _ = e.getAllEvents().find((A) => A.id === h);
+      if (!_ || !Lt(_)) return;
+      x("all"), m(""), v(At), y(null), $(null), f(_), N(0);
+      const T = e.getAllEvents().filter(Lt).sort((A, O) => O.timestamp - A.timestamp).findIndex((A) => A.id === h);
+      T >= 0 && (v((A) => Math.max(A, At, T + 1)), N(T));
+    }, l = e.subscribeFocus(o);
+    return o(e.getFocusedEventId()), l;
+  }, [e]);
+  const i = J((o) => {
+    const l = ct(o.args), h = [o.id, o.type, o.status, o.udfPath];
+    if (o.componentPath && h.push(o.componentPath), o.type === "query")
+      h.push(String(o.queryId), `q${o.queryId}`), o.triggeredBy && h.push(o.triggeredBy);
+    else {
+      const _ = o.type === "mutation" ? "m" : "a";
+      h.push(String(o.requestId), `${_}${o.requestId}`);
+    }
+    return h.push(Rt(l)), o.result !== void 0 && h.push(Rt(o.result)), o.error && h.push(o.error), o.logLines && o.logLines.length > 0 && h.push(o.logLines.join(`
+`)), typeof o.duration == "number" && h.push(`${o.duration}`, `${o.duration}ms`), typeof o.simulatedDelayMs == "number" && o.simulatedDelayMs > 0 && h.push(`simulated ${o.simulatedDelayMs}`, `delay ${o.simulatedDelayMs}ms`), typeof o.endToEndDurationMs == "number" && h.push(`${o.endToEndDurationMs}`, `${o.endToEndDurationMs}ms`, "end-to-end"), h.join(`
+`).toLowerCase();
+  }, []), C = J(
+    (o) => {
+      if (zt(o))
+        return i(o);
+      const l = [o.id, o.type, o.status, o.direction, o.messageType];
+      return o.tokenType && l.push(o.tokenType), o.error && l.push(o.error), o.details !== void 0 && l.push(Rt(o.details)), l.join(`
+`).toLowerCase();
+    },
+    [i]
+  ), { filteredEvents: I, totalMatchCount: L, hasMoreResults: X } = V(() => {
+    let o = a.filter(Lt);
+    d !== "all" && (d === "error" ? o = o.filter((g) => g.status === "error") : o = o.filter((g) => g.type === d));
+    const l = c.trim().toLowerCase().split(/\s+/).filter((g) => g.length > 0);
+    l.length > 0 && (o = o.filter((g) => {
+      const T = C(g);
+      return l.every((A) => T.includes(A));
+    }));
+    const h = o.sort((g, T) => T.timestamp - g.timestamp), _ = h.slice(0, w);
+    return {
+      filteredEvents: _,
+      totalMatchCount: h.length,
+      hasMoreResults: h.length > _.length
+    };
+  }, [a, d, c, w, C]);
+  U(() => {
+    if (I.length === 0) {
+      N(0);
+      return;
+    }
+    N((o) => Math.min(o, I.length - 1));
+  }, [I.length]);
+  const B = V(() => {
+    const o = a.filter(Lt), l = o.filter((A) => A.type === "query"), h = o.filter((A) => A.type === "mutation"), _ = o.filter((A) => A.type === "action"), g = o.filter((A) => A.type === "auth"), T = o.filter((A) => A.status === "error").length;
+    return {
+      queries: l.length,
+      mutations: h.length,
+      actions: _.length,
+      auth: g.length,
+      errors: T,
+      total: l.length + h.length + _.length + g.length
+    };
+  }, [a]), rt = !!r?.waitingForConnection && d === "all" && !c;
+  U(() => {
+    const o = (l) => {
+      if (Pt()) {
+        if ((l.metaKey || l.ctrlKey) && l.key === "k") {
+          l.preventDefault(), P.current?.focus();
+          return;
+        }
+        if (l.key === "Escape") {
+          l.preventDefault(), E ? f(null) : (d !== "all" || c) && (p("all"), u(""));
+          return;
+        }
+        if (pe() !== P.current && I.length !== 0) {
+          if (l.key === "ArrowDown")
+            l.preventDefault(), N((h) => Math.min(h + 1, I.length - 1));
+          else if (l.key === "ArrowUp")
+            l.preventDefault(), N((h) => Math.max(h - 1, 0));
+          else if (l.key === "Enter") {
+            l.preventDefault();
+            const h = I[b];
+            h && f(E?.id === h.id ? null : h);
+          }
+        }
+      }
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [I, b, E, d, c, p, u]);
+  const G = (o) => {
+    if (o == null) return "0";
+    const l = JSON.stringify(o), h = new Blob([l]).size;
+    return h < 1024 ? `${h}B` : h < 1024 * 1024 ? `${(h / 1024).toFixed(1)}KB` : `${(h / (1024 * 1024)).toFixed(1)}MB`;
+  }, D = (o) => !Number.isFinite(o) || o < 0 ? "—" : o < 1e3 ? `${o.toFixed(3)}ms` : o < 6e4 ? `${(o / 1e3).toFixed(3)}s` : o < 36e5 ? `${(o / 6e4).toFixed(1)}m` : `${(o / 36e5).toFixed(2)}h`, tt = (o) => typeof o.duration != "number" || !Number.isFinite(o.duration) || o.duration < 0 ? null : o.duration, ot = (o) => typeof o.simulatedDelayMs != "number" || !Number.isFinite(o.simulatedDelayMs) || o.simulatedDelayMs <= 0 ? 0 : o.simulatedDelayMs, it = (o) => {
+    if (typeof o.endToEndDurationMs == "number" && Number.isFinite(o.endToEndDurationMs) && o.endToEndDurationMs >= 0)
+      return o.endToEndDurationMs;
+    const l = tt(o);
+    return l === null ? null : l + ot(o);
+  }, pt = (o) => {
+    const l = Date.now() - o;
+    return l < 2e3 ? "just now" : l < 6e4 ? `${Math.floor(l / 1e3)}s ago` : l < 36e5 ? `${Math.floor(l / 6e4)}m ago` : l < 864e5 ? `${Math.floor(l / 36e5)}h ago` : `${Math.floor(l / 864e5)}d ago`;
+  }, mt = (o) => new Date(o).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3
+  }), wt = (o) => o.type === "query" ? `Q${o.queryId}` : o.type === "mutation" ? `M${o.requestId}` : o.type === "action" ? `A${o.requestId}` : null, vt = (o) => zt(o) ? wt(o) ?? o.id : `${o.direction === "client" ? "C" : "S"}:${o.messageType}`, bt = J((o, l) => {
+    if (typeof window > "u") return null;
+    const h = 8, _ = 300, g = window.innerWidth, T = window.innerHeight, A = Math.min(260, T - h * 2);
+    let O = l.right + h;
+    O + _ > g - h && (O = l.left - _ - h), O < h && (O = Math.max(h, g - _ - h));
+    let j = l.top + l.height / 2 - A / 2;
+    return j < h && (j = h), j + A > T - h && (j = Math.max(h, T - h - A)), { event: o, x: O, y: j };
+  }, []), St = J(
+    (o) => {
+      if (Ht(o)) {
+        const A = [
+          { label: "Copy Message Type", action: () => F(o.messageType), shortcut: "⌘C" }
+        ];
+        return o.error && A.push({
+          label: "Copy Error",
+          action: () => F(o.error)
+        }), o.details !== void 0 && A.push({
+          label: "Copy Details",
+          action: () => F(JSON.stringify(o.details, null, 2))
+        }), A.push({
+          label: "Filter by Type: auth",
+          action: () => p("auth"),
+          separator: !0
+        }), A.push({
+          label: "Copy Event ID",
+          action: () => F(o.id),
+          separator: !0
+        }), A.push({
+          label: "Copy as JSON",
+          action: () => F(JSON.stringify(o, null, 2))
+        }), A;
+      }
+      const l = ct(o.args), h = l != null, _ = o.status === "success" && o.result !== void 0, g = o.status === "error" && !!o.error, T = [
+        { label: "Copy Function Path", action: () => F(o.udfPath), shortcut: "⌘C" }
+      ];
+      if (h) {
+        const A = JSON.stringify(l);
+        T.push({
+          label: "Copy as convex run",
+          action: () => F(`npx convex run ${o.udfPath} '${A}'`)
+        }), T.push({
+          label: "Copy Arguments",
+          action: () => F(JSON.stringify(l, null, 2))
+        });
+      }
+      return _ && T.push({
+        label: "Copy Result",
+        action: () => F(JSON.stringify(o.result, null, 2))
+      }), g && T.push({
+        label: "Copy Error",
+        action: () => F(o.error)
+      }), T.push({
+        label: "Filter by Function",
+        action: () => u(o.udfPath),
+        separator: !0
+      }), T.push({
+        label: `Filter by Type: ${o.type}`,
+        action: () => p(o.type)
+      }), T.push({
+        label: "Copy Event ID",
+        action: () => F(o.id),
+        separator: !0
+      }), T.push({
+        label: "Copy as JSON",
+        action: () => F(JSON.stringify(o, null, 2))
+      }), T;
+    },
+    [p, u]
+  );
+  return /* @__PURE__ */ n("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ t("style", { children: _e }),
+    /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-dt-border-light", children: [
+      /* @__PURE__ */ t("div", { className: "flex gap-[3px] bg-zinc-900/50 p-[3px] rounded-md border border-zinc-700/30", children: ["all", "query", "mutation", "action", "auth", "error"].map((o) => /* @__PURE__ */ t(
+        "button",
+        {
+          className: `px-2 py-1 text-[11px] font-mono font-bold uppercase tracking-wide bg-transparent border-none rounded cursor-pointer transition-all ${d === o ? o === "query" ? "bg-dt-query/25 text-dt-query shadow-[0_0_0_1px_rgba(96,165,250,0.5)]" : o === "mutation" ? "bg-dt-mutation/25 text-dt-mutation shadow-[0_0_0_1px_rgba(167,139,250,0.5)]" : o === "action" ? "bg-dt-action/25 text-dt-action shadow-[0_0_0_1px_rgba(52,211,153,0.5)]" : o === "auth" ? "bg-dt-warning/20 text-dt-warning shadow-[0_0_0_1px_rgba(245,158,11,0.5)]" : o === "error" ? "bg-dt-error/25 text-dt-error shadow-[0_0_0_1px_rgba(239,68,68,0.5)]" : "bg-zinc-500/25 text-dt-text-tertiary shadow-[0_0_0_1px_rgba(161,161,170,0.4)]" : o === "query" ? "text-dt-text-muted hover:bg-dt-query/15 hover:text-dt-query" : o === "mutation" ? "text-dt-text-muted hover:bg-dt-mutation/15 hover:text-dt-mutation" : o === "action" ? "text-dt-text-muted hover:bg-dt-action/15 hover:text-dt-action" : o === "auth" ? "text-dt-text-muted hover:bg-dt-warning/15 hover:text-dt-warning" : o === "error" ? "text-dt-text-muted hover:bg-dt-error/15 hover:text-dt-error" : "text-dt-text-muted hover:bg-white/5 hover:text-dt-text-tertiary"}`,
+          onClick: () => p(o),
+          children: o === "all" ? `All ${B.total}` : `${o === "auth" ? "C" : o === "error" ? "E" : o.charAt(0).toUpperCase()} ${o === "query" ? B.queries : o === "mutation" ? B.mutations : o === "action" ? B.actions : o === "error" ? B.errors : B.auth}`
+        },
+        o
+      )) }),
+      /* @__PURE__ */ t(
+        Xt,
+        {
+          ref: P,
+          value: c,
+          onValueChange: u,
+          onClear: () => u(""),
+          placeholder: "Search path/auth/error/details... (Cmd/Ctrl+K)",
+          className: "stretch"
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-1 ml-auto shrink-0", children: (d !== "all" || c) && /* @__PURE__ */ t(
+        "button",
+        {
+          className: "p-1 bg-transparent border-none text-dt-text-muted cursor-pointer rounded transition-colors hover:text-dt-text-tertiary",
+          onClick: () => {
+            p("all"), u("");
+          },
+          title: "Clear filters (Esc)",
+          children: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" }) })
+        }
+      ) })
+    ] }),
+    I.length === 0 && /* @__PURE__ */ n("div", { className: "flex flex-col items-center justify-center py-12 text-dt-text-muted gap-2", children: [
+      /* @__PURE__ */ n("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [
+        /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "1.5" }),
+        /* @__PURE__ */ t("path", { d: "M12 6v6l4 2", strokeWidth: "1.5", strokeLinecap: "round" })
+      ] }),
+      rt ? /* @__PURE__ */ n(et, { children: [
+        /* @__PURE__ */ t("p", { children: "Waiting for Convex WebSocket activity" }),
+        r.needsReload ? /* @__PURE__ */ n(et, { children: [
+          /* @__PURE__ */ t("p", { className: "text-[11px] text-dt-text-muted/60 max-w-[360px] text-center", children: "Page was already connected before DevTools attached. Reload to start capturing this connection." }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: "mt-1 px-3 py-1.5 text-[11px] font-medium rounded-md bg-dt-bg-tertiary border border-dt-border text-dt-text-secondary hover:bg-white/10 hover:border-dt-border-light transition-colors cursor-pointer",
+              onClick: r.onReload,
+              children: "Reload Page"
+            }
+          )
+        ] }) : /* @__PURE__ */ t("p", { className: "text-[11px] text-dt-text-muted/60 max-w-[360px] text-center", children: "Events will appear here once the app establishes a Convex WebSocket connection." }),
+        /* @__PURE__ */ n("p", { className: "text-[10px] text-dt-text-muted/60 font-mono", children: [
+          "Agent ",
+          r.agentAttached ? "attached" : "attaching",
+          " · Socket",
+          " ",
+          r.socketSeen ? "seen" : "waiting",
+          " · Capture",
+          " ",
+          r.captureLive ? "live" : r.needsReload ? "reload" : "waiting"
+        ] })
+      ] }) : /* @__PURE__ */ n(et, { children: [
+        /* @__PURE__ */ t("p", { children: "No activity yet" }),
+        /* @__PURE__ */ t("p", { className: "text-[11px] text-dt-text-muted/60", children: d !== "all" || c ? "No activity matches your current filters" : "Execute operations or auth flows to see them here" })
+      ] })
+    ] }),
+    I.length > 0 && /* @__PURE__ */ n("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ n("div", { className: "flex-1 overflow-y-auto", children: [
+        X && /* @__PURE__ */ n("div", { className: "text-center text-[10px] text-dt-text-muted/60 py-1 border-b border-dt-border-light/30", children: [
+          "Showing ",
+          I.length,
+          " of ",
+          L
+        ] }),
+        I.map((o, l) => {
+          const h = E?.id === o.id, _ = l === b;
+          if (o.type === "auth") {
+            const W = o.direction === "client" ? "cli" : "srv", dt = o.direction === "client" ? "→" : "←", st = o.details && typeof o.details == "object" && !Array.isArray(o.details) ? Object.keys(o.details).length : null;
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                className: `flex flex-col px-3 py-1.5 border-b border-dt-border-light/50 cursor-pointer transition-colors hover:bg-white/[0.03] ${h ? "bg-white/[0.06]" : ""} ${_ ? "bg-white/[0.03] outline outline-1 outline-dt-info/30 -outline-offset-1" : ""} ${o.status === "error" ? "border-l-2 border-l-dt-error/40" : ""}`,
+                onClick: () => {
+                  f(h ? null : o), N(l);
+                },
+                onKeyDown: (H) => {
+                  (H.key === "Enter" || H.key === " ") && (H.preventDefault(), f(h ? null : o), N(l));
+                },
+                onContextMenu: (H) => {
+                  H.preventDefault(), y(null), $({
+                    x: H.clientX,
+                    y: H.clientY,
+                    items: St(o)
+                  });
+                },
+                onMouseEnter: (H) => {
+                  const qt = H.currentTarget.getBoundingClientRect(), ht = bt(o, qt);
+                  ht && y(ht);
+                },
+                onMouseMove: (H) => {
+                  if (k?.event.id === o.id) {
+                    const qt = H.currentTarget.getBoundingClientRect(), ht = bt(o, qt);
+                    ht && y(
+                      (yt) => yt && yt.event.id === o.id && (yt.x !== ht.x || yt.y !== ht.y) ? ht : yt
+                    );
+                  }
+                },
+                onMouseLeave: () => {
+                  y((H) => H && H.event.id === o.id ? null : H);
+                },
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Connection ${o.messageType} ${o.status}`,
+                "aria-selected": h,
+                "aria-current": _ ? "true" : void 0,
+                children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  /* @__PURE__ */ t("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-[3px] text-[9px] font-bold shrink-0 bg-dt-warning/20 text-dt-warning shadow-[0_1px_2px_rgba(245,158,11,0.35)]", children: "C" }),
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: `w-1.5 h-1.5 rounded-full shrink-0 ${o.status === "success" ? "bg-dt-success" : o.status === "error" ? "bg-dt-error" : "bg-dt-warning animate-pulse"}`,
+                      title: o.status
+                    }
+                  ),
+                  /* @__PURE__ */ n("span", { className: "font-mono text-[12px] text-dt-text-secondary truncate flex-1", children: [
+                    dt,
+                    " ",
+                    o.messageType
+                  ] }),
+                  /* @__PURE__ */ n("div", { className: "flex items-center gap-2 shrink-0 text-[11px] text-dt-text-muted ml-auto", children: [
+                    o.tokenType && /* @__PURE__ */ t("span", { className: "text-dt-text-muted/80 font-mono text-[10px]", children: o.tokenType }),
+                    st !== null && /* @__PURE__ */ n("span", { className: "text-dt-text-muted/70 font-mono text-[10px]", children: [
+                      st,
+                      "f"
+                    ] }),
+                    o.error && /* @__PURE__ */ t("span", { className: "text-dt-error truncate max-w-[180px]", title: o.error, children: o.error }),
+                    /* @__PURE__ */ t("span", { className: "text-dt-text-muted/70 font-mono text-[10px]", children: W }),
+                    /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60 font-mono", children: mt(o.timestamp) })
+                  ] })
+                ] })
+              },
+              o.id
+            );
+          }
+          const g = o, T = ct(g.args), A = T !== void 0, O = g.type === "query" ? e.getSubscription(g.queryId) : null, j = O && O.updateCount > 0, Q = it(g), K = tt(g), Y = ot(g), nt = g.type === "query" ? "Query" : g.type === "mutation" ? "Mutation" : "Action", ut = g.status === "success" ? "succeeded" : g.status === "error" ? "failed" : "pending", xt = Y > 0 && K !== null, $t = `${nt} ${g.udfPath} ${ut}${Q !== null ? ` in ${xt ? `e2e ${D(Q)}` : `net ${D(Q)}`}` : ""}${xt ? ` (${D(K)} net + ${D(Y)} simulated)` : ""}`, Dt = j && g.type === "query";
+          return /* @__PURE__ */ t(
+            "div",
+            {
+              className: `flex flex-col px-3 py-1.5 border-b border-dt-border-light/50 cursor-pointer transition-colors hover:bg-white/[0.03] ${h ? "bg-white/[0.06]" : ""} ${_ ? "bg-white/[0.03] outline outline-1 outline-dt-info/30 -outline-offset-1" : ""} ${g.status === "error" ? "border-l-2 border-l-dt-error/40" : ""} ${Dt ? "border-l-2 border-l-dt-query/30 bg-dt-query/[0.02]" : ""}`,
+              onClick: () => {
+                f(h ? null : o), N(l);
+              },
+              onKeyDown: (W) => {
+                (W.key === "Enter" || W.key === " ") && (W.preventDefault(), f(h ? null : o), N(l));
+              },
+              onContextMenu: (W) => {
+                W.preventDefault(), y(null), $({
+                  x: W.clientX,
+                  y: W.clientY,
+                  items: St(g)
+                });
+              },
+              onMouseEnter: (W) => {
+                const dt = W.currentTarget.getBoundingClientRect(), st = bt(g, dt);
+                st && y(st);
+              },
+              onMouseMove: (W) => {
+                if (k?.event.id === g.id) {
+                  const dt = W.currentTarget.getBoundingClientRect(), st = bt(g, dt);
+                  st && y(
+                    (H) => H && H.event.id === g.id && (H.x !== st.x || H.y !== st.y) ? st : H
+                  );
+                }
+              },
+              onMouseLeave: () => {
+                y((W) => W && W.event.id === g.id ? null : W);
+              },
+              role: "button",
+              tabIndex: 0,
+              "aria-label": $t,
+              "aria-selected": h,
+              "aria-current": _ ? "true" : void 0,
+              children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `inline-flex items-center justify-center w-4 h-4 rounded-[3px] text-[9px] font-bold shrink-0 ${g.type === "query" ? "bg-dt-query/20 text-dt-query shadow-[0_1px_2px_rgba(96,165,250,0.35)]" : g.type === "mutation" ? "bg-dt-mutation/20 text-dt-mutation shadow-[0_1px_2px_rgba(167,139,250,0.35)]" : "bg-dt-action/20 text-dt-action shadow-[0_1px_2px_rgba(52,211,153,0.35)]"}`,
+                    title: g.type,
+                    children: g.type === "query" ? "Q" : g.type === "mutation" ? "M" : "A"
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `w-1.5 h-1.5 rounded-full shrink-0 ${g.status === "success" ? "bg-dt-success" : g.status === "error" ? "bg-dt-error" : "bg-dt-warning animate-pulse"}`,
+                    title: g.status
+                  }
+                ),
+                /* @__PURE__ */ n("span", { className: "flex items-center gap-0 min-w-0 flex-1 overflow-hidden", children: [
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: `font-mono text-[12px] text-dt-text-secondary truncate min-w-0 ${A ? "max-w-[44%]" : ""}`,
+                      children: g.udfPath
+                    }
+                  ),
+                  "args" in g && A && /* @__PURE__ */ n(
+                    "span",
+                    {
+                      className: "font-mono text-[11px] text-dt-text-muted min-w-0 flex-1 truncate max-w-[min(62vw,760px)]",
+                      title: at(T, 460),
+                      children: [
+                        /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60", children: "(" }),
+                        /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: Mt(T, ze) }),
+                        /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60", children: ")" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ n("div", { className: "flex items-center gap-2 shrink-0 text-[11px] text-dt-text-muted ml-auto", children: [
+                  j && /* @__PURE__ */ n("span", { className: "text-dt-info text-[10px]", title: "Subscription update", children: [
+                    "↻",
+                    O.updateCount
+                  ] }),
+                  g.status === "success" && "result" in g && g.result !== void 0 && /* @__PURE__ */ n("span", { className: "text-dt-text-muted/80", title: at(g.result), children: [
+                    "↓",
+                    G(g.result)
+                  ] }),
+                  Q !== null && (!j || Q > 100) && /* @__PURE__ */ n(
+                    "span",
+                    {
+                      className: "font-mono text-dt-text-muted",
+                      title: xt ? `E2E ${D(Q)} = Net ${D(K)} + Sim ${D(Y)}` : `Net ${D(Q)}`,
+                      children: [
+                        j && "Δ",
+                        xt ? `E2E ${D(Q)}` : `Net ${D(Q)}`
+                      ]
+                    }
+                  ),
+                  g.status === "pending" && /* @__PURE__ */ t("span", { className: "font-mono text-dt-warning/90 text-[10px] uppercase", children: "pending" }),
+                  xt && /* @__PURE__ */ n("span", { className: "font-mono text-dt-text-muted/85 text-[10px]", title: "Server/network round-trip", children: [
+                    "Net ",
+                    D(K)
+                  ] }),
+                  Y > 0 && /* @__PURE__ */ n(
+                    "span",
+                    {
+                      className: "font-mono text-dt-warning/90 text-[10px]",
+                      title: "Devtools simulated client delivery delay",
+                      children: [
+                        "Sim +",
+                        D(Y)
+                      ]
+                    }
+                  ),
+                  g.trace && /* @__PURE__ */ n(
+                    "span",
+                    {
+                      className: "font-mono text-dt-info text-[10px]",
+                      title: `Trace: ${g.trace.summary.spanCount} spans`,
+                      children: [
+                        "T",
+                        g.trace.summary.spanCount
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60 font-mono", children: mt(g.timestamp) })
+                ] })
+              ] })
+            },
+            o.id
+          );
+        }),
+        X && /* @__PURE__ */ n("div", { className: "sticky bottom-0 z-[2] px-3 py-2 border-t border-dt-border-light/40 bg-dt-bg-secondary/85 backdrop-blur-sm flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ n("span", { className: "text-[10px] text-dt-text-muted", children: [
+            "Showing ",
+            I.length,
+            " of ",
+            L
+          ] }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: "px-2 py-1 text-[10px] font-semibold rounded border border-dt-border-light text-dt-text-secondary bg-dt-bg-tertiary hover:bg-white/10 hover:border-dt-border transition-colors",
+              onClick: () => v((o) => Math.min(o + ie, L)),
+              children: [
+                "Load ",
+                Math.min(ie, L - I.length),
+                " more"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      E && /* @__PURE__ */ n("div", { className: "w-[min(58vw,620px)] min-w-[420px] border-l border-dt-border overflow-y-auto bg-dt-bg-secondary/50 animate-[dt-slide-in_0.2s_ease-out] shrink-0", children: [
+        /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-3 py-2 border-b border-dt-border-light", children: [
+          /* @__PURE__ */ t("h4", { className: "text-[12px] font-semibold text-dt-text-secondary m-0", children: "Details" }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "p-1 bg-transparent border-none text-dt-text-muted cursor-pointer rounded hover:bg-white/5 hover:text-dt-text-tertiary",
+              onClick: () => f(null),
+              children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: "p-3 flex flex-col gap-3", children: [
+          E.type === "query" && e.getSubscription(E.queryId) && (() => {
+            const o = e.getSubscription(E.queryId);
+            if (o.updateCount > 0) {
+              const h = mt(o.addedAt);
+              return /* @__PURE__ */ n("div", { className: "flex items-center gap-1 flex-wrap bg-dt-info/5 border border-dt-info/20 rounded-md px-2 py-1 text-[10px] font-mono", children: [
+                /* @__PURE__ */ t("span", { className: "text-dt-info font-semibold uppercase tracking-wide", children: "Sub" }),
+                /* @__PURE__ */ n("span", { className: "text-dt-text-secondary", children: [
+                  "↻",
+                  o.updateCount
+                ] }),
+                /* @__PURE__ */ n("span", { className: "text-dt-text-muted/70", children: [
+                  "since ",
+                  pt(o.addedAt)
+                ] }),
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: "ml-auto text-dt-text-muted/60",
+                    title: new Date(o.addedAt).toLocaleString(),
+                    children: h
+                  }
+                )
+              ] });
+            }
+            return null;
+          })(),
+          M && (() => {
+            const o = M.udfPath, l = M.componentPath, h = new Date(M.timestamp), _ = wt(M), g = it(M), T = tt(M), A = ot(M), O = g !== null ? D(g) : null, j = T !== null ? D(T) : null, Q = A > 0 ? D(A) : null, K = ct(M.args), Y = M.status === "success" && "result" in M && M.result !== void 0 ? M.result : void 0;
+            return /* @__PURE__ */ n(et, { children: [
+              /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: `text-[11px] font-bold uppercase tracking-wider ${M.type === "query" ? "text-dt-query" : M.type === "mutation" ? "text-dt-mutation" : "text-dt-action"}`,
+                      children: M.type === "query" ? "Query" : M.type === "mutation" ? "Mutation" : "Action"
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    "span",
+                    {
+                      className: `text-[10px] font-semibold uppercase flex items-center gap-1 ${M.status === "success" ? "text-dt-success" : M.status === "error" ? "text-dt-error" : "text-dt-warning"}`,
+                      children: [
+                        /* @__PURE__ */ t(Tt, { status: M.status }),
+                        M.status?.toUpperCase() ?? "PENDING"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: "text-[10px] text-dt-text-muted ml-auto",
+                      title: h.toLocaleString(),
+                      children: pt(M.timestamp)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t("div", { className: "font-mono text-[12px] text-dt-text truncate", title: o, children: o || "Unknown function" }),
+                /* @__PURE__ */ n("div", { className: "flex flex-wrap gap-1", children: [
+                  _ && /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: _ }),
+                  O && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: [
+                    "E2E ",
+                    O
+                  ] }),
+                  Q && j && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: [
+                    "Net ",
+                    j
+                  ] }),
+                  Q && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-warning/15 border border-dt-warning/20 rounded text-[10px] text-dt-warning font-mono", children: [
+                    "Sim +",
+                    Q
+                  ] })
+                ] }),
+                l && /* @__PURE__ */ t("div", { className: "text-[10px] text-dt-text-muted/60 font-mono truncate", title: l, children: l }),
+                M.type === "query" && M.triggeredBy && /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex items-center gap-1.5 px-2 py-1 bg-dt-mutation/10 border border-dt-mutation/20 rounded text-[10px] text-dt-mutation hover:bg-dt-mutation/20 transition-colors cursor-pointer",
+                    title: "Jump to triggering operation",
+                    onClick: () => e.setFocusedEventId(M.triggeredBy),
+                    children: [
+                      /* @__PURE__ */ n("span", { children: [
+                        "Triggered by ",
+                        Pe(M.triggeredBy)
+                      ] }),
+                      /* @__PURE__ */ t("span", { className: "text-dt-mutation/70", children: "→" })
+                    ]
+                  }
+                )
+              ] }),
+              "args" in M && K !== void 0 && /* @__PURE__ */ t(Et, { data: K, label: "Arguments", maxHeight: 200 }),
+              Y !== void 0 && /* @__PURE__ */ t(Et, { data: Y, label: "Result", maxHeight: 200 }),
+              M.status === "error" && "error" in M && M.error && /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ t("div", { className: "text-[11px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Error" }),
+                /* @__PURE__ */ t("div", { className: "text-[12px] text-dt-error bg-dt-error/10 rounded px-2 py-1.5 font-mono break-words", children: M.error })
+              ] }),
+              M.logLines && M.logLines.length > 0 && /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ t("div", { className: "text-[11px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Console Output" }),
+                /* @__PURE__ */ t("div", { className: "bg-zinc-950/50 rounded border border-dt-border-light p-2 font-mono text-[11px] max-h-[150px] overflow-y-auto", children: M.logLines.map((nt, ut) => /* @__PURE__ */ t("div", { className: "text-dt-text-muted leading-relaxed", children: nt }, ut)) })
+              ] }),
+              M.trace && /* @__PURE__ */ t(Te, { trace: M.trace, maxHeight: 680 })
+            ] });
+          })(),
+          q && /* @__PURE__ */ n(et, { children: [
+            /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t("span", { className: "text-[11px] font-bold uppercase tracking-wider text-dt-warning", children: "Connection" }),
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: `text-[10px] font-semibold uppercase flex items-center gap-1 ${q.status === "success" ? "text-dt-success" : q.status === "error" ? "text-dt-error" : "text-dt-warning"}`,
+                    children: [
+                      /* @__PURE__ */ t(Tt, { status: q.status }),
+                      q.status.toUpperCase()
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: "text-[10px] text-dt-text-muted ml-auto",
+                    title: new Date(q.timestamp).toLocaleString(),
+                    children: pt(q.timestamp)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n("div", { className: "font-mono text-[12px] text-dt-text truncate", children: [
+                q.direction === "client" ? "→" : "←",
+                " ",
+                q.messageType
+              ] }),
+              /* @__PURE__ */ n("div", { className: "flex flex-wrap gap-1", children: [
+                /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: vt(q) }),
+                q.tokenType && /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: q.tokenType })
+              ] })
+            ] }),
+            q.details !== void 0 && /* @__PURE__ */ t(Et, { data: q.details, label: "Details", maxHeight: 220 }),
+            q.error && /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ t("div", { className: "text-[11px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Error" }),
+              /* @__PURE__ */ t("div", { className: "text-[12px] text-dt-error bg-dt-error/10 rounded px-2 py-1.5 font-mono break-words", children: q.error })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    k && (() => {
+      const o = k.event;
+      if (o.type === "auth") {
+        const W = o.details !== void 0 ? at(o.details, 200) : null, dt = o.error && o.error.length > 160 ? `${o.error.slice(0, 157)}…` : o.error;
+        return /* @__PURE__ */ n(
+          "div",
+          {
+            className: "fixed z-[9999999] w-[300px] bg-zinc-900/[0.98] border border-dt-border rounded-lg shadow-2xl p-3 flex flex-col gap-2 pointer-events-none animate-[dt-fade-in_0.15s_ease-out] backdrop-blur-lg",
+            style: { top: k.y, left: k.x },
+            role: "tooltip",
+            children: [
+              /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ t("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-[3px] text-[9px] font-bold shrink-0 bg-dt-warning/20 text-dt-warning", children: "C" }),
+                /* @__PURE__ */ n("span", { className: "font-mono text-[12px] text-dt-text truncate flex-1", children: [
+                  o.direction === "client" ? "→" : "←",
+                  " ",
+                  o.messageType
+                ] }),
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: `text-[9px] font-bold uppercase flex items-center gap-0.5 px-1.5 py-0.5 rounded-full ${o.status === "success" ? "bg-dt-success/15 text-dt-success" : o.status === "error" ? "bg-dt-error/15 text-dt-error" : "bg-dt-warning/15 text-dt-warning"}`,
+                    children: [
+                      /* @__PURE__ */ t(Tt, { status: o.status }),
+                      o.status.toUpperCase()
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ n("div", { className: "flex items-center gap-1 flex-wrap", children: [
+                /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: pt(o.timestamp) }),
+                /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: vt(o) }),
+                o.tokenType && /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: o.tokenType })
+              ] }),
+              W && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Details" }),
+                /* @__PURE__ */ t("pre", { className: "font-mono text-[10px] text-dt-text-muted bg-zinc-950/50 rounded p-1.5 overflow-hidden max-h-[100px] whitespace-pre-wrap break-all m-0", children: /* @__PURE__ */ t(Bt, { json: W }) })
+              ] }),
+              dt && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Error" }),
+                /* @__PURE__ */ t("span", { className: "text-[11px] text-dt-error", title: o.error, children: dt })
+              ] })
+            ]
+          }
+        );
+      }
+      const l = vt(o), h = it(o), _ = tt(o), g = ot(o), T = h !== null ? D(h) : null, A = _ !== null ? D(_) : null, O = g > 0 ? D(g) : null, j = ct(o.args), Q = j !== void 0 ? at(j) : null, K = j !== void 0 ? G(j) : null, Y = j !== void 0 ? at(j) : "", nt = o.status === "success" && o.result !== void 0 ? o.result : void 0, ut = nt ? at(nt) : null, xt = nt ? at(nt) : "", $t = nt ? G(nt) : null, Dt = o.status === "error" && o.error ? o.error.length > 160 ? `${o.error.slice(0, 157)}…` : o.error : null;
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          className: "fixed z-[9999999] w-[300px] bg-zinc-900/[0.98] border border-dt-border rounded-lg shadow-2xl p-3 flex flex-col gap-2 pointer-events-none animate-[dt-fade-in_0.15s_ease-out] backdrop-blur-lg",
+          style: { top: k.y, left: k.x },
+          role: "tooltip",
+          children: [
+            /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: `inline-flex items-center justify-center w-4 h-4 rounded-[3px] text-[9px] font-bold shrink-0 ${o.type === "query" ? "bg-dt-query/20 text-dt-query shadow-[0_1px_2px_rgba(96,165,250,0.35)]" : o.type === "mutation" ? "bg-dt-mutation/20 text-dt-mutation shadow-[0_1px_2px_rgba(167,139,250,0.35)]" : "bg-dt-action/20 text-dt-action shadow-[0_1px_2px_rgba(52,211,153,0.35)]"}`,
+                  children: o.type === "query" ? "Q" : o.type === "mutation" ? "M" : "A"
+                }
+              ),
+              /* @__PURE__ */ t("span", { className: "font-mono text-[12px] text-dt-text truncate flex-1", title: o.udfPath, children: o.udfPath }),
+              /* @__PURE__ */ n(
+                "span",
+                {
+                  className: `text-[9px] font-bold uppercase flex items-center gap-0.5 px-1.5 py-0.5 rounded-full ${o.status === "success" ? "bg-dt-success/15 text-dt-success" : o.status === "error" ? "bg-dt-error/15 text-dt-error" : "bg-dt-warning/15 text-dt-warning"}`,
+                  children: [
+                    /* @__PURE__ */ t(Tt, { status: o.status }),
+                    o.status?.toUpperCase() ?? "PENDING"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n("div", { className: "flex items-center gap-1 flex-wrap", children: [
+              /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: pt(o.timestamp) }),
+              T && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: [
+                "E2E ",
+                T
+              ] }),
+              O && A && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: [
+                "Net ",
+                A
+              ] }),
+              O && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-warning/15 border border-dt-warning/20 rounded text-[10px] text-dt-warning font-mono", children: [
+                "Sim +",
+                O
+              ] }),
+              /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: l }),
+              o.trace && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-info/15 border border-dt-info/20 rounded text-[10px] text-dt-info font-mono", children: [
+                "T",
+                o.trace.summary.spanCount
+              ] }),
+              o.logLines && o.logLines.length > 0 && /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: [
+                "Logs ",
+                o.logLines.length
+              ] })
+            ] }),
+            o.componentPath && /* @__PURE__ */ t("div", { className: "text-[10px] text-dt-text-muted/60 font-mono truncate", title: o.componentPath, children: o.componentPath }),
+            j !== void 0 && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Args" }),
+                K && /* @__PURE__ */ t("span", { className: "text-[9px] text-dt-text-muted/60 font-mono", children: K })
+              ] }),
+              /* @__PURE__ */ t(
+                "pre",
+                {
+                  className: "font-mono text-[10px] text-dt-text-muted bg-zinc-950/50 rounded p-1.5 overflow-hidden max-h-[80px] whitespace-pre-wrap break-all m-0",
+                  title: Q ?? void 0,
+                  children: /* @__PURE__ */ t(Bt, { json: Y })
+                }
+              )
+            ] }),
+            nt !== void 0 && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Result" }),
+                $t && /* @__PURE__ */ t("span", { className: "text-[9px] text-dt-text-muted/60 font-mono", children: $t })
+              ] }),
+              /* @__PURE__ */ t(
+                "pre",
+                {
+                  className: "font-mono text-[10px] text-dt-text-muted bg-zinc-950/50 rounded p-1.5 overflow-hidden max-h-[80px] whitespace-pre-wrap break-all m-0",
+                  title: ut ?? void 0,
+                  children: /* @__PURE__ */ t(Bt, { json: xt })
+                }
+              )
+            ] }),
+            Dt && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+              /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Error" }),
+              /* @__PURE__ */ t("span", { className: "text-[11px] text-dt-error", title: o.error, children: Dt })
+            ] })
+          ]
+        }
+      );
+    })(),
+    S && /* @__PURE__ */ t(
+      Gt,
+      {
+        x: S.x,
+        y: S.y,
+        items: S.items,
+        onClose: () => $(null)
+      }
+    )
+  ] });
+}
+function Bt({ json: e }) {
+  const r = V(() => e.replace(
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
+    (a) => {
+      let s = "cdv-json-value";
+      return /^"/.test(a) ? /:$/.test(a) ? s = "cdv-json-key" : s = "cdv-json-string" : /true|false/.test(a) ? s = "cdv-json-boolean" : /null/.test(a) ? s = "cdv-json-null" : s = "cdv-json-number", `<span class="${s}">${a}</span>`;
+    }
+  ), [e]);
+  return /* @__PURE__ */ t("span", { dangerouslySetInnerHTML: { __html: r } });
+}
+function Tt({ status: e }) {
+  return e === "success" ? /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", className: "text-dt-success", children: /* @__PURE__ */ t("path", { d: "M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" }) }) : e === "error" ? /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", className: "text-dt-error", children: [
+    /* @__PURE__ */ t("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" }),
+    /* @__PURE__ */ t("path", { d: "M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z" })
+  ] }) : /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", className: "text-dt-warning", children: [
+    /* @__PURE__ */ t("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1", fill: "none" }),
+    /* @__PURE__ */ t("circle", { cx: "8", cy: "8", r: "2" })
+  ] });
+}
+const se = {
+  maxStringLength: 96,
+  stringTailLength: 20,
+  maxArrayItems: 4,
+  maxObjectEntries: 4,
+  maxDepth: 3
+};
+function Oe({ eventStore: e }) {
+  const [r, a] = z([]), [s, d] = z(null), [x, c] = z(0), [m, w] = z("all"), [v, E] = z(""), [f, b] = z(null), [N, k] = z(null), y = Ct(null);
+  U(() => {
+    const p = () => {
+      a(e.getActiveSubscriptions());
+    }, u = e.subscribe(p);
+    return p(), u;
+  }, [e]);
+  const S = V(() => {
+    let p = r;
+    return m !== "all" && (p = p.filter((u) => u.status === m)), v && (p = p.filter(
+      (u) => u.udfPath.toLowerCase().includes(v.toLowerCase()) || u.componentPath?.toLowerCase().includes(v.toLowerCase())
+    )), [...p].sort((u, i) => u.lastUpdate !== i.lastUpdate ? i.lastUpdate - u.lastUpdate : u.addedAt !== i.addedAt ? i.addedAt - u.addedAt : i.queryId - u.queryId);
+  }, [r, m, v]);
+  U(() => {
+    const p = (u) => {
+      if (Pt()) {
+        if ((u.metaKey || u.ctrlKey) && u.key === "k") {
+          u.preventDefault(), y.current?.focus();
+          return;
+        }
+        if (u.key === "Escape") {
+          u.preventDefault(), s !== null ? d(null) : (m !== "all" || v) && (w("all"), E(""));
+          return;
+        }
+        if (pe() !== y.current && S.length !== 0) {
+          if (u.key === "ArrowDown")
+            u.preventDefault(), c((i) => Math.min(i + 1, S.length - 1));
+          else if (u.key === "ArrowUp")
+            u.preventDefault(), c((i) => Math.max(i - 1, 0));
+          else if (u.key === "Enter" || u.key === " ") {
+            u.preventDefault();
+            const i = S[x];
+            i && d(s === i.queryId ? null : i.queryId);
+          }
+        }
+      }
+    };
+    return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
+  }, [S, x, s, m, v]), U(() => {
+    c(0);
+  }, [m, v]);
+  const $ = J((p) => {
+    F(p);
+  }, []), P = J((p, u) => {
+    if (typeof window > "u") return null;
+    const i = 8, C = 300, I = window.innerWidth, L = window.innerHeight, X = Math.min(260, L - i * 2);
+    let B = u.right + i;
+    B + C > I - i && (B = u.left - C - i), B < i && (B = Math.max(i, I - C - i));
+    let rt = u.top + u.height / 2 - X / 2;
+    return rt < i && (rt = i), rt + X > L - i && (rt = Math.max(i, L - i - X)), { subscription: p, x: B, y: rt };
+  }, []), M = J((p) => {
+    if (p == null) return "0";
+    const u = JSON.stringify(p), i = new Blob([u]).size;
+    return i < 1024 ? `${i}B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)}KB` : `${(i / (1024 * 1024)).toFixed(1)}MB`;
+  }, []), q = J(
+    (p) => {
+      const u = ct(p.args), i = u != null, C = p.currentValue !== void 0, I = [
+        { label: "Copy Function Path", action: () => F(p.udfPath), shortcut: "⌘C" }
+      ];
+      return i && I.push({
+        label: "Copy Arguments",
+        action: () => F(JSON.stringify(u, null, 2))
+      }), C && I.push({
+        label: "Copy Current Value",
+        action: () => F(JSON.stringify(p.currentValue, null, 2))
+      }), I.push({
+        label: "Filter by Function",
+        action: () => E(p.udfPath),
+        separator: !0
+      }), I.push({
+        label: "Copy Query ID",
+        action: () => F(String(p.queryId))
+      }), I;
+    },
+    []
+  ), R = (p) => {
+    const u = Math.floor((Date.now() - p) / 1e3);
+    if (u < 60) return `${u}s ago`;
+    const i = Math.floor(u / 60);
+    return i < 60 ? `${i}m ago` : `${Math.floor(i / 60)}h ago`;
+  };
+  return /* @__PURE__ */ n("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-dt-border-light", children: [
+      /* @__PURE__ */ n("div", { className: "flex gap-[3px] bg-zinc-900/50 p-[3px] rounded-md border border-zinc-700/30", children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `px-2 py-1 text-[11px] font-mono font-bold uppercase tracking-wide bg-transparent border-none rounded cursor-pointer transition-all hover:bg-white/5 hover:text-dt-text-tertiary ${m === "all" ? "bg-zinc-500/25 text-dt-text-tertiary shadow-[0_0_0_1px_rgba(161,161,170,0.4)]" : "text-dt-text-muted"}`,
+            onClick: () => w("all"),
+            "aria-label": "Show all subscriptions",
+            "aria-pressed": m === "all",
+            children: "All"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `px-2 py-1 text-[11px] font-mono font-bold uppercase tracking-wide bg-transparent border-none rounded cursor-pointer transition-all ${m === "active" ? "bg-dt-query/25 text-dt-query shadow-[0_0_0_1px_rgba(96,165,250,0.5)]" : "text-dt-text-muted hover:bg-dt-query/15 hover:text-dt-query"}`,
+            onClick: () => w("active"),
+            "aria-label": "Show active subscriptions",
+            "aria-pressed": m === "active",
+            children: "Active"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `px-2 py-1 text-[11px] font-mono font-bold uppercase tracking-wide bg-transparent border-none rounded cursor-pointer transition-all ${m === "error" ? "bg-dt-error/25 text-dt-error shadow-[0_0_0_1px_rgba(239,68,68,0.5)]" : "text-dt-text-muted hover:bg-dt-error/15 hover:text-dt-error"}`,
+            onClick: () => w("error"),
+            "aria-label": "Show error subscriptions",
+            "aria-pressed": m === "error",
+            children: "Errors"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(
+        Xt,
+        {
+          ref: y,
+          value: v,
+          onValueChange: E,
+          onClear: () => E(""),
+          placeholder: "Search subscriptions... (Cmd/Ctrl+K)",
+          className: "stretch"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex-1 overflow-y-auto", children: [
+      S.length === 0 && /* @__PURE__ */ n("div", { className: "flex flex-col items-center justify-center py-12 text-dt-text-muted gap-2", children: [
+        /* @__PURE__ */ t("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "1.5" }) }),
+        /* @__PURE__ */ t("p", { children: r.length === 0 ? "No active subscriptions" : m !== "all" || v ? "No subscriptions match your filters" : "No active subscriptions" }),
+        m !== "all" || v ? /* @__PURE__ */ t("p", { className: "text-[11px] text-dt-text-muted/60", children: "Try adjusting your filters or search" }) : null
+      ] }),
+      S.map((p, u) => {
+        const i = s === p.queryId, C = u === x, I = p.status === "error" ? "error" : "success", L = ct(p.args), X = L != null, B = JSON.stringify(L ?? null, null, 2), rt = `Subscription ${p.queryId} ${p.udfPath} ${p.status}${X ? ` with args ${Mt(L, se)}` : ""}`;
+        return /* @__PURE__ */ n(
+          "div",
+          {
+            className: `border-b border-dt-border-light/50 transition-colors ${p.status === "error" ? "border-l-2 border-l-dt-error/40" : ""} ${i ? "bg-white/[0.03]" : ""} ${C ? "bg-white/[0.03] outline outline-1 outline-dt-info/30 -outline-offset-1" : ""}`,
+            children: [
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-white/[0.03]",
+                  onClick: () => {
+                    d(i ? null : p.queryId), c(u);
+                  },
+                  onKeyDown: (G) => {
+                    (G.key === "Enter" || G.key === " ") && (G.preventDefault(), d(i ? null : p.queryId), c(u));
+                  },
+                  onContextMenu: (G) => {
+                    G.preventDefault(), b(null), k({
+                      x: G.clientX,
+                      y: G.clientY,
+                      items: q(p)
+                    });
+                  },
+                  onMouseEnter: (G) => {
+                    const D = G.currentTarget.getBoundingClientRect(), tt = P(p, D);
+                    tt && b(tt);
+                  },
+                  onMouseMove: (G) => {
+                    if (f?.subscription.queryId === p.queryId) {
+                      const D = G.currentTarget.getBoundingClientRect(), tt = P(p, D);
+                      tt && b(
+                        (ot) => ot && ot.subscription.queryId === p.queryId && (ot.x !== tt.x || ot.y !== tt.y) ? tt : ot
+                      );
+                    }
+                  },
+                  onMouseLeave: () => {
+                    f?.subscription.queryId === p.queryId && b(null);
+                  },
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": rt,
+                  "aria-expanded": i,
+                  "aria-current": C ? "true" : void 0,
+                  children: [
+                    /* @__PURE__ */ n("span", { className: "text-[10px] font-mono text-dt-text-muted font-semibold shrink-0", children: [
+                      "Q",
+                      p.queryId
+                    ] }),
+                    /* @__PURE__ */ t("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${I === "error" ? "bg-dt-error" : "bg-dt-success"}` }),
+                    /* @__PURE__ */ n("span", { className: "flex items-center gap-0 min-w-0 flex-1 overflow-hidden", children: [
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          className: `font-mono text-[12px] text-dt-text-secondary truncate min-w-0 ${X ? "max-w-[44%]" : ""}`,
+                          children: p.udfPath
+                        }
+                      ),
+                      X && /* @__PURE__ */ n(
+                        "span",
+                        {
+                          className: "font-mono text-[11px] text-dt-text-muted min-w-0 flex-1 truncate max-w-[min(58vw,680px)]",
+                          title: at(L, 360),
+                          children: [
+                            /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60", children: "(" }),
+                            /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: Mt(L, se) }),
+                            /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60", children: ")" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ n("div", { className: "flex items-center gap-2 shrink-0 text-[11px] text-dt-text-muted ml-auto", children: [
+                      /* @__PURE__ */ n("span", { className: "text-dt-info font-mono", children: [
+                        "↻",
+                        p.updateCount
+                      ] }),
+                      /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60 font-mono", children: R(p.lastUpdate) }),
+                      /* @__PURE__ */ t("span", { className: "text-[10px] text-dt-text-muted/40", children: i ? "▼" : "▶" })
+                    ] })
+                  ]
+                }
+              ),
+              i && /* @__PURE__ */ n("div", { className: "px-3 py-2 bg-dt-bg-secondary/30 border-t border-dt-border-light/30 flex flex-col gap-2 animate-[dt-fade-in_0.15s_ease-out]", children: [
+                /* @__PURE__ */ n("div", { className: "flex items-center gap-1 flex-wrap text-[10px] font-mono", children: [
+                  /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-dt-text-muted", children: [
+                    "Started ",
+                    new Date(p.addedAt).toLocaleTimeString()
+                  ] }),
+                  p.componentPath && /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-dt-text-muted truncate max-w-[200px]",
+                      title: p.componentPath,
+                      children: p.componentPath
+                    }
+                  )
+                ] }),
+                p.status === "error" && p.error && /* @__PURE__ */ t("div", { className: "text-dt-error font-mono text-[11px] bg-dt-error/10 rounded px-2 py-1 break-words", children: p.error }),
+                /* @__PURE__ */ t(
+                  Et,
+                  {
+                    data: L ?? null,
+                    label: "Args",
+                    onCopy: () => $(B ?? "null"),
+                    maxHeight: 200
+                  }
+                ),
+                p.currentValue !== void 0 && p.previousValue !== void 0 && /* @__PURE__ */ t(je, { previous: p.previousValue, current: p.currentValue }),
+                p.currentValue !== void 0 && /* @__PURE__ */ t(
+                  Et,
+                  {
+                    data: p.currentValue,
+                    label: "Current Value",
+                    onCopy: () => $(JSON.stringify(p.currentValue, null, 2)),
+                    maxHeight: 300
+                  }
+                )
+              ] })
+            ]
+          },
+          p.queryId
+        );
+      })
+    ] }),
+    f && (() => {
+      const p = f.subscription, u = ct(p.args), i = u !== void 0 ? at(u) : null, C = u !== void 0 ? M(u) : null, I = u !== void 0 ? at(u) : "", L = p.currentValue, X = L !== void 0 ? at(L) : null, B = L !== void 0 ? at(L) : "", rt = L !== void 0 ? M(L) : null, G = p.status === "error" && p.error ? p.error.length > 160 ? `${p.error.slice(0, 157)}…` : p.error : null;
+      return /* @__PURE__ */ n("div", { className: "fixed z-[9999999] w-[300px] bg-zinc-900/[0.98] border border-dt-border rounded-lg shadow-2xl p-3 flex flex-col gap-2 pointer-events-none animate-[dt-fade-in_0.15s_ease-out] backdrop-blur-lg", style: { top: f.y, left: f.x }, role: "tooltip", children: [
+        /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ t("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-[3px] bg-dt-query/20 text-dt-query text-[9px] font-bold shrink-0 shadow-[0_1px_2px_rgba(96,165,250,0.35)]", children: "Q" }),
+          /* @__PURE__ */ t("span", { className: "font-mono text-[12px] text-dt-text truncate flex-1", title: p.udfPath, children: p.udfPath }),
+          /* @__PURE__ */ n("span", { className: `text-[9px] font-bold uppercase flex items-center gap-0.5 px-1.5 py-0.5 rounded-full ${p.status === "error" ? "bg-dt-error/15 text-dt-error" : "bg-dt-success/15 text-dt-success"}`, children: [
+            p.status === "error" ? "❌" : "✓",
+            p.status.toUpperCase()
+          ] })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "flex items-center gap-1 flex-wrap", children: [
+          /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: [
+            "Q",
+            p.queryId
+          ] }),
+          /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: [
+            "↻ ",
+            p.updateCount,
+            " updates"
+          ] }),
+          /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary rounded text-[10px] text-dt-text-muted font-mono", children: R(p.lastUpdate) })
+        ] }),
+        p.componentPath && /* @__PURE__ */ t("div", { className: "text-[10px] text-dt-text-muted/60 font-mono truncate", title: p.componentPath, children: p.componentPath }),
+        u !== void 0 && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Args" }),
+            C && /* @__PURE__ */ t("span", { className: "text-[9px] text-dt-text-muted/60 font-mono", children: C })
+          ] }),
+          /* @__PURE__ */ t("pre", { className: "font-mono text-[10px] text-dt-text-muted bg-zinc-950/50 rounded p-1.5 overflow-hidden max-h-[80px] whitespace-pre-wrap break-all m-0", title: i ?? void 0, children: I })
+        ] }),
+        L !== void 0 && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Current Value" }),
+            rt && /* @__PURE__ */ t("span", { className: "text-[9px] text-dt-text-muted/60 font-mono", children: rt })
+          ] }),
+          /* @__PURE__ */ t("pre", { className: "font-mono text-[10px] text-dt-text-muted bg-zinc-950/50 rounded p-1.5 overflow-hidden max-h-[80px] whitespace-pre-wrap break-all m-0", title: X ?? void 0, children: B })
+        ] }),
+        G && /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ t("span", { className: "text-[10px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Error" }),
+          /* @__PURE__ */ t("span", { className: "text-[11px] text-dt-error", title: p.error, children: G })
+        ] })
+      ] });
+    })(),
+    N && /* @__PURE__ */ t(
+      Gt,
+      {
+        x: N.x,
+        y: N.y,
+        items: N.items,
+        onClose: () => k(null)
+      }
+    )
+  ] });
+}
+function je({ previous: e, current: r }) {
+  const [a, s] = z(!0), d = V(() => Qt(e, r), [e, r]);
+  return d.length === 0 ? null : /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        className: "flex items-center gap-1 bg-transparent border-none text-dt-text-tertiary cursor-pointer text-[11px] font-semibold uppercase tracking-wider p-0 hover:text-dt-text-secondary transition-colors",
+        onClick: () => s(!a),
+        children: [
+          /* @__PURE__ */ t("span", { className: `text-[10px] transition-transform ${a ? "rotate-90" : ""}`, children: "▶" }),
+          /* @__PURE__ */ n("span", { children: [
+            "Changes (",
+            d.length,
+            ")"
+          ] })
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ t("div", { className: "bg-zinc-950/50 rounded border border-dt-border-light p-2 font-mono text-[11px] max-h-[200px] overflow-y-auto", children: d.map((x, c) => /* @__PURE__ */ n("div", { className: `py-px ${x.type === "added" ? "text-dt-success bg-dt-success/5" : x.type === "removed" ? "text-dt-error bg-dt-error/5" : "text-dt-warning bg-dt-warning/5"}`, children: [
+      /* @__PURE__ */ t("span", { className: "select-none opacity-60 mr-1", children: x.type === "added" ? "+" : x.type === "removed" ? "-" : "~" }),
+      /* @__PURE__ */ n("span", { className: "text-dt-text-muted", children: [
+        x.path,
+        ":"
+      ] }),
+      " ",
+      x.type === "changed" ? /* @__PURE__ */ n(et, { children: [
+        /* @__PURE__ */ t("span", { className: "text-dt-error line-through opacity-70", children: x.oldVal }),
+        " → ",
+        /* @__PURE__ */ t("span", { className: "text-dt-success", children: x.newVal })
+      ] }) : /* @__PURE__ */ t("span", { children: x.value })
+    ] }, c)) })
+  ] });
+}
+function Qt(e, r, a = "$") {
+  const s = [], d = (x) => {
+    const c = JSON.stringify(x);
+    return c && c.length > 80 ? c.slice(0, 77) + "…" : c;
+  };
+  if (e === r) return s;
+  if (e === null || r === null || typeof e != typeof r || typeof e != "object" || typeof r != "object")
+    return s.push({ type: "changed", path: a, oldVal: d(e), newVal: d(r) }), s;
+  if (Array.isArray(e) && Array.isArray(r)) {
+    const x = Math.max(e.length, r.length);
+    for (let c = 0; c < x && s.length < 50; c++)
+      c >= e.length ? s.push({ type: "added", path: `${a}[${c}]`, value: d(r[c]) }) : c >= r.length ? s.push({ type: "removed", path: `${a}[${c}]`, value: d(e[c]) }) : s.push(...Qt(e[c], r[c], `${a}[${c}]`));
+    return s;
+  }
+  if (!Array.isArray(e) && !Array.isArray(r)) {
+    const x = e, c = r, m = /* @__PURE__ */ new Set([...Object.keys(x), ...Object.keys(c)]);
+    for (const w of m) {
+      if (s.length >= 50) break;
+      w in x ? w in c ? s.push(...Qt(x[w], c[w], `${a}.${w}`)) : s.push({ type: "removed", path: `${a}.${w}`, value: d(x[w]) }) : s.push({ type: "added", path: `${a}.${w}`, value: d(c[w]) });
+    }
+  }
+  return s;
+}
+function Fe({ eventStore: e, onNavigate: r }) {
+  const [a, s] = z(null), [d, x] = z([]);
+  U(() => {
+    const y = () => {
+      s(e.getPerformanceMetrics()), x(e.getAllEvents());
+    }, S = e.subscribe(y);
+    return y(), S;
+  }, [e]);
+  const c = V(() => {
+    const y = (p) => {
+      const u = typeof p == "number" ? p : typeof p == "string" ? Number(p) : Number.NaN;
+      return !Number.isFinite(u) || u < 0 ? null : u;
+    }, S = Date.now(), $ = 6e4, P = 60, M = $ / P, q = d.flatMap((p) => {
+      if (p?.type !== "query" && p?.type !== "mutation" && p?.type !== "action")
+        return [];
+      const u = typeof p.timestamp == "number" && Number.isFinite(p.timestamp) ? p.timestamp : null, i = y(p.endToEndDurationMs ?? p.duration);
+      return u === null || i === null ? [] : [{ type: p.type, timestamp: u, duration: i }];
+    }), R = (p) => {
+      const u = new Array(P).fill(0), i = new Array(P).fill(0);
+      for (const C of q) {
+        if (p && C.type !== p) continue;
+        const I = S - C.timestamp;
+        if (I > $ || I < 0) continue;
+        const L = Math.min(P - 1, Math.floor(($ - I) / M));
+        L < 0 || L >= P || (u[L] += C.duration, i[L]++);
+      }
+      return u.map((C, I) => i[I] > 0 ? C / i[I] : 0);
+    };
+    return {
+      all: R(),
+      query: R("query"),
+      mutation: R("mutation"),
+      action: R("action")
+    };
+  }, [d]), m = J((y) => {
+    e.setFocusedEventId(y), r?.("activity");
+  }, [e, r]);
+  if (!a)
+    return /* @__PURE__ */ t("div", { className: "flex flex-col h-full overflow-hidden p-3 gap-3", children: "Loading..." });
+  const w = a.totalQueries + a.totalMutations + a.totalActions > 0, v = d.some(
+    (y) => (y?.type === "query" || y?.type === "mutation" || y?.type === "action") && typeof y?.simulatedDelayMs == "number" && y.simulatedDelayMs > 0
+  ), E = a.totalQueries + a.totalMutations + a.totalActions, f = E > 0 ? a.totalQueries / E * 100 : 0, b = E > 0 ? a.totalMutations / E * 100 : 0, N = E > 0 ? a.totalActions / E * 100 : 0, k = Math.max(a.slowestOperations[0]?.duration ?? 0, 1);
+  return /* @__PURE__ */ t("div", { className: "flex flex-col h-full overflow-hidden", children: /* @__PURE__ */ n("div", { className: "flex-1 min-h-0 overflow-y-auto p-3 flex flex-col gap-3", children: [
+    !w && /* @__PURE__ */ n("div", { className: "flex flex-col items-center justify-center py-12 text-dt-text-muted gap-2", children: [
+      /* @__PURE__ */ t("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ t("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ t("p", { children: "No performance data yet" })
+    ] }),
+    w && /* @__PURE__ */ n(et, { children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-1 text-[11px] font-mono flex-wrap px-1", children: [
+        /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "Total:" }),
+        /* @__PURE__ */ t("span", { className: "font-semibold text-dt-text-secondary", children: E }),
+        /* @__PURE__ */ t("span", { className: "text-dt-border mx-0.5", children: "|" }),
+        /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "Q:" }),
+        /* @__PURE__ */ t("span", { className: "font-semibold text-dt-query", children: a.totalQueries }),
+        /* @__PURE__ */ n("span", { className: "text-dt-text-muted/60 text-[10px]", children: [
+          "(",
+          f.toFixed(0),
+          "%)"
+        ] }),
+        /* @__PURE__ */ t("span", { className: "text-dt-border mx-0.5", children: "|" }),
+        /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "M:" }),
+        /* @__PURE__ */ t("span", { className: "font-semibold text-dt-mutation", children: a.totalMutations }),
+        /* @__PURE__ */ n("span", { className: "text-dt-text-muted/60 text-[10px]", children: [
+          "(",
+          b.toFixed(0),
+          "%)"
+        ] }),
+        /* @__PURE__ */ t("span", { className: "text-dt-border mx-0.5", children: "|" }),
+        /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "A:" }),
+        /* @__PURE__ */ t("span", { className: "font-semibold text-dt-action", children: a.totalActions }),
+        /* @__PURE__ */ n("span", { className: "text-dt-text-muted/60 text-[10px]", children: [
+          "(",
+          N.toFixed(0),
+          "%)"
+        ] })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ n("div", { className: "text-[11px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: [
+          "Latency (60s window)",
+          v && /* @__PURE__ */ t("span", { className: "ml-2 text-[10px] normal-case font-normal text-dt-warning/90", children: "includes simulated delay" })
+        ] }),
+        /* @__PURE__ */ t(_t, { label: "All", data: c.all, color: "#e4e4e7" }),
+        /* @__PURE__ */ t(_t, { label: "Query", data: c.query, color: "#60a5fa" }),
+        /* @__PURE__ */ t(_t, { label: "Mutation", data: c.mutation, color: "#a78bfa" }),
+        /* @__PURE__ */ t(_t, { label: "Action", data: c.action, color: "#34d399" })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "flex flex-col border border-dt-border-light rounded-lg overflow-hidden", children: [
+        /* @__PURE__ */ n("div", { className: "grid grid-cols-6 gap-0 px-2 py-1.5 bg-dt-bg-tertiary/50 text-[10px] font-semibold text-dt-text-muted uppercase tracking-wider", children: [
+          /* @__PURE__ */ t("span", { children: "Type" }),
+          /* @__PURE__ */ t("span", { children: "Avg" }),
+          /* @__PURE__ */ t("span", { children: "P50" }),
+          /* @__PURE__ */ t("span", { children: "P90" }),
+          /* @__PURE__ */ t("span", { children: "P95" }),
+          /* @__PURE__ */ t("span", { children: "P99" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "grid grid-cols-6 gap-0 px-2 py-1.5 border-t border-dt-border-light/50 text-[11px] font-mono text-dt-text-secondary", children: [
+          /* @__PURE__ */ t("span", { className: "text-dt-query font-bold", children: "Q" }),
+          /* @__PURE__ */ t("span", { children: Z(a.avgQueryDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p50QueryDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p90QueryDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p95QueryDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p99QueryDuration) })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "grid grid-cols-6 gap-0 px-2 py-1.5 border-t border-dt-border-light/50 text-[11px] font-mono text-dt-text-secondary", children: [
+          /* @__PURE__ */ t("span", { className: "text-dt-mutation font-bold", children: "M" }),
+          /* @__PURE__ */ t("span", { children: Z(a.avgMutationDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p50MutationDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p90MutationDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p95MutationDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p99MutationDuration) })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "grid grid-cols-6 gap-0 px-2 py-1.5 border-t border-dt-border-light/50 text-[11px] font-mono text-dt-text-secondary", children: [
+          /* @__PURE__ */ t("span", { className: "text-dt-action font-bold", children: "A" }),
+          /* @__PURE__ */ t("span", { children: Z(a.avgActionDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p50ActionDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p90ActionDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p95ActionDuration) }),
+          /* @__PURE__ */ t("span", { children: Z(a.p99ActionDuration) })
+        ] })
+      ] }),
+      a.slowestOperations.length > 0 && /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ t("div", { className: "text-[11px] font-semibold text-dt-text-tertiary uppercase tracking-wider", children: "Slowest Operations" }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: a.slowestOperations.map((y, S) => /* @__PURE__ */ n(
+          "button",
+          {
+            className: "flex items-center gap-2 text-[11px] py-0.5 px-1 bg-transparent border-none text-left cursor-pointer rounded hover:bg-white/[0.04] focus:outline-none focus:ring-1 focus:ring-dt-info/40",
+            onClick: () => m(y.eventId),
+            title: "Open operation in Activity",
+            type: "button",
+            children: [
+              /* @__PURE__ */ t("span", { className: "text-dt-text-muted/40 w-4 text-right font-mono text-[10px]", children: S + 1 }),
+              /* @__PURE__ */ t("span", { className: `inline-flex items-center justify-center w-4 h-4 rounded text-[9px] font-bold ${y.type === "query" ? "text-dt-query" : y.type === "mutation" ? "text-dt-mutation" : "text-dt-action"}`, children: y.type[0].toUpperCase() }),
+              /* @__PURE__ */ t("span", { className: "font-mono text-dt-text-secondary truncate flex-1", children: y.udfPath }),
+              /* @__PURE__ */ t("span", { className: "font-mono text-dt-text-muted shrink-0", children: Z(y.duration) }),
+              /* @__PURE__ */ t("div", { className: "w-16 h-1.5 bg-dt-bg-tertiary rounded-full overflow-hidden shrink-0", children: /* @__PURE__ */ t(
+                "div",
+                {
+                  className: `h-full rounded-full ${y.type === "query" ? "bg-dt-query" : y.type === "mutation" ? "bg-dt-mutation" : "bg-dt-action"}`,
+                  style: { width: `${Math.min(100, Math.max(2, y.duration / k * 100))}%` }
+                }
+              ) })
+            ]
+          },
+          y.eventId
+        )) })
+      ] })
+    ] })
+  ] }) });
+}
+function _t({ label: e, data: r, color: a }) {
+  const s = r.map(
+    (c) => typeof c == "number" && Number.isFinite(c) && c > 0 ? c : 0
+  ), d = Math.max(...s, 1), x = s[s.length - 1] || 0;
+  return /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ t("span", { className: "text-[10px] font-mono text-dt-text-muted w-14 shrink-0", children: e }),
+    /* @__PURE__ */ t("div", { className: "flex-1 h-5 flex items-end gap-px", children: s.map((c, m) => /* @__PURE__ */ t(
+      "div",
+      {
+        className: "flex-1 rounded-t-sm min-h-px",
+        style: {
+          height: `${Math.max(1, c / d * 100)}%`,
+          backgroundColor: c > 0 ? a : "rgba(63,63,70,0.3)",
+          opacity: c > 0 ? 0.5 + m / s.length * 0.5 : 0.2
+        }
+      },
+      m
+    )) }),
+    /* @__PURE__ */ t("span", { className: "text-[10px] font-mono text-dt-text-muted w-14 text-right shrink-0", children: x > 0 ? Z(x) : "—" })
+  ] });
+}
+function Z(e) {
+  return !Number.isFinite(e) || e < 0 ? "—" : e < 1e3 ? `${e.toFixed(3)}ms` : `${(e / 1e3).toFixed(3)}s`;
+}
+function Re(e) {
+  return e.type === "query" || e.type === "mutation" || e.type === "action";
+}
+function le(e) {
+  return e.type === "query" ? `Q${e.queryId}` : e.type === "mutation" ? `M${e.requestId}` : `A${e.requestId}`;
+}
+function Be({ eventStore: e, onNavigate: r }) {
+  const [a, s] = z([]), [d, x] = z(/* @__PURE__ */ new Map()), [c, m] = z(!0), [w, v] = z("all"), [E, f] = z(""), [b, N] = z(null), [k, y] = z(null), S = Ct(null), $ = Ct(null), P = J(
+    (i) => {
+      i && (e.setFocusedEventId(i), r?.("activity"));
+    },
+    [e, r]
+  );
+  U(() => {
+    const i = () => {
+      const I = e.getAllEvents(), L = /* @__PURE__ */ new Map(), X = [];
+      for (const B of I) {
+        if (B.type === "log") {
+          X.push(B);
+          continue;
+        }
+        Re(B) && L.set(B.id, B);
+      }
+      s(X), x(L);
+    }, C = e.subscribe(i);
+    return i(), C;
+  }, [e]);
+  const M = V(() => {
+    const i = E.trim().toLowerCase().split(/\s+/).filter((C) => C.length > 0);
+    return a.filter((C) => {
+      if (w !== "all" && C.level !== w) return !1;
+      if (i.length === 0) return !0;
+      const I = C.relatedEventId ? d.get(C.relatedEventId) : void 0, L = [
+        C.message,
+        C.level,
+        C.relatedEventId ?? "",
+        I?.udfPath ?? "",
+        I?.type ?? "",
+        I ? le(I) : ""
+      ].join(`
+`).toLowerCase();
+      return i.every((X) => L.includes(X));
+    });
+  }, [a, w, E, d]), q = J((i) => {
+    F(i.message), y(i.id), setTimeout(() => y(null), 300);
+  }, []), R = J((i) => `[${new Date(i.timestamp).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3
+  })}] [${i.level.toUpperCase()}] ${i.message}`, []), p = J(() => {
+    const i = M.map(R).join(`
+`);
+    F(i);
+  }, [M, R]);
+  U(() => {
+    const i = (C) => {
+      if (Pt()) {
+        if ((C.metaKey || C.ctrlKey) && C.key === "k") {
+          C.preventDefault(), S.current?.focus();
+          return;
+        }
+        C.key === "Escape" && (w !== "all" || E) && (C.preventDefault(), v("all"), f(""));
+      }
+    };
+    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
+  }, [w, E]), U(() => {
+    c && $.current && $.current.scrollIntoView({ behavior: "smooth" });
+  }, [M.length, c]);
+  const u = J(
+    (i) => {
+      const C = i.relatedEventId ? d.get(i.relatedEventId) : void 0, I = new Date(i.timestamp).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        fractionalSecondDigits: 3
+      }), L = [
+        { label: "Copy Message", action: () => F(i.message), shortcut: "⌘C" },
+        { label: "Copy Timestamp", action: () => F(I) }
+      ];
+      return L.push({
+        label: `Filter by Level: ${i.level}`,
+        action: () => v(i.level),
+        separator: !0
+      }), i.relatedEventId && L.push({
+        label: "Copy Related Event ID",
+        action: () => F(i.relatedEventId)
+      }), C && (L.push({
+        label: "Copy Related Function Path",
+        action: () => F(C.udfPath)
+      }), L.push({
+        label: "Filter by Related Function",
+        action: () => f(C.udfPath)
+      })), i.relatedEventId && r && L.push({
+        label: "Go to Related Event",
+        action: () => P(i.relatedEventId)
+      }), L.push({
+        label: "Copy as JSON",
+        action: () => F(JSON.stringify(i, null, 2)),
+        separator: !0
+      }), L;
+    },
+    [P, r, d]
+  );
+  return /* @__PURE__ */ n("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-dt-border-light", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-0.5", children: ["all", "log", "info", "warn", "error"].map((i) => /* @__PURE__ */ t(
+        "button",
+        {
+          className: `px-2 py-1 text-[11px] bg-transparent border rounded-md cursor-pointer transition-all ${w === i ? i === "info" ? "bg-dt-info/20 text-dt-info border-dt-info/30 font-medium" : i === "warn" ? "bg-dt-warning/20 text-dt-warning border-dt-warning/30 font-medium" : i === "error" ? "bg-dt-error/20 text-dt-error border-dt-error/30 font-medium" : "bg-white/10 text-dt-text-secondary border-dt-border-light font-medium" : i === "info" ? "border-transparent text-dt-text-muted hover:bg-dt-info/15 hover:text-dt-info" : i === "warn" ? "border-transparent text-dt-text-muted hover:bg-dt-warning/15 hover:text-dt-warning" : i === "error" ? "border-transparent text-dt-text-muted hover:bg-dt-error/15 hover:text-dt-error" : "border-transparent text-dt-text-muted hover:bg-white/5 hover:text-dt-text-tertiary"}`,
+          onClick: () => v(i),
+          children: i.charAt(0).toUpperCase() + i.slice(1)
+        },
+        i
+      )) }),
+      /* @__PURE__ */ t(
+        Xt,
+        {
+          ref: S,
+          value: E,
+          onValueChange: f,
+          onClear: () => f(""),
+          placeholder: "Search msg/path/id... (Cmd/Ctrl+K)",
+          className: "stretch"
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2 ml-auto", children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            className: "px-2 py-1 text-[11px] bg-transparent border border-dt-border-light rounded-md cursor-pointer text-dt-text-muted hover:text-dt-text-secondary hover:bg-white/5 transition-colors disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-dt-text-muted",
+            onClick: p,
+            disabled: M.length === 0,
+            title: "Copy all visible logs as plain text",
+            children: [
+              "Copy all (",
+              M.length,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ n("label", { className: "flex items-center gap-1.5 text-[11px] text-dt-text-muted cursor-pointer select-none", children: [
+          /* @__PURE__ */ t("input", { type: "checkbox", checked: c, onChange: (i) => m(i.target.checked) }),
+          "Auto-scroll"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex-1 overflow-y-auto p-1", children: [
+      M.length === 0 && /* @__PURE__ */ n("div", { className: "flex flex-col items-center justify-center py-12 text-dt-text-muted gap-2", children: [
+        /* @__PURE__ */ t("p", { children: "No logs yet" }),
+        /* @__PURE__ */ t("p", { className: "text-[11px] text-dt-text-muted/60", children: "Console output from functions will appear here" })
+      ] }),
+      M.map((i) => {
+        const C = i.relatedEventId ? d.get(i.relatedEventId) : void 0, I = C ? le(C) : null;
+        return /* @__PURE__ */ n(
+          "div",
+          {
+            className: `flex items-start gap-2 px-2 py-1 text-[11px] font-mono border-b border-dt-border-light/30 cursor-pointer select-none transition-colors duration-300 ${k === i.id ? "bg-white/10" : `hover:bg-white/[0.02] ${i.level === "warn" ? "bg-dt-warning/5" : i.level === "error" ? "bg-dt-error/5" : ""}`}`,
+            onClick: () => q(i),
+            onContextMenu: (L) => {
+              L.preventDefault(), N({
+                x: L.clientX,
+                y: L.clientY,
+                items: u(i)
+              });
+            },
+            children: [
+              /* @__PURE__ */ t("span", { className: "text-dt-text-muted/60 shrink-0", children: new Date(i.timestamp).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                fractionalSecondDigits: 3
+              }) }),
+              /* @__PURE__ */ t("span", { className: `font-semibold shrink-0 w-10 uppercase text-[10px] ${i.level === "info" ? "text-dt-info" : i.level === "warn" ? "text-dt-warning" : i.level === "error" ? "text-dt-error" : "text-dt-text-muted"}`, children: i.level.toUpperCase() }),
+              /* @__PURE__ */ n("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ t("div", { className: "text-dt-text-secondary break-all", children: i.message }),
+                C && /* @__PURE__ */ n("div", { className: "text-[10px] text-dt-text-muted/70 truncate", title: `${C.type} ${C.udfPath}`, children: [
+                  C.type,
+                  " ",
+                  C.udfPath
+                ] })
+              ] }),
+              i.relatedEventId && /* @__PURE__ */ t(
+                "button",
+                {
+                  className: "shrink-0 px-1 py-0.5 bg-transparent border border-dt-border-light/50 rounded text-[9px] font-mono text-dt-text-muted cursor-pointer hover:text-dt-info hover:border-dt-info/30 transition-colors",
+                  onClick: (L) => {
+                    L.stopPropagation(), P(i.relatedEventId);
+                  },
+                  title: C ? `Open ${C.udfPath}` : `From: ${i.relatedEventId}`,
+                  children: I ?? i.relatedEventId.split("-")[0]
+                }
+              )
+            ]
+          },
+          i.id
+        );
+      }),
+      /* @__PURE__ */ t("div", { ref: $ })
+    ] }),
+    b && /* @__PURE__ */ t(
+      Gt,
+      {
+        x: b.x,
+        y: b.y,
+        items: b.items,
+        onClose: () => N(null)
+      }
+    )
+  ] });
+}
+function Ve({ eventStore: e }) {
+  const [r, a] = z(e.getSettings()), [s, d] = z(e.getSnapshots()), x = e.isPausedState(), c = e.isPersistenceEnabled();
+  U(() => (a(e.getSettings()), e.subscribeSettings((y) => {
+    a(y);
+  })), [e]);
+  const m = (k, y) => {
+    e.saveSettings({ [k]: y });
+  }, w = () => {
+    const k = e.exportSession(), y = new Blob([JSON.stringify(k, null, 2)], {
+      type: "application/json"
+    }), S = URL.createObjectURL(y), $ = document.createElement("a");
+    $.href = S, $.download = `concave-devtools-${Date.now()}.json`, $.click(), URL.revokeObjectURL(S);
+  }, v = () => {
+    const k = document.createElement("input");
+    k.type = "file", k.accept = ".json", k.onchange = async (y) => {
+      const S = y.target.files?.[0];
+      if (S)
+        try {
+          const $ = await S.text(), P = JSON.parse($), M = e.importSession(P);
+          alert(M ? "Session imported successfully!" : "Failed to import session. Invalid format.");
+        } catch ($) {
+          alert(`Failed to import session: ${$}`);
+        }
+    }, k.click();
+  }, E = () => {
+    e.createSnapshot(), d(e.getSnapshots());
+  }, f = (k) => {
+    confirm("Restore to this snapshot? Current state will be replaced.") && e.restoreSnapshot(k) && d(e.getSnapshots());
+  }, b = () => {
+    x ? e.resume() : e.pause(), a({ ...e.getSettings() });
+  }, N = () => {
+    e.clear(), d([]);
+  };
+  return /* @__PURE__ */ n("div", { className: "flex flex-col h-full overflow-y-auto p-3 gap-3", children: [
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("h4", { className: "text-[11px] font-semibold text-dt-text-secondary uppercase tracking-wider m-0 pb-1 border-b border-dt-border-light", children: "Recording" }),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-border-light/30 bg-dt-bg-secondary/30", children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: `px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide ${x ? "bg-dt-warning/20 text-dt-warning" : "bg-dt-success/20 text-dt-success"}`,
+            children: x ? "Paused" : "Live"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-[11px] text-dt-text-muted", children: x ? "No new events" : "Capturing events" }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: `ml-auto px-2.5 py-1 rounded-md text-[11px] font-medium cursor-pointer border transition-all ${x ? "bg-dt-success/15 text-dt-success border-dt-success/30 hover:bg-dt-success/25" : "bg-dt-error/15 text-dt-error border-dt-error/30 hover:bg-dt-error/25"}`,
+            onClick: b,
+            children: x ? "Resume" : "Pause"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("h4", { className: "text-[11px] font-semibold text-dt-text-secondary uppercase tracking-wider m-0 pb-1 border-b border-dt-border-light", children: "General" }),
+      /* @__PURE__ */ n(
+        "label",
+        {
+          className: `flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-border-light/30 text-[12px] ${c ? "cursor-pointer" : "cursor-not-allowed opacity-70"}`,
+          children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "checkbox",
+                checked: r.persistEvents,
+                disabled: !c,
+                onChange: (k) => m("persistEvents", k.target.checked)
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: "text-dt-text-secondary", children: "Persist events" }),
+            /* @__PURE__ */ t("span", { className: "ml-auto text-[10px] text-dt-text-muted", children: c ? "localStorage" : "disabled in panel" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n("label", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-border-light/30 text-[12px] cursor-pointer", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            checked: r.captureLogLines,
+            onChange: (k) => m("captureLogLines", k.target.checked)
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-dt-text-secondary", children: "Capture console logs" })
+      ] }),
+      /* @__PURE__ */ n("label", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-border-light/30 text-[12px] cursor-pointer", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            checked: r.autoPauseOnError,
+            onChange: (k) => m("autoPauseOnError", k.target.checked)
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-dt-text-secondary", children: "Auto-pause on error" })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-border-light/30 text-[12px]", children: [
+        /* @__PURE__ */ t("span", { className: "text-dt-text-secondary", children: "Max events" }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "number",
+            className: "w-20 bg-dt-bg-tertiary border border-dt-border-light rounded px-2 py-1 text-[12px] text-dt-text-secondary font-mono outline-none focus:border-dt-info/50",
+            value: r.maxEvents,
+            onChange: (k) => m("maxEvents", parseInt(k.target.value, 10) || 1e3),
+            min: "100",
+            max: "10000",
+            step: "100"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "ml-auto text-[10px] text-dt-text-muted", children: "100-10000" })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("h4", { className: "text-[11px] font-semibold text-dt-text-secondary uppercase tracking-wider m-0 pb-1 border-b border-dt-border-light", children: "Network Simulation" }),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-border-light/30 text-[12px]", children: [
+        /* @__PURE__ */ t("span", { className: "text-dt-text-secondary", children: "Latency" }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "number",
+            className: "w-20 bg-dt-bg-tertiary border border-dt-border-light rounded px-2 py-1 text-[12px] text-dt-text-secondary font-mono outline-none focus:border-dt-info/50",
+            value: r.wsLatencyMs,
+            onChange: (k) => m("wsLatencyMs", Math.max(0, parseInt(k.target.value, 10) || 0)),
+            min: "0",
+            max: "10000",
+            step: "50"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-[10px] text-dt-text-muted", children: "ms" })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-border-light/30 text-[12px]", children: [
+        /* @__PURE__ */ t("span", { className: "text-dt-text-secondary", children: "Jitter" }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "number",
+            className: "w-20 bg-dt-bg-tertiary border border-dt-border-light rounded px-2 py-1 text-[12px] text-dt-text-secondary font-mono outline-none focus:border-dt-info/50",
+            value: r.wsJitterMs,
+            onChange: (k) => m("wsJitterMs", Math.max(0, parseInt(k.target.value, 10) || 0)),
+            min: "0",
+            max: "5000",
+            step: "25"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-[10px] text-dt-text-muted", children: "ms" })
+      ] }),
+      (r.wsLatencyMs > 0 || r.wsJitterMs > 0) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2 px-2 py-1.5 rounded-md border border-dt-warning/30 bg-dt-warning/5 text-[11px]", children: [
+        /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 rounded bg-dt-warning/20 text-dt-warning text-[10px] font-semibold uppercase tracking-wide", children: "Active" }),
+        /* @__PURE__ */ n("span", { className: "text-dt-text-muted", children: [
+          r.wsLatencyMs,
+          "ms",
+          r.wsJitterMs > 0 ? ` ±${r.wsJitterMs}ms` : ""
+        ] }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "ml-auto px-2 py-0.5 rounded-md text-[10px] font-medium cursor-pointer border bg-dt-warning/15 text-dt-warning border-dt-warning/30 hover:bg-dt-warning/25",
+            onClick: () => {
+              e.saveSettings({ wsLatencyMs: 0, wsJitterMs: 0 });
+            },
+            children: "Reset"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("h4", { className: "text-[11px] font-semibold text-dt-text-secondary uppercase tracking-wider m-0 pb-1 border-b border-dt-border-light", children: "Session" }),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "px-2.5 py-1 bg-dt-bg-tertiary border border-dt-border-light rounded-md text-[11px] text-dt-text-secondary cursor-pointer transition-all hover:bg-white/10 hover:border-dt-border",
+            onClick: w,
+            children: "Export"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "px-2.5 py-1 bg-dt-bg-tertiary border border-dt-border-light rounded-md text-[11px] text-dt-text-secondary cursor-pointer transition-all hover:bg-white/10 hover:border-dt-border",
+            onClick: v,
+            children: "Import"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "px-2.5 py-1 bg-dt-bg-tertiary border border-dt-border-light rounded-md text-[11px] text-dt-text-secondary cursor-pointer transition-all hover:bg-dt-error/15 hover:text-dt-error hover:border-dt-error/30",
+            onClick: N,
+            children: "Clear"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("h4", { className: "text-[11px] font-semibold text-dt-text-secondary uppercase tracking-wider m-0 pb-1 border-b border-dt-border-light", children: "Time Travel" }),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "px-2.5 py-1 bg-dt-bg-tertiary border border-dt-border-light rounded-md text-[11px] text-dt-text-secondary cursor-pointer transition-all hover:bg-white/10 hover:border-dt-border",
+            onClick: E,
+            children: "Snapshot"
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: "px-1.5 py-0.5 rounded bg-dt-bg-tertiary text-[10px] text-dt-text-muted font-mono", children: [
+          s.length,
+          " saved"
+        ] })
+      ] }),
+      s.length > 0 ? /* @__PURE__ */ t("div", { className: "flex flex-col gap-1 max-h-[180px] overflow-y-auto pr-1", children: [...s].reverse().map((k) => /* @__PURE__ */ n(
+        "div",
+        {
+          className: "flex items-center gap-2 px-2 py-1 bg-dt-bg-tertiary/50 rounded border border-dt-border-light/30 text-[11px]",
+          children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: "text-dt-text-secondary font-mono",
+                title: new Date(k.timestamp).toLocaleString(),
+                children: new Date(k.timestamp).toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit"
+                })
+              }
+            ),
+            /* @__PURE__ */ n("span", { className: "text-dt-text-muted", children: [
+              k.events.length,
+              "e"
+            ] }),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "ml-auto px-1.5 py-0.5 bg-dt-info/15 text-dt-info border border-dt-info/30 rounded text-[10px] font-medium cursor-pointer hover:bg-dt-info/25",
+                onClick: () => f(k.timestamp),
+                children: "Restore"
+              }
+            )
+          ]
+        },
+        k.timestamp
+      )) }) : /* @__PURE__ */ t("p", { className: "text-[11px] text-dt-text-muted/60 m-0", children: "No snapshots" })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("h4", { className: "text-[11px] font-semibold text-dt-text-secondary uppercase tracking-wider m-0 pb-1 border-b border-dt-border-light", children: "Shortcuts" }),
+      /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-[11px]", children: [
+          /* @__PURE__ */ t("kbd", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary border border-dt-border-light rounded text-[10px] font-mono text-dt-text-tertiary", children: "Cmd/Ctrl + Shift + D" }),
+          /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "Toggle DevTools" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-[11px]", children: [
+          /* @__PURE__ */ t("kbd", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary border border-dt-border-light rounded text-[10px] font-mono text-dt-text-tertiary", children: "Cmd/Ctrl + K" }),
+          /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "Focus search" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-[11px]", children: [
+          /* @__PURE__ */ t("kbd", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary border border-dt-border-light rounded text-[10px] font-mono text-dt-text-tertiary", children: "Cmd/Ctrl + E" }),
+          /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "Export session" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "flex items-center justify-between text-[11px]", children: [
+          /* @__PURE__ */ t("kbd", { className: "px-1.5 py-0.5 bg-dt-bg-tertiary border border-dt-border-light rounded text-[10px] font-mono text-dt-text-tertiary", children: "Cmd/Ctrl + P" }),
+          /* @__PURE__ */ t("span", { className: "text-dt-text-muted", children: "Pause/resume" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ t("h4", { className: "text-[11px] font-semibold text-dt-text-secondary uppercase tracking-wider m-0 pb-1 border-b border-dt-border-light", children: "About" }),
+      /* @__PURE__ */ n("p", { className: "m-0 text-[11px] text-dt-text-muted", children: [
+        /* @__PURE__ */ t("span", { className: "text-dt-text-secondary font-semibold", children: "Concave DevTools" }),
+        " ",
+        /* @__PURE__ */ n("span", { children: [
+          "v",
+          ce
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Je({
+  eventStore: e,
+  position: r = "bottom-right",
+  mode: a = "overlay",
+  panelConnectionState: s
+}) {
+  const d = a === "panel", [x, c] = z(() => {
+    if (d) return !0;
+    const u = Vt("concave-devtools-open");
+    return u ? JSON.parse(u) : !0;
+  }), [m, w] = z("activity"), [v, E] = z([]), [f, b] = z(!1);
+  U(() => {
+    const u = e.subscribe((i) => {
+      E(e.getAllEvents()), b(e.isPausedState());
+    });
+    return E(e.getAllEvents()), b(e.isPausedState()), u;
+  }, [e]), U(() => {
+    d || Jt("concave-devtools-open", JSON.stringify(x));
+  }, [x, d]);
+  const N = J(() => {
+    e.clear(), E([]);
+  }, [e]), k = J(() => {
+    c(!1);
+  }, []), y = J(() => {
+    const u = e.exportSession(), i = new Blob([JSON.stringify(u, null, 2)], {
+      type: "application/json"
+    }), C = URL.createObjectURL(i), I = document.createElement("a");
+    I.href = C, I.download = `concave-devtools-${Date.now()}.json`, I.click(), URL.revokeObjectURL(C);
+  }, [e]), S = J(() => {
+    e.isPausedState() ? (e.resume(), b(!1)) : (e.pause(), b(!0));
+  }, [e]);
+  U(() => {
+    const u = (i) => {
+      if ((i.metaKey || i.ctrlKey) && i.shiftKey && i.key === "D") {
+        i.preventDefault(), c((C) => !C);
+        return;
+      }
+      Pt() && ((i.metaKey || i.ctrlKey) && i.key === "e" && (i.preventDefault(), y()), (i.metaKey || i.ctrlKey) && i.key === "p" && (i.preventDefault(), S()));
+    };
+    return window.addEventListener("keydown", u), () => window.removeEventListener("keydown", u);
+  }, [N, y, S]);
+  const $ = {
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4"
+  }[r], P = v.filter(
+    (u) => u.type === "query" || u.type === "mutation" || u.type === "action" || u.type === "auth"
+  ), M = e.getActiveSubscriptions().length, q = v.filter((u) => u.type === "log"), R = P.filter((u) => "status" in u && u.status === "error"), p = [
+    { id: "activity", label: "Activity", count: P.length, hasError: R.length > 0 },
+    { id: "subscriptions", label: "Subscriptions", count: M, hasError: !1 },
+    { id: "performance", label: "Performance", count: 0, hasError: !1 },
+    { id: "logs", label: "Logs", count: q.length, hasError: !1 },
+    { id: "settings", label: "Settings", count: 0, hasError: !1 }
+  ];
+  return /* @__PURE__ */ n("div", { className: d ? "w-full h-full bg-dt-bg font-sans text-[13px] leading-normal text-dt-text-secondary antialiased" : `fixed z-[999999] font-sans text-[13px] leading-normal text-dt-text-secondary antialiased ${$}`, children: [
+    !d && !x && /* @__PURE__ */ n(
+      "button",
+      {
+        className: "flex items-center gap-2.5 px-[18px] py-3 bg-gradient-to-br from-zinc-900/[0.98] to-zinc-800/95 backdrop-blur-[20px] border border-dt-border rounded-[14px] text-dt-text-tertiary cursor-pointer shadow-lg relative overflow-hidden hover:scale-[1.02] hover:-translate-y-0.5 transition-all",
+        onClick: () => c(!0),
+        title: "Open Concave DevTools (Cmd/Ctrl+Shift+D)",
+        "aria-label": "Open Concave DevTools",
+        "aria-expanded": "false",
+        children: [
+          /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 32 32", fill: "none", children: [
+            /* @__PURE__ */ t("rect", { width: "32", height: "32", rx: ye, fill: ve }),
+            /* @__PURE__ */ t("path", { d: ke, fill: "white" })
+          ] }),
+          R.length > 0 ? /* @__PURE__ */ t("span", { className: "bg-gradient-to-br from-red-500 to-red-600 text-white px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide shadow-md min-w-5 text-center", children: R.length }) : P.length > 0 ? /* @__PURE__ */ t("span", { className: "bg-gradient-to-br from-blue-500 to-blue-600 text-white px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wide shadow-md min-w-5 text-center", children: P.length }) : null
+        ]
+      }
+    ),
+    (d || x) && /* @__PURE__ */ n("div", { className: d ? "w-full h-full bg-dt-bg flex flex-col overflow-hidden outline-none" : "w-[min(860px,calc(100vw-32px))] min-w-[300px] max-w-[calc(100vw-24px)] h-[min(620px,calc(100vh-32px))] min-h-[360px] max-h-[calc(100vh-24px)] bg-zinc-950/98 border border-dt-border rounded-2xl shadow-2xl flex flex-col overflow-hidden outline-none", role: "dialog", "aria-label": "Concave DevTools", "aria-modal": "false", tabIndex: -1, children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center justify-between border-b border-dt-border px-0 bg-dt-bg-secondary", children: [
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-0 flex-1 overflow-x-auto", role: "tablist", "aria-label": "DevTools panels", children: p.map((u) => /* @__PURE__ */ n(
+          "button",
+          {
+            id: `tab-${u.id}`,
+            className: d ? `px-3 py-[7px] bg-transparent border-none text-[12px] cursor-pointer transition-colors whitespace-nowrap border-b-2 ${m === u.id ? "text-dt-info border-b-dt-info" : "text-dt-text-tertiary border-b-transparent hover:text-dt-text-secondary hover:bg-white/5"}` : `px-3 py-[7px] bg-transparent border-none text-[12px] cursor-pointer transition-colors whitespace-nowrap border-b-2 ${m === u.id ? "text-dt-info border-b-dt-info" : "text-dt-text-tertiary border-b-transparent hover:text-dt-text-secondary hover:bg-white/5"}`,
+            onClick: () => w(u.id),
+            "aria-label": `${u.label} panel`,
+            "aria-selected": m === u.id,
+            role: "tab",
+            "aria-controls": `panel-${u.id}`,
+            children: [
+              /* @__PURE__ */ t("span", { children: u.label }),
+              u.count > 0 && /* @__PURE__ */ t("span", { className: d ? `ml-1.5 px-1.5 py-0 rounded-full text-[10px] font-medium ${u.hasError ? "bg-dt-error/20 text-dt-error" : "bg-dt-bg-tertiary text-dt-text-tertiary"}` : `ml-1.5 px-1.5 py-0 rounded-full text-[10px] font-medium ${u.hasError ? "bg-dt-error/20 text-dt-error" : "bg-dt-bg-tertiary text-dt-text-tertiary"}`, children: u.count })
+            ]
+          },
+          u.id
+        )) }),
+        /* @__PURE__ */ n("div", { className: d ? "flex items-center gap-0.5 ml-auto pr-1" : "flex items-center gap-1.5 ml-auto", role: "toolbar", "aria-label": "DevTools quick actions", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: d ? `flex items-center justify-center w-7 h-7 p-0 bg-transparent border-none rounded cursor-pointer transition-colors hover:bg-white/10 ${f ? "text-dt-text-muted hover:text-dt-text-secondary" : "text-dt-error hover:text-dt-error"}` : `flex items-center justify-center w-7 h-7 p-0 bg-transparent border-none rounded-md cursor-pointer transition-all relative hover:bg-zinc-600/20 active:scale-[0.94] ${f ? "text-dt-text-muted hover:text-dt-text-secondary" : "text-dt-error bg-dt-error/10 hover:bg-dt-error/15 hover:text-dt-error"}`,
+              onClick: S,
+              title: f ? "Start recording (Cmd/Ctrl+P)" : "Stop recording (Cmd/Ctrl+P)",
+              "aria-label": f ? "Start recording" : "Stop recording",
+              "aria-pressed": !f,
+              children: f ? /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t("circle", { cx: "8", cy: "8", r: "4.75", stroke: "currentColor", strokeWidth: "1.5" }) }) : /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ t("circle", { cx: "8", cy: "8", r: "4.75" }) })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: d ? "flex items-center justify-center w-7 h-7 p-0 bg-transparent border-none rounded text-dt-text-tertiary cursor-pointer transition-colors hover:bg-white/10 hover:text-dt-text-secondary" : "flex items-center justify-center w-7 h-7 p-0 bg-transparent border-none rounded-md text-dt-text-muted cursor-pointer transition-all relative hover:bg-zinc-600/20 hover:text-dt-text-secondary active:scale-[0.94]",
+              onClick: y,
+              title: "Export Session (Cmd/Ctrl+E)",
+              "aria-label": "Export session",
+              children: /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: [
+                /* @__PURE__ */ t("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
+                /* @__PURE__ */ t("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: d ? "flex items-center justify-center w-7 h-7 p-0 bg-transparent border-none rounded text-dt-text-tertiary cursor-pointer transition-colors hover:bg-white/10 hover:text-dt-text-secondary" : "flex items-center justify-center w-7 h-7 p-0 bg-transparent border-none rounded-md text-dt-text-muted cursor-pointer transition-all relative hover:bg-zinc-600/20 hover:text-dt-text-secondary active:scale-[0.94]",
+              onClick: N,
+              title: "Clear all data",
+              "aria-label": "Clear all data",
+              children: /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+                /* @__PURE__ */ t("circle", { cx: "8", cy: "8", r: "5.5", stroke: "currentColor", strokeWidth: "1.2" }),
+                /* @__PURE__ */ t("path", { d: "M4.5 11.5 11.5 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+              ] })
+            }
+          ),
+          !d && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center justify-center w-7 h-7 p-0 bg-transparent border-none rounded-md text-dt-text-muted cursor-pointer transition-all relative hover:bg-red-500/15 hover:text-dt-error active:scale-[0.94]",
+              onClick: k,
+              title: "Close (Cmd/Ctrl+Shift+D)",
+              "aria-label": "Close DevTools",
+              children: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "flex-1 min-h-0 flex flex-col", children: [
+        m === "activity" && /* @__PURE__ */ t("div", { id: "panel-activity", className: "flex-1 min-h-0 flex flex-col", role: "tabpanel", "aria-labelledby": "tab-activity", children: /* @__PURE__ */ t(qe, { eventStore: e, panelConnectionState: d ? s : void 0 }) }),
+        m === "subscriptions" && /* @__PURE__ */ t("div", { id: "panel-subscriptions", className: "flex-1 min-h-0 flex flex-col", role: "tabpanel", "aria-labelledby": "tab-subscriptions", children: /* @__PURE__ */ t(Oe, { eventStore: e }) }),
+        m === "performance" && /* @__PURE__ */ t("div", { id: "panel-performance", className: "flex-1 min-h-0 flex flex-col", role: "tabpanel", "aria-labelledby": "tab-performance", children: /* @__PURE__ */ t(Fe, { eventStore: e, onNavigate: w }) }),
+        m === "logs" && /* @__PURE__ */ t("div", { id: "panel-logs", className: "flex-1 min-h-0 flex flex-col", role: "tabpanel", "aria-labelledby": "tab-logs", children: /* @__PURE__ */ t(Be, { eventStore: e, onNavigate: w }) }),
+        m === "settings" && /* @__PURE__ */ t("div", { id: "panel-settings", className: "flex-1 min-h-0 flex flex-col", role: "tabpanel", "aria-labelledby": "tab-settings", children: /* @__PURE__ */ t(Ve, { eventStore: e }) })
+      ] })
+    ] })
+  ] });
+}
+const Ue = '@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:"Fira Code","Monaco","Consolas",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-400:oklch(85.2% .199 91.936);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-zinc-950:oklch(14.1% .005 285.823);--color-white:#fff;--spacing:.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-2xl:1rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--blur-lg:16px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-dt-bg:#121214fa;--color-dt-bg-secondary:#18181bf2;--color-dt-bg-tertiary:#27272a99;--color-dt-border:#3f3f4699;--color-dt-border-light:#3f3f4666;--color-dt-text:#f4f4f5;--color-dt-text-secondary:#e4e4e7;--color-dt-text-tertiary:#a1a1aa;--color-dt-text-muted:#71717a;--color-dt-success:#22c55e;--color-dt-error:#ef4444;--color-dt-warning:#f59e0b;--color-dt-info:#3b82f6;--color-dt-query:#60a5fa;--color-dt-mutation:#a78bfa;--color-dt-action:#34d399}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-y-0{inset-block:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-0\\.5{top:calc(var(--spacing)*.5)}.top-1\\/2{top:50%}.top-4{top:calc(var(--spacing)*4)}.right-1\\.5{right:calc(var(--spacing)*1.5)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-4{bottom:calc(var(--spacing)*4)}.left-4{left:calc(var(--spacing)*4)}.z-\\[2\\]{z-index:2}.z-\\[999999\\]{z-index:999999}.z-\\[9999999\\]{z-index:9999999}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mx-0\\.5{margin-inline:calc(var(--spacing)*.5)}.my-0\\.5{margin-block:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mr-1{margin-right:calc(var(--spacing)*1)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-1\\.5{margin-left:calc(var(--spacing)*1.5)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1\\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-2\\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-\\[16px\\]{height:16px}.h-\\[min\\(620px\\,calc\\(100vh-32px\\)\\)\\]{height:min(620px,100vh - 32px)}.h-full{height:100%}.max-h-\\[80px\\]{max-height:80px}.max-h-\\[100px\\]{max-height:100px}.max-h-\\[150px\\]{max-height:150px}.max-h-\\[180px\\]{max-height:180px}.max-h-\\[200px\\]{max-height:200px}.max-h-\\[calc\\(100vh-24px\\)\\]{max-height:calc(100vh - 24px)}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\\[360px\\]{min-height:360px}.min-h-px{min-height:1px}.w-1\\.5{width:calc(var(--spacing)*1.5)}.w-2\\.5{width:calc(var(--spacing)*2.5)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-7{width:calc(var(--spacing)*7)}.w-10{width:calc(var(--spacing)*10)}.w-14{width:calc(var(--spacing)*14)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-24{width:calc(var(--spacing)*24)}.w-\\[300px\\]{width:300px}.w-\\[min\\(58vw\\,620px\\)\\]{width:min(58vw,620px)}.w-\\[min\\(860px\\,calc\\(100vw-32px\\)\\)\\]{width:min(860px,100vw - 32px)}.w-full{width:100%}.w-px{width:1px}.max-w-\\[20\\%\\]{max-width:20%}.max-w-\\[38\\%\\]{max-width:38%}.max-w-\\[44\\%\\]{max-width:44%}.max-w-\\[150px\\]{max-width:150px}.max-w-\\[180px\\]{max-width:180px}.max-w-\\[200px\\]{max-width:200px}.max-w-\\[280px\\]{max-width:280px}.max-w-\\[360px\\]{max-width:360px}.max-w-\\[calc\\(100vw-24px\\)\\]{max-width:calc(100vw - 24px)}.max-w-\\[min\\(58vw\\,680px\\)\\]{max-width:min(58vw,680px)}.max-w-\\[min\\(62vw\\,760px\\)\\]{max-width:min(62vw,760px)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-5{min-width:calc(var(--spacing)*5)}.min-w-\\[120px\\]{min-width:120px}.min-w-\\[180px\\]{min-width:180px}.min-w-\\[300px\\]{min-width:300px}.min-w-\\[420px\\]{min-width:420px}.min-w-\\[820px\\]{min-width:820px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-150{--tw-scale-x:150%;--tw-scale-y:150%;--tw-scale-z:150%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-\\[dt-fade-in_0\\.1s_ease-out\\]{animation:.1s ease-out dt-fade-in}.animate-\\[dt-fade-in_0\\.15s_ease-out\\]{animation:.15s ease-out dt-fade-in}.animate-\\[dt-slide-in_0\\.2s_ease-out\\]{animation:.2s ease-out dt-slide-in}.animate-pulse{animation:var(--animate-pulse)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0{gap:calc(var(--spacing)*0)}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-\\[3px\\]{gap:3px}.gap-px{gap:1px}:where(.space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-\\[3px\\]>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(3px*var(--tw-space-y-reverse));margin-block-end:calc(3px*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-y-scroll{overflow-y:scroll}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[3px\\]{border-radius:3px}.rounded-\\[14px\\]{border-radius:14px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-none{--tw-border-style:none;border-style:none}.border-dt-border{border-color:var(--color-dt-border)}.border-dt-border-light{border-color:var(--color-dt-border-light)}.border-dt-border-light\\/30{border-color:#3f3f461f}@supports (color:color-mix(in lab,red,red)){.border-dt-border-light\\/30{border-color:color-mix(in oklab,var(--color-dt-border-light)30%,transparent)}}.border-dt-border-light\\/40{border-color:#3f3f4629}@supports (color:color-mix(in lab,red,red)){.border-dt-border-light\\/40{border-color:color-mix(in oklab,var(--color-dt-border-light)40%,transparent)}}.border-dt-border-light\\/50{border-color:#3f3f4633}@supports (color:color-mix(in lab,red,red)){.border-dt-border-light\\/50{border-color:color-mix(in oklab,var(--color-dt-border-light)50%,transparent)}}.border-dt-error\\/30{border-color:#ef44444d}@supports (color:color-mix(in lab,red,red)){.border-dt-error\\/30{border-color:color-mix(in oklab,var(--color-dt-error)30%,transparent)}}.border-dt-error\\/40{border-color:#ef444466}@supports (color:color-mix(in lab,red,red)){.border-dt-error\\/40{border-color:color-mix(in oklab,var(--color-dt-error)40%,transparent)}}.border-dt-info\\/20{border-color:#3b82f633}@supports (color:color-mix(in lab,red,red)){.border-dt-info\\/20{border-color:color-mix(in oklab,var(--color-dt-info)20%,transparent)}}.border-dt-info\\/30{border-color:#3b82f64d}@supports (color:color-mix(in lab,red,red)){.border-dt-info\\/30{border-color:color-mix(in oklab,var(--color-dt-info)30%,transparent)}}.border-dt-mutation\\/20{border-color:#a78bfa33}@supports (color:color-mix(in lab,red,red)){.border-dt-mutation\\/20{border-color:color-mix(in oklab,var(--color-dt-mutation)20%,transparent)}}.border-dt-success\\/30{border-color:#22c55e4d}@supports (color:color-mix(in lab,red,red)){.border-dt-success\\/30{border-color:color-mix(in oklab,var(--color-dt-success)30%,transparent)}}.border-dt-warning\\/20{border-color:#f59e0b33}@supports (color:color-mix(in lab,red,red)){.border-dt-warning\\/20{border-color:color-mix(in oklab,var(--color-dt-warning)20%,transparent)}}.border-dt-warning\\/30{border-color:#f59e0b4d}@supports (color:color-mix(in lab,red,red)){.border-dt-warning\\/30{border-color:color-mix(in oklab,var(--color-dt-warning)30%,transparent)}}.border-transparent{border-color:#0000}.border-zinc-700\\/30{border-color:#3f3f464d}@supports (color:color-mix(in lab,red,red)){.border-zinc-700\\/30{border-color:color-mix(in oklab,var(--color-zinc-700)30%,transparent)}}.border-b-dt-info{border-bottom-color:var(--color-dt-info)}.border-b-transparent{border-bottom-color:#0000}.border-l-dt-error\\/40{border-left-color:#ef444466}@supports (color:color-mix(in lab,red,red)){.border-l-dt-error\\/40{border-left-color:color-mix(in oklab,var(--color-dt-error)40%,transparent)}}.border-l-dt-query\\/30{border-left-color:#60a5fa4d}@supports (color:color-mix(in lab,red,red)){.border-l-dt-query\\/30{border-left-color:color-mix(in oklab,var(--color-dt-query)30%,transparent)}}.bg-dt-action{background-color:var(--color-dt-action)}.bg-dt-action\\/20{background-color:#34d39933}@supports (color:color-mix(in lab,red,red)){.bg-dt-action\\/20{background-color:color-mix(in oklab,var(--color-dt-action)20%,transparent)}}.bg-dt-action\\/25{background-color:#34d39940}@supports (color:color-mix(in lab,red,red)){.bg-dt-action\\/25{background-color:color-mix(in oklab,var(--color-dt-action)25%,transparent)}}.bg-dt-bg{background-color:var(--color-dt-bg)}.bg-dt-bg-secondary{background-color:var(--color-dt-bg-secondary)}.bg-dt-bg-secondary\\/30{background-color:#18181b49}@supports (color:color-mix(in lab,red,red)){.bg-dt-bg-secondary\\/30{background-color:color-mix(in oklab,var(--color-dt-bg-secondary)30%,transparent)}}.bg-dt-bg-secondary\\/50{background-color:#18181b79}@supports (color:color-mix(in lab,red,red)){.bg-dt-bg-secondary\\/50{background-color:color-mix(in oklab,var(--color-dt-bg-secondary)50%,transparent)}}.bg-dt-bg-secondary\\/85{background-color:#18181bce}@supports (color:color-mix(in lab,red,red)){.bg-dt-bg-secondary\\/85{background-color:color-mix(in oklab,var(--color-dt-bg-secondary)85%,transparent)}}.bg-dt-bg-tertiary{background-color:var(--color-dt-bg-tertiary)}.bg-dt-bg-tertiary\\/30{background-color:#27272a2e}@supports (color:color-mix(in lab,red,red)){.bg-dt-bg-tertiary\\/30{background-color:color-mix(in oklab,var(--color-dt-bg-tertiary)30%,transparent)}}.bg-dt-bg-tertiary\\/35{background-color:#27272a36}@supports (color:color-mix(in lab,red,red)){.bg-dt-bg-tertiary\\/35{background-color:color-mix(in oklab,var(--color-dt-bg-tertiary)35%,transparent)}}.bg-dt-bg-tertiary\\/40{background-color:#27272a3d}@supports (color:color-mix(in lab,red,red)){.bg-dt-bg-tertiary\\/40{background-color:color-mix(in oklab,var(--color-dt-bg-tertiary)40%,transparent)}}.bg-dt-bg-tertiary\\/50{background-color:#27272a4d}@supports (color:color-mix(in lab,red,red)){.bg-dt-bg-tertiary\\/50{background-color:color-mix(in oklab,var(--color-dt-bg-tertiary)50%,transparent)}}.bg-dt-error{background-color:var(--color-dt-error)}.bg-dt-error\\/5{background-color:#ef44440d}@supports (color:color-mix(in lab,red,red)){.bg-dt-error\\/5{background-color:color-mix(in oklab,var(--color-dt-error)5%,transparent)}}.bg-dt-error\\/10{background-color:#ef44441a}@supports (color:color-mix(in lab,red,red)){.bg-dt-error\\/10{background-color:color-mix(in oklab,var(--color-dt-error)10%,transparent)}}.bg-dt-error\\/15{background-color:#ef444426}@supports (color:color-mix(in lab,red,red)){.bg-dt-error\\/15{background-color:color-mix(in oklab,var(--color-dt-error)15%,transparent)}}.bg-dt-error\\/20{background-color:#ef444433}@supports (color:color-mix(in lab,red,red)){.bg-dt-error\\/20{background-color:color-mix(in oklab,var(--color-dt-error)20%,transparent)}}.bg-dt-error\\/25{background-color:#ef444440}@supports (color:color-mix(in lab,red,red)){.bg-dt-error\\/25{background-color:color-mix(in oklab,var(--color-dt-error)25%,transparent)}}.bg-dt-info\\/5{background-color:#3b82f60d}@supports (color:color-mix(in lab,red,red)){.bg-dt-info\\/5{background-color:color-mix(in oklab,var(--color-dt-info)5%,transparent)}}.bg-dt-info\\/10{background-color:#3b82f61a}@supports (color:color-mix(in lab,red,red)){.bg-dt-info\\/10{background-color:color-mix(in oklab,var(--color-dt-info)10%,transparent)}}.bg-dt-info\\/15{background-color:#3b82f626}@supports (color:color-mix(in lab,red,red)){.bg-dt-info\\/15{background-color:color-mix(in oklab,var(--color-dt-info)15%,transparent)}}.bg-dt-info\\/20{background-color:#3b82f633}@supports (color:color-mix(in lab,red,red)){.bg-dt-info\\/20{background-color:color-mix(in oklab,var(--color-dt-info)20%,transparent)}}.bg-dt-mutation{background-color:var(--color-dt-mutation)}.bg-dt-mutation\\/10{background-color:#a78bfa1a}@supports (color:color-mix(in lab,red,red)){.bg-dt-mutation\\/10{background-color:color-mix(in oklab,var(--color-dt-mutation)10%,transparent)}}.bg-dt-mutation\\/20{background-color:#a78bfa33}@supports (color:color-mix(in lab,red,red)){.bg-dt-mutation\\/20{background-color:color-mix(in oklab,var(--color-dt-mutation)20%,transparent)}}.bg-dt-mutation\\/25{background-color:#a78bfa40}@supports (color:color-mix(in lab,red,red)){.bg-dt-mutation\\/25{background-color:color-mix(in oklab,var(--color-dt-mutation)25%,transparent)}}.bg-dt-query{background-color:var(--color-dt-query)}.bg-dt-query\\/20{background-color:#60a5fa33}@supports (color:color-mix(in lab,red,red)){.bg-dt-query\\/20{background-color:color-mix(in oklab,var(--color-dt-query)20%,transparent)}}.bg-dt-query\\/25{background-color:#60a5fa40}@supports (color:color-mix(in lab,red,red)){.bg-dt-query\\/25{background-color:color-mix(in oklab,var(--color-dt-query)25%,transparent)}}.bg-dt-query\\/\\[0\\.02\\]{background-color:#60a5fa05}@supports (color:color-mix(in lab,red,red)){.bg-dt-query\\/\\[0\\.02\\]{background-color:color-mix(in oklab,var(--color-dt-query)2%,transparent)}}.bg-dt-success{background-color:var(--color-dt-success)}.bg-dt-success\\/5{background-color:#22c55e0d}@supports (color:color-mix(in lab,red,red)){.bg-dt-success\\/5{background-color:color-mix(in oklab,var(--color-dt-success)5%,transparent)}}.bg-dt-success\\/15{background-color:#22c55e26}@supports (color:color-mix(in lab,red,red)){.bg-dt-success\\/15{background-color:color-mix(in oklab,var(--color-dt-success)15%,transparent)}}.bg-dt-success\\/20{background-color:#22c55e33}@supports (color:color-mix(in lab,red,red)){.bg-dt-success\\/20{background-color:color-mix(in oklab,var(--color-dt-success)20%,transparent)}}.bg-dt-warning{background-color:var(--color-dt-warning)}.bg-dt-warning\\/5{background-color:#f59e0b0d}@supports (color:color-mix(in lab,red,red)){.bg-dt-warning\\/5{background-color:color-mix(in oklab,var(--color-dt-warning)5%,transparent)}}.bg-dt-warning\\/15{background-color:#f59e0b26}@supports (color:color-mix(in lab,red,red)){.bg-dt-warning\\/15{background-color:color-mix(in oklab,var(--color-dt-warning)15%,transparent)}}.bg-dt-warning\\/20{background-color:#f59e0b33}@supports (color:color-mix(in lab,red,red)){.bg-dt-warning\\/20{background-color:color-mix(in oklab,var(--color-dt-warning)20%,transparent)}}.bg-transparent{background-color:#0000}.bg-white\\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.bg-white\\/10{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.bg-white\\/55{background-color:#ffffff8c}@supports (color:color-mix(in lab,red,red)){.bg-white\\/55{background-color:color-mix(in oklab,var(--color-white)55%,transparent)}}.bg-white\\/\\[0\\.03\\]{background-color:#ffffff08}@supports (color:color-mix(in lab,red,red)){.bg-white\\/\\[0\\.03\\]{background-color:color-mix(in oklab,var(--color-white)3%,transparent)}}.bg-white\\/\\[0\\.06\\]{background-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.bg-white\\/\\[0\\.06\\]{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.bg-white\\/\\[0\\.08\\]{background-color:#ffffff14}@supports (color:color-mix(in lab,red,red)){.bg-white\\/\\[0\\.08\\]{background-color:color-mix(in oklab,var(--color-white)8%,transparent)}}.bg-yellow-400\\/25{background-color:#fac80040}@supports (color:color-mix(in lab,red,red)){.bg-yellow-400\\/25{background-color:color-mix(in oklab,var(--color-yellow-400)25%,transparent)}}.bg-yellow-400\\/30{background-color:#fac8004d}@supports (color:color-mix(in lab,red,red)){.bg-yellow-400\\/30{background-color:color-mix(in oklab,var(--color-yellow-400)30%,transparent)}}.bg-zinc-500\\/25{background-color:#71717b40}@supports (color:color-mix(in lab,red,red)){.bg-zinc-500\\/25{background-color:color-mix(in oklab,var(--color-zinc-500)25%,transparent)}}.bg-zinc-900\\/50{background-color:#18181b80}@supports (color:color-mix(in lab,red,red)){.bg-zinc-900\\/50{background-color:color-mix(in oklab,var(--color-zinc-900)50%,transparent)}}.bg-zinc-900\\/\\[0\\.98\\]{background-color:#18181bfa}@supports (color:color-mix(in lab,red,red)){.bg-zinc-900\\/\\[0\\.98\\]{background-color:color-mix(in oklab,var(--color-zinc-900)98%,transparent)}}.bg-zinc-950\\/50{background-color:#09090b80}@supports (color:color-mix(in lab,red,red)){.bg-zinc-950\\/50{background-color:color-mix(in oklab,var(--color-zinc-950)50%,transparent)}}.bg-zinc-950\\/98{background-color:#09090bfa}@supports (color:color-mix(in lab,red,red)){.bg-zinc-950\\/98{background-color:color-mix(in oklab,var(--color-zinc-950)98%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-red-500{--tw-gradient-from:var(--color-red-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-zinc-900\\/\\[0\\.98\\]{--tw-gradient-from:#18181bfa}@supports (color:color-mix(in lab,red,red)){.from-zinc-900\\/\\[0\\.98\\]{--tw-gradient-from:color-mix(in oklab,var(--color-zinc-900)98%,transparent)}}.from-zinc-900\\/\\[0\\.98\\]{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-600{--tw-gradient-to:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-red-600{--tw-gradient-to:var(--color-red-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-zinc-800\\/95{--tw-gradient-to:#27272af2}@supports (color:color-mix(in lab,red,red)){.to-zinc-800\\/95{--tw-gradient-to:color-mix(in oklab,var(--color-zinc-800)95%,transparent)}}.to-zinc-800\\/95{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.p-0{padding:calc(var(--spacing)*0)}.p-0\\.5{padding:calc(var(--spacing)*.5)}.p-1{padding:calc(var(--spacing)*1)}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-\\[3px\\]{padding:3px}.px-0{padding-inline:calc(var(--spacing)*0)}.px-0\\.5{padding-inline:calc(var(--spacing)*.5)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-\\[18px\\]{padding-inline:18px}.px-px{padding-inline:1px}.py-0{padding-block:calc(var(--spacing)*0)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.py-\\[2px\\]{padding-block:2px}.py-\\[7px\\]{padding-block:7px}.py-px{padding-block:1px}.pr-1{padding-right:calc(var(--spacing)*1)}.pr-7{padding-right:calc(var(--spacing)*7)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[13px\\]{font-size:13px}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-dt-action{color:var(--color-dt-action)}.text-dt-border{color:var(--color-dt-border)}.text-dt-error{color:var(--color-dt-error)}.text-dt-info{color:var(--color-dt-info)}.text-dt-info\\/90{color:#3b82f6e6}@supports (color:color-mix(in lab,red,red)){.text-dt-info\\/90{color:color-mix(in oklab,var(--color-dt-info)90%,transparent)}}.text-dt-mutation{color:var(--color-dt-mutation)}.text-dt-mutation\\/70{color:#a78bfab3}@supports (color:color-mix(in lab,red,red)){.text-dt-mutation\\/70{color:color-mix(in oklab,var(--color-dt-mutation)70%,transparent)}}.text-dt-query{color:var(--color-dt-query)}.text-dt-success{color:var(--color-dt-success)}.text-dt-text{color:var(--color-dt-text)}.text-dt-text-muted{color:var(--color-dt-text-muted)}.text-dt-text-muted\\/40{color:#71717a66}@supports (color:color-mix(in lab,red,red)){.text-dt-text-muted\\/40{color:color-mix(in oklab,var(--color-dt-text-muted)40%,transparent)}}.text-dt-text-muted\\/60{color:#71717a99}@supports (color:color-mix(in lab,red,red)){.text-dt-text-muted\\/60{color:color-mix(in oklab,var(--color-dt-text-muted)60%,transparent)}}.text-dt-text-muted\\/70{color:#71717ab3}@supports (color:color-mix(in lab,red,red)){.text-dt-text-muted\\/70{color:color-mix(in oklab,var(--color-dt-text-muted)70%,transparent)}}.text-dt-text-muted\\/80{color:#71717acc}@supports (color:color-mix(in lab,red,red)){.text-dt-text-muted\\/80{color:color-mix(in oklab,var(--color-dt-text-muted)80%,transparent)}}.text-dt-text-muted\\/85{color:#71717ad9}@supports (color:color-mix(in lab,red,red)){.text-dt-text-muted\\/85{color:color-mix(in oklab,var(--color-dt-text-muted)85%,transparent)}}.text-dt-text-muted\\/90{color:#71717ae6}@supports (color:color-mix(in lab,red,red)){.text-dt-text-muted\\/90{color:color-mix(in oklab,var(--color-dt-text-muted)90%,transparent)}}.text-dt-text-secondary{color:var(--color-dt-text-secondary)}.text-dt-text-tertiary{color:var(--color-dt-text-tertiary)}.text-dt-warning{color:var(--color-dt-warning)}.text-dt-warning\\/90{color:#f59e0be6}@supports (color:color-mix(in lab,red,red)){.text-dt-warning\\/90{color:color-mix(in oklab,var(--color-dt-warning)90%,transparent)}}.text-inherit{color:inherit}.text-white{color:var(--color-white)}.text-yellow-200{color:var(--color-yellow-200)}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-dt-text-muted\\/40::placeholder{color:#71717a66}@supports (color:color-mix(in lab,red,red)){.placeholder-dt-text-muted\\/40::placeholder{color:color-mix(in oklab,var(--color-dt-text-muted)40%,transparent)}}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_0_0_1px_rgba\\(52\\,211\\,153\\,0\\.5\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#34d39980);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_0_0_1px_rgba\\(96\\,165\\,250\\,0\\.5\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#60a5fa80);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_0_0_1px_rgba\\(161\\,161\\,170\\,0\\.4\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#a1a1aa66);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_0_0_1px_rgba\\(167\\,139\\,250\\,0\\.5\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#a78bfa80);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_0_0_1px_rgba\\(239\\,68\\,68\\,0\\.5\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ef444480);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_0_0_1px_rgba\\(245\\,158\\,11\\,0\\.5\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#f59e0b80);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_1px_2px_rgba\\(52\\,211\\,153\\,0\\.35\\)\\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#34d39959);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_1px_2px_rgba\\(96\\,165\\,250\\,0\\.35\\)\\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#60a5fa59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_1px_2px_rgba\\(167\\,139\\,250\\,0\\.35\\)\\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#a78bfa59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_1px_2px_rgba\\(245\\,158\\,11\\,0\\.35\\)\\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#f59e0b59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-dt-info{--tw-ring-color:var(--color-dt-info)}.outline,.outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.-outline-offset-1{outline-offset:-1px}.outline-dt-info\\/30{outline-color:#3b82f64d}@supports (color:color-mix(in lab,red,red)){.outline-dt-info\\/30{outline-color:color-mix(in oklab,var(--color-dt-info)30%,transparent)}}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-\\[20px\\]{--tw-backdrop-blur:blur(20px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.placeholder\\:text-dt-text-muted\\/50::placeholder{color:#71717a80}@supports (color:color-mix(in lab,red,red)){.placeholder\\:text-dt-text-muted\\/50::placeholder{color:color-mix(in oklab,var(--color-dt-text-muted)50%,transparent)}}@media(hover:hover){.hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\\:scale-150:hover{--tw-scale-x:150%;--tw-scale-y:150%;--tw-scale-z:150%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:scale-\\[1\\.02\\]:hover{scale:1.02}.hover\\:border-dt-border:hover{border-color:var(--color-dt-border)}.hover\\:border-dt-border-light:hover{border-color:var(--color-dt-border-light)}.hover\\:border-dt-error\\/30:hover{border-color:#ef44444d}@supports (color:color-mix(in lab,red,red)){.hover\\:border-dt-error\\/30:hover{border-color:color-mix(in oklab,var(--color-dt-error)30%,transparent)}}.hover\\:border-dt-info\\/30:hover{border-color:#3b82f64d}@supports (color:color-mix(in lab,red,red)){.hover\\:border-dt-info\\/30:hover{border-color:color-mix(in oklab,var(--color-dt-info)30%,transparent)}}.hover\\:bg-dt-action\\/15:hover{background-color:#34d39926}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-action\\/15:hover{background-color:color-mix(in oklab,var(--color-dt-action)15%,transparent)}}.hover\\:bg-dt-error\\/15:hover{background-color:#ef444426}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-error\\/15:hover{background-color:color-mix(in oklab,var(--color-dt-error)15%,transparent)}}.hover\\:bg-dt-error\\/25:hover{background-color:#ef444440}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-error\\/25:hover{background-color:color-mix(in oklab,var(--color-dt-error)25%,transparent)}}.hover\\:bg-dt-info\\/15:hover{background-color:#3b82f626}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-info\\/15:hover{background-color:color-mix(in oklab,var(--color-dt-info)15%,transparent)}}.hover\\:bg-dt-info\\/25:hover{background-color:#3b82f640}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-info\\/25:hover{background-color:color-mix(in oklab,var(--color-dt-info)25%,transparent)}}.hover\\:bg-dt-mutation\\/15:hover{background-color:#a78bfa26}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-mutation\\/15:hover{background-color:color-mix(in oklab,var(--color-dt-mutation)15%,transparent)}}.hover\\:bg-dt-mutation\\/20:hover{background-color:#a78bfa33}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-mutation\\/20:hover{background-color:color-mix(in oklab,var(--color-dt-mutation)20%,transparent)}}.hover\\:bg-dt-query\\/15:hover{background-color:#60a5fa26}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-query\\/15:hover{background-color:color-mix(in oklab,var(--color-dt-query)15%,transparent)}}.hover\\:bg-dt-success\\/25:hover{background-color:#22c55e40}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-success\\/25:hover{background-color:color-mix(in oklab,var(--color-dt-success)25%,transparent)}}.hover\\:bg-dt-warning\\/15:hover{background-color:#f59e0b26}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-warning\\/15:hover{background-color:color-mix(in oklab,var(--color-dt-warning)15%,transparent)}}.hover\\:bg-dt-warning\\/25:hover{background-color:#f59e0b40}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-dt-warning\\/25:hover{background-color:color-mix(in oklab,var(--color-dt-warning)25%,transparent)}}.hover\\:bg-red-500\\/15:hover{background-color:#fb2c3626}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-red-500\\/15:hover{background-color:color-mix(in oklab,var(--color-red-500)15%,transparent)}}.hover\\:bg-white\\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-white\\/5:hover{background-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.hover\\:bg-white\\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-white\\/10:hover{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.hover\\:bg-white\\/\\[0\\.02\\]:hover{background-color:#ffffff05}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-white\\/\\[0\\.02\\]:hover{background-color:color-mix(in oklab,var(--color-white)2%,transparent)}}.hover\\:bg-white\\/\\[0\\.03\\]:hover{background-color:#ffffff08}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-white\\/\\[0\\.03\\]:hover{background-color:color-mix(in oklab,var(--color-white)3%,transparent)}}.hover\\:bg-white\\/\\[0\\.04\\]:hover{background-color:#ffffff0a}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-white\\/\\[0\\.04\\]:hover{background-color:color-mix(in oklab,var(--color-white)4%,transparent)}}.hover\\:bg-white\\/\\[0\\.06\\]:hover{background-color:#ffffff0f}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-white\\/\\[0\\.06\\]:hover{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.hover\\:bg-zinc-600\\/20:hover{background-color:#52525c33}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-zinc-600\\/20:hover{background-color:color-mix(in oklab,var(--color-zinc-600)20%,transparent)}}.hover\\:text-dt-action:hover{color:var(--color-dt-action)}.hover\\:text-dt-error:hover{color:var(--color-dt-error)}.hover\\:text-dt-info:hover{color:var(--color-dt-info)}.hover\\:text-dt-mutation:hover{color:var(--color-dt-mutation)}.hover\\:text-dt-query:hover{color:var(--color-dt-query)}.hover\\:text-dt-text-secondary:hover{color:var(--color-dt-text-secondary)}.hover\\:text-dt-text-tertiary:hover{color:var(--color-dt-text-tertiary)}.hover\\:text-dt-warning:hover{color:var(--color-dt-warning)}}.focus\\:border-dt-info\\/40:focus{border-color:#3b82f666}@supports (color:color-mix(in lab,red,red)){.focus\\:border-dt-info\\/40:focus{border-color:color-mix(in oklab,var(--color-dt-info)40%,transparent)}}.focus\\:border-dt-info\\/50:focus{border-color:#3b82f680}@supports (color:color-mix(in lab,red,red)){.focus\\:border-dt-info\\/50:focus{border-color:color-mix(in oklab,var(--color-dt-info)50%,transparent)}}.focus\\:bg-dt-bg-tertiary:focus{background-color:var(--color-dt-bg-tertiary)}.focus\\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-dt-info\\/40:focus{--tw-ring-color:#3b82f666}@supports (color:color-mix(in lab,red,red)){.focus\\:ring-dt-info\\/40:focus{--tw-ring-color:color-mix(in oklab,var(--color-dt-info)40%,transparent)}}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\\:scale-\\[0\\.94\\]:active{scale:.94}.disabled\\:cursor-default:disabled{cursor:default}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:.3}.disabled\\:opacity-40:disabled{opacity:.4}@media(hover:hover){.disabled\\:hover\\:bg-transparent:disabled:hover{background-color:#0000}.disabled\\:hover\\:text-dt-text-muted:disabled:hover{color:var(--color-dt-text-muted)}}@media(min-width:40rem){.sm\\:inline-flex{display:inline-flex}}.\\[\\&\\:\\:-webkit-search-cancel-button\\]\\:hidden::-webkit-search-cancel-button{display:none}}@keyframes dt-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes dt-slide-in{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}html{color-scheme:dark;background-color:#121214}:host{--sb-thumb:#71717a80;--sb-track:transparent}*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb)var(--sb-track)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--sb-track)}::-webkit-scrollbar-thumb{background-color:var(--sb-thumb);border-radius:3px}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}';
+function Ke(e = {}) {
+  if (window.__concaveDevToolsInstalled) {
+    console.warn("[DevTools] Already initialized");
+    return;
+  }
+  window.__concaveDevToolsInstalled = !0, console.log("[DevTools] Initializing UI...");
+  const r = we(), a = window.__concaveDevToolsEvents || [];
+  console.log(`[DevTools] Loading ${a.length} captured events`), a.forEach((x) => {
+    r.addEvent(x);
+  });
+  let s = a.length;
+  setInterval(() => {
+    const x = window.__concaveDevToolsEvents || [];
+    x.length > s && (x.slice(s).forEach((m) => {
+      r.addEvent(m);
+    }), s = x.length);
+  }, 100);
+  const d = () => {
+    const x = document.createElement("div");
+    x.id = "concave-devtools-host", x.style.cssText = "position:fixed;z-index:999999;bottom:16px;right:16px;pointer-events:none;", document.body.appendChild(x);
+    const c = x.attachShadow({ mode: "open" }), m = document.createElement("style");
+    m.textContent = Ue, c.appendChild(m);
+    const w = document.createElement("div");
+    w.id = "concave-devtools-root", w.style.cssText = "pointer-events:auto;", c.appendChild(w), he(w).render(/* @__PURE__ */ t(Je, { eventStore: r, position: e.position })), console.log("[DevTools] UI mounted successfully");
+  };
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", d) : d(), window.__concaveDevTools = {
+    eventStore: r
+  };
+}
+if (typeof window < "u") {
+  const e = window.__concaveDevToolsConfig || {};
+  e.autoInit !== !1 && setTimeout(() => {
+    Ke(e);
+  }, 100);
+}
+export {
+  Je as D,
+  Nt as E,
+  Be as L,
+  Fe as P,
+  Oe as S,
+  Ve as a,
+  Et as b,
+  we as g,
+  Ke as i
+};