@nexttrace/devtools 0.1.0

package/dist/index.js

@@ -0,0 +1,1943 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  InspectorPanel: () => InspectorPanel,
+  JsonViewer: () => JsonViewer,
+  NextTraceDevTools: () => NextTraceDevTools,
+  SettingsModal: () => SettingsModal,
+  TimelineList: () => TimelineList,
+  tokens: () => tokens,
+  typography: () => typography
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/NextTraceDevTools.tsx
+var import_react4 = require("react");
+var import_core2 = require("@nexttrace/core");
+
+// src/theme.ts
+var tokens = {
+  dark: {
+    bg: "#0c0f17",
+    bgSurface: "#131823",
+    bgElevated: "#1a2232",
+    bgHover: "#222b3e",
+    bgActive: "#2a354c",
+    border: "#263147",
+    borderMuted: "#1d2638",
+    text: "#e2e8f0",
+    textMuted: "#8b9bb4",
+    textDim: "#52627a",
+    accent: "#3b82f6",
+    accentHover: "#60a5fa",
+    accentBg: "rgba(59, 130, 246, 0.12)",
+    success: "#10b981",
+    successBg: "rgba(16, 185, 129, 0.12)",
+    warning: "#f59e0b",
+    warningBg: "rgba(245, 158, 11, 0.12)",
+    error: "#ef4444",
+    errorBg: "rgba(239, 68, 68, 0.12)",
+    purple: "#a855f7",
+    purpleBg: "rgba(168, 85, 247, 0.12)",
+    badgeBg: "#1f293d",
+    shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5)",
+    scrollbarThumb: "rgba(255, 255, 255, 0.18)",
+    scrollbarThumbHover: "rgba(255, 255, 255, 0.38)"
+  },
+  light: {
+    bg: "#f8fafc",
+    bgSurface: "#ffffff",
+    bgElevated: "#f1f5f9",
+    bgHover: "#e2e8f0",
+    bgActive: "#cbd5e1",
+    border: "#e2e8f0",
+    borderMuted: "#cbd5e1",
+    text: "#0f172a",
+    textMuted: "#475569",
+    textDim: "#94a3b8",
+    accent: "#2563eb",
+    accentHover: "#1d4ed8",
+    accentBg: "rgba(37, 99, 235, 0.08)",
+    success: "#059669",
+    successBg: "rgba(5, 150, 105, 0.08)",
+    warning: "#d97706",
+    warningBg: "rgba(217, 119, 6, 0.08)",
+    error: "#dc2626",
+    errorBg: "rgba(220, 38, 38, 0.08)",
+    purple: "#9333ea",
+    purpleBg: "rgba(147, 51, 234, 0.08)",
+    badgeBg: "#e2e8f0",
+    shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    scrollbarThumb: "rgba(0, 0, 0, 0.18)",
+    scrollbarThumbHover: "rgba(0, 0, 0, 0.38)"
+  }
+};
+var typography = {
+  fontSans: 'var(--font-sans, var(--font-inter, "Inter", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif))',
+  fontMono: 'var(--font-mono, var(--font-jetbrains-mono, "JetBrains Mono", "Geist Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace))'
+};
+
+// src/TimelineList.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TimelineList = ({
+  events,
+  selectedEventId,
+  onSelectEvent,
+  theme
+}) => {
+  const t = tokens[theme];
+  const getMethodColor = (method) => {
+    switch (method.toUpperCase()) {
+      case "GET":
+        return "#3b82f6";
+      case "POST":
+        return "#10b981";
+      case "PUT":
+      case "PATCH":
+        return "#f59e0b";
+      case "DELETE":
+        return "#ef4444";
+      case "QUERY":
+        return "#8b5cf6";
+      default:
+        return t.textMuted;
+    }
+  };
+  const getStatusBadge = (event) => {
+    if (event.phase === "start") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          style: {
+            color: t.accent,
+            backgroundColor: t.accentBg,
+            padding: "2px 6px",
+            borderRadius: "4px",
+            fontSize: "11px",
+            fontWeight: 600
+          },
+          children: "..."
+        }
+      );
+    }
+    if (event.phase === "abort") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          style: {
+            color: t.textDim,
+            backgroundColor: t.badgeBg,
+            padding: "2px 6px",
+            borderRadius: "4px",
+            fontSize: "11px",
+            fontWeight: 600
+          },
+          children: "ABORT"
+        }
+      );
+    }
+    const status = event.response?.status;
+    if (!status || status >= 400 || event.phase === "error") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          style: {
+            color: t.error,
+            backgroundColor: t.errorBg,
+            padding: "2px 6px",
+            borderRadius: "4px",
+            fontSize: "11px",
+            fontWeight: 600
+          },
+          children: status || "ERR"
+        }
+      );
+    }
+    if (status >= 300) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          style: {
+            color: t.warning,
+            backgroundColor: t.warningBg,
+            padding: "2px 6px",
+            borderRadius: "4px",
+            fontSize: "11px",
+            fontWeight: 600
+          },
+          children: status
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        style: {
+          color: t.success,
+          backgroundColor: t.successBg,
+          padding: "2px 6px",
+          borderRadius: "4px",
+          fontSize: "11px",
+          fontWeight: 600
+        },
+        children: status
+      }
+    );
+  };
+  if (events.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "32px 16px",
+          color: t.textDim,
+          textAlign: "center",
+          fontFamily: typography.fontSans
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "28px", marginBottom: "8px" }, children: "\u{1F4E1}" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, color: t.textMuted, marginBottom: "4px" }, children: "No requests captured yet" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "12px" }, children: "Trigger a fetch, Axios call, or TanStack query to see live events" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        fontFamily: typography.fontSans,
+        scrollbarWidth: "thin",
+        scrollbarColor: `${t.scrollbarThumb} transparent`
+      },
+      children: events.map((event) => {
+        const isSelected = event.eventId === selectedEventId;
+        const method = event.request.method.toUpperCase();
+        const durationText = event.timing.duration !== void 0 ? event.timing.duration > 999 ? `${(event.timing.duration / 1e3).toFixed(2)}s` : `${event.timing.duration}ms` : "...";
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            onClick: () => onSelectEvent(event.eventId),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              padding: "8px 12px",
+              borderBottom: `1px solid ${t.borderMuted}`,
+              cursor: "pointer",
+              backgroundColor: isSelected ? t.bgHover : "transparent",
+              transition: "background 0.1s ease",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "42px", flexShrink: 0 }, children: getStatusBadge(event) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    width: "54px",
+                    flexShrink: 0,
+                    fontWeight: 700,
+                    fontSize: "11px",
+                    color: getMethodColor(method),
+                    fontFamily: typography.fontMono
+                  },
+                  children: method
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    fontSize: "12px",
+                    color: t.text,
+                    fontFamily: typography.fontMono
+                  },
+                  title: event.request.sanitizedUrl,
+                  children: event.request.sanitizedUrl
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "4px", flexShrink: 0 }, children: [
+                event.flags.isDuplicate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    title: "Heuristic: Same method & URL called within short time window",
+                    style: {
+                      fontSize: "10px",
+                      fontWeight: 600,
+                      padding: "1px 5px",
+                      borderRadius: "3px",
+                      backgroundColor: t.warningBg,
+                      color: t.warning
+                    },
+                    children: "DUP"
+                  }
+                ),
+                event.flags.isSlow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "10px",
+                      fontWeight: 600,
+                      padding: "1px 5px",
+                      borderRadius: "3px",
+                      backgroundColor: t.errorBg,
+                      color: t.error
+                    },
+                    children: "SLOW"
+                  }
+                ),
+                event.flags.isRedacted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "10px",
+                      fontWeight: 600,
+                      padding: "1px 5px",
+                      borderRadius: "3px",
+                      backgroundColor: t.badgeBg,
+                      color: t.textDim
+                    },
+                    children: "\u{1F512}"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    fontSize: "10px",
+                    padding: "2px 5px",
+                    borderRadius: "3px",
+                    backgroundColor: t.bgElevated,
+                    color: t.textMuted,
+                    flexShrink: 0
+                  },
+                  children: [
+                    event.runtime === "node" ? "server" : "browser",
+                    " \xB7 ",
+                    event.sourceAdapter
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    width: "52px",
+                    textAlign: "right",
+                    fontSize: "11px",
+                    color: event.flags.isSlow ? t.error : t.textMuted,
+                    fontFamily: typography.fontMono,
+                    flexShrink: 0,
+                    fontWeight: event.flags.isSlow ? 600 : 400
+                  },
+                  children: durationText
+                }
+              )
+            ]
+          },
+          event.eventId
+        );
+      })
+    }
+  );
+};
+
+// src/InspectorPanel.tsx
+var import_react2 = require("react");
+var import_core = require("@nexttrace/core");
+
+// src/JsonViewer.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var JsonViewer = ({ data, theme }) => {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  const t = tokens[theme];
+  const handleCopy = () => {
+    const text = typeof data === "string" ? data : JSON.stringify(data, null, 2);
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  let parsed = data;
+  let isJson = false;
+  if (typeof data === "string") {
+    try {
+      parsed = JSON.parse(data);
+      isJson = true;
+    } catch {
+      isJson = false;
+    }
+  } else if (data !== null && typeof data === "object") {
+    isJson = true;
+  }
+  const renderValue = (val, depth = 0) => {
+    if (val === null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim, fontStyle: "italic" }, children: "null" });
+    }
+    if (typeof val === "boolean") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.purple, fontWeight: 600 }, children: String(val) });
+    }
+    if (typeof val === "number") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.warning, fontWeight: 600 }, children: val });
+    }
+    if (typeof val === "string") {
+      if (val === "[REDACTED]") {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            style: {
+              backgroundColor: t.errorBg,
+              color: t.error,
+              padding: "1px 5px",
+              borderRadius: "3px",
+              fontWeight: 600,
+              fontSize: "11px"
+            },
+            children: "[REDACTED]"
+          }
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t.success }, children: [
+        '"',
+        val,
+        '"'
+      ] });
+    }
+    if (Array.isArray(val)) {
+      if (val.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "[]" });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { paddingLeft: "14px", borderLeft: `1px dashed ${t.borderMuted}` }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "[" }),
+        val.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { lineHeight: "1.4" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t.textDim, marginRight: "6px" }, children: [
+            idx,
+            ":"
+          ] }),
+          renderValue(item, depth + 1),
+          idx < val.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "," })
+        ] }, idx)),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "]" })
+      ] });
+    }
+    if (typeof val === "object") {
+      const keys = Object.keys(val);
+      if (keys.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "{}" });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { paddingLeft: "14px", borderLeft: `1px dashed ${t.borderMuted}` }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "{" }),
+        keys.map((k, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { lineHeight: "1.4" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t.accentHover, fontWeight: 500 }, children: [
+            '"',
+            k,
+            '"'
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim, margin: "0 6px" }, children: ":" }),
+          renderValue(val[k], depth + 1),
+          idx < keys.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "," })
+        ] }, k)),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textDim }, children: "}" })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: String(val) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        backgroundColor: t.bgSurface,
+        border: `1px solid ${t.border}`,
+        borderRadius: "6px",
+        padding: "12px",
+        fontFamily: typography.fontMono,
+        fontSize: "12px",
+        maxHeight: "340px",
+        overflowY: "auto",
+        overflowX: "auto",
+        scrollbarWidth: "thin",
+        scrollbarColor: `${t.scrollbarThumb} transparent`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: handleCopy,
+            style: {
+              backgroundColor: t.bgElevated,
+              border: `1px solid ${t.border}`,
+              color: t.text,
+              padding: "3px 8px",
+              borderRadius: "4px",
+              fontSize: "11px",
+              cursor: "pointer",
+              transition: "background 0.15s ease"
+            },
+            children: copied ? "\u2713 Copied" : "Copy"
+          }
+        ) }),
+        isJson ? renderValue(parsed) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "pre",
+          {
+            style: {
+              margin: 0,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+              color: t.text,
+              fontFamily: typography.fontMono
+            },
+            children: String(data ?? "(empty body)")
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/InspectorPanel.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var InspectorPanel = ({ event, onClose, theme }) => {
+  const [activeTab, setActiveTab] = (0, import_react2.useState)("overview");
+  const [curlCopied, setCurlCopied] = (0, import_react2.useState)(false);
+  const t = tokens[theme];
+  const handleCopyCurl = () => {
+    const curl = (0, import_core.toCurlCommand)(event);
+    navigator.clipboard.writeText(curl);
+    setCurlCopied(true);
+    setTimeout(() => setCurlCopied(false), 1500);
+  };
+  const tabs = [
+    { id: "overview", label: "Overview", show: true },
+    { id: "request", label: "Request", show: true },
+    { id: "response", label: "Response", show: Boolean(event.response) },
+    { id: "headers", label: "Headers", show: true },
+    { id: "timing", label: "Timing", show: true },
+    { id: "source", label: "Source", show: Boolean(event.context.initiatorStack || event.context.componentName) },
+    { id: "error", label: "Error", show: Boolean(event.error) }
+  ].filter((t2) => t2.show);
+  const currentTab = tabs.some((tab) => tab.id === activeTab) ? activeTab : "overview";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        backgroundColor: t.bgSurface,
+        borderLeft: `1px solid ${t.border}`,
+        fontFamily: typography.fontSans
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "10px 14px",
+              borderBottom: `1px solid ${t.border}`,
+              backgroundColor: t.bgElevated
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontWeight: 700,
+                      fontSize: "12px",
+                      fontFamily: typography.fontMono,
+                      color: t.accent
+                    },
+                    children: event.request.method
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: 500,
+                      color: t.text,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      maxWidth: "280px",
+                      fontFamily: typography.fontMono
+                    },
+                    title: event.request.sanitizedUrl,
+                    children: event.request.sanitizedUrl
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    onClick: handleCopyCurl,
+                    style: {
+                      backgroundColor: t.bgSurface,
+                      border: `1px solid ${t.border}`,
+                      color: t.text,
+                      padding: "4px 8px",
+                      borderRadius: "4px",
+                      fontSize: "11px",
+                      fontWeight: 500,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u{1F4CB}" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: curlCopied ? "cURL Copied!" : "Copy cURL" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: onClose,
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: t.textMuted,
+                      cursor: "pointer",
+                      fontSize: "16px",
+                      padding: "2px 6px",
+                      borderRadius: "4px"
+                    },
+                    children: "\u2715"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: `1px solid ${t.border}`,
+              backgroundColor: t.bg,
+              padding: "0 8px"
+            },
+            children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => setActiveTab(tab.id),
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  borderBottom: currentTab === tab.id ? `2px solid ${t.accent}` : "2px solid transparent",
+                  color: currentTab === tab.id ? t.accent : t.textMuted,
+                  padding: "8px 12px",
+                  fontSize: "12px",
+                  fontWeight: currentTab === tab.id ? 600 : 500,
+                  cursor: "pointer",
+                  transition: "all 0.1s ease"
+                },
+                children: tab.label
+              },
+              tab.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              fontSize: "13px",
+              scrollbarWidth: "thin",
+              scrollbarColor: `${t.scrollbarThumb} transparent`
+            },
+            children: [
+              currentTab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "14px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "120px 1fr", gap: "8px", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Event ID:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: typography.fontMono, fontSize: "12px", color: t.text }, children: event.eventId }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Status:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontWeight: 600, color: (event.response?.status ?? 500) < 400 ? t.success : t.error }, children: event.response ? `${event.response.status} (${event.response.statusText})` : event.phase }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Duration:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.text }, children: event.timing.duration !== void 0 ? `${event.timing.duration}ms` : "In progress" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Runtime:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.text }, children: event.runtime === "node" ? "Node.js (Server-side)" : "Browser" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Adapter:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.text, textTransform: "capitalize" }, children: event.sourceAdapter }),
+                  event.context.route && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Page Route:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: typography.fontMono, fontSize: "12px", color: t.text }, children: event.context.route })
+                  ] }),
+                  event.context.componentName && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Caller Component:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: typography.fontMono, fontSize: "12px", color: t.accent }, children: event.context.componentName })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim, fontSize: "12px" }, children: "Attribution:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { fontSize: "12px", color: t.textMuted }, children: [
+                    event.context.attributionMethod,
+                    " (",
+                    event.context.confidence,
+                    " confidence)"
+                  ] })
+                ] }),
+                event.flags.isRedacted && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      padding: "8px 12px",
+                      backgroundColor: t.accentBg,
+                      border: `1px solid ${t.accent}`,
+                      borderRadius: "4px",
+                      fontSize: "11px",
+                      color: t.accentHover
+                    },
+                    children: "\u{1F512} Sensitive parameters (passwords, tokens, cookies, auth headers) were safely redacted before reaching this inspector."
+                  }
+                )
+              ] }),
+              currentTab === "request" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: "8px", color: t.text, fontSize: "12px" }, children: "Query Parameters" }),
+                  Object.keys(event.request.queryParams).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: Object.entries(event.request.queryParams).map(([key, val]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { style: { borderBottom: `1px solid ${t.borderMuted}` }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "4px 8px", color: t.accentHover, fontFamily: typography.fontMono }, children: key }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "4px 8px", color: t.text, fontFamily: typography.fontMono }, children: val })
+                  ] }, key)) }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: t.textDim, fontSize: "12px" }, children: "No query parameters" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, marginBottom: "8px", color: t.text, fontSize: "12px" }, children: [
+                    "Request Body ",
+                    event.request.isTruncated && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.warning }, children: "(Truncated)" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(JsonViewer, { data: event.request.bodyPreview, theme })
+                ] })
+              ] }),
+              currentTab === "response" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, color: t.text, fontSize: "12px" }, children: [
+                    "Status: ",
+                    event.response?.status,
+                    " ",
+                    event.response?.statusText
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { color: t.textDim, fontSize: "11px" }, children: [
+                    "Content-Type: ",
+                    event.response?.contentType || "unknown"
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 600, marginBottom: "8px", color: t.text, fontSize: "12px" }, children: [
+                    "Response Body ",
+                    event.response?.isTruncated && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.warning }, children: "(Truncated)" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(JsonViewer, { data: event.response?.bodyPreview, theme })
+                ] })
+              ] }),
+              currentTab === "headers" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: "8px", color: t.text, fontSize: "12px" }, children: "Request Headers" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: Object.entries(event.request.headers).map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { style: { borderBottom: `1px solid ${t.borderMuted}` }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "4px 8px", color: t.accentHover, fontFamily: typography.fontMono }, children: k }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "4px 8px", color: t.text, fontFamily: typography.fontMono }, children: v })
+                  ] }, k)) }) })
+                ] }),
+                event.response && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: "8px", color: t.text, fontSize: "12px" }, children: "Response Headers" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: Object.entries(event.response.headers).map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { style: { borderBottom: `1px solid ${t.borderMuted}` }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "4px 8px", color: t.accentHover, fontFamily: typography.fontMono }, children: k }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: { padding: "4px 8px", color: t.text, fontFamily: typography.fontMono }, children: v })
+                  ] }, k)) }) })
+                ] })
+              ] }),
+              currentTab === "timing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, color: t.text, fontSize: "12px" }, children: "Timing Breakdown" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "140px 1fr", gap: "6px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim }, children: "Total Duration:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontWeight: 600, color: event.flags.isSlow ? t.error : t.success }, children: event.timing.duration !== void 0 ? `${event.timing.duration} ms` : "In progress" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.textDim }, children: "Start Epoch:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t.text }, children: new Date(event.timestamp).toLocaleTimeString() })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { height: "8px", backgroundColor: t.bgElevated, borderRadius: "4px", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      height: "100%",
+                      width: "100%",
+                      backgroundColor: event.flags.isSlow ? t.error : t.accent,
+                      borderRadius: "4px"
+                    }
+                  }
+                ) }) })
+              ] }),
+              currentTab === "source" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, color: t.text, fontSize: "12px" }, children: "Call Stack & Attribution" }),
+                event.context.initiatorStack ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "pre",
+                  {
+                    style: {
+                      backgroundColor: t.bg,
+                      padding: "10px",
+                      borderRadius: "4px",
+                      fontSize: "11px",
+                      fontFamily: typography.fontMono,
+                      color: t.textMuted,
+                      overflowX: "auto"
+                    },
+                    children: event.context.initiatorStack
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: t.textDim, fontSize: "12px" }, children: "Caller stack unavailable for this event." })
+              ] }),
+              currentTab === "error" && event.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      backgroundColor: t.errorBg,
+                      border: `1px solid ${t.error}`,
+                      borderRadius: "6px",
+                      padding: "12px"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontWeight: 700, color: t.error, marginBottom: "4px" }, children: [
+                        event.error.name,
+                        ": ",
+                        event.error.message
+                      ] }),
+                      event.error.retryAttempt !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", color: t.warning, marginTop: "4px" }, children: [
+                        "Retry Attempts Observed: ",
+                        event.error.retryAttempt
+                      ] })
+                    ]
+                  }
+                ),
+                event.error.stack && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: "6px", color: t.text, fontSize: "12px" }, children: "Stack Trace" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "pre",
+                    {
+                      style: {
+                        backgroundColor: t.bg,
+                        padding: "10px",
+                        borderRadius: "4px",
+                        fontSize: "11px",
+                        fontFamily: typography.fontMono,
+                        color: t.textMuted,
+                        overflowX: "auto"
+                      },
+                      children: event.error.stack
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/SettingsModal.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SettingsModal = ({
+  store,
+  isOpen,
+  onClose,
+  theme
+}) => {
+  const t = tokens[theme];
+  const config = store.getConfig();
+  const [maxEvents, setMaxEvents] = (0, import_react3.useState)(config.maxEvents);
+  const [slowThresholdMs, setSlowThresholdMs] = (0, import_react3.useState)(config.slowThresholdMs);
+  const [duplicateWindowMs, setDuplicateWindowMs] = (0, import_react3.useState)(config.duplicateWindowMs);
+  const [captureBodies, setCaptureBodies] = (0, import_react3.useState)(config.captureBodies);
+  if (!isOpen) return null;
+  const handleSave = () => {
+    store.updateConfig({
+      maxEvents: Number(maxEvents),
+      slowThresholdMs: Number(slowThresholdMs),
+      duplicateWindowMs: Number(duplicateWindowMs),
+      captureBodies
+    });
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 999999,
+        fontFamily: typography.fontSans
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          style: {
+            width: "420px",
+            backgroundColor: t.bgSurface,
+            border: `1px solid ${t.border}`,
+            borderRadius: "8px",
+            boxShadow: t.shadow,
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "12px 16px",
+                  borderBottom: `1px solid ${t.border}`,
+                  backgroundColor: t.bgElevated
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, color: t.text, fontSize: "14px" }, children: "NextTrace Settings" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        color: t.textMuted,
+                        cursor: "pointer",
+                        fontSize: "16px"
+                      },
+                      children: "\u2715"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "14px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: { display: "block", fontSize: "12px", fontWeight: 600, color: t.text, marginBottom: "4px" }, children: "Max Events in Buffer" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "number",
+                    value: maxEvents,
+                    onChange: (e) => setMaxEvents(Number(e.target.value)),
+                    style: {
+                      width: "100%",
+                      padding: "6px 10px",
+                      borderRadius: "4px",
+                      border: `1px solid ${t.border}`,
+                      backgroundColor: t.bg,
+                      color: t.text,
+                      fontSize: "13px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "11px", color: t.textDim, marginTop: "2px" }, children: "Oldest requests are evicted once this limit is reached." })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: { display: "block", fontSize: "12px", fontWeight: 600, color: t.text, marginBottom: "4px" }, children: "Slow Request Threshold (ms)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "number",
+                    value: slowThresholdMs,
+                    onChange: (e) => setSlowThresholdMs(Number(e.target.value)),
+                    style: {
+                      width: "100%",
+                      padding: "6px 10px",
+                      borderRadius: "4px",
+                      border: `1px solid ${t.border}`,
+                      backgroundColor: t.bg,
+                      color: t.text,
+                      fontSize: "13px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "11px", color: t.textDim, marginTop: "2px" }, children: "Requests taking longer than this are flagged as SLOW." })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: { display: "block", fontSize: "12px", fontWeight: 600, color: t.text, marginBottom: "4px" }, children: "Duplicate Heuristic Window (ms)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "number",
+                    value: duplicateWindowMs,
+                    onChange: (e) => setDuplicateWindowMs(Number(e.target.value)),
+                    style: {
+                      width: "100%",
+                      padding: "6px 10px",
+                      borderRadius: "4px",
+                      border: `1px solid ${t.border}`,
+                      backgroundColor: t.bg,
+                      color: t.text,
+                      fontSize: "13px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginTop: "4px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    id: "nt-capture-bodies",
+                    checked: captureBodies,
+                    onChange: (e) => setCaptureBodies(e.target.checked),
+                    style: { cursor: "pointer" }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: "nt-capture-bodies", style: { fontSize: "13px", color: t.text, cursor: "pointer" }, children: "Capture request & response payloads (redacted)" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: "8px",
+                  padding: "12px 16px",
+                  borderTop: `1px solid ${t.border}`,
+                  backgroundColor: t.bgElevated
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        padding: "6px 12px",
+                        borderRadius: "4px",
+                        border: `1px solid ${t.border}`,
+                        backgroundColor: t.bgSurface,
+                        color: t.text,
+                        fontSize: "12px",
+                        cursor: "pointer"
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      onClick: handleSave,
+                      style: {
+                        padding: "6px 14px",
+                        borderRadius: "4px",
+                        border: "none",
+                        backgroundColor: t.accent,
+                        color: "#ffffff",
+                        fontSize: "12px",
+                        fontWeight: 600,
+                        cursor: "pointer"
+                      },
+                      children: "Save Settings"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/NextTraceDevTools.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NextTraceDevTools = ({
+  store: propStore,
+  defaultPosition = "bottom",
+  defaultTheme = "dark",
+  initialOpen = true
+}) => {
+  const store = (0, import_react4.useMemo)(() => propStore || (0, import_core2.getGlobalStore)(), [propStore]);
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(initialOpen);
+  const [position, setPosition] = (0, import_react4.useState)(defaultPosition);
+  const [theme, setTheme] = (0, import_react4.useState)(defaultTheme);
+  const [events, setEvents] = (0, import_react4.useState)([]);
+  const [selectedEventId, setSelectedEventId] = (0, import_react4.useState)(null);
+  const [isPaused, setIsPaused] = (0, import_react4.useState)(store.getIsPaused());
+  const [isSettingsOpen, setIsSettingsOpen] = (0, import_react4.useState)(false);
+  const [bottomHeight, setBottomHeight] = (0, import_react4.useState)(380);
+  const [rightWidth, setRightWidth] = (0, import_react4.useState)(560);
+  const [floatingSize, setFloatingSize] = (0, import_react4.useState)({ width: 840, height: 520 });
+  const [floatingPos, setFloatingPos] = (0, import_react4.useState)({ x: 40, y: 60 });
+  const [splitRatio, setSplitRatio] = (0, import_react4.useState)(0.5);
+  const [isDraggingFloating, setIsDraggingFloating] = (0, import_react4.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react4.useState)(null);
+  const [btnPos, setBtnPos] = (0, import_react4.useState)(null);
+  const [isDraggingBtn, setIsDraggingBtn] = (0, import_react4.useState)(false);
+  const [isBtnHovered, setIsBtnHovered] = (0, import_react4.useState)(false);
+  const btnDragRef = (0, import_react4.useRef)({
+    startX: 0,
+    startY: 0,
+    origX: 0,
+    origY: 0,
+    moved: false
+  });
+  const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
+  const [statusFilter, setStatusFilter] = (0, import_react4.useState)("all");
+  const [onlySlow, setOnlySlow] = (0, import_react4.useState)(false);
+  const [onlyDuplicates, setOnlyDuplicates] = (0, import_react4.useState)(false);
+  const t = tokens[theme];
+  (0, import_react4.useEffect)(() => {
+    const unsubscribe = store.subscribe((allEvents) => {
+      setEvents(allEvents);
+      setIsPaused(store.getIsPaused());
+    });
+    return unsubscribe;
+  }, [store]);
+  (0, import_react4.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "x") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!isResizing && !isDraggingFloating) return;
+    const handleMouseMove = (e) => {
+      if (isDraggingFloating) {
+        setFloatingPos((prev) => {
+          const newX = Math.max(10, Math.min(window.innerWidth - 300, prev.x + e.movementX));
+          const newY = Math.max(10, Math.min(window.innerHeight - 150, prev.y + e.movementY));
+          return { x: newX, y: newY };
+        });
+      } else if (isResizing === "bottom") {
+        const newH = Math.max(180, Math.min(window.innerHeight - 60, window.innerHeight - e.clientY));
+        setBottomHeight(newH);
+      } else if (isResizing === "right") {
+        const newW = Math.max(320, Math.min(window.innerWidth - 60, window.innerWidth - e.clientX));
+        setRightWidth(newW);
+      } else if (isResizing === "floating") {
+        setFloatingSize((prev) => {
+          const newW = Math.max(400, Math.min(window.innerWidth - floatingPos.x - 20, prev.width + e.movementX));
+          const newH = Math.max(260, Math.min(window.innerHeight - floatingPos.y - 20, prev.height + e.movementY));
+          return { width: newW, height: newH };
+        });
+      } else if (isResizing === "split") {
+        const container = document.getElementById("nexttrace-split-container");
+        if (container) {
+          const rect = container.getBoundingClientRect();
+          const ratio = (e.clientX - rect.left) / rect.width;
+          setSplitRatio(Math.max(0.25, Math.min(0.75, ratio)));
+        }
+      }
+    };
+    const handleMouseUp = () => {
+      setIsDraggingFloating(false);
+      setIsResizing(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, isDraggingFloating, floatingPos]);
+  (0, import_react4.useEffect)(() => {
+    if (!isDraggingBtn) return;
+    const handleMouseMove = (e) => {
+      const dx = e.clientX - btnDragRef.current.startX;
+      const dy = e.clientY - btnDragRef.current.startY;
+      if (Math.hypot(dx, dy) > 4) {
+        btnDragRef.current.moved = true;
+      }
+      const newX = Math.max(10, Math.min(window.innerWidth - 180, btnDragRef.current.origX + dx));
+      const newY = Math.max(10, Math.min(window.innerHeight - 60, btnDragRef.current.origY + dy));
+      setBtnPos({ x: newX, y: newY });
+    };
+    const handleMouseUp = () => {
+      setIsDraggingBtn(false);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDraggingBtn]);
+  const handleTogglePause = (0, import_react4.useCallback)(() => {
+    if (isPaused) {
+      store.resume();
+      setIsPaused(false);
+    } else {
+      store.pause();
+      setIsPaused(true);
+    }
+  }, [isPaused, store]);
+  const handleClear = (0, import_react4.useCallback)(() => {
+    store.clear();
+    setSelectedEventId(null);
+  }, [store]);
+  const handleExportJson = (0, import_react4.useCallback)(() => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(store.exportSanitizedJson());
+    const downloadAnchor = document.createElement("a");
+    downloadAnchor.setAttribute("href", dataStr);
+    downloadAnchor.setAttribute("download", `nexttrace-export-${Date.now()}.json`);
+    document.body.appendChild(downloadAnchor);
+    downloadAnchor.click();
+    downloadAnchor.remove();
+  }, [store]);
+  const filteredEvents = (0, import_react4.useMemo)(() => {
+    const filter = {
+      searchQuery,
+      statusFilter,
+      onlySlow,
+      onlyDuplicates
+    };
+    return store.filterEvents(filter);
+  }, [store, events, searchQuery, statusFilter, onlySlow, onlyDuplicates]);
+  const selectedEvent = (0, import_react4.useMemo)(() => {
+    if (!selectedEventId) return null;
+    return events.find((e) => e.eventId === selectedEventId) || null;
+  }, [events, selectedEventId]);
+  if (!isOpen) {
+    const errorCount = events.filter(
+      (e) => e.phase === "error" || e.response?.status && e.response.status >= 400
+    ).length;
+    const onBtnMouseDown = (e) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      btnDragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        origX: rect.left,
+        origY: rect.top,
+        moved: false
+      };
+      setIsDraggingBtn(true);
+    };
+    const onBtnClick = () => {
+      if (!btnDragRef.current.moved) {
+        setIsOpen(true);
+      }
+    };
+    const isDark = theme === "dark";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        onMouseEnter: () => setIsBtnHovered(true),
+        onMouseLeave: () => setIsBtnHovered(false),
+        onMouseDown: onBtnMouseDown,
+        onClick: onBtnClick,
+        title: "NextTrace DevTools (Click to open \xB7 Drag to reposition \xB7 Ctrl+Shift+X)",
+        style: {
+          position: "fixed",
+          zIndex: 999999,
+          left: btnPos ? `${btnPos.x}px` : void 0,
+          top: btnPos ? `${btnPos.y}px` : void 0,
+          right: btnPos ? void 0 : "20px",
+          bottom: btnPos ? void 0 : "20px",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          padding: isBtnHovered ? "6px 12px 6px 8px" : "0px",
+          height: "38px",
+          width: isBtnHovered ? "auto" : "38px",
+          borderRadius: "20px",
+          backgroundColor: isDark ? "rgba(10, 15, 26, 0.92)" : "rgba(255, 255, 255, 0.96)",
+          backdropFilter: "blur(16px)",
+          WebkitBackdropFilter: "blur(16px)",
+          border: `1px solid ${errorCount > 0 ? "rgba(239, 68, 68, 0.7)" : isBtnHovered ? "rgba(56, 189, 248, 0.6)" : isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"}`,
+          boxShadow: errorCount > 0 ? "0 0 20px -2px rgba(239, 68, 68, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.5)" : isBtnHovered ? "0 0 24px -2px rgba(56, 189, 248, 0.35), 0 8px 20px -4px rgba(0, 0, 0, 0.4)" : "0 8px 20px -4px rgba(0, 0, 0, 0.35)",
+          cursor: isDraggingBtn ? "grabbing" : "pointer",
+          userSelect: "none",
+          transition: isDraggingBtn ? "none" : "all 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
+          transform: isBtnHovered ? "scale(1.05)" : "scale(1)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "36px",
+                height: "36px",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    d: "M13 2L3 14H12L11 22L21 10H12L13 2Z",
+                    fill: errorCount > 0 ? "#ef4444" : "#38bdf8",
+                    fillOpacity: errorCount > 0 ? 0.9 : 0.85,
+                    stroke: errorCount > 0 ? "#fca5a5" : "#7dd3fc",
+                    strokeWidth: "1.5",
+                    strokeLinejoin: "round"
+                  }
+                ) }),
+                errorCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: "-2px",
+                      right: "-2px",
+                      minWidth: "16px",
+                      height: "16px",
+                      padding: "0 4px",
+                      borderRadius: "8px",
+                      backgroundColor: "#ef4444",
+                      color: "#ffffff",
+                      fontSize: "10px",
+                      fontWeight: 700,
+                      fontFamily: typography.fontMono,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      boxShadow: "0 0 8px #ef4444"
+                    },
+                    children: errorCount
+                  }
+                ) : events.length > 0 && !isBtnHovered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: "0px",
+                      right: "0px",
+                      width: "8px",
+                      height: "8px",
+                      borderRadius: "50%",
+                      backgroundColor: isPaused ? t.warning : "#10b981",
+                      boxShadow: `0 0 6px ${isPaused ? t.warning : "#10b981"}`
+                    }
+                  }
+                ) : null
+              ]
+            }
+          ),
+          isBtnHovered && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                whiteSpace: "nowrap",
+                paddingRight: "2px"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontWeight: 700,
+                      color: isDark ? "#ffffff" : "#0f172a",
+                      fontFamily: typography.fontSans,
+                      letterSpacing: "-0.01em"
+                    },
+                    children: "NextTrace"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      fontFamily: typography.fontMono,
+                      color: t.accentHover,
+                      fontWeight: 600
+                    },
+                    children: events.length
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  const getContainerStyle = () => {
+    const base = {
+      position: "fixed",
+      zIndex: 999998,
+      backgroundColor: t.bg,
+      color: t.text,
+      fontFamily: typography.fontSans,
+      boxShadow: t.shadow,
+      display: "flex",
+      flexDirection: "column",
+      border: `1px solid ${t.border}`,
+      boxSizing: "border-box"
+    };
+    if (position === "bottom") {
+      return {
+        ...base,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: `${bottomHeight}px`,
+        maxHeight: "92vh",
+        borderBottom: "none"
+      };
+    }
+    if (position === "right") {
+      return {
+        ...base,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: `${rightWidth}px`,
+        maxWidth: "100vw",
+        borderRight: "none"
+      };
+    }
+    return {
+      ...base,
+      top: `${floatingPos.y}px`,
+      left: `${floatingPos.x}px`,
+      width: `${floatingSize.width}px`,
+      height: `${floatingSize.height}px`,
+      maxWidth: "calc(100vw - 20px)",
+      maxHeight: "calc(100vh - 20px)",
+      borderRadius: "10px",
+      overflow: "hidden"
+    };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+        .nexttrace-root, .nexttrace-root * {
+          scrollbar-width: thin !important;
+          scrollbar-color: ${t.scrollbarThumb} transparent !important;
+        }
+        .nexttrace-root ::-webkit-scrollbar,
+        .nexttrace-root::-webkit-scrollbar {
+          width: 5px !important;
+          height: 5px !important;
+        }
+        .nexttrace-root ::-webkit-scrollbar-track,
+        .nexttrace-root::-webkit-scrollbar-track {
+          background: transparent !important;
+        }
+        .nexttrace-root ::-webkit-scrollbar-thumb,
+        .nexttrace-root::-webkit-scrollbar-thumb {
+          background-color: ${t.scrollbarThumb} !important;
+          border-radius: 9999px !important;
+          border: 1px solid transparent !important;
+          background-clip: padding-box !important;
+          transition: background-color 0.15s ease !important;
+        }
+        .nexttrace-root ::-webkit-scrollbar-thumb:hover,
+        .nexttrace-root::-webkit-scrollbar-thumb:hover {
+          background-color: ${t.scrollbarThumbHover} !important;
+        }
+        .nexttrace-root ::-webkit-scrollbar-corner,
+        .nexttrace-root::-webkit-scrollbar-corner {
+          background: transparent !important;
+        }
+      ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "nexttrace-root", style: getContainerStyle(), children: [
+      position === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          onMouseDown: () => setIsResizing("bottom"),
+          title: "Drag vertically to resize height",
+          style: {
+            height: "6px",
+            width: "100%",
+            cursor: "row-resize",
+            backgroundColor: isResizing === "bottom" ? t.accent : "transparent",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background 0.15s ease",
+            flexShrink: 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                width: "44px",
+                height: "3px",
+                borderRadius: "2px",
+                backgroundColor: isResizing === "bottom" ? t.accent : t.border
+              }
+            }
+          )
+        }
+      ),
+      position === "right" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          onMouseDown: () => setIsResizing("right"),
+          title: "Drag horizontally to resize width",
+          style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: "6px",
+            cursor: "col-resize",
+            backgroundColor: isResizing === "right" ? t.accent : "transparent",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "background 0.15s ease",
+            zIndex: 10
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                width: "3px",
+                height: "44px",
+                borderRadius: "2px",
+                backgroundColor: isResizing === "right" ? t.accent : t.border
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          onMouseDown: (e) => {
+            if (position === "floating" && e.target.tagName !== "BUTTON" && e.target.tagName !== "INPUT") {
+              setIsDraggingFloating(true);
+            }
+          },
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "7px 12px",
+            borderBottom: `1px solid ${t.border}`,
+            backgroundColor: t.bgElevated,
+            gap: "8px",
+            flexWrap: "wrap",
+            cursor: position === "floating" ? isDraggingFloating ? "grabbing" : "grab" : "default",
+            userSelect: "none"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { fontWeight: 700, fontSize: "13px", display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: t.accent }, children: "\u26A1" }),
+                " NextTrace"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  title: isPaused ? "Recording paused" : "Active and recording",
+                  style: {
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: isPaused ? t.warning : t.success
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { fontSize: "11px", color: t.textDim, fontFamily: typography.fontMono }, children: [
+                "(",
+                filteredEvents.length,
+                " / ",
+                events.length,
+                ")"
+              ] }),
+              position === "floating" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "10px", color: t.textDim, fontStyle: "italic" }, children: "(Drag header to move)" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", alignItems: "center", flex: 1, maxWidth: "240px", minWidth: "140px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                type: "text",
+                placeholder: "Filter URL, method, status...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                style: {
+                  width: "100%",
+                  padding: "4px 8px",
+                  borderRadius: "4px",
+                  border: `1px solid ${t.border}`,
+                  backgroundColor: t.bg,
+                  color: t.text,
+                  fontSize: "11px",
+                  fontFamily: typography.fontSans,
+                  outline: "none"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+              ["all", "2xx", "4xx", "5xx", "error"].map((st) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => setStatusFilter(st),
+                  style: {
+                    padding: "3px 7px",
+                    borderRadius: "3px",
+                    border: "none",
+                    fontSize: "11px",
+                    cursor: "pointer",
+                    fontWeight: statusFilter === st ? 600 : 400,
+                    backgroundColor: statusFilter === st ? t.accentBg : "transparent",
+                    color: statusFilter === st ? t.accent : t.textMuted
+                  },
+                  children: st.toUpperCase()
+                },
+                st
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => setOnlySlow((prev) => !prev),
+                  style: {
+                    padding: "3px 7px",
+                    borderRadius: "3px",
+                    border: "none",
+                    fontSize: "11px",
+                    cursor: "pointer",
+                    fontWeight: onlySlow ? 600 : 400,
+                    backgroundColor: onlySlow ? t.errorBg : "transparent",
+                    color: onlySlow ? t.error : t.textMuted
+                  },
+                  children: "Slow"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => setOnlyDuplicates((prev) => !prev),
+                  style: {
+                    padding: "3px 7px",
+                    borderRadius: "3px",
+                    border: "none",
+                    fontSize: "11px",
+                    cursor: "pointer",
+                    fontWeight: onlyDuplicates ? 600 : 400,
+                    backgroundColor: onlyDuplicates ? t.warningBg : "transparent",
+                    color: onlyDuplicates ? t.warning : t.textMuted
+                  },
+                  children: "Dupes"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleTogglePause,
+                  title: isPaused ? "Resume recording" : "Pause recording",
+                  style: {
+                    background: "transparent",
+                    border: `1px solid ${t.border}`,
+                    color: isPaused ? t.warning : t.textMuted,
+                    padding: "3px 7px",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                    cursor: "pointer"
+                  },
+                  children: isPaused ? "\u25B6 Resume" : "\u23F8 Pause"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleClear,
+                  title: "Clear all events",
+                  style: {
+                    background: "transparent",
+                    border: `1px solid ${t.border}`,
+                    color: t.textMuted,
+                    padding: "3px 7px",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                    cursor: "pointer"
+                  },
+                  children: "Clear"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleExportJson,
+                  title: "Export sanitized JSON",
+                  style: {
+                    background: "transparent",
+                    border: `1px solid ${t.border}`,
+                    color: t.textMuted,
+                    padding: "3px 7px",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                    cursor: "pointer"
+                  },
+                  children: "Export"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", border: `1px solid ${t.border}`, borderRadius: "4px", overflow: "hidden" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: () => setPosition("bottom"),
+                    title: "Dock to Bottom (Resizable height)",
+                    style: {
+                      background: position === "bottom" ? t.bgHover : "transparent",
+                      border: "none",
+                      color: position === "bottom" ? t.accent : t.textMuted,
+                      padding: "3px 7px",
+                      fontSize: "11px",
+                      cursor: "pointer",
+                      fontWeight: position === "bottom" ? 700 : 400
+                    },
+                    children: "\u2B13 Bottom"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: () => setPosition("right"),
+                    title: "Dock to Right (Resizable width)",
+                    style: {
+                      background: position === "right" ? t.bgHover : "transparent",
+                      border: "none",
+                      color: position === "right" ? t.accent : t.textMuted,
+                      padding: "3px 7px",
+                      fontSize: "11px",
+                      cursor: "pointer",
+                      fontWeight: position === "right" ? 700 : 400
+                    },
+                    children: "\u25E7 Right"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    onClick: () => setPosition("floating"),
+                    title: "Detach & Float (Movable & Resizable Window)",
+                    style: {
+                      background: position === "floating" ? t.bgHover : "transparent",
+                      border: "none",
+                      color: position === "floating" ? t.accent : t.textMuted,
+                      padding: "3px 7px",
+                      fontSize: "11px",
+                      cursor: "pointer",
+                      fontWeight: position === "floating" ? 700 : 400
+                    },
+                    children: "\u2750 Float"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => setTheme((prev) => prev === "dark" ? "light" : "dark"),
+                  title: "Toggle Dark / Light theme",
+                  style: {
+                    background: "transparent",
+                    border: `1px solid ${t.border}`,
+                    color: t.textMuted,
+                    padding: "3px 7px",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                    cursor: "pointer"
+                  },
+                  children: theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => setIsSettingsOpen(true),
+                  title: "NextTrace Settings",
+                  style: {
+                    background: "transparent",
+                    border: `1px solid ${t.border}`,
+                    color: t.textMuted,
+                    padding: "3px 7px",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                    cursor: "pointer"
+                  },
+                  children: "\u2699"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  title: "Minimize panel (Ctrl+Shift+X)",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: t.textMuted,
+                    padding: "3px 7px",
+                    fontSize: "14px",
+                    cursor: "pointer"
+                  },
+                  children: "\u2715"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          id: "nexttrace-split-container",
+          style: { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", position: "relative" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                style: {
+                  width: selectedEvent ? position === "right" ? "100%" : `${splitRatio * 100}%` : "100%",
+                  display: position === "right" && selectedEvent ? "none" : "flex",
+                  flexDirection: "column",
+                  minHeight: 0
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  TimelineList,
+                  {
+                    events: filteredEvents,
+                    selectedEventId,
+                    onSelectEvent: setSelectedEventId,
+                    theme
+                  }
+                )
+              }
+            ),
+            selectedEvent && position !== "right" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                onMouseDown: () => setIsResizing("split"),
+                title: "Drag horizontally to adjust panel split",
+                style: {
+                  width: "6px",
+                  cursor: "col-resize",
+                  backgroundColor: isResizing === "split" ? t.accent : t.borderMuted,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transition: "background 0.15s ease",
+                  flexShrink: 0,
+                  zIndex: 5
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: "2px",
+                      height: "30px",
+                      borderRadius: "1px",
+                      backgroundColor: isResizing === "split" ? t.accent : t.border
+                    }
+                  }
+                )
+              }
+            ),
+            selectedEvent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                style: {
+                  width: position === "right" ? "100%" : `${(1 - splitRatio) * 100}%`,
+                  flex: position === "right" ? 1 : void 0,
+                  minHeight: 0,
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  InspectorPanel,
+                  {
+                    event: selectedEvent,
+                    onClose: () => setSelectedEventId(null),
+                    theme
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      position === "floating" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          onMouseDown: () => setIsResizing("floating"),
+          title: "Drag corner to resize floating window",
+          style: {
+            position: "absolute",
+            bottom: 0,
+            right: 0,
+            width: "18px",
+            height: "18px",
+            cursor: "nwse-resize",
+            display: "flex",
+            alignItems: "flex-end",
+            justifyContent: "flex-end",
+            padding: "2px",
+            zIndex: 20,
+            opacity: 0.6
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 2L2 10M10 6L6 10M10 10L10 10", stroke: t.accent, strokeWidth: "1.6", strokeLinecap: "round" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      SettingsModal,
+      {
+        store,
+        isOpen: isSettingsOpen,
+        onClose: () => setIsSettingsOpen(false),
+        theme
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InspectorPanel,
+  JsonViewer,
+  NextTraceDevTools,
+  SettingsModal,
+  TimelineList,
+  tokens,
+  typography
+});