dev-inspector 1.0.2 → 1.0.4

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/ui/logList/networkDetails.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.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNetworkDetails = createNetworkDetails;
+const jsonViewer_1 = require("../jsonViewer");
+function tryParseJson(text) {
+    const t = text.trim();
+    if (t.length < 2)
+        return undefined;
+    const looksLikeObject = t.startsWith("{") && t.endsWith("}");
+    const looksLikeArray = t.startsWith("[") && t.endsWith("]");
+    if (!looksLikeObject && !looksLikeArray)
+        return undefined;
+    try {
+        return JSON.parse(t);
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function valueToElement(doc, value) {
+    if (typeof value === "string") {
+        const parsed = tryParseJson(value);
+        if (parsed && typeof parsed === "object") {
+            return (0, jsonViewer_1.createJsonViewer)(doc, parsed, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
+        }
+        const el = doc.createElement("div");
+        el.className = "di-netBodyText";
+        el.textContent = value;
+        return el;
+    }
+    if (value instanceof Error) {
+        const el = doc.createElement("div");
+        el.className = "di-netBodyText";
+        el.textContent = `${value.name}: ${value.message}`;
+        return el;
+    }
+    if (value === null || typeof value !== "object") {
+        const el = doc.createElement("div");
+        el.className = "di-netBodyText";
+        el.textContent = String(value);
+        return el;
+    }
+    return (0, jsonViewer_1.createJsonViewer)(doc, value, { maxDepth: 6, maxKeys: 200, maxNodes: 2000 });
+}
+function appendSection(doc, wrap, label, value) {
+    if (typeof value === "undefined")
+        return;
+    const section = doc.createElement("div");
+    section.className = "di-netBodySection";
+    const title = doc.createElement("div");
+    title.className = "di-netBodyLabel";
+    title.textContent = label;
+    section.append(title, valueToElement(doc, value));
+    wrap.append(section);
+}
+function createNetworkDetails(doc, entry) {
+    const hasReq = typeof entry.requestBody !== "undefined";
+    const hasRes = typeof entry.responseBody !== "undefined";
+    if (!hasReq && !hasRes)
+        return null;
+    const details = doc.createElement("details");
+    details.className = "di-details";
+    const summary = doc.createElement("summary");
+    summary.className = "di-detailsSummary";
+    summary.textContent = "Body";
+    const body = doc.createElement("div");
+    body.className = "di-detailsBody";
+    const grid = doc.createElement("div");
+    grid.className = "di-netBodies";
+    appendSection(doc, grid, "Request body", entry.requestBody);
+    appendSection(doc, grid, "Response body", entry.responseBody);
+    body.append(grid);
+    details.append(summary, body);
+    return details;
+}

package/lib/ui/logList.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLogList = createLogList;
 const jsonViewer_1 = require("./jsonViewer");
+const networkDetails_1 = require("./logList/networkDetails");
 function fmtTime(ts) {
     const d = new Date(ts);
     const hh = String(d.getHours()).padStart(2, "0");
@@ -102,6 +103,11 @@ function createLogList(doc) {
                 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 = () => {

package/lib/ui/panel/behavior/index.d.ts

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

package/lib/ui/panel/behavior/index.js

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

package/lib/ui/panel/behavior/setupPanelBehavior.d.ts

@@ -0,0 +1,5 @@
+import type { LogStorage } from "../../../storage/logStorage";
+import type { PanelHandle } from "..";
+import type { PanelDOM } from "../dom/types";
+import type { PanelState } from "../state/types";
+export declare function setupPanelBehavior(dom: PanelDOM, state: PanelState, storage: LogStorage): PanelHandle;

package/lib/ui/panel/behavior/setupPanelBehavior.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupPanelBehavior = setupPanelBehavior;
+const bindings_1 = require("../bindings");
+const resize_1 = require("../resize");
+function setupPanelBehavior(dom, state, storage) {
+    const applyVisibility = () => {
+        if (state.open)
+            dom.panel.classList.remove("di-hidden");
+        else
+            dom.panel.classList.add("di-hidden");
+    };
+    const updateTabStyles = () => {
+        if (state.tab === "console") {
+            dom.consoleTab.classList.add("di-tabActive");
+            dom.networkTab.classList.remove("di-tabActive");
+        }
+        else {
+            dom.networkTab.classList.add("di-tabActive");
+            dom.consoleTab.classList.remove("di-tabActive");
+        }
+    };
+    const bindings = (0, bindings_1.bindStorageToPanelView)({
+        storage,
+        state,
+        list: dom.list,
+        body: dom.body,
+        counters: dom.counters,
+        updateTabStyles,
+    });
+    applyVisibility();
+    updateTabStyles();
+    const resizeControls = (0, resize_1.attachResizeHandling)(dom.panel, dom.resizeHandle);
+    const open = () => {
+        state.open = true;
+        applyVisibility();
+    };
+    const close = () => {
+        state.open = false;
+        applyVisibility();
+    };
+    const toggle = () => {
+        state.open = !state.open;
+        applyVisibility();
+    };
+    const onToggleClick = () => toggle();
+    const onCloseClick = () => close();
+    const onClearClick = () => storage.clear();
+    const onConsoleTab = () => {
+        state.tab = "console";
+        updateTabStyles();
+        bindings.renderActiveTab();
+    };
+    const onNetworkTab = () => {
+        state.tab = "network";
+        updateTabStyles();
+        bindings.renderActiveTab();
+    };
+    dom.toggleBtn.addEventListener("click", onToggleClick);
+    dom.closeBtn.addEventListener("click", onCloseClick);
+    dom.clearBtn.addEventListener("click", onClearClick);
+    dom.consoleTab.addEventListener("click", onConsoleTab);
+    dom.networkTab.addEventListener("click", onNetworkTab);
+    const destroy = () => {
+        dom.toggleBtn.removeEventListener("click", onToggleClick);
+        dom.closeBtn.removeEventListener("click", onCloseClick);
+        dom.clearBtn.removeEventListener("click", onClearClick);
+        dom.consoleTab.removeEventListener("click", onConsoleTab);
+        dom.networkTab.removeEventListener("click", onNetworkTab);
+        resizeControls.destroy();
+        bindings.destroy();
+        dom.root.remove();
+    };
+    return { open, close, toggle, destroy, isOpen: () => state.open };
+}

package/lib/ui/panel/bindings/bindStorageToPanelView.d.ts

@@ -0,0 +1,16 @@
+import type { LogEntry } from "../../../utils/types";
+import type { LogStorage } from "../../../storage/logStorage";
+import type { PanelCountersDOM } from "../dom/types";
+import type { PanelState } from "../state/types";
+import type { DataBindings } from "./types";
+export declare function bindStorageToPanelView(args: {
+    storage: LogStorage;
+    state: PanelState;
+    list: {
+        clear: () => void;
+        append: (entry: LogEntry) => void;
+    };
+    body: HTMLElement;
+    counters: PanelCountersDOM;
+    updateTabStyles: () => void;
+}): DataBindings;

package/lib/ui/panel/bindings/bindStorageToPanelView.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindStorageToPanelView = bindStorageToPanelView;
+function bindStorageToPanelView(args) {
+    const isConsoleError = (e) => e.source === "console" && e.level === "error";
+    const isNetworkError = (e) => e.source === "network" && (typeof e.status !== "number" || e.status >= 400);
+    const updateCounts = () => {
+        args.counters.headerConsoleCount.textContent = String(args.state.entries.console.length);
+        args.counters.headerNetworkCount.textContent = String(args.state.entries.network.length);
+        args.counters.toggleConsoleCount.textContent = String(args.state.entries.console.length);
+        args.counters.toggleNetworkCount.textContent = String(args.state.entries.network.length);
+        args.counters.toggleConsoleErrorCount.textContent = String(args.state.errorCounts.console);
+        args.counters.toggleNetworkErrorCount.textContent = String(args.state.errorCounts.network);
+        args.counters.toggleConsoleErrorWrap.style.display = args.state.errorCounts.console > 0 ? "inline-flex" : "none";
+        args.counters.toggleNetworkErrorWrap.style.display = args.state.errorCounts.network > 0 ? "inline-flex" : "none";
+    };
+    const renderActiveTab = () => {
+        args.list.clear();
+        args.state.entries[args.state.tab].forEach((e) => args.list.append(e));
+        args.body.scrollTop = args.body.scrollHeight;
+    };
+    const hydrate = () => {
+        args.state.entries.console = [];
+        args.state.entries.network = [];
+        args.state.errorCounts.console = 0;
+        args.state.errorCounts.network = 0;
+        args.storage.getAll().forEach((e) => {
+            if (e.source === "network") {
+                args.state.entries.network.push(e);
+                if (isNetworkError(e))
+                    args.state.errorCounts.network += 1;
+            }
+            else {
+                args.state.entries.console.push(e);
+                if (isConsoleError(e))
+                    args.state.errorCounts.console += 1;
+            }
+        });
+        updateCounts();
+        args.updateTabStyles();
+        renderActiveTab();
+    };
+    const onNewLog = (entry) => {
+        if (entry.source === "network") {
+            args.state.entries.network.push(entry);
+            if (isNetworkError(entry))
+                args.state.errorCounts.network += 1;
+        }
+        else {
+            args.state.entries.console.push(entry);
+            if (isConsoleError(entry))
+                args.state.errorCounts.console += 1;
+        }
+        updateCounts();
+        if (entry.source === args.state.tab) {
+            args.list.append(entry);
+            args.body.scrollTop = args.body.scrollHeight;
+        }
+    };
+    const unsub = args.storage.onNewLog(onNewLog);
+    const onCleared = () => {
+        args.state.entries.console = [];
+        args.state.entries.network = [];
+        args.state.errorCounts.console = 0;
+        args.state.errorCounts.network = 0;
+        updateCounts();
+        renderActiveTab();
+    };
+    args.storage.addEventListener("cleared", onCleared);
+    hydrate();
+    const destroy = () => {
+        args.storage.removeEventListener("cleared", onCleared);
+        unsub();
+    };
+    return { destroy, renderActiveTab, hydrate };
+}

package/lib/ui/panel/bindings/index.d.ts

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

package/lib/ui/panel/bindings/index.js

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

package/lib/ui/panel/bindings/types.d.ts

@@ -0,0 +1,5 @@
+export type DataBindings = {
+    destroy: () => void;
+    renderActiveTab: () => void;
+    hydrate: () => void;
+};

package/lib/ui/panel/bindings/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/panel/dom/buildPanelDOM.d.ts

@@ -0,0 +1,3 @@
+import type { PanelOptions } from "..";
+import type { PanelDOM } from "./types";
+export declare function buildPanelDOM(doc: Document, options: PanelOptions): PanelDOM;

package/lib/ui/panel/dom/buildPanelDOM.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPanelDOM = buildPanelDOM;
+const logList_1 = require("../../logList");
+const shared_1 = require("../shared");
+const constants_1 = require("./constants");
+function buildPanelDOM(doc, options) {
+    var _a, _b;
+    const mount = (_a = options.mount) !== null && _a !== void 0 ? _a : doc.body;
+    const title = (_b = options.title) !== null && _b !== void 0 ? _b : "Dev Inspector";
+    const root = doc.createElement("div");
+    root.className = "di-root";
+    const toggleBtn = doc.createElement("button");
+    toggleBtn.type = "button";
+    toggleBtn.className = "di-toggle";
+    toggleBtn.setAttribute("aria-label", "Dev Inspector");
+    toggleBtn.innerHTML = constants_1.TOGGLE_BUTTON_HTML;
+    const panel = doc.createElement("div");
+    panel.className = "di-panel";
+    const resizeHandle = doc.createElement("div");
+    resizeHandle.className = "di-resizeHandle";
+    resizeHandle.setAttribute("role", "separator");
+    resizeHandle.setAttribute("aria-label", "Resize panel");
+    const header = doc.createElement("div");
+    header.className = "di-header";
+    const headerRow = doc.createElement("div");
+    headerRow.className = "di-headerRow";
+    const titleEl = doc.createElement("div");
+    titleEl.className = "di-title";
+    titleEl.textContent = title;
+    const actions = doc.createElement("div");
+    actions.className = "di-actions";
+    const clearBtn = doc.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "di-btn";
+    clearBtn.textContent = "Clear";
+    const closeBtn = doc.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "di-btn";
+    closeBtn.textContent = "Close";
+    actions.append(clearBtn, closeBtn);
+    headerRow.append(resizeHandle, titleEl, actions);
+    const tabs = doc.createElement("div");
+    tabs.className = "di-tabs";
+    const consoleTab = doc.createElement("button");
+    consoleTab.type = "button";
+    consoleTab.className = "di-tab";
+    consoleTab.innerHTML = constants_1.CONSOLE_TAB_HTML;
+    const networkTab = doc.createElement("button");
+    networkTab.type = "button";
+    networkTab.className = "di-tab";
+    networkTab.innerHTML = constants_1.NETWORK_TAB_HTML;
+    tabs.append(consoleTab, networkTab);
+    header.append(headerRow, tabs);
+    const body = doc.createElement("div");
+    body.className = "di-body";
+    const list = (0, logList_1.createLogList)(doc);
+    body.append(list.el);
+    panel.append(header, body);
+    root.append(toggleBtn, panel);
+    mount.append(root);
+    const counters = {
+        headerConsoleCount: (0, shared_1.queryOrThrow)(header, '[data-di-count="console"]'),
+        headerNetworkCount: (0, shared_1.queryOrThrow)(header, '[data-di-count="network"]'),
+        toggleConsoleCount: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-count-value="console"]'),
+        toggleNetworkCount: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-count-value="network"]'),
+        toggleConsoleErrorCount: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-error-value="console"]'),
+        toggleNetworkErrorCount: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-error-value="network"]'),
+        toggleConsoleErrorWrap: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-error="console"]'),
+        toggleNetworkErrorWrap: (0, shared_1.queryOrThrow)(toggleBtn, '[data-di-toggle-error="network"]'),
+    };
+    return { root, toggleBtn, panel, header, body, closeBtn, clearBtn, consoleTab, networkTab, resizeHandle, list, counters };
+}

package/lib/ui/panel/dom/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TOGGLE_BUTTON_HTML: string;
+export declare const CONSOLE_TAB_HTML: string;
+export declare const NETWORK_TAB_HTML: string;