@hakam-aldeen-kh/blix 0.4.2 → 0.6.0

package/dist/{chunk-MRTSIXR7.js → chunk-FIYP47QZ.js}

@@ -21,15 +21,37 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 // src/capture/monitorConfig.ts
 var MONITOR_ENABLED = process.env.NODE_ENV === "development" && typeof window !== "undefined";
 var NM_SCHEMA_VERSION = 1;
-var NM_DB_NAME = "nm-devtools";
+var DB_PREFIX = "blix:";
+var LEGACY_DB_NAME = "nm-devtools";
+var NM_DB_NAME = `${DB_PREFIX}default`;
 var NM_DB_VERSION = 1;
+function resolveDbName(name) {
+  if (!name) return NM_DB_NAME;
+  return name.startsWith(DB_PREFIX) ? name : `${DB_PREFIX}${name}`;
+}
 var _activeDbName = NM_DB_NAME;
+var _dbOpened = false;
+function markDbOpened() {
+  _dbOpened = true;
+}
 function configureDbName(name) {
-  _activeDbName = name;
+  const resolved = resolveDbName(name);
+  if (_dbOpened && resolved !== _activeDbName) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        `[blix] configureDbName(${JSON.stringify(name)}) had no effect \u2014 the database "${_activeDbName}" is already open, and Blix does not switch databases at runtime. Requested "${resolved}". Set dbName before the panel mounts: either <Blix dbName="\u2026" /> or attachHttpMonitor(client, { dbName: "\u2026" }).`
+      );
+    }
+    return;
+  }
+  _activeDbName = resolved;
 }
 function getActiveDbName() {
   return _activeDbName;
 }
