dev-inspector 1.0.3 → 1.0.5

package/README.md

@@ -1,7 +1,18 @@
 # Dev Inspector
 
+[![npm](https://img.shields.io/npm/v/dev-inspector.svg)](https://www.npmjs.com/package/dev-inspector)
+[![downloads](https://img.shields.io/npm/dm/dev-inspector.svg)](https://www.npmjs.com/package/dev-inspector)
+[![license](https://img.shields.io/npm/l/dev-inspector.svg)](./LICENSE)
+
 In-page devtools-style logger panel for web apps. Capture **console** and **network** activity, store it in memory, and render it inside a lightweight UI panel.
 
+![Dev Inspector preview](./assets/dev-inspector.png)
+
+## Links
+
+- **Website / Live demo**: `https://dev-inspector.alibugatekin.com/`
+- **npm**: `https://www.npmjs.com/package/dev-inspector`
+
 ## Features
 
 - Console interception: `log/info/warn/error/debug`
@@ -48,22 +59,7 @@ async function initInBrowser() {
 initInBrowser();
 ```
 
-If you want manual control, you can keep the returned handles:
-
-```ts
-import { initDevInspector } from "dev-inspector";
-
-const { storage, destroy } = initDevInspector({
-  maxSize: 500,
-  networkOptions: { includeBodies: false },
-  panelOptions: { initiallyOpen: true, title: "Dev Inspector" },
-});
-
-storage.clear();
-destroy();
-```
-
-## Demo (Development)
+## Demo (Local development)
 
 ```bash
 npm install
@@ -72,40 +68,11 @@ npm run demo
 
 The demo page includes interactive generators for console logs and network requests so you can verify the panel quickly.
 
-## API (Summary)
-
-### `initDevInspector(options)`
-
-One-call integration that wires storage + loggers + UI.
-
-- `initDevInspector({ maxSize?, console?, network?, panel?, consoleLevels?, networkOptions?, panelOptions?, storage? })`
-- returns `{ storage, panel?, consoleLogger?, networkLogger?, destroy }`
-
-### `LogStorage`
-
-- `new LogStorage({ maxSize?: number })`
-- `add(entry: LogEntry): void`
-- `getAll(): LogEntry[]`
-- `clear(): void` (emits `cleared`)
-- `onNewLog((entry) => void): () => void` (subscribe/unsubscribe)
-
-### `installConsoleLogger(options)`
-
-Installs console interception and emits `LogEntry` objects.
-
-- `installConsoleLogger({ emit, levels? }) -> { uninstall, installed }`
-
-### `installNetworkLogger(options)`
-
-Installs network interception for `fetch` and `XMLHttpRequest` and emits `LogEntry` objects.
-
-- `installNetworkLogger({ emit, includeBodies?, maxBodyLength? }) -> { uninstall, installed }`
-
-### `createPanel(options)`
+## API
 
-Renders the UI panel and connects it to a `LogStorage`.
+### `initDevInspector()`
 
-- `createPanel({ storage, title?, initiallyOpen?, mount? }) -> { open, close, toggle, destroy, isOpen }`
+One-call integration that installs console + network interception and renders the UI panel.
 
 ## Environment Notes
 

package/lib/index.d.ts

@@ -1,6 +1 @@
-export { installConsoleLogger, type ConsoleLoggerHandle, type ConsoleLoggerOptions, } from "./logger/consoleLogger";
-export { installNetworkLogger, type NetworkLoggerHandle, type NetworkLoggerOptions } from "./logger/networkLogger";
-export { LogStorage, type LogStorageOptions } from "./storage/logStorage";
-export { createPanel, type PanelHandle, type PanelOptions } from "./ui/panel";
-export { init, initDevInspector, type DevInspectorHandle, type DevInspectorInitOptions } from "./init";
-export type { ConsoleLogLevel, LogEntry, LogSource } from "./utils/types";
+export { initDevInspector } from "./init";

package/lib/index.js

@@ -1,14 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initDevInspector = exports.init = exports.createPanel = exports.LogStorage = exports.installNetworkLogger = exports.installConsoleLogger = void 0;
-var consoleLogger_1 = require("./logger/consoleLogger");
-Object.defineProperty(exports, "installConsoleLogger", { enumerable: true, get: function () { return consoleLogger_1.installConsoleLogger; } });
-var networkLogger_1 = require("./logger/networkLogger");
-Object.defineProperty(exports, "installNetworkLogger", { enumerable: true, get: function () { return networkLogger_1.installNetworkLogger; } });
-var logStorage_1 = require("./storage/logStorage");
-Object.defineProperty(exports, "LogStorage", { enumerable: true, get: function () { return logStorage_1.LogStorage; } });
-var panel_1 = require("./ui/panel");
-Object.defineProperty(exports, "createPanel", { enumerable: true, get: function () { return panel_1.createPanel; } });
+exports.initDevInspector = void 0;
 var init_1 = require("./init");
-Object.defineProperty(exports, "init", { enumerable: true, get: function () { return init_1.init; } });
 Object.defineProperty(exports, "initDevInspector", { enumerable: true, get: function () { return init_1.initDevInspector; } });

package/lib/init.d.ts

@@ -1,24 +1,13 @@
-import { type ConsoleLoggerHandle } from "./logger/consoleLogger";
-import { type NetworkLoggerHandle, type NetworkLoggerOptions } from "./logger/networkLogger";
-import { LogStorage } from "./storage/logStorage";
-import { type PanelHandle, type PanelOptions } from "./ui/panel";
-import type { ConsoleLogLevel } from "./utils/types";
-export type DevInspectorInitOptions = {
+type InitOptions = {
     maxSize?: number;
-    storage?: LogStorage;
-    panel?: boolean;
-    panelOptions?: Omit<PanelOptions, "storage">;
-    console?: boolean;
-    consoleLevels?: ConsoleLogLevel[];
-    network?: boolean;
-    networkOptions?: Omit<NetworkLoggerOptions, "emit">;
+    panelOptions?: {
+        title?: string;
+        initiallyOpen?: boolean;
+    };
+    networkOptions?: {
+        includeBodies?: boolean;
+        maxBodyLength?: number;
+    };
 };
-export type DevInspectorHandle = {
-    storage: LogStorage;
-    panel?: PanelHandle;
-    consoleLogger?: ConsoleLoggerHandle;
-    networkLogger?: NetworkLoggerHandle;
-    destroy: () => void;
-};
-export declare function initDevInspector(options?: DevInspectorInitOptions): DevInspectorHandle;
-export declare const init: typeof initDevInspector;
+export declare function initDevInspector(options?: InitOptions): void;
+export {};

package/lib/init.js

@@ -1,51 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.init = void 0;
 exports.initDevInspector = initDevInspector;
 const consoleLogger_1 = require("./logger/consoleLogger");
 const networkLogger_1 = require("./logger/networkLogger");
 const logStorage_1 = require("./storage/logStorage");
 const panel_1 = require("./ui/panel");
+function getGlobalInstanceKey() {
+    return Symbol.for("dev-inspector.instance");
+}
+function getGlobalBag() {
+    return globalThis;
+}
 function initDevInspector(options = {}) {
-    var _a, _b, _c, _d, _e, _f;
-    const storage = (_a = options.storage) !== null && _a !== void 0 ? _a : new logStorage_1.LogStorage({
-        maxSize: options.maxSize,
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const key = getGlobalInstanceKey();
+    const bag = getGlobalBag();
+    const prev = bag[key];
+    if (prev) {
+        try {
+            prev.destroy();
+        }
+        catch (_k) {
+            void 0;
+        }
+    }
+    const storage = new logStorage_1.LogStorage({ maxSize: (_a = options.maxSize) !== null && _a !== void 0 ? _a : 500 });
+    const consoleLogger = (0, consoleLogger_1.installConsoleLogger)({ emit: (e) => storage.add(e) });
+    const networkLogger = (0, networkLogger_1.installNetworkLogger)({
+        emit: (e) => storage.add(e),
+        includeBodies: (_c = (_b = options.networkOptions) === null || _b === void 0 ? void 0 : _b.includeBodies) !== null && _c !== void 0 ? _c : false,
+        maxBodyLength: (_e = (_d = options.networkOptions) === null || _d === void 0 ? void 0 : _d.maxBodyLength) !== null && _e !== void 0 ? _e : 20000,
+    });
+    const panel = (0, panel_1.createPanel)({
+        storage,
+        initiallyOpen: (_g = (_f = options.panelOptions) === null || _f === void 0 ? void 0 : _f.initiallyOpen) !== null && _g !== void 0 ? _g : true,
+        title: (_j = (_h = options.panelOptions) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : "Dev Inspector",
     });
-    const consoleEnabled = (_b = options.console) !== null && _b !== void 0 ? _b : true;
-    const networkEnabled = (_c = options.network) !== null && _c !== void 0 ? _c : true;
-    const panelEnabled = (_d = options.panel) !== null && _d !== void 0 ? _d : true;
-    const consoleLogger = consoleEnabled
-        ? (0, consoleLogger_1.installConsoleLogger)({
-            emit: (e) => storage.add(e),
-            levels: options.consoleLevels,
-        })
-        : undefined;
-    const networkLogger = networkEnabled
-        ? (0, networkLogger_1.installNetworkLogger)(Object.assign({ emit: (e) => storage.add(e) }, ((_e = options.networkOptions) !== null && _e !== void 0 ? _e : {})))
-        : undefined;
-    const panel = panelEnabled
-        ? (0, panel_1.createPanel)(Object.assign({ storage }, ((_f = options.panelOptions) !== null && _f !== void 0 ? _f : {})))
-        : undefined;
     const destroy = () => {
         try {
-            panel === null || panel === void 0 ? void 0 : panel.destroy();
+            panel.destroy();
         }
         catch (_a) {
             void 0;
         }
         try {
-            consoleLogger === null || consoleLogger === void 0 ? void 0 : consoleLogger.uninstall();
+            consoleLogger.uninstall();
         }
         catch (_b) {
             void 0;
         }
         try {
-            networkLogger === null || networkLogger === void 0 ? void 0 : networkLogger.uninstall();
+            networkLogger.uninstall();
         }
         catch (_c) {
             void 0;
         }
     };
-    return { storage, panel, consoleLogger, networkLogger, destroy };
+    bag[key] = { destroy };
 }
-exports.init = initDevInspector;

package/lib/logger/networkLogger.js

@@ -14,12 +14,12 @@ function safeToString(value) {
         return "[unstringifiable]";
     }
 }
-function truncateString(value, maxLen) {
+function truncateStringMeta(value, maxLen) {
     if (maxLen <= 0)
-        return "";
+        return { value: "", truncated: value.length > 0 };
     if (value.length <= maxLen)
-        return value;
-    return value.slice(0, maxLen);
+        return { value, truncated: false };
+    return { value: value.slice(0, maxLen), truncated: true };
 }
 function coerceUrl(input) {
     if (typeof input === "string")
@@ -52,7 +52,8 @@ function formatUrlForMessage(raw) {
 async function readResponseBody(response, maxLen) {
     try {
         const text = await response.text();
-        return truncateString(text, maxLen);
+        const t = truncateStringMeta(text, maxLen);
+        return { body: t.value, truncated: t.truncated };
     }
     catch (_a) {
         return undefined;
@@ -79,30 +80,40 @@ function installNetworkLogger(options) {
     const originalXhrSend = canXhr ? g.XMLHttpRequest.prototype.send : undefined;
     if (canFetch) {
         g.fetch = (async (...args) => {
-            var _a;
+            var _a, _b;
             const id = createId();
             let method;
             let url;
             let requestBody;
+            let requestBodyTruncated = false;
             try {
                 const [input, init] = args;
                 url = coerceUrl(input);
                 const reqMethodFromInit = init === null || init === void 0 ? void 0 : init.method;
                 const reqMethodFromInput = input && typeof input.method === "string" ? input.method : undefined;
                 method = ((_a = reqMethodFromInit !== null && reqMethodFromInit !== void 0 ? reqMethodFromInit : reqMethodFromInput) !== null && _a !== void 0 ? _a : "GET").toUpperCase();
-                if (includeBodies && init && "body" in init)
+                if (includeBodies && init && "body" in init) {
                     requestBody = init.body;
+                    if (typeof requestBody === "string") {
+                        const t = truncateStringMeta(requestBody, maxBodyLength);
+                        requestBody = t.value;
+                        requestBodyTruncated = t.truncated;
+                    }
+                }
             }
-            catch (_b) {
+            catch (_c) {
                 void 0;
             }
             try {
                 const res = await Reflect.apply(originalFetch, globalThis, args);
                 const status = res.status;
                 let responseBody;
+                let responseBodyTruncated = false;
                 if (includeBodies) {
                     const cloned = res.clone();
-                    responseBody = await readResponseBody(cloned, maxBodyLength);
+                    const r = await readResponseBody(cloned, maxBodyLength);
+                    responseBody = r === null || r === void 0 ? void 0 : r.body;
+                    responseBodyTruncated = (_b = r === null || r === void 0 ? void 0 : r.truncated) !== null && _b !== void 0 ? _b : false;
                 }
                 if (active) {
                     const entry = {
@@ -113,7 +124,10 @@ function installNetworkLogger(options) {
                         url,
                         status,
                         requestBody: includeBodies ? requestBody : undefined,
+                        requestBodyTruncated: includeBodies ? requestBodyTruncated : undefined,
                         responseBody: includeBodies ? responseBody : undefined,
+                        responseBodyTruncated: includeBodies ? responseBodyTruncated : undefined,
+                        bodyMaxLength: includeBodies ? maxBodyLength : undefined,
                         message: makeMessage({ method, url, status }),
                     };
                     options.emit(entry);
@@ -130,7 +144,10 @@ function installNetworkLogger(options) {
                         url,
                         status: undefined,
                         requestBody: includeBodies ? requestBody : undefined,
+                        requestBodyTruncated: includeBodies ? requestBodyTruncated : undefined,
                         responseBody: includeBodies ? safeToString(err) : undefined,
+                        responseBodyTruncated: undefined,
+                        bodyMaxLength: includeBodies ? maxBodyLength : undefined,
                         message: makeMessage({ method, url, status: undefined }),
                     };
                     options.emit(entry);
@@ -156,9 +173,15 @@ function installNetworkLogger(options) {
         proto.send = function (...args) {
             var _a;
             const meta = (_a = xhrMeta.get(this)) !== null && _a !== void 0 ? _a : { id: createId() };
+            let requestBodyTruncated = false;
             if (includeBodies) {
                 try {
                     meta.requestBody = args[0];
+                    if (typeof meta.requestBody === "string") {
+                        const t = truncateStringMeta(meta.requestBody, maxBodyLength);
+                        meta.requestBody = t.value;
+                        requestBodyTruncated = t.truncated;
+                    }
                 }
                 catch (_b) {
                     void 0;
@@ -168,10 +191,14 @@ function installNetworkLogger(options) {
             const onLoadEnd = () => {
                 const status = typeof this.status === "number" ? this.status : undefined;
                 let responseBody;
+                let responseBodyTruncated = false;
                 if (includeBodies) {
                     try {
-                        if (typeof this.responseText === "string")
-                            responseBody = truncateString(this.responseText, maxBodyLength);
+                        if (typeof this.responseText === "string") {
+                            const t = truncateStringMeta(this.responseText, maxBodyLength);
+                            responseBody = t.value;
+                            responseBodyTruncated = t.truncated;
+                        }
                         else
                             responseBody = undefined;
                     }
@@ -188,7 +215,10 @@ function installNetworkLogger(options) {
                         url: meta.url,
                         status,
                         requestBody: includeBodies ? meta.requestBody : undefined,
+                        requestBodyTruncated: includeBodies ? requestBodyTruncated : undefined,
                         responseBody: includeBodies ? responseBody : undefined,
+                        responseBodyTruncated: includeBodies ? responseBodyTruncated : undefined,
+                        bodyMaxLength: includeBodies ? maxBodyLength : undefined,
                         message: makeMessage({ method: meta.method, url: meta.url, status }),
                     };
                     options.emit(entry);

package/lib/ui/logList/createLogList.d.ts

@@ -0,0 +1,2 @@
+import type { LogList } from "./types";
+export declare function createLogList(doc: Document): LogList;

package/lib/ui/logList/createLogList.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogList = createLogList;
+const jsonViewer_1 = require("../jsonViewer");
+const networkDetails_1 = require("./networkDetails");
+const shared_1 = require("./shared");
+const shared_2 = require("./shared");
+function createLogList(doc) {
+    const el = doc.createElement("ul");
+    el.className = "di-list";
+    const append = (entry) => {
+        const li = doc.createElement("li");
+        const tone = (0, shared_2.toneForEntry)(entry);
+        li.className = `di-item ${(0, shared_2.classForTone)(tone)}`;
+        const meta = doc.createElement("div");
+        meta.className = "di-meta";
+        const time = doc.createElement("span");
+        time.textContent = (0, shared_2.fmtTime)(entry.timestamp);
+        const source = doc.createElement("span");
+        source.textContent = entry.source;
+        const detail = doc.createElement("span");
+        if (entry.source === "console") {
+            detail.textContent = entry.level;
+        }
+        else {
+            detail.className = `di-statusChip ${(0, shared_2.isNetworkFailure)(entry) ? "di-statusChipError" : "di-statusChipSuccess"}`;
+            detail.textContent = typeof entry.status === "number" ? String(entry.status) : "ERR";
+        }
+        meta.append(time, source, detail);
+        li.append(meta);
+        if (entry.message && entry.message.trim().length > 0) {
+            const msg = doc.createElement("div");
+            msg.className = "di-msg";
+            msg.textContent = entry.message;
+            li.append(msg);
+        }
+        if (entry.source === "console") {
+            const inspectable = (0, shared_1.getInspectableArgs)(entry.args);
+            if (inspectable.length > 0) {
+                const details = doc.createElement("details");
+                details.className = "di-details";
+                const summary = doc.createElement("summary");
+                summary.className = "di-detailsSummary";
+                summary.textContent = "Inspect";
+                const viewerWrap = doc.createElement("div");
+                viewerWrap.className = "di-detailsBody";
+                viewerWrap.append((0, jsonViewer_1.createJsonViewer)(doc, inspectable.length === 1 ? inspectable[0] : inspectable, {
+                    maxDepth: 6,
+                    maxKeys: 200,
+                    maxNodes: 2000,
+                }));
+                details.append(summary, viewerWrap);
+                li.append(details);
+            }
+        }
+        if (entry.source === "network") {
+            const details = (0, networkDetails_1.createNetworkDetails)(doc, entry);
+            if (details)
+                li.append(details);
+        }
+        el.append(li);
+    };
+    const clear = () => {
+        el.replaceChildren();
+    };
+    return { el, append, clear };
+}

package/lib/ui/logList/index.d.ts

@@ -0,0 +1,2 @@
+export { createLogList } from "./createLogList";
+export type { LogList } from "./types";

package/lib/ui/logList/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogList = void 0;
+var createLogList_1 = require("./createLogList");
+Object.defineProperty(exports, "createLogList", { enumerable: true, get: function () { return createLogList_1.createLogList; } });

package/lib/ui/logList/networkDetails/copy.d.ts

@@ -0,0 +1,2 @@
+export declare function launchMiniConfetti(anchor: HTMLElement): void;
+export declare function copyText(text: string): Promise<boolean>;

package/lib/ui/logList/networkDetails/copy.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.launchMiniConfetti = launchMiniConfetti;
+exports.copyText = copyText;
+function prefersReducedMotion() {
+    var _a, _b;
+    try {
+        const mm = globalThis;
+        return ((_b = (_a = mm.matchMedia) === null || _a === void 0 ? void 0 : _a.call(mm, "(prefers-reduced-motion: reduce)")) === null || _b === void 0 ? void 0 : _b.matches) === true;
+    }
+    catch (_c) {
+        return false;
+    }
+}
+function rand(min, max) {
+    return min + Math.random() * (max - min);
+}
+function launchMiniConfetti(anchor) {
+    if (prefersReducedMotion())
+        return;
+    if (typeof document === "undefined")
+        return;
+    const rect = anchor.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const root = document.createElement("div");
+    root.style.position = "fixed";
+    root.style.left = "0";
+    root.style.top = "0";
+    root.style.width = "0";
+    root.style.height = "0";
+    root.style.pointerEvents = "none";
+    root.style.zIndex = "2147483647";
+    document.body.append(root);
+    const colors = ["#a7ff00", "#7c5cff", "#00c4ff", "#ff9030", "#ef4444"];
+    const n = 14;
+    const duration = 520;
+    for (let i = 0; i < n; i += 1) {
+        const p = document.createElement("span");
+        const size = Math.round(rand(3, 6));
+        p.style.position = "fixed";
+        p.style.left = `${cx}px`;
+        p.style.top = `${cy}px`;
+        p.style.width = `${size}px`;
+        p.style.height = `${size}px`;
+        p.style.borderRadius = Math.random() < 0.35 ? "999px" : "2px";
+        p.style.background = colors[i % colors.length];
+        p.style.opacity = "1";
+        p.style.willChange = "transform, opacity";
+        root.append(p);
+        const angle = rand(0, Math.PI * 2);
+        const dist = rand(18, 46);
+        const dx = Math.cos(angle) * dist;
+        const dy = Math.sin(angle) * dist + rand(8, 16);
+        const rot = rand(-220, 220);
+        const delay = Math.round(rand(0, 60));
+        try {
+            const anim = p.animate([
+                { transform: `translate(-50%, -50%) translate(0px, 0px) rotate(0deg) scale(1)`, opacity: 1 },
+                { transform: `translate(-50%, -50%) translate(${dx}px, ${dy}px) rotate(${rot}deg) scale(0.9)`, opacity: 0 },
+            ], { duration, delay, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)", fill: "forwards" });
+            anim.addEventListener("finish", () => p.remove());
+        }
+        catch (_a) {
+            globalThis.setTimeout(() => p.remove(), duration + delay + 50);
+        }
+    }
+    globalThis.setTimeout(() => root.remove(), duration + 120);
+}
+async function copyText(text) {
+    var _a, _b;
+    try {
+        const nav = globalThis;
+        const fn = (_b = (_a = nav.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText;
+        if (typeof fn === "function") {
+            await fn(text);
+            return true;
+        }
+    }
+    catch (_c) {
+        void 0;
+    }
+    try {
+        if (typeof document === "undefined")
+            return false;
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "true");
+        ta.style.position = "fixed";
+        ta.style.left = "-9999px";
+        ta.style.top = "0";
+        document.body.append(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        ta.remove();
+        return ok;
+    }
+    catch (_d) {
+        return false;
+    }
+}

package/lib/ui/logList/networkDetails/createNetworkDetails.d.ts

@@ -0,0 +1,2 @@
+import type { NetworkLogEntry } from "../../../utils/types";
+export declare function createNetworkDetails(doc: Document, entry: NetworkLogEntry): HTMLElement | null;

package/lib/ui/logList/networkDetails/createNetworkDetails.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNetworkDetails = createNetworkDetails;
+const copy_1 = require("./copy");
+const renderValue_1 = require("./renderValue");
+function createBodyDetails(doc, title, value, truncated, maxLen) {
+    const details = doc.createElement("details");
+    details.className = "di-details di-netBodyDetails";
+    const summary = doc.createElement("summary");
+    summary.className = "di-detailsSummary di-netDetailsSummary";
+    const titleEl = doc.createElement("span");
+    titleEl.className = "di-netDetailsTitle";
+    titleEl.textContent = title;
+    const copyBtn = doc.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "di-copyBtn";
+    copyBtn.textContent = "Copy";
+    copyBtn.setAttribute("aria-label", `Copy ${title.toLowerCase()}`);
+    copyBtn.addEventListener("click", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const txt = (0, renderValue_1.valueToCopyText)(value);
+        void (0, copy_1.copyText)(txt).then((ok) => {
+            if (!ok)
+                return;
+            (0, copy_1.launchMiniConfetti)(copyBtn);
+            const prev = copyBtn.textContent;
+            copyBtn.textContent = "Copied";
+            globalThis.setTimeout(() => {
+                copyBtn.textContent = prev !== null && prev !== void 0 ? prev : "Copy";
+            }, 900);
+        });
+    });
+    summary.append(titleEl, copyBtn);
+    const body = doc.createElement("div");
+    body.className = "di-detailsBody";
+    if (truncated) {
+        const warn = doc.createElement("div");
+        warn.className = "di-netTrunc";
+        warn.textContent = typeof maxLen === "number" ? `Truncated to first ${maxLen} characters.` : "Truncated.";
+        body.append(warn);
+    }
+    body.append((0, renderValue_1.valueToElement)(doc, value));
+    details.append(summary, body);
+    return details;
+}
+function createNetworkDetails(doc, entry) {
+    const hasReq = typeof entry.requestBody !== "undefined";
+    const hasRes = typeof entry.responseBody !== "undefined";
+    if (!hasReq && !hasRes)
+        return null;
+    const wrap = doc.createElement("div");
+    wrap.className = "di-netDetailsWrap";
+    if (hasReq) {
+        wrap.append(createBodyDetails(doc, "Request", entry.requestBody, entry.requestBodyTruncated === true, entry.bodyMaxLength));
+    }
+    if (hasRes) {
+        wrap.append(createBodyDetails(doc, "Response", entry.responseBody, entry.responseBodyTruncated === true, entry.bodyMaxLength));
+    }
+    return wrap;
+}

package/lib/ui/logList/networkDetails/index.d.ts

@@ -0,0 +1 @@
+export { createNetworkDetails } from "./createNetworkDetails";

package/lib/ui/logList/networkDetails/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNetworkDetails = void 0;
+var createNetworkDetails_1 = require("./createNetworkDetails");
+Object.defineProperty(exports, "createNetworkDetails", { enumerable: true, get: function () { return createNetworkDetails_1.createNetworkDetails; } });

package/lib/ui/logList/networkDetails/renderValue.d.ts

@@ -0,0 +1,2 @@
+export declare function valueToElement(doc: Document, value: unknown): HTMLElement;
+export declare function valueToCopyText(value: unknown): string;