@hakam-aldeen-kh/blix 0.8.0 → 0.9.0

package/README.md

@@ -7,7 +7,8 @@ a dockable panel with cross-source links, diffing, replay and HAR/cURL
 export.
 
 The entire panel is eliminated from production builds — see
-[Production elimination](#production-elimination).
+[Production elimination](#production-elimination). To keep it on a staging
+server, see [Enabling Blix in a production build](#enabling-blix-in-a-production-build-staging).
 
 Release notes are in [CHANGELOG.md](https://github.com/Hakam-aldeen-Kh/blix/blob/main/CHANGELOG.md).
 
@@ -397,7 +398,9 @@ never creating one of its own — and the panel updates.
 It is a **silent no-op** — never a throw, never a console warning — in every
 one of these:
 
-- outside development (`process.env.NODE_ENV !== "development"`);
+- outside development (`process.env.NODE_ENV !== "development"`), unless the
+  build opted in with `NEXT_PUBLIC_BLIX=true` (see
+  [staging](#enabling-blix-in-a-production-build-staging));
 - **outside the browser** — the gate is also `typeof window !== "undefined"`,
   so every call made while rendering on the server does nothing, by design (see
   [Production elimination](#production-elimination));
@@ -721,7 +724,11 @@ import { store } from "@/src/store";
 // module graph, which fails the production build. Importing them here keeps
 // that evaluation on the client side of the boundary.
 export default function BlixMount() {
-  if (process.env.NODE_ENV !== "development") return null;
+  if (
+    process.env.NODE_ENV !== "development" &&
+    process.env.NEXT_PUBLIC_BLIX !== "true"
+  )
+    return null;
   return <Blix store={store} apiClient={apiClient} dbName="my-app" />;
 }
 ```
@@ -798,6 +805,14 @@ field carries its own count — `8 of 56` — and a clear button, so you never
 have to read the status bar to know one is applied. `.*` widens the search to
 request and response bodies.
 
+**The red bin beside Export clears the source you are reading**, and only
+that one: emptying Redux leaves Network alone. Pinned entries survive it, and
+it is disabled when the source has nothing left to clear. To empty every
+source at once, use **Clear log** in the overflow menu, or `⇧C`.
+
+The panel opens **floating** the first time. Dock it to the bottom or the
+right from the header; the choice is saved per project.
+
 **`Ctrl/⌘ K` opens the command palette**, and for several things it is the only
 way in — sort order, row density, dock position, the copy formats, the filter
 syntax. The header spends its width on what you read constantly; everything you
@@ -1014,8 +1029,55 @@ payloads for the lifetime of the server. Keeping the server-side singleton
 permanently empty is the point.
 
 Practically: a `captureEncrypted` call that runs during SSR does nothing, and
-`<Blix />` returns `null` there — it checks `typeof window` alongside
-`NODE_ENV` before touching the panel import.
+`<Blix />` renders nothing there. It also renders nothing during hydration, so
+its first client render matches the server's HTML; the panel mounts on the
+render right after. (Before 0.9.0 it branched on `typeof window` instead,
+which Next.js reported as a hydration mismatch on every load.)
+
+### Enabling Blix in a production build (staging)
+
+A staging or test server usually runs a production build, where the panel is
+gone by design. Setting `NODE_ENV=development` for that build does not bring
+it back on Next.js 16: `next build` runs on Turbopack and inlines `NODE_ENV`
+as `"production"` whatever the environment says.
+
+Opt in explicitly instead, in that server's env file:
+
+```bash
+NEXT_PUBLIC_BLIX=true
+```
+
+The panel and the capture layer both check it next to `NODE_ENV`, as the same
+kind of literal comparison, so Next.js inlines it at build time.
+
+> **Set `NEXT_PUBLIC_BLIX=false` in your production env file.** Next.js only
+> inlines variables that are defined. Left unset, the comparison stays in the
+> bundle as a runtime check: the panel still never loads — the variable is
+> undefined in the browser — but its chunk is emitted into your production
+> build. `false` lets the bundler fold the check and drop the chunk.
+
+**Never set `NEXT_PUBLIC_BLIX=true` for a build that real users get.** It
+ships the monitor to them, and with it everything it captures — see
+[Security](#security).
+
+**Your own guards need the variable too.** A mount component that returns
+`null` outside development (as in [Mounting the panel](#mounting-the-panel)),
+or a call-site guard around `attachHttpMonitor` (below), keeps Blix off on
+staging regardless of the variable. Add it to each:
+
+```ts
+if (
+  (process.env.NODE_ENV === "development" ||
+    process.env.NEXT_PUBLIC_BLIX === "true") &&
+  typeof window !== "undefined"
+) {
+  attachHttpMonitor(apiClient);
+}
+```
+
+The variable is read under its `NEXT_PUBLIC_` name, which is a Next.js
+convention. The opt-in has been verified with Next.js 16 (Turbopack) only;
+other bundlers do not inline that name by default.
 
 ### Guard your call sites
 
@@ -1085,10 +1147,12 @@ option to keep a third party's traffic out of the log.
 By default all of that is **in memory only**. Nothing is written to disk, and
 a reload starts clean.
 
-All of it is dev-only regardless. Capture is gated on
+All of it is dev-only unless you opt a build in. Capture is gated on
 `process.env.NODE_ENV === "development" && typeof window !== "undefined"`, and
 the database is opened only when the panel mounts — see
-[Production elimination](#production-elimination).
+[Production elimination](#production-elimination). A build made with
+`NEXT_PUBLIC_BLIX=true` captures exactly as development does, so everything in
+this section applies to whoever uses that build.
 
 ### What reaches disk, and when
 

package/dist/{DevToolsPanel-WD327OP5.js → DevToolsPanel-5XOY5WN5.js}

@@ -30,7 +30,7 @@ import {
   setReduxIgnoreList,
   summarizeInitiator,
   truncateForPersist
-} from "./chunk-2V2YJ5ML.js";
+} from "./chunk-IWI5YFYP.js";
 
 // src/capture/monitorDatabases.ts
 var REGISTRY_KEY = `${DB_PREFIX}databases`;
@@ -469,7 +469,7 @@ var LEGACY_KEYS = [
 ];
 var DEFAULT_PREFS = {
   rev: 0,
-  mode: "bottom",
+  mode: "float",
   bottomH: 420,
   rightW: 520,
   float: { pos: null, size: { w: 920, h: 600 }, maximized: false },
@@ -4699,6 +4699,9 @@ function MonitorToolbar(props) {
     onExportMenu,
     exportOpen,
     exportDisabled,
+    onClearSection,
+    clearDisabled,
+    sectionLabel,
     onThemeMenu,
     themeOpen,
     themeLabel,
@@ -4825,6 +4828,18 @@ function MonitorToolbar(props) {
               children: /* @__PURE__ */ jsx16(Icon, { name: "download", size: 13 })
             }
           ),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              className: "nm-ibtn nm-ibtn-danger",
+              onClick: onClearSection,
+              disabled: clearDisabled,
+              "aria-label": `Clear the ${sectionLabel} log`,
+              title: `Clear the ${sectionLabel} log \u2014 other sources and pinned entries are kept`,
+              children: /* @__PURE__ */ jsx16(Icon, { name: "clear", size: 13 })
+            }
+          ),
           /* @__PURE__ */ jsx16(
             "button",
             {
@@ -8583,6 +8598,9 @@ var HEADER = `
 .nm-ibtn:hover { background: var(--bx-hover); }
 .nm-ibtn.active, .nm-ibtn[aria-expanded="true"] { background: var(--bx-sel); color: var(--bx-fg); }
 .nm-ibtn:disabled { color: var(--bx-mark); cursor: default; background: transparent; }
+/* Destructive: the header's per-source clear. Red while it can do something;
+   the disabled rule above still greys it out when there is nothing to clear. */
+.nm-ibtn-danger:not(:disabled) { color: var(--bx-err); }
 .nm-hsep { width: 1px; height: 16px; flex: none; background: var(--bx-line); }
 `;
 var RAIL = `
@@ -10524,7 +10542,7 @@ var EMPTY_COPY = {
   }
 };
 function DevTools() {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { apiClient } = useContext4(BlixContext);
   const entries = useSyncExternalStore2(
     networkMonitor.subscribe,
@@ -11214,6 +11232,12 @@ function DevTools() {
                   onExportMenu: setExportAnchor,
                   exportOpen: exportAnchor !== null,
                   exportDisabled: entries.length === 0,
+                  onClearSection: () => {
+                    networkMonitor.clear((e) => sectionOf(e) === section);
+                    selection.clear();
+                  },
+                  clearDisabled: !sectionEntries.some((e) => !e.pinned),
+                  sectionLabel: (_f = (_e = SECTION_DEFS.find((s) => s.id === section)) == null ? void 0 : _e.label) != null ? _f : section,
                   onThemeMenu: setThemeAnchor,
                   themeOpen: themeAnchor !== null,
                   themeLabel: theme.label,
@@ -11369,7 +11393,7 @@ function DevTools() {
                   noun: nouns.many,
                   totalBytes: list.totalBytes,
                   slowestMs,
-                  failingHint: (_e = firstFailing == null ? void 0 : firstFailing.url) != null ? _e : null,
+                  failingHint: (_g = firstFailing == null ? void 0 : firstFailing.url) != null ? _g : null,
                   pinnedCount,
                   persistedCount: persisted.count,
                   persistedLabel: prefs2.preserveLog && hydration2 === "ready" ? `${persisted.count} saved \xB7 ${formatBytes(persisted.bytes)}` : null,

package/dist/capture/index.js

@@ -3,12 +3,12 @@ import {
   attachHttpMonitor,
   captureEncrypted,
   tapRealtimeAdapter
-} from "../chunk-GGVNJ6QZ.js";
+} from "../chunk-TV2KC74D.js";
 import {
   createReduxMonitorMiddleware,
   tapQueryClient,
   withInitiatorCapture
-} from "../chunk-2V2YJ5ML.js";
+} from "../chunk-IWI5YFYP.js";
 export {
   attachFetchMonitor,
   attachHttpMonitor,

package/dist/{chunk-2V2YJ5ML.js → chunk-IWI5YFYP.js}

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/capture/monitorConfig.ts
-var MONITOR_ENABLED = process.env.NODE_ENV === "development" && typeof window !== "undefined";
+var MONITOR_ENABLED = (process.env.NODE_ENV === "development" || process.env.NEXT_PUBLIC_BLIX === "true") && typeof window !== "undefined";
 var NM_SCHEMA_VERSION = 1;
 var DB_PREFIX = "blix:";
 var LEGACY_DB_NAME = "nm-devtools";
@@ -386,11 +386,20 @@ var NetworkMonitor = class {
     this.entries = next;
     (_b = this.sink) == null ? void 0 : _b.onDirty(parentId);
   }
-  /** Clears the log, keeping pinned entries — that is what pinning is for. */
-  clear() {
+  /**
+   * Clears the log, keeping pinned entries — that is what pinning is for.
+   *
+   * With `match`, only the unpinned entries it accepts go — the header's
+   * per-source clear passes one, so emptying Redux leaves Network alone. The
+   * predicate comes from the caller because "which source is this entry" is
+   * a panel concept (`sectionOf`), not a capture one.
+   */
+  clear(match) {
     var _a, _b;
-    const survivors = this.entries.filter((e) => e.pinned);
-    const removed = this.entries.filter((e) => !e.pinned).map((e) => e.id);
+    const goes = (e) => !e.pinned && (!match || match(e));
+    const survivors = this.entries.filter((e) => !goes(e));
+    const removed = this.entries.filter(goes).map((e) => e.id);
+    if (removed.length === 0) return;
     this.entries = survivors;
     this.reindex();
     if (survivors.length === 0) {

package/dist/{chunk-GGVNJ6QZ.js → chunk-TV2KC74D.js}

@@ -15,7 +15,7 @@ import {
   serializeBody,
   serializeHeaders,
   truncateForPersist
-} from "./chunk-2V2YJ5ML.js";
+} from "./chunk-IWI5YFYP.js";
 
 // src/capture/monitorStamp.ts
 var MONITOR_ID = /* @__PURE__ */ Symbol.for("blix.monitorId");

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   attachHttpMonitor,
   captureEncrypted,
   tapRealtimeAdapter
-} from "./chunk-GGVNJ6QZ.js";
+} from "./chunk-TV2KC74D.js";
 import {
   BlixContext
 } from "./chunk-PQIOIMAQ.js";
@@ -13,23 +13,31 @@ import {
   createReduxMonitorMiddleware,
   tapQueryClient,
   withInitiatorCapture
-} from "./chunk-2V2YJ5ML.js";
+} from "./chunk-IWI5YFYP.js";
 
 // src/ui/Blix.tsx
-import { lazy, Suspense, useEffect, useRef } from "react";
+import { lazy, Suspense, useEffect, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
+var noopSubscribe = () => () => {
+};
 function Blix({ store, apiClient, dbName }) {
   const panelRef = useRef(null);
+  const mounted = useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
+  );
   useEffect(() => {
-    if (process.env.NODE_ENV !== "development") return;
+    if (process.env.NODE_ENV !== "development" && process.env.NEXT_PUBLIC_BLIX !== "true")
+      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 (mounted && (process.env.NODE_ENV === "development" || process.env.NEXT_PUBLIC_BLIX === "true")) {
     if (!panelRef.current) {
-      panelRef.current = lazy(() => import("./DevToolsPanel-WD327OP5.js"));
+      panelRef.current = lazy(() => import("./DevToolsPanel-5XOY5WN5.js"));
     }
     const Panel = panelRef.current;
     if (dbName) configureDbName(dbName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hakam-aldeen-kh/blix",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Dev-tools panel for React apps — HTTP, Redux, Query and Realtime monitoring.",
   "keywords": [
     "devtools",