+function isSharedDefaultDb() {
+  return _activeDbName === NM_DB_NAME;
+}
 var POOL_OF = {
   http: "net",
   ws: "net",
@@ -54,7 +76,6 @@ var PERSIST_MAX_ENTRY_BYTES = 512 * 1024;
 var STRING_CAP = 32 * 1024;
 var ARRAY_CAP = 200;
 var SEARCH_INDEX_CAP = 64 * 1024;
-var PENDING_WINDOW_CAP_MS = 3e4;
 var TIME_ORIGIN = typeof performance !== "undefined" && typeof performance.timeOrigin === "number" ? performance.timeOrigin : Date.now();
 var PAGE_LOAD_AT = Date.now();
 function makeLoadId() {
@@ -98,25 +119,81 @@ var SENSITIVE_HEADERS = /* @__PURE__ */ new Set([
   "set-cookie",
   "x-api-key"
 ]);
+var MASK_SUFFIX = " (masked)";
 function maskHeaderValue(key, value) {
   if (!SENSITIVE_HEADERS.has(key.toLowerCase())) return value;
   if (value.length <= 12) return "\u2022\u2022\u2022\u2022";
-  return `${value.slice(0, 8)}\u2026${value.slice(-4)} (masked)`;
+  return `${value.slice(0, 8)}\u2026${value.slice(-4)}${MASK_SUFFIX}`;
+}
+function isHeadersLike(value) {
+  if (typeof Headers !== "undefined" && value instanceof Headers) return true;
+  const candidate = value;
+  return typeof candidate.forEach === "function" && typeof candidate.get === "function" && typeof candidate.toJSON !== "function";
+}
+function flattenHeaders(headers) {
+  const out = {};
+  if (!headers || typeof headers !== "object") return out;
+  const spelling = /* @__PURE__ */ new Map();
+  const add = (rawName, rawValue) => {
+    if (rawValue == null) return;
+    const name = String(rawName);
+    const lower = name.toLowerCase();
+    const separator = lower === "set-cookie" ? "\n" : ", ";
+    const value = Array.isArray(rawValue) ? rawValue.map(String).join(separator) : String(rawValue);
+    const existing = spelling.get(lower);
+    if (existing === void 0) {
+      spelling.set(lower, name);
+      out[name] = value;
+    } else {
+      out[existing] = `${out[existing]}${separator}${value}`;
+    }
+  };
+  try {
+    if (Array.isArray(headers)) {
+      for (const pair of headers) {
+        if (Array.isArray(pair) && pair.length >= 2) add(pair[0], pair[1]);
+      }
+      return out;
+    }
+    if (isHeadersLike(headers)) {
+      headers.forEach((value, name) => add(name, value));
+      return out;
+    }
+    for (const [name, value] of Object.entries(headers)) {
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) continue;
+      add(name, value);
+    }
+  } catch (e) {
+  }
+  return out;
 }
 function serializeHeaders(headers) {
   const out = {};
   if (!headers || typeof headers !== "object") return out;
-  const source = typeof headers.toJSON === "function" ? headers.toJSON() : headers;
-  if (!source || typeof source !== "object") return out;
-  for (const [key, value] of Object.entries(source)) {
-    if (value == null) continue;
-    if (typeof value === "object" && !Array.isArray(value)) continue;
-    const str = Array.isArray(value) ? value.join(", ") : String(value);
-    out[key] = maskHeaderValue(key, str);
+  try {
+    const source = typeof headers.toJSON === "function" ? headers.toJSON() : headers;
+    for (const [key, value] of Object.entries(flattenHeaders(source))) {
+      out[key] = maskHeaderValue(key, value);
+    }
+  } catch (e) {
   }
   return out;
 }
 var ESTIMATE_CEILING = 8 * 1024 * 1024;
+function knownByteLength(node) {
+  if (typeof Blob !== "undefined" && node instanceof Blob) return node.size;
+  if (typeof ArrayBuffer !== "undefined") {
+    if (node instanceof ArrayBuffer) return node.byteLength;
+    if (ArrayBuffer.isView(node)) return node.byteLength;
+  }
+  if (typeof SharedArrayBuffer !== "undefined" && node instanceof SharedArrayBuffer) {
+    return node.byteLength;
+  }
+  if (typeof URLSearchParams !== "undefined" && node instanceof URLSearchParams) {
+    return node.toString().length;
+  }
+  return null;
+}
 function estimateBytes(value) {
   let total = 0;
   const seen = /* @__PURE__ */ new WeakSet();
@@ -141,6 +218,11 @@ function estimateBytes(value) {
         return;
     }
     if (typeof node !== "object") return;
+    const known = knownByteLength(node);
+    if (known !== null) {
+      total += known;
+      return;
+    }
     if (seen.has(node)) {
       total += 8;
       return;
@@ -411,6 +493,103 @@ var NetworkMonitor = class {
 };
 var networkMonitor = new NetworkMonitor();
 
+// src/capture/monitorInitiator.ts
+var NOISE = [
+  /[\\/]node_modules[\\/]axios[\\/]/,
+  /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
+  /[\\/]node_modules[\\/]@tanstack[\\/]/,
+  /monitorInitiator|networkMonitor|monitorPersistence/,
+  /[\\/]core[\\/]network[\\/]axios\.ts/,
+  /node:internal|next[\\/]dist/,
+  /^\s*at (?:Object\.)?(?:Promise|process|async)\b/
+];
+var FRAME_RE = /^\s*at (?:(.+?) \()?(.+?):(\d+):(\d+)\)?$/;
+function tidyPath(file) {
+  const cleaned = file.replace(/^webpack-internal:\/{3}\(.*?\)\/\.?/, "").replace(/^rsc:\/{3}/, "").replace(/\?.*$/, "");
+  const at = cleaned.lastIndexOf("/src/");
+  if (at >= 0) return cleaned.slice(at + 1);
+  const backslash = cleaned.lastIndexOf("\\src\\");
+  if (backslash >= 0) return cleaned.slice(backslash + 1).replace(/\\/g, "/");
+  return cleaned;
+}
+var MAX_FRAMES = 8;
+function parseStack(stack, skipFrames = 0) {
+  if (!stack) return [];
+  const out = [];
+  for (const line of stack.split("\n").slice(1 + skipFrames)) {
+    if (NOISE.some((re) => re.test(line))) continue;
+    const match = FRAME_RE.exec(line);
+    if (!match) continue;
+    const [, fn, file, lineNo, col] = match;
+    out.push({
+      fn: (fn == null ? void 0 : fn.trim()) || void 0,
+      file: tidyPath(file),
+      line: Number(lineNo),
+      col: Number(col)
+    });
+    if (out.length >= MAX_FRAMES) break;
+  }
+  return out;
+}
+function summarizeInitiator(frames) {
+  var _a, _b;
+  if (frames.length === 0) return "";
+  const own = (_a = frames.find((f) => /^src\/(features|shared|app)\//.test(f.file))) != null ? _a : frames[0];
+  const name = own.fn ? `${own.fn} \xB7 ` : "";
+  const file = (_b = own.file.split("/").pop()) != null ? _b : own.file;
+  return `${name}${file}${own.line ? `:${own.line}` : ""}`;
+}
+var captureEnabled = true;
+function setInitiatorCapture(on) {
+  captureEnabled = on;
+}
+function captureFrames(skip = 0) {
+  if (!captureEnabled) return void 0;
+  const previousLimit = Error.stackTraceLimit;
+  try {
+    Error.stackTraceLimit = 24 + 1 + skip;
+    const stack = new Error().stack;
+    return parseStack(stack, 1 + skip);
+  } catch (e) {
+    return void 0;
+  } finally {
+    Error.stackTraceLimit = previousLimit;
+  }
+}
+function withInitiatorCapture(instance) {
+  if (!MONITOR_ENABLED) return instance;
+  const attach = (config) => {
+    if (!config) return config;
+    if (!config.__monitorInitiator) config.__monitorInitiator = captureFrames(2);
+    return config;
+  };
+  const proxy = new Proxy(instance, {
+    apply(target, thisArg, args) {
+      const [config] = args;
+      return Reflect.apply(
+        target,
+        thisArg,
+        [attach(config)]
+      );
+    },
+    get(target, prop, receiver) {
+      const value = Reflect.get(target, prop, receiver);
+      if (typeof value !== "function") return value;
+      if (prop === "request") {
+        return (config) => value.call(target, attach(config));
+      }
+      if (prop === "post" || prop === "put" || prop === "patch") {
+        return (url, data, config) => value.call(target, url, data, attach(config != null ? config : {}));
+      }
+      if (prop === "get" || prop === "delete" || prop === "head") {
+        return (url, config) => value.call(target, url, attach(config != null ? config : {}));
+      }
+      return value.bind(target);
+    }
+  });
+  return proxy;
+}
+
 // src/capture/monitorTruncate.ts
 function truncateForPersist(value, maxBytes) {
   let used = 0;
@@ -940,128 +1119,36 @@ function tapQueryClient(client) {
   };
 }
 
-// src/capture/monitorInitiator.ts
-var NOISE = [
-  /[\\/]node_modules[\\/]axios[\\/]/,
-  /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
-  /[\\/]node_modules[\\/]@tanstack[\\/]/,
-  /monitorInitiator|networkMonitor|monitorPersistence/,
-  /[\\/]core[\\/]network[\\/]axios\.ts/,
-  /node:internal|next[\\/]dist/,
-  /^\s*at (?:Object\.)?(?:Promise|process|async)\b/
-];
-var FRAME_RE = /^\s*at (?:(.+?) \()?(.+?):(\d+):(\d+)\)?$/;
-function tidyPath(file) {
-  const cleaned = file.replace(/^webpack-internal:\/{3}\(.*?\)\/\.?/, "").replace(/^rsc:\/{3}/, "").replace(/\?.*$/, "");
-  const at = cleaned.lastIndexOf("/src/");
-  if (at >= 0) return cleaned.slice(at + 1);
-  const backslash = cleaned.lastIndexOf("\\src\\");
-  if (backslash >= 0) return cleaned.slice(backslash + 1).replace(/\\/g, "/");
-  return cleaned;
-}
-var MAX_FRAMES = 8;
-function parseStack(stack) {
-  if (!stack) return [];
-  const out = [];
-  for (const line of stack.split("\n").slice(1)) {
-    if (NOISE.some((re) => re.test(line))) continue;
-    const match = FRAME_RE.exec(line);
-    if (!match) continue;
-    const [, fn, file, lineNo, col] = match;
-    out.push({
-      fn: (fn == null ? void 0 : fn.trim()) || void 0,
-      file: tidyPath(file),
-      line: Number(lineNo),
-      col: Number(col)
-    });
-    if (out.length >= MAX_FRAMES) break;
-  }
-  return out;
-}
-function summarizeInitiator(frames) {
-  var _a, _b;
-  if (frames.length === 0) return "";
-  const own = (_a = frames.find((f) => /^src\/(features|shared|app)\//.test(f.file))) != null ? _a : frames[0];
-  const name = own.fn ? `${own.fn} \xB7 ` : "";
-  const file = (_b = own.file.split("/").pop()) != null ? _b : own.file;
-  return `${name}${file}${own.line ? `:${own.line}` : ""}`;
-}
-var captureEnabled = true;
-function setInitiatorCapture(on) {
-  captureEnabled = on;
-}
-function captureFrames() {
-  if (!captureEnabled) return void 0;
-  const previousLimit = Error.stackTraceLimit;
-  try {
-    Error.stackTraceLimit = 24;
-    const stack = new Error().stack;
-    return parseStack(stack);
-  } catch (e) {
-    return void 0;
-  } finally {
-    Error.stackTraceLimit = previousLimit;
-  }
-}
-function withInitiatorCapture(instance) {
-  if (!MONITOR_ENABLED) return instance;
-  const attach = (config) => {
-    if (!config) return config;
-    if (!config.__monitorInitiator) config.__monitorInitiator = captureFrames();
-    return config;
-  };
-  const proxy = new Proxy(instance, {
-    apply(target, thisArg, args) {
-      const [config] = args;
-      return Reflect.apply(
-        target,
-        thisArg,
-        [attach(config)]
-      );
-    },
-    get(target, prop, receiver) {
-      const value = Reflect.get(target, prop, receiver);
-      if (typeof value !== "function") return value;
-      if (prop === "request") {
-        return (config) => value.call(target, attach(config));
-      }
-      if (prop === "post" || prop === "put" || prop === "patch") {
-        return (url, data, config) => value.call(
-          target,
-          url,
-          data,
-          attach(config != null ? config : {})
-        );
-      }
-      if (prop === "get" || prop === "delete" || prop === "head") {
-        return (url, config) => value.call(target, url, attach(config != null ? config : {}));
-      }
-      return value.bind(target);
-    }
-  });
-  return proxy;
-}
-
 export {
   __spreadValues,
   __spreadProps,
   MONITOR_ENABLED,
   NM_SCHEMA_VERSION,
+  DB_PREFIX,
+  LEGACY_DB_NAME,
   NM_DB_VERSION,
+  markDbOpened,
   configureDbName,
   getActiveDbName,
+  isSharedDefaultDb,
   MAX_ENTRIES,
   PERSIST_MAX_ENTRIES,
   PERSIST_MAX_BYTES,
   PERSIST_MAX_ENTRY_BYTES,
   SEARCH_INDEX_CAP,
-  PENDING_WINDOW_CAP_MS,
   now,
   getOwner,
   serializeBody,
+  SENSITIVE_HEADERS,
+  MASK_SUFFIX,
+  flattenHeaders,
   serializeHeaders,
   estimateBytes,
   networkMonitor,
+  summarizeInitiator,
+  setInitiatorCapture,
+  captureFrames,
+  withInitiatorCapture,
   truncateForPersist,
   isTruncationMarker,
   setReduxIgnoreList,
@@ -1069,8 +1156,5 @@ export {
   markReplaying,
   createReduxMonitorMiddleware,
   getTappedQueryClient,
-  tapQueryClient,
-  summarizeInitiator,
-  setInitiatorCapture,
-  withInitiatorCapture
+  tapQueryClient
 };

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-export { CacheLike, Corner, DiffOp, DockMode, EncryptedPayload, FrameDirection, InitiatorFrame, MiddlewareApiLike, MiddlewareLike, MonitorEntry, MonitorKind, MonitorPrefs, MonitorState, PersistedEntry, Pos, QueryClientLike, QueryMeta, RealtimeAdapterLike, ReduxActionMeta, ReduxCaptureOptions, Size, StateDiff, StateDiffEntry, TimingMarks, WsFrame, attachHttpMonitor, captureEncrypted, createReduxMonitorMiddleware, tapQueryClient, tapRealtimeAdapter, withInitiatorCapture } from './capture/index.js';
+export { CacheLike, Corner, DiffOp, DockMode, EncryptedPayload, FetchIgnoreRule, FetchMonitorOptions, FrameDirection, InitiatorFrame, MiddlewareApiLike, MiddlewareLike, MonitorEntry, MonitorKind, MonitorPrefs, MonitorState, PersistedEntry, Pos, QueryClientLike, QueryMeta, RealtimeAdapterLike, ReduxActionMeta, ReduxCaptureOptions, Size, StateDiff, StateDiffEntry, TimingMarks, WsFrame, attachFetchMonitor, attachHttpMonitor, captureEncrypted, createReduxMonitorMiddleware, tapQueryClient, tapRealtimeAdapter, withInitiatorCapture } from './capture/index.js';
 import * as react from 'react';
-import 'axios';
 
 /** Structural redux-store shape — only the subset the panel actually uses.
  * Mirrors `MiddlewareApiLike` in `reduxCapture.ts` but adds `subscribe` and
@@ -66,8 +65,9 @@ interface HttpClientLike {
 interface BlixProps {
     store?: StoreLike<unknown>;
     apiClient?: HttpClientLike;
-    /** IndexedDB database name. Defaults to "nm-devtools". Useful when running
-     * multiple apps on the same origin that would otherwise share a log. */
+    /** IndexedDB database name, prefixed to `blix:<dbName>`. Defaults to
+     * `blix:default`. Useful when running multiple apps on the same origin that
+     * would otherwise share a log. */
     dbName?: string;
 }
 declare function Blix({ store, apiClient, dbName }: BlixProps): react.JSX.Element | null;

package/dist/index.js

@@ -1,9 +1,10 @@
 "use client";
 import {
+  attachFetchMonitor,
   attachHttpMonitor,
   captureEncrypted,
   tapRealtimeAdapter
-} from "./chunk-OQHKPRNI.js";
+} from "./chunk-4JZEVUOR.js";
 import {
   BlixContext
 } from "./chunk-PQIOIMAQ.js";
@@ -12,16 +13,23 @@ import {
   createReduxMonitorMiddleware,
   tapQueryClient,
   withInitiatorCapture
-} from "./chunk-MRTSIXR7.js";
+} from "./chunk-FIYP47QZ.js";
 
 // src/ui/Blix.tsx
-import { lazy, Suspense, useRef } from "react";
+import { lazy, Suspense, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 function Blix({ store, apiClient, dbName }) {
   const panelRef = useRef(null);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return;
+    if (dbName) return;
+    console.warn(
+      '[blix] No dbName prop \u2014 using the shared database "blix:default".\nIndexedDB is scoped to the origin, not to your app, so every app served from this origin writes to that one database and entries from other projects will appear in this panel.\nFix: <Blix dbName="my-app" />\nExisting databases on this origin are listed under \u201CDatabases on this origin\u201D in the command palette (Ctrl/\u2318 K).'
+    );
+  }, []);
   if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
     if (!panelRef.current) {
-      panelRef.current = lazy(() => import("./DevToolsPanel-TXMT43YN.js"));
+      panelRef.current = lazy(() => import("./DevToolsPanel-QTVFBNU5.js"));
     }
     const Panel = panelRef.current;
     if (dbName) configureDbName(dbName);
@@ -31,6 +39,7 @@ function Blix({ store, apiClient, dbName }) {
 }
 export {
   Blix,
+  attachFetchMonitor,
   attachHttpMonitor,
   captureEncrypted,
   createReduxMonitorMiddleware,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hakam-aldeen-kh/blix",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Dev-tools panel for React apps — HTTP, Redux, Query and Realtime monitoring.",
   "keywords": [
     "devtools",
@@ -90,6 +90,7 @@
     "@types/node": "^20.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "axios": "^1.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsup": "^8.0.0